@extends('web.layouts.app')

@push('web.styles')
    @vite('resources/css/web/page/news-article.css')
@endpush

@section('content')
    <div class="container">
        <div class="news-article-section">
            @if ($bannerAd)
                <div class="banner-image-1 mt-0">
                    <a href="{{ $bannerAd->ad_link ?? '#' }}" target="_blank" rel="noopener noreferrer">
                        <img src="{{ $bannerAd->getFirstMediaUrl('adverts_image') ?: asset('images/placeholder.jpg') }}"
                            alt="{{ $bannerAd->getFirstMedia('adverts_image')?->name ?? 'Ad banner' }}" class="w-100 h-100"
                            onerror="this.onerror=null;this.src='{{ asset('assets/images/placeholder/home-ads-placeholder.jpg') }}';">
                    </a>
                </div>
            @endif
            <div class="row">
                <div class="col-12 col-md-12 col-lg-8 col-xl-9 pe-1">
                    <div class="article-image-banner article-image-bannerv2">
                        <img src="{{ $article->hasMedia('article_poster')
                            ? ($article->getFirstMediaUrl('article_poster', 'poster_optimized') ?:
                                $article->getFirstMediaUrl('article_poster'))
                            : asset('assets/images/placeholder/article-primary-slot.png') }}"
                            alt="{{ $article->title }}" class="w-100 h-100 object-fit-cover"
                            onerror="this.onerror=null;this.src='{{ asset('assets/images/placeholder/article-primary-slot.png') }}';">
                    </div>
                    <div class="row g-3 g-xxl-0">
                        <div class="col-12 col-xl-8">
                            <div class="ps-0 px-xl-3 article-content-v2">
                                <!-- Category Label -->
                                @if ($article->categories->isNotEmpty())
                                    <p class="news-article-category">
                                        {{ implode(' | ', $article->categories->pluck('name')->toArray()) }}</p>
                                @endif

                                <!-- Title -->
                                <h4 class="dreamers-title text-uppercase">{{ $article->title }}</h4>

                                <!-- Publication Info -->
                                @php
                                    Carbon\Carbon::setLocale('fr');
                                @endphp
                                <p class="dreamers-subtitlev2 dreamers-subtitle">
                                    Publié le {{ $article->published_at->translatedFormat('d F Y') }}
                                    {{-- @if ($article->author)
                                        par {{ $article->author->name }}
                                    @endif --}}
                                </p>

                                <!-- Article Text with Drop Cap -->
                                <div class="about-article">
                                    {!! $article->body !!}
                                </div>

                                <!-- Author Section -->
                                @if ($article->author)
                                    <div class="news-article-author">
                                        <p class="author-name">{{ $article->author->name }}</p>
                                        <p class="author-role">Fondateur de La isla social club</p>
                                    </div>
                                @endif

                                {{-- <div class="related-articles">
                                    @foreach ($relatedArticles as $relatedArticle)
                                        <div class="text-image-1">
                                            <img src="{{ $relatedArticle->hasMedia('article_poster')
                                                ? $relatedArticle->getFirstMediaUrl('article_poster')
                                                : asset('assets/images/placeholder/article-placeholder.jpg') }}"
                                                alt="{{ $relatedArticle->title }}" class="w-100 h-100">
                                            <div class="image-overlay-text">
                                                <div class="text-image-1-content">
                                                    {{ implode(' | ', $relatedArticle->categories->pluck('name')->toArray()) }}
                                                </div>
                                                <h2 class="overlay-title">{{ $relatedArticle->title }}</h2>
                                                <a href="{{ route('web.article.solo', $relatedArticle->slug) }}"
                                                    class="dreamers-card-btn">Lire</a>
                                            </div>
                                        </div>
                                    @endforeach
                                </div> --}}
                            </div>
                            <div class="related-articles swiper related-articles-swiper m-0.artist-info m-0">
                                <div class="swiper-wrapper align-items-center">

                                    @foreach ($relatedArticles as $relatedArticle)
                                        <div class="swiper-slide">
                                            <div class="text-image-1 img-overlay-defult">
                                                <img src="{{ $relatedArticle->hasMedia('article_poster')
                                                    ? ($relatedArticle->getFirstMediaUrl('article_poster', 'poster_optimized') ?:
                                                        $relatedArticle->getFirstMediaUrl('article_poster'))
                                                    : asset('assets/images/placeholder/article-placeholder.jpg') }}"
                                                    alt="{{ $relatedArticle->title }}"
                                                    class="w-100 h-100 related-articles-slider-image"
                                                    onerror="this.onerror=null;this.src='{{ asset('assets/images/placeholder/article-primary-slot.png') }}';">

                                                <div class="image-overlay-text p-0 h-100">
                                                    <div class="category-items-wrapper flex-md-row flex-column w-100 bg-transparent d-flex align-items-md-center align-items-start justify-content-between">
                                                        <div>
                                                            <p class="news-article-category text-white">
                                                                {{ implode(' | ', $relatedArticle->categories->pluck('name')->toArray()) }}
                                                            </p>

                                                            <h2
                                                                class="news-article-titlev2 news-article-title text-white mb-1">
                                                                {{ $relatedArticle->title }}
                                                            </h2>
                                                        </div>

                                                        <a href="{{ route('web.article.solo', $relatedArticle->slug) }}"
                                                            class="dreamers-card-btn py-1 px-3 ms-0 black-btn-default border-white border">Lire</a>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    @endforeach
                                </div>

                                <!-- Optional controls -->
                                <div class="swiper-pagination"></div>
                                <div class="swiper-button-next"></div>
                                <div class="swiper-button-prev"></div>
                            </div>
                        </div>
                        <div class="col-12 col-xl-4">
                            <div class="about-share mt-lg-0 mt-3 about-share-v2 p-2">
                                @include('web.partials.share', ['shareTitle' => 'Partagez cet article'])
                            </div>
                            @if ($events->count() > 0)
                                @php
                                    $event = $events->first(); // Get the first event
                                @endphp
                                
                                @if (($isPopcornCategory ?? false))
                                    {{-- Popcorn category: Show both posters in a swiper slider --}}
                                    <div class="sidebar-section mb-3 new-sidebar sidebar-sectionv2 bg-black pt-2">
                                        <h2 class="sidebar-title">Poster</h2>

                                        <div class="sidebar-items">

                                            <div class="row g-3">

                                                @php
                                                    // Parent category image
                                                    $parentImage = $article->categories->first()?->parent?->categoryImages?->first();
                                                    $parentImageUrl = $parentImage?->getFirstMediaUrl('category_images', 'optimized')
                                                        ?: asset('assets/images/placeholder/event-poster.png');
    
                                                    // Article category image (main one you want)
                                                    $categoryImage = $article->categories->first()?->categoryImages?->first();
                                                    $categoryImageUrl = $categoryImage?->getFirstMediaUrl('category_images', 'optimized')
                                                        ?: $categoryImage?->getFirstMediaUrl('category_images')
                                                        ?: asset('assets/images/placeholder/event-poster.png');
                                                @endphp

                                                <div class="col-6 col-md-3 col-xl-6">
                                                    <div class="sidebar-item d-flex flex-column align-items-center gap-2 mb-0">
                                                        <div class="article-solo-poster flex-shrink-0">
            
                                                            {{-- Image 1 --}}
                                                            <img src="{{ $parentImageUrl }}" 
                                                                alt="{{ $event->title }}" 
                                                                class="">
                                                        </div>
                                                    </div>
                                                </div>

                                                <div class="col-6 col-md-3 col-xl-6">
                                                    <div class="sidebar-item d-flex flex-column align-items-center gap-2 mb-0">
                                                        <div class="article-solo-poster flex-shrink-0">
            
                                                            {{-- Image 2 --}}
                                                            <img src="{{ $categoryImageUrl }}" 
                                                                alt="{{ $event->title }}" 
                                                                class="">
            
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                @else
                                    {{-- Musique and other categories: Show single event poster --}}
                                    <div class="sidebar-section mb-3 new-sidebar sidebar-sectionv2 bg-black pt-2">
                                        <h2 class="sidebar-title">Albums</h2>
                                        <div class="sidebar-items ">
                                            <div class="row g-3">

                                                @php
                                                    // Parent category image
                                                    $parentImage = $article->categories->first()?->parent?->categoryImages?->first();
                                                    $parentImageUrl = $parentImage?->getFirstMediaUrl('category_images', 'optimized')
                                                        ?: asset('assets/images/placeholder/event-poster.png');
    
                                                    // Article category image (main one you want)
                                                    $categoryImage = $article->categories->first()?->categoryImages?->first();
                                                    $categoryImageUrl = $categoryImage?->getFirstMediaUrl('category_images', 'optimized')
                                                        ?: $categoryImage?->getFirstMediaUrl('category_images')
                                                        ?: asset('assets/images/placeholder/event-poster.png');
                                                @endphp

                                                <div class="col-6 col-md-3 col-xl-6">
                                                    <div class="sidebar-item d-flex flex-column align-items-center gap-2 mb-0">
                                                        <div class="article-solo-album flex-shrink-0">
            
                                                            {{-- Image 1 --}}
                                                            <img src="{{ $parentImageUrl }}" 
                                                                alt="{{ $event->title }}" 
                                                                class="">
                                                        </div>
                                                    </div>
                                                </div>

                                                <div class="col-6 col-md-3 col-xl-6">
                                                    <div class="sidebar-item d-flex flex-column align-items-center gap-2 mb-0">
                                                        <div class="article-solo-album flex-shrink-0">
            
                                                            {{-- Image 2 --}}
                                                            <img src="{{ $categoryImageUrl }}" 
                                                                alt="{{ $event->title }}" 
                                                                class="">
            
                                                        </div>
                                                    </div>
                                                </div>

                                                {{-- <img src="{{ $event->getFirstMediaUrl('event_poster', 'poster_optimized') ?: ($event->getFirstMediaUrl('event_poster') ?: asset('assets/images/placeholder/event-poster.png')) }}"
                                                    alt="{{ $event->title }}" class="w-100 h-100 article-event-poster-img"> --}}
                                            </div>
                                        </div>
                                    </div>
                                @endif
                            @endif
                            <div class="about-sidebar about-sidebar-v2">
                                <div class="sidebar-section">
                                    <h2 class="sidebar-title">FAN ZONE</h2>
                                    <div class="sidebar-items">
                                        <div class="row g-3">
                                            @php
                                                $fanZoneArtists = collect();

                                                // First, add article artists (up to 6)
                                                if ($article->artists->count() > 0) {
                                                    $fanZoneArtists = $article->artists->take(6);
                                                }

                                                // If we have less than 6, fill remaining from $artists
                                                if ($fanZoneArtists->count() < 6) {
                                                    $remaining = 6 - $fanZoneArtists->count();
                                                    $articleArtistIds = $fanZoneArtists->pluck('id')->toArray();
                                                    $additionalArtists = $artists
                                                        ->whereNotIn('id', $articleArtistIds)
                                                        ->take($remaining);
                                                    $fanZoneArtists = $fanZoneArtists->concat($additionalArtists);
                                                }
                                            @endphp

                                            @foreach ($fanZoneArtists->take(2) as $artist)
                                                <div class="col-6 col-md-3 col-xl-6">
                                                    <div class="sidebar-item d-flex flex-column align-items-center gap-2 mb-0">
                                                        <div class="sidebar-item-image flex-shrink-0">
                                                            <a href="{{ route('web.artistes.solo', $artist->slug) }}">
                                                                <img src="{{ $artist->getFirstMediaUrl('artist_avatar') }}"
                                                                alt="{{ $artist->name }}" class="">
                                                            </a>
                                                        </div>
                                                        <div class="sidebar-item-content flex-grow-1">
                                                            <h3 class="sidebar-item-title item-title-v2">
                                                                {{ \Illuminate\Support\Str::limit($artist->name, 18) }}
                                                            </h3>
                                                            <a href="{{ route('web.artistes.solo', $artist->slug) }}"
                                                                class="sidebar-item-link item-link-v2">
                                                                >> Voir la fiche
                                                            </a>
                                                        </div>
                                                    </div>
                                                </div>
                                            @endforeach
                                        </div>
                                    </div>
                                </div>
                            </div>

                        </div>
                    </div>
                </div>
                <div class="col-12 col-md-12 col-lg-4 col-xl-3">
                    <div class="buzz-sidebar buzz-sidebarv2">
                        <h2 class="buzz-title">TOP POPCORN</h2>
                        <div class="buzz-entries">
                            @foreach ($relatedArticles as $index => $relatedArticle)
                                <div class="buzz-entry">
                                    <div class="buzz-number">{{ $index + 1 . '.' }}</div>
                                    <div class="buzz-content">
                                        <a href="{{ route('web.article.solo', $relatedArticle->slug) }}"
                                            class="text-decoration-none text-white">
                                            <h3 class="buzz-headline">{{ $relatedArticle->title }}
                                            </h3>
                                        </a>
                                        <div class="buzz-clicks">{{ ($relatedArticle?->views->views ?? 0) . ' Clics' }}
                                        </div>
                                    </div>
                                </div>
                                <div class="buzz-divider"></div>
                            @endforeach
                        </div>
                    </div>

                    @if ($sidebarAdTop)
                        <div class="banner-image-2 banner-image-v2">
                            <a href="{{ $sidebarAdTop->ad_link ?? '#' }}" target="_blank" rel="noopener noreferrer">
                                <img src="{{ $sidebarAdTop->getFirstMediaUrl('adverts_image') ?: asset('images/placeholder.jpg') }}"
                                    alt="{{ $sidebarAdTop->getFirstMedia('adverts_image')?->name ?? 'Ad banner' }}"
                                    class="w-100 h-100"
                                    onerror="this.onerror=null;this.src='{{ asset('assets/images/placeholder/home-ads-placeholder.jpg') }}';">
                            </a>
                        </div>
                    @endif

                    <!-- Subscribe Bar -->
                    <div class="sidebar-subscribe">
                        <div class="d-flex align-items-center flex-xxl-row flex-column justify-content-between gap-3 gap-xxl-1 p-3">
                            <div class="d-flex align-items-center gap-3">
                                <div class="subscribe-icon-wrapper">
                                    <i class="bi bi-youtube text-white"></i>
                                </div>
                                <div>
                                    <div class="subscribe-title">LA ISLA TV</div>
                                    <div class="subscribe-count">11,200 subscribers</div>
                                </div>
                            </div>
                            <a href="{{ $general->youtube_link }}" target="_blank" class="subscribe-btn">SUBSCRIBE</a>
                        </div>
                    </div>


                    <div class="swiper dreamers-swiper">
                        <div class="swiper-wrapper">
                            @foreach ($upcomingEvents as $event)
                                <div class="swiper-slide">
                                    <div class="banner-image-3">
                                        <a href="#" target="_blank" rel="noopener noreferrer">
                                            <img src="{{ $event->hasMedia('event_poster') ? $event->getFirstMediaUrl('event_poster') : asset('assets/images/placeholder/event-upcoming.png') }}"
                                                alt="Image Banner"
                                                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>
                            @endforeach
                        </div>
                    </div>

                    @if ($sidebarAdBottom)
                        <div class="banner-image-2 mt-3">
                            <a href="{{ $sidebarAdBottom->ad_link ?? '#' }}" target="_blank" rel="noopener noreferrer">
                                <img src="{{ $sidebarAdBottom->getFirstMediaUrl('adverts_image') ?: asset('images/placeholder.jpg') }}"
                                    alt="{{ $sidebarAdBottom->getFirstMedia('adverts_image')?->name ?? 'Ad banner' }}"
                                    class="w-100 h-100"
                                    onerror="this.onerror=null;this.src='{{ asset('assets/images/placeholder/home-ads-placeholder.jpg') }}';">
                            </a>
                        </div>
                    @endif

                    {{-- <div class="banner-image-4">
                        <a href="#" target="_blank" rel="noopener noreferrer">
                            <img src="{{ asset('assets/images/event-poster.jpg') }}" alt="Les Artistes"
                                class="w-100 h-auto">
                        </a>
                    </div> --}}
                </div>
            </div>
        </div>
    </div>
