@props(['currentPage' => 'dashboard'])

<nav class="glass border-b border-white/20 sticky top-0 z-50">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="flex items-center justify-between h-16">
            <!-- Logo and Brand -->
            <div class="flex items-center">
                <a href="{{ route('admin.dashboard') }}" class="floating-element">
                    <img src="https://www.esmt.berlin/sites/default/files/2021-11/ESMT_Berlin_Logo_Blue_RGB.png" 
                         alt="ESMT Berlin" class="h-8 w-auto">
                </a>
                <div class="ml-4">
                    <h1 class="text-xl font-bold text-gray-800">Learning Innovation Lab</h1>
                    <p class="text-sm text-gray-600">{{ ucfirst(str_replace('-', ' ', $currentPage)) }}</p>
                </div>
            </div>

            <!-- Navigation Links -->
            <div class="hidden md:flex items-center space-x-1">
                <a href="{{ route('admin.dashboard') }}" 
                   class="px-4 py-2 rounded-lg text-sm font-medium transition-all duration-300 {{ $currentPage === 'dashboard' ? 'bg-blue-100 text-blue-800' : 'text-gray-600 hover:bg-gray-100 hover:text-gray-800' }}">
                    <i class="fas fa-tachometer-alt mr-2"></i>
                    Dashboard
                </a>
                <a href="{{ route('admin.programs') }}" 
                   class="px-4 py-2 rounded-lg text-sm font-medium transition-all duration-300 {{ $currentPage === 'programs' ? 'bg-blue-100 text-blue-800' : 'text-gray-600 hover:bg-gray-100 hover:text-gray-800' }}">
                    <i class="fas fa-graduation-cap mr-2"></i>
                    Programs
                </a>
                <a href="{{ route('admin.activities') }}" 
                   class="px-4 py-2 rounded-lg text-sm font-medium transition-all duration-300 {{ $currentPage === 'activities' ? 'bg-blue-100 text-blue-800' : 'text-gray-600 hover:bg-gray-100 hover:text-gray-800' }}">
                    <i class="fas fa-puzzle-piece mr-2"></i>
                    Activities
                </a>
                <div class="mx-2 h-6 w-px bg-gray-300"></div>
                <a href="{{ route('admin.embed-generator') }}" 
                   class="px-4 py-2 rounded-lg text-sm font-medium transition-all duration-300 {{ $currentPage === 'embed-generator' ? 'bg-blue-100 text-blue-800' : 'text-gray-600 hover:bg-gray-100 hover:text-gray-800' }}">
                    <i class="fas fa-code mr-2"></i>
                    Embed Tools
                </a>
            </div>

            <!-- Right Side Actions -->
            <div class="flex items-center space-x-4">
                <!-- System Status -->
                <div class="hidden sm:flex items-center space-x-2">
                    <div class="w-2 h-2 bg-green-500 rounded-full animate-pulse-glow"></div>
                    <span class="text-sm text-gray-600">System Online</span>
                </div>

                <!-- Quick Actions Dropdown -->
                <div class="relative">
                    <button onclick="toggleQuickActions()" class="glass px-4 py-2 rounded-lg text-gray-700 hover:bg-white/80 transition-all duration-300 flex items-center">
                        <i class="fas fa-bolt mr-2"></i>
                        Quick Actions
                        <i class="fas fa-chevron-down ml-2 text-xs"></i>
                    </button>
                    
                    <!-- Quick Actions Dropdown -->
                    <div id="quick-actions-menu" class="hidden absolute right-0 top-full mt-2 w-56 bg-white rounded-lg shadow-lg border border-gray-200 z-50">
                        <div class="py-1">
                            <a href="{{ route('admin.activities') }}" class="flex items-center px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 transition-colors">
                                <i class="fas fa-plus mr-3 text-green-600"></i>
                                Create New Activity
                            </a>
                            <a href="{{ route('admin.programs') }}" class="flex items-center px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 transition-colors">
                                <i class="fas fa-graduation-cap mr-3 text-blue-600"></i>
                                Manage Programs
                            </a>
                            <a href="{{ route('admin.embed-generator') }}" class="flex items-center px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 transition-colors">
                                <i class="fas fa-code mr-3 text-purple-600"></i>
                                Generate Embed Code
                            </a>
                            <div class="border-t border-gray-200 my-1"></div>
                            <a href="#" class="flex items-center px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 transition-colors">
                                <i class="fas fa-chart-bar mr-3 text-orange-600"></i>
                                View Analytics
                            </a>
                            <a href="#" class="flex items-center px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 transition-colors">
                                <i class="fas fa-cog mr-3 text-gray-600"></i>
                                Settings
                            </a>
                        </div>
                    </div>
                </div>

                <!-- User Menu -->
                <div class="relative">
                    <button onclick="toggleUserMenu()" class="flex items-center space-x-2 glass px-3 py-2 rounded-lg text-gray-700 hover:bg-white/80 transition-all duration-300">
                        <div class="w-8 h-8 bg-gradient-to-r from-blue-600 to-blue-800 rounded-full flex items-center justify-center text-white font-bold text-sm">
                            A
                        </div>
                        <span class="hidden sm:block text-sm font-medium">Admin</span>
                        <i class="fas fa-chevron-down text-xs"></i>
                    </button>
                    
                    <!-- User Menu Dropdown -->
                    <div id="user-menu" class="hidden absolute right-0 top-full mt-2 w-48 bg-white rounded-lg shadow-lg border border-gray-200 z-50">
                        <div class="py-1">
                            <div class="px-4 py-2 text-xs text-gray-500 border-b border-gray-200">
                                Signed in as Admin
                            </div>
                            <a href="#" class="flex items-center px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 transition-colors">
                                <i class="fas fa-user mr-3 text-blue-600"></i>
                                Profile
                            </a>
                            <a href="#" class="flex items-center px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 transition-colors">
                                <i class="fas fa-cog mr-3 text-gray-600"></i>
                                Settings
                            </a>
                            <div class="border-t border-gray-200 my-1"></div>
                            <a href="#" class="flex items-center px-4 py-2 text-sm text-red-600 hover:bg-red-50 transition-colors">
                                <i class="fas fa-sign-out-alt mr-3"></i>
                                Sign Out
                            </a>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Mobile Menu Button -->
            <div class="md:hidden">
                <button onclick="toggleMobileMenu()" class="glass p-2 rounded-lg text-gray-700 hover:bg-white/80 transition-all duration-300">
                    <i class="fas fa-bars"></i>
                </button>
            </div>
        </div>

        <!-- Mobile Navigation -->
        <div id="mobile-menu" class="hidden md:hidden border-t border-gray-200 py-4">
            <div class="space-y-1">
                <a href="{{ route('admin.dashboard') }}" 
                   class="block px-4 py-2 rounded-lg text-sm font-medium {{ $currentPage === 'dashboard' ? 'bg-blue-100 text-blue-800' : 'text-gray-600 hover:bg-gray-100' }}">
                    <i class="fas fa-tachometer-alt mr-2"></i>
                    Dashboard
                </a>
                <a href="{{ route('admin.programs') }}" 
                   class="block px-4 py-2 rounded-lg text-sm font-medium {{ $currentPage === 'programs' ? 'bg-blue-100 text-blue-800' : 'text-gray-600 hover:bg-gray-100' }}">
                    <i class="fas fa-graduation-cap mr-2"></i>
                    Programs
                </a>
                <a href="{{ route('admin.activities') }}" 
                   class="block px-4 py-2 rounded-lg text-sm font-medium {{ $currentPage === 'activities' ? 'bg-blue-100 text-blue-800' : 'text-gray-600 hover:bg-gray-100' }}">
                    <i class="fas fa-puzzle-piece mr-2"></i>
                    Activities
                </a>
                <a href="{{ route('admin.embed-generator') }}" 
                   class="block px-4 py-2 rounded-lg text-sm font-medium {{ $currentPage === 'embed-generator' ? 'bg-blue-100 text-blue-800' : 'text-gray-600 hover:bg-gray-100' }}">
                    <i class="fas fa-code mr-2"></i>
                    Embed Tools
                </a>
            </div>
        </div>
    </div>
</nav>

<script>
    function toggleQuickActions() {
        // Close other menus
        document.getElementById('user-menu').classList.add('hidden');
        document.getElementById('mobile-menu').classList.add('hidden');
        
        // Toggle quick actions
        document.getElementById('quick-actions-menu').classList.toggle('hidden');
    }

    function toggleUserMenu() {
        // Close other menus
        document.getElementById('quick-actions-menu').classList.add('hidden');
        document.getElementById('mobile-menu').classList.add('hidden');
        
        // Toggle user menu
        document.getElementById('user-menu').classList.toggle('hidden');
    }

    function toggleMobileMenu() {
        // Close other menus
        document.getElementById('quick-actions-menu').classList.add('hidden');
        document.getElementById('user-menu').classList.add('hidden');
        
        // Toggle mobile menu
        document.getElementById('mobile-menu').classList.toggle('hidden');
    }

    // Close dropdowns when clicking outside
    document.addEventListener('click', function(e) {
        if (!e.target.closest('[onclick^="toggle"]')) {
            document.getElementById('quick-actions-menu').classList.add('hidden');
            document.getElementById('user-menu').classList.add('hidden');
            document.getElementById('mobile-menu').classList.add('hidden');
        }
    });
</script>