@extends('layouts.invitation')
@php
    $headerTitle = $_title ?? '*Martin y Juliana';
    $headerSubtitle = $_subtitle ?? '*¡Nos Casamos!';
    $customPhrase = $_customPhrase ?? 'Frase customizada';
    $eventdate = $invitation->event_date ?? now();
    $essentialMusicTitle = $_essentialMusicTitle ?? '¿Qué canciones no pueden faltar?';
    $essentialMusicBody = $_essentialMusicBody ?? '¡Ayúdame 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 <br />Historia";
    $dressCodeText = $_dressCodeText ?? 'Vayan a buscar sus mejores ropas porque estos que se aman van a dar el si.';
    $dressCodeName = !empty($dressCodeExample) ? strtoupper($dressCodeExample['name']) : strtoupper('Elegante Sport');
    $dressCodeDescription = $_dressCodeDescription ?? 'Este es un ejemplo de vestimenta';
    $headerBackgroundUrl = isset($_backgroundImage) ? Storage::url($_backgroundImage) : asset('img/templates/boda-oscura/cover.jpg');
    $albumSelpixBodyText = $_selpixBodyText ?? 'Desde las 18 hs va a estar habilitado el Álbum de Selpix para que vayas<br>subiendo fotos de la previa al cumple.';
    $privateTransportationText = $_privateTransportationText ?? 'Para facilitarte el traslado al lugar del evento contamos con un transporte privado.<br>Para este servicio es necesario que confirmes para reservar tu lugar.';
    $godfatherImage = isset($_godfatherImage) ? Storage::url($_godfatherImage) : asset('img/templates/boda-oscura/parent-1.jpg');
    $godmotherImage = isset($_godmotherImage) ? Storage::url($_godmotherImage) : asset('img/templates/boda-oscura/parent-2.jpg');
    $confirmationMessage = $_confirmationMessage ?? "Para poder participar de todo esto, es necesario que confirmes tu asistencia cuanto antes.";
    $greetingHeader = $_greetingHeader ?? 'greetingHeader';
    $greetingTitle = $_greetingTitle ?? 'greetingTitle';
    $greetingSubtitle = $eventdate->format('m-d-Y');
@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/boda-oscura.css')}}">

@endpush

