@extends('layouts.app')

@section('content')
    @if($displayCategory)
        <!-- Hero Section -->
        <section class="relative bg-cover bg-center h-56 flex items-center" style="background-image: url('{{ $displayCategory->header ? asset('storage/' . $displayCategory->header) : ($displayCategory->thumb ? asset('storage/' . $displayCategory->thumb) : 'https://picsum.photos/seed/' . rand(0,100000) . '/1024/300') }}')">
            <div class="absolute inset-0 bg-gradient-to-r from-black/70 to-transparent/30"></div>
            <div class="container mx-auto px-4 relative z-10 flex flex-col items-center text-white">
                <nav class="mb-4 w-full flex items-center justify-center space-x-2 text-sm" aria-label="Breadcrumb">
    <a href="{{ route('home') }}" class="hover:text-yellow-500 transition">Home</a>
    <span class="text-gray-300">/</span>
    <a href="{{ route('categories.index') }}" class="hover:text-yellow-500 transition">Services</a>
    @foreach($breadcrumbs as $crumb)
        <span class="text-gray-300">/</span>
        <a href="{{ route('categories.show', $breadcrumbs->take($loop->index + 1)->pluck('slug')->toArray()) }}"
           class="hover:text-yellow-500 transition">{{ $crumb['name'] }}</a>
    @endforeach
                </nav>
                <div class="w-full flex flex-col items-center justify-center">
                    <!-- Category Name and Address -->
                    <div class="flex flex-col items-start">
                        <h1 class="text-4xl md:text-5xl font-bold font-display animate-fade-in">{{ $displayCategory->name }}</h1>
                        @if(!is_null($displayCategory->address))
                            <p class="mt-2 text-white">{{ $displayCategory->address ?? 'N/A' }}</p>
                        @endif
                    </div>
                    <!-- Details and Book Now Button -->
                    @if(!is_null($displayCategory->hours))
                        <div class="mt-4 bg-black/50 backdrop-blur-sm rounded-lg p-4 flex flex-col sm:flex-row justify-between items-start gap-6 w-full max-w-md">
                            <ul class="flex flex-col gap-2 text-white">
                                <li class="flex flex-col">
                                    <span class="text-xs uppercase font-bold">Rating</span>
                                    <span class="text-sm">{{ str_repeat('★', round($displayCategory->rating ?? 0)) . str_repeat('☆', 5 - round($displayCategory->rating ?? 0)) }}</span>
                                </li>
                                <li class="flex flex-col">
                                    <span class="text-xs uppercase font-bold">Hours</span>
                                    <span class="text-sm">{{ $displayCategory->hours }}</span>
                                </li>
                                @if($displayCategory->name === 'Dining')
                                    <li class="flex flex-col">
                                        <span class="text-xs uppercase font-bold">Cuisine</span>
                                        <span class="text-sm">{{ $displayCategory->cuisine ?? 'N/A' }}</span>
                                    </li>
                                @endif
                            </ul>
                            <a
                                href="{{ route('inquire') }}?category={{ Str::slug($displayCategory->name) }}"
                                class="self-start sm:self-center inline-flex items-center bg-blue-500 text-white uppercase text-sm font-semibold px-4 py-2 rounded hover:bg-blue-600 focus:ring-2 focus:ring-blue-500 transition"
                                aria-label="Book now for {{ $displayCategory->name }}"
                            >
                                Book Now
                                <svg class="ml-2 h-4 w-4" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                                    <path fill-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clip-rule="evenodd" />
                                </svg>
                            </a>
                        </div>
                    @else
                        <div class="mt-4">
                            <a
                                href="{{ route('inquire') }}?category={{ urlencode($displayCategory->name) }}"
                                class="inline-flex items-center bg-blue-500 text-white uppercase text-sm font-semibold px-4 py-2 rounded hover:bg-blue-600 focus:ring-2 focus:ring-blue-500 transition"
                                aria-label="Book now for {{ $displayCategory->name }}"
                            >
                                Book Now
                                <svg class="ml-2 h-4 w-4" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                                    <path fill-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clip-rule="evenodd" />
                                </svg>
                            </a>
                        </div>
                    @endif
                </div>
            </div>
        </section>

        <!-- Main Content and Sidebars -->
        <section class="py-16 bg-gray-100">
            <div class="container mx-auto px-4">
                <div class="flex flex-col lg:flex-row gap-8">
                    <!-- Main Content -->
                    <div class="lg:w-2/3 w-full">
                        <!-- Featured Items Section -->
                        @php
                            // Fetch featured items
                            $featuredItems = collect([]);

                            // Include the current category if it is featured (applies to all levels)
                            if ($displayCategory->featured_item) {
                                $featuredItems->push($displayCategory);
                            }

                            // Determine the level of the current category using breadcrumbs
                            $categoryLevel = count($breadcrumbs);

                            // Level 1: Only include featured immediate children (Level 2 sub-categories)
                            if ($categoryLevel === 1) {
                                $subCategories = \App\Models\Category::where('parent_id', $displayCategory->id)
                                    ->where('active', 1)
                                    ->where('featured_item', 1) // Only fetch featured sub-categories
                                    ->get();
                                $featuredItems = $featuredItems->merge($subCategories);
                            }

                            // Level 2: Include featured immediate children (Level 3 sub-sub-categories)
                            if ($categoryLevel === 2) {
                                $subSubCategories = \App\Models\Category::where('parent_id', $displayCategory->id)
                                    ->where('active', 1)
                                    ->where('featured_item', 1) // Only fetch featured sub-sub-categories
                                    ->get();
                                $featuredItems = $featuredItems->merge($subSubCategories);
                            }

                            // Level 3: Include featured siblings (other Level 3 categories under the same parent)
                            if ($categoryLevel === 3) {
                                $parentSubCategory = $displayCategory->parent;
                                if ($parentSubCategory) {
                                    $featuredItems = $featuredItems->merge(
                                        \App\Models\Category::where('parent_id', $parentSubCategory->id)
                                            ->where('featured_item', 1)
                                            ->where('id', '!=', $displayCategory->id)
                                            ->where('active', 1)
                                            ->orderBy('created_at', 'asc')
                                            ->get()
                                    );
                                }
                            }

                            // Order by created_at and take top 4
                            $featuredItems = $featuredItems->sortBy('created_at')->take(4);
                        @endphp

                        @if($featuredItems->isNotEmpty())
                            <div class="mb-8">
                                <h2 class="text-xl font-bold text-gray-900 mb-6 uppercase">Most Popular {{ $displayCategory->name }} in Dallas</h2>
                                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                                    @foreach($featuredItems as $item)
                                        @php
                                            // Determine the correct URL based on the category level
                                            $itemUrl = [];
                                            if ($categoryLevel === 1) {
                                                // Level 1: Linking to Level 2 sub-categories (e.g., /dining/steakhouses)
                                                $itemUrl = [$displayCategory->slug, $item->slug];
                                            } elseif ($categoryLevel === 2) {
                                                // Level 2: Linking to Level 3 sub-sub-categories (e.g., /dining/steakhouses/nuri)
                                                $parentCategory = $displayCategory->parent;
                                                $itemUrl = [$parentCategory->slug, $displayCategory->slug, $item->slug];
                                            } elseif ($categoryLevel === 3) {
                                                // Level 3: Linking to sibling Level 3 categories (e.g., from /dining/steakhouses/nuri to /dining/steakhouses/nick-sams)
                                                $parentCategory = $displayCategory->parent->parent;
                                                $subCategory = $displayCategory->parent;
                                                $itemUrl = [$parentCategory->slug, $subCategory->slug, $item->slug];
                                            }
                                        @endphp
                                        <div class="flex items-start space-x-4">
                                            <a href="{{ route('categories.show', $itemUrl) }}">
                                                <img
                                                    src="{{ $item->thumb ? asset('storage/' . $item->thumb) : 'https://picsum.photos/seed/' . rand(0, 100000) . '/100/100' }}"
                                                    alt="{{ $item->name }}"
                                                    class="w-24 h-24 object-cover flex-shrink-0"
                                                    loading="lazy"
                                                >
                                            </a>
                                            <div class="flex-1">
                                                <div class="flex items-center justify-between">
                                                    <h3 class="text-lg font-bold text-gray-900 mb-1">
                                                        <a href="{{ route('categories.show', $itemUrl) }}" class="hover:underline">{{ $item->name }}</a>
                                                    </h3>
                                                    <a href="{{ route('inquire') }}?category={{ str_replace('%20', '-', rawurlencode(strtolower($displayCategory->name))) }}"
                                                       class="inline-block bg-blue-600 text-white text-sm font-semibold px-6 py-2 rounded hover:bg-blue-700 transition whitespace-nowrap min-w-fit">
                                                        Book Now
                                                    </a>
                                                </div>
                                                <p class="text-sm text-gray-600">{{ \Illuminate\Support\Str::limit(strip_tags($item->description), 80) }}</p>
                                            </div>
                                        </div>
                                    @endforeach
                                </div>
                            </div>
                        @endif

                        <!-- Packages Section -->
                        @if($displayCategory->packages->isNotEmpty())
                            <section class="py-8 bg-white rounded-lg shadow-lg mb-8">
                                <div class="container mx-auto px-4">
                                    <h2 class="text-3xl font-bold text-gray-800 text-center mb-12 font-display animate-fade-in">Available Packages</h2>
                                    <div class="flex flex-wrap -mx-4">
                                        @foreach($displayCategory->packages as $package)
                                            <div class="w-full sm:w-1/2 lg:w-1/3 px-4 mb-8">
                                                <div class="bg-white rounded-lg shadow-sm flex flex-col h-full transform hover:shadow-lg transition duration-300">
                                                    @if($package->image)
                                                        <img
                                                            src="{{ asset('storage/' . $package->image) }}"
                                                            alt="{{ $package->name }}"
                                                            class="w-full h-48 object-cover lazyload"
                                                            loading="lazy"
                                                        >
                                                    @else
                                                        <div class="w-full h-48 bg-gray-200 flex items-center justify-center">
                                                            <img
                                                                class="shrink-0 rounded-lg bg-gray-300 object-cover"
                                                                src="{{ 'https://picsum.photos/seed/' . rand(0, 100000) . '/300/200' }}"
                                                                alt="{{ $package->name }} Thumbnail"
                                                                loading="lazy"
                                                            >
                                                        </div>
                                                    @endif
                                                    <div class="p-6 flex flex-col flex-grow">
                                                        <h3 class="text-xl font-semibold text-gray-800 mb-2">{{ $package->name }}</h3>
                                                        <p class="text-gray-600 mb-4 flex-grow">{!! \Illuminate\Support\Str::limit(strip_tags($package->description), 100) !!}</p>
                                                        <p class="text-gray-800 font-semibold mb-4">
                                                            {{ $package->is_call_for_pricing ? 'Call for Pricing' : '$' . number_format($package->price, 2) }}
                                                        </p>
                                                        <div class="flex flex-col space-y-2">
                                                            <form action="{{ route('cart.add') }}" method="POST">
                                                                @csrf
                                                                <input type="hidden" name="category_package_id" value="{{ $package->id }}">
                                                                <input type="number" name="quantity" value="1" min="1" class="w-16 border rounded p-1 mb-2 focus:ring-yellow-500 focus:border-yellow-500">
                                                                @if(!$package->is_call_for_pricing)
                                                                    <input type="hidden" name="price" value="{{ $package->price }}">
                                                                @endif
                                                                <button
                                                                    type="submit"
                                                                    class="bg-yellow-500 text-black px-4 py-2 rounded-full w-full font-semibold hover:bg-yellow-600 transition"
                                                                    aria-label="Add {{ $package->name }} to cart"
                                                                >
                                                                    Add to Cart
                                                                </button>
                                                            </form>
                                                            <a
                                                                href="{{ route('inquire') }}?package={{ urlencode($package->name) }}"
                                                                class="bg-blue-600 text-white px-4 py-2 rounded-full text-center font-semibold hover:bg-blue-700 transition"
                                                                aria-label="Inquire about {{ $package->name }}"
                                                            >
                                                                Inquire Now
                                                            </a>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        @endforeach
                                    </div>
                                </div>
                            </section>
                        @endif

                        <!-- Category Details -->
                        <div class="bg-white rounded-lg shadow-lg p-6 mb-8">
                            <h2 class="text-2xl font-bold text-gray-800 mb-4 font-display">Dallas {{ $displayCategory->name }}</h2>
                            <div class="prose max-w-none mb-6 text-gray-600">{!! $displayCategory->description !!}</div>
                        </div>

                        <!-- Videos Section -->
                        @php
                            $videos = [];

                            // Check for child categories and their videos (only active children)
                            if ($displayCategory->children->isNotEmpty()) {
                                foreach ($displayCategory->children as $child) {
                                    if ($child->active && ($child->video || $child->youtube)) {
                                        $videos[] = [
                                            'source' => $child->youtube ?? $child->video,
                                            'type' => $child->youtube ? 'youtube' : 'local',
                                            'title' => $child->name,
                                            'description' => \Illuminate\Support\Str::limit(strip_tags($child->description), 100),
                                            'thumbnail' => $child->thumb ? asset('storage/' . $child->thumb) : 'https://picsum.photos/seed/' . rand(0, 100000) . '/800/800',
                                        ];
                                    }
                                }
                            }

                            // If no videos from children, check the parent category (if active)
                            if (empty($videos) && $displayCategory->parent && $displayCategory->parent->active) {
                                if ($displayCategory->parent->video || $displayCategory->parent->youtube) {
                                    $videos[] = [
                                        'source' => $displayCategory->parent->youtube ?? $displayCategory->parent->video,
                                        'type' => $displayCategory->parent->youtube ? 'youtube' : 'local',
                                        'title' => $displayCategory->parent->name,
                                        'description' => \Illuminate\Support\Str::limit(strip_tags($displayCategory->parent->description), 100),
                                        'thumbnail' => $displayCategory->parent->thumb ? asset('storage/' . $displayCategory->parent->thumb) : 'https://picsum.photos/seed/' . rand(0, 100000) . '/800/800',
                                    ];
                                }
                            }

                            // If still no videos, check the current category itself
                            if (empty($videos) && ($displayCategory->video || $displayCategory->youtube)) {
                                $videos[] = [
                                    'source' => $displayCategory->youtube ?? $displayCategory->video,
                                    'type' => $displayCategory->youtube ? 'youtube' : 'local',
                                    'title' => $displayCategory->name,
                                    'description' => \Illuminate\Support\Str::limit(strip_tags($displayCategory->description), 100),
                                    'thumbnail' => $displayCategory->thumb ? asset('storage/' . $displayCategory->thumb) : 'https://picsum.photos/seed/' . rand(0, 100000) . '/800/800',
                                ];
                            }
                        @endphp

                        @if(!empty($videos))
                            <section class="py-8 bg-white rounded-lg shadow-lg mb-8">
                                <div class="container mx-auto px-4">
                                    <h2 class="text-3xl font-bold text-gray-800 text-center mb-4 font-display animate-fade-in">Videos: {{ $displayCategory->name }}</h2>

                                    @if(count($videos) === 1)
                                        <!-- Single Video Display -->
                                        <div class="text-center">
                                            <h3 class="text-lg font-semibold text-gray-800 mb-2">{{ $videos[0]['title'] }}</h3>
                                            <p class="text-gray-600 mb-4">{{ $videos[0]['description'] }}</p>
                                            <div class="w-full max-w-3xl mx-auto">
                                                @if($videos[0]['type'] === 'youtube')
                                                    <iframe
                                                        class="w-full h-96 rounded-lg"
                                                        src="{{ \Illuminate\Support\Str::startsWith($videos[0]['source'], 'https://www.youtube.com/embed/') ? $videos[0]['source'] : 'https://www.youtube.com/embed/' . \Illuminate\Support\Str::after($videos[0]['source'], 'v=') }}"
                                                        title="{{ $videos[0]['title'] }} Video"
                                                        frameborder="0"
                                                        allow="accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
                                                        allowfullscreen
                                                    ></iframe>
                                                @else
                                                    <video
                                                        class="w-full h-96 rounded-lg"
                                                        controls
                                                        preload="metadata"
                                                        aria-label="{{ $videos[0]['title'] }} Video"
                                                    >
                                                        <source src="{{ asset('storage/' . $videos[0]['source']) }}" type="video/mp4">
                                                        Your browser does not support the video tag.
                                                    </video>
                                                @endif
                                            </div>
                                        </div>
                                    @else
                                        <!-- Multiple Videos Display -->
                                        <div class="flex overflow-x-auto space-x-2 pb-4 mb-4 scrollbar-thin scrollbar-thumb-gray-400 scrollbar-track-gray-200">
                                            @foreach($videos as $index => $video)
                                                <button
                                                    data-video-index="{{ $index }}"
                                                    class="video-thumb flex-shrink-0 w-20 h-20 rounded-lg overflow-hidden focus:outline-none focus:ring-2 focus:ring-yellow-500 {{ $index === 0 ? 'ring-2 ring-yellow-500 opacity-100' : 'opacity-75' }}"
                                                >
                                                    <img
                                                        src="{{ $video['thumbnail'] }}"
                                                        alt="{{ $video['title'] }} Thumbnail"
                                                        class="w-full h-full object-cover"
                                                    >
                                                </button>
                                            @endforeach
                                        </div>
                                        <!-- Main Video -->
                                        <div class="w-full max-w-3xl mx-auto">
                                            <h3 id="video-title" class="text-lg font-semibold text-gray-800 mb-2 text-center">{{ $videos[0]['title'] }}</h3>
                                            <p id="video-description" class="text-gray-600 mb-4 text-center">{{ $videos[0]['description'] }}</p>
                                            <div id="video-container" class="w-full">
                                                @if($videos[0]['type'] === 'youtube')
                                                    <iframe
                                                        id="main-video"
                                                        class="w-full h-96 rounded-lg"
                                                        src="{{ \Illuminate\Support\Str::startsWith($videos[0]['source'], 'https://www.youtube.com/embed/') ? $videos[0]['source'] : 'https://www.youtube.com/embed/' . \Illuminate\Support\Str::after($videos[0]['source'], 'v=') }}"
                                                        title="{{ $videos[0]['title'] }} Video"
                                                        frameborder="0"
                                                        allow="accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
                                                        allowfullscreen
                                                    ></iframe>
                                                @else
                                                    <video
                                                        id="main-video"
                                                        class="w-full h-96 rounded-lg"
                                                        controls
                                                        preload="metadata"
                                                        aria-label="{{ $videos[0]['title'] }} Video"
                                                    >
                                                        <source src="{{ asset('storage/' . $videos[0]['source']) }}" type="video/mp4">
                                                        Your browser does not support the video tag.
                                                    </video>
                                                @endif
                                            </div>
                                        </div>
                                    @endif
                                </div>
                            </section>

                            <!-- JavaScript for Video Interaction -->
                            @if(count($videos) > 1)
                                <script>
                                    document.addEventListener('DOMContentLoaded', () => {
                                        const thumbs = document.querySelectorAll('.video-thumb');
                                        const videoContainer = document.getElementById('video-container');
                                        const videoTitle = document.getElementById('video-title');
                                        const videoDescription = document.getElementById('video-description');
                                        const videos = @json($videos);

                                        thumbs.forEach(thumb => {
                                            thumb.addEventListener('click', () => {
                                                thumbs.forEach(t => {
                                                    t.classList.remove('ring-2', 'ring-yellow-500', 'opacity-100');
                                                    t.classList.add('opacity-75');
                                                });

                                                thumb.classList.add('ring-2', 'ring-yellow-500', 'opacity-100');
                                                const index = thumb.getAttribute('data-video-index');
                                                const video = videos[index];

                                                videoTitle.textContent = video.title;
                                                videoDescription.textContent = video.description;
                                                videoContainer.innerHTML = '';

                                                if (video.type === 'youtube') {
                                                    const iframe = document.createElement('iframe');
                                                    iframe.id = 'main-video';
                                                    iframe.className = 'w-full h-96 rounded-lg';
                                                    iframe.src = video.source.startsWith('https://www.youtube.com/embed/') 
                                                        ? video.source 
                                                        : `https://www.youtube.com/embed/${video.source.split('v=')[1]}`;
                                                    iframe.title = `${video.title} Video`;
                                                    iframe.frameBorder = '0';
                                                    iframe.allow = 'accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture';
                                                    iframe.allowFullscreen = true;
                                                    videoContainer.appendChild(iframe);
                                                } else {
                                                    const videoElement = document.createElement('video');
                                                    videoElement.id = 'main-video';
                                                    videoElement.className = 'w-full h-96 rounded-lg';
                                                    videoElement.controls = true;
                                                    videoElement.preload = 'metadata';
                                                    videoElement.setAttribute('aria-label', `${video.title} Video`);
                                                    const source = document.createElement('source');
                                                    source.src = `/storage/${video.source}`;
                                                    source.type = 'video/mp4';
                                                    videoElement.appendChild(source);
                                                    videoElement.appendChild(document.createTextNode('Your browser does not support the video tag.'));
                                                    videoContainer.appendChild(videoElement);
                                                }
                                            });
                                        });
                                    });
                                </script>
                            @endif
                        @endif

                        <!-- Images Section -->
                        @if($displayCategory->meta && $displayCategory->meta->images && is_array($displayCategory->meta->images) && count($displayCategory->meta->images) > 0)
                            <section class="py-8 bg-white rounded-lg shadow-lg mb-8">
                                <div class="container mx-auto px-4">
                                    <h2 class="text-3xl font-bold text-gray-800 text-center mb-4 font-display animate-fade-in">Photos: {{ $displayCategory->name }}</h2>
                                    <!-- Thumbnail Row -->
                                    <div class="flex overflow-x-auto space-x-2 pb-4 mb-4 scrollbar-thin scrollbar-thumb-gray-400 scrollbar-track-gray-200">
                                        @foreach($displayCategory->meta->images as $index => $image)
                                            <button
                                                data-gallery-index="{{ $index }}"
                                                class="gallery-thumb flex-shrink-0 w-20 h-20 rounded-lg overflow-hidden focus:outline-none focus:ring-2 focus:ring-yellow-500 {{ $index === 0 ? 'ring-2 ring-yellow-500 opacity-100' : 'opacity-75' }}"
                                            >
                                                <img
                                                    src="{{ asset('storage/' . $image) }}"
                                                    alt="{{ $displayCategory->name }} Thumbnail {{ $index + 1 }}"
                                                    class="w-full h-full object-cover"
                                                >
                                            </button>
                                        @endforeach
                                    </div>
                                    <!-- Main Image -->
                                    <div class="w-full">
                                        <img
                                            id="gallery-main-image"
                                            src="{{ asset('storage/' . $displayCategory->meta->images[0]) }}"
                                            alt="{{ $displayCategory->name }} Main Image"
                                            class="w-full h-96 object-cover rounded-lg"
                                        >
                                    </div>
                                </div>
                            </section>

                            <!-- JavaScript for Gallery Interaction -->
                            <script>
                                document.addEventListener('DOMContentLoaded', () => {
                                    const thumbs = document.querySelectorAll('.gallery-thumb');
                                    const mainImage = document.getElementById('gallery-main-image');

                                    thumbs.forEach(thumb => {
                                        thumb.addEventListener('click', () => {
                                            thumbs.forEach(t => {
                                                t.classList.remove('ring-2', 'ring-yellow-500', 'opacity-100');
                                                t.classList.add('opacity-75');
                                            });

                                            thumb.classList.add('ring-2', 'ring-yellow-500', 'opacity-100');
                                            const index = thumb.getAttribute('data-gallery-index');
                                            const newSrc = thumb.querySelector('img').src;
                                            mainImage.src = newSrc;
                                            mainImage.alt = `{{ $displayCategory->name }} Main Image ${parseInt(index) + 1}`;
                                        });
                                    });
                                });
                            </script>
                        @endif

                        <!-- Inquiry Form -->
                        <section>
                            <h2 class="text-3xl font-bold text-gray-800 text-center mb-12 font-display animate-fade-in">Request a Quote</h2>
                            <div class="bg-gray-50 rounded-lg shadow-lg p-6 max-w-2xl mx-auto">
                                @include('categories.inquire-form')
                            </div>
                        </section>
                    </div>

                    <!-- Sidebar -->
                    <div class="lg:w-1/3 w-full mt-8 lg:mt-0">
                        <!-- Related Categories (Siblings or Children) -->
                        <div class="bg-gray-50 shadow-lg rounded-lg p-6 mb-8">
                            <h3 class="text-xl font-bold mb-6 font-display text-gray-800">
                                @if($displayCategory->parent_id)
                                    Related {{ $displayCategory->parent->name }} Options
                                @else
                                    Related {{ $displayCategory->name }} Options
                                @endif
                            </h3>
                            <ul role="list" class="flex flex-col gap-6">
                                @if($displayCategory->parent_id)
                                    @if($siblings->isNotEmpty())
                                        @foreach($siblings as $sibling)
                                            <li class="bg-white rounded-lg shadow-sm">
                                                <div class="flex items-center space-x-4 p-4">
                                                    <img
                                                        class="h-16 w-16 shrink-0 rounded-lg bg-gray-300 object-cover"
                                                        src="{{ $sibling->thumb ? asset('storage/' . $sibling->thumb) : 'https://picsum.photos/seed/' . rand(0, 100000) . '/800/800' }}"
                                                        alt="{{ $sibling->name }} Thumbnail"
                                                        loading="lazy"
                                                    >
                                                    <div class="flex-1">
                                                        <a
                                                            href="{{ route('categories.show', $breadcrumbs->take(count($breadcrumbs) - 1)->pluck('slug')->toArray() + [$sibling->slug]) }}"
                                                            class="text-lg font-semibold text-gray-900 hover:text-blue-600 transition"
                                                            aria-label="View {{ $sibling->name }}"
                                                        >
                                                            {{ $sibling->name }}
                                                        </a>
                                                        <p class="text-sm text-gray-500 mt-1">{{ \Illuminate\Support\Str::limit(strip_tags($sibling->description), 100) }}</p>
                                                        <a
                                                            href="{{ route('inquire') }}?category={{ urlencode($sibling->name) }}"
                                                            class="mt-2 inline-flex items-center text-sm font-medium text-blue-600 hover:text-blue-800 transition"
                                                            aria-label="Book now for {{ $sibling->name }}"
                                                        >
                                                            Book Now
                                                            <svg class="ml-2 h-4 w-4" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                                                                <path fill-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clip-rule="evenodd" />
                                                            </svg>
                                                        </a>
                                                    </div>
                                                </div>
                                            </li>
                                        @endforeach
                                    @else
                                        <p class="text-gray-500 text-center">No sub-categories available for {{ $displayCategory->parent->name }}.</p>
                                    @endif
                                @else
                                    @if($displayCategory->children->where('active', 1)->isNotEmpty())
                                        @foreach($displayCategory->children->where('active', 1) as $child)
                                            <li class="bg-white rounded-lg shadow-sm">
                                                <div class="flex items-center space-x-4 p-4">
                                                    <img
                                                        class="h-16 w-16 shrink-0 rounded-lg bg-gray-300 object-cover"
                                                        src="{{ $child->thumb ? asset('storage/' . $child->thumb) : 'https://picsum.photos/seed/' . rand(0, 100000) . '/800/800' }}"
                                                        alt="{{ $child->name }} Thumbnail"
                                                        loading="lazy"
                                                    >
                                                    <div class="flex-1">
                                                        <a
                                                            href="{{ route('categories.show', [$displayCategory->slug, $child->slug]) }}"
                                                            class="text-lg font-semibold text-gray-900 hover:text-blue-600 transition"
                                                            aria-label="View {{ $child->name }}"
                                                        >
                                                            {{ $child->name }}
                                                        </a>
                                                        <p class="text-sm text-gray-500 mt-1">{{ \Illuminate\Support\Str::limit(strip_tags($child->description), 100) }}</p>
                                                        <a
                                                            href="{{ route('inquire') }}?category={{ str_replace('%20', '-', rawurlencode(strtolower($child->name))) }}"
                                                            class="mt-2 inline-flex items-center text-sm font-medium text-blue-600 hover:text-blue-800 transition"
                                                            aria-label="Book now for {{ $child->name }}"
                                                        >
                                                            Book Now
                                                            <svg class="ml-2 h-4 w-4" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                                                                <path fill-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clip-rule="evenodd" />
                                                            </svg>
                                                        </a>
                                                    </div>
                                                </div>
                                            </li>
                                        @endforeach
                                    @else
                                        <p class="text-gray-500 text-center">No related options available for {{ $displayCategory->name }}.</p>
                                    @endif
                                @endif
                            </ul>
                        </div>

                        <!-- Venues (Sub-Sub-Categories) -->
                        <div class="bg-gray-50 shadow-lg rounded-lg p-6 mb-8">
                            <h3 class="text-xl font-bold mb-6 font-display text-gray-800">Venues</h3>
                            @if($subSubCategoriesForVenues->isNotEmpty())
                                @php
                                    // Group sub-sub-categories by their parent (Level 2) sub-category
                                    $groupedVenues = $subSubCategoriesForVenues->groupBy('parent_id');
                                @endphp
                                @if($groupedVenues->isNotEmpty())
                                    <ul role="list" class="flex flex-col gap-6">
                                        @foreach($groupedVenues as $parentId => $venues)
                                            @php
                                                $parentCategory = \App\Models\Category::find($parentId);
                                                if (!$parentCategory) continue; // Skip if parent not found
                                            @endphp
                                            <li class="bg-white rounded-lg shadow-sm">
                                                <div class="space-x-4 p-4">
                                                    <div class="thumbnail-container">
                                                        <img
                                                            class="h-16 w-16 rounded-lg bg-gray-300 object-cover"
                                                            src="{{ $parentCategory->thumb ? asset('storage/' . $parentCategory->thumb) : 'https://picsum.photos/seed/' . rand(0, 100000) . '/800/800' }}"
                                                            alt="{{ $parentCategory->name }} Thumbnail"
                                                            loading="lazy"
                                                        >
                                                    </div>
                                                    <div class="flex-1">
                                                        <a
                                                            href="{{ route('categories.show', $breadcrumbs->take(1)->pluck('slug')->toArray() + [$parentCategory->slug]) }}"
                                                            class="text-lg font-semibold text-gray-900 hover:text-blue-600 transition"
                                                            aria-label="View {{ $parentCategory->name }}"
                                                        >
                                                            {{ $parentCategory->name }}
                                                        </a>
                                                        <p class="text-sm text-gray-500 mt-1">{{ \Illuminate\Support\Str::limit(strip_tags($parentCategory->description), 100) }}</p>
                                                        <div x-data="{ isExpanded: false }" class="mt-2">
                                                            <button
                                                                @click="isExpanded = !isExpanded"
                                                                class="inline-flex items-center text-sm font-medium text-blue-600 hover:text-blue-800 transition focus:outline-none focus:ring-2 focus:ring-blue-500"
                                                                :aria-expanded="isExpanded"
                                                                :aria-controls="'venues-' + '{{ $parentId }}'"
                                                                aria-label="Toggle {{ $parentCategory->name }} venues"
                                                            >
                                                                <span x-text="isExpanded ? 'Hide {{ $parentCategory->name }} Venues' : 'Show all {{ $parentCategory->name }} Venues'"></span>
                                                                <svg class="ml-2 h-4 w-4" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" x-bind:class="{ 'rotate-180': isExpanded }">
                                                                    <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
                                                                </svg>
                                                            </button>
                                                            <div
                                                                x-show="isExpanded"
                                                                x-cloak
                                                                x-transition:enter="transition-all ease-out duration-300"
                                                                x-transition:enter-start="opacity-0 max-h-0"
                                                                x-transition:enter-end="opacity-100 max-h-[1000px]"
                                                                x-transition:leave="transition-all ease-in duration-200"
                                                                x-transition:leave-start="opacity-100 max-h-[1000px]"
                                                                x-transition:leave-end="opacity-0 max-h-0"
                                                                :id="'venues-' + '{{ $parentId }}'"
                                                                class="mt-4 flex flex-col gap-4 pl-[80px]"
                                                            >
                                                                @foreach($venues as $subSubCategory)
                                                                    <div class="sub-sub-category flex space-x-4">
                                                                        <div class="thumbnail-container">
                                                                            <img
                                                                                class="h-16 w-16 rounded-lg bg-gray-300 object-cover"
                                                                                src="{{ $subSubCategory->thumb ? asset('storage/' . $subSubCategory->thumb) : 'https://picsum.photos/seed/' . rand(0, 100000) . '/800/800' }}"
                                                                                alt="{{ $subSubCategory->name }} Thumbnail"
                                                                                loading="lazy"
                                                                            >
                                                                        </div>
                                                                        <div class="flex-1">
                                                                            <a
                                                                                href="{{ route('categories.show', array_merge($breadcrumbs->take(1)->pluck('slug')->toArray(), [$subSubCategory->parent->slug, $subSubCategory->slug])) }}"
                                                                                class="text-base font-medium text-gray-900 hover:text-blue-600 transition"
                                                                                aria-label="View {{ $subSubCategory->name }}"
                                                                            >
                                                                                {{ $subSubCategory->name }}
                                                                            </a>
                                                                            <p class="text-sm text-gray-500 mt-1">{{ \Illuminate\Support\Str::limit(strip_tags($subSubCategory->description), 80) }}</p>
                                                                            <a
                                                                                href="{{ route('inquire') }}?category={{ urlencode($subSubCategory->name) }}"
                                                                                class="inline-flex items-center text-sm font-medium text-blue-600 hover:text-blue-800 transition"
                                                                                aria-label="Book now for {{ $subSubCategory->name }}"
                                                                            >
                                                                                Book Now
                                                                                <svg class="ml-2 h-4 w-4" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                                                                                    <path fill-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clip-rule="evenodd" />
                                                                                </svg>
                                                                            </a>
                                                                        </div>
                                                                    </div>
                                                                @endforeach
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </li>
                                        @endforeach
                                    </ul>
                                @else
                                    <p class="text-gray-500 text-center">No venues available.</p>
                                @endif
                            @else
                                <p class="text-gray-500 text-center">No venues available.</p>
                            @endif
                        </div>

                        <!-- All Parent Categories Section (Collapsible) -->
                        <div x-data="{ isExpanded: false }" class="bg-gray-50 shadow-lg rounded-lg p-6">
                            <h3 class="text-xl font-bold mb-6 font-display text-gray-800">All Categories</h3>
                            <ul role="list" class="flex flex-col gap-6">
                                @php
                                    $parentCategories = \App\Models\Category::whereNull('parent_id')
                                        ->where('active', 1)
                                        ->get();
                                    $previewCategories = $parentCategories->take(5);
                                    $remainingCategories = $parentCategories->slice(5);
                                @endphp
                                <!-- Preview (First 5 Categories) -->
                                @if($previewCategories->isNotEmpty())
                                    @foreach($previewCategories as $parent)
                                        <li class="bg-white rounded-lg shadow-sm">
                                            <div class="items-center space-x-4 p-4">
                                                <img
                                                    class="h-16 w-16 shrink-0 rounded-lg bg-gray-300 object-cover"
                                                    src="{{ $parent->thumb ? asset('storage/' . $parent->thumb) : 'https://picsum.photos/seed/' . rand(0, 100000) . '/800/800' }}"
                                                    alt="{{ $parent->name }} Thumbnail"
                                                    loading="lazy"
                                                >
                                                <div class="flex-1">
                                                    <a
                                                        href="{{ route('categories.show', [$parent->slug]) }}"
                                                        class="text-lg font-semibold text-gray-900 hover:text-blue-600 transition"
                                                        aria-label="View {{ $parent->name }}"
                                                    >
                                                        {{ $parent->name }}
                                                    </a>
                                                    <p class="text-sm text-gray-500 mt-1">{{ \Illuminate\Support\Str::limit(strip_tags($parent->description), 100) }}</p>
                                                    <a
                                                        href="{{ route('inquire') }}?category={{ str_replace('%20', '-', rawurlencode(strtolower($parent->name))) }}"
                                                        class="mt-2 inline-flex items-center text-sm font-medium text-blue-600 hover:text-blue-800 transition"
                                                        aria-label="Book now for {{ $parent->name }}"
                                                    >
                                                        Book Now
                                                        <svg class="ml-2 h-4 w-4" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                                                            <path fill-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clip-rule="evenodd" />
                                                        </svg>
                                                    </a>
                                                </div>
                                            </div>
                                        </li>
                                    @endforeach
                                @endif
                                <!-- Remaining Categories (Collapsible) -->
                                <div x-show="isExpanded" x-cloak x-transition:enter="transition-all ease-out duration-300" x-transition:enter-start="opacity-0 max-h-0" x-transition:enter-end="opacity-100 max-h-[1000px]" x-transition:leave="transition-all ease-in duration-200" x-transition:leave-start="opacity-100 max-h-[1000px]" x-transition:leave-end="opacity-0 max-h-0" id="remaining-categories">
                                    @if($remainingCategories->isNotEmpty())
                                        @foreach($remainingCategories as $parent)
                                            <li class="bg-white rounded-lg shadow-sm">
                                                <div class="items-center space-x-4 p-4">
                                                    <img
                                                        class="h-16 w-16 shrink-0 rounded-lg bg-gray-300 object-cover"
                                                        src="{{ $parent->thumb ? asset('storage/' . $parent->thumb) : 'https://picsum.photos/seed/' . rand(0, 100000) . '/800/800' }}"
                                                        alt="{{ $parent->name }} Thumbnail"
                                                        loading="lazy"
                                                    >
                                                    <div class="flex-1">
                                                        <a
                                                            href="{{ route('categories.show', [$parent->slug]) }}"
                                                            class="text-lg font-semibold text-gray-900 hover:text-blue-600 transition"
                                                            aria-label="View {{ $parent->name }}"
                                                        >
                                                            {{ $parent->name }}
                                                        </a>
                                                        <p class="text-sm text-gray-500 mt-1">{{ \Illuminate\Support\Str::limit(strip_tags($parent->description), 100) }}</p>
                                                        <a
                                                            href="{{ route('inquire') }}?category={{ urlencode($parent->name) }}"
                                                            class="mt-2 inline-flex items-center text-sm font-medium text-blue-600 hover:text-blue-800 transition"
                                                            aria-label="Book now for {{ $parent->name }}"
                                                        >
                                                            Book Now
                                                            <svg class="ml-2 h-4 w-4" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                                                                <path fill-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clip-rule="evenodd" />
                                                            </svg>
                                                        </a>
                                                    </div>
                                                </div>
                                            </li>
                                        @endforeach
                                    @endif
                                </div>
                                @if($remainingCategories->isNotEmpty())
                                    <div class="mt-4 text-center">
                                        <button
                                            @click="isExpanded = !isExpanded"
                                            class="text-blue-600 hover:text-blue-800 text-sm font-medium transition focus:outline-none focus:ring-2 focus:ring-blue-500"
                                            :aria-expanded="isExpanded"
                                            aria-controls="remaining-categories"
                                            aria-label="Toggle all categories"
                                        >
                                            <span x-text="isExpanded ? 'Hide Categories' : 'Show all Categories'"></span>
                                        </button>
                                    </div>
                                @endif
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- Custom Scrollbar Styles -->
        <style>
            .scrollbar-thin::-webkit-scrollbar {
                height: 8px;
            }
            .scrollbar-thin::-webkit-scrollbar-track {
                background: #e5e7eb;
                border-radius: 4px;
            }
            .scrollbar-thin::-webkit-scrollbar-thumb {
                background: #9ca3af;
                border-radius: 4px;
            }
            .scrollbar-thin::-webkit-scrollbar-thumb:hover {
                background: #6b7280;
            }
            .scrollbar-thin {
                scrollbar-width: thin;
                scrollbar-color: #9ca3af #e5e7eb;
            }
            .thumbnail-container {
                width: 64px; /* Fixed width to match the thumbnail size (w-16) */
                flex-shrink: 0;
            }
            .sub-sub-category {
                align-items: flex-start; /* Align items to the top */
            }
        </style>
    @else
        <!-- Display message if no active category is found -->
        <section class="py-16 bg-gray-100">
            <div class="container mx-auto px-4 text-center">
                <h2 class="text-3xl font-bold text-gray-800 mb-4 font-display">Category Unavailable</h2>
                <p class="text-gray-600 mb-6">The requested category and its related categories are currently unavailable. Please explore other services.</p>
                <a href="{{ route('home') }}" class="inline-flex items-center bg-blue-600 text-white font-semibold px-6 py-3 rounded-lg hover:bg-blue-700 transition">
                    Return to Home
                </a>
            </div>
        </section>
    @endif
@endsection