@extends('admin.layouts.app')

@section('title', __('dashboard.roles'))

@section('content')
    <x-admin.page-header title="{{ __('dashboard.roles') }}" :breadcrumbs="[__('dashboard.roles') => route('admin.roles.index')]" />

    <div class="row">
        <div class="col-lg-12">
            <div class="card">
                <div class="card-header pb-0 card-no-border">
                    <x-add route="{{ route('admin.roles.create') }}" label="{{ __('dashboard.create_role') }}" />

                    <div class="filter-section">
                        <div class="row g-3 align-items-end">
                            <div class="col-md-3" id="datatable-search-wrapper"></div>

                            {{--  Standard filters if needed, removing specific vendor filters --}}
                            {{-- <x-date-range name="range-date" label="{{ __('dashboard.date_range') }}" /> --}}

                            <div class="col-md-2">
                                {{-- <x-filter-buttons /> --}}
                            </div>

                            <div class="col-12 d-flex justify-content-end gap-2 mt-2">
                                <div id="export-buttons-wrapper"></div>
                            </div>
                        </div>
                    </div>

                    <div class="mt-3">
                        <x-bulk />
                    </div>
                </div>

                <div class="card-body">
                    <div class="table-responsive custom-scrollbar server-side-table">
                        {!! $dataTable->table(['class' => 'table table-bordered', 'id' => 'roles-table']) !!}
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
    {!! $dataTable->scripts() !!}

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            initDataTableFilters({
                tableId: 'roles-table',
                csrf: '{{ csrf_token() }}',

                filters: [
                    // '#status-filter',
                    // '#range-date'
                ],

                buttons: {
                    apply: '#apply-filters',
                    clear: '#clear-filters'
                },

                selectAll: '#check-all',

                bulk: {
                    actions: '#bulk-actions',
                    delete: '#bulk-delete',
                },

                routes: {
                    delete: '{{ route('admin.roles.bulkDelete') }}',
                }
            });

            const dtSearch = document.querySelector('#roles-table_filter');
            const target = document.getElementById('datatable-search-wrapper');

            if (dtSearch && target) {
                target.appendChild(dtSearch);
                dtSearch.classList.remove('text-end');
            }
        });
    </script>
@endpush