@extends('layouts.invitation')
@php
    $headerTitle = $_title ?? 'César y Maria';
    $headerSubtitle = $_subtitle ?? '¡Nos Casamos!';
    $eventdate = $invitation->event_date ?? now();
    $essentialMusicTitle = $_essentialMusicTitle ?? '¿Qué canciones no pueden faltar?';
    $eventCalendar = $_eventCalendar ?? null;
    $essentialMusicBody = $_essentialMusicBody ?? '¡Ayúdanos sugiriendo las canciones que pensás que no pueden faltar en nuestra boda!';
    $ourHistory = $_ourHistory  ?? "Una propuesta, un Sí y una decisión que tomamos juntos. Nuestro amor ha crecido en nosotros, ha madurado y florecido, a veces sencillo, otras caótico pero siempre maravilloso. Así comienza una nueva etapa en nuestras vidas. Somos aventureros, dedicados, fuertes de carácter; los desafíos que hemos enfrentado nos han ayudado a crecer y madurar; debemos agradecer a esos retos porque con ellos nos hemos dado cuenta que juntos podemos lograr lo que nos proponemos. Tan sólo podemos decir que nuestra vida en estos momentos se encuentra completa y estamos listos para compartir el resto de nuestros días juntos.";
    $ourHistoryTitle = $_ourHistoryTitle  ?? "Nuestra Historia";
    $dressCodeText = $_dressCodeText ?? 'Una ayuda para tu vestuario.';
    $dressCodeName = !empty($dressCodeExample) ? strtoupper($dressCodeExample['name']) : strtoupper('Elegante Sport');
    $dressName = $_dressName?? 'Dress Code Personalizado';
    $dressCodeDescription = $_dressCodeDescription ?? 'Este es un ejemplo de vestimenta';
    $dressDescription = $_dressDescription ?? 'Vestimenta de gala, vestido largo o corto, traje o esmoquin.';
    $isCustom = isset($_isCustomDressCode) && $_isCustomDressCode;
	$customPhraseBackoundUrl = asset('img/templates/chic/cover.jpg');
    $customPhrase = $_customPhrase  ?? "En este día tan especial, celebramos nuestra unión y el amor que nos une, dando inicio a un nuevo capítulo en nuestra historia juntos";
    $headerBackgroundUrl = isset($_backgroundImage) ? Storage::url($_backgroundImage) : asset('img/templates/chic/cover.jpg');
	$instagramProfileBackgroundUrl = asset('img/templates/chic/parent-1.jpg');
    $albumSelpixBodyText = $_selpixBodyText ?? 'Nos encantaría que formen parte de los recuerdos especiales de nuestra boda. Por eso, les compartimos este álbum digital donde podrán subir todas las fotos que deseen compartir. ¡No dejen pasar ninguna oportunidad de capturar sus momentos favoritos! ¡Gracias por ser parte de este día tan especial!';
    $privateTransportationText = $_privateTransportationText ?? 'Para facilitarte el traslado al lugar del evento contamos con un transporte privado. Para este servicio es necesario que confirmes para reservar tu lugar.';
    $godfatherImage = isset($_godfatherImage) ? Storage::url($_godfatherImage) : asset('img/templates/eucalipto/parent-1.jpg');
    $godmotherImage = isset($_godmotherImage) ? Storage::url($_godmotherImage) : asset('img/templates/eucalipto/parent-2.jpg');
	$confirmationMessage = $_confirmationMessage ?? "Para poder unirte a esta celebración, es necesario que confirmes tu asistencia lo antes posible.";
	$greetingHeader = $_greetingHeader ?? '¡Te esperamos!';
	$greetingTitle = $_greetingTitle ?? 'César y Maria';
	$greetingSubtitle = $eventdate->format('d/m/Y');
	$videoHeader = $_videoHeader ?? 'Un viaje de Amor';
	$videoText = $_videoText ?? 'Te invitamos a ver este video especial que captura los momentos más hermosos juntos.';
	$videoUrl = $_videoUrl ?? 'videoUrl';
	$instagramFilterText = isset($_instagramFilterText) ? $_instagramFilterText : 'Te invitamos a explorar nuestro filtro exclusivo en Instagram, diseñado especialmente para nuestra boda. ¡No olvides etiquetarnos en tus fotos para que podamos compartir este día especial y crear recuerdos inolvidables juntos.';
	$instagramFilterUrl = isset($_instagramFilterUrl) ? $_instagramFilterUrl : 'https://www.instagram.com/ar/503789147012089/';
    $instagramProfileDescription = isset($_instagramProfileDescription) ? $_instagramProfileDescription : '¡Síguenos para mantenerte al día con todos los detalles de nuestra boda! Te esperamos.';
