@php
    $brandLogo = asset('assets/tamu/favicon.ico');
    $navItems = [
        'dashboard' => ['label' => 'Dashboard', 'icon' => 'M3 10.5 12 3l9 7.5V21a1 1 0 0 1-1 1h-5v-7H8v7H3a1 1 0 0 1-1-1V10.5Z'],
        'data' => ['label' => 'Data Tamu', 'icon' => 'M16 11c1.66 0 3-1.34 3-3s-1.34-3-3-3-3 1.34-3 3 1.34 3 3 3ZM8 11c1.66 0 3-1.34 3-3S9.66 5 8 5 5 6.34 5 8s1.34 3 3 3Zm8 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4ZM8 13c-.31 0-.66.02-1.03.05C4.67 13.27 2 14.38 2 16.5V19h4v-2c0-1.31.74-2.49 2.06-3.5A7.6 7.6 0 0 0 8 13Z'],
        'survey' => ['label' => 'Survey', 'icon' => 'M6 3h12a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2Zm3 5 2 2 4-4 1.4 1.4L11 12.8 7.6 9.4 9 8Zm-1 8h8v-2H8v2Z'],
        'link' => ['label' => 'Link Daftar Tamu', 'icon' => 'M4 4h7v7H4V4Zm2 2v3h3V6H6Zm7-2h7v7h-7V4Zm2 2v3h3V6h-3ZM4 13h7v7H4v-7Zm2 2v3h3v-3H6Zm9-2h2v2h-2v-2Zm3 0h2v2h-2v-2Zm-5 5h2v2h-2v-2Zm2-3h2v3h-2v-3Zm3 2h2v3h-2v-3Z'],
        'profile' => ['label' => 'Profil Saya', 'icon' => 'M12 12a4 4 0 1 0 0-8 4 4 0 0 0 0 8Zm-8 9a8 8 0 1 1 16 0H4Z'],
    ];
    if ($canManageUsers) {
        $navItems['users'] = ['label' => 'Kelola User', 'icon' => 'M16 11c1.66 0 3-1.34 3-3s-1.34-3-3-3-3 1.34-3 3 1.34 3 3 3ZM8 10a3 3 0 1 0 0-6 3 3 0 0 0 0 6Zm8 3c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4ZM8 12c-2.67 0-8 1.34-8 4v3h6v-2c0-1.5.8-2.77 2.18-3.8A8.2 8.2 0 0 0 8 12Z'];
    }
    $titles = [
        'dashboard' => ['Dashboard', 'Ringkasan data tamu berdasarkan tanggal kunjungan.'],
        'data' => ['Data Tamu', ''],
        'survey' => ['Data Survey Kepuasan', ''],
        'link' => ['Link Daftar Tamu', 'Generate kode unik dan QR code untuk akses formulir daftar hadir.'],
        'profile' => ['Profil Saya', 'Kelola informasi akun dan password Anda.'],
        'users' => ['Kelola User', 'Tambah, edit, dan hapus akun admin.'],
    ];
    [$pageTitle, $pageSubtitle] = $titles[$activeTab] ?? $titles['dashboard'];
    $inputClass = 'h-12 w-full rounded-[10px] border border-[#d7deea] bg-white px-4 text-[15px] text-[#111827] shadow-sm outline-none transition focus:border-[#4f46e5] focus:ring-4 focus:ring-[#4f46e5]/10';
@endphp

