@extends('admin.layouts.app')

@section('title', 'Gestion des Catégories')

@section('content')
    <div class="card">
        <div class="card-header">
            <h3 class="card-title">Liste des Catégories</h3>
            @if (hasPermissionOrSuperAdmin('create categories'))
                <div class="card-tools">
                    <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#categoryModal">
                        <i class="fas fa-plus"></i> Nouvelle Catégorie
                    </button>
                </div>
            @endif
        </div>
        <div class="card-body">
            <table id="categories-table" class="table table-bordered table-striped">
                <thead>
                    <tr>
                        <th>Nom</th>
                        <th>Code</th>
                        <th>Description</th>
                        <th>Catégorie Parente</th>
                        <th>Actions</th>
                    </tr>
                </thead>
            </table>
        </div>
    </div>

    {{-- Modal for Create/Edit --}}
    @include('admin.categories.modals.modal')
@endsection

@push('styles')
    <link rel="stylesheet" href="https://cdn.datatables.net/1.11.5/css/dataTables.bootstrap4.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/css/toastr.min.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sweetalert2@11/dist/sweetalert2.min.css">
@endpush

@push('scripts')
    <script src="https://cdn.datatables.net/1.11.5/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.datatables.net/1.11.5/js/dataTables.bootstrap4.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/js/toastr.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

    <script>
        // Configure Toastr
        toastr.options = {
            "closeButton": true,
            "debug": false,
            "newestOnTop": true,
            "progressBar": true,
            "positionClass": "toast-top-right",
            "preventDuplicates": false,
            "showDuration": "300",
            "hideDuration": "1000",
            "timeOut": "5000",
            "extendedTimeOut": "1000",
            "showEasing": "swing",
            "hideEasing": "linear",
            "showMethod": "fadeIn",
            "hideMethod": "fadeOut"
        };

        // Initialize DataTable
        let table = $('#categories-table').DataTable({
            processing: true,
            serverSide: true,
            ajax: "{{ route('admin.categories.getData') }}",
            columns: [{
                    data: 'name',
                    name: 'name'
                },
                {
                    data: 'code',
                    name: 'code'
                },
                {
                    data: 'description',
                    name: 'description'
                },
                {
                    data: 'parent_name',
                    name: 'parent_name'
                },
                {
                    data: 'actions',
                    name: 'actions',
                    orderable: false,
                    searchable: false
                }
            ],
            language: {
                url: '//cdn.datatables.net/plug-ins/1.10.24/i18n/French.json'
            }
        });

        // Add slug generation functionality
        function generateSlug(text) {
            return text
                .toLowerCase()
                .replace(/[éèêë]/g, 'e')
                .replace(/[àâä]/g, 'a')
                .replace(/[îï]/g, 'i')
                .replace(/[ôö]/g, 'o')
                .replace(/[ûüù]/g, 'u')
                .replace(/[ç]/g, 'c')
                .replace(/[^a-z0-9\s-]/g, '')
                .replace(/\s+/g, '-')
                .replace(/-+/g, '-')
                .trim()
                .replace(/^-+|-+$/g, '');
        }

        // Lock code field initially
        $('#code').prop('readonly', true);

        // Add toggle button
        const codeGroup = $('#code').closest('.form-group');
        codeGroup.append(
            '<button type="button" class="btn btn-sm btn-secondary mt-1" id="toggleCodeEdit">Modifier le code</button>');

        // Handle name input
        $('#name').on('input', function() {
            if ($('#code').prop('readonly')) {
                let nameValue = $(this).val();
                let slugValue = generateSlug(nameValue);
                $('#code').val(slugValue);
            }
        });

        // Handle toggle button click
        $('#toggleCodeEdit').on('click', function() {
            const codeInput = $('#code');
            const isReadonly = codeInput.prop('readonly');
            codeInput.prop('readonly', !isReadonly);
            $(this).text(isReadonly ? 'Verrouiller le code' : 'Modifier le code');
            if (!isReadonly) {
                codeInput.focus();
            }
        });

        // Handle form submission
        $('#categoryForm').on('submit', function(e) {
            e.preventDefault();

            let form = $(this);
            let url = form.attr('action') || "{{ route('admin.categories.store') }}";
            let method = $('input[name="_method"]').val() || 'POST';

            $.ajax({
                url: url,
                method: method,
                data: form.serialize(),
                dataType: 'json',
                beforeSend: function() {
                    clearErrors();
                    form.find('button[type="submit"]').prop('disabled', true);
                },
                success: function(response) {
                    if (response.success) {
                        $('#categoryModal').modal('hide');
                        toastr.success(response.success);
                        table.ajax.reload();
                    }
                },
                error: function(xhr) {
                    if (xhr.status === 422) {
                        let errors = xhr.responseJSON.errors;
                        displayErrors(errors);
                    } else {
                        toastr.error(xhr.responseJSON.error || 'Une erreur est survenue');
                    }
                },
                complete: function() {
                    form.find('button[type="submit"]').prop('disabled', false);
                }
            });
        });

        // Edit category function
        function editCategory(categoryId) {
            $.ajax({
                url: `/admin/categories/${categoryId}/edit`,
                method: 'GET',
                success: function(response) {
                    $('#categoryModalLabel').text('Modifier la Catégorie');
                    $('#category_id').val(categoryId);
                    $('#name').val(response.category.name);
                    $('#code').val(response.category.code);
                    $('#description').val(response.category.description);

                    let parentSelect = $('#parent_id');
                    parentSelect.empty().append('<option value="">Aucune</option>');
                    $.each(response.parentCategories, function(id, name) {
                        parentSelect.append($('<option>', {
                            value: id,
                            text: name,
                            selected: id == response.category.parent_id
                        }));
                    });

                    $('input[name="_method"]').val('PUT');
                    $('#categoryForm').attr('action', `/admin/categories/${categoryId}`);
                    $('#categoryModal').modal('show');
                },
                error: function(xhr) {
                    toastr.error(xhr.responseJSON.error ||
                        'Une erreur est survenue lors du chargement de la catégorie');
                }
            });
        }

        // Delete category function
        function deleteCategory(categoryId) {
            Swal.fire({
                title: 'Êtes-vous sûr?',
                text: "Cette action est irréversible!",
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#3085d6',
                cancelButtonColor: '#d33',
                confirmButtonText: 'Oui, supprimer!',
                cancelButtonText: 'Annuler',
                reverseButtons: true
            }).then((result) => {
                if (result.isConfirmed) {
                    $.ajax({
                        url: `/admin/categories/${categoryId}`,
                        method: 'DELETE',
                        data: {
                            _token: '{{ csrf_token() }}'
                        },
                        success: function(response) {
                            toastr.success(response.success);
                            table.ajax.reload();
                        },
                        error: function(xhr) {
                            if (xhr.status === 422) {
                                toastr.error(Object.values(xhr.responseJSON.errors)[0][0]);
                            } else {
                                toastr.error(xhr.responseJSON.error ||
                                    'Une erreur est survenue lors de la suppression');
                            }
                        }
                    });
                }
            });
        }

        // Helper functions
        function clearErrors() {
            $('.is-invalid').removeClass('is-invalid');
            $('.invalid-feedback').html('');
        }

        function displayErrors(errors) {
            $.each(errors, function(field, messages) {
                let input = $(`#${field}`);
                let feedback = $(`#${field}Error`);

                input.addClass('is-invalid');
                feedback.html(messages[0]);
            });
        }

        // Reset form when modal is closed
        $('.modal').on('hidden.bs.modal', function() {
            $(this).find('form')[0].reset();
            $('#categoryModalLabel').text('Nouvelle Catégorie');
            $('#category_id').val('');
            $('input[name="_method"]').val('POST');
            $('#categoryForm').attr('action', "{{ route('admin.categories.store') }}");
            $('#code').prop('readonly', true);
            $('#toggleCodeEdit').text('Modifier le code');
            clearErrors();
        });
    </script>
@endpush