@endphp
@section('title', $invitation->title)

@push('styles')


<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.3/css/bootstrap.min.css" integrity="sha512-jnSuA4Ss2PkkikSOLtYs8BlYIeeIK1h99ty4YfvRPAlzr377vr3CXDb7sb7eEEBYjDtcYj+AjBH3FLv5uSJuXg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<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://cdnjs.cloudflare.com/ajax/libs/fancyapps-ui/5.0.36/fancybox/fancybox.min.css" integrity="sha512-s4DOVHc73MjMnsueMjvJSnYucSU3E7WF0UVGRQFd/QDzeAx0D0BNuAX9fbZSLkrYW7V2Ly0/BKHSER04bCJgtQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="{{asset('templates/css/chic.css')}}">

@endpush

@section('content')
	@if($_enableStunningCover ?? false)
	<div class="containerBg portada" id="portada">
			<div class="shape">
				<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1928" height="266" viewBox="0 0 1928 266">
					<defs>
						<clipPath id="clip-contenedorBg">
						<rect width="1928" height="266"/>
						</clipPath>
					</defs>
					<g id="contenedorBg" clip-path="url(#clip-contenedorBg)">
						<rect width="1928" height="266" fill="rgba(255,255,255,0)"/>
						<g id="STORY" transform="translate(0 -1081)">
						<path id="triangleBack" data-name="Trazado 6919" d="M0,131,964,279.391,1928,131V1188.06H0Z" transform="translate(0 976)" fill="#b9c3bf"/>
						<path id="triangleFront" data-name="Trazado 6920" d="M0,131,964,278.778,1928,131V1146.309H0Z" transform="translate(0 1016)" fill="#fff"/>
						</g>
					</g>
				</svg>
			</div>
        <section class="bg-img" style="background-image: url('{{$headerBackgroundUrl}}')"></section>
		<img src="{{ asset('img/templates/chic/hojas-5.png') }}" class="leaves-2 position-absolute end-0">
		<img src="{{ asset('img/templates/chic/hojas-2.png') }}" class="leaves-1 position-absolute start-0">
		<div class="cut-1 position-absolute bottom-0 start-0 w-100"></div>
			<div class="w-100 h-100 d-flex flex-column align-items-center justify-content-center bg-black bg-opacity-50">
				<h1 class="f-heading text-white pb-5 lh-1 titlePortada">{{$headerTitle}}</h1>
				<h3 class="px-5 py-3 text-center rounded-3 ls-5 f-primary text-white m-0 lh-1 fw-400 subtitlePortada">{{$headerSubtitle}}</h3>
				<p class="bg-tertiary text-white px-4 py-2 rounded-3 fw-bold fs-5">{{ $greetingSubtitle }}</p>
			</div>
    </div>
	@endif

	@if(($_enableGuestTicket ?? false))
		@include('v2.ticket', [
			'ticket' => [
				'message' => ($confirmationMessage ?? ($_confirmationMessage ?? null)),
			],
			'showInlineButton' => false,
		])
	@endif

	@if ($_enableOurStory ?? false)
	<section id="history" class="py-5 bg-quaternary position-relative">
			<div class="container py-3">
				<div class="px-3 px-sm-0">
					<h2 class="f-tertiary fw-600 text-center mb-5 title">{!! $ourHistoryTitle !!}</h2>
					<p class="f-primary text-center bg-secondary p-sm-5 p-2 text-white">{!! nl2br($ourHistory) !!}</p>
				</div>
			</div>
	</section>
	@endif

		@if ($_enableItinerary ?? false)
			@if($invitation->schedule->count() == 1)
				@include('templates.chic.section_itinerary_single')
			@else
				@include('templates.chic.section_itinerary_multiple')
			@endif
		@endif

		@if ($_enableSectionVideo ?? false)
			@include('templates.chic.section_video')
		@endif

		@if($_enableCountdown ?? false)
        @include('templates.chic.section_countdown')
		@endif

		@if($_enableScheduler ?? false)
		@include('templates.chic.schedule')
		@endif

		@if ($_enableEssentialMusic ?? false)
    		@include('templates.chic.section_music_form')
		@endif

		@if( $_enableHashtag ?? false)
		<div class="containerBg text-white" id="hashtag">
			<section class="bg-img" style="background-image: url('{{$headerBackgroundUrl}}')"></section>
			<div class="w-100  py-5 d-flex flex-column align-items-center justify-content-center bg-black bg-opacity-50 position-relative">
				<div class="container text-center">
					<h3 class="f-tertiary fw-600 pb-4 title">{{ $_hashtagTitle ?? 'Comparte la magia de nuestra boda'}}</h3>
					<p class="text-center mb-sm-5 py-sm-0 py-3 text">{{ $_hashtagDescription ?? 'Durante la fiesta utiliza el siguiente hashtag y comparte tus momentos favoritos de nuestra boda.'}}</p>
					<div class="bg-secondary text-white fw-700 py-3 d-inline-block px-4 rounded-pill text">#{{$_eventHashtag ?? 'eventdate'}}</div>
					<br>
				</div>
				<div class="cut-4"></div>
			</div>
    	</div>
		@endisset

		@if ($_enableGallery ?? false)
		@include('templates.chic.section_gallery')
		@endif

		@if ($_enableCustomPhrase ?? false)
		<div class="containerBg" id="phrase">
			<section class="bg-img" style="background-image: url('{{$headerBackgroundUrl}}')"></section>
			<img src="{{ asset('img/templates/chic/hojas-2.png') }}" class="leaves-7 position-absolute">
			<div class="w-100  py-5 d-flex flex-column align-items-center justify-content-center bg-black bg-opacity-50 position-relative">
					<div class="container text-center py-sm-5 f-secondary text-white">
						<div class="px-4 px-sm-0 textPhrase">{{ $customPhrase }}</div>
					</div>
			</div>
    	</div>
		@endif

		@if ($_enableGiftTable ?? false)
        @include('templates.chic.section_gift_table')
		@endif

		@if($_enableDressCode ?? false)
			<section id="theme" class="bg-tertiary text-center py-5">
				<div class="container py-sm-4 text-center">
					<h3 class="f-tertiary text-white fw-600 mb-3 title">{{$_dressCodeTitle ?? 'Código de Vestimenta'}}</h3>
					<p class="text-white mb-5 text">{{$dressCodeText}}</p>
					<p class="fs-sm-18 fs-16 fw-700">
						<span class="bg-quaternary px-5 d-inline-block py-3 rounded-pill text">
							{{ $isCustom ? ($_dressName ?? 'DRESS CODE PERSONALIZADO') : ($_dressCodeName ?? 'Sin nombre') }}
						</span>
					</p>
					@if($_enableDressCodeButton ?? true)
					<a class="d-inline-block py-3 fs-sm-14 fs-12 fw-600 rounded-pill px-5 border border-3 border-white  text-white mt-5 btn-transparent"  data-bs-toggle="modal" data-bs-target="#exampleModal">Ver ejemplo</a>
					@include('templates.chic.dress_code_modal')
					@endif
				</div>
			</section>
		@endif

		@if (($_enableRecomendations ?? false) || ($_enableRecomendationsTransport ?? false))
        @include('templates.chic.section_recomendation')
		@endif

		@if(($_enableGodParents ?? false) || ($_enableWitnesses ?? false))
        	@include('templates.chic.godparents_section')
		@endif

		@if($_enablePrivateTransportation ?? false)
        @include('templates.chic.private_transportation_section')
		@endif

		@if ($_enableInstagram ?? false)
			@include('templates.chic.section_instagram')
		@endif

		@if($_enableInstagramFilter ?? false)
		@include('templates.chic.section_instagram_filter')
		@endif

		@if ($_enableSelpix ?? false)
			@include('templates.chic.section_selpix')
		@endif

		@if ($_enableAttendanceConfirmation ?? false)
		@include('templates.chic.section_confirmation_form')
		@endif

		@if( $_enableGreetings ?? false)
			@include('templates.chic.section_greeting')
		@endif

        @include('templates_footer')


		<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.3/js/bootstrap.bundle.min.js" integrity="sha512-7Pi/otdlbbCR+LnW+F7PwFcSDJOuUJB3OxtEHbg4vSMvzvJjde4Po1v4BR9Gdc9aXNUNFVUY+SK51wWT8WF0Gg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
        
		<script src="https://cdnjs.cloudflare.com/ajax/libs/fancyapps-ui/5.0.36/fancybox/fancybox.umd.js" integrity="sha512-v80Z62SYCVHA3UxmFG69Vclopt+3ngQDocRjtxnB3htcTs6l9mnXc6SixuDae1rJ3L2J6p2KAuG+soHbhVd+6g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
		<script src="https://cdnjs.cloudflare.com/ajax/libs/tiny-slider/2.9.2/min/tiny-slider.js"></script>
		
		<script type="module">
				if ( $('.my-slider').html().trim().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').html().trim().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
							}
						}
					});
				}

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