{{--
    Initiate Cancellation — docs/wireframes-v12/add-cancellation.html (the card
    at lines 76-214: three form sections and the footer).

    ## Shape

    ONE `.card`. Inside it, a `.form-section` per heading — each with its
    `.form-section-title` and the wireframe's own icon — and a `.card-footer` at
    the bottom. Fields are laid out by v12's `.form-row.form-row-3` / `-4` grids,
    not by Bootstrap columns, which is why no field carries a `group-class`: the
    row owns the columns and `.form-group` owns its own margin.

    ## The twin rule (recipe §9, CR-9 §0.6)

    This file and cancellations/edit.blade.php are twins. Every field is written
    out in both, and neither includes a shared form partial for its own fields.
    **A field added, removed or renamed here must be mirrored in edit.blade.php
    in the same commit.** The one thing they share is
    cancellations/partials/document-verified.blade.php, and that partial's header
    says why a checklist generated from an enum is the exception.

    ### What this screen has that its twin does not

      * it posts to `cancellations.store` as a POST, where the twin PUTs to
        `cancellations.update` and therefore carries a `_method` field;
      * Booking ID is a real `<select>` — a REMOTE select2 since CR-19, holding
        at most one option; on the twin it is a disabled input, because the
        booking of a cancellation can never change (CR-9 §6.3) — and
        CancellationRequest gives `booking_id` no rule at all on that route, so
        the two agree by construction;
      * Customer / Project - Unit / Booking Date are filled by the module from
        the chosen search row; on the twin they are stored values;
      * Cancellation Date is prefilled with **today** (client instruction) and
        Requested By with **Customer** (the wireframe's own first option); the
        twin prefills both from the row;
      * its footer submits "Submit Cancellation"; the twin's says "Update
        Cancellation".

    ## Authorised deviations from the wireframe (CR-9 §6.2, §9)

      * **Total Booking Value, Total Paid and Outstanding Balance are dropped**
        (client removal), so the second row keeps its `.form-row-4` grid with
        Booking Date in the first cell and three empty `.form-group` divs holding
        the geometry — the wireframe's column widths are preserved rather than
        letting one field stretch across the row.
      * **IFSC Code and Expected Refund Date are dropped** with their entire
        trailing `.form-row-3` (client removal). No refund tracking exists
        (decision D3) and no money columns exist anywhere (decision D8).
      * **The submit reads "Submit Cancellation"**, not the wireframe's "Submit
        for Approval" (decision D6): there is no approval workflow to submit to,
        and pressing this button cancels the booking outright.
      * **No inline `onchange=`.** The wireframe wires its stage panels with two
        inline handlers; ours are data-role hooks read by
        nrems-cancellation-form.js. Identical behaviour, and the house rule
        (recipe §12) is that markup carries no script.

    ## The Booking ID select is a remote select2 (CR-19)

    It renders with at most ONE option — the chosen booking, or none — because
    select2's ajax mode fetches the rest on demand from
    `cancellations.booking_search`. It used to render every confirmed booking in
    the system, which was a query over all of them on every open of a control the
    user was going to type into anyway.

    Hand-written rather than <x-form.select2>: that component takes an `options`
    array and adds `data-control="select2"`, which nrems-custom.js's fallback then
    upgrades with NO ajax config — the plain, list-backed widget. This one is
    initialised by nrems-cancellation-form.js instead, so it deliberately does NOT
    carry that attribute; two initialisers on one element is how a select ends up
    with a search box that queries nothing.

    ## Prefill, and why it is server-side

    `?booking={id}` arrives from the bookings listing's cancel icon and the
    booking detail screen's Cancel Booking button, and the client's instruction
    is that all four Booking Reference fields fill from it. A rejected submit
    brings the same four back from `old('booking_id')`, which wins over the query
    string. Either way they are rendered filled — the option is `selected` with
    the searched label's own text and the three disabled inputs carry their
    values before any script runs, and select2 adopts what it finds. The module
    only takes over when the user *changes* the select, because no `change` event
    fires on a freshly drawn page (the lesson CR-5 §15.4 recorded the hard way).

    CancellationController::create() resolves all five strings through
    CancellationBookingSearchController::row(), which is the same method the
    search endpoint builds its rows with — so a server-rendered option and a
    searched one are byte-identical.

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

    Every string on this screen — labels, placeholders, section titles, the
    footer, and the five sentences select2 and the module can put on screen —
    is written here, on the client's instruction. Do not extract them.
--}}
@extends('layouts.app')

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

@section('breadcrumbs')
    <x-breadcrumbs :items="[
        'Cancellation Management' => route('cancellations.index'),
        'New Cancellation' => null,
    ]" />
