@php
    $lugar = 'BRISAS DEL PLATA';
    $direccion = 'ACC, AV. DR. TRISTÁN ACHÁVAL RODRÍGUEZ 1353, CABA';
    $hora = '21:00 HS';
    $bg = "/img/templates_v2/teen/Cruz-espacio.jpg";
    $icon = "/img/templates_v2/{$templateName}/icon-itinerary.svg";
@endphp
@if($invitation->schedule->count() > 1)
    <section id="itinerary">
        <div class="container">
            <div class="slider-events">
                @forelse ($invitation->schedule as $invitationEvent)
                    <div class="item">
                        <div class="p-4">
                            <div class="ratio ratio-1x1 bg-img mb-3 rounded-4" style="background-image: url('{{ Storage::url($invitationEvent->location_photo) }}')"></div>
                            <h4 class="titleItinerary f-heading ls-2 fw-700 text-center">{{ $invitationEvent->event_name}}</h4>
                            <div class="text-center mb-4">
                                <span class="bg-light py-2 px-4 textItinerary fw-500 d-inline-block rounded-pill f-montserrat">{{ $invitationEvent->start_datetime->format('d/m/Y H:i')}} hs</span>
                            </div>
                            <h5 class="textItinerary text-center text-uppercase fw-800 notranslate">{{ $invitationEvent->location_name}}</h5>
                            <p class="textItinerary text-center text-uppercase ls-2 fw-600 mx-5 notranslate">{{ $invitationEvent->address }}</p>

                            <div class="d-flex justify-content-center">
                                <a href="{{ $invitationEvent->location_link }}" target="_blank" class="btn fs-sm-14 fs-12 border-0 bg-secondary d-inline-block text-white rounded-4 px-3 py-3 lh-1 fw-700 text-uppercase text-center">Ver ubicación</a>
                            </div>
                        </div>
                    </div>
                @empty
                    <div class="item">
                        <div class="p-4">
                            <div class="ratio ratio-1x1 bg-img mb-3 rounded-4" style="background-image: url('{{ Storage::url($invitationEvent->location_photo) }}')"></div>
                            <h4 class="titleItinerary f-heading ls-2 fw-700 text-center">{{ $invitationEvent->event_name}}</h4>
                            <div class="text-center mb-4">
                                <span class="bg-light py-2 px-4 textItinerary fw-500 d-inline-block rounded-pill f-montserrat">{{ $invitationEvent->start_datetime->format('d/m/Y H:i')}} hs</span>
                            </div>
                            <h5 class="textItinerary text-center text-uppercase fw-800 notranslate">{{ $invitationEvent->location_name}}</h5>
                            <p class="textItinerary text-center text-uppercase ls-2 fw-600 mx-5 notranslate">{{ $invitationEvent->address }}</p>

                            <div class="d-flex justify-content-center">
                                <a href="{{ $invitationEvent->location_link }}" target="_blank" class="btn fs-sm-14 fs-12 border-0 bg-secondary d-inline-block text-white rounded-4 px-3 py-3 lh-1 fw-700 text-uppercase text-center">Ver ubicación</a>
                            </div>
                        </div>
                    </div>
                @endforelse
            </div>
        </div>
    </section>
@else
<section id="itinerary">
    @forelse ($invitation->schedule as $invitationEvent)
        <div class="container">
            <div>
                <div class="row">
                    <div class="col-sm-4" style="background-image: url('{{ Storage::url($invitationEvent->location_photo) }}')">
                        <div class="ratio ratio-1x1"></div>
                    </div>
                    <div class="col-sm-6">
                        <div>
                            <div class="flex-fill">
                                <div class="icon">
                                    <img src="{{ asset($icon) }}" alt="" />
                                </div>
                                <h3 class="title">Dirección</h3>
                                <h4 class="lugar notranslate">{{ $invitationEvent->location_name}}</h4>
                                <p class="notranslate">{{ $invitationEvent->address }}</p>
                                <div>{{ $invitationEvent->start_datetime->format('H:i')}} hs</div>
                                <a href="{{ $invitationEvent->location_link }}" class="btn" target="_blank">Ver ubicación</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    @empty
        <div class="container">
            <div>
                <div class="row">
                    <div class="col-sm-4" style="background-image: url('{{ asset($bg) }}')">
                        <div class="ratio ratio-1x1"></div>
                    </div>
                    <div class="col-sm-6">
                        <div>
                            <div class="flex-fill">
                                <div class="icon">
                                    <img src="{{ asset($icon) }}" alt="" />
                                </div>
                                <h3 class="title">Dirección</h3>
                                <h4 class="lugar notranslate">{{ $lugar }}</h4>
                                <p class="notranslate">{{ $direccion }}</p>
                                <div>{{ $hora }} hs</div>
                                <a href="#" class="btn" target="_blank">Ver ubicación</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    @endforelse
</section>
@endif

<script>
    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,
                responsive: {
                    640: {
                        items: 2
                    },
                    900: {
                        items: {{ $invitation->schedule && $invitation->schedule->count() > 0 ? $invitation->schedule->count() : 3 }}
                    }
                }
            });
    }
</script>