@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/hollywood.css')}}">

@endpush

@section('content')
<div class="min-vh-100 bg-img bg-img-fixed position-relative"
        style="background-image: url('{{ asset('img/templates/hollywood/bg-01.jpg') }}')">

        <img src="{{ asset('img/templates/hollywood/h2.png') }}" class="leaves-1 position-absolute end-0">
        <img src="{{ asset('img/templates/hollywood/h1.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">
            <div class="text-center d-grid">
                <h1 class="fs-sm-175 fs-62 text-white mb-4 lh-1 text-uppercase f-secondary">Malena</h1>
                <h3
                    class="fs-sm-37 ls-5 bg-golden fs-16 rounded-pill text-white text-center py-3 px-3 text-uppercase m-0 lh-1 fw-400">
                    Mis 15 años</h3>
            </div>
        </div>
    </div>

    <section class="bg-dark pb-4 pt-4">
        <div class="line"></div>
        <div class="container">
            <div class="row">
                <h2 class="date mt-3 fs-28 mb-3 text-white text-center">21 de Abril, 2024</h2>
            </div>
        </div>
        <div class="line text-white"></div>
    </section>

    <section class="bg-light adress py-5 position-relative">
                <img src="{{ asset('img/templates/hollywood/h3.png') }}" class="leaves-3 position-absolute end-0">
        <div class="container py-sm-5">
            <div class="row align-items-center pt-5 pb-5 justify-content-center">
                <div class="col-md-6 column-left text-center">
                    <div class="bg-white rotate-45">
                        <img alt="" src="{{ asset('img/templates/hollywood/salon-01.jpg') }}" />
                    </div>
                </div>
                <div class="col-md-6 column-right text-center">
                    <div class="icon">
                        <img src="{{ asset('img/templates/hollywood/location.svg') }}" width="80" height="80" alt="">
                    </div>
                    <div class="jumbotron">
                        <h2 class="mt-4 mb-2 fs-sm-42 fs-32 f-secondary text-uppercase">City Espacio de Eventos</h2>
                        <p class="fs-sm-21 fs-18 fw-700 text-uppercase">Deán Funes 3750, Córdoba</p>
                        <div class="pb-4 pt-4">
                            <a class="btn py-3 px-5 border-0 rounded-pill bg-red btn-primary btn-large" href="#">VER
                                UBICACIÓN</a>
                        </div>

                        <p class="fs-sm-24 fs-21 fw-700 text-uppercase">Horario: 21:00 hs.</p>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="diary position-relative d-flex align-items-center py-5">
        <img src="{{ asset('img/templates/hollywood/h4.png') }}" class="leaves-3 position-absolute star-0">
        <div class="container ">
            <div class="row text-center">
                <p class="text-white fs-sm-24 fs-21 fw-400 mb-5">"Quiero compartir este día único y especial junto a las
                    personas que me apoyan día a día, <br>
                    y vos sos una de ellas, por eso estas invitado a mi fiesta."
                </p>

                <div class="countdown d-flex justify-content-evenly flex-column flex-sm-row" id="countdown2"></div>


                <div class="pb-4 pt-4 mt-4">
                    <a class="btn py-3 px-5 border-0 rounded-pill bg-red btn-primary btn-large" href="#">AGENDAR
                        FECHA</a>
                </div>


            </div>
        </div>
    </section>

    <div class="bg-golden" style="height: 34px;"></div>

    <section class="bg-red gallery pb-4 pt-4">
        <div class="line"></div>
        <div class="container">
            <div class="row text-center">
                <div class="icon mb-5 mt-3">
                    <img src="{{ asset('img/templates/hollywood/camera.svg') }}" width="80" height="80" alt="">
                </div>
            </div>

            <div class="position-relative mb-5 pb-5">
                <div class="my-slider gap-4 d-flex align-items-center">
                    <div class="bg-white px-3 pt-3">
                        <img src="{{ asset('img/templates/hollywood/gallery-01.jpg') }}" width="100%" class="d-block">
                    </div>
                    <div class="bg-white px-3 pt-3"><img src="{{ asset('img/templates/hollywood/gallery-02.jpg') }}" width="100%" class="d-block">
                    </div>
                    <div class="bg-white px-3 pt-3"><img src="{{ asset('img/templates/hollywood/gallery-03.jpg') }}" width="100%" class="d-block">
                    </div>
                </div>
            </div>
        </div>
        <div class="line"></div>
    </section>

    <section class="soong-book bg-dark position-relative">
        <img src="{{ asset('img/templates/hollywood/h2.png') }}" class="leaves-3 position-absolute bottom-0 end-0">
        <div class="container">
            <div class="row align-items-md-stretch">
                <div class="col-md-12">
                    <div class="h-100 p-5 text-center text-white">
                        <div class="icon mb-5 mt-3">
                            <img src="{{ asset('img/templates/hollywood/music.svg') }}" width="80" height="80" alt="">
                        </div>
                        <h2 class="f-secondary fs-sm-42 fs-32 text-uppercase">¿Qué canciones no pueden faltar?</h2>
                        <p class="fs-sm-21 fs-21 mt-4 mb-5">
                            ¡Ayudame sugiriendo las canciones que pensás que no pueden faltar en la fiesta!
                        </p>

                        <form class="mt-5 d-flex justify-content-center align-items-center">
                            <div class="d-block">
                                <div class="col-sm-4 mb-3 w-100 text-start">
                                    <label class="mb-1 py-2 ps-5 fs-sm-18 fs-21 fw-600">Nombre de la canción*</label>
                                    <input type="text" class="border-1 w-100 fs-sm-18 py-3 px-4 rounded-pill" name="">
                                </div>
                                <div class="col-sm-4 mb-3 w-100 text-start">
                                    <label class="mb-1 py-2 ps-5 fs-sm-18 fs-21 fw-600">Autor*</label>
                                    <input type="text" class="border-1 w-100 fs-sm-18 py-3 px-4 rounded-pill" name="">
                                </div>
                                <div class="col-sm-4 mb-5 w-100 text-start">
                                    <label class="mb-1 py-2 ps-5 fs-sm-18 fs-21 fw-600">Link Spotify, YouTube,
                                        etc.*</label>
                                    <input type="text" class="border-1 w-100 fs-sm-18 py-3 px-4 rounded-pill" name="">
                                </div>
                                <div class="col-sm-8 w-100 text-center">
                                    <button
                                        class="btn py-3 px-5 border-0 rounded-pill bg-red btn-primary btn-large">ENVIAR</button>
                                </div>
                            </div>
                        </form>

                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="dress-code position-relative bg-light py-5">
        <div class="container py-sm-5">
            <div class="row align-items-md-stretch justify-content-center">
                <div class="col-md-6">
                    <div class="h-100 bg-white px-3 py-5 d-grid border text-center">
                        <div class="icon">
                            <img src="{{ asset('img/templates/elegant/dress.svg') }}" width="80" height="80" alt="">
                        </div>
                        <h2 class="mt-4 f-secondary text-uppercase">Dress Code</h2>
                        <p class="fs-sm-21">Una ayuda para tu vestuario. <br></p>
                        <div class="bg-red rounded-pill py-3 p-5">
                            <p class="text-white mb-0 fw-500">ELEGANTE</p>
                        </div>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="h-100 bg-white px-3 py-5 d-grid border text-center">
                        <div class="icon">
                            <img src="{{ asset('img/templates/elegant/instagram.svg') }}" width="80" height="80" alt="">
                        </div>
                        <h2 class="mt-4 f-secondary text-uppercase">Mural de Fotos</h2>
                        <p class="fs-sm-21">Durante la fiesta utiliza
                            el hashtag.
                        </p>
                        <div class="bg-red rounded-pill py-3 p-5">
                            <p class="text-white mb-0 fw-500">#MIS15MALENA</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="gift bg-red position-relative pb-4 pt-4">
        <div class="container">
            <div class="row align-items-md-stretch">
                <div class="col-md-12">
                    <div class="h-100 p-5 text-white text-center">
                        <div class="icon mb-5 mt-3">
                            <img src="{{ asset('img/templates/hollywood/gift.svg') }}" width="80" height="80" alt="">
                        </div>
                        <h2 class="f-secondary fs-sm-42 fs-32 text-uppercase fw-500">Mesa de Regalos</h2>
                        <p class="fs-sm-21 fs-21 mt-4 mb-5 fw-500">
                            Tu presencia es mi mayor regalo, pero si quieres hacerme un regalo <br>
                            puedes hacerlos por estos medios.
                        </p>

                        <div class="col-sm-8 w-100 text-center">
                            <a href="#"
                                class="btn py-3 px-5 border-0 fs-21 rounded-pill bg-dark text-white btn-large">DATOS BANCARIOS</a>
                        </div>

                    </div>
                </div>
            </div>
        </div>
    </section>


    <section id="count-down" class="album position-relative pb-4 pt-4 bg-light align-items-center pt-5 pb-5">
        <img src="{{ asset('img/templates/hollywood/h3.png') }}" class="leaves-2 position-absolute bottom-0 end-0">
        <div class="container py-5">
            <div class="row mt-5 justify-content-center">
                <h2 class="f-secondary text-center fs-sm-42 fs-32 text-uppercase my-4">Álbum Selpix</h2>
                <p class="fs-sm-24 text-center fw-400 fs-21 mb-5">Desde las 18 hs va a estar habilitado el Álbum de Selpix para que vayas<br>
                        subiendo fotos de la previa al cumple.
                </p>
                <div class="d-flex justify-content-evenly flex-column flex-sm-row" id="countdown"></div>

                <div class="pb-4 pt-4 mt-4 text-center">
                    <a class="btn py-3 px-5 border-0 rounded-pill bg-red btn-primary btn-large" href="#">IR AL ÁLBUM</a>
                </div>
            </div>
        </div>
    </section>

    <div style="height: 200px; background-color: #707070;"></div>

    <section class="confirmation bg-dark py-sm-5 position-relative">
        <img src="{{ asset('img/templates/hollywood/h1.png') }}" class="leaves-6 position-absolute start-0">
        <div class="container py-sm-5">
            <div class="icon mb-5 mt-3">
                <img src="{{ asset('img/templates/hollywood/confirmed.svg') }}" height="80" width="80" class="mx-auto d-block">
            </div>

            <form class="py-sm-5 px-4 mb-5">
                <h3 class="fs-sm-42 fs-32  text-uppercase text-center mb-5 f-secondary text-white">Confirmación</h3>
                <p class="fs-sm-21 fs-21 mb-5 text-center text-white">Para poder participar de todo esto, es necesario que confirmes tu asistencia cuanto antes.<br>
                    La fecha límite es el 20 de Octubre del 2024.<br>
                    Completá 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 text-white">
                                <input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault1">
                                <label class="form-check-label fs-sm-18 f-terciary" for="flexRadioDefault1">Sí! Confirmo</label>
                            </div>
                            <div class="form-check text-white">
                                <input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault2">
                                <label class="form-check-label fs-sm-18 f-terciary" for="flexRadioDefault2">No puedo :(</label>
                            </div>
                        </div>

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



    
	<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-62 fs-48 lh-1"><p class="rounded-pill d-flex align-items-center justify-content-center fs-sm-42 text-white f-secondary mb-0">' + days + '</p><span class="fs-24 text-uppercase text-center fw-700 fs-sm-18 mt-3 d-block pt-3">Días</span>&nbsp;</div>' +
        '<div class="fs-sm-62 fs-48 lh-1"><p class="rounded-pill d-flex align-items-center justify-content-center fs-sm-42 text-white f-secondary mb-0">' + hours + '</p><span class="fs-24 text-uppercase text-center fw-700 fs-sm-18 mt-3 d-block pt-3">Horas</span>&nbsp;</div>' +
        '<div class="fs-sm-62 fs-48 lh-1"><p class="rounded-pill d-flex align-items-center justify-content-center fs-sm-42 text-white f-secondary mb-0">' + minutes + '</p><span class="fs-24 text-uppercase text-center fw-700 fs-sm-18 mt-3 d-block pt-3">Min</span>&nbsp;</div>' +
        '<div class="fs-sm-62 fs-48 lh-1"><p class="rounded-pill d-flex align-items-center justify-content-center fs-sm-42 text-white f-secondary mb-0">' + seconds + '</p><span class="fs-24 text-uppercase text-center fw-700 fs-sm-18 mt-3 d-block pt-3">Seg</span>&nbsp;</div>';


        // If the count down is finished, write some text
        if (distance < 0) {
            clearInterval(x);
            document.getElementById("countdown").innerHTML = "EXPIRED";
            }

        
          // Display the result in the element with id="demo"
          document.getElementById("countdown2").innerHTML =
        '<div class="fs-sm-62 fs-48 lh-1"><p class="rounded-pill d-flex align-items-center justify-content-center text-white fs-sm-72 fs-62 f-secondary mb-0">' + days + '</p><span class="text-white fs-sm-24 fw-700 fs-24 text-uppercase text-center mt-3 d-block pt-3">Días</span>&nbsp;</div>' +
        '<div class="fs-sm-62 fs-48 lh-1"><p class="rounded-pill d-flex align-items-center justify-content-center text-white fs-sm-72 fs-62 f-secondary mb-0">' + hours + '</p><span class="text-white fs-sm-24 fw-700 fs-24 text-uppercase text-center mt-3 d-block pt-3">Horas</span>&nbsp;</div>' +
        '<div class="fs-sm-62 fs-48 lh-1"><p class="rounded-pill d-flex align-items-center justify-content-center text-white fs-sm-72 fs-62 f-secondary mb-0">' + minutes + '</p><span class="text-white fs-sm-24 fw-700 fs-24 text-uppercase text-center mt-3 d-block pt-3">Min</span>&nbsp;</div>' +
        '<div class="fs-sm-62 fs-48 lh-1"><p class="rounded-pill d-flex align-items-center justify-content-center text-white fs-sm-72 fs-62 f-secondary mb-0">' + seconds + '</p><span class="text-white fs-sm-24 fw-700 fs-24 text-uppercase text-center mt-3 d-block pt-3">Seg</span>&nbsp;</div>';


        // If the count down is finished, write some text
        if (distance < 0) {
            clearInterval(x);
            document.getElementById("countdown2").innerHTML = "EXPIRED";
            }

        }, 1000);
    </script>
@endsection