@extends('tenants.layouts.master')
@section('title')
    @lang('Permissions List')
@endsection
@section('css')

    <link href="{{ url('css/DataTables_cdn/datatables.bootstrap5.min.css') }}" rel="stylesheet" />
    <link href="{{ url('css/DataTables_cdn/datatables.responsive.min.css') }}" rel="stylesheet" />
    <link href="{{ url('css/DataTables_cdn/datatables.buttons.min.css') }}" rel="stylesheet" />
    <link href="{{ url('css/sweetalert-2@11.0.20/sweetalert2.min.css') }}" rel="stylesheet">

@endsection
@section('content')
    @component('tenants.components.breadcrumb')
        @slot('li_1')
            Permissions
        @endslot
        @slot('title')
            Permissions List
        @endslot
    @endcomponent
    <div class="row">
        <div class="col-lg-12">
            <div class="card">
                <div class="card-header d-flex align-items-center">
                    <h5 class="card-title mb-0 flex-grow-1"></h5>
                    <div>
                        <a href="{{ route('permissions.create') }}"><button id="addRow" class="btn btn_primary">Create Permission</button></a>
                    </div>
                </div>
                <div class="card-body">
                    <table id="permissions-table" class="table table-bordered dt-responsive nowrap table-striped align-middle"
                        style="width:100%">
                        <thead>
                            <tr>
                                <th scope="col" style="width: 10px;">
                                    <div class="form-check">
                                        <input class="form-check-input fs-15" type="checkbox" id="checkAll" value="option">
                                    </div>
                                </th>
                                <th>Name</th>
                                <th>Actions</th>
                            </tr>
                        </thead>
                        <tbody></tbody>
                    </table>
                </div>
            </div>
        </div>
        <!--end col-->
    </div>
    <!--end row-->
@endsection
@section('script')

       	<script src="{{ url('js/jquery-3.6.0_cdn/jquery.min.js') }}"></script>
        <script src="{{ url('js/datatable-1.11.5_cdn/datatables.jquery.min.js') }}"></script>
        <script src="{{ url('js/datatable-1.11.5_cdn/datatables.bootstrap5.min.js') }}"></script>
        <script src="{{ url('js/datatable-1.11.5_cdn/datatables.responsive.min.js') }}"></script>
        <script src="{{ url('js/datatables-1.11.5_cdn/datatables.buttons.min.js') }}"></script>
        <script src="{{ url('js/sweetalert-2@11.20/sweetalert2.all.min.js') }}"></script>

    <script type="text/javascript">
        $(document).ready(function() {
            // Initialize DataTable
            var table = $('#permissions-table').DataTable({
                processing: true,
                responsive: true,
                serverSide: true,
                ajax: "{{ route('permissions.index') }}", // Fetch the data using AJAX
                columns: [{
                        data: 'checkbox',
                        name: 'checkbox'
                    },
                    { data: 'name', name: 'name' },  // Column 1 (Permission Name)
                    { data: 'action', name: 'action', orderable: false, searchable: false }
                ]
            });

            // Handle Edit button click
            $(document).on('click', '.edit-btn', function() {
                var permisionId = $(this).data('id');
                var editUrl = "{{ route('permissions.edit', ':id') }}".replace(':id', permisionId);
                window.location.href = editUrl;
            });

            // Handle Delete button click with AJAX
            $(document).on('click', '.delete-btn', function() {
                var permisionId = $(this).data('id');

                // Show a SweetAlert confirmation dialog
                Swal.fire({
                    title: 'Are you sure?',
                    text: "This employee will be marked as deleted.",
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonText: 'Yes, delete it!',
                    cancelButtonText: 'Cancel',
                    reverseButtons: true
                }).then((result) => {
                    if (result.isConfirmed) {
                        // Proceed with the AJAX delete request if the user confirms
                        $.ajax({
                            url: "{{ route('permissions.destroy', '') }}/" + permisionId,
                            type: 'DELETE',
                            data: {
                                _token: '{{ csrf_token() }}',
                            },
                            success: function(response) {
                                // Reload the DataTable after successful deletion
                                table.ajax.reload();
                                Swal.fire({
                                    title: 'Success!',
                                    text: response.message,
                                    icon: 'success',
                                    confirmButtonText: 'OK'
                                });
                            },
                            error: function(response) {
                                Swal.fire({
                                    title: 'Error!',
                                    text: response.message ||
                                        'An error occurred. Please try again.',
                                    icon: 'error',
                                    confirmButtonText: 'Try Again'
                                });
                            }
                        });
                    }
                });
            });

        });
    </script>

    <script src="{{ URL('js/app.js') }}"></script>
@endsection