@extends('crm.master')

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

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

  {{-- ══════════════════════════════════════════════════════════════════
       HEADER
  ══════════════════════════════════════════════════════════════════ --}}
  <div class="bki-header mb-4">
    <div class="bki-header__left">
      <h4 class="bki-header__title">Booking Index</h4>
      <p class="bki-header__subtitle" id="date-range-label">
        @if($dateRange === 'today')       Today
        @elseif($dateRange === 'tomorrow') Tomorrow
        @elseif($dateRange === 'this_week') This Week
        @elseif($dateRange === 'next_7')   Next 7 Days
        @elseif($dateRange === 'this_month') This Month
        @elseif($dateRange === 'next_30')  Next 30 Days
        @elseif($dateRange === 'last_30')  Last 30 Days
        @elseif($dateRange === 'custom' && $dateFrom && $dateTo)
          {{ \Carbon\Carbon::parse($dateFrom)->format('M j') }} – {{ \Carbon\Carbon::parse($dateTo)->format('M j, Y') }}
        @else
          All bookings
        @endif
        &mdash; <span class="bki-header__count">{{ $bookings->total() }} result{{ $bookings->total() !== 1 ? 's' : '' }}</span>
      </p>
    </div>
    <div class="bki-header__actions">
      <a href="{{ route('crm.booking.index') }}" target="_blank" class="btn btn-primary bki-btn-new">
        <i class="ti tabler-plus"></i>
        <span>New Booking</span>
      </a>
    </div>
  </div>

  @include('crm.components.alerts')

  {{-- ══════════════════════════════════════════════════════════════════
       QUICK FILTERS  (pill tabs)
  ══════════════════════════════════════════════════════════════════ --}}
  <div class="bki-quick-filters mb-3">
    @php
      $qfBase = array_merge(request()->except(['date_range','date_from','date_to','page']), []);
      $activeQf = in_array($dateRange, ['','today','tomorrow','next_7','this_month']) ? $dateRange : '';
    @endphp
    @foreach([
      ''           => 'All',
      'today'      => 'Today',
      'tomorrow'   => 'Tomorrow',
      'next_7'     => 'Next 7 Days',
      'this_month' => 'This Month',
    ] as $val => $label)
      <a href="{{ route('crm.bookings.index', array_merge($qfBase, $val ? ['date_range' => $val] : [])) }}"
         class="bki-qf-pill {{ $activeQf === $val ? 'bki-qf-pill--active' : '' }}">
        {{ $label }}
      </a>
    @endforeach
  </div>

  {{-- ══════════════════════════════════════════════════════════════════
       FILTER BAR
  ══════════════════════════════════════════════════════════════════ --}}
  <form method="GET" action="{{ route('crm.bookings.index') }}" id="bki-filter-form">

    <div class="bki-filter-bar mb-3">

      {{-- Search --}}
      <div class="bki-filter-bar__search">
        <i class="ti tabler-search bki-search-icon"></i>
        <input type="text"
               name="search"
               id="bki-search"
               class="bki-search-input"
               placeholder="Search name, booking #, email, phone…"
               value="{{ $search }}"
               autocomplete="off">
        @if($search)
          <button type="button" class="bki-search-clear" onclick="clearSearch()">
            <i class="ti tabler-x"></i>
          </button>
        @endif
      </div>

      {{-- Dropdown filters group --}}
      <div class="bki-filter-bar__dropdowns">

        {{-- Date group --}}
        <div class="bki-filter-dropdown" id="filter-date-wrap">
          <button type="button" class="bki-filter-btn {{ ($dateRange || $dateFrom) ? 'bki-filter-btn--active' : '' }}"
                  onclick="toggleFilterPanel('filter-date-panel')">
            <i class="ti tabler-calendar-event"></i>
            <span>
              @if($dateRange === 'today') Today
              @elseif($dateRange === 'tomorrow') Tomorrow
              @elseif($dateRange === 'this_week') This Week
              @elseif($dateRange === 'next_7') Next 7 Days
              @elseif($dateRange === 'this_month') This Month
              @elseif($dateRange === 'next_30') Next 30 Days
              @elseif($dateRange === 'last_30') Last 30 Days
              @elseif($dateRange === 'custom') Custom
              @else Date @endif
            </span>
            <i class="ti tabler-chevron-down bki-filter-caret"></i>
          </button>
          <div class="bki-filter-panel" id="filter-date-panel" style="min-width:280px">
            <div class="bki-filter-panel__section">
              <label class="bki-filter-panel__label">Date Source</label>
              <select name="date_src" class="bki-filter-panel__select">
                <option value="start_date" {{ $dateSrc === 'start_date' ? 'selected' : '' }}>Start Date</option>
                <option value="end_date"   {{ $dateSrc === 'end_date'   ? 'selected' : '' }}>End Date</option>
                <option value="created_at" {{ $dateSrc === 'created_at' ? 'selected' : '' }}>Created Date</option>
              </select>
            </div>
            <div class="bki-filter-panel__section">
              <label class="bki-filter-panel__label">Date Range</label>
              <select name="date_range" class="bki-filter-panel__select" id="date-range-select"
                      onchange="handleDateRangeChange(this)">
                <option value=""          {{ $dateRange === ''          ? 'selected' : '' }}>All Time</option>
                <option value="today"     {{ $dateRange === 'today'     ? 'selected' : '' }}>Today</option>
                <option value="tomorrow"  {{ $dateRange === 'tomorrow'  ? 'selected' : '' }}>Tomorrow</option>
                <option value="this_week" {{ $dateRange === 'this_week' ? 'selected' : '' }}>This Week</option>
                <option value="next_7"    {{ $dateRange === 'next_7'    ? 'selected' : '' }}>Next 7 Days</option>
                <option value="this_month"{{ $dateRange === 'this_month'? 'selected' : '' }}>This Month</option>
                <option value="next_30"   {{ $dateRange === 'next_30'   ? 'selected' : '' }}>Next 30 Days</option>
                <option value="last_30"   {{ $dateRange === 'last_30'   ? 'selected' : '' }}>Last 30 Days</option>
                <option value="custom"    {{ $dateRange === 'custom'    ? 'selected' : '' }}>Custom Range…</option>
              </select>
            </div>
            <div id="custom-date-fields" style="{{ $dateRange === 'custom' ? '' : 'display:none' }}">
              <div class="bki-filter-panel__section">
                <label class="bki-filter-panel__label">From</label>
                <input type="date" name="date_from" class="bki-filter-panel__input" value="{{ $dateFrom }}">
              </div>
              <div class="bki-filter-panel__section">
                <label class="bki-filter-panel__label">To</label>
                <input type="date" name="date_to" class="bki-filter-panel__input" value="{{ $dateTo }}">
              </div>
            </div>
            <div class="bki-filter-panel__footer">
              <button type="submit" class="bki-filter-panel__apply">Apply</button>
            </div>
          </div>
        </div>

        {{-- Status filter --}}
        <div class="bki-filter-dropdown">
          <button type="button" class="bki-filter-btn {{ $status ? 'bki-filter-btn--active' : '' }}"
                  onclick="toggleFilterPanel('filter-status-panel')">
            <i class="ti tabler-circle-check"></i>
            <span>{{ $status ? (\App\Models\Booking::STATUS_OPTIONS[$status] ?? ucfirst($status)) : 'Status' }}</span>
            <i class="ti tabler-chevron-down bki-filter-caret"></i>
          </button>
          <div class="bki-filter-panel" id="filter-status-panel">
            <div class="bki-filter-panel__options">
              <label class="bki-filter-option {{ $status === '' ? 'bki-filter-option--selected' : '' }}">
                <input type="radio" name="status" value="" {{ $status === '' ? 'checked' : '' }}
                       onchange="this.form.submit()">
                <span class="bki-status-dot bki-status-dot--all"></span> All Statuses
              </label>
              @foreach(\App\Models\Booking::STATUS_OPTIONS as $val => $label)
              <label class="bki-filter-option {{ $status === $val ? 'bki-filter-option--selected' : '' }}">
                <input type="radio" name="status" value="{{ $val }}" {{ $status === $val ? 'checked' : '' }}
                       onchange="this.form.submit()">
                <span class="bki-status-dot bki-status-dot--{{ $val }}"></span> {{ $label }}
              </label>
              @endforeach
            </div>
          </div>
        </div>

        {{-- Category filter --}}
        <div class="bki-filter-dropdown">
          <button type="button" class="bki-filter-btn {{ $catId ? 'bki-filter-btn--active' : '' }}"
                  onclick="toggleFilterPanel('filter-cat-panel')">
            <i class="ti tabler-tag"></i>
            <span>{{ $catId ? ($categories->firstWhere('id', $catId)?->name ?? 'Category') : 'Category' }}</span>
            <i class="ti tabler-chevron-down bki-filter-caret"></i>
          </button>
          <div class="bki-filter-panel" id="filter-cat-panel">
            <div class="bki-filter-panel__options">
              <label class="bki-filter-option {{ !$catId ? 'bki-filter-option--selected' : '' }}">
                <input type="radio" name="category_id" value="" {{ !$catId ? 'checked' : '' }}
                       onchange="this.form.submit()">
                All Categories
              </label>
              @foreach($categories as $cat)
              <label class="bki-filter-option {{ $catId == $cat->id ? 'bki-filter-option--selected' : '' }}">
                <input type="radio" name="category_id" value="{{ $cat->id }}"
                       {{ $catId == $cat->id ? 'checked' : '' }} onchange="this.form.submit()">
                {{ $cat->name }}
              </label>
              @endforeach
            </div>
          </div>
        </div>

        {{-- Source filter --}}
        @if($sources->isNotEmpty())
        <div class="bki-filter-dropdown">
          <button type="button" class="bki-filter-btn {{ $source ? 'bki-filter-btn--active' : '' }}"
                  onclick="toggleFilterPanel('filter-source-panel')">
            <i class="ti tabler-world"></i>
            <span>{{ $source ? ucfirst($source) : 'Source' }}</span>
            <i class="ti tabler-chevron-down bki-filter-caret"></i>
          </button>
          <div class="bki-filter-panel" id="filter-source-panel">
            <div class="bki-filter-panel__options">
              <label class="bki-filter-option {{ !$source ? 'bki-filter-option--selected' : '' }}">
                <input type="radio" name="source" value="" {{ !$source ? 'checked' : '' }}
                       onchange="this.form.submit()">
                All Sources
              </label>
              @foreach($sources as $src)
              <label class="bki-filter-option {{ $source === $src ? 'bki-filter-option--selected' : '' }}">
                <input type="radio" name="source" value="{{ $src }}"
                       {{ $source === $src ? 'checked' : '' }} onchange="this.form.submit()">
                {{ ucfirst($src) }}
              </label>
              @endforeach
            </div>
          </div>
        </div>
        @endif

      </div>{{-- /.bki-filter-bar__dropdowns --}}

      {{-- Active filter chips + clear --}}
      @php $hasFilters = $dateRange || $status || $catId || $source || $search; @endphp
      @if($hasFilters)
        <div class="bki-filter-bar__clear">
          <a href="{{ route('crm.bookings.index') }}" class="bki-clear-btn">
            <i class="ti tabler-x"></i> Clear
          </a>
        </div>
      @endif

    </div>{{-- /.bki-filter-bar --}}

    {{-- Hidden inputs to preserve state on filter-panel submits --}}
    @if($search)    <input type="hidden" name="search"    value="{{ $search }}"> @endif

  </form>

  {{-- ══════════════════════════════════════════════════════════════════
       TABLE TOOLBAR
  ══════════════════════════════════════════════════════════════════ --}}
  <div class="bki-toolbar mb-2">

    {{-- Left: result count + bulk-select info --}}
    <div class="bki-toolbar__left">
      <span class="bki-toolbar__count" id="bki-result-count">
        {{ $bookings->total() }} booking{{ $bookings->total() !== 1 ? 's' : '' }}
      </span>
      <span class="bki-toolbar__selected d-none" id="bki-selected-label"></span>
    </div>

    {{-- Right: sort + column toggle --}}
    <div class="bki-toolbar__right">

      {{-- Sort control --}}
      <div class="bki-filter-dropdown">
        <button type="button" class="bki-tool-btn" onclick="toggleFilterPanel('sort-panel')">
          <i class="ti tabler-arrows-sort"></i>
          <span id="sort-label">Sort</span>
          <i class="ti tabler-chevron-down bki-filter-caret"></i>
        </button>
        <div class="bki-filter-panel" id="sort-panel" style="right:0;left:auto;min-width:200px">
          <form method="GET" action="{{ route('crm.bookings.index') }}" id="sort-form">
            @foreach(request()->except(['sort','dir','page']) as $k => $v)
              <input type="hidden" name="{{ $k }}" value="{{ $v }}">
            @endforeach
            <div class="bki-filter-panel__options">
              @php $curSort = request('sort','created_at'); $curDir = request('dir','desc'); @endphp
              @foreach([
                'created_at'     => 'Date Created',
                'start_datetime' => 'Start Date',
                'end_datetime'   => 'End Date',
                'total_amount'   => 'Total Amount',
                'customer_name'  => 'Customer Name',
              ] as $col => $lbl)
              <label class="bki-filter-option {{ $curSort === $col ? 'bki-filter-option--selected' : '' }}"
                     onclick="submitSort('{{ $col }}', '{{ ($curSort === $col && $curDir === 'asc') ? 'desc' : 'asc' }}')">
                <i class="ti {{ $curSort === $col ? ($curDir === 'asc' ? 'tabler-sort-ascending' : 'tabler-sort-descending') : 'tabler-minus' }} bki-sort-icon"></i>
                {{ $lbl }}
              </label>
              @endforeach
            </div>
            <input type="hidden" name="sort" id="sort-col-input" value="{{ $curSort }}">
            <input type="hidden" name="dir"  id="sort-dir-input" value="{{ $curDir }}">
          </form>
        </div>
      </div>

      {{-- Column visibility toggle --}}
      <div class="bki-filter-dropdown">
        <button type="button" class="bki-tool-btn" onclick="toggleFilterPanel('col-panel')"
                title="Show / hide columns">
          <i class="ti tabler-columns"></i>
          <span>Columns</span>
          <i class="ti tabler-chevron-down bki-filter-caret"></i>
        </button>
        <div class="bki-filter-panel" id="col-panel" style="right:0;left:auto;min-width:210px">
          <div class="bki-filter-panel__section pb-0">
            <label class="bki-filter-panel__label">Visible Columns</label>
          </div>
          <div class="bki-col-toggle-list" id="col-toggle-list">
            @foreach([
              'col-booking'  => 'Booking #',
              'col-start'    => 'Start',
              'col-end'      => 'End',
              'col-created'  => 'Created',
              'col-customer' => 'Customer',
              'col-items'    => 'Item(s)',
              'col-total'    => 'Amount',
              'col-paid'     => 'Paid',
              'col-due'      => 'Due',
              'col-status'   => 'Status',
            ] as $col => $label)
            <label class="bki-col-toggle-item">
              <input type="checkbox" class="bki-col-cb" data-col="{{ $col }}" checked
                     onchange="toggleColumn('{{ $col }}', this.checked)">
              <span class="bki-col-toggle-check"></span>
              {{ $label }}
            </label>
            @endforeach
          </div>
        </div>
      </div>

    </div>
  </div>

  {{-- ══════════════════════════════════════════════════════════════════
       BOOKING TABLE
  ══════════════════════════════════════════════════════════════════ --}}
  <div class="bki-table-card">

    <div class="table-responsive bki-table-wrap">
      <table class="bki-table" id="bki-main-table">
        <thead>
          <tr>
            {{-- Checkbox --}}
            <th class="bki-th bki-th-check">
              <label class="bki-checkbox-wrap">
                <input type="checkbox" id="bki-select-all" onchange="toggleSelectAll(this)">
                <span class="bki-checkbox"></span>
              </label>
            </th>
            <th class="bki-th col-booking"  data-col="col-booking">
              <span class="bki-th-inner bki-sortable" onclick="submitSort('booking_number', '{{ ($curSort==='booking_number'&&$curDir==='asc')?'desc':'asc' }}')">
                Booking
                @if($curSort === 'booking_number')
                  <i class="ti {{ $curDir==='asc'?'tabler-chevron-up':'tabler-chevron-down' }} bki-sort-arrow"></i>
                @else
                  <i class="ti tabler-selector bki-sort-arrow bki-sort-arrow--idle"></i>
                @endif
              </span>
            </th>
            <th class="bki-th col-start" data-col="col-start">
              <span class="bki-th-inner bki-sortable" onclick="submitSort('start_datetime', '{{ ($curSort==='start_datetime'&&$curDir==='asc')?'desc':'asc' }}')">
                Start
                @if($curSort === 'start_datetime')
                  <i class="ti {{ $curDir==='asc'?'tabler-chevron-up':'tabler-chevron-down' }} bki-sort-arrow"></i>
                @else
                  <i class="ti tabler-selector bki-sort-arrow bki-sort-arrow--idle"></i>
                @endif
              </span>
            </th>
            <th class="bki-th col-end" data-col="col-end">
              <span class="bki-th-inner bki-sortable" onclick="submitSort('end_datetime', '{{ ($curSort==='end_datetime'&&$curDir==='asc')?'desc':'asc' }}')">
                End
                @if($curSort === 'end_datetime')
                  <i class="ti {{ $curDir==='asc'?'tabler-chevron-up':'tabler-chevron-down' }} bki-sort-arrow"></i>
                @else
                  <i class="ti tabler-selector bki-sort-arrow bki-sort-arrow--idle"></i>
                @endif
              </span>
            </th>
            <th class="bki-th col-created" data-col="col-created">
              <span class="bki-th-inner bki-sortable" onclick="submitSort('created_at', '{{ ($curSort==='created_at'&&$curDir==='asc')?'desc':'asc' }}')">
                Created
                @if($curSort === 'created_at')
                  <i class="ti {{ $curDir==='asc'?'tabler-chevron-up':'tabler-chevron-down' }} bki-sort-arrow"></i>
                @else
                  <i class="ti tabler-selector bki-sort-arrow bki-sort-arrow--idle"></i>
                @endif
              </span>
            </th>
            <th class="bki-th col-customer" data-col="col-customer">
              <span class="bki-th-inner bki-sortable" onclick="submitSort('customer_name', '{{ ($curSort==='customer_name'&&$curDir==='asc')?'desc':'asc' }}')">
                Customer
                @if($curSort === 'customer_name')
                  <i class="ti {{ $curDir==='asc'?'tabler-chevron-up':'tabler-chevron-down' }} bki-sort-arrow"></i>
                @else
                  <i class="ti tabler-selector bki-sort-arrow bki-sort-arrow--idle"></i>
                @endif
              </span>
            </th>
            <th class="bki-th col-items" data-col="col-items">Item(s)</th>
            <th class="bki-th col-total bki-th--right" data-col="col-total">
              <span class="bki-th-inner bki-sortable" onclick="submitSort('total_amount', '{{ ($curSort==='total_amount'&&$curDir==='asc')?'desc':'asc' }}')">
                Amount
                @if($curSort === 'total_amount')
                  <i class="ti {{ $curDir==='asc'?'tabler-chevron-up':'tabler-chevron-down' }} bki-sort-arrow"></i>
                @else
                  <i class="ti tabler-selector bki-sort-arrow bki-sort-arrow--idle"></i>
                @endif
              </span>
            </th>
            <th class="bki-th col-paid bki-th--right" data-col="col-paid">Paid</th>
            <th class="bki-th col-due bki-th--right" data-col="col-due">Due</th>
            <th class="bki-th col-status"  data-col="col-status">Status</th>
          </tr>
        </thead>
        <tbody>
          @forelse($bookings as $i => $booking)
          @php
            $paidAmount = (float) ($booking->deposit_amount ?? 0);
            $totalAmount = (float) ($booking->total_amount ?? 0);
            $balance = max(0, $totalAmount - $paidAmount);
            $firstItem = $booking->items->first();
          @endphp
          <tr class="bki-row {{ $i % 2 === 1 ? 'bki-row--alt' : '' }}"
              data-href="{{ route('crm.booking.confirmation', $booking->booking_number) }}">

            {{-- Checkbox --}}
            <td class="bki-td bki-td-check">
              <label class="bki-checkbox-wrap" onclick="event.stopPropagation()">
                <input type="checkbox" class="bki-row-cb" value="{{ $booking->hash_id }}"
                       onchange="updateSelectAll()">
                <span class="bki-checkbox"></span>
              </label>
            </td>

            {{-- ── Booking # ── --}}
            <td class="bki-td col-booking" data-label="Booking">
              <a href="{{ route('crm.booking.confirmation', $booking->booking_number) }}"
                 class="bki-booking-num" onclick="event.stopPropagation()">
                {{ $booking->booking_number }}
              </a>
              @if($firstItem)
              <div class="bki-cell-subtext">
                {{ $firstItem->product_name }}
              </div>
              @endif
            </td>

            {{-- ── Start ── --}}
            <td class="bki-td col-start" data-label="Start">
              <div class="bki-cell-strong">{{ $booking->start_datetime->format('m/d/y') }}</div>
              <div class="bki-cell-subtext">{{ $booking->start_datetime->format('h:i A') }}</div>
            </td>

            {{-- ── End ── --}}
            <td class="bki-td col-end" data-label="End">
              <div class="bki-cell-strong">{{ $booking->end_datetime->format('m/d/y') }}</div>
              <div class="bki-cell-subtext">{{ $booking->end_datetime->format('h:i A') }}</div>
            </td>

            {{-- ── Created ── --}}
            <td class="bki-td col-created" data-label="Created">
              <div class="bki-cell-strong">{{ $booking->created_at->format('m/d/y') }}</div>
              <div class="bki-cell-subtext">{{ $booking->created_at->format('h:i A') }}</div>
            </td>

            {{-- ── Customer ── --}}
            <td class="bki-td col-customer" data-label="Customer">
              <div class="bki-customer__name">{{ $booking->customer_name }}</div>
              @if($booking->customer_email)
              <div class="bki-cell-subtext">{{ $booking->customer_email }}</div>
              @endif
              @if($booking->customer_phone)
              <div class="bki-cell-subtext">{{ $booking->customer_phone }}</div>
              @endif
            </td>

            {{-- ── Items ── --}}
            <td class="bki-td col-items" data-label="Item(s)">
              @forelse($booking->items as $item)
                <div class="bki-cell-stack">
                  <div class="bki-cell-strong">{{ $item->product_name }}</div>
                  @if($item->quantity)
                  <div class="bki-cell-subtext">Qty {{ $item->quantity }}</div>
                  @endif
                </div>
              @empty
                <span class="bki-cell-subtext">No item</span>
              @endforelse
            </td>

            {{-- ── Total ── --}}
            <td class="bki-td col-total bki-td--right" data-label="Amount">
              <div class="bki-amount">${{ number_format($totalAmount, 2) }}</div>
            </td>

            {{-- ── Paid ── --}}
            <td class="bki-td col-paid bki-td--right" data-label="Paid">
              <div class="bki-amount">${{ number_format($paidAmount, 2) }}</div>
            </td>

            {{-- ── Due ── --}}
            <td class="bki-td col-due bki-td--right" data-label="Due">
              @if($balance > 0)
                <div class="bki-balance-due">${{ number_format($balance, 2) }}</div>
              @else
                <span class="bki-balance-settled"><i class="ti tabler-circle-check-filled"></i> $0.00</span>
              @endif
            </td>

            {{-- ── Status ── --}}
            <td class="bki-td col-status" data-label="Status">
              <span class="bki-status-badge bki-status-badge--{{ $booking->status }}">
                <span class="bki-status-dot"></span>
                {{ $booking->status_label }}
              </span>
            </td>

          </tr>
          @empty
          <tr>
            <td colspan="11" class="bki-empty">
              <i class="ti tabler-inbox"></i>
              <p>No bookings found</p>
              @if($hasFilters)
                <a href="{{ route('crm.bookings.index') }}" class="bki-empty__cta">
                  <i class="ti tabler-x"></i> Clear filters
                </a>
              @endif
            </td>
          </tr>
          @endforelse
        </tbody>
      </table>
    </div>

    {{-- Bulk action bar (appears when rows selected) --}}
    <div class="bki-bulk-bar d-none" id="bki-bulk-bar">
      <span class="bki-bulk-bar__count" id="bki-bulk-count">0 selected</span>
      <button type="button" class="bki-bulk-btn bki-bulk-btn--danger"
              onclick="window.location='{{ route('crm.bookings.index') }}'">
        <i class="ti tabler-x"></i> Clear selection
      </button>
    </div>

    {{-- Pagination --}}
    @if($bookings->hasPages())
    <div class="bki-pagination">
      <small class="bki-pagination__info">
        Showing {{ $bookings->firstItem() }}–{{ $bookings->lastItem() }} of {{ $bookings->total() }}
      </small>
      <div class="bki-pagination__links">
        {{ $bookings->links() }}
      </div>
    </div>
    @endif

  </div>{{-- /.bki-table-card --}}

</div>
@endsection

@section('head-extra')
<style>
/* ─────────────────────────────────────────────────────────────────────────
   BKI — Booking Index Design System
   8px grid · CSS custom properties · mobile-first
───────────────────────────────────────────────────────────────────────── */
:root {
  --bki-radius:      10px;
  --bki-radius-sm:   6px;
  --bki-radius-pill: 999px;
  --bki-shadow:      0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.05);
  --bki-shadow-md:   0 4px 12px rgba(0,0,0,.10);
  --bki-border:      #e5e7eb;
  --bki-bg-subtle:   #f9fafb;
  --bki-text-primary:#111827;
  --bki-text-muted:  #6b7280;
  --bki-text-xs:     11px;
  --bki-text-sm:     12px;
  --bki-text-md:     13px;
  --bki-accent:      #696cff;
  --bki-accent-soft: #eef2ff;
  --bki-row-hover:   #f5f7ff;
  --bki-transition:  .15s ease;
}

/* ── Header ─────────────────────────────────────────────────────────── */
.bki-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.bki-header__title {
  font-size: 18px;
  font-weight: 700;
  color: var(--bki-text-primary);
  margin: 0;
  line-height: 1.3;
}
.bki-header__subtitle {
  font-size: var(--bki-text-sm);
  color: var(--bki-text-muted);
  margin: 2px 0 0;
}
.bki-header__count {
  font-weight: 600;
  color: var(--bki-accent);
}
.bki-btn-new {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: var(--bki-radius-sm);
  font-size: var(--bki-text-md);
  font-weight: 600;
  padding: 8px 16px;
  transition: opacity var(--bki-transition), transform var(--bki-transition);
  white-space: nowrap;
}
.bki-btn-new:hover { opacity: .88; transform: translateY(-1px); }
.bki-btn-new:active { transform: translateY(0); }

/* ── Quick filter pills ─────────────────────────────────────────────── */
.bki-quick-filters {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.bki-qf-pill {
  display: inline-flex;
  align-items: center;
  padding: 5px 14px;
  border-radius: var(--bki-radius-pill);
  font-size: var(--bki-text-sm);
  font-weight: 500;
  color: var(--bki-text-muted);
  background: #fff;
  border: 1.5px solid var(--bki-border);
  text-decoration: none;
  transition: all var(--bki-transition);
  line-height: 1.5;
}
.bki-qf-pill:hover {
  border-color: var(--bki-accent);
  color: var(--bki-accent);
  text-decoration: none;
}
.bki-qf-pill--active {
  background: var(--bki-accent);
  border-color: var(--bki-accent);
  color: #fff !important;
  box-shadow: 0 2px 8px rgba(105,108,255,.30);
}

/* ── Filter bar ─────────────────────────────────────────────────────── */
.bki-filter-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  background: #fff;
  border: 1.5px solid var(--bki-border);
  border-radius: var(--bki-radius);
  padding: 10px 14px;
  box-shadow: var(--bki-shadow);
}

/* Search */
.bki-filter-bar__search {
  position: relative;
  flex: 1 1 240px;
  min-width: 200px;
}
.bki-search-icon {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--bki-text-muted);
  font-size: 14px;
  pointer-events: none;
}
.bki-search-input {
  width: 100%;
  height: 36px;
  padding: 0 32px 0 34px;
  border: 1.5px solid var(--bki-border);
  border-radius: var(--bki-radius-sm);
  font-size: var(--bki-text-md);
  color: var(--bki-text-primary);
  background: var(--bki-bg-subtle);
  outline: none;
  transition: border-color var(--bki-transition), box-shadow var(--bki-transition);
}
.bki-search-input:focus {
  border-color: var(--bki-accent);
  box-shadow: 0 0 0 3px rgba(105,108,255,.12);
  background: #fff;
}
.bki-search-clear {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  padding: 2px;
  color: var(--bki-text-muted);
  cursor: pointer;
  font-size: 13px;
  line-height: 1;
  border-radius: 50%;
  transition: color var(--bki-transition);
}
.bki-search-clear:hover { color: var(--bki-text-primary); }

