{{-- Órdenes de compra de importación: listado (rpo) y búsqueda (searchpo). Layout nuevo, MigracionLayout.MD L3.
     Mismos filtros, nombres de campo y acciones que la versión Bootstrap; sin jQuery. --}}
@php
    // POController@show devuelve esta vista solo con $po: se toleran los demás datos ausentes.
    $status = $status ?? collect();
    $compania = $compania ?? collect();
    $filtros = $filtros ?? null;
    $filtrosDin = $filtrosDin ?? collect();
    $mediotrans = $mediotrans ?? collect();
    $agencia = $agencia ?? collect();
    $num_registros = $num_registros ?? 0;
    $rutas = $rutas ?? '';
    $grupo = session('GrupoEmpresarial');
    $puedeEditar = Auth::user()->operacion == 'E';
    $conActualizarFechas = !in_array((int) $grupo, [32, 33, 36, 3, 7], true);
    $ayudaBuscar = 'Buscar por pedido, orden de compra, proveedor, número DO, factura o documento de transporte';
    // Antes lo hacía un @php dentro del script de doble clic: se ejecutaba al pintar la página.
    session(['BuscarAct' => '']);
@endphp
<x-app-layout titulo="Órdenes de compra">
    <x-pagina>

        <x-encabezado-pagina ruta="Importaciones · Operaciones" titulo="Órdenes de compra"
                             descripcion="{{ number_format($num_registros, 0, ',', '.') }} registros encontrados.">
            <x-slot name="acciones">
                <x-enlace-boton href="/exportpofl">
                    <x-icono nombre="table-cells" class="h-4 w-4 text-emerald-600 dark:text-emerald-400" /> Generar reporte
                </x-enlace-boton>
                @if ($puedeEditar)
                    <x-enlace-boton variante="primario" href="{{ pantalla('/rpo/create') }}"><x-icono nombre="plus-circle" /> Agregar orden de compra</x-enlace-boton>
                @endif
            </x-slot>
        </x-encabezado-pagina>

        @if (Session::has('success'))
            <x-alerta tipo="exito">{{ Session::get('success') }}</x-alerta>
        @endif

        {{-- Filtros (siempre a la vista, como antes: la búsqueda es un GET a /searchpo) --}}
        <x-tarjeta titulo="Filtros">
            <form action="{{ url('/searchpo') }}" method="get" class="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
                @csrf
                <x-campo etiqueta="Importador" para="cboCompania">
                    <x-select name="cboCompania" id="cboCompania">
                        <option value="0">Seleccione una opción</option>
                        @foreach ($compania as $fila)<option value="{{ $fila->id }}">{{ $fila->razon_social }}</option>@endforeach
                    </x-select>
                </x-campo>
                @if ($filtros != null)
                    <x-campo etiqueta="Fecha" para="cboFecha">
                        <x-select name="cboFecha" id="cboFecha">
                            <option value="0">Seleccione una opción</option>
                            @foreach ($filtros as $fila)<option value="{{ $fila->id_etapa }}">{{ $fila->descripcion }}</option>@endforeach
                        </x-select>
                    </x-campo>
                    <x-campo etiqueta="Desde" para="dtpFechaIni"><x-input type="date" name="dtpFechaIni" id="dtpFechaIni" /></x-campo>
                    <x-campo etiqueta="Hasta" para="dtpFechaFin"><x-input type="date" name="dtpFechaFin" id="dtpFechaFin" /></x-campo>
                @endif
                <x-campo etiqueta="Estados" para="cboStatus">
                    <x-select name="cboStatus" id="cboStatus">
                        <option value="0">Seleccione una opción</option>
                        @foreach ($status as $fila)<option value="{{ $fila->titulo }}">{{ $fila->titulo }}</option>@endforeach
                    </x-select>
                </x-campo>
                <x-campo etiqueta="Medio de transporte" para="cboTrans">
                    <x-select name="cboTrans" id="cboTrans">
                        <option value="0">Seleccione una opción</option>
                        @foreach ($mediotrans as $fila)<option value="{{ $fila->codigo_medio_trans }}">{{ $fila->nombre_medio_trans }}</option>@endforeach
                    </x-select>
                </x-campo>
                <x-campo etiqueta="Campos dinámicos" para="cboDinamico">
                    <x-select name="cboDinamico" id="cboDinamico" onchange="window.ctcAyudaBusqueda(this)">
                        <option value="0">Seleccione una opción</option>
                        @foreach ($filtrosDin as $fila)<option value="{{ $fila->id_campo }}">{{ $fila->descripcion }}</option>@endforeach
                    </x-select>
                </x-campo>
                @if ($grupo == 7)
                    <x-campo etiqueta="Agencia de aduana" para="cboAgencia">
                        <x-select name="cboAgencia" id="cboAgencia">
                            <option value="0">Seleccione una opción</option>
                            @foreach ($agencia as $fila)<option value="{{ $fila->id }}">{{ $fila->razon_social }}</option>@endforeach
                        </x-select>
                    </x-campo>
                @endif
                <x-campo etiqueta="Buscar" para="txtBus">
                    <x-input type="text" name="txtBus" id="txtBus" title="{{ $ayudaBuscar }}" placeholder="{{ $ayudaBuscar }}" />
                </x-campo>
                <div class="flex flex-wrap items-end gap-2 sm:col-span-2 lg:col-span-4">
                    <x-button><x-icono nombre="magnifying-glass" /> Buscar</x-button>
                    @if ($conActualizarFechas)
                        <x-secondary-button x-data x-on:click="$dispatch('abrir-actualizar-fechas')">
                            <x-icono nombre="arrow-path" /> Actualizar fechas ({{ $num_registros }})
                        </x-secondary-button>
                    @endif
                    @livewire('po.actualizar-orden-compra', ['origen' => 0])
                </div>
            </form>
        </x-tarjeta>

        @include('Po._tabla', ['conAnular' => $puedeEditar, 'leyenda' => $status])
    </x-pagina>

    {{-- Actualización de fechas: recorre las rutas que arma POController@actualizarDatos, una tras otra --}}
    @if ($conActualizarFechas)
        {{-- Definida antes del elemento: Alpine evalúa x-data al arrancar. --}}
        <script>
            // Antes: $.ajax síncrono en un ciclo. Ahora fetch secuencial: el mismo orden y una petición a la vez.
            window.ctcActualizarFechas = function (rutas) {
                    return {
                        rutas: rutas, abierto: false, enCurso: false, estado: '',
                        abrir() { this.estado = ''; this.abierto = true; },
                        async iniciar() {
                            if (!confirm('CONFIRMACIÓN REQUERIDA\n\nEsta operación tarda unos minutos, ¿desea continuar?')) { return; }
                            this.enCurso = true;
                            var errores = 0;
                            for (var i = 0; i < this.rutas.length; i++) {
                                this.estado = 'En proceso: ' + (i + 1) + ' de ' + this.rutas.length;
                                try {
                                    var r = await fetch(this.rutas[i], { headers: { 'X-Requested-With': 'XMLHttpRequest' } });
                                    if (!r.ok) { errores++; }
                                } catch (e) { errores++; }
                            }
                            this.enCurso = false;
                            this.estado = errores ? 'Terminado con ' + errores + ' errores.' : 'Terminado.';
                        },
                    };
            };
        </script>
        <div x-data="ctcActualizarFechas(@js(array_values(array_filter(explode(',', $rutas)))))"
             x-on:abrir-actualizar-fechas.window="abrir()" x-on:keydown.escape.window="if (!enCurso) abierto = false">
            <template x-teleport="body">
                <div x-show="abierto" x-cloak class="fixed inset-0 z-[60] flex items-center justify-center px-4" role="dialog" aria-modal="true" aria-labelledby="fechas-titulo">
                    <div class="fixed inset-0 bg-black/40" x-on:click="if (!enCurso) abierto = false"></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="space-y-3 px-5 pb-4 pt-5 text-[13px] text-[var(--texto-suave)]">
                            <h2 id="fechas-titulo" class="text-[15px] font-bold text-[var(--texto)]">Actualizar fechas de pedidos</h2>
                            <p>Se actualizan <strong class="text-[var(--texto)]" x-text="rutas.length"></strong> pedidos. El proceso puede tardar unos minutos; no cierre esta ventana mientras corre.</p>
                            <p x-show="estado" class="font-semibold text-[var(--texto)]" x-text="estado" role="status"></p>
                        </div>
                        <div class="flex flex-row-reverse flex-wrap gap-2 border-t border-[var(--borde)] bg-[var(--superficie-2)] px-5 py-3">
                            <x-button type="button" x-on:click="iniciar()" x-bind:disabled="enCurso || rutas.length === 0">Iniciar</x-button>
                            <x-secondary-button x-on:click="abierto = false" x-bind:disabled="enCurso">Cerrar</x-secondary-button>
                        </div>
                    </div>
                </div>
            </template>
        </div>
    @endif

    @push('scripts')
        <script>
            // Ayuda del campo Buscar según el campo dinámico elegido (antes: Tooltip() con jQuery).
            window.ctcAyudaBusqueda = function (select) {
                var campo = document.getElementById('txtBus');
                var texto = select.value !== '0'
                    ? 'Búsqueda por ' + select.options[select.selectedIndex].text
                    : @js($ayudaBuscar);
                campo.title = texto;
                campo.placeholder = texto;
            };

        </script>
    @endpush
</x-app-layout>