@extends('layouts.invitation')
@section('title', $invitation->title)
@php
    $headerTitle = $_title ?? 'Lucia';
    $headerSubtitle = $_subtitle ?? '¡Mis 15 años!';
    $eventdate = $invitation->event_date ?? now();
    $eventCalendar = $_eventCalendar ?? null;
    $essentialMusicTitle = $_essentialMusicTitle ?? '¿Qué canciones no pueden faltar?';
    $essentialMusicBody = $_essentialMusicBody ?? '¡Ayúdame sugiriendo las canciones que pensás que no pueden faltar en mi cumple!';
    $customPhrase = $_customPhrase  ?? "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.";
    $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;
    $headerBackgroundUrl = isset($_backgroundImage) ? Storage::url($_backgroundImage) : asset('img/templates/travel/bg-principal.jpg');
    $albumSelpixBodyText = $_selpixBodyText ?? 'Me encantaría que formen parte de los recuerdos especiales de mis quince años. Por eso, les comparto 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!';
    $confirmationMessage = $_confirmationMessage ?? "Para poder participar de todo esto, es necesario que confirmes tu asistencia cuanto antes.";
    $greetingHeader = $_greetingHeader ?? '¡Te espero!';
    $greetingTitle = $_greetingTitle ?? 'Lucia';
    $greetingSubtitle = $eventdate->format('d/m/Y');
    $instagramProfileBackgroundUrl = asset('img/templates/glam/profile.jpg');
@endphp
@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/travel.css')}}">

@endpush

@section('content')

    @if($_enableStunningCover ?? false)
        @include('templates.travel.section_header')
    @endif

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

    @if ($_enableItinerary ?? false)
        @include('templates.travel.section_itinerary')
    @endif

    <section class="bg-tertiary 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 justify-content-center">
                @if ($_enableCustomPhrase ?? false)
                <p class="text-white textPhrase fw-400 mb-3">
                    "{!! $customPhrase !!}"
                </p>
                @endif

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

                <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-14 fs-12" href="{{$eventCalendar ?? now()}}" target="_blank">AGENDAR
                        FECHA</a>
                </div>


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

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

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

    <section class="dress-code position-relative bg-quaternary py-4 overflow-hidden">
        <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">
            @if($_enableDressCode ?? false)
                    <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 title">{{$_dressCodeTitle ?? 'Dresscode'}}</h2>
                            <p class="text py-3">{{ $dressCodeText }}<br></p>
                            <div class="fw-700 px-5 py-3 rounded-pill d-inline-block bg-primary text-dark dressCodeText">
                                {{ $isCustom ? ($_dressName ?? 'DRESS CODE PERSONALIZADO') : ($_dressCodeName ?? 'Sin nombre') }}
                            </div><br>
                            @if($_enableDressCodeButton ?? true)
                            <a class="text-white mb-0 fw-500 bg-secondary rounded-pill py-3 d-block text-uppercase fs-sm-14 fs-12" data-bs-toggle="modal" data-bs-target="#exampleModal">ver ejemplo</a>
                            @include('templates.travel.dress_code_modal')
                            @endif
                        </div>
                    </div>
                @endif
                @if( $_enableHashtag ?? false)
                <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 title">{{ $_hashtagTitle ?? 'Comparte la Magia de Mis 15'}}</h2>
                        <p class="text py-3">{{ $_hashtagDescription ?? 'Durante la fiesta utiliza el siguiente hashtag y comparte tus momentos favoritos de mis quinces.'}}</p>
                        <a class="text-white mb-0 fw-500 bg-secondary rounded-pill py-3 text-uppercase d-block fs-sm-14 fs-12" href="http://instagram.com/tags/{{$_eventHashtag ?? 'DEMO'}}" target="_blank">#{{$_eventHashtag ?? 'eventdate'}}</a>
                    </div>
                </div>
                @endif
            </div>
        </div>
    </section>

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

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

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

    @if( $_enableGreetings ?? false)
        @include('templates.travel.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>
            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
                    }
                }
            });
        }
    </script>
@endsection