@props(['wedding'])

{{-- Konfirmasi Kehadiran (RSVP) — tersimpan ke tabel rsvps, terpisah dari ucapan/wishes --}}
<style>
    /* ---------- Sentuhan lucu & menggemaskan untuk form RSVP ---------- */
    #rsvp .cute-mascot { display: inline-block; animation: rsvpMascotWave 2.2s ease-in-out infinite; }
    @keyframes rsvpMascotWave { 0%,100% { transform: rotate(-8deg); } 50% { transform: rotate(10deg); } }
    #rsvp input[type="text"]:focus, #rsvp input[type="tel"]:focus,
    #rsvp select:focus, #rsvp input[type="number"]:focus {
        box-shadow: 0 0 0 3px rgba(251,113,133,.18);
    }
    /* font-size 16px di HP mencegah Safari/iOS otomatis zoom saat field difokuskan */
    @media (max-width: 640px) {
        #rsvp input, #rsvp select { font-size: 16px !important; }
    }
    #rsvp #rsvp-submit-btn { transition: transform .3s cubic-bezier(.68,-0.55,.27,1.55), background-color .3s ease; }
    #rsvp #rsvp-submit-btn:hover:not(:disabled) { transform: scale(1.035) translateY(-2px); }
    #rsvp #rsvp-submit-btn:active:not(:disabled) { transform: scale(.97); }
</style>

<script>
    // Sentuhan lucu tambahan: letupan hati kecil setiap kali tombol "Kirim Konfirmasi" disentuh.
    // Murni dekoratif — dibungkus try/catch & tidak menghentikan (preventDefault) apa pun,
    // jadi TIDAK mengganggu proses submit asli yang ditangani resources/js/rsvp.js.
    (function () {
        try {
            document.addEventListener('DOMContentLoaded', function () {
                var btn = document.getElementById('rsvp-submit-btn');
                if (!btn) return;
                btn.addEventListener('click', function () {
                    try {
                        var rect = btn.getBoundingClientRect();
                        var burstCount = window.innerWidth < 640 ? 5 : 8;
                        for (var i = 0; i < burstCount; i++) {
                            (function () {
                                var h = document.createElement('span');
                                h.textContent = ['\u2764', '\uD83D\uDC8D', '\uD83D\uDD4A\uFE0F', '\uD83D\uDC90', '\u2728'][Math.floor(Math.random() * 5)];
                                h.style.position = 'fixed';
                                h.style.left = (rect.left + rect.width / 2) + 'px';
                                h.style.top = (rect.top + rect.height / 2) + 'px';
                                h.style.fontSize = (9 + Math.random() * 9) + 'px';
                                h.style.color = '#fb7185';
                                h.style.pointerEvents = 'none';
                                h.style.zIndex = '9999';
                                h.style.transform = 'translate(-50%,-50%) scale(.6)';
                                h.style.transition = 'transform 900ms cubic-bezier(.16,.8,.3,1), opacity 900ms ease-out';
                                document.body.appendChild(h);
                                var dx = (Math.random() * 2 - 1) * 60, dy = -(60 + Math.random() * 90);
                                requestAnimationFrame(function () {
                                    h.style.transform = 'translate(calc(-50% + ' + dx + 'px), calc(-50% + ' + dy + 'px)) scale(1.2) rotate(' + (Math.random()*40-20) + 'deg)';
                                    h.style.opacity = '0';
                                });
                                setTimeout(function () { h.remove(); }, 950);
                            })();
                        }
                    } catch (e) {}
                });
            });
        } catch (e) {}
    })();
</script>

<section id="rsvp" data-section class="relative bg-rose-50 px-5 sm:px-6 py-14 sm:py-20 md:py-28">
    <div class="max-w-lg mx-auto text-center mb-8 sm:mb-10" data-reveal>
        <span class="cute-mascot text-3xl mb-1" aria-hidden="true">&#128141;</span>
        <div class="mb-2"><span class="wx-rings" aria-hidden="true"><i></i><i></i></span></div>
        <p class="font-display italic text-base sm:text-lg text-rose-600 mb-2">Mohon konfirmasi</p>
        <h2 class="font-display text-3xl sm:text-display-lg text-red-950 mb-3">Kehadiran Anda</h2>
        <p class="font-sans text-sm text-red-900/70">
            Kabar kehadiran Anda sangat berarti bagi persiapan acara kami.
        </p>
    </div>

    <form id="rsvp-form" class="max-w-lg mx-auto bg-white/70 border border-rose-400/20 rounded-xl p-5 sm:p-8" novalidate>
        {{-- Diisi otomatis lewat JS dari wedding-data jika tamu membuka link personalnya (lihat resources/js/rsvp.js) --}}
        <input type="hidden" id="rsvp-guest-code" name="guest_code" value="">

        <div class="grid grid-cols-1 sm:grid-cols-2 gap-3.5 sm:gap-4 mb-3.5 sm:mb-4">
            <div>
                <label for="rsvp-name" class="block text-xs tracking-widest text-rose-600 mb-2 font-sans">NAMA</label>
                <input id="rsvp-name" name="guest_name" type="text" required maxlength="100" autocomplete="name"
                       class="w-full rounded-lg border border-red-900/15 px-4 py-3 sm:py-2.5 font-sans text-sm
                              focus:border-rose-400 focus:ring-0" placeholder="Nama lengkap">
            </div>
            <div>
                <label for="rsvp-phone" class="block text-xs tracking-widest text-rose-600 mb-2 font-sans">NO. WHATSAPP (OPSIONAL)</label>
                <input id="rsvp-phone" name="phone" type="tel" maxlength="20" autocomplete="tel" inputmode="tel"
                       class="w-full rounded-lg border border-red-900/15 px-4 py-3 sm:py-2.5 font-sans text-sm
                              focus:border-rose-400 focus:ring-0" placeholder="08xx-xxxx-xxxx">
            </div>
        </div>

        <div class="grid grid-cols-1 sm:grid-cols-2 gap-3.5 sm:gap-4 mb-5">
            <div>
                <label for="rsvp-attendance" class="block text-xs tracking-widest text-rose-600 mb-2 font-sans">KEHADIRAN</label>
                <select id="rsvp-attendance" name="attendance" required
                        class="w-full rounded-lg border border-red-900/15 px-4 py-3 sm:py-2.5 font-sans text-sm bg-white
                               focus:border-rose-400 focus:ring-0">
                    <option value="hadir">Hadir</option>
                    <option value="tidak_hadir">Tidak Hadir</option>
                    <option value="ragu_ragu">Masih Ragu</option>
                </select>
            </div>
            <div>
                <label for="rsvp-guests" class="block text-xs tracking-widest text-rose-600 mb-2 font-sans">JUMLAH TAMU</label>
                <input id="rsvp-guests" name="number_of_guests" type="number" min="1" max="10" value="1" required inputmode="numeric"
                       class="w-full rounded-lg border border-red-900/15 px-4 py-3 sm:py-2.5 font-sans text-sm
                              focus:border-rose-400 focus:ring-0">
            </div>
        </div>

        <p id="rsvp-form-error" class="hidden text-xs text-red-600 mb-4 font-sans"></p>
        <p id="rsvp-form-success" class="hidden text-xs text-red-900 mb-4 font-sans"></p>

        <button type="submit" id="rsvp-submit-btn"
                class="w-full inline-flex items-center justify-center px-6 py-3.5 min-h-[48px] rounded-full
                       bg-red-950 text-white text-sm font-medium tracking-wide
                       hover:bg-red-900 active:scale-[.98] transition-all disabled:opacity-50">
            Kirim Konfirmasi
        </button>
    </form>
</section>