<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="author" content="wpOceans">
    <link rel="shortcut icon" type="image/png" href="assets/images/favicon.png">
    <title> Undangan Pernikahan </title>
    <link href="assets/css/themify-icons.css" rel="stylesheet">
    <link href="assets/css/font-awesome.min.css" rel="stylesheet">
    <link href="assets/css/flaticon.css" rel="stylesheet">
    <link href="assets/css/bootstrap.min.css" rel="stylesheet">
    <link href="assets/css/magnific-popup.css" rel="stylesheet">
    <link href="assets/css/animate.css" rel="stylesheet">
    <link href="assets/css/owl.carousel.css" rel="stylesheet">
    <link href="assets/css/owl.theme.css" rel="stylesheet">
    <link href="assets/css/slick.css" rel="stylesheet">
    <link href="assets/css/slick-theme.css" rel="stylesheet">
    <link href="assets/css/swiper.min.css" rel="stylesheet">
    <link href="assets/css/nice-select.css" rel="stylesheet">
    <link href="assets/css/owl.transitions.css" rel="stylesheet">
    <link href="assets/css/jquery.fancybox.css" rel="stylesheet">
    <link href="assets/css/odometer-theme-default.css" rel="stylesheet">
    <link href="assets/css/style.css" rel="stylesheet">
    <script type="module" src="https://www.gstatic.com/firebasejs/9.0.0/firebase-app.js"></script>
<script type="module" src="https://www.gstatic.com/firebasejs/9.0.0/firebase-firestore.js"></script>

</head>

