@php $role = auth()->user()->role; @endphp
{{-- Mobile overlay --}}
<div id="sidebarOverlay" class="fixed inset-0 bg-black/40 backdrop-blur-sm z-40 hidden md:hidden transition-opacity opacity-0"></div>

<aside id="sidebar" class="fixed md:static inset-y-0 left-0 w-64 bg-white border-r border-gray-200 min-h-[calc(100dvh-60px)] z-50 transform -translate-x-full md:translate-x-0 transition-transform duration-300 ease-in-out">
    <div class="p-3 md:p-4 space-y-1 h-full overflow-y-auto">
        <div class="md:hidden flex justify-end mb-2">
            <button id="sidebarClose" class="p-2 text-gray-500 hover:text-gray-700 hover:bg-gray-100 rounded-lg">
                <i class="fas fa-times text-lg"></i>
            </button>
        </div>

        <a href="{{ route('dashboard') }}" class="flex items-center gap-3 px-3 md:px-4 py-2.5 rounded-xl hover:bg-gray-50 transition {{ request()->routeIs('dashboard') ? 'bg-blue-50 text-blue-700 shadow-sm' : 'text-gray-700' }}">
            <i class="fas fa-home w-5 text-center"></i> <span class="text-sm font-medium">Dashboard</span>
        </a>

        @if($role === 'admin')
            <a href="{{ route('admin.users.index') }}" class="flex items-center gap-3 px-3 md:px-4 py-2.5 rounded-xl hover:bg-gray-50 transition {{ request()->routeIs('admin.users.*') ? 'bg-blue-50 text-blue-700 shadow-sm' : 'text-gray-700' }}">
                <i class="fas fa-users w-5 text-center"></i> <span class="text-sm font-medium">Kelola User</span>
            </a>
            <a href="{{ route('admin.courses.index') }}" class="flex items-center gap-3 px-3 md:px-4 py-2.5 rounded-xl hover:bg-gray-50 transition {{ request()->routeIs('admin.courses.*') ? 'bg-blue-50 text-blue-700 shadow-sm' : 'text-gray-700' }}">
                <i class="fas fa-book w-5 text-center"></i> <span class="text-sm font-medium">Mata Kuliah</span>
            </a>
            <a href="{{ route('admin.exams.index') }}" class="flex items-center gap-3 px-3 md:px-4 py-2.5 rounded-xl hover:bg-gray-50 transition {{ request()->routeIs('admin.exams.*') ? 'bg-blue-50 text-blue-700 shadow-sm' : 'text-gray-700' }}">
                <i class="fas fa-clipboard-list w-5 text-center"></i> <span class="text-sm font-medium">Ujian</span>
            </a>
            <a href="{{ route('admin.settings') }}" class="flex items-center gap-3 px-3 md:px-4 py-2.5 rounded-xl hover:bg-gray-50 transition {{ request()->routeIs('admin.settings') ? 'bg-blue-50 text-blue-700 shadow-sm' : 'text-gray-700' }}">
                <i class="fas fa-cog w-5 text-center"></i> <span class="text-sm font-medium">Pengaturan</span>
            </a>
        @endif

        @if($role === 'dosen')
            <a href="{{ route('dosen.courses.index') }}" class="flex items-center gap-3 px-3 md:px-4 py-2.5 rounded-xl hover:bg-gray-50 transition {{ request()->routeIs('dosen.courses.*') ? 'bg-blue-50 text-blue-700 shadow-sm' : 'text-gray-700' }}">
                <i class="fas fa-book w-5 text-center"></i> <span class="text-sm font-medium">Mata Kuliah</span>
            </a>
            <a href="{{ route('dosen.questions.index') }}" class="flex items-center gap-3 px-3 md:px-4 py-2.5 rounded-xl hover:bg-gray-50 transition {{ request()->routeIs('dosen.questions.*') ? 'bg-blue-50 text-blue-700 shadow-sm' : 'text-gray-700' }}">
                <i class="fas fa-question-circle w-5 text-center"></i> <span class="text-sm font-medium">Soal</span>
            </a>
            <a href="{{ route('dosen.exams.index') }}" class="flex items-center gap-3 px-3 md:px-4 py-2.5 rounded-xl hover:bg-gray-50 transition {{ request()->routeIs('dosen.exams.*') ? 'bg-blue-50 text-blue-700 shadow-sm' : 'text-gray-700' }}">
                <i class="fas fa-clipboard-list w-5 text-center"></i> <span class="text-sm font-medium">Ujian</span>
            </a>
            <a href="{{ route('dosen.results.index') }}" class="flex items-center gap-3 px-3 md:px-4 py-2.5 rounded-xl hover:bg-gray-50 transition {{ request()->routeIs('dosen.results.*') ? 'bg-blue-50 text-blue-700 shadow-sm' : 'text-gray-700' }}">
                <i class="fas fa-pen w-5 text-center"></i> <span class="text-sm font-medium">Hasil & Nilai</span>
            </a>
            <a href="{{ route('dosen.reports.index') }}" class="flex items-center gap-3 px-3 md:px-4 py-2.5 rounded-xl hover:bg-gray-50 transition {{ request()->routeIs('dosen.reports.*') ? 'bg-blue-50 text-blue-700 shadow-sm' : 'text-gray-700' }}">
                <i class="fas fa-file-export w-5 text-center"></i> <span class="text-sm font-medium">Laporan</span>
            </a>
        @endif

        @if($role === 'mahasiswa')
            <a href="{{ route('mahasiswa.exams.available') }}" class="flex items-center gap-3 px-3 md:px-4 py-2.5 rounded-xl hover:bg-gray-50 transition {{ request()->routeIs('mahasiswa.exams.available') ? 'bg-blue-50 text-blue-700 shadow-sm' : 'text-gray-700' }}">
                <i class="fas fa-pencil-alt w-5 text-center"></i> <span class="text-sm font-medium">Ujian Tersedia</span>
            </a>
            <a href="{{ route('mahasiswa.results.index') }}" class="flex items-center gap-3 px-3 md:px-4 py-2.5 rounded-xl hover:bg-gray-50 transition {{ request()->routeIs('mahasiswa.results.*') ? 'bg-blue-50 text-blue-700 shadow-sm' : 'text-gray-700' }}">
                <i class="fas fa-chart-bar w-5 text-center"></i> <span class="text-sm font-medium">Hasil Ujian</span>
            </a>
        @endif
    </div>
</aside>

<script>
(function() {
    const toggle = document.getElementById('mobileMenuToggle');
    const sidebar = document.getElementById('sidebar');
    const overlay = document.getElementById('sidebarOverlay');
    const closeBtn = document.getElementById('sidebarClose');

    function openSidebar() {
        sidebar.classList.remove('-translate-x-full');
        overlay.classList.remove('hidden');
        setTimeout(() => overlay.classList.remove('opacity-0'), 10);
        document.body.style.overflow = 'hidden';
    }

    function closeSidebar() {
        sidebar.classList.add('-translate-x-full');
        overlay.classList.add('opacity-0');
        setTimeout(() => overlay.classList.add('hidden'), 300);
        document.body.style.overflow = '';
    }

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