@php
    $popupModal = asset('assets/tamu/popup_modal.jpeg');
    $inputClass = 'mt-2 h-11 w-full rounded-[14px] border border-[#cbd5e1] bg-white px-4 text-[15px] text-[#111827] shadow-sm outline-none transition placeholder:text-[#94a3b8] focus:border-[#6366f1] focus:ring-4 focus:ring-[#6366f1]/15';
    $textareaClass = 'mt-2 min-h-[96px] w-full rounded-[14px] border border-[#cbd5e1] bg-white px-4 py-3 text-[15px] text-[#111827] shadow-sm outline-none transition placeholder:text-[#94a3b8] focus:border-[#6366f1] focus:ring-4 focus:ring-[#6366f1]/15';
    $labelClass = 'text-sm font-black text-[#344054]';
@endphp

<div class="min-h-screen bg-gradient-to-br from-[#4d39dc] via-[#5146ee] to-[#12a9dc] px-4 py-6 sm:px-6 lg:px-8">
    <div class="mx-auto max-w-[1180px]">
        <div class="mb-5 overflow-hidden rounded-[28px] bg-white shadow-[0_20px_54px_rgba(15,23,42,.14)] ring-1 ring-white/30">
            <div class="flex flex-col gap-4 bg-[#111827] px-6 py-5 text-white sm:flex-row sm:items-center sm:justify-between">
                <div>
                    <p class="text-sm font-black uppercase tracking-wide text-[#a5b4fc]">Form Daftar Hadir Tamu DPRD</p>
                    <h1 class="mt-1 text-2xl font-black leading-tight md:text-3xl">Lengkapi Data Kunjungan</h1>
                    <p class="mt-1 max-w-2xl text-sm leading-relaxed text-slate-300">Pastikan data pemohon, jadwal, dokumen, dan anggota tamu terisi benar sebelum dikirim.</p>
                </div>
                <a href="{{ route('tamu.home') }}" class="inline-flex h-11 items-center justify-center rounded-full bg-white px-5 text-sm font-black text-[#111827] transition hover:bg-slate-100">Beranda</a>
            </div>
        </div>

        <form wire:submit.prevent="submit" class="space-y-5 rounded-[28px] bg-white p-5 shadow-[0_20px_54px_rgba(15,23,42,.14)] ring-1 ring-slate-200 sm:p-6">
            <section class="rounded-[22px] border border-[#dbe3f3] bg-[#f8fafc] p-5">
                <div class="mb-4 flex items-center gap-3">
                    <span class="grid h-9 w-9 place-items-center rounded-full bg-[#4f46e5] text-sm font-black text-white">1</span>
                    <div>
                        <h2 class="text-lg font-black text-[#111827]">Data Pemohon</h2>
                        <p class="text-sm text-[#64748b]">Identitas utama dan asal instansi.</p>
                    </div>
                </div>
                <div class="grid gap-4 md:grid-cols-2 xl:grid-cols-3">
                    <label class="block"><span class="{{ $labelClass }}">Nama Pemohon</span><input type="text" wire:model.defer="nama_pemohon" placeholder="Nama lengkap pemohon" class="{{ $inputClass }}"></label>
                    <label class="block"><span class="{{ $labelClass }}">Email</span><input type="email" wire:model.defer="email_pemohon" placeholder="email@instansi.go.id" class="{{ $inputClass }}"></label>
                    <label class="block"><span class="{{ $labelClass }}">No. WA</span><input type="text" wire:model.defer="no_wa" placeholder="08xxxxxxxxxx" class="{{ $inputClass }}"></label>
                    <label class="block md:col-span-2 xl:col-span-3"><span class="{{ $labelClass }}">Instansi</span><input type="text" wire:model.defer="instansi" placeholder="Nama instansi/lembaga" class="{{ $inputClass }}"></label>
                    <label class="block md:col-span-2 xl:col-span-3"><span class="{{ $labelClass }}">Alamat Instansi</span><textarea wire:model.defer="alamat_instansi" placeholder="Alamat lengkap instansi" class="{{ $textareaClass }}"></textarea></label>
                </div>
            </section>

            <section class="rounded-[22px] border border-[#dbe3f3] bg-white p-5">
                <div class="mb-4 flex items-center gap-3">
                    <span class="grid h-9 w-9 place-items-center rounded-full bg-[#4f46e5] text-sm font-black text-white">2</span>
                    <div>
                        <h2 class="text-lg font-black text-[#111827]">Detail Kunjungan</h2>
                        <p class="text-sm text-[#64748b]">Lokasi asal, tujuan, waktu, dan materi pembahasan.</p>
                    </div>
                </div>
                <div class="grid gap-4 md:grid-cols-2 xl:grid-cols-4">
                    <label class="block"><span class="{{ $labelClass }}">Provinsi</span><select wire:model="provinsi_id" class="{{ $inputClass }}"><option value="">Pilih Provinsi</option>@foreach($provinces as $province)<option value="{{ $province->id }}">{{ $province->nama_provinsi }}</option>@endforeach</select></label>
                    <label class="block"><span class="{{ $labelClass }}">Kabupaten</span><select wire:model.defer="kabupaten_id" class="{{ $inputClass }}"><option value="">Pilih Kabupaten</option>@foreach($regencies as $regency)<option value="{{ $regency->id }}">{{ $regency->nama_kabupaten }}</option>@endforeach</select></label>
                    <label class="block"><span class="{{ $labelClass }}">Tujuan</span><select wire:model.defer="tujuan" class="{{ $inputClass }}"><option value="">Pilih Tujuan</option><option>Audiensi</option><option>Kunjungan Kerja</option><option>Study Banding</option></select></label>
                    <label class="block"><span class="{{ $labelClass }}">Jumlah Tamu</span><input type="number" min="1" max="255" wire:model.lazy="jumlah_tamu" class="{{ $inputClass }}"></label>
                    <label class="block"><span class="{{ $labelClass }}">Tanggal Kunjungan</span><input type="date" wire:model.defer="tanggal_kunjungan" class="{{ $inputClass }}"></label>
                    <label class="block"><span class="{{ $labelClass }}">Jam Kunjungan</span><input type="time" wire:model.defer="jam_kunjungan" class="{{ $inputClass }}"></label>
                    <label class="block md:col-span-2"><span class="{{ $labelClass }}">Materi</span><textarea wire:model.defer="materi" placeholder="Materi atau agenda yang akan dibahas" class="{{ $textareaClass }}"></textarea></label>
                </div>
            </section>

            <section class="rounded-[22px] border border-[#dbe3f3] bg-[#f8fafc] p-5">
                <div class="mb-4 flex items-center gap-3">
                    <span class="grid h-9 w-9 place-items-center rounded-full bg-[#4f46e5] text-sm font-black text-white">3</span>
                    <div>
                        <h2 class="text-lg font-black text-[#111827]">Dokumen Pendukung</h2>
                        <p class="text-sm text-[#64748b]">Unggah file PDF, DOC, atau DOCX maksimal 2 MB.</p>
                    </div>
                </div>
                <div class="grid gap-4 md:grid-cols-2">
                    <label class="block rounded-[18px] border border-dashed border-[#cbd5e1] bg-white p-4"><span class="{{ $labelClass }}">Surat Permohonan</span><input type="file" wire:model="surat_permohonan" class="mt-3 w-full text-sm text-[#475569] file:mr-4 file:rounded-full file:border-0 file:bg-[#4f46e5] file:px-4 file:py-2 file:text-sm file:font-black file:text-white hover:file:bg-[#4338ca]"></label>
                    <label class="block rounded-[18px] border border-dashed border-[#cbd5e1] bg-white p-4"><span class="{{ $labelClass }}">Surat Tugas</span><input type="file" wire:model="surat_tugas" class="mt-3 w-full text-sm text-[#475569] file:mr-4 file:rounded-full file:border-0 file:bg-[#4f46e5] file:px-4 file:py-2 file:text-sm file:font-black file:text-white hover:file:bg-[#4338ca]"></label>
                </div>
            </section>

            <section class="rounded-[22px] border border-[#dbe3f3] bg-white p-5">
                <div class="mb-4 flex items-center gap-3">
                    <span class="grid h-9 w-9 place-items-center rounded-full bg-[#4f46e5] text-sm font-black text-white">4</span>
                    <div>
                        <h2 class="text-lg font-black text-[#111827]">Anggota Tamu</h2>
                        <p class="text-sm text-[#64748b]">Jumlah baris mengikuti jumlah tamu yang dipilih.</p>
                    </div>
                </div>
                <div class="grid gap-3">
                    @foreach($members as $i=>$member)
                        <div class="grid gap-3 rounded-[18px] border border-[#e2e8f0] bg-[#f8fafc] p-4 md:grid-cols-[80px_1fr_1fr] md:items-end">
                            <div>
                                <span class="{{ $labelClass }}">No.</span>
                                <div class="mt-2 grid h-11 place-items-center rounded-[14px] bg-[#eef2ff] text-sm font-black text-[#4f46e5]">{{ $i + 1 }}</div>
                            </div>
                            <label class="block"><span class="{{ $labelClass }}">Nama Anggota</span><input wire:model.defer="members.{{ $i }}.nama" placeholder="Nama anggota" class="{{ $inputClass }}"></label>
                            <label class="block"><span class="{{ $labelClass }}">Jabatan</span><input wire:model.defer="members.{{ $i }}.jabatan" placeholder="Jabatan anggota" class="{{ $inputClass }}"></label>
                        </div>
                    @endforeach
                </div>
            </section>

            @if ($errors->any())
                <div class="rounded-[18px] border border-red-200 bg-red-50 p-4 text-sm text-red-700">
                    <p class="font-black">Mohon lengkapi data berikut:</p>
                    <ul class="mt-2 list-disc space-y-1 pl-5">@foreach($errors->all() as $error)<li>{{ $error }}</li>@endforeach</ul>
                </div>
            @endif

            <div class="flex flex-col gap-3 border-t border-[#e2e8f0] pt-5 sm:flex-row sm:items-center sm:justify-between">
                <p class="text-sm text-[#64748b]">Setelah terkirim, kode kunjungan akan tampil dan dapat dipakai untuk mengisi survey.</p>
                <button class="h-12 rounded-full bg-[#4f46e5] px-8 text-base font-black text-white shadow-[0_14px_24px_rgba(79,70,229,.22)] transition hover:bg-[#4338ca]">Kirim Daftar Hadir</button>
            </div>
        </form>
    </div>

    <div id="registrationPopupModal" class="fixed inset-0 z-50 hidden items-center justify-center bg-[#111827]/70 px-4 py-6 backdrop-blur-sm">
        <div class="relative w-full max-w-[760px] overflow-hidden rounded-[26px] bg-white shadow-[0_24px_80px_rgba(15,23,42,.35)] ring-1 ring-white/40">
            <button type="button" id="closeRegistrationPopup" aria-label="Tutup popup" class="absolute right-4 top-4 z-10 grid h-10 w-10 place-items-center rounded-full bg-[#111827]/90 text-2xl font-bold leading-none text-white shadow-lg transition hover:bg-[#0b1220]">&times;</button>
            <img src="{{ $popupModal }}" alt="Informasi Layanan Tamu DPRD" class="max-h-[82vh] w-full object-contain">
        </div>
    </div>
</div>

<script>
    document.addEventListener('DOMContentLoaded', function () {
        var modal = document.getElementById('registrationPopupModal');
        var closeButton = document.getElementById('closeRegistrationPopup');

        modal.classList.remove('hidden');
        modal.classList.add('flex');

        function closeModal() {
            modal.classList.add('hidden');
            modal.classList.remove('flex');
        }

        closeButton.addEventListener('click', closeModal);
        modal.addEventListener('click', function (event) {
            if (event.target === modal) {
                closeModal();
            }
        });
    });
</script>