@extends('layouts.invitation_v2')

@push('styles')
@php
$templateNameCss = str_replace(' ', '_', strtolower($invitation->template->name));
@endphp
<link rel="stylesheet" href="{{asset('templates_v2/css/'.$templateNameCss.'.css')}}">
@endpush

@php
    function isSectionEnabled($section, $invitation){
        $enabledInvitationVarName = config("eventdate.section_mapper.{$section}");

        $property = \App\Models\InvitationVariable::where(
            ['invitation_id' => $invitation->id, 'name' => $enabledInvitationVarName],
        )->first();

        if(!$property){
            return false;
        }

        return $property->value == 1;
    }
@endphp
@if ($showSecurity ?? false)
    @include('templates.section_security')
@else
    @if(($_enableMusicInInvitation ?? false) && isset($_musicSource))
    <div class="position-relative">
        <div class="position-fixed" style="z-index: 9; top: calc(100vh - 121px); left: 20px">
            <div id="play-pause" class="play"></div>

            <audio controls style="display: none;" id="track">
                <source src="{{ Storage::url($_musicSource) }}" type="audio/mpeg">
                Tu navegador no admite el elemento de audio.
            </audio>

            <script>
                var track = document.getElementById("track");

                var controlBtn = document.getElementById("play-pause");

                function playPause() {
                    if (track.paused) {
                        track.play();
                        controlBtn.className = "pause";
                        return
                    }
                    track.pause();
                    controlBtn.className = "play";
                }

                controlBtn.addEventListener("click", playPause);
                track.addEventListener("ended", function() {
                    controlBtn.className = "play";
                });
            </script>
        </div>
    </div>
    @endif
    @section('content')
            {{-- Mostrar ticket arriba SOLO si viene desde enlace con código y la sección no está habilitada por plan/variables --}}
            @if(!empty($showGuestTicket) && !isSectionEnabled('ticket', $invitation))
                @include('v2.ticket', ['ticket' => $ticket, 'guest' => $guest])
            @endif
            @php
                $sectionLoaded = [];
            @endphp
            @foreach ($sectionsEnabled as $section)
                @php
                    $sectionName = str_replace(' ', '-', strtolower(str_replace('_', ' ', $section->code)));
                @endphp
                @if(isSectionEnabled($section->code, $invitation) && (view()->exists('v2.'.$sectionName) || $section->code == 'transportation_recommendations'))
                    @php
                        $sectionName = $section->code == 'transportation_recommendations' ? 'accommodation-recommendations' : $sectionName;
                    @endphp
                    @if(!in_array($sectionName, $sectionLoaded))
                    @include('v2.'.$sectionName)
                    @endif
                    @php
                    array_push($sectionLoaded, $sectionName);
                    @endphp
                @endif
            @endforeach
            @include('templates_footer')
            @if($invitation->plan_id == \App\Models\Plan::FREE)
                <div class="fixed-bottom d-none d-lg-block">
                    <a href="https://eventdate.net"><img src="{{asset('img/banner_desk.gif')}}" alt="Banner Fijo" class="img-fluid"></a>
                </div>
                <!-- <div class="separatorBanner" style="height: 60px"></div> -->
                <div class="fixed-bottom d-block d-lg-none">
                    <a href="https://eventdate.net"><img src="{{asset('img/banner_mobile.gif')}}" alt="Banner Fijo" class="img-fluid"></a>
                </div>
            @endif
    @endsection
    @if ($_enableMultiLanguage ?? false)
        <div class="gtranslate_wrapper"></div>
        <script>
            window.gtranslateSettings = {!! $multilanguageSettings !!}
        </script>

        <script src="{{asset('js/float.js')}}" defer></script>
    @endif
    @if($invitation->plan_id == \App\Models\Plan::FREE)
            <div class="fixed-bottom d-none d-lg-block" id="freeBanner">
                <a href="https://eventdate.net"><img src="{{asset('img/banner_desk.gif')}}" alt="Banner Fijo" class="img-fluid"></a>
            </div>
            <div class="fixed-bottom d-block d-lg-none">
                <a href="https://eventdate.net"><img src="{{asset('img/banner_mobile.gif')}}" alt="Banner Fijo" class="img-fluid"></a>
            </div>
    @endif
@endif