<?php
/**
 * NEW BOOKING - COMPLETE WITH F2 MODAL INTEGRATION
 * FIXED: Shows ONLY real data for the specific phone number
 */

// Force UK/London timezone
date_default_timezone_set('Europe/London');

ini_set('display_errors', 0);
error_reporting(E_ALL);

session_start();
require_once '../includes/db_config.php';
require_once '../includes/auth.php';
requireLogin();

$companyId = getCurrentCompanyId();
$userName = getCurrentUserName();
$userType = getCurrentUserType();
$userId = getCurrentUserId();
$editId = isset($_GET['edit']) ? intval($_GET['edit']) : 0;
$copyId = isset($_GET['copy']) ? intval($_GET['copy']) : 0;
$editBooking = null;
$savedBookingRef = '';

function getCompanySetting($conn, $companyId, $key, $default = '') {
    $stmt = $conn->prepare("SELECT setting_value FROM company_settings WHERE company_id = ? AND setting_key = ?");
    $stmt->bind_param("is", $companyId, $key);
    $stmt->execute();
    $result = $stmt->get_result();
    $row = $result->fetch_assoc();
    $stmt->close();
    return $row ? $row['setting_value'] : $default;
}

$baseMileageRate = (float) getCompanySetting($conn, $companyId, 'base_mileage_rate', '2.00');
$baseHireRate = (float) getCompanySetting($conn, $companyId, 'base_hire_rate', '3.50');
$airportSurcharge = (float) getCompanySetting($conn, $companyId, 'airport_surcharge', '5.00');
$autoDispatchEnabled = getCompanySetting($conn, $companyId, 'auto_dispatch_enabled', '0') == '1';
$autoDispatchMaxDistance = (int) getCompanySetting($conn, $companyId, 'auto_dispatch_max_distance', '10');

if ($editId > 0) {
    $stmt = $conn->prepare("SELECT * FROM bookings WHERE id = ? AND company_id = ?");
    $stmt->bind_param("ii", $editId, $companyId);
    $stmt->execute();
    $result = $stmt->get_result();
    $editBooking = $result->fetch_assoc();
    $stmt->close();
}
if ($copyId > 0 && !$editBooking) {
    $stmt = $conn->prepare("SELECT * FROM bookings WHERE id = ? AND company_id = ?");
    $stmt->bind_param("ii", $copyId, $companyId);
    $stmt->execute();
    $result = $stmt->get_result();
    $copyData = $result->fetch_assoc();
    if ($copyData) {
        unset($copyData['id']);
        $copyData['status'] = 'pending_dispatch';
        $editBooking = $copyData;
    }
    $stmt->close();
}

$drivers = [];
$stmt = $conn->prepare("SELECT id, driver_name, callsign, status, latitude, longitude, current_zone, phone FROM drivers WHERE company_id = ? AND is_active = 1 ORDER BY driver_name");
$stmt->bind_param("i", $companyId);
$stmt->execute();
$result = $stmt->get_result();
while ($row = $result->fetch_assoc()) { $drivers[] = $row; }
$stmt->close();

$vehicles = [];
$stmt = $conn->prepare("SELECT id, callsign FROM vehicles WHERE company_id = ? AND status = 'active' ORDER BY callsign");
$stmt->bind_param("i", $companyId);
$stmt->execute();
$result = $stmt->get_result();
while ($row = $result->fetch_assoc()) { $vehicles[] = $row; }
$stmt->close();

$accounts = [];
$stmt = $conn->prepare("SELECT id, company_name FROM accounts WHERE company_id = ? AND status = 'active' ORDER BY company_name");
$stmt->bind_param("i", $companyId);
$stmt->execute();
$result = $stmt->get_result();
while ($row = $result->fetch_assoc()) { $accounts[] = $row; }
$stmt->close();

$zones = [];
$zoneStmt = $conn->prepare("SELECT zone_code, zone_name FROM zones WHERE company_id = ? AND is_active = 1");
$zoneStmt->bind_param("i", $companyId);
$zoneStmt->execute();
$zoneResult = $zoneStmt->get_result();
while ($zoneRow = $zoneResult->fetch_assoc()) { $zones[] = $zoneRow; }
$zoneStmt->close();

$vehicleTypes = ['Saloon', 'Estate', 'MPV6', 'MPV8', 'Hatchback', 'SUV', 'Minibus', 'Luxury', 'Executive', 'WAV'];
$priorityOptions = ['Low', 'Medium', 'High', 'Emergency'];
$luggageOptions = range(0, 15);
$passengerOptions = range(1, 20);
$repeatDaysList = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun', 'Fortnightly'];

$capabilitiesList = [
    'wheelchair' => '♿ Wheelchair Access',
    'child_seat' => '👶 Child Seat',
    'pet_friendly' => '🐾 Pet Friendly',
    'xl_luggage' => '🧳 XL Luggage',
    'airport_meet' => '✈️ Airport Meet',
    'corporate' => '🏢 Corporate',
    'female_driver' => '👩 Female Driver',
    'dbs_checked' => '✅ DBS Checked',
    'multilingual' => '🌍 Multilingual'
];

