<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <title>New Booking — {{ config('app.name') }}</title>

    <link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap" rel="stylesheet">

    <script>
        (function () {
            var theme = localStorage.getItem('dispatch-theme') || 'light';
            document.documentElement.setAttribute('data-bs-theme', theme);
        })();

        window.flashMessages = {
            success: @json(session('success')),
            error: @json(session('error')),
        };
    </script>

    @vite(['resources/css/admin.scss', 'resources/js/admin.js', 'resources/js/booking-console.js'])

    <style>
        :root {
            /* --dc-ink is the fixed brand-black used for chrome that stays
               dark regardless of theme (topbar, avatars, offcanvas header) —
               mirrors the sidebar staying yellow in both themes. --dc-text is
               the separate, theme-flipping color for body text on the
               surfaces below (cards/panels/table). */
            --dc-ink: #171717;
            --dc-text: #171717;
            --dc-border: #E7E8EC;
            --dc-muted: #6b7280;
            --dc-surface: #ffffff;
            --dc-bg: #F3F4F7;
            --dc-row-hover: #FEFCE8;
            --dc-panel-alt: #EEF0F2;
            --dc-radius-lg: 1rem;
            --dc-radius-md: .75rem;
            --dc-radius-sm: .5rem;
            --dc-shadow: 0 1px 2px rgba(16,24,40,.04), 0 4px 16px rgba(16,24,40,.06);
        }

        [data-bs-theme="dark"] {
            --dc-text: #F5F5F5;
            --dc-border: rgba(255,255,255,.1);
            --dc-muted: #9CA3AF;
            --dc-surface: #181B22;
            --dc-bg: #101217;
            --dc-row-hover: rgba(250,204,21,.08);
            --dc-panel-alt: #1D2129;
        }

        html, body { min-height: 100vh; }
        body { display: flex; flex-direction: column; background: var(--dc-bg); }
        .dispatch-main { flex: 0 0 auto; padding: 1.5rem; max-width: 100%; }
        .dispatch-main.pt-0 { padding-top: 0; }

        /* ===== Cards (local override — softer, more consistent than the default) ===== */
        .dispatch-main .card, .dispatch-footer, #dialerPanel {
            border: 1px solid var(--dc-border); border-radius: var(--dc-radius-lg); box-shadow: var(--dc-shadow);
        }

        /* ===== Header ===== */
        .dispatch-topbar {
            background: var(--dc-ink);
            padding: 0 1.5rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem;
            height: 64px; position: sticky; top: 0; z-index: 1030;
            border-bottom: 3px solid var(--brand-primary, #FACC15);
        }
        .dispatch-topbar .brand { font-weight: 800; font-size: 1.1rem; color: #fff; display: flex; align-items: center; gap: .65rem; letter-spacing: -.01em; }
        .dispatch-topbar .brand .fw-normal { color: rgba(255,255,255,.55); font-weight: 500; }
        .dispatch-topbar .brand-badge {
            width: 36px; height: 36px; border-radius: 10px; background: var(--brand-primary, #FACC15); color: var(--dc-ink);
            display: flex; align-items: center; justify-content: center; font-size: 1.1rem;
        }
        .dispatch-topbar .nav-links { display: flex; align-items: center; gap: .35rem; }
        .dispatch-topbar .nav-links a, .dispatch-topbar .nav-links button.nav-link-btn {
            color: rgba(255,255,255,.75); font-weight: 600; font-size: .85rem; text-decoration: none;
            background: none; border: none; padding: .5rem .75rem; border-radius: 8px; display: flex; align-items: center; gap: .4rem;
            transition: background-color .15s, color .15s;
        }
        .dispatch-topbar .nav-links a:hover, .dispatch-topbar .nav-links button.nav-link-btn:hover { background: rgba(255,255,255,.1); color: #fff; }
        .dispatch-topbar .divider { width: 1px; height: 26px; background: rgba(255,255,255,.15); margin: 0 .35rem; }
        .dispatch-topbar .user-chip {
            display: flex; align-items: center; gap: .55rem; font-size: .85rem; font-weight: 600; color: #fff;
            background: rgba(255,255,255,.08); padding: .3rem .7rem .3rem .3rem; border-radius: 999px;
        }
        .dispatch-topbar .user-chip .avatar {
            width: 26px; height: 26px; border-radius: 50%; background: var(--brand-primary, #FACC15); color: var(--dc-ink);
            display: flex; align-items: center; justify-content: center; font-size: .75rem; font-weight: 700;
        }
        #bookATripBtn.btn { background: var(--brand-primary, #FACC15); border-color: var(--brand-primary, #FACC15); color: var(--dc-ink); font-weight: 700; }
        #bookATripBtn.btn:hover { background: var(--brand-primary-dark, #EAB308); border-color: var(--brand-primary-dark, #EAB308); }

        /* ===== Footer ===== */
        .dispatch-footer {
            margin-top: auto; padding: 1rem 1.5rem; background: var(--dc-surface); display: flex; align-items: center;
            justify-content: space-between; flex-wrap: wrap; gap: .5rem; font-size: .8rem; color: var(--dc-muted);
        }
        .dispatch-footer a { color: var(--dc-muted); text-decoration: none; }
        .dispatch-footer a:hover { color: var(--dc-text); text-decoration: underline; }

        /* ===== Metric strip ===== */
        .metric-card {
            display: flex; align-items: center; gap: .9rem; padding: 1.1rem 1.25rem; background: var(--dc-surface);
            border: 1px solid var(--dc-border); border-radius: var(--dc-radius-lg); box-shadow: var(--dc-shadow); height: 100%;
        }
        .metric-card .metric-icon {
            width: 46px; height: 46px; border-radius: 12px; display: flex; align-items: center; justify-content: center;
            font-size: 1.3rem; flex-shrink: 0;
        }
        .metric-card .metric-value { font-size: 1.6rem; font-weight: 800; line-height: 1.1; color: var(--dc-text); }
        .metric-card .metric-label { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--dc-muted); }

        /* ===== Live map card ===== */
        #dispatchMap { height: 560px; width: 100%; border-radius: var(--dc-radius-md); }
        .map-legend-chip {
            display: flex; align-items: center; gap: .4rem; font-size: .78rem; font-weight: 600; color: var(--dc-muted);
            background: var(--dc-bg); padding: .3rem .65rem; border-radius: 999px;
        }
        .map-legend-chip .dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }

        /* Floating today's-job-count overlay, top-left corner of the map —
           Google Maps takes over every child of #dispatchMap itself, so this
           lives in the wrapping .map-canvas-wrap instead, positioned on top. */
        .map-canvas-wrap { position: relative; }
        .map-stats-overlay {
            position: absolute; top: 12px; left: 12px; z-index: 5;
            display: flex; gap: 6px; background: var(--dc-surface); border: 1px solid var(--dc-border);
            border-radius: var(--dc-radius-md); padding: 8px; box-shadow: var(--dc-shadow);
        }
        .map-stat-chip { text-align: center; min-width: 46px; padding: 2px 8px; border-radius: 8px; }
        .map-stat-chip .map-stat-value { display: block; font-weight: 800; font-size: 1.15rem; line-height: 1.1; }
        .map-stat-chip .map-stat-label {
            display: block; font-size: .58rem; font-weight: 700; text-transform: uppercase;
            letter-spacing: .03em; color: var(--dc-muted); margin-top: 2px;
        }
        .map-stat-chip.is-total .map-stat-value { color: var(--dc-text); }
        .map-stat-chip.is-new .map-stat-value { color: #2563EB; }
        .map-stat-chip.is-future .map-stat-value { color: #D97706; }
        .map-stat-chip.is-completed .map-stat-value { color: #16A34A; }

        /* ===== Buttons ===== */
        .btn-brand { background: var(--brand-primary, #FACC15); border-color: var(--brand-primary, #FACC15); color: var(--dc-ink); font-weight: 700; }
        .btn-brand:hover { background: var(--brand-primary-dark, #EAB308); border-color: var(--brand-primary-dark, #EAB308); color: var(--dc-ink); }

        /* ===== Jobs toolbar + table ===== */
        .jobs-toolbar-label { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--dc-muted); margin-bottom: .35rem; }
        .status-pill {
            background: var(--dc-surface); color: var(--dc-text); border: 1px solid var(--dc-border); font-weight: 600; font-size: .78rem;
            padding: .4rem .85rem; border-radius: 999px; transition: background-color .15s, color .15s, border-color .15s;
        }
        .status-pill:hover { border-color: var(--dc-text); }
        .status-pill.active { background: var(--dc-ink); color: var(--brand-primary, #FACC15); border-color: var(--dc-ink); }

        #jobsTableWrap { max-height: 560px; overflow-y: auto; }
        #jobsTableWrap table thead th {
            position: sticky; top: 0; z-index: 1; background: var(--dc-surface); font-size: .7rem; text-transform: uppercase;
            letter-spacing: .05em; color: var(--dc-muted); font-weight: 700; border-bottom: 2px solid var(--dc-border) !important;
            padding-top: .85rem; padding-bottom: .85rem;
        }
        #jobsTableWrap table td { font-size: .85rem; vertical-align: middle; }
        #jobsTableBody tr { transition: background-color .1s; }
        #jobsTableBody tr:hover { background: var(--dc-row-hover); }
        .customer-cell { display: flex; align-items: center; gap: .6rem; }
        .customer-avatar {
            width: 30px; height: 30px; border-radius: 50%; background: var(--dc-ink); color: var(--brand-primary, #FACC15);
            display: flex; align-items: center; justify-content: center; font-size: .7rem; font-weight: 700; flex-shrink: 0;
        }
        .job-row.status-cancelled, .job-row.status-no-show { opacity: .55; }

        /* ===== Offcanvas ===== */
        #offcanvasBooking { width: 100vw; }
        #offcanvasBooking .offcanvas-header { background: var(--dc-ink); color: #fff; padding: 1rem 1.5rem; }
        #offcanvasBooking .offcanvas-header .btn-close { filter: invert(1); }
        #offcanvasBooking .offcanvas-body { padding: 0; }
        .booking-form-scroll { overflow-y: auto; padding: 1.25rem 1.5rem; min-height: 0; background: var(--dc-bg); }
        .booking-form-scroll .row.g-3 { height: 100%; }
        .booking-form-scroll .row.g-2 { row-gap: .5rem !important; }
        .booking-form-actions { border-top: 1px solid var(--dc-border); padding: .75rem 1.5rem; background: var(--dc-surface); }

        .form-panel {
            background: var(--dc-surface); border: 1px solid var(--dc-border); border-radius: var(--dc-radius-md);
            padding: 1.1rem; height: 100%;
        }

        .col-route-preview { display: flex; height: 100%; }
        .col-route-preview .form-panel { display: flex; flex-direction: column; flex: 1; padding: .6rem; }
        .col-route-preview #routeMap { flex: 1; border-radius: var(--dc-radius-sm); }

        .trip-detail-panel { background: var(--dc-panel-alt); border-radius: var(--dc-radius-md); padding: 1rem; height: 100%; }
        .icon-field-label { display: block; font-size: 1.05rem; color: var(--dc-text); margin-bottom: .25rem; }
        .trip-detail-panel .form-control, .trip-detail-panel .form-select { font-size: .8rem; }

        /* Google Places' suggestion dropdown is appended to <body> with a low
           default z-index — without this it renders behind the offcanvas
           (which sits at a much higher z-index), making it invisible. */
        .pac-container { z-index: 9999; }

        /* ===== Vehicle cards ===== */
        .vehicle-card {
            cursor: pointer; border: 1px solid var(--dc-border); border-radius: var(--dc-radius-md);
            padding: .85rem; text-align: center; transition: box-shadow .15s, border-color .15s, transform .1s; height: 100%;
            background: var(--dc-surface);
        }
        .vehicle-card:hover { box-shadow: 0 .35rem .75rem rgba(0,0,0,.1); transform: translateY(-1px); }
        .vehicle-card.is-selected { border-color: var(--brand-primary, #FACC15); border-width: 2px; background: var(--brand-primary-light, #FEFCE8); }
        .vehicle-card .vehicle-image { height: 60px; display: flex; align-items: center; justify-content: center; margin-bottom: .25rem; }
        .vehicle-card .vehicle-image img { max-width: 100%; max-height: 100%; object-fit: contain; }
        .vehicle-card .vehicle-icon { font-size: 1.75rem; color: var(--dc-muted); }
        .vehicle-card .vehicle-fare { font-weight: 700; font-size: 1.05rem; }
        .vehicle-card .fare-input { text-align: center; }
        .quantity-controls { display: flex; align-items: center; justify-content: center; gap: 4px; }
        .quantity-btn {
            background: var(--dc-ink); color: #fff; border: none; border-radius: 6px;
            width: 26px; height: 24px; font-size: 14px; line-height: 1; cursor: pointer;
        }
        .quantity-btn:hover { background: var(--brand-primary-dark, #EAB308); color: var(--dc-ink); }
        .quantity-input { border: 1px solid var(--dc-border); border-radius: 5px; width: 40px; text-align: center; font-size: 14px; background: var(--dc-surface); color: var(--dc-text); }
        .stop-row { display: flex; gap: .5rem; align-items: center; margin-bottom: .5rem; }

        /* ===== Dialer ===== */
        #dialerToggle {
            position: fixed; bottom: 24px; right: 24px; width: 56px; height: 56px; border-radius: 50%;
            display: flex; align-items: center; justify-content: center; font-size: 1.25rem; z-index: 1040;
            box-shadow: 0 .25rem .75rem rgba(0,0,0,.25);
        }
        #dialerPanel { position: fixed; bottom: 92px; right: 24px; width: 300px; display: none; z-index: 1040; }
        #dialerPanel.is-open { display: block; }

        .gm-style-iw-a .job-popup { font-size: 13px; }
        .job-popup .fw-semibold { font-size: 13px; }

        @media (max-width: 768px) {
            .dispatch-topbar .nav-links a span, .dispatch-topbar .user-chip span:last-child { display: none; }
        }
    </style>
</head>
<body>
    <header class="dispatch-topbar">
        <div class="brand">
            <span class="brand-badge"><i class="bi bi-taxi-front-fill"></i></span>
            <span>{{ config('app.name') }} <span class="fw-normal">Dispatch</span></span>
        </div>
        <nav class="nav-links">
            <button type="button" class="btn btn-sm" id="bookATripBtn" data-bs-toggle="offcanvas" data-bs-target="#offcanvasBooking" aria-controls="offcanvasBooking">
                <i class="bi bi-plus-lg"></i> Book A Trip
            </button>
            <a href="{{ route('admin.bookings.index') }}"><i class="bi bi-list-ul"></i> <span>All Bookings</span></a>
            <a href="{{ route('admin.dashboard') }}"><i class="bi bi-grid-1x2-fill"></i> <span>Dashboard</span></a>
            <button type="button" class="nav-link-btn" data-theme-toggle title="Toggle dark mode"><i class="bi bi-moon-stars"></i></button>

            <span class="divider"></span>

            <div class="user-chip">
                <span class="avatar">{{ substr(auth()->user()->name ?? 'A', 0, 1) }}</span>
                <span>{{ auth()->user()->name }}</span>
            </div>
            <form method="POST" action="{{ route('logout') }}" class="d-inline">
                @csrf
                <button type="submit" class="nav-link-btn" title="Sign out"><i class="bi bi-box-arrow-right"></i></button>
            </form>
        </nav>
    </header>

    <main class="dispatch-main">
        <div class="card mb-3">
            <div class="card-body">
                <div class="d-flex justify-content-between align-items-center mb-3 flex-wrap gap-2">
                    <h6 class="fw-bold mb-0"><i class="bi bi-geo-alt-fill me-1 text-muted"></i> Live Map</h6>
                    <div class="d-flex align-items-center gap-2">
                        <span class="map-legend-chip"><span class="dot" style="background:#16A34A;"></span>Available</span>
                        <span class="map-legend-chip"><span class="dot" style="background:#DC2626;"></span>On a job</span>
                    </div>
                </div>
                <div class="map-canvas-wrap">
                    <div class="map-stats-overlay">
                        <div class="map-stat-chip is-total">
                            <span class="map-stat-value" id="statTotal">0</span>
                            <span class="map-stat-label">Total</span>
                        </div>
                        <div class="map-stat-chip is-new">
                            <span class="map-stat-value" id="statNew">0</span>
                            <span class="map-stat-label">Unassigned</span>
                        </div>
                        <div class="map-stat-chip is-future">
                            <span class="map-stat-value" id="statFuture">0</span>
                            <span class="map-stat-label">Pending</span>
                        </div>
                        <div class="map-stat-chip is-completed">
                            <span class="map-stat-value" id="statCompleted">0</span>
                            <span class="map-stat-label">Done</span>
                        </div>
                    </div>
                    <div id="dispatchMap"></div>
                </div>
            </div>
        </div>
    </main>

    <div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvasBooking" data-bs-scroll="true" data-bs-backdrop="false" aria-labelledby="offcanvasBookingLabel">
        <div class="offcanvas-header">
            <h5 class="offcanvas-title" id="offcanvasBookingLabel">New Booking</h5>
            <button type="button" class="btn-close" data-bs-dismiss="offcanvas"></button>
        </div>
        <div class="offcanvas-body d-flex flex-column">
            <form method="POST" action="{{ route('admin.bookings.store') }}" id="bookingForm" data-store-url="{{ route('admin.bookings.store') }}" data-create-title="New Booking" data-edit-title="Edit Booking" class="d-flex flex-column flex-grow-1 overflow-hidden">
                @csrf
                <input type="hidden" name="_method" id="methodOverride" value="">

                <input type="hidden" name="pickup_lat" id="pickup_lat">
                <input type="hidden" name="pickup_lng" id="pickup_lng">
                <input type="hidden" name="dropoff_lat" id="dropoff_lat">
                <input type="hidden" name="dropoff_lng" id="dropoff_lng">

                <div class="booking-form-scroll flex-grow-1">
                <div class="row g-3">
                    <div class="col-lg-5">
                        <div class="form-panel">
                        <div class="row g-2">
                            <div class="col-md-6">
                                <label class="form-label fw-semibold">Customer <sup class="text-danger">*</sup></label>
                                <select class="form-select @error('customer_id') is-invalid @enderror" id="customerSelect" name="customer_id">
                                    <option value="">Select customer…</option>
                                    <option value="__new__" @selected(old('customer_id') === '__new__')>+ New customer</option>
                                    @foreach ($customers as $customer)
                                        <option value="{{ $customer->id }}" @selected(old('customer_id') == $customer->id)>{{ $customer->tag ? '['.\App\Models\Customer::TAGS[$customer->tag].'] ' : '' }}{{ $customer->name }} — {{ $customer->phone }}</option>
                                    @endforeach
                                </select>
                                @error('customer_id')<div class="invalid-feedback">{{ $message }}</div>@enderror
                            </div>

                            <div class="col-md-6">
                                <label class="form-label fw-semibold">Date / Time <sup class="text-danger">*</sup></label>
                                <input type="datetime-local" class="form-control @error('pickup_datetime') is-invalid @enderror" name="pickup_datetime" value="{{ old('pickup_datetime', $booking->pickup_datetime) }}" required>
                                @error('pickup_datetime')<div class="invalid-feedback">{{ $message }}</div>@enderror
                            </div>

                            <div class="col-12" id="quickCustomerFields" style="display:none;">
                                <div class="row g-2">
                                    <div class="col-md-4">
                                        <input type="text" class="form-control @error('quick_customer_name') is-invalid @enderror" name="quick_customer_name" value="{{ old('quick_customer_name') }}" placeholder="Name">
                                    </div>
                                    <div class="col-md-4">
                                        <input type="text" class="form-control @error('quick_customer_phone') is-invalid @enderror" name="quick_customer_phone" value="{{ old('quick_customer_phone') }}" placeholder="Phone">
                                    </div>
                                    <div class="col-md-4">
                                        <input type="email" class="form-control @error('quick_customer_email') is-invalid @enderror" name="quick_customer_email" value="{{ old('quick_customer_email') }}" placeholder="Email">
                                    </div>
                                </div>
                            </div>

                            <div class="col-12 mt-2">
                                <label class="form-label fw-semibold">Pickup <sup class="text-danger">*</sup></label>
                                <div class="input-group">
                                    <input type="text" class="form-control @error('pickup_address') is-invalid @enderror" id="pickupInput" name="pickup_address" value="{{ old('pickup_address') }}" placeholder="Enter pickup location" required autocomplete="off">
                                    <button type="button" class="btn btn-brand" id="addStopBtn"><i class="bi bi-plus-lg"></i> Via</button>
                                </div>
                                @error('pickup_address')<div class="invalid-feedback d-block">{{ $message }}</div>@enderror
                            </div>

                            <div class="col-12" id="stopsContainer"></div>

                            <div class="col-12">
                                <label class="form-label fw-semibold">Destination <sup class="text-danger">*</sup></label>
                                <div class="input-group">
                                    <input type="text" class="form-control @error('dropoff_address') is-invalid @enderror" id="dropoffInput" name="dropoff_address" value="{{ old('dropoff_address') }}" placeholder="Enter destination location" required autocomplete="off">
                                    <button type="button" class="btn btn-dark" id="flipLocations" title="Swap pickup/dropoff"><i class="bi bi-arrow-down-up"></i> Flip</button>
                                </div>
                                @error('dropoff_address')<div class="invalid-feedback d-block">{{ $message }}</div>@enderror
                            </div>
                        </div>
                        </div>
                    </div>

                    <div class="col-lg-3">
                        <div class="trip-detail-panel">
                            <div class="row g-2">
                                <div class="col-6">
                                    <label class="icon-field-label" title="Passengers"><i class="bi bi-person-fill"></i></label>
                                    <input type="number" min="1" max="20" class="form-control form-control-sm @error('passengers') is-invalid @enderror" name="passengers" value="{{ old('passengers', $booking->passengers) }}" placeholder="Passengers" required>
                                </div>
                                <div class="col-6">
                                    <label class="icon-field-label" title="Flight Number"><i class="bi bi-airplane-fill"></i></label>
                                    <input type="text" class="form-control form-control-sm" name="flight_number" value="{{ old('flight_number') }}" placeholder="Flight No.">
                                </div>
                                <div class="col-6">
                                    <label class="icon-field-label" title="Luggage"><i class="bi bi-bag-fill"></i></label>
                                    <input type="number" min="0" max="20" class="form-control form-control-sm" name="luggage" value="{{ old('luggage', $booking->luggage) }}" placeholder="Luggage">
                                </div>
                                <div class="col-6">
                                    <label class="icon-field-label" title="Payment Method"><i class="bi bi-credit-card-fill"></i></label>
                                    <select class="form-select form-select-sm" id="paymentMethodSelect" name="payment_method_id">
                                        <option value="">Payment</option>
                                        @foreach ($paymentMethods as $method)
                                            <option value="{{ $method->id }}" data-name="{{ $method->name }}" @selected(old('payment_method_id') == $method->id)>{{ $method->name }}</option>
                                        @endforeach
                                    </select>
                                </div>

                                <div class="col-12">
                                    <div class="form-check">
                                        <input type="checkbox" class="form-check-input" id="sendSms" name="send_sms" value="1" @checked(old('send_sms'))>
                                        <label class="form-check-label small" for="sendSms"><i class="bi bi-send-fill me-1"></i>Send SMS</label>
                                    </div>
                                </div>

                                <div class="col-12">
                                    <label class="form-label small fw-semibold mb-1">Assign Driver</label>
                                    <select class="form-select form-select-sm @error('driver_id') is-invalid @enderror" id="driverSelect" name="driver_id">
                                        <option value="">— Unassigned —</option>
                                        @foreach ($drivers as $driver)
                                            <option value="{{ $driver->id }}" @selected(old('driver_id') == $driver->id)>{{ $driver->full_name }}</option>
                                        @endforeach
                                    </select>
                                    <div class="form-text small" id="driverSelectHint" style="display:none;">Single vehicle only.</div>
                                    @error('driver_id')<div class="invalid-feedback d-block">{{ $message }}</div>@enderror
                                </div>

                                <div class="col-12" id="accountFieldWrap" style="display:none;">
                                    <label class="form-label small fw-semibold mb-1">Account</label>
                                    <select class="form-select form-select-sm" id="accountSelect" name="account_id">
                                        <option value="">Select account…</option>
                                        <option value="__new__" @selected(old('account_id') === '__new__')>+ New account</option>
                                        @foreach ($accounts as $account)
                                            <option value="{{ $account->id }}" @selected(old('account_id') == $account->id)>{{ $account->name }}</option>
                                        @endforeach
                                    </select>
                                </div>

                                <div class="col-12" id="quickAccountFields" style="display:none;">
                                    <input type="text" class="form-control form-control-sm mb-1" name="new_account_name" value="{{ old('new_account_name') }}" placeholder="Account name">
                                    <input type="text" class="form-control form-control-sm" name="new_account_number" value="{{ old('new_account_number') }}" placeholder="Account number">
                                </div>

                                <div class="col-12">
                                    <label class="form-label small fw-semibold mb-1">Customer Reference</label>
                                    <input type="text" class="form-control form-control-sm" name="customer_reference" value="{{ old('customer_reference') }}" placeholder="PO / cost centre">
                                </div>

                                <div class="col-12">
                                    <label class="icon-field-label" title="Note"><i class="bi bi-sticky-fill"></i></label>
                                    <textarea class="form-control form-control-sm" name="notes" rows="1" placeholder="Extra note">{{ old('notes') }}</textarea>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="col-lg-4 col-route-preview">
                        <div class="form-panel">
                            <div id="routeMap"></div>
                        </div>
                    </div>

                    <div class="col-12">
                        <div class="d-flex justify-content-between align-items-center mt-2">
                            <label class="form-label fw-semibold mb-0">Vehicles <sup class="text-danger">*</sup></label>
                            <div class="small text-muted" id="vehicleSelectionSummary"></div>
                        </div>
                        <div id="vehicleCards" class="row g-2 mt-1">
                            <div class="col-12 text-muted small py-3 text-center" id="vehicleCardsHint">
                                Enter a pickup and destination to see available vehicles and live fares.
                            </div>
                        </div>
                        @error('vehicles')<div class="text-danger small mt-1">{{ $message }}</div>@enderror
                    </div>
                </div>
                </div>

                <div class="booking-form-actions d-flex justify-content-end gap-2">
                    <button type="reset" class="btn btn-outline-secondary">Clear</button>
                    <button type="submit" class="btn btn-brand">Confirm Booking</button>
                </div>
            </form>
        </div>
    </div>

    <div class="dispatch-main pt-0">
        <div class="card mb-3">
            <div class="card-body">
                <div class="row g-3 align-items-end">
                    <div class="col-auto">
                        <div class="jobs-toolbar-label">Start Date</div>
                        <input type="date" class="form-control form-control-sm" id="jobsStartDate">
                    </div>
                    <div class="col-auto">
                        <div class="jobs-toolbar-label">End Date</div>
                        <input type="date" class="form-control form-control-sm" id="jobsEndDate">
                    </div>
                    <div class="col-auto">
                        <button type="button" class="btn btn-dark btn-sm" id="jobsFilterBtn"><i class="bi bi-funnel"></i> Filter</button>
                    </div>
                    <div class="col-auto">
                        <button type="button" class="btn btn-outline-secondary btn-sm" id="refreshJobsBtn"><i class="bi bi-arrow-clockwise"></i> Refresh</button>
                    </div>
                </div>

                <div class="d-flex flex-wrap gap-2 mt-3" id="jobsStatusPills">
                    <button type="button" class="btn btn-sm status-pill active" data-status-id="">All</button>
                    @foreach ($statuses as $status)
                        <button type="button" class="btn btn-sm status-pill" data-status-id="{{ $status->id }}">{{ $status->name }}</button>
                    @endforeach
                    <button type="button" class="btn btn-sm status-pill" data-future="1" title="Pre-booked trips that haven't happened yet, any day">
                        <i class="bi bi-clock-history me-1"></i>Future Jobs <span class="badge is-blue ms-1" id="futureJobsCount">0</span>
                    </button>
                </div>
            </div>
        </div>

        <div class="card">
            <div class="card-body">
                <div class="d-flex justify-content-between align-items-center mb-3 flex-wrap gap-2">
                    <h6 class="fw-bold mb-0"><i class="bi bi-clipboard-check-fill me-1 text-muted"></i> Jobs</h6>
                    <div class="d-flex align-items-center gap-3">
                        <div class="d-flex align-items-center gap-2 small">
                            <span>Show</span>
                            <select class="form-select form-select-sm" id="jobsPageSize" style="width:auto;">
                                <option value="10">10</option>
                                <option value="25">25</option>
                                <option value="50">50</option>
                                <option value="0">All</option>
                            </select>
                            <span>entries</span>
                        </div>
                        <div class="d-flex align-items-center gap-2 small">
                            <span>Search:</span>
                            <input type="text" class="form-control form-control-sm" id="jobsSearch" placeholder="Name, phone, address…">
                        </div>
                    </div>
                </div>

                <div class="d-none align-items-center gap-2 flex-wrap p-2 mb-3 rounded" id="bulkActionsBar" style="background: var(--dc-bg);">
                    <span class="fw-semibold small" id="bulkSelectedCount">0 selected</span>
                    <select class="form-select form-select-sm" id="bulkDriverSelect" style="width:auto;">
                        <option value="">Assign to driver…</option>
                        @foreach ($drivers as $driver)
                            <option value="{{ $driver->id }}">{{ $driver->full_name }}</option>
                        @endforeach
                    </select>
                    <button type="button" class="btn btn-sm btn-dark" id="bulkAssignBtn"><i class="bi bi-person-check"></i> Assign</button>
                    <button type="button" class="btn btn-sm btn-outline-danger" id="bulkCancelBtn"><i class="bi bi-x-circle"></i> Cancel Selected</button>
                    <button type="button" class="btn btn-sm btn-outline-secondary ms-auto" id="bulkClearBtn">Clear selection</button>
                </div>

                <div class="table-responsive" id="jobsTableWrap">
                    <table class="table table-hover align-middle mb-0">
                        <thead>
                            <tr>
                                <th style="width:34px;"><input type="checkbox" class="form-check-input" id="jobsSelectAll"></th>
                                <th>Name</th>
                                <th>Phone</th>
                                <th>Driver</th>
                                <th>Date/Time</th>
                                <th>Pickup</th>
                                <th>Destination</th>
                                <th>Payment</th>
                                <th class="text-center">Job Report</th>
                                <th class="text-center">Job Details</th>
                                <th>Status</th>
                            </tr>
                        </thead>
                        <tbody id="jobsTableBody">
                            <tr><td colspan="11" class="text-center text-muted py-4">Loading…</td></tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    <footer class="dispatch-footer">
        <span>&copy; {{ now()->year }} {{ config('app.name') }} — Dispatch Console</span>
        <span>
            Signed in as <strong>{{ auth()->user()->name }}</strong>
            &middot; <a href="{{ route('admin.dashboard') }}">Dashboard</a>
            &middot; <a href="{{ route('admin.bookings.index') }}">All Bookings</a>
        </span>
    </footer>

    {{-- Audit / status history modal --}}
    <div class="modal fade" id="bookingHistoryModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Status History</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body" id="bookingHistoryBody"></div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>

    {{-- Reassign driver modal --}}
    <div class="modal fade" id="reassignModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Reassign Driver</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <select class="form-select" id="reassignDriverSelect">
                        <option value="">— Unassigned —</option>
                        @foreach ($drivers as $driver)
                            <option value="{{ $driver->id }}">{{ $driver->full_name }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button type="button" class="btn btn-dark" id="reassignConfirmBtn">Assign</button>
                </div>
            </div>
        </div>
    </div>

    {{-- Dialer widget — ORG-03: hidden entirely when the company's "dialer" feature flag is off --}}
    @if (auth()->user()->isSuperAdmin() || (auth()->user()->company?->hasFeature('dialer') ?? true))
    <button type="button" class="btn btn-success" id="dialerToggle"><i class="bi bi-telephone-fill"></i></button>
    <div class="card" id="dialerPanel">
        <div class="card-body">
            <div class="d-flex justify-content-between align-items-center mb-2">
                <span class="fw-semibold small">Dialer</span>
                <span class="badge is-blue" id="dialerStatus">Idle</span>
            </div>
            <input type="text" class="form-control form-control-sm mb-2" id="dialerNumber" placeholder="Enter number">
            <div class="d-flex gap-2">
                <button type="button" class="btn btn-success btn-sm flex-fill" id="dialerCallBtn"><i class="bi bi-telephone-outbound"></i> Call</button>
                <button type="button" class="btn btn-outline-secondary btn-sm" id="dialerMuteBtn"><i class="bi bi-mic-mute"></i></button>
                <button type="button" class="btn btn-danger btn-sm" id="dialerHangupBtn" disabled><i class="bi bi-telephone-x"></i></button>
            </div>
        </div>
    </div>
    @endif

    <script>
        window.BookingConsoleConfig = {
            csrfToken: document.querySelector('meta[name="csrf-token"]').content,
            mapApiKey: @json(config('services.google_maps.key')),
            pusherKey: @json(config('broadcasting.connections.pusher.key')),
            pusherCluster: @json(config('broadcasting.connections.pusher.options.cluster')),
            companyLat: {{ auth()->user()->company?->latitude ?? 51.5074 }},
            companyLng: {{ auth()->user()->company?->longitude ?? -0.1278 }},
            distanceUnit: @json(auth()->user()->company?->distance_unit ?? 'mi'),
            statuses: @json($statuses->map(fn ($s) => ['id' => $s->id, 'name' => $s->name])),
            driverVehicleTypes: @json($driverVehicleTypes),
            urls: {
                quoteAll: @json(route('admin.bookings.quote-all')),
                checkDriver: @json(route('admin.bookings.check-driver')),
                driverLocations: @json(route('admin.bookings.driver-locations')),
                live: @json(route('admin.bookings.live')),
                callToken: @json(route('admin.calls.token')),
                bookingsBase: @json(url('admin/bookings')),
                bookingsBulkAction: @json(route('admin.bookings.bulk-action')),
            },
        };
    </script>
</body>
</html>
