@extends('admin.layouts.app')

@section('title', 'Gestion des Administrateurs')

@section('content')
    <div class="card">
        <div class="card-header">
            <h3 class="card-title">Liste des Administrateurs</h3>
            @if (hasPermissionOrSuperAdmin('create admins'))
                <div class="card-tools">
                    <button type="button" class="btn btn-primary" onclick="createAdmin()">
                        <i class="fas fa-plus"></i> Nouveau Administrateur
                    </button>
                </div>
            @endif
        </div>
        <div class="card-body">
            <table id="admins-table" class="table table-bordered table-striped">
                <thead>
                    <tr>
                        <th>Nom Complet</th>
                        <th>Email</th>
                        <th>Téléphone</th>
                        <th>Rôle</th>
                        <th>Date d'ajout</th>
                        <th>Actions</th>
                    </tr>
                </thead>
            </table>
        </div>
    </div>

    @include('admin.admins-management.modals.create')
    @include('admin.admins-management.modals.edit')

@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">
@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>
        // 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 = $('#admins-table').DataTable({
            processing: true,
            serverSide: true,
            ajax: "{{ route('admin.admins-management.getData') }}",
            columns: [{
                    data: 'full_name',
                    name: 'full_name'
                },
                {
                    data: 'email',
                    name: 'email'
                },
                {
                    data: 'phone',
                    name: 'phone'
                },
                {
                    data: 'role',
                    name: 'role'
                },
                {
                    data: 'joining_date',
                    name: 'joining_date',
                    render: function(data) {
                        return new Date(data).toLocaleDateString('fr-FR');
                    }
                },
                {
                    data: 'action',
                    name: 'action',
                    orderable: false,
                    searchable: false
                }
            ],
            language: {
                url: '//cdn.datatables.net/plug-ins/1.10.24/i18n/French.json'
            }
        });

        // Create Admin Function
        function createAdmin() {
            // Fetch roles
            $.get('{{ route('admin.roles.get') }}', function(roles) {
                // Clear previous role checkboxes
                $('#create-roles-container').empty();

                // Generate role checkboxes
                roles.forEach(function(role) {
                    let checkbox = `
                <div class="form-check">
                    <input type="checkbox" class="form-check-input" id="role_${role.id}" name="roles[]" value="${role.id}">
                    <label class="form-check-label" for="role_${role.id}">${role.name}</label>
                </div>
            `;
                    $('#create-roles-container').append(checkbox);
                });

                // Show the modal
                $('#createAdminModal').modal('show');
            });
        }

        // Edit Admin Function
        function editAdmin(id) {
            // Fetch admin data
            $.get(`{{ url('admin/admins-management') }}/${id}/edit`, function(admin) {
                // Set form data
                $('#editAdminForm').attr('data-id', id);
                $('#edit_fname').val(admin.fname);
                $('#edit_lname').val(admin.lname);
                $('#edit_email').val(admin.email);
                $('#edit_phone').val(admin.phone);

                // Clear previous role checkboxes
                $('#edit-roles-container').empty();

                // Generate role checkboxes
                admin.roles.forEach(function(role) {
                    let checkbox = `
                <div class="form-check">
                    <input type="checkbox" class="form-check-input" id="edit_role_${role.id}" name="roles[]" value="${role.id}" checked>
                    <label class="form-check-label" for="edit_role_${role.id}">${role.name}</label>
                </div>
            `;
                    $('#edit-roles-container').append(checkbox);
                });

                // Fetch all roles
                $.get('{{ route('admin.roles.get') }}', function(roles) {
                    // Generate checkboxes for roles not assigned to the admin
                    roles.forEach(function(role) {
                        if (!admin.roles.some(adminRole => adminRole.id === role.id)) {
                            let checkbox = `
                        <div class="form-check">
                            <input type="checkbox" class="form-check-input" id="edit_role_${role.id}" name="roles[]" value="${role.id}">
                            <label class="form-check-label" for="edit_role_${role.id}">${role.name}</label>
                        </div>
                    `;
                            $('#edit-roles-container').append(checkbox);
                        }
                    });
                });

                // Show the modal
                $('#editAdminModal').modal('show');
            });
        }
        // Delete Admin Function
        function deleteAdmin(id) {
            if (confirm('Êtes-vous sûr de vouloir supprimer cet administrateur ?')) {
                $.ajax({
                    url: `{{ url('admin/admins-management') }}/${id}`,
                    type: 'DELETE',
                    data: {
                        _token: '{{ csrf_token() }}'
                    },
                    success: function(response) {
                        if (response.status) {
                            toastr.success(response.message);
                            table.ajax.reload();
                        } else {
                            toastr.error(response.message);
                        }
                    },
                    error: function(xhr) {
                        toastr.error('Une erreur est survenue');
                    }
                });
            }
        }

        // Handle Create Form Submit
        $('#createAdminForm').on('submit', function(e) {
            e.preventDefault();
            let formData = new FormData(this);

            $.ajax({
                url: $(this).attr('action'),
                type: 'POST',
                data: formData,
                processData: false,
                contentType: false,
                success: function(response) {
                    if (response.status) {
                        $('#createAdminModal').modal('hide');
                        $('#createAdminForm')[0].reset();
                        toastr.success(response.message);
                        table.ajax.reload();
                    } else {
                        toastr.error(response.message);
                    }
                },
                error: function(xhr) {
                    let errors = xhr.responseJSON.errors;
                    Object.keys(errors).forEach(function(key) {
                        toastr.error(errors[key][0]);
                    });
                }
            });
        });

        // Handle Edit Form Submit
        $('#editAdminForm').on('submit', function(e) {
            e.preventDefault();
            let id = $(this).data('id');
            let formData = new FormData(this);
            formData.append('_method', 'PUT');

            $.ajax({
                url: `{{ url('admin/admins-management') }}/${id}`,
                type: 'POST',
                data: formData,
                processData: false,
                contentType: false,
                success: function(response) {
                    if (response.status) {
                        $('#editAdminModal').modal('hide');
                        toastr.success(response.message);
                        table.ajax.reload();
                    } else {
                        toastr.error(response.message);
                    }
                },
                error: function(xhr) {
                    let errors = xhr.responseJSON.errors;
                    Object.keys(errors).forEach(function(key) {
                        toastr.error(errors[key][0]);
                    });
                }
            });
        });

        // Reset forms when modals are closed
        $('.modal').on('hidden.bs.modal', function() {
            $(this).find('form')[0].reset();
            $('.is-invalid').removeClass('is-invalid');
            $('.invalid-feedback').remove();
        });

        // Preview image before upload
        function previewImage(input, preview) {
            if (input.files && input.files[0]) {
                let reader = new FileReader();
                reader.onload = function(e) {
                    $(preview).attr('src', e.target.result);
                }
                reader.readAsDataURL(input.files[0]);
            }
        }
    </script>
@endpush