{{--
    Roles listing — docs/wireframes-v12/role-management.html, content region for
    content region.

    The content region is ONE card, and that is the whole of it: the wireframe
    draws no stat strip and no action bar here, because its "Add New Role"
    button lives in the page HEADER (line 62). That is where this screen puts it
    too — through the `header_actions` section the topbar partial yields, added
    in CR-14 §3.1 — rather than moving it down to the action bar the projects,
    brokers and users listings use. Those three pages have an action bar because
    their wireframes draw one; this page does not.

    The card carries the `.filter-bar` as its own header strip and the
    `.data-table` under it, which is the shape every v12 management page uses.

    DataTables drives the table. Its own search box stays out of the dom string
    because the wireframe's `.search-input` in the filter bar is the one the user
    sees; the script below feeds the plugin from it. The column list exists only
    in RolesDataTable::getColumns().

    ## Deliberate differences from the wireframe

      * **No Status filter** (client instruction, CR-14 §0.4). v12's filter bar
        draws an All Status / Active / Inactive select beside the search box, and
        §0.3 cut the Status control from the form — so there is no status column
        on `roles` for it to filter, and a select that filters nothing is worse
        than no select. The bar is the search box alone.
      * **Five columns, not eight** (§0.4). Role ID, Description and Status are
        all gone, and none of the three is a column this application stopped
        DRAWING: there is no role code, no description and no status on the table
        at all. See RolesDataTable's class docblock.
      * **No View action** (decision D10). v12's row group draws an eye pointing
        at `view-role.html`, a page that does not exist in the pack.
      * **A Delete action per row** (decision D2), which v12's action group does
        not draw. See roles/partials/actions.blade.php for the three gates on it.
      * **The Permissions Count cell reads "All access" on the Super Admin row**
        (decision D12). That role holds zero direct permissions and passes every
        check through Gate::before, so the honest number is 0 and would be the
        opposite of the truth on screen.
--}}
@extends('layouts.app')

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

@section('breadcrumbs')
    <x-breadcrumbs :items="[__('roles.title') => null]" />
@endsection

{{-- v12 puts the primary action in the header, left of the bell
     (role-management.html:62). Gated on its own permission, so a `roles.view`
     holder gets the listing and no way to add to it. --}}
@section('header_actions')
    @can('roles.create')
        <a href="{{ route('roles.create') }}" class="btn btn-primary">
            <i class="fa-solid fa-plus" aria-hidden="true"></i>{{ __('roles.add_button') }}
        </a>
    @endcan
@endsection

@section('content')
    <div class="card">
        {{-- The filter bar IS the card's header strip in v12. It is a <form>
             here only so Enter does not reload the page; `.filter-bar` is the
             flex row, so the form element carries it directly.

             v12 labels the control with a placeholder alone. The
             visually-hidden label is ours and is not a visual change: a search
             box whose only name is its placeholder is announced as nothing at
             all once the user has typed into it. --}}
        <form id="roles-filters" class="filter-bar" onsubmit="return false;">
            <div class="search-input">
                <i class="fa-solid fa-search" aria-hidden="true"></i>
                <label class="visually-hidden" for="roles_filter_search">{{ __('roles.filters.search') }}</label>
                <input type="search" id="roles_filter_search" class="form-control"
                       placeholder="{{ __('roles.filters.search') }}" autocomplete="off" />
            </div>
        </form>

        {{-- `table-wrapper` is v12's own scroll box. `table-responsive` rides
             along because it is Bootstrap's name for the same thing and the one
             the shared <x-datatable> component and its test both use; this
             screen does not go through that component (v12's card has no
             card-body around the table) but the two names stay together so a
             later reader does not read the difference as meaningful. --}}
        <div class="table-wrapper table-responsive">
            {!! $dataTable->table(['class' => 'data-table']) !!}
        </div>
    </div>
    {{-- The shared row-delete confirmation (CR-16 item J8). At the END of the
         content section and outside every `.card`, for the clipping reason the
         partial's own header records. It also pushes the toaster and the shared
         delete client, which is why the row buttons need nothing of their own. --}}
    @include('partials.ajax-delete-modal')
@endsection

@push('styles')
    <link href="{{ asset('assets/plugins/custom/datatables/dataTables.bootstrap5.min.css') }}" rel="stylesheet" type="text/css" />
@endpush

@push('scripts')
    {{--
        Order is load bearing: jQuery (plugins.bundle.js, already in the
        layout) → core library → the Bootstrap 5 integration that patches its
        renderers → yajra's init, which calls $(…).DataTable(…) and would throw
        without the two above.
    --}}
    <script src="{{ asset('assets/plugins/custom/datatables/dataTables.min.js') }}"></script>
    <script src="{{ asset('assets/plugins/custom/datatables/dataTables.bootstrap5.min.js') }}"></script>

    {!! $dataTable->scripts() !!}

    <script>
        // Wire the filter bar's search box to the table's own global term.
        // There are no filter selects on this screen (§0.4), so there is no
        // preXhr handler either — the users and brokers listings carry one
        // because they have dropdowns that ride along as extra ajax parameters.
        //
        // The html builder registers the instance on window.LaravelDataTables
        // keyed by table id, and its own init script runs on DOMContentLoaded,
        // so this listener has to wait for the same event.
        document.addEventListener('DOMContentLoaded', function () {
            var registry = window.LaravelDataTables || {};
            var table = registry['kt_roles_table'];
            var search = document.getElementById('roles_filter_search');

            if (!table || !search) {
                return;
            }

            var pending = null;

            search.addEventListener('input', function () {
                window.clearTimeout(pending);
                pending = window.setTimeout(function () {
                    table.search(search.value).draw();
                }, 300);
            });
        });
    </script>
@endpush