@extends('web.layouts.app')

@push('web.styles')
    @vite('resources/css/web/page/event_solo_coming_soon.css')
@endpush

@php
    Carbon\Carbon::setLocale('fr');

    function isYoutubeUrl($url)
    {
        return preg_match('/(youtube\.com|youtu\.be)/i', $url);
    }
@endphp

@section('content')
    <div class="container">
        <section class="event-solo-coming-soon-section">
            <div class="row g-3">
                <div class="col-12 col-lg-7 col-xl-8">
                    <div class="event-solo-coming-soon-content">
                        <div class="d-flex flex-column flex-xl-row gap-3">
                            <div class="event-solo-coming-soon-image">
                                <img src="{{ $event->getFirstMediaUrl('event_poster') }}" alt="{{ $event->title }}"
                                    class="w-100 h-100"
                                    onerror="this.onerror=null;this.src='{{ asset('assets/images/placeholder/event-upcoming.png') }}';">
                            </div>
                            <div class="d-flex justify-content-between flex-column gap-0 gap-xl-3">
                                <div class="event-poster">
                                    <h1>{{ $event->title }}</h1>
                                    <p>{{ $event->event_at->translatedFormat('l j F Y') }}</p>
                                    @if ($event->venue)
                                        <h2>LIEU : <span>{{ $event->venue->name }}</span></h2>
                                    @endif
                                    @if ($event->opening_at && $event->closing_at)
                                        <h2>
                                            HORAIRES :
                                            <span>
                                                {{ $event->opening_at->format('H:i') }} -
                                                {{ $event->closing_at->format('H:i') }}
                                            </span>
                                        </h2>
                                    @endif
                                    @if ($event->price_title && $event->rate)
                                        <h2>
                                            <img src="{{ asset('assets/images/loading.png') }}" alt="Ticket Icon"
                                                width="25" height="25">
                                            {{ $event->price_title }} : <span>{{ $event->rate }} (Cool Price)</span>
                                        </h2>
                                    @endif
                                    @if ($event->vip_price_title && $event->vip_rate)
                                        <h2>
                                            <img src="{{ asset('assets/images/loading.png') }}" alt="Ticket Icon"
                                                width="25" height="25">
                                            {{ $event->vip_price_title }} : <span>{{ $event->vip_rate }} (Cool
                                                Price)</span>
                                        </h2>
                                    @endif
                                    @if ($event->hotline)
                                        <h2>HOTLINE : <span>{{ $event->hotline }}</span></h2>
                                    @endif
                                    @if ($event->pointsOfSale && $event->pointsOfSale->isNotEmpty())
                                        <h2>
                                            AUTRES POINTS DE VENTE :
                                            <span>
                                                {{ $event->pointsOfSale->pluck('name')->join(', ') }}
                                            </span>
                                        </h2>
                                    @endif
                                </div>
                                <div class="about-share mb-2 mb-xl-3">
                                    <div class="d-flex align-items-center gap-3">
                                        <p class="share-label mb-0 pt-2">PARTAGEZ CETTE PAGE</p>
                                        <button id="shareBtn" class="share-button border-0 bg-transparent"
                                            aria-label="Share this page">
                                            <img src="{{ asset('assets/images/share.png') }}" alt="Share Icon"
                                                class="w-100 h-100">
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="le-retour-section">
                            <h2>{{ $event->subtitle }}</h2>
                            <h3>{!! $event->description_html !!}</h3>
                        </div>

                        @if ($event->stages->count() > 0)
                            <div class="le_programme_section">
                                <h2>le programme</h2>
                                <div class="row justify-content-between">
                                    @foreach ($event->stages as $stage)
                                        <div class="col-12 col-md-6 col-xl-4">
                                            <h3>{{ $stage->name }}</h3>
                                            <div class="event-listing-section">
                                                @foreach ($stage->slots as $slot)
                                                    @php
                                                        $artist = $slot->artist;
                                                    @endphp
                                                    <div class="event-item">
                                                        <div class="event-item-image">
                                                            <img src="{{ $artist->hasMedia('artist_avatar') ? $artist->getFirstMediaUrl('artist_avatar') : asset('assets/images/placeholder/a.png') }}"
                                                                alt="{{ $artist->name }}" class="w-100 h-100"
                                                                onerror="this.onerror=null;this.src='{{ asset('assets/images/placeholder/artist.png') }}';">
                                                        </div>
                                                        <div class="event-item-details">
                                                            <div class="event-time">{{ $slot->starts_at->format('H:i') }}
                                                            </div>
                                                            <div class="event-artist">{{ $artist->name }}</div>
                                                            <a href="#" class="event-link">Voir la fiche</a>
                                                        </div>
                                                    </div>
                                                @endforeach

                                            </div>
                                        </div>
                                    @endforeach
                                    {{-- <div class="col-12 col-md-6 col-xl-4">
                                            <h3>La isala electronica</h3>
                                            <div class="event-listing-section">
                                                <div class="event-item">
                                                    <div class="event-item-image">
                                                        <img src="{{ asset('assets/images/event-poster.jpg') }}"
                                                            alt="Event Artist" class="w-100 h-100">
                                                    </div>
                                                    <div class="event-item-details">
                                                        <div class="event-time">13H</div>
                                                        <div class="event-artist">VINCENT BRASSE</div>
                                                        <a href="#" class="event-link">Voir la fiche</a>
                                                    </div>
                                                </div>
                                                <!-- Add more event items as needed -->
                                                <div class="event-item">
                                                    <div class="event-item-image">
                                                        <img src="{{ asset('assets/images/event-poster.jpg') }}"
                                                            alt="Event Artist" class="w-100 h-100">
                                                    </div>
                                                    <div class="event-item-details">
                                                        <div class="event-time">15H</div>
                                                        <div class="event-artist">LES AMAZONES</div>
                                                        <a href="#" class="event-link">Voir la fiche</a>
                                                    </div>
                                                </div>
                                                <div class="event-item">
                                                    <div class="event-item-image">
                                                        <img src="{{ asset('assets/images/event-poster.jpg') }}"
                                                            alt="Event Artist" class="w-100 h-100">
                                                    </div>
                                                    <div class="event-item-details">
                                                        <div class="event-time">15H</div>
                                                        <div class="event-artist">LES AMAZONES</div>
                                                        <a href="#" class="event-link">Voir la fiche</a>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-12 col-md-6 col-xl-4">
                                            <h3>eclosia stage</h3>
                                            <div class="event-listing-section">
                                                <div class="event-item">
                                                    <div class="event-item-image">
                                                        <img src="{{ asset('assets/images/event-poster.jpg') }}"
                                                            alt="Event Artist" class="w-100 h-100">
                                                    </div>
                                                    <div class="event-item-details">
                                                        <div class="event-time">13H</div>
                                                        <div class="event-artist">VINCENT BRASSE</div>
                                                        <a href="#" class="event-link">Voir la fiche</a>
                                                    </div>
                                                </div>
                                                <!-- Add more event items as needed -->
                                                <div class="event-item">
                                                    <div class="event-item-image">
                                                        <img src="{{ asset('assets/images/event-poster.jpg') }}"
                                                            alt="Event Artist" class="w-100 h-100">
                                                    </div>
                                                    <div class="event-item-details">
                                                        <div class="event-time">15H</div>
                                                        <div class="event-artist">LES AMAZONES</div>
                                                        <a href="#" class="event-link">Voir la fiche</a>
                                                    </div>
                                                </div>
                                                <div class="event-item">
                                                    <div class="event-item-image">
                                                        <img src="{{ asset('assets/images/event-poster.jpg') }}"
                                                            alt="Event Artist" class="w-100 h-100">
                                                    </div>
                                                    <div class="event-item-details">
                                                        <div class="event-time">15H</div>
                                                        <div class="event-artist">LES AMAZONES</div>
                                                        <a href="#" class="event-link">Voir la fiche</a>
                                                    </div>
                                                </div>
                                            </div>
                                        </div> --}}
                                </div>
                            </div>
                        @endif
                        @if ($event->videos && count($event->videos))
                            <div class="les-videos-section">
                                <h2>les videos</h2>
                                <div class="row g-3">
                                    @foreach ($event->videos as $video)
                                        @php
                                            $videoUrl = $video['link'];
                                        @endphp
                                        <div class="col-12 col-md-6 col-xl-4">
                                            <div class="video-item">
                                                <div class="video-item-image">
                                                    @if (isYoutubeUrl($videoUrl))
                                                        @php
                                                            preg_match(
                                                                '/(youtu\.be\/|youtube\.com\/(watch\?v=|embed\/|shorts\/))([a-zA-Z0-9_-]+)/',
                                                                $videoUrl,
                                                                $matches,
                                                            );
                                                            $videoId = $matches[3] ?? null;
                                                        @endphp

                                                        @if ($videoId)
                                                            <iframe class="w-100 h-100"
                                                                src="https://www.youtube.com/embed/{{ $videoId }}?autoplay=0&mute=1&loop=1&controls=0&playlist={{ $videoId }}&modestbranding=1&showinfo=0&rel=0"
                                                                title="{{ $video['title'] }}" frameborder="0"
                                                                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
                                                                allowfullscreen>
                                                            </iframe>
                                                        @endif
                                                    @else
                                                        <video src="{{ $videoUrl }}" class="w-100 h-100" autoplay muted
                                                            loop></video>
                                                    @endif
                                                </div>
                                            </div>
                                        </div>
                                    @endforeach

                                </div>
                            </div>
                        @endif
                    </div>
                </div>
                <div class="col-12 col-lg-5 col-xl-4">
                    <div class="row g-3 g-lg-0">
                        <div class="col-12 col-md-6 col-lg-12 col-xl-12">
                            <div class="infos-tickets-section">
                                <h2 class="tickets-header">INFOS TICKETS</h2>
                                <div class="tickets-divider"></div>

                                <div class="ticket-list">
                                    <!-- Super Early Bird -->
                                    <div class="ticket-item">
                                        @if ($event->price_title && $event->rate)
                                            <div class="ticket-main">
                                                <span class="ticket-icon">✕</span>
                                                <div>
                                                    <p class="ticket-name mb-0">{{ $event->price_title }} <span
                                                            class="ticket-status sold-out">[Sold Out]</span></p>
                                                    <p class="ticket-name mb-0">{{ $event->rate }} -
                                                        {{ $event->price_title }}<span class="ticket-status sold-out">[Sold
                                                            Out]</span></p>
                                                </div>
                                            </div>
                                        @endif
                                    </div>

                                    <!-- Cool Price -->
                                    <div class="ticket-item">
                                        @if ($event->vip_price_title && $event->vip_rate)
                                            <div class="ticket-main">
                                                <span class="ticket-icon">🚀</span>
                                                <div>
                                                    <p class="ticket-name mb-0">{{ $event->vip_price_title }} <span
                                                            class="ticket-price bold-red">{{ $event->vip_rate }}</span>
                                                    </p>
                                                    <p class="ticket-name mb-0">{{ $event->vip_rate }} -
                                                        {{ $event->vip_price_title }}<span
                                                            class="ticket-price bold-red">{{ ' ' . $event->vip_rate }}</span>
                                                    </p>
                                                </div>
                                            </div>
                                        @endif
                                    </div>

                                    <!-- Buy Ticket Button -->
                                    <div class="buy-ticket-button-wrapper">
                                        <button class="buy-ticket-button">BUY TICKET NOW !</button>
                                    </div>

                                    <!-- Last Chance -->
                                    <div class="ticket-item">
                                        <div class="ticket-main">
                                            <div class="text-dark-light">
                                                <p class="ticket-name mb-0">Last Chance <span
                                                        class="ticket-price">Rs800</span></p>
                                                <p class="ticket-name mb-0">PAX 99 - Last Chance <span
                                                        class="ticket-price">Rs1600</span></p>
                                            </div>
                                        </div>
                                    </div>

                                    <!-- Doors -->
                                    <div class="ticket-item">
                                        <div class="ticket-main">
                                            <span class="ticket-icon">🎟️</span>
                                            <span class="ticket-name">Doors Rs1000 / Rs2000 (PAX 99) Free -12</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        @if ($event->venue)
                            <div class="col-12 col-md-6 col-lg-12 col-xl-12">
                                <div class="le-lieu-section">
                                    <h2 class="lieu-header">LE LIEU</h2>
                                    <div class="lieu-divider"></div>
                                    <div class="lieu-image">
                                        <img src="{{ $event->venue->getFirstMediaUrl('venue_cover') ?? asset('assets/images/event-poster.jpg') }}"
                                            alt="{{ $event->venue->name }}" class="w-100 h-100">
                                    </div>
                                    <div class="lieu-content">
                                        <h3 class="lieu-title">{{ $event->venue->name }}</h3>
                                        <p class="lieu-address">{{ $event->venue->full_address }}</p>
                                    </div>
                                </div>
                            </div>
                        @endif
                        @if ($event->additionalInformation()->count())
                            @foreach ($event->additionalInformation as $info)
                                <div class="col-12 col-md-6 col-lg-12 col-xl-12">
                                    <div class="infos-pax-99-section">
                                        @if ($info->title)
                                            <h2 class="pax-header">{{ $info->title }}</h2>
                                        @endif
                                        <div class="pax-divider {{ $info->hasMedia('event_information_media') ? '' : 'mb-0' }}"></div>
                                        @if ($info->hasMedia('event_information_media'))
                                            <div class="pax-image">
                                                <img src="{{ $info->getFirstMediaUrl('event_information_media') }}"
                                                    alt="PAX 99" class="w-100 h-100"
                                                    onerror="this.onerror=null;this.src='{{ asset('assets/images/placeholder/article-primary-slot.png') }}';">
                                            </div>
                                        @endif
                                        @if ($info->text)
                                            <div class="pax-content">
                                                <p>{!! $info->text !!}</p>
                                            </div>
                                        @endif
                                    </div>
                                </div>
                            @endforeach
                        @endif

                        @if ($event->partners && $event->partners->isNotEmpty())
                            <div class="col-12 col-md-6 col-lg-12 col-xl-12">
                                <div class="autres-points-de-vente-section">
                                    <h2 class="vente-header">NOS PARTENAIRES</h2>
                                    <div class="vente-divider"></div>
                                    @foreach ($event->partners as $partner)
                                        <div class="nos-partenaires-image">
                                            <div class="nos-partenaires-image-item">
                                                <img src="{{ $partner->getFirstMediaUrl('partner_logo') }}"
                                                    alt="{{ $partner->name }}" width="300">
                                            </div>
                                        </div>
                                    @endforeach
                                </div>
                            </div>
                        @endif

                        @if ($event->pointsOfSale->count() > 0)
                            <div class="col-12 col-md-6 col-lg-12 col-xl-12">
                                <div class="autres-points-de-vente-section">
                                    <h2 class="vente-header">AUTRES POINTS DE VENTE</h2>
                                    <div class="vente-divider"></div>
                                    <div class="vente-list">
                                        @foreach ($event->pointsOfSale as $pointOfSale)
                                            <div class="vente-item">
                                                <div class="vente-name">{{ $pointOfSale->name }}</div>
                                                <div class="vente-detail">

                                                </div>
                                                <div class="vente-detail">
                                                    {{ $pointOfSale->pivot->override_url ? $pointOfSale->pivot->override_url : $pointOfSale->base_url }}
                                                    @if ($pointOfSale->phone)
                                                        <a
                                                            href="tel:{{ $pointOfSale->phone }}">{{ ' | ' . $pointOfSale->phone }}</a>
                                                    @endif
                                                </div>
                                            </div>
                                        @endforeach
                                    </div>
                                </div>
                            </div>
                        @else
                            <div class="col-12 col-md-6 col-lg-12 col-xl-12">
                                <div class="autres-points-de-vente-section">
                                    <h2 class="vente-header">AUTRES POINTS DE VENTE</h2>
                                    <div class="vente-divider"></div>
                                    <div class="vente-list">
                                        <div class="vente-item">
                                            <div class="vente-name">Otayo</div>
                                            <div class="vente-detail">www.otavo.mu</div>
                                        </div>
                                        <div class="vente-item">
                                            <div class="vente-name">Ennoia</div>
                                            <div class="vente-detail">Grand Baie La Croisette</div>
                                        </div>
                                        <div class="vente-item">
                                            <div class="vente-name">Le Connoisseur</div>
                                            <div class="vente-detail">Mon Choisy Mall</div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        @endif

                        @if ($lastEvent && $lastEvent->hasMedia('event_poster'))
                            <div class="col-12 col-md-6 col-lg-12 col-xl-12">
                                <div class="autres-points-de-vente-section">
                                    <h2 class="vente-header">EDITION PRECEDENTE</h2>
                                    <div class="vente-divider"></div>
                                    <div class="edition-precedente-image">
                                        <a href="{{ route('web.event.solo.finish', $lastEvent->slug) }}">
                                            <img src="{{ $lastEvent->getFirstMediaUrl('event_poster') }}"
                                                alt="{{ $lastEvent->title }}" class="w-100 h-100"
                                                onerror="this.onerror=null;this.src='{{ asset('assets/images/placeholder/event-upcoming.png') }}';"></a>
                                    </div>
                                </div>
                            </div>
                        @endif
                    </div>
                </div>
            </div>
        </section>
    </div>
@endsection