{{--
    New Booking — docs/wireframes-v12/new-booking.html (the card at ~lines
    105-353: six 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-2/-3` 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)

    This file and bookings/edit.blade.php are twins. Every field is written out
    in both, and neither includes a shared form partial. **A field added,
    removed or renamed here must be mirrored in edit.blade.php in the same
    commit.** The one thing they do share is
    bookings/partials/co-owner-block.blade.php, and that partial's header says
    why a repeater row is the exception.

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

      * it posts to `bookings.store` as a POST, where the twin PUTs to
        `bookings.update` and therefore carries a `_method` field;
      * it is a single card, where the twin is a tab strip over three panels
        (Basic Details / Documents / History) per edit-booking.html;
      * Booking Information is ordered entity type / date / inquiry, which is
        this wireframe's order; the twin's is date / inquiry / entity type,
        which is that one's;
      * its footer submits "Confirm Booking"; the twin's says "Update Booking"
        (CR-9 §4 — the draft, and the `action` field that chose between the two
        buttons, are both gone);
      * every control renders empty — unless the user arrived from an inquiry's
        "Proceed to Booking" button, in which case the server has prefilled six
        of them (CR-8 §3.5);
      * the Co-Owner Details section starts with **no blocks at all** (client:
        "Default Co-Owner Details blank"), where the twin renders one per stored
        co-owner.

    ## Deliberate differences from the wireframe

      * **Occupation is a select, not a free-text input** (decision D5).
        new-booking.html draws a text box for the main customer and a select for
        every co-owner, and edit-booking.html draws a select for both; the
        select wins, for data sanity and because the Occupation enum already
        exists and the inquiry module already collects it that way.
      * **An Assigned Sales Person row is added** (decision D6). Only
        edit-booking.html draws it; a field that can be set on one twin and not
        the other is exactly the drift the twin rule exists to stop, and a
        booking with no salesperson until somebody edits it is not a state the
        client asked for.
      * **One "Through its …" block, not six.** The wireframe writes all six out
        with `display:none` and swaps them in JS. One block retitled from a map
        is the same behaviour with one copy of the markup — and the map is
        rendered from Booking::THROUGH_MAP, so the block's title, the server's
        required-when rule and the detail screen's row cannot disagree.
      * **The wireframe's trailing script is broken** (new-booking.html:360-374
        has an unbalanced `);` and a dangling function body). It is a wireframe
        bug; the behaviour it was reaching for is in nrems-booking-form.js.

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

    Every string on this screen — labels, placeholders, section titles, the JS
    module's own strings — is written here, on the client's instruction. Do not
    extract them.
--}}
@extends('layouts.app')

@section('title', 'New Booking')

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

@section('content')
    @php
        $occupations = \App\Enums\Occupation::options();

        // The "Through its …" map, keyed by booking type ID for the client and
        // built from the name-keyed constant. Rendered from Booking::THROUGH_MAP
        // so the block's title, the server's required-when rule and the detail
        // screen's row all read the same words — see that constant on why the
        // canonical key is the name and not the id.
        $throughMap = [];

        foreach ($bookingTypes as $typeId => $typeName) {
            if (isset(\App\Models\Booking::THROUGH_MAP[$typeName])) {
                $throughMap[$typeId] = [
                    'title' => \App\Models\Booking::THROUGH_MAP[$typeName],
                    'placeholder' => \App\Models\Booking::THROUGH_PLACEHOLDERS[$typeName] ?? '',
                ];
            }
        }

        // The block's state on a freshly drawn page is decided HERE, not by the
        // module: no `change` event fires on page load, so the script never runs
        // there. The lesson CR-5 §15.4 recorded the hard way.
        $selectedType = old('booking_type_id', $booking->booking_type_id);
        $through = $throughMap[$selectedType] ?? null;

        // Co-owner blocks re-render server-side from old input on a rejected
        // submit (CR-8 §5) — a blade loop, not a JS restore pass, for the same
        // reason. A fresh create screen has none: the client's instruction is
        // that the section starts blank.
        $coOwnerRows = is_array(old('co_owners')) ? old('co_owners') : [];
    @endphp

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

    {{-- The module's client config, in three JSON data-attributes plus two
         scalars — the shape nrems-inquiry-form.js established. The script holds
         no copy of any wording, and the only url it builds is this template with
         the project id substituted. --}}
    <div class="card mb-4"
         id="nrems_booking_form_module"
         data-unit-options-url="{{ route('bookings.unit_options', ['project' => '__PROJECT__']) }}"
         data-include-unit=""
         data-through-map="{{ json_encode($throughMap, JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_SLASHES) }}"
         data-strings="{{ json_encode([
             'unit_placeholder' => 'Select unit',
             'unit_available' => '(Available)',
             'unit_current' => '(Current)',
             'co_owner_title' => 'Co-Owner',
             'name_required' => 'Please enter the common name before adding a co-owner.',
         ], JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_SLASHES) }}">

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

            <div class="form-row form-row-3">
                <x-form.select name="booking_type_id" label="Booking Entity Type" :options="$bookingTypes"
                               placeholder="Select Booking Entity Type" :value="$booking->booking_type_id"
                               required data-role="booking-type-select" />

                <x-form.date name="booking_date" label="Booking Date"
                             :value="$booking->booking_date ?? today()" required />

                {{-- Written out rather than <x-form.select> because the control
                     needs the wireframe's helper line under it, and the select
                     component has no hint prop — <x-form.group>'s own docblock
                     invites this use, and the markup below is the component's,
                     class for class. --}}
                <x-form.group name="inquiry_id" label="Inquiry" required for="inquiry_id"
                              hint="Link this booking to an inquiry">
                    <select class="form-control" id="inquiry_id" name="inquiry_id" required
                            aria-describedby="inquiry_id_hint">
                        <option value="">Select Inquiry</option>
                        @foreach ($inquiryOptions as $optionId => $optionLabel)
                            <option value="{{ $optionId }}"
                                    @selected((string) old('inquiry_id', $booking->inquiry_id) === (string) $optionId)>{{ $optionLabel }}</option>
                        @endforeach
                    </select>
                </x-form.group>
            </div>

            {{-- One field in a two-column row, exactly as edit-booking.html
                 draws it: the control keeps its half-width and the row keeps
                 its grid. --}}
            <div class="form-row form-row-2">
                <x-form.select name="assigned_to" label="Assigned Sales Person" :options="$users"
                            :value="$booking->assigned_to ?? auth()->id()" required />
            </div>
        </div>

        {{-- ===== 2. Booking Details (the main customer) ===== --}}
        <div class="form-section">
            <div class="form-section-title"><i class="fa-solid fa-user" aria-hidden="true"></i>Booking Details</div>

            {{-- THREE cells, not two: new-booking.html:145 opens this section
                 with `form-row form-row-3` and puts Common Name, the
                 "Through its …" panel and Occupation side by side in it. The
                 panel is a cell of the grid, not a full-bleed block between two
                 rows — which is what makes it read as belonging to the name
                 beside it rather than to the whole section. --}}
            <div class="form-row form-row-3">
                <x-form.input name="name" label="Common Name" :value="$customer->name"
                              placeholder="e.g. Rajesh Patel" required data-role="main-name" />

                {{-- The one "Through its …" block. Server-rendered into the
                     right state; retitled and shown/hidden by the module when
                     the entity type changes. --}}
                <div class="through-block" data-role="through-block" @unless ($through) hidden @endunless>
                    <div class="through-title" data-role="through-title">{{ $through['title'] ?? '' }}</div>
                    <x-form.input name="through_name" label="Name" :value="$booking->through_name"
                                  :placeholder="$through['placeholder'] ?? ''" required data-role="through-input" />
                </div>

                <x-form.select name="occupation" label="Occupation" :options="$occupations"
                               placeholder="Select Occupation" :value="$customer->occupation?->value" required />
            </div>

            <div class="form-row form-row-2">
                <x-form.input name="mobile_number" type="tel" label="Mobile Number"
                              :value="$customer->mobile_number" placeholder="e.g. 98250 12345" required />

                <x-form.input name="alternate_mobile" type="tel" label="Alternate Mobile"
                              :value="$customer->alternate_mobile" placeholder="e.g. 79840 56789" />
            </div>

            <div class="form-row form-row-2">
                <x-form.input name="email" type="email" label="Email" :value="$customer->email"
                              placeholder="e.g. rajesh.patel@email.com" required />

                <x-form.textarea name="address" label="Address" rows="2" :value="$customer->address"
                                 placeholder="Full address" required />
            </div>
        </div>

        {{-- ===== 3. Co-Owner Details ===== --}}
        <div class="form-section">
            <div class="form-section-title co-owner-title-row">
                <span><i class="fa-solid fa-users" aria-hidden="true"></i>Co-Owner Details</span>
                <button type="button" class="btn btn-outline btn-sm" data-role="add-co-owner">
                    <i class="fa-solid fa-plus" aria-hidden="true"></i>Add More Co-Owner
                </button>
            </div>

            {{-- Starts EMPTY on a fresh screen — the client's instruction
                 ("Default Co-Owner Details blank"). Only a rejected submit puts
                 blocks here, and it puts back exactly what the user typed. --}}
            <div data-role="co-owner-list">
                @foreach ($coOwnerRows as $index => $row)
                    @include('bookings.partials.co-owner-block', [
                        'index' => $index,
                        'row' => is_array($row) ? $row : [],
                        'position' => $loop->iteration,
                        'occupations' => $occupations,
                    ])
                @endforeach
            </div>

            {{-- The wireframe's dashed note, always present. --}}
            <div class="co-owner-note">
                <i class="fa-solid fa-circle-info" aria-hidden="true"></i> Click "Add More Co-Owner" to add additional co-owners.
            </div>

            {{-- The block the module clones. `__INDEX__` is replaced in every
                 name, id and label `for` as it is cloned; a <template>'s content
                 is inert and is never submitted. --}}
            <template data-role="co-owner-template">
                @include('bookings.partials.co-owner-block', [
                    'index' => '__INDEX__',
                    'row' => [],
                    'position' => null,
                    'occupations' => $occupations,
                ])
            </template>
        </div>

        {{-- ===== 4. Contact Person ===== --}}
        <div class="form-section">
            <div class="form-section-title"><i class="fa-solid fa-address-card" aria-hidden="true"></i>Contact Person</div>

            <div class="form-row form-row-2">
                <x-form.input name="contact_name" label="Name" :value="$booking->contact_name"
                              placeholder="e.g. Ketan Shah" />

                <x-form.input name="contact_mobile" type="tel" label="Mobile Number"
                              :value="$booking->contact_mobile" placeholder="e.g. 98250 11223" />
            </div>

            <div class="form-row form-row-2">
                <x-form.input name="contact_email" type="email" label="Email"
                              :value="$booking->contact_email" placeholder="e.g. contact@email.com" />

                <x-form.textarea name="contact_address" label="Address" rows="2"
                                 :value="$booking->contact_address" placeholder="Contact person's address" />
            </div>
        </div>

        {{-- ===== 5. Unit Selection ===== --}}
        <div class="form-section">
            <div class="form-section-title"><i class="fa-solid fa-building" aria-hidden="true"></i>Unit Selection</div>

            <div class="form-row form-row-2">
                <x-form.select name="project_id" label="Project" :options="$projects"
                               placeholder="Select project" :value="$booking->project_id"
                               required data-role="project-select" />

                {{-- Server-rendered with the project's available units so the
                     screen is correct before any Javascript runs — empty here,
                     because a new booking has no project yet. The module refills
                     it from the cascade when a project is chosen. --}}
                <x-form.group name="unit_id" label="Unit" required for="unit_id"
                              hint="Only available units shown">
                    <select class="form-control" id="unit_id" name="unit_id" required
                            data-role="unit-select" aria-describedby="unit_id_hint">
                        <option value="">Select unit</option>
                        @foreach ($unitOptions as $optionId => $optionLabel)
                            <option value="{{ $optionId }}"
                                    @selected((string) old('unit_id', $booking->unit_id) === (string) $optionId)>{{ $optionLabel }}</option>
                        @endforeach
                    </select>
                </x-form.group>
            </div>
        </div>

        {{-- ===== 6. Remarks ===== --}}
        <div class="form-section">
            <div class="form-section-title"><i class="fa-solid fa-comment" aria-hidden="true"></i>Remarks</div>

            <div class="form-row form-row-2">
                <x-form.textarea name="special_conditions" label="Special Conditions"
                                 :value="$booking->special_conditions"
                                 placeholder="Any special conditions or agreements with the customer..." />
            </div>
        </div>

        {{-- 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.

             **ONE submit, and it carries no `name`** (CR-9 §4, decision D11).
             The wireframe draws Save as Draft beside Confirm Booking and CR-8
             built both; the user removed the draft — "all booking always
             confirmed booking" — so there is nothing left for the server to tell
             apart. BookingRequest has no `action` rule any more and
             BookingService::targetStatus() decides from the booking's own state:
             a create confirms. --}}
        <div class="card-footer">
            <a href="{{ route('bookings.index') }}" class="btn btn-outline">Cancel</a>
            <button type="submit" class="btn btn-primary">
                <i class="fa-solid fa-check" aria-hidden="true"></i>Confirm Booking
            </button>
        </div>
    </div>
    <x-form.close />

    {{-- The conditional, cascade and repeater rules are excluded from the client
         rule set: every one of them depends on another control's value or on a
         row that does not exist until the module clones it, and proengsoft has
         no vocabulary for either — it would mark a hidden "Through its" block
         invalid on an Individual booking rather than render nothing. The server
         validates all of them. See BookingRequest::clientRuleExclusions(). --}}
    <x-form.jsvalidation :request="\App\Http\Requests\Bookings\BookingRequest::class"
                         selector="#nrems_booking_form"
                         :except="\App\Http\Requests\Bookings\BookingRequest::clientRuleExclusions()" />
@endsection

@push('scripts')
    {{-- The booking form client (CR-8 §5). ES5, no build step, no dependency,
         and it does nothing at all on a page without
         #nrems_booking_form_module. 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-booking-form.js') }}" defer></script>
@endpush