/* Filter dropdowns group */
.bki-filter-bar__dropdowns {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.bki-filter-dropdown {
  position: relative;
}
.bki-filter-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 36px;
  padding: 0 12px;
  background: #fff;
  border: 1.5px solid var(--bki-border);
  border-radius: var(--bki-radius-sm);
  font-size: var(--bki-text-sm);
  font-weight: 500;
  color: var(--bki-text-muted);
  cursor: pointer;
  white-space: nowrap;
  transition: all var(--bki-transition);
}
.bki-filter-btn:hover {
  border-color: var(--bki-accent);
  color: var(--bki-accent);
}
.bki-filter-btn--active {
  background: var(--bki-accent-soft);
  border-color: var(--bki-accent);
  color: var(--bki-accent);
  font-weight: 600;
}
.bki-filter-caret {
  font-size: 12px;
  transition: transform var(--bki-transition);
}
.bki-filter-dropdown--open .bki-filter-caret {
  transform: rotate(180deg);
}

/* Filter panel (dropdown) */
.bki-filter-panel {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 1050;
  min-width: 200px;
  background: #fff;
  border: 1.5px solid var(--bki-border);
  border-radius: var(--bki-radius);
  box-shadow: var(--bki-shadow-md);
  padding: 8px;
  animation: bkiPanelIn .12s ease;
}
.bki-filter-panel.bki-filter-panel--open { display: block; }
@keyframes bkiPanelIn {
  from { opacity:0; transform: translateY(-4px); }
  to   { opacity:1; transform: translateY(0); }
}
.bki-filter-panel__section { padding: 4px 2px 8px; }
.bki-filter-panel__label {
  display: block;
  font-size: var(--bki-text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--bki-text-muted);
  margin-bottom: 4px;
  padding: 0 4px;
}
.bki-filter-panel__select,
.bki-filter-panel__input {
  width: 100%;
  height: 34px;
  padding: 0 10px;
  border: 1.5px solid var(--bki-border);
  border-radius: var(--bki-radius-sm);
  font-size: var(--bki-text-sm);
  color: var(--bki-text-primary);
  background: var(--bki-bg-subtle);
  outline: none;
  appearance: auto;
}
.bki-filter-panel__select:focus,
.bki-filter-panel__input:focus {
  border-color: var(--bki-accent);
  box-shadow: 0 0 0 2px rgba(105,108,255,.12);
}
.bki-filter-panel__options {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.bki-filter-option {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: var(--bki-radius-sm);
  font-size: var(--bki-text-md);
  color: var(--bki-text-primary);
  cursor: pointer;
  transition: background var(--bki-transition);
  margin: 0;
  font-weight: 400;
}
.bki-filter-option:hover { background: var(--bki-bg-subtle); }
.bki-filter-option--selected {
  background: var(--bki-accent-soft);
  color: var(--bki-accent);
  font-weight: 600;
}
.bki-filter-option input[type="radio"] { display: none; }

.bki-filter-panel__footer {
  padding-top: 6px;
  border-top: 1px solid var(--bki-border);
  margin-top: 4px;
}
.bki-filter-panel__apply {
  width: 100%;
  height: 32px;
  background: var(--bki-accent);
  color: #fff;
  border: none;
  border-radius: var(--bki-radius-sm);
  font-size: var(--bki-text-sm);
  font-weight: 600;
  cursor: pointer;
  transition: opacity var(--bki-transition);
}
.bki-filter-panel__apply:hover { opacity: .88; }

/* Status dots in panel */
.bki-status-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
}
.bki-status-dot--all       { background: #9ca3af; }
.bki-status-dot--pending    { background: #f59e0b; }
.bki-status-dot--reserved   { background: #6366f1; }
.bki-status-dot--deposit    { background: #0ea5e9; }
.bki-status-dot--paid       { background: #22c55e; }
.bki-status-dot--waiting    { background: #94a3b8; }
.bki-status-dot--checked_in { background: #10b981; }
.bki-status-dot--checked_out{ background: #374151; }
.bki-status-dot--cancelled  { background: #ef4444; }
.bki-status-dot--void       { background: #ef4444; }

/* Clear button */
.bki-filter-bar__clear { margin-left: auto; }
.bki-clear-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--bki-text-sm);
  color: var(--bki-text-muted);
  text-decoration: none;
  padding: 5px 10px;
  border-radius: var(--bki-radius-sm);
  transition: all var(--bki-transition);
  border: 1.5px solid transparent;
}
.bki-clear-btn:hover {
  color: #ef4444;
  border-color: #fecaca;
  background: #fff5f5;
  text-decoration: none;
}

/* ── Table card ─────────────────────────────────────────────────────── */
.bki-table-card {
  background: #fff;
  border: 1.5px solid var(--bki-border);
  border-radius: var(--bki-radius);
  box-shadow: var(--bki-shadow);
  overflow: hidden;
}

.bki-table { width: 100%; border-collapse: separate; border-spacing: 0; }

.bki-th {
  padding: 11px 16px;
  font-size: var(--bki-text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--bki-text-muted);
  background: var(--bki-bg-subtle);
  border-bottom: 1.5px solid var(--bki-border);
  white-space: nowrap;
  position: sticky;
  top: 0;
  z-index: 10;
}
.bki-th:first-child { padding-left: 20px; border-radius: 0; }

.bki-row {
  cursor: pointer;
  transition: background var(--bki-transition);
  border-bottom: 1px solid var(--bki-border);
}
.bki-row:last-child { border-bottom: none; }
.bki-row:hover { background: var(--bki-row-hover); }
.bki-row:nth-child(even) { background: #fafafa; }
.bki-row:nth-child(even):hover { background: var(--bki-row-hover); }

.bki-td {
  padding: 12px 16px;
  vertical-align: middle;
  font-size: var(--bki-text-md);
  color: var(--bki-text-primary);
}
.bki-td:first-child { padding-left: 20px; }

/* Booking number cell */
.bki-booking-num {
  font-weight: 700;
  font-size: var(--bki-text-md);
  color: var(--bki-accent);
  text-decoration: none;
  letter-spacing: .2px;
  transition: color var(--bki-transition);
}
.bki-booking-num:hover { color: #4f46e5; text-decoration: underline; }
.bki-created-at {
  font-size: var(--bki-text-xs);
  color: var(--bki-text-muted);
  margin-top: 2px;
}
.bki-wedding-tag {
  display: inline-flex;
  align-items: center;
  color: #f43f5e;
  font-size: 11px;
  margin-left: 4px;
  vertical-align: middle;
}

/* Customer cell */
.bki-customer-name {
  font-weight: 600;
  font-size: var(--bki-text-md);
  color: var(--bki-text-primary);
  line-height: 1.3;
}
.bki-customer-meta {
  font-size: var(--bki-text-xs);
  color: var(--bki-text-muted);
  line-height: 1.4;
}

/* Vehicle cell */
.bki-vehicle-item {
  font-size: var(--bki-text-sm);
  color: var(--bki-text-primary);
  line-height: 1.5;
}

/* Date cells */
.bki-date-main {
  font-size: var(--bki-text-sm);
  font-weight: 500;
  color: var(--bki-text-primary);
  line-height: 1.3;
}
.bki-date-time {
  font-size: var(--bki-text-xs);
  color: var(--bki-text-muted);
}

/* Amount cells */
.bki-amount {
  font-size: var(--bki-text-md);
  font-weight: 700;
  color: var(--bki-text-primary);
}
.bki-amount-paid {
  font-size: var(--bki-text-xs);
  color: var(--bki-text-muted);
}
.bki-balance-due {
  font-size: var(--bki-text-md);
  font-weight: 700;
  color: #ef4444;
}
.bki-balance-settled {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: var(--bki-text-xs);
  font-weight: 600;
  color: #16a34a;
}

/* Status badges */
.bki-status-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: var(--bki-radius-pill);
  font-size: var(--bki-text-xs);
  font-weight: 700;
  letter-spacing: .3px;
  text-transform: uppercase;
  white-space: nowrap;
}
.bki-status-badge--pending    { background:#fef3c7; color:#b45309; }
.bki-status-badge--reserved   { background:#ede9fe; color:#6d28d9; }
.bki-status-badge--deposit    { background:#e0f2fe; color:#0369a1; }
.bki-status-badge--paid       { background:#dcfce7; color:#15803d; }
.bki-status-badge--waiting    { background:#f1f5f9; color:#64748b; }
.bki-status-badge--checked_in { background:#d1fae5; color:#065f46; }
.bki-status-badge--checked_out{ background:#f3f4f6; color:#374151; }
.bki-status-badge--cancelled  { background:#fee2e2; color:#b91c1c; }
.bki-status-badge--void       { background:#fee2e2; color:#b91c1c; }

/* Source tag */
/* ── Toolbar ────────────────────────────────────────────────────────── */
.bki-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.bki-toolbar__left { display: flex; align-items: center; gap: 10px; }
.bki-toolbar__right { display: flex; align-items: center; gap: 6px; }
.bki-toolbar__count {
  font-size: var(--bki-text-sm);
  font-weight: 600;
  color: var(--bki-text-muted);
}
.bki-toolbar__selected {
  font-size: var(--bki-text-sm);
  font-weight: 600;
  color: var(--bki-accent);
  background: var(--bki-accent-soft);
  padding: 3px 10px;
  border-radius: var(--bki-radius-pill);
}
.bki-tool-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 34px;
  padding: 0 12px;
  background: #fff;
  border: 1.5px solid var(--bki-border);
  border-radius: var(--bki-radius-sm);
  font-size: var(--bki-text-sm);
  font-weight: 500;
  color: var(--bki-text-muted);
  cursor: pointer;
  white-space: nowrap;
  transition: all var(--bki-transition);
}
.bki-tool-btn:hover { border-color: var(--bki-accent); color: var(--bki-accent); }
.bki-sort-icon { font-size: 13px; color: var(--bki-text-muted); }

/* Column toggle panel */
.bki-col-toggle-list {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 2px 0;
}
.bki-col-toggle-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: var(--bki-radius-sm);
  font-size: var(--bki-text-md);
  color: var(--bki-text-primary);
  cursor: pointer;
  transition: background var(--bki-transition);
  margin: 0;
  font-weight: 400;
  user-select: none;
}
.bki-col-toggle-item:hover { background: var(--bki-bg-subtle); }
.bki-col-toggle-item input[type="checkbox"] { display: none; }
.bki-col-toggle-check {
  width: 16px; height: 16px;
  border: 2px solid var(--bki-border);
  border-radius: 4px;
  flex-shrink: 0;
  transition: all var(--bki-transition);
  position: relative;
  background: #fff;
}
.bki-col-toggle-item input:checked + .bki-col-toggle-check {
  background: var(--bki-accent);
  border-color: var(--bki-accent);
}
.bki-col-toggle-item input:checked + .bki-col-toggle-check::after {
  content: '';
  position: absolute;
  left: 3px; top: 1px;
  width: 6px; height: 9px;
  border: 2px solid #fff;
  border-top: none; border-left: none;
  transform: rotate(45deg);
}

/* ── Table card ─────────────────────────────────────────────────────── */
.bki-table-card {
  background: #fff;
  border: 1.5px solid var(--bki-border);
  border-radius: var(--bki-radius);
  box-shadow: var(--bki-shadow);
  overflow: hidden;
}
.bki-table-wrap { overflow-x: auto; }

.bki-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  min-width: 1320px;
}

/* TH */
.bki-th {
  padding: 12px 16px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .6px;
  color: var(--bki-text-muted);
  background: var(--bki-bg-subtle);
  border-bottom: 2px solid var(--bki-border);
  white-space: nowrap;
  position: sticky;
  top: 0;
  z-index: 10;
}
.bki-th-check { width: 44px; padding: 12px 0 12px 16px; }
.bki-th--right { text-align: right; }
.bki-th-inner {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.bki-sortable { cursor: pointer; transition: color var(--bki-transition); }
.bki-sortable:hover { color: var(--bki-accent); }
.bki-sort-arrow { font-size: 12px; }
.bki-sort-arrow--idle { opacity: .3; }

/* Checkbox */
.bki-checkbox-wrap {
  display: flex;
  align-items: center;
  cursor: pointer;
  margin: 0;
}
.bki-checkbox-wrap input { display: none; }
.bki-checkbox {
  width: 16px; height: 16px;
  border: 2px solid #d1d5db;
  border-radius: 4px;
  background: #fff;
  transition: all var(--bki-transition);
  position: relative;
  flex-shrink: 0;
}
.bki-checkbox-wrap input:checked + .bki-checkbox {
  background: var(--bki-accent);
  border-color: var(--bki-accent);
}
.bki-checkbox-wrap input:checked + .bki-checkbox::after {
  content: '';
  position: absolute;
  left: 3px; top: 0px;
  width: 6px; height: 9px;
  border: 2px solid #fff;
  border-top: none; border-left: none;
  transform: rotate(45deg);
}
.bki-checkbox-wrap:hover .bki-checkbox { border-color: var(--bki-accent); }

/* TR */
.bki-row {
  cursor: pointer;
  transition: background var(--bki-transition);
  border-bottom: 1px solid var(--bki-border);
}
.bki-row:last-child { border-bottom: none; }
.bki-row--alt { background: #fafbfc; }
.bki-row:hover { background: var(--bki-row-hover) !important; }
.bki-row--selected { background: var(--bki-accent-soft) !important; }

/* TD */
.bki-td {
  padding: 14px 16px;
  vertical-align: top;
  font-size: var(--bki-text-md);
  color: var(--bki-text-primary);
}
.bki-td-check { padding: 14px 0 14px 16px; width: 44px; vertical-align: middle; }
.bki-td--right { text-align: right; }
.bki-cell-strong {
  font-size: var(--bki-text-md);
  font-weight: 600;
  color: var(--bki-text-primary);
  line-height: 1.4;
}
.bki-cell-subtext {
  font-size: var(--bki-text-xs);
  color: var(--bki-text-muted);
  line-height: 1.45;
  margin-top: 2px;
}
.bki-cell-stack + .bki-cell-stack {
  margin-top: 8px;
}

/* Booking cell */
.bki-booking-num {
  font-size: 13px;
  font-weight: 700;
  color: var(--bki-accent);
  text-decoration: none;
  letter-spacing: .2px;
  transition: color var(--bki-transition);
  white-space: nowrap;
}
.bki-booking-num:hover { color: #4f46e5; text-decoration: underline; }
.bki-tag-row { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.bki-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 7px;
  border-radius: var(--bki-radius-pill);
  font-size: 10px;
  font-weight: 600;
  white-space: nowrap;
}
.bki-badge--wedding  { background: #fce7f3; color: #be185d; }
.bki-badge--discount { background: #f0fdf4; color: #15803d; }
.bki-created-at {
  display: flex;
  align-items: center;
  gap: 3px;
  font-size: 11px;
  color: var(--bki-text-muted);
  margin-top: 4px;
}

/* Customer cell */
.bki-customer { display: flex; align-items: flex-start; gap: 10px; }
.bki-customer__avatar {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--bki-accent), #a78bfa);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  user-select: none;
}
.bki-customer__name {
  font-size: 13px;
  font-weight: 600;
  color: var(--bki-text-primary);
  line-height: 1.3;
}
.bki-customer__email, .bki-customer__phone {
  font-size: 11px;
  color: var(--bki-text-muted);
  line-height: 1.5;
  display: flex;
  align-items: center;
  gap: 3px;
}

/* Vehicle chip */
.bki-vehicle-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: var(--bki-text-primary);
  background: var(--bki-bg-subtle);
  border: 1px solid var(--bki-border);
  border-radius: var(--bki-radius-sm);
  padding: 2px 8px;
  margin-bottom: 3px;
  white-space: nowrap;
}

/* Dates cell */
.bki-dates {
  display: flex;
  align-items: flex-start;
  gap: 6px;
}
.bki-date-block {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.bki-date-label {
  display: flex;
  align-items: center;
  gap: 3px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .4px;
  color: var(--bki-text-muted);
}
.bki-date-val {
  font-size: 12px;
  font-weight: 600;
  color: var(--bki-text-primary);
  white-space: nowrap;
}
.bki-date-time {
  font-size: 11px;
  color: var(--bki-text-muted);
}
.bki-dates__arrow {
  font-size: 12px;
  color: #d1d5db;
  padding-top: 14px;
  flex-shrink: 0;
}
.bki-duration {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  margin-top: 6px;
  font-size: 11px;
  color: var(--bki-text-muted);
  background: var(--bki-bg-subtle);
  border: 1px solid var(--bki-border);
  padding: 2px 7px;
  border-radius: var(--bki-radius-pill);
}

/* Payment cell */
.bki-payment { display: flex; flex-direction: column; gap: 4px; align-items: flex-end; }
.bki-payment__total {
  font-size: 14px;
  font-weight: 800;
  color: var(--bki-text-primary);
  letter-spacing: -.2px;
}
.bki-payment__bar {
  width: 80px;
  height: 4px;
  background: #e5e7eb;
  border-radius: 999px;
  overflow: hidden;
}
.bki-payment__bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #22c55e, #16a34a);
  border-radius: 999px;
  transition: width .4s ease;
}
.bki-payment__row {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.bki-payment__paid {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-size: 11px;
  color: #16a34a;
  font-weight: 500;
}
.bki-payment__due {
  font-size: 11px;
  font-weight: 700;
  color: #dc2626;
  background: #fef2f2;
  padding: 1px 7px;
  border-radius: var(--bki-radius-pill);
}
.bki-payment__settled {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-size: 11px;
  font-weight: 600;
  color: #16a34a;
}

/* Status badges */
.bki-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: var(--bki-radius-pill);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .3px;
  text-transform: uppercase;
  white-space: nowrap;
}
.bki-status-badge .bki-status-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
  opacity: .7;
  flex-shrink: 0;
}
.bki-status-badge--pending     { background:#fef3c7; color:#b45309; }
.bki-status-badge--reserved    { background:#ede9fe; color:#6d28d9; }
.bki-status-badge--deposit     { background:#e0f2fe; color:#0369a1; }
.bki-status-badge--paid        { background:#dcfce7; color:#15803d; }
.bki-status-badge--waiting     { background:#f1f5f9; color:#64748b; }
.bki-status-badge--checked_in  { background:#d1fae5; color:#065f46; }
.bki-status-badge--checked_out { background:#f3f4f6; color:#374151; }
.bki-status-badge--cancelled   { background:#fee2e2; color:#b91c1c; }
.bki-status-badge--void        { background:#fee2e2; color:#b91c1c; }

/* Source tag */
.bki-source-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 9px;
  border-radius: var(--bki-radius-sm);
  font-size: 11px;
  font-weight: 500;
  background: #f3f4f6;
  color: #6b7280;
  border: 1px solid #e5e7eb;
  white-space: nowrap;
}

/* Empty state */
.bki-empty {
  text-align: center;
  padding: 72px 24px;
  color: var(--bki-text-muted);
}
.bki-empty i { font-size: 40px; display: block; margin-bottom: 12px; opacity: .3; }
.bki-empty p { font-size: 14px; font-weight: 600; margin: 0; }
.bki-empty__cta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 12px;
  font-size: 13px;
  color: var(--bki-accent);
  text-decoration: none;
  padding: 6px 14px;
  border: 1.5px solid var(--bki-accent);
  border-radius: var(--bki-radius-sm);
  transition: all var(--bki-transition);
}
.bki-empty__cta:hover { background: var(--bki-accent); color: #fff; text-decoration: none; }

/* Bulk action bar */
.bki-bulk-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 20px;
  background: var(--bki-accent-soft);
  border-top: 1px solid var(--bki-border);
  flex-wrap: wrap;
}
.bki-bulk-bar__count {
  font-size: 13px;
  font-weight: 600;
  color: var(--bki-accent);
  flex: 1;
}
.bki-bulk-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 14px;
  border-radius: var(--bki-radius-sm);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  border: none;
  transition: all var(--bki-transition);
}
.bki-bulk-btn--danger { background: #fee2e2; color: #b91c1c; }
.bki-bulk-btn--danger:hover { background: #b91c1c; color: #fff; }

/* Pagination */
.bki-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 20px;
  border-top: 1.5px solid var(--bki-border);
  background: var(--bki-bg-subtle);
  gap: 16px;
  flex-wrap: wrap;
}
.bki-pagination__info { font-size: var(--bki-text-sm); color: var(--bki-text-muted); }
.bki-pagination__links .pagination { margin: 0; }

/* ── Responsive ─────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .bki-filter-bar { flex-direction: column; align-items: stretch; }
  .bki-filter-bar__search { min-width: unset; }
  .bki-filter-bar__dropdowns { flex-wrap: wrap; }
  .bki-filter-bar__clear { margin-left: 0; }

  /* Card-style rows on mobile */
  .bki-table { min-width: unset; }
  .bki-table thead { display: none; }
  .bki-table tbody { display: block; }
  .bki-row {
    display: block;
    border: 1.5px solid var(--bki-border);
    border-radius: var(--bki-radius);
    margin: 12px;
    padding: 0;
    box-shadow: var(--bki-shadow);
    background: #fff !important;
  }
  .bki-td {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 10px 14px;
    border-bottom: 1px solid var(--bki-border);
    font-size: 12px;
  }
  .bki-td:last-child { border-bottom: none; }
  .bki-td-check { display: none; }
  .bki-td::before {
    content: attr(data-label);
    font-weight: 700;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--bki-text-muted);
    flex-shrink: 0;
    margin-right: 14px;
    padding-top: 2px;
    min-width: 70px;
  }
  .bki-table-card { border-radius: 0; border-left: none; border-right: none; }
  .bki-toolbar { flex-direction: column; align-items: flex-start; }
  .bki-dates { flex-direction: column; gap: 8px; }
  .bki-dates__arrow { display: none; }
  .bki-payment { align-items: flex-start; }
  .bki-payment__bar { width: 100px; }
}

@media (max-width: 480px) {
  .bki-header { gap: 12px; }
  .bki-btn-new span { display: none; }
  .bki-btn-new { padding: 8px 10px; }
  .bki-quick-filters { gap: 4px; }
  .bki-qf-pill { padding: 4px 10px; }
  .bki-toolbar__right { width: 100%; justify-content: flex-end; }
}
</style>
@endsection

@section('page-script')
<script>
/* ── Filter / tool panel toggle ──────────────────────────────────── */
function toggleFilterPanel(id) {
  const panel  = document.getElementById(id);
  const wrap   = panel?.closest('.bki-filter-dropdown');
  const isOpen = panel?.classList.contains('bki-filter-panel--open');

  document.querySelectorAll('.bki-filter-panel--open').forEach(p => {
    p.classList.remove('bki-filter-panel--open');
    p.closest('.bki-filter-dropdown')?.classList.remove('bki-filter-dropdown--open');
  });

  if (!isOpen && panel) {
    panel.classList.add('bki-filter-panel--open');
    wrap?.classList.add('bki-filter-dropdown--open');
  }
}
document.addEventListener('click', e => {
  if (!e.target.closest('.bki-filter-dropdown')) {
    document.querySelectorAll('.bki-filter-panel--open').forEach(p => {
      p.classList.remove('bki-filter-panel--open');
      p.closest('.bki-filter-dropdown')?.classList.remove('bki-filter-dropdown--open');
    });
  }
});

/* ── Date range custom fields ────────────────────────────────────── */
function handleDateRangeChange(sel) {
  document.getElementById('custom-date-fields').style.display =
    sel.value === 'custom' ? '' : 'none';
}

/* ── Sort ────────────────────────────────────────────────────────── */
function submitSort(col, dir) {
  document.getElementById('sort-col-input').value = col;
  document.getElementById('sort-dir-input').value = dir;
  document.getElementById('sort-form').submit();
}

/* ── Column visibility ───────────────────────────────────────────── */
const COL_STORE_KEY = 'bki_hidden_cols';
function toggleColumn(col, visible) {
  const table = document.getElementById('bki-main-table');
  if (!table) return;
  table.querySelectorAll(`[data-col="${col}"]`).forEach(el => {
    el.style.display = visible ? '' : 'none';
  });
  // Persist
  const hidden = JSON.parse(localStorage.getItem(COL_STORE_KEY) || '[]');
  const idx = hidden.indexOf(col);
  if (!visible && idx === -1) hidden.push(col);
  if (visible && idx !== -1) hidden.splice(idx, 1);
  localStorage.setItem(COL_STORE_KEY, JSON.stringify(hidden));
}

// Restore column visibility on load
(function restoreColumns() {
  const hidden = JSON.parse(localStorage.getItem(COL_STORE_KEY) || '[]');
  hidden.forEach(col => {
    toggleColumn(col, false);
    const cb = document.querySelector(`[data-col="${col}"].bki-col-cb`);
    if (cb) cb.checked = false;
  });
})();

/* ── Checkbox: select all ────────────────────────────────────────── */
function toggleSelectAll(master) {
  document.querySelectorAll('.bki-row-cb').forEach(cb => {
    cb.checked = master.checked;
    cb.closest('.bki-row')?.classList.toggle('bki-row--selected', master.checked);
  });
  updateBulkBar();
}
function updateSelectAll() {
  const all = document.querySelectorAll('.bki-row-cb');
  const checked = document.querySelectorAll('.bki-row-cb:checked');
  const master = document.getElementById('bki-select-all');
  if (master) {
    master.indeterminate = checked.length > 0 && checked.length < all.length;
    master.checked = checked.length === all.length && all.length > 0;
  }
  document.querySelectorAll('.bki-row-cb').forEach(cb => {
    cb.closest('.bki-row')?.classList.toggle('bki-row--selected', cb.checked);
  });
  updateBulkBar();
}
function updateBulkBar() {
  const n = document.querySelectorAll('.bki-row-cb:checked').length;
  const bar = document.getElementById('bki-bulk-bar');
  const cnt = document.getElementById('bki-bulk-count');
  const lbl = document.getElementById('bki-selected-label');
  if (bar) bar.classList.toggle('d-none', n === 0);
  if (cnt) cnt.textContent = `${n} selected`;
  if (lbl) {
    lbl.textContent = n > 0 ? `${n} selected` : '';
    lbl.classList.toggle('d-none', n === 0);
  }
}

/* ── Clickable rows ──────────────────────────────────────────────── */
document.querySelectorAll('.bki-row[data-href]').forEach(row => {
  row.addEventListener('click', e => {
    if (e.target.closest('a, button, input, label')) return;
    window.location = row.dataset.href;
  });
});

/* ── Search with debounce ────────────────────────────────────────── */
let searchTimer;
const searchInput = document.getElementById('bki-search');
if (searchInput) {
  searchInput.addEventListener('input', () => {
    clearTimeout(searchTimer);
    searchTimer = setTimeout(() => document.getElementById('bki-filter-form').submit(), 500);
  });
}
function clearSearch() {
  const inp = document.getElementById('bki-search');
  if (inp) { inp.value = ''; inp.form.submit(); }
}

/* ── Sort label update ───────────────────────────────────────────── */
(function updateSortLabel() {
  const map = {
    created_at: 'Created', start_datetime: 'Start Date', end_datetime: 'End Date',
    total_amount: 'Amount', customer_name: 'Customer', booking_number: 'Booking #',
  };
  const col = document.getElementById('sort-col-input')?.value;
  const dir = document.getElementById('sort-dir-input')?.value;
  const lbl = document.getElementById('sort-label');
  if (lbl && col && map[col]) {
    lbl.textContent = map[col] + (dir === 'asc' ? ' ↑' : ' ↓');
  }
})();
</script>
@endsection