<?php
// admin/includes/footer.php
$current_page = basename($_SERVER['PHP_SELF']);
?>
    <!-- Bottom Navigation Bar (iOS Style) - Only visible on mobile -->
    <nav class="fixed bottom-0 left-0 right-0 bg-white/80 dark:bg-background-dark/80 backdrop-blur-xl border-t border-slate-200/50 dark:border-slate-800/50 px-4 pt-2 pb-6 flex justify-between items-center z-40 lg:hidden shadow-[0_-10px_40px_rgba(0,0,0,0.05)]">
        <a class="flex flex-col items-center gap-1 transition-all duration-300 <?= $current_page == 'index.php' ? 'text-primary scale-110' : 'text-slate-400' ?>" href="index.php">
            <span class="material-symbols-outlined text-[22px] <?= $current_page == 'index.php' ? 'fill-1' : '' ?>">dashboard</span>
            <span class="text-[8px] font-black uppercase tracking-widest">Home</span>
        </a>
        <a class="flex flex-col items-center gap-1 transition-all duration-300 <?= $current_page == 'fleet.php' ? 'text-primary scale-110' : 'text-slate-400' ?>" href="fleet.php">
            <span class="material-symbols-outlined text-[22px] <?= $current_page == 'fleet.php' ? 'fill-1' : '' ?>">garage</span>
            <span class="text-[8px] font-black uppercase tracking-widest">Fleet</span>
        </a>

        <div class="relative -mt-10">
            <div class="absolute inset-0 bg-primary/20 blur-xl rounded-full animate-pulse"></div>
            <?php
            $btnClass = "relative bg-gradient-to-br from-primary to-blue-600 size-14 rounded-2xl flex items-center justify-center shadow-lg shadow-primary/40 border-4 border-white dark:border-background-dark active:scale-90 transition-all duration-300 focus:outline-none rotate-45";
            $iconClass = "material-symbols-outlined text-white text-3xl -rotate-45";
            ?>
            <?php if ($current_page === 'drivers.php'): ?>
                <button onclick="document.getElementById('addDriverModal').classList.remove('hidden')" class="<?= $btnClass ?>">
                    <span class="<?= $iconClass ?>">add</span>
                </button>
            <?php elseif ($current_page === 'fleet.php'): ?>
                <button onclick="document.getElementById('addModal').classList.remove('hidden')" class="<?= $btnClass ?>">
                    <span class="<?= $iconClass ?>">add</span>
                </button>
            <?php else: ?>
                <a href="fleet.php" class="<?= $btnClass ?>">
                    <span class="<?= $iconClass ?>">add</span>
                </a>
            <?php endif; ?>
        </div>

        <a class="flex flex-col items-center gap-1 transition-all duration-300 <?= $current_page == 'payments.php' ? 'text-primary scale-110' : 'text-slate-400' ?>" href="payments.php">
            <span class="material-symbols-outlined text-[22px] <?= $current_page == 'payments.php' ? 'fill-1' : '' ?>">payments</span>
            <span class="text-[8px] font-black uppercase tracking-widest">Pay</span>
        </a>
        <a class="flex flex-col items-center gap-1 transition-all duration-300 <?= $current_page == 'drivers.php' ? 'text-primary scale-110' : 'text-slate-400' ?>" href="drivers.php">
            <span class="material-symbols-outlined text-[22px] <?= $current_page == 'drivers.php' ? 'fill-1' : '' ?>">group</span>
            <span class="text-[8px] font-black uppercase tracking-widest">Drivers</span>
        </a>
    </nav>

    <?php include 'floating_chat_include.php'; ?>

    <script>
        function toggleSidebar() {
            const sidebar = document.getElementById('sidebar');
            const overlay = document.getElementById('drawer-overlay');
            const isHidden = sidebar.classList.contains('-translate-x-full');

            if (isHidden) {
                sidebar.classList.remove('-translate-x-full');
                overlay.classList.remove('hidden');
            } else {
                sidebar.classList.add('-translate-x-full');
                overlay.classList.add('hidden');
            }
        }

        document.getElementById('drawer-overlay')?.addEventListener('click', toggleSidebar);

        function toggleDarkMode() {
            if (document.documentElement.classList.contains('dark')) {
                document.documentElement.classList.remove('dark');
                localStorage.theme = 'light';
            } else {
                document.documentElement.classList.add('dark');
                localStorage.theme = 'dark';
            }
        }
    </script>
</body>
</html>
