@extends('layouts.admin')
@section('pageTitle', __lang('Roles'))
@section('innerTitle', __lang('Roles'))
@section('breadcrumb')
    @include('admin.partials.crumb', [
        'crumbs' => [
            route('admin.dashboard') => __('default.dashboard'),
            '#' => __lang('Roles'),
        ],
    ])
@endsection
@section('content')
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-12">
                <div>
                    <div>
                        <a href="{{ url('/admin/roles/create') }}" class="btn btn-success btn-sm float-right" title="@lang('default.add-new')">
                            <i class="fa fa-plus" aria-hidden="true"></i> @lang('default.add-new')
                        </a>
                        <br />
                        <br />
                        <div class="card table-responsive">
                            <table id="roles-table" class="table">
                                <thead>
                                    <tr>
                                        <th>No</th>
                                        <th>@lang('default.name')</th>
                                        <th>@lang('default.actions')</th>
                                    </tr>
                                </thead>
                                <tbody>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection
@section('footer')
    <!-- Modal for Delete Confirmation -->
    <div class="modal fade" id="deleteConfirmationModal" tabindex="-1" role="dialog" aria-labelledby="deleteConfirmationModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="deleteConfirmationModalLabel">@lang('default.confirm-delete')</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    Yakin Untuk Menghapus Role?
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">@lang('default.cancel')</button>
                    <form id="deleteForm" method="POST" action="#">
                        @csrf
                        @method('DELETE')
                        <button type="submit" class="btn btn-danger">@lang('default.delete')</button>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <!-- Di bagian footer blade -->
    <script>
        $(document).ready(function() {
            var table = $('#roles-table').DataTable({
                processing: true,
                serverSide: true,
                ajax: "{{ route('admin.roles.index') }}",
                columns: [{
                        data: null,
                        name: 'id',
                        searchable: false
                    },
                    {
                        data: 'name',
                        name: 'name'
                    },
                    {
                        data: 'actions',
                        name: 'actions',
                        orderable: false,
                        searchable: false
                    },
                ],
                rowId: 'id',
                mark: {
                    className: 'mark'
                },
                "bLengthChange": false,
                "bInfo": false,
            });

            // Mengatur nomor baris secara otomatis
            table.on('draw.dt', function() {
                var PageInfo = $('#roles-table').DataTable().page.info();
                table.column(0, {
                    page: 'current'
                }).nodes().each(function(cell, i) {
                    cell.innerHTML = i + 1 + PageInfo.start;
                });
            });

            // Menampilkan modal konfirmasi delete ketika tombol delete di klik
            $('#roles-table').on('click', '.dropdown-item.delete-btn', function() {
                var id = $(this).data('id');
                var url = "{{ url('/admin/roles') }}" + '/' + id;
                $('#deleteForm' + id).attr('action', url);
                $('#deleteConfirmationModal').modal('show');
            });
        });
    </script>
@endsection