@extends('web.layouts.app')

@push('web.styles')
    @vite('resources/css/web/page/about.css')
    <style>
        @media (min-width: 992px) {
            .article-list-pagination {
                transform: translateX(25%);
            }
        }

        @media (min-width: 1200px) {
            .article-list-pagination {
                transform: translateX(16.666667%);
            }
        }

        .about-content.popcorn-content {
            margin-top: 12px;
        }

        .artist-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.85);
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            opacity: 0;
            visibility: hidden;
            transition: all 0.3s ease;
            padding: 10px;
            text-align: center;
            z-index: 100;
            pointer-events: none;
        }

        .dreamers-card:hover .artist-overlay {
            opacity: 1;
            visibility: visible;
        }

        .artist-title {
            font-size: 14px;
            font-weight: 700;
            text-transform: uppercase;
            color: #fff;
            letter-spacing: 0.05em;
            font-family: 'Interstate Cond Mono', monospace;
            line-height: 1.2;
            margin-bottom: 3px;
        }
        .artist-link {
            cursor: pointer;
            pointer-events: auto;
            color: #fff;
            text-decoration: none;
        }
        /* .artist-link:hover {
            color: #38bbd5;
        } */
    </style>
@endpush

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

@section('content')
    <div class="container">
        <section class="about-section">
            <!-- Header Image -->
            @php
                // If all positions are 0, sort by created_at
                $orderedSliderImages = $sliderImages;
                if ($sliderImages->count() > 0 && $sliderImages->every(fn($img) => $img->position == 0)) {
                    $orderedSliderImages = $sliderImages->sortBy('created_at');
                }
            @endphp
            @if ($orderedSliderImages->count() > 0)
                <div class="swiper dreamers-swiper">
                    <div class="swiper-wrapper">
                        @if (!in_array(Route::current()->parameter('articleCategory'), ['tendances', 'pas-de-categorie']))
                            @foreach ($orderedSliderImages as $image)
                                <div class="swiper-slide">
                                    <div class="dreamers-card @if(Route::current()->parameter('articleCategory') == 'popcorn') popcorn-category @endif">
                                        <a
                                            href="{{ $image->article ? route('web.article.solo', $image->article->slug) : '#' }}">
                                            <img src="{{ $image->hasMedia('category_images')
                                                ? $image->getFirstMediaUrl('category_images')
                                                : asset('assets/images/placeholder/event-upcoming.png') }}"
                                                alt="{{ $image->category->name }}" class="w-100 h-100"
                                                onerror="this.onerror=null;this.src='{{ asset('assets/images/placeholder/articles.png') }}';">
                                        </a>
                                        @php $artist = $image->article?->artists?->first(); @endphp
                                        {{-- @if ($artist?->name) --}}
                                            <div class="artist-overlay">
                                                <a href="{{ $image->article ? route('web.article.solo', $image->article->slug) : '#' }}" class="artist-title artist-link">
                                                    {{ $artist?->name }}
                                                </a>
                                            </div>
                                        {{-- @endif --}}
                                    </div>
                                </div>
                            @endforeach
                        @endif
                    </div>
                    <div class="swiper-button-next"></div>
                    <div class="swiper-button-prev"></div>
                    <div class="swiper-pagination"></div>
                </div>
            @endif
            <div class="row g-3 g-xl-4">
                <!-- Main Content Area -->
                <div class="col-12 col-md-12 col-lg-8 col-xl-9">

                    <!-- Title and Subtitle -->
                    <div class="about-content popcorn-content mb-0 mb-md-3">
                        <div class="ps-0 ps-xl-3">
                            <div
                                class="d-flex flex-column flex-md-row justify-content-md-between align-items-md-center about-title-share mb-0">
                                <div>
                                    <h4 class="dreamers-title text-uppercase">
                                        {{ $category->name }}
                                    </h4>
                                    <p class="dreamers-subtitle mb-0">Nos articles sur l'actualité
                                        cinéma et série</p>
                                </div>
                                @include('web.partials.share', ['shareTitle' => 'PARTAGEZ CETTE PAGE'])
                            </div>
                        </div>
                        <!-- Article images text card (rendered by Livewire) -->
                        @livewire('web.article-list', ['category' => $category])
                    </div>
                </div>

                <!-- Sidebar -->
                <div class="col-12 col-md-12 col-lg-4 col-xl-3">
                    <div class="buzz-sidebar">
                        <h2 class="buzz-title text-uppercase">Top {{ $category->name }}</h2>
                        <div class="buzz-entries">
                            @foreach ($articles->take(3) as $key => $article)
                                <div class="buzz-entry">
                                    <div class="buzz-number">{{ $key + 1 . '.' }}</div>
                                    <div class="buzz-content">
                                        <a href="{{ route('web.article.solo', $article->slug) }}"
                                            class="text-decoration-none text-white">
                                            <h3 class="buzz-headline">
                                                {{ $article->title }}
                                            </h3>
                                        </a>
                                        <div class="buzz-clicks">{{ ($article?->views->views ?? 0) . ' Clics' }}</div>
                                    </div>
                                </div>
                                <div class="buzz-divider"></div>
                            @endforeach
                        </div>
                    </div>

                    <!-- Events Section -->
                    @if ($allCategories->count() > 0)
                        <div class="about-sidebar">
                            <div class="sidebar-section">
                                <h2 class="sidebar-title">NOS ÉVÉNEMENTS</h2>
                                <div class="sidebar-items">
                                    <div class="row g-3">
                                        @foreach ($allCategories as $category)
                                            <div class="col-6 col-md-4 col-lg-12">
                                                <div class="sidebar-item d-flex gap-3">
                                                    <div class="sidebar-item-image flex-shrink-0">
                                                        <a href="{{ route('web.event.category', $category->slug) }}">
                                                            <img src="{{ $category->hasMedia('event_category_image') ? $category->getFirstMediaUrl('event_category_image') : asset('assets/images/placeholder/event-finished.png') }}"
                                                                alt="{{ $category->name }}"
                                                                class="w-100 h-100 object-fit-cover event_poster_swiper_slide"
                                                                onerror="this.onerror=null;this.src='{{ asset('assets/images/placeholder/event-upcoming.png') }}';">
                                                        </a>
                                                    </div>
                                                    <div class="sidebar-item-content flex-grow-1">
                                                        <h3 class="sidebar-item-title mb-0">{{ $category->name }}</h3>
                                                        <a href="{{ route('web.event.category', $category->slug) }}"
                                                            class="sidebar-item-link">>> Voir la fiche</a>
                                                    </div>
                                                </div>
                                            </div>
                                        @endforeach
                                    </div>
                                </div>
                            </div>
                        </div>
                    @endif

                    <!-- Events Section -->
                    <div class="about-sidebar">
                        <div class="sidebar-section">
                            <h2 class="sidebar-title">LA ISLA TV</h2>
                            <div class="sidebar-items">
                                <div class="row g-3">
                                    <div class="col-6 col-md-4 col-lg-12">
                                        <div class="sidebar-item d-flex gap-3">
                                            <div class="sidebar-item-image flex-shrink-0">
                                                <a href="https://youtube.com/playlist?list=PL8I-aES2tLGsE51NWMBPS8wKgptwoOPK0&si=AONxMipWneJ06Tc8"
                                                    target="_blank">
                                                    <img src="{{ asset('assets/images/la-isla-tv/patrimoine.jpg') }}"
                                                        alt="LIVE DAN PATRIMOINE"
                                                        class="w-100 h-100 object-fit-cover event_poster_swiper_slide"
                                                        onerror="this.onerror=null;this.src='{{ asset('assets/images/la-isla-tv/patrimoine.jpg') }}';">
                                                </a>
                                            </div>
                                            <div class="sidebar-item-content flex-grow-1">
                                                <h3 class="sidebar-item-title mb-0">LIVE DAN PATRIMOINE</h3>
                                                <a href="https://youtube.com/playlist?list=PL8I-aES2tLGsE51NWMBPS8wKgptwoOPK0&si=AONxMipWneJ06Tc8"
                                                    target="_blank" class="sidebar-item-link">
                                                    >> Voir les vidéos
                                                </a>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-6 col-md-4 col-lg-12">
                                        <div class="sidebar-item d-flex gap-3">
                                            <div class="sidebar-item-image flex-shrink-0">
                                                <img src="{{ asset('assets/images/la-isla-tv/moris.jpg') }}"
                                                    alt="WE LOVE MORIS"
                                                    class="w-100 h-100 object-fit-cover event_poster_swiper_slide"
                                                    onerror="this.onerror=null;this.src='{{ asset('assets/images/la-isla-tv/moris.jpg') }}';">
                                            </div>
                                            <div class="sidebar-item-content flex-grow-1">
                                                <h3 class="sidebar-item-title mb-0">WE LOVE MORIS</h3>
                                                <a href="https://youtube.com/playlist?list=PL8I-aES2tLGsfhLwSRCxOUn8aHC5phmFl&si=i4p4NjAsSAv93UuO"
                                                    target="_blank" class="sidebar-item-link">>>
                                                    Voir
                                                    les vidéos</a>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-6 col-md-4 col-lg-12">
                                        <div class="sidebar-item d-flex gap-3">
                                            <div class="sidebar-item-image flex-shrink-0">
                                                <img src="{{ asset('assets/images/la-isla-tv/2068.jpg') }}"
                                                    alt="LA ISLA 2068"
                                                    class="w-100 h-100 object-fit-cover event_poster_swiper_slide"
                                                    onerror="this.onerror=null;this.src='{{ asset('assets/images/la-isla-tv/2068.jpg') }}';">
                                            </div>
                                            <div class="sidebar-item-content flex-grow-1">
                                                <h3 class="sidebar-item-title mb-0">LA ISLA 2068</h3>
                                                <a href="https://youtube.com/playlist?list=PL8I-aES2tLGu-Yy2aYXj7wxflQkBrZb0m&si=P4XZhW_Jl470stsQ"
                                                    target="_blank" class="sidebar-item-link">>>
                                                    Voir
                                                    les vidéos</a>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-6 col-md-4 col-lg-12">
                                        <div class="sidebar-item d-flex gap-3">
                                            <div class="sidebar-item-image flex-shrink-0">
                                                <img src="{{ asset('assets/images/la-isla-tv/semaine.jpg') }}"
                                                    alt="LE SON DE LA SEMAINE"
                                                    class="w-100 h-100 object-fit-cover event_poster_swiper_slide"
                                                    onerror="this.onerror=null;this.src='{{ asset('assets/images/la-isla-tv/semaine.jpg') }}';">
                                            </div>
                                            <div class="sidebar-item-content flex-grow-1">
                                                <h3 class="sidebar-item-title mb-0">LE SON DE LA SEMAINE</h3>
                                                <a href="https://youtube.com/playlist?list=PL8I-aES2tLGtWAqCTWo3KilqwfhE0dfTL&si=ZyXU3Me-ZZMZfNtP"
                                                    target="_blank" class="sidebar-item-link">>>
                                                    Voir
                                                    les vidéos</a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </div>
@endsection
@push('web.scripts')
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const laislaTvSwiper = new Swiper('.dreamers-swiper', {
                slidesPerView: 1,
                spaceBetween: 20,
                loop: false,
                autoplay: false,
                // pagination: {
                //     el: '.swiper-pagination',
                //     clickable: true,
                //     type: 'bullets',
                // },
                navigation: {
                    nextEl: '.swiper-button-next',
                    prevEl: '.swiper-button-prev',
                },
                breakpoints: {
                    320: {
                        slidesPerView: 2,
                        spaceBetween: 9,
                    },
                    640: {
                        slidesPerView: 2,
                        spaceBetween: 9,
                    },
                    768: {
                        slidesPerView: 3,
                        spaceBetween: 9,
                    },
                    1024: {
                        slidesPerView: 4,
                        spaceBetween: 9,
                    },
                    1200: {
                        slidesPerView: 6,
                        spaceBetween: 9,
                    },
                    1400: {
                        slidesPerView: 7,
                        spaceBetween: 9,
                    },
                },
                speed: 600,
                grabCursor: true,
                watchOverflow: true,
            });
        });
    </script>
@endpush