@extends($bookingLayout ?? 'crm.master')

@section('title', 'Booking Invoice — ' . $booking->booking_number)

@php
  $bookingRoutePrefix = request()->routeIs('crm.booking.*') ? 'crm.booking.' : (request()->routeIs('car-rental.*') ? 'car-rental.' : 'booking.');
  $readOnlyInvoice = $readOnlyInvoice ?? request()->routeIs('car-rental.*');
@endphp

@section('head-extra')
<style>
/* ── Page wrapper ── */
.inv-wrap {
  max-width: 860px;
  margin: 28px auto 60px;
  padding: 0 16px;
}

/* ── Status badge ── */
.inv-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: .45em 1.2em;
  border-radius: 6px;
  font-size: 13pt;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: #fff;
  margin-bottom: 16px;
}
.inv-status-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.inv-status-form {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.inv-status-trigger {
  border: 0;
  cursor: pointer;
}
.inv-status-trigger:focus-visible {
  outline: 2px solid rgba(13, 110, 253, 0.45);
  outline-offset: 2px;
}
.inv-status-menu {
  min-width: 220px;
  width: 220px;
  max-width: 220px;
  padding: 8px;
  border: 1px solid #dbe3ef;
  border-radius: 12px;
  box-shadow: 0 18px 35px rgba(15, 23, 42, 0.12);
}
.inv-status-option {
  width: 100%;
  border: 0;
  background: transparent;
  padding: 0;
  margin: 0 0 8px;
  text-align: left;
}
.inv-status-option:last-child {
  margin-bottom: 0;
}
.inv-status-chip {
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  padding: 9px 14px;
  color: #fff;
  font-size: 10.5pt;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .4px;
}
.inv-status-chip.pending { background: #fd7e14; }
.inv-status-chip.reserved { background: #0d6efd; }
.inv-status-chip.deposit { background: #0dcaf0; color: #0b2239; }
.inv-status-chip.paid { background: #28a745; }
.inv-status-chip.waiting { background: #6f42c1; }
.inv-status-chip.cancelled { background: #dc3545; }
.inv-status-chip.void { background: #7b7b7b; }
.inv-status-chip.checked_in { background: #198754; }
.inv-status-chip.checked_out { background: #495057; }
.inv-status-caret {
  font-size: 12px;
  line-height: 1;
}
.inv-modal-status-preview {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
}
.inv-modal-status-dot {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  display: inline-block;
}
.inv-modal-status-dot.pending { background: #fd7e14; }
.inv-modal-status-dot.reserved { background: #0d6efd; }
.inv-modal-status-dot.deposit { background: #0dcaf0; }
.inv-modal-status-dot.paid { background: #28a745; }
.inv-modal-status-dot.waiting { background: #6f42c1; }
.inv-modal-status-dot.cancelled { background: #dc3545; }
.inv-modal-status-dot.void { background: #7b7b7b; }
.inv-modal-status-dot.checked_in { background: #198754; }
.inv-modal-status-dot.checked_out { background: #495057; }
.inv-status-modal .modal-content {
  border: 0;
  border-radius: 14px;
  box-shadow: 0 22px 55px rgba(15, 23, 42, 0.22);
}
.inv-status-modal .modal-header,
.inv-status-modal .modal-footer {
  border-color: #eef2f7;
}
.inv-status-help {
  font-size: 12px;
  color: #6b7280;
}
.inv-status-warning {
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  background: #fff7ed;
  border: 1px solid #fed7aa;
  color: #9a3412;
  font-size: 12px;
  line-height: 1.5;
}
.inv-policy-card {
  background: #fff;
  border: 1px solid #aaa;
  border-radius: 4px;
  padding: 20px 24px;
}
.inv-policy-card h3 {
  font-size: 13pt;
  font-weight: 700;
  color: #333;
  margin: 0 0 10px;
}
.inv-policy-body {
  font-size: 9pt;
  color: #444;
  line-height: 1.7;
}
.inv-policy-body p:last-child {
  margin-bottom: 0;
}
.inv-policy-body ul,
.inv-policy-body ol {
  padding-left: 18px;
  margin-bottom: 10px;
}
.inv-print-only {
  display: none;
}
.inv-status.pending   { background: #fd7e14; }
.inv-status.reserved  { background: #0d6efd; }
.inv-status.deposit   { background: #0dcaf0; color: #000; }
.inv-status.paid      { background: #28a745; }
.inv-status.waiting   { background: #6c757d; }
.inv-status.cancelled { background: #dc3545; }
.inv-status.void      { background: #7b7b7b; }
.inv-status.checked_in { background: #198754; }
.inv-status.checked_out { background: #495057; }

/* ── Invoice card ── */
.inv-card {
  background: #fff;
  border: 1px solid #aaa;
  border-radius: 4px;
  padding: 20px 24px;
  margin-bottom: 20px;
}

/* ── Header grid ── */
.inv-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 20px;
  gap: 20px;
}

.inv-company {
  text-align: right;
}

.inv-company h2 {
  font-size: 15pt;
  font-weight: 700;
  color: #333;
  margin: 0 0 2px;
}

/* ── Invoice details table (top-right) ── */
.inv-details {
  border: 1px solid #aaa;
  border-collapse: collapse;
  font-size: 9pt;
  text-align: right;
  min-width: 220px;
}

.inv-details th {
  background: #e1e1e1;
  padding: 5px 8px;
  white-space: nowrap;
  text-align: left;
  font-weight: 600;
  border: 1px solid #ccc;
}

.inv-details td {
  padding: 5px 8px;
  border: 1px solid #ccc;
}

/* ── Address ── */
address {
  font-size: 9pt;
  color: #555;
  line-height: 1.6;
  font-style: normal;
  margin: 0;
}

/* ── Main item table ── */
.inv-table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid #aaa;
  font-size: 9pt;
  margin-top: 16px;
}

.inv-table thead tr {
  background: #e1e1e1;
}

.inv-table thead th {
  padding: 6px 8px;
  border-bottom: 1px solid #aaa;
  text-align: left;
  font-weight: 700;
}

.inv-table th.r, .inv-table td.r { text-align: right; }

.inv-table tbody td {
  padding: 8px 8px;
  vertical-align: top;
  border: none;
}

.inv-table tbody tr + tr td {
  border-top: 1px solid #eee;
}

/* ── Sum rows ── */
.inv-table tfoot td, .inv-table tfoot th {
  padding: 5px 8px;
  text-align: right;
  white-space: nowrap;
}

.inv-table .border-top td, .inv-table .border-top th {
  border-top: 1px solid #111;
}

/* ── Notes cell ── */
.inv-notes-cell {
  border-right: 1px solid #aaa;
  color: #444;
  font-size: 9pt;
  padding: 8px !important;
}

.inv-notes-cell p {
  margin: 0;
  padding: 3px 0;
}

/* ── Footer bar ── */
.inv-footer-bar {
  background: #e1e1e1;
  border-top: 1px solid #aaa;
  padding: 6px 8px;
  text-align: right;
  font-size: 8pt;
  color: #777;
}

.inv-btn {
  display: inline-block;
  background: #fff;
  color: #555;
  font-weight: 700;
  font-size: 8pt;
  text-decoration: none;
  padding: 3px 10px;
  border: 1px solid #ccc;
  border-radius: 3px;
  margin-left: 5px;
  cursor: pointer;
}

.inv-btn:hover {
  background: #f5f5f5;
  color: #333;
  text-decoration: none;
}

/* ── Payments line ── */
.inv-payments {
  margin-top: 12px;
  color: #333;
  font-size: 9pt;
}

/* ── Notes sidebar ── */
.inv-notes-sidebar {
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 16px;
}
.inv-notes-form textarea {
  min-height: 88px;
  resize: vertical;
}
.inv-note-card {
  border-top: 1px solid #edf1f5;
  padding-top: 12px;
  margin-top: 12px;
}
.inv-note-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 12px;
  color: #7b8391;
  margin-bottom: 6px;
}
.inv-note-body {
  font-size: 13px;
  color: #444;
  background: #f8f7ff;
  border-radius: 8px;
  padding: 10px;
  white-space: pre-wrap;
}
.inv-note-visible {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 8px;
  border-radius: 999px;
  background: #edf5ff;
  color: #3267b0;
  font-size: 11px;
  font-weight: 700;
}
.inv-note-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}
.inv-note-actions a,
.inv-note-actions button {
  padding: 0;
  border: 0;
  background: transparent;
  color: #4b67a2;
  font-size: 12px;
  text-decoration: none;
}
.inv-note-actions button {
  color: #d0465a;
}
.inv-note-edit {
  margin-top: 10px;
}
.inv-invoice-notes {
  margin-top: 18px;
  padding: 12px 14px;
  border: 1px solid #d8e2ec;
  border-radius: 8px;
  background: #fbfdff;
}
.inv-invoice-notes h3 {
  margin: 0 0 10px;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: #5a6c84;
}
.inv-invoice-note-item {
  font-size: 12px;
  color: #334155;
  padding: 8px 0;
  border-top: 1px solid #e8eef5;
  white-space: pre-wrap;
}
.inv-invoice-note-item:first-of-type {
  border-top: 0;
  padding-top: 0;
}
.inv-tabs {
  display: flex;
  gap: 10px;
  margin: 0 0 18px;
  flex-wrap: wrap;
}
.inv-tab {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 0 14px;
  border-radius: 10px;
  color: #5c6c84;
  text-decoration: none;
  font-weight: 700;
  border: 1px solid transparent;
}
.inv-tab.is-active {
  background: #58697f;
  color: #fff;
}
.inv-tab:not(.is-active) {
  background: #f4f7fb;
}

.inv-notes-sidebar h6 {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: #888;
  font-weight: 700;
  margin-bottom: 10px;
}

/* ── Print ── */
@media print {
  .inv-actions-bar, .inv-notes-sidebar { display: none !important; }
  .inv-status-form { display: none !important; }
  .inv-wrap { max-width: 100%; margin: 0; padding: 0; }
  .row.g-4 { --bs-gutter-x: 0; --bs-gutter-y: 0; }
  .col-lg-8.col-12 { width: 100%; }
  .inv-card { border: 1px solid #aaa !important; }
  .inv-print-only { display: block !important; }
  .inv-policy-card { margin-top: 18px; break-inside: avoid; }
}
</style>
@endsection

@section('content')
<div class="container-xxl flex-grow-1 container-p-y">

<div class="inv-wrap">
  @include('crm.components.alerts')
  @php
    $editingNoteId = (int) request()->query('edit_note');
    $invoiceNotes = $booking->bookingNotes->where('show_on_invoice', true)->values();
    $hasLiveTransactions = $booking->transactions->contains(function ($transaction) {
      return $transaction->payment_provider !== 'Test Payment Provider';
    });
  @endphp

  {{-- ── Top action bar ── --}}
  <div class="inv-actions-bar d-flex align-items-center justify-content-between mb-3 flex-wrap gap-2">
    <div class="d-flex align-items-center gap-2">
      @if($readOnlyInvoice)
      <a href="{{ route($bookingRoutePrefix . 'index') }}" class="btn btn-sm btn-outline-secondary">
        <i class="ti tabler-arrow-left me-1"></i> Back to Listings
      </a>
      @else
      <a href="{{ route($bookingRoutePrefix . 'index') }}" class="btn btn-sm btn-outline-secondary">
        <i class="ti tabler-arrow-left me-1"></i> New Booking
      </a>
      @endif
      <h6 class="mb-0 fw-bold" style="font-size:14px;">
        {{ $booking->customer_name }},
        <span class="text-muted fw-normal">{{ $booking->start_datetime->format('F d Y') }}</span>
      </h6>
    </div>
    <div class="d-flex gap-2">
      @auth
      @unless($readOnlyInvoice)
      <button type="button" class="btn btn-sm btn-primary" data-bs-toggle="modal" data-bs-target="#addPaymentModal">
        <i class="ti tabler-credit-card me-1"></i> Add Payment
      </button>
      <a href="{{ route($bookingRoutePrefix . 'edit', $booking->booking_number) }}" class="btn btn-sm btn-outline-primary">
        <i class="ti tabler-edit me-1"></i> Edit Booking
      </a>
      @endunless
      @endauth
      <a href="{{ route($bookingRoutePrefix . 'pdf', $booking->booking_number) }}" target="_blank" class="btn btn-sm btn-outline-secondary">
        <i class="ti tabler-printer me-1"></i> Print PDF
      </a>
    </div>
  </div>

  <div class="inv-tabs">
    <a href="{{ route($bookingRoutePrefix . 'confirmation', $booking->booking_number) }}" class="inv-tab is-active">Invoice</a>
    @auth
    @unless($readOnlyInvoice)
    <a href="{{ route($bookingRoutePrefix . 'edit', $booking->booking_number) }}" class="inv-tab">Edit</a>
    <a href="{{ route($bookingRoutePrefix . 'transactions', $booking->booking_number) }}" class="inv-tab">Transactions <span class="ms-1">({{ $booking->transactions->count() }})</span></a>
    @endunless
    @endauth
  </div>

  <div class="row g-4">

    {{-- ══════════════ MAIN INVOICE ══════════════ --}}
    <div class="col-lg-9 col-12 order-lg-2">
      <div class="inv-card">

        {{-- Status --}}
        @unless($readOnlyInvoice)
        <div class="inv-status-row">
          @auth
          @unless($readOnlyInvoice)
          <button type="button"
                  class="inv-status inv-status-trigger {{ $booking->status }}"
                  data-bs-toggle="dropdown"
                  aria-expanded="false">
            {{ $booking->status_label }}
            <i class="ti tabler-chevron-down inv-status-caret"></i>
          </button>

          <div class="dropdown-menu inv-status-menu">
            @foreach(\App\Models\Booking::STATUS_OPTIONS as $value => $label)
              @continue($booking->status === $value)
              @continue($value === 'void' && $hasLiveTransactions)
              <button type="button"
                      class="inv-status-option js-status-option"
                      data-status-value="{{ $value }}"
                      data-status-label="{{ $label }}"
                      data-status-message="{{ match($value) {
                        'cancelled' => 'Cancel this booking and release the inventory. If payments were collected, refund them from the Transactions tab.',
                        'void' => 'Void this booking. Use this only for mistaken bookings with no live transactions.',
                        default => 'Update the booking status for this invoice.',
                      } }}">
                <span class="inv-status-chip {{ $value }}">{{ $label }}</span>
              </button>
            @endforeach
          </div>

          <div class="inv-status-help">
            Change the booking status and choose whether to notify the customer.
          </div>
          @endunless
          @if($readOnlyInvoice)
          <span class="inv-status {{ $booking->status }}">
            {{ $booking->status_label }}
          </span>
          @endif
          @else
          <span class="inv-status {{ $booking->status }}">
            {{ $booking->status_label }}
          </span>
          @endauth
        </div>
        @endunless

        {{-- Header: title + company --}}
        <div class="inv-header">
          <div>
            <h1 style="font-size:14pt;color:#333;font-weight:700;margin:0 0 6px;">Booking Invoice</h1>

            {{-- Customer address --}}
            <address>
              <strong>{{ $booking->customer_name }}</strong><br>
              @if($booking->customer_email)
                <i class="ti tabler-mail" style="font-size:11px;"></i> {{ $booking->customer_email }}<br>
              @endif
              @if($booking->customer_phone)
                {{ $booking->customer_phone }}<br>
              @endif
              @if($booking->customer_address)
                {{ $booking->customer_address }}<br>
              @endif
              @if($booking->customer_city || $booking->customer_state || $booking->customer_postal_code)
                {{ implode(', ', array_filter([$booking->customer_city, $booking->customer_state, $booking->customer_postal_code])) }}<br>
              @endif
              @if($booking->customer_country)
                {{ $booking->customer_country }}
              @endif
            </address>
          </div>

          <div class="inv-company">
            <h2>{{ $businessSetup?->company_name ?: config('app.name') }}</h2>
            <table class="inv-details">
              <tbody>
                <tr>
                  <th>Booking ID:</th>
                  <td><strong>{{ $booking->booking_number }}</strong></td>
                </tr>
                <tr>
                  <th>Created:</th>
                  <td>{{ $booking->created_at->format('F j, Y') }}</td>
                </tr>
                <tr>
                  <th>Booking Date:</th>
                  <td>{{ $booking->start_datetime->format('F j, Y') }}</td>
                </tr>
                <tr>
                  <th>Total&nbsp;(USD):</th>
                  <td><strong>${{ number_format($booking->total_amount, 2) }}</strong></td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>

        {{-- Item table --}}
        <table class="inv-table">
          <thead>
            <tr>
              <th style="width:45%;">Product</th>
              <th colspan="2">Rate</th>
              <th class="r" style="width:15%;">Amount</th>
            </tr>
          </thead>
          <tbody>
            @foreach($booking->items as $item)
            <tr>
              <td>
                <strong>{{ $item->product_name }}</strong><br>
                <span style="color:#555;">{{ $booking->start_datetime->format('D M j, Y') }}</span><br>
                <i class="ti tabler-clock" style="font-size:11px;color:#888;"></i>
                <span style="color:#555;">
                  {{ $booking->start_datetime->format('g:i A') }} – {{ $booking->end_datetime->format('g:i A') }}
                </span>
                @if($booking->rate_label)
                  <br><span style="color:#888;font-size:8pt;">{{ $booking->rate_label }}</span>
                @endif
              </td>
              <td colspan="2" style="vertical-align:top;">
                <strong>Qty:</strong> {{ $item->quantity }} @ ${{ number_format($item->unit_price, 2) }}
                <br><span style="color:#888;">
                  @if($item->rate_type === 'per_hour')
                    {{ (int)$item->duration_hours }} Hour{{ (int)$item->duration_hours != 1 ? 's' : '' }}
                  @elseif($item->rate_type === 'per_day')
                    {{ max(1, ceil($item->duration_hours / 24)) }} Day{{ ceil($item->duration_hours/24) != 1 ? 's' : '' }}
                  @elseif($item->rate_type === 'per_24_hours')
                    {{ max(1, ceil($item->duration_hours / 24)) }} × 24 Hours
                  @else
                    1 Booking
                  @endif
                </span>
              </td>
              <td class="r" style="font-weight:700;vertical-align:top;white-space:nowrap;">
                ${{ number_format($item->subtotal, 2) }}
              </td>
            </tr>
            @endforeach
          </tbody>

          <tfoot>
            {{-- Notes row spans left; sums on the right --}}
            <tr style="border-top:1px solid #000;">
              <td colspan="2" rowspan="{{ 4 + count($booking->tax_lines ?? []) + ($booking->discount_amount > 0 ? 1 : 0) }}"
                  class="inv-notes-cell">
                @if($booking->rental_location)
                  <p><strong>Rental Location:</strong> {{ $booking->rental_location }}</p>
                @endif
                <p><strong>Is this rental for a Wedding?</strong> {{ $booking->is_wedding ? 'Yes' : 'No' }}</p>
                @if($booking->is_wedding && $booking->bride_groom_name)
                  <p><strong>Bride &amp; Groom:</strong> {{ $booking->bride_groom_name }}</p>
                @endif
                @if($booking->purpose)
                  <p><strong>Purpose of the booking:</strong> {{ $booking->purpose }}</p>
                @endif
              </td>
              <th class="r">Sub-Total:</th>
              <td class="r">${{ number_format($booking->subtotal, 2) }}</td>
            </tr>

            @foreach($booking->tax_lines ?? [] as $tl)
            <tr>
              <td class="r">{{ $tl['name'] }} ({{ $tl['percent'] }}%):</td>
              <td class="r">${{ number_format($tl['amount'], 2) }}</td>
            </tr>
            @endforeach

            @if($booking->discount_amount > 0)
            <tr>
              <td class="r" style="color:#28a745;">
                Discount{{ $booking->discount_code ? ' (' . $booking->discount_code . ')' : '' }}:
              </td>
              <td class="r" style="color:#28a745;">-${{ number_format($booking->discount_amount, 2) }}</td>
            </tr>
            @endif

            <tr class="border-top">
              <th class="r">Total:</th>
              <td class="r"><strong>${{ number_format($booking->total_amount, 2) }}</strong></td>
            </tr>

            <tr>
              <th class="r">Amount Paid:</th>
              <td class="r">
                @if($booking->amount_paid > 0 && $booking->amount_paid < $booking->total_amount)
                  ${{ number_format($booking->amount_paid, 2) }}
                  <span style="color:#888;font-size:8pt;">(partial)</span>
                @else
                  ${{ number_format($booking->amount_paid, 2) }}
                @endif
              </td>
            </tr>

            @if($booking->balance_due > 0)
            <tr>
              <th class="r">Balance Due:</th>
              <td class="r"><strong>${{ number_format($booking->balance_due, 2) }}</strong></td>
            </tr>
            @endif

            {{-- Footer buttons --}}
            <tr>
              <td colspan="4" class="inv-footer-bar">
                <a href="{{ route($bookingRoutePrefix . 'pdf', $booking->booking_number) }}" target="_blank" class="inv-btn">
                  <i class="ti tabler-printer"></i> Print PDF
                </a>
              </td>
            </tr>
          </tfoot>
        </table>

        {{-- Payments line --}}
        <div class="inv-payments">
          @php
            $latestTransaction = $booking->transactions->first();
          @endphp
          <strong><i class="ti tabler-credit-card" style="color:#666;"></i> Transactions</strong>:
          {{ optional($latestTransaction?->processed_at)->format('m/d/y') ?: $booking->created_at->format('m/d/y') }}
          <strong>${{ number_format($booking->amount_paid, 2) }}</strong>
          @if($latestTransaction)
            ({{ $latestTransaction->status_label }}{{ $latestTransaction->payment_display ? ' - ' . $latestTransaction->payment_display : '' }})
          @else
            (No payments)
          @endif
        </div>

        @if($invoiceNotes->isNotEmpty())
          <div class="inv-invoice-notes">
            <h3>Notes</h3>
            @foreach($invoiceNotes as $invoiceNote)
              <div class="inv-invoice-note-item">{{ $invoiceNote->note }}</div>
            @endforeach
          </div>
        @endif

        {{-- Created by / meta --}}
        <div style="margin-top:10px;font-size:8pt;color:#555;">
          @unless($readOnlyInvoice)
          <strong>Source:</strong> {{ $booking->source_label }}
          &nbsp;&nbsp;
          @endunless
          <strong>Booking #:</strong> {{ $booking->booking_number }}
        </div>

      </div>

      @if(!empty($businessSetup?->company_policy))
      <div class="inv-policy-card inv-print-only">
        <h3>Rental Policy</h3>
        <div class="inv-policy-body">
          {!! $businessSetup->company_policy !!}
        </div>
      </div>
      @endif
    </div>

    {{-- ══════════════ SIDEBAR: NOTES ══════════════ --}}
    @unless($readOnlyInvoice)
    <div class="col-lg-3 col-12 inv-actions-bar order-lg-1">
      <div class="inv-notes-sidebar">
        <h6><i class="ti tabler-message-circle me-1"></i>Booking Notes</h6>

        @auth
        <form method="POST" action="{{ route('crm.bookings.notes.store', $booking->hash_id) }}" class="inv-notes-form mb-3">
          @csrf
          <textarea name="note" class="form-control form-control-sm" placeholder="Add Note...">{{ old('note') }}</textarea>
          <div class="d-flex align-items-center justify-content-between gap-2 mt-2 flex-wrap">
            <div class="form-check m-0">
              <input class="form-check-input" type="checkbox" value="1" id="show_on_invoice" name="show_on_invoice" {{ old('show_on_invoice') ? 'checked' : '' }}>
              <label class="form-check-label small" for="show_on_invoice">Show on invoice</label>
            </div>
            <button type="submit" class="btn btn-primary btn-sm">
              <i class="ti tabler-message-plus me-1"></i>Create
            </button>
          </div>
        </form>
        @endauth

        <p class="text-muted" style="font-size:12px;">
          Current booking status: <strong>{{ $booking->status_label }}</strong>.
          @if($booking->status === 'pending')
            We will confirm your reservation shortly via email.
          @elseif($booking->status === 'reserved')
            Your reservation has been reserved for the selected time.
          @elseif($booking->status === 'deposit')
            Your booking is reserved and waiting on the deposit stage.
          @elseif($booking->status === 'paid')
            Your booking has been paid.
          @elseif($booking->status === 'waiting')
            Your booking is currently waiting for the next update.
          @elseif($booking->status === 'cancelled')
            This booking has been cancelled.
          @elseif($booking->status === 'void')
            This booking is no longer active.
          @endif
        </p>

        <hr style="border-color:#f0eff8;">

        @forelse($booking->bookingNotes as $note)
          <div class="inv-note-card" id="note-{{ $note->id }}">
            <div class="inv-note-meta">
              <span>{{ $note->author_name ?: 'Staff' }}</span>
              <span>{{ $note->created_at->format('m/d/y h:i A') }}</span>
              @if($note->show_on_invoice)
                <span class="inv-note-visible"><i class="ti tabler-eye" style="font-size:12px;"></i>Shown on invoice</span>
              @endif
              @auth
              <div class="inv-note-actions ms-auto">
                <a href="{{ route($bookingRoutePrefix . 'confirmation', ['bookingNumber' => $booking->booking_number, 'edit_note' => $note->id]) }}#note-{{ $note->id }}">Edit</a>
                <form method="POST" action="{{ route('crm.bookings.notes.destroy', [$booking->hash_id, $note]) }}" onsubmit="return confirm('Delete this note?')">
                  @csrf
                  @method('DELETE')
                  <button type="submit">Delete</button>
                </form>
              </div>
              @endauth
            </div>

            @if(auth()->check() && $editingNoteId === $note->id)
              <form method="POST" action="{{ route('crm.bookings.notes.update', [$booking->hash_id, $note]) }}" class="inv-note-edit">
                @csrf
                @method('PATCH')
                <textarea name="note" class="form-control form-control-sm">{{ old('note', $note->note) }}</textarea>
                <div class="d-flex align-items-center justify-content-between gap-2 mt-2 flex-wrap">
                  <div class="form-check m-0">
                    <input class="form-check-input" type="checkbox" value="1" id="show_on_invoice_{{ $note->id }}" name="show_on_invoice" {{ old('show_on_invoice', $note->show_on_invoice) ? 'checked' : '' }}>
                    <label class="form-check-label small" for="show_on_invoice_{{ $note->id }}">Show on invoice</label>
                  </div>
                  <div class="d-flex gap-2">
                    <a href="{{ route($bookingRoutePrefix . 'confirmation', $booking->booking_number) }}#note-{{ $note->id }}" class="btn btn-outline-secondary btn-sm">Cancel</a>
                    <button type="submit" class="btn btn-primary btn-sm">Save</button>
                  </div>
                </div>
              </form>
            @else
              <div class="inv-note-body">{{ $note->note }}</div>
            @endif
          </div>
        @empty
          <p class="text-muted mb-3" style="font-size:12px;">No booking notes yet.</p>
        @endforelse

        {{-- Quick booking info summary --}}
        <div style="font-size:12px;">
          @foreach($booking->items as $item)
            @php $photo = $item->product?->photos?->first(); @endphp
            <div class="d-flex align-items-center gap-2 mb-2">
              @if($photo)
                <img src="{{ asset($photo->path) }}" style="width:48px;height:36px;object-fit:cover;border-radius:5px;" alt="">
              @else
                <div style="width:48px;height:36px;background:#7367f0;border-radius:5px;display:flex;align-items:center;justify-content:center;">
                  <i class="ti tabler-car" style="color:#fff;font-size:16px;"></i>
                </div>
              @endif
              <div>
                <div class="fw-semibold" style="font-size:12px;">{{ $item->product_name }}</div>
                <div class="text-muted" style="font-size:11px;">
                  {{ $booking->start_datetime->format('M j') }} · {{ $booking->start_datetime->format('g:i A') }} – {{ $booking->end_datetime->format('g:i A') }}
                </div>
              </div>
            </div>
          @endforeach

          <div style="background:#f8f7ff;border-radius:8px;padding:10px;margin-top:8px;">
            <div class="d-flex justify-content-between mb-1">
              <span class="text-muted">Sub-Total</span>
              <span>${{ number_format($booking->subtotal, 2) }}</span>
            </div>
            @foreach($booking->tax_lines ?? [] as $tl)
            <div class="d-flex justify-content-between mb-1">
              <span class="text-muted">{{ $tl['name'] }} ({{ $tl['percent'] }}%)</span>
              <span>${{ number_format($tl['amount'], 2) }}</span>
            </div>
            @endforeach
            @if($booking->discount_amount > 0)
            <div class="d-flex justify-content-between mb-1 text-success">
              <span>Discount</span>
              <span>-${{ number_format($booking->discount_amount, 2) }}</span>
            </div>
            @endif
            <div class="d-flex justify-content-between fw-bold border-top pt-1 mt-1">
              <span>Total</span>
              <span>${{ number_format($booking->total_amount, 2) }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    @endunless

  </div>
</div>

@auth
  @unless($readOnlyInvoice)
  @include('booking.partials.add-payment-modal')
  @endunless
@endauth
</div>
@endsection

@section('page-script')
@auth
@unless($readOnlyInvoice)
<div class="modal fade inv-status-modal" id="bookingStatusModal" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <form method="POST" action="{{ route('crm.bookings.update-status', $booking->hash_id) }}">
        @csrf
        @method('PATCH')
        <input type="hidden" name="redirect_to" value="{{ route($bookingRoutePrefix . 'confirmation', $booking->booking_number) }}">
        <input type="hidden" name="status" id="booking-status-input" value="{{ $booking->status }}">
        <div class="modal-header">
          <h5 class="modal-title"><i class="ti tabler-bolt me-1"></i>Confirm Update</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
          <p class="mb-4">
            Change the status of this booking to
            <span class="inv-modal-status-preview">
              <span id="booking-status-preview-dot" class="inv-modal-status-dot {{ $booking->status }}"></span>
              <span id="booking-status-preview-label">{{ $booking->status_label }}</span>?
            </span>
          </p>

          <div class="inv-status-warning" id="booking-status-warning">
            Update the booking status for this invoice.
          </div>

          <input type="hidden" name="send_notification" value="0">
          <div class="form-check">
            <input class="form-check-input" type="checkbox" value="1" id="send-status-notification" name="send_notification" checked>
            <label class="form-check-label fw-semibold" for="send-status-notification">
              Send email notifications
            </label>
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Cancel</button>
          <button type="submit" class="btn btn-primary">Update</button>
        </div>
      </form>
    </div>
  </div>
</div>

<script>
  document.addEventListener('DOMContentLoaded', function () {
    const modalElement = document.getElementById('bookingStatusModal');
    if (!modalElement || typeof bootstrap === 'undefined') {
      return;
    }

    const statusInput = document.getElementById('booking-status-input');
    const previewLabel = document.getElementById('booking-status-preview-label');
    const previewDot = document.getElementById('booking-status-preview-dot');
    const warningBox = document.getElementById('booking-status-warning');
    const modal = new bootstrap.Modal(modalElement);
    const removableClasses = [
      'pending', 'reserved', 'deposit', 'paid', 'waiting', 'cancelled', 'void', 'checked_in', 'checked_out'
    ];

    document.querySelectorAll('.js-status-option').forEach(function (button) {
      button.addEventListener('click', function () {
        const value = button.getAttribute('data-status-value');
        const label = button.getAttribute('data-status-label');
        const message = button.getAttribute('data-status-message') || 'Update the booking status for this invoice.';

        statusInput.value = value;
        previewLabel.textContent = label;
        previewDot.classList.remove(...removableClasses);
        previewDot.classList.add(value);
        if (warningBox) {
          warningBox.textContent = message;
        }
        modal.show();
      });
    });
  });
</script>
@endunless
@endauth
@endsection