<ul class="navbar-nav sidebar sidebar-dark accordion" id="accordionSidebar">

    <!-- Sidebar - Brand -->
    <a class="sidebar-brand d-flex align-items-center justify-content-center" 
        href="{{ auth()->user()->role == 'admin' ? route('home') : (auth()->user()->role == 'mahasiswa' ? route('dashboard.mahasiswa') : route('dashboard.karyawan')) }}">
        
        <div class="sidebar-brand-icon">
            <img class="logo-desktop" src="{{ asset('images/1.png') }}" alt="Logo">
        </div>
    </a>

    <!-- Divider -->
    <hr class="sidebar-divider my-0">

    <!-- Nav Item - Dashboard -->
    @auth
        @php
            $role = auth()->user()->role ?? null;
            $dashboardRoute = $role === 'admin' ? route('home') : ($role === 'mahasiswa' ? route('dashboard.mahasiswa') : route('dashboard.karyawan'));
        @endphp

        <li class="nav-item {{ request()->routeIs('home', 'dashboard.mahasiswa', 'dashboard.karyawan') ? 'active' : '' }}">
            <a class="nav-link" href="{{ $dashboardRoute }}">
                <i class="fas fa-home fa-sm fa-fw mr-2"></i>
                <span>Dashboard</span>
            </a>
        </li>
    @endauth

    <!-- Divider -->
    <hr class="sidebar-divider">

    @if(auth()->user()->role == 'admin')
    <!-- Admin Menu Items -->
    <li class="nav-item">
        <a class="nav-link collapsed" href="#" data-toggle="collapse" data-target="#subKriteriaDropdown">
            <i class="fas fa-list-alt fa-sm fa-fw mr-2"></i>
            <span>Kriteria dan Sub Kriteria</span>
        </a>
        <div id="subKriteriaDropdown" class="collapse" data-parent="#accordionSidebar">
            <a class="collapse-item ml-4" href="{{ route('kriteria.index') }}">Kriteria</a>
            <a class="collapse-item ml-4" href="{{ route('subkriteria.index') }}">Sub Kriteria</a>
        </div>
    </li>

    <li class="nav-item {{ request()->is('user*') ? 'active' : '' }}">
        <a class="nav-link" href="{{ route('user.index') }}">
            <i class="fas fa-user-circle fa-sm fa-fw mr-2"></i>
            <span>User</span>
        </a>
    </li>
    @endif

    @if(auth()->user()->role == 'admin' || auth()->user()->role == 'karyawan')
    <li class="nav-item {{ request()->is('admin/pengajuan*') ? 'active' : '' }}">
        <a class="nav-link" href="{{ route('admin.pengajuan') }}">
            <i class="fas fa-file-alt fa-sm fa-fw mr-2"></i>
            <span>Pengajuan UKT</span>
        </a>
    </li>

    <!-- Form Pengajuan -->
    <li class="nav-item">
        <a class="nav-link collapsed" href="#" data-toggle="collapse" data-target="#formPengajuanDropdown"
            aria-expanded="false" aria-controls="formPengajuanDropdown">
            <i class="fas fa-file-signature fa-sm fa-fw mr-2"></i>
            <span>Form Pengajuan</span>
        </a>
        <div id="formPengajuanDropdown" class="collapse" data-parent="#accordionSidebar">
            <a class="collapse-item ml-4" href="{{ route('form.pendaftaran') }}">Form Pendaftaran</a>
        </div>
    </li>
    @endif

    @if(auth()->user()->role == 'admin')
    <!-- Perhitungan dan Ranking -->
    <li class="nav-item">
        <a class="nav-link" href="{{ route('admin.penilaian.index') }}">
            <i class="fas fa-calculator fa-sm fa-fw mr-2"></i>
            <span>Penilaian</span>
        </a>
    </li>

    <li class="nav-item">
        <a class="nav-link" href="{{ route('admin.ranking.index') }}">
            <i class="fas fa-trophy fa-sm fa-fw mr-2"></i>
            <span>Ranking</span>
        </a>
    </li>
    @endif

    <!-- Divider -->
    <hr class="sidebar-divider d-none d-md-block">

    <!-- Sidebar Toggler -->
    <div class="text-center d-none d-md-inline">
        <button class="rounded-circle border-0" id="sidebarToggle"></button>
    </div>

</ul>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
    $(document).on("click", function(event) {
        if (!$(event.target).closest('.nav-item').length) {
            $('.collapse').collapse('hide');
        }

        if (!$(event.target).closest('.dropdown-menu, .dropdown-toggle').length) {
            $('.dropdown-menu').removeClass('show');
        }
    });
</script>