@extends('layouts.app')

@section('content')
    <!-- Hero Section: Slider -->
    <section class="relative bg-gray-900 py-12">
        <div class="container mx-auto px-4">
            @if(isset($categories) && $categories->isNotEmpty())
                <div class="swiper hero-slider" aria-label="Featured Services Slider">
                    <div class="swiper-wrapper">
                        @php
                            // Prioritize featured categories for the slider
                            $featuredCategories = $categories->where('featured_item', 1)->take(9);
                            $nonFeaturedCategories = $categories->where('featured_item', 0)->take(9);
                            $sliderCategories = $featuredCategories->merge($nonFeaturedCategories)->chunk(3);
                        @endphp
                        @foreach($sliderCategories as $categoryGroup)
                            <div class="swiper-slide">
                                <div class="flex flex-col lg:flex-row gap-6">
                                    <!-- Large Feature Card -->
                                    <div class="lg:w-2/3 w-full">
                                        <x-category-card
                                            :category="$categoryGroup->first()"
                                            size="large"
                                            heightOverride="h-80 lg:h-96"
                                            class="shadow-2xl"
                                        />
                                    </div>
                                    <!-- Small Cards -->
                                    <div class="lg:w-1/3 w-full flex flex-col gap-6">
                                        @foreach($categoryGroup->slice(1) as $category)
                                            <x-category-card
                                                :category="$category"
                                                size="small"
                                                heightOverride="h-36 lg:h-40"
                                                class="shadow-lg"
                                            />
                                        @endforeach
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    </div>
                    <!-- Slider Navigation -->
                    <div class="swiper-button-prev text-white bg-gray-800 rounded-full p-2 opacity-75 hover:opacity-100 transition" aria-label="Previous slide"></div>
                    <div class="swiper-button-next text-white bg-gray-800 rounded-full p-2 opacity-75 hover:opacity-100 transition" aria-label="Next slide"></div>
                    <div class="swiper-pagination mt-4"></div>
                </div>
            @else
                <div class="text-center py-12">
                    <p class="text-gray-300 text-lg">No services available at the moment.</p>
                    <a href="{{ route('inquire') }}" class="mt-4 inline-block bg-yellow-500 text-black px-6 py-3 rounded-full font-semibold hover:bg-yellow-600 transition">Contact Us</a>
                </div>
            @endif
        </div>
    </section>

    <!-- Banner Section -->
    <section class="bg-gradient-to-r from-gray-800 via-gray-600 to-yellow-600 bg-[url('https://www.dallasvip.net/images/bg-welcome.jpg')] bg-blend-overlay text-black py-6 border border-gradient-to-r from-gray-700 to-gray-500 shadow-lg">
        <div class="container mx-auto px-4 text-center">
            <h2 class="text-white text-2xl md:text-3xl font-bold mb-2 text-shadow">Dallas VIP: Dallas' Premiere Destination Management Company</h2>
            <p class="text-white text-lg md:text-xl text-shadow">Dallas VIP specializes in group event planning. We provide a VIP "hands on" dedicated event coordinator to secure the success of your party. From formulation to finale, Dallas VIP will be there every step of the way to create memories of a lifetime.</p>
            <a href="{{ route('inquire') }}" class="mt-4 inline-block bg-gradient-to-r from-yellow-500 to-yellow-600 text-black px-6 py-3 rounded-full font-semibold hover:from-yellow-600 hover:to-yellow-700 transition">Plan Your Event</a>
        </div>
    </section>

    <!-- YouTube Video Slider Section -->
    @php
        // Fetch active categories and their active children with non-null YouTube URLs
        $videoCategories = $categories->where('active', true)
            ->whereNotNull('youtube')
            ->merge(
                $categories->where('active', true)
                    ->flatMap(function ($category) {
                        return $category->children()->whereNotNull('youtube')->get();
                    })
            )
            ->take(9); // Take up to 9 to allow multiple thumbnails
    @endphp
    @if($videoCategories->isNotEmpty())
        <section class="bg-white">
            <div class="mx-auto max-w-2xl px-4 py-16 sm:px-6 sm:py-24 lg:max-w-7xl lg:px-8">
                <h2 class="text-4xl font-bold text-gray-800 text-center mb-12 animate-fade-in font-display">Discover DallasVIP in Action</h2>
                <div class="lg:grid lg:grid-cols-2 lg:items-start lg:gap-x-8">
                    <!-- Video gallery -->
                    <div class="flex flex-col-reverse">
                        <!-- Video selector -->
                        <div class="mx-auto mt-6 hidden w-full max-w-2xl sm:block lg:max-w-none">
                            <div class="grid grid-cols-4 gap-6" aria-orientation="horizontal" role="tablist">
                                @foreach($videoCategories as $index => $category)
                                    <button id="tabs-1-tab-{{ $index + 1 }}" class="relative flex h-24 cursor-pointer items-center justify-center rounded-md bg-white text-sm font-medium text-gray-900 uppercase hover:bg-gray-50 focus:ring-3 focus:ring-indigo-500/50 focus:ring-offset-4 focus:outline-hidden {{ $index === 0 ? 'ring-indigo-500' : '' }}"
                                            aria-controls="tabs-1-panel-{{ $index + 1 }}" role="tab" type="button"
                                            onclick="updateVideoAndText('tabs-1-panel-{{ $index + 1 }}', '{{ $category->name }}', '{{ addslashes($category->description) }}', '{{ preg_replace('/^https?:\/\/(www\.)?(youtube\.com|youtu\.be)\/(watch\?v=)?([^\s&]+).*$/', '$4', $category->youtube) }}')">
                                        <span class="sr-only">{{ $category->name }} Video</span>
                                        <span class="absolute inset-0 overflow-hidden rounded-md">
                                            <img src="https://img.youtube.com/vi/{{ preg_replace('/^https?:\/\/(www\.)?(youtube\.com|youtu\.be)\/(watch\?v=)?([^\s&]+).*$/', '$4', $category->youtube) }}/hqdefault.jpg" alt="{{ $category->name }} Thumbnail" class="size-full object-cover" />
                                        </span>
                                        <span class="pointer-events-none absolute inset-0 rounded-md ring-2 ring-transparent ring-offset-2" aria-hidden="true"></span>
                                    </button>
                                @endforeach
                            </div>
                        </div>

                        <div>
                            <!-- Tab panel, show/hide based on tab state -->
                            @foreach($videoCategories as $index => $category)
                                <div id="tabs-1-panel-{{ $index + 1 }}" aria-labelledby="tabs-1-tab-{{ $index + 1 }}" role="tabpanel" tabindex="0" class="{{ $index === 0 ? 'block' : 'hidden' }}">
                                    <div class="aspect-square w-full object-cover sm:rounded-lg">
                                        <iframe
                                            id="video-iframe-{{ $index + 1 }}"
                                            class="w-full h-full"
                                            src="{{ preg_replace('/^https?:\/\/(www\.)?(youtube\.com|youtu\.be)\/(watch\?v=)?([^\s&]+).*$/', 'https://www.youtube.com/embed/$4', $category->youtube) }}"
                                            title="{{ $category->name }} Video"
                                            frameborder="0"
                                            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
                                            allowfullscreen
                                            loading="lazy"
                                        ></iframe>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    </div>

                    <!-- Video info -->
                    <div class="mt-10 px-4 sm:mt-16 sm:px-0 lg:mt-0">
                        <h1 id="video-title" class="text-3xl font-bold tracking-tight text-gray-900">{{ $videoCategories->first()->name }}</h1>

                        <div class="mt-3">
                            <h2 class="sr-only">Video information</h2>
                            <p id="video-description" class="text-base text-gray-700">{{ $videoCategories->first()->description }}</p>
                        </div>

                        <section aria-labelledby="details-heading" class="mt-12">
                            <h2 id="details-heading" class="sr-only">Additional details</h2>
                            <div class="divide-y divide-gray-200 border-t border-gray-200">
                                <div>
                                    <h3>
                                        <button type="button" class="group relative flex w-full items-center justify-between py-6 text-left" aria-controls="detail-0" aria-expanded="false">
                                            <span class="text-sm font-medium text-gray-900">Video Features</span>
                                            <span class="ml-6 flex items-center">
                                                <svg class="block size-6 text-gray-400 group-hover:text-gray-500" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
                                                    <path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
                                                </svg>
                                                <svg class="hidden size-6 text-indigo-400 group-hover:text-indigo-500" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
                                                    <path stroke-linecap="round" stroke-linejoin="round" d="M5 12h14" />
                                                </svg>
                                            </span>
                                        </button>
                                    </h3>
                                    <div class="pb-6" id="detail-0">
                                        <ul role="list" class="list-disc space-y-1 pl-5 text-sm/6 text-gray-700 marker:text-gray-300">
                                            <li class="pl-2">High-definition quality</li>
                                            <li class="pl-2">Auto-play supported</li>
                                            <li class="pl-2">Full-screen option</li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </section>
                    </div>
                </div>
            </div>
        </section>
    @endif

    <!-- Featured Categories -->
    <section class="py-16 bg-gray-100">
        <div class="container mx-auto px-4">
            <h2 class="text-4xl font-bold text-center mb-12 text-gray-800">Our Exclusive Services</h2>
            <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8">
                @foreach($categories as $category)
                    <div class="bg-white rounded-lg shadow-lg overflow-hidden transform hover:scale-105 transition">
                        <img src="{{ $category->thumb ? asset('storage/' . $category->thumb) : 'https://picsum.photos/seed/' . rand(0, 100000) . '/800/800' }}"
                             alt="{{ $category->name }}"
                             class="w-full h-48 object-cover lazyload"
                             loading="lazy">
                        <div class="p-6">
                            <h3 class="text-2xl font-semibold text-gray-800 mb-2">{{ $category->name }}</h3>
                            <p class="text-gray-600 mb-4">{{ \Illuminate\Support\Str::limit(strip_tags($category->description), 100) }}</p>
                            <a href="{{ route('categories.show', $category->slug) }}" class="text-yellow-500 font-semibold hover:underline">Discover More</a>
                        </div>
                    </div>
                @endforeach
            </div>
        </div>
    </section>

    <!-- Footer -->
    <footer class="bg-gray-900 text-white py-8">
        <div class="container mx-auto px-4 text-center">
            <p class="text-lg mb-4">© {{ date('Y') }} DallasVIP. All rights reserved.</p>
            <div class="space-x-4">
                <a href="{{ route('home') }}" class="hover:text-yellow-500">Home</a>
                <a href="{{ route('categories.index') }}" class="hover:text-yellow-500">Services</a>
                <a href="{{ route('inquire') }}" class="hover:text-yellow-500">Contact</a>
            </div>
        </div>
    </footer>
@endsection