@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">
                    <div class="article-image-banner">
                        <img src="{{ $article->hasMedia('article_cover')
                            ? $article->getFirstMediaUrl('article_cover')
                            : asset('assets/images/placeholder/article-primary-slot.png') }}"
                            alt="{{ $article->title }}" class="w-100 h-100"
                            onerror="this.onerror=null;this.src='{{ asset('assets/images/placeholder/article-primary-slot.png') }}';">
                    </div>
                    <div class="row g-4">
                        <div class="col-12 col-xl-8">
                            <div class="news-article-content">
                                <!-- Category Label -->
                                @if ($article->categories->isNotEmpty())
                                    <p class="news-article-category">
                                        {{ implode(' | ', $article->categories->pluck('name')->toArray()) }}</p>
                                @endif

                                <!-- Title -->
                                <h1 class="news-article-title">{{ $article->title }}</h1>

                                <!-- Publication Info -->
                                <p class="news-article-meta">
                                    Publié le {{ $article->published_at->format('d F Y') }}
                                    @if ($article->author)
                                        par {{ $article->author->name }}
                                    @endif
                                </p>
                                <!-- Article Text with Drop Cap -->
                                <div class="news-article-text">
                                    {!! $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 class="related-articles swiper related-articles-swiper">
                                    <div class="swiper-wrapper">

                                        @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')
                                                        : asset('assets/images/placeholder/article-placeholder.jpg') }}"
                                                        alt="{{ $relatedArticle->title }}" class="w-100 h-100"
                                                        onerror="this.onerror=null;this.src='{{ asset('assets/images/placeholder/article-primary-slot.png') }}';">

                                                    <div
                                                        class="image-overlay-text d-flex flex-column justify-content-end p-4 h-100">
                                                        <p class="news-article-category text-white">
                                                            {{ implode(' | ', $relatedArticle->categories->pluck('name')->toArray()) }}
                                                        </p>

                                                        <h1 class="news-article-title text-white">
                                                            {{ $relatedArticle->title }}
                                                        </h1>

                                                        <a href="{{ route('web.article.solo', $relatedArticle->slug) }}"
                                                            class="dreamers-card-btn ms-0">Lire</a>
                                                    </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>
                        <div class="col-12 col-xl-4">
                            <div class="about-share border-0">
                                <div class="d-flex justify-content-start align-items-center gap-3">
                                    <p class="share-label mb-0 pt-2">Partagez cet article</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>
                            @if ($article->artists->count() > 0)
                                <div class="about-sidebar">
                                    <div class="sidebar-section">
                                        <h2 class="sidebar-title">FAN ZONE</h2>
                                        <div class="sidebar-items">
                                            <div class="row g-3">
                                                @foreach ($article->artists as $artist)
                                                    <div class="col-6 col-md-3 col-xl-6">
                                                        <div
                                                            class="sidebar-item d-flex flex-column align-items-center gap-3">
                                                            <div class="sidebar-item-image flex-shrink-0">
                                                                <img src="{{ $artist->image_url ?? '' }}"
                                                                    alt="{{ $artist->name }}" class="w-100 h-100">
                                                            </div>
                                                            <div class="sidebar-item-content flex-grow-1">
                                                                <h3 class="sidebar-item-title">{{ $artist->name }}</h3>
                                                                <a href="{{ route('web.artistes.solo', $artist->slug) }}"
                                                                    class="sidebar-item-link">>> Voir la
                                                                    fiche</a>
                                                            </div>
                                                        </div>
                                                    </div>
                                                @endforeach
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            @else
                                <div class="about-sidebar">
                                    <div class="sidebar-section">
                                        <h2 class="sidebar-title">FAN ZONE</h2>
                                        <div class="sidebar-items">
                                            <div class="row g-3">
                                                @for ($i = 0; $i < 6; $i++)
                                                    <div class="col-6 col-md-3 col-xl-6">
                                                        <div
                                                            class="sidebar-item d-flex flex-column align-items-center gap-3">
                                                            <div class="sidebar-item-image flex-shrink-0">
                                                                <img src="{{ asset('assets/images/placeholder/article-primary-slot.png') }}"
                                                                    alt="" class="w-100 h-100">
                                                            </div>
                                                            <div class="sidebar-item-content flex-grow-1">
                                                                <h3 class="sidebar-item-title"></h3>
                                                                <a href="" class="sidebar-item-link">>> Voir la
                                                                    fiche</a>
                                                            </div>
                                                        </div>
                                                    </div>
                                                @endfor
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            @endif
                        </div>
                    </div>
                </div>
                <div class="col-12 col-md-12 col-lg-4 col-xl-3">
                    <div class="buzz-sidebar">
                        <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 ($bannerAd)
                        <div class="banner-image-2">
                            <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

                    <!-- Subscribe Bar -->
                    <div class="sidebar-subscribe">
                        <div class="d-flex align-items-center 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 ($events 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 ($bannerAd)
                        <div class="banner-image-2">
                            <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="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: 1,
                        spaceBetween: 10,
                    },
                    1024: {
                        slidesPerView: 1,
                        spaceBetween: 10,
                    },
                    1400: {
                        slidesPerView: 1,
                        spaceBetween: 0,
                    },
                },
                speed: 600,
                grabCursor: true,
                watchOverflow: true,
            });

            new Swiper('.related-articles-swiper', {
                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