<!-- Navigation Links untuk Siswa - Versi Mobile Friendly -->

<!-- Desktop Navigation (sembunyi di HP) -->
<div class="hidden sm:flex sm:space-x-8 sm:-my-px sm:ml-10">
    <!-- Dashboard -->
    <a href="{{ route('dashboard') }}" 
       class="inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium leading-5 focus:outline-none transition duration-150 ease-in-out {{ request()->routeIs('dashboard') ? 'border-blue-400 text-gray-900 focus:border-blue-700' : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 focus:text-gray-700 focus:border-gray-300' }}">
        <i class="fas fa-home mr-1"></i>
        Dashboard
    </a>
    
    <!-- Input Harian -->
    <a href="{{ route('siswa.input') }}" 
       class="inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium leading-5 focus:outline-none transition duration-150 ease-in-out {{ request()->routeIs('siswa.input*') ? 'border-blue-400 text-gray-900 focus:border-blue-700' : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 focus:text-gray-700 focus:border-gray-300' }}">
        <i class="fas fa-pen mr-1"></i>
        Input Harian
    </a>
    
    <!-- Rekomendasi -->
    <a href="{{ route('siswa.recommendations') }}" 
       class="inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium leading-5 focus:outline-none transition duration-150 ease-in-out {{ request()->routeIs('siswa.recommendations*') ? 'border-blue-400 text-gray-900 focus:border-blue-700' : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 focus:text-gray-700 focus:border-gray-300' }}">
        <i class="fas fa-lightbulb mr-1"></i>
        Rekomendasi
    </a>
    
    <!-- Visualisasi -->
    <a href="{{ route('siswa.visualization') }}" 
       class="inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium leading-5 focus:outline-none transition duration-150 ease-in-out {{ request()->routeIs('siswa.visualization') ? 'border-blue-400 text-gray-900 focus:border-blue-700' : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 focus:text-gray-700 focus:border-gray-300' }}">
        <i class="fas fa-chart-bar mr-1"></i>
        Visualisasi
    </a>
    
    <!-- Riwayat -->
    <a href="{{ route('siswa.history') }}" 
       class="inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium leading-5 focus:outline-none transition duration-150 ease-in-out {{ request()->routeIs('siswa.history') ? 'border-blue-400 text-gray-900 focus:border-blue-700' : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 focus:text-gray-700 focus:border-gray-300' }}">
        <i class="fas fa-history mr-1"></i>
        Riwayat
    </a>
    
    <!-- Koneksi Orang Tua -->
    <a href="{{ route('siswa.parent-connection') }}" 
       class="inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium leading-5 focus:outline-none transition duration-150 ease-in-out {{ request()->routeIs('siswa.parent-connection*') ? 'border-blue-400 text-gray-900 focus:border-blue-700' : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 focus:text-gray-700 focus:border-gray-300' }}">
        <i class="fas fa-link mr-1"></i>
        Koneksi
    </a>
</div>

<!-- User Menu (Desktop) -->
<div class="hidden sm:flex items-center space-x-3 ml-auto">
    <span class="text-sm text-gray-700">{{ auth()->user()->name }}</span>
    <a href="{{ route('profile.edit') }}" class="text-blue-600 hover:text-blue-800" title="Edit Profil">
        <i class="fas fa-user-edit"></i>
    </a>
    <form method="POST" action="{{ route('logout') }}" class="inline">
        @csrf
        <button type="submit" class="text-red-600 hover:text-red-800">
            <i class="fas fa-sign-out-alt"></i>
        </button>
    </form>
</div>

