{{--
    Inquiries listing — docs/wireframes-v12/inquiry.html, content region for
    content region.

    v12's order, top to bottom: a right-aligned "Add New Inquiry" 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 it is the shape
    projects/index.blade.php already draws.

    Unlike the projects listing there is no stat strip: inquiry.html has none.
    The page starts at the Add button.

    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 projects uses.

    The table markup and its configuration both come from the html builder, so
    the column list exists in exactly one place: InquiriesDataTable::getColumns().

    The three Booking Action modals are included once at the foot, and
    nrems-inquiry-actions.js re-targets them per row — see partials/modals and
    partials/booking-action for why one instance each rather than one per row.
--}}
@extends('layouts.app')

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

@section('breadcrumbs')
    <x-breadcrumbs :items="[__('inquiries.title') => 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 user without the create
         permission would get a bare row rather than no row at all. --}}
    @can('create', \App\Models\Inquiry::class)
        <div class="d-flex justify-between align-center mb-4">
            <div></div>
            <a href="{{ route('inquiries.create') }}" class="btn btn-primary">
                <i class="fa-solid fa-plus" aria-hidden="true"></i>{{ __('inquiries.add_button') }}
            </a>
        </div>
    @endcan

    <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 five 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: search, status, source, date-from,
             date-to. --}}
        <form id="inquiries-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="inquiries_filter_search">{{ __('inquiries.filters.search') }}</label>
                <input type="search" id="inquiries_filter_search" class="form-control"
                       placeholder="{{ __('inquiries.filters.search') }}" autocomplete="off" />
            </div>

            <label class="visually-hidden" for="inquiries_filter_status">{{ __('inquiries.filters.all_statuses') }}</label>
            <select id="inquiries_filter_status" class="form-control filter-select">
                <option value="">{{ __('inquiries.filters.all_statuses') }}</option>
                @foreach (\App\Enums\InquiryStatus::cases() as $status)
                    <option value="{{ $status->value }}">{{ $status->label() }}</option>
                @endforeach
                {{-- Not a status: the derived "is this inquiry holding a unit
                     right now" filter of CR-6 §5.1. It sits at the end of the
                     list the way the wireframe has it, and its value is the
                     sentinel InquiriesDataTable matches BEFORE it tries
                     InquiryStatus::tryFrom(). --}}
                <option value="{{ \App\DataTables\InquiriesDataTable::HOLD_FILTER }}">{{ __('inquiries.filters.hold') }}</option>
            </select>

            <label class="visually-hidden" for="inquiries_filter_source">{{ __('inquiries.filters.all_sources') }}</label>
            <select id="inquiries_filter_source" class="form-control filter-select">
                <option value="">{{ __('inquiries.filters.all_sources') }}</option>
                @foreach (\App\Enums\InquirySource::cases() as $source)
                    <option value="{{ $source->value }}">{{ $source->label() }}</option>
                @endforeach
            </select>

            <label class="visually-hidden" for="inquiries_filter_date_from">{{ __('inquiries.filters.date_from') }}</label>
            <input type="date" id="inquiries_filter_date_from" class="form-control filter-date"
                   aria-label="{{ __('inquiries.filters.date_from') }}" />

            <label class="visually-hidden" for="inquiries_filter_date_to">{{ __('inquiries.filters.date_to') }}</label>
            <input type="date" id="inquiries_filter_date_to" class="form-control filter-date"
                   aria-label="{{ __('inquiries.filters.date_to') }}" />
        </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>

    @include('inquiries.partials.modals')
    {{-- 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')
    {{-- 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" />
    @include('inquiries.partials.styles')
@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() !!}

    {{-- The Booking Action client (CR-6 §5.1). ES5, no build step, and it does
         nothing at all on a page without #nrems_inquiry_modals — the same shape
         as the other nrems-*.js modules. Every string it can put on screen
         comes in from Blade through one JSON data-attribute, and every option
         it builds lands through createElement/textContent, never innerHTML. --}}
    <script src="{{ asset('assets/js/nrems-inquiry-actions.js') }}" defer></script>

    <script>
        // Wire the filter bar to the table. The four 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 `full_name` spreads across name, phone and code.
        //
        // 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_inquiries_table'];

            if (!table) {
                return;
            }

            var search = document.getElementById('inquiries_filter_search');
            var controls = [
                'inquiries_filter_status',
                'inquiries_filter_source',
                'inquiries_filter_date_from',
                'inquiries_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('inquiries_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