<div class="min-h-screen bg-[#eef3f9] text-[#111827]">
    <div id="adminSidebarOverlay" class="fixed inset-0 z-20 hidden bg-[#111827]/55 backdrop-blur-sm lg:hidden"></div>

    <aside id="adminSidebar" class="fixed inset-y-0 left-0 z-30 flex w-[280px] -translate-x-full flex-col bg-gradient-to-b from-[#17133f] via-[#30279a] to-[#11123d] text-white shadow-2xl transition-transform duration-300 lg:translate-x-0">
        <div class="flex h-[78px] items-center gap-3 border-b border-white/10 px-6">
            <span class="grid h-10 w-10 place-items-center overflow-hidden rounded-full bg-white shadow-lg">
                <img src="{{ $brandLogo }}" alt="Admin Panel" class="h-8 w-8 object-contain">
            </span>
            <div>
                <p class="text-[12px] font-black uppercase tracking-[.34em] text-white/80">Admin Panel</p>
                <p class="text-xl font-black leading-tight">Tamu DPRD</p>
            </div>
        </div>

        <nav class="flex-1 space-y-3 px-3 py-9">
            @foreach($navItems as $key => $item)
                <button type="button" wire:click="setTab('{{ $key }}')" class="admin-sidebar-nav flex h-[58px] w-full items-center gap-4 rounded-[14px] px-4 text-left text-base font-bold transition {{ $activeTab === $key ? 'bg-white text-[#17133f] shadow-[0_12px_26px_rgba(15,23,42,.18)]' : 'text-white/80 hover:bg-white/10 hover:text-white' }}">
                    <span class="grid h-9 w-9 place-items-center rounded-[10px] {{ $activeTab === $key ? 'bg-[#e8edff] text-[#30279a]' : 'bg-white/10 text-white/80' }}">
                        <svg class="h-5 w-5" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="{{ $item['icon'] }}"/></svg>
                    </span>
                    <span>{{ $item['label'] }}</span>
                </button>
            @endforeach
        </nav>

        <div class="m-3 rounded-[18px] bg-white/10 p-5 shadow-[inset_0_1px_0_rgba(255,255,255,.12)]">
            <p class="text-[12px] font-black uppercase tracking-[.22em] text-white/70">Masuk Sebagai</p>
            <p class="mt-2 font-black">{{ $adminUser->name ?? 'Administrator' }}</p>
            <p class="text-sm text-white/85">{{ $adminUser->email ?? 'admin@example.com' }}</p>
        </div>
    </aside>

    <div id="adminShell" class="transition-[padding] duration-300 lg:pl-[280px]">
        <header class="sticky top-0 z-20 flex h-[78px] items-center justify-between bg-gradient-to-r from-[#4d39dc] via-[#3267ed] to-[#10a9d8] px-5 text-white shadow-[0_12px_34px_rgba(15,23,42,.12)] lg:px-8">
            <div class="flex items-center gap-4">
                <button type="button" id="adminSidebarToggle" aria-label="Toggle sidebar" aria-expanded="true" class="grid h-11 w-11 place-items-center rounded-[14px] border border-white/50 bg-white/5 transition hover:bg-white/10">
                    <svg class="h-6 w-6" viewBox="0 0 24 24" fill="none" aria-hidden="true"><path d="M4 7h16M4 12h16M4 17h16" stroke="currentColor" stroke-width="2.4" stroke-linecap="round"/></svg>
                </button>
                <div>
                    <h1 class="text-2xl font-black leading-tight">{{ $pageTitle }}</h1>
                    @if($pageSubtitle)
                        <p class="text-sm text-white/75">{{ $pageSubtitle }}</p>
                    @endif
                </div>
            </div>
            <form method="POST" action="{{ route('tamu.logout') }}">
                @csrf
                <button class="rounded-[12px] px-5 py-3 text-sm font-black text-white shadow-sm transition hover:bg-white/10">Keluar</button>
            </form>
        </header>

        <main class="min-h-[calc(100vh-132px)] px-5 py-10 lg:px-8">
            <div class="mx-auto max-w-[1220px]">
                @if($activeTab === 'dashboard')
                    <section class="rounded-[10px] bg-white p-6 shadow-sm ring-1 ring-[#dfe6ef]">
                        <div class="grid gap-4 md:grid-cols-[1fr_1fr_auto_auto] md:items-end">
                            <label class="block">
                                <span class="text-sm font-bold text-[#344054]">Tanggal Awal</span>
                                <input type="date" wire:model="tanggal_mulai" class="mt-1 {{ $inputClass }}">
                            </label>
                            <label class="block">
                                <span class="text-sm font-bold text-[#344054]">Tanggal Akhir</span>
                                <input type="date" wire:model="tanggal_selesai" class="mt-1 {{ $inputClass }}">
                            </label>
                            <button type="button" class="h-12 rounded-[10px] bg-[#4f46e5] px-6 font-black text-white">Filter</button>
                            <button type="button" wire:click="resetFilters" class="h-12 rounded-[10px] px-5 font-bold text-[#344054] hover:bg-slate-100">Reset</button>
                        </div>
                    </section>

                    <section class="mt-6 rounded-[10px] bg-white p-6 shadow-sm ring-1 ring-[#dfe6ef]">
                        <h2 class="text-xl font-black">Total Tamu Berdasarkan Tujuan</h2>
                        <p class="mt-1 text-sm text-[#667085]">Rekap tujuan kunjungan mengikuti rentang tanggal di atas.</p>
                        <div class="mt-6 grid gap-4 md:grid-cols-3">
                            @foreach($totals as $label => $total)
                                <div class="rounded-[10px] border border-[#e1e7ef] bg-[#f9fafc] p-6">
                                    <p class="text-sm font-black uppercase tracking-wide text-[#667085]">{{ $label }}</p>
                                    <p class="mt-4 text-4xl font-black">{{ $total }}</p>
                                    <p class="mt-3 text-sm text-[#667085]">Tamu dengan tujuan {{ strtolower($label) }}.</p>
                                </div>
                            @endforeach
                        </div>
                    </section>
                @endif

                @if($activeTab === 'data')
                    <section class="rounded-[10px] bg-white p-6 shadow-sm ring-1 ring-[#dfe6ef]">
                        <div class="rounded-[10px] border border-[#dfe6ef] bg-[#fbfcfe] p-4">
                            <div class="grid gap-4 lg:grid-cols-4">
                                <label><span class="text-xs font-black uppercase tracking-wide text-[#667085]">Tanggal Awal</span><input type="date" wire:model="tanggal_mulai" class="mt-2 {{ $inputClass }}"></label>
                                <label><span class="text-xs font-black uppercase tracking-wide text-[#667085]">Tanggal Akhir</span><input type="date" wire:model="tanggal_selesai" class="mt-2 {{ $inputClass }}"></label>
                                <label><span class="text-xs font-black uppercase tracking-wide text-[#667085]">Tujuan</span><select wire:model="filterTujuan" class="mt-2 {{ $inputClass }}"><option value="">Semua Tujuan</option><option>Audiensi</option><option>Kunjungan Kerja</option><option>Study Banding</option></select></label>
                                <label><span class="text-xs font-black uppercase tracking-wide text-[#667085]">Provinsi</span><select wire:model="filterProvinsi" class="mt-2 {{ $inputClass }}"><option value="">Semua Provinsi</option>@foreach($provinces as $province)<option value="{{ $province->id }}">{{ $province->nama_provinsi }}</option>@endforeach</select></label>
                            </div>
                            <div class="mt-4 grid gap-4 lg:grid-cols-[1fr_2fr_auto_auto]">
                                <label><span class="text-xs font-black uppercase tracking-wide text-[#667085]">Kabupaten/Kota</span><select wire:model="filterKabupaten" class="mt-2 {{ $inputClass }}"><option value="">Semua Kabupaten/Kota</option>@foreach($regencies as $regency)<option value="{{ $regency->id }}">{{ $regency->nama_kabupaten }}</option>@endforeach</select></label>
                                <label><span class="text-xs font-black uppercase tracking-wide text-[#667085]">Pencarian</span><input type="search" wire:model.debounce.500ms="search" placeholder="Cari nama, email, instansi, provinsi, kabupaten, atau materi" class="mt-2 {{ $inputClass }}"></label>
                                <button class="mt-7 h-12 rounded-[10px] bg-[#4f46e5] px-6 font-black text-white">Filter</button>
                                <button type="button" wire:click="resetFilters" class="mt-7 h-12 rounded-[10px] bg-[#6b7280] px-6 font-black text-white">Reset Filter</button>
                            </div>
                        </div>

                        <div class="mt-7 flex flex-wrap items-end justify-between gap-4">
                            <div>
                                <h2 class="text-xl font-black">Daftar Tamu</h2>
                                <p class="text-sm text-[#667085]">Kelola data kunjungan dan dokumen pendukung tamu.</p>
                            </div>
                            <button wire:click="exportGuests" class="h-11 rounded-[10px] bg-[#16a34a] px-5 font-black text-white">Export Excel</button>
                        </div>

                        <div class="mt-5 overflow-x-auto rounded-[10px] border border-[#e1e7ef]">
                            <table class="min-w-full text-left text-sm">
                                <thead class="bg-[#f0f2f6] text-xs font-black uppercase tracking-wide text-[#475569]">
                                    <tr>
                                        <th class="px-4 py-4">No</th><th class="px-4 py-4">Nama Pemohon</th><th class="px-4 py-4">Email</th><th class="px-4 py-4">Instansi</th><th class="px-4 py-4">No WA</th><th class="px-4 py-4">Tujuan</th><th class="px-4 py-4">Total Rombongan</th><th class="px-4 py-4">Materi</th><th class="px-4 py-4">Tanggal</th><th class="px-4 py-4">Jam</th><th class="px-4 py-4">Aksi</th>
                                    </tr>
                                </thead>
                                <tbody class="divide-y divide-[#eef2f7]">
                                    @forelse($guests as $guest)
                                        <tr>
                                            <td class="px-4 py-4 text-[#475569]">{{ $guests->firstItem() + $loop->index }}</td>
                                            <td class="px-4 py-4 font-bold">{{ $guest->nama_pemohon }}</td>
                                            <td class="px-4 py-4 text-[#344054]">{{ $guest->email_pemohon }}</td>
                                            <td class="px-4 py-4 text-[#344054]">{{ $guest->instansi }}</td>
                                            <td class="px-4 py-4 text-[#344054]">{{ $guest->no_wa }}</td>
                                            <td class="px-4 py-4"><span class="rounded-full bg-[#eef2ff] px-3 py-2 text-xs font-bold text-[#4f46e5]">{{ $guest->tujuan }}</span></td>
                                            <td class="px-4 py-4 font-bold text-[#344054]">{{ $guest->members_count ?: $guest->jumlah_tamu }} orang</td>
                                            <td class="max-w-[180px] px-4 py-4 text-[#344054]">{{ $guest->materi }}</td>
                                            <td class="px-4 py-4 text-[#344054]">{{ optional($guest->tanggal_kunjungan)->format('Y-m-d') }}</td>
                                            <td class="px-4 py-4 text-[#344054]">{{ substr((string) $guest->jam_kunjungan, 0, 5) }}</td>
                                            <td class="whitespace-nowrap px-4 py-4">
                                                <a href="{{ route('tamu.dashboard.guest-detail', $guest) }}" class="font-black text-[#111827]">Detail</a>
                                                <a href="{{ route('tamu.dashboard.guest-edit', $guest) }}" class="ml-2 rounded-full bg-[#eef2ff] px-2 py-1 font-bold text-[#4f46e5]">Edit</a>
                                                <button wire:click="delete({{ $guest->id }})" class="ml-1 rounded-full bg-red-50 px-2 py-1 font-bold text-red-600">Hapus</button>
                                            </td>
                                        </tr>
                                    @empty
                                        <tr><td colspan="11" class="px-4 py-10 text-center text-[#667085]">Belum ada data tamu.</td></tr>
                                    @endforelse
                                </tbody>
                            </table>
                        </div>
                        <div class="mt-4">{{ $guests->links() }}</div>
                    </section>
                @endif

                @if($activeTab === 'survey')
                    <section class="rounded-[10px] bg-white p-6 shadow-sm ring-1 ring-[#dfe6ef]">
                        <div class="flex flex-wrap items-start justify-between gap-4">
                            <div>
                                <h2 class="text-xl font-black">Rekap Survey Tamu</h2>
                                <p class="text-sm text-[#667085]">Pantau penilaian pelayanan berdasarkan kode kunjungan.</p>
                            </div>
                            <button wire:click="exportSurveys" class="h-11 rounded-[10px] bg-[#16a34a] px-5 font-black text-white">Export Excel</button>
                        </div>
                        <div class="mt-6 grid gap-4 md:grid-cols-3">
                            @foreach($surveyAverages as $label => $average)
                                <div class="rounded-[10px] border border-[#dbe3f3] bg-[#eef2ff] p-5">
                                    <p class="text-sm text-[#475569]">Rata-rata {{ $label }}</p>
                                    <p class="mt-1 text-3xl font-black text-[#4f46e5]">{{ $average }} <span class="text-[#eab308]">★★★★★</span></p>
                                </div>
                            @endforeach
                        </div>
                        <div class="mt-6 overflow-x-auto rounded-[10px] border border-[#e1e7ef]">
                            <table class="min-w-full text-left text-sm">
                                <thead class="bg-[#f0f2f6] text-xs font-black uppercase tracking-wide text-[#475569]">
                                    <tr><th class="px-4 py-4">Nama Pemohon</th><th class="px-4 py-4">Kode Kunjungan</th><th class="px-4 py-4">Pelayanan</th><th class="px-4 py-4">Kecepatan</th><th class="px-4 py-4">Fasilitas</th><th class="px-4 py-4">Saran</th><th class="px-4 py-4">Tanggal Survey</th></tr>
                                </thead>
                                <tbody class="divide-y divide-[#eef2f7]">
                                    @forelse($surveys as $survey)
                                        <tr>
                                            <td class="px-4 py-4">{{ $survey->guest->nama_pemohon ?? '-' }}</td>
                                            <td class="px-4 py-4 font-mono text-xs">{{ $survey->guest->kode_booking ?? '-' }}</td>
                                            <td class="px-4 py-4">{{ $survey->rating_pelayanan }}</td>
                                            <td class="px-4 py-4">{{ $survey->rating_kecepatan }}</td>
                                            <td class="px-4 py-4">{{ $survey->rating_fasilitas }}</td>
                                            <td class="px-4 py-4">{{ $survey->saran ?: '-' }}</td>
                                            <td class="px-4 py-4">{{ optional($survey->created_at)->format('Y-m-d H:i') }}</td>
                                        </tr>
                                    @empty
                                        <tr><td colspan="7" class="px-4 py-10 text-center text-[#667085]">Belum ada data survey.</td></tr>
                                    @endforelse
                                </tbody>
                            </table>
                        </div>
                        <div class="mt-4">{{ $surveys->links() }}</div>
                    </section>
                @endif

                @if($activeTab === 'link')
                    <section class="mx-auto max-w-4xl rounded-[10px] bg-white p-6 shadow-sm ring-1 ring-[#dfe6ef]">
                        <p class="text-base font-black uppercase tracking-wide text-[#4f46e5]">Link Aktif</p>
                        <h2 class="mt-2 text-4xl font-black">{{ $activeLink ?: 'Belum Ada Link' }}</h2>
                        <div class="mt-6 rounded-[10px] border border-[#e1e7ef] bg-[#fbfcfe] p-4">
                            <p class="text-xs font-black uppercase tracking-wide text-[#667085]">URL Formulir</p>
                            <div class="mt-2 flex gap-3">
                                <input id="activeRegistrationUrl" value="{{ $activeUrl ?: 'Belum ada link aktif' }}" readonly class="{{ $inputClass }}">
                                <button type="button" onclick="navigator.clipboard.writeText(document.getElementById('activeRegistrationUrl').value)" class="rounded-[10px] bg-[#111827] px-5 font-black text-white">Copy</button>
                            </div>
                        </div>
                        <div class="mt-6 rounded-[10px] border border-[#e1e7ef] p-5 text-[#111827]">Jika link di-reset, QR code lama tidak bisa dipakai lagi. Cetak dan tempel QR code aktif ini di kantor.</div>
                        <button wire:click="resetRegistrationLink" class="mt-6 h-12 rounded-[10px] bg-[#4f46e5] px-6 font-black text-white">Reset Link</button>

                        <div class="mt-8 rounded-[10px] border border-[#e1e7ef] bg-[#fbfcfe] p-5 text-center">
                            <p class="text-sm font-black uppercase tracking-wide text-[#667085]">QR Code</p>
                            <div class="mt-5 rounded-[12px] bg-white p-5">
                                @if($activeUrl)
                                    <img src="https://api.qrserver.com/v1/create-qr-code/?size=360x360&data={{ urlencode($activeUrl) }}" alt="QR Code {{ $activeLink }}" class="mx-auto h-72 w-72 object-contain">
                                @else
                                    <div class="grid h-72 place-items-center text-[#667085]">Klik Reset Link untuk membuat QR code.</div>
                                @endif
                            </div>
                            @if($activeUrl)
                                <a href="{{ $activeUrl }}" target="_blank" class="mt-5 inline-flex h-11 items-center justify-center rounded-[10px] bg-[#16a34a] px-5 font-black text-white">Buka Form</a>
                            @endif
                        </div>
                    </section>
                @endif

                @if($activeTab === 'profile')
                    <section class="rounded-[10px] bg-white p-6 shadow-sm ring-1 ring-[#dfe6ef]">
                        <div class="max-w-3xl">
                            <h2 class="text-xl font-black">Profil Saya</h2>
                            <p class="mt-1 text-sm text-[#667085]">Perbarui nama, username, jabatan, email, dan password akun Anda.</p>

                            @if(session('profile_message'))
                                <div class="mt-5 rounded-[14px] border border-emerald-200 bg-emerald-50 p-4 text-sm font-bold text-emerald-700">{{ session('profile_message') }}</div>
                            @endif

                            <form wire:submit.prevent="saveProfile" class="mt-6 grid gap-4 md:grid-cols-2">
                                <label><span class="text-sm font-black text-[#344054]">Nama</span><input wire:model.defer="profileForm.name" class="mt-2 {{ $inputClass }}"></label>
                                <label><span class="text-sm font-black text-[#344054]">Username</span><input wire:model.defer="profileForm.username" class="mt-2 {{ $inputClass }}"></label>
                                <label><span class="text-sm font-black text-[#344054]">Jabatan</span><input wire:model.defer="profileForm.jabatan" class="mt-2 {{ $inputClass }}"></label>
                                <label><span class="text-sm font-black text-[#344054]">Email</span><input type="email" wire:model.defer="profileForm.email" class="mt-2 {{ $inputClass }}"></label>
                                <label><span class="text-sm font-black text-[#344054]">Password Baru</span><input type="password" wire:model.defer="profileForm.password" placeholder="Kosongkan jika tidak diganti" class="mt-2 {{ $inputClass }}"></label>
                                <label><span class="text-sm font-black text-[#344054]">Konfirmasi Password</span><input type="password" wire:model.defer="profileForm.password_confirmation" class="mt-2 {{ $inputClass }}"></label>

                                @if ($errors->has('profileForm.name') || $errors->has('profileForm.username') || $errors->has('profileForm.email') || $errors->has('profileForm.password'))
                                    <div class="md:col-span-2 rounded-[14px] border border-red-200 bg-red-50 p-4 text-sm text-red-700">{{ $errors->first() }}</div>
                                @endif

                                <div class="md:col-span-2">
                                    <button class="h-12 rounded-[10px] bg-[#4f46e5] px-6 font-black text-white">Simpan Profil</button>
                                </div>
                            </form>
                        </div>
                    </section>
                @endif

                @if($activeTab === 'users' && $canManageUsers)
                    <section class="rounded-[10px] bg-white p-6 shadow-sm ring-1 ring-[#dfe6ef]">
                        <div class="flex flex-wrap items-start justify-between gap-4">
                            <div>
                                <h2 class="text-xl font-black">Kelola User</h2>
                                <p class="mt-1 text-sm text-[#667085]">Menu ini hanya tersedia untuk user utama dengan ID 1.</p>
                            </div>
                            <button type="button" wire:click="resetUserForm" class="h-11 rounded-[10px] bg-[#111827] px-5 font-black text-white">Tambah User</button>
                        </div>

                        @if(session('user_message'))
                            <div class="mt-5 rounded-[14px] border border-emerald-200 bg-emerald-50 p-4 text-sm font-bold text-emerald-700">{{ session('user_message') }}</div>
                        @endif
                        @error('user_delete')
                            <div class="mt-5 rounded-[14px] border border-red-200 bg-red-50 p-4 text-sm font-bold text-red-700">{{ $message }}</div>
                        @enderror

                        <form wire:submit.prevent="saveUser" class="mt-6 rounded-[16px] border border-[#dfe6ef] bg-[#fbfcfe] p-5">
                            <div class="mb-4">
                                <h3 class="font-black">{{ $editingUserId ? 'Edit User' : 'Tambah User Baru' }}</h3>
                                <p class="text-sm text-[#667085]">Password wajib saat tambah user, dan opsional saat edit.</p>
                            </div>
                            <div class="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
                                <label><span class="text-sm font-black text-[#344054]">Nama</span><input wire:model.defer="userForm.name" class="mt-2 {{ $inputClass }}"></label>
                                <label><span class="text-sm font-black text-[#344054]">Username</span><input wire:model.defer="userForm.username" class="mt-2 {{ $inputClass }}"></label>
                                <label><span class="text-sm font-black text-[#344054]">Jabatan</span><input wire:model.defer="userForm.jabatan" class="mt-2 {{ $inputClass }}"></label>
                                <label><span class="text-sm font-black text-[#344054]">Email</span><input type="email" wire:model.defer="userForm.email" class="mt-2 {{ $inputClass }}"></label>
                                <label><span class="text-sm font-black text-[#344054]">Password</span><input type="password" wire:model.defer="userForm.password" class="mt-2 {{ $inputClass }}"></label>
                                <label><span class="text-sm font-black text-[#344054]">Konfirmasi Password</span><input type="password" wire:model.defer="userForm.password_confirmation" class="mt-2 {{ $inputClass }}"></label>
                            </div>

                            @if ($errors->has('userForm.name') || $errors->has('userForm.username') || $errors->has('userForm.email') || $errors->has('userForm.password'))
                                <div class="mt-4 rounded-[14px] border border-red-200 bg-red-50 p-4 text-sm text-red-700">{{ $errors->first() }}</div>
                            @endif

                            <div class="mt-5 flex flex-wrap gap-3">
                                <button class="h-11 rounded-[10px] bg-[#4f46e5] px-6 font-black text-white">{{ $editingUserId ? 'Simpan User' : 'Tambah User' }}</button>
                                @if($editingUserId)
                                    <button type="button" wire:click="resetUserForm" class="h-11 rounded-[10px] border border-[#d7deea] px-6 font-black text-[#344054]">Batal Edit</button>
                                @endif
                            </div>
                        </form>

                        <div class="mt-6 overflow-x-auto rounded-[10px] border border-[#e1e7ef]">
                            <table class="min-w-full text-left text-sm">
                                <thead class="bg-[#f0f2f6] text-xs font-black uppercase tracking-wide text-[#475569]">
                                    <tr><th class="px-4 py-4">ID</th><th class="px-4 py-4">Nama</th><th class="px-4 py-4">Username</th><th class="px-4 py-4">Jabatan</th><th class="px-4 py-4">Email</th><th class="px-4 py-4">Aksi</th></tr>
                                </thead>
                                <tbody class="divide-y divide-[#eef2f7]">
                                    @foreach($users as $user)
                                        <tr>
                                            <td class="px-4 py-4 font-bold">{{ $user->id }}</td>
                                            <td class="px-4 py-4">{{ $user->name }}</td>
                                            <td class="px-4 py-4">{{ $user->username }}</td>
                                            <td class="px-4 py-4">{{ $user->jabatan ?: '-' }}</td>
                                            <td class="px-4 py-4">{{ $user->email }}</td>
                                            <td class="whitespace-nowrap px-4 py-4">
                                                <button type="button" wire:click="editUser({{ $user->id }})" class="rounded-full bg-[#eef2ff] px-3 py-2 font-bold text-[#4f46e5]">Edit</button>
                                                @if($user->id !== 1 && $user->id !== auth()->id())
                                                    <button type="button" wire:click="deleteUser({{ $user->id }})" class="ml-2 rounded-full bg-red-50 px-3 py-2 font-bold text-red-600">Hapus</button>
                                                @endif
                                            </td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                        <div class="mt-4">{{ $users->links() }}</div>
                    </section>
                @endif

                @if($selectedGuest)
                    <section class="mt-6 rounded-[10px] bg-white p-6 shadow-sm ring-1 ring-[#dfe6ef]">
                        <h2 class="text-xl font-black">Detail {{ $selectedGuest->kode_booking }}</h2>
                        <p class="mt-2 text-[#475569]">{{ $selectedGuest->nama_pemohon }} - {{ $selectedGuest->instansi }}</p>
                        <p class="text-[#475569]">{{ $selectedGuest->province->nama_provinsi ?? '-' }} / {{ $selectedGuest->regency->nama_kabupaten ?? '-' }}</p>
                        <h3 class="mt-4 font-black">Anggota</h3>
                        <ul class="mt-2 list-disc pl-5 text-[#475569]">@foreach($selectedGuest->members as $member)<li>{{ $member->nama }} - {{ $member->jabatan }}</li>@endforeach</ul>
                    </section>
                @endif
            </div>
        </main>

        <footer class="flex min-h-[54px] flex-wrap items-center justify-between gap-3 border-t border-[#dfe6ef] bg-white px-5 text-sm text-[#64748b] lg:px-8">
            <p>© 2026 Manajemen Kunjungan Tamu. Semua hak dilindungi.</p>
            <p class="font-semibold text-[#344054]">Admin Panel Kunjungan Tamu</p>
        </footer>
    </div>
