{{--
    Edit Booking — docs/wireframes-v12/edit-booking.html.

    ## Shape

    v12's layout, top to bottom:

      1. a top bar: the status pill and the `code · customer · unit` meta line on
         the left, a View button on the right;
      2. a card carrying the three-tab strip (Basic Details / Documents /
         History) with no bottom margin, so the panel below reads as attached;
      3. one `.tab-content-panel` per tab.

    The tabs are real links to the panels they reveal, not buttons with an
    inline `onclick` the way v12 writes them: nrems-tabs.js upgrades them in
    place, and with no Javascript at all all three panels render one under the
    other — every field, every document and the whole history still on the page,
    which is the right way for this screen to fail. Avoiding the inline handler
    is a step toward the planned strict CSP, not arrival at it.

    **The form wraps the Basic panel only.** The Documents panel carries delete
    forms of its own, and a form inside a form is invalid HTML that browsers
    resolve by silently dropping the inner one — which would have made every
    document's Delete button submit the booking instead.

    ## The twin rule (recipe §9)

    This file and bookings/create.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 create.blade.php in the same
    commit.** The one thing they share is
    bookings/partials/co-owner-block.blade.php, whose header says why a repeater
    row is the exception; the documents and history panels are reads rather than
    fields and are shared with the show screen for the same reason.

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

      * it PUTs to `bookings.update` and therefore carries a `_method` field;
      * the tab strip and its two extra panels;
      * Booking Information is ordered date / inquiry / entity type, which is
        this wireframe's order (the twin's is the other one's);
      * its footer depends on the booking's status (CR-8 §3.1) — see the note
        there;
      * every control is prefilled, the unit select can draw a unit that is
        `booked` because THIS booking holds it, and the Co-Owner Details section
        renders one block per stored co-owner.

    ## Deliberate differences from the wireframe

      * The wireframe has a **stray duplicated Occupation block** at lines
        275-288, outside the co-owner block it belongs to and with a mismatched
        `</div>`. It is a wireframe bug and is not reproduced.
      * Its trailing script is broken in the same way new-booking.html's is
        (lines 402-414: an unbalanced `);` and a dangling function body).
      * The "WhatsApp Number" label on line 212 is the inquiry form's wording
        leaking in; this field is `customers.mobile_number` and every other
        screen calls it Mobile Number, so it is Mobile Number here.
      * Occupation is a select and an Assigned Sales Person row is rendered on
        both twins — decisions D5 and D6, argued in create.blade.php's header.

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

    Every string on this screen is written here, on the client's instruction.
--}}
@extends('layouts.app')

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

