@extends('web.layouts.app')

@push('web.styles')
    @vite('resources/css/web/page/talent.css')
    @vite('resources/css/web/page/availability-calendar.css')
@endpush

@section('content')
    <section>
        <div class="container">
            <div class="home-section">
                <div class="row mb-34px">
                    <div class="col-lg-8">
                        <div class="overflow-hidden">
                            <img src="{{ $talent->getFirstMediaUrl('talent_profile_pic') }}" alt="{{ $talent->user->name }}"
                                class="img-fluid">
                        </div>
                    </div>
                    <div class="col-lg-4">
                        <div class="talent-home-sidebar-card">
                            <div class="card-body p-0">
                                <div class="mb-8">
                                    <h5 class="title mb-0">NOM DE L'ARTISTE</h5>
                                    <p class="value mb-0 talent-title">{{ $talent->user->name }}</p>
                                </div>
                                <div class="mb-8">
                                    <h5 class="title mb-0"><span class="talent-pay-text">P</span>AYS</h5>
                                    <p class="value mb-0">{{ $talent->country }}</p>
                                </div>
                                <div class="mb-8">
                                    <h5 class="title mb-0">ÂGE</h5>
                                    <p class="value mb-0">{{ $talent->age }} ANS</p>
                                </div>
                                <div class="mb-8">
                                    <h5 class="title mb-0">STYLE</h5>
                                    <p class="value mb-0">{{ $talent->style }}</p>
                                </div>
                                <div class="mb-8">
                                    <h5 class="title mb-0">AGENCE</h5>
                                    <p class="value mb-0">LA ISLA TALENTS</p>
                                </div>
                                <div class="mb-8">
                                    <h5 class="title mb-0">BOOKER</h5>
                                    <p class="value mb-0">{{ $talent->booker }}</p>
                                </div>
                                <div class="book-now-container">
                                    <a href="mailto:anais@laislasocialclub.com?subject={{ urlencode('Booking Request for ' . ($talent->user->name ?? 'artist')) }}"
                                        class="talent-artist-btn rounded-0 d-inline-block">BOOK NOW</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row mb-34px">
                    <div class="col-12 col-md-7 col-lg-8 col-xl-8 col-xxl-8">
                        <div class="talnt-home-content ps-17px">
                            <h5 class="sub-title">
                                {{ $talent->bio_title }}
                            </h5>
                            <div class="description">
                                {!! $talent->bio_text !!}
                            </div>
                        </div>
                    </div>
                    <div class="col-12 col-md-5 col-lg-4 col-xl-4 col-xxl-4">
                        <!-- Availability Calendar -->
                        <div class="mb-17px">
                            <div id="availability-calendar"></div>
                        </div>

                        <!-- Swiper -->
                        <div class="swiper right-sidebar-img-slider-main">
                            <div class="swiper-wrapper">
                                @forelse ($talent->getMedia('slideshow') as $media)
                                    <div class="swiper-slide">
                                        <div class="w-100">
                                            <img src="{{ $media->getUrl() }}" alt="slideshow-image" class="img-fluid w-100">
                                        </div>
                                    </div>
                                @empty
                                    <div class="swiper-slide">
                                        <div class="w-100">
                                            <img src="{{ asset('assets/images/placeholder/event-finished.png') }}"
                                                alt="placeholder" class="img-fluid w-100">
                                        </div>
                                    </div>
                                @endforelse
                            </div>

                            <!-- Optional controls -->
                            <div class="swiper-pagination"></div>
                            <div class="swiper-button-next"></div>
                            <div class="swiper-button-prev"></div>
                        </div>
                    </div>
                </div>
                @if (count($talent->youtube_links) > 0)
                    <div class="row mb-34px">
                        <div class="col-12">
                            <div class="swiper laisla-tv-swiper">
                                <div class="swiper-wrapper">
                                    @php
                                        function isYoutubeUrl($url)
                                        {
                                            return preg_match('/(youtube\.com|youtu\.be)/i', $url);
                                        }
                                    @endphp
                                    @php
                                        $videos = collect($talent->youtube_links);
                                        $videoCount = $videos->count();
                                    @endphp
                                    @foreach ($videos as $video)
                                        @php
                                            $videoUrl = $video['url'];
                                        @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="laisla-tv-swiper-button-next swiper-button-next"></div>
                                <div class="laisla-tv-swiper-button-prev swiper-button-prev"></div>
                                <div class="swiper-pagination"></div>
                            </div>
                        </div>
                    </div>
                @endif
                <div class="row">
                    <div class="col-12 col-md-7 col-lg-8 col-xl-8 col-xxl-8">
                        <div class="row">
                            @foreach ($talent->articles as $index => $article)
                                {{-- <div class="col-12 @if ($index > 0) mt-article-spacing @endif"> --}}
                                    <div class="article-card mb-article-spacing">
                                        <div class="row g-0">
                                            <div class="col-12 col-md-5 col-lg-4 col-xl-5">
                                                <div class="article-image-wrapper">
                                                    <img src="{{ $article->hasMedia('article_poster')
                                                        ? ($article->getFirstMediaUrl('article_poster', 'poster_optimized') ?:
                                                            $article->getFirstMediaUrl('article_poster'))
                                                        : asset('assets/images/placeholder/article-placeholder.jpg') }}"
                                                        alt="{{ $article->title }}" class="article-image">
                                                </div>
                                            </div>
                                            <div class="col-12 col-md-7 col-lg-8 col-xl-7">
                                                <div class="article-card-content">
                                                    {{-- <p class="article-subtitle">
                                                        {{ implode(' | ', $article->categories->pluck('name')->toArray()) }}
                                                    </p> --}}
                                                    <p class="article-category mb-0">
                                                        @php
                                                            $categoryNames = [];
                                                            foreach ($article->categories as $category) {
                                                                if ($category->parent && $category->parent->name) {
                                                                    // Show parent | child format
                                                                    $categoryNames[] = $category->name  . ' | ' . $category->parent->name;
                                                                } else {
                                                                    // No parent, just show category name
                                                                    $categoryNames[] = $category->name;
                                                                }
                                                            }
                                                        @endphp
                                                        {{ implode(' | ', $categoryNames) }}
                                                    </p>
                                                    <h2 class="article-title">{{ $article->title }}</h2>
                                                    <p class="article-text">
                                                        {{ Str::limit(strip_tags($article->excerpt ?? ($article->body ?? '')), 220) }}
                                                    </p>
                                                    <a href="{{ route('web.article.solo', $article->slug) }}"
                                                        class="read-more-btn">
                                                        LIRE
                                                    </a>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                {{-- </div> --}}
                            @endforeach
                        </div>
                    </div>
                    <div class="col-12 col-md-5 col-lg-4 col-xl-4 col-xxl-4">
                        <div class="artist-promo-container">
                            <!-- FOLLOW SECTION -->
                            @if (count($talent->socials) > 0)
                                <div class="promo-section follow-section">
                                    <div class="section-label">FOLLOW</div>
                                    <div class="social-icons-container">
                                        @foreach ($talent->socials as $social)
                                            @php $platform = $social['platform']; @endphp
                                            <a href="{{ $social['url'] }}" target="_blank"
                                                class="social-icon social-iconv2 {{ $platform }}"
                                                title="{{ ucfirst($platform) }}">
                                                @include('web.partials.social-svgs', [
                                                    'platform' => $platform,
                                                ])
                                            </a>
                                        @endforeach
                                    </div>
                                </div>
                            @endif

                            <!-- RELEASE SECTION -->
                            <div class="promo-section release-section">
                                <div class="section-label">RELEASE</div>
                                @php
                                    $releaseMedia = $talent->getMedia('release_album_cover');
                                    $albumCount = $releaseMedia->count();
                                    $placeholder = asset('assets/images/placeholder/artist.png');
                                @endphp

                                <div class="release-card">
                                    @if ($albumCount > 1)
                                        <div class="swiper albumSwiper">
                                            <div class="swiper-wrapper">
                                                @foreach ($releaseMedia as $media)
                                                    <div class="swiper-slide">
                                                        <a href="{{ $talent->release_cover_image_link ?? '#' }}" target="_blank" rel="noopener noreferrer">
                                                            <div class="album-cover">
                                                                <img src="{{ $media->getUrl() }}" alt="Album Cover"
                                                                    class="album-image">

                                                                    @if($talent->release_cover_image_link)
                                                                        <div class="album-overlay">
                                                                            {{-- <span class="album-label">LABELLE</span>
                                                                            <span class="album-artist">SOMMERSIDE</span> --}}
                                                                        </div>
                                                                    @endif
                                                            </div>
                                                        </a>
                                                    </div>
                                                @endforeach
                                            </div>
                                        </div>
                                    @else
                                        <a href="{{ $talent->release_cover_image_link ?? '#' }}" target="_blank" rel="noopener noreferrer">
                                            
                                            <div class="album-cover">
                                                <img src="{{ $talent->getFirstMediaUrl('release_album_cover') ?: $placeholder }}"
                                                    alt="Album Cover" class="album-image">

                                                @if($talent->release_cover_image_link)
                                                    <div class="album-overlay">
                                                        {{-- <span class="album-label">LABELLE</span>
                                                        <span class="album-artist">SOMMERSIDE</span> --}}
                                                    </div>
                                                @endif
                                            </div>
                                        </a>
                                    @endif
                                </div>

                                <!-- DOWNLOAD SECTION -->
                                <div class="promo-section">
                                    <div class="section-label">DOWNLOAD</div>
                                </div>

                                <!-- PRESS KIT SECTION -->
                                @if ($talent->hasMedia('press_kit'))
                                    <a href="{{ $talent->getFirstMedia('press_kit')->getUrl() }}" class="press-kit-btn"
                                        download>
                                        PRESS KIT
                                    </a>
                                @endif
                            </div>
                        </div>
                    </div>

                    <div class="artist-grid-container mb-4">
                        @if ($talents->count() > 0)
                            <div class="artist-grid pt-2">
                                @foreach ($talents as $key => $value)
                                    <div class="artist-item">
                                        <a href="{{ route('web.talent.solo', $value->slug) }}">
                                            <div class=" artist-card artist-cardv2">
                                                <img src="{{ $value->getFirstMediaUrl('talent_profile_pic') ?: asset('assets/images/placeholder/article-placeholder.jpg') }}"
                                                    alt="{{ $value->user->name }}" class="w-100 img-fluid">

                                                <div class="artist-name-defult">
                                                    <p class="mb-0 fw-bold">
                                                        {{ $value->user->name ?? 'Nom du talent' }}
                                                    </p>
                                                </div>

                                                <div class="artist-name">
                                                    <span>{{ $value->user->name ?? 'Nom du talent' }}</span>
                                                    <a href="{{ route('web.talent.solo', $value->slug) }}"
                                                        class="btn artist-info-btn">
                                                        INFOS & BOOKING
                                                    </a>
                                                </div>
                                            </div>
                                        </a>
                                    </div>
                                @endforeach
                            </div>
                        @endif
                    </div>
                    <div class="social-share mb-0 ps-0">
                        <div class="d-flex align-items-center justify-content-start pb-3 share-section">
                            <p class="share-label mb-0">PARTAGEZ CETTE PAGE</p>
                            <button id="shareBtn" class="share-button border-0 bg-transparent"
                                aria-label="abcx" title="abc">
                                {{-- <img src="{{ asset('assets/images/share.png') }}" alt="Share Icon" class="w-100 h-100"> --}}
                                <img src="../assets/images/share.png" alt="" class="w-100 h-100">
                            </button>
                        </div>
                    </div>
                    {{-- @include('web.partials.share', ['shareTitle' => 'PARTAGEZ CETTE PAGE']) --}}
                </div>
            </div>
    </section>
