{{--
    AdminSidebar (sidebar.md) — collapsible 280px / 80px, sticky on desktop,
    drawer overlay on mobile. Reads appShell() state from the parent layout.

    Nav is data-driven from $groups below. Routes that already exist are wired
    to real route() helpers; the rest use the target paths from sidebar.md and
    will resolve once their controllers are built.
--}}

@php
    // Helper: is the current request within this match pattern?
    $isActive = fn (?string $pattern) => $pattern && request()->is($pattern);

    $groups = [
        [
            'label' => 'Umum', 'access' => 'operator',
            'items' => [
                ['icon' => 'squares-2x2', 'label' => 'Dashboard', 'href' => route('dashboard'), 'match' => 'portal/dashboard', 'access' => 'operator'],
            ],
        ],
        [
            'label' => 'Pelayanan Publik', 'access' => 'operator',
            'items' => [
                ['icon' => 'identification', 'label' => 'KTP', 'href' => route('ktp-requests.index'), 'match' => 'portal/ktp-requests*', 'badge' => 'ktp', 'access' => 'operator', 'sub' => [
                    ['label' => 'Semua Pengajuan', 'href' => route('ktp-requests.index')],
                    ['label' => 'Pending', 'href' => route('ktp-requests.index').'?status=pending'],
                    ['label' => 'Disetujui', 'href' => route('ktp-requests.index').'?status=approved'],
                    ['label' => 'Ditolak', 'href' => route('ktp-requests.index').'?status=rejected'],
                ]],
                ['icon' => 'document-check', 'label' => 'KIA', 'href' => route('kia-requests.index'), 'match' => 'portal/kia-requests*', 'badge' => 'kia', 'access' => 'operator', 'sub' => [
                    ['label' => 'Semua Pengajuan', 'href' => route('kia-requests.index')],
                    ['label' => 'Pending', 'href' => route('kia-requests.index').'?status=pending'],
                    ['label' => 'Disetujui', 'href' => route('kia-requests.index').'?status=approved'],
                    ['label' => 'Ditolak', 'href' => route('kia-requests.index').'?status=rejected'],
                ]],
                ['icon' => 'heart', 'label' => 'Pernikahan', 'href' => route('marriage-requests.index'), 'match' => 'portal/marriage-requests*', 'badge' => 'marriage', 'access' => 'operator', 'sub' => [
                    ['label' => 'Semua Pengajuan', 'href' => route('marriage-requests.index')],
                    ['label' => 'Pending', 'href' => route('marriage-requests.index').'?status=pending'],
                    ['label' => 'Disetujui', 'href' => route('marriage-requests.index').'?status=approved'],
                    ['label' => 'Ditolak', 'href' => route('marriage-requests.index').'?status=rejected'],
                ]],
                ['icon' => 'pencil-square', 'label' => 'Pergantian Nama', 'href' => route('name-change-requests.index'), 'match' => 'portal/name-change-requests*', 'badge' => 'name-change', 'access' => 'operator', 'sub' => [
                    ['label' => 'Semua Pengajuan', 'href' => route('name-change-requests.index')],
                    ['label' => 'Pending', 'href' => route('name-change-requests.index').'?status=pending'],
                    ['label' => 'Disetujui', 'href' => route('name-change-requests.index').'?status=approved'],
                    ['label' => 'Ditolak', 'href' => route('name-change-requests.index').'?status=rejected'],
                ]],
                ['icon' => 'user-group', 'label' => 'Kartu Keluarga', 'href' => route('family-card-requests.index'), 'match' => 'portal/family-card-requests*', 'badge' => 'family-card', 'access' => 'operator', 'sub' => [
                    ['label' => 'Semua Pengajuan', 'href' => route('family-card-requests.index')],
                    ['label' => 'Pending', 'href' => route('family-card-requests.index').'?status=pending'],
                    ['label' => 'Disetujui', 'href' => route('family-card-requests.index').'?status=approved'],
                    ['label' => 'Ditolak', 'href' => route('family-card-requests.index').'?status=rejected'],
                ]],
                ['icon' => 'clipboard-document-check', 'label' => 'Surat Izin Kegiatan', 'href' => route('event-permit-requests.index'), 'match' => 'portal/event-permit-requests*', 'badge' => 'event-permit', 'access' => 'operator', 'sub' => [
                    ['label' => 'Semua Pengajuan', 'href' => route('event-permit-requests.index')],
                    ['label' => 'Pending', 'href' => route('event-permit-requests.index').'?status=pending'],
                    ['label' => 'Disetujui', 'href' => route('event-permit-requests.index').'?status=approved'],
                    ['label' => 'Ditolak', 'href' => route('event-permit-requests.index').'?status=rejected'],
                ]],
                ['icon' => 'home-modern', 'label' => 'Surat Tanah', 'href' => route('land-cert-requests.index'), 'match' => 'portal/land-cert-requests*', 'badge' => 'land-certificate', 'access' => 'operator', 'sub' => [
                    ['label' => 'Semua Pengajuan', 'href' => route('land-cert-requests.index')],
                    ['label' => 'Pending', 'href' => route('land-cert-requests.index').'?status=pending'],
                    ['label' => 'Disetujui', 'href' => route('land-cert-requests.index').'?status=approved'],
                    ['label' => 'Ditolak', 'href' => route('land-cert-requests.index').'?status=rejected'],
                ]],
                ['icon' => 'building-office-2', 'label' => 'Administrasi Rumah', 'href' => route('house-purchase-requests.index'), 'match' => 'portal/house-purchase-requests*', 'badge' => 'house-purchase', 'access' => 'operator', 'sub' => [
                    ['label' => 'Semua Pengajuan', 'href' => route('house-purchase-requests.index')],
                    ['label' => 'Pending', 'href' => route('house-purchase-requests.index').'?status=pending'],
                    ['label' => 'Disetujui', 'href' => route('house-purchase-requests.index').'?status=approved'],
                    ['label' => 'Ditolak', 'href' => route('house-purchase-requests.index').'?status=rejected'],
                ]],
            ],
        ],
        [
            'label' => 'Disnaker', 'access' => 'admin',
            'items' => [
                ['icon' => 'chart-bar-square', 'label' => 'Dashboard Disnaker', 'href' => route('disnaker.dashboard'), 'match' => 'portal/disnaker*', 'access' => 'admin', 'sub' => [
                    ['label' => 'Dashboard', 'href' => route('disnaker.dashboard')],
                    ['label' => 'Informasi', 'href' => route('disnaker.articles.index')],
                    ['label' => 'Katalog Barang', 'href' => route('disnaker.catalog')],
                    ['label' => 'Gudang', 'href' => route('disnaker.stock')],
                    ['label' => 'Arus Barang', 'href' => route('disnaker.stock-movements')],
                    ['label' => 'Kas', 'href' => route('disnaker.cash')],
                    ['label' => 'Kalender', 'href' => route('disnaker.events.index')],
                    ['label' => 'Dokumen', 'href' => route('disnaker.documents.index')],
                    ['label' => 'Layanan', 'href' => route('disnaker.dashboard') . '#disnaker-layanan'],
                    ['label' => 'Pengaduan', 'href' => route('disnaker.dashboard') . '#disnaker-pengaduan'],
                ]],
            ],
        ],
        [
            'label' => 'Data Kependudukan', 'access' => 'admin',
            'items' => [
                ['icon' => 'users', 'label' => 'Data Penduduk', 'href' => '/admin/citizens', 'match' => 'admin/citizens*', 'access' => 'admin', 'sub' => [
                    ['label' => 'Semua Penduduk', 'href' => '/admin/citizens'],
                    ['label' => 'Penduduk Aktif', 'href' => '/admin/citizens?status=active'],
                    ['label' => 'Tidak Aktif', 'href' => '/admin/citizens?status=inactive'],
                ]],
                ['icon' => 'folder-open', 'label' => 'Kartu Keluarga', 'href' => '/admin/family', 'match' => 'admin/family*', 'access' => 'admin', 'sub' => [
                    ['label' => 'Semua KK', 'href' => '/admin/family'],
                    ['label' => 'Riwayat Dokumen', 'href' => '/admin/document-history'],
                ]],
            ],
        ],
        [
            'label' => 'Regulasi', 'access' => 'admin',
            'items' => [
                ['icon' => 'scale', 'label' => 'Regulasi Layanan', 'href' => '/admin/regulations', 'match' => 'admin/regulations*', 'access' => 'admin', 'sub' => [
                    ['label' => 'Regulasi KTP', 'href' => '/admin/regulations/ktp'],
                    ['label' => 'Regulasi KIA', 'href' => '/admin/regulations/kia'],
                    ['label' => 'Regulasi Pernikahan', 'href' => '/admin/regulations/marriage'],
                    ['label' => 'Regulasi Pergantian Nama', 'href' => '/admin/regulations/name-change'],
                    ['label' => 'Regulasi Kartu Keluarga', 'href' => '/admin/regulations/family-card'],
                    ['label' => 'Regulasi Surat Tanah', 'href' => '/admin/regulations/land-certificate'],
                    ['label' => 'Regulasi Rumah', 'href' => '/admin/regulations/house-purchase'],
                    ['label' => 'Regulasi Izin Kegiatan', 'href' => '/admin/regulations/event-permit'],
                ]],
            ],
        ],
        [
            'label' => 'Website CMS', 'access' => 'admin',
            'items' => [
                ['icon' => 'globe-alt', 'label' => 'Kelola Website', 'href' => '/admin/cms', 'match' => 'admin/cms*', 'access' => 'admin', 'sub' => [
                    ['label' => 'Homepage', 'href' => '/admin/cms/home'],
                    ['label' => 'Profil Pemerintahan', 'href' => '/admin/cms/profile'],
                    ['label' => 'Berita', 'href' => '/admin/cms/news'],
                    ['label' => 'Kategori Berita', 'href' => '/admin/cms/news/categories'],
                    ['label' => 'FAQ', 'href' => '/admin/cms/faq'],
                    ['label' => 'Media Library', 'href' => '/admin/cms/media'],
                ]],
            ],
        ],
        [
            'label' => 'Laporan', 'access' => 'admin',
            'items' => [
                ['icon' => 'check-badge', 'label' => 'Top Week', 'href' => route('top-week.index'), 'match' => 'portal/top-week', 'access' => 'admin'],
                ['icon' => 'chart-bar-square', 'label' => 'Pelaporan', 'href' => '/admin/reports', 'match' => 'admin/reports*', 'access' => 'admin', 'sub' => [
                    ['label' => 'Statistik Pelayanan', 'href' => '/admin/reports/services'],
                    ['label' => 'Statistik Penduduk', 'href' => '/admin/reports/citizens'],
                    ['label' => 'Export Data', 'href' => '/admin/reports/export'],
                ]],
            ],
        ],
        [
            'label' => 'Manajemen Pegawai', 'access' => 'admin',
            'items' => [
                ['icon' => 'user-cog', 'label' => 'Pegawai Gov', 'href' => route('disnaker.users.index'), 'match' => 'portal/disnaker/users*', 'access' => 'admin', 'sub' => [
                    ['label' => 'Daftar Pegawai', 'href' => route('disnaker.users.index')],
                    ['label' => 'Tambah Pegawai', 'href' => route('disnaker.users.create')],
                    ['label' => 'Hak Akses (Roles)', 'href' => route('disnaker.users.index') . '#roles'],
                ]],
                ['icon' => 'users', 'label' => 'Manajemen Pengguna', 'href' => route('admin.users.index'), 'match' => 'admin/users*', 'access' => 'admin', 'sub' => [
                    ['label' => 'Daftar Pengguna', 'href' => route('admin.users.index')],
                    ['label' => 'Tambah Pengguna', 'href' => route('admin.users.create')],
                    ['label' => 'Hak Akses (Roles)', 'href' => route('admin.users.index') . '#roles'],
                ]],
            ],
        ],
        [
            'label' => 'Notifikasi', 'access' => 'operator',
            'items' => [
                ['icon' => 'bell', 'label' => 'Notifikasi', 'href' => '/admin/notifications', 'match' => 'admin/notifications*', 'access' => 'operator', 'sub' => [
                    ['label' => 'Semua Notifikasi', 'href' => '/admin/notifications'],
                    ['label' => 'Antrian Discord', 'href' => '/admin/notifications/discord'],
                ]],
            ],
        ],
        [
            'label' => 'Keamanan', 'access' => 'admin',
            'items' => [
                ['icon' => 'shield-check', 'label' => 'Audit & Log', 'href' => '/admin/audit', 'match' => 'admin/audit*', 'access' => 'admin', 'sub' => [
                    ['label' => 'Audit Log', 'href' => '/admin/audit/log'],
                    ['label' => 'Login History', 'href' => '/admin/audit/login'],
                    ['label' => 'Riwayat Persetujuan', 'href' => '/admin/audit/approvals'],
                ]],
            ],
        ],
        [
            'label' => 'Pengembangan', 'access' => 'operator',
            'items' => [
                ['icon' => 'beaker', 'label' => 'Dev UI Kit', 'href' => route('dev.uikit'), 'match' => 'dev/uikit', 'access' => 'operator'],
                ['icon' => 'swatch', 'label' => 'UI Docs', 'href' => route('ui-docs.batch1'), 'match' => 'portal/ui-docs*', 'access' => 'operator', 'sub' => [
                    ['label' => 'Batch 1: Layout & Grid', 'href' => route('ui-docs.batch1')],
                    ['label' => 'Batch 2: Forms',         'href' => route('ui-docs.batch2')],
                    ['label' => 'Batch 3: Navigasi',      'href' => route('ui-docs.batch3')],
                    ['label' => 'Batch 4: Feedback',      'href' => route('ui-docs.batch4')],
                    ['label' => 'Batch 5: UI Elements',   'href' => route('ui-docs.batch5')],
                ]],
            ],
        ],
        [
            'label' => 'Pengaturan', 'access' => 'admin',
            'items' => [
                ['icon' => 'cog-6-tooth', 'label' => 'Pengaturan', 'href' => '/admin/settings', 'match' => 'admin/settings*', 'access' => 'admin', 'sub' => [
                    ['label' => 'Umum', 'href' => '/admin/settings/general'],
                    ['label' => 'Tema', 'href' => '/admin/settings/theme'],
                    ['label' => 'SMTP', 'href' => '/admin/settings/smtp'],
                    ['label' => 'Discord', 'href' => '/admin/settings/discord'],
                    ['label' => 'Tanda Tangan', 'href' => '/admin/settings/signature'],
                    ['label' => 'Watermark', 'href' => '/admin/settings/watermark'],
                ]],
            ],
        ],
    ];
