{{-- resources/views/layouts/partials/sidebar-joudie.blade.php --}}
<style>
    .sidebar {
        color: #e9f2ff;
    }

    .sidebar .nav-link {
        color: #e9f2ff;
        font-size: 0.9rem;
        padding: 0.45rem 1rem;
        border-radius: 0 20px 20px 0;
        margin-right: 0.25rem;
        transition: background-color 0.15s ease, color 0.15s ease, padding-left 0.15s ease;
    }

    .sidebar .nav-link i {
        font-size: 1rem;
        color: inherit;
    }

    .sidebar .nav-link span {
        color: inherit;
    }

    .sidebar .nav-link:hover {
        background-color: rgba(255,255,255,0.18);
        color: #ffffff;
        padding-left: 1.25rem;
    }

    .sidebar .nav-link.active {
        background-color: #ffffff;
        color: #0d6efd !important;
        font-weight: 600;
        padding-left: 1.25rem;
    }

    .sidebar .nav-link.active i,
    .sidebar .nav-link.active span {
        color: #0d6efd !important;
    }

    .sidebar hr {
        border-color: rgba(255,255,255,0.4);
    }

    .sidebar form .nav-link {
        color: #e9f2ff;
        padding-left: 1rem;
    }

    .sidebar form .nav-link:hover {
        background-color: rgba(255,255,255,0.18);
        color: #ffffff;
        padding-left: 1.25rem;
    }

    /* Responsif: sidebar sebagai panel di layar kecil */
    @media (max-width: 991.98px) {
        #sidebarMenu {
            position: fixed;
            top: 56px; /* tinggi navbar mobile (lihat layout utama) */
            left: 0;
            width: 230px;
            height: calc(100% - 56px);
            z-index: 1040;
            overflow-y: auto;
        }
    }
</style>

