{{-- Multi Photo Upload Component --}}
<div class="multifoto-container" id="multifoto_{{ $field }}">
    <div class="upload-area border border-2 border-dashed rounded p-4 text-center" 
         style="cursor: pointer; background-color: #f8f9fa;"
         onclick="document.getElementById('{{ $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 di sini</p>
        <small class="text-muted">Maksimal 10 foto, masing-masing max 2MB (PNG, JPG, JPEG)</small>
    </div>
    <input type="file" 
           id="{{ $field }}_input" 
           name="{{ $field }}[]" 
           class="d-none" 
           multiple 
           accept="image/png,image/jpg,image/jpeg">
    <div class="preview-container row g-2 mt-3" id="{{ $field }}_preview"></div>
</div>

<script>
(function() {
    const fieldName = '{{ $field }}';
    const input = document.getElementById(fieldName + '_input');
    const previewContainer = document.getElementById(fieldName + '_preview');
    const uploadArea = document.querySelector('#multifoto_' + fieldName + ' .upload-area');
    let selectedFiles = [];
    const maxFiles = 10;
    const maxSize = 2 * 1024 * 1024; // 2MB

    // Drag and drop handlers
    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';
        const files = Array.from(e.dataTransfer.files);
        handleFiles(files);
    });

    input.addEventListener('change', (e) => {
        const files = Array.from(e.target.files);
        handleFiles(files);
    });

    function handleFiles(files) {
        files.forEach(file => {
            if (selectedFiles.length >= maxFiles) {
                alert('Maksimal ' + maxFiles + ' foto yang dapat diupload');
                return;
            }

            if (file.size > maxSize) {
                alert('Ukuran file ' + file.name + ' melebihi 2MB');
                return;
            }

            if (!file.type.match('image/(png|jpg|jpeg)')) {
                alert('Format file ' + file.name + ' tidak didukung. Gunakan PNG, JPG, atau JPEG');
                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>