@extends('web.layouts.app')

@push('web.styles')
    @vite('resources/css/web/page/about.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="about-section">
            <!-- Header Image -->
            <div class="swiper laisla-tv-swiper dreamers-swiper">
                <div class="swiper-wrapper">
                    @foreach ($event->getMedia('event_gallery') as $media)
                        <div class="swiper-slide">
                            <div class="laisla-tv-card">
                                <img src="{{ $media->getFullUrl() }}" alt="{{ $event->title }}" class="w-100 h-100">
                            </div>
                        </div>
                    @endforeach
                </div>
                <div class="swiper-button-next"></div>
                <div class="swiper-button-prev"></div>
                <div class="swiper-pagination"></div>
            </div>
            <div class="row g-3 g-md-4">
                <!-- Main Content Area -->
                <div class="col-12 col-md-7 col-lg-8 col-xl-8 col-xxl-9">

                    <!-- Title and Subtitle -->
                    <div class="about-content mb-0 mb-md-4">
                        <div class="ps-0 ps-md-3">
                            <div
                                class="d-flex flex-column flex-md-row justify-content-md-between align-items-md-center about-title-share">
                                <h1 class="dreamers-title">{{ $event->title }}</h1>
                                <div class="about-share mt-0">
                                    <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>
                            <p class="about-subtitle dreamers-subtitle">
                                {{ $event->event_at->translatedFormat('l j F Y') }} - {{ $event->venue->name }}
                            </p>

                            <!-- Event Text -->
                            <div class="about-article">
                                {!! $event->description_html !!}
                            </div>
                        </div>
                        @if (count($event->videos))
                            <div class="les-videos-section">
                                <h2>les videos</h2>
                                <div class="swiper laisla-tv-swiper les-videos-swiper">
                                    <div class="swiper-wrapper">
                                        @foreach ($event->videos as $video)
                                            @php
                                                $videoUrl = $video['link'];
                                            @endphp
                                            <div class="swiper-slide">
                                                <div class="laisla-tv-card">
                                                    @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>
                                        @endforeach
                                    </div>
                                    <div class="swiper-button-next"></div>
                                    <div class="swiper-button-prev"></div>
                                    <div class="swiper-pagination"></div>
                                </div>
                            </div>
                        @endif
                    </div>
                </div>

                <!-- Sidebar -->
                <div class="col-12 col-md-5 col-lg-4 col-xl-4 col-xxl-3">
                    @if ($events->count() > 0)
                        <div class="about-sidebar">
                            <!-- Events Section -->
                            <div class="sidebar-section">
                                <h2 class="sidebar-title">Programme</h2>
                                <div class="sidebar-items">
                                    <div class="row g-3">
                                        @foreach ($events as $event)
                                            <div class="col-6 col-md-12 col-lg-12">
                                                <!-- Event 1 -->
                                                <div class="sidebar-item d-flex gap-3">
                                                    <div class="sidebar-item-image flex-shrink-0">
                                                        <img src="{{ $event->getFirstMediaUrl('event_poster') }}"
                                                            alt="{{ $event->title }}" class="w-100 h-100"
                                                            onerror="this.onerror=null;this.src='{{ asset('assets/images/placeholder/partner.png') }}';">
                                                    </div>
                                                    <div class="sidebar-item-content flex-grow-1">
                                                        <h3 class="sidebar-item-title mb-2">{{ $event->title }}</h3>
                                                        <a href="{{ route('web.event.solo.finish', $event->slug) }}"
                                                            class="sidebar-item-link">>> Voir la fiche</a>
                                                    </div>
                                                </div>
                                            </div>
                                        @endforeach
                                    </div>
                                </div>
                            </div>
                        </div>
                    @endif
                    <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') }}"
                                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>
                    @if ($event->partners->isNotEmpty())
                        <div class="le-lieu-section">
                            <!-- Events Section -->
                            <div class="sidebar-section">
                                <h2 class="sidebar-title">Partenaires</h2>
                                <div class="sidebar-items">
                                    <div class="row g-3">
                                        @foreach ($event->partners as $partner)
                                            <div class="col-6 col-md-12 col-lg-12">
                                                <div class="sidebar-item d-flex gap-3">
                                                    <div class="sidebar-item-image flex-shrink-0">
                                                        <img src="{{ $partner->getFirstMediaUrl('partner_logo') }}"
                                                            alt="{{ $partner->name }}" class="w-100 h-100"
                                                            onerror="this.onerror=null;this.src='{{ asset('assets/images/placeholder/partner.png') }}';">
                                                    </div>
                                                    <div class="sidebar-item-content flex-grow-1">
                                                        <h3 class="sidebar-item-title mb-2">{{ $partner->name }}</h3>
                                                        @if ($partner->website_url)
                                                            <a href="{{ $partner->website_url }}" target="_blank"
                                                                class="sidebar-item-link">>>
                                                                savoir plus</a>
                                                        @endif
                                                    </div>
                                                </div>
                                            </div>
                                        @endforeach
                                    </div>
                                </div>
                            </div>
                        </div>
                    @endif
                </div>
            </div>
        </section>
    </div>
@endsection
@push('web.scripts')
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const laislaTvSwiper = new Swiper('.laisla-tv-swiper', {
                slidesPerView: 1,
                spaceBetween: 20,
                loop: false,
                autoplay: {
                    delay: 3000,
                    disableOnInteraction: false,
                    pauseOnMouseEnter: true,
                },
                // pagination: {
                //     el: '.swiper-pagination',
                //     clickable: true,
                //     type: 'bullets',
                // },
                navigation: {
                    nextEl: '.swiper-button-next',
                    prevEl: '.swiper-button-prev',
                },
                breakpoints: {
                    320: {
                        slidesPerView: 1,
                        spaceBetween: 10,
                    },
                    640: {
                        slidesPerView: 2,
                        spaceBetween: 10,
                    },
                    768: {
                        slidesPerView: 2,
                        spaceBetween: 10,
                    },
                    1024: {
                        slidesPerView: 3,
                        spaceBetween: 10,
                    },
                    1400: {
                        slidesPerView: 3,
                        spaceBetween: 17,
                    },
                },
                speed: 600,
                grabCursor: true,
                watchOverflow: true,
            });
        });

        document.addEventListener('DOMContentLoaded', function() {
            const laislaTvSwiper = new Swiper('.les-videos-swiper', {
                slidesPerView: 1,
                spaceBetween: 20,
                loop: false,
                autoplay: {
                    delay: 3000,
                    disableOnInteraction: false,
                    pauseOnMouseEnter: true,
                },
                // pagination: {
                //     el: '.swiper-pagination',
                //     clickable: true,
                //     type: 'bullets',
                // },
                navigation: {
                    nextEl: '.swiper-button-next',
                    prevEl: '.swiper-button-prev',
                },
                breakpoints: {
                    320: {
                        slidesPerView: 1,
                        spaceBetween: 10,
                    },
                    640: {
                        slidesPerView: 1,
                        spaceBetween: 10,
                    },
                    768: {
                        slidesPerView: 1,
                        spaceBetween: 10,
                    },
                    1024: {
                        slidesPerView: 2,
                        spaceBetween: 10,
                    },
                    1400: {
                        slidesPerView: 2,
                        spaceBetween: 17,
                    },
                },
                speed: 600,
                grabCursor: true,
                watchOverflow: true,
            });
        });
    </script>
@endpush