@props([
    'name' => 'codigo', 
    'label' => 'Escanear Código', 
    'required' => false,
    'placeholderText' => 'Tomar foto o seleccionar archivo...',
    'browseText' => 'Cámara / Galería',
])

<div class="form-group qr-upload-container">
    <label for="{{ $name }}_file" 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
    </label>
    
    <div class="input-group shadow-sm">
        {{-- Input visual para subir la imagen (Hardware Access) --}}
        <div class="custom-file">
            <input 
                type="file" 
                class="custom-file-input qr-scanner-input"
                id="{{ $name }}_file" 
                accept="image/*"
                capture="environment" {{-- Fuerza la cámara trasera en móviles Android/iOS --}}
            >
            <label class="custom-file-label" for="{{ $name }}_file" data-browse="{{ $browseText }}">
                <i class="fas fa-camera mr-1"></i> <span class="qr-label-txt">{{ $placeholderText }}</span>
            </label>
        </div>
    </div>

    {{-- Input real (Hidden) que se envía al servidor con el valor del texto descifrado --}}
    <input 
        type="hidden" 
        name="{{ $name }}" 
        id="{{ $name }}_hidden" 
        value="{{ old($name) }}"
        {{ $required ? 'required' : '' }}
    >

    {{-- Spinner de Carga UI --}}
    <div class="mt-2 text-info qr-loading-indicator" style="display: none; font-size: 0.85rem;">
        <i class="fas fa-spinner fa-spin mr-1"></i> Analizando imagen...
    </div>

    {{-- Alerta de Éxito Visual UI --}}
    <div class="mt-2 text-success qr-success-indicator font-weight-bold" style="display: none; font-size: 0.9rem;">
        <i class="fas fa-check-circle mr-1"></i> Código detectado: <span class="qr-result-text text-dark"></span>
    </div>

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

    {{-- Contenedor oculto requerido por el motor de HTML5-QRCode para procesamiento interno --}}
    <div id="reader" style="display: none;"></div>
</div>

@pushonce('js')
{{-- Incluir HTML5-QRCode v2 desde CDN --}}
<script src="https://unpkg.com/html5-qrcode" type="text/javascript"></script>

<script>
    document.addEventListener("DOMContentLoaded", function() {
        const qrInputs = document.querySelectorAll('.qr-scanner-input');
        
        // Inicializar decodificador una sola vez en memoria
        const html5QrCode = new Html5Qrcode("reader" /* no necesitamos renderizar UI de la cámara directa, solo el motor lógico */);

        qrInputs.forEach(function(input) {
            input.addEventListener('change', function(e) {
                if (e.target.files.length == 0) {
                    return;
                }

                // 1. Obtener referencias al DOM hermano de este input específico
                const container = this.closest('.qr-upload-container');
                const labelTxt = container.querySelector('.qr-label-txt');
                const hiddenInput = container.querySelector('input[type="hidden"]');
                const loadingIndicator = container.querySelector('.qr-loading-indicator');
                const successIndicator = container.querySelector('.qr-success-indicator');
                const resultText = container.querySelector('.qr-result-text');
                
                const imageFile = e.target.files[0];

                // 2. Actualizar UI (Borrando estado previo)
                labelTxt.innerText = imageFile.name;
                hiddenInput.value = '';
                successIndicator.style.display = 'none';
                loadingIndicator.style.display = 'block';

                // 3. Procesar archivo
                html5QrCode.scanFile(imageFile, true)
                .then(decodedText => {
                    // ÉXITO: Código encontrado
                    loadingIndicator.style.display = 'none';
                    successIndicator.style.display = 'block';
                    
                    // Llenar datos descubiertos para envío posterior al backend
                    resultText.innerText = decodedText;
                    hiddenInput.value = decodedText;

                    // Opcionalmente borrar el archivo visual para que no se envíe al servidor con el formulario y ocupe ancho de banda
                    // input.value = ""; 
                })
                .catch(err => {
                    // ERROR: No se encontró código en la foto
                    loadingIndicator.style.display = 'none';
                    hiddenInput.value = '';
                    
                    // Disparar SweetAlert de tu plantilla
                    if(typeof Swal !== 'undefined') {
                        Swal.fire({
                            icon: 'warning',
                            title: 'No se detectó código',
                            text: 'Asegúrese de que el código QR o de barras esté bien iluminado y nítido en la foto.',
                            confirmButtonColor: '#d33'
                        });
                    } else {
                        alert("No se detectó ningún código. Intente tomar la foto de nuevo.");
                    }
                });
            });
        });
    });
</script>
@endpushonce