{{--
    View Cancellation — docs/wireframes-v12/view-cancellation.html, rebuilt on
    the wireframe's own markup.

    v12's layout, top to bottom:

      1. a status row: the enlarged status pill and an id line on the left,
         actions on the right;
      2. a `.grid-2` of the Booking Details and Cancellation Details cards;
      3. the Document Verified card;
      4. the Refund Status card;
      5. the Approval Trail card;
      6. an amber unit-status info box;
      7. a bottom action row.

    ## Authorised removals (CR-9 §6.4, §9)

      * **The Refund Status card and the Approval Trail card are dropped whole**
        (client removals). Neither has any data behind it: there is no approval
        workflow (decision D3) and no refund tracking or money columns anywhere
        in this application (decision D8).
      * **The three financial rows go with them** — Total Booking Value, Total
        Amount Paid and Outstanding Balance in Booking Details. Same reason, and
        the same "financial not required" stance CR-8 took.
      * **Print and Download PDF are dropped, top AND bottom** (decision D9,
        user decision). Both rows keep their Edit button and nothing else.
      * **The wireframe's two trailing empty checklist rows are not rendered.**
        view-cancellation.html:193-200 draws two rows with a green tick and an
        empty `<span>`; that is a wireframe bug, and this screen draws exactly
        the documents the chosen stage has.

    ## Adaptations (CR-9 §6.4, §9)

      * **"Cancellation ID: CAN-2026-0015" becomes "Booking ID: {code}"**, and
        the Cancellation Details card's "Cancellation ID" row shows the booking
        code too (decision D10). There is no CAN-#### series — a cancellation IS
        a cancelled booking and the booking's code identifies it everywhere. The
        row is kept rather than deleted so the detail grid stays 2×2 plus the
        full-width reason, which is the shape the wireframe draws.
      * **"Request Date" is labelled "Cancellation Date"** — that is the field
        the form collects and the column the listing sorts on, and two names for
        one date on two screens is the drift worth avoiding.
      * **The unit-status info box is rewritten** in the past tense. The
        wireframe says the unit "will be released ... upon cancellation
        completion and refund confirmation. Current unit status: Cancellation In
        Progress" — that describes the approval world that does not exist here.
        In this application the unit goes back to `available` inside the same
        transaction as the cancellation, so the box says what actually happened.

    ## Dates and blanks

    Dates are `d M Y`, the format this module and the bookings module write
    (`config('nrems.date_format')` is `d-m-Y` and is what the *inquiries* detail
    screen uses — mixing the two inside one module would be the drift). A value
    with nothing in it is an em-dash.

    ## No lang file (CR-9 §0.1), and no raw output

    Every string on this screen is written here. Every value is user-supplied
    text and every one goes out through `{{ }}`; there is no `{!! !!}` in this
    file at all — the `<strong>` tags in the info box are literal markup with
    escaped values inside them.
--}}
@extends('layouts.app')

@section('title', 'Cancellation - '.$booking->code)

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

