{{-- Órdenes de cargue de exportación: listado (rexpo) y búsqueda (searchexpo). Gemela de Po.index.
     Layout nuevo, MigracionLayout.MD L3. Mismos filtros, campos y acciones que la versión Bootstrap; sin jQuery. --}}
@php
    // ExPOController devuelve esta vista en un caso solo con $po: se toleran los demás datos ausentes.
    $status = $status ?? collect();
    $compania = $compania ?? collect();
    $filtros = $filtros ?? null;
    $filtrosDin = $filtrosDin ?? collect();
    $puedeEditar = Auth::user()->operacion_ex == 'E';
    $ayudaBuscar = 'Buscar por pedido, orden de compra, proveedor, booking, contenedor, número DO, motonave, factura, documento de transporte o línea';
@endphp
<x-app-layout titulo="Órdenes de cargue">
    <x-pagina>

        <x-encabezado-pagina ruta="Exportaciones · Operaciones" titulo="Órdenes de cargue">
            <x-slot name="acciones">
                <x-enlace-boton href="/exportpoflex">
                    <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('/rexpo/create') }}"><x-icono nombre="plus-circle" /> Agregar orden de cargue</x-enlace-boton>
                @endif
            </x-slot>
        </x-encabezado-pagina>

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

        <x-tarjeta titulo="Filtros">
            <form action="{{ url('/searchexpo') }}" method="get" class="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
                @csrf
                <x-campo etiqueta="Destinatario" 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="Fechas" para="cboFecha">
                        <x-select name="cboFecha" id="cboFecha">
                            @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="Campos dinámicos" para="cboDinamico">
                    <x-select name="cboDinamico" id="cboDinamico" onchange="window.ctcAyudaBusquedaExpo(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>
                <x-campo etiqueta="Buscar" para="txtBus" class="sm:col-span-2">
                    <x-input type="text" name="txtBus" id="txtBus" title="{{ $ayudaBuscar }}" placeholder="{{ $ayudaBuscar }}" />
                </x-campo>
                <div class="flex items-end">
                    <x-button><x-icono nombre="magnifying-glass" /> Buscar</x-button>
                </div>
            </form>
        </x-tarjeta>

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

    @push('scripts')
        <script>
            // Ayuda del campo Buscar según el campo dinámico elegido (antes: Tooltip() con jQuery).
            window.ctcAyudaBusquedaExpo = 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>