@props([
    'images',
    'containerId' => 'sortable-images',
    'canDelete' => false,
])

<div id="{{ $containerId }}" class="row g-3">
    @foreach($images->sortBy('order_column') as $media)
    <div class="col-md-3 col-sm-4 col-6 sortable-item" data-id="{{ $media->id }}">
        <div class="card image-card h-100">
            <div class="card-img-container position-relative" style="height: 200px; overflow: hidden; display: flex; align-items: center; justify-content: center; background-color: #f8f9fa; cursor: pointer;" 
                 onclick="openImageFromGallery('{{ $containerId }}', {{ $loop->index }})">
                <img src="{{ $media->getUrl('medium') }}" class="card-img-top" alt="{{ $media->name }}" style="max-height: 200px; width: auto; object-fit: contain;" data-full-url="{{ $media->getUrl() }}" data-title="{{ $media->file_name }}">
                <div class="position-absolute top-0 start-0 m-2 image-order-badge">
                    <span class="badge bg-dark bg-opacity-75">{{ $media->order_column }}</span>
                </div>
                <div class="position-absolute top-0 end-0 m-2">
                    <span class="badge bg-primary bg-opacity-75">
                        <i class="fas fa-grip-vertical"></i>
                    </span>
                </div>
                <div class="position-absolute top-50 start-50 translate-middle lightbox-overlay">
                    <i class="fas fa-search-plus fa-2x text-white opacity-75"></i>
                </div>
                @php
                    $imageType = $media->getCustomProperty('type');
                    $typeEnum = $imageType ? \App\Enums\ImageType::from($imageType) : null;
                @endphp
                @if($typeEnum)
                <div class="position-absolute bottom-0 start-0 m-2">
                    <span class="badge {{ $typeEnum->bgColor() }}">
                        <i class="fas {{ $typeEnum->icon() }} me-1"></i>{{ $typeEnum->label() }}
                    </span>
                </div>
                @endif
            </div>
            @if($canDelete)
            <div class="card-body p-2">
                <div class="form-check">
                    <input class="form-check-input" type="checkbox" name="delete_images[]" value="{{ $media->id }}" id="delete_{{ $media->id }}">
                    <label class="form-check-label small" for="delete_{{ $media->id }}">
                        Supprimer
                    </label>
                </div>
            </div>
            @else
            <div class="card-body p-2">
                <small class="text-muted d-block text-truncate">{{ $media->file_name }}</small>
            </div>
            @endif
        </div>
    </div>
    @endforeach
</div>

<script>
function openImageFromGallery(containerId, startIndex) {
    const container = document.getElementById(containerId);
    const images = container.querySelectorAll('img[data-full-url]');
    const items = Array.from(images).map(img => ({
        url: img.dataset.fullUrl,
        title: img.dataset.title || img.alt,
        type: 'image'
    }));
    
    if (typeof MediaLightbox !== 'undefined') {
        MediaLightbox.open(items, startIndex);
    }
}
</script>