{{-- 
    Publishing Block: Image Grid
    Grid gallery of images with optional captions
    
    Block Data Structure:
    {
        "type": "image_grid",
        "title": "Gallery",
        "columns": 4,
        "gap": "default", // small, default, large
        "images": [
            {
                "path": "path/to/image.jpg",
                "caption": "Image caption",
                "alt": "Alt text",
                "link": "/url"
            }
        ],
        "show_lightbox": true,
        "hover_effect": "zoom" // zoom, grayscale, blur, none
    }
--}}
@php
    $columns = $block['columns'] ?? 4;
    $gap = $block['gap'] ?? 'default';
    $hoverEffect = $block['hover_effect'] ?? 'zoom';
    $showLightbox = $block['show_lightbox'] ?? true;
    $images = $block['images'] ?? [];
    
    $columnClasses = [
        2 => 'grid-cols-1 sm:grid-cols-2',
        3 => 'grid-cols-1 sm:grid-cols-2 lg:grid-cols-3',
        4 => 'grid-cols-2 sm:grid-cols-3 lg:grid-cols-4',
        5 => 'grid-cols-2 sm:grid-cols-3 lg:grid-cols-5',
        6 => 'grid-cols-2 sm:grid-cols-3 lg:grid-cols-6',
    ];
    
    $gapClasses = [
        'small' => 'gap-2',
        'default' => 'gap-4',
        'large' => 'gap-6 lg:gap-8',
    ];
    
    $hoverClasses = [
        'zoom' => 'hover:scale-105',
        'grayscale' => 'grayscale hover:grayscale-0',
        'blur' => 'blur-sm hover:blur-none',
        'none' => '',
    ];
@endphp

<section class="py-12 lg:py-16 bg-white">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        @if(!empty($block['title']))
            <div class="text-center mb-8">
                <h2 class="text-3xl font-bold text-gray-800">{{ $block['title'] }}</h2>
                @if(!empty($block['subtitle']))
                    <p class="text-gray-600 mt-2">{{ $block['subtitle'] }}</p>
                @endif
            </div>
        @endif
        
        <div class="grid {{ $columnClasses[$columns] ?? 'grid-cols-2 sm:grid-cols-3 lg:grid-cols-4' }} {{ $gapClasses[$gap] ?? 'gap-4' }}">
            @foreach($images as $index => $image)
                @php
                    $tag = !empty($image['link']) ? 'a' : 'div';
                    $href = !empty($image['link']) ? 'href="' . $image['link'] . '"' : '';
                @endphp
                
                @if(!empty($image['link']))
                    <a href="{{ $image['link'] }}" class="block group">
                @else
                    <div class="block group">
                @endif
                
                    <div class="relative overflow-hidden rounded-lg bg-gray-100 {{ $showLightbox ? 'cursor-pointer' : '' }}"
                         @if($showLightbox)
                             x-data
                             @click="$dispatch('open-lightbox', { index: {{ $index }} })"
                         @endif>
                        
                        {{-- Aspect Ratio --}}
                        @if($block['aspect_ratio'] ?? 'square' === 'square')
                            <div class="aspect-square">
                        @elseif($block['aspect_ratio'] === 'landscape')
                            <div class="aspect-video">
                        @elseif($block['aspect_ratio'] === 'portrait')
                            <div class="aspect-[3/4]">
                        @else
                            <div class="aspect-square">
                        @endif
                        
                            @if(!empty($image['path']))
                                <img src="{{ asset('storage/' . $image['path']) }}" 
                                     alt="{{ $image['alt'] ?? $image['caption'] ?? '' }}"
                                     class="w-full h-full object-cover {{ $hoverClasses[$hoverEffect] ?? 'hover:scale-105' }} transition duration-300">
                            @endif
                        </div>
                        
                        {{-- Caption Overlay --}}
                        @if(!empty($image['caption']))
                            <div class="absolute inset-0 bg-gradient-to-t from-black/70 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-end p-4">
                                <p class="text-white text-sm">{{ $image['caption'] }}</p>
                            </div>
                        @endif
                        
                        {{-- Lightbox Icon --}}
                        @if($showLightbox)
                            <div class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-300">
                                <div class="w-12 h-12 rounded-full bg-white/90 flex items-center justify-center">
                                    <i class="fas fa-search-plus text-gray-800"></i>
                                </div>
                            </div>
                        @endif
                    </div>
                
                @if(!empty($image['link']))
                    </a>
                @else
                    </div>
                @endif
            @endforeach
        </div>
    </div>
</section>

{{-- Lightbox Modal --}}
@if($showLightbox && !empty($images))
    <div x-data="{ show: false, current: 0, images: {{ json_encode($images) }} }"
         x-show="show"
         x-transition:enter="transition ease-out duration-300"
         x-transition:enter-start="opacity-0"
         x-transition:enter-end="opacity-100"
         x-transition:leave="transition ease-in duration-200"
         x-transition:leave-start="opacity-100"
         x-transition:leave-end="opacity-0"
         @open-lightbox.window="current = $event.detail.index; show = true"
         @keydown.escape.window="show = false"
         @keydown.left.window="current = (current - 1 + images.length) % images.length"
         @keydown.right.window="current = (current + 1) % images.length"
         class="fixed inset-0 z-50 flex items-center justify-center p-4"
         style="display: none;">
        
        {{-- Backdrop --}}
        <div class="absolute inset-0 bg-black/90" @click="show = false"></div>
        
        {{-- Content --}}
        <div class="relative max-w-5xl w-full">
            {{-- Close Button --}}
            <button @click="show = false" 
                    class="absolute -top-12 right-0 text-white hover:text-gray-300 transition">
                <i class="fas fa-times text-2xl"></i>
            </button>
            
            {{-- Image --}}
            <img :src="'{{ asset('storage/') }}/' + images[current].path"
                 :alt="images[current].alt || images[current].caption || ''"
                 class="w-full max-h-[80vh] object-contain rounded-lg">
            
            {{-- Caption --}}
            <div x-show="images[current].caption" 
                 x-text="images[current].caption"
                 class="text-center text-white mt-4"></div>
            
            {{-- Navigation --}}
            <button @click="current = (current - 1 + images.length) % images.length"
                    class="absolute left-4 top-1/2 -translate-y-1/2 w-12 h-12 rounded-full bg-white/10 hover:bg-white/20 flex items-center justify-center text-white transition">
                <i class="fas fa-chevron-left"></i>
            </button>
            <button @click="current = (current + 1) % images.length"
                    class="absolute right-4 top-1/2 -translate-y-1/2 w-12 h-12 rounded-full bg-white/10 hover:bg-white/20 flex items-center justify-center text-white transition">
                <i class="fas fa-chevron-right"></i>
            </button>
            
            {{-- Counter --}}
            <div class="absolute -bottom-10 left-1/2 -translate-x-1/2 text-white/70 text-sm">
                <span x-text="current + 1"></span> / <span x-text="images.length"></span>
            </div>
        </div>
    </div>
@endif
