@php
    $selectClass = 'mt-2 h-12 w-full rounded-[14px] border border-[#cbd5e1] bg-white px-4 text-[15px] font-semibold text-[#111827] shadow-sm outline-none transition 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-8">
    <div class="mx-auto max-w-3xl overflow-hidden rounded-[30px] bg-white shadow-[0_24px_80px_rgba(15,23,42,.25)] ring-1 ring-white/40">
        <div class="bg-[#111827] px-6 py-6 text-white sm:px-8">
            <p class="text-sm font-black uppercase tracking-wide text-[#a5b4fc]">Survey Kunjungan</p>
            <h1 class="mt-2 text-3xl font-black leading-tight">Beri Penilaian Layanan</h1>
            <p class="mt-2 text-sm text-slate-300">Kode dan detail kunjungan sudah terisi otomatis dari pendaftaran.</p>
        </div>

        <form wire:submit.prevent="submit" class="space-y-5 p-6 sm:p-8">
            <section class="rounded-[22px] border border-[#dbe3f3] bg-[#eef2ff] p-5">
                <p class="text-xs font-black uppercase tracking-wide text-[#4f46e5]">Kode Kunjungan</p>
                <div class="mt-2 break-all text-2xl font-black text-[#4f46e5]">{{ $guest->kode_booking }}</div>
                <div class="mt-4 grid gap-3 text-left sm:grid-cols-2">
                    <div class="rounded-[16px] bg-white p-4">
                        <p class="text-xs font-black uppercase tracking-wide text-[#64748b]">Pemohon</p>
                        <p class="mt-1 font-bold text-[#111827]">{{ $guest->nama_pemohon }}</p>
                    </div>
                    <div class="rounded-[16px] bg-white p-4">
                        <p class="text-xs font-black uppercase tracking-wide text-[#64748b]">Instansi</p>
                        <p class="mt-1 font-bold text-[#111827]">{{ $guest->instansi }}</p>
                    </div>
                </div>
            </section>

            <section class="grid gap-4 sm:grid-cols-3">
                @foreach(['rating_pelayanan'=>'Pelayanan','rating_kecepatan'=>'Kecepatan','rating_fasilitas'=>'Fasilitas'] as $field=>$label)
                    <label class="block rounded-[18px] border border-[#dbe3f3] bg-[#f8fafc] p-4">
                        <span class="{{ $labelClass }}">{{ $label }}</span>
                        <select wire:model.defer="{{ $field }}" class="{{ $selectClass }}">
                            <option value="">Pilih rating</option>
                            @for($i=1;$i<=5;$i++)
                                <option value="{{ $i }}">{{ $i }}</option>
                            @endfor
                        </select>
                    </label>
                @endforeach
            </section>

            <label class="block">
                <span class="{{ $labelClass }}">Saran</span>
                <textarea wire:model.defer="saran" placeholder="Tulis saran atau masukan untuk peningkatan layanan" class="mt-2 min-h-[120px] 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"></textarea>
            </label>

            @if ($errors->any())
                <div class="rounded-[18px] border border-red-200 bg-red-50 p-4 text-sm font-semibold text-red-700">{{ $errors->first() }}</div>
            @endif

            <div class="flex flex-col gap-3 border-t border-[#e2e8f0] pt-5 sm:flex-row sm:items-center sm:justify-between">
                <a href="{{ route('tamu.home') }}" class="inline-flex h-12 items-center justify-center rounded-full border border-[#cbd5e1] px-6 text-base font-black text-[#344054] transition hover:border-[#4f46e5] hover:text-[#4f46e5]">Kembali ke Beranda</a>
                <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 Survey</button>
            </div>
        </form>
    </div>
</div>