@php
    // Deteksi menu aktif berdasarkan rute yang sedang dibuka.
    $bnHome    = request()->routeIs('student.dashboard');
    $bnBelajar = request()->routeIs('student.learning.*', 'student.exams.*', 'student.discussion.*', 'student.kreasi.*');
    $bnQr      = request()->routeIs('student.qr');
    $bnNilai   = request()->routeIs('student.nilai');
    $bnLainnya = request()->routeIs('student.tagihan', 'student.profil*');

    // Gaya khas Tailwind modern: kapsul mengambang (glassmorphism) + pill aktif berwarna lembut.
    // Teks memakai modifier "!" (important) agar mengalahkan aturan unlayered Bootstrap
    // (a { color: var(--bs-link-color) }) yang menimpa utilitas warna Tailwind.
    $bnBase = 'flex flex-1 flex-col items-center justify-center gap-1 rounded-2xl py-2 text-[10px] font-bold transition-all duration-200';
    $bnOn   = 'bg-blue-600/10 text-blue-600!';
    $bnOff  = 'text-slate-400! hover:text-blue-600! active:bg-slate-100';
@endphp

{{-- ═══════════════════════════════════════════════════════════════════
     BOTTOM NAVIGATION — khusus siswa, hanya tampil di smartphone.
     Gaya kapsul mengambang khas Tailwind: glass + elevation + pill aktif.
     ═══════════════════════════════════════════════════════════════════ --}}
<nav class="student-bottom-nav fixed inset-x-0 bottom-0 z-40 px-3 pb-2 md:hidden" aria-label="Navigasi bawah">
    <div class="relative mx-auto flex max-w-md items-stretch gap-1 rounded-3xl border border-white/70 bg-white/70 px-1.5 py-1.5 shadow-[0_10px_40px_-12px_rgba(15,23,42,0.35)] ring-1 ring-slate-900/5 backdrop-blur-xl">
        <a href="{{ route('student.dashboard') }}"
           class="{{ $bnBase }} {{ $bnHome ? $bnOn : $bnOff }}" aria-label="Beranda">
            <i class="bi {{ $bnHome ? 'bi-house-door-fill' : 'bi-house-door' }} text-xl" aria-hidden="true"></i>
            <span>Beranda</span>
        </a>

        <a href="{{ route('student.learning.materials') }}"
           class="{{ $bnBase }} {{ $bnBelajar ? $bnOn : $bnOff }}" aria-label="Belajar">
            <i class="bi bi-book text-xl" aria-hidden="true"></i>
            <span>Belajar</span>
        </a>

        {{-- Tombol Absen mengapung di tengah (FAB) --}}
        <a href="{{ route('student.qr') }}"
           class="flex flex-1 flex-col items-center justify-center gap-1 pt-1 text-[10px] font-bold {{ $bnQr ? 'text-blue-600!' : 'text-slate-400!' }}"
           aria-label="Absen QR">
            <span class="grid size-14 -translate-y-5 place-items-center rounded-full bg-gradient-to-br from-blue-600 to-indigo-600 text-white! shadow-[0_10px_22px_-6px_rgba(37,99,235,0.55),0_0_0_4px_#fff]! transition-transform duration-200 active:scale-90">
                <i class="bi bi-qr-code-scan text-2xl" aria-hidden="true"></i>
            </span>
            <span class="-mt-6">Absen</span>
        </a>

        <a href="{{ route('student.nilai') }}"
           class="{{ $bnBase }} {{ $bnNilai ? $bnOn : $bnOff }}" aria-label="Nilai">
            <i class="bi bi-journal-check text-xl" aria-hidden="true"></i>
            <span>Nilai</span>
        </a>

        {{-- Buka drawer menu lengkap (memakai mekanisme sidebar yang sudah ada) --}}
        <button type="button" data-sidebar-toggle
           class="{{ $bnBase }} {{ $bnLainnya ? $bnOn : $bnOff }}" aria-label="Menu lengkap">
            <i class="bi bi-grid-3x3-gap-fill text-xl" aria-hidden="true"></i>
            <span>Menu</span>
        </button>
    </div>
</nav>

<style>
    /* Ruang kosong di bawah konten agar tidak tertutup bottom-nav mengambang.
       Aturan ini hanya dimuat pada halaman siswa (partial ini bersyarat). */
    @media (max-width: 767px) {
        #app-main {
            padding-bottom: 6.5rem;
            padding-bottom: calc(6rem + env(safe-area-inset-bottom));
        }
        .student-bottom-nav {
            padding-bottom: calc(0.5rem + env(safe-area-inset-bottom));
        }
    }

    /* Saat drawer menu lengkap dibuka (JS memberi class overflow-hidden pada body),
       bottom-nav disembunyikan agar tidak menimpa panel drawer. */
    body.overflow-hidden .student-bottom-nav {
        display: none;
    }
</style>