@extends('admin.layouts.app')

@section('title', 'Gestion des Rôles')

@section('content')
    <div class="card">
        <div class="card-header">
            <h3 class="card-title">Liste des Rôles</h3>
            @if (hasPermissionOrSuperAdmin('create roles'))
                <div class="card-tools">
                    <button type="button" class="btn btn-primary" onclick="createRole()">
                        <i class="fas fa-plus"></i> Nouveau Rôle
                    </button>
                </div>
            @endif
        </div>
        <div class="card-body">
            <table id="roles-table" class="table table-bordered table-striped">
                <thead>
                    <tr>
                        <th>Nom</th>
                        <th>Permissions</th>
                        <th>Nombre d'utilisateurs</th>
                        <th>Actions</th>
                    </tr>
                </thead>
            </table>
        </div>
    </div>

    @include('admin.roles.modals.create')
    @include('admin.roles.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">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css">
    <link rel="stylesheet"
        href="https://cdn.jsdelivr.net/npm/@ttskch/select2-bootstrap4-theme@x.x.x/dist/select2-bootstrap4.min.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sweetalert2@10.16.6/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/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@10.16.6/dist/sweetalert2.all.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"
        };

        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });

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

        // Create Role Function
        function createRole() {
            $('#createRoleModal').modal('show');
        }

        // Edit Role Function
        $('#editRoleForm').on('submit', function(e) {
            e.preventDefault();
            let id = $(this).data('id');
            let formData = $(this).serialize();

            $.ajax({
                url: `{{ url('admin/roles') }}/${id}`,
                type: 'PUT',
                data: formData,
                success: function(response) {
                    if (response.status) {
                        $('#editRoleModal').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]);
                    });
                }
            });
        });

        // Delete Role Function
        function deleteRole(id) {
            Swal.fire({
                title: 'Confirmation de suppression',
                text: 'Êtes-vous sûr de vouloir supprimer ce rôle ?',
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#d33',
                cancelButtonColor: '#3085d6',
                confirmButtonText: 'Supprimer',
                cancelButtonText: 'Annuler'
            }).then((result) => {
                if (result.isConfirmed) {
                    $.ajax({
                        url: `{{ url('admin/roles') }}/${id}`,
                        type: 'DELETE',
                        data: {
                            _token: '{{ csrf_token() }}'
                        },
                        success: function(response) {
                            if (response.status) {
                                Swal.fire(
                                    'Supprimé !',
                                    response.message,
                                    'success'
                                );
                                table.ajax.reload();
                            } else {
                                Swal.fire(
                                    'Erreur !',
                                    response.message,
                                    'error'
                                );
                            }
                        },
                        error: function(xhr) {
                            Swal.fire(
                                'Erreur !',
                                xhr.responseJSON.message || 'Une erreur est survenue',
                                'error'
                            );
                        }
                    });
                }
            });
        }

        // Handle Create Form Submit
        $('#createRoleForm').on('submit', function(e) {
            e.preventDefault();

            $.ajax({
                url: $(this).attr('action'),
                type: 'POST',
                data: $(this).serialize(),
                success: function(response) {
                    if (response.status) {
                        $('#createRoleModal').modal('hide');
                        $('#createRoleForm')[0].reset();
                        $('#permissions').val(null).trigger('change');
                        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]);
                    });
                }
            });
        });

        // Edit Role Function
        function editRole(id) {
            $.get(`{{ url('admin/roles') }}/${id}/edit`, function(data) {
                $('#editRoleForm').attr('data-id', id);
                $('#edit_name').val(data.role.name);

                // Clear previous permission checkboxes
                $('#edit-permissions-container').empty();

                // Generate permission checkboxes
                data.permissions.forEach(function(permission) {
                    let checked = data.role.permissions.some(rolePermission => rolePermission.id ===
                        permission.id);
                    let checkbox = `
                <div class="form-check">
                    <input type="checkbox" class="form-check-input" id="edit_permission_${permission.id}" name="permissions[]" value="${permission.id}" ${checked ? 'checked' : ''}>
                    <label class="form-check-label" for="edit_permission_${permission.id}">${permission.name}</label>
                </div>
            `;
                    $('#edit-permissions-container').append(checkbox);
                });

                $('#editRoleModal').modal('show');
            });
        }

        // Reset forms when modals are closed
        $('.modal').on('hidden.bs.modal', function() {
            $(this).find('form')[0].reset();
            $('.select2').val(null).trigger('change');
            $('.is-invalid').removeClass('is-invalid');
            $('.invalid-feedback').remove();
        });
    </script>
@endpush