<?php 
// Get current page to auto-activate menu
$current_page = basename($_SERVER['PHP_SELF']);
?>

<div class="sidebar-inner h-100 d-flex flex-column" style="background: var(--primary-dark);">
    
    <div class="sidebar-logo text-center py-4 border-bottom" style="border-color: rgba(212, 175, 55, 0.2) !important;">
        <img src="https://ahmadonlineacademy.com/assets/images/logo.png" alt="Ahmad Academy" style="height: 60px; max-width: 90%; object-fit: contain; filter: drop-shadow(0 4px 6px rgba(0,0,0,0.3));">
    </div>
    
    <div class="nav flex-column flex-nowrap mt-3 flex-grow-1 custom-scrollbar pb-3" style="overflow-y: auto; overflow-x: hidden;">
        
        <p class="text-white-50 small fw-bold text-uppercase px-4 mt-2 mb-1" style="font-size: 10px; letter-spacing: 1px;">Main Menu</p>

        <a class="nav-link text-white py-3 px-4 <?= ($current_page == 'user-dashboard' || $current_page == 'index') ? 'active-link' : ''; ?>" href="user-dashboard">
            <i class="fas fa-th-large me-3 icon-fixed-width text-white-50"></i> Dashboard
        </a>

        <a class="nav-link text-white py-3 px-4 <?= ($current_page == 'my_courses' || $current_page == 'watch_lesson') ? 'active-link' : ''; ?>" href="my_courses">
            <i class="fas fa-laptop-code me-3 icon-fixed-width" style="color: #60a5fa;"></i> My Courses
        </a>

        <a class="nav-link text-white py-3 px-4 <?= ($current_page == 'live_classes.php' || $current_page == 'join_class') ? 'active-link' : ''; ?>" href="live_classes">
            <i class="fas fa-video me-3 icon-fixed-width" style="color: #f87171;"></i> Live Classes
        </a>

        <a class="nav-link text-white py-3 px-4 <?= ($current_page == 'attendance') ? 'active-link' : ''; ?>" href="attendance">
            <i class="fas fa-calendar-check me-3 icon-fixed-width" style="color: #a7f3d0;"></i> Attendance
        </a>

        <p class="text-white-50 small fw-bold text-uppercase px-4 mt-4 mb-1" style="font-size: 10px; letter-spacing: 1px;">Academics & Tests</p>

        <a class="nav-link text-white py-3 px-4 <?= ($current_page == 'assignments' || $current_page == 'submit_assignment') ? 'active-link' : ''; ?>" href="assignments">
            <i class="fas fa-tasks me-3 icon-fixed-width" style="color: #fcd34d;"></i> Assignments
        </a>

        <a class="nav-link text-white py-3 px-4 <?= ($current_page == 'hifz_tracker') ? 'active-link' : ''; ?>" href="hifz_tracker">
            <i class="fas fa-book-open me-3 icon-fixed-width" style="color: var(--accent);"></i> Hifz Tracker
        </a>

        <a class="nav-link text-white py-3 px-4 <?= ($current_page == 'exams' || $current_page == 'take_exam') ? 'active-link' : ''; ?>" href="exams">
            <i class="fas fa-pen-alt me-3 icon-fixed-width text-white-50"></i> Online Exams
        </a>

        <a class="nav-link text-white py-3 px-4 <?= ($current_page == 'all_results' || $current_page == 'exam_result' || $current_page == 'review_exam') ? 'active-link' : ''; ?>" href="all_results">
            <i class="fas fa-history me-3 icon-fixed-width text-white-50"></i> Exam History
        </a>
        
        <a class="nav-link text-white py-3 px-4 <?= ($current_page == 'merit_list') ? 'active-link' : ''; ?>" href="merit_list">
            <i class="fas fa-trophy me-3 icon-fixed-width" style="color: #fbbf24;"></i> Merit List
        </a>

        <p class="text-white-50 small fw-bold text-uppercase px-4 mt-4 mb-1" style="font-size: 10px; letter-spacing: 1px;">Others</p>
        
        <a class="nav-link text-white py-3 px-4 <?= ($current_page == 'progress_report') ? 'active-link' : ''; ?>" href="progress_report">
            <i class="fas fa-chart-line me-3 icon-fixed-width" style="color: #6ee7b7;"></i> Progress Report
        </a>

        <a class="nav-link text-white py-3 px-4 <?= ($current_page == 'communication') ? 'active-link' : ''; ?>" href="communication">
            <i class="fas fa-comments me-3 icon-fixed-width" style="color: #93c5fd;"></i> Communications
        </a>

        <a class="nav-link text-white py-3 px-4 <?= ($current_page == 'noticeboard') ? 'active-link' : ''; ?>" href="noticeboard">
            <i class="fas fa-bullhorn me-3 icon-fixed-width" style="color: #ffa500;"></i> Notice Board
        </a>

        <a class="nav-link text-white py-3 px-4 <?= ($current_page == 'profile') ? 'active-link' : ''; ?>" href="profile">
            <i class="fas fa-user-circle me-3 icon-fixed-width text-white-50"></i> My Profile
        </a>
    </div>

    <div class="mt-auto pt-3 pb-4 border-top" style="border-color: rgba(255,255,255,0.05) !important;">
        <a class="nav-link text-white py-2 px-4 fw-bold logout-btn" href="logout">
            <i class="fas fa-sign-out-alt me-3 icon-fixed-width text-danger"></i> Logout
        </a>
    </div>
</div>

<style>
    /* Custom Scrollbar for Sidebar */
    .custom-scrollbar::-webkit-scrollbar { width: 5px; }
    .custom-scrollbar::-webkit-scrollbar-track { background: transparent; }
    .custom-scrollbar::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 10px; }
    .custom-scrollbar:hover::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.25); }

    .icon-fixed-width { width: 22px; text-align: center; font-size: 16px; }

    .nav-link { 
        opacity: 0.75; 
        transition: all 0.3s ease; 
        text-decoration: none; 
        display: flex; 
        align-items: center; 
        border-left: 3px solid transparent;
        font-size: 14.5px;
        font-weight: 500;
        margin-bottom: 2px;
        white-space: nowrap;
    }
    
    .nav-link:hover { 
        opacity: 1; 
        background: rgba(255,255,255,0.03); 
        padding-left: 32px !important; 
        color: var(--accent) !important; 
    }
    .nav-link:hover i { color: var(--accent) !important; }

    .active-link { 
        background: linear-gradient(90deg, rgba(212, 175, 55, 0.1) 0%, transparent 100%) !important; 
        border-color: var(--accent) !important; 
        color: var(--accent) !important;
        opacity: 1 !important; 
        font-weight: 700;
    }
    .active-link i { color: var(--accent) !important; }

    .logout-btn { opacity: 0.9; }
    .logout-btn:hover { 
        background: linear-gradient(90deg, rgba(239, 68, 68, 0.15) 0%, transparent 100%) !important; 
        color: #ef4444 !important; 
        border-left-color: #ef4444 !important; 
    }
    .logout-btn:hover i { color: #ef4444 !important; }
</style>