<!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.0">
    
    <!-- favicon -->
    <link rel="icon" type="image/png" href="templates/wedding-7/short/_assets/img/favicon/favicon-16x16.png" sizes="16x16"/>
    <link rel="icon" type="image/png" href="templates/wedding-7/short/_assets/img/favicon/favicon-32x32.png" sizes="16x16"/>

    <title>Levidio Wedding Vol 2 - Website Templates</title>

    <!-- CSS  -->
    <!-- Bootstrap -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
    <!-- Root-Icon -->
    <link rel="stylesheet" href="https://cdn.rootpixel.net/assets/rooticon/v2/rooticon.css">
    <!-- Tiny slider -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tiny-slider/2.9.3/tiny-slider.css">
    <!-- Aos Animation on scroll -->
    <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
    <!-- App -->
    <link rel="stylesheet" href="templates/wedding-7/short/_assets/css/app.min.css">
</head>
<body class="opening-show" style="cursor: default !important;">
<!-- <body> -->

    <section id="opening">
        <div class="container text-center" data-aos="zoom-in" data-aos-duration="1200">
            <div class="img-wrapper-spouse mx-auto mb-4">
                <div class="img-wrapper">
                    <img src="templates/wedding-7/short/_assets/img/spouse/man-woman.jpg" alt="">
                </div>
            </div>

            <h6 class="mb-2">Halo, <span id="guest">Justin Gouse</span></h6>
            <h6>Kami mengundang Anda ke Acara Pernikahan kami</h6>
            <h3 class="font-type-secondary fw-bold my-4">John Doe & Jane Doe</h3>
            <h6 class="mb-2">Save the Date</h6>
            <h6 class="mb-8">30 Mei 2021</h6>

            <button id="btn-open-opening" class="btn btn-sm btn-primary">
                <i class="ri ri-mail mr-1"></i> Buka Undangan
            </button>
        </div>

        <img src="templates/wedding-7/short/_assets/img/decoration/leaf-left-1.png" class="decoration" id="opening-decoration-1" alt="" data-aos="fade-right" data-aos-duration="1200">
        <img src="templates/wedding-7/short/_assets/img/decoration/leaf-right-1.png" class="decoration" id="opening-decoration-2" alt="" data-aos="fade-left" data-aos-duration="1200">
    </section>

    <div id="carouselExampleFade" class="carousel slide carousel-fade" 
        data-bs-ride="carousel"
        data-bs-touch="false" 
        data-bs-interval="false">
        <div class="carousel-inner">
            <!-- carousel-item-1 : contains section-1 invitation -->
            <div class="carousel-item active">
                <section id="section-1">
                    <div class="container-xl text-dark">
                        <div class="row gx-md-5 gx-lg-0">
                            <div class="col-md-5 mb-6 mb-md-0">
                                <div id="section-1-img-wrapper">
                                    <div class="img-wrapper">
                                        <img src="templates/wedding-7/short/_assets/img/misc/section-1.jpg" alt="" class="img">
                                    </div>

                                    <img 
                                        src="templates/wedding-7/short/_assets/img/decoration/leaf-top-right-1.png" 
                                        alt="" 
                                        class="decoration" 
                                        id="section-1-img-wrapper-decoration-1"
                                        data-aos="fade-down-left" data-aos-duration="1200">
                                    <img 
                                        src="templates/wedding-7/short/_assets/img/decoration/branchy.png" 
                                        alt="" 
                                        class="decoration" 
                                        id="section-1-img-wrapper-decoration-2"
                                        data-aos="fade-up-right" data-aos-duration="1200">
                                </div>
                            </div>
                            <div class="col-md pl-lg-10">
                                <h6 class="mb-6">Assalamu’alaikum Warahmatullahi Wabarakatuh</h6>
                                <h6 class="text-height-2 mb-6">
                                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Massa nunc ipsum amet ipsum nibh enim massa purus. Tellus nisl nisl faucibus donec tempor mauris sed eget. Tincidunt enim, laoreet erat vivamus dignissim sit. Curabitur id consectetur sed nisl. Mauris cras tempor nulla imperdiet in eu, blandit arcu urna. Tellus consequat sapien pellentesque semper euismod vitae libero. Enim lacinia quis etiam proin congue nec id neque.
                                </h6>
                                <h6 class="text-height-2 mb-10">
                                    Kami berterima kasih sebesar-besarnya apabila Bapak/Ibu, Saudara/i berkenan hadir untuk memberikan doa restu untuk kedua mempelai.
                                </h6>
                                <h6 class="mb-6">Wassalamu’alaikum Warahmatullahi Wabarakatuh.</h6>

                                <div class="row">
                                    <div class="col-lg-6 mb-6">
                                        <div class="row align-items-center">
                                            <div class="col-auto"><img src="templates/wedding-7/short/_assets/img/icons/calendar.svg" class="w-2rem" alt=""></div>
                                            <div class="col">
                                                <div class="text-spacing-default mb-1">HARI DAN TANGGAL</div>
                                                <div class="fw-light">Minggu, 30 Mei 2021</div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-lg-6 mb-6">
                                        <div class="row align-items-center">
                                            <div class="col-auto"><img src="templates/wedding-7/short/_assets/img/icons/clock.svg" class="w-2rem" alt=""></div>
                                            <div class="col">
                                                <div class="text-spacing-default mb-1">WAKTU</div>
                                                <div class="fw-light">07.00 - Selesai</div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-lg-6 mb-6">
                                        <div class="row align-items-center">
                                            <div class="col-auto"><img src="templates/wedding-7/short/_assets/img/icons/pin.svg" class="w-2rem" alt=""></div>
                                            <div class="col">
                                                <div class="text-spacing-default mb-1">HARI DAN TANGGAL</div>
                                                <div class="fw-light">Minggu, 30 Mei 2021</div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </section>
            </div>
            <!-- end of carousel-item-1 -->

            <!-- carousel-item-2 : contains section-2 Rsvp & Messages -->
            <div class="carousel-item">
                <section id="section-2">
                    <div class="container-xxl position-relative overflow-hidden">
                        <div class="row justify-content-center">
                            <div class="col-lg-5 pt-10 py-lg-12">
                                
                                <!-- card form -->
                                <div class="card bg-transparent">
                                    <div class="card-body p-5">
                                        <h3 class="font-type-secondary mb-4">RSVP</h3>
                                        <!-- form ucapan dan doa -->
                                        <form action="core.php" method="POST">
                                            <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
                                            <!-- input nama -->
                                            <div class="mb-5">
                                                <input type="text" class="form-control {% if session.flash_name!=null %} is-invalid {% else %} is-valid {% endif %}" 
                                                    placeholder="Nama lengkap" name="name" value="{% if session.flash_old_name!=null %} {{session.flash_old_name}} {% endif %}">
                                                {% if session.flash_name!=null %}
                                                    <div class="invalid-feedback">
                                                        {{ session.flash_name }}
                                                    </div>
                                                {% endif %}
                                            </div>
                                            <!-- input nomor -->
                                            <div class="mb-5">
                                                <input type="text" class="form-control {% if session.flash_phone!=null %} is-invalid {% else %} is-valid {% endif %}" 
                                                    placeholder="Nomor Hp atau Whatsapp" name="phone" value="{% if session.flash_old_phone!=null %} {{session.flash_old_phone}} {% endif %}">
                                                {% if session.flash_phone!=null %}
                                                    <div class="invalid-feedback">
                                                        {{ session.flash_phone }}
                                                    </div>
                                                {% endif %}
                                            </div>
                                            <!-- input hadir -->
                                            <div class="mb-5">
                                                <div class="form-check mb-2">
                                                    <input class="form-check-input" value="1" type="radio" name="attendance" id="flexRadioDefault1" checked>
                                                    <label class="form-check-label" for="flexRadioDefault1">
                                                        Ya, saya akan hadir
                                                    </label>
                                                </div>
                                                <div class="form-check">
                                                    <input class="form-check-input" value="2" type="radio" name="attendance" id="flexRadioDefault2">
                                                    <label class="form-check-label" for="flexRadioDefault2">
                                                        Tidak, saya tidak bisa hadir
                                                    </label>
                                                </div>
                                            </div>
                                            <!-- input ucapan -->
                                            <div class="mb-5">
                                                <input type="text" name="greeting" id="" placeholder="Tulis pesan dan doa untuk mempelai" 
                                                    value="{% if session.flash_old_greeting!=null %} {{session.flash_old_greeting}} {% endif %}"
                                                    class="form-control {% if session.flash_greeting!=null %} is-invalid {% else %} is-valid {% endif %}">
                                                {% if session.flash_greeting!=null %}
                                                    <div class="invalid-feedback">
                                                        {{ session.flash_greeting }}
                                                    </div>
                                                {% endif %}
                                            </div>
    
                                            <button class="btn btn-primary" type="submit">Kirim Ucapan</button>
                                        </form>
                                        <!-- end of form ucapan dan doa -->
                                    </div>
                                </div>
                                <!-- end of card form -->
                            </div>
                            <div class="col-lg-6 mt-3 mt-lg-0">
                                <div id="section-2-list-group" data-aos="fade-left" data-aos-duration="1200">
                                    {% if datas.read().in('greetings').count() > 0 %}
                                        <ul class="list-group list-group-flush">
                                            {% for data in datas.read().in('greetings').get() %}
                                                <li class="li list-group-item">
                                                    <h5 class="font-bold mb-2">{{ datas.read().in('rsvp').where('id', '==', data.rsvp_id).first().name }}</h5>
                                                    <p class="text-lg font-light mb-3">
                                                        {{ data.greeting }}
                                                    </p>
                                                    <div class="text-dark-500 font-light">{{ datas.read().in('rsvp').where('id', '==', data.rsvp_id).first().created_at | timeago }}</div>
                                                </li>
                                            {% endfor %}
                                        </ul>
                                    {% if datas.read().in('greetings').count() > 0 %}
                                </div>
                            </div>
                        </div>
                    </div>
                </section>
            </div>
            <!-- end of carousel-item-2 -->

            <!-- carousel-item-3 : contains section-3 gallery -->
            <div class="carousel-item">
                <section id="section-3">
                    <div class="container-xxl">
                        <h3 class="font-type-secondary text-center mb-8">Foto Prewedding</h3>

                        <div id="tinyslider-wrapper">
                            <div id="tinyslider-container-gallery">
                                <div class="tinyslider-item">
                                    <img src="templates/wedding-7/short/_assets/img/gallery/1.jpg" alt="">
                                </div>
                                <div class="tinyslider-item">
                                    <img src="templates/wedding-7/short/_assets/img/gallery/2.jpg" alt="">
                                </div>
                                <div class="tinyslider-item">
                                    <img src="templates/wedding-7/short/_assets/img/gallery/2.jpg" alt="">
                                </div>
                            </div>

                            <div id="tinyslider-controls-gallery">
                                <button class="btn btn-primary p-3 rounded-0">
                                    <img src="templates/wedding-7/short/_assets/img/icons/arrow-left.svg" class="w-3rem" alt="">
                                </button>
                                <button class="btn btn-primary p-3 rounded-0">
                                    <img src="templates/wedding-7/short/_assets/img/icons/arrow-right.svg" class="w-3rem" alt="">
                                </button>
                            </div>
                        </div>
                    </div>
                    
                    <img src="templates/wedding-7/short/_assets/img/decoration/leaf-top-left-1.png" alt="" class="decoration" id="section-3-decoration-1" data-aos="fade-down-right" data-aos-duration="1200">
                    <img src="templates/wedding-7/short/_assets/img/decoration/leaf-top-right-1.png" alt="" class="decoration" id="section-3-decoration-2" data-aos="fade-down-left" data-aos-duration="1200">
                </section>
            </div>
            <!-- end of carousel-item-3 -->

            <!-- carousel-item-4 : contains section-4 closing -->
            <div class="carousel-item">
                <section id="section-4">
                    <div class="container text-center">
                       <div class="row justify-content-center">
                           <div class="col-lg-8">
                                <div class="img-wrapper-spouse mx-auto mb-8">
                                    <div class="img-wrapper">
                                        <img src="templates/wedding-7/short/_assets/img/spouse/man-woman.jpg" alt="">
                                    </div>
                                </div>
                    
                                <h6 class="mb-2">
                                    “Lorem ipsum dolor sit amet, consectetur adipiscing elit. Tristique facilisi metus pretium hendrerit feugiat ornare sed nunc, suspendisse. Odio a nunc id purus. Erat diam mattis tempor scelerisque risus. Non, proin sit enim at nulla at.”
                                </h6>
                                <h5 class="my-5">Terimakasih atas doa restunya</h5>
                                <h3 class="font-type-secondary fw-bold">John Doe & Jane Doe</h3>
                           </div>
                       </div>
                    </div>
            
                    <img src="templates/wedding-7/short/_assets/img/decoration/leaf-left-1.png" class="decoration" id="section-4-decoration-1" alt="" data-aos="fade-right" data-aos-duration="1200">
                    <img src="templates/wedding-7/short/_assets/img/decoration/leaf-right-1.png" class="decoration" id="section-4-decoration-2" alt="" data-aos="fade-left" data-aos-duration="1200">
                </section>
            </div>
        </div>
    </div>

    <div id="btn-group-action" class="btn-group btn-group-action">
        <div class="btn-group-action-container">
            <div class="carousel-indicator">
                <button data-bs-target="#carouselExampleFade" data-bs-slide-to="0" class="btn btn-action">
                    <img src="templates/wedding-7/short/_assets/img/icons/home.svg" alt="" class="w-2rem mb-1">
                    <div class="mt-1">Home</div>
                </button>
                <button data-bs-target="#carouselExampleFade" data-bs-slide-to="1" class="btn btn-action">
                    <img src="templates/wedding-7/short/_assets/img/icons/rsvp.svg" alt="" class="w-2rem mb-1">
                    <div class="mt-1">RSVP</div>
                </button>
                <button data-bs-target="#carouselExampleFade" data-bs-slide-to="2" class="btn btn-action">
                    <img src="templates/wedding-7/short/_assets/img/icons/image.svg" alt="" class="w-2rem mb-1">
                    <div class="mt-1">Galeri</div>
                </button>
                <button data-bs-target="#carouselExampleFade" data-bs-slide-to="3" class="btn btn-action">
                    <img src="templates/wedding-7/short/_assets/img/icons/heart.svg" alt="" class="w-2rem mb-1">
                    <div class="mt-1">Quote</div>
                </button>
            </div>
        </div>
    </div>

    <button id="btn-play" class="btn btn-icon btn-icon-page btn-play">
        <i class="ri ri-volume-high"></i>
    </button>

    <audio controls id="audio" class="d-none">
        <source src="templates/wedding-7/short/_assets/music.mp3" type="audio/mpeg">
    </audio>


    <!-- JS -->
    <!-- Bootstrap -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>
    <!-- Aos Animation os scroll -->
    <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
    <!-- Tiny slider -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/tiny-slider/2.9.3/min/tiny-slider.min.js" integrity="sha512-Pkcph1V1x3OJMZd1RJhG4cnsW+rTAT7fp1X2FlYF9+yZjm+zu8BbcpBqw8FpspmFMZcOr29TavH6CUBIz3bzYw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <!-- App -->
    <script src="templates/wedding-7/short/_assets/js/app.js"></script>
</body>
</html>