<body>

    <!-- start page-wrapper -->
    <div class="page-wrapper">
        <!-- start preloader -->
        <div class="preloader">
            <div class="vertical-centered-box">
                <div class="content">
                    <div class="loader-circle"></div>
                    <div class="loader-line-mask">
                        <div class="loader-line"></div>
                    </div>
                    <div class="mt-5"></div>
                    <img class="mt-5" src="assets/images/preloader.png" alt="">
                </div>
            </div>
        </div>
        <!-- end preloader -->
            
        <!-- end preloader -->
        <div class="music-player">
            <audio id="audioPlayer" autoplay>
              <source src="assets/musik/musik.mp3" type="audio/mp3">
              Browser Anda tidak mendukung tag audio.
            </audio>
          </div>

        <div class="mt-2"></div>
        <div class="wpo-box-style ">
            <section class="wpo-hero-slider wpo-hero-style-2">
                <div class="wedding-announcement">
                    <div class="couple-text">
                        <div class="shape-1"><img src="assets/images/slider/shape5.png" alt=""></div>
                        <h2 class="wow slideInUp" data-wow-duration="1s">Fauzan & Mahfud</h2>
                        <p class="wow slideInUp" data-wow-duration="1.8s">Akan Melangsungkan Pernikahan Pada<br> 24 Desember 2025</p>
                        <div class="shape-2"><img src="assets/images/slider/shape6.png" alt=""></div>
                    </div>
                </div>
                <div class="swiper-container">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide">
                            <div class="slide-inner slide-bg-image" data-background="assets/images/slider/1.jpg">
                            </div> <!-- end slide-inner -->
                        </div> <!-- end swiper-slide -->

                        <div class="swiper-slide">
                            <div class="slide-inner slide-bg-image" data-background="assets/images/slider/2.jpg">
                            </div> <!-- end slide-inner -->
                        </div> <!-- end swiper-slide -->

                        <div class="swiper-slide">
                            <div class="slide-inner slide-bg-image" data-background="assets/images/slider/3.jpg">
                            </div> <!-- end slide-inner -->
                        </div> <!-- end swiper-slide -->

                        <div class="swiper-slide">
                            <div class="slide-inner slide-bg-image" data-background="assets/images/slider/4.jpg">
                            </div> <!-- end slide-inner -->
                        </div> <!-- end swiper-slide -->
                    </div>
                    <!-- end swiper-wrapper -->

                    <!-- swipper controls -->
                    <div class="swiper-pagination"></div>
                    <div class="next-prev-btn">
                        <div class="swiper-button-next"></div>
                        <div class="swiper-button-prev"></div>
                    </div>
                </div>
                
            </section>
            
        </div>
        <!-- end of hero slider -->
        <div class="couple-text mt-5 text-center wow slideInUp" data-wow-duration="1s">
    <p>Kepada Bapak/Ibu/Saudara/i,</p>
    <h3 id="guest-name">Tamu Undangan</h3>
    <p>Anda Diundang Ke Acara Pernikahan Kami</p>
            <a href="#mempelai"  id='buka-undangan' class='theme-btn-s3'  onclick='toggleMusic()' ><i class='fa fa-envelope' id='audioPlayer' ></i> Buka Undangan</a>
            
            </div>
        <!-- start couple-section -->
        <section class="couple-section-s2 section-padding" id="mempelai">
            <div class="container">
                <div class="wpo-section-title wow slideInUp" data-wow-duration="1s">
                    <div class="section-title-img">
                        <img src="assets/images/section-title.png" alt="">
                    </div>
                    <h2>Mempelai</h2>
                </div>
                <div class="row align-items-center wow slideInUp" data-wow-duration="1s">
                    <div class="col col-xs-12">
                        <div class="couple-area clearfix">
                            <div class="row">
                                <div class="col-lg-4">
                                    <div class="couple-item">
                                        <div class="couple-img">
                                            <img src="assets/images/Mempelai/laki-laki.png" alt="">
                                        </div>
                                        <div class="couple-text">
                                            <h3>Fauzan Mahfud</h3>
                                            <p>Putra Bp. Mulyadi & Ibu Titik Maningsih</p>
                                            <p>Bendo Sukodono Sragen</p>
                                            <div class="social">
                                                <ul>
                                                    <li><a href="#"><i class="ti-facebook"></i></a></li>
                                                    <li><a href="#"><i class="ti-twitter-alt"></i></a></li>
                                                    <li><a href="#"><i class="ti-instagram"></i></a></li>
                                                </ul>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-lg-4">
                                    <div class="middle-couple-text">
                                        <h2>
                                            <span class="wow slideInUp" data-wow-duration="1s">L</span>
                                            <span class="wow slideInUp" data-wow-duration="1.2s">o</span>
                                            <span class="wow slideInUp" data-wow-duration="1.3s">v</span>
                                            <span class="wow slideInUp" data-wow-duration="1.4s">e</span>
                                        </h2>
                                    </div>
                                </div>
                                <div class="col-lg-4">
                                    <div class="couple-item">
                                        <div class="couple-img">
                                            <img src="assets/images/Mempelai/perempuan.png" alt="">
                                        </div>
                                        <div class="couple-text">
                                            <h3>Fauzan Mahfud</h3>
                                            <p>Putra Bp. Mulyadi & Ibu Titik Maningsih</p>
                                            <p>Bendo Sukodono Sragen</p>
                                            <div class="social">
                                                <ul>
                                                    <li><a href="#"><i class="ti-facebook"></i></a></li>
                                                    <li><a href="#"><i class="ti-twitter-alt"></i></a></li>
                                                    <li><a href="#"><i class="ti-instagram"></i></a></li>
                                                </ul>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div> <!-- end container -->
        </section>
        <!-- end couple-section -->

        <!-- start wpo-story-section -->
        <section class="wpo-story-section section-padding wow slideInUp" data-wow-duration="1s" id="story">
            <div class="container">
                <div class="wpo-section-title">
                    <div class="section-title-img">
                        <img src="assets/images/section-title.png" alt="">
                    </div>
                    <h2>Our love story</h2>
                </div>
                <div class="row align-items-center justify-content-center">
                    <div class="col col-lg-12 col-12">
                        <div class="tab-area">
                            <div class="tablinks">
                                <ul class="nav nav-tabs" id="myTab" role="tablist">
                                    <li class="nav-item" role="presentation">
                                        <a class="nav-link active" id="Meet-tab" data-bs-toggle="tab" href="#Meet"
                                            role="tab" aria-controls="Meet" aria-selected="true">First Meet</a>
                                    </li>
                                    <li class="nav-item" role="presentation">
                                        <a class="nav-link" id="Date-tab" data-bs-toggle="tab" href="#Date" role="tab"
                                            aria-controls="Date" aria-selected="false">First Date</a>
                                    </li>
                                    <li class="nav-item" role="presentation">
                                        <a class="nav-link" id="Proposal-tab" data-bs-toggle="tab" href="#Proposal"
                                            role="tab" aria-controls="Proposal" aria-selected="false">Marige
                                            Proposal</a>
                                    </li>
                                    <li class="nav-item" role="presentation">
                                        <a class="nav-link" id="Engagement-tab" data-bs-toggle="tab" href="#Engagement"
                                            role="tab" aria-controls="Engagement" aria-selected="false">Our
                                            Engagement</a>
                                    </li>
                                </ul>
                            </div>
                            <!-- Tab panes -->
                            <div class="tab-content">
                                <div class="tab-pane in active" id="Meet">
                                    <div class="wpo-story-item">
                                        <div class="wpo-story-img">
                                            <img src="assets/images/story/1.jpg" alt="">
                                        </div>
                                        <div class="wpo-story-content">
                                            <div class="wpo-story-content-inner">
                                                <span><img src="assets/images/story/1.png" alt=""></span>
                                                <h2>First Time We Meet</h2>
                                                <span>Sep 15,2022</span>
                                                <p>I must explain to you how all this mistaken idea of denouing pleasure
                                                    and praising pain was born and I will give you com acount of
                                                    system,the actual teach</p>
                                                <div class="border-shape">
                                                    <img src="assets/images/story/shape.jpg" alt="">
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="tab-pane fade" id="Date">
                                    <div class="wpo-story-item">
                                        <div class="wpo-story-img">
                                            <img src="assets/images/story/2.jpg" alt="">
                                        </div>
                                        <div class="wpo-story-content">
                                            <div class="wpo-story-content-inner">
                                                <span><img src="assets/images/story/2.png" alt=""></span>
                                                <h2>First Date</h2>
                                                <span>Dec 25,2022</span>
                                                <p>I must explain to you how all this mistaken idea of denouing pleasure
                                                    and praising pain was born and I will give you com acount of
                                                    system,the actual teach</p>
                                                <div class="border-shape">
                                                    <img src="assets/images/story/shape.jpg" alt="">
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="tab-pane fade" id="Proposal">
                                    <div class="wpo-story-item">
                                        <div class="wpo-story-img">
                                            <img src="assets/images/story/3.jpg" alt="">
                                        </div>
                                        <div class="wpo-story-content">
                                            <div class="wpo-story-content-inner">
                                                <span><img src="assets/images/story/3.png" alt=""></span>
                                                <h2>Marige Proposal</h2>
                                                <span>Jan 05,2022</span>
                                                <p>I must explain to you how all this mistaken idea of denouing pleasure
                                                    and praising pain was born and I will give you com acount of
                                                    system,the actual teach</p>
                                                <div class="border-shape">
                                                    <img src="assets/images/story/shape.jpg" alt="">
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="tab-pane fade" id="Engagement">
                                    <div class="wpo-story-item">
                                        <div class="wpo-story-img">
                                            <img src="assets/images/story/4.jpg" alt="">
                                        </div>
                                        <div class="wpo-story-content">
                                            <div class="wpo-story-content-inner">
                                                <span><img src="assets/images/story/4.png" alt=""></span>
                                                <h2>Our Engagement</h2>
                                                <span>Sep 15,2022</span>
                                                <p>I must explain to you how all this mistaken idea of denouing pleasure
                                                    and praising pain was born and I will give you com acount of
                                                    system,the actual teach</p>
                                                <div class="border-shape">
                                                    <img src="assets/images/story/shape.jpg" alt="">
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div> <!-- end container -->
        </section>
        <!-- end story-section -->
        <!-- start wpo-video-section -->
        <section class="wpo-video-section hidden">
            <a href="https://www.youtube.com/embed/G-rzE-9zHj8" class="video-btn" data-type="iframe"><i
                    class="fi flaticon-play"></i></a>
        </section>
        <!-- end wpo-video-section-->
        <!-- start wpo-portfolio-section -->
        <section class="wpo-portfolio-section section-padding" id="gallery">
            <div class="container">
                <div class="row">
                    <div class="wpo-section-title">
                        <div class="section-title-img">
                            <img src="assets/images/section-title.png" alt="">
                        </div>
                        <h2>Momen Kita</h2>
                    </div>
                </div>
                <div class="sortable-gallery">
                    <div class="gallery-filters"></div>
                    <div class="row">
                        <div class="col-lg-12">
                            <div class="portfolio-grids gallery-container clearfix">
                                <div class="grid">
                                    <div class="img-holder">
                                        <a href="assets/images/gallery/1.jpg" class="fancybox"
                                            data-fancybox-group="gall-1">
                                            <img src="assets/images/gallery/1.jpg" alt class="img img-responsive">
                                            <div class="hover-content">
                                                <i class="ti-plus"></i>
                                            </div>
                                        </a>
                                    </div>
                                </div>
                                <div class="grid">
                                    <div class="img-holder">
                                        <a href="assets/images/gallery/2.jpg" class="fancybox"
                                            data-fancybox-group="gall-1">
                                            <img src="assets/images/gallery/2.jpg" alt class="img img-responsive">
                                            <div class="hover-content">
                                                <i class="ti-plus"></i>
                                            </div>
                                        </a>
                                    </div>
                                </div>
                                <div class="grid">
                                    <div class="img-holder">
                                        <a href="assets/images/gallery/3.jpg" class="fancybox"
                                            data-fancybox-group="gall-1">
                                            <img src="assets/images/gallery/3.jpg" alt class="img img-responsive">
                                            <div class="hover-content">
                                                <i class="ti-plus"></i>
                                            </div>
                                        </a>
                                    </div>
                                </div>
                                <div class="grid">
                                    <div class="img-holder">
                                        <a href="assets/images/gallery/5.jpg" class="fancybox"
                                            data-fancybox-group="gall-1">
                                            <img src="assets/images/gallery/5.jpg" alt class="img img-responsive">
                                            <div class="hover-content">
                                                <i class="ti-plus"></i>
                                            </div>
                                        </a>
                                    </div>
                                </div>
                                <div class="grid">
                                    <div class="img-holder">
                                        <a href="assets/images/gallery/4.jpg" class="fancybox"
                                            data-fancybox-group="gall-1">
                                            <img src="assets/images/gallery/4.jpg" alt class="img img-responsive">
                                            <div class="hover-content">
                                                <i class="ti-plus"></i>
                                            </div>
                                        </a>
                                    </div>
                                </div>
                                <div class="grid">
                                    <div class="img-holder">
                                        <a href="assets/images/gallery/6.jpg" class="fancybox"
                                            data-fancybox-group="gall-1">
                                            <img src="assets/images/gallery/6.jpg" alt class="img img-responsive">
                                            <div class="hover-content">
                                                <i class="ti-plus"></i>
                                            </div>
                                        </a>
                                    </div>
                                </div>
                                <div class="grid">
                                    <div class="img-holder">
                                        <a href="assets/images/gallery/7.jpg" class="fancybox"
                                            data-fancybox-group="gall-1">
                                            <img src="assets/images/gallery/7.jpg" alt class="img img-responsive">
                                            <div class="hover-content">
                                                <i class="ti-plus"></i>
                                            </div>
                                        </a>
                                    </div>
                                </div>
                                <div class="grid">
                                    <div class="img-holder">
                                        <a href="assets/images/gallery/8.jpg" class="fancybox"
                                            data-fancybox-group="gall-1">
                                            <img src="assets/images/gallery/8.jpg" alt class="img img-responsive">
                                            <div class="hover-content">
                                                <i class="ti-plus"></i>
                                            </div>
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

            </div> <!-- end container -->
        </section>
        <!-- end wpo-portfolio-section -->
        <!-- start wpo-wedding-date -->
        <section id="countdown" class="wpo-wedding-time wow slideInUp" data-wow-duration="1s"">
            <h2 class="">Hitung Mundur Acara</h2>
            <div class="container">
                <div class="row mb-5">
                    <div class="col col-xs-12">
                        <div class="clock-grids">
                            <div id="clock2"></div>
                        </div>
                    </div>
                </div>
            </div> <!-- end container -->
        </section>
        <!-- end wpo-wedding-date -->
        <!-- start wpo-event-section -->
        <section class="wpo-event-section section-padding" id="event">
            <div class="container">
                <div class="row">
                    <div class="wpo-section-title">
                        <div class="section-title-img">
                            <img src="assets/images/section-title2.png" alt="">
                        </div>
                        <h2>Acara Kami</h2>
                    </div>
                </div>
                <div class="wpo-event-wrap">
                    <div class="row">
                        <div class="col col-lg-4 col-md-6 col-12">
                            <div class="wpo-event-item">
                                <div class="wpo-event-img">
                                    <img src="assets/images/event/1.jpg" alt="">
                                </div>
                                <div class="wpo-event-text">
                                    <h2>Resepsi Pernikahan</h2>
                                    <ul>
                                        <li>Monday, 25 Sep, 2022 <br>
                                            1:00 PM – 4:30 PM</li>
                                        <li>Estern Star Plaza, Road 123, USA</li>

                                        <li> <a class="popup-gmaps"
                                                href="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d25211.21212385712!2d144.95275648773628!3d-37.82748510398018!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x6ad642af0f11fd81%3A0x5045675218ce7e0!2zTWVsYm91cm5lIFZJQyAzMDA0LCDgpoXgprjgp43gpp_gp43gprDgp4fgprLgpr_gpq_gprzgpr4!5e0!3m2!1sbn!2sbd!4v1503742051881">
                                                Google Maps</a></li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                        <div class="col col-lg-4 col-md-6 col-12">
                            <div class="wpo-event-item">
                                <div class="wpo-event-img">
                                    <img src="assets/images/event/2.jpg" alt="">
                                </div>
                                <div class="wpo-event-text">
                                    <h2>Akad Nikah</h2>
                                    <ul>
                                        <li>Monday, 25 Sep, 2022 <br>
                                            1:00 PM – 4:30 PM</li>
                                        <li>Estern Star Plaza, Road 123, USA</li>

                                        <li> <a class="popup-gmaps"
                                                href="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d25211.21212385712!2d144.95275648773628!3d-37.82748510398018!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x6ad642af0f11fd81%3A0x5045675218ce7e0!2zTWVsYm91cm5lIFZJQyAzMDA0LCDgpoXgprjgp43gpp_gp43gprDgp4fgprLgpr_gpq_gprzgpr4!5e0!3m2!1sbn!2sbd!4v1503742051881">
                                                Google Maps</a></li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

            </div> <!-- end container -->
        </section>
        <!-- end wpo-event-section -->

        <!-- start of wpo-contact-section -->
        <section class="wpo-contact-section" id="RSVP">
            <div class="container">
                <div class="wpo-contact-section-wrapper">
                    <div class="wpo-contact-form-area">
                        <div class="wpo-section-title">
                            <div class="section-title-img">
                                <img src="assets/images/section-title.png" alt="">
                            </div>
                            <h2>RSVP</h2>
                        </div>
                        <form id="rsvp-form" class="contact-validation-active">
                            <div>
                                <input type="text" class="form-control" name="name" id="name" placeholder=" Name"value="Nama Tamu">
                            </div>
                            <div>
                                <select name="kehadiran" class="form-control" id="kehadiran">
                                    <option disabled selected>Konfirmasi Kehadiran</option>
                                    <option value="Ya (Hadir)">Ya (Hadir)</option>
                                    <option value="Tidak (Tidak Hadir)">Tidak (Tidak Hadir)</option>
                                </select>
                            </div>
                            <div>
                                <input type="textarea" class="form-control" name="komentar" id="komentar" placeholder="Tulis Komentar Anda">
                            </div>
                            <div class="submit-area">
                                <button type="submit" class="theme-btn-s3">Kirim Ucapan</button>
                                <div id="c-loader">
                                    <i class="ti-reload"></i>
                                </div>
                            </div>
                        </form>
                        <div class="border-style"></div>
                    </div>
                    <div class="vector-1">
                        <img src="assets/images/contact/1.png" alt="">
                    </div>
                    <div class="vector-2">
                        <img src="assets/images/contact/2.png" alt="">
                    </div>
                </div>
            </div>
        </section>
        <!-- end of wpo-contact-section -->

        <!-- start wpo-blog-section -->
        <section class="wpo-blog-section section-padding" id="blog">
            <div class="container">
                <div class="row">
                    <div class="wpo-section-title">
                        <div class="section-title-img">
                            <img src="assets/images/section-title.png" alt="">
                        </div>
                        <h2>Daftar Ucapan</h2>
                    </div>
                </div>
                <div class="container">
                    <!-- Scrollable Box -->
                    <div class="wpo-blog-items scrollable" style="max-height: 500px; overflow-x: auto;">
                        <div class="row" id="rsvp-list">
                            <!-- RSVP items will be populated here dynamically -->
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <!-- end wpo-blog-section -->
        </div> <!-- end container -->
        </section>
        <!-- end wpo-blog-section -->
        <!-- Button to toggle autoplay music -->

            </div>
            <div class="wpo-lower-footer">
                <div class="container">
                    <div class="row">
                        <div class="col col-xs-12">
                            <p class="copyright"> &copy; Undangan Pernikahan. Design By <a
                                    href="index.html">Permata Wedding</a>. All Rights Reserved.</p>
                        </div>
                    </div>
                </div>
            </div>
        </footer>
        <!-- end of wpo-site-footer-section -->
    </div>
    <!-- end of page-wrapper -->

    <!-- All JavaScript files
    ================================================== -->
    <script src="assets/js/jquery.min.js"></script>
    <script src="assets/js/bootstrap.bundle.min.js"></script>
    <!-- Plugins for this template -->
    <script src="assets/js/modernizr.custom.js"></script>
    <script src="assets/js/jquery.dlmenu.js"></script>
    <script src="assets/js/jquery-plugin-collection.js"></script>
    <!-- Custom script for this template -->
    <script src="assets/js/script.js"></script>


    
    </body>
    </html>
