{{--
    Brokers listing — docs/wireframes-v12/broker-management.html, content region
    for content region.

    Two regions, top to bottom: the page action bar ("All Brokers" + its
    sub-line on the left, the Add Broker button on the right), then ONE card
    carrying the `.filter-bar` and the `.data-table` — the filters are the
    card's own header strip, not a card of their own. That is the shape every
    v12 management page uses and the shape projects/index uses.

    v12 draws a `.grid-4` stat strip between the two; **CR-12.1 A5 removed it
    at the client's instruction**, along with BrokerController::stats(), the
    `stats` payload key and the `brokers.stats.*` lang keys. Nothing on this
    page counts anything any more, which is why the controller's page-only
    payload is down to one key.

    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 BrokersDataTable::getColumns().

    ## Deliberate differences from the wireframe

      * **No stat strip at all** (CR-12.1 A5) — see above.
      * **No "Companies" column** — the client removed multiple companies per
        broker (§0.3) and the Company column already names the one firm.
      * **No Broker ID, Total Referrals or Active Bookings columns**
        (CR-12.1 A6, client instruction). Seven columns are left, in the
        wireframe's own order.
      * **The City filter is dynamic** (decision D7) where v12 hardcodes five
        cities: a filter offering a city no broker is in returns an empty table
        and looks broken.
      * **A Delete action per row** (decision D3), which v12's action group does
        not draw. See brokers/partials/actions.blade.php.
--}}
@extends('layouts.app')

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

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

@section('content')
    @php
        /*
         * Defaulted here as well as skipped in the controller on an ajax draw.
         * Either alone would be enough today; together they mean the page
         * cannot break on the difference between two ways of asking for it —
         * the 500 CR-7 shipped and then closed twice over.
         */
        $cities = $cities ?? [];
    @endphp

    {{-- v12 puts the heading pair and the primary action on one row at the top
         of the content region. The left-hand block is not gated, so a view-only
         user still gets the heading; only the button is. --}}
    <div class="d-flex justify-between align-center mb-4">
        <div>
            <h2 class="brk-action-title">{{ __('brokers.all_brokers') }}</h2>
            <p class="text-secondary brk-action-sub">{{ __('brokers.all_brokers_sub') }}</p>
        </div>

        @can('brokers.create')
            <a href="{{ route('brokers.create') }}" class="btn btn-primary">
                <i class="fa-solid fa-plus" aria-hidden="true"></i>{{ __('brokers.add_button') }}
            </a>
        @endcan
    </div>

    <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 none of these controls — a placeholder and an option
             list are all it draws. The visually-hidden labels are ours and are
             not a visual change: a select whose only name is its first option
             is unusable with a screen reader. --}}
        <form id="brokers-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="brokers_filter_search">{{ __('brokers.filters.search') }}</label>
                <input type="search" id="brokers_filter_search" class="form-control"
                       placeholder="{{ __('brokers.filters.search') }}" autocomplete="off" />
            </div>

            <label class="visually-hidden" for="brokers_filter_status">{{ __('brokers.filters.all_statuses') }}</label>
            <select id="brokers_filter_status" class="form-control filter-select">
                <option value="">{{ __('brokers.filters.all_statuses') }}</option>
                @foreach (\App\Enums\BrokerStatus::cases() as $status)
                    <option value="{{ $status->value }}">{{ $status->label() }}</option>
                @endforeach
            </select>

            <!-- <label class="visually-hidden" for="brokers_filter_city">{{ __('brokers.filters.all_cities') }}</label>
            <select id="brokers_filter_city" class="form-control filter-select">
                <option value="">{{ __('brokers.filters.all_cities') }}</option>
                @foreach ($cities as $city)
                    <option value="{{ $city }}">{{ $city }}</option>
                @endforeach
            </select> -->
        </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 to the table. The two selects are not DataTables
        // columns, so they ride along as extra ajax parameters on preXhr; the
        // search box drives the plugin's own global term.
        //
        // 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_brokers_table'];

            if (!table) {
                return;
            }

            var search = document.getElementById('brokers_filter_search');
            var selects = ['brokers_filter_status', 'brokers_filter_city']
                .map(function (id) { return document.getElementById(id); })
                .filter(Boolean);

            table.on('preXhr.dt', function (event, settings, data) {
                selects.forEach(function (select) {
                    data[select.id.replace('brokers_filter_', 'filter_')] = select.value;
                });
            });

            selects.forEach(function (select) {
                select.addEventListener('change', function () { table.ajax.reload(); });
            });

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