<?php
// admin/includes/nav.php - Responsive Navigation Bar with Training & Feedback
$current_page = basename($_SERVER['PHP_SELF'], '.php');
?>
<nav class="bg-white shadow-lg border-b-4 border-blue-600">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="flex justify-between items-center h-20">
            <!-- Logo and Brand -->
            <div class="flex items-center">
                <a href="<?php echo base_url('admin/dashboard.php'); ?>" class="flex items-center">
                    <img src="https://www.timetraining.ae/design/images/new_logo.png" 
                         alt="Time Training Center" 
                         class="h-12 mr-3">
                    <div class="hidden lg:block border-l-2 border-gray-300 pl-3">
                        <p class="text-gray-800 text-sm font-semibold">Assessment Management</p>
                        <p class="text-gray-500 text-xs">Admin Panel</p>
                    </div>
                </a>
            </div>
            
            <!-- Desktop Navigation Links -->
            <div class="hidden lg:flex items-center space-x-1">
                <a href="<?php echo base_url('admin/dashboard.php'); ?>" 
                   class="px-3 py-2 rounded-lg transition text-sm <?php echo $current_page === 'dashboard' ? 'bg-blue-100 text-blue-700 font-semibold' : 'text-gray-700 hover:bg-gray-100'; ?>">
                    <i class="fas fa-home mr-1"></i>Dashboard
                </a>
                
                <!-- Assessments Dropdown -->
                <div class="relative group">
                    <button class="px-3 py-2 rounded-lg transition text-sm <?php echo in_array($current_page, ['exams', 'questions', 'students', 'results']) ? 'bg-blue-100 text-blue-700 font-semibold' : 'text-gray-700 hover:bg-gray-100'; ?> flex items-center">
                        <i class="fas fa-clipboard-list mr-1"></i>Assessments
                        <i class="fas fa-chevron-down ml-1 text-xs"></i>
                    </button>
                    <div class="hidden group-hover:block absolute left-0 mt-1 w-48 bg-white rounded-lg shadow-xl border border-gray-200 py-2 z-50">
                        <a href="<?php echo base_url('admin/exams.php'); ?>" 
                           class="block px-4 py-2 text-sm text-gray-700 hover:bg-blue-50 hover:text-blue-700">
                            <i class="fas fa-clipboard-list mr-2 w-4"></i>Manage Exams
                        </a>
                        <a href="<?php echo base_url('admin/questions.php'); ?>" 
                           class="block px-4 py-2 text-sm text-gray-700 hover:bg-blue-50 hover:text-blue-700">
                            <i class="fas fa-question-circle mr-2 w-4"></i>Questions Bank
                        </a>
                        <a href="<?php echo base_url('admin/students.php'); ?>" 
                           class="block px-4 py-2 text-sm text-gray-700 hover:bg-blue-50 hover:text-blue-700">
                            <i class="fas fa-user-graduate mr-2 w-4"></i>Participants
                        </a>
                        <a href="<?php echo base_url('admin/results.php'); ?>" 
                           class="block px-4 py-2 text-sm text-gray-700 hover:bg-blue-50 hover:text-blue-700">
                            <i class="fas fa-chart-line mr-2 w-4"></i>Exam Results
                        </a>
                    </div>
                </div>
                
                <!-- Training Dropdown -->
                <div class="relative group">
                    <button class="px-3 py-2 rounded-lg transition text-sm <?php echo in_array($current_page, ['trainings', 'feedback-reports']) ? 'bg-blue-100 text-blue-700 font-semibold' : 'text-gray-700 hover:bg-gray-100'; ?> flex items-center">
                        <i class="fas fa-chalkboard-teacher mr-1"></i>Training
                        <i class="fas fa-chevron-down ml-1 text-xs"></i>
                    </button>
                    <div class="hidden group-hover:block absolute left-0 mt-1 w-48 bg-white rounded-lg shadow-xl border border-gray-200 py-2 z-50">
                        <a href="<?php echo base_url('admin/trainings.php'); ?>" 
                           class="block px-4 py-2 text-sm text-gray-700 hover:bg-blue-50 hover:text-blue-700">
                            <i class="fas fa-calendar-alt mr-2 w-4"></i>Training Sessions
                        </a>
                        <a href="<?php echo base_url('admin/feedback-reports.php'); ?>" 
                           class="block px-4 py-2 text-sm text-gray-700 hover:bg-blue-50 hover:text-blue-700">
                            <i class="fas fa-comments mr-2 w-4"></i>Feedback Reports
                        </a>
                    </div>
                </div>
            </div>
            
            <!-- User Menu & Mobile Toggle -->
            <div class="flex items-center space-x-3">
                <!-- Desktop User Info -->
                <div class="hidden md:flex items-center bg-gray-100 rounded-lg px-3 py-2">
                    <div class="bg-blue-600 text-white rounded-full w-8 h-8 flex items-center justify-center mr-2">
                        <i class="fas fa-user text-sm"></i>
                    </div>
                    <div class="mr-2">
                        <p class="text-sm font-semibold text-gray-800"><?php echo escape($_SESSION['admin_name']); ?></p>
                        <p class="text-xs text-gray-500">Administrator</p>
                    </div>
                </div>
                
                <!-- Logout Button -->
                <a href="<?php echo base_url('admin/logout.php'); ?>" 
                   class="hidden md:flex bg-gradient-to-r from-red-500 to-red-600 hover:from-red-600 hover:to-red-700 text-white px-4 py-2 rounded-lg transition shadow-md items-center text-sm">
                    <i class="fas fa-sign-out-alt mr-2"></i>
                    <span>Logout</span>
                </a>
                
                <!-- Mobile Menu Button -->
                <button onclick="toggleMobileMenu()" class="lg:hidden text-gray-700 hover:text-blue-600 focus:outline-none p-2">
                    <i id="menuIcon" class="fas fa-bars text-2xl"></i>
                </button>
            </div>
        </div>
    </div>