</body>
<script>
        const audioPlayer = document.getElementById('audioPlayer');
        const playIcon = document.getElementById('playIcon');
        // Fungsi untuk toggle (pause atau play)
        function toggleMusic() {
          // Mulai memutar musik setelah interaksi pengguna
          if (audioPlayer.paused) {
            audioPlayer.play().then(() => {
            }).catch((error) => {
              console.error("Gagal memutar audio:", error);
            });
          } else {
            audioPlayer.pause();
          }
        }


        // Fungsi untuk memblokir scroll
function disableScroll() {
    window.addEventListener('scroll', preventScroll);
}

// Fungsi untuk mengaktifkan scroll
function enableScroll() {
    window.removeEventListener('scroll', preventScroll);
}

// Mencegah scroll dengan event listener
function preventScroll(event) {
    event.preventDefault();
    window.scrollTo(0, 0); // Mengunci posisi scroll
}

// Aktifkan blokir scroll
disableScroll();

// Tambahkan event listener pada tombol dengan ID "buka"
document.getElementById('buka-undangan').addEventListener('click', function() {
    enableScroll(); // Mengaktifkan kembali scroll
});
</script>

<script type="module">
    const firebaseConfig = {
    apiKey: "AIzaSyDXJ5f6VqLtTATKcOw4o5bDRFGRGV3xLdc",
    authDomain: "komentar-baf0c.firebaseapp.com",
    projectId: "komentar-baf0c",
    storageBucket: "komentar-baf0c.appspot.com",
    messagingSenderId: "1031127043839",
    appId: "1:1031127043839:web:6c48cf9a905978f28346ca",
    measurementId: "G-MDLJHZ7KNX"
};