@endsection

@section('content')
    @php
        // The chosen booking's five strings, or null. Resolved in the controller
        // — from old('booking_id') on a rejected submit and from `?booking=`
        // otherwise, old() winning — so this view does no picking of its own.
        $chosen = $selectedBooking;

        // The three disabled inputs' first paint. Empty for an unchosen booking,
        // which is what makes the wireframe's "Auto-filled on booking selection"
        // placeholders visible.
        $blank = '';

        /*
         * Everything the client module and select2 can put on screen, in one
         * JSON attribute. The module holds no wording of its own — the rule
         * nrems-unit-import.js established and every form module since repeats.
         */
        $strings = [
            'search_placeholder' => 'Search and select booking...',
            'searching' => 'Searching…',
            'no_results' => 'No matching bookings',
            'input_too_short' => 'Type to search',
        ];

        // The Document Verified section's state. Both halves come from old()
        // first so a rejected submit comes back with the same card ticked and
        // the same boxes inside it; a fresh screen has neither.
        $stageValue = old('stage');
        $selectedStage = is_string($stageValue) ? \App\Enums\CancellationStage::tryFrom($stageValue) : null;

        $verifiedRaw = old('verified_docs', []);
        $verified = is_array($verifiedRaw)
            ? array_values(array_map(intval(...), array_filter($verifiedRaw, is_numeric(...))))
            : [];
    @endphp

    <x-form.open id="nrems_cancellation_form" :action="route('cancellations.store')" method="POST" class="form" />

    <div class="card mb-4" id="nrems_cancellation_form_module"
         data-strings="{{ json_encode($strings, JSON_UNESCAPED_UNICODE) }}"
         data-search-url="{{ route('cancellations.booking_search') }}">

        {{-- ===== 1. Booking Reference ===== --}}
        <div class="form-section">
            <div class="form-section-title"><i class="fa-solid fa-file-contract" aria-hidden="true"></i>Booking Reference</div>

            <div class="form-row form-row-3">
                {{-- The remote select2 (CR-19 §S1), written out rather than
                     <x-form.select2> for the reason the header records: that
                     component adds `data-control="select2"` and this control
                     must not carry it.

                     ONE option, or none. The label is the client's own format
                     — "Booking Id - Customer name - Mobile Number - Project name
                     - Unit Number" — built by
                     CustomerDocumentBookingSearchController::label(), the same
                     method the search endpoint's rows use, and escaped here by
                     Blade. select2 renders a searched row's text as TEXT
                     (`escapeMarkup` is its default and the module does not
                     replace it), so a customer name containing markup is
                     characters on both paths.

                     `required` still reaches the client: booking_id is NOT on
                     CancellationRequest::clientRuleExclusions(), so jsvalidation
                     renders the rule (its `exists` is dropped by the package's
                     own config). --}}
                <x-form.group name="booking_id" label="Booking ID" required for="booking_id">
                    <select class="form-control @error('booking_id') is-invalid @enderror"
                            id="booking_id" name="booking_id" required
                            data-role="booking-select"
                            @error('booking_id') aria-invalid="true" aria-describedby="booking_id_error" @enderror>
                        <option value="">Search and select booking...</option>
                        @if ($chosen !== null)
                            <option value="{{ $chosen['id'] }}" selected>{{ $chosen['text'] }}</option>
                        @endif
                    </select>
                </x-form.group>

                {{-- Display-only, and deliberately NAMELESS as well as disabled:
                     a disabled control does not submit, and a control with no
                     name could not be read even if somebody removed the
                     attribute with devtools. The three values are the booking's
                     own and are re-read from the row on every save. The projects
                     module's readonly Project Code input records the same
                     pattern. --}}
                <div class="form-group">
                    <label class="form-label" for="cancellation_customer_display">Customer</label>
                    <input type="text" class="form-control" id="cancellation_customer_display"
                           data-role="customer-display"
                           value="{{ $chosen['customer'] ?? $blank }}"
                           placeholder="Auto-filled on booking selection" disabled />
                </div>

                <div class="form-group">
                    <label class="form-label" for="cancellation_project_unit_display">Project - Unit</label>
                    <input type="text" class="form-control" id="cancellation_project_unit_display"
                           data-role="project-unit-display"
                           value="{{ $chosen['project_unit'] ?? $blank }}"
                           placeholder="Auto-filled on booking selection" disabled />
                </div>
            </div>

            {{-- Still a `.form-row-4`, with three empty cells. The wireframe put
                 Booking Date first and three financial fields beside it; the
                 client removed those three, and keeping the grid is what keeps
                 Booking Date the same width it is on the wireframe rather than
                 stretching it across the card. --}}
            <div class="form-row form-row-4">
                <div class="form-group">
                    <label class="form-label" for="cancellation_booking_date_display">Booking Date</label>
                    <input type="text" class="form-control" id="cancellation_booking_date_display"
                           data-role="booking-date-display"
                           value="{{ $chosen['booking_date'] ?? $blank }}"
                           placeholder="Auto-filled" disabled />
                </div>
                <div class="form-group"></div>
                <div class="form-group"></div>
                <div class="form-group"></div>
            </div>
        </div>

        {{-- ===== 2. Cancellation Details ===== --}}
        <div class="form-section">
            <div class="form-section-title"><i class="fa-solid fa-ban" aria-hidden="true"></i>Cancellation Details</div>

            <div class="form-row form-row-3">
                <x-form.select name="cancellation_reason_id" label="Cancellation Reason" :options="$reasons"
                               placeholder="Select Reason" required />

                {{-- No placeholder and no asterisk: the wireframe's select opens
                     on Customer, has no blank option and carries no `*` — so the
                     field can never be empty and the star would be a mark the
                     wireframe does not draw. It is still `required` on the
                     server (CR-9 §5), which is where a hand-rolled post omitting
                     it is refused. --}}
                <x-form.select name="requested_by" label="Requested By"
                               :options="\App\Enums\CancellationRequestedBy::options()"
                               :value="\App\Enums\CancellationRequestedBy::Customer->value" />

                {{-- Prefilled with today (client instruction). old() still wins,
                     through the component's own form_old(). --}}
                <x-form.date name="cancellation_date" label="Cancellation Date" :value="today()" required />
            </div>

            <x-form.textarea name="cancellation_note" label="Detailed Reason" rows="3"
                             placeholder="Provide a detailed explanation for the cancellation request..." />
        </div>

        {{-- ===== 3. Document Verified ===== --}}
        @include('cancellations.partials.document-verified', [
            'selectedStage' => $selectedStage,
            'verified' => $verified,
        ])

        {{-- v12's card footer: Cancel as the outline button, then the submit.
             `.card-footer` is already the flex row, so no wrapper of its own.
             The label is decision D6 — the wireframe's "Submit for Approval"
             names a workflow that does not exist, and this button cancels the
             booking outright. --}}
        <div class="card-footer">
            <a href="{{ route('cancellations.index') }}" class="btn btn-outline">Cancel</a>
            <button type="submit" class="btn btn-primary">
                <i class="fa-solid fa-paper-plane" aria-hidden="true"></i>Submit Cancellation
            </button>
        </div>
    </div>
    <x-form.close />

    {{-- The stage and checklist rules are excluded from the client rule set:
         `stage` is two checkboxes sharing one name, which jQuery Validate reads
         as a group and reports against whichever box it bound first, and the
         checklist's valid range depends on which card is ticked — a cross-field
         bound proengsoft has no vocabulary for. The server validates both on
         every submit. See CancellationRequest::clientRuleExclusions(). --}}
    <x-form.jsvalidation :request="\App\Http\Requests\Cancellations\CancellationRequest::class"
                         selector="#nrems_cancellation_form"
                         :except="\App\Http\Requests\Cancellations\CancellationRequest::clientRuleExclusions()" />
@endsection

@push('scripts')
    {{-- The cancellation form client (CR-9 §6.2, CR-19 §S4). ES5, no build step,
         and it does nothing at all on a page without
         #nrems_cancellation_form_module. It composes no text of its own — its
         sentences come from `data-strings` above and the three values it writes
         are scalars the search endpoint built — and it reaches the DOM through
         `.value` and the `hidden` / `disabled` properties, never innerHTML.

         Its one dependency is optional: jQuery and select2 (both already in
         plugins.bundle.js, which layouts.app loads before this) turn the Booking
         ID select into the remote search. Without them the module still runs and
         the screen still works, with the server-rendered selection and no
         search. --}}
    <script src="{{ asset('assets/js/nrems-cancellation-form.js') }}" defer></script>
@endpush