<nav id="sidebarMenu"
     class="sidebar bg-dark collapse d-lg-block"
     style="background: linear-gradient(180deg, #0d6efd 0%, #0b5ed7 40%, #0a4275 100%);">
    <div class="position-sticky pt-3">

        {{-- Menu utama --}}
        <ul class="nav flex-column mb-3">
            {{-- Dashboard Joudie --}}
            <li class="nav-item">
                <a class="nav-link d-flex align-items-center gap-1
                           {{ request()->routeIs('joudie.dashboard') ? 'active' : '' }}"
                   href="{{ route('joudie.dashboard') }}">
                    <i class="bi bi-speedometer2"></i>
                    <span>Dashboard Joudie</span>
                </a>
            </li>

            {{-- Profil Saya --}}
            <li class="nav-item">
                <a class="nav-link d-flex align-items-center gap-1
                           {{ request()->routeIs('profile.*') ? 'active' : '' }}"
                   href="{{ route('profile.edit') }}">
                    <i class="bi bi-person-circle"></i>
                    <span>Profil Saya</span>
                </a>
            </li>
        </ul>

        <hr class="my-2 border-light opacity-50">

        {{-- Menu data utama --}}
        <ul class="nav flex-column mb-2">
            {{-- Data Anggota (CRUD, sesuai role) --}}
            @can('joudie-anggota')
            <li class="nav-item">
                <a class="nav-link d-flex align-items-center gap-1
                           {{ request()->routeIs('anggota.*') ? 'active' : '' }}"
                   href="{{ route('anggota.index') }}">
                    <i class="bi bi-people-fill"></i>
                    <span>Data Anggota</span>
                </a>
            </li>
            @endcan

            {{-- Data Keluarga (CRUD, sesuai role) --}}
            @can('joudie-keluarga')
            <li class="nav-item">
                <a class="nav-link d-flex align-items-center gap-1
                           {{ request()->routeIs('keluarga.*') ? 'active' : '' }}"
                   href="{{ route('keluarga.index') }}">
                    <i class="bi bi-people"></i>
                    <span>Data Keluarga</span>
                </a>
            </li>
            @endcan
        </ul>

        <hr class="my-2 border-light opacity-50">

        {{-- Menu master --}}
        <ul class="nav flex-column mb-2">
            {{-- Master Agama (view only) --}}
            <li class="nav-item">
                <a class="nav-link d-flex align-items-center gap-1
                           {{ request()->routeIs('master.agama.*') ? 'active' : '' }}"
                   href="{{ route('master.agama.index') }}">
                    <i class="bi bi-book"></i>
                    <span>Master Agama</span>
                </a>
            </li>

            {{-- Master Jabatan (CRUD) --}}
            @can('joudie-master-jabatan')
            <li class="nav-item">
                <a class="nav-link d-flex align-items-center gap-1
                           {{ request()->routeIs('master.jabatan.*') ? 'active' : '' }}"
                   href="{{ route('master.jabatan.index') }}">
                    <i class="bi bi-person-badge-fill"></i>
                    <span>Master Jabatan</span>
                </a>
            </li>
            @endcan

            {{-- Master Jenis Usaha (CRUD) --}}
            @can('joudie-master-jenis-usaha')
            <li class="nav-item">
                <a class="nav-link d-flex align-items-center gap-1
                           {{ request()->routeIs('master.jenis-usaha.*') ? 'active' : '' }}"
                   href="{{ route('master.jenis-usaha.index') }}">
                    <i class="bi bi-basket-fill"></i>
                    <span>Master Jenis Usaha</span>
                </a>
            </li>
            @endcan

            {{-- Master Pendidikan (view only) --}}
            <li class="nav-item">
                <a class="nav-link d-flex align-items-center gap-1
                           {{ request()->routeIs('master.pendidikan.*') ? 'active' : '' }}"
                   href="{{ route('master.pendidikan.index') }}">
                    <i class="bi bi-mortarboard-fill"></i>
                    <span>Master Pendidikan</span>
                </a>
            </li>

            {{-- Master Status Pekerjaan (CRUD) --}}
            @can('joudie-master-status-pekerjaan')
            <li class="nav-item">
                <a class="nav-link d-flex align-items-center gap-1
                           {{ request()->routeIs('master.status-pekerjaan.*') ? 'active' : '' }}"
                   href="{{ route('master.status-pekerjaan.index') }}">
                    <i class="bi bi-briefcase-fill"></i>
                    <span>Master Status Pekerjaan</span>
                </a>
            </li>

            {{-- Kartu Anggota --}}
            <li class="nav-item">
                <a class="nav-link d-flex align-items-center gap-1
                           {{ request()->routeIs('superadmin.kartu_anggota.*') ? 'active' : '' }}"
                   href="{{ route('superadmin.kartu_anggota.index') }}">
                    <i class="bi bi-credit-card-2-front-fill"></i>
                    <span>Kartu Anggota</span>
                </a>
            </li>
            
            @endcan
        </ul>

        <hr class="my-2 border-light opacity-50">

        {{-- Menu pelaporan & setting --}}
        <ul class="nav flex-column mb-2">
            {{-- Pelaporan --}}
            @can('joudie-pelaporan')
            <li class="nav-item">
                <a class="nav-link d-flex align-items-center gap-1
                           {{ request()->routeIs('pelaporan.*') ? 'active' : '' }}"
                   href="{{ route('pelaporan.index') }}">
                    <i class="bi bi-graph-up-arrow"></i>
                    <span>Pelaporan</span>
                </a>
            </li>
            @endcan

            {{-- Setting --}}
            @can('joudie-setting')
            <li class="nav-item">
                <a class="nav-link d-flex align-items-center gap-1
                           {{ request()->routeIs('setting.*') ? 'active' : '' }}"
                   href="{{ route('setting.index') }}">
                    <i class="bi bi-gear-fill"></i>
                    <span>Setting</span>
                </a>
            </li>
            @endcan

            {{-- Backup --}}
            @can('joudie-backup')
            <li class="nav-item">
                <a class="nav-link d-flex align-items-center gap-1
                           {{ request()->routeIs('backup.*') ? 'active' : '' }}"
                   href="{{ route('backup.index') }}">
                    <i class="bi bi-database-fill-down"></i>
                    <span>Backup</span>
                </a>
            </li>
            @endcan
        </ul>

        {{-- Logout --}}
        <hr class="my-2 border-light opacity-50">
        <ul class="nav flex-column mb-2">
            <li class="nav-item">
                <form method="POST" action="{{ route('logout') }}">
                    @csrf
                    <button type="submit"
                            class="nav-link d-flex align-items-center gap-1 w-100 text-start border-0 bg-transparent">
                        <i class="bi bi-box-arrow-right"></i>
                        <span>Logout</span>
                    </button>
                </form>
            </li>
        </ul>
    </div>
</nav>