@section('content')
    @if($_enableStunningCover ?? false)
        <div class="vh-100 w-100 bg-img bg-img-fixed position-relative" style="background-image: url('{{$headerBackgroundUrl}}')">
            <div class="decoration-1 d-flex position-absolute w-100 align-items-center justify-content-center gap-5 py-4">
                <div class="w-100 border-bottom border-primary"></div>
                <img src="{{ asset('img/templates/boda-oscura/star.svg') }}" />
                <div class="w-100 border-bottom border-primary"></div>
            </div>
            <div class="w-100 h-100 d-flex flex-column align-items-center justify-content-center bg-black bg-opacity-50">
                <div class="py-5 my-5"></div>
                <h1 class="text-white lh-1 text-center fs-sm-72 fs-36">{{ $headerTitle }}</h1>
                <img src="{{ asset('img/templates/boda-oscura/flor.svg') }}" class="my-4 d-none d-sm-block" />
                <h3 class="px-5 rounded-3 fs-sm-28 fs-18 text-white text-uppercase m-0 lh-base fw-400 text-center border border-1 rounded-pill border-primary py-2 mt-2">{{ $headerSubtitle }}</h3>
            </div>
        </div>
    @endif
    
    @if ($_enableOurStory ?? false)
    <section id="history" class="bg-dark text-white pb-5">
			<h2 class="fs-sm-24 fs-21 fw-400 text-center bg-black text-uppercase py-5 border-top border-primary border-bottom d-flex align-items-center justify-content-center gap-5 px-4">
				<img src="{{ asset('img/templates/boda-oscura/star.svg') }}" />
				    Nuestra Historia
				<img src="{{ asset('img/templates/boda-oscura/star.svg') }}" />
			</h2>
			<div class="container">
				<div class="px-3 px-sm-0">
                {{ $ourHistory }}
				</div>
			</div>
	</section>
    @endif

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

    @if ($_enableGallery ?? false)
    <section id="photos" class="bg-black py-5">
        <div class="container py-sm-5 position-relative">
                 <div class="my-slider d-flex align-items-center">
                    @forelse ($invitation->gallery as $photo)
                    <div class="col-sm-6 mb-5">
						<div class="h-100"><img src="{{Storage::url($photo->image_path)}}" class="img-fluid d-block" loading="lazy"></div>
					</div>
                    @empty
                    <div class="col-sm-6">
                        <div class="h-100"><img src="{{ asset('img/templates/boda-oscura/carrousel-1.jpg') }}" class="img-fluid d-block"></div>
                    </div>
                    <div class="col-sm-6">
                        <div class="h-100"><img src="{{ asset('img/templates/boda-oscura/carrousel-2.jpg') }}" class="img-fluid d-block"></div>
                    </div>
                    <div class="col-sm-6">
                        <div class="h-100"><img src="{{ asset('img/templates/boda-oscura/carrousel-3.jpg') }}" class="img-fluid d-block"></div>
                    </div>
                    @endforelse
                </div>
        </div>
    </section>
    @endif

    @if( $_enableHashtag ?? false)
    <!-- <section id="hashtag" class="position-relative">
        <div class="container py-5 my-5 text-center">
            <h3 class="fs-sm-42 fs-28 fw-700 my-sm-5 pt-5 f-secondary fst-italic">Durante nuestra boda utiliza el hashtag</h3>
            <div class="text-uppercase c-primary fs-sm-32 fs-24 fw-700 mb-5 ">#{{$_eventHashtag ?? 'DEMO'}}</div>
            <br>
            <a href="http://instagram.com/tags/{{$_eventHashtag ?? 'DEMO'}}" class="d-inline-block py-3 fs-sm-18 fw-400 rounded-pill px-5 bg-primary text-dark text-uppercase mb-sm-5" target="_blank">Ver mural</a>
        </div>
    </section> -->
    @endif

    <section class="dress-code bg-dark-light border-top border-primary position-relative">
        <div class="container">
            <div class="row align-items-md-stretch justify-content-center">
                @if($_enableDressCode ?? false)
                    <div class="col-md-6">
                            <div class="h-100 p-sm-5 py-5 border-yellow text-center border-end border-primary border-mobile">
                                <div class="icon mb-3">
                                    <img src="{{ asset('img/templates/boda-oscura/star.svg') }}" width="25" height="25" alt="">
                                </div>
                                <h2 class="mt-4 text-white text-uppercase fs-21 fs-sm-24 fw-800">{{$_dressCodeTitle ?? 'Código de Vestimenta'}}</h2>
                                <p class="text fs-sm-21 text-white mb-4 f-secondary">{{ $dressCodeText }}<br></p>
                                <div class="fs-sm-21 fw-800 text-white text-uppercase rounded-pill mb-5 py-1 bg-black c-primary px-2">{{ $dressCodeName == 'PERSONALIZADO'  ? $_dressCodeCustomName ?? 'DRESS CODE PERSONALIZADO' : $dressCodeName }}</div>
                                <a class="btn py-3 px-5 border-0 rounded-4 btn-primary btn-large text-uppercase fw-700 bg-secondary" data-bs-toggle="modal" data-bs-target="#exampleModal">ver ejemplo</a>
                                @include('templates.boda-oscura.dress_code_modal')
                            </div>
                    </div>
                @endif
                @if( $_enableHashtag ?? false)
                <div class="col-md-6">
                    <div class="h-100 bg-white p-5 border text-center">
                        <div class="icon">
                            <img src="{{ asset('img/templates/boda-oscura/instagram.svg') }}" width="80" height="80" alt="">
                        </div>
                        <h2 class="mt-4 text-white text-uppercase fs-21 fs-sm-24 fw-800">{{ $_hashtagTitle ?? 'Hashtag'}}</h2>
                        <p class="text fs-sm-21 text-white mb-4 f-secondary">{{ $_hashtagDescription ?? 'Durante la fiesta utiliza el hashtag.'}}</p>
                        <div class="fs-sm-21 fw-800 text-white text-uppercase rounded-pill mb-5 py-1 bg-black c-primary px-2">#MIS15ANTO</div>
                        <a class="btn py-3 px-5 border-0 rounded-4 btn-primary btn-large text-uppercase fw-700 bg-secondary" href="http://instagram.com/tags/{{$_eventHashtag ?? 'DEMO'}}" target="_blank">#{{$_eventHashtag ?? 'DEMO'}}</a>
                    </div>
                </div>
                @endif
            </div>
        </div>
    </section>

    @if ($_enableEssentialMusic ?? false)
    @include('templates.boda-oscura.section_music_form')
    @endif

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

    @if ($_enableGiftTable ?? false)
        @include('templates.boda-oscura.section_gift_table')
    @endif

    @if (($_enableRecomendations ?? false) || ($_enableRecomendationsTransport ?? false))
    @include('templates.boda-oscura.section_recomendation')
    @endif
    
    @if ($_enableCustomPhrase ?? false)
    <section id="phrase" class="bg-green-dark text-center py-5">
        <div class="container text-center fs-sm-24 py-sm-5 fs-sm-18 text-white f-terciary">
            <div class="px-sm-4 px-sm-0 py-5">{{ $customPhrase }}</div>
        </div>
    </section>
    @endif

    @if($_enablePrivateTransportation ?? false)
    @include('templates.boda-oscura.private_transportation_section')
    @endif

    @if ($_enableAttendanceConfirmation ?? false)
    @include('templates.boda-oscura.section_confirmation_form')
    @endif

    @if( $_enableGreetings ?? false)
        @include('templates.boda-oscura.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 ( $('.slider-events').length > 0 ) {
                var slider = tns({
                    container: '.slider-events',
                    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').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').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 ( $('.my-slider-3').length > 0 ) {
                var slider2 = tns({
                    container: '.my-slider-3',
                    items: 1,
                    gutter: 30,
                    controlsText: ['', ''],
                    nav: false,
                    autoplayButtonOutput: false,
                    mouseDrag: true,
                    slideBy: 1,
                    autoplay: true,
                    items: 1,
                    responsive: {
                        640: {
                            items: 1
                        },
                        900: {
                            items: 2
                        }
                    }
                });
            }

            if ( $('.my-slider-4').length > 0 ) {
                var slider2 = tns({
                    container: '.my-slider-4',
                    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