@extends('layouts.public')

@section('title', ($editingBooking ? 'Edit Booking — ' : 'Checkout — ') . $product->name)

@php($bookingRoutePrefix = 'car-rental.')

@section('head-extra')
<style>
/* ── Layout ── */
.co-wrap {
  display: flex;
  gap: 28px;
  align-items: flex-start;
  max-width: 1100px;
  margin: 0 auto;
  padding: 28px 20px 60px;
}

/* ── Left: Summary ── */
.co-summary {
  width: 340px;
  flex-shrink: 0;
  position: sticky;
  top: 20px;
}

/* ── Right: Form ── */
.co-form-col {
  flex: 1;
  min-width: 0;
}

/* ── Cards ── */
.co-card {
  background: #fff;
  border-radius: 14px;
  border: 1px solid #ebebf0;
  overflow: hidden;
}

.co-card-head {
  padding: 16px 20px;
  border-bottom: 1px solid #f0eff8;
  display: flex;
  align-items: center;
  gap: 10px;
}

.co-card-head-icon {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.co-card-body {
  padding: 20px;
}

/* ── Product image placeholder ── */
.co-product-img {
  width: 100%;
  height: 170px;
  object-fit: cover;
  border-radius: 10px;
  background: linear-gradient(135deg, #7367f0 0%, #9e95f5 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 40px;
  margin-bottom: 16px;
}

/* ── Summary rows ── */
.co-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 7px 0;
  font-size: 13px;
}

.co-row + .co-row {
  border-top: 1px solid #f5f4fb;
}

.co-row.total {
  border-top: 2px solid #7367f0;
  margin-top: 4px;
  padding-top: 11px;
  font-size: 15px;
  font-weight: 700;
}

.co-row.due {
  background: linear-gradient(135deg, #f0eeff 0%, #faf5ff 100%);
  border-radius: 10px;
  padding: 10px 12px;
  margin-top: 8px;
}
.co-row.tax-row {
  align-items: flex-start;
  gap: 8px;
}
.co-tax-remove {
  border: none;
  background: transparent;
  color: #dc3545;
  font-size: 11px;
  font-weight: 700;
  padding: 0;
  cursor: pointer;
}
.co-tax-remove:hover { text-decoration: underline; }
.co-tax-remove.is-removed { color: #198754; }

/* ── Badge pill ── */
.co-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 9px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
}

/* ── Datetime block ── */
.co-datetime {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 14px;
  background: #f8f7ff;
  border-radius: 10px;
  margin-bottom: 14px;
}

.co-datetime-icon {
  width: 36px;
  height: 36px;
  background: #7367f0;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: #fff;
}

/* ── Form labels ── */
.co-label {
  font-size: 12px;
  font-weight: 600;
  color: #6b6f82;
  text-transform: uppercase;
  letter-spacing: .4px;
  margin-bottom: 5px;
}

/* ── Section header inside form card ── */
.co-section-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .6px;
  color: #7367f0;
  padding: 4px 0 10px;
  border-bottom: 1px solid #f0eff8;
  margin-bottom: 16px;
}

/* ── Divider ── */
.co-divider {
  border: none;
  border-top: 1px solid #f0eff8;
  margin: 20px 0;
}

/* ── Radio location tiles ── */
.loc-tile {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border: 1.5px solid #e0dff6;
  border-radius: 10px;
  cursor: pointer;
  transition: border-color .15s, background .15s;
  font-size: 13px;
}

.loc-tile:hover {
  border-color: #7367f0;
  background: #faf9ff;
}

.loc-tile input[type="radio"]:checked ~ .loc-label {
  color: #7367f0;
  font-weight: 600;
}

.loc-tile input[type="radio"]:checked {
  accent-color: #7367f0;
}

label.loc-tile:has(input:checked) {
  border-color: #7367f0;
  background: #f4f1ff;
}

/* ── Submit button ── */
.co-submit-btn {
  background: linear-gradient(135deg, #7367f0 0%, #9e95f5 100%);
  color: #fff;
  border: none;
  border-radius: 10px;
  padding: 12px 28px;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  box-shadow: 0 6px 20px rgba(115,103,240,.35);
  transition: opacity .15s, box-shadow .15s;
}

.co-submit-btn:hover {
  opacity: .93;
  box-shadow: 0 8px 24px rgba(115,103,240,.45);
}

.co-submit-btn:disabled {
  opacity: .65;
  cursor: not-allowed;
}

.co-tabs {
  display: flex;
  gap: 10px;
  margin: 0 0 18px;
  flex-wrap: wrap;
}

.co-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;
}

.co-tab.is-active {
  background: #58697f;
  color: #fff;
}

.co-tab:not(.is-active) {
  background: #f4f7fb;
}

.co-edit-table {
  width: 100%;
  border-collapse: collapse;
}

.co-edit-table th,
.co-edit-table td {
  padding: 12px 10px;
  border: 1px solid #edf1f5;
  font-size: 13px;
  vertical-align: top;
}

.co-edit-table thead th {
  background: #f8fafc;
  color: #526883;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .05em;
}

.co-edit-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
}

.co-edit-status-dot {
  width: 18px;
  height: 18px;
  border-radius: 4px;
  display: inline-block;
}

