<?php
require_once __DIR__ . '/../../admin/includes/branding.php';
?>
<!-- Navigation Drawer -->
<div id="drawer-overlay" class="fixed inset-0 bg-black/50 z-[60] hidden transition-opacity duration-300 opacity-0"></div>
<div id="navigation-drawer" class="fixed top-0 left-0 bottom-0 w-clamp-72 bg-background-light dark:bg-background-dark z-[70] transform -translate-x-full transition-transform duration-300 ease-in-out border-r border-slate-200 dark:border-slate-800">
    <div class="flex flex-col h-full">
        <div class="p-6 border-b border-slate-200 dark:border-slate-800">
            <?php $logo = getAppLogo(); ?>
            <?php if ($logo): ?>
                <img src="<?= htmlspecialchars($logo) ?>" alt="Logo" class="h-12 w-auto object-contain mb-2">
            <?php endif; ?>
            <h2 class="text-clamp-2xl font-bold text-primary"><?= htmlspecialchars(getBrandName()) ?></h2>
            <p class="text-clamp-xs text-slate-500 mt-1">Car Rental Services</p>
        </div>
        <div class="flex-1 overflow-y-auto py-4">
            <nav class="space-y-1 px-3">
                <a href="index.php" class="flex items-center gap-3 px-4 py-3 rounded-xl hover:bg-slate-100 dark:hover:bg-slate-800 transition-colors">
                    <span class="material-symbols-outlined text-slate-500">home</span>
                    <span class="text-clamp-base font-semibold">Home</span>
                </a>
                <a href="browse_cars.php" class="flex items-center gap-3 px-4 py-3 rounded-xl hover:bg-slate-100 dark:hover:bg-slate-800 transition-colors">
                    <span class="material-symbols-outlined text-slate-500">explore</span>
                    <span class="text-clamp-base font-semibold">Browse Cars</span>
                </a>
                <a href="my_bookings.php" class="flex items-center gap-3 px-4 py-3 rounded-xl hover:bg-slate-100 dark:hover:bg-slate-800 transition-colors">
                    <span class="material-symbols-outlined text-slate-500">calendar_today</span>
                    <span class="text-clamp-base font-semibold">My Bookings</span>
                </a>
                <a href="favorites.php" class="flex items-center gap-3 px-4 py-3 rounded-xl hover:bg-slate-100 dark:hover:bg-slate-800 transition-colors">
                    <span class="material-symbols-outlined text-slate-500">favorite</span>
                    <span class="text-clamp-base font-semibold">Favorites</span>
                </a>
                <hr class="my-4 border-slate-200 dark:border-slate-800 mx-4">
                <a href="profile.php" class="flex items-center gap-3 px-4 py-3 rounded-xl hover:bg-slate-100 dark:hover:bg-slate-800 transition-colors">
                    <span class="material-symbols-outlined text-slate-500">person</span>
                    <span class="text-clamp-base font-semibold">My Profile</span>
                </a>
            </nav>
        </div>
        <div class="p-6 border-t border-slate-200 dark:border-slate-800">
            <a href="logout.php" class="flex items-center gap-3 px-4 py-3 rounded-xl text-rose-500 hover:bg-rose-50 dark:hover:bg-rose-950/30 transition-colors">
                <span class="material-symbols-outlined">logout</span>
                <span class="text-clamp-base font-semibold">Logout</span>
            </a>
        </div>
    </div>
</div>

<script>
function openDrawer() {
    const overlay = document.getElementById('drawer-overlay');
    const drawer = document.getElementById('navigation-drawer');
    overlay.classList.remove('hidden');
    setTimeout(() => {
        overlay.classList.add('opacity-100');
        drawer.classList.remove('-translate-x-full');
    }, 10);
}

function closeDrawer() {
    const overlay = document.getElementById('drawer-overlay');
    const drawer = document.getElementById('navigation-drawer');
    overlay.classList.remove('opacity-100');
    drawer.classList.add('-translate-x-full');
    setTimeout(() => {
        overlay.classList.add('hidden');
    }, 300);
}

document.getElementById('drawer-overlay').addEventListener('click', closeDrawer);
</script>
