<?php
// admin/includes/sidebar.php
$current_page = basename($_SERVER['PHP_SELF']);
?>
<div class="fixed top-0 left-0 h-full w-72 bg-white/95 dark:bg-surface-dark/95 backdrop-blur-md z-50 transform -translate-x-full transition-all duration-300 ease-in-out border-r border-slate-200/50 dark:border-slate-800/50 lg:translate-x-0 lg:static lg:block shadow-2xl lg:shadow-none" id="sidebar">
    <div class="flex items-center justify-between p-6">
        <div class="flex items-center gap-3 group cursor-pointer">
            <?php $logo = getAppLogo(); ?>
            <div class="relative">
                <?php if ($logo): ?>
                    <img src="<?= htmlspecialchars($logo) ?>" alt="Logo" class="h-10 w-auto object-contain transition-transform group-hover:scale-110 duration-300">
                <?php else: ?>
                    <div class="bg-gradient-to-br from-primary to-blue-600 size-10 rounded-xl flex items-center justify-center shadow-lg shadow-primary/30 transition-transform group-hover:scale-110 duration-300">
                        <span class="material-symbols-outlined text-white text-2xl">directions_car</span>
                    </div>
                <?php endif; ?>
                <div class="absolute -bottom-1 -right-1 size-3 bg-emerald-500 border-2 border-white dark:border-surface-dark rounded-full"></div>
            </div>
            <div class="flex flex-col">
                <span class="font-bold text-lg tracking-tight leading-none"><?= htmlspecialchars(getBrandName()) ?></span>
                <span class="text-[10px] font-bold text-primary uppercase tracking-widest mt-1">Admin Panel</span>
            </div>
        </div>
        <button class="p-2 hover:bg-slate-100 dark:hover:bg-slate-800 rounded-xl lg:hidden transition-colors" onclick="toggleSidebar()">
            <span class="material-symbols-outlined text-slate-500">close</span>
        </button>
    </div>

    <div class="h-[calc(100%-88px)] overflow-y-auto no-scrollbar px-4 pb-10">
        <p class="text-[10px] font-bold text-slate-400 dark:text-slate-500 uppercase tracking-[0.2em] px-3 mb-4 mt-2">Main Menu</p>
        <nav class="space-y-1">
            <?php
            $menu_items = [
                ['page' => 'index.php', 'icon' => 'dashboard', 'label' => 'Overview'],
                ['page' => 'fleet.php', 'icon' => 'garage', 'label' => 'Fleet Management'],
                ['page' => 'live_tracking.php', 'icon' => 'location_on', 'label' => 'Live Tracking'],
                ['page' => 'drivers.php', 'icon' => 'group', 'label' => 'Drivers'],
                ['page' => 'bookings.php', 'icon' => 'book_online', 'label' => 'Bookings'],
                ['page' => 'delivery.php', 'icon' => 'local_shipping', 'label' => 'Delivery'],
                ['page' => 'payments.php', 'icon' => 'payments', 'label' => 'Payments'],
                ['page' => 'reviews.php', 'icon' => 'reviews', 'label' => 'Reviews'],
                ['page' => 'users.php', 'icon' => 'people', 'label' => 'Users'],
                ['page' => 'reports.php', 'icon' => 'analytics', 'label' => 'Reports'],
            ];

            foreach ($menu_items as $item):
                $is_active = ($current_page == $item['page']);
            ?>
                <a class="flex items-center gap-3 p-3 group transition-all duration-200 <?= $is_active ? 'bg-primary text-white shadow-lg shadow-primary/25 font-semibold translate-x-1' : 'text-slate-600 dark:text-slate-400 hover:bg-slate-100 dark:hover:bg-slate-800/50 hover:translate-x-1' ?> rounded-xl" href="<?= $item['page'] ?>">
                    <span class="material-symbols-outlined text-[22px] <?= $is_active ? 'fill-1' : 'group-hover:scale-110 transition-transform' ?>"><?= $item['icon'] ?></span>
                    <span class="text-sm"><?= $item['label'] ?></span>
                    <?php if ($is_active): ?>
                        <span class="ml-auto size-1.5 rounded-full bg-white"></span>
                    <?php endif; ?>
                </a>
            <?php endforeach; ?>

            <a class="flex items-center justify-between p-3 group transition-all duration-200 <?= $current_page == 'notifications.php' ? 'bg-primary text-white shadow-lg shadow-primary/25 font-semibold translate-x-1' : 'text-slate-600 dark:text-slate-400 hover:bg-slate-100 dark:hover:bg-slate-800/50 hover:translate-x-1' ?> rounded-xl" href="notifications.php">
                <div class="flex items-center gap-3">
                    <span class="material-symbols-outlined text-[22px] <?= $current_page == 'notifications.php' ? 'fill-1' : 'group-hover:scale-110 transition-transform' ?>">notifications</span>
                    <span class="text-sm">Notifications</span>
                </div>
                <span id="notification-badge" class="<?= $current_page == 'notifications.php' ? 'bg-white text-primary' : 'bg-rose-500 text-white' ?> text-[10px] font-bold px-2 py-0.5 rounded-full hidden">0</span>
            </a>
        </nav>

        <p class="text-[10px] font-bold text-slate-400 dark:text-slate-500 uppercase tracking-[0.2em] px-3 mb-4 mt-8">System</p>
        <nav class="space-y-1">
            <a class="flex items-center gap-3 p-3 group transition-all duration-200 <?= $current_page == 'settings.php' ? 'bg-primary text-white shadow-lg shadow-primary/25 font-semibold translate-x-1' : 'text-slate-600 dark:text-slate-400 hover:bg-slate-100 dark:hover:bg-slate-800/50 hover:translate-x-1' ?> rounded-xl" href="settings.php">
                <span class="material-symbols-outlined text-[22px] <?= $current_page == 'settings.php' ? 'fill-1' : 'group-hover:scale-110 transition-transform' ?>">settings</span>
                <span class="text-sm">Settings</span>
            </a>
            <a class="flex items-center gap-3 p-3 group transition-all duration-200 <?= $current_page == 'rebrand.php' ? 'bg-primary text-white shadow-lg shadow-primary/25 font-semibold translate-x-1' : 'text-slate-600 dark:text-slate-400 hover:bg-slate-100 dark:hover:bg-slate-800/50 hover:translate-x-1' ?> rounded-xl" href="rebrand.php">
                <span class="material-symbols-outlined text-[22px] <?= $current_page == 'rebrand.php' ? 'fill-1' : 'group-hover:scale-110 transition-transform' ?>">palette</span>
                <span class="text-sm">Rebranding</span>
            </a>
            <a class="flex items-center gap-3 p-3 text-rose-500 hover:bg-rose-500/10 rounded-xl transition-all duration-200 hover:translate-x-1 group" href="logout.php">
                <span class="material-symbols-outlined text-[22px] group-hover:scale-110 transition-transform">logout</span>
                <span class="text-sm">Logout</span>
            </a>
        </nav>

        <div class="mt-10 px-3">
            <div class="p-4 bg-slate-50 dark:bg-slate-800/50 rounded-2xl border border-slate-200 dark:border-slate-800 relative overflow-hidden group">
                <div class="absolute -right-4 -bottom-4 size-20 bg-primary/5 rounded-full group-hover:scale-150 transition-transform duration-500"></div>
                <p class="text-[10px] font-bold text-slate-400 dark:text-slate-500 uppercase tracking-widest mb-1">Server Status</p>
                <div class="flex items-center gap-2">
                    <span class="size-2 rounded-full bg-emerald-500 animate-pulse"></span>
                    <span class="text-xs font-semibold text-slate-700 dark:text-slate-300">All Systems Operational</span>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
function toggleSidebar() {
    const sidebar = document.getElementById('sidebar');
    const overlay = document.getElementById('drawer-overlay');

    if (sidebar.classList.contains('-translate-x-full')) {
        sidebar.classList.remove('-translate-x-full');
        overlay.classList.remove('hidden');
        document.body.style.overflow = 'hidden';
    } else {
        sidebar.classList.add('-translate-x-full');
        overlay.classList.add('hidden');
        document.body.style.overflow = 'auto';
    }
}

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