{{-- Formulario de importación de un archivo Excel (kit ui-ctc, MigracionLayout.MD L3). Lo usan rimportpo, imporitemlegajo,
     reximportpo, reximportarifa y reximportocargue. Envía exactamente lo mismo que la versión Bootstrap, en el mismo
     orden: _token, [cboCompania], file (POST multipart a $accion).
     Variables: accion (URL del POST), requerido (el archivo es obligatorio), conImportador (selector de Ternium),
     exito (mensaje que el controlador pasa a la vista tras importar). --}}
@php
    $requerido = $requerido ?? false;
    $conImportador = $conImportador ?? false;
    $exito = $exito ?? null;
@endphp

@if ($exito)
    <x-alerta tipo="exito">{{ $exito }}</x-alerta>
@endif
@if ($errors->any())
    <x-alerta tipo="error">
        <ul class="list-inside list-disc space-y-0.5">
            @foreach ($errors->all() as $error)<li>{{ $error }}</li>@endforeach
        </ul>
    </x-alerta>
@endif

<x-tarjeta titulo="Archivo a importar" descripcion="Descargue la plantilla, diligénciela y súbala. El archivo se procesa al importar; puede tardar unos minutos.">
    <form action="{{ $accion }}" method="POST" enctype="multipart/form-data" class="space-y-4"
          x-data="{ enviando: false }" x-on:submit="enviando = true">
        @csrf
        @if ($conImportador)
            <x-campo etiqueta="Importador" para="cboCompania" class="max-w-md">
                <x-select name="cboCompania" id="cboCompania" required>
                    <option value="0">Seleccione una opción</option>
                    <option value="29">Ternium Del Atlantico</option>
                    <option value="36">Ternium Colombia</option>
                </x-select>
            </x-campo>
        @endif
        <x-campo etiqueta="Archivo Excel" para="file">
            <input type="file" name="file" id="file" @if ($requerido) required @endif
                   class="block w-full rounded-md border border-dashed border-[var(--borde-fuerte)] bg-[var(--superficie-2)] p-3 text-[13px] text-[var(--texto)]
                          file:mr-3 file:h-9 file:cursor-pointer file:rounded-lg file:border file:border-solid file:border-[var(--borde-fuerte)] file:bg-[var(--superficie)] file:px-4 file:text-[13px] file:font-semibold file:text-[var(--texto)] hover:file:bg-[var(--nav-hover)]
                          focus:border-[var(--acento)] focus:outline-none focus:ring-1 focus:ring-[var(--acento)]">
        </x-campo>
        <div class="flex flex-wrap items-center justify-end gap-3">
            <p x-show="enviando" x-cloak class="flex items-center gap-1.5 text-[12px] text-[var(--texto-suave)]" role="status">
                <x-icono nombre="arrow-path" class="h-3.5 w-3.5 animate-spin" /> Importando el archivo…
            </p>
            <x-button x-bind:disabled="enviando"><x-icono nombre="arrow-up-tray" /> Importar archivo</x-button>
        </div>
    </form>
</x-tarjeta>