<aside id="sidebar" class="sidebar bg-primary">
    <div class="sidebar-header d-flex justify-content-between align-items-center px-3 py-3 py-md-2">
        <a href="{{ Auth::user()->role == 'penjaga perpus' ? route('admin.dashboard') : route('dashboard') }}"
            class="d-flex align-items-center text-decoration-none" style="gap: 0.75rem;">
            <img src="{{ asset('images/logo/icon.svg') }}" alt="Ikon Perpus" style="height: 32px;" class="mt-md-2">
            <div class="d-flex align-items-center mt-md-2" style="gap: 1rem;">
                <div class="vr bg-white sidebar-title" style="width: 3px; height: 32px;"></div>
                <img src="{{ asset('images/logo/name.svg') }}" alt="Perpus" style="height: 30px;"
                    class="sidebar-title">
            </div>
        </a>
        <button type="button" class="btn-close d-lg-none" id="closeSidebarMobile"></button>
    </div>

    {{-- ======================================================= --}}
    {{-- Info User di Bagian atas (Hanya Muncul di Mobile) --}}
    {{-- ======================================================= --}}
    <div class="p-3 d-lg-none">
        <div class="bg-primary-subtle p-3 rounded-2">
            <h6 class="nav-text mb-0 fw-bold text-truncate d-block text-primary-emphasis">{{ Auth::user()->name }}</h6>

            <small class="nav-text text-dark text-truncate d-block">{{ Auth::user()->email }}</small>
        </div>
    </div>

    <ul class="nav flex-column px-2 mt-2">

        @if (Auth::user()->role == 'penjaga perpus')
            {{-- ================= MENU PENJAGA PERPUSTAKAAN ================= --}}
            <li class="nav-item"><a href="{{ route('admin.dashboard') }}"
                    class="nav-link {{ request()->routeIs('admin.dashboard') ? 'active' : '' }}"><i
                        class="bi bi-grid-1x2-fill"></i><span class="nav-text ms-2">Beranda</span></a>
            </li>
            <li class="nav-item"><a href="{{ route('admin.buku.index') }}"
                    class="nav-link {{ request()->routeIs('admin.buku.*') ? 'active' : '' }}"><i
                        class="bi bi-book-fill"></i><span class="nav-text ms-2">Manajemen Buku</span></a>
            </li>
            <li class="nav-item"> <a href="{{ route('admin.peminjaman.index') }}"
                    class="nav-link {{ request()->routeIs('admin.peminjaman.*') ? 'active' : '' }}"> <i
                        class="bi bi-arrow-left-right"></i><span class="nav-text ms-2">Manajemen Pinjaman</span> </a>
            </li>
            <li class="nav-item"> <a href="{{ route('admin.denda.index') }}"
                    class="nav-link {{ request()->routeIs('admin.denda.*') ? 'active' : '' }}"> <i
                        class="bi-exclamation-octagon"></i><span class="nav-text ms-2">Manajemen Denda</span> </a>
            </li>
            <li class="nav-item"><a href="{{ route('admin.pengumuman.index') }}"
                    class="nav-link {{ request()->routeIs('admin.pengumuman.*') ? 'active' : '' }}"><i
                        class="bi bi-megaphone-fill"></i><span class="nav-text ms-2">Pengumuman</span></a>
            </li>
            <li class="nav-item"><a href="{{ route('admin.pengguna.index') }}"
                    class="nav-link {{ request()->routeIs('admin.pengguna.*') ? 'active' : '' }}"><i
                        class="bi bi-people-fill"></i><span class="nav-text ms-2">Manajemen Pengguna</span></a>
            </li>
            <li class="nav-item">
                <a href="{{ route('admin.rekomendasi.index') }}"
                    class="nav-link {{ request()->routeIs('admin.rekomendasi.*') ? 'active' : '' }}">
                    <i class="bi bi-lightbulb-fill"></i><span class="nav-text ms-2">Rekomendasi</span>
                </a>
            </li>
        @elseif (Auth::user()->role == 'guru')
            {{-- ================= MENU GURU (Siswa + Fitur Khusus) ================= --}}
            <li class="nav-item"><a href="{{ route('dashboard') }}"
                    class="nav-link {{ request()->routeIs('dashboard') ? 'active' : '' }}"><i
                        class="bi bi-grid-1x2-fill"></i><span class="nav-text ms-2">Beranda</span></a>
            </li>
            <li class="nav-item"><a href="{{ route('katalog.index') }}"
                    class="nav-link {{ request()->routeIs('katalog.*') ? 'active' : '' }}"><i
                        class="bi bi-search"></i><span class="nav-text ms-2">Katalog Buku</span></a>
            </li>
            <li class="nav-item"><a href="{{ route('peminjaman.index') }}"
                    class="nav-link {{ request()->routeIs('peminjaman.*') ? 'active' : '' }}"><i
                        class="bi bi-arrow-left-right"></i><span class="nav-text ms-2">Peminjaman Offline</span></a>
            </li>
            <li class="nav-item"><a href="{{ route('baca.index') }}"
                    class="nav-link {{ request()->routeIs('baca.*') ? 'active' : '' }}"><i
                        class="bi bi-globe"></i><span class="nav-text ms-2">Baca Buku Online</span></a>
            </li>
            <li class="nav-item"><a href="{{ route('guru.laporan.index') }}"
                    class="nav-link {{ request()->routeIs('guru.laporan.*') ? 'active' : '' }}"><i
                        class="bi bi-graph-up-arrow"></i><span class="nav-text ms-2">Laporan Minat Baca</span></a></li>
            <li class="nav-item">
                <a class="nav-link collapsed d-flex align-items-center {{ request()->routeIs('riwayat.*') ? 'active' : '' }}"
                    href="#riwayat-collapse" data-bs-toggle="collapse" aria-expanded="false">
                    <span><i class="bi bi-clock-history"></i><span class="nav-text ms-2">Riwayat</span></span>
                    <i class="bi bi-chevron-down ms-auto"></i>
                </a>
                <div class="collapse {{ request()->routeIs('riwayat.*') ? 'show' : '' }}" id="riwayat-collapse">
                    <ul class="nav flex-column ms-4">
                        <li class="nav-item"><a
                                class="nav-link py-1 {{ request()->routeIs('riwayat.offline') ? 'active' : '' }}"
                                href="{{ route('riwayat.offline') }}">Peminjaman Offline</a></li>
                        <li class="nav-item"><a
                                class="nav-link py-1 {{ request()->routeIs('riwayat.online') ? 'active' : '' }}"
                                href="{{ route('riwayat.online') }}">Baca Online</a></li>
                    </ul>
                </div>
            </li>
        @else
            {{-- ================= MENU SISWA ================= --}}
            <li class="nav-item"><a href="{{ route('dashboard') }}"
                    class="nav-link {{ request()->routeIs('dashboard') ? 'active' : '' }}"><i
                        class="bi bi-grid-1x2-fill"></i><span class="nav-text ms-2">Beranda</span></a>
            </li>
            <li class="nav-item"><a href="{{ route('katalog.index') }}"
                    class="nav-link {{ request()->routeIs('katalog.*') ? 'active' : '' }}"><i
                        class="bi bi-search"></i><span class="nav-text ms-2">Katalog Buku</span></a>
            </li>
            <li class="nav-item"><a href="{{ route('peminjaman.index') }}"
                    class="nav-link {{ request()->routeIs('peminjaman.*') ? 'active' : '' }}"><i
                        class="bi bi-arrow-left-right"></i><span class="nav-text ms-2">Peminjaman Offline</span></a>
            </li>
            <li class="nav-item"><a href="{{ route('baca.index') }}"
                    class="nav-link {{ request()->routeIs('baca.*') ? 'active' : '' }}"><i
                        class="bi bi-globe"></i><span class="nav-text ms-2">Baca Buku Online</span></a>
            </li>
            <li class="nav-item">
                <a class="nav-link collapsed d-flex align-items-center {{ request()->routeIs('riwayat.*') ? 'active' : '' }}"
                    href="#riwayat-collapse" data-bs-toggle="collapse" aria-expanded="false">
                    <span><i class="bi bi-clock-history"></i><span class="nav-text ms-2">Riwayat</span></span>
                    <i class="bi bi-chevron-down ms-auto"></i>
                </a>
                <div class="collapse {{ request()->routeIs('riwayat.*') ? 'show' : '' }}" id="riwayat-collapse">
                    <ul class="nav flex-column ms-4">
                        <li class="nav-item"><a
                                class="nav-link py-1 {{ request()->routeIs('riwayat.offline') ? 'active' : '' }}"
                                href="{{ route('riwayat.offline') }}">Peminjaman Offline</a>
                        </li>
                        <li class="nav-item"><a
                                class="nav-link py-1 {{ request()->routeIs('riwayat.online') ? 'active' : '' }}"
                                href="{{ route('riwayat.online') }}">Baca Online</a>
                        </li>
                    </ul>
                </div>
            </li>
        @endif
    </ul>

    {{-- Aksi User (Hanya Muncul di Mobile) --}}
    <div class="mt-auto p-2 d-lg-none">
        <hr class="my-2">
        <ul class="nav flex-column">
            <li class="nav-item">
                <a class="nav-link" href="{{ route('profile.index') }}">
                    <i class="bi bi-person-circle"></i>
                    <span class="nav-text ms-2">Profile Saya</span>
                </a>
            </li>
            <li class="nav-item">
                <form method="POST" action="{{ route('logout') }}">
                    @csrf
                    <button type="submit" class="nav-link w-100 text-start border-0 bg-transparent">
                        <i class="bi bi-box-arrow-right"></i>
                        <span class="nav-text ms-2">Log Out</span>
                    </button>
                </form>
            </li>
        </ul>
    </div>
</aside>
