@php
    $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]">Edit Data Tamu DPRD</p>
                    <h1 class="mt-1 text-2xl font-black leading-tight md:text-3xl">{{ $guest->kode_booking }}</h1>
                    <p class="mt-1 max-w-2xl text-sm leading-relaxed text-slate-300">Perbarui data pemohon, jadwal, dokumen, dan anggota rombongan.</p>
                </div>
                <div class="flex flex-wrap gap-3">
                    <a href="{{ route('tamu.dashboard.guest-detail', $guest) }}" class="inline-flex h-11 items-center justify-center rounded-full border border-white/20 px-5 text-sm font-black text-white transition hover:bg-white/10">Detail</a>
                    <a href="{{ route('tamu.dashboard', ['tab' => 'data']) }}" 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">Kembali</a>
                </div>
            </div>
        </div>

        <form wire:submit.prevent="save" 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" class="{{ $inputClass }}"></label>
                    <label class="block"><span class="{{ $labelClass }}">Email</span><input type="email" wire:model.defer="email_pemohon" class="{{ $inputClass }}"></label>
                    <label class="block"><span class="{{ $labelClass }}">No. WA</span><input type="text" wire:model.defer="no_wa" 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" 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" 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="10" wire:model="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" 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]">Kosongkan jika tidak ingin mengganti file lama.</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>
                        <span class="mt-1 block break-all text-xs text-[#64748b]">Saat ini: {{ $guest->surat_permohonan ? basename($guest->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>
                        <span class="mt-1 block break-all text-xs text-[#64748b]">Saat ini: {{ $guest->surat_tugas ? basename($guest->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" class="{{ $inputClass }}"></label>
                            <label class="block"><span class="{{ $labelClass }}">Jabatan</span><input wire:model.defer="members.{{ $i }}.jabatan" 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 periksa 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]">Perubahan akan tersimpan ke data kunjungan tamu dan halaman detail.</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]">Simpan Perubahan</button>
            </div>
        </form>
    </div>
</div>