@extends('layouts.invitation')
@section('title', $invitation->title)

@push('styles')

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tiny-slider/2.9.4/tiny-slider.css">
<!--[if (lt IE 9)]><script src="https://cdnjs.cloudflare.com/ajax/libs/tiny-slider/2.9.4/min/tiny-slider.helper.ie8.js"></script><![endif]-->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fancyapps/ui@5.0/dist/fancybox/fancybox.css"/>
<link rel="stylesheet" href="{{asset('templates/css/aqua.css')}}">

@endpush

@section('content')
    <div class="min-vh-100 bg-img bg-img-fixed position-relative" style="background-image: url('{{ asset('img/templates/aqua/cover.jpg') }}')">
        <img src="{{ asset('img/templates/aqua/hojas-1.png') }}" class="leaves-1 position-absolute top-0 end-0">
        <img src="{{ asset('img/templates/aqua/hojas-2.png') }}" class="leaves-2 position-absolute start-0 bottom-0">
        <div class="cut-1 position-absolute bottom-0 start-0 w-100"></div>
        <div class="w-100 min-vh-100 d-flex flex-column align-items-center justify-content-center bg-black bg-opacity-50">
            <h1 class="fs-sm-175 fw-700 fs-62 text-white mb-4 lh-1">Rocío</h1>
            <h3 class="fs-sm-42 ls-5 fs-32 text-white text-uppercase m-0 lh-1 fw-700">Mis 15 años</h3>
            <div class="py-5 my-5">
                <span class="bg-green-light py-3 px-4 lh-1 rounded-3 d-inline-block text-white fs-sm-36 fw-700">19.09.2022</span>
            </div>
        </div>
    </div>

    <section id="count-down" class="text-center py-sm-5 my-5">
        <div class="container py-5">
            <div class="d-flex justify-content-evenly" id="countdown"></div>

            <p class="text-center mt-5 pt-sm-5"><a class="border-0 bg-green-light d-inline-block text-white rounded-4 px-4 py-3 lh-1 fs-sm-21 fs-18 fw-700 text-uppercase">Agendar la fecha</a></p>
        </div>
    </section>
    <div class="bg-green-light-2 py-3"></div>

    <section id="phrase" class="bg-green-dark text-center py-5 position-relative">
        <img src="{{ asset('img/templates/aqua/hojas-6.png') }}" class="leaves-3 position-absolute end-0">
        <div class="container text-center fs-2 text-white">
            <div class="px-4 px-sm-0">"Quiero compartir este día único y especial junto a las personas que me apoyan día a día, y vos sos una de ellas, por eso estas invitado a mi fiesta."</div>
        </div>
    </section>

    <section id="place" class="py-sm-5 pt-5 my-sm-5 mt-5">
        <div class="container text-center my-4">
            <img src="{{ asset('img/templates/aqua/marker.svg') }}" width="70" class="mb-5">

            <h4 class="fs-sm-42 fs-28 ls-2 fw-700 text-uppercase">BRISAS DEL PLATA</h4>
            <p class="fs-sm-21 fs-18 fw-300 text-uppercase ls-2 fw-600">ACC, AV. DR. TRISTÁN ACHÁVAL RODRÍGUEZ 1353, C1107 CABA</p>
            <span class="fs-sm-42 fs-28 fw-700">21:00 hs</span>


            <div class="ratio ratio-4x3 rounded-4 my-5 bg-img mx-auto img-place" style="background-image: url('{{ asset('img/templates/aqua/place.jpeg') }}')"></div>
            <a href="#" class="border-0 bg-green-light d-inline-block text-white rounded-4 px-4 py-3 lh-1 fs-sm-21 fs-18 fw-700 text-uppercase" target="_blank">Ver ubicación</a>
        </div>
    </section>

    <div class="cut-2"></div>
    <section id="photos" class="bg-green py-5 position-relative">
        <img src="{{ asset('img/templates/aqua/hojas-3.png') }}" class="leaves-4 position-absolute start-0 bottom-0">
        <div class="container py-sm-5 pb-5">
            <img src="{{ asset('img/templates/aqua/camera.svg') }}" width="100" class="my-5 mx-auto d-block">
            <div class="position-relative pt-5">
                <div class="my-slider d-flex align-items-center">
                    <div class="h-100"><img src="{{ asset('img/templates/aqua/carrousel-1.jpg') }}" class="img-fluid d-block rounded-5"></div>
                    <div class="h-100"><img src="{{ asset('img/templates/aqua/carrousel-2.jpg') }}" class="img-fluid d-block rounded-5"></div>
                    <div class="h-100"><img src="{{ asset('img/templates/aqua/carrousel-3.jpg') }}" class="img-fluid d-block rounded-5"></div>
                </div>
            </div>
        </div>
    </section>
    <div class="cut-3"></div>

    <section id="songs" class="pt-5 pt-sm-0">
        <div class="container py-sm-5">
            <img src="{{ asset('img/templates/aqua/music.svg') }}" width="100" class="my-5 mx-auto d-block">
            <h3 class="fs-sm-32 fs-21 text-uppercase fw-700 ls-3 text-center mb-5">¿Qué canciones no pueden faltar?</h3>
            <div class="row justify-content-center mb-5">
                <div class="col-sm-6">
                    <p class="fs-sm-21 fs-18 text-center">¡Ayudame sugiriendo las canciones que pensás que no pueden faltar en la fiesta!</p>
                </div>
            </div>

            <form class="mt-4">
                <div class="row justify-content-center">
                    <div class="col-sm-4 mb-3">
                        <label class="mb-1 ps-3 fs-sm-18 fs-14 fw-600">Nombre de la canción*</label>
                        <input type="text" class="bg-green-light-2 border-0 w-100 fs-sm-18 text-white py-3 px-4 rounded-pill" name="">
                    </div>
                    <div class="col-sm-4 mb-5">
                        <label class="mb-1 ps-3 fs-sm-18 fs-14 fw-600">Autor*</label>
                        <input type="text" class="bg-green-light-2 border-0 w-100 fs-sm-18 text-white py-3 px-4 rounded-pill" name="">
                    </div>
                    <div class="col-sm-8 text-center">
                        <button class="border-0 bg-green-light d-inline-block text-white rounded-4 px-5 py-3 lh-1 fs-sm-21 fs-18 fw-700 text-uppercase">Enviar</button>
                    </div>
                </div>
            </form>
        </div>
    </section>

    <section id="theme" class="text-center py-5 position-relative">
        <img src="{{ asset('img/templates/aqua/hojas-4.png') }}" class="leaves-5 position-absolute end-0 bottom-0">
        <div class="container py-5 text-center">
            <div class="row justify-content-evenly">
                <div class="col-sm-5 mb-5 mb-sm-0">
                    <div class="p-5 border border-4 border-green rounded-5">
                        <img src="{{ asset('img/templates/aqua/dress.svg') }}" height="82" width="96" class="mb-5 mt-4">
                        <h4 class="fs-sm-32 fs-21 text-uppercase fw-700">Dress code</h4>
                        <p class="fs-sm-24 fs-18 mb-4">Una ayuda para tu vestuario.</p>
                        <span class="bg-green-light-2 fs-sm-32 fs-21 fw-700 text-uppercase px-5 d-inline-block py-3 lh-1 rounded-pill mb-5">Elegante Sport</span>
                        <a data-fancybox href="img/templates/aqua/example.webp" class="border-0 bg-green-light d-inline-block text-white rounded-4 px-5 py-3 lh-1 fs-sm-21 fs-18 fw-700 text-uppercase">Ver ejemplo</a>
                    </div>
                </div>
                <div class="col-sm-5">
                    <div class="p-5 border border-4 border-green rounded-5">
                        <img src="{{ asset('img/templates/aqua/instagram.svg') }}" height="82" class="mb-5 mt-4">
                        <h4 class="fs-sm-32 fs-21 text-uppercase fw-700">Mural de fotos</h4>
                        <p class="fs-sm-24 fs-18 mb-4">Durante la fiesta utiliza el hashtag.</p>
                        <span class="bg-green-light-2 fs-sm-32 fs-21 fw-700 text-uppercase px-5 d-inline-block py-3 lh-1 rounded-pill mb-5">#MIS15ROCIO</span>
                        <a data-fancybox href="img/templates/aqua/example.webp" class="border-0 bg-green-light d-inline-block text-white rounded-4 px-5 py-3 lh-1 fs-sm-21 fs-18 fw-700 text-uppercase">Ver mural</a>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <div class="cut-4"></div>
    <section id="gifts" class="bg-green text-center py-5">
        <div class="container py-5">
            <img src="{{ asset('img/templates/aqua/gift.svg') }}" width="110" class="mb-5 mt-4">
            <h3 class="fs-sm-42 fs-28 text-uppercase fw-700 text-white mb-5">Mesa de regalos</h3>
            <div class="row justify-content-center mb-5 pb-4">
                <div class="col-sm-9">
                    <p class="fs-sm-21 fs-18 text-white mb-4">Tu presencia es mi mayor regalo, pero si quieres hacerme un regalo puedes hacerlos por estos medios.</p>
                </div>
            </div>

            <div class="d-flex justify-content-center">
                <div class="border border-4 rounded-3 border-white p-2">
                    <ul class="nav nav-pills" id="pills-tab" role="tablist">
                        <li class="nav-item" role="presentation">
                            <button class="nav-link px-sm-5 px-4 fs-sm-18 text-uppercase rounded-3 fw-600 active" id="pills-home-tab" data-bs-toggle="pill" data-bs-target="#pills-info" type="button" role="tab" aria-controls="pills-info" aria-selected="true">Ver datos</button>
                        </li>
                        <li class="nav-item" role="presentation">
                            <button class="nav-link px-sm-5 px-4 fs-sm-18 text-uppercase rounded-3 fw-600" id="pills-profile-tab" data-bs-toggle="pill" data-bs-target="#pills-list" type="button" role="tab" aria-controls="pills-list" aria-selected="false">Ver lista</button>
                        </li>
                    </ul>
                </div>
            </div>

            <div class="tab-content">
                <div class="tab-pane fade show active" id="pills-info" role="tabpanel" aria-labelledby="pills-info-tab" tabindex="0">
                    <div class="p-4 text-center fs-sm-16 fw-500 text-white">
                        TITULAR: Matías Nicolás Sanchez<br>
                        CBU: 1430001713011714940016<br>
                        ALIAS: TUERCA.TRUCO.MANIJA<br>
                    </div>
                </div>
            </div>

            <div class="tab-content mt-4">
                <div class="tab-pane fade" id="pills-list" role="tabpanel" aria-labelledby="pills-list-tab" tabindex="0">
                    <div class="px-5 position-relative">
                        <div class="my-slider-2">
                            <div class="h-100">
                                <div class="bg-white p-3">
                                    <img src="{{ asset('img/templates/aqua/product-1.jpg') }}" class="img-fluid d-block mb-3">
                                    <h3 class="fs-sm-18 fw-700 text-uppercase">Mochila con piercings</h3>
                                    <p class="ellipsis-2" style="min-height: 48px;">Mochila de material deportivo con bolsillo frontal.</p>
                                    <h4 class="fs-sm-28 fw-500 mb-4">$ 9.240</h4>
                                    <a href="#" class="d-inline-block border border-2 border-dark text-dark px-5 py-3 text-uppercase fs-sm-14 fw-600 rounded-pill">Regalar</a>
                                </div>
                            </div>
                            <div class="h-100">
                                <div class="bg-white p-3">
                                    <img src="{{ asset('img/templates/aqua/product-2.jpg') }}" class="img-fluid d-block mb-3">
                                    <h3 class="fs-sm-18 fw-700 text-uppercase">Auriculares CON peluche</h3>
                                    <p class="ellipsis-2" style="min-height: 48px;">Auriculares vincha con peluche</p>
                                    <h4 class="fs-sm-28 fw-500 mb-4">$2.415</h4>
                                    <a href="#" class="d-inline-block border border-2 border-dark text-dark px-5 py-3 text-uppercase fs-sm-14 fw-600 rounded-pill">Regalar</a>
                                </div>
                            </div>
                            <div class="h-100">
                                <div class="bg-white p-3">
                                    <img src="{{ asset('img/templates/aqua/product-3.jpg') }}" class="img-fluid d-block mb-3">
                                    <h3 class="fs-sm-18 fw-700 text-uppercase">Case de celular</h3>
                                    <p class="ellipsis-2" style="min-height: 48px;">Case de celular con correa desmontable con diseño.</p>
                                    <h4 class="fs-sm-28 fw-500 mb-4">$1.190</h4>
                                    <a href="#" class="d-inline-block border border-2 border-dark text-dark px-5 py-3 text-uppercase fs-sm-14 fw-600 rounded-pill">Regalar</a>
                                </div>
                            </div>
                            <div class="h-100">
                                <div class="bg-white p-3">
                                    <img src="{{ asset('img/templates/aqua/product-4.jpg') }}" class="img-fluid d-block mb-3">
                                    <h3 class="fs-sm-18 fw-700 text-uppercase">Set Planchita Y Secador</h3>
                                    <p class="ellipsis-2" style="min-height: 48px;">Philips</p>
                                    <h4 class="fs-sm-28 fw-500 mb-4">$22.000</h4>
                                    <a href="#" class="d-inline-block border border-2 border-dark text-dark px-5 py-3 text-uppercase fs-sm-14 fw-600 rounded-pill">Regalar</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <div class="cut-5"></div>

    <section id="confirmation" class="py-sm-5 position-relative">
        <img src="{{ asset('img/templates/aqua/hojas-5.png') }}" class="leaves-6 position-absolute end-0 bottom-0">
        <div class="container py-sm-5">
            <img src="{{ asset('img/templates/aqua/user.svg') }}" height="90" class="mb-5 mt-4 mx-auto d-block">
            <form class="py-sm-5 px-4 mb-5">
                <h3 class="fs-sm-42 fs-28  text-uppercase fw-600 text-center mb-5">Confirmación</h3>
                <p class="fs-sm-21 fs-18 mb-5 text-center">Para poder participar de todo esto, es necesario que confirmes tu asistencia cuanto antes.<br>La fecha límite es el 20 de Marzo del 2023.<br>Completa el siguiente formulario para confirmar tu asistencia.</p>

                <div class="row justify-content-center">
                    <div class="col-sm-6">
                        <div class="d-flex justify-content-center mb-4 fs-sm-24 fs-18">
                            <div class="form-check me-3">
                                <input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault1">
                                <label class="form-check-label" for="flexRadioDefault1">Sí! Confirmo</label>
                            </div>
                            <div class="form-check">
                                <input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault2">
                                <label class="form-check-label" for="flexRadioDefault2">No puedo :(</label>
                            </div>
                        </div>

                        <input type="text" class="form-control bg-green-light-2 form-control-lg py-3 fs-sm-24 fs-18 px-4 border-0 rounded-pill mb-3" name="" placeholder="Nombre completo">
                        <textarea class="form-control bg-green-light-2 form-control-lg fs-sm-24 fs-18 rounded-5 border-0 p-4 mb-3" rows="4" placeholder="Ingrese algún dato importante..."></textarea>
                        <button class="border-0 bg-green-light d-inline-block text-white rounded-4 px-5 py-3 lh-1 fs-sm-21 fs-18 fw-700 text-uppercase mx-auto d-block">Confirmar</button>
                    </div>
                </div>
            </form>
        </div>
    </section>

    <footer class="footer-tempaltes py-5 px-3 text-white d-flex align-items-center justify-content-center">
        Invitación creada con <img src="{{ asset('img/logo-w.png') }}" width="120" class="ms-2">
    </footer>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
    
    <script src="https://cdn.jsdelivr.net/npm/@fancyapps/ui@5.0/dist/fancybox/fancybox.umd.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/tiny-slider/2.9.2/min/tiny-slider.js"></script>

    <script type="text/javascript">
        // Set the date we're counting down to
        var countDownDate = new Date("Jan 5, 2025 15:37:25").getTime();

        // Update the count down every 1 second
        var x = setInterval(function() {

        // Get today's date and time
        var now = new Date().getTime();

        // Find the distance between now and the count down date
        var distance = countDownDate - now;

        // Time calculations for days, hours, minutes and seconds
        var days = Math.floor(distance / (1000 * 60 * 60 * 24));
        var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
        var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
        var seconds = Math.floor((distance % (1000 * 60)) / 1000);

        // Display the result in the element with id="demo"
        document.getElementById("countdown").innerHTML = '<div class="fs-sm-84 fs-48 fw-700 lh-1 text-gold"><span class="fs-sm-28 fs-21 fw-600 text-uppercase text-dark">Días</span><br>' + days + '</div><div class="fs-sm-84 fs-48 fw-700 lh-1 text-gold"><span class="fs-sm-28 fs-21 fw-600 text-uppercase text-dark">Hrs</span><br>' + hours + '</div><div class="fs-sm-84 fs-48 fw-700 lh-1 text-gold"><span class="fs-sm-28 fs-21 fw-600 text-uppercase text-dark">Min</span><br>' + minutes + '</div><div class="fs-sm-84 fs-48 fw-700 lh-1 text-gold"><span class="fs-sm-28 fs-21 fw-600 text-uppercase text-dark">Seg</span><br>' + seconds + '</div>';

        // If the count down is finished, write some text
        if (distance < 0) {
            clearInterval(x);
            document.getElementById("countdown").innerHTML = "EXPIRED";
            }
        }, 1000);
    </script>
    
    <script type="module">
        if ( $('.slider-events').length > 0 ) {
            var slider = tns({
                container: '.slider-events',
                items: 1,
                gutter: 30,
                controlsText: ['', ''],
                nav: false,
                autoplayButtonOutput: false,
                mouseDrag: true,
                slideBy: 1,
                autoplay: true,
                items: 1,
                responsive: {
                    640: {
                        items: 2
                    },
                    900: {
                        items: 3
                    }
                }
            });
        }

        if ( $('.my-slider').length > 0 ) {
            var slider = tns({
                container: '.my-slider',
                items: 1,
                gutter: 30,
                controlsText: ['', ''],
                nav: false,
                autoplayButtonOutput: false,
                mouseDrag: true,
                slideBy: 1,
                autoplay: true,
                items: 1,
                responsive: {
                    640: {
                        items: 2
                    },
                    900: {
                        items: 3
                    }
                }
            });
        }

        if ( $('.my-slider-2').length > 0 ) {
            var slider2 = tns({
                container: '.my-slider-2',
                items: 1,
                gutter: 30,
                controlsText: ['', ''],
                nav: false,
                autoplayButtonOutput: false,
                mouseDrag: true,
                slideBy: 1,
                autoplay: true,
                items: 1,
                responsive: {
                    640: {
                        items: 2
                    },
                    900: {
                        items: 4
                    }
                }
            });
        }
    </script>
@endsection