@extends('admin.layout.main')

@section('content')
    @push('meta')
        <meta name="csrf-token" content="{{ csrf_token() }}">
    @endpush

    @push('styles')
    <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/css/select2.min.css" rel="stylesheet" />
        

        <style>
            .select2-container--open .select2-dropdown {
                z-index: 99999;
                /* Set the desired z-index value */
            }

            .select2-selection__choice {
                background-color: #0080FF !important;
                /* Change the background color */
                color: #fff;
                /* Change the text color */
            }
        </style>
    @endpush

    <div class="breadcrumbbar">
        <div class="row align-items-center">
            <div class="col-md-8 col-lg-8">
                <div class="breadcrumb-list">
                    <ol class="breadcrumb">
                        <li class="breadcrumb-item"><a href="{{ route('home') }}">Home</a></li>
                        <li class="breadcrumb-item"><a href="{{ route('roles_list') }}">Roles</a></li>
                        <li class="breadcrumb-item active" aria-current="page">Roles List</li>
                    </ol>
                </div>
            </div>
            <div class="col-md-4 col-lg-4">
                <div class="widgetbar">
                    <button class="btn btn-primary-rgba" id="addRole">Add Roles</button>
                    <button class="btn btn-primary-rgba" id="assignPermission">Assign
                        Permission</button>
                </div>
            </div>
        </div>
    </div>

    <!-- Start Contentbar -->
    <div class="contentbar">
        <div class="row">
            <div class="col-lg-12">
                <div class="card m-b-30">
                    <div class="card-header">
                        <h5 class="card-title">Roles Table</h5>
                    </div>
                    <div class="card-body">
                        <div class="table-responsive" style="overflow-x: scroll">
                            <table id="roles_table" class="table-bordered category-table display table">
                                <thead>
                                    <tr>
                                        <th>ID</th>
                                        <th>Name</th>
                                        <th>Created at</th>
                                        <th>Updated at</th>
                                        <th>Action</th>
                                    </tr>
                                </thead>
                                <tbody></tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Assign Permission Modal -->
    <div class="modal fade" id="assignRoleModal" tabindex="-1" role="dialog" aria-labelledby="createLeadModalLabel"
        aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="createLeadModalLabel">Assign Permissions to Role</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <form id="assignPermissionForm">
                    <div class="modal-body">
                        <div class="form-group">
                            <label for="course-name">Role</label>
                            <select name="role_id" id="role_id" class="form-control">
                                @foreach ($roles as $role)
                                    <option value="{{ $role['id'] }}">{{ $role['name'] }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="form-group">
                            <label for="course-name">Permissions</label>
                            <select name="permission_ids[]" id="permission_ids" class="select2 form-select" multiple
                                required>
                                @foreach ($permissions as $permission)
                                    <option value="{{ $permission['id'] }}">{{ $permission['name'] }}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="submit" class="btn btn-primary">Assign</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <!-- Add Course Modal -->
    <div class="modal fade" id="createRoleModal" tabindex="-1" role="dialog" aria-labelledby="createLeadModalLabel"
        aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="createLeadModalLabel">Add Role</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <form id="createRoleForm">
                    <div class="modal-body">
                        <div class="form-group">
                            <label for="course-name">Name</label>
                            <input type="text" class="form-control" id="name" name="name" required>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="submit" class="btn btn-primary">Submit</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <div class="modal fade" id="updateRoleModal" tabindex="-1" role="dialog" aria-labelledby="updateStatusModalLabel"
        aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="updateStatusModalLabel">Update Role</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <form id="updateRoleForm">
                    <div class="modal-body">
                        <input type="hidden" id="role_id" name="role_id">
                        <div class="form-group">
                            <label for="course-name">Name</label>
                            <input type="text" class="form-control" id="name_update" name="name" required>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="submit" class="btn btn-primary">Update</button>
                    </div>
                </form>
            </div>
        </div>
    </div>


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

                width: '100%',
            });
            $(document).ready(function() {
                var table = $('#roles_table').DataTable({
                    processing: true,
                    serverSide: true,
                    ajax: '{{ route('roles_list') }}',
                    columns: [{
                            data: 'id',
                            name: 'id'
                        },
                        {
                            data: 'name',
                            name: 'name'
                        },
                        {
                            data: 'created_at',
                            name: 'created_at',
                            render: function(data, type, row) {
                                return new Date(data).toLocaleDateString();
                            }
                        },
                        {
                            data: 'updated_at',
                            name: 'updated_at',
                            render: function(data, type, row) {
                                return new Date(data).toLocaleDateString();
                            }
                        },
                        {
                            data: null,
                            name: 'action',
                            render: function(data, type, row) {
                                return `
                        <button type="button" class="btn btn-round btn-secondary" data-id="${row.id}" id="editRole"><i class="feather icon-edit"></i></button>
                        <button type="button" class="btn btn-round btn-danger" data-id="${row.id}" id="deleteRole"><i class="feather icon-trash-2"></i></button>
                    `;
                            }
                        }
                    ]
                });


                $('#addRole').on('click', function() {
                    $('#createRoleModal').modal('show');
                });

                $('#createRoleForm').on('submit', function(e) {
                    e.preventDefault();

                    $.ajax({
                        type: 'POST',
                        headers: {
                            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                        },
                        url: "{{ route('add_role_form') }}",
                        data: $(this).serialize(),
                        success: function(response) {
                            if (response.success) {
                                $('#createRoleModal').modal('hide');
                                $('#roles_table').DataTable().ajax.reload();
                                Swal.fire('Added!', 'The Role has been added.',
                                    'success');
                                    $('#createRoleForm')[0].reset();
                            } else {
                                Swal.fire('Error!', response.message, 'error');
                            }
                        },
                        error: function(xhr) {
                            Swal.fire('Error!', 'Something went wrong.', 'error');
                        }
                    });
                });

                $('body').on('click', '#deleteRole', function() {
                    var id = $(this).data('id');

                    Swal.fire({
                        title: 'Are you sure?',
                        text: "You won't be able to revert this!",
                        // Use 'warning' for better visibility
                        showCancelButton: true,

                        confirmButtonText: 'Yes, delete it!',
                        cancelButtonText: 'No, cancel!',

                    }).then((result) => {
                        if (result.isConfirmed) {
                            $.ajax({
                                type: "DELETE",
                                headers: {
                                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                                },
                                url: "{{ route('delete_role', ['id' => ':id']) }}"
                                    .replace(':id', id),
                                success: function(response) {
                                    table.ajax.reload();
                                    Swal.fire('Deleted!',
                                        'The Role has been deleted.', 'success');
                                },
                                error: function(xhr) {
                                    Swal.fire('Error!', 'An error occurred.', 'error');
                                }
                            });
                        }
                    });
                });

                $('body').on('click', '#editRole', function() {
                    var id = $(this).data('id');
                    $.ajax({
                        type: "GET",
                        headers: {
                            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                        },
                        url: "{{ route('get_role', ['id' => ':id']) }}".replace(':id', id),
                        success: function(response) {
                            if (response.status == 404) {
                                Swal.fire('Error!', response.message, 'error');
                                $('#updateRoleModal').modal('hide');
                            } else {
                                var role = response.role;
                                $('#role_id').val(role.data.id);
                                $('#name_update').val(role.data.name);
                                $('#updateRoleModal').modal('show');
                            }
                        },
                        error: function(xhr) {
                            Swal.fire('Error!', 'Something went wrong.', 'error');
                        }
                    });
                });
                $('#updateRoleForm').on('submit', function(e) {
                    e.preventDefault();
                    var id = $('#role_id').val(); // Ensure this is set correctly

                    $.ajax({
                        type: 'PUT',
                        headers: {
                            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                        },
                        url: "{{ route('update_role_form', ['id' => ':id']) }}".replace(':id', id),
                        data: $(this).serialize(),
                        success: function(response) {
                            $('#updateRoleModal').modal('hide');
                            table.ajax.reload();
                            Swal.fire('Updated!', 'The Role has been updated.', 'success');
                            $('#updateRoleForm')[0].reset();
                        },
                        error: function(xhr) {
                            Swal.fire('Error!', 'Something went wrong.', 'error');
                            console.log(xhr);
                        }
                    });
                });

                $('#assignPermission').on('click', function() {
                    $('#assignRoleModal').modal('show');
                });
                $('#assignPermissionForm').on('submit', function(e) {
                    e.preventDefault(); // Prevent the default form submission

                    $.ajax({
                        url: "{{ route('assign_permission')  }}" , // Update this to your actual route
                        type: 'POST',
                        headers: {
                            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                        },
                        data: $(this).serialize(),
                        success: function(response) {
                            if (response.success) {
                                Swal.fire('Assigned!', 'The Permission has been Assigned.',
                                'success');
                                $('#assignRoleModal').modal('hide'); // Hide the modal
                                $('#assignPermissionForm')[0].reset();
                                $('#permission_ids').val([]).trigger('change');
                            } else {
                                Swal.fire('Error!', 'Something went wrong.', 'error'); 
                            }
                        },
                        error: function(xhr) {
                            Swal.fire('Error!', 'Something went wrong.', 'error');
                        }
                    });
                });
            });
        </script>
    @endpush
@endsection