<!-- Mobile Navigation - Hanya muncul di HP -->
<div class="sm:hidden" id="mobile-menu">
    <!-- Tombol Hamburger -->
    <div class="flex items-center justify-between px-4 py-3 bg-white border-t">
        <div class="flex items-center space-x-2">
            <span class="text-lg font-bold text-blue-600">Menu Siswa</span>
            <span class="text-xs bg-blue-100 text-blue-800 px-2 py-1 rounded-full">Siswa</span>
        </div>
        <button onclick="toggleMobileMenu()" class="text-gray-500 hover:text-gray-700 focus:outline-none p-2">
            <svg class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
            </svg>
        </button>
    </div>
    
    <!-- Menu Items (hidden by default) -->
    <div id="mobileMenuItems" class="hidden bg-white shadow-lg border-t max-h-[80vh] overflow-y-auto">
        <div class="px-2 py-3 space-y-1">
            <!-- Dashboard -->
            <a href="{{ route('dashboard') }}" 
               class="block px-3 py-3 rounded-md text-base font-medium {{ request()->routeIs('dashboard') ? 'bg-blue-100 text-blue-700' : 'text-gray-700 hover:bg-gray-100' }}">
                <i class="fas fa-home mr-3 w-5 text-blue-600"></i>
                Dashboard
            </a>
            
            <!-- Input Harian -->
            <a href="{{ route('siswa.input') }}" 
               class="block px-3 py-3 rounded-md text-base font-medium {{ request()->routeIs('siswa.input*') ? 'bg-blue-100 text-blue-700' : 'text-gray-700 hover:bg-gray-100' }}">
                <i class="fas fa-pen mr-3 w-5 text-blue-600"></i>
                Input Harian
            </a>
            
            <!-- Rekomendasi -->
            <a href="{{ route('siswa.recommendations') }}" 
               class="block px-3 py-3 rounded-md text-base font-medium {{ request()->routeIs('siswa.recommendations*') ? 'bg-blue-100 text-blue-700' : 'text-gray-700 hover:bg-gray-100' }}">
                <i class="fas fa-lightbulb mr-3 w-5 text-yellow-600"></i>
                Rekomendasi
            </a>
            
            <!-- Visualisasi -->
            <a href="{{ route('siswa.visualization') }}" 
               class="block px-3 py-3 rounded-md text-base font-medium {{ request()->routeIs('siswa.visualization') ? 'bg-blue-100 text-blue-700' : 'text-gray-700 hover:bg-gray-100' }}">
                <i class="fas fa-chart-bar mr-3 w-5 text-green-600"></i>
                Visualisasi
            </a>
            
            <!-- Riwayat -->
            <a href="{{ route('siswa.history') }}" 
               class="block px-3 py-3 rounded-md text-base font-medium {{ request()->routeIs('siswa.history') ? 'bg-blue-100 text-blue-700' : 'text-gray-700 hover:bg-gray-100' }}">
                <i class="fas fa-history mr-3 w-5 text-purple-600"></i>
                Riwayat
            </a>
            
            <!-- Koneksi Orang Tua -->
            <a href="{{ route('siswa.parent-connection') }}" 
               class="block px-3 py-3 rounded-md text-base font-medium {{ request()->routeIs('siswa.parent-connection*') ? 'bg-blue-100 text-blue-700' : 'text-gray-700 hover:bg-gray-100' }}">
                <i class="fas fa-link mr-3 w-5 text-indigo-600"></i>
                Koneksi Orang Tua
            </a>
            
            <!-- Divider -->
            <div class="border-t border-gray-200 my-3"></div>
            
            <!-- Edit Profil -->
            <a href="{{ route('profile.edit') }}" 
               class="block px-3 py-3 rounded-md text-base font-medium text-blue-600 hover:bg-blue-50">
                <i class="fas fa-user-edit mr-3 w-5"></i>
                Edit Profil
            </a>
            
            <!-- Logout -->
            <form method="POST" action="{{ route('logout') }}" class="block">
                @csrf
                <button type="submit" class="w-full text-left px-3 py-3 rounded-md text-base font-medium text-red-600 hover:bg-red-50">
                    <i class="fas fa-sign-out-alt mr-3 w-5"></i>
                    Logout ({{ auth()->user()->name }})
                </button>
            </form>
        </div>
    </div>
</div>

<script>
// Toggle mobile menu
function toggleMobileMenu() {
    const menu = document.getElementById('mobileMenuItems');
    menu.classList.toggle('hidden');
}

// Close menu when clicking a link
document.querySelectorAll('#mobileMenuItems a, #mobileMenuItems button').forEach(item => {
    item.addEventListener('click', function() {
        setTimeout(() => {
            document.getElementById('mobileMenuItems').classList.add('hidden');
        }, 100);
    });
});

// Close menu when clicking outside
document.addEventListener('click', function(event) {
    const menu = document.getElementById('mobileMenuItems');
    const hamburgerButton = event.target.closest('button');
    
    if (!menu.classList.contains('hidden') && 
        !event.target.closest('#mobile-menu') && 
        !hamburgerButton) {
        menu.classList.add('hidden');
    }
});
</script>

<style>
/* Animasi untuk mobile menu */
#mobileMenuItems {
    transition: all 0.3s ease;
    -webkit-overflow-scrolling: touch;
}

/* Custom scrollbar */
#mobileMenuItems::-webkit-scrollbar {
    width: 4px;
}
#mobileMenuItems::-webkit-scrollbar-track {
    background: #f1f1f1;
}
#mobileMenuItems::-webkit-scrollbar-thumb {
    background: #93c5fd;
    border-radius: 4px;
}
</style>