</nav>

<!-- Mobile Menu -->
<div id="mobile-menu" class="hidden lg:hidden bg-white border-b border-gray-200 shadow-lg">
    <div class="px-4 py-3 space-y-2 max-h-screen overflow-y-auto">
        <!-- Dashboard -->
        <a href="<?php echo base_url('admin/dashboard.php'); ?>" 
           class="flex items-center px-4 py-3 rounded-lg <?php echo $current_page === 'dashboard' ? 'bg-blue-100 text-blue-700 font-semibold' : 'text-gray-700 hover:bg-gray-100'; ?>">
            <i class="fas fa-home w-5"></i>
            <span class="ml-3">Dashboard</span>
        </a>
        
        <!-- Assessments Section -->
        <div class="border-t border-gray-200 pt-2">
            <div class="px-4 py-2 text-xs font-semibold text-gray-500 uppercase tracking-wider">
                Assessments
            </div>
            <a href="<?php echo base_url('admin/exams.php'); ?>" 
               class="flex items-center px-4 py-3 rounded-lg <?php echo $current_page === 'exams' ? 'bg-blue-100 text-blue-700 font-semibold' : 'text-gray-700 hover:bg-gray-100'; ?>">
                <i class="fas fa-clipboard-list w-5"></i>
                <span class="ml-3">Manage Exams</span>
            </a>
            <a href="<?php echo base_url('admin/questions.php'); ?>" 
               class="flex items-center px-4 py-3 rounded-lg <?php echo $current_page === 'questions' ? 'bg-blue-100 text-blue-700 font-semibold' : 'text-gray-700 hover:bg-gray-100'; ?>">
                <i class="fas fa-question-circle w-5"></i>
                <span class="ml-3">Questions Bank</span>
            </a>
            <a href="<?php echo base_url('admin/students.php'); ?>" 
               class="flex items-center px-4 py-3 rounded-lg <?php echo $current_page === 'students' ? 'bg-blue-100 text-blue-700 font-semibold' : 'text-gray-700 hover:bg-gray-100'; ?>">
                <i class="fas fa-user-graduate w-5"></i>
                <span class="ml-3">Participants</span>
            </a>
            <a href="<?php echo base_url('admin/results.php'); ?>" 
               class="flex items-center px-4 py-3 rounded-lg <?php echo $current_page === 'results' ? 'bg-blue-100 text-blue-700 font-semibold' : 'text-gray-700 hover:bg-gray-100'; ?>">
                <i class="fas fa-chart-line w-5"></i>
                <span class="ml-3">Exam Results</span>
            </a>
        </div>
        
        <!-- Training Section -->
        <div class="border-t border-gray-200 pt-2">
            <div class="px-4 py-2 text-xs font-semibold text-gray-500 uppercase tracking-wider">
                Training
            </div>
            <a href="<?php echo base_url('admin/trainings.php'); ?>" 
               class="flex items-center px-4 py-3 rounded-lg <?php echo $current_page === 'trainings' ? 'bg-blue-100 text-blue-700 font-semibold' : 'text-gray-700 hover:bg-gray-100'; ?>">
                <i class="fas fa-calendar-alt w-5"></i>
                <span class="ml-3">Training Sessions</span>
            </a>
            <a href="<?php echo base_url('admin/feedback-reports.php'); ?>" 
               class="flex items-center px-4 py-3 rounded-lg <?php echo $current_page === 'feedback-reports' ? 'bg-blue-100 text-blue-700 font-semibold' : 'text-gray-700 hover:bg-gray-100'; ?>">
                <i class="fas fa-comments w-5"></i>
                <span class="ml-3">Feedback Reports</span>
            </a>
        </div>
        
        <!-- User Section -->
        <div class="border-t border-gray-200 pt-2 mt-2">
            <div class="flex items-center px-4 py-3 bg-gray-50 rounded-lg">
                <div class="bg-blue-600 text-white rounded-full w-10 h-10 flex items-center justify-center">
                    <i class="fas fa-user"></i>
                </div>
                <div class="ml-3 flex-1">
                    <p class="text-sm font-semibold text-gray-800"><?php echo escape($_SESSION['admin_name']); ?></p>
                    <p class="text-xs text-gray-500">Administrator</p>
                </div>
            </div>
            <a href="<?php echo base_url('admin/logout.php'); ?>" 
               class="flex items-center px-4 py-3 mt-2 rounded-lg bg-gradient-to-r from-red-500 to-red-600 text-white font-semibold hover:from-red-600 hover:to-red-700 shadow-md">
                <i class="fas fa-sign-out-alt w-5"></i>
                <span class="ml-3">Logout</span>
            </a>
        </div>
    </div>
