@props(['wedding'])

{{-- Buku Tamu — form disubmit via fetch() ke /api/wishes, daftar diperbarui tanpa reload --}}
<style>
    /* ---------- Sentuhan lucu & menggemaskan untuk Buku Tamu ---------- */
    #guestbook .cute-mascot { display: inline-block; animation: guestbookMascotBounce 2s ease-in-out infinite; }
    @keyframes guestbookMascotBounce { 0%,100% { transform: translateY(0) rotate(-4deg); } 50% { transform: translateY(-6px) rotate(4deg); } }
    #guestbook #wish-submit-btn { transition: transform .3s cubic-bezier(.68,-0.55,.27,1.55); }
    #guestbook #wish-submit-btn:hover:not(:disabled) { transform: scale(1.035) translateY(-2px); }
    #guestbook #wish-submit-btn:active:not(:disabled) { transform: scale(.97); }
    #guestbook .wish-item { transition: transform .3s ease, border-color .3s ease; }
    #guestbook .wish-item:hover { transform: translateY(-3px); border-color: rgba(251,113,133,.4); }
    /* font-size 16px di HP mencegah Safari/iOS otomatis zoom saat field difokuskan */
    @media (max-width: 640px) {
        #guestbook input, #guestbook textarea { font-size: 16px !important; }
    }
</style>

<script>
    // Sentuhan lucu tambahan: letupan hati kecil setiap kali tombol "Kirim Ucapan" disentuh.
    // Murni dekoratif, tidak preventDefault apa pun — tidak mengganggu proses submit asli
    // yang ditangani resources/js/guestbook.js.
    (function () {
        try {
            document.addEventListener('DOMContentLoaded', function () {
                var btn = document.getElementById('wish-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 = ['\u2728', '\u2764', '\uD83D\uDC8D', '\uD83D\uDD4A\uFE0F', '\uD83D\uDC90'][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 = Math.random() < .5 ? '#fb7185' : '#F3E1B5';
                                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="guestbook" data-section class="relative bg-red-950 text-white px-5 sm:px-6 py-14 sm:py-20 md:py-28 overflow-hidden">
    <div class="aurora-bg"></div>

    <div class="relative z-10 max-w-3xl mx-auto text-center mb-10 sm:mb-12" data-reveal>
        <span class="cute-mascot text-3xl mb-1" aria-hidden="true">&#128140;</span>
        <p class="font-display italic text-base sm:text-lg text-rose-300 mb-2">Doa dan restu Anda</p>
        <h2 class="font-display text-3xl sm:text-display-lg text-white">Buku Tamu</h2>
    </div>

    <div class="relative z-10 max-w-2xl mx-auto grid grid-cols-1 gap-12">
        {{-- Form ucapan --}}
        <form id="wish-form" class="bg-red-950/50 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/guestbook.js) --}}
            <input type="hidden" id="wish-guest-code" name="guest_code" value="">
            <div class="mb-4">
                <label for="wish-name" class="block text-xs tracking-widest text-rose-300 mb-2 font-sans">NAMA</label>
                <input id="wish-name" name="name" type="text" required maxlength="100" autocomplete="name"
                       class="w-full rounded-lg bg-[#2b0709]/40 border border-white/10 text-white
                              placeholder:text-white/30 px-4 py-3 sm:py-2.5 font-sans text-sm
                              focus:border-rose-400 focus:ring-0"
                       placeholder="Nama Anda">
            </div>

            <div class="mb-4">
                <label class="block text-xs tracking-widest text-rose-300 mb-2 font-sans">KONFIRMASI KEHADIRAN</label>
                <div class="grid grid-cols-3 gap-2">
                    @foreach(['hadir' => 'Hadir', 'tidak_hadir' => 'Tidak Hadir', 'ragu_ragu' => 'Ragu-ragu'] as $value => $label)
                        <label class="attendance-option cursor-pointer text-center text-xs sm:text-sm font-sans
                                      border border-white/15 rounded-lg py-3 sm:py-2.5 min-h-[44px] flex items-center justify-center transition-colors
                                      has-[:checked]:bg-rose-500 has-[:checked]:text-white has-[:checked]:border-rose-500">
                            <input type="radio" name="attendance" value="{{ $value }}" class="sr-only" @checked($value === 'hadir')>
                            {{ $label }}
                        </label>
                    @endforeach
                </div>
            </div>

            <div class="mb-5">
                <label for="wish-message" class="block text-xs tracking-widest text-rose-300 mb-2 font-sans">UCAPAN &amp; DOA</label>
                <textarea id="wish-message" name="message" rows="3" required maxlength="500"
                          class="w-full rounded-lg bg-[#2b0709]/40 border border-white/10 text-white
                                 placeholder:text-white/30 px-4 py-3 sm:py-2.5 font-sans text-sm resize-none
                                 focus:border-rose-400 focus:ring-0"
                          placeholder="Tuliskan doa dan harapan terbaik Anda..."></textarea>
            </div>

            <p id="wish-form-error" class="hidden text-xs text-rose-200 mb-4 font-sans"></p>

            <button type="submit" id="wish-submit-btn"
                    class="w-full inline-flex items-center justify-center gap-2 px-6 py-3.5 min-h-[48px] rounded-full
                           bg-rose-600 text-white text-sm font-medium tracking-wide
                           hover:bg-rose-500 active:scale-[.98] transition-all disabled:opacity-50">
                <span id="wish-submit-label">Kirim Ucapan</span>
            </button>
        </form>

        {{-- Daftar ucapan — dirender awal dari server, ditambah/diperbarui via JS --}}
        <div>
            <div class="flex items-center justify-between mb-5 font-sans text-sm text-white/60">
                <span id="wishes-count">{{ $wedding->wishes->count() }} ucapan</span>
            </div>

            <ul id="wishes-list" class="space-y-4">
                @foreach($wedding->wishes as $wish)
                    <li class="wish-item bg-red-950/40 border border-white/10 rounded-lg p-5" data-wish-id="{{ $wish->id }}">
                        <div class="flex items-center justify-between mb-1.5">
                            <span class="font-display text-lg text-white">{{ $wish->name }}</span>
                            <span class="text-[11px] px-2 py-0.5 rounded-full border border-rose-400/30 text-rose-300 font-sans">
                                {{ $wish->attendance_label }}
                            </span>
                        </div>
                        <p class="text-sm text-white/70 font-sans leading-relaxed mb-2">{{ $wish->message }}</p>
                        <span class="text-[11px] text-white/40 font-sans">{{ $wish->sent_at->diffForHumans() }}</span>
                    </li>
                @endforeach
            </ul>

            <div class="text-center mt-8">
                <button id="wishes-load-more" type="button"
                        class="hidden text-xs tracking-wide text-rose-300 hover:text-rose-200 active:scale-95 border-b border-rose-400/30 py-2.5 px-2 font-sans transition-transform">
                    Muat Ucapan Lainnya
                </button>
            </div>
        </div>
    </div>
</section>