<?php
$current_page = basename($_SERVER['PHP_SELF']);

// Helper function to check active links
function isActive($page, $current) {
    return $page === $current ? 'bg-blue-600 text-white shadow-inner' : 'text-slate-300 hover:bg-slate-800 hover:text-white';
}
?>

<div id="sidebar-overlay" class="fixed inset-0 bg-slate-900/80 z-40 hidden md:hidden backdrop-blur-sm transition-opacity opacity-0" aria-hidden="true"></div>

<aside id="main-sidebar" class="w-56 bg-slate-900 dark:bg-slate-950 border-r border-slate-800 flex flex-col h-full shrink-0 transition-transform duration-300 ease-in-out fixed md:relative z-50 left-0 top-0 bottom-0 -translate-x-full md:translate-x-0">
    
    <div class="h-14 flex items-center justify-between px-4 border-b border-slate-800 bg-slate-950/50 shrink-0">
        <div class="flex items-center">
            <svg class="w-8 h-8 shrink-0 text-blue-500 group-hover:text-orange-500 transition-colors" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M16 3L27.2583 9.5V22.5L16 29L4.74167 22.5V9.5L16 3Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                <path d="M16 16L10 12.5M16 16L22 12.5M16 16V23" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
                <circle cx="16" cy="16" r="2.5" fill="#f97316"/>
                <circle cx="10" cy="12.5" r="1.5" fill="currentColor"/>
                <circle cx="22" cy="12.5" r="1.5" fill="currentColor"/>
                <circle cx="16" cy="23" r="1.5" fill="currentColor"/>
            </svg>
            <div class="flex flex-col">
                <span class="text-[17px] font-black tracking-tighter text-white leading-none">
                    &nbsp;&nbsp;Chris&nbsp;<span class="text-blue-500">OS</span>
                </span>
                <span class="text-[9px] font-bold text-gray-500 uppercase tracking-widest leading-none mt-1">
                    &nbsp;&nbsp;v3.0
                </span>
            </div>
        </div>
        
        <button id="close-sidebar" class="md:hidden text-slate-400 hover:text-white transition p-2 -mr-2">
            <i class="fas fa-times text-lg"></i>
        </button>
    </div>

    <nav class="flex-1 overflow-y-auto py-4 custom-scrollbar">
        <ul class="space-y-1 px-2 text-xs font-medium">
            
            <li>
                <a href="index.php" class="flex items-center px-3 py-2 rounded transition-colors <?= isActive('index.php', $current_page) ?>">
                    <i class="fas fa-home w-5 text-center mr-2 opacity-75"></i> Dashboard
                </a>
            </li>

            <li class="pt-4 pb-1">
                <div class="px-3 text-[10px] font-bold text-slate-500 uppercase tracking-wider">Job Tracker</div>
            </li>
            <li>
                <a href="job_entry.php" class="flex items-center px-3 py-2 rounded transition-colors <?= isActive('job_entry.php', $current_page) ?>">
                    <i class="fas fa-plus-circle w-5 text-center mr-2 opacity-75"></i> New Job
                </a>
            </li>
            <li>
                <a href="reports.php" class="flex items-center px-3 py-2 rounded transition-colors <?= isActive('reports.php', $current_page) ?>">
                    <i class="fas fa-list-alt w-5 text-center mr-2 opacity-75"></i> Job History
                </a>
            </li>
            

            <li class="pt-4 pb-1">
                <div class="px-3 text-[10px] font-bold text-slate-500 uppercase tracking-wider">Fiber Tracker</div>
            </li>
            <li>
                <a href="projects.php" class="flex items-center px-3 py-2 rounded transition-colors <?= isActive('projects.php', $current_page) ?>">
                    <i class="fas fa-project-diagram w-5 text-center mr-2 opacity-75"></i> Projects
                </a>
            </li>
            <li>
                <a href="cable_map.php" class="flex items-center px-3 py-2 rounded transition-colors <?= isActive('cable_map.php', $current_page) ?>">
                    <i class="fas fa-draw-polygon w-5 text-center mr-2 opacity-75"></i> Cable Maps
                </a>
            </li>

            <li class="pt-4 pb-1">
                <div class="px-3 text-[10px] font-bold text-slate-500 uppercase tracking-wider">Timesheets</div>
            </li>
            <li>
                <a href="timesheet.php" class="flex items-center px-3 py-2 rounded transition-colors <?= isActive('timesheet.php', $current_page) ?>">
                    <i class="fas fa-clock w-5 text-center mr-2 opacity-75"></i> My Timesheet
                </a>
            </li>
            <li>
                <a href="accounts.php" class="flex items-center px-3 py-2 rounded transition-colors <?= isActive('accounts.php', $current_page) ?>">
                    <i class="fas fa-file-invoice-dollar w-5 text-center mr-2 opacity-75"></i> Account Codes
                </a>
            </li>
            <li>
                <a href="pto_management.php" class="flex items-center px-3 py-2 rounded transition-colors <?= isActive('pto_management.php', $current_page) ?>">
                    <i class="fas fa-umbrella-beach w-5 text-center mr-2 opacity-75"></i> PTO Management
                </a>
            </li>
            <li class="pt-4 pb-1">
                <div class="px-3 text-[10px] font-bold text-slate-500 uppercase tracking-wider">Utilities</div>
            </li>
            <li>
                <a href="customers.php" class="flex items-center px-3 py-2 rounded transition-colors <?= isActive('customers.php', $current_page) ?>">
                    <i class="fas fa-users w-5 text-center mr-2 opacity-75"></i> Customers
                </a>
            </li>
            <li>
                <a href="materials.php" class="flex items-center px-3 py-2 rounded transition-colors <?= isActive('materials.php', $current_page) ?>">
                    <i class="fas fa-boxes w-5 text-center mr-2 opacity-75"></i> Inventory & Kits
                </a>
            </li>
            <li>
                <a href="networks.php" class="flex items-center px-3 py-2 rounded transition-colors <?= isActive('networks.php', $current_page) ?>">
                    <i class="fas fa-network-wired w-5 text-center mr-2 opacity-75"></i> Networks
                </a>
            </li>