</div>

<style>
/* Smooth dropdown animations */
.group:hover > div {
    animation: slideDown 0.2s ease-out;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Mobile menu slide animation */
#mobile-menu {
    transition: max-height 0.3s ease-in-out;
}

/* Ensure dropdowns work on touch devices */
@media (hover: none) {
    .group:focus-within > div {
        display: block;
    }
}

/* Active link indicator */
.bg-blue-100 {
    position: relative;
}

.bg-blue-100::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 70%;
    background: #2563eb;
    border-radius: 0 3px 3px 0;
}

/* Responsive adjustments */
@media (max-width: 1024px) {
    nav .max-w-7xl {
        padding-left: 1rem;
        padding-right: 1rem;
    }
}

@media (max-width: 640px) {
    nav .h-20 {
        height: 4rem;
    }
    
    nav img {
        height: 2.5rem;
    }
}
</style>

<script>
// Mobile menu toggle with animation
function toggleMobileMenu() {
    const menu = document.getElementById('mobile-menu');
    const icon = document.getElementById('menuIcon');
    
    if (menu.classList.contains('hidden')) {
        menu.classList.remove('hidden');
        icon.classList.remove('fa-bars');
        icon.classList.add('fa-times');
        // Prevent body scroll when menu is open
        document.body.style.overflow = 'hidden';
    } else {
        menu.classList.add('hidden');
        icon.classList.remove('fa-times');
        icon.classList.add('fa-bars');
        // Restore body scroll
        document.body.style.overflow = '';
    }
}

// Close mobile menu when clicking outside
document.addEventListener('click', function(event) {
    const menu = document.getElementById('mobile-menu');
    const menuButton = event.target.closest('[onclick="toggleMobileMenu()"]');
    
    if (!menu.contains(event.target) && !menuButton && !menu.classList.contains('hidden')) {
        menu.classList.add('hidden');
        document.getElementById('menuIcon').classList.remove('fa-times');
        document.getElementById('menuIcon').classList.add('fa-bars');
        document.body.style.overflow = '';
    }
});

// Close mobile menu on window resize if it's open
window.addEventListener('resize', function() {
    if (window.innerWidth >= 1024) {
        const menu = document.getElementById('mobile-menu');
        if (!menu.classList.contains('hidden')) {
            menu.classList.add('hidden');
            document.getElementById('menuIcon').classList.remove('fa-times');
            document.getElementById('menuIcon').classList.add('fa-bars');
            document.body.style.overflow = '';
        }
    }
});

// Make dropdowns keyboard accessible
document.querySelectorAll('.group button').forEach(button => {
    button.addEventListener('click', function(e) {
        e.stopPropagation();
        const dropdown = this.nextElementSibling;
        const isHidden = dropdown.classList.contains('hidden');
        
        // Close all other dropdowns
        document.querySelectorAll('.group > div').forEach(d => {
            d.classList.add('hidden');
        });
        
        // Toggle current dropdown
        if (isHidden) {
            dropdown.classList.remove('hidden');
        }
    });
});

// Close dropdowns when clicking outside
document.addEventListener('click', function(event) {
    if (!event.target.closest('.group')) {
        document.querySelectorAll('.group > div').forEach(dropdown => {
            dropdown.classList.add('hidden');
        });
    }
});
</script>