<?php
require_once '../admin/includes/branding.php';
require_once '../admin/includes/config.php';

if (!isset($_SESSION['logged_in']) || !$_SESSION['logged_in']) {
    header('Location: user_authentication.html');
    exit;
}

$booking_id = $_GET['booking_id'] ?? null;
if (!$booking_id) {
    header('Location: my_bookings.php');
    exit;
}

$pdo = getDBConnection();
$stmt = $pdo->prepare("
    SELECT b.*, v.make, v.model, v.images, v.plate_number, v.transmission, v.fuel_type, v.daily_rate,
           p.status as payment_status, p.payment_method, p.transaction_reference, p.amount as payment_amount,
           d.first_name as driver_first_name, d.last_name as driver_last_name, d.phone as driver_phone, d.employee_id as driver_employee_id, d.rating as driver_rating,
           r.id as review_id
    FROM bookings b
    LEFT JOIN vehicles v ON b.vehicle_id = v.id
    LEFT JOIN payments p ON b.id = p.booking_id
    LEFT JOIN drivers d ON b.driver_id = d.id
    LEFT JOIN reviews r ON b.id = r.booking_id
    WHERE b.id = ? AND b.user_id = ?
");
$stmt->execute([$booking_id, $_SESSION['user_id']]);
$booking = $stmt->fetch();

if (!$booking) {
    header('Location: my_bookings.php');
    exit;
}

// Fetch GPS Tracker settings
$stmt = $pdo->query("SELECT key_name, key_value FROM settings WHERE key_name IN ('gps_tracker_enabled', 'gps_tracker_code')");
$settings = $stmt->fetchAll(PDO::FETCH_KEY_PAIR);
$gps_enabled = ($settings['gps_tracker_enabled'] ?? '0') === '1';
$gps_code = $settings['gps_tracker_code'] ?? '';

$images = json_decode($booking['images'] ?? '[]', true);
$vehicle_image = !empty($images) ? $images[0] : 'https://images.unsplash.com/photo-1533473359331-0135ef1b58bf?auto=format&fit=crop&q=80&w=400';
?>
<!DOCTYPE html>
<html class="dark" lang="en">
<head>
    <meta charset="utf-8"/>
    <meta content="width=device-width, initial-scale=1.0" name="viewport"/>
    <title>Booking Details - <?= htmlspecialchars(getBrandName()) ?></title>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet"/>
    <link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
    <?php
    $base_path = "../admin/";
    include '../admin/includes/tailwind_config_include.php';
    ?>
    <link rel="stylesheet" href="../admin/includes/responsive.css">
    <style>
        .leaflet-container { z-index: 0 !important; }
    </style>
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=" crossorigin=""/>
    <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js" integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=" crossorigin=""></script>
</head>
<body class="bg-background-light dark:bg-background-dark text-gray-900 dark:text-white min-h-screen pb-24">
    <header class="sticky top-0 z-50 bg-background-light/80 dark:bg-background-dark/80 backdrop-blur-md border-b border-gray-200 dark:border-gray-800">
        <div class="flex items-center justify-between px-4 py-4 responsive-container">
            <a href="my_bookings.php" class="flex size-10 items-center justify-center rounded-full hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors">
                <span class="material-symbols-outlined">arrow_back</span>
            </a>
            <h1 class="text-clamp-lg font-bold">Booking Details</h1>
            <div class="w-10"></div>
        </div>
    </header>

    <main class="responsive-container p-4 space-y-6 max-w-5xl">
        <!-- Status Card -->
        <div class="bg-card-light dark:bg-card-dark rounded-2xl p-6 border border-gray-200 dark:border-gray-800 shadow-sm">
            <div class="flex justify-between items-center mb-4">
                <span class="text-xs font-bold uppercase text-gray-500">Status</span>
                <?php
                    $status_colors = [
                        'pending' => 'bg-orange-100 text-orange-700 dark:bg-orange-900/30 dark:text-orange-300',
                        'confirmed' => 'bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-300',
                        'active' => 'bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-300',
                        'completed' => 'bg-gray-100 text-gray-700 dark:bg-gray-900/30 dark:text-gray-300',
                        'cancelled' => 'bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-300'
                    ];
                ?>
                <span class="px-3 py-1 rounded-full text-xs font-bold uppercase <?= $status_colors[$booking['booking_status']] ?? 'bg-gray-100' ?>">
                    <?= $booking['booking_status'] ?>
                </span>
            </div>
        <div class="flex flex-col sm:flex-row justify-between items-start gap-4">
                <div>
                <h2 class="text-clamp-2xl font-bold text-primary mb-1"><?= htmlspecialchars($booking['reference_number']) ?></h2>
                <p class="text-clamp-xs text-gray-500">Booked on <?= date('M d, Y h:i A', strtotime($booking['created_at'])) ?></p>
                </div>
            <div class="flex gap-2 w-full sm:w-auto">
                <a href="messages.php?booking_id=<?= $booking['id'] ?>" class="flex-1 sm:flex-none flex items-center justify-center gap-2 px-4 py-2 rounded-xl bg-primary text-xs font-bold text-white shadow-lg shadow-primary/20 hover:scale-105 transition-transform">
                        <span class="material-symbols-outlined text-base">chat</span>
                        Chat
                    </a>
                    <a href="tel:+639123456789" class="flex items-center justify-center gap-2 px-4 py-2 rounded-xl bg-emerald-500 text-xs font-bold text-white shadow-lg shadow-emerald-500/20 hover:scale-105 transition-transform">
                        <span class="material-symbols-outlined text-base">call</span>
                        Call
                    </a>
                </div>
            </div>
        </div>

        <!-- Driver Details -->
        <?php if ($booking['driver_id']): ?>
        <div class="bg-card-light dark:bg-card-dark rounded-2xl p-6 border border-gray-200 dark:border-gray-800 shadow-sm">
            <div class="flex items-center gap-4 mb-4">
                <div class="size-12 rounded-full bg-primary/10 flex items-center justify-center text-primary">
                    <span class="material-symbols-outlined text-2xl">person</span>
                </div>
                <div>
                    <p class="text-[10px] text-gray-500 uppercase font-bold">Assigned Driver</p>
                    <h3 class="text-lg font-bold"><?= htmlspecialchars($booking['driver_first_name'] . ' ' . $booking['driver_last_name']) ?></h3>
                </div>
                <div class="ml-auto flex flex-col items-end">
                    <div class="flex items-center text-amber-500">
                        <span class="material-symbols-outlined text-xs" style="font-variation-settings: 'FILL' 1">star</span>
                        <span class="text-xs font-bold ml-0.5"><?= $booking['driver_rating'] ?: 'N/A' ?></span>
                    </div>
                    <p class="text-[10px] text-gray-500 font-bold"><?= htmlspecialchars($booking['driver_employee_id']) ?></p>
                </div>
            </div>
            <div class="grid grid-cols-1 gap-4 pt-4 border-t border-gray-100 dark:border-gray-800">
                <a href="tel:<?= htmlspecialchars($booking['driver_phone']) ?>" class="flex items-center justify-center gap-2 py-3 rounded-xl bg-gray-100 dark:bg-gray-800 text-sm font-bold text-gray-700 dark:text-gray-300">
                    <span class="material-symbols-outlined text-base">call</span>
                    Call Driver
                </a>
            </div>
        </div>
        <?php endif; ?>

        <!-- Vehicle Details -->
        <div class="bg-card-light dark:bg-card-dark rounded-2xl overflow-hidden border border-gray-200 dark:border-gray-800 shadow-sm">
            <div class="h-48 md:h-64 4xl:h-96 8xl:h-[30rem] bg-gray-200 bg-cover bg-center" style="background-image: url('<?= htmlspecialchars($vehicle_image) ?>')"></div>
            <div class="p-6">
                <h3 class="text-clamp-xl font-bold mb-1"><?= htmlspecialchars($booking['make'] . ' ' . $booking['model']) ?></h3>
                <p class="text-clamp-sm text-gray-500 mb-4"><?= htmlspecialchars($booking['plate_number']) ?> • <?= htmlspecialchars($booking['transmission']) ?> • <?= htmlspecialchars($booking['fuel_type']) ?></p>

                <div class="grid grid-cols-1 xs:grid-cols-2 gap-4 pt-4 border-t border-gray-100 dark:border-gray-800">
                    <div>
                        <p class="text-[10px] text-gray-500 uppercase font-bold">Pickup</p>
                        <p class="text-sm font-semibold"><?= date('M d, Y', strtotime($booking['pickup_date'])) ?></p>
                        <p class="text-xs text-gray-500"><?= htmlspecialchars($booking['pickup_location']) ?></p>
                        <?php if ($booking['pickup_description']): ?>
                            <p class="text-[10px] mt-1 text-primary italic">"<?= htmlspecialchars($booking['pickup_description']) ?>"</p>
                        <?php endif; ?>
                    </div>
                    <div>
                        <p class="text-[10px] text-gray-500 uppercase font-bold">Dropoff</p>
                        <p class="text-sm font-semibold"><?= date('M d, Y', strtotime($booking['dropoff_date'])) ?></p>
                        <p class="text-xs text-gray-500"><?= htmlspecialchars($booking['dropoff_location']) ?></p>
                    </div>
                </div>
            </div>
        </div>

        <!-- Pickup Map / GPS Tracker -->
        <?php if ($gps_enabled && !empty($gps_code)): ?>
            <div class="bg-card-light dark:bg-card-dark rounded-2xl p-6 border border-gray-200 dark:border-gray-800 shadow-sm overflow-hidden">
                <h3 class="text-lg font-bold mb-4 flex items-center gap-2">
                    <span class="material-symbols-outlined text-primary">location_on</span>
                    Real-time GPS Tracker
                </h3>
                <div class="w-full rounded-xl overflow-hidden border border-gray-100 dark:border-gray-800 bg-slate-100 dark:bg-slate-900 flex items-center justify-center">
                    <?php 
                        $final_code = str_replace(
                            ['{PLATE_NUMBER}', '{REFERENCE_NUMBER}'], 
                            [htmlspecialchars($booking['plate_number']), htmlspecialchars($booking['reference_number'])], 
                            $gps_code
                        );
                        echo $final_code;
                    ?>
                </div>
            </div>
        <?php elseif ($booking['pickup_latitude'] && $booking['pickup_longitude']): ?>
            <div class="bg-card-light dark:bg-card-dark rounded-2xl p-6 border border-gray-200 dark:border-gray-800 shadow-sm">
                <h3 class="text-lg font-bold mb-4">Pickup Location Map</h3>
                <div id="pickupMap" class="w-full h-64 rounded-xl border border-gray-100 dark:border-gray-800 z-0"></div>
                <script>
                    document.addEventListener('DOMContentLoaded', function() {
                        const lat = <?= $booking['pickup_latitude'] ?>;
                        const lng = <?= $booking['pickup_longitude'] ?>;
                        const map = L.map('pickupMap').setView([lat, lng], 16);
                        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
                            attribution: '© OpenStreetMap contributors'
                        }).addTo(map);
                        L.marker([lat, lng]).addTo(map)
                            .bindPopup('Pickup Location')
                            .openPopup();
                    });
                </script>
            </div>
        <?php endif; ?>

        <!-- Payment Summary -->
        <div class="bg-card-light dark:bg-card-dark rounded-2xl p-6 border border-gray-200 dark:border-gray-800 shadow-sm">
            <h3 class="text-lg font-bold mb-4">Payment Summary</h3>
            <div class="space-y-3 text-sm">
                <div class="flex justify-between">
                    <span class="text-gray-500">Daily Rate</span>
                    <span>₱<?= number_format($booking['daily_rate'], 2) ?></span>
                </div>
                <div class="flex justify-between">
                    <span class="text-gray-500">Rental Days</span>
                    <span><?= $booking['rental_days'] ?> days</span>
                </div>
                <div class="flex justify-between">
                    <span class="text-gray-500">Insurance Fee</span>
                    <span>₱<?= number_format($booking['insurance_amount'], 2) ?></span>
                </div>
                <div class="flex justify-between">
                    <span class="text-gray-500">Service Fee</span>
                    <span>₱<?= number_format($booking['service_fee'], 2) ?></span>
                </div>
                <?php if ($booking['with_carwash']): ?>
                <div class="flex justify-between">
                    <span class="text-gray-500">Carwash Service</span>
                    <span>₱<?= number_format($booking['carwash_amount'], 2) ?></span>
                </div>
                <?php endif; ?>
                <div class="flex justify-between font-bold text-base pt-3 border-t border-gray-100 dark:border-gray-800">
                    <span>Total Amount</span>
                    <span>₱<?= number_format($booking['total_amount'], 2) ?></span>
                </div>
                <div class="flex justify-between font-bold text-primary">
                    <span>Downpayment</span>
                    <span>₱<?= number_format($booking['downpayment_amount'], 2) ?></span>
                </div>
            </div>

            <div class="mt-6 p-4 rounded-xl bg-gray-50 dark:bg-gray-900/50">
                <div class="flex justify-between items-center mb-1">
                    <span class="text-xs font-bold uppercase text-gray-500">Payment Status</span>
                    <span class="text-sm font-bold capitalize <?= $booking['payment_status'] === 'verified' ? 'text-green-600' : 'text-orange-600' ?>">
                        <?= htmlspecialchars($booking['payment_status'] ?? 'Pending') ?>
                    </span>
                </div>
                <?php if ($booking['payment_method']): ?>
                    <p class="text-xs text-gray-500">Method: <?= htmlspecialchars(strtoupper($booking['payment_method'])) ?></p>
                    <?php if ($booking['transaction_reference']): ?>
                        <p class="text-xs text-gray-500">Ref: <?= htmlspecialchars($booking['transaction_reference']) ?></p>
                    <?php endif; ?>
                <?php endif; ?>
            </div>

            <div class="mt-6 flex gap-3">
                <?php if ($booking['booking_status'] === 'pending' && !$booking['payment_status']): ?>
                    <a href="payment_proof_upload.php?booking_id=<?= $booking['id'] ?>" class="flex-1 bg-primary text-white text-center py-3 rounded-xl font-bold">Submit Payment</a>
                <?php endif; ?>
                <?php if ($booking['booking_status'] === 'completed' && !$booking['review_id']): ?>
                    <a href="submit_rating_review.html?booking_id=<?= $booking['id'] ?>" class="flex-1 bg-amber-500 text-white text-center py-3 rounded-xl font-bold">Rate Your Experience</a>
                <?php endif; ?>
                <button onclick="window.print()" class="px-4 py-3 border border-gray-300 dark:border-gray-700 rounded-xl font-bold">
                    <span class="material-symbols-outlined text-base">print</span>
                </button>
            </div>
        </div>

        <?php if ($booking['booking_status'] === 'pending'): ?>
            <form action="../api/bookings.php" method="POST" onsubmit="return confirm('Are you sure you want to cancel this booking?');">
                <input type="hidden" name="action" value="cancel">
                <input type="hidden" name="booking_id" value="<?= $booking['id'] ?>">
                <button type="submit" class="w-full text-red-500 font-bold text-sm py-2">Cancel Booking</button>
            </form>
        <?php endif; ?>
    </main>
    <?php include '../admin/includes/floating_chat_include.php'; ?>
</body>
</html>
