@extends('frontend.layouts.app')

@section('title', $title)
@section('description', $description)

@section('content')
    <!-- Slideshow Header -->
    <div class="bg-black text-white py-4">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex items-center justify-between">
                <div>
                    <h1 class="text-xl font-semibold">{{ $gallery->title }}</h1>
                    <p class="text-sm text-gray-300">{{ $gallery->items->count() }} {{ Str::plural('item', $gallery->items->count()) }}</p>
                </div>
                <div class="flex items-center space-x-4">
                    <a href="{{ route('frontend.galleries.show', $gallery->slug) }}"
                       class="text-white hover:text-gray-300 transition-colors duration-200">
                        <i class="fas fa-th mr-2"></i>
                        Grid View
                    </a>
                    <a href="{{ route('frontend.galleries.index') }}"
                       class="text-white hover:text-gray-300 transition-colors duration-200">
                        <i class="fas fa-arrow-left mr-2"></i>
                        Back to Galleries
                    </a>
                </div>
            </div>
        </div>
    </div>

    <!-- Slideshow Container -->
    <div class="bg-black min-h-screen">
        @if($gallery->items->count() > 0)
            <div class="relative">
                <!-- Slideshow Controls -->
                <div class="absolute top-1/2 left-4 transform -translate-y-1/2 z-10">
                    <button onclick="previousSlide()"
                            class="bg-black bg-opacity-50 text-white p-3 rounded-full hover:bg-opacity-75 transition-all duration-200">
                        <i class="fas fa-chevron-left text-xl"></i>
                    </button>
                </div>

                <div class="absolute top-1/2 right-4 transform -translate-y-1/2 z-10">
                    <button onclick="nextSlide()"
                            class="bg-black bg-opacity-50 text-white p-3 rounded-full hover:bg-opacity-75 transition-all duration-200">
                        <i class="fas fa-chevron-right text-xl"></i>
                    </button>
                </div>

                <!-- Slideshow Counter -->
                <div class="absolute top-4 left-1/2 transform -translate-x-1/2 z-10 bg-black bg-opacity-50 text-white px-4 py-2 rounded-full">
                    <span id="slide-counter">1</span> of {{ $gallery->items->count() }}
                </div>

                <!-- Slideshow Items -->
                <div class="flex items-center justify-center min-h-screen">
                    @foreach($gallery->items as $index => $item)
                        <div id="slide-{{ $index + 1 }}"
                             class="slide {{ $index === 0 ? 'active' : 'hidden' }} max-w-4xl max-h-full mx-4">

                            @if($item->file_type === 'image')
                                <img src="{{ $item->file_url }}"
                                     alt="{{ $item->title ?: 'Gallery item' }}"
                                     class="max-w-full max-h-full object-contain">
                            @elseif($item->file_type === 'video')
                                <video class="max-w-full max-h-full" controls autoplay>
                                    <source src="{{ $item->file_url }}" type="video/mp4">
                                    Your browser does not support the video tag.
                                </video>
                            @else
                                <div class="max-w-full max-h-full bg-gray-800 flex items-center justify-center p-8">
                                    <div class="text-center text-white">
                                        <i class="fas fa-file text-6xl mb-4"></i>
                                        <p class="text-lg">{{ $item->title ?: 'File' }}</p>
                                        @if($item->description)
                                            <p class="text-gray-300 mt-2">{{ $item->description }}</p>
                                        @endif
                                    </div>
                                </div>
                            @endif

                            <!-- Item Caption -->
                            @if($item->title || $item->description)
                                <div class="absolute bottom-4 left-4 right-4 bg-black bg-opacity-75 text-white p-4 rounded">
                                    @if($item->title)
                                        <h3 class="text-lg font-semibold mb-2">{{ $item->title }}</h3>
                                    @endif
                                    @if($item->description)
                                        <p class="text-gray-300">{{ $item->description }}</p>
                                    @endif
                                </div>
                            @endif
                        </div>
                    @endforeach
                </div>

                <!-- Thumbnail Navigation -->
                @if($gallery->items->count() > 1)
                    <div class="absolute bottom-4 left-1/2 transform -translate-x-1/2 z-10">
                        <div class="flex space-x-2 bg-black bg-opacity-50 p-2 rounded">
                            @foreach($gallery->items as $index => $item)
                                <button onclick="goToSlide({{ $index + 1 }})"
                                        class="thumbnail-btn w-16 h-16 rounded overflow-hidden {{ $index === 0 ? 'ring-2 ring-white' : '' }}">
                                    @if($item->file_type === 'image')
                                        <img src="{{ $item->file_url }}"
                                             alt="Thumbnail"
                                             class="w-full h-full object-cover">
                                    @elseif($item->file_type === 'video')
                                        <div class="w-full h-full bg-gray-700 flex items-center justify-center">
                                            <i class="fas fa-video text-white"></i>
                                        </div>
                                    @else
                                        <div class="w-full h-full bg-gray-700 flex items-center justify-center">
                                            <i class="fas fa-file text-white"></i>
                                        </div>
                                    @endif
                                </button>
                            @endforeach
                        </div>
                    </div>
                @endif
            </div>
        @else
            <!-- No Items -->
            <div class="flex items-center justify-center min-h-screen">
                <div class="text-center text-white">
                    <i class="fas fa-images text-6xl mb-4"></i>
                    <h3 class="text-xl font-semibold mb-2">No items in this gallery</h3>
                    <p class="text-gray-300 mb-6">This gallery is empty at the moment.</p>
                    <a href="{{ route('frontend.galleries.show', $gallery->slug) }}"
                       class="bg-white text-black px-6 py-3 rounded-lg font-medium hover:bg-gray-100 transition-colors duration-200">
                        <i class="fas fa-arrow-left mr-2"></i>
                        Back to Gallery
                    </a>
                </div>
            </div>
        @endif
    </div>

    @push('styles')
        <style>
            .slide {
                transition: opacity 0.3s ease-in-out;
            }
            .slide.active {
                opacity: 1;
            }
            .slide.hidden {
                opacity: 0;
                position: absolute;
                top: 0;
                left: 0;
            }
            .thumbnail-btn {
                transition: all 0.2s ease-in-out;
            }
            .thumbnail-btn:hover {
                transform: scale(1.05);
            }
        </style>
    @endpush

    @push('scripts')
        <script>
            let currentSlide = 1;
            const totalSlides = {{ $gallery->items->count() }};

            function showSlide(slideNumber) {
                // Hide all slides
                document.querySelectorAll('.slide').forEach(slide => {
                    slide.classList.remove('active');
                    slide.classList.add('hidden');
                });

                // Show current slide
                const currentSlideElement = document.getElementById(`slide-${slideNumber}`);
                if (currentSlideElement) {
                    currentSlideElement.classList.remove('hidden');
                    currentSlideElement.classList.add('active');
                }

                // Update counter
                document.getElementById('slide-counter').textContent = slideNumber;

                // Update thumbnail buttons
                document.querySelectorAll('.thumbnail-btn').forEach((btn, index) => {
                    if (index === slideNumber - 1) {
                        btn.classList.add('ring-2', 'ring-white');
                    } else {
                        btn.classList.remove('ring-2', 'ring-white');
                    }
                });
            }

            function nextSlide() {
                if (currentSlide < totalSlides) {
                    currentSlide++;
                } else {
                    currentSlide = 1;
                }
                showSlide(currentSlide);
            }

            function previousSlide() {
                if (currentSlide > 1) {
                    currentSlide--;
                } else {
                    currentSlide = totalSlides;
                }
                showSlide(currentSlide);
            }

            function goToSlide(slideNumber) {
                currentSlide = slideNumber;
                showSlide(currentSlide);
            }

            // Keyboard navigation
            document.addEventListener('keydown', function(e) {
                switch(e.key) {
                    case 'ArrowLeft':
                        previousSlide();
                        break;
                    case 'ArrowRight':
                        nextSlide();
                        break;
                    case 'Escape':
                        window.location.href = '{{ route('frontend.galleries.show', $gallery->slug) }}';
                        break;
                }
            });

            // Auto-advance slides (optional)
            let autoAdvance = setInterval(nextSlide, 5000); // Change slide every 5 seconds

            // Pause auto-advance on hover
            document.addEventListener('mouseenter', function() {
                clearInterval(autoAdvance);
            });

            document.addEventListener('mouseleave', function() {
                autoAdvance = setInterval(nextSlide, 5000);
            });
        </script>
    @endpush
@endsection