@props([
    'documents',
    'containerId' => 'sortable-documents',
    'canDelete' => false,
    'showDownload' => true,
    'canEditType' => false,
    'canEditName' => false,
    'documentTypeEnum' => null,
])

<div id="{{ $containerId }}" class="row g-3">
    @foreach($documents->sortBy('order') as $document)
    <div class="col-md-3 col-sm-4 col-6 sortable-document-item" data-id="{{ $document->id }}">
        <div class="card h-100 document-card">
            <div class="card-img-top bg-light d-flex align-items-center justify-content-center position-relative" 
                 style="height: 150px; cursor: pointer;" 
                 onclick="openDocumentFromGallery('{{ $containerId }}', {{ $loop->index }})"
                 data-url="{{ $document->file_url }}"
                 data-title="{{ $document->type_enum?->label() ?? $document->name }}"
                 title="Cliquez pour ouvrir {{ $document->type_enum?->label() ?? $document->name }}">
                <i class="fas {{ $document->type_enum?->icon() ?? 'fa-file-pdf' }} fa-3x {{ $document->type_enum?->textColor() ?? 'text-secondary' }}"></i>
                <div class="position-absolute top-0 start-0 m-2 document-order-badge">
                    <span class="badge bg-dark bg-opacity-75">{{ $document->order ?? 0 }}</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-eye fa-2x text-primary opacity-75"></i>
                </div>
            </div>
            <div class="card-body p-2">
                @if($canEditType && $documentTypeEnum)
                <div class="mb-2">
                    <select name="update_document_types[{{ $document->id }}]" class="form-select form-select-sm">
                        @foreach($documentTypeEnum::cases() as $type)
                            <option value="{{ $type->value }}" {{ $document->type == $type->value ? 'selected' : '' }}>
                                {{ $type->label() }}
                            </option>
                        @endforeach
                    </select>
                </div>
                @else
                    @if($document->type_enum)
                    <div class="text-center mb-2">
                        <span class="badge {{ $document->type_enum->bgColor() }}">
                            <i class="fas {{ $document->type_enum->icon() }} me-1"></i>{{ $document->type_enum->label() }}
                        </span>
                    </div>
                    @endif
                @endif
                
                @if($canEditName)
                <div class="mb-2">
                    <input type="text" 
                           name="update_document_names[{{ $document->id }}]" 
                           class="form-control form-control-sm" 
                           value="{{ $document->name }}" 
                           placeholder="Nom du document">
                </div>
                @else
                    @if($document->name)
                    <div class="text-center mb-2">
                        <small class="text-dark fw-semibold">{{ $document->name }}</small>
                    </div>
                    @endif
                @endif
                
                <div class="small text-muted text-center">
                    {{ number_format($document->file_size / 1024, 2) }} KB
                </div>
                
                @if($showDownload)
                <div class="mt-2">
                    <a href="{{ $document->file_url }}" target="_blank" class="btn btn-sm btn-outline-primary w-100">
                        <i class="fas fa-download me-1"></i>Télécharger
                    </a>
                </div>
                @endif
                
                @if($canDelete)
                <div class="form-check mt-2">
                    <input class="form-check-input" type="checkbox" name="delete_documents[]" value="{{ $document->id }}" id="delete_doc_{{ $document->id }}">
                    <label class="form-check-label small" for="delete_doc_{{ $document->id }}">
                        Supprimer
                    </label>
                </div>
                @endif
            </div>
        </div>
    </div>
    @endforeach
</div>

<script>
function openDocumentFromGallery(containerId, startIndex) {
    const container = document.getElementById(containerId);
    const docElements = container.querySelectorAll('[data-url][data-title]');
    const items = Array.from(docElements).map(el => ({
        url: el.dataset.url,
        title: el.dataset.title,
        type: 'pdf'
    }));
    
    if (typeof MediaLightbox !== 'undefined') {
        MediaLightbox.open(items, startIndex);
    }
}
</script>