{{-- resources/views/layouts/partials/sidebar.blade.php --}}

<style>
    .app-sidebar-menu,
    .app-sidebar-menu ul,
    .app-sidebar-menu li {
        list-style: none !important;
        margin: 0;
        padding-left: 0;
    }

    .app-sidebar-menu li::marker,
    .app-sidebar-menu li::before,
    .app-sidebar-menu ul li::before {
        content: none !important;
    }

    .app-sidebar-menu{
        --sb-text: #eaf2ff;
        --sb-text-soft: rgba(234, 242, 255, .74);
        --sb-text-faint: rgba(234, 242, 255, .58);
        --sb-white: #ffffff;
        --sb-primary: #0d6efd;
        --sb-primary-dark: #0b5ed7;
        --sb-active-bg: linear-gradient(135deg, rgba(255,255,255,.98) 0%, rgba(244,248,255,.96) 100%);
        --sb-hover-bg: rgba(255,255,255,.10);
        --sb-hover-border: rgba(255,255,255,.12);
        --sb-divider: rgba(255,255,255,.14);
        --sb-glass: rgba(255,255,255,.10);
        --sb-shadow: 0 10px 24px rgba(0,0,0,.12);
        color: var(--sb-text);
        min-height: 100%;
        display: flex;
        flex-direction: column;
        gap: .25rem;
        position: relative;
        z-index: 1;
    }

    .app-sidebar-menu .sidebar-user{
        position: relative;
        overflow: hidden;
        padding: .35rem .35rem 1rem .35rem;
        margin-bottom: .35rem;
    }

    .app-sidebar-menu .sidebar-user-card{
        position: relative;
        overflow: hidden;
        border-radius: 1.25rem;
        padding: .95rem;
        background:
            radial-gradient(circle at top right, rgba(255,255,255,.16), transparent 30%),
            linear-gradient(135deg, rgba(255,255,255,.12), rgba(255,255,255,.07));
        border: 1px solid rgba(255,255,255,.12);
        backdrop-filter: blur(8px);
        box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
    }

    .app-sidebar-menu .sidebar-user-card::after{
        content: "";
        position: absolute;
        right: -22px;
        bottom: -22px;
        width: 76px;
        height: 76px;
        border-radius: 50%;
        background: rgba(255,255,255,.06);
    }

    .app-sidebar-menu .sidebar-avatar{
        width: 48px;
        height: 48px;
        min-width: 48px;
        border-radius: 16px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: rgba(255,255,255,.16);
        border: 1px solid rgba(255,255,255,.12);
        color: #fff;
        box-shadow: inset 0 1px 0 rgba(255,255,255,.10);
        flex: 0 0 auto;
    }

    .app-sidebar-menu .sidebar-avatar i{
        font-size: 1.35rem;
    }

    .app-sidebar-menu .sidebar-user-name{
        color: #ffffff;
        font-weight: 700;
        line-height: 1.25;
        font-size: .96rem;
        margin-bottom: .2rem;
    }

    .app-sidebar-menu .sidebar-user-subtitle{
        color: var(--sb-text-soft);
        font-size: .78rem;
        line-height: 1.35;
    }

    .app-sidebar-menu .sidebar-role-badge{
        font-size: .72rem;
        padding: .38rem .7rem;
        border-radius: 999px;
        background: rgba(255,255,255,.96);
        color: var(--sb-primary);
        display: inline-flex;
        align-items: center;
        gap: .35rem;
        font-weight: 700;
        box-shadow: 0 6px 14px rgba(0,0,0,.08);
    }

    .app-sidebar-menu .nav{
        gap: .38rem;
    }

    .app-sidebar-menu .menu-section-title{
        color: var(--sb-text-faint);
        font-size: .71rem;
        text-transform: uppercase;
        letter-spacing: .10em;
        font-weight: 700;
        padding: 0 .95rem;
        margin: .4rem 0 .2rem;
    }

    .app-sidebar-menu .nav-item{
        width: 100%;
    }

    .app-sidebar-menu .nav-link{
        color: var(--sb-text) !important;
        font-size: .93rem;
        font-weight: 600;
        padding: .82rem .95rem;
        border-radius: 1rem;
        transition: background .18s ease, border-color .18s ease, color .18s ease, box-shadow .18s ease;
        position: relative;
        display: flex;
        align-items: center;
        gap: .78rem;
        line-height: 1.2;
        text-decoration: none;
        width: 100%;
        border: 1px solid transparent;
        background: transparent;
        text-align: left;
        min-height: 48px;
        transform: none;
        will-change: auto;
    }

    .app-sidebar-menu .nav-link i{
        font-size: 1rem;
        color: inherit;
        width: 20px;
        min-width: 20px;
        text-align: center;
        margin-right: 0;
        flex: 0 0 auto;
    }

    .app-sidebar-menu .nav-link .menu-label{
        flex: 1;
        min-width: 0;
    }

    .app-sidebar-menu .nav-link .menu-badge{
        margin-left: auto;
        border-radius: 999px;
        padding: .25rem .5rem;
        font-size: .68rem;
        font-weight: 700;
        background: rgba(220, 53, 69, .16);
        color: #fff;
        border: 1px solid rgba(255,255,255,.12);
        flex: 0 0 auto;
    }

    .app-sidebar-menu .nav-link:hover{
        background: var(--sb-hover-bg);
        border-color: var(--sb-hover-border);
        color: #ffffff !important;
        transform: none;
    }

    .app-sidebar-menu .nav-link.active{
        background: var(--sb-active-bg);
        color: var(--sb-primary) !important;
        font-weight: 800;
        border-color: rgba(255,255,255,.22);
        box-shadow: var(--sb-shadow);
    }

    .app-sidebar-menu .nav-link.active i{
        color: var(--sb-primary) !important;
    }

    .app-sidebar-menu .nav-link.active::before{
        content: "";
        position: absolute;
        left: .42rem;
        top: 50%;
        transform: translateY(-50%);
        width: 4px;
        height: 22px;
        border-radius: 999px;
        background: linear-gradient(180deg, var(--sb-primary), #38bdf8);
    }

    .app-sidebar-menu hr{
        border-color: var(--sb-divider);
        opacity: 1;
        margin: .9rem 0;
    }

    .app-sidebar-menu form{
        margin: 0;
        width: 100%;
    }

    .app-sidebar-menu .logout-link{
        color: #fff !important;
        width: 100%;
        border: 1px solid transparent;
    }

    .app-sidebar-menu .logout-link:hover{
        background: rgba(220,53,69,.18);
        border-color: rgba(255,255,255,.10);
    }

    .app-sidebar-menu .sidebar-footer{
        margin-top: auto;
        padding-top: 1rem;
    }

    .app-sidebar-menu .sidebar-footer-inner{
        border-top: 1px solid var(--sb-divider);
        padding-top: .9rem;
    }

    .app-sidebar-menu .sidebar-footer small{
        color: var(--sb-text-soft) !important;
        font-size: .73rem;
        letter-spacing: .03em;
    }

    body.modal-open .app-sidebar-menu,
    body.sidebar-mobile-open .app-sidebar-menu{
        pointer-events: auto;
    }

    @media (max-width: 991.98px){
        .app-sidebar-menu .sidebar-user-card{
            padding: .9rem;
            border-radius: 1.1rem;
        }

        .app-sidebar-menu .nav-link{
            padding: .85rem .95rem;
        }
    }

    @media (max-width: 767.98px){
        .app-sidebar-menu{
            gap: .15rem;
        }

        .app-sidebar-menu .sidebar-user{
            padding: .2rem .2rem .85rem .2rem;
        }

        .app-sidebar-menu .sidebar-user-card{
            padding: .85rem;
            border-radius: 1rem;
        }

        .app-sidebar-menu .sidebar-avatar{
            width: 44px;
            height: 44px;
            min-width: 44px;
            border-radius: 14px;
        }

        .app-sidebar-menu .sidebar-user-name{
            font-size: .92rem;
        }

        .app-sidebar-menu .sidebar-user-subtitle{
            font-size: .75rem;
        }

        .app-sidebar-menu .sidebar-role-badge{
            font-size: .69rem;
            padding: .34rem .62rem;
        }

        .app-sidebar-menu .menu-section-title{
            padding: 0 .85rem;
            font-size: .69rem;
        }

        .app-sidebar-menu .nav-link{
            padding: .88rem .9rem;
            font-size: .94rem;
            border-radius: .95rem;
            min-height: 50px;
        }

        .app-sidebar-menu .nav-link i{
            font-size: 1rem;
            width: 18px;
            min-width: 18px;
        }
    }
</style>

@php
    $user = auth()->user();
    $rawRole = $user->role ?? 'user';
    $role = strtolower(is_string($rawRole) ? $rawRole : ($user->role->nama_role ?? 'user'));
    $roleLabel = is_string($rawRole) ? $rawRole : ($user->role->nama_role ?? 'user');
@endphp

<div class="app-sidebar-menu h-100">
    <div class="sidebar-user">
        <div class="sidebar-user-card">
            <div class="d-flex align-items-center gap-3">
                <div class="sidebar-avatar flex-shrink-0">
                    <i class="bi bi-person-circle"></i>
                </div>

                <div class="min-w-0 flex-grow-1">
                    <div class="sidebar-user-name text-truncate">
                        {{ $user->namalengkap ?? $user->nama_lengkap ?? $user->name ?? 'User' }}
                    </div>
                    <div class="sidebar-user-subtitle text-truncate">
                        Panel navigasi pengguna
                    </div>
                    <div class="small mt-2">
                        <span class="sidebar-role-badge">
                            <i class="bi bi-shield-check"></i>
                            {{ ucfirst(strtolower($roleLabel)) }}
                        </span>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="menu-section-title">Menu</div>
    <ul class="nav flex-column mb-2">
        <li class="nav-item">
            <a class="nav-link {{ request()->routeIs('dashboard') ? 'active' : '' }}"
               href="{{ route('dashboard') }}">
                <i class="bi bi-speedometer2"></i>
                <span class="menu-label">Dashboard</span>
            </a>
        </li>

        <li class="nav-item">
            <a class="nav-link {{ request()->routeIs('profile.*') ? 'active' : '' }}"
               href="{{ route('profile.edit') }}">
                <i class="bi bi-person-circle"></i>
                <span class="menu-label">Profil</span>
            </a>
        </li>
    </ul>

    @if(in_array($role, ['superadmin', 'joudie', 'dpp', 'dpdoperator', 'dpcoperator']))
        <hr>
        <div class="menu-section-title">Data</div>
        <ul class="nav flex-column mb-2">
            <li class="nav-item">
                <a class="nav-link {{ request()->routeIs('anggota.*') ? 'active' : '' }}"
                   href="{{ route('anggota.index') }}">
                    <i class="bi bi-people-fill"></i>
                    <span class="menu-label">Data Anggota</span>
                </a>
            </li>

            <li class="nav-item">
                <a class="nav-link {{ request()->routeIs('keluarga.*') ? 'active' : '' }}"
                   href="{{ route('keluarga.index') }}">
                    <i class="bi bi-people"></i>
                    <span class="menu-label">Data Keluarga</span>
                </a>
            </li>

            <li class="nav-item">
                <a class="nav-link {{ request()->routeIs('pelaporan.*') ? 'active' : '' }}"
                   href="{{ route('pelaporan.index') }}">
                    <i class="bi bi-graph-up-arrow"></i>
                    <span class="menu-label">Pelaporan</span>
                    @if($role === 'superadmin')
                        <span class="menu-badge">Admin</span>
                    @endif
                </a>
            </li>
        </ul>
    @endif

    @if($role === 'superadmin')
        <hr>
        <div class="menu-section-title">Superadmin</div>
        <ul class="nav flex-column mb-2">
            <li class="nav-item">
                <a class="nav-link {{ request()->routeIs('superadmin.kartu_anggota.*') ? 'active' : '' }}"
                   href="{{ route('superadmin.kartu_anggota.index') }}">
                    <i class="bi bi-credit-card-2-front-fill"></i>
                    <span class="menu-label">Kartu Anggota</span>
                </a>
            </li>
        </ul>
    @endif

    <hr>
    <div class="menu-section-title">Akun</div>
    <ul class="nav flex-column mb-2">
        <li class="nav-item">
            <form method="POST" action="{{ route('logout') }}">
                @csrf
                <button type="submit" class="nav-link logout-link w-100">
                    <i class="bi bi-box-arrow-right"></i>
                    <span class="menu-label">Logout</span>
                </button>
            </form>
        </li>
    </ul>

    <div class="sidebar-footer">
        <div class="sidebar-footer-inner">
            <small class="d-block text-center">HNSI</small>
            <small class="d-block text-center">{{ now()->format('M Y') }}</small>
        </div>
    </div>
</div>