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

@section('content')

    <div class="vh-100 bg-img bg-img-fixed" style="background-image: url('{{ asset('img/templates/glam/img-1.jpg') }}')">
        <div class="w-100 h-100 d-flex flex-column align-items-center justify-content-center bg-black bg-opacity-50">
            <h1 class="fs-sm-200 fs-62 f-parisienne text-white mb-4 lh-1">Martina</h1>
            <h3 class="bg-red px-5 py-3 rounded-3 fs-sm-28 fs-21 text-white text-uppercase m-0 lh-1 fw-700">mis 15 años</h3>
        </div>
		</div>
		<div class="bg-pink py-3"></div>

		<section id="date" class="py-5 px-3 fw-600 text-center">
			<p class="my-4 fs-sm-42 fs-21 text-uppercase fw-800">4 de septiembre - 21:30 HS</p>
			<a href="#" class="bg-red px-5 py-3 rounded-3 fs-sm-21 fs-18 text-white text-uppercase m-0 lh-1 mt-4 d-inline-block fw-600">Agendar fecha</a>
		</section>

		<section id="place" class="py-5 bg-light">
			<div class="container my-4">
				<div class="px-3 px-sm-0">
					<div class="row justify-content-between">
						<div class="col-sm-4 px-0">
							<div class="ratio ratio-1x1 rounded-4 bg-img mb-4 mb-sm-0" style="background-image: url({{asset('img/templates/glam/place.jpg')}})"></div>
						</div>
						<div class="col-sm-7 bg-white d-flex align-items-center rounded-4">
							<div class="p-4 text-center flex-fill">
								<img src="{{ asset('img/templates/glam/marker.svg')}}" width="80">
								<h3 class="fs-sm-62 f-parisienne text-red my-4">Dirección</h3>
								<h4 class="fs-sm-21 text-uppercase">Brisas del Plata</h4>
								<p class="fs-sm-14 fw-300 text-uppercase">Acc, Av. Dr. Tristán Achával Rodríguez 1353, CABA</p>
								<a href="#" class="bg-red px-5 py-3 rounded-3 fs-sm-21 text-white text-uppercase m-0 lh-1 mt-4 d-inline-block fw-600">Ver ubicación</a>
							</div>
						</div>
					</div>
				</div>
			</div>
		</section>

		<section class="bg-red bg-img bg-img-fixed text-center py-5" style="background-image: url({{asset('img/templates/glam/fondo-burbujas.png')}});">
			<div class="container py-5">
				<div class="d-flex justify-content-evenly" id="countdown"></div>
			</div>
		</section>

		<section id="photos" class="py-5">
			<div class="container my-4">
				<div class="px-5 position-relative">
					<div class="my-slider d-flex align-items-center">
						<div class="h-100"><img src="{{asset('img/templates/glam/carrousel-1.jpg')}}" class="img-fluid d-block"></div>
						<div class="h-100"><img src="{{asset('img/templates/glam/carrousel-2.jpg')}}" class="img-fluid d-block"></div>
						<div class="h-100"><img src="{{asset('img/templates/glam/carrousel-3.jpg')}}" class="img-fluid d-block"></div>
					</div>
				</div>
			</div>
		</section>

		<div class="bg-pink py-3"></div>
		<section id="gifts" class="bg-red text-center py-5">
			<div class="container py-5">
				<img src="{{asset('img/templates/glam/gift-icon.svg')}}" width="128" class="d-inline-block mb-4">
				<h3 class="fs-sm-62 fs-48 text-white f-parisienne mb-4">Mesa de regalos</h3>
				<div class="row justify-content-center">
					<div class="col-sm-9">
						<p class="fs-sm-21 fs-16 text-white text-uppercase mb-4 ls-2">Tu presencia es mi mayor regalo, pero si quieres hacerme un regalo puedes hacerlo por estos medios.</p>
					</div>
				</div>

				<div class="d-flex justify-content-center">
					<div class="border border-4 border-white rounded-3 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 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 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 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 text-white fs-sm-16 fw-300">
									TITULAR: Matías Nicolás Sanchez<br>
									CBU: 1430001713011714940016<br>
									ALIAS: TUERCA.TRUCO.MANIJA<br>
								</div>
							</div>
						</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/glam/product-1.jpg')}}" class="img-fluid d-block mb-3">
										<h3 class="fs-sm-18 fw-700">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/glam/product-2.jpg')}}" class="img-fluid d-block mb-3">
										<h3 class="fs-sm-18 fw-700">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/glam/product-3.jpg')}}" class="img-fluid d-block mb-3">
										<h3 class="fs-sm-18 fw-700">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/glam/product-4.jpg')}}" class="img-fluid d-block mb-3">
										<h3 class="fs-sm-18 fw-700">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>

		<section id="hashtag" class="bg-white py-5">
			<div class="container py-5 text-center">
				<img src="{{asset('img/templates/glam/instagram-icon.svg')}}" width="128" class="mb-5">

				<div class="bg-light p-sm-5 p-4 mb-5">
					<div class="p-sm-5 py-4">
						<h3 class="fs-sm-32 fs-24 fw-800 text-uppercase mb-5">Durante el cumpleaños utiliza el hashtag</h3>
						<div class="bg-pink text-white text-uppercase fs-sm-32 fs-24 fw-700 py-3 mb-5 rounded-3">#Mis15Martina</div>
						<a href="#" class="d-inline-block py-3 fs-sm-18 rounded-3 px-4 bg-red text-white text-uppercase" target="_blank">Ver en instagram</a>
					</div>
				</div>

				<div class="row justify-content-center pt-5">
					<div class="col-sm-6 pt-5">
						<div class="bg-red p-5 rounded-4 position-relative">
							<div class="ratio ratio-1x1 rounded-circle position-absolute top-0 start-50 bg-pink translate-middle" style="width: 200px;">
								<div class="p-3">
									<div class="ratio ratio-1x1 bg-img rounded-circle" style="background-image: url({{asset('img/templates/glam/profile.jpg')}});"></div>
								</div>
							</div>
							<h3 class="fs-sm-21 text-white pt-5 mt-4 mb-4">@MARTINA</h3>
							<a href="#" class="btn btn-light fs-sm-18 px-4 fw-600 text-uppercase" target="_blank">Ver en instagram</a>
						</div>
					</div>
				</div>
			</div>
		</section>

		<section id="songs" class="bg-img bg-img-fixed" style="background-image: url({{asset('img/templates/glam/dj-1.jpeg')}});">
			<div class="py-5">
				<div class="container py-5 my-5">
					<img src="{{asset('img/templates/glam/music-icon.svg')}}" width="128" class="d-block mx-auto mb-5">
					<h3 class="fs-sm-32 text-center text-white fw-800 text-uppercase mb-3 ls-2">¿Qué canciones no pueden faltar?</h3>
					<p class="fs-sm-18 text-center text-white fw-300 ls-2 text-uppercase">¡Ayúdame sugiriendo las canciones que pensás que no pueden faltar en mi cumple!</p>

					<form class="mt-4">
						<div class="row justify-content-center">
							<div class="col-sm-4 mb-3">
								<label class="fs-sm-14 text-white mb-2">Nombre de la canción*</label>
								<input type="text" class="bg-pink rounded-3 text-dark px-3 py-2 border-0 w-100" name="">
							</div>
							<div class="col-sm-4 mb-3">
								<label class="fs-sm-14 text-white mb-2">Autor*</label>
								<input type="text" class="bg-pink rounded-3 text-dark px-3 py-2 border-0 w-100" name="">
							</div>
							<div class="col-sm-8 text-end">
								<button class="btn bg-red rounded-3 text-white fs-sm-18 text-uppercase py-2 px-4 border-0 rounded-0">Enviar</button>
							</div>
						</div>
					</form>
				</div>
			</div>
		</section>

		<div class="bg-pink py-3"></div>
		<section id="theme" class="bg-red bg-img text-center py-5" style="background-image: url({{asset('img/templates/glam/fondo-burbujas.png')}});">
			<div class="container py-5 text-center">
				<img src="{{asset('img/templates/glam/gift-icon.svg')}}" width="128" class="d-inline-block mb-4">
				<h3 class="fs-sm-62 fs-48 f-parisienne text-white mb-3">Código de Vestimenta</h3>
				<p class="fs-sm-32 fw-700 text-white text-uppercase mb-5">Elegante Sport</p>
				<a data-fancybox href="img/templates/glam/example.webp" class="btn btn-light fs-sm-18 px-5 py-3 fw-600 text-uppercase">Ver ejemplo</a>
			</div>
		</section>

		<section id="filter" class="bg-light py-5">
			<div class="container py-5 text-center">
				<div class="bg-white p-sm-5 p-4 mb-5">
					<div class="p-sm-5 py-4">
						<img src="{{asset('img/templates/glam/filter-icon.svg')}}" width="128" class="mb-5">
						<h3 class="fs-sm-62 fs-48 text-red f-parisienne mb-5">Filtro de Instagram</h3>
						<p class="fs-sm-21 mb-5">Te invito a explorar mi filtro exclusivo en Instagram, diseñado especialmente para mis quinces. ¡No olvides de etiquetarme en tus fotos para que podamos  compartir este día especial y crear recuerdos inolvidables juntos.</p>
						<a href="#" class="d-inline-block py-3 fs-sm-18 rounded-3 px-5 bg-red text-white text-uppercase" target="_blank">Ir al filtro</a>
					</div>
				</div>
			</div>
		</section>

		<section class="bg-dark bg-img bg-img-fixed text-center py-5" style="background-image: url({{asset('img/templates/glam/fondo-burbujas-2.png')}});">
			<div class="container text-center fs-sm-42 fs-32 f-parisienne text-white">
				A todos ustedes que estuvieron siempre a mi lado, que llenaron de felicidad mis días, quiero invitarlos a compartir la magia de una noche que sin duda será única e inolvidable.
			</div>
		</section>

		<section id="selpix" class="container py-5 text-center">
			<div class="p-sm-5 p-4 mb-5">
				<div class="p-sm-5 py-4">
					<img src="{{asset('img/templates/glam/selpix-icon.svg')}}" width="128" class="mb-5">
					<h3 class="fs-sm-62 fs-48 text-red f-parisienne mb-5">Álbum Selpix</h3>
					<p class="fs-sm-21 mb-5">¡Me encantaría que formen parte de los recuerdos especiales de mis quinces. Por eso, les comparto este álbum digital donde podrán subir todas las fotos que quieran compartir.<br>
						¡No dejen pasar ninguna oportunidad de capturar sus recuerdos!<br>
					¡Gracias por ser parte de este gran día!</p>
				</div>

				<div class="container py-sm-5">
					<div class="d-flex justify-content-evenly" id="countdown2"></div>
				</div>
			</div>
		</section>

		<div class="bg-pink py-3"></div>
		<section id="confirmation" class="py-sm-5 bg-red">
			<div class="container py-5">
				<form class="py-5 px-4 mb-5">
					<div class="row align-items-center justify-content-between">
						<div class="col-sm-5">
							<h3 class="fs-sm-62 fs-48 f-parisienne text-white mb-5">Confirmación</h3>
							<p class="fs-sm-18 text-white mb-4 mb-sm-0">Para poder participar de todo esto, es necesario que confirmes tu asistencia cuanto antes. La fecha límite es el 20 de Marzo del 2023. Completa el siguiente formulario para confirmar tu asistencia.</p>
						</div>
						<div class="col-sm-6">
							<div class="d-flex mb-3">
								<div class="form-check me-3">
									<input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault1">
									<label class="form-check-label text-white" 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 text-white" for="flexRadioDefault2">No puedo :(</label>
								</div>
							</div>

							<input type="text" class="bg-white text-dark px-3 py-2 border-0 rounded-3 w-100 mb-3" name="" placeholder="Nombre completo">
							<textarea class="w-100 bg-white text-dark border-0 rounded-3 p-3 mb-3" rows="4" placeholder="Ingrese algún dato importante..."></textarea>
							<button class="btn btn-light text-uppercase fw-700 px-5 rounded-3">Enviar</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, 2024 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="text-white fs-sm-62 fs-48 fw-600 lh-1">' + days + '<br><span class="fs-sm-32 fs-24 text-white f-parisienne">Días</span></div><div class="text-white fs-sm-62 fs-48 fw-600 lh-1">' + hours + '<br><span class="fs-sm-32 fs-24 text-white f-parisienne">Horas</span></div><div class="text-white fs-sm-62 fs-48 fw-600 lh-1">' + minutes + '<br><span class="fs-sm-32 fs-24 text-white f-parisienne">Minutos</span></div><div class="text-white fs-sm-62 fs-48 fw-600 lh-1">' + seconds + '<br><span class="fs-sm-32 fs-24 text-white f-parisienne">Segundos</span></div>';


			// Display the result in the element with id="demo"
			document.getElementById("countdown2").innerHTML = '<div><span class="nmbr">' + days + '</span><span class="txt">Días</span></div><div><span class="nmbr">' + hours + '</span><span class="txt">Horas</span></div><div><span class="nmbr">' + minutes + '</span><span class="txt">Minutos</span></div><div><span class="nmbr">' + seconds + '</span><span class="txt">Segundos</span></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">
			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
					}
				}
			});
			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>
    </body>