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

@endpush

@section('content')
    <div class="min-vh-100 bg-img bg-img-fixed position-relative"
        style="background-image: url('{{ asset('img/templates/travel/bg-principal.jpg') }}')">
        <img src="{{ asset('img/templates/travel/TRAVEL.png') }}" class="leaves-1 position-absolute">
        <img src="{{ asset('img/templates/travel/TRAVEL.png') }}" class="leaves-2 position-absolute">
        <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 text-center">
            <div>
                <h1 class="fs-sm-175 fw-500 fs-62 text-white mb-4 lh-1">Nicole</h1>
                <a
                    class="fs-sm-26 bg-primary fs-26 text-white text-center py-3 px-5 text-uppercase m-0 lh-1 fw-400 rounded-pill d-inline-block" href="#">
                    Mis 15 años</a>
            </div>
        </div>
    </div>

    <section class="bg-primary py-1">
        <div class="line"></div>
        <div class="container">
            <div class="row">
                <h2 class="date py-4 text-white text-center m-0">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/travel/salon-01.jpg') }}" />
                    </div>
                </div>
                <div class="col-md-6 column-right text-center">
                    <div class="icon">
                        <img src="{{ asset('img/templates/travel/location.svg') }}" width="80" height="80" alt="">
                    </div>
                    <div class="jumbotron">
                        <h2 class="fw-500 mt-4 mb-4 c-secondary text-uppercase">City Espacio de Eventos</h2>
                        <p class="fs-sm-21 fs-20 fw-700 lh-1">Deán Funes 3750, Córdoba</p>
                        <div class="pb-4 pt-4">
                            <a class="btn fs-sm-21 py-3 px-5 border-0 rounded-0 bg-primary btn-primary btn-large rounded-pill" 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="bg-gray d-flex align-items-center py-5 position-relative">
        <img src="{{ asset('img/templates/travel/TRAVEL.png') }}" class="leaves-3 position-absolute">
        <img src="{{ asset('img/templates/travel/TRAVEL.png') }}" class="leaves-4 position-absolute">
        <div class="container py-5">
            <div class="row text-center">
                <p class="text-white fs-sm-21 fw-400 mb-3">"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 col-6">
                        <p class="text-white fs-sm-48 lh-1 fw-700">103</p>
                        <p class="c-secondary-light fs-sm-21 text-uppercase">Días</p>
                    </div>
                    <div class="col-md-3 col-6">
                        <p class="text-white fs-sm-48 lh-1 fw-700">20</p>
                        <p class="c-secondary-light fs-sm-21 text-uppercase">Hrs</p>
                    </div>
                    <div class="col-md-3 col-6">
                        <p class="text-white fs-sm-48 lh-1 fw-700">43</p>
                        <p class="c-secondary-light fs-sm-21 text-uppercase">Min</p>
                    </div>
                    <div class="col-md-3 col-6">
                        <p class="text-white fs-sm-48 lh-1 fw-700">20</p>
                        <p class="c-secondary-light fs-sm-21 text-uppercase">Seg</p>
                    </div>
                </div>

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


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

    <section class="bg-gray-light gallery pb-4">
        <div class="pb-5 bg-secondary mb-5"></div>
        <div class="container">
            <div class="row text-center">
                <div class="icon mb-5 mt-3">
                    <img src="{{ asset('img/templates/travel/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/travel/gallery-01.jpg') }}" width="100%" class="d-block">
                    </div>
                    <div class="bg-white"><img src="{{ asset('img/templates/travel/gallery-02.jpg') }}" width="100%" class="d-block">
                    </div>
                    <div class="bg-white"><img src="{{ asset('img/templates/travel/gallery-03.jpg') }}" width="100%" class="d-block">
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="soong-book position-relative bg-secondary text-white">
        <div class="line"></div>
        <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/travel/music.svg') }}" width="80" height="80" alt="">
                        </div>
                        <h2 class="text-uppercase fs-sm-32">¿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 text-dark">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 text-dark">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 text-dark">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-primary btn-primary btn-large fs-sm-26">ENVIAR</button>
                                </div>
                            </div>
                        </form>

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

    <section class="dress-code position-relative bg-gray-light py-4">
        <img src="{{ asset('img/templates/travel/TRAVEL.png') }}" class="leaves-6 position-absolute">
        <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/travel/dress.svg') }}" width="80" height="80" alt="">
                        </div>
                        <h2 class="mt-4 text-uppercase">Dress Code</h2>
                        <p class="text fs-sm-16">Una ayuda para tu vestuario. <br></p>
                        <a class="text-white mb-0 fw-500 bg-secondary rounded-pill py-3 d-block" href="#">ELEGANTE</a>
                    </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/travel/instagram.svg') }}" width="80" height="80" alt="">
                        </div>
                        <h2 class="mt-4 text-uppercase">Mural de Fotos</h2>
                        <p class="text fs-sm-16">Durante la fiesta utiliza el hashtag.
                        </p>
                        <a class="text-white mb-0 fw-500 bg-secondary rounded-pill py-3 d-block" href="#">#MIS15MALENA</a>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="gift py-4 bg-primary">
        <div class="line"></div>
        <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/travel/gift.svg') }}" width="80" height="80" alt="">
                        </div>
                        <h2 class="text-uppercase fs-sm-32">Mesa de Regalos</h2>
                        <p class="fs-sm-21 fs-32 mt-4 mb-5 fw-300">
                            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-pill bg-secondary text-white btn-large fs-sm-21">DATOS BANCARIOS</a>
                        </div>

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

    <!-- 
    <section class="album position-relative pb-4 pt-4 bg-gray-light align-items-center pt-5 pb-5">
        <img src="{{ asset('img/templates/travel/TRAVEL.png') }}" class="leaves-8 position-absolute start-0">
        <div class="container">
            <div class="row text-center justify-content-center">
                <h2 class="text-uppercase  my-4">Álbum Selpix</h2>
                <p class=" 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-primary d-flex justify-content-center align-items-center rounded-pill">
                            <p class="m-0 fs-sm-42 fw-800">103</p>
                        </div>
                        <p class=" 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-primary d-flex justify-content-center align-items-center rounded-pill">
                            <p class="m-0 fs-sm-42 fw-800">20</p>
                        </div>
                        <p class=" 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-primary d-flex justify-content-center align-items-center rounded-pill">
                            <p class="m-0 fs-sm-42 fw-800">43</p>
                        </div>
                        <p class=" 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-primary d-flex justify-content-center align-items-center rounded-pill">
                            <p class="m-0 fs-sm-42 fw-800">20</p>
                        </div>
                        <p class=" 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 btn-primary btn-large rounded-pill bg-secondary" href="#">IR AL ÁLBUM</a>
                </div>


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

    <section class="confirmation position-relative bg-gray-light">
        <div class="py-5 bg-gray"></div>
        <img src="{{ asset('img/templates/travel/TRAVEL.png') }}" class="leaves-9 position-absolute">
        <img src="{{ asset('img/templates/travel/TRAVEL.png') }}" class="leaves-10 position-absolute">
        <div class="container py-sm-5">
            <div class="icon mb-3 mt-5">
                <img src="{{ asset('img/templates/travel/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-32 fs-28  text-uppercase fw-600 text-center mb-5 c-secondary ">Confirmación</h3>
                <p class="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 form-control-lg py-3 fs-sm-18 fs-18 px-4 border-0 mb-3 rounded-5 text-dark" name="" placeholder="Nombre completo">
                        <textarea class="form-control form-control-lg fs-sm-18 fs-18 border-0 p-4 mb-3 rounded-5 text-dark" rows="4" placeholder="Ingrese algún dato importante..."></textarea>
                        <button class="btn border-0 bg-primary d-inline-block px-5 rounded-0 py-3 lh-1 fs-sm-21 fs-18 fw-500 text-uppercase mx-auto d-block rounded-5 text-light">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