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

@endpush

@section('content')
    <div class="min-vh-100 bg-img bg-img-fixed position-relative"
        style="background-image: url('{{ asset('img/templates/elegant/bg-principal.jpg') }}')">
        <img src="{{ asset('img/templates/elegant/formas-02.svg') }}" class="leaves-1 position-absolute end-0">
        <img src="{{ asset('img/templates/elegant/formas-01.svg') }}" 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>
                <h1 class="fs-sm-175 fw-700 fs-62 text-white mb-4 lh-1">Nadia</h1>
                <h3
                    class="fs-sm-37 ls-5 bg-golden fs-32 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 mb-3 text-white text-center">21 de Abril, 2023</h2>
            </div>
        </div>
        <div class="line text-white"></div>
    </section>

    <section class="bg-grey adress py-5">
        <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/elegant/salon-01.jpg') }}" />
                    </div>
                </div>
                <div class="col-md-6 column-right text-center">
                    <div class="icon">
                        <img src="{{ asset('img/templates/elegant/location.svg') }}" width="80" height="80" alt="">
                    </div>
                    <div class="jumbotron">
                        <h2 class="fw-700 mt-4 mb-2 titles">City Espacio de Eventos</h2>
                        <p class="fs-sm-21 fs-20 fw-700">Deán Funes 3750, Córdoba</p>
                        <div class="pb-4 pt-4">
                            <a class="btn py-3 px-5 border-0 rounded-0 bg-golden btn-primary btn-large" href="#">VER
                                UBICACIÓN</a>
                        </div>

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


    <section class="diary d-flex align-items-center py-5 position-relative">
        <img src="{{ asset('img/templates/elegant/formas-04.svg') }}" class="leaves-1 position-absolute end-0">
        <img src="{{ asset('img/templates/elegant/formas-03.svg') }}" class="leaves-2 position-absolute start-0">
        <div class="container ">
            <div class="row text-center">
                <p class="text-white fs-sm-24 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="row mt-5 countdown">
                    <div class="col-md-3">
                        <p class="text-white fs-sm-42 fw-700">103</p>
                        <p class="text-white">Días</p>
                    </div>
                    <div class="col-md-3">
                        <p class="text-white fs-sm-42 fw-700">20</p>
                        <p class="text-white">Hrs</p>
                    </div>
                    <div class="col-md-3">
                        <p class="text-white fs-sm-42 fw-700">43</p>
                        <p class="text-white">Min</p>
                    </div>
                    <div class="col-md-3">
                        <p class="text-white fs-sm-42 fw-700">20</p>
                        <p class="text-white">Seg</p>
                    </div>
                </div>

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


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

    <section class="bg-dark 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/elegant/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">
                        <img src="{{ asset('img/templates/elegant/gallery-01.jpg') }}" width="100%" class="d-block">
                    </div>
                    <div class="bg-white"><img src="{{ asset('img/templates/elegant/gallery-02.jpg') }}" width="100%" class="d-block">
                    </div>
                    <div class="bg-white"><img src="{{ asset('img/templates/elegant/gallery-03.jpg') }}" width="100%" class="d-block">
                    </div>
                </div>
            </div>
        </div>
        <div class="line"></div>
    </section>

    <section class="soong-book position-relative">
        <img src="{{ asset('img/templates/elegant/formas-05.svg') }}" class="leaves-1 position-absolute 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">
                        <div class="icon mb-5 mt-3">
                            <img src="{{ asset('img/templates/elegant/music.svg') }}" width="80" height="80" alt="">
                        </div>
                        <h2 class="titles">¿Qué canciones no pueden faltar?</h2>
                        <p class="fs-sm-21 fs-32 mt-4 mb-5 fw-700">
                            ¡Ayudame sugiriendo las canciones que pensás que no pueden faltar en la fiesta!
                        </p>

                        <form class="mt-4 d-flex justify-content-center align-items-center">
                            <div class="d-block">
                                <div class="col-sm-4 mb-3 w-100">
                                    <label class="mb-1 py-3 ps-3 fs-sm-18 fs-14 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">
                                    <label class="mb-1 py-3 ps-3 fs-sm-18 fs-14 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">
                                    <label class="mb-1 py-3 ps-3 fs-sm-18 fs-14 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-0 bg-golden btn-primary btn-large">ENVIAR</button>
                                </div>
                            </div>
                        </form>

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

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

    <section class="gift position-relative pb-4 pt-4">
        <img src="{{ asset('img/templates/elegant/formas-05.svg') }}" class="leaves-1 position-absolute 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">
                        <div class="icon mb-5 mt-3">
                            <img src="{{ asset('img/templates/elegant/gift.svg') }}" width="80" height="80" alt="">
                        </div>
                        <h2 class="titles">Mesa de Regalos</h2>
                        <p class="fs-sm-21 fs-32 mt-4 mb-5 fw-700">
                            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 rounded-0 bg-dark text-white btn-large">DATOS BANCARIOS</a>
                        </div>

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

    <section class="album position-relative pb-4 pt-4 bg-dark align-items-center pt-5 pb-5">
        <div class="line"></div>
        <img src="{{ asset('img/templates/elegant/formas-03.svg') }}" class="leaves-2 position-absolute start-0">
        <div class="container">
            <div class="row text-center justify-content-center">
                <h2 class="titles text-white my-4">Álbum Selpix</h2>
                <p class="text-white fs-sm-24 fw-400 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="row mt-5 countdown">
                    <div class="col-md-3 d-flex flex-column align-items-center">
                        <div class="bg-golden d-flex justify-content-center align-items-center rounded-pill">
                            <p class="text-white fs-sm-42 fw-800">103</p>
                        </div>
                        <p class="text-white text-uppercase text-down fw-700 fs-sm-18 mt-3">Días</p>
                    </div>
                    <div class="col-md-3 d-flex flex-column align-items-center">
                        <div class="bg-golden d-flex justify-content-center align-items-center rounded-pill">
                            <p class="text-white fs-sm-42 fw-800">20</p>
                        </div>
                        <p class="text-white text-uppercase text-down fw-700 fs-sm-18 mt-3">Hrs</p>
                    </div>
                    <div class="col-md-3 d-flex flex-column align-items-center">
                        <div class="bg-golden d-flex justify-content-center align-items-center rounded-pill">
                            <p class="text-white fs-sm-42 fw-800">43</p>
                        </div>
                        <p class="text-white text-uppercase text-down fw-700 fs-sm-18 mt-3">Min</p>
                    </div>
                    <div class="col-md-3 d-flex flex-column align-items-center">
                        <div class="bg-golden d-flex justify-content-center align-items-center rounded-pill">
                            <p class="text-white fs-sm-42 fw-800">20</p>
                        </div>
                        <p class="text-white text-uppercase text-down fw-700 fs-sm-18 mt-3">Seg</p>
                    </div>
                </div>

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


            </div>
        </div>
        <div class="line"></div>
    </section>

    <section class="confirmation py-sm-5 position-relative">
        <img src="{{ asset('img/templates/elegant/formas-05.svg') }}" class="leaves-6 position-absolute end-0">
        <div class="container py-sm-5">
            <div class="icon mb-5 mt-3">
                <img src="{{ asset('img/templates/elegant/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-28  text-uppercase fw-600 text-center mb-5 titles">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 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">
                                <input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault1">
                                <label class="form-check-label fs-sm-21" 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 fs-sm-21" for="flexRadioDefault2">No puedo :(</label>
                            </div>
                        </div>

                        <input type="text" class="form-control bg-dark form-control-lg py-3 fs-sm-18 text-white fs-18 px-4 border-0 mb-3" name="" placeholder="Nombre completo">
                        <textarea class="form-control bg-dark form-control-lg fs-sm-18 text-white fs-18 border-0 p-4 mb-3" rows="4" placeholder="Ingrese algún dato importante..."></textarea>
                        <button class="btn border-0 bg-golden d-inline-block text-white px-5 rounded-0 py-3 lh-1 fs-sm-21 fs-18 fw-500 text-uppercase mx-auto d-block">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>
            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
                    }
                }
            });
    </script>
@endsection