@extends('layouts.invitation')
@section('title', $invitation->title)
@php
    $headerTitle = $_title ?? '*Nicole';
    $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/red_rose/BG-PRINCIPAL.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.';
    $confirmationMessage = $_confirmationMessage ?? "Para poder participar de todo esto, es necesario que confirmes tu asistencia cuanto antes.";
    $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');
    $greetingHeader = $_greetingHeader ?? 'greetingHeader';
    $greetingTitle = $_greetingTitle ?? 'greetingTitle';
    $greetingSubtitle = $eventdate->format('m-d-Y');
@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/red_rose.css')}}">

@endpush

@section('content')
    @if($_enableStunningCover ?? false)
        @include('templates.red-rose.section_header')
    @endif

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

    <section class="bg-pink pb-4 pt-4">
        <div class="line"></div>
        <div class="container">
            <div class="row">
                <h2 class="date mt-3 fs-28 mb-3 text-white text-center">
                    {{ $eventdate->isoFormat('DD [de] MMMM, YYYY') }}
                </h2>
            </div>
        </div>
        <div class="line text-white"></div>
    </section>

    @if ($_enableItinerary ?? false)
        @include('templates.red-rose.section_itinerary')
    @endif

    <section class="diary position-relative d-flex align-items-center py-5">
        <img src="{{ asset('img/templates/red_rose/left.png') }}" height="250" class="leaves-3 position-absolute star-0">
        <div class="container ">
            <div class="row text-center justify-content-center">
                @if ($_enableCustomPhrase ?? false)
                <p class="fs-sm-24 fs-21 fw-400 mb-5">
                    "{!! $customPhrase !!}"
                </p>
                @endif

                @if($_enableCountdown ?? false)
                @include('templates.red-rose.section_countdown')
                @endif

                <div class="py-4">
                    <a class="btn py-3 px-5 border-0 rounded-pill bg-red btn-primary btn-large" href="{{$eventCalendar ?? now()}}" target="_blank">AGENDAR
                        FECHA</a>
                </div>

            </div>
        </div>
    </section>
    <div class="bg-dark" style="height: 34px;"></div>

    @if ($_enableGallery ?? false)
    @include('templates.red-rose.section_gallery')
    @endif

    @if ($_enableEssentialMusic ?? false)
    @include('templates.red-rose.section_music_form')
    @endif

    <section class="dress-code position-relative bg-light py-5">
        <div class="container py-sm-5">
            <div class="row align-items-md-stretch justify-content-center">
                @if($_enableDressCode ?? false)
                    <div class="col-md-6">
                        <div class="h-100 bg-white px-3 py-5 d-grid border text-center">
                            <div class="icon">
                                <img src="{{ asset('img/templates/red_rose/dress-code.svg') }}" width="80" height="80" alt="">
                            </div>
                            <h2 class="mt-4 f-secondary">{{$_dressCodeTitle ?? 'Código de Vestimenta'}}</h2>
                            <p class="fs-sm-21">{{ $dressCodeText }}<br></p>
                            <div class="bg-green-dark rounded-pill py-3 p-5">
                                <p class="text-white mb-0 fw-500">
                                    {{ $isCustom ? ($_dressName ?? 'DRESS CODE PERSONALIZADO') : ($_dressCodeName ?? 'Sin nombre') }}
                                </p>
                            </div>
                            @if($_enableDressCodeButton ?? true)
                            <a class="text-dark mb-0 fw-500 text-uppercase py-3 px-5 fs-14 fs-sm-14" data-bs-toggle="modal" data-bs-target="#exampleModal">ver ejemplo</a>
                                @include('templates.red-rose.dress_code_modal')
                            @endif
                        </div>
                    </div>
                @endif
                @if( $_enableHashtag ?? false)
                <div class="col-md-6">
                    <div class="h-100 bg-white px-3 py-5 d-grid border text-center">
                        <div class="icon">
                            <img src="{{ asset('img/templates/red_rose/instagram.svg') }}" width="80" height="80" alt="">
                        </div>
                        <h2 class="mt-4 f-secondary">{{ $_hashtagTitle ?? 'Hashtag'}}</h2>
                        <p class="fs-sm-21">{{ $_hashtagDescription ?? 'Durante la fiesta utiliza el hashtag.'}}</p>
                        <div class="bg-green-dark rounded-pill py-3 p-5">
                            <p class="text-white mb-0 fw-500">#{{$_eventHashtag ?? 'DEMO'}}</p>
                        </div>
                    </div>
                </div>
                @endisset
            </div>
        </div>
    </section>

    @if ($_enableGiftTable ?? false)
    @include('templates.red-rose.section_gift_table')
    @endif

    @if( $_enableSelpix ?? false)
    @include('templates.red-rose.section_selpix')
    @endif


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

    @if ($_enableAttendanceConfirmation ?? false)
    @include('templates.red-rose.section_confirmation_form')
    @endif

    @if( $_enableGreetings ?? false)
        @include('templates.red-rose.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').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: 1
                        },
                        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