{{-- Component for multifoto field in edit mode --}}
@php
    $existingPhotos = $list && $list->{$header->field} ? json_decode($list->{$header->field}, true) : [];
@endphp
<div class="multifoto-container" id="multifoto_{{ $header->field }}">
    @if(!empty($existingPhotos))
        <div class="existing-photos mb-3">
            <label class="form-control-label">Foto yang sudah ada:</label>
            <div class="row g-2" id="{{ $header->field }}_existing">
                @foreach($existingPhotos as $idx => $photo)
                    <div class="col-6 col-md-3" data-photo-index="{{ $idx }}">
                        <div class="position-relative">
                            <img src="{{ asset('storage/' . $photo) }}" 
                                 class="img-fluid rounded" 
                                 style="height: 150px; width: 100%; object-fit: cover;"
                                 data-bs-toggle="modal"
                                 data-bs-target="#photoModal{{ $header->field }}{{ $idx }}">
                            <button type="button" 
                                    class="btn btn-danger btn-sm position-absolute top-0 end-0 m-1" 
                                    onclick="removeExistingMultifoto_{{ $header->field }}({{ $idx }})"
                                    style="padding: 0.25rem 0.5rem;">
                                <i class="fas fa-times"></i>
                            </button>
                            <input type="hidden" 
                                   name="{{ $header->field }}_existing[]" 
                                   value="{{ $photo }}" 
                                   id="{{ $header->field }}_existing_{{ $idx }}">
                        </div>
                    </div>
                    <div class="modal fade" id="photoModal{{ $header->field }}{{ $idx }}" tabindex="-1">
                        <div class="modal-dialog modal-dialog-centered">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <h5 class="modal-title">Preview Foto</h5>
                                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                                </div>
                                <div class="modal-body">
                                    <img src="{{ asset('storage/' . $photo) }}" class="img-fluid">
                                </div>
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>
        </div>
    @endif
    
    <div class="upload-area border border-2 border-dashed rounded p-4 text-center" 
         style="cursor: pointer; background-color: #f8f9fa;"
         onclick="document.getElementById('{{ $header->field }}_input').click()">
        <i class="fas fa-cloud-upload-alt fa-3x text-primary mb-3"></i>
        <p class="mb-0">Klik untuk upload atau drag & drop foto baru</p>
        <small class="text-muted">Maksimal 10 foto total, masing-masing max 2MB (PNG, JPG, JPEG)</small>
    </div>
    <input type="file" 
           id="{{ $header->field }}_input" 
           name="{{ $header->field }}[]" 
           class="d-none" 
           multiple 
           accept="image/png,image/jpg,image/jpeg">
    <div class="preview-container row g-2 mt-3" id="{{ $header->field }}_preview"></div>
</div>
@if ($header->note != '')
    <p class='text-secondary text-xs pt-1 px-1'>{{ '*) ' . $header->note }}</p>
@endif
<script>
    (function() {
        const fieldName = '{{ $header->field }}';
        const input = document.getElementById(fieldName + '_input');
        const previewContainer = document.getElementById(fieldName + '_preview');
        const uploadArea = document.querySelector('#multifoto_' + fieldName + ' .upload-area');
        const existingContainer = document.getElementById(fieldName + '_existing');
        let selectedFiles = [];
        const maxFiles = 10, maxSize = 2 * 1024 * 1024;
        
        function getExistingCount() { 
            return existingContainer ? existingContainer.querySelectorAll('[data-photo-index]').length : 0; 
        }
        
        window['removeExistingMultifoto_' + fieldName] = function(index) { 
            const photoDiv = existingContainer.querySelector(`[data-photo-index="${index}"]`); 
            if (photoDiv) photoDiv.remove(); 
        };
        
        uploadArea.addEventListener('dragover', (e) => { e.preventDefault(); uploadArea.style.backgroundColor = '#e7f3ff'; });
        uploadArea.addEventListener('dragleave', (e) => { uploadArea.style.backgroundColor = '#f8f9fa'; });
        uploadArea.addEventListener('drop', (e) => { e.preventDefault(); uploadArea.style.backgroundColor = '#f8f9fa'; handleFiles(Array.from(e.dataTransfer.files)); });
        input.addEventListener('change', (e) => { handleFiles(Array.from(e.target.files)); });
        
        function handleFiles(files) { 
            files.forEach(file => { 
                if (getExistingCount() + selectedFiles.length >= maxFiles) { alert('Maksimal ' + maxFiles + ' foto total'); return; }
                if (file.size > maxSize) { alert('Ukuran file ' + file.name + ' melebihi 2MB'); return; }
                if (!file.type.match('image/(png|jpg|jpeg)')) { alert('Format file tidak didukung'); return; }
                selectedFiles.push(file); 
                displayPreview(file, selectedFiles.length - 1); 
            }); 
            updateFileInput(); 
        }
        
        function displayPreview(file, index) { 
            const reader = new FileReader(); 
            reader.onload = (e) => { 
                const col = document.createElement('div'); 
                col.className = 'col-6 col-md-3'; 
                col.innerHTML = `<div class="position-relative"><img src="${e.target.result}" class="img-fluid rounded" style="height: 150px; width: 100%; object-fit: cover;"><button type="button" class="btn btn-danger btn-sm position-absolute top-0 end-0 m-1" onclick="removeMultifoto_${fieldName}(${index})" style="padding: 0.25rem 0.5rem;"><i class="fas fa-times"></i></button></div>`; 
                previewContainer.appendChild(col); 
            }; 
            reader.readAsDataURL(file); 
        }
        
        window['removeMultifoto_' + fieldName] = function(index) { 
            selectedFiles.splice(index, 1); 
            previewContainer.innerHTML = ''; 
            selectedFiles.forEach((file, idx) => displayPreview(file, idx)); 
            updateFileInput(); 
        };
        
        function updateFileInput() { 
            const dataTransfer = new DataTransfer(); 
            selectedFiles.forEach(file => dataTransfer.items.add(file)); 
            input.files = dataTransfer.files; 
        }
    })();
</script>