<!DOCTYPE html>
<html lang="en">
<head>
    @extends('layouts.user.app')

    <title>Legacy Eatery & Space Dashboard</title>
</head>

@section('content')
<div class="container mx-auto px-4">
    <div class="p-4 rounded-lg">
        <!-- Carousel Section -->
        <section class="mb-8">
            <h2 class="text-2xl font-bold text-maroon mb-6">Gallery</h2>
            
            <h3 class="text-xl font-semibold text-maroon mb-4"></h3>
            <div id="gallery-carousel" class="relative w-full mb-8" data-carousel="static">
                <!-- Carousel wrapper -->
                <div class="relative h-56 overflow-hidden rounded-lg md:h-96">
                    <!-- Items -->
                    @forelse($carouselImages->where('is_active', true) as $image)
                    <div class="hidden duration-700 ease-in-out" data-carousel-item>
                        <img src="{{ asset('storage/' . $image->image) }}" class="absolute block w-full h-full object-cover -translate-x-1/2 -translate-y-1/2 top-1/2 left-1/2" alt="Carousel Image">
                    </div>
                    @empty
                    <div class="hidden duration-700 ease-in-out" data-carousel-item>
                        <img src="{{ asset('images/indoor cafe.jpeg') }}" class="absolute block w-full h-full object-cover -translate-x-1/2 -translate-y-1/2 top-1/2 left-1/2" alt="Indoor Cafe">
                    </div>
                    <div class="hidden duration-700 ease-in-out" data-carousel-item>
                        <img src="{{ asset('images/vip indoor.jpeg') }}" class="absolute block w-full h-full object-cover -translate-x-1/2 -translate-y-1/2 top-1/2 left-1/2" alt="VIP Indoor">
                    </div>
                    <div class="hidden duration-700 ease-in-out" data-carousel-item>
                        <img src="{{ asset('images/outdoor cafe.jpeg') }}" class="absolute block w-full h-full object-cover -translate-x-1/2 -translate-y-1/2 top-1/2 left-1/2" alt="Outdoor Cafe">
                    </div>
                    <div class="hidden duration-700 ease-in-out" data-carousel-item>
                        <img src="{{ asset('images/vip outdoor.jpeg') }}" class="absolute block w-full h-full object-cover -translate-x-1/2 -translate-y-1/2 top-1/2 left-1/2" alt="VIP Outdoor">
                    </div>
                    @endforelse
                </div>
                <!-- Slider controls -->
                <button type="button" class="absolute top-0 start-0 z-30 flex items-center justify-center h-full px-4 cursor-pointer group focus:outline-none" data-carousel-prev>
                    <span class="inline-flex items-center justify-center w-10 h-10 rounded-full bg-black/30 group-hover:bg-black/50 group-focus:ring-4 group-focus:ring-white group-focus:outline-none">
                        <i class="fas fa-chevron-left text-white"></i>
                        <span class="sr-only">Previous</span>
                    </span>
                </button>
                <button type="button" class="absolute top-0 end-0 z-30 flex items-center justify-center h-full px-4 cursor-pointer group focus:outline-none" data-carousel-next>
                    <span class="inline-flex items-center justify-center w-10 h-10 rounded-full bg-black/30 group-hover:bg-black/50 group-focus:ring-4 group-focus:ring-white group-focus:outline-none">
                        <i class="fas fa-chevron-right text-white"></i>
                        <span class="sr-only">Next</span>
                    </span>
                </button>
            </div>

            <!-- Gallery Cafe Heading -->
            <h3 class="text-2xl font-bold text-maroon my-8 text-center">Gallery Cafe</h3>

            <!-- Gallery Categories Slider -->
            <div class="relative w-full mb-8">
                <div class="overflow-hidden">
                    <div id="categories-slider" class="flex transition-transform duration-300 ease-in-out">
                        @foreach($galleryCategories->chunk(4) as $categoryChunk)
                        <div class="w-full flex-none">
                            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
                                @foreach($categoryChunk as $category)
                                <div class="bg-white rounded-lg shadow-lg overflow-hidden group hover:shadow-xl transition-shadow duration-300">
                                    <div class="relative">
                                        <a href="#" data-fancybox="category-{{ $category->id }}" data-src="{{ asset('storage/' . $category->images->first()?->image ?? $category->thumbnail) }}">
                                            <img src="{{ asset('storage/' . $category->thumbnail) }}" alt="{{ $category->name }}" class="w-full h-48 object-cover">
                                            <div class="absolute inset-0 bg-black bg-opacity-40 opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-center justify-center">
                                                <span class="text-white text-lg font-semibold px-4 py-2 rounded-lg bg-maroon">
                                                    View Gallery
                                                </span>
                                            </div>
                                        </a>
                                    </div>
                                    <div class="p-4">
                                        <h4 class="text-lg font-semibold text-maroon mb-2">{{ $category->name }}</h4>
                                        <p class="text-gray-600 text-sm">{{ $category->description }}</p>
                                        <div class="mt-3 text-sm text-gray-500">
                                            <i class="fas fa-images mr-1"></i>
                                            {{ $category->images->count() }} photos
                                        </div>
                                    </div>
                                </div>

                                <!-- Hidden Gallery Images -->
                                <div class="hidden">
                                    @foreach($category->images as $image)
                                    <a href="{{ asset('storage/' . $image->image) }}" 
                                       data-fancybox="category-{{ $category->id }}"
                                       data-caption="{{ $image->caption }}"
                                       class="hidden">
                                        <img src="{{ asset('storage/' . $image->image) }}" alt="{{ $image->caption }}">
                                    </a>
                                    @endforeach
                                </div>
                                @endforeach
                            </div>
                        </div>
                        @endforeach
                    </div>
                </div>

                <!-- Simple Navigation Arrows -->
                <button type="button" id="prev-button" class="absolute left-0 top-1/2 -translate-y-1/2 bg-white p-2 rounded-full shadow-lg border border-gray-200 hover:bg-gray-50">
                    <i class="fas fa-chevron-left text-maroon"></i>
                </button>
                <button type="button" id="next-button" class="absolute right-0 top-1/2 -translate-y-1/2 bg-white p-2 rounded-full shadow-lg border border-gray-200 hover:bg-gray-50">
                    <i class="fas fa-chevron-right text-maroon"></i>
                </button>

                <!-- Simple Dots Navigation -->
                <div class="flex justify-center mt-4 space-x-2">
                    @foreach($galleryCategories->chunk(4) as $index => $chunk)
                    <button type="button" class="slider-dot w-8 h-2 rounded-full bg-gray-300 hover:bg-maroon transition-colors" data-index="{{ $index }}"></button>
                    @endforeach
                </div>
            </div>

            <!-- Best Seller Slider -->
            <h3 class="text-2xl font-bold text-maroon my-8 text-center">Best Seller</h3>
            <div id="bestseller-carousel" class="relative w-full" data-carousel="static">
                <div class="relative h-80 overflow-hidden rounded-lg">
                    <!-- Slide 1: 4 Card -->
                    <div class="hidden duration-700 ease-in-out" data-carousel-item>
                        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6 h-full">
                            @foreach($bestsellers as $bestseller)
                            <div class="bg-white rounded-lg shadow-lg flex flex-col h-full overflow-hidden hover:shadow-xl transition-shadow duration-300">
                                <div class="aspect-square w-full bg-gray-100 flex items-center justify-center">
                                    <img src="{{ asset('storage/bestsellers/' . $bestseller->image) }}" alt="{{ $bestseller->name }}" class="w-full h-full object-cover" />
                                </div>
                                <div class="p-4 flex-1 flex flex-col">
                                    <h4 class="text-lg font-semibold text-maroon mb-1">{{ $bestseller->name }}</h4>
                                    <p class="text-gray-600 text-sm flex-1">{{ $bestseller->description }}</p>
                                </div>
                            </div>
                            @endforeach
                        </div>
                    </div>
                </div>
                <!-- Slider controls -->
                <button type="button" class="absolute top-0 start-0 z-30 flex items-center justify-center h-full px-4 cursor-pointer group focus:outline-none" data-carousel-prev>
                    <span class="inline-flex items-center justify-center w-10 h-10 rounded-full bg-black/30 group-hover:bg-black/50 group-focus:ring-4 group-focus:ring-white group-focus:outline-none">
                        <i class="fas fa-chevron-left text-white"></i>
                        <span class="sr-only">Previous</span>
                    </span>
                </button>
                <button type="button" class="absolute top-0 end-0 z-30 flex items-center justify-center h-full px-4 cursor-pointer group focus:outline-none" data-carousel-next>
                    <span class="inline-flex items-center justify-center w-10 h-10 rounded-full bg-black/30 group-hover:bg-black/50 group-focus:ring-4 group-focus:ring-white group-focus:outline-none">
                        <i class="fas fa-chevron-right text-white"></i>
                        <span class="sr-only">Next</span>
                    </span>
                </button>
            </div>
        </section>
    </div>
