@extends('layouts.admin.master')
@section('title')
    Permissions List
@endsection

@section('content')
    <div class="container-fluid">
        <div class="row">
            <div class="col">
                <div class="card dashboard-custom-card">
                    <div class="card-body">
                        <div class="custom-card-header d-flex justify-content-between">
                            <h4>Permissions List</h4>
                            @can('create_permission')
                            <a href="{{ route('admin.permissions.create') }}" class="btn btn-primary"><i
                                    class="fa fa-plus-circle"></i>
                                Add New</a>
                                @endcan
                        </div>
                        <div class="table-responsive">
                            <table class="table datatable custom-table dt-responsive nowrap">

                            </table>
                        </div>

                    </div>
                </div>
            </div>
        </div>
    </div>
    @include('utils.delete-confirm-modal')
@endsection

@push('js')
    <script>
        $(function() {
            const dataTable = $('.datatable').DataTable({
                order: [[0, 'desc']],
                processing: true,
                serverSide: true,
                ajax: {
                    url: "{{ route('admin.permissions.datatable') }}",
                    type: "POST", // Specify the HTTP method as POST
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') // Include CSRF token for Laravel
                    }
                },
                columns: [
                    {data: 'id', name: 'id', visible: false},
                    {
                        title: 'SL#',
                        data: null,
                        orderable: false,
                        searchable: false,
                        render: function (data, type, row, meta) {
                            return meta.row + meta.settings._iDisplayStart + 1;
                        }
                    },
                    {
                        title: "Name",
                        data: "name"
                    },
                    {
                        title: "Group Name",
                        data: "group_name"
                    },
                    {
                        title: "Guard Name",
                        data: "guard_name"
                    },
                    {
                        title: "Action",
                        data: "action",
                        orderable: false,
                        searchable: false
                    }
                ]
            });

            $(document, 'td').on('click', '.delete', function (e) {
                $('#delete_form')[0].action = $(this).data('action');
                $('#delete_modal').modal('show');
            });
        });
    </script>
@endpush