</div>

<script>
    document.addEventListener('DOMContentLoaded', function () {
        var sidebar = document.getElementById('adminSidebar');
        var shell = document.getElementById('adminShell');
        var toggle = document.getElementById('adminSidebarToggle');
        var overlay = document.getElementById('adminSidebarOverlay');
        var desktopQuery = window.matchMedia('(min-width: 1024px)');
        var desktopCollapsed = localStorage.getItem('adminSidebarCollapsed') === '1';

        function setExpandedState(expanded) {
            toggle.setAttribute('aria-expanded', expanded ? 'true' : 'false');
        }

        function applyState() {
            if (desktopQuery.matches) {
                overlay.classList.add('hidden');

                if (desktopCollapsed) {
                    sidebar.style.transform = 'translateX(-100%)';
                    shell.style.paddingLeft = '0px';
                    setExpandedState(false);
                } else {
                    sidebar.style.transform = '';
                    shell.style.paddingLeft = '';
                    setExpandedState(true);
                }

                return;
            }

            sidebar.style.transform = 'translateX(-100%)';
            shell.style.paddingLeft = '';
            overlay.classList.add('hidden');
            setExpandedState(false);
        }

        function openMobileSidebar() {
            sidebar.style.transform = 'translateX(0)';
            overlay.classList.remove('hidden');
            setExpandedState(true);
        }

        function closeMobileSidebar() {
            sidebar.style.transform = 'translateX(-100%)';
            overlay.classList.add('hidden');
            setExpandedState(false);
        }

        toggle.addEventListener('click', function () {
            if (desktopQuery.matches) {
                desktopCollapsed = !desktopCollapsed;
                localStorage.setItem('adminSidebarCollapsed', desktopCollapsed ? '1' : '0');
                applyState();
                return;
            }

            if (overlay.classList.contains('hidden')) {
                openMobileSidebar();
            } else {
                closeMobileSidebar();
            }
        });

        overlay.addEventListener('click', closeMobileSidebar);

        document.querySelectorAll('.admin-sidebar-nav').forEach(function (item) {
            item.addEventListener('click', function () {
                if (!desktopQuery.matches) {
                    closeMobileSidebar();
                }
            });
        });

        desktopQuery.addEventListener('change', applyState);
        applyState();
    });
</script>