.co-edit-status-dot.pending { background: #fd7e14; }
.co-edit-status-dot.reserved { background: #0d6efd; }
.co-edit-status-dot.deposit { background: #0dcaf0; }
.co-edit-status-dot.paid { background: #28a745; }
.co-edit-status-dot.waiting { background: #6f42c1; }
.co-edit-status-dot.cancelled { background: #dc3545; }
.co-edit-status-dot.void { background: #7b7b7b; }
.co-edit-status-dot.checked_in { background: #198754; }
.co-edit-status-dot.checked_out { background: #495057; }

.co-change-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 34px;
  padding: 0 12px;
  border-radius: 8px;
  background: #fff;
  border: 1px solid #d7e0eb;
  color: #2d4f7b;
  text-decoration: none;
  font-weight: 700;
}

.co-edit-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.co-edit-span-2 {
  grid-column: span 2;
}
.co-policy-box {
  max-height: 260px;
  overflow-y: auto;
  padding: 16px 18px;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  background: #f8fafc;
  color: #334155;
  line-height: 1.65;
}
.co-policy-box p,
.co-policy-box ul,
.co-policy-box ol {
  margin-bottom: .85rem;
}
.co-policy-box *:last-child {
  margin-bottom: 0;
}


/* ── Responsive ── */
@media (max-width: 768px) {
  .co-wrap { flex-direction: column; padding: 16px 14px 50px; gap: 18px; }
  .co-summary { width: 100%; position: static; }
  .co-edit-grid { grid-template-columns: 1fr; }
  .co-edit-span-2 { grid-column: span 1; }
}
</style>
@endsection

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

    {{-- ═══════════ LEFT: ORDER SUMMARY ═══════════ --}}
    <aside class="co-summary">

      {{-- Product card --}}
      <div class="co-card mb-3">
        <div class="co-card-body">

          {{-- Product image --}}
          @if($product->photos->first())
            <img src="{{ asset($product->photos->first()->path) }}" alt="{{ $product->name }}"
                class="co-product-img" style="display:block;">
          @else
            <div class="co-product-img">
              <i class="ti tabler-car"></i>
            </div>
          @endif

          {{-- Name & rate badge --}}
          <div class="d-flex align-items-center justify-content-between gap-2 mb-2">
            <div class="fw-bold" style="font-size:15px; line-height:1.3;">{{ $product->name }}</div>
            <span class="co-pill bg-label-primary text-primary">
              @if($pricingRateType === 'per_hour') /hr
              @elseif($pricingRateType === 'per_day') /day
              @elseif($pricingRateType === 'per_24_hours') /24hr
              @else flat
              @endif
            </span>
          </div>

          @if(!empty($appliedRateName))
            <div class="text-muted mb-3" style="font-size:12px;">
              <i class="ti tabler-tag me-1"></i>{{ $appliedRateName }}
            </div>
          @endif

          {{-- Date/time block --}}
          <div class="co-datetime">
            <div class="co-datetime-icon">
              <i class="ti tabler-calendar-event" style="font-size:16px;"></i>
            </div>
            <div>
              <div class="fw-semibold" style="font-size:13px;">{{ $start->format('D, M j Y') }}</div>
              <div class="text-muted" style="font-size:12px;">
                {{ $start->format('g:i A') }} &rarr; {{ $end->format('g:i A') }}
                &nbsp;&bull;&nbsp;
                @if($pricingRateType === 'per_hour')
                  {{ $hours }} hr{{ $hours != 1 ? 's' : '' }}
                @elseif($pricingRateType === 'per_day')
                  {{ $days }} day{{ $days != 1 ? 's' : '' }}
                @elseif($pricingRateType === 'per_24_hours')
                  {{ $days }} × 24 hrs
                @else
                  1 booking
                @endif
              </div>
              @if($start->toDateString() !== $end->toDateString())
                <div class="text-muted" style="font-size:11px;">Ends {{ $end->format('D, M j Y') }}</div>
              @endif
            </div>
          </div>

          {{-- Price breakdown ── --}}
          <div>
            <div class="co-row">
              <span class="text-muted">
                Base rate
                <span style="font-size:11px; color:#aaa;">
                  × {{ $pricingRateType === 'per_hour' ? $hours . ' hr' . ($hours != 1 ? 's' : '') : ($pricingRateType === 'per_day' ? $days . ' day' . ($days != 1 ? 's' : '') : ($pricingRateType === 'per_24_hours' ? $days . ' × 24 hrs' : '1 booking')) }}
                </span>
              </span>
              <span class="fw-semibold">${{ number_format($subtotal, 2) }}</span>
            </div>

            @foreach($taxItems as $ti)
            <div class="co-row tax-row" data-tax-row data-tax-id="{{ $ti['id'] }}" data-tax-amount="{{ number_format($ti['amount'], 2, '.', '') }}">
              <div>
                <div class="text-muted">{{ $ti['name'] }} <span style="font-size:11px;color:#aaa;">({{ $ti['percent'] }}%)</span></div>
                @unless(request()->routeIs('car-rental.*'))
                <button type="button" class="co-tax-remove" data-tax-toggle data-tax-id="{{ $ti['id'] }}">Remove</button>
                @endunless
              </div>
              <span class="co-tax-amount">${{ number_format($ti['amount'], 2) }}</span>
            </div>
            <input type="hidden" name="tax_fee_ids[]" value="{{ $ti['id'] }}" data-tax-input data-tax-id="{{ $ti['id'] }}">
            @endforeach

            @if(($discountAmount ?? 0) > 0)
            <div class="co-row" id="checkoutDiscountRow">
              <span class="text-success">
                Discount
                @if(!empty($discountCode))
                  <span style="font-size:11px; color:#16a34a;">({{ $discountCode }})</span>
                @endif
              </span>
              <span class="fw-semibold text-success">-${{ number_format($discountAmount, 2) }}</span>
            </div>
            @endif

            <div class="co-row total">
              <span>Total (USD)</span>
              <span id="checkoutTotalDisplay">${{ number_format($total, 2) }}</span>
            </div>

            @if($depositAmount > 0 && $depositAmount < $total)
            <div class="co-row due">
              <div>
                <div class="fw-bold text-primary" style="font-size:14px;">Due Now</div>
                <div class="text-muted" style="font-size:11px;">Deposit — remainder due at rental</div>
              </div>
              <span class="fw-bold text-primary" style="font-size:16px;" id="checkoutDueNowDisplay">${{ number_format($depositAmount, 2) }}</span>
            </div>
            @else
            <div class="co-row due">
              <div>
                <div class="fw-bold text-primary" style="font-size:14px;">Due Now</div>
                <div class="text-muted" style="font-size:11px;">Full amount</div>
              </div>
              <span class="fw-bold text-primary" style="font-size:16px;" id="checkoutDueNowDisplay">${{ number_format($total, 2) }}</span>
            </div>
            @endif
          </div>

        </div>
      </div>

      {{-- Back link --}}
      <a href="{{ $editingBooking ? route($bookingRoutePrefix . 'confirmation', $editingBooking->booking_number) : route($bookingRoutePrefix . 'index') }}" class="d-flex align-items-center gap-1 text-muted" style="font-size:13px; text-decoration:none;">
        <i class="ti tabler-arrow-left" style="font-size:15px;"></i> {{ $editingBooking ? 'Back to confirmation' : 'Back to listings' }}
      </a>
    </aside>

    {{-- ═══════════ RIGHT: BOOKING FORM ═══════════ --}}
    <div class="co-form-col">
      @if($editingBooking)
        <div class="co-tabs">
          <a href="{{ route($bookingRoutePrefix . 'confirmation', $editingBooking->booking_number) }}" class="co-tab">Invoice</a>
          <a href="{{ route($bookingRoutePrefix . 'edit', $editingBooking->booking_number) }}" class="co-tab is-active">Edit</a>
          <a href="javascript:void(0)" class="co-tab">Transactions</a>
          <a href="javascript:void(0)" class="co-tab">Log</a>
          <a href="javascript:void(0)" class="co-tab">Guests</a>
          <a href="javascript:void(0)" class="co-tab">Documents</a>
        </div>
      @endif

      {{-- Page heading --}}
      <div class="d-flex align-items-center gap-3 mb-4">
        <div style="width:42px;height:42px;background:linear-gradient(135deg,#7367f0,#9e95f5);border-radius:12px;display:flex;align-items:center;justify-content:center;flex-shrink:0;">
          <i class="ti tabler-clipboard-text" style="color:#fff;font-size:20px;"></i>
        </div>
        <div>
          <h5 class="mb-0 fw-bold">{{ $editingBooking ? 'Edit Booking' : 'Complete Your Booking' }}</h5>
          <div class="text-muted" style="font-size:13px;">{{ $editingBooking ? 'Update booking details, taxes, and customer information' : 'Fill in your details below to confirm the reservation' }}</div>
        </div>
      </div>

      @if($errors->any())
        <div class="alert alert-danger d-flex gap-2 align-items-start mb-4 rounded-3" style="border:none;background:#fff1f1;">
          <i class="ti tabler-alert-circle text-danger mt-1" style="flex-shrink:0;"></i>
          <ul class="mb-0 ps-1">
            @foreach($errors->all() as $err)
              <li style="font-size:13px;">{{ $err }}</li>
            @endforeach
          </ul>
        </div>
      @endif

      <form action="{{ $editingBooking ? route($bookingRoutePrefix . 'store') : route('car-rental.payment.prepare') }}" method="POST" id="bookingForm">
        @csrf
        @if($editingBooking)
          <input type="hidden" name="booking_number" value="{{ $editingBooking->booking_number }}" />
        @endif
        <input type="hidden" name="product_id" id="productIdInput" value="{{ old('product_id', $product->id) }}" />
        <input type="hidden" name="start_datetime" id="startDatetimeInput" value="{{ old('start_datetime', $start->format('Y-m-d H:i:s')) }}" />
        <input type="hidden" name="end_datetime" id="endDatetimeInput" value="{{ old('end_datetime', $end->format('Y-m-d H:i:s')) }}" />

        {{-- ── SECTION 1: Customer Info ── --}}
        @if($editingBooking)
        <div class="co-card mb-3">
          <div class="co-card-head">
            <div class="co-card-head-icon" style="background:#eef4ff;">
              <i class="ti tabler-edit" style="color:#2d6cdf;font-size:16px;"></i>
            </div>
            <div>
              <div class="fw-semibold" style="font-size:14px;">Change Item</div>
              <div class="text-muted" style="font-size:12px;">Edit the booked item, dates, taxes, discount, and subtotal before saving</div>
            </div>
          </div>
          <div class="co-card-body">
            <div class="table-responsive mb-4">
              <table class="co-edit-table">
                <thead>
                  <tr>
                    <th>Status</th>
                    <th>Item</th>
                    <th>Qty</th>
                    <th>Date</th>
                    <th>Tax</th>
                    <th>Total</th>
                    <th></th>
                  </tr>
                </thead>
                <tbody>
                  <tr>
                    <td>
                      <span class="co-edit-status">
                        <span class="co-edit-status-dot {{ str_replace('-', '_', strtolower($editingBooking->status ?? 'pending')) }}"></span>
                        <span>{{ ucfirst(str_replace('_', ' ', $editingBooking->status ?? 'pending')) }}</span>
                      </span>
                    </td>
                    <td>
                      <div class="fw-semibold" id="editItemName">{{ $product->name }}</div>
                      <div class="text-muted" style="font-size:12px;" id="editRateSummary">{{ $appliedRateName ?: ucfirst(str_replace('_', ' ', $pricingRateType)) }}</div>
                    </td>
                    <td id="editQtySummary">1</td>
                    <td id="editDateSummary">
                      {{ $start->format('M d, Y g:i A') }}<br>
                      <span class="text-muted">{{ $end->format('M d, Y g:i A') }}</span>
                    </td>
                    <td id="editTaxSummary">${{ number_format($taxAmount, 2) }}</td>
                    <td id="editTotalSummary">${{ number_format($total, 2) }}</td>
                    <td class="text-end">
                      <a href="#change-item-fields" class="co-change-link">
                        <i class="ti tabler-pencil" style="font-size:14px;"></i>
                        Change
                      </a>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>

            <div class="co-edit-grid" id="change-item-fields">
              <div>
                <label class="co-label">Category</label>
                <select class="form-select" id="editCategorySelect">
                  @foreach($categories as $category)
                    <option value="{{ $category->id }}" {{ (int) old('category_id', $selectedCategoryId) === (int) $category->id ? 'selected' : '' }}>
                      {{ $category->name }}
                    </option>
                  @endforeach
                </select>
              </div>

              <div>
                <label class="co-label">Item / Product</label>
                <select class="form-select" id="editProductSelect">
                  @foreach($products as $productOption)
                    <option value="{{ $productOption->id }}" data-category-id="{{ $productOption->category_id }}" {{ (int) old('product_id', $product->id) === (int) $productOption->id ? 'selected' : '' }}>
                      {{ $productOption->name }}
                    </option>
                  @endforeach
                </select>
              </div>

              <div>
                <label class="co-label">Start Date</label>
                <input type="date" class="form-control" id="editStartDate" value="{{ old('edit_start_date', $start->format('Y-m-d')) }}">
              </div>

              <div>
                <label class="co-label">Start Time</label>
                <input type="time" class="form-control" id="editStartTime" value="{{ old('edit_start_time', $start->format('H:i')) }}">
              </div>

              <div>
                <label class="co-label">End Date</label>
                <input type="date" class="form-control" id="editEndDate" value="{{ old('edit_end_date', $end->format('Y-m-d')) }}">
              </div>

              <div>
                <label class="co-label">End Time</label>
                <input type="time" class="form-control" id="editEndTime" value="{{ old('edit_end_time', $end->format('H:i')) }}">
              </div>

              <div class="co-edit-span-2">
                <label class="co-label">Taxes</label>
                <div class="d-flex flex-wrap gap-3 pt-1" id="editTaxesWrap"></div>
              </div>

              <div>
                <label class="co-label">Subtotal Override</label>
                <input type="number" min="0" step="0.01" class="form-control" name="subtotal_override" id="subtotalOverrideInput" value="{{ old('subtotal_override', number_format($subtotal, 2, '.', '')) }}">
              </div>

              <div>
                <label class="co-label">Promo / Voucher</label>
                <div class="input-group">
                  <span class="input-group-text"><i class="ti tabler-tag" style="font-size:14px;"></i></span>
                  <input type="text" class="form-control" name="discount_code" id="discountCodeInput" value="{{ old('discount_code', $discountCode) }}" placeholder="Enter promo or voucher code">
                </div>
              </div>
            </div>
          </div>
        </div>
        @endif

        <div class="co-card mb-3">
          <div class="co-card-head">
            <div class="co-card-head-icon" style="background:#f0eeff;">
              <i class="ti tabler-user" style="color:#7367f0;font-size:16px;"></i>
            </div>
            <div>
              <div class="fw-semibold" style="font-size:14px;">{{ $editingBooking ? 'Customer Details' : 'Customer Information' }}</div>
              <div class="text-muted" style="font-size:12px;">{{ $editingBooking ? 'Update the booking contact details' : 'Your contact details for this booking' }}</div>
            </div>
          </div>
          <div class="co-card-body">
            <div class="row g-3">

              <div class="col-sm-6">
                <label class="co-label">Full Name <span class="text-danger">*</span></label>
                <input type="text"
                      class="form-control @error('customer_name') is-invalid @enderror"
                      name="customer_name"
                      value="{{ old('customer_name', $editingBooking?->customer_name) }}"
                      placeholder="John Smith"
                      required />
                @error('customer_name')<div class="invalid-feedback">{{ $message }}</div>@enderror
              </div>

              <div class="col-sm-6">
                <label class="co-label">Email Address <span class="text-danger">*</span></label>
                <input type="email"
                      class="form-control @error('customer_email') is-invalid @enderror"
                      name="customer_email"
                      value="{{ old('customer_email', $editingBooking?->customer_email) }}"
                      placeholder="john@example.com"
                      required />
                @error('customer_email')<div class="invalid-feedback">{{ $message }}</div>@enderror
              </div>

              <div class="col-sm-6">
                <label class="co-label">Phone <span class="text-danger">*</span></label>
                <div class="input-group">
                  <span class="input-group-text"><i class="ti tabler-phone" style="font-size:14px;"></i></span>
                  <input type="tel"
                        class="form-control @error('customer_phone') is-invalid @enderror"
                        name="customer_phone"
                        value="{{ old('customer_phone', $editingBooking?->customer_phone) }}"
                        placeholder="+1 (555) 000-0000"
                        required />
                </div>
                @error('customer_phone')<div class="text-danger mt-1" style="font-size:12px;">{{ $message }}</div>@enderror
              </div>

              <div class="col-sm-6">
                <label class="co-label">Postal Code</label>
                <input type="text"
                      class="form-control"
                      name="customer_postal_code"
                      value="{{ old('customer_postal_code', $editingBooking?->customer_postal_code) }}"
                      placeholder="78701" />
              </div>

              <div class="col-12">
                <label class="co-label">Street Address</label>
                <input type="text"
                      class="form-control"
                      name="customer_address"
                      value="{{ old('customer_address', $editingBooking?->customer_address) }}"
                      placeholder="123 Main St" />
              </div>

              <div class="col-sm-4">
                <label class="co-label">City</label>
                <input type="text"
                      class="form-control"
                      name="customer_city"
                      value="{{ old('customer_city', $editingBooking?->customer_city) }}"
                      placeholder="Austin" />
              </div>

              <div class="col-sm-4">
                <label class="co-label">State / Province</label>
                <input type="text"
                      class="form-control"
                      name="customer_state"
                      value="{{ old('customer_state', $editingBooking?->customer_state) }}"
                      placeholder="TX" />
              </div>

              <div class="col-sm-4">
                <label class="co-label">Country</label>
                @if(request()->routeIs('car-rental.*'))
                  <select class="form-select" name="customer_country">
                    <option value="United States" selected>United States</option>
                  </select>
                @else
                  <select class="form-select" name="customer_country">
                    <option value="">Select</option>
                    <option value="United States" {{ old('customer_country', $editingBooking?->customer_country) === 'United States' ? 'selected' : '' }}>United States</option>
                    <option value="Canada"        {{ old('customer_country', $editingBooking?->customer_country) === 'Canada'        ? 'selected' : '' }}>Canada</option>
                    <option value="Mexico"        {{ old('customer_country', $editingBooking?->customer_country) === 'Mexico'        ? 'selected' : '' }}>Mexico</option>
                  </select>
                @endif
              </div>

            </div>
          </div>
        </div>

        {{-- ── SECTION 2: Rental Location ── --}}
        <div class="co-card mb-3">
          <div class="co-card-head">
            <div class="co-card-head-icon" style="background:#fff4e5;">
              <i class="ti tabler-map-pin" style="color:#fd9e2e;font-size:16px;"></i>
            </div>
            <div>
              <div class="fw-semibold" style="font-size:14px;">Rental Location <span class="text-danger">*</span></div>
              <div class="text-muted" style="font-size:12px;">Where will you be picking up the vehicle?</div>
            </div>
          </div>
          <div class="co-card-body">
            <div class="d-flex flex-column gap-2">

              <label class="loc-tile">
                <input type="radio" name="rental_location" value="Austin & Surrounding Cities"
                      {{ old('rental_location', $editingBooking?->rental_location ?? '') === 'Austin & Surrounding Cities' ? 'checked' : '' }} required />
                <i class="ti tabler-building-community text-primary" style="font-size:16px;flex-shrink:0;"></i>
                <span class="loc-label">Austin &amp; Surrounding Cities</span>
              </label>

              <label class="loc-tile">
                <input type="radio" name="rental_location" value="San Antonio & Hill Country"
                      {{ old('rental_location', $editingBooking?->rental_location ?? '') === 'San Antonio & Hill Country' ? 'checked' : '' }} />
                <i class="ti tabler-mountain text-success" style="font-size:16px;flex-shrink:0;"></i>
                <span class="loc-label">San Antonio &amp; Hill Country</span>
              </label>

              <label class="loc-tile">
                <input type="radio" name="rental_location" value="Other"
                      {{ old('rental_location', $editingBooking?->rental_location ?? '') === 'Other' ? 'checked' : '' }} />
                <i class="ti tabler-map-search text-warning" style="font-size:16px;flex-shrink:0;"></i>
                <span class="loc-label">Other</span>
              </label>

            </div>
            @error('rental_location')<div class="text-danger mt-2" style="font-size:12px;">{{ $message }}</div>@enderror
          </div>
        </div>

        {{-- ── SECTION 3: Booking Details ── --}}
        <div class="co-card mb-3">
          <div class="co-card-head">
            <div class="co-card-head-icon" style="background:#e6faf0;">
              <i class="ti tabler-notes" style="color:#28a745;font-size:16px;"></i>
            </div>
            <div>
              <div class="fw-semibold" style="font-size:14px;">Booking Details</div>
              <div class="text-muted" style="font-size:12px;">Additional information about your rental</div>
            </div>
          </div>
          <div class="co-card-body">
            <div class="row g-3">

              <div class="col-12">
                <label class="co-label">Is this rental for a Wedding? <span class="text-danger">*</span></label>
                <select class="form-select @error('is_wedding') is-invalid @enderror"
                        name="is_wedding"
                        id="isWeddingSelect"
                        required>
                  <option value="">Please Select</option>
                  <option value="yes" {{ old('is_wedding', $editingBooking?->is_wedding ? 'yes' : null) === 'yes' ? 'selected' : '' }}>Yes — Wedding rental</option>
                  <option value="no"  {{ old('is_wedding', $editingBooking?->is_wedding ? 'yes' : 'no') === 'no'  ? 'selected' : '' }}>No — Other occasion</option>
                </select>
                @error('is_wedding')<div class="invalid-feedback">{{ $message }}</div>@enderror
              </div>

              <div class="col-12">
                <label class="co-label">Purpose of Booking</label>
                <input type="text"
                      class="form-control"
                      name="purpose"
                      value="{{ old('purpose', $editingBooking?->purpose) }}"
                      placeholder="e.g. Anniversary dinner, photo shoot…" />
              </div>

              @unless($editingBooking)
              <div class="col-12">
                <label class="co-label">Promo / Discount Code</label>
                <div class="input-group">
                  <span class="input-group-text"><i class="ti tabler-tag" style="font-size:14px;"></i></span>
                  <input type="text"
                        class="form-control"
                        name="discount_code"
                        value="{{ old('discount_code', $discountCode) }}"
                        placeholder="Enter code if you have one" />
                </div>
              </div>
              @endunless

            </div>
          </div>
        </div>

        {{-- ── SECTION 4: Wedding Fields (conditional) ── --}}
        <div class="co-card mb-4" id="weddingCard" style="display:none;">
          <div class="co-card-head">
            <div class="co-card-head-icon" style="background:#fff0f8;">
              <i class="ti tabler-heart" style="color:#e83e8c;font-size:16px;"></i>
            </div>
            <div>
              <div class="fw-semibold" style="font-size:14px;">Wedding Details</div>
              <div class="text-muted" style="font-size:12px;">Required for wedding rentals</div>
            </div>
          </div>
          <div class="co-card-body">
            <div class="row g-3">

              <div class="col-sm-6">
                <label class="co-label">Name of Bride &amp; Groom <span class="text-danger">*</span></label>
                <input type="text"
                      class="form-control @error('bride_groom_name') is-invalid @enderror"
                      name="bride_groom_name"
                      value="{{ old('bride_groom_name', $editingBooking?->bride_groom_name) }}"
                      placeholder="Jane &amp; John Smith" />
                @error('bride_groom_name')<div class="invalid-feedback">{{ $message }}</div>@enderror
              </div>

              <div class="col-sm-6">
                <label class="co-label">Date of Wedding <span class="text-danger">*</span></label>
                <input type="date"
                      class="form-control @error('wedding_date') is-invalid @enderror"
                      name="wedding_date"
                      value="{{ old('wedding_date', $editingBooking?->wedding_date?->format('Y-m-d')) }}" />
                @error('wedding_date')<div class="invalid-feedback">{{ $message }}</div>@enderror
              </div>

              <div class="col-12">
                <label class="co-label">Wedding Location &amp; Address <span class="text-danger">*</span></label>
                <input type="text"
                      class="form-control @error('wedding_location') is-invalid @enderror"
                      name="wedding_location"
                      value="{{ old('wedding_location', $editingBooking?->wedding_location) }}"
                      placeholder="The Driskill Hotel, 604 Brazos St, Austin TX" />
                @error('wedding_location')<div class="invalid-feedback">{{ $message }}</div>@enderror
              </div>

              <div class="col-12">
                <label class="co-label">Destination After Wedding &amp; Address <span class="text-danger">*</span></label>
                <input type="text"
                      class="form-control @error('destination_after_wedding') is-invalid @enderror"
                      name="destination_after_wedding"
                      value="{{ old('destination_after_wedding', $editingBooking?->destination_after_wedding) }}" />
                @error('destination_after_wedding')<div class="invalid-feedback">{{ $message }}</div>@enderror
              </div>

              <div class="col-sm-6">
                <label class="co-label">Wedding Planner Name <span class="text-danger">*</span></label>
                <input type="text"
                      class="form-control @error('wedding_planner_name') is-invalid @enderror"
                      name="wedding_planner_name"
                      value="{{ old('wedding_planner_name', $editingBooking?->wedding_planner_name) }}" />
                @error('wedding_planner_name')<div class="invalid-feedback">{{ $message }}</div>@enderror
              </div>

              <div class="col-sm-6">
                <label class="co-label">Planner Contact Info <span class="text-danger">*</span></label>
                <input type="text"
                      class="form-control @error('wedding_planner_contact') is-invalid @enderror"
                      name="wedding_planner_contact"
                      value="{{ old('wedding_planner_contact', $editingBooking?->wedding_planner_contact) }}" />
                @error('wedding_planner_contact')<div class="invalid-feedback">{{ $message }}</div>@enderror
              </div>

              <div class="col-12">
                <label class="co-label">Day-of Contact (if planner unavailable)</label>
                <input type="text"
                      class="form-control"
                      name="wedding_planner_day_contact"
                      value="{{ old('wedding_planner_day_contact', $editingBooking?->wedding_planner_day_contact) }}" />
              </div>

            </div>
          </div>
        </div>

        {{-- ── Submit ── --}}
        @if(request()->routeIs('car-rental.*') && filled($businessSetup?->company_policy))
        <div class="co-card mb-4">
          <div class="co-card-head">
            <div class="co-card-head-icon" style="background:#eef4ff;">
              <i class="ti tabler-file-text" style="color:#2d6cdf;font-size:16px;"></i>
            </div>
            <div>
              <div class="fw-semibold" style="font-size:14px;">Business Policy</div>
              <div class="text-muted" style="font-size:12px;">Please review the rental terms before confirming your booking</div>
            </div>
          </div>
          <div class="co-card-body">
            <div class="co-policy-box mb-3">
              {!! $businessSetup->company_policy !!}
            </div>
            <div class="form-check">
              <input class="form-check-input @error('accepted_company_policy') is-invalid @enderror"
                     type="checkbox"
                     value="1"
                     id="acceptedCompanyPolicy"
                     name="accepted_company_policy"
                     {{ old('accepted_company_policy') ? 'checked' : '' }}
                     required>
              <label class="form-check-label" for="acceptedCompanyPolicy">
                I have read and agree to the business policy.
              </label>
              @error('accepted_company_policy')<div class="invalid-feedback d-block">{{ $message }}</div>@enderror
            </div>
          </div>
        </div>
        @endif

        <div class="d-flex justify-content-between align-items-center">
          <a href="{{ $editingBooking ? route($bookingRoutePrefix . 'confirmation', $editingBooking->booking_number) : route($bookingRoutePrefix . 'index') }}" class="btn btn-outline-secondary">
            <i class="ti tabler-arrow-left me-1"></i> Back
          </a>
          <button type="submit" class="co-submit-btn" id="submitBtn">
            {{ $editingBooking ? 'Save Changes' : 'Continue to Payment' }}
            <i class="ti tabler-arrow-right" style="font-size:16px;"></i>
          </button>
        </div>

      </form>
    </div>

  </div>
</div>
@endsection

@section('page-script')
<script>
'use strict';

var ws = document.getElementById('isWeddingSelect');
var wc = document.getElementById('weddingCard');
var checkoutBaseSubtotal = {{ json_encode((float) $subtotal) }};
var checkoutBaseDiscount = {{ json_encode(max(0, (float) $subtotal + (float) $taxAmount - (float) $total)) }};
var checkoutBaseDeposit = {{ json_encode((float) $depositAmount) }};
var checkoutBaseTotal = {{ json_encode((float) $total) }};
var bookingForm = document.getElementById('bookingForm');
var checkoutProducts = {!! json_encode(
  $products->mapWithKeys(function ($productItem) {
      return [
          $productItem->id => [
              'id' => $productItem->id,
              'name' => $productItem->name,
              'category_id' => $productItem->category_id,
              'price_rate_type' => $productItem->price_rate_type,
              'base_price' => (float) $productItem->base_price,
              'deposit_required' => (bool) $productItem->deposit_required,
              'deposit_type' => $productItem->deposit_type,
              'deposit_value' => (float) $productItem->deposit_value,
              'tax_fees' => $productItem->taxFees
                  ->where('enabled', true)
                  ->map(function ($taxFee) {
                      return [
                          'id' => $taxFee->id,
                          'name' => $taxFee->name,
                          'percent' => (float) $taxFee->percent,
                      ];
                  })->values()->all(),
          ],
      ];
  })->all()
) !!};

function toggleWedding() {
  wc.style.display = ws.value === 'yes' ? '' : 'none';
}

ws.addEventListener('change', toggleWedding);
toggleWedding();

function formatMoney(amount) {
  return '$' + amount.toFixed(2);
}

function updateCheckoutTotals(subtotalOverride, discountOverride) {
  var subtotal = typeof subtotalOverride === 'number' ? subtotalOverride : checkoutBaseSubtotal;
  var discount = typeof discountOverride === 'number' ? discountOverride : checkoutBaseDiscount;
  var taxTotal = 0;

  document.querySelectorAll('[data-tax-row]').forEach(function(row) {
    if (row.style.display !== 'none') {
      taxTotal += parseFloat(row.getAttribute('data-tax-amount') || '0');
    }
  });

  var total = Math.max(0, subtotal + taxTotal - discount);
  var dueNow = checkoutBaseTotal > 0 ? (checkoutBaseDeposit / checkoutBaseTotal) * total : total;

  if (checkoutBaseDeposit <= 0 || checkoutBaseDeposit >= checkoutBaseTotal) {
    dueNow = total;
  }

  document.getElementById('checkoutTotalDisplay').textContent = formatMoney(total);
  document.getElementById('checkoutDueNowDisplay').textContent = formatMoney(dueNow);
}

function roundToTwo(value) {
  return Math.round((value + Number.EPSILON) * 100) / 100;
}

function toggleTaxInput(taxId, enabled) {
  var row = document.querySelector('[data-tax-row][data-tax-id="' + taxId + '"]');
  var input = document.querySelector('[data-tax-input][data-tax-id="' + taxId + '"]');
  var button = document.querySelector('[data-tax-toggle][data-tax-id="' + taxId + '"]');

  if (row) {
    row.style.display = enabled ? '' : 'none';
  }

  if (enabled) {
    if (!input) {
      input = document.createElement('input');
      input.type = 'hidden';
      input.name = 'tax_fee_ids[]';
      input.value = taxId;
      input.setAttribute('data-tax-input', '');
      input.setAttribute('data-tax-id', taxId);
      bookingForm.appendChild(input);
    }
  } else if (input) {
    input.remove();
  }

  if (button) {
    button.textContent = enabled ? 'Remove' : 'Add back';
    button.classList.toggle('is-removed', !enabled);
  }
}

function bindTaxToggleButton(button) {
  button.addEventListener('click', function() {
    var taxId = button.getAttribute('data-tax-id');
    var row = document.querySelector('[data-tax-row][data-tax-id="' + taxId + '"]');
    toggleTaxInput(taxId, row && row.style.display === 'none');
    updateCheckoutTotals();
  });
}

function rebuildTaxRows(taxes, subtotalAmount) {
  document.querySelectorAll('[data-tax-row]').forEach(function(row) {
    row.remove();
  });

  var anchor = document.getElementById('checkoutDiscountRow') || document.querySelector('.co-row.total');
  if (!anchor) {
    return;
  }

  taxes.forEach(function(tax) {
    var amount = roundToTwo(subtotalAmount * (parseFloat(tax.percent || 0) / 100));
    var wrapper = document.createElement('div');
    wrapper.className = 'co-row tax-row';
    wrapper.setAttribute('data-tax-row', '');
    wrapper.setAttribute('data-tax-id', tax.id);
    wrapper.setAttribute('data-tax-amount', amount.toFixed(2));
    wrapper.innerHTML = '<div><div class="text-muted">' + tax.name + ' <span style="font-size:11px;color:#aaa;">(' + tax.percent + '%)</span></div><button type="button" class="co-tax-remove" data-tax-toggle data-tax-id="' + tax.id + '">Remove</button></div><span class="co-tax-amount">' + formatMoney(amount) + '</span>';
    anchor.parentNode.insertBefore(wrapper, anchor);
    bindTaxToggleButton(wrapper.querySelector('[data-tax-toggle]'));
  });
}

document.querySelectorAll('[data-tax-toggle]').forEach(function(button) {
  bindTaxToggleButton(button);
});

updateCheckoutTotals();
updateCheckoutRateLabels('{{ $pricingRateType }}', {{ (int) $hours }}, {{ (int) $days }});

var editCategorySelect = document.getElementById('editCategorySelect');
var editProductSelect = document.getElementById('editProductSelect');
var editStartDate = document.getElementById('editStartDate');
var editStartTime = document.getElementById('editStartTime');
var editEndDate = document.getElementById('editEndDate');
var editEndTime = document.getElementById('editEndTime');
var subtotalOverrideInput = document.getElementById('subtotalOverrideInput');
var discountCodeInput = document.getElementById('discountCodeInput');
var editTaxesWrap = document.getElementById('editTaxesWrap');
var syncingEndDateTime = false;

function parseEditorDateTime(dateValue, timeValue) {
  if (!dateValue) {
    return null;
  }

  return new Date(dateValue + 'T' + (timeValue || '00:00') + ':00');
}

function formatEditorDate(date) {
  return date.getFullYear() + '-' + String(date.getMonth() + 1).padStart(2, '0') + '-' + String(date.getDate()).padStart(2, '0');
}

function formatEditorTime(date) {
  return String(date.getHours()).padStart(2, '0') + ':' + String(date.getMinutes()).padStart(2, '0');
}

function getSelectedDurationMinutes() {
  var startDateTime = parseEditorDateTime(editStartDate && editStartDate.value, editStartTime && editStartTime.value);
  var endDateTime = parseEditorDateTime(editEndDate && editEndDate.value, editEndTime && editEndTime.value);

  if (!startDateTime || !endDateTime) {
    return 60;
  }

  var minutes = Math.round((endDateTime.getTime() - startDateTime.getTime()) / 60000);
  return minutes > 0 ? minutes : 60;
}

function syncEndDateTimeWithStart() {
  if (!editStartDate || !editStartTime || !editEndDate || !editEndTime || syncingEndDateTime) {
    return;
  }

  var startDateTime = parseEditorDateTime(editStartDate.value, editStartTime.value);
  if (!startDateTime) {
    return;
  }

  syncingEndDateTime = true;
  var durationMinutes = getSelectedDurationMinutes();
  var newEndDateTime = new Date(startDateTime.getTime() + (durationMinutes * 60000));

  editEndDate.value = formatEditorDate(newEndDateTime);
  editEndTime.value = formatEditorTime(newEndDateTime);
  syncingEndDateTime = false;
}

function syncHiddenDateTimes() {
  if (!editStartDate || !editStartTime || !editEndDate || !editEndTime) {
    return;
  }

  document.getElementById('startDatetimeInput').value = editStartDate.value + ' ' + (editStartTime.value || '00:00') + ':00';
  document.getElementById('endDatetimeInput').value = editEndDate.value + ' ' + (editEndTime.value || '00:00') + ':00';
}

function selectedTaxIds() {
  return Array.from(document.querySelectorAll('[data-tax-input]')).map(function(input) {
    return parseInt(input.value, 10);
  });
}

function selectedProduct() {
  if (!editProductSelect) {
    return null;
  }

  return checkoutProducts[editProductSelect.value] || null;
}

function updateEditSummaryLabels(payload) {
  if (!document.getElementById('editItemName')) {
    return;
  }

  var product = selectedProduct();
  if (product) {
    document.getElementById('editItemName').textContent = product.name;
  }

  if (payload && payload.rate_label) {
    document.getElementById('editRateSummary').textContent = payload.rate_label;
  }

  if (editStartDate && editEndDate) {
    var startLabel = editStartDate.value + (editStartTime && editStartTime.value ? ' ' + editStartTime.value : '');
    var endLabel = editEndDate.value + (editEndTime && editEndTime.value ? ' ' + editEndTime.value : '');
    document.getElementById('editDateSummary').innerHTML = startLabel + '<br><span class="text-muted">' + endLabel + '</span>';
  }

  if (payload) {
    document.getElementById('editTaxSummary').textContent = formatMoney(parseFloat(payload.tax || 0));
    document.getElementById('editTotalSummary').textContent = formatMoney(parseFloat(payload.total || 0));
  }
}

function renderEditTaxes(product, keepSelection) {
  if (!editTaxesWrap) {
    return;
  }

  var selectedIds = keepSelection ? selectedTaxIds() : [];
  editTaxesWrap.innerHTML = '';
  document.querySelectorAll('[data-tax-input]').forEach(function(input) {
    input.remove();
  });
  rebuildTaxRows(product && product.tax_fees ? product.tax_fees : [], parseFloat(subtotalOverrideInput && subtotalOverrideInput.value ? subtotalOverrideInput.value : checkoutBaseSubtotal));

  (product && product.tax_fees ? product.tax_fees : []).forEach(function(tax) {
    var checked = keepSelection ? selectedIds.indexOf(parseInt(tax.id, 10)) !== -1 : true;
    var taxId = String(tax.id);
    editTaxesWrap.insertAdjacentHTML('beforeend', '<label class="form-check me-2 mb-0"><input class="form-check-input edit-tax-checkbox" type="checkbox" value="' + taxId + '"' + (checked ? ' checked' : '') + '><span class="form-check-label">' + tax.name + ' (' + tax.percent + '%)</span></label>');
    toggleTaxInput(taxId, checked);
  });

  editTaxesWrap.querySelectorAll('.edit-tax-checkbox').forEach(function(checkbox) {
    checkbox.addEventListener('change', function() {
      toggleTaxInput(checkbox.value, checkbox.checked);
      refreshEditPricing();
    });
  });
}

function filterProductsByCategory() {
  if (!editCategorySelect || !editProductSelect) {
    return;
  }

  var selectedCategory = String(editCategorySelect.value);
  var firstVisibleValue = null;

  Array.from(editProductSelect.options).forEach(function(option) {
    var visible = String(option.getAttribute('data-category-id')) === selectedCategory;
    option.hidden = !visible;
    if (visible && !firstVisibleValue) {
      firstVisibleValue = option.value;
    }
  });

  if (editProductSelect.selectedOptions.length && editProductSelect.selectedOptions[0].hidden && firstVisibleValue) {
    editProductSelect.value = firstVisibleValue;
  }

  document.getElementById('productIdInput').value = editProductSelect.value;
}

function refreshEditPricing() {
  if (!editProductSelect || !editStartDate || !editEndDate) {
    return;
  }

  syncHiddenDateTimes();

  var startValue = document.getElementById('startDatetimeInput').value;
  var endValue = document.getElementById('endDatetimeInput').value;
  if (!startValue || !endValue) {
    return;
  }

  document.getElementById('productIdInput').value = editProductSelect.value;

  fetch('{{ route($bookingRoutePrefix . 'calculate-price') }}', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      'X-CSRF-TOKEN': '{{ csrf_token() }}',
      'Accept': 'application/json'
    },
    body: JSON.stringify({
      product_id: editProductSelect.value,
      start: startValue,
      end: endValue,
      discount_code: discountCodeInput ? discountCodeInput.value : ''
    })
  })
    .then(function(response) { return response.json(); })
    .then(function(data) {
      if (!data || data.available === false) {
        return;
      }

      var fetchedSubtotal = parseFloat(data.subtotal || 0);
      if (subtotalOverrideInput && subtotalOverrideInput.dataset.manual !== 'true') {
        subtotalOverrideInput.value = fetchedSubtotal.toFixed(2);
      }

      var subtotalValue = subtotalOverrideInput && subtotalOverrideInput.value !== ''
        ? parseFloat(subtotalOverrideInput.value || fetchedSubtotal)
        : fetchedSubtotal;

      checkoutBaseSubtotal = subtotalValue;
      checkoutBaseDiscount = parseFloat(data.discount || 0);
      checkoutBaseTotal = parseFloat(data.total || 0);

      var product = selectedProduct();
      if (product && product.deposit_required) {
        if (product.deposit_type === 'percent') {
          checkoutBaseDeposit = roundToTwo(checkoutBaseTotal * (product.deposit_value / 100));
        } else if (product.deposit_type === 'fixed') {
          checkoutBaseDeposit = product.deposit_value;
        } else {
          checkoutBaseDeposit = checkoutBaseTotal;
        }
      } else {
        checkoutBaseDeposit = checkoutBaseTotal;
      }

      rebuildTaxRows(product && product.tax_fees ? product.tax_fees : [], subtotalValue);
      selectedTaxIds().forEach(function(taxId) {
        toggleTaxInput(String(taxId), true);
      });
      updateCheckoutTotals(subtotalValue, checkoutBaseDiscount);
      updateEditSummaryLabels(data);
    })
    .catch(function() {
      updateEditSummaryLabels();
    });
}

if (editCategorySelect && editProductSelect) {
  filterProductsByCategory();
  renderEditTaxes(selectedProduct(), true);
  updateEditSummaryLabels();
  refreshEditPricing();

  editCategorySelect.addEventListener('change', function() {
    filterProductsByCategory();
    renderEditTaxes(selectedProduct(), false);
    updateEditSummaryLabels();
    refreshEditPricing();
  });

  editProductSelect.addEventListener('change', function() {
    document.getElementById('productIdInput').value = editProductSelect.value;
    renderEditTaxes(selectedProduct(), false);
    updateEditSummaryLabels();
    refreshEditPricing();
  });

  [editStartDate, editStartTime].forEach(function(field) {
    field.addEventListener('change', function() {
      syncEndDateTimeWithStart();
      refreshEditPricing();
    });
  });

  [editEndDate, editEndTime].forEach(function(field) {
    field.addEventListener('change', refreshEditPricing);
  });

  subtotalOverrideInput.addEventListener('input', function() {
    subtotalOverrideInput.dataset.manual = 'true';
    checkoutBaseSubtotal = parseFloat(subtotalOverrideInput.value || 0);
    rebuildTaxRows(selectedProduct() && selectedProduct().tax_fees ? selectedProduct().tax_fees : [], checkoutBaseSubtotal);
    selectedTaxIds().forEach(function(taxId) {
      toggleTaxInput(String(taxId), true);
    });
    updateCheckoutTotals(checkoutBaseSubtotal, checkoutBaseDiscount);
  });

  discountCodeInput.addEventListener('change', refreshEditPricing);
}

document.getElementById('bookingForm').addEventListener('submit', function() {
  syncHiddenDateTimes();
  var btn = document.getElementById('submitBtn');
  btn.disabled = true;
  btn.innerHTML = '<span class="spinner-border spinner-border-sm me-2"></span>Processing…';
});
</script>
@endsection