{{--
    Cancellation listing — docs/wireframes-v12/cancellation.html, content region
    for content region.

    v12's order, top to bottom: an action row, then ONE card carrying the
    `.filter-bar` and the `.data-table` — the filters are the card's own header
    strip (border-bottom), not a card of their own. That is the shape every v12
    management page uses, and the shape bookings/index.blade.php already draws.

    ## Authorised deviations (CR-9 §6.1, §9)

      * **The four stat cards are dropped** (user decision). The wireframe's
        strip counts Pending Approval, Approved and Refund Pending, and this
        application has no approval workflow (decision D3) and no money
        (decision D8) — three of the four tiles could only be mocked.
      * **The All Status select is dropped** (client: "Remove All Status drop
        down"). Every row on this screen is cancelled, so the control would
        offer seven statuses that filter nothing.
      * **Six columns, not the wireframe's ten** — the client's own list. See
        CancellationsDataTable's docblock for which four went and why.
      * **The search placeholder is adapted**: the wireframe says "Search by
        Cancel ID, Customer, Booking ID..." and there is no Cancel ID (decision
        D10 — a cancellation wears its booking's code), so it reads "Search by
        Booking ID, Customer...", which is exactly what the box reaches.

    ## No lang file (CR-9 §0.1)

    Every string on this screen is written here, on the client's instruction.
    Do not extract them.

    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 wiring below feeds the plugin from it, with the same 300ms debounce
    and the same preXhr filter parameters the other three listings use.

    The table markup and its configuration both come from the html builder, so
    the column list exists in exactly one place:
    CancellationsDataTable::getColumns().
--}}
@extends('layouts.app')

@section('title', 'Cancellation Management')

@section('breadcrumbs')
    <x-breadcrumbs :items="['Cancellation Management' => null]" />
@endsection

@section('content')
    {{-- v12 puts the primary action on its own row above the listing card, at
         the right edge, and leaves an empty div on the left. The empty div is
         kept: `.justify-between` needs two children to push the button right,
         and the button is gated, so without it a view-only user would get a
         bare row rather than no row at all. --}}
    <div class="d-flex justify-between align-center mb-4">
        <div></div>
        @can('cancellations.create')
            <a href="{{ route('cancellations.create') }}" class="btn btn-primary">
                <i class="fa-solid fa-plus" aria-hidden="true"></i>Initiate Cancellation
            </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, and two bare date inputs are unusable
             with one either way.

             Order is the wireframe's, minus the status select it drew third:
             search, project, date-from, date-to. --}}
        <form id="cancellations-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="cancellations_filter_search">Search by Booking ID, Customer...</label>
                <input type="search" id="cancellations_filter_search" class="form-control"
                       placeholder="Search by Booking ID, Customer..." autocomplete="off" />
            </div>

            <label class="visually-hidden" for="cancellations_filter_project">All Projects</label>
            <select id="cancellations_filter_project" class="form-control filter-select">
                <option value="">All Projects</option>
                @foreach ($projects as $projectId => $projectName)
                    <option value="{{ $projectId }}">{{ $projectName }}</option>
                @endforeach
            </select>

            <label class="visually-hidden" for="cancellations_filter_date_from">From Date</label>
            <input type="date" id="cancellations_filter_date_from" class="form-control filter-date"
                   aria-label="From Date" />

            <label class="visually-hidden" for="cancellations_filter_date_to">To Date</label>
            <input type="date" id="cancellations_filter_date_to" class="form-control filter-date"
                   aria-label="To Date" />
        </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">
            {{-- yajra's own <table> element. `{!! !!}` because it IS markup; the
                 builder emits a table shell built from getColumns(), and no row
                 data passes through here at all — the rows arrive later as
                 JSON. --}}
            {!! $dataTable->table(['class' => 'data-table']) !!}
        </div>
    </div>
@endsection

@push('styles')
    {{-- DataTables is not in the Metronic bundles — plugins.bundle.js carries
         jQuery and nothing else of the plugin. It is vendored under
         public/assets/plugins/custom/datatables (see VERSIONS.md there) rather
         than pulled from a CDN, because a strict CSP is planned. --}}
    <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>

    {{-- yajra's init script — a <script> element, so escaping it would print the
         source instead of running it. It is built from the html() builder's own
         configuration and carries no row data. --}}
    {!! $dataTable->scripts() !!}

    <script>
        // Wire the filter bar to the table. The three controls are not
        // DataTables columns, so they ride along as extra ajax parameters on
        // preXhr; the search box drives the plugin's own global term, which the
        // filterColumn() on `customer` spreads across the booking code and the
        // main customer's name.
        //
        // 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_cancellations_table'];

            if (!table) {
                return;
            }

            var search = document.getElementById('cancellations_filter_search');
            var controls = [
                'cancellations_filter_project',
                'cancellations_filter_date_from',
                'cancellations_filter_date_to',
            ]
                .map(function (id) { return document.getElementById(id); })
                .filter(Boolean);

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

            controls.forEach(function (control) {
                control.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