<?php
$days = ['Minggu','Senin','Selasa','Rabu','Kamis','Jumat','Sabtu'];
$months = [1=>'Januari','Februari','Maret','April','Mei','Juni','Juli','Agustus','September','Oktober','November','Desember'];
$eventTimestamp = strtotime($acara['tanggal']);
$eventDateLabel = $days[(int) date('w', $eventTimestamp)] . ', ' . date('j', $eventTimestamp) . ' ' . $months[(int) date('n', $eventTimestamp)] . ' ' . date('Y', $eventTimestamp);
$mapsEmbed = trim((string) ($acara['google_maps_embed'] ?? ''));
if ($mapsEmbed === '') {
    $mapsEmbed = 'https://www.google.com/maps?q=' . rawurlencode($acara['lokasi']) . '&output=embed';
}
?>
<!doctype html>
<html lang="id">
<head>
    <meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1">
    <meta name="description" content="Undangan <?= esc($acara['nama_acara']) ?> <?= esc($acara['nama_anak']) ?>">
    <title><?= esc($acara['nama_acara']) ?> | <?= esc($acara['nama_anak']) ?></title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.css" rel="stylesheet">
    <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Amiri:wght@400;700&family=Playfair+Display:wght@600;700&family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/glightbox/dist/css/glightbox.min.css" rel="stylesheet">
    <link href="<?= base_url('assets/css/invitation.css') ?>" rel="stylesheet">
</head>
<body data-event-date="<?= esc($acara['tanggal'].' '.$acara['waktu_mulai']) ?>">
<section id="cover" class="cover-screen">
    <div class="cover-frame text-center">
        <div class="lanterns"><i class="bi bi-lightbulb-fill"></i><i class="bi bi-lightbulb-fill"></i></div>
        <p class="eyebrow">Walimatul Khitan</p>
        <h1><?= esc($acara['nama_anak']) ?></h1>
        <div class="gold-divider"><span>✦</span></div>
        <p class="mb-1">Kepada Yth.</p>
        <h2><?= esc($tamu['nama_tamu'] ?? 'Bapak/Ibu/Saudara/i') ?></h2>
        <button id="openInvitation" class="btn btn-gold mt-4"><i class="bi bi-envelope-open-heart me-2"></i>Buka Undangan</button>
    </div>
</section>

<main id="invitation" class="d-none">
    <nav class="navbar navbar-expand-lg navbar-dark fixed-top invitation-nav"><div class="container"><a class="navbar-brand" href="#home"><i class="bi bi-moon-stars-fill me-2"></i>Al-Khitan</a><button class="navbar-toggler" data-bs-toggle="collapse" data-bs-target="#nav"><span class="navbar-toggler-icon"></span></button><div id="nav" class="collapse navbar-collapse"><div class="navbar-nav ms-auto"><a class="nav-link" href="#acara">Acara</a><a class="nav-link" href="#galeri">Galeri</a><a class="nav-link" href="#lokasi">Lokasi</a><a class="nav-link" href="#rsvp">RSVP</a></div></div></div></nav>

    <section id="home" class="hero-section text-center">
        <div class="container position-relative">
            <p class="eyebrow" data-aos="fade-down"><?= esc($acara['nama_acara']) ?></p>
            <h1 data-aos="zoom-in"><?= esc($acara['nama_anak']) ?></h1>
            <p class="hero-date" data-aos="fade-up"><?= esc(str_replace(', ', ' · ', $eventDateLabel)) ?></p>
            <a class="btn btn-gold" href="#acara"><i class="bi bi-chevron-down me-2"></i>Lihat Detail</a>
        </div>
    </section>

    <section class="section cream text-center">
        <div class="container narrow" data-aos="fade-up">
            <div class="arabic">بِسْمِ اللَّهِ الرَّحْمَنِ الرَّحِيم</div>
            <h2 class="section-title">Assalamu’alaikum Warahmatullahi Wabarakatuh</h2>
            <div class="gold-divider"><span>✦</span></div>
            <p>Dengan memohon rahmat dan ridho Allah SWT, kami bermaksud mengundang Bapak/Ibu/Saudara/i untuk hadir dan memberikan doa dalam acara tasyakuran khitanan putra kami.</p>
        </div>
    </section>

    <section class="section profile-section">
        <div class="container"><div class="row align-items-center g-5">
            <div class="col-lg-5 text-center" data-aos="fade-right">
                <div class="child-frame"><?php if($acara['foto_anak']): ?><img src="<?= base_url($acara['foto_anak']) ?>" alt="<?= esc($acara['nama_anak']) ?>"><?php else: ?><div class="photo-placeholder"><i class="bi bi-person-standing"></i><span>Foto Anak</span></div><?php endif ?></div>
            </div>
            <div class="col-lg-7 text-center text-lg-start" data-aos="fade-left"><p class="eyebrow text-success">Putra Tercinta</p><h2 class="display-name"><?= esc($acara['nama_anak']) ?></h2><p class="lead fst-italic">“<?= esc($acara['doa']) ?>”</p><p class="small text-uppercase letter-space"><?= esc($acara['nama_orang_tua']) ?></p></div>
        </div></div>
    </section>

    <section id="acara" class="section cream">
        <div class="container text-center"><p class="eyebrow text-success">Insya Allah Dilaksanakan</p><h2 class="section-title">Detail Acara</h2><div class="gold-divider"><span>✦</span></div>
            <div class="row g-4 justify-content-center mt-3">
                <div class="col-md-5" data-aos="fade-up"><article class="event-card"><i class="bi bi-calendar3"></i><h3><?= esc($eventDateLabel) ?></h3><p><?= date('H.i',strtotime($acara['waktu_mulai'])) ?> s.d. <?= date('H.i',strtotime($acara['waktu_selesai'])) ?> WIB</p></article></div>
                <div class="col-md-5" data-aos="fade-up" data-aos-delay="100"><article class="event-card"><i class="bi bi-geo-alt"></i><h3>Lokasi Acara</h3><p><?= esc($acara['lokasi']) ?></p><a class="btn btn-emerald" target="_blank" href="<?= esc($acara['google_maps_url']) ?>">Buka Google Maps</a></article></div>
            </div>
        </div>
    </section>

    <section class="countdown-section text-center"><div class="container"><p class="eyebrow">Menuju Hari Bahagia</p><div class="countdown"><div><strong id="days">00</strong><span>Hari</span></div><div><strong id="hours">00</strong><span>Jam</span></div><div><strong id="minutes">00</strong><span>Menit</span></div><div><strong id="seconds">00</strong><span>Detik</span></div></div></div></section>

    <section id="galeri" class="section">
        <div class="container text-center"><p class="eyebrow text-success">Momen Bahagia</p><h2 class="section-title">Galeri Foto</h2><div class="gold-divider"><span>✦</span></div>
            <div class="gallery-grid mt-4">
                <?php if($galeri): foreach($galeri as $i=>$foto): ?><a class="glightbox gallery-item item-<?= ($i%5)+1 ?>" href="<?= base_url($foto['foto']) ?>" data-gallery="khitanan" data-title="<?= esc($foto['caption']) ?>"><img src="<?= base_url($foto['foto']) ?>" alt="<?= esc($foto['caption'] ?: 'Galeri') ?>"></a><?php endforeach; else: ?>
                <?php foreach(['bi-camera','bi-stars','bi-moon-stars'] as $icon): ?><div class="gallery-empty"><i class="bi <?= $icon ?>"></i><span>Galeri akan segera hadir</span></div><?php endforeach ?>
                <?php endif ?>
            </div>
        </div>
    </section>

    <section id="lokasi" class="section location-section"><div class="container"><div class="row align-items-center g-4">
        <div class="col-lg-7" data-aos="fade-right"><div class="map-wrap"><iframe src="<?= esc($mapsEmbed) ?>" title="Peta lokasi acara" loading="lazy" referrerpolicy="no-referrer-when-downgrade" allowfullscreen></iframe></div></div>
        <div class="col-lg-5 text-center text-lg-start" data-aos="fade-left"><p class="eyebrow">Petunjuk Lokasi</p><h2 class="section-title text-white">Navigasi Digital</h2><p><?= esc($acara['lokasi']) ?></p><div class="qr-card"><img src="https://api.qrserver.com/v1/create-qr-code/?size=220x220&data=<?= urlencode($acara['google_maps_url']) ?>" alt="QR Google Maps"></div><div><a class="btn btn-gold mt-3" target="_blank" href="<?= esc($acara['google_maps_url']) ?>"><i class="bi bi-geo-alt-fill me-2"></i>Buka Rute</a></div></div>
    </div></div></section>

    <section id="rsvp" class="section cream"><div class="container"><div class="row g-4">
        <div class="col-lg-6"><div class="form-card"><h2 class="section-title">Konfirmasi Kehadiran</h2><p class="text-secondary">Kehadiran dan doa Anda sangat berarti bagi kami.</p><form id="rsvpForm" action="<?= base_url('rsvp') ?>" method="post"><?= csrf_field() ?><input type="hidden" name="tamu_id" value="<?= $tamu['id'] ?? '' ?>"><div class="mb-3"><label class="form-label">Nama</label><input class="form-control" name="nama" value="<?= esc($tamu['nama_tamu'] ?? '') ?>" required></div><div class="row g-3"><div class="col-7"><label class="form-label">Kehadiran</label><select class="form-select" name="status" required><option value="hadir">Hadir</option><option value="tidak_hadir">Tidak Hadir</option></select></div><div class="col-5"><label class="form-label">Jumlah Tamu</label><input class="form-control" type="number" name="jumlah_tamu" min="1" max="20" value="1" required></div></div><div class="my-3"><label class="form-label">Pesan</label><textarea class="form-control" name="pesan" rows="3"></textarea></div><button class="btn btn-emerald w-100">Kirim RSVP</button><div class="form-message mt-3"></div></form></div></div>
        <div class="col-lg-6"><div class="form-card"><h2 class="section-title">Ucapan & Doa</h2><form id="wishForm" action="<?= base_url('ucapan') ?>" method="post"><?= csrf_field() ?><div class="mb-3"><label class="form-label">Nama Pengirim</label><input class="form-control" name="nama_pengirim" value="<?= esc($tamu['nama_tamu'] ?? '') ?>" required></div><div class="mb-3"><label class="form-label">Ucapan</label><textarea class="form-control" name="ucapan" rows="4" required></textarea></div><button class="btn btn-emerald w-100">Kirim Ucapan</button><div class="form-message mt-3"></div></form></div></div>
    </div>
    <div id="wishList" class="wish-list mt-5"><?php foreach($ucapan as $item): ?><article class="wish"><div class="wish-avatar"><?= esc(strtoupper(substr($item['nama_pengirim'],0,1))) ?></div><div><h3><?= esc($item['nama_pengirim']) ?></h3><p><?= esc($item['ucapan']) ?></p><small><?= date('d M Y',strtotime($item['created_at'])) ?></small></div></article><?php endforeach ?></div>
    </div></section>

    <section class="section closing text-center"><div class="container narrow"><i class="bi bi-moon-stars-fill closing-icon"></i><h2>Jazakumullahu Khairan</h2><p>Merupakan suatu kehormatan dan kebahagiaan bagi kami apabila Bapak/Ibu/Saudara/i berkenan hadir untuk memberikan doa restu.</p><button id="shareWhatsapp" class="btn btn-gold"><i class="bi bi-whatsapp me-2"></i>Bagikan Undangan</button></div></section>
    <footer><div class="container text-center"><p class="mb-1">Dibuat oleh <strong>Firdan Maulana Mukhtar</strong></p><small>© 2026 Undangan Digital Tasyakuran Khitanan</small></div></footer>
</main>
<script>window.invitationConfig={shareText:<?= json_encode('Undangan '.$acara['nama_acara'].' '.$acara['nama_anak']) ?>,shareUrl:<?= json_encode(current_url()) ?>,latestWishesUrl:<?= json_encode(base_url('ucapan/latest')) ?>};</script>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script><script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script><script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script><script src="https://cdn.jsdelivr.net/npm/glightbox/dist/js/glightbox.min.js"></script><script src="<?= base_url('assets/js/invitation.js') ?>"></script>
</body></html>
