{{-- Archivos planos de Imusa: vista previa en el marco y descarga del principal y el detalle desde Central.
     Kit ui-ctc (MigracionLayout.MD, L3). Antes: Bootstrap + jQuery; el oyente de rutaAPI ahora es de Alpine. --}}
<div x-data="{
        base: 'https://central.asercolgroup.com/imusa/archivoplano',
        url(numdo, tipo, descargar) {
            return this.base + '?numdo=' + encodeURIComponent(numdo) + '&tipo=' + tipo + '&descargar=' + descargar;
        },
     }"
     x-init="window.addEventListener('rutaAPI', (event) => {
        const numdo = event.detail.numdo;
        $refs.contenidoArchivo.setAttribute('src', url(numdo, 'ambos', 'N'));
        if (event.detail.descargar == 'S') {
            window.open(url(numdo, 'principal', 'S'));
            window.open(url(numdo, 'detalle', 'S'));
        }
     })">
<x-pagina>
    <x-encabezado-pagina ruta="Importaciones · Operaciones" titulo="Archivos planos"
                         descripcion="Archivos Planos (.txt y .zip)" />

    <x-tarjeta>
        <form wire:submit="procesarArchivo" class="flex flex-wrap items-end gap-3">
            <x-campo etiqueta="Numero DO" para="campo_do" class="w-[150px]">
                <x-input id="campo_do" type="text" wire:model="campo_do" />
            </x-campo>
            <x-campo etiqueta="Accion" para="campo_accion" class="w-[180px]">
                <x-select id="campo_accion" wire:model="campo_accion">
                    <option value="N">VISTA PREVIA</option>
                    <option value="S">DESCARGAR</option>
                </x-select>
            </x-campo>
            <x-campo etiqueta="Tipo de plano" para="campo_tipo" class="w-[200px]">
                <x-select id="campo_tipo" wire:model="campo_tipo">
                    <option value="principal">PRINCIPAL (.txt)</option>
                    <option value="detalle">DETALLE (.txt)</option>
                    <option value="ambos">AMBOS (.zip)</option>
                </x-select>
            </x-campo>
            <x-button type="submit" wire:loading.attr="disabled" wire:target="procesarArchivo">
                <x-icono nombre="check" /> Procesar
            </x-button>
            <span wire:loading wire:target="procesarArchivo" class="inline-flex items-center gap-1.5 self-center text-[13px] text-[var(--texto-suave)]">
                <x-icono nombre="arrow-path" class="h-4 w-4 animate-spin" /> <b>Procesando,</b> por favor espere ...
            </span>
        </form>

        @if ($error)
            <x-alerta tipo="error" class="mt-3">{{ $error }}</x-alerta>
        @endif
    </x-tarjeta>

    {{-- wire:ignore: el src lo pone el navegador; sin esto, cada respuesta de Livewire lo devolvía a vacío. --}}
    <section wire:ignore class="h-[400px] overflow-hidden rounded-xl border border-[var(--borde)] bg-[var(--superficie)]">
        <iframe id="contenidoArchivo" x-ref="contenidoArchivo" src="" title="Vista previa del archivo plano" class="h-full w-full"></iframe>
    </section>
</x-pagina>
</div>