@props(['id' => 'file-upload', 'accept' => '', 'maxSize' => '10', 'multiple' => true, 'uploadUrl' => '', 'label' => 'Drop files here or click to upload'])

<div class="file-upload-zone" id="{{ $id }}-dropzone">
    <div class="dropzone border border-2 border-dashed rounded-3 text-center p-4" style="border-color:#dee2e6;cursor:pointer;min-height:120px;display:flex;align-items:center;justify-content:center;">
        <div class="dz-message text-muted">
            <i class="bi bi-cloud-arrow-up fs-1 d-block mb-2"></i>
            <p class="mb-1 fw-medium">{{ $label }}</p>
            <small>Max file size: {{ $maxSize }}MB @if($accept) | Accepted: {{ $accept }} @endif</small>
        </div>
    </div>
    <div class="uploaded-files mt-3"></div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const dropzoneEl = document.getElementById('{{ $id }}-dropzone');
    if (dropzoneEl && typeof Dropzone !== 'undefined') {
        new Dropzone('#{{ $id }}-dropzone .dropzone', {
            url: '{{ $uploadUrl }}',
            maxFilesize: {{ $maxSize }},
            acceptedFiles: '{{ $accept }}',
            maxFiles: {{ $multiple ? 'null' : 1 }},
            addRemoveLinks: true,
            headers: {
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
            },
            init: function() {
                this.on('success', function(file, response) {
                    const container = dropzoneEl.querySelector('.uploaded-files');
                    const input = document.createElement('input');
                    input.type = 'hidden';
                    input.name = '{{ $id }}_files[]';
                    input.value = response.path || response.file;
                    container.appendChild(input);
                });
            }
        });
    }
});
</script>