@endsection
@push('web.scripts')
    @vite('resources/js/web/availability-calendar.js')
    <script>
        document.addEventListener('DOMContentLoaded', function() {

            // --- Availability Calendar ---
            // Real data from backend
            const calendarEl = document.getElementById('availability-calendar');
            if (calendarEl) {
                @php
                    $bookingEvents = $talent->bookings
                        ->map(function ($booking) {
                            return [
                                'date' => $booking->booking_date->format('Y-m-d'),
                                'status' => $booking->status->value,
                                'price' => $booking->formatted_price,
                            ];
                        })
                        ->values();
                @endphp

                const events = @json($bookingEvents);

                new AvailabilityCalendar(calendarEl, {
                    events: events,
                    defaultPrice: '-',
                    defaultStatus: 'available',
                    startMonth: new Date().getMonth(),
                    startYear: new Date().getFullYear(),
                    weekStartsOn: 1
                });
            }

            const laislaTvSwiperEl = document.querySelector('.laisla-tv-swiper');
            if (!laislaTvSwiperEl) return;

            const swiperWrapper = laislaTvSwiperEl.querySelector('.swiper-wrapper');
            const slides = swiperWrapper.querySelectorAll('.swiper-slide');
            const slideCount = slides.length;

            if (slideCount > 0 && slideCount < 6) {
                const slidesArray = Array.from(slides);
                slidesArray.forEach(slide => {
                    const clonedSlide = slide.cloneNode(true);
                    swiperWrapper.appendChild(clonedSlide);
                });
            }

            const nextButton = laislaTvSwiperEl.querySelector('.laisla-tv-swiper-button-next');
            const prevButton = laislaTvSwiperEl.querySelector('.laisla-tv-swiper-button-prev');
            const paginationEl = laislaTvSwiperEl.querySelector('.swiper-pagination');

            const laislaTvSwiper = new Swiper('.laisla-tv-swiper', {
                slidesPerView: 1,
                spaceBetween: 20,
                loop: true,
                loopAdditionalSlides: 2,
                autoplay: {
                    delay: 3000,
                    disableOnInteraction: false,
                    pauseOnMouseEnter: true,
                },
                pagination: false,
                // pagination: paginationEl ? {
                //     el: paginationEl,
                //     clickable: true,
                //     type: 'bullets',
                // } : false,
                navigation: (nextButton && prevButton) ? {
                    nextEl: nextButton,
                    prevEl: prevButton,
                } : false,
                breakpoints: {
                    320: {
                        slidesPerView: 1,
                        spaceBetween: 10,
                    },
                    640: {
                        slidesPerView: 2,
                        spaceBetween: 10,
                    },
                    768: {
                        slidesPerView: 3,
                        spaceBetween: 10,
                    },
                    1024: {
                        slidesPerView: 3,
                        spaceBetween: 10,
                    },

                    1400: {
                        slidesPerView: 2,
                        spaceBetween: 17,
                    },
                },
                speed: 600,
                grabCursor: true,
                watchOverflow: false,
            });

            // Pause autoplay when video starts playing
            const videoElements = laislaTvSwiperEl.querySelectorAll('video, iframe');
            videoElements.forEach(video => {
                // For regular video elements
                if (video.tagName === 'VIDEO') {
                    video.addEventListener('play', function() {
                        laislaTvSwiper.autoplay.stop();
                    });
                    video.addEventListener('pause', function() {
                        laislaTvSwiper.autoplay.start();
                    });
                }

                // For YouTube iframes - pause on interaction (click or hover)
                if (video.tagName === 'IFRAME' && video.src.includes('youtube.com')) {
                    const videoContainer = video.closest('.laisla-tv-card');
                    if (videoContainer) {
                        // Stop autoplay when user interacts with the video
                        videoContainer.addEventListener('click', function() {
                            laislaTvSwiper.autoplay.stop();
                        });
                        videoContainer.addEventListener('mouseenter', function() {
                            laislaTvSwiper.autoplay.stop();
                        });
                    }
                }
            });


        });

        const swiper = new Swiper('.right-sidebar-img-slider-main', {
            slidesPerView: 1,
            spaceBetween: 10,
            loop: true,
        });

        const albumSwiperEl = document.querySelector('.albumSwiper');
        if (albumSwiperEl) {
            const albumSwiper = new Swiper('.albumSwiper', {
                slidesPerView: 1,
                loop: true,
                effect: 'fade',
                fadeEffect: {
                    crossFade: true
                },
                autoplay: {
                    delay: 3000,
                    disableOnInteraction: false,
                },
            });
        }
    </script>
@endpush