<li>
                <a href="backup.php" class="flex items-center px-3 py-2 rounded transition-colors <?= isActive('backup.php', $current_page) ?>">
                    <i class="fas fa-download w-5 text-center mr-2 opacity-75"></i> Backup Project
                </a>
            </li>
        </ul>
    </nav>

    <div class="p-4 border-t border-slate-800 bg-slate-950/30 shrink-0">
        <div class="flex items-center justify-between mb-3 px-1">
            <div class="flex items-center text-slate-300">
                <div class="h-7 w-7 rounded-full bg-slate-700 flex items-center justify-center text-[10px] font-bold border border-slate-600">
                    <i class="fas fa-user"></i>
                </div>
                <div class="ml-2 text-xs font-bold capitalize">Chris</div>
            </div>
        </div>
        
        <button id="theme-toggle" class="w-full flex items-center justify-center gap-2 py-1.5 px-3 bg-slate-800 hover:bg-slate-700 text-slate-300 rounded text-[10px] font-bold uppercase tracking-wider transition border border-slate-700 shadow-sm">
            <i class="fas fa-moon hidden dark:inline"></i>
            <i class="fas fa-sun inline dark:hidden"></i>
            <span class="hidden dark:inline">Light Mode</span>
            <span class="inline dark:hidden">Dark Mode</span>
        </button>
    </div>
</aside>

<script defer src="/assets/js/alpine.min.js"></script>

<style>
    [x-cloak] { display: none !important; }
    /* Custom compact scrollbar for sidebar */
    .custom-scrollbar::-webkit-scrollbar { width: 4px; }
    .custom-scrollbar::-webkit-scrollbar-track { background: transparent; }
    .custom-scrollbar::-webkit-scrollbar-thumb { background: #334155; border-radius: 4px; }
    .custom-scrollbar:hover::-webkit-scrollbar-thumb { background: #475569; }
</style>

<script>
    // Theme Toggle
    (function() {
        const toggleBtn = document.getElementById('theme-toggle');
        const html = document.documentElement;
        if (toggleBtn) {
            toggleBtn.addEventListener('click', () => {
                html.classList.toggle('dark');
                localStorage.theme = html.classList.contains('dark') ? 'dark' : 'light';
            });
        }
    })();

    // Mobile Sidebar Toggle Logic
    document.addEventListener('DOMContentLoaded', () => {
        const sidebar = document.getElementById('main-sidebar');
        const overlay = document.getElementById('sidebar-overlay');
        const closeBtn = document.getElementById('close-sidebar');
        
        // Listen for clicks on ANY button with the class 'open-sidebar-btn'
        document.body.addEventListener('click', (e) => {
            const openBtn = e.target.closest('.open-sidebar-btn');
            if (openBtn) {
                sidebar.classList.remove('-translate-x-full');
                overlay.classList.remove('hidden');
                // Micro-delay to allow CSS display:block to register before fading in opacity
                setTimeout(() => overlay.classList.remove('opacity-0'), 10);
            }
        });

        // Close functions
        function closeSidebar() {
            sidebar.classList.add('-translate-x-full');
            overlay.classList.add('opacity-0');
            setTimeout(() => overlay.classList.add('hidden'), 300); // Wait for sliding animation
        }

        if (closeBtn) closeBtn.addEventListener('click', closeSidebar);
        if (overlay) overlay.addEventListener('click', closeSidebar);
    });
</script>