@extends('layouts.app')
@section('title', $event['title_small'])
@section('body')

<div class="relative py-2 inset-0 z-0 bg-cover bg-fixed" style='
        @if ($event['product_detail']['landing_bg_image'])
            background-image: url("{{ env('CDN_URL') . '/public/products/' . $event['id'] . '/' . $event['product_detail']['landing_bg_image'] }}");
        @endif
    background-position: center top; '>
    @foreach ($event['landing_items'] as $landingItem)
        @if ($landingItem['active'])
            @if ($landingItem['item_type'] == 'COUNTDOWN')
                @if (isset($event['countDown']) && $event['countDown']['eventDate'] > date('Y-m-d H:i:s') && $event['countDown']['active'] == true)
                    <div class="mt-8 p-5">
                        <x-countdown event-date="{{ $event['countDown']['eventDate'] }}" background="{{ $event['countDown']['background'] }}" backgroundNumber="{{ $event['countDown']['backgroundNumber'] }}" accent="{{ $event['countDown']['accent'] }}"/>
                    </div>
                @endif
            @elseif ($landingItem['item_type'] == 'IMG')
                <section class="py-2 text-center">
                    <div class="mx-auto max-w-screen-xl px-6">
                        <img class="{{ $landingItem['animation_class'] }} mx-auto"
                             src="{{ env('CDN_URL') . '/public/products/' . $event['id']. '/' . $landingItem['content'] }}?w=1100"
                             alt="">
                    </div>
                </section>
            @elseif($landingItem['item_type'] == 'TEXT')
                <section class="py-12 text-center"
                         style="color: @if ($event['product_detail']['landing_text_color']) {{ $event['product_detail']['landing_text_color'] }} @else white @endif">
                    <div class="mx-auto max-w-screen-xl px-6">
                        {!! $landingItem['content'] !!}
                    </div>
                </section>
            @elseif($landingItem['item_type'] == 'EMBED')
                <section class="py-12 text-center"
                         style="color: @if ($event['product_detail']['landing_text_color']) {{ $event['product_detail']['landing_text_color'] }} @else white @endif">
                    <div class="mx-auto max-w-screen-sm px-6">
                        {!! $landingItem['content'] !!}
                    </div>
                </section>
            @elseif($landingItem['item_type'] == 'BTN-PAY' && $event['active'] && $event['can_be_sold'] && $event['status'] == 1)
                @php
                    if (!isset($isShowedFlow)) {
                        $isShowedFlow = false;
                    }
                @endphp
                <section
                    class="@if ($event['payment_flow'] == 'interactive') py-0 @elseif($event['payment_flow'] == 'calendar') py-0 @else py-12 bg-white @endif @if (!$isShowedFlow && ($extremeLanding && $event['payment_flow'] == 'interactive')) sticky bottom-4 @endif"
                    :class="is_show_calendar || is_show_interactive_flow ? 'bg-white' : ''" id="payment-flow">
                    <div class="mx-auto max-w-screen-xl">
                        @if ($event['status'] == 1 && $event['can_be_sold'])

                            <section class="py-12">
                                <div class="mx-auto max-w-screen-xl px-6">
                                    <div class="bg-neutral-300 rounded-[20px] lg:rounded-[32px] p-4 md:p-6 lg:p-8 sticky top-5">
                                        <div class="space-y-1">
                                            <h2 class="text-lg md:text-xl font-bold text-neutral-500">ENTRADAS</h2>
                                            <p class="text-sm md:text-base text-neutral-400">Disfruta más que nunca.</p>
                                            @php
                                                $themeConfig = [
                                                    'bg' => 'transparent', // Fondo general para toda la tabla
                                                    'textPrimary' => 'text-white',
                                                    'textSecondary' => 'text-white',
                                                    'descriptionColor' => 'text-white',
                                                    'priceColor' => 'text-white',
                                                    'border' => 'border-gwhite',
                                                    'button' => 'bg-primary-200 text-white hover:bg-primary-600 py-4',
                                                ];
                                            @endphp
                                            <tarifario
                                                :theme-config='@json($themeConfig)'
                                                :tickets='@json($tickets)'
                                                :price-types='@json($priceTypes)'
                                                :event='@json($event)'
                                                :user="{{ auth()->user() }}"
                                                :auth="{{ auth()->check() ? 'true' : 'false' }}">
                                            </tarifario>
                                            <div class="buy-button"></div>
                                        </div>
                                    </div>
                                </div>
                            </section>

                            {{-- @include('frontend.payment_flows.' . $event['payment_flow']) --}}

                            @if (!$isShowedFlow)
                                @if ($event['payment_flow'] == 'interactive')

                                    {{-- <Interactive_flow v-if="interactive_payment_mode"
                                                      :payment_mode="interactive_payment_mode"
                                                      :group_p="interactive_group_price"
                                                      event_id="{{ $event->id }}"
                                                      v-on:add-to-cart-mult="addProductInMultipleZones"
                                                      v-on:back-to-sel="closeInteractiveToSelect">
                                    </Interactive_flow> --}}
                                @endif
                                @php
                                    $isShowedFlow = true;
                                @endphp
                            @endif
                        @endif
                    </div>


                </section>

            @endif
        @endif
    @endforeach

    @if(isset($isShowedFlow) && $isShowedFlow)
        <section class="py-5 flex flex-col items-center">
            @if($canBeSold)
                {{-- <div class="mx-auto max-w-screen-xl px-6">
                    <button-favorite :event-id="{{ $event['id'] }}" title-event="{{ $event['title_small'] }}" is-favorite="{{ $is_favorite }}"></button-favorite>
                </div> --}}
            @endif
            {{-- <div class="mx-auto max-w-screen-xl px-6">
                    <span
                        class="flex items-center gap-2 whitespace-nowrap text-xs font-medium uppercase tracking-widest text-center text-white items-center">Comparte:</span>
                <div class="flex items-center gap-2">
                    <a href="https://www.facebook.com/sharer/sharer.php?u={{ url()->current() }}&quote={{ $event->title_small }}"
                       title="Sigue {{ $event->title_small }} en Facebook" target="_blank"
                       rel="noopener noreferrer"
                       class="flex h-7 w-7 items-center justify-center rounded-full duration-200 text-white hover:text-primary-500">
                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-brand-facebook"
                             aria-hidden="true" width="24" height="24" viewBox="0 0 24 24" stroke-width="2"
                             stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
                            <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
                            <path d="M7 10v4h3v7h4v-7h3l1 -4h-4v-2a1 1 0 0 1 1 -1h3v-4h-3a5 5 0 0 0 -5 5v2h-3"/>
                        </svg>
                    </a>
                    <a href="https://twitter.com/intent/tweet?url={{ url()->current() }}&text={{ $event->title_small }}&via={{ config('app.name') }}"
                       title="Sigue {{ $event->title_small }} en X (Twitter)" target="_blank"
                       rel="noopener noreferrer"
                       class="flex h-7 w-7 items-center justify-center rounded-full duration-200 text-white hover:text-primary-500">
                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-brand-x"
                             width="24"
                             height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none"
                             stroke-linecap="round" stroke-linejoin="round">
                            <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
                            <path d="M4 4l11.733 16h4.267l-11.733 -16z"/>
                            <path d="M4 20l6.768 -6.768m2.46 -2.46l6.772 -6.772"/>
                        </svg>
                    </a>
                    <a href="https://wa.me/?text={{ url()->current() }}"
                       title="Sigue {{ $event->title_small }} en WhatsApp"
                       target="_blank" rel="noopener noreferrer"
                       class="flex h-7 w-7 items-center justify-center rounded-full duration-200 text-white hover:text-primary-500">
                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-brand-whatsapp"
                             width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"
                             fill="none" stroke-linecap="round" stroke-linejoin="round">
                            <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
                            <path d="M3 21l1.65 -3.8a9 9 0 1 1 3.4 2.9l-5.05 .9"/>
                            <path
                                d="M9 10a.5 .5 0 0 0 1 0v-1a.5 .5 0 0 0 -1 0v1a5 5 0 0 0 5 5h1a.5 .5 0 0 0 0 -1h-1a.5 .5 0 0 0 0 1"/>
                        </svg>
                    </a>
                    <a href="mailto:?subject={{ $event->title_small }}&body={{ url()->current() }}"
                       class="flex h-7 w-7 items-center justify-center rounded-full duration-200 text-white hover:text-primary-500">
                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-mail" width="24"
                             height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none"
                             stroke-linecap="round" stroke-linejoin="round">
                            <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
                            <path
                                d="M3 7a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v10a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2v-10z"/>
                            <path d="M3 7l9 6l9 -6"/>
                        </svg>
                    </a>
                    <button type="button" @click.prevent="copyToClipboard('{{ url()->current() }}')"
                            :disabled="isLoadinCopyText"
                            class="relative flex h-7 w-7 items-center justify-center rounded-full duration-200 text-white hover:text-primary-500 disabled:text-gun-200">
                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-copy" width="24"
                             height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none"
                             stroke-linecap="round" stroke-linejoin="round">
                            <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
                            <path
                                d="M7 7m0 2.667a2.667 2.667 0 0 1 2.667 -2.667h8.666a2.667 2.667 0 0 1 2.667 2.667v8.666a2.667 2.667 0 0 1 -2.667 2.667h-8.666a2.667 2.667 0 0 1 -2.667 -2.667z"/>
                            <path
                                d="M4.012 16.737a2.005 2.005 0 0 1 -1.012 -1.737v-10c0 -1.1 .9 -2 2 -2h10c.75 0 1.158 .385 1.5 1"/>
                        </svg>
                        <span v-if="isCopyText" v-cloak
                              class="pointer-events-none absolute left-full inline-block pl-2 text-xs font-medium uppercase text-primary-400">¡Copiado!</span>
                    </button>
                </div>
            </div> --}}
        </section>
    @endif
</div>
{{-- <x-footer /> --}}
@endsection