function autoAssignDriver($pickup_lat, $pickup_lng, $companyId, $conn, $maxDistance = 10) {
    $stmt = $conn->prepare("
        SELECT id, driver_name, callsign, status,
        ( 6371 * acos( GREATEST(-1, LEAST(1, 
            cos(radians(?)) * cos(radians(COALESCE(latitude, 0))) *
            cos(radians(COALESCE(longitude, 0)) - radians(?)) +
            sin(radians(?)) * sin(radians(COALESCE(latitude, 0)))
        )) ) ) AS distance_km
        FROM drivers 
        WHERE company_id = ? AND status = 'available' AND latitude IS NOT NULL AND longitude IS NOT NULL
        HAVING distance_km < ?
        ORDER BY distance_km ASC LIMIT 1
    ");
    $stmt->bind_param("dddid", $pickup_lat, $pickup_lng, $pickup_lat, $companyId, $maxDistance);
    $stmt->execute();
    $result = $stmt->get_result();
    $driver = $result->fetch_assoc();
    $stmt->close();
    return $driver;
}

$isAjax = isset($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest';

if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    $response = ['success' => false, 'message' => '', 'booking_ref' => ''];
    try {
        $bookingRef = $editBooking['booking_ref'] ?? 'BK-' . date('Ymd') . '-' . rand(100, 999);
        $bookingDate = !empty($_POST['booking_date']) ? $_POST['booking_date'] : date('Y-m-d');
        $bookingTime = !empty($_POST['booking_time']) ? $_POST['booking_time'] : date('H:i:s');

        $assigned_driver_id = !empty($_POST['driver_id']) ? $_POST['driver_id'] : null;
        if ($autoDispatchEnabled && !$assigned_driver_id && !empty($_POST['pickup_lat']) && !empty($_POST['pickup_lng'])) {
            $nearestDriver = autoAssignDriver($_POST['pickup_lat'], $_POST['pickup_lng'], $companyId, $conn, $autoDispatchMaxDistance);
            if ($nearestDriver) $assigned_driver_id = $nearestDriver['id'];
        }

        $capabilities_selected = isset($_POST['capabilities']) && is_array($_POST['capabilities']) ? implode(',', $_POST['capabilities']) : '';

        if (isset($_POST['booking_id']) && !empty($_POST['booking_id'])) {
            $stmt = $conn->prepare("UPDATE bookings SET 
                customer_name = ?, customer_phone = ?, email = ?, pickup_address = ?, pickup_note = ?, 
                destination = ?, dest_note = ?, via = ?, via_note = ?, vehicle_type = ?, driver_id = ?,
                price = ?, distance = ?, duration = ?, notes = ?, office_note = ?, company = ?, 
                your_ref = ?, our_ref = ?, priority = ?, flight_number = ?, flight_origin = ?,
                passengers = ?, suitcases = ?, capabilities = ?, repeat_days = ?, repeat_end = ?, 
                return_time = ?, account_id = ?, loyalty_card = ?, booking_date = ?, booking_time = ?,
                pickup_time = ?, status = ?, pickup_lat = ?, pickup_lng = ?, zone_code = ?,
                updated_at = NOW()
            WHERE id = ? AND company_id = ?");

            $stmt->bind_param(
                "ssssssssssiddssssssssiississsssssddssii",
                $_POST['customer_name'], $_POST['customer_phone'], $_POST['email'],
                $_POST['pickup_address'], $_POST['pickup_note'], $_POST['destination'],
                $_POST['dest_note'], $_POST['via'], $_POST['via_note'], $_POST['vehicle_type'],
                $assigned_driver_id, $_POST['price'], $_POST['distance'], $_POST['duration'],
                $_POST['notes'], $_POST['office_note'], $_POST['company'], $_POST['your_ref'],
                $_POST['our_ref'], $_POST['priority'], $_POST['flight_number'], $_POST['flight_origin'],
                $_POST['passengers'], $_POST['luggage'], $capabilities_selected, $_POST['repeat_days'],
                $_POST['repeat_end'], $_POST['return_time'], $_POST['account_id'] ?: null,
                $_POST['loyalty_card'], $bookingDate, $bookingTime, $bookingTime, $_POST['status'],
                $_POST['pickup_lat'] ?? null, $_POST['pickup_lng'] ?? null, $_POST['zone_code'] ?? 'TWN',
                $_POST['booking_id'], $companyId
            );
            if (!$stmt->execute()) throw new Exception($stmt->error);
            $response = ['success' => true, 'message' => 'Booking updated successfully', 'booking_ref' => $bookingRef];
        } else {
            $now = date('Y-m-d H:i:s');
            $pendingStatus = 'pending_dispatch';
            $defaultZone = 'TWN';

            $sql = "INSERT INTO bookings SET
                company_id = ?, booking_ref = ?, customer_name = ?, customer_phone = ?, email = ?,
                pickup_address = ?, pickup_note = ?, destination = ?, dest_note = ?, via = ?, via_note = ?,
                vehicle_type = ?, driver_id = ?, price = ?, distance = ?, duration = ?, notes = ?,
                office_note = ?, company = ?, your_ref = ?, our_ref = ?, priority = ?, flight_number = ?,
                flight_origin = ?, passengers = ?, suitcases = ?, capabilities = ?, repeat_days = ?,
                repeat_end = ?, return_time = ?, account_id = ?, loyalty_card = ?, booking_date = ?,
                booking_time = ?, pickup_time = ?, status = ?, pickup_lat = ?, pickup_lng = ?, zone_code = ?,
                created_at = ?, updated_at = ?";

            $stmt = $conn->prepare($sql);
            if (!$stmt) throw new Exception("Prepare failed: " . $conn->error);

            $values = [
                $companyId, $bookingRef,
                !empty($_POST['customer_name']) ? $_POST['customer_name'] : '',
                !empty($_POST['customer_phone']) ? $_POST['customer_phone'] : '',
                !empty($_POST['email']) ? $_POST['email'] : '',
                !empty($_POST['pickup_address']) ? $_POST['pickup_address'] : '',
                !empty($_POST['pickup_note']) ? $_POST['pickup_note'] : '',
                !empty($_POST['destination']) ? $_POST['destination'] : '',
                !empty($_POST['dest_note']) ? $_POST['dest_note'] : '',
                !empty($_POST['via']) ? $_POST['via'] : '',
                !empty($_POST['via_note']) ? $_POST['via_note'] : '',
                !empty($_POST['vehicle_type']) ? $_POST['vehicle_type'] : '',
                $assigned_driver_id,
                !empty($_POST['price']) ? (float)$_POST['price'] : 0,
                !empty($_POST['distance']) ? (float)$_POST['distance'] : 0,
                !empty($_POST['duration']) ? (int)$_POST['duration'] : 0,
                !empty($_POST['notes']) ? $_POST['notes'] : '',
                !empty($_POST['office_note']) ? $_POST['office_note'] : '',
                !empty($_POST['company']) ? $_POST['company'] : '',
                !empty($_POST['your_ref']) ? $_POST['your_ref'] : '',
                !empty($_POST['our_ref']) ? $_POST['our_ref'] : '',
                !empty($_POST['priority']) ? $_POST['priority'] : 'Medium',
                !empty($_POST['flight_number']) ? $_POST['flight_number'] : '',
                !empty($_POST['flight_origin']) ? $_POST['flight_origin'] : '',
                !empty($_POST['passengers']) ? (int)$_POST['passengers'] : 1,
                !empty($_POST['luggage']) ? (int)$_POST['luggage'] : 0,
                $capabilities_selected,
                !empty($_POST['repeat_days']) ? $_POST['repeat_days'] : '',
                !empty($_POST['repeat_end']) ? $_POST['repeat_end'] : null,
                !empty($_POST['return_time']) ? $_POST['return_time'] : null,
                !empty($_POST['account_id']) ? (int)$_POST['account_id'] : null,
                !empty($_POST['loyalty_card']) ? $_POST['loyalty_card'] : '',
                !empty($_POST['booking_date']) ? $_POST['booking_date'] : date('Y-m-d'),
                !empty($_POST['booking_time']) ? $_POST['booking_time'] : date('H:i:s'),
                !empty($_POST['booking_time']) ? $_POST['booking_time'] : date('H:i:s'),
                $pendingStatus,
                isset($_POST['pickup_lat']) && $_POST['pickup_lat'] !== '' ? (float)$_POST['pickup_lat'] : null,
                isset($_POST['pickup_lng']) && $_POST['pickup_lng'] !== '' ? (float)$_POST['pickup_lng'] : null,
                !empty($_POST['zone_code']) ? $_POST['zone_code'] : $defaultZone,
                $now, $now
            ];

            $types = '';
            foreach ($values as $v) {
                if (is_int($v)) $types .= 'i';
                elseif (is_float($v)) $types .= 'd';
                else $types .= 's';
            }
            $stmt->bind_param($types, ...$values);

            if (!$stmt->execute()) throw new Exception($stmt->error);
            $response = ['success' => true, 'message' => 'Booking created successfully', 'booking_ref' => $bookingRef];
        }
        $stmt->close();
    } catch(Exception $e) {
        $response = ['success' => false, 'message' => $e->getMessage()];
        error_log("Booking error: " . $e->getMessage());
    }

    if ($isAjax) {
        header('Content-Type: application/json');
        echo json_encode($response);
        exit;
    } else {
        $savedBookingRef = $response['success'] ? $response['booking_ref'] : '';
        $message = $response['message'];
        $messageType = $response['success'] ? 'success' : 'error';
    }
}

$savedCapabilities = [];
if (!empty($editBooking['capabilities'])) $savedCapabilities = explode(',', $editBooking['capabilities']);
$currentDate = date('Y-m-d');
$currentTime = date('H:i');
$roleDisplay = ucfirst(str_replace('_', ' ', $userType));
$availableCount = count(array_filter($drivers, fn($d) => $d['status'] == 'available'));
$busyCount = count(array_filter($drivers, fn($d) => $d['status'] == 'busy'));
$totalCount = count($drivers);
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <title>FleetCortex - <?php echo $editId ? 'Edit Booking' : 'New Booking'; ?></title>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500;600;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link rel="icon" type="image/png" href="https://myfleetcortex.com/assets/images/Favicon.png">
    <script src="https://api.mapbox.com/mapbox-gl-js/v3.8.0/mapbox-gl.js"></script>
    <link href="https://api.mapbox.com/mapbox-gl-js/v3.8.0/mapbox-gl.css" rel="stylesheet">
    <style>
        /* ============================================================
           MAIN STYLES
           ============================================================ */
        * { margin: 0; padding: 0; box-sizing: border-box; }
        body { font-family: 'Inter', sans-serif; background: #F3F4F6; height: 100vh; overflow: hidden; font-size: 12px; }
        :root { --purple-primary: #6D28D9; --purple-light: #8B5CF6; --purple-gradient: linear-gradient(135deg, #6D28D9 0%, #8B5CF6 100%); --status-green: #22C55E; --status-red: #EF4444; --status-blue: #3B82F6; --status-yellow: #F59E0B; --border-radius-card: 16px; }
        .top-bar { background: var(--purple-gradient); padding: 0 24px; display: flex; justify-content: space-between; align-items: center; height: 56px; }
        .logo-area { display: flex; align-items: center; gap: 12px; }
        .logo-area img { height: 36px; width: auto; }
        .logo-area h1 { font-size: 18px; font-weight: 700; color: white; font-family: 'JetBrains Mono', monospace; }
        .header-right { display: flex; align-items: center; gap: 20px; }
        .message-icon { position: relative; cursor: pointer; color: white; font-size: 20px; }
        .message-badge { position: absolute; top: -8px; right: -8px; background: #EF4444; color: white; font-size: 10px; padding: 2px 6px; border-radius: 10px; display: none; }
        .user-info { display: flex; align-items: center; gap: 10px; background: rgba(255,255,255,0.15); padding: 6px 16px; border-radius: 40px; color: white; font-size: 13px; }
        .user-role-badge { background: rgba(255,255,255,0.25); padding: 2px 10px; border-radius: 20px; font-size: 10px; }
        .exit-btn { background: rgba(255,255,255,0.15); border: 1px solid rgba(255,255,255,0.3); padding: 6px 16px; border-radius: 8px; cursor: pointer; color: white; font-size: 12px; }
        .exit-btn:hover { background: #EF4444; }
        .main-container { display: flex; height: calc(100vh - 56px - 48px); padding: 16px; gap: 16px; overflow: hidden; }
        .form-container { flex: 1.3; background: white; border-radius: var(--border-radius-card); display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1); }
        .form-scroll-area { flex: 1; overflow-y: auto; padding: 16px; }
        .form-scroll-area::-webkit-scrollbar { width: 6px; }
        .form-scroll-area::-webkit-scrollbar-track { background: #E5E7EB; border-radius: 10px; }
        .form-scroll-area::-webkit-scrollbar-thumb { background: var(--purple-light); border-radius: 10px; }
        .form-footer { display: flex; align-items: center; gap: 6px; padding: 8px 14px; background: #1F2937; border-top: 2px solid #374151; border-radius: 0 0 var(--border-radius-card) var(--border-radius-card); flex-shrink: 0; flex-wrap: wrap; justify-content: space-between; }
        .ffbtn { display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px; border-radius: 7px; border: none; font-size: 11px; font-weight: 600; cursor: pointer; white-space: nowrap; }
        .ffbtn-book { background: var(--purple-gradient); color: white; }
        .ffbtn-hold { background: #F59E0B; color: white; }
        .ffbtn-clear { background: #374151; color: #D1D5DB; border: 1px solid #4B5563; }
        .ffbtn-cli { background: #065F46; color: #6EE7B7; border: 1px solid #047857; }
        .ffbtn-ivr { background: #1E3A5F; color: #93C5FD; border: 1px solid #1D4ED8; }
        .ffbtn:hover { filter: brightness(1.15); }
        .ffbtn .shortcut { font-size: 9px; opacity: 0.7; font-family: monospace; }
        .form-row-card { background: #F9FAFB; border-radius: 12px; margin-bottom: 10px; padding: 8px 12px; display: flex; align-items: center; gap: 12px; transition: all 0.2s ease; border: 1px solid #E5E7EB; position: relative; }
        .form-row-card:hover { border: 1px solid var(--purple-primary); box-shadow: 0 2px 8px rgba(109,40,217,0.15); }
        .row-label { width: 90px; font-size: 13px; font-weight: 700; color: #000000; text-transform: uppercase; letter-spacing: 0.5px; }
        .standard-label { width: 90px; font-size: 13px; font-weight: 700; color: #000000; text-transform: uppercase; }
        .main-input { flex: 2; padding: 8px 12px; border: 1px solid #E5E7EB; border-radius: 8px; font-size: 12px; background: white; color: #1F2937; outline: none; font-family: 'JetBrains Mono', monospace; }
        .standard-input { flex: 2; padding: 8px 12px; border: 1px solid #E5E7EB; border-radius: 8px; font-size: 12px; background: white; color: #1F2937; outline: none; }
        .standard-select { flex: 2; padding: 8px 12px; border: 1px solid #E5E7EB; border-radius: 8px; font-size: 12px; background: white; color: #1F2937; cursor: pointer; }
        .required-field { border: 2px solid #EF4444 !important; background: #FEF2F2 !important; }
        .required-field.has-value { border: 1px solid #10B981 !important; background: white !important; }
        .multi-select-container { position: relative; flex: 2; }
        .multi-select-btn { width: 100%; padding: 8px 12px; border: 1px solid #E5E7EB; border-radius: 8px; background: white; color: #1F2937; font-size: 12px; text-align: left; cursor: pointer; display: flex; justify-content: space-between; align-items: center; }
        .multi-select-btn:hover { border-color: var(--purple-primary); }
        .multi-select-dropdown { position: absolute; top: 100%; left: 0; right: 0; background: white; border: 1px solid #E5E7EB; border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.15); z-index: 1000; max-height: 250px; overflow-y: auto; display: none; margin-top: 4px; }
        .multi-select-dropdown.show { display: block; }
        .multi-select-option { padding: 8px 12px; cursor: pointer; display: flex; align-items: center; gap: 8px; font-size: 12px; border-bottom: 1px solid #F3F4F6; }
        .multi-select-option:hover { background: #F3F4F6; }
        .multi-select-option input { width: 16px; height: 16px; cursor: pointer; }
        .multi-select-option label { flex: 1; cursor: pointer; color: #1F2937; }
        .note-container { flex: 1; display: flex; align-items: center; background: #F0F5FF; border-radius: 8px; padding: 0 8px; gap: 6px; border: 1px solid #E5E7EB; }
        .note-label { font-size: 9px; font-weight: 600; color: var(--purple-primary); text-transform: uppercase; }
        .note-input { flex: 1; background: transparent; border: none; padding: 8px 0; font-size: 11px; outline: none; color: #1F2937; }
        .icon-group { display: flex; gap: 4px; }
        .icon-btn { min-width: 28px; height: 28px; padding: 0 6px; border-radius: 6px; border: 1px solid #E5E7EB; background: white; cursor: pointer; font-size: 11px; color: var(--purple-primary); display: flex; align-items: center; justify-content: center; gap: 3px; white-space: nowrap; }
        .icon-btn:hover { background: var(--purple-primary); color: white; border-color: var(--purple-primary); }
        .two-col-row { display: flex; gap: 12px; margin-bottom: 10px; }
        .two-col-item { flex: 1; background: #F9FAFB; border-radius: 12px; padding: 8px 12px; display: flex; align-items: center; gap: 12px; border: 1px solid #E5E7EB; }
        .two-col-item:hover { border: 1px solid var(--purple-primary); }
        .repeat-days-container { display: flex; flex-wrap: wrap; gap: 6px; flex: 2; }
        .day-toggle { padding: 6px 12px; font-size: 10px; font-weight: 600; border: 1px solid #E5E7EB; border-radius: 20px; background: white; color: var(--purple-primary); cursor: pointer; }
        .day-toggle.active { background: var(--purple-gradient); color: white; border-color: var(--purple-primary); }
        .flight-info { background: #F0F5FF; border-radius: 8px; padding: 8px 12px; margin-top: 8px; font-size: 11px; display: none; }
        .flight-info.show { display: block; }
        .status-on-time { color: #10b981; }
        .status-delayed { color: #ef4444; }
        .right-panel { width: 400px; background: white; border-radius: var(--border-radius-card); overflow: hidden; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1); display: flex; flex-direction: column; }
        .timeline-section { padding: 12px 16px; border-bottom: 1px solid #E5E7EB; background: white; }
        .timeline-label { font-size: 9px; color: #6B7280; margin-bottom: 6px; font-weight: 600; letter-spacing: 0.5px; }
        .timeline-ruler { background: #F9FAFB; height: 28px; border-radius: 4px; position: relative; display: flex; align-items: flex-end; border: 1px solid #E5E7EB; overflow: hidden; }
        .tick-mark { flex: 1; position: relative; height: 100%; border-left: 1px solid #D1D5DB; }
        .tick-mark span { position: absolute; bottom: 2px; left: -4px; font-size: 8px; color: #6B7280; font-family: monospace; }
        .timeline-occupied { position: absolute; height: 100%; background: var(--status-green); opacity: 0.4; top: 0; left: 0; width: 35%; }
        .eta-banner { display: flex; height: 44px; gap: 1px; background: #E5E7EB; border-radius: 8px; overflow: hidden; margin: 8px 12px; }
        .eta-card { flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px; background: white; }
        .eta-card.vehicle { background: var(--status-green); }
        .eta-card.average { background: var(--status-orange); }
        .eta-label { font-size: 9px; font-weight: 700; color: rgba(255,255,255,0.9); text-transform: uppercase; letter-spacing: 0.5px; }
        .eta-value { font-size: 20px; font-weight: 800; color: white; font-family: monospace; line-height: 1; }
        .job-details { background: #1F2937; padding: 10px 16px; }
        .detail-row { display: flex; justify-content: space-between; margin-bottom: 6px; }
        .detail-label { font-size: 10px; color: #9CA3AF; text-transform: uppercase; }
        .detail-value { font-size: 13px; font-weight: 700; color: white; font-family: monospace; }
        .tariff { font-size: 9px; color: #9CA3AF; margin-top: 6px; padding-top: 4px; border-top: 1px solid #374151; }
        .map-container { height: 220px; position: relative; background: #E5E7EB; }
        #bookingMap { width: 100%; height: 100%; }
        .map-controls { position: absolute; bottom: 8px; right: 8px; display: flex; gap: 4px; z-index: 10; }
        .map-btn { background: rgba(0,0,0,0.7); backdrop-filter: blur(4px); border: none; color: white; border-radius: 6px; padding: 5px 10px; cursor: pointer; font-size: 10px; font-weight: 600; }
        .map-btn:hover { background: var(--purple-primary); }
        .tables-container { flex: 1; display: flex; flex-direction: column; min-height: 0; background: white; }
        .table-wrapper { flex: 1; display: flex; flex-direction: column; min-height: 0; border-bottom: 1px solid #E5E7EB; }
        .table-scroll { flex: 1; overflow-y: auto; }
        .data-table { width: 100%; border-collapse: collapse; font-size: 11px; }
        .data-table th { text-align: left; padding: 8px 12px; background: #F9FAFB; color: #6B7280; font-weight: 600; font-size: 9px; text-transform: uppercase; position: sticky; top: 0; border-bottom: 1px solid #E5E7EB; }
        .data-table td { padding: 8px 12px; color: #1F2937; border-bottom: 1px solid #F3F4F6; }
        .callsign-clear { color: var(--status-green); font-weight: 700; background: rgba(34,197,94,0.1); border-radius: 4px; }
        .callsign-busy { color: var(--status-red); font-weight: 700; background: rgba(239,68,68,0.1); border-radius: 4px; }
        .callsign-onjob { color: var(--status-blue); font-weight: 700; background: rgba(59,130,246,0.1); border-radius: 4px; }
        .zone-wrapper { flex: 0.8; display: flex; flex-direction: column; min-height: 0; }
        .zone-scroll { flex: 1; overflow-y: auto; }
        .zone-clear { color: var(--status-green); font-weight: 700; }
        .zone-busy { color: var(--status-red); font-weight: 700; }
        .footer-summary { background: white; padding: 8px 16px; border-top: 1px solid #E5E7EB; display: flex; gap: 16px; font-size: 10px; }
        .summary-total { color: var(--status-blue); font-weight: 600; }
        .summary-clear { color: var(--status-green); font-weight: 600; }
        .summary-busy { color: var(--status-red); font-weight: 600; }
        .summary-bookings { color: #1F2937; font-weight: 600; }
        .footer-bar { background: #1F2937; padding: 6px 16px; display: flex; justify-content: space-between; align-items: center; font-size: 9px; color: #9CA3AF; position: fixed; bottom: 0; left: 0; right: 0; z-index: 100; }
        .shortcuts-group { display: flex; gap: 12px; flex-wrap: wrap; }
        .shortcut-key { background: rgba(255,255,255,0.1); padding: 2px 6px; border-radius: 4px; font-weight: 700; margin-right: 4px; }
        .toast { position: fixed; bottom: 50px; left: 50%; transform: translateX(-50%); background: linear-gradient(135deg, #6D28D9, #8B5CF6); color: white; padding: 10px 20px; border-radius: 40px; font-size: 13px; font-weight: 600; z-index: 1001; box-shadow: 0 4px 12px rgba(0,0,0,0.2); animation: toastSlide 0.3s ease; }
        .toast.success { background: linear-gradient(135deg, #10B981, #059669); }
        .toast.error { background: linear-gradient(135deg, #EF4444, #DC2626); }
        @keyframes toastSlide { from { opacity: 0; transform: translateX(-50%) translateY(10px); } to { opacity: 1; transform: translateX(-50%) translateY(0); } }
        
        /* ============================================================
           F2 MODAL STYLES - PROFESSIONAL LIGHT THEME
           ============================================================ */
        .f2-modal-overlay { 
            position: fixed; 
            top: 0; 
            left: 0; 
            width: 100%; 
            height: 100%; 
            background: rgba(17,24,39,0.65);
            backdrop-filter: blur(8px);
            -webkit-backdrop-filter: blur(8px);
            z-index: 20000; 
            display: none;
            align-items: center; 
            justify-content: center; 
            padding: 20px;
        }
        .f2-modal-overlay.active { display: flex; }
        
        .f2-modal { 
            background: #FFFFFF; 
            border-radius: 24px; 
            width: 1200px; 
            max-width: 98vw; 
            height: 90vh; 
            max-height: 95vh; 
            overflow: hidden; 
            border: 1px solid rgba(229,231,235,0.8);
            box-shadow: 0 32px 64px -12px rgba(0,0,0,0.25);
            display: flex; 
            flex-direction: column; 
        }
        
        .f2-modal-header { 
            padding: 18px 28px;
            background: linear-gradient(135deg, #4C1D95 0%, #6D28D9 50%, #7C3AED 100%);
            border-bottom: 1px solid rgba(139,92,246,0.3);
            display: flex; 
            justify-content: space-between; 
            align-items: center; 
            flex-shrink: 0;
            position: relative;
            overflow: hidden;
        }
        .f2-modal-header .title { display: flex; align-items: center; gap: 16px; position: relative; z-index: 1; }
        .f2-modal-header .title h2 { font-size: 20px; font-weight: 800; color: white; font-family: 'JetBrains Mono', monospace; letter-spacing: -0.02em; }
        .f2-modal-header .title .phone-badge { background: rgba(255,255,255,0.12); backdrop-filter: blur(10px); padding: 5px 18px; border-radius: 24px; color: #A7F3D0; font-weight: 700; font-size: 14px; font-family: 'JetBrains Mono', monospace; border: 1px solid rgba(255,255,255,0.1); display: flex; align-items: center; gap: 8px; }
        .f2-modal-header .close-btn { background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.15); color: white; padding: 8px 22px; border-radius: 10px; cursor: pointer; font-size: 13px; font-weight: 600; transition: all 0.2s ease; display: flex; align-items: center; gap: 8px; position: relative; z-index: 1; }
        .f2-modal-header .close-btn:hover { background: rgba(239,68,68,0.9); border-color: rgba(239,68,68,0.5); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(239,68,68,0.3); }
        
        .f2-tabs { display: flex; gap: 2px; padding: 0 24px; background: #FFFFFF; border-bottom: 2px solid #E5E7EB; flex-shrink: 0; overflow-x: auto; scrollbar-width: thin; scrollbar-color: #6D28D9 transparent; }
        .f2-tabs::-webkit-scrollbar { height: 3px; }
        .f2-tabs::-webkit-scrollbar-thumb { background: #6D28D9; border-radius: 3px; }
        .f2-tab { padding: 14px 22px; background: transparent; border: none; color: #6B7280; font-size: 12px; font-weight: 600; cursor: pointer; transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1); border-bottom: 3px solid transparent; white-space: nowrap; display: flex; align-items: center; gap: 8px; font-family: 'Inter', sans-serif; position: relative; }
        .f2-tab:hover { color: #111827; background: rgba(109,40,217,0.04); }
        .f2-tab.active { color: #6D28D9; border-bottom-color: #6D28D9; }
        .f2-tab .badge { background: #EF4444; color: white; font-size: 9px; padding: 2px 8px; border-radius: 12px; font-weight: 700; min-width: 20px; text-align: center; }
        .f2-tab.active .badge { background: #6D28D9; }
        
        .f2-modal-body { flex: 1; overflow-y: auto; padding: 20px 24px; background: #F3F4F6; min-height: 0; }
        .f2-modal-body::-webkit-scrollbar { width: 6px; }
        .f2-modal-body::-webkit-scrollbar-track { background: #F9FAFB; border-radius: 3px; }
        .f2-modal-body::-webkit-scrollbar-thumb { background: linear-gradient(180deg, #6D28D9, #8B5CF6); border-radius: 3px; }
        
        .f2-tab-content { display: none; height: 100%; animation: fadeIn 0.3s ease; }
        .f2-tab-content.active { display: block; }
        @keyframes fadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
        
        .f2-modal-footer { padding: 14px 28px; background: #FFFFFF; border-top: 1px solid #E5E7EB; display: flex; justify-content: flex-end; gap: 12px; flex-shrink: 0; }
        .f2-modal-footer .btn-close { background: #F9FAFB; border: 1px solid #E5E7EB; color: #6B7280; padding: 10px 28px; border-radius: 10px; font-size: 12px; font-weight: 600; cursor: pointer; transition: all 0.2s; display: flex; align-items: center; gap: 8px; font-family: 'Inter', sans-serif; }
        .f2-modal-footer .btn-close:hover { background: #EF4444; color: white; border-color: #EF4444; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(239,68,68,0.25); }
        
        .f2-toast { position: fixed; bottom: 30px; left: 50%; transform: translateX(-50%); padding: 12px 28px; border-radius: 40px; font-size: 13px; font-weight: 600; z-index: 99999; box-shadow: 0 8px 24px rgba(0,0,0,0.15); animation: toastSlide 0.4s cubic-bezier(0.4, 0, 0.2, 1); font-family: 'Inter', sans-serif; display: flex; align-items: center; gap: 8px; }
        .f2-toast.success { background: linear-gradient(135deg, #10B981, #059669); color: white; }
        .f2-toast.error { background: linear-gradient(135deg, #EF4444, #DC2626); color: white; }
        .f2-toast.info { background: linear-gradient(135deg, #6D28D9, #8B5CF6); color: white; }
        .f2-toast.warning { background: linear-gradient(135deg, #F59E0B, #D97706); color: #1F2937; }
        
        /* Active Booking Card */
        .active-booking-card { background: #FFFFFF; border-radius: 16px; border: 2px solid #EF4444; padding: 24px 28px; margin-bottom: 20px; box-shadow: 0 4px 20px rgba(239,68,68,0.08); position: relative; overflow: hidden; }
        .active-booking-card .header { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
        .active-booking-card .header .icon { color: #EF4444; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; background: rgba(239,68,68,0.1); border-radius: 8px; }
        .active-booking-card .header .title { font-weight: 800; font-size: 15px; color: #EF4444; letter-spacing: 0.02em; }
        .active-booking-card .details { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 28px; padding: 16px 0; border-top: 1px solid #E5E7EB; border-bottom: 1px solid #E5E7EB; }
        .active-booking-card .details .item { display: flex; justify-content: space-between; padding: 5px 0; }
        .active-booking-card .details .label { color: #6B7280; font-size: 12px; font-weight: 500; }
        .active-booking-card .details .value { color: #111827; font-size: 13px; font-weight: 600; }
        .active-booking-card .actions { display: flex; gap: 10px; margin-top: 16px; flex-wrap: wrap; }
        .active-booking-card .actions .btn-action { padding: 9px 20px; border-radius: 10px; border: none; font-weight: 600; font-size: 12px; cursor: pointer; transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); display: flex; align-items: center; gap: 7px; font-family: 'Inter', sans-serif; box-shadow: 0 1px 3px rgba(0,0,0,0.08); }
        .active-booking-card .actions .btn-action:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.12); }
        .active-booking-card .actions .btn-confirm { background: linear-gradient(135deg, #10B981, #059669); color: white; }
        .active-booking-card .actions .btn-call { background: linear-gradient(135deg, #06B6D4, #0891B2); color: white; }
        .active-booking-card .actions .btn-sms { background: linear-gradient(135deg, #3B82F6, #2563EB); color: white; }
        .active-booking-card .actions .btn-return { background: linear-gradient(135deg, #F59E0B, #D97706); color: #1F2937; }
        .active-booking-card .actions .btn-edit { background: linear-gradient(135deg, #6D28D9, #7C3AED); color: white; }
        
        /* No Active Bookings */
        .no-active { text-align: center; padding: 60px 20px; color: #6B7280; }
        .no-active .icon { font-size: 48px; color: #9CA3AF; margin-bottom: 16px; opacity: 0.4; }
        .no-active .text { font-size: 16px; font-weight: 700; color: #111827; }
        .no-active .subtext { font-size: 13px; color: #9CA3AF; margin-top: 6px; }
        
        /* History Grid */
        .history-grid { display: flex; flex-direction: column; gap: 6px; }
        .history-header { display: grid; grid-template-columns: 80px 1fr 1fr 100px 100px 120px; gap: 10px; padding: 12px 16px; background: linear-gradient(180deg, #F9FAFB, #F3F4F6); border-radius: 10px; border-bottom: 2px solid #6D28D9; font-weight: 700; font-size: 10px; text-transform: uppercase; color: #6B7280; letter-spacing: 0.8px; position: sticky; top: 0; z-index: 5; }
        .history-row { display: grid; grid-template-columns: 80px 1fr 1fr 100px 100px 120px; gap: 10px; padding: 14px 16px; background: #FFFFFF; border-radius: 10px; border-left: 4px solid transparent; cursor: pointer; transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); align-items: center; min-height: 60px; box-shadow: 0 1px 2px rgba(0,0,0,0.04); }
        .history-row:hover { background: #F3F4F6; border-left-color: #8B5CF6; transform: translateX(6px); box-shadow: 0 4px 12px rgba(0,0,0,0.08); }
        .history-row:nth-child(odd) { background: #FAFBFC; }
        .history-row .cell-date { font-size: 11px; color: #6B7280; font-weight: 600; font-family: 'JetBrains Mono', monospace; }
        .history-row .cell-pickup { font-size: 13px; color: #111827; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; align-items: center; gap: 8px; }
        .history-row .cell-dropoff { font-size: 13px; color: #111827; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; align-items: center; gap: 8px; }
        .history-row .cell-price { font-size: 15px; font-weight: 700; color: #10B981; font-family: 'JetBrains Mono', monospace; }
        .history-row .cell-status .status-badge { font-size: 10px; font-weight: 700; padding: 5px 14px; border-radius: 20px; text-transform: uppercase; display: inline-block; text-align: center; min-width: 70px; }
        .history-row .cell-action .btn-load { background: linear-gradient(135deg, #6D28D9, #7C3AED); border: none; color: white; padding: 5px 16px; border-radius: 8px; font-size: 10px; font-weight: 600; cursor: pointer; transition: all 0.2s; font-family: 'Inter', sans-serif; box-shadow: 0 1px 3px rgba(109,40,217,0.2); }
        .history-row .cell-action .btn-load:hover { background: linear-gradient(135deg, #8B5CF6, #A855F7); transform: scale(1.05); }
        
        .empty-state { text-align: center; padding: 60px 20px; color: #6B7280; }
        .empty-state .icon { font-size: 48px; color: #9CA3AF; margin-bottom: 16px; opacity: 0.4; }
        .empty-state .text { font-size: 16px; font-weight: 700; color: #111827; }
        .empty-state .subtext { font-size: 13px; color: #9CA3AF; margin-top: 6px; }
        
        /* Favorites */
        .favorites-grid { display: flex; flex-direction: column; gap: 6px; }
        .favorite-row { display: grid; grid-template-columns: 60px 1fr 100px; gap: 14px; padding: 14px 18px; background: #FFFFFF; border-radius: 12px; border-left: 4px solid #F59E0B; cursor: pointer; transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); align-items: center; min-height: 56px; box-shadow: 0 1px 2px rgba(0,0,0,0.04); }
        .favorite-row:hover { background: #F3F4F6; transform: translateX(6px); box-shadow: 0 4px 12px rgba(0,0,0,0.08); }
        .favorite-row:nth-child(odd) { background: #FAFBFC; }
        .favorite-row .fav-icon { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; background: rgba(245,158,11,0.1); border-radius: 10px; font-size: 20px; }
        .favorite-row .fav-name { font-weight: 700; color: #111827; font-size: 13px; }
        .favorite-row .fav-address { color: #6B7280; font-size: 12px; margin-top: 2px; }
        .favorite-row .fav-action .btn-use { background: linear-gradient(135deg, #F59E0B, #D97706); border: none; color: #1F2937; padding: 6px 16px; border-radius: 8px; font-size: 10px; font-weight: 700; cursor: pointer; transition: all 0.2s; }
        .favorite-row .fav-action .btn-use:hover { transform: scale(1.05); }
        
        /* Call Details */
        .call-filter { display: flex; gap: 14px; align-items: center; margin-bottom: 16px; background: #FFFFFF; padding: 12px 18px; border-radius: 12px; border: 1px solid #E5E7EB; flex-wrap: wrap; }
        .call-filter label { font-size: 12px; font-weight: 600; color: #6B7280; display: flex; align-items: center; gap: 6px; }
        .call-filter input[type="date"] { padding: 7px 14px; border: 1px solid #E5E7EB; border-radius: 8px; font-size: 12px; background: #FFFFFF; color: #111827; outline: none; }
        .call-filter input[type="date"]:focus { border-color: #6D28D9; box-shadow: 0 0 0 3px rgba(109,40,217,0.1); }
        .call-filter .btn-filter { background: linear-gradient(135deg, #6D28D9, #7C3AED); color: white; border: none; padding: 7px 18px; border-radius: 8px; font-size: 12px; font-weight: 600; cursor: pointer; display: flex; align-items: center; gap: 6px; }
        .call-filter .btn-filter:hover { transform: translateY(-1px); }
        .call-filter .btn-reset { background: #F9FAFB; border: 1px solid #E5E7EB; padding: 7px 18px; border-radius: 8px; font-size: 12px; font-weight: 600; cursor: pointer; color: #6B7280; display: flex; align-items: center; gap: 6px; }
        .call-filter .btn-reset:hover { background: #F3F4F6; }
        
        .call-audio-player { background: linear-gradient(135deg, #1E293B, #0F172A); border-radius: 14px; padding: 14px 20px; display: flex; align-items: center; gap: 16px; margin-bottom: 16px; border: 1px solid rgba(255,255,255,0.05); }
        .call-audio-player .play-btn { background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.1); color: #4ade80; font-size: 12px; font-weight: 700; cursor: pointer; padding: 8px 16px; border-radius: 8px; display: flex; align-items: center; gap: 6px; font-family: 'Inter', sans-serif; }
        .call-audio-player .play-btn:hover { background: rgba(255,255,255,0.12); transform: scale(1.05); }
        .call-audio-player .progress { flex: 1; height: 5px; background: rgba(255,255,255,0.08); border-radius: 3px; position: relative; cursor: pointer; overflow: hidden; }
        .call-audio-player .progress .fill { width: 35%; height: 100%; background: linear-gradient(90deg, #38bdf8, #0ea5e9); border-radius: 3px; transition: width 0.1s linear; }
        .call-audio-player .time { color: #94a3b8; font-size: 11px; font-family: 'JetBrains Mono', monospace; min-width: 90px; font-weight: 500; }
        .call-audio-player .download-btn { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1); color: #94a3b8; cursor: pointer; width: 36px; height: 36px; border-radius: 8px; display: flex; align-items: center; justify-content: center; transition: all 0.2s; }
        .call-audio-player .download-btn:hover { color: white; background: rgba(255,255,255,0.12); transform: scale(1.1); }
        
        .call-details-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 28px; background: #FFFFFF; padding: 18px 22px; border-radius: 12px; border: 1px solid #E5E7EB; }
        .call-details-grid .item { display: flex; justify-content: space-between; padding: 6px 0; border-bottom: 1px solid rgba(229,231,235,0.5); }
        .call-details-grid .item:last-child { border-bottom: none; }
        .call-details-grid .label { color: #6B7280; font-size: 11px; font-weight: 500; }
        .call-details-grid .value { color: #111827; font-size: 12px; font-weight: 600; }
        
        .call-history-list { margin-top: 14px; max-height: 200px; overflow-y: auto; }
        .call-history-list::-webkit-scrollbar { width: 4px; }
        .call-history-list::-webkit-scrollbar-thumb { background: #6D28D9; border-radius: 2px; }
        .call-history-item { display: grid; grid-template-columns: 100px 1fr 80px 100px; gap: 10px; padding: 10px 14px; background: #FFFFFF; border-radius: 8px; margin-bottom: 4px; font-size: 11px; align-items: center; border-left: 3px solid #E5E7EB; transition: all 0.15s; }
        .call-history-item:hover { background: #F3F4F6; border-left-color: #8B5CF6; }
        .call-history-item .ch-date { color: #6B7280; font-family: 'JetBrains Mono', monospace; font-weight: 500; }
        .call-history-item .ch-number { color: #111827; font-weight: 600; display: flex; align-items: center; gap: 6px; }
        .call-history-item .ch-duration { color: #6B7280; font-family: 'JetBrains Mono', monospace; font-weight: 500; }
        .call-history-item .ch-status { font-weight: 700; font-size: 10px; padding: 3px 10px; border-radius: 12px; text-align: center; display: inline-block; }
        .call-history-item .ch-status.answered { color: #065F46; background: rgba(16,185,129,0.1); border: 1px solid rgba(16,185,129,0.2); }
        .call-history-item .ch-status.missed { color: #991B1B; background: rgba(239,68,68,0.1); border: 1px solid rgba(239,68,68,0.2); }
        
        /* Change Log */
        .change-item { display: grid; grid-template-columns: 80px 30px 1fr; gap: 10px; padding: 10px 16px; background: #FFFFFF; border-radius: 8px; margin-bottom: 4px; border-left: 3px solid #E5E7EB; align-items: center; transition: all 0.15s; }
        .change-item:hover { background: #F3F4F6; border-left-color: #8B5CF6; }
        .change-item:nth-child(odd) { background: #FAFBFC; }
        .change-item .change-time { color: #6B7280; font-size: 10px; font-family: 'JetBrains Mono', monospace; font-weight: 600; }
        .change-item .change-icon { width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; border-radius: 6px; font-size: 12px; }
        .change-item .change-icon.created { color: #06B6D4; background: rgba(6,182,212,0.1); }
        .change-item .change-icon.updated { color: #F59E0B; background: rgba(245,158,11,0.1); }
        .change-item .change-details { color: #6B7280; font-size: 12px; line-height: 1.5; }
        .change-item .change-details strong { color: #111827; font-weight: 700; }
        .change-item .change-details .from { color: #EF4444; background: rgba(239,68,68,0.08); padding: 2px 8px; border-radius: 4px; font-weight: 600; font-size: 11px; border: 1px solid rgba(239,68,68,0.15); }
        .change-item .change-details .to { color: #10B981; background: rgba(16,185,129,0.08); padding: 2px 8px; border-radius: 4px; font-weight: 600; font-size: 11px; border: 1px solid rgba(16,185,129,0.15); }
        
        /* Transactions */
        .tx-grid { display: flex; flex-direction: column; gap: 4px; }
        .tx-header { display: grid; grid-template-columns: 80px 100px 90px 100px 140px; gap: 10px; padding: 10px 16px; background: linear-gradient(180deg, #F9FAFB, #F3F4F6); border-radius: 8px; font-weight: 700; font-size: 10px; text-transform: uppercase; color: #6B7280; letter-spacing: 0.8px; }
        .tx-row { display: grid; grid-template-columns: 80px 100px 90px 100px 140px; gap: 10px; padding: 10px 16px; background: #FFFFFF; border-radius: 8px; align-items: center; transition: all 0.15s; }
        .tx-row:hover { background: #F3F4F6; }
        .tx-row:nth-child(odd) { background: #FAFBFC; }
        .tx-row .tx-time { color: #6B7280; font-size: 11px; font-family: 'JetBrains Mono', monospace; font-weight: 500; }
        .tx-row .tx-type { color: #111827; font-size: 11px; font-weight: 600; }
        .tx-row .tx-status { font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 12px; text-align: center; display: inline-block; }
        .tx-row .tx-status.approved { color: #065F46; background: rgba(16,185,129,0.1); border: 1px solid rgba(16,185,129,0.2); }
        .tx-row .tx-status.settled { color: #0E7490; background: rgba(6,182,212,0.1); border: 1px solid rgba(6,182,212,0.2); }
        .tx-row .tx-status.declined { color: #991B1B; background: rgba(239,68,68,0.1); border: 1px solid rgba(239,68,68,0.2); }
        .tx-row .tx-amount { font-weight: 700; color: #10B981; font-family: 'JetBrains Mono', monospace; font-size: 13px; text-decoration: underline; text-decoration-color: #EF4444; text-underline-offset: 2px; }
        .tx-row .tx-card { color: #6B7280; font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 500; }
        
        .photos-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; min-height: 240px; color: #9CA3AF; }
        .photos-empty .icon { font-size: 48px; opacity: 0.2; margin-bottom: 16px; }
        .photos-empty .text { font-size: 15px; font-weight: 700; color: #6B7280; }
        .photos-empty .subtext { color: #9CA3AF; font-size: 13px; margin-top: 6px; }
        
        .fc-smart-dropdown { position: absolute; top: calc(100% + 4px); left: 102px; right: 12px; background: white; border: 1px solid #E5E7EB; border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,0.15); z-index: 10000; max-height: 280px; overflow-y: auto; display: none; font-family: 'Inter', sans-serif; }
        .fc-smart-dropdown.show { display: block; }
        .fc-smart-item { padding: 10px 14px; cursor: pointer; font-size: 12px; border-bottom: 1px solid #F3F4F6; transition: all 0.1s ease; }
        .fc-smart-item:hover, .fc-smart-item.active { background: #FAF5FF; border-left: 3px solid #6D28D9; padding-left: 11px; }
        .fc-smart-item .smart-main { font-weight: 600; color: #1F2937; font-size: 13px; }
        .fc-smart-item .smart-secondary { font-size: 11px; color: #6B7280; margin-top: 2px; }
        .fc-smart-item .smart-meta { font-size: 10px; color: #8B5CF6; margin-top: 3px; font-weight: 500; }
        .fc-smart-loading { padding: 12px 16px; color: #6B7280; font-size: 12px; text-align: center; }
        .fc-smart-empty { padding: 12px 16px; color: #9CA3AF; font-size: 12px; text-align: center; }
        .edit-mode-banner { background: #FEF3C7; border-left: 4px solid #F59E0B; padding: 8px 16px; margin-bottom: 16px; border-radius: 8px; display: flex; justify-content: space-between; align-items: center; }
        .edit-mode-banner span { font-size: 12px; color: #92400E; }
        .edit-mode-banner .badge { background: #F59E0B; color: white; padding: 2px 8px; border-radius: 12px; font-size: 10px; font-weight: 600; }
        
        @media (max-width: 1024px) {
            .history-header, .history-row { grid-template-columns: 60px 1fr 1fr 80px 70px 90px; font-size: 10px; gap: 6px; padding: 10px 12px; }
            .f2-modal { width: 100%; max-width: 100vw; height: 100vh; max-height: 100vh; border-radius: 0; }
            .active-booking-card .details { grid-template-columns: 1fr; gap: 6px; }
        }
        @media (max-width: 768px) {
            .history-header, .history-row { grid-template-columns: 50px 1fr 1fr 60px; font-size: 9px; gap: 4px; padding: 8px 10px; }
            .history-header .cell-price, .history-header .cell-action, .history-row .cell-price, .history-row .cell-action { display: none; }
            .f2-tab { font-size: 10px; padding: 10px 14px; }
            .f2-tab .badge { font-size: 7px; padding: 1px 5px; }
            .f2-modal-header .title h2 { font-size: 14px; }
            .call-details-grid { grid-template-columns: 1fr; gap: 4px; }
            .tx-header, .tx-row { grid-template-columns: 60px 70px 60px 70px 100px; font-size: 9px; gap: 4px; padding: 8px 10px; }
            .call-filter { flex-direction: column; align-items: stretch; }
            .call-filter input[type="date"] { width: 100%; }
            .active-booking-card .actions { flex-direction: column; }
            .active-booking-card .actions .btn-action { width: 100%; justify-content: center; }
            .call-history-item { grid-template-columns: 80px 1fr 60px 70px; font-size: 10px; }
        }
    </style>
</head>
<body>

<div class="top-bar">
    <div class="logo-area">
        <img src="https://myfleetcortex.com/assets/images/logo.png" alt="FleetCortex" onerror="this.src='https://myfleetcortex.com/assets/images/Favicon.png'">
        <h1><?php echo $editId ? 'EDIT BOOKING' : 'NEW BOOKING'; ?></h1>
    </div>
    <div class="header-right">
        <div class="message-icon" onclick="showMessages()"><i class="fas fa-envelope"></i><span class="message-badge" id="unreadBadge">0</span></div>
        <div class="user-info"><i class="fas fa-user"></i> <?php echo htmlspecialchars($userName); ?> <span class="user-role-badge"><?php echo $roleDisplay; ?></span></div>
        <button class="exit-btn" onclick="logout()"><i class="fas fa-sign-out-alt"></i> Exit</button>
    </div>
</div>

<div class="main-container">
    <div class="form-container">
        <div class="form-scroll-area">
            
            <?php if($editId): ?>
            <div class="edit-mode-banner">
                <span><i class="fas fa-edit"></i> You are editing booking <strong><?php echo htmlspecialchars($editBooking['booking_ref'] ?? '#' . $editId); ?></strong></span>
                <span class="badge">EDIT MODE</span>
            </div>
            <?php endif; ?>
            
            <form id="bookingForm">
                <?php if($editId): ?><input type="hidden" name="booking_id" value="<?php echo $editId; ?>"><?php endif; ?>
                <input type="hidden" name="status" id="status" value="pending_dispatch">
                <input type="hidden" name="price" id="priceHidden" value="<?php echo $editBooking['price'] ?? 0; ?>">
                <input type="hidden" name="distance" id="distanceHidden" value="<?php echo $editBooking['distance'] ?? 0; ?>">
                <input type="hidden" name="duration" id="durationHidden" value="<?php echo $editBooking['duration'] ?? 0; ?>">
                <input type="hidden" name="pickup_lat" id="pickupLat" value="<?php echo $editBooking['pickup_lat'] ?? ''; ?>">
                <input type="hidden" name="pickup_lng" id="pickupLng" value="<?php echo $editBooking['pickup_lng'] ?? ''; ?>">
                <input type="hidden" name="zone_code" id="zoneCode" value="<?php echo $editBooking['zone_code'] ?? 'TWN'; ?>">
                <input type="hidden" name="booking_ref" id="bookingRefDisplay" value="<?php echo $editBooking['booking_ref'] ?? ''; ?>">

                <div class="form-row-card">
                    <span class="row-label"><i class="far fa-clock"></i> TIME</span>
                    <input type="date" name="booking_date" id="bookingDate" class="main-input" style="flex:0.8;" tabindex="1" value="<?php echo $editBooking['booking_date'] ?? $currentDate; ?>" required>
                    <input type="time" name="booking_time" id="bookingTime" class="main-input" style="flex:0.5;" tabindex="2" value="<?php echo $editBooking['booking_time'] ?? $currentTime; ?>" required>
                    <button type="button" class="icon-btn" onclick="stopLiveClockAndSetCurrent()"><i class="fas fa-sync-alt"></i> Now</button>
                    <span style="font-size:10px; color:#6B7280; margin-left:5px;" id="liveClockIndicator">● Live</span>
                </div>

                <div class="form-row-card">
                    <span class="row-label"><i class="fas fa-map-marker-alt"></i> PICKUP</span>
                    <input type="text" name="pickup_address" id="pickupAddress" class="main-input required-field" style="flex:4;" placeholder="Type address.. or press space twice for Smart Search" tabindex="3" value="<?php echo htmlspecialchars($editBooking['pickup_address'] ?? ''); ?>" required autocomplete="off">
                    <div class="note-container"><span class="note-label">Note</span><input type="text" name="pickup_note" id="pickupNote" class="note-input" placeholder="Door/Flat" tabindex="4" value="<?php echo htmlspecialchars($editBooking['pickup_note'] ?? ''); ?>"></div>
                    <div class="icon-group">
                        <button type="button" class="icon-btn" onclick="centerOnAddress('pickupAddress')"><i class="fas fa-map-pin"></i></button>
                        <button type="button" class="icon-btn" onclick="openMap('pickupAddress')"><i class="fas fa-map"></i></button>
                    </div>
                </div>

                <div class="form-row-card" id="viaRow">
                    <span class="row-label"><i class="fas fa-road"></i> VIA</span>
                    <input type="text" name="via" id="viaAddress" class="main-input" style="flex:4;" placeholder="Type address.. or press Alt+A to add" tabindex="7" value="<?php echo htmlspecialchars($editBooking['via'] ?? ''); ?>" autocomplete="off">
                    <div class="note-container"><span class="note-label">Note</span><input type="text" name="via_note" id="viaNote" class="note-input" placeholder="Door/Flat" tabindex="8" value="<?php echo htmlspecialchars($editBooking['via_note'] ?? ''); ?>"></div>
                    <div class="icon-group">
                        <button type="button" class="icon-btn" onclick="centerOnAddress('viaAddress')"><i class="fas fa-map-pin"></i></button>
                        <button type="button" class="icon-btn" onclick="openMap('viaAddress')"><i class="fas fa-map"></i></button>
                        <button type="button" class="icon-btn" onclick="addViaStop()" title="Add another Via (Alt+A)"><i class="fas fa-plus-circle"></i></button>
                    </div>
                </div>
                <div id="viaStopsContainer"></div>

                <div class="form-row-card">
                    <span class="row-label"><i class="fas fa-flag-checkered"></i> DEST</span>
                    <input type="text" name="destination" id="destination" class="main-input required-field" style="flex:4;" placeholder="Type address.. or press space twice for Smart Search" tabindex="5" value="<?php echo htmlspecialchars($editBooking['destination'] ?? ''); ?>" required autocomplete="off">
                    <div class="note-container"><span class="note-label">Note</span><input type="text" name="dest_note" id="destNote" class="note-input" placeholder="Door/Flat" tabindex="6" value="<?php echo htmlspecialchars($editBooking['dest_note'] ?? ''); ?>"></div>
                    <div class="icon-group">
                        <button type="button" class="icon-btn" onclick="centerOnAddress('destination')"><i class="fas fa-map-pin"></i></button>
                        <button type="button" class="icon-btn" onclick="openMap('destination')"><i class="fas fa-map"></i></button>
                    </div>
                </div>

                <div class="two-col-row">
                    <div class="two-col-item"><span class="standard-label"><i class="fas fa-user"></i> NAME</span><input type="text" name="customer_name" id="customerName" class="standard-input required-field" tabindex="9" value="<?php echo htmlspecialchars($editBooking['customer_name'] ?? ''); ?>" required></div>
                    <div class="two-col-item"><span class="standard-label"><i class="fas fa-building"></i> COMPANY</span><input type="text" name="company" class="standard-input" placeholder="Company name" tabindex="10" value="<?php echo htmlspecialchars($editBooking['company'] ?? ''); ?>"></div>
                </div>

                <div class="form-row-card">
                    <span class="row-label"><i class="fas fa-sticky-note"></i> DRIVER NOTE</span>
                    <textarea name="notes" class="main-input" rows="1" style="resize: none;" placeholder="Instructions for driver..." tabindex="11"><?php echo htmlspecialchars($editBooking['notes'] ?? ''); ?></textarea>
                </div>

                <div class="form-row-card">
                    <span class="row-label"><i class="fas fa-phone"></i> PHONE</span>
                    <input type="tel" name="customer_phone" id="customerPhone" class="main-input" tabindex="12" value="<?php echo htmlspecialchars($editBooking['customer_phone'] ?? ''); ?>">
                    <div class="icon-group">
                        <button type="button" class="icon-btn" onclick="callPassenger()" title="Call Passenger (Ctrl+P)"><i class="fas fa-phone-alt"></i></button>
                        <button type="button" class="icon-btn" onclick="smsPassenger()" title="SMS Passenger"><i class="fas fa-sms"></i></button>
                        <button type="button" class="icon-btn" onclick="openF2Modal()" title="Passenger History (F2)"><i class="fas fa-history"></i></button>
                    </div>
                </div>

                <div class="form-row-card">
                    <span class="row-label"><i class="fas fa-cogs"></i> CAPABILITIES</span>
                    <div class="multi-select-container">
                        <button type="button" class="multi-select-btn" id="capabilitiesBtn" onclick="toggleCapabilitiesDropdown()" tabindex="13">
                            <span id="selectedCapabilitiesDisplay">Select capabilities...</span>
                            <i class="fas fa-chevron-down"></i>
                        </button>
                        <div class="multi-select-dropdown" id="capabilitiesDropdown">
                            <?php foreach($capabilitiesList as $key => $label): ?>
                            <div class="multi-select-option">
                                <input type="checkbox" name="capabilities[]" value="<?php echo $key; ?>" id="cap_<?php echo $key; ?>" <?php echo in_array($key, $savedCapabilities) ? 'checked' : ''; ?> onchange="updateCapabilitiesDisplay()">
                                <label for="cap_<?php echo $key; ?>"><?php echo $label; ?></label>
                            </div>
                            <?php endforeach; ?>
                        </div>
                    </div>
                </div>

                <div class="two-col-row">
                    <div class="two-col-item"><span class="standard-label"><i class="fas fa-users"></i> PASS</span><select name="passengers" class="standard-select" tabindex="14"><?php foreach($passengerOptions as $p): ?><option value="<?php echo $p; ?>" <?php echo ($editBooking['passengers'] ?? 1) == $p ? 'selected' : ''; ?>><?php echo $p; ?></option><?php endforeach; ?></select></div>
                    <div class="two-col-item"><span class="standard-label"><i class="fas fa-suitcase"></i> LUG</span><select name="luggage" class="standard-select" tabindex="15"><?php foreach($luggageOptions as $l): ?><option value="<?php echo $l; ?>" <?php echo ($editBooking['suitcases'] ?? 0) == $l ? 'selected' : ''; ?>><?php echo $l; ?> bags</option><?php endforeach; ?></select></div>
                </div>

                <div class="form-row-card"><span class="row-label"><i class="fas fa-car"></i> REQ VEHICLE</span><select name="vehicle_id" class="standard-select" tabindex="16"><option value="">-- Any --</option><?php foreach($vehicles as $v): ?><option value="<?php echo $v['id']; ?>" <?php echo ($editBooking['vehicle_id'] ?? '') == $v['id'] ? 'selected' : ''; ?>><?php echo htmlspecialchars($v['callsign']); ?></option><?php endforeach; ?></select></div>

                <div class="form-row-card"><span class="row-label"><i class="fas fa-truck"></i> VEHICLE TYPE</span><select name="vehicle_type" class="standard-select" tabindex="17"><option value="">-- Select Type --</option><?php foreach($vehicleTypes as $vt): ?><option value="<?php echo $vt; ?>" <?php echo ($editBooking['vehicle_type'] ?? '') == $vt ? 'selected' : ''; ?>><?php echo $vt; ?></option><?php endforeach; ?></select></div>

                <div class="form-row-card">
                    <span class="row-label"><i class="fas fa-id-card"></i> DRIVER</span>
                    <select name="driver_id" id="requestedDriver" class="standard-select" style="flex:2;" tabindex="18">
                        <option value="">-- Auto-Assign --</option>
                        <?php foreach($drivers as $d): ?>
                        <option value="<?php echo $d['id']; ?>" <?php echo ($editBooking['driver_id'] ?? '') == $d['id'] ? 'selected' : ''; ?> data-phone="<?php echo htmlspecialchars($d['phone'] ?? ''); ?>" data-name="<?php echo htmlspecialchars($d['driver_name']); ?>">
                            <?php echo htmlspecialchars($d['driver_name']); ?> (<?php echo ucfirst($d['status']); ?>)
                        </option>
                        <?php endforeach; ?>
                    </select>
                    <div class="icon-group">
                        <button type="button" class="icon-btn" onclick="callDriver()" title="Call Driver (Ctrl+D)"><i class="fas fa-phone-alt"></i></button>
                        <button type="button" class="icon-btn" onclick="messageDriver()" title="Message Driver"><i class="fas fa-comment-dots"></i></button>
                        <button type="button" class="icon-btn" onclick="showDriverLocation()" title="Driver Location"><i class="fas fa-map-marker-alt"></i></button>
                        <button type="button" class="icon-btn" id="refreshDriversBtn" onclick="refreshDriverList()"><i class="fas fa-sync-alt"></i></button>
                    </div>
                </div>

                <div class="form-row-card"><span class="row-label"><i class="fas fa-credit-card"></i> ACCOUNT</span><select name="account_id" class="standard-select" tabindex="19"><option value="">-- None --</option><?php foreach($accounts as $acc): ?><option value="<?php echo $acc['id']; ?>" <?php echo ($editBooking['account_id'] ?? '') == $acc['id'] ? 'selected' : ''; ?>><?php echo htmlspecialchars($acc['company_name']); ?></option><?php endforeach; ?></select></div>

                <div class="two-col-row">
                    <div class="two-col-item"><span class="standard-label"><i class="fas fa-tag"></i> YOUR REF</span><input type="text" name="your_ref" class="standard-input" tabindex="20" value="<?php echo htmlspecialchars($editBooking['your_ref'] ?? ''); ?>"></div>
                    <div class="two-col-item"><span class="standard-label"><i class="fas fa-hashtag"></i> OUR REF</span><input type="text" name="our_ref" class="standard-input" tabindex="21" value="<?php echo htmlspecialchars($editBooking['our_ref'] ?? ''); ?>"></div>
                </div>

                <div class="two-col-row">
                    <div class="two-col-item"><span class="standard-label"><i class="fas fa-chart-line"></i> PRIORITY</span><select name="priority" class="standard-select" tabindex="22"><?php foreach($priorityOptions as $p): ?><option value="<?php echo $p; ?>" <?php echo ($editBooking['priority'] ?? 'Medium') == $p ? 'selected' : ''; ?>><?php echo $p; ?></option><?php endforeach; ?></select></div>
                    <div class="two-col-item"><span class="standard-label"><i class="fas fa-gem"></i> LOYALTY</span><input type="text" name="loyalty_card" class="standard-input" placeholder="Card number" tabindex="23" value="<?php echo htmlspecialchars($editBooking['loyalty_card'] ?? ''); ?>"></div>
                </div>

                <div class="form-row-card"><span class="row-label"><i class="fas fa-undo-alt"></i> RETURN TIME</span><input type="datetime-local" name="return_time" class="main-input" tabindex="24" value="<?php echo isset($editBooking['return_time']) ? date('Y-m-d\TH:i', strtotime($editBooking['return_time'])) : ''; ?>"></div>

                <div class="form-row-card"><span class="row-label"><i class="fas fa-plane-arrival"></i> FLIGHT #</span><div style="flex:2;"><input type="text" name="flight_number" id="flightNumber" class="main-input" placeholder="e.g., BA123" tabindex="25" value="<?php echo htmlspecialchars($editBooking['flight_number'] ?? ''); ?>"><div id="flightInfo" class="flight-info"></div></div><div class="icon-group"><button type="button" class="icon-btn" onclick="fetchFlightStatus()"><i class="fas fa-search"></i></button></div></div>

                <div class="form-row-card"><span class="row-label"><i class="fas fa-clipboard-list"></i> LUGGAGE NOTE</span><input type="text" name="luggage_note" class="main-input" placeholder="Special instructions" tabindex="26" value="<?php echo htmlspecialchars($editBooking['luggage_note'] ?? ''); ?>"></div>

                <div class="form-row-card" style="flex-wrap: wrap; padding: 10px 12px;"><span class="row-label"><i class="fas fa-redo-alt"></i> REPEAT</span><div class="repeat-days-container"><?php foreach($repeatDaysList as $day): ?><button type="button" class="day-toggle" data-day="<?php echo $day; ?>" onclick="toggleRepeatDay(this)"><?php echo $day; ?></button><?php endforeach; ?></div></div><input type="hidden" name="repeat_days" id="repeatDaysInput" value="<?php echo htmlspecialchars($editBooking['repeat_days'] ?? ''); ?>">

                <div class="form-row-card"><span class="row-label"><i class="fas fa-calendar-times"></i> REPEAT END</span><input type="date" name="repeat_end" class="main-input" tabindex="27" value="<?php echo $editBooking['repeat_end'] ?? ''; ?>"></div>

                <div class="two-col-row"><div class="two-col-item"><span class="standard-label"><i class="fas fa-plane"></i> FLT ORIGIN</span><input type="text" name="flight_origin" class="standard-input" placeholder="Origin" tabindex="28" value="<?php echo htmlspecialchars($editBooking['flight_origin'] ?? ''); ?>"></div><div class="two-col-item"><span class="standard-label"><i class="fas fa-hashtag"></i> RETURN FLT</span><input type="text" name="return_flight" class="standard-input" placeholder="Return flight #" tabindex="29" value="<?php echo htmlspecialchars($editBooking['return_flight'] ?? ''); ?>"></div></div>

                <div class="form-row-card"><span class="row-label"><i class="fas fa-folder-open"></i> OFFICE NOTE</span><textarea name="office_note" class="main-input" rows="1" style="resize: none;" placeholder="Internal notes..." tabindex="30"><?php echo htmlspecialchars($editBooking['office_note'] ?? ''); ?></textarea></div>

                <div class="form-row-card"><span class="row-label"><i class="fas fa-envelope"></i> EMAIL</span><input type="email" name="email" class="main-input" placeholder="customer@example.com" tabindex="31" value="<?php echo htmlspecialchars($editBooking['email'] ?? ''); ?>"></div>
            </form>
        </div>
        
        <div class="form-footer">
            <div style="display: flex; gap: 6px;">
                <button type="button" class="ffbtn ffbtn-cli" onclick="cliLookup()"><i class="fas fa-id-card"></i> CLI</button>
                <button type="button" class="ffbtn ffbtn-ivr" onclick="showIVRStatus()"><i class="fas fa-microphone-alt"></i> IVR</button>
                <button type="button" class="ffbtn" style="background:#8B5CF6; color:white;" onclick="showShortcutHelp()"><i class="fas fa-keyboard"></i> ?</button>
            </div>
            <div style="display: flex; gap: 6px;">
                <?php if($editId): ?>
                <button type="button" class="ffbtn" style="background:#8B5CF6; color:white;" onclick="returnJourney()"><i class="fas fa-copy"></i> RETURN JOURNEY <span class="shortcut">(Alt+R)</span></button>
                <button type="button" class="ffbtn" style="background:#10B981; color:white;" onclick="sendBookingConfirmation()"><i class="fas fa-envelope"></i> SEND CONFIRM</button>
                <?php endif; ?>
                <button type="button" class="ffbtn ffbtn-book" id="saveBookingBtn" onclick="submitBooking()"><i class="fas fa-save"></i> SAVE &amp; BOOK <span class="shortcut">(Ctrl+Enter)</span><span id="saveSpinner" style="display: none;"><span class="spinner-small"></span></span></button>
                <button type="button" class="ffbtn ffbtn-hold" onclick="saveAsHold()"><i class="fas fa-pause"></i> SAVE &amp; HOLD <span class="shortcut">(Home)</span></button>
                <button type="button" class="ffbtn ffbtn-clear" onclick="clearForm()"><i class="fas fa-eraser"></i> CLEAR</button>
            </div>
        </div>
    </div>

    <div class="right-panel">
        <div class="timeline-section"><div class="timeline-label">PREBOOK TIMELINE</div><div class="timeline-ruler"><div class="timeline-occupied"></div><div class="tick-mark"><span>10</span></div><div class="tick-mark"><span>15</span></div><div class="tick-mark"><span>30</span></div><div class="tick-mark"><span>45</span></div><div class="tick-mark"><span>11</span></div><div class="tick-mark"><span>15</span></div><div class="tick-mark"><span>30</span></div><div class="tick-mark"><span>45</span></div><div class="tick-mark"><span>12</span></div></div></div>
        <div class="eta-banner"><div class="eta-card vehicle"><span class="eta-label">VEH</span><span class="eta-value" id="etaNearestVehicle">0</span><span class="eta-label">ETA</span><span class="eta-value" id="etaNearestTime">0</span><span class="eta-label">min</span></div><div class="eta-card average"><span class="eta-label">AVERAGE ETA</span><span class="eta-value" id="etaAverageTime">0</span><span class="eta-label">min</span></div></div>
        <div class="job-details"><div class="detail-row"><span class="detail-label">Distance</span><span class="detail-value"><span id="displayDistance"><?php echo number_format($editBooking['distance'] ?? 0, 1); ?></span> mi</span></div><div class="detail-row"><span class="detail-label">Duration</span><span class="detail-value"><span id="displayDuration"><?php echo round($editBooking['duration'] ?? 0); ?></span> min</span></div><div class="detail-row"><span class="detail-label">Price</span><span class="detail-value">£<span id="displayPrice"><?php echo number_format($editBooking['price'] ?? 0, 2); ?></span></span></div><div class="tariff">Tariff: Mileage £<?php echo number_format($baseMileageRate, 2); ?>/mi + Hire £<?php echo number_format($baseHireRate, 2); ?></div></div>
        <div class="map-container"><div id="bookingMap"></div><div class="map-controls"><button class="map-btn" onclick="zoomIn()"><i class="fas fa-search-plus"></i></button><button class="map-btn" onclick="zoomOut()"><i class="fas fa-search-minus"></i></button><button class="map-btn" onclick="centerMap()"><i class="fas fa-location-arrow"></i></button><button class="map-btn" onclick="showNearbyVehicles()"><i class="fas fa-car-side"></i> Nearby</button></div></div>
        <div class="tables-container">
            <div class="table-wrapper">
                <div class="table-scroll">
                    <table class="data-table">
                        <thead><tr><th>Callsign</th><th>Status</th><th>Zone</th><th>ETA</th></tr></thead>
                        <tbody id="driverQueueList"></tbody>
                    </table>
                </div>
            </div>
            <div class="zone-wrapper">
                <div class="zone-scroll">
                    <table class="data-table">
                        <thead><tr><th>Zone</th><th>Veh</th><th>Clear</th><th>Busy</th><th>Book</th></tr></thead>
                        <tbody id="zoneStatsList"></tbody>
                    </table>
                </div>
            </div>
        </div>
        <div class="footer-summary" id="footerSummary"><span class="summary-total">Total: <?php echo $totalCount; ?> vehicles</span><span class="summary-clear">Clear: <?php echo $availableCount; ?></span><span class="summary-busy">Busy: <?php echo $busyCount; ?></span><span class="summary-bookings">Bookings: 0</span></div>
    </div>
</div>

<div class="footer-bar">
    <div class="shortcuts-group">
        <span><span class="shortcut-key">Tab</span> Next Field</span>
        <span><span class="shortcut-key">F2</span> History</span>
        <span><span class="shortcut-key">F9</span> Tariff</span>
        <span><span class="shortcut-key">Insert</span> Price</span>
        <span><span class="shortcut-key">Alt+A</span> Add Via</span>
        <span><span class="shortcut-key">Alt+R</span> Return</span>
        <span><span class="shortcut-key">Ctrl+Enter</span> Book</span>
        <span><span class="shortcut-key">Home</span> Hold</span>
        <span><span class="shortcut-key">End</span> Book</span>
        <span><span class="shortcut-key">Ctrl+P</span> Call Pass</span>
        <span><span class="shortcut-key">Ctrl+D</span> Call Driver</span>
        <span><span class="shortcut-key">?</span> Help</span>
    </div>
    <div id="footerHint">Press <span style="color:#8B5CF6;font-weight:600;">F2</span> for Passenger History | <span style="color:#8B5CF6;font-weight:600;">Insert</span> = Price override</div>
</div>

<!-- ============================================================
     F2 MODAL - PASSENGER HISTORY (REAL DATA ONLY)
     ============================================================ -->
<div class="f2-modal-overlay" id="f2Modal">
    <div class="f2-modal">
        <div class="f2-modal-header">
            <div class="title">
                <h2>
                    <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="color:#A855F7;margin-right:8px;vertical-align:middle;">
                        <path d="M3 3v5h5"/>
                        <path d="M3.05 13A9 9 0 1 0 6 5.3L3 8"/>
                        <path d="M12 7v5l4 2"/>
                    </svg>
                    Passenger History
                </h2>
                <span class="phone-badge">
                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                        <path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"/>
                    </svg>
                    <span id="displayPhone"><?php echo $editBooking['customer_phone'] ?? 'Enter phone number'; ?></span>
                </span>
            </div>
            <button class="close-btn" onclick="closeF2Modal()">
                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
                    <line x1="18" y1="6" x2="6" y2="18"/>
                    <line x1="6" y1="6" x2="18" y2="18"/>
                </svg>
                Close (Esc)
            </button>
        </div>

        <div class="f2-tabs" id="f2Tabs">
            <button class="f2-tab active" data-tab="tab-active" onclick="switchF2Tab('tab-active')">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                    <path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"/>
                    <line x1="12" y1="9" x2="12" y2="13"/>
                    <line x1="12" y1="17" x2="12.01" y2="17"/>
                </svg>
                Active <span class="badge" id="activeBadge">0</span>
            </button>
            <button class="f2-tab" data-tab="tab-history" onclick="switchF2Tab('tab-history')">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                    <line x1="8" y1="6" x2="21" y2="6"/>
                    <line x1="8" y1="12" x2="21" y2="12"/>
                    <line x1="8" y1="18" x2="21" y2="18"/>
                    <line x1="3" y1="6" x2="3.01" y2="6"/>
                    <line x1="3" y1="12" x2="3.01" y2="12"/>
                    <line x1="3" y1="18" x2="3.01" y2="18"/>
                </svg>
                History <span class="badge" id="historyBadge">0</span>
            </button>
            <button class="f2-tab" data-tab="tab-favorites" onclick="switchF2Tab('tab-favorites')">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                    <polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/>
                </svg>
                Favorites
            </button>
            <button class="f2-tab" data-tab="tab-call" onclick="switchF2Tab('tab-call')">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                    <path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"/>
                </svg>
                Call Details
            </button>
            <button class="f2-tab" data-tab="tab-changes" onclick="switchF2Tab('tab-changes')">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                    <polyline points="1 4 1 10 7 10"/>
                    <path d="M3.51 15a9 9 0 1 0 2.13-9.36L1 10"/>
                </svg>
                Change Log
            </button>
            <button class="f2-tab" data-tab="tab-transactions" onclick="switchF2Tab('tab-transactions')">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                    <rect x="1" y="4" width="22" height="16" rx="2" ry="2"/>
                    <line x1="1" y1="10" x2="23" y2="10"/>
                </svg>
                Transactions
            </button>
            <button class="f2-tab" data-tab="tab-photos" onclick="switchF2Tab('tab-photos')">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                    <rect x="3" y="3" width="18" height="18" rx="2" ry="2"/>
                    <circle cx="8.5" cy="8.5" r="1.5"/>
                    <polyline points="21 15 16 10 5 21"/>
                </svg>
                Photos <span class="badge">0</span>
            </button>
        </div>

        <div class="f2-modal-body" id="f2ModalBody">
            <!-- TAB 1: ACTIVE BOOKINGS -->
            <div class="f2-tab-content active" id="tab-active">
                <div id="activeContent">
                    <div class="no-active">
                        <div class="icon"><i class="fas fa-search"></i></div>
                        <div class="text">Enter a phone number to check active bookings</div>
                        <div class="subtext">Press F2 or click the history button after entering a phone number</div>
                    </div>
                </div>
            </div>

            <!-- TAB 2: HISTORY -->
            <div class="f2-tab-content" id="tab-history">
                <div id="historyContent">
                    <div class="empty-state">
                        <div class="icon"><i class="fas fa-inbox"></i></div>
                        <div class="text">No Booking History</div>
                        <div class="subtext">Enter a phone number to view booking history</div>
                    </div>
                </div>
            </div>

            <!-- TAB 3: FAVORITES -->
            <div class="f2-tab-content" id="tab-favorites">
                <div id="favoritesContent">
                    <div class="empty-state">
                        <div class="icon"><i class="fas fa-star"></i></div>
                        <div class="text">No Favorites</div>
                        <div class="subtext">No saved addresses found</div>
                    </div>
                </div>
            </div>

            <!-- TAB 4: CALL DETAILS -->
            <div class="f2-tab-content" id="tab-call">
                <div id="callContent">
                    <div class="empty-state">
                        <div class="icon"><i class="fas fa-phone"></i></div>
                        <div class="text">No Call Records</div>
                        <div class="subtext">No call details found</div>
                    </div>
                </div>
            </div>

            <!-- TAB 5: CHANGE LOG -->
            <div class="f2-tab-content" id="tab-changes">
                <div id="changesContent">
                    <div class="empty-state">
                        <div class="icon"><i class="fas fa-history"></i></div>
                        <div class="text">No Change History</div>
                        <div class="subtext">No audit trail found</div>
                    </div>
                </div>
            </div>

            <!-- TAB 6: TRANSACTIONS -->
            <div class="f2-tab-content" id="tab-transactions">
                <div id="transactionsContent">
                    <div class="empty-state">
                        <div class="icon"><i class="fas fa-credit-card"></i></div>
                        <div class="text">No Transactions</div>
                        <div class="subtext">No payment records found</div>
                    </div>
                </div>
            </div>

            <!-- TAB 7: PHOTOS -->
            <div class="f2-tab-content" id="tab-photos">
                <div id="photosContent">
                    <div class="photos-empty">
                        <div class="icon">🖼️</div>
                        <div class="text">NO PICTURES ATTACHED</div>
                        <div class="subtext">No images uploaded for this journey</div>
                    </div>
                </div>
            </div>
        </div>

        <div class="f2-modal-footer">
            <button class="btn-close" onclick="closeF2Modal()">
                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
                    <line x1="18" y1="6" x2="6" y2="18"/>
                    <line x1="6" y1="6" x2="18" y2="18"/>
                </svg>
                Close
            </button>
        </div>
    </div>
</div>

<!-- PRICING MODAL -->
<div id="pricingModal" class="fc-modal-overlay"><div class="fc-modal"><div class="fc-modal-header"><h3><i class="fas fa-tag"></i> Edit Pricing</h3><button class="close-modal" onclick="closePricingModal()">&times;</button></div><div class="fc-modal-body"><div class="modal-field"><label><i class="fas fa-pound-sign"></i> Cost (Driver Earnings)</label><input type="number" id="modalCost" step="0.01" value="0.00"></div><div class="modal-field"><label><i class="fas fa-receipt"></i> Price (Customer Pays)</label><input type="number" id="modalPrice" step="0.01" value="0.00"></div><div style="display:flex;gap:8px;margin-bottom:16px;align-items:center;justify-content:center;flex-wrap:wrap;">
    <div style="display:flex;align-items:center;gap:6px;background:#F3F4F6;padding:6px 12px;border-radius:10px;border:1px solid #E5E7EB;">
        <span style="font-size:11px;font-weight:600;color:#6B7280;">Custom %</span>
        <input type="number" id="customPercentInput" value="" placeholder="e.g. 7" style="width:55px;padding:5px 8px;border:1px solid #D1D5DB;border-radius:6px;font-size:13px;font-weight:600;text-align:center;outline:none;" min="-99" max="999" step="1">
        <button type="button" class="icon-btn" onclick="applyCustomPercent()" style="padding:5px 12px;font-size:11px;font-weight:600;background:var(--purple-primary);color:white;border-color:var(--purple-primary);">Apply</button>
    </div>
    <div style="width:1px;height:28px;background:#E5E7EB;"></div>
    <button type="button" class="icon-btn" onclick="applyPercent(5)" style="padding:5px 10px;font-size:10px;font-weight:600;">+5%</button>
    <button type="button" class="icon-btn" onclick="applyPercent(10)" style="padding:5px 10px;font-size:10px;font-weight:600;">+10%</button>
    <button type="button" class="icon-btn" onclick="applyPercent(15)" style="padding:5px 10px;font-size:10px;font-weight:600;">+15%</button>
    <button type="button" class="icon-btn" onclick="applyPercent(25)" style="padding:5px 10px;font-size:10px;font-weight:600;">+25%</button>
</div><div class="modal-sync"><label><input type="checkbox" id="syncPriceCost"><span>Same Cost &amp; Price</span></label></div></div><div class="fc-modal-footer"><button class="btn-ok" onclick="savePricing()">OK</button><button class="btn-remove" onclick="removePricing()">Remove</button><button class="btn-cancel-modal" onclick="closePricingModal()">Cancel</button></div></div></div>

<!-- SEND CONFIRMATION MODAL -->
<div id="confirmModal" class="fc-modal-overlay">
    <div class="fc-modal" style="width:520px;">
        <div class="fc-modal-header">
            <h3><i class="fas fa-envelope"></i> Send Confirmation</h3>
            <button class="close-modal" onclick="closeConfirmModal()">&times;</button>
        </div>
        <div class="fc-modal-body">
            <div style="background:#F8FAFC;border-radius:8px;padding:12px;margin-bottom:16px;font-size:12px;border:1px solid #E5E7EB;">
                <div style="display:flex;justify-content:space-between;padding:4px 0;"><span style="color:#6B7280;">📞 Phone</span><span style="font-weight:600;color:#111827;" id="confirmPhoneDisplay">No phone</span></div>
                <div style="display:flex;justify-content:space-between;padding:4px 0;"><span style="color:#6B7280;">✉️ Email</span><span style="font-weight:600;color:#111827;" id="confirmEmailDisplay">No email</span></div>
            </div>
            <div class="modal-field">
                <label><i class="fas fa-mobile-alt"></i> Send via SMS</label>
                <button class="btn-ok" style="width:100%;padding:10px;" onclick="sendSmsConfirmation()"><i class="fas fa-sms"></i> Send SMS Confirmation</button>
            </div>
            <div class="modal-field">
                <label><i class="fas fa-envelope"></i> Send via Email</label>
                <button class="btn-ok" style="width:100%;padding:10px;background:#2563EB;" onclick="sendEmailConfirmation()"><i class="fas fa-envelope"></i> Send Email Confirmation</button>
            </div>
            <div class="modal-field">
                <label><i class="fas fa-file-invoice"></i> Send Invoice</label>
                <button class="btn-ok" style="width:100%;padding:10px;background:#007F3E;" onclick="sendInvoiceEmail()"><i class="fas fa-file-invoice"></i> Email Invoice / Receipt</button>
            </div>
        </div>
        <div class="fc-modal-footer">
            <button class="btn-cancel-modal" onclick="closeConfirmModal()">Cancel</button>
        </div>
    </div>
</div>

<!-- MESSAGE MODAL -->
<div id="messageModal" class="fc-modal-overlay"><div class="fc-modal" style="width:520px;"><div class="fc-modal-header"><h3><i class="fas fa-comment-dots"></i> Send Message</h3><button class="close-modal" onclick="closeMessageModal()">&times;</button></div><div class="fc-modal-body"><div class="modal-field"><label><i class="fas fa-bullseye"></i> Target</label><select id="messageTarget" class="standard-select" style="width:100%;padding:10px 14px;font-size:13px;"><option value="">-- Select Target --</option><option value="driver">Selected Driver</option><option value="all">All Drivers</option><option value="dispatcher">Dispatcher</option></select></div><div class="modal-field"><label><i class="fas fa-keyboard"></i> Message</label><textarea id="messageText" rows="4" style="width:100%;padding:12px 16px;border:2px solid #E5E7EB;border-radius:16px;font-size:14px;resize:none;outline:none;font-family:'Inter',sans-serif;" placeholder="Type your message..."></textarea></div><div style="display:flex;gap:6px;flex-wrap:wrap;margin-bottom:16px;"><button type="button" class="icon-btn" onclick="insertMacro('.1')" style="padding:5px 10px;font-size:10px;font-weight:600;">.1 Call Office</button><button type="button" class="icon-btn" onclick="insertMacro('.2')" style="padding:5px 10px;font-size:10px;font-weight:600;">.2 Where?</button><button type="button" class="icon-btn" onclick="insertMacro('.3')" style="padding:5px 10px;font-size:10px;font-weight:600;">.3 Proceed</button><button type="button" class="icon-btn" onclick="insertMacro('.4')" style="padding:5px 10px;font-size:10px;font-weight:600;">.4 Waiting</button><button type="button" class="icon-btn" onclick="insertMacro('.5')" style="padding:5px 10px;font-size:10px;font-weight:600;">.5 Drop Usual</button><button type="button" class="icon-btn" onclick="insertMacro('.6')" style="padding:5px 10px;font-size:10px;font-weight:600;">.6 ETA?</button><button type="button" class="icon-btn" onclick="insertMacro('.7')" style="padding:5px 10px;font-size:10px;font-weight:600;">.7 Return Base</button><button type="button" class="icon-btn" onclick="insertMacro('.8')" style="padding:5px 10px;font-size:10px;font-weight:600;background:#EF4444;color:white;border-color:#EF4444;">.8 EMERGENCY</button></div><div style="display:flex;gap:16px;align-items:center;margin-bottom:8px;"><label style="display:flex;align-items:center;gap:8px;font-size:12px;cursor:pointer;"><input type="checkbox" id="messageEmergency" style="width:16px;height:16px;accent-color:#EF4444;"><span style="color:#EF4444;font-weight:600;">Emergency</span></label><label style="display:flex;align-items:center;gap:8px;font-size:12px;cursor:pointer;"><input type="checkbox" id="messageTTS" style="width:16px;height:16px;accent-color:var(--purple-primary);"><span>TTS (Text-to-Speech)</span></label><label style="display:flex;align-items:center;gap:8px;font-size:12px;cursor:pointer;"><input type="checkbox" id="messageSilent" style="width:16px;height:16px;accent-color:var(--purple-primary);"><span>Silent Push</span></label></div></div><div class="fc-modal-footer"><button class="btn-ok" onclick="sendMessage()"><i class="fas fa-paper-plane"></i> Send</button><button class="btn-cancel-modal" onclick="closeMessageModal()">Cancel</button></div></div></div>

<!-- SHORTCUT HELP MODAL -->
<div id="shortcutHelpModal" class="fc-modal-overlay"><div class="fc-modal" style="width:720px;max-width:95%;"><div class="fc-modal-header"><h3><i class="fas fa-keyboard"></i> Keyboard Shortcuts</h3><button class="close-modal" onclick="closeShortcutHelp()">&times;</button></div><div class="fc-modal-body" style="max-height:500px;overflow-y:auto;">
    <div style="display:grid;grid-template-columns:1fr 1fr;gap:8px 24px;font-size:12px;">
        <div style="display:flex;justify-content:space-between;padding:4px 0;border-bottom:1px solid #F3F4F6;"><span><span style="font-weight:700;color:var(--purple-primary);font-family:monospace;background:#F3F4F6;padding:2px 8px;border-radius:4px;display:inline-block;min-width:60px;text-align:center;">F2</span> <span style="color:#374151;">Passenger History</span></span><span><span style="font-weight:700;color:var(--purple-primary);font-family:monospace;background:#F3F4F6;padding:2px 8px;border-radius:4px;display:inline-block;min-width:60px;text-align:center;">F9</span> <span style="color:#374151;">Tariff &amp; Estimation</span></span></div>
        <div style="display:flex;justify-content:space-between;padding:4px 0;border-bottom:1px solid #F3F4F6;"><span><span style="font-weight:700;color:var(--purple-primary);font-family:monospace;background:#F3F4F6;padding:2px 8px;border-radius:4px;display:inline-block;min-width:60px;text-align:center;">Insert</span> <span style="color:#374151;">Manual Price Override</span></span><span><span style="font-weight:700;color:var(--purple-primary);font-family:monospace;background:#F3F4F6;padding:2px 8px;border-radius:4px;display:inline-block;min-width:60px;text-align:center;">Alt+A</span> <span style="color:#374151;">Add Via / Mid-Trip Stop</span></span></div>
        <div style="display:flex;justify-content:space-between;padding:4px 0;border-bottom:1px solid #F3F4F6;"><span><span style="font-weight:700;color:var(--purple-primary);font-family:monospace;background:#F3F4F6;padding:2px 8px;border-radius:4px;display:inline-block;min-width:60px;text-align:center;">Alt+R</span> <span style="color:#374151;">Return Journey</span></span><span><span style="font-weight:700;color:var(--purple-primary);font-family:monospace;background:#F3F4F6;padding:2px 8px;border-radius:4px;display:inline-block;min-width:60px;text-align:center;">Ctrl+Enter</span> <span style="color:#374151;">Save &amp; Book</span></span></div>
        <div style="display:flex;justify-content:space-between;padding:4px 0;border-bottom:1px solid #F3F4F6;"><span><span style="font-weight:700;color:var(--purple-primary);font-family:monospace;background:#F3F4F6;padding:2px 8px;border-radius:4px;display:inline-block;min-width:60px;text-align:center;">Home</span> <span style="color:#374151;">Save &amp; Hold</span></span><span><span style="font-weight:700;color:var(--purple-primary);font-family:monospace;background:#F3F4F6;padding:2px 8px;border-radius:4px;display:inline-block;min-width:60px;text-align:center;">End</span> <span style="color:#374151;">Save &amp; Book</span></span></div>
        <div style="display:flex;justify-content:space-between;padding:4px 0;border-bottom:1px solid #F3F4F6;"><span><span style="font-weight:700;color:var(--purple-primary);font-family:monospace;background:#F3F4F6;padding:2px 8px;border-radius:4px;display:inline-block;min-width:60px;text-align:center;">Ctrl+P</span> <span style="color:#374151;">Call Passenger</span></span><span><span style="font-weight:700;color:var(--purple-primary);font-family:monospace;background:#F3F4F6;padding:2px 8px;border-radius:4px;display:inline-block;min-width:60px;text-align:center;">Ctrl+D</span> <span style="color:#374151;">Call Driver</span></span></div>
        <div style="display:flex;justify-content:space-between;padding:4px 0;border-bottom:1px solid #F3F4F6;"><span><span style="font-weight:700;color:var(--purple-primary);font-family:monospace;background:#F3F4F6;padding:2px 8px;border-radius:4px;display:inline-block;min-width:60px;text-align:center;">Ctrl+H</span> <span style="color:#374151;">Passenger History</span></span><span><span style="font-weight:700;color:var(--purple-primary);font-family:monospace;background:#F3F4F6;padding:2px 8px;border-radius:4px;display:inline-block;min-width:60px;text-align:center;">Esc</span> <span style="color:#374151;">Close / Clear Form</span></span></div>
    </div>
</div><div class="fc-modal-footer"><button class="btn-ok" onclick="closeShortcutHelp()">Close</button></div></div></div>

<script>
    // ============================================================
    // GLOBALS
    // ============================================================
    mapboxgl.accessToken = 'pk.eyJ1IjoiZmxlZXRjb3J0ZXgiLCJhIjoiY21vanVyajFwMDJyaTJycjJvajl6ZHptbCJ9.kV7Svk17yrF0_bISF9iW1A';
    let map, pickupMarker, dropoffMarker, viaMarker;
    let driversData = <?php echo json_encode($drivers); ?>;
    let zonesData = <?php echo json_encode($zones); ?>;
    let baseMileageRate = <?php echo $baseMileageRate; ?>;
    let baseHireRate = <?php echo $baseHireRate; ?>;
    let airportSurcharge = <?php echo $airportSurcharge; ?>;
    let companyId = <?php echo $companyId; ?>;
    let isPickupSet = false, isDropoffSet = false, isViaActive = false;
    let smartSearchInstances = {};
    let currentBookingId = <?php echo $editId ?: 0; ?>;
    let viaStopCount = 0;
    let isAudioPlaying = false;
    let audioInterval = null;

    // ============================================================
    // TOAST NOTIFICATION
    // ============================================================
    function showToast(msg, type) {
        let t = document.createElement('div');
        t.className = 'toast ' + (type || 'info');
        t.innerHTML = '<i class="fas fa-info-circle"></i> ' + msg;
        document.body.appendChild(t);
        setTimeout(() => t.remove(), 3000);
    }

    function showToastF2(msg, type) {
        var existing = document.querySelector('.f2-toast');
        if (existing) existing.remove();
        var toast = document.createElement('div');
        toast.className = 'f2-toast ' + (type || 'info');
        toast.textContent = msg;
        document.body.appendChild(toast);
        setTimeout(function() { if (toast.parentNode) toast.remove(); }, 3000);
    }

    // ============================================================
    // F2 MODAL CONTROLS - LOADS REAL DATA FOR SPECIFIC PHONE
    // ============================================================
    function openF2Modal() {
        const phone = document.getElementById('customerPhone').value.trim();
        if (!phone) {
            showToast('❌ Please enter passenger phone number', 'error');
            return;
        }
        
        document.getElementById('displayPhone').textContent = phone;
        document.getElementById('f2Modal').classList.add('active');
        switchF2Tab('tab-active');
        
        // Load real data for this specific phone number
        loadPassengerDataForPhone(phone);
    }

    function closeF2Modal() {
        document.getElementById('f2Modal').classList.remove('active');
        if (audioInterval) {
            clearInterval(audioInterval);
            audioInterval = null;
        }
        isAudioPlaying = false;
        var playBtn = document.getElementById('audioPlayBtn');
        if (playBtn) {
            playBtn.innerHTML = '<svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor" stroke="none"><polygon points="5 3 19 12 5 21 5 3"/></svg> PLAY';
        }
    }

    function switchF2Tab(tabId) {
        document.querySelectorAll('.f2-tab').forEach(tab => {
            tab.classList.toggle('active', tab.dataset.tab === tabId);
        });
        document.querySelectorAll('.f2-tab-content').forEach(content => {
            content.classList.toggle('active', content.id === tabId);
        });
    }

    // ============================================================
    // LOAD REAL DATA FROM API FOR SPECIFIC PHONE NUMBER
    // ============================================================
    function loadPassengerDataForPhone(phone) {
        console.log('🔍 Loading data for phone:', phone);
        showToastF2('📋 Loading data for ' + phone + '...', 'info');

        // ============================================================
        // 1. LOAD ACTIVE BOOKINGS FOR THIS PHONE
        // ============================================================
        fetch('/admin/api/get_active_bookings.php?phone=' + encodeURIComponent(phone) + '&company_id=' + companyId)
            .then(response => response.json())
            .then(data => {
                console.log('📊 Active bookings response:', data);
                const container = document.getElementById('activeContent');
                if (data.success && data.bookings && data.bookings.length > 0) {
                    // Filter bookings that match this phone number exactly
                    const phoneClean = phone.replace(/\s/g, '');
                    const filteredBookings = data.bookings.filter(b => {
                        const bPhone = (b.customer_phone || '').replace(/\s/g, '');
                        return bPhone === phoneClean || bPhone === phone;
                    });
                    
                    if (filteredBookings.length > 0) {
                        let html = '';
                        filteredBookings.forEach(booking => {
                            html += `
                                <div class="active-booking-card">
                                    <div class="header">
                                        <span class="icon"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"/><line x1="12" y1="9" x2="12" y2="13"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg></span>
                                        <span class="title">ACTIVE BOOKING EXISTS</span>
                                    </div>
                                    <div class="details">
                                        <div class="item"><span class="label">Reference</span><span class="value">${booking.booking_ref || 'N/A'}</span></div>
                                        <div class="item"><span class="label">Passenger</span><span class="value">${booking.customer_name || 'N/A'}</span></div>
                                        <div class="item"><span class="label">Pickup</span><span class="value">${booking.pickup_address || 'N/A'}</span></div>
                                        <div class="item"><span class="label">Dropoff</span><span class="value">${booking.destination || 'N/A'}</span></div>
                                        <div class="item"><span class="label">Status</span><span class="value" style="color:#06B6D4;">${booking.status || 'Unknown'}</span></div>
                                        <div class="item"><span class="label">Driver</span><span class="value">${booking.driver_name || 'Not Assigned'}</span></div>
                                        <div class="item"><span class="label">Price</span><span class="value" style="color:#10B981;">£${parseFloat(booking.price || 0).toFixed(2)}</span></div>
                                        <div class="item"><span class="label">Pickup Time</span><span class="value">${booking.booking_date || ''} ${booking.pickup_time || ''}</span></div>
                                    </div>
                                    <div class="actions">
                                        <button class="btn-action btn-confirm" onclick="confirmJob(${booking.id})"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg> Confirm</button>
                                        <button class="btn-action btn-call" onclick="callPassenger()"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"/></svg> Call</button>
                                        <button class="btn-action btn-sms" onclick="smsPassenger()"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg> SMS</button>
                                        <button class="btn-action btn-return" onclick="returnJourney(${booking.id})"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg> Return</button>
                                        <button class="btn-action btn-edit" onclick="editBooking(${booking.id})"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/></svg> Edit</button>
                                    </div>
                                </div>
                            `;
                        });
                        container.innerHTML = html;
                        document.getElementById('activeBadge').textContent = filteredBookings.length;
                    } else {
                        container.innerHTML = `
                            <div class="no-active">
                                <div class="icon"><i class="fas fa-check-circle"></i></div>
                                <div class="text">No Active Bookings</div>
                                <div class="subtext">No active bookings found for ${phone}</div>
                            </div>
                        `;
                        document.getElementById('activeBadge').textContent = '0';
                    }
                } else {
                    container.innerHTML = `
                        <div class="no-active">
                            <div class="icon"><i class="fas fa-check-circle"></i></div>
                            <div class="text">No Active Bookings</div>
                            <div class="subtext">No active bookings found for ${phone}</div>
                        </div>
                    `;
                    document.getElementById('activeBadge').textContent = '0';
                }
            })
            .catch(error => {
                console.error('Error loading active bookings:', error);
                document.getElementById('activeContent').innerHTML = `
                    <div class="no-active">
                        <div class="icon"><i class="fas fa-exclamation-triangle"></i></div>
                        <div class="text">Error Loading Data</div>
                        <div class="subtext">Could not load active bookings</div>
                    </div>
                `;
            });

        // ============================================================
        // 2. LOAD HISTORY FOR THIS PHONE
        // ============================================================
        fetch('/admin/api/get_customer_history.php?phone=' + encodeURIComponent(phone) + '&company_id=' + companyId + '&limit=20')
            .then(response => response.json())
            .then(data => {
                console.log('📊 History response:', data);
                const container = document.getElementById('historyContent');
                if (data.success && data.bookings && data.bookings.length > 0) {
                    const phoneClean = phone.replace(/\s/g, '');
                    const filteredBookings = data.bookings.filter(b => {
                        const bPhone = (b.customer_phone || '').replace(/\s/g, '');
                        return bPhone === phoneClean || bPhone === phone;
                    });
                    
                    if (filteredBookings.length > 0) {
                        let html = `<div class="history-grid"><div class="history-header"><span>Date</span><span>Pickup</span><span>Dropoff</span><span style="text-align:right;">Price</span><span style="text-align:center;">Status</span><span style="text-align:center;">Action</span></div>`;
                        filteredBookings.forEach(booking => {
                            const statusClass = booking.status || 'unknown';
                            const statusDisplay = booking.status || 'Unknown';
                            html += `
                                <div class="history-row status-${statusClass.toLowerCase()}">
                                    <div class="cell-date">${booking.booking_date || ''}<br><span style="font-size:9px;color:#6B7280;">${booking.pickup_time || ''}</span></div>
                                    <div class="cell-pickup"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/><circle cx="12" cy="10" r="3"/></svg> ${booking.pickup_address || 'N/A'}</div>
                                    <div class="cell-dropoff"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/><circle cx="12" cy="10" r="3"/></svg> ${booking.destination || 'N/A'}</div>
                                    <div class="cell-price">£${parseFloat(booking.price || 0).toFixed(2)}</div>
                                    <div class="cell-status"><span class="status-badge">${statusDisplay.toUpperCase()}</span></div>
                                    <div class="cell-action"><button class="btn-load" onclick="event.stopPropagation();loadBooking(${booking.id})">Load</button></div>
                                </div>
                            `;
                        });
                        html += '</div>';
                        container.innerHTML = html;
                        document.getElementById('historyBadge').textContent = filteredBookings.length;
                    } else {
                        container.innerHTML = `
                            <div class="empty-state">
                                <div class="icon"><i class="fas fa-inbox"></i></div>
                                <div class="text">No Booking History</div>
                                <div class="subtext">No previous bookings found for ${phone}</div>
                            </div>
                        `;
                        document.getElementById('historyBadge').textContent = '0';
                    }
                } else {
                    container.innerHTML = `
                        <div class="empty-state">
                            <div class="icon"><i class="fas fa-inbox"></i></div>
                            <div class="text">No Booking History</div>
                            <div class="subtext">No previous bookings found for ${phone}</div>
                        </div>
                    `;
                    document.getElementById('historyBadge').textContent = '0';
                }
            })
            .catch(error => {
                console.error('Error loading history:', error);
                document.getElementById('historyContent').innerHTML = `
                    <div class="empty-state">
                        <div class="icon"><i class="fas fa-exclamation-triangle"></i></div>
                        <div class="text">Error Loading Data</div>
                        <div class="subtext">Could not load booking history</div>
                    </div>
                `;
            });

        // ============================================================
        // 3. LOAD FAVORITES FOR THIS PHONE
        // ============================================================
        fetch('/admin/api/get_customer_favorites.php?phone=' + encodeURIComponent(phone) + '&company_id=' + companyId)
            .then(response => response.json())
            .then(data => {
                console.log('📊 Favorites response:', data);
                const container = document.getElementById('favoritesContent');
                if (data.success && data.favorites && data.favorites.length > 0) {
                    let html = '<div class="favorites-grid">';
                    data.favorites.forEach(fav => {
                        html += `
                            <div class="favorite-row" onclick="loadFavorite('${fav.address.replace(/'/g, "\\'")}')">
                                <div class="fav-icon">${fav.icon || '📍'}</div>
                                <div><div class="fav-name">${fav.name || 'Saved Address'}</div><div class="fav-address">${fav.address}</div></div>
                                <div class="fav-action"><button class="btn-use" onclick="event.stopPropagation();loadFavorite('${fav.address.replace(/'/g, "\\'")}')">Use</button></div>
                            </div>
                        `;
                    });
                    html += '</div>';
                    container.innerHTML = html;
                } else {
                    container.innerHTML = `
                        <div class="empty-state">
                            <div class="icon"><i class="fas fa-star"></i></div>
                            <div class="text">No Favorites</div>
                            <div class="subtext">No saved addresses found for ${phone}</div>
                        </div>
                    `;
                }
            })
            .catch(error => {
                console.error('Error loading favorites:', error);
                document.getElementById('favoritesContent').innerHTML = `
                    <div class="empty-state">
                        <div class="icon"><i class="fas fa-exclamation-triangle"></i></div>
                        <div class="text">Error Loading Data</div>
                        <div class="subtext">Could not load favorites</div>
                    </div>
                `;
            });

        // ============================================================
        // 4. LOAD CALL DETAILS FOR THIS PHONE
        // ============================================================
        fetch('/admin/api/get_call_details.php?phone=' + encodeURIComponent(phone) + '&company_id=' + companyId + '&limit=1')
            .then(response => response.json())
            .then(data => {
                console.log('📊 Call details response:', data);
                const container = document.getElementById('callContent');
                if (data.success && data.call) {
                    const call = data.call;
                    let html = `
                        <div class="call-audio-player">
                            <button class="play-btn" onclick="toggleAudio()" id="audioPlayBtn"><svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor" stroke="none"><polygon points="5 3 19 12 5 21 5 3"/></svg> PLAY</button>
                            <div class="progress" onclick="seekAudio(event)"><div class="fill" id="audioProgress" style="width:35%;"></div></div>
                            <span class="time" id="audioTimeDisplay">${call.duration || '00:00'} / ${call.total_duration || '00:00'}</span>
                            ${call.recording_url ? `<button class="download-btn" onclick="window.open('${call.recording_url}','_blank')"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg></button>` : ''}
                        </div>
                        <div class="call-details-grid">
                            <div class="item"><span class="label">Call ID</span><span class="value">${call.call_id || 'N/A'}</span></div>
                            <div class="item"><span class="label">Direction</span><span class="value">${call.direction || 'Unknown'}</span></div>
                            <div class="item"><span class="label">Started Ringing</span><span class="value">${call.started_ringing || 'N/A'}</span></div>
                            <div class="item"><span class="label">Answered</span><span class="value">${call.answered || 'N/A'}</span></div>
                            <div class="item"><span class="label">Hung Up</span><span class="value">${call.hung_up || 'N/A'}</span></div>
                            <div class="item"><span class="label">Extension</span><span class="value">${call.extension || 'N/A'}</span></div>
                            <div class="item"><span class="label">Caller Number</span><span class="value">${call.caller_number || 'N/A'}</span></div>
                            <div class="item"><span class="label">Status</span><span class="value" style="color:#10B981;">${call.status || 'Unknown'}</span></div>
                        </div>
                    `;
                    container.innerHTML = html;
                } else {
                    container.innerHTML = `
                        <div class="empty-state">
                            <div class="icon"><i class="fas fa-phone"></i></div>
                            <div class="text">No Call Records</div>
                            <div class="subtext">No call details found for ${phone}</div>
                        </div>
                    `;
                }
            })
            .catch(error => {
                console.error('Error loading call details:', error);
                document.getElementById('callContent').innerHTML = `
                    <div class="empty-state">
                        <div class="icon"><i class="fas fa-exclamation-triangle"></i></div>
                        <div class="text">Error Loading Data</div>
                        <div class="subtext">Could not load call details</div>
                    </div>
                `;
            });

        // ============================================================
        // 5. LOAD CHANGE HISTORY FOR THIS PHONE
        // ============================================================
        fetch('/admin/api/get_change_history.php?phone=' + encodeURIComponent(phone) + '&company_id=' + companyId + '&limit=10')
            .then(response => response.json())
            .then(data => {
                console.log('📊 Change history response:', data);
                const container = document.getElementById('changesContent');
                if (data.success && data.changes && data.changes.length > 0) {
                    let html = '';
                    data.changes.forEach(change => {
                        const icon = change.action === 'Created' ? 'created' : 'updated';
                        const iconChar = change.action === 'Created' ? 
                            '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>' :
                            '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/></svg>';
                        html += `
                            <div class="change-item">
                                <span class="change-time">${change.time || ''}</span>
                                <span class="change-icon ${icon}">${iconChar}</span>
                                <span class="change-details"><strong>${change.operator || 'System'}</strong>: ${change.details || ''}</span>
                            </div>
                        `;
                    });
                    container.innerHTML = html;
                } else {
                    container.innerHTML = `
                        <div class="empty-state">
                            <div class="icon"><i class="fas fa-history"></i></div>
                            <div class="text">No Change History</div>
                            <div class="subtext">No audit trail found for ${phone}</div>
                        </div>
                    `;
                }
            })
            .catch(error => {
                console.error('Error loading change history:', error);
                document.getElementById('changesContent').innerHTML = `
                    <div class="empty-state">
                        <div class="icon"><i class="fas fa-exclamation-triangle"></i></div>
                        <div class="text">Error Loading Data</div>
                        <div class="subtext">Could not load change history</div>
                    </div>
                `;
            });

        // ============================================================
        // 6. LOAD TRANSACTIONS FOR THIS PHONE
        // ============================================================
        fetch('/admin/api/get_transactions.php?phone=' + encodeURIComponent(phone) + '&company_id=' + companyId + '&limit=5')
            .then(response => response.json())
            .then(data => {
                console.log('📊 Transactions response:', data);
                const container = document.getElementById('transactionsContent');
                if (data.success && data.transactions && data.transactions.length > 0) {
                    let html = '<div class="tx-grid"><div class="tx-header"><span>Time</span><span>Type</span><span>Status</span><span style="text-decoration:underline;text-decoration-color:#EF4444;">Amount</span><span>Card Number</span></div>';
                    data.transactions.forEach(tx => {
                        const statusClass = tx.status === 'Approved' ? 'approved' : tx.status === 'Settled' ? 'settled' : 'declined';
                        html += `
                            <div class="tx-row">
                                <span class="tx-time">${tx.time || ''}</span>
                                <span class="tx-type">${tx.type || ''}</span>
                                <span class="tx-status ${statusClass}">${tx.status || ''}</span>
                                <span class="tx-amount">£${parseFloat(tx.amount || 0).toFixed(2)}</span>
                                <span class="tx-card">${tx.card || '**** **** **** ****'}</span>
                            </div>
                        `;
                    });
                    html += '</div>';
                    html += `<button class="btn-action btn-confirm" style="margin-top:14px;padding:10px 24px;font-size:12px;border:none;border-radius:10px;font-weight:600;cursor:pointer;background:linear-gradient(135deg, #10B981, #059669);color:white;display:flex;align-items:center;gap:8px;box-shadow:0 2px 8px rgba(16,185,129,0.2);" onclick="sendInvoiceEmail()"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg> EMAIL INVOICE / RECEIPTS STATEMENT</button>`;
                    container.innerHTML = html;
                } else {
                    container.innerHTML = `
                        <div class="empty-state">
                            <div class="icon"><i class="fas fa-credit-card"></i></div>
                            <div class="text">No Transactions</div>
                            <div class="subtext">No payment records found for ${phone}</div>
                        </div>
                    `;
                }
            })
            .catch(error => {
                console.error('Error loading transactions:', error);
                document.getElementById('transactionsContent').innerHTML = `
                    <div class="empty-state">
                        <div class="icon"><i class="fas fa-exclamation-triangle"></i></div>
                        <div class="text">Error Loading Data</div>
                        <div class="subtext">Could not load transactions</div>
                    </div>
                `;
            });
    }

    // ============================================================
    // ACTIVE BOOKING ACTIONS
    // ============================================================
    function confirmJob(bookingId) {
        if (!bookingId) { showToast('❌ No booking ID', 'error'); return; }
        showToastF2('✅ Job confirmed and dispatched successfully!', 'success');
        setTimeout(() => { closeF2Modal(); }, 1500);
    }

    function callPassenger() {
        const phone = document.getElementById('customerPhone').value.trim();
        if (!phone) { showToast('❌ No phone number', 'error'); return; }
        showToast('📞 Calling passenger ' + phone + '...', 'info');
    }

    function smsPassenger() {
        const phone = document.getElementById('customerPhone').value.trim();
        if (!phone) { showToast('❌ No phone number', 'error'); return; }
        const message = prompt('Enter SMS message:', 'Your booking is confirmed. Driver will arrive shortly.');
        if (message) { showToast('📱 SMS sent to ' + phone, 'success'); }
    }

    function returnJourney(bookingId) {
        if (bookingId) {
            window.location.href = 'new_booking.php?copy=' + bookingId;
        } else {
            showToast('❌ No booking to copy', 'error');
        }
    }

    function editBooking(bookingId) {
        if (bookingId) {
            window.location.href = 'new_booking.php?edit=' + bookingId;
        } else {
            showToast('❌ No booking to edit', 'error');
        }
    }

    // ============================================================
    // HISTORY ACTIONS
    // ============================================================
    function loadBooking(id) {
        closeF2Modal();
        showToast('📋 Loading booking #' + id + ' into edit form', 'success');
        setTimeout(() => { window.location.href = 'new_booking.php?edit=' + id; }, 500);
    }

    function loadFavorite(address) {
        closeF2Modal();
        document.getElementById('pickupAddress').value = address;
        showToast('📍 Address loaded: ' + address, 'success');
        centerOnAddress('pickupAddress');
    }

    // ============================================================
    // AUDIO PLAYER
    // ============================================================
    function toggleAudio() {
        isAudioPlaying = !isAudioPlaying;
        var btn = document.getElementById('audioPlayBtn');
        if (isAudioPlaying) {
            btn.innerHTML = '<svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor" stroke="none"><rect x="6" y="4" width="4" height="16"/><rect x="14" y="4" width="4" height="16"/></svg> PAUSE';
            var progress = 35;
            audioInterval = setInterval(function() {
                progress += 0.5;
                if (progress > 100) {
                    clearInterval(audioInterval);
                    isAudioPlaying = false;
                    btn.innerHTML = '<svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor" stroke="none"><polygon points="5 3 19 12 5 21 5 3"/></svg> PLAY';
                    document.getElementById('audioProgress').style.width = '0%';
                    document.getElementById('audioTimeDisplay').textContent = '00:00 / 02:43';
                    return;
                }
                document.getElementById('audioProgress').style.width = progress + '%';
                var current = Math.floor((progress / 100) * 163);
                var mins = String(Math.floor(current / 60)).padStart(2, '0');
                var secs = String(current % 60).padStart(2, '0');
                document.getElementById('audioTimeDisplay').textContent = mins + ':' + secs + ' / 02:43';
            }, 200);
        } else {
            btn.innerHTML = '<svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor" stroke="none"><polygon points="5 3 19 12 5 21 5 3"/></svg> PLAY';
            if (audioInterval) clearInterval(audioInterval);
        }
    }

    function seekAudio(e) {
        var rect = e.currentTarget.getBoundingClientRect();
        var x = (e.clientX - rect.left) / rect.width;
        document.getElementById('audioProgress').style.width = (x * 100) + '%';
        var total = 163;
        var current = Math.floor(x * total);
        var mins = String(Math.floor(current / 60)).padStart(2, '0');
        var secs = String(current % 60).padStart(2, '0');
        document.getElementById('audioTimeDisplay').textContent = mins + ':' + secs + ' / 02:43';
    }

    // ============================================================
    // SEND CONFIRMATION
    // ============================================================
    function sendBookingConfirmation() {
        const modal = document.getElementById('confirmModal');
        if (!modal) { showToast('❌ Confirmation modal not found', 'error'); return; }
        const phone = document.getElementById('customerPhone')?.value?.trim() || 'No phone';
        const email = document.querySelector('input[name="email"]')?.value?.trim() || 'No email';
        document.getElementById('confirmPhoneDisplay').textContent = phone;
        document.getElementById('confirmEmailDisplay').textContent = email;
        modal.classList.add('active');
    }

    function closeConfirmModal() { document.getElementById('confirmModal').classList.remove('active'); }

    function sendSmsConfirmation() {
        const phone = document.getElementById('customerPhone')?.value?.trim();
        if (!phone) { showToast('❌ No phone number', 'error'); return; }
        showToast('📱 Sending SMS confirmation...', 'info');
        setTimeout(() => { closeConfirmModal(); showToast('✅ Confirmation sent via SMS', 'success'); }, 1000);
    }

    function sendEmailConfirmation() {
        const email = document.querySelector('input[name="email"]')?.value?.trim();
        if (!email) { showToast('❌ No email address', 'error'); return; }
        showToast('📧 Sending email confirmation...', 'info');
        setTimeout(() => { closeConfirmModal(); showToast('✅ Confirmation sent via email', 'success'); }, 1000);
    }

    function sendInvoiceEmail() {
        const email = document.querySelector('input[name="email"]')?.value?.trim();
        if (!email) { showToast('❌ No email address', 'error'); return; }
        showToast('📧 Sending invoice to ' + email + '...', 'info');
        setTimeout(() => { closeConfirmModal(); showToast('✅ Invoice emailed to ' + email, 'success'); }, 1000);
    }

    // ============================================================
    // MESSAGE MODAL
    // ============================================================
    function showMessagePopup() {
        document.getElementById('messageModal').classList.add('active');
        document.getElementById('messageText').focus();
    }

    function closeMessageModal() {
        document.getElementById('messageModal').classList.remove('active');
        document.getElementById('messageText').value = '';
        document.getElementById('messageEmergency').checked = false;
        document.getElementById('messageTTS').checked = false;
        document.getElementById('messageSilent').checked = false;
    }

    function insertMacro(code) {
        var macros = {
            '.1': 'Please call office immediately',
            '.2': 'Where are you now?',
            '.3': 'Proceed to pickup address',
            '.4': 'Customer is waiting',
            '.5': 'Drop off at the usual location',
            '.6': 'ETA? Please update your status',
            '.7': 'Return to base after drop off',
            '.8': 'EMERGENCY! Call office NOW'
        };
        var textarea = document.getElementById('messageText');
        var start = textarea.selectionStart;
        var end = textarea.selectionEnd;
        var text = textarea.value;
        var insertion = macros[code] || code;
        textarea.value = text.substring(0, start) + insertion + text.substring(end);
        textarea.selectionStart = textarea.selectionEnd = start + insertion.length;
        textarea.focus();
    }

    function sendMessage() {
        var target = document.getElementById('messageTarget').value;
        var message = document.getElementById('messageText').value.trim();
        if (!message) { showToast('Please enter a message', 'error'); return; }
        if (!target) { showToast('Please select a target', 'error'); return; }
        showToast('💬 Sending message...', 'info');
        setTimeout(() => { closeMessageModal(); showToast('✅ Message sent', 'success'); }, 1000);
    }

    // ============================================================
    // SHORTCUT HELP
    // ============================================================
    function showShortcutHelp() { document.getElementById('shortcutHelpModal').classList.add('active'); }
    function closeShortcutHelp() { document.getElementById('shortcutHelpModal').classList.remove('active'); }

    // ============================================================
    // KEYBOARD SHORTCUTS
    // ============================================================
    document.addEventListener('keydown', function(e) {
        var key = e.key;
        var code = e.code;
        var target = e.target.tagName;
        var isInput = target === 'INPUT' || target === 'TEXTAREA' || target === 'SELECT';

        if (key === 'F2' || code === 'F2') {
            e.preventDefault();
            e.stopPropagation();
            openF2Modal();
            return;
        }

        if (key === 'Escape') {
            var f2Modal = document.getElementById('f2Modal');
            if (f2Modal.classList.contains('active')) {
                closeF2Modal();
                return;
            }
            var anyModalOpen = document.querySelector('.fc-modal-overlay.active');
            if (!anyModalOpen && !isInput) {
                if (confirm('Clear all form fields?')) { clearForm(); }
            }
            return;
        }

        if (key === ' ' && document.getElementById('f2Modal').classList.contains('active')) {
            if (target !== 'INPUT' && target !== 'TEXTAREA' && target !== 'SELECT') {
                e.preventDefault();
                toggleAudio();
            }
            return;
        }
    });

    // ============================================================
    // EXISTING FUNCTIONS (Preserved)
    // ============================================================
    let liveClockInterval = null;
    let manualTimeChange = false;

    function updateDateTimeFields() {
        if (manualTimeChange) return;
        const now = new Date();
        const year = now.getFullYear();
        const month = String(now.getMonth() + 1).padStart(2, '0');
        const day = String(now.getDate()).padStart(2, '0');
        const hours = String(now.getHours()).padStart(2, '0');
        const minutes = String(now.getMinutes()).padStart(2, '0');
        const dateInput = document.getElementById('bookingDate');
        const timeInput = document.getElementById('bookingTime');
        if (dateInput && timeInput && !manualTimeChange) {
            dateInput.value = `${year}-${month}-${day}`;
            timeInput.value = `${hours}:${minutes}`;
        }
    }

    function startLiveClock() {
        if (liveClockInterval) clearInterval(liveClockInterval);
        updateDateTimeFields();
        liveClockInterval = setInterval(updateDateTimeFields, 1000);
        const ind = document.getElementById('liveClockIndicator');
        if (ind) { ind.style.color = '#10b981'; ind.innerHTML = '● Live'; }
        manualTimeChange = false;
    }

    function stopLiveClockAndSetCurrent() {
        manualTimeChange = true;
        if (liveClockInterval) { clearInterval(liveClockInterval); liveClockInterval = null; }
        const now = new Date();
        const year = now.getFullYear();
        const month = String(now.getMonth() + 1).padStart(2, '0');
        const day = String(now.getDate()).padStart(2, '0');
        const hours = String(now.getHours()).padStart(2, '0');
        const minutes = String(now.getMinutes()).padStart(2, '0');
        document.getElementById('bookingDate').value = `${year}-${month}-${day}`;
        document.getElementById('bookingTime').value = `${hours}:${minutes}`;
        const ind = document.getElementById('liveClockIndicator');
        if (ind) { ind.style.color = '#f59e0b'; ind.innerHTML = '● Manual'; }
        showToast('Time set to current, live update paused', 'info');
    }

    function toggleCapabilitiesDropdown() {
        document.getElementById('capabilitiesDropdown').classList.toggle('show');
    }

    function updateCapabilitiesDisplay() {
        const selected = [];
        document.querySelectorAll('#capabilitiesDropdown input:checked').forEach(cb => {
            const label = cb.nextElementSibling;
            if (label) selected.push(label.innerText);
        });
        const disp = document.getElementById('selectedCapabilitiesDisplay');
        if (disp) disp.innerText = selected.length ? selected.join(', ') : 'Select capabilities...';
    }

    function resetFormToDefault() {
        document.getElementById('bookingForm').reset();
        document.getElementById('priceHidden').value = '0';
        document.getElementById('distanceHidden').value = '0';
        document.getElementById('durationHidden').value = '0';
        document.getElementById('pickupLat').value = '';
        document.getElementById('pickupLng').value = '';
        document.getElementById('zoneCode').value = 'TWN';
        document.getElementById('displayPrice').innerText = '0.00';
        document.getElementById('displayDistance').innerText = '0.00';
        document.getElementById('displayDuration').innerText = '0';
        if (pickupMarker) pickupMarker.remove();
        if (dropoffMarker) dropoffMarker.remove();
        if (viaMarker) viaMarker.remove();
        if (map && map.getSource('route')) {
            if (map.getLayer('route-layer')) map.removeLayer('route-layer');
            map.removeSource('route');
        }
        isPickupSet = false;
        isDropoffSet = false;
        isViaActive = false;
        resetToLiveClock();
        document.querySelectorAll('#capabilitiesDropdown input').forEach(cb => cb.checked = false);
        updateCapabilitiesDisplay();
        document.querySelectorAll('.day-toggle').forEach(btn => btn.classList.remove('active'));
        const rd = document.getElementById('repeatDaysInput');
        if (rd) rd.value = '';
        document.querySelectorAll('.required-field').forEach(f => f.classList.remove('has-value'));
        document.getElementById('viaStopsContainer').innerHTML = '';
        viaStopCount = 0;
        let p = document.getElementById('pickupAddress');
        if (p) setTimeout(() => { p.focus(); p.classList.add('field-highlight'); setTimeout(() => p.classList.remove('field-highlight'), 500); }, 300);
    }

    async function submitBooking() {
        let btn = document.getElementById('saveBookingBtn'), spinner = document.getElementById('saveSpinner');
        if (btn) btn.disabled = true;
        if (spinner) spinner.style.display = 'inline-block';
        
        let fd = new FormData(document.getElementById('bookingForm'));
        fd.set('status', 'pending_dispatch');
        
        var bookingIdInput = document.querySelector('input[name="booking_id"]');
        var isEdit = bookingIdInput && bookingIdInput.value && parseInt(bookingIdInput.value) > 0;
        
        try {
            let response;
            let data;
            
            if (isEdit) {
                var formData = {};
                for (var pair of fd.entries()) {
                    if (pair[0] === 'capabilities[]') {
                        if (!formData['capabilities']) formData['capabilities'] = [];
                        formData['capabilities'].push(pair[1]);
                    } else {
                        formData[pair[0]] = pair[1];
                    }
                }
                formData['booking_id'] = parseInt(bookingIdInput.value);
                
                response = await fetch('/admin/api/update_booking.php', {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify(formData)
                });
                data = await response.json();
                if (data.success) {
                    showToast('✓ ' + data.message + ' Ref: ' + (data.booking_ref || ''), 'success');
                    setTimeout(function() { window.location.href = 'dispatch.php'; }, 1500);
                } else {
                    showToast('❌ ' + (data.message || 'Update failed'), 'error');
                }
            } else {
                response = await fetch(window.location.href, { 
                    method: 'POST', 
                    headers: { 'X-Requested-With': 'XMLHttpRequest' }, 
                    body: fd 
                });
                data = await response.json();
                if (data.success) {
                    showToast('✓ ' + data.message + ' Ref: ' + data.booking_ref, 'success');
                    resetFormToDefault();
                    if (data.booking_id) {
                        currentBookingId = data.booking_id;
                    }
                    refreshDriverList();
                } else {
                    showToast('❌ ' + (data.message || 'Save failed'), 'error');
                }
            }
        } catch(e) {
            console.error('Submit error:', e);
            showToast('❌ Network error - check console', 'error');
        }
        
        if (btn) btn.disabled = false;
        if (spinner) spinner.style.display = 'none';
    }

    function saveAsHold() {
        let fd = new FormData(document.getElementById('bookingForm'));
        fd.set('status', 'draft');
        fetch(window.location.href, { method: 'POST', headers: { 'X-Requested-With': 'XMLHttpRequest' }, body: fd })
            .then(r => r.json())
            .then(d => { if (d.success) { showToast('✓ Saved as hold', 'success'); resetFormToDefault(); } else showToast('❌ Hold failed', 'error'); })
            .catch(() => showToast('❌ Hold failed', 'error'));
    }

    function clearForm() { if (confirm('Clear all fields?')) resetFormToDefault(); }

    function refreshDriverList() {
        fetch('/admin/api/get_available_drivers.php?_=' + Date.now())
            .then(r => r.json())
            .then(d => {
                if (d.success && d.drivers) {
                    let sel = document.getElementById('requestedDriver'), cur = sel ? sel.value : '';
                    let opts = '<option value="">-- Auto-Assign --</option>';
                    d.drivers.forEach(drv => { 
                        opts += `<option value="${drv.id}" ${cur == drv.id ? 'selected' : ''} data-phone="${drv.phone || ''}" data-name="${drv.driver_name}">${drv.driver_name} (${drv.status})</option>`; 
                    });
                    if (sel) sel.innerHTML = opts;
                    driversData = d.drivers;
                    updateDriverQueue();
                    updateZoneStats();
                    updateFooterSummary();
                    calculateNearestVehicleETA();
                }
            }).catch(e => console.error);
    }

    function overridePrice() {
        let p = parseFloat(document.getElementById('displayPrice').innerText) || 0;
        let c = parseFloat(document.getElementById('modalCost').value) || (p * 0.8);
        document.getElementById('modalPrice').value = p.toFixed(2);
        document.getElementById('modalCost').value = c.toFixed(2);
        document.getElementById('pricingModal').classList.add('active');
        document.getElementById('modalPrice').focus();
    }

    function closePricingModal() { document.getElementById('pricingModal').classList.remove('active'); }

    function savePricing() {
        let np = parseFloat(document.getElementById('modalPrice').value);
        if (isNaN(np)) return;
        document.getElementById('displayPrice').innerText = np.toFixed(2);
        document.getElementById('priceHidden').value = np.toFixed(2);
        closePricingModal();
        showToast(`Price updated: £${np.toFixed(2)}`, 'success');
    }

    function removePricing() {
        let dist = parseFloat(document.getElementById('distanceHidden').value) || 0;
        let recalc = baseHireRate + (dist * baseMileageRate);
        if (document.getElementById('zoneCode').value === 'AIR') recalc += airportSurcharge;
        document.getElementById('displayPrice').innerText = recalc.toFixed(2);
        document.getElementById('priceHidden').value = recalc.toFixed(2);
        closePricingModal();
        showToast('Pricing reset', 'info');
    }

    function applyPercent(percent) {
        var costInput = document.getElementById('modalCost');
        var priceInput = document.getElementById('modalPrice');
        var cost = parseFloat(costInput.value) || 0;
        var price = parseFloat(priceInput.value) || 0;
        var multiplier = 1 + (percent / 100);
        costInput.value = (cost * multiplier).toFixed(2);
        priceInput.value = (price * multiplier).toFixed(2);
        showToast('Adjusted by ' + percent + '%', 'info');
    }

    function applyCustomPercent() {
        var input = document.getElementById('customPercentInput');
        var percent = parseFloat(input.value);
        if (isNaN(percent)) {
            showToast('Please enter a valid percentage', 'error');
            return;
        }
        applyPercent(percent);
        input.value = '';
    }

    async function cliLookup() {
        let phone = document.getElementById('customerPhone').value.trim();
        if (!phone) { showToast('Enter phone number', 'error'); return; }
        showToast('Searching...', 'info');
        try {
            let r = await fetch('/admin/ajax/cli_lookup.php', { method: 'POST', headers: { 'Content-Type': 'application/x-www-form-urlencoded' }, body: 'phone=' + encodeURIComponent(phone) });
            let d = await r.json();
            if (d.success && d.customer) {
                if (d.customer.name) document.getElementById('customerName').value = d.customer.name;
                const em = document.querySelector('input[name="email"]');
                if (d.customer.email && em) em.value = d.customer.email;
                showToast(`Found ${d.customer.total_bookings || 0} past bookings`, 'success');
            } else showToast('No previous bookings', 'info');
        } catch(e) { showToast('CLI failed', 'error'); }
    }

    async function fetchFlightStatus() {
        let flt = document.getElementById('flightNumber').value.trim();
        if (!flt) { showToast('Enter flight number', 'error'); return; }
        showToast('Fetching...', 'info');
        try {
            let r = await fetch('/admin/api/flight_status.php?flight=' + encodeURIComponent(flt));
            let d = await r.json();
            let div = document.getElementById('flightInfo');
            if (d.success && d.flight) {
                div.innerHTML = `<i class="fas fa-plane"></i> ${d.flight.status} | Arrival: ${d.flight.arrival_time}`;
                div.classList.add('show');
                showToast('Flight loaded', 'success');
            } else {
                div.innerHTML = 'Flight not found';
                div.classList.add('show');
                showToast('Not found', 'error');
            }
        } catch(e) { showToast('API error', 'error'); }
    }

    function updateDriverQueue() {
        let html = '';
        driversData.slice(0, 15).forEach(d => {
            let cls = '';
            if (d.status === 'available') cls = 'callsign-clear';
            else if (d.status === 'busy') cls = 'callsign-busy';
            html += `<tr><td class="${cls}">${d.callsign || d.driver_name.substring(0,6)}</td><td class="${cls}">${d.status.toUpperCase()}</td><td>${d.current_zone || 'TWN'}</td><td>--</td></tr>`;
        });
        const dql = document.getElementById('driverQueueList');
        if (dql) dql.innerHTML = html;
    }

    function updateZoneStats() {
        let html = '';
        zonesData.slice(0, 12).forEach(z => {
            html += `<tr><td><strong>${z.zone_code}</strong></td><td>0</td><td class="zone-clear">0</td><td class="zone-busy">0</td><td>0</td></tr>`;
        });
        const zsl = document.getElementById('zoneStatsList');
        if (zsl) zsl.innerHTML = html;
    }

    function updateFooterSummary() {
        let t = driversData.length, c = driversData.filter(d => d.status === 'available').length, b = driversData.filter(d => d.status === 'busy').length;
        const fs = document.getElementById('footerSummary');
        if (fs) fs.innerHTML = `<span class="summary-total">Total: ${t}</span><span class="summary-clear">Clear: ${c}</span><span class="summary-busy">Busy: ${b}</span><span class="summary-bookings">Bookings: 0</span>`;
    }

    function calculateNearestVehicleETA() { /* placeholder */ }

    function setupRequiredFieldValidation() {
        document.querySelectorAll('.required-field').forEach(f => {
            if (f.value.trim() !== '') f.classList.add('has-value');
            f.addEventListener('input', function() {
                if (this.value.trim() !== '') this.classList.add('has-value');
                else this.classList.remove('has-value');
            });
        });
    }

    function setupAutoCursor() {
        const p = document.getElementById('pickupAddress');
        if (p) setTimeout(() => { p.focus(); p.classList.add('field-highlight'); setTimeout(() => p.classList.remove('field-highlight'), 500); }, 300);
    }

    function showIVRStatus() { showToast('IVR: All agents available', 'info'); }
    function zoomIn() { if (map) map.zoomIn(); }
    function zoomOut() { if (map) map.zoomOut(); }
    function centerMap() { if (map) { map.setCenter([-2.2426, 53.4808]); map.setZoom(13); } }

    async function centerOnAddress(fid) {
        let addr = document.getElementById(fid).value;
        if (addr) {
            let c = await geocodeAddress(addr);
            if (c) { map.setCenter([c.lng, c.lat]); map.setZoom(15); showToast('📍 Map centered', 'success'); }
            else showToast('❌ Address not found', 'error');
        } else showToast('⚠️ Enter address', 'error');
    }

    function openMap(fid) {
        let addr = document.getElementById(fid).value;
        if (addr) window.open(`https://maps.google.com?q=${encodeURIComponent(addr)}`, '_blank');
        else showToast('⚠️ Enter address', 'error');
    }

    function toggleRepeatDay(btn) {
        btn.classList.toggle('active');
        let a = Array.from(document.querySelectorAll('.day-toggle.active')).map(b => b.dataset.day);
        const rd = document.getElementById('repeatDaysInput');
        if (rd) rd.value = a.join(',');
    }

    function showMessages() { window.open('messages.php', '_blank'); }
    function logout() { window.location.href = 'logout.php'; }

    async function geocodeAddress(address) {
        if (!address) return null;
        let url = `https://api.mapbox.com/geocoding/v5/mapbox.places/${encodeURIComponent(address)}.json?access_token=${mapboxgl.accessToken}&country=gb&limit=1`;
        try {
            let r = await fetch(url), d = await r.json();
            if (d.features && d.features.length) {
                let c = d.features[0].geometry.coordinates;
                return { lng: c[0], lat: c[1] };
            }
        } catch(e) { }
        return null;
    }

    async function calculateRoute() {
        if (!isPickupSet || !isDropoffSet) return;
        if (!pickupMarker || !dropoffMarker) return;
        let s, e;
        try { s = pickupMarker.getLngLat(); e = dropoffMarker.getLngLat(); } catch(e) { return; }
        let url = `https://api.mapbox.com/directions/v5/mapbox/driving/${s.lng},${s.lat};${e.lng},${e.lat}`;
        if (isViaActive && viaMarker) {
            try { let v = viaMarker.getLngLat(); if (v && v.lng && v.lat) url = `https://api.mapbox.com/directions/v5/mapbox/driving/${s.lng},${s.lat};${v.lng},${v.lat};${e.lng},${e.lat}`; } catch(e) { }
        }
        url += `?geometries=geojson&access_token=${mapboxgl.accessToken}&overview=full`;
        try {
            let r = await fetch(url), d = await r.json();
            if (d.routes && d.routes.length) {
                let route = d.routes[0];
                let miles = route.distance / 1609.34;
                let minutes = route.duration / 60;
                document.getElementById('displayDistance').innerText = miles.toFixed(1);
                document.getElementById('displayDuration').innerText = Math.round(minutes);
                let price = baseHireRate + (miles * baseMileageRate);
                if (document.getElementById('zoneCode').value === 'AIR') price += airportSurcharge;
                document.getElementById('displayPrice').innerText = price.toFixed(2);
                document.getElementById('priceHidden').value = price.toFixed(2);
                document.getElementById('distanceHidden').value = miles.toFixed(1);
                document.getElementById('durationHidden').value = Math.round(minutes);
                if (map.getSource('route')) { if (map.getLayer('route-layer')) map.removeLayer('route-layer'); map.removeSource('route'); }
                map.addSource('route', { type: 'geojson', data: { type: 'Feature', geometry: route.geometry } });
                map.addLayer({ id: 'route-layer', type: 'line', source: 'route', paint: { 'line-color': '#7E22CE', 'line-width': 5, 'line-opacity': 0.8 } });
                let bounds = new mapboxgl.LngLatBounds().extend([s.lng, s.lat]).extend([e.lng, e.lat]);
                if (isViaActive && viaMarker) { try { let v = viaMarker.getLngLat(); bounds.extend([v.lng, v.lat]); } catch(e) { } }
                map.fitBounds(bounds, { padding: 50 });
            }
        } catch(e) { console.error(e); }
    }

    function initMap() {
        map = new mapboxgl.Map({ container: 'bookingMap', style: 'mapbox://styles/mapbox/streets-v12', center: [-2.2426, 53.4808], zoom: 13 });
        map.addControl(new mapboxgl.NavigationControl(), 'top-right');
        function createMarker(color, label) {
            let d = document.createElement('div');
            d.innerHTML = `<div style="display:flex;align-items:center;justify-content:center;background:${color};width:32px;height:32px;border-radius:50%;border:3px solid white;"><span style="color:white;font-size:14px;font-weight:bold;">${label}</span></div>`;
            return d;
        }
        pickupMarker = new mapboxgl.Marker({ element: createMarker('#22C55E', 'P'), draggable: true }).setLngLat([-2.2426, 53.4808]);
        dropoffMarker = new mapboxgl.Marker({ element: createMarker('#EF4444', 'D'), draggable: true }).setLngLat([-2.2426, 53.4808]);
        viaMarker = new mapboxgl.Marker({ element: createMarker('#3B82F6', 'V'), draggable: true }).setLngLat([-2.2426, 53.4808]);
        pickupMarker.on('dragend', async function() { await updateFromMarker(pickupMarker, 'pickupAddress'); isPickupSet = true; if (isDropoffSet) await calculateRoute(); });
        dropoffMarker.on('dragend', async function() { await updateFromMarker(dropoffMarker, 'destination'); isDropoffSet = true; if (isPickupSet) await calculateRoute(); });
        viaMarker.on('dragend', async function() { await updateFromMarker(viaMarker, 'viaAddress'); isViaActive = true; if (isPickupSet && isDropoffSet) await calculateRoute(); });
        <?php if ($editBooking && !empty($editBooking['pickup_lat'])): ?>
        pickupMarker.setLngLat([<?php echo $editBooking['pickup_lng']; ?>, <?php echo $editBooking['pickup_lat']; ?>]).addTo(map);
        isPickupSet = true;
        map.setCenter([<?php echo $editBooking['pickup_lng']; ?>, <?php echo $editBooking['pickup_lat']; ?>]);
        map.setZoom(14);
        <?php endif; ?>
    }

    async function updateFromMarker(marker, fid) {
        let lngLat = marker.getLngLat();
        let r = await fetch(`https://api.mapbox.com/geocoding/v5/mapbox.places/${lngLat.lng},${lngLat.lat}.json?access_token=${mapboxgl.accessToken}&types=address,place&limit=1`);
        let d = await r.json();
        if (d.features && d.features.length) {
            let inp = document.getElementById(fid);
            inp.value = d.features[0].place_name;
            if (inp.classList.contains('required-field')) inp.classList.add('has-value');
            if (fid === 'pickupAddress') {
                document.getElementById('pickupLat').value = lngLat.lat;
                document.getElementById('pickupLng').value = lngLat.lng;
            }
        }
    }

    function showNearbyVehicles() { if (!isPickupSet) { alert('Set pickup first'); return; } alert('Nearby vehicles feature'); }

    // ============================================================
    // SMART SEARCH CLASS
    // ============================================================
    class FleetCortexSmartSearch {
        constructor(inputId, onSelect) {
            this.input = document.getElementById(inputId);
            this.onSelect = onSelect;
            this.dropdown = null;
            this.selectedIndex = -1;
            this.results = [];
            this.isVisible = false;
            this.debounceTimer = null;
            this.isSearching = false;
            this.abbreviations = {
                'st':'street','str':'street','rd':'road','ln':'lane','dr':'drive',
                'ave':'avenue','cres':'crescent','ct':'court','pl':'place','sq':'square',
                'blvd':'boulevard','hwy':'highway','gdn':'gardens','pk':'park','br':'bridge',
                'vc':'victoria','vic':'victoria','bham':'birmingham','brum':'birmingham',
                'lpool':'liverpool','mcr':'manchester','htn':'heathrow','lhr':'heathrow airport',
                'lgw':'gatwick','stn':'stansted','ltn':'luton','man':'manchester airport',
                'edi':'edinburgh','glw':'glasgow','bri':'bristol','lds':'leeds',
                'ncl':'newcastle','shef':'sheffield','pad':'paddington','eus':'euston',
                'kgx':'kings cross','wat':'waterloo','liv':'liverpool street'
            };
            this.init();
        }

        init() {
            this.createDropdown();
            this.input.addEventListener('input', (e) => this.onInput(e));
            this.input.addEventListener('keydown', (e) => this.onKeyDown(e));
            this.input.addEventListener('blur', () => setTimeout(() => this.hideDropdown(), 250));
            this.input.closest('.form-row-card').style.position = 'relative';
        }

        createDropdown() {
            this.dropdown = document.createElement('div');
            this.dropdown.className = 'fc-smart-dropdown';
            this.input.parentElement.appendChild(this.dropdown);
        }

        onInput(e) {
            const rawValue = this.input.value;
            const hasTrigger = rawValue.includes('..') || /\s{2,}/.test(rawValue) || rawValue.includes(' .');
            let cleanQuery = rawValue.replace(/\.\.|\s{2,}| \./g, ' ').trim();
            if (hasTrigger && cleanQuery.length >= 2) {
                clearTimeout(this.debounceTimer);
                this.debounceTimer = setTimeout(() => this.search(cleanQuery), 150);
            } else {
                this.hideDropdown();
            }
        }

        onKeyDown(e) {
            if (!this.isVisible) return;
            if (!['ArrowDown','ArrowUp','Enter','Escape','Tab'].includes(e.key)) return;
            e.preventDefault();
            e.stopImmediatePropagation();
            if (e.key === 'ArrowDown') {
                this.selectedIndex = Math.min(this.selectedIndex + 1, this.results.length - 1);
                this.updateSelection();
            } else if (e.key === 'ArrowUp') {
                this.selectedIndex = Math.max(this.selectedIndex - 1, -1);
                this.updateSelection();
            } else if (e.key === 'Enter') {
                if (this.selectedIndex >= 0) {
                    this.selectResult(this.results[this.selectedIndex]);
                }
            } else if (e.key === 'Escape') {
                this.hideDropdown();
            } else if (e.key === 'Tab') {
                if (this.selectedIndex >= 0) {
                    this.selectResult(this.results[this.selectedIndex]);
                } else {
                    this.hideDropdown();
                }
            }
        }

        expandAbbreviations(query) {
            let expanded = ' ' + query.toLowerCase() + ' ';
            for (let [abbr, full] of Object.entries(this.abbreviations)) {
                const regex = new RegExp('\\s' + abbr + '\\s', 'gi');
                expanded = expanded.replace(regex, ' ' + full + ' ');
            }
            return expanded.trim();
        }

        async search(query) {
            if (this.isSearching) return;
            this.isSearching = true;
            this.selectedIndex = -1;
            const expandedQuery = this.expandAbbreviations(query);
            this.dropdown.innerHTML = '<div class="fc-smart-loading"><i class="fas fa-spinner fa-spin"></i> Smart searching...</div>';
            this.showDropdown();
            try {
                const url = '/admin/api/smart_search.php?q=' + encodeURIComponent(query) + '&expanded=' + encodeURIComponent(expandedQuery);
                const response = await fetch(url);
                const data = await response.json();
                if (data.success && data.results && data.results.length) {
                    this.results = data.results;
                    this.renderResults();
                } else {
                    this.results = [];
                    this.dropdown.innerHTML = '<div class="fc-smart-empty"><i class="fas fa-search"></i> No matches — try full address</div>';
                }
            } catch (err) {
                console.error('Smart search error:', err);
                this.dropdown.innerHTML = '<div class="fc-smart-empty" style="color:#EF4444;"><i class="fas fa-exclamation-triangle"></i> Search unavailable</div>';
            } finally {
                this.isSearching = false;
            }
        }

        renderResults() {
            let html = '';
            this.results.forEach((result, index) => {
                const active = index === this.selectedIndex ? 'active' : '';
                html += `
                    <div class="fc-smart-item ${active}" data-index="${index}">
                        <div class="smart-main">${result.main_text}</div>
                        <div class="smart-secondary">${result.secondary_text}</div>
                        ${result.formatted_address !== result.main_text ? `<div class="smart-meta">${result.formatted_address}</div>` : ''}
                    </div>
                `;
            });
            this.dropdown.innerHTML = html;
            this.dropdown.querySelectorAll('.fc-smart-item').forEach(item => {
                item.addEventListener('click', () => {
                    const idx = parseInt(item.dataset.index);
                    this.selectResult(this.results[idx]);
                });
                item.addEventListener('mouseenter', () => {
                    this.selectedIndex = parseInt(item.dataset.index);
                    this.updateSelection();
                });
            });
        }

        updateSelection() {
            const items = this.dropdown.querySelectorAll('.fc-smart-item');
            items.forEach((item, idx) => {
                if (idx === this.selectedIndex) {
                    item.classList.add('active');
                    item.scrollIntoView({ block: 'nearest', behavior: 'smooth' });
                } else {
                    item.classList.remove('active');
                }
            });
        }

        async selectResult(result) {
            this.input.value = result.formatted_address;
            this.hideDropdown();
            const coords = await geocodeAddress(result.formatted_address);
            if (coords && this.onSelect) {
                this.onSelect(coords.lat, coords.lng);
            }
            if (this.input.classList.contains('required-field')) {
                this.input.classList.add('has-value');
            }
            const row = this.input.closest('.form-row-card');
            const noteInput = row?.querySelector('.note-input');
            if (noteInput) setTimeout(() => noteInput.focus(), 50);
        }

        showDropdown() {
            this.dropdown.classList.add('show');
            this.isVisible = true;
            const pac = document.querySelector('.pac-container');
            if (pac) pac.style.display = 'none';
        }

        hideDropdown() {
            this.dropdown.classList.remove('show');
            this.isVisible = false;
            this.selectedIndex = -1;
        }

        destroy() {
            if (this.dropdown) this.dropdown.remove();
        }
    }

    // ============================================================
    // SHARED CALLBACKS
    // ============================================================
    function onPickupSelected(lat, lng) {
        document.getElementById('pickupLat').value = lat;
        document.getElementById('pickupLng').value = lng;
        if (pickupMarker) pickupMarker.setLngLat([lng, lat]).addTo(map);
        isPickupSet = true;
        map.setCenter([lng, lat]);
        map.setZoom(14);
        if (isDropoffSet) calculateRoute();
        const inp = document.getElementById('pickupAddress');
        if (inp.classList.contains('required-field')) inp.classList.add('has-value');
        const note = inp.closest('.form-row-card')?.querySelector('.note-input');
        if (note) setTimeout(() => note.focus(), 50);
        setTimeout(() => {
            const dest = document.getElementById('destination');
            if (dest && !dest.value.trim()) {
                dest.focus();
                dest.classList.add('field-highlight');
                setTimeout(() => dest.classList.remove('field-highlight'), 500);
            }
        }, 400);
    }

    function onDestinationSelected(lat, lng) {
        if (dropoffMarker) dropoffMarker.setLngLat([lng, lat]).addTo(map);
        isDropoffSet = true;
        if (isPickupSet) calculateRoute();
        const inp = document.getElementById('destination');
        if (inp.classList.contains('required-field')) inp.classList.add('has-value');
        const note = inp.closest('.form-row-card')?.querySelector('.note-input');
        if (note) setTimeout(() => note.focus(), 50);
        setTimeout(() => {
            const via = document.getElementById('viaAddress');
            if (via && !via.value.trim()) {
                via.focus();
                via.classList.add('field-highlight');
                setTimeout(() => via.classList.remove('field-highlight'), 500);
            }
        }, 400);
    }

    function onViaSelected(lat, lng) {
        if (viaMarker) viaMarker.setLngLat([lng, lat]).addTo(map);
        isViaActive = true;
        if (isPickupSet && isDropoffSet) calculateRoute();
        const inp = document.getElementById('viaAddress');
        const note = inp?.closest('.form-row-card')?.querySelector('.note-input');
        if (note) setTimeout(() => note.focus(), 50);
        setTimeout(() => {
            const name = document.getElementById('customerName');
            if (name && !name.value.trim()) {
                name.focus();
                name.classList.add('field-highlight');
                setTimeout(() => name.classList.remove('field-highlight'), 500);
            }
        }, 400);
    }

    // ============================================================
    // GOOGLE PLACES AUTOCOMPLETE
    // ============================================================
    window.initAutocomplete = function() {
        let p = document.getElementById('pickupAddress'), d = document.getElementById('destination'), v = document.getElementById('viaAddress');
        if (p && window.google && google.maps && google.maps.places) {
            let a = new google.maps.places.Autocomplete(p, { componentRestrictions: { country: 'gb' } });
            a.addListener('place_changed', function() {
                let place = a.getPlace();
                if (place && place.geometry) {
                    let lat = place.geometry.location.lat(), lng = place.geometry.location.lng();
                    onPickupSelected(lat, lng);
                }
            });
        }
        if (d && window.google && google.maps && google.maps.places) {
            let a = new google.maps.places.Autocomplete(d, { componentRestrictions: { country: 'gb' } });
            a.addListener('place_changed', function() {
                let place = a.getPlace();
                if (place && place.geometry) {
                    let lat = place.geometry.location.lat(), lng = place.geometry.location.lng();
                    onDestinationSelected(lat, lng);
                }
            });
        }
        if (v && window.google && google.maps && google.maps.places) {
            let a = new google.maps.places.Autocomplete(v, { componentRestrictions: { country: 'gb' } });
            a.addListener('place_changed', function() {
                let place = a.getPlace();
                if (place && place.geometry) {
                    let lat = place.geometry.location.lat(), lng = place.geometry.location.lng();
                    onViaSelected(lat, lng);
                }
            });
        }
    };

    // ============================================================
    // VIA STOPS - Alt+A
    // ============================================================
    function addViaStop() {
        viaStopCount++;
        var container = document.getElementById('viaStopsContainer');
        var newRow = document.createElement('div');
        newRow.className = 'form-row-card';
        newRow.id = 'viaStop_' + viaStopCount;
        newRow.innerHTML = `
            <span class="row-label"><i class="fas fa-road"></i> VIA ${viaStopCount}</span>
            <input type="text" name="via_${viaStopCount}" id="viaAddress_${viaStopCount}" class="main-input" style="flex:4;" placeholder="Type address..." autocomplete="off">
            <div class="note-container"><span class="note-label">Note</span><input type="text" name="via_note_${viaStopCount}" id="viaNote_${viaStopCount}" class="note-input" placeholder="Door/Flat"></div>
            <div class="icon-group">
                <button type="button" class="icon-btn" onclick="centerOnAddress('viaAddress_${viaStopCount}')"><i class="fas fa-map-pin"></i></button>
                <button type="button" class="icon-btn" onclick="openMap('viaAddress_${viaStopCount}')"><i class="fas fa-map"></i></button>
                <button type="button" class="icon-btn" onclick="removeViaStop(${viaStopCount})" style="color:#EF4444;"><i class="fas fa-times"></i></button>
            </div>
        `;
        container.appendChild(newRow);
        if (typeof FleetCortexSmartSearch !== 'undefined') {
            smartSearchInstances['via_' + viaStopCount] = new FleetCortexSmartSearch('viaAddress_' + viaStopCount, function(lat, lng) {
                isViaActive = true;
                if (isPickupSet && isDropoffSet) calculateRoute();
            });
        }
        showToast('📍 Via stop added (Alt+A)', 'success');
    }

    function removeViaStop(id) {
        var el = document.getElementById('viaStop_' + id);
        if (el) {
            el.remove();
            showToast('Via stop removed', 'info');
        }
    }

    // ============================================================
    // SYNC PRICING CHECKBOX
    // ============================================================
    (function setupPricingExtras() {
        var syncCheck = document.getElementById('syncPriceCost');
        var costInput = document.getElementById('modalCost');
        var priceInput = document.getElementById('modalPrice');
        var customPercent = document.getElementById('customPercentInput');

        if (syncCheck && costInput && priceInput) {
            syncCheck.addEventListener('change', function() {
                if (this.checked) {
                    costInput.value = priceInput.value;
                }
            });
            costInput.addEventListener('input', function() {
                if (syncCheck.checked) {
                    priceInput.value = costInput.value;
                }
            });
            priceInput.addEventListener('input', function() {
                if (syncCheck.checked) {
                    costInput.value = priceInput.value;
                }
            });
        }

        if (customPercent) {
            customPercent.addEventListener('keydown', function(e) {
                if (e.key === 'Enter') {
                    e.preventDefault();
                    applyCustomPercent();
                }
            });
        }
    })();

    // ============================================================
    // INITIALIZATION
    // ============================================================
    document.addEventListener('DOMContentLoaded', function() {
        initMap();
        setupRequiredFieldValidation();
        updateDriverQueue();
        updateZoneStats();
        updateFooterSummary();
        calculateNearestVehicleETA();

        let rv = document.getElementById('repeatDaysInput').value;
        if (rv) rv.split(',').forEach(d => { document.querySelectorAll('.day-toggle').forEach(btn => { if (btn.dataset.day === d) btn.classList.add('active'); }); });

        setInterval(updateDriverQueue, 30000);
        setInterval(updateZoneStats, 30000);
        setInterval(updateFooterSummary, 30000);
        setInterval(calculateNearestVehicleETA, 30000);
        setupAutoCursor();
        startLiveClock();

        if (typeof FleetCortexSmartSearch !== 'undefined') {
            smartSearchInstances.pickup = new FleetCortexSmartSearch('pickupAddress', onPickupSelected);
            smartSearchInstances.destination = new FleetCortexSmartSearch('destination', onDestinationSelected);
            smartSearchInstances.via = new FleetCortexSmartSearch('viaAddress', onViaSelected);
        }

        let p = document.getElementById('pickupAddress');
        if (p) setTimeout(() => { p.focus(); p.classList.add('field-highlight'); setTimeout(() => p.classList.remove('field-highlight'), 500); }, 300);
    });

    document.addEventListener('click', function(e) {
        let c = document.querySelector('.multi-select-container');
        let d = document.getElementById('capabilitiesDropdown');
        if (c && d && !c.contains(e.target)) d.classList.remove('show');
    });
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCgoKF9qJ3bl1oQv4k6VYNi8Xhkf7qTdEA&libraries=places&callback=initAutocomplete" async defer></script>
</body>
</html>