</div>

@push('styles')
<!-- Flowbite CSS -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/flowbite/2.3.0/flowbite.min.css" rel="stylesheet" />

<!-- Fancybox CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fancyapps/ui@5.0/dist/fancybox/fancybox.css" />
@endpush

@push('scripts')
<!-- Flowbite JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/flowbite/2.3.0/flowbite.min.js"></script>

<!-- Fancybox JS -->
<script src="https://cdn.jsdelivr.net/npm/@fancyapps/ui@5.0/dist/fancybox/fancybox.umd.js"></script>
<script>
    Fancybox.bind("[data-fancybox]", {
        Carousel: {
            infinite: false,
        },
        Thumbs: {
            autoStart: true,
            type: "classic",
        }
    });

    // Initialize categories slider
    document.addEventListener('DOMContentLoaded', function() {
        const slider = document.getElementById('categories-slider');
        const prevButton = document.getElementById('prev-button');
        const nextButton = document.getElementById('next-button');
        const dots = document.querySelectorAll('.slider-dot');
        const slideCount = {{ $galleryCategories->chunk(4)->count() }};
        let currentSlide = 0;

        function updateSlider() {
            slider.style.transform = `translateX(-${currentSlide * 100}%)`;
            dots.forEach((dot, index) => {
                dot.classList.toggle('bg-maroon', index === currentSlide);
                dot.classList.toggle('bg-gray-300', index !== currentSlide);
            });
        }

        // Set initial state
        updateSlider();

        // Previous button click
        prevButton.addEventListener('click', () => {
            currentSlide = (currentSlide - 1 + slideCount) % slideCount;
            updateSlider();
        });

        // Next button click
        nextButton.addEventListener('click', () => {
            currentSlide = (currentSlide + 1) % slideCount;
            updateSlider();
        });

        // Dot navigation
        dots.forEach((dot, index) => {
            dot.addEventListener('click', () => {
                currentSlide = index;
                updateSlider();
            });
        });

        // Initialize other carousels
        const carousels = document.querySelectorAll('[data-carousel="static"]');
        carousels.forEach(carousel => {
            new Carousel(carousel, {
                indicators: true,
                interval: 3000
            });
        });
    });
</script>
@endpush
@endsection

</html>