@section('content')
    @php
        $blank = '—';

        $customer = $booking->mainCustomer;
        $stage = $booking->cancellation_stage;

        // The ticked item numbers, normalised to ints so the in_array() below is
        // a strict comparison against the enum's own 1-based keys. A JSON column
        // read back through the `array` cast can hold anything an older row put
        // there, so it is filtered rather than trusted.
        $verifiedRaw = $booking->cancellation_verified_docs ?? [];
        $verified = is_array($verifiedRaw)
            ? array_values(array_map(intval(...), array_filter($verifiedRaw, is_numeric(...))))
            : [];

        $unitLabel = array_values(array_filter([
            $booking->unit?->unit_number,
            $booking->project?->name,
        ]));
    @endphp

    <!--begin::Status row-->
    <div class="d-flex justify-between align-center flex-wrap gap-3 mb-4">
        <div class="d-flex align-center gap-3">
            {{-- `badge-lg` is the class the shared stylesheet already carries for
                 exactly this: v12 writes `font-size: 14px; padding: 8px 16px`
                 inline on a detail screen's headline pill, which is what that
                 class is. The tone is `danger`, which is
                 BookingStatus::Cancelled->badgeTone() — written out here rather
                 than read from the enum because this pill says one thing and one
                 thing only: every booking that reaches this screen is
                 cancelled. --}}
            <span class="badge badge-danger badge-lg">
                <span class="dot" aria-hidden="true"></span>Cancelled
            </span>
            <span class="text-muted can-banner-meta">Booking ID: <strong>{{ $booking->code }}</strong></span>
        </div>

        {{-- The whole row is gated, not just the button inside it — same shape
             as the bottom action row, so a reader without `cancellations.edit`
             gets no empty flex div in either place. --}}
        @can('cancellations.edit')
            <div class="d-flex gap-2">
                <a href="{{ route('cancellations.edit', $booking) }}" class="btn btn-primary btn-sm">
                    <i class="fa-solid fa-pen" aria-hidden="true"></i>Edit
                </a>
            </div>
        @endcan
    </div>
    <!--end::Status row-->

    {{-- Plain `grid-2`, NOT the bookings module's `grid-2-top`.
         view-cancellation.html:90 writes `grid-2 mb-4` and lets the two cards
         stretch to the taller one; the booking detail screen adds
         `align-items: start` because ITS wireframe asks for it. Pixels win over
         a sibling module's idiom, and §9 authorises no addition here. --}}
    <div class="grid-2 mb-4">
        <x-card title="Booking Details" icon="fa-solid fa-file-contract text-primary">
            <div class="detail-grid">
                <div class="detail-item">
                    <span class="label">Booking ID</span>
                    <span class="value">{{ $booking->code }}</span>
                </div>
                <div class="detail-item">
                    <span class="label">Customer Name</span>
                    <span class="value @if ($customer === null) muted @endif">{{ $customer?->name ?? $blank }}</span>
                </div>
                <div class="detail-item">
                    <span class="label">Project</span>
                    <span class="value @if ($booking->project === null) muted @endif">{{ $booking->project?->name ?? $blank }}</span>
                </div>
                <div class="detail-item">
                    <span class="label">Unit</span>
                    <span class="value @if ($booking->unit === null) muted @endif">{{ $booking->unit?->unit_number ?? $blank }}</span>
                </div>
                <div class="detail-item">
                    <span class="label">Booking Date</span>
                    <span class="value">{{ $booking->booking_date->format('d M Y') }}</span>
                </div>
            </div>
        </x-card>

        <x-card title="Cancellation Details" icon="fa-solid fa-ban text-danger">
            <div class="detail-grid">
                {{-- The wireframe's "Cancellation ID" row, showing the booking
                     code (decision D10 — see the header). Kept so the grid keeps
                     its 2×2 shape. --}}
                <div class="detail-item">
                    <span class="label">Cancellation ID</span>
                    <span class="value">{{ $booking->code }}</span>
                </div>
                <div class="detail-item">
                    <span class="label">Cancellation Date</span>
                    <span class="value @if ($booking->cancellation_date === null) muted @endif">{{ $booking->cancellation_date?->format('d M Y') ?? $blank }}</span>
                </div>
                <div class="detail-item">
                    <span class="label">Cancellation Reason</span>
                    <span class="value @if ($booking->cancellationReason === null) muted @endif">{{ $booking->cancellationReason?->name ?? $blank }}</span>
                </div>
                <div class="detail-item">
                    <span class="label">Requested By</span>
                    <span class="value @if ($booking->cancellation_requested_by === null) muted @endif">{{ $booking->cancellation_requested_by?->label() ?? $blank }}</span>
                </div>
                <div class="detail-item detail-item-wide">
                    <span class="label">Detailed Reason</span>
                    <span class="value can-detail-prose @if (blank($booking->cancellation_note)) muted @endif">{{ $booking->cancellation_note ?: $blank }}</span>
                </div>
            </div>
        </x-card>
    </div>

    <x-card title="Document Verified" icon="fa-solid fa-list-check text-primary" class="mb-4">
        @if ($stage === null)
            {{-- Not a state cancel() can produce — `stage` is required on both
                 forms — but the column is nullable in the schema, and a card
                 that fatals is a worse answer than one that says nothing was
                 recorded. --}}
            <p class="can-empty">No cancellation stage was recorded.</p>
        @else
            <div class="can-stage-pill">
                <i class="fa-solid fa-check-circle" aria-hidden="true"></i>
                <span>{{ $stage->label() }}</span>
            </div>

            {{-- Every document of the chosen stage, ticked or pending — the
                 wireframe's own mixed-state rendering. The list comes from
                 CancellationStage::documents(), which is where the wording
                 lives; `verified_docs` holds only the numbers. --}}
            <div class="can-doc-status-list">
                @foreach ($stage->documents() as $number => $text)
                    @php $isVerified = in_array($number, $verified, true); @endphp
                    <div class="can-doc-status-item">
                        @if ($isVerified)
                            <i class="fa-solid fa-check-circle text-success" aria-hidden="true"></i>
                            <span class="visually-hidden">Verified:</span>
                        @else
                            <i class="fa-solid fa-clock text-warning" aria-hidden="true"></i>
                            <span class="visually-hidden">Pending:</span>
                        @endif
                        <span>{{ $number }}. {{ $text }}</span>
                    </div>
                @endforeach
            </div>
        @endif
    </x-card>

    {{-- The amber unit-status box. `info-box-warning` carries three of the
         wireframe's four colours (background #FEF3C7, border #FDE68A, text
         #92400E); the fourth is the icon, which view-cancellation.html:281
         paints `var(--warning)` and that class paints the same dark amber as the
         text. `can-unit-box` restores it — see block 23 of the stylesheet.

         The wording is the adaptation the header records: in this application
         the unit is freed in the same transaction as the cancellation, so it is
         written in the past tense. --}}
    <div class="info-box info-box-warning can-unit-box mb-4">
        <i class="fa-solid fa-building" aria-hidden="true"></i>
        <p>
            @if ($unitLabel === [])
                The unit has been released back to <strong>Available</strong> inventory.
            @else
                Unit <strong>{{ implode(', ', $unitLabel) }}</strong> has been released back to <strong>Available</strong> inventory.
            @endif
        </p>
    </div>

    {{-- v12's bottom action row, with Print and Download PDF dropped (decision
         D9). Edit alone, on the same gate as the one at the top. --}}
    @can('cancellations.edit')
        <div class="d-flex gap-2">
            <a href="{{ route('cancellations.edit', $booking) }}" class="btn btn-primary">
                <i class="fa-solid fa-pen" aria-hidden="true"></i>Edit
            </a>
        </div>
    @endcan
@endsection