@props([
    'name' => 'gallery[]', 
    'label' => 'Galería de Archivos Múltiples', 
    'required' => false,
    'accept' => 'image/jpeg,image/png,image/jpg',
    'maxFiles' => 10,
    'maxFilesize' => 5 // Megabytes
])

@php
    // Evitar conflictos si se inyectan varias galerías
    $dropzoneId = 'dropzone_' . Str::random(8);
@endphp

@pushonce('css')
    <!-- Dropzone CSS -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.9.3/dropzone.min.css" />
    <style>
        .custom-dropzone {
            border: 2px dashed #007bff;
            border-radius: 8px;
            background: #f8f9fa;
            min-height: 200px;
            padding: 20px;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-wrap: wrap;
            cursor: pointer;
            transition: all 0.3s;
        }
        .custom-dropzone:hover {
            background: #e9ecef;
            border-color: #0056b3;
        }
        .dz-message {
            text-align: center;
            color: #6c757d;
        }
        .dz-message i {
            font-size: 3rem;
            margin-bottom: 10px;
        }
        .fallback { display: none; }
    </style>
@endpushonce

<div class="form-group">
    @if($label)
        <label class="font-weight-bold text-dark small text-uppercase" style="letter-spacing: 0.5px;">
            {{ $label }}
            @if($required) <span class="text-danger" title="Campo obligatorio">*</span> @endif
            <span class="text-muted ml-2 text-lowercase" style="font-size: 11px;">(Máximo {{ $maxFiles }} archivos)</span>
        </label>
    @endif

    <div class="shadow-sm">
        {{-- Zona visual interactiva --}}
        <div id="{{ $dropzoneId }}" class="custom-dropzone @error(str_replace('[]', '', $name)) border-danger @enderror">
            <div class="dz-message" data-dz-message>
                <i class="fas fa-images"></i>
                <br>
                <span>Arrastre aquí las fotos o haga clic para elegirlas</span>
            </div>
            
            {{-- Entorno real de los archivos que Laravel leerá en su Request al enviar el Form --}}
            <div class="fallback">
                <input name="{{ $name }}" type="file" multiple {{ $required ? 'required' : '' }} />
            </div>
        </div>
    </div>

    @error(str_replace('[]', '', $name))
        <span class="text-danger d-block mt-1 font-weight-bold small" role="alert">
            <i class="fas fa-exclamation-circle mr-1"></i> {{ $message }}
        </span>
    @enderror
</div>

@pushonce('js')
    <!-- Dropzone JS -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.9.3/min/dropzone.min.js"></script>
    <script>
        // Deshabilitar el auto-discover global para evitar que Dropzone intercepte todos los Forms
        Dropzone.autoDiscover = false;
    </script>
@endpushonce

@push('js')
<script>
    document.addEventListener("DOMContentLoaded", function() {
        // Inicializamos nuestro div interactivo
        let miDropzone = new Dropzone("#{{ $dropzoneId }}", {
            url: "#", // IMPORTANTE: Ponemos url "#" porque NO vamos a subir vía Ajax individual. Vamos a capturar todo en el Form normal.
            autoProcessQueue: false, // ¡No subir de inmediato! Esperar a presionar "Guardar" del Formulario.
            uploadMultiple: true,
            parallelUploads: 100,
            maxFiles: {{ $maxFiles }},
            maxFilesize: {{ $maxFilesize }}, // MB
            acceptedFiles: "{{ $accept }}",
            addRemoveLinks: true,
            dictRemoveFile: "Eliminar",
            dictCancelUpload: "Cancelar",
            dictFileTooBig: "El archivo es muy pesado.",
            dictInvalidFileType: "Formato no permitido.",
            dictMaxFilesExceeded: "No puede subir más archivos."
        });

        // Interceptión mágica: Al enviar el formulario padre de este Dropzone, 
        // injectamos los archivos ocultamente en el DOM nativo para engañar a Laravel y que reciba el array completo en el mismo Request
        let $formReference = $("#{{ $dropzoneId }}").closest('form');
        
        $formReference.on('submit', function(e) {
            // Si hay archivos en cola "visual"
            let queuedFiles = miDropzone.getQueuedFiles();
            
            if (queuedFiles.length > 0) {
                // Prevenir el submit inmediatamente
                e.preventDefault();
                e.stopPropagation();

                // Crear un Input de Formato DataTransfer (Lo que usa HTML nativo cuando escoges múltiples)
                let dataTransfer = new DataTransfer();
                
                queuedFiles.forEach(file => {
                    dataTransfer.items.add(file);
                });

                // Crear el Input invisible final en el DOM y volcarle el DataTransfer
                let $finalInput = $('<input>')
                    .attr('type', 'file')
                    .attr('name', '{{ $name }}') // El array que lee validacion de Laravel (ej: fotos[])
                    .prop('multiple', true)
                    .css('display', 'none');

                $finalInput[0].files = dataTransfer.files;

                // Destruir cualquier input viejo que existiera por el Fallback
                $formReference.find('input[name="{{ $name }}"]').remove();
                
                // Anexar el nuevo y someter
                $formReference.append($finalInput);
                
                // Disparamos el submit oficial pasándole el by-pass
                this.submit();
            }
        });
    });
</script>
@endpush