@endphp

{{-- Mobile overlay --}}
<div x-show="mobileSidebarOpen" @click="mobileSidebarOpen = false" x-cloak
     x-transition:enter="transition-opacity ease-out duration-200" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100"
     x-transition:leave="transition-opacity ease-in duration-150" x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0"
     class="fixed inset-x-0 bottom-0 top-[72px] z-30 bg-black/50 lg:hidden"></div>

<aside
    class="fixed left-0 top-[72px] z-40 flex h-[calc(100vh-72px)] w-[280px] flex-col border-r border-border bg-white shadow-sidebar transition-all duration-400 ease-decelerate dark:border-dark-border dark:bg-dark-sidebar lg:sticky"
    :class="{
        '-translate-x-full lg:translate-x-0': !mobileSidebarOpen,
        'translate-x-0': mobileSidebarOpen,
        'lg:w-[80px]': !sidebarOpen,
        'lg:w-[280px]': sidebarOpen,
    }">

    {{-- Scrollable nav --}}
    <nav class="scrollbar-none flex-1 space-y-1 overflow-y-auto overflow-x-hidden py-4">
        @foreach ($groups as $group)
            @php
                // Same rule as the @admin/@operator Blade directives, but expressed
                // inline so the open/close stay balanced inside the loop.
                $role = auth()->user()?->role ?? 'admin';
                $canSeeGroup = $group['access'] === 'admin'
                    ? $role === 'admin'
                    : in_array($role, ['admin', 'operator'], true);
            @endphp
            @if ($canSeeGroup)
                {{-- Group label --}}
                <p class="group-label mb-1 mt-3 truncate transition-opacity duration-200 first:mt-0"
                   x-show="expanded" x-cloak>{{ $group['label'] }}</p>
                {{-- Spacer keeps rhythm when collapsed --}}
                <div class="mt-3 h-px first:mt-0" x-show="!expanded" x-cloak></div>

                @foreach ($group['items'] as $item)
                    @php
                        $active = $isActive($item['match'] ?? null);
                        $hasSub = ! empty($item['sub']);
                        $badgeCount = isset($item['badge']) ? (int) ($pendingCounts[$item['badge']] ?? 0) : 0;
                    @endphp

                    <div class="px-3" x-data="{ open: {{ $active && $hasSub ? 'true' : 'false' }} }">
                        <a href="{{ $item['href'] }}"
                           @if ($hasSub) @click="if (expanded) { $event.preventDefault(); open = !open }" @endif
                           data-tooltip="{{ $item['label'] }}{{ $badgeCount > 0 ? ' — '.$badgeCount.' Pending' : '' }}"
                           class="tooltip-host group relative flex items-center gap-3 rounded-lg px-3 py-2.5 text-sm transition-all duration-150
                                  {{ $active
                                        ? 'bg-gov-primary font-medium text-white shadow-sm'
                                        : 'text-secondary hover:bg-gov-50 hover:text-gov-primary dark:text-dark-text-secondary dark:hover:bg-gov-primary/10' }}"
                           :class="{ 'justify-center': !expanded }">

                            <x-icon :name="$item['icon']" class="h-5 w-5 shrink-0" />

                            {{-- Label --}}
                            <span class="flex-1 truncate" x-show="expanded" x-cloak>{{ $item['label'] }}</span>

                            {{-- Pending badge (expanded) --}}
                            @if ($badgeCount > 0)
                                <span class="ml-auto inline-flex h-5 min-w-[20px] items-center justify-center rounded-full bg-warning px-1.5 text-xs font-bold text-white"
                                      x-show="expanded" x-cloak>{{ $badgeCount }}</span>
                                {{-- Collapsed: red dot --}}
                                <span class="absolute right-2 top-2 h-2 w-2 rounded-full bg-warning" x-show="!expanded" x-cloak></span>
                            @endif

                            {{-- Chevron --}}
                            @if ($hasSub)
                                <x-icon name="chevron-right" class="h-4 w-4 shrink-0 transition-transform duration-250"
                                        x-show="expanded" x-cloak x-bind:class="open && 'rotate-90'" />
                            @endif
                        </a>

                        {{-- Submenu (expanded only) --}}
                        @if ($hasSub)
                            <div x-show="open && expanded" x-cloak
                                 x-transition:enter="transition ease-out duration-200"
                                 x-transition:enter-start="opacity-0 -translate-y-1"
                                 x-transition:enter-end="opacity-100 translate-y-0"
                                 class="mt-0.5 space-y-0.5">
                                @foreach ($item['sub'] as $sub)
                                    @php $subActive = request()->fullUrl() === url($sub['href']) || request()->getRequestUri() === $sub['href']; @endphp
                                    <a href="{{ $sub['href'] }}"
                                       class="block rounded-lg py-2 pl-11 pr-3 text-sm transition-colors
                                              {{ $subActive
                                                    ? 'font-medium text-gov-primary'
                                                    : 'text-secondary hover:text-gov-primary dark:text-dark-text-secondary' }}">
                                        {{ $sub['label'] }}
                                    </a>
                                @endforeach
                            </div>
                        @endif
                    </div>
                @endforeach
            @endif
        @endforeach
    </nav>

    {{-- Bottom user card --}}
    <div class="border-t border-border p-3 dark:border-dark-border" x-data="{ menu: false }">
        <div class="relative">
            <button type="button" @click="menu = !menu" @click.outside="menu = false"
                    class="flex w-full items-center gap-3 rounded-lg p-2 transition-colors hover:bg-gov-50 dark:hover:bg-white/5"
                    :class="{ 'justify-center': !expanded }">
                <span class="flex h-9 w-9 shrink-0 items-center justify-center rounded-full bg-gov-primary text-sm font-semibold text-white">
                    {{ strtoupper(substr(auth()->user()->name ?? 'U', 0, 1)) }}
                </span>
                <span class="min-w-0 flex-1 text-left leading-tight" x-show="expanded" x-cloak>
                    <span class="block truncate text-sm font-medium text-primary dark:text-dark-text">{{ auth()->user()->name ?? 'Pengguna' }}</span>
                    <span class="block truncate text-xs text-secondary">Administrator</span>
                </span>
                <x-icon name="ellipsis-horizontal" class="h-5 w-5 shrink-0 text-muted" x-show="expanded" x-cloak />
            </button>

            {{-- Dropdown (opens upward) --}}
            <div x-show="menu" x-cloak
                 x-transition:enter="transition ease-out duration-200" x-transition:enter-start="opacity-0 translate-y-2" x-transition:enter-end="opacity-100 translate-y-0"
                 class="absolute bottom-full left-0 mb-2 w-56 overflow-hidden rounded-xl border border-border bg-white py-1.5 shadow-dropdown dark:border-dark-border dark:bg-dark-card">
                <div class="border-b border-border px-4 py-2 dark:border-dark-border" x-show="!expanded" x-cloak>
                    <p class="truncate text-sm font-medium text-primary dark:text-dark-text">{{ auth()->user()->name ?? 'Pengguna' }}</p>
                    <p class="text-xs text-secondary">Administrator</p>
                </div>
                <a href="{{ route('profile.edit') }}" class="flex items-center gap-3 px-4 py-2.5 text-sm text-primary transition-colors hover:bg-gov-50 dark:text-dark-text dark:hover:bg-white/5">
                    <x-icon name="user" class="h-4 w-4 text-secondary" /> Profil Saya
                </a>
                <a href="{{ route('profile.edit') }}#password" class="flex items-center gap-3 px-4 py-2.5 text-sm text-primary transition-colors hover:bg-gov-50 dark:text-dark-text dark:hover:bg-white/5">
                    <x-icon name="key" class="h-4 w-4 text-secondary" /> Ubah Password
                </a>
                <div class="my-1.5 border-t border-border dark:border-dark-border"></div>
                <form method="POST" action="{{ route('logout') }}">
                    @csrf
                    <button type="submit" class="flex w-full items-center gap-3 px-4 py-2.5 text-sm text-danger transition-colors hover:bg-danger-light dark:hover:bg-danger/10">
                        <x-icon name="arrow-right-on-rectangle" class="h-4 w-4" /> Keluar
                    </button>
                </form>
            </div>
        </div>
    </div>
</aside>