@endsection
@push('web.scripts')
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const laislaTvSwiper = new Swiper('.dreamers-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: 2,
                        spaceBetween: 10,
                    },
                    1024: {
                        slidesPerView: 2,
                        spaceBetween: 10,
                    },
                    1400: {
                        slidesPerView: 1,
                        spaceBetween: 0,
                    },
                },
                speed: 600,
                grabCursor: true,
                watchOverflow: true,
            });

            // Popcorn category poster swiper
            @if ($isPopcornCategory ?? false)
                const popcornPosterSwiper = new Swiper('.popcorn-poster-swiper', {
                    slidesPerView: 1,
                    spaceBetween: 0,
                    loop: true,
                    autoplay: {
                        delay: 3000,
                        disableOnInteraction: false,
                        pauseOnMouseEnter: true,
                    },
                    pagination: {
                        el: '.swiper-pagination',
                        clickable: true,
                        type: 'bullets',
                    },
                    navigation: {
                        nextEl: '.swiper-button-next',
                        prevEl: '.swiper-button-prev',
                    },
                    speed: 600,
                    grabCursor: true,
                    watchOverflow: true,
                });
            @endif

            new Swiper('.related-articles-swipe', {
                loop: true,
                spaceBetween: 20,

                slidesPerView: 1,

                autoplay: {
                    delay: 3500,
                    disableOnInteraction: false,
                    pauseOnMouseEnter: true,
                },
                pagination: false,
                navigation: false,

                breakpoints: {
                    640: {
                        slidesPerView: 1,
                    },
                    1024: {
                        slidesPerView: 1,
                    },
                }
            });
        });
    </script>
@endpush