{{-- Pedidos WSIMEX (ordenescomprawsimex): DO de Websimex aún no procesados en el CTC. Layout nuevo, kit ui-ctc,
     MigracionLayout.MD L3. Mismas columnas y misma importación que la versión Bootstrap: confirmación y POST JSON
     {ndo} a /ordenescomprawsimex (antes SweetAlert + axios; ahora diálogo Alpine + fetch). --}}
<x-app-layout titulo="Pedidos WSIMEX">
    <script>
        // Definida antes del elemento: Alpine evalúa x-data al arrancar.
        window.ctcImportarWsimex = function (url) {
            return {
                confirmarDo: null,   // DO del diálogo de confirmación abierto
                estado: {},          // por DO: { cargando, hecho, texto, ok }
                fila(numeroDo) { return this.estado[numeroDo] || {}; },
                abrir(numeroDo) { this.confirmarDo = numeroDo; },
                async importar() {
                    var numeroDo = this.confirmarDo;
                    this.confirmarDo = null;
                    this.estado[numeroDo] = { cargando: true };
                    try {
                        var token = document.querySelector('meta[name="csrf-token"]');
                        var r = await fetch(url, {
                            method: 'POST',
                            headers: {
                                'Content-Type': 'application/json',
                                'Accept': 'application/json, text/plain, */*',
                                'X-Requested-With': 'XMLHttpRequest',
                                'X-CSRF-TOKEN': token ? token.content : ''
                            },
                            body: JSON.stringify({ ndo: numeroDo })
                        });
                        if (!r.ok) { throw new Error('HTTP ' + r.status); }
                        var datos = await r.json();
                        // El controlador responde con HTML de una etiqueta Bootstrap: se toma solo su texto.
                        var texto = new DOMParser().parseFromString(datos.mensaje || '', 'text/html').body.textContent.trim();
                        this.estado[datos.do || numeroDo] = { hecho: true, texto: texto, ok: !/error/i.test(texto) };
                    } catch (e) {
                        console.log(e);
                        this.estado[numeroDo] = { texto: 'Error al Importar Pedido', ok: false };
                    }
                }
            };
        };
    </script>

    <div x-data="ctcImportarWsimex({{ \Illuminate\Support\Js::from(url('/ordenescomprawsimex')) }})"
         x-on:keydown.escape.window="confirmarDo = null">
        <x-pagina>
            <x-encabezado-pagina ruta="Importaciones · Visibilidad Tiempo Real" titulo="Ordenes de Compra WEBSIMEX"
                                 descripcion="Sin procesar en CTC: órdenes de compra que están en WEBSIMEX y aún no son procesadas en CONTROL TOWER CLIENTES." />

            <section class="min-w-0 overflow-hidden rounded-xl border border-[var(--borde)] bg-[var(--superficie)]">
                <div class="flex flex-wrap items-center justify-between gap-3 border-b border-[var(--borde)] px-5 py-3">
                    <p class="text-[13px] text-[var(--texto-suave)]"><span class="font-semibold tabular-nums text-[var(--texto)]">{{ number_format($ordenes_compra->total(), 0, ',', '.') }}</span> órdenes de compra sin procesar</p>
                </div>
                <div class="ctc-tabla-caja">
                    <table class="ctc-tabla">
                        <thead>
                            <tr>
                                <th class="ctc-fija ctc-fija-ultima" style="left: 0">Número DO</th>
                                <th>Importación</th>
                                <th>Pedido</th>
                                <th>Proceso</th>
                                <th>Tipo proceso</th>
                                <th>Producto</th>
                                <th>Fecha orden de compra</th>
                                <th>ETA</th>
                                <th>BL / documento transporte</th>
                                <th>Cantidad de contenedores</th>
                                <th><span class="sr-only">Importar</span></th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse ($ordenes_compra as $oc)
                                <tr>
                                    <td class="ctc-fija ctc-fija-ultima whitespace-nowrap font-semibold" style="left: 0">{{ $oc->NUMERO_DO }}</td>
                                    <td><x-etiqueta>{{ $oc->NUMERO_PEDIDO }}</x-etiqueta></td>
                                    <td>{{ $oc->NUMERO_ORDEN_COMPRA }}</td>
                                    <td><x-etiqueta variante="aviso">{{ $oc->TIPO_REGIMEN == 'I' ? 'IMPORTACIÓN POR PUERTO' : 'DTA' }}</x-etiqueta></td>
                                    <td><x-etiqueta>{{ !is_null($oc->sub_proceso) ? $oc->sub_proceso->NOMBRE_TRAMITE : 'SIN ASIGNAR' }}</x-etiqueta></td>
                                    <td class="min-w-[16rem]">{{ $oc->DESCRIPCION }}</td>
                                    <td class="whitespace-nowrap">{{ $oc->FECHA_APERTURA }}</td>
                                    <td>
                                        <x-etiqueta :variante="$oc->ETA != '' ? 'exito' : 'peligro'">{{ $oc->ETA != '' ? $oc->ETA : 'SIN INFORMACIÓN' }}</x-etiqueta>
                                    </td>
                                    <td>
                                        @if (!is_null($oc->documentos_tr) && $oc->documentos_tr->NUMERO_DOC_TRANS != '')
                                            <x-etiqueta>{{ $oc->documentos_tr->NUMERO_DOC_TRANS }}</x-etiqueta>
                                        @else
                                            <x-etiqueta variante="peligro">SIN INFORMACION</x-etiqueta>
                                        @endif
                                    </td>
                                    <td>
                                        @if (!is_null($oc->unidad_carga))
                                            <x-etiqueta :variante="$oc->unidad_carga->count() > 0 ? 'info' : 'peligro'">{{ $oc->unidad_carga->count() }} Unidades</x-etiqueta>
                                        @else
                                            <span class="text-[12px] text-[var(--texto-suave)]">SIN INFORMACION EN WEBSIMEX</span>
                                        @endif
                                    </td>
                                    <td>
                                        <div class="flex items-center gap-2 whitespace-nowrap">
                                            <x-secondary-button type="button" class="importar" id="{{ $oc->NUMERO_DO }}"
                                                      x-bind:disabled="fila({{ \Illuminate\Support\Js::from($oc->NUMERO_DO) }}).cargando || fila({{ \Illuminate\Support\Js::from($oc->NUMERO_DO) }}).hecho"
                                                      x-on:click="abrir({{ \Illuminate\Support\Js::from($oc->NUMERO_DO) }})">
                                                <x-icono nombre="arrow-down-tray" /> Importar
                                            </x-secondary-button>
                                            <span id="load-{{ $oc->NUMERO_DO }}" x-show="fila({{ \Illuminate\Support\Js::from($oc->NUMERO_DO) }}).cargando" x-cloak role="status">
                                                <x-icono nombre="arrow-path" class="h-4 w-4 animate-spin text-[var(--texto-suave)]" /><span class="sr-only">Cargando…</span>
                                            </span>
                                            <span id="ms-{{ $oc->NUMERO_DO }}" x-show="fila({{ \Illuminate\Support\Js::from($oc->NUMERO_DO) }}).texto" x-cloak
                                                  class="inline-flex items-center whitespace-nowrap rounded-md px-2 py-[3px] text-[12px] font-semibold leading-tight"
                                                  x-bind:class="fila({{ \Illuminate\Support\Js::from($oc->NUMERO_DO) }}).ok ? 'bg-[var(--superficie-2)] text-[var(--texto)]' : 'bg-rose-50 text-rose-700 dark:bg-rose-500/10 dark:text-rose-300'"
                                                  x-text="fila({{ \Illuminate\Support\Js::from($oc->NUMERO_DO) }}).texto"></span>
                                        </div>
                                    </td>
                                </tr>
                            @empty
                                <tr data-sin-hover>
                                    <td colspan="11" class="!p-0">
                                        <div class="ctc-vacio py-12 text-center text-[14px] text-[var(--texto-suave)]">
                                            <x-icono nombre="magnifying-glass" class="mx-auto h-7 w-7 text-[var(--texto-tenue)]" />
                                            <p class="mt-2">No hay órdenes de compra de WEBSIMEX sin procesar en el CTC.</p>
                                        </div>
                                    </td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
                @if ($ordenes_compra->hasPages())
                    <div class="border-t border-[var(--borde)] px-5 py-3">{{ $ordenes_compra->links('vendor.pagination.ctc') }}</div>
                @endif
            </section>
        </x-pagina>

        {{-- Confirmación (antes SweetAlert): mismos textos --}}
        <template x-teleport="body">
            <div x-show="confirmarDo" x-cloak class="fixed inset-0 z-[60] flex items-center justify-center px-4" role="dialog" aria-modal="true" aria-labelledby="importar-titulo">
                <div class="fixed inset-0 bg-black/40" x-on:click="confirmarDo = null"></div>
                <div class="relative w-full max-w-md overflow-hidden rounded-2xl border border-[var(--borde)] bg-[var(--superficie)] shadow-[var(--sombra-panel)]">
                    <div class="flex items-start gap-3 px-5 py-4">
                        <span class="flex h-9 w-9 flex-shrink-0 items-center justify-center rounded-full bg-amber-50 text-amber-700 dark:bg-amber-500/10 dark:text-amber-300"><x-icono nombre="exclamation-triangle" class="h-5 w-5" /></span>
                        <div>
                            <h2 id="importar-titulo" class="text-[15px] font-bold text-[var(--texto)]">Alerta de Confirmacion del Sistema</h2>
                            <p class="mt-1 text-[13px] text-[var(--texto-suave)]">Al confirmar la operacion estara importando a CTC los datos del DO <span class="font-semibold text-[var(--texto)]" x-text="confirmarDo"></span>.</p>
                        </div>
                    </div>
                    <div class="flex justify-end gap-2 border-t border-[var(--borde)] bg-[var(--superficie-2)] px-5 py-3">
                        <x-secondary-button type="button" x-on:click="confirmarDo = null">Cancelar</x-secondary-button>
                        <x-button type="button" x-on:click="importar()">Sí, importar</x-button>
                    </div>
                </div>
            </div>
        </template>
    </div>
</x-app-layout>