// Import Firebase SDK
    import { initializeApp } from "https://www.gstatic.com/firebasejs/10.13.2/firebase-app.js";
  import { getFirestore, collection, addDoc, getDocs, serverTimestamp, onSnapshot } from "https://www.gstatic.com/firebasejs/10.13.2/firebase-firestore.js";


const app = initializeApp(firebaseConfig);
const db = getFirestore(app);


document.getElementById('rsvp-form').addEventListener('submit', async function(e) {
    e.preventDefault();

    const name = document.getElementById('name').value;
    const kehadiran = document.getElementById('kehadiran').value;
    const komentar = document.getElementById('komentar').value;

    try {
        await addDoc(collection(db, "rsvps"), {
            name: name,
            kehadiran: kehadiran,
            komentar: komentar,
            date: new Date().toLocaleDateString()
        });
        document.getElementById('rsvp-form').reset();
    } catch (error) {
        console.error("Error adding document: ", error);
    }
});

onSnapshot(collection(db, "rsvps"), function(snapshot) {
    const rsvpList = document.getElementById('rsvp-list');
    rsvpList.innerHTML = '';

    snapshot.forEach(function(doc) {
        const rsvp = doc.data();
        const rsvpItem = `
            <div class="col col-12">
                <div class="wpo-blog-item">
                    <div class="wpo-blog-content">
                        <ul>
                            <li>Dari ${rsvp.name}</li>
                            
                            <li>${rsvp.date}</li>
                        </ul>
                        <h6>Kehadiran</h6>
                        <p>${rsvp.kehadiran}</p>
                        <h6>Pesan</h6>
                        <p>${rsvp.komentar}</p>
                    </div>
                </div>
            </div>
        `;
        rsvpList.innerHTML += rsvpItem;
    });
});

</script>
<script>
    // Fungsi untuk mendapatkan parameter dari URL
    function getUrlParameter(name) {
        const urlParams = new URLSearchParams(window.location.search);
        return urlParams.get(name);
    }

    // Mendapatkan nama tamu undangan dari URL
    const firstName = getUrlParameter('kepada');
    
    // Menampilkan nama tamu pada elemen h3
    if (firstName) {
        const guestNameElement = document.getElementById('guest-name');
        guestNameElement.textContent = `Tamu Undangan, ${firstName}`;

        // Mengisi value dari input text dengan nama tamu
        const nameInput = document.getElementById('name');
        nameInput.value = firstName; // Mengisi value input dengan nama tamu
    }
</script>

</html>