@section('breadcrumbs')
    <x-breadcrumbs :items="[
        'Booking Management' => route('bookings.index'),
        'Edit Booking — '.$booking->code => 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. See create.blade.php's twin block.
        $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] ?? '',
                ];
            }
        }

        $selectedType = old('booking_type_id', $booking->booking_type_id);
        $through = $throughMap[$selectedType] ?? null;

        // Old input wins over the stored rows, so a rejected submit comes back
        // with exactly what the user had typed — including a co-owner they had
        // just added and one they had just removed. A blade loop and not a JS
        // restore pass (CR-8 §5).
        $coOwnerRows = is_array(old('co_owners'))
            ? old('co_owners')
            : $coOwners->map(static fn (\App\Models\Customer $row): array => [
                'id' => $row->getKey(),
                'name' => $row->name,
                'occupation' => $row->occupation?->value,
                'mobile_number' => $row->mobile_number,
                'alternate_mobile' => $row->alternate_mobile,
                'email' => $row->email,
                'address' => $row->address,
            ])->values()->all();

    @endphp

    <!--begin::Top bar-->
    <div class="d-flex justify-between align-center flex-wrap gap-3 mb-4">
        <div class="d-flex gap-2 align-center flex-wrap">
            @include('bookings.partials.status-badge', ['status' => $booking->status])
            <span class="bk-meta">{{ $booking->code }} &nbsp;·&nbsp; {{ $customer->name ?? '—' }} &nbsp;·&nbsp; {{ $booking->unit?->unit_number ?? '—' }}</span>
        </div>

        <div class="d-flex gap-2">
            @can('bookings.view')
                <a href="{{ route('bookings.show', $booking) }}" class="btn btn-outline">
                    <i class="fa-solid fa-eye" aria-hidden="true"></i>View
                </a>
            @endcan
        </div>
    </div>
    <!--end::Top bar-->

    <div class="card mb-0" data-nrems-tabs>
        <nav class="tabs" aria-label="Booking sections">
            <a href="#tab-basic" class="tab-item active" data-nrems-tab="tab-basic">
                <i class="fa-solid fa-info-circle" aria-hidden="true"></i>Basic Details
            </a>
            <a href="#tab-docs" class="tab-item" data-nrems-tab="tab-docs">
                <i class="fa-solid fa-folder-open" aria-hidden="true"></i>Documents
            </a>
            <a href="#tab-history" class="tab-item" data-nrems-tab="tab-history">
                <i class="fa-solid fa-clock-rotate-left" aria-hidden="true"></i>History
            </a>
        </nav>
    </div>

    <!--begin::Tab — Basic Details-->
    <div id="tab-basic" class="tab-content-panel">
        <x-form.open id="nrems_booking_form" :action="route('bookings.update', $booking)" method="PUT" class="form" />

        {{-- The module's client config, in three JSON data-attributes plus two
             scalars. `data-include-unit` is what keeps this booking's own unit
             in the cascade's answer when the project is re-chosen and turns out
             to be the same one — without it, a confirmed booking's unit (which
             is `booked`, because this booking holds it) would vanish from the
             select. --}}
        <div class="card"
             id="nrems_booking_form_module"
             data-unit-options-url="{{ route('bookings.unit_options', ['project' => '__PROJECT__']) }}"
             data-include-unit="{{ $booking->unit_id }}"
             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.date name="booking_date" label="Booking Date"
                                 :value="$booking->booking_date" 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. --}}
                    <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>

                    <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" />
                </div>

                <div class="form-row form-row-2">
                    <x-form.select name="assigned_to" label="Assigned Sales Person" :options="$users"
                                   placeholder="Select Sales Person" :value="$booking->assigned_to" />
                </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 — Common Name, the "Through its …"
                     panel, Occupation — matching the twin and the wireframe's
                     own `form-row form-row-3` (new-booking.html:145;
                     edit-booking.html draws the same three, in a row its own
                     stray markup mislabels). --}}
                <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>

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

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

                <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" />

                    {{-- The options carry this booking's own unit even when the
                         availability rule would drop it — see
                         BookingUnitOptions::forProject() on why a select cannot
                         show a value it has no option for. --}}
                    <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..." />
                </div>
            </div>

            {{-- ONE submit, and it carries no `name` (CR-9 §4, decision D11).

                 The footer used to depend on the state: a draft got Save as
                 Draft and Confirm Booking, a confirmed booking got Save Changes
                 alone, and BookingRequest checked the posted `action` against
                 those two sets. The user removed the draft — "all booking always
                 confirmed booking" — so there is one state left, one button, and
                 nothing for the server to tell apart. An update leaves the
                 lifecycle exactly where it was (BookingService::targetStatus()),
                 which is what "Update Booking" has always meant: demoting a
                 confirmed booking would silently free its own unit and
                 un-confirm its inquiry, and there is no button for that.

                 A cancelled booking never reaches this screen at all — the
                 controller 404s first. --}}
            <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>Update Booking
                </button>
            </div>
        </div>
        <x-form.close />
    </div>
    <!--end::Tab — Basic Details-->

    <!--begin::Tab — Documents-->
    <div id="tab-docs" class="tab-content-panel">
        @include('bookings.partials.documents', ['booking' => $booking])
    </div>
    <!--end::Tab — Documents-->

    <!--begin::Tab — History-->
    <div id="tab-history" class="tab-content-panel">
        <div class="card">
            <div class="card-header">
                <h5><i class="fa-solid fa-clock-rotate-left card-header-icon" aria-hidden="true"></i>Booking History</h5>
            </div>
            <div class="card-body">
                @include('bookings.partials.history', ['history' => $history])
            </div>
        </div>
    </div>
    <!--end::Tab — History-->

    {{-- The conditional, cascade and repeater rules are excluded from the client
         rule set. See BookingRequest::clientRuleExclusions(); create.blade.php
         carries the same note. --}}
    <x-form.jsvalidation :request="\App\Http\Requests\Bookings\BookingRequest::class"
                         selector="#nrems_booking_form"
                         :except="\App\Http\Requests\Bookings\BookingRequest::clientRuleExclusions()" />

    {{-- The Booking Entity Type confirmation (CR-15.2 §7 item G1). At the END of
         the content section and outside every `.card`, for the clipping reason
         its own header records — and AFTER <x-form.jsvalidation> above, which is
         what puts its script behind the generated `.validate()` call on the
         scripts stack. The guard's ordering note explains why that matters. --}}
    @include('bookings.partials.booking-type-modal', ['booking' => $booking])

    {{-- The Documents tab's delete confirmation (CR-15.3 item H2), for the same
         placement reason as the dialog above it. --}}
    @include('customer-documents.partials.delete-modal')
@endsection

@push('scripts')
    {{-- The tab strip. Progressive enhancement: every panel is rendered visible
         and this module hides the inactive ones on load, so the screen degrades
         to three sections one under the other rather than to two hidden ones.
         It does nothing at all on a page without [data-nrems-tabs]. --}}
    <script src="{{ asset('assets/js/nrems-tabs.js') }}" defer></script>

    {{-- 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. --}}
    <script src="{{ asset('assets/js/nrems-booking-form.js') }}" defer></script>
@endpush