{{-- Declaración de Cambio de exportación (calculonumerales_ex), kit ui-ctc; gemela de livewire/po/declaracion-cambio.
     Una sola raíz: el x-data recibe los eventos que antes escuchaba el <script> con jQuery:
     - resumen-csv_ex (generarCSV): muestra el resumen de la operación.
     - print (botón "Generar PDF" del resumen): manda al componente el HTML de #contenido, #tablaContendido y
       #tablaTotales y pide el PDF (generarResumen → descargarResumen). --}}
<div x-data
     x-on:resumen-csv_ex="$wire.set('cargarResumen', 1, false); $wire.set('resumen', $event.detail.declaracion)"
     x-on:print="$wire.set('pdf', document.getElementById('contenido').innerHTML, false);
                 $wire.set('pdf_tbl', document.getElementById('tablaContendido').innerHTML, false);
                 $wire.set('pdf_totales', document.getElementById('tablaTotales').innerHTML, false);
                 $wire.generarResumen()">
    <x-pagina>
        <x-encabezado-pagina ruta="Exportaciones · Operaciones" titulo="Declaración de Cambio"
                             :descripcion="'Exportaciones: ingresos recibidos por ' . strtoupper(session()->get('dominio')) . ' del exterior'" />

        @if (session()->has('message'))
            <x-alerta tipo="exito"><strong>Excelente.</strong> {{ session('message') }}</x-alerta>
        @endif
        <x-catalogo.avisos />

        <x-tarjeta titulo="Consultar facturas">
            <div class="grid gap-x-4 gap-y-3.5 [grid-template-columns:repeat(auto-fill,minmax(220px,1fr))]">
                <x-campo etiqueta="Compañía" para="company">
                    <x-select name="company" id="company" wire:model.live="company">
                        <option value="">Seleccione una compañía</option>
                        @foreach ($companies as $company)
                            <option value="{{ $company->id }}">{{ $company->razon_social }}</option>
                        @endforeach
                    </x-select>
                </x-campo>
                <x-campo etiqueta="Cliente" para="cliente">
                    <x-select name="state" id="cliente" wire:model.live="cliente">
                        <option value="">Seleccione un Cliente</option>
                        @foreach ($clientes as $item)
                            <option value="{{ $item->id }}">{{ $item->nombre }}</option>
                        @endforeach
                    </x-select>
                </x-campo>
                <x-campo etiqueta="Entidad bancaria" para="ent_bancaria">
                    <x-select name="state" id="ent_bancaria" wire:model.live="ent_bancaria">
                        <option value="">Seleccione un banco</option>
                        @foreach ($bancos as $banco)
                            <option value="{{ $banco->id }}">{{ $banco->descripcion }}</option>
                        @endforeach
                    </x-select>
                </x-campo>
                <x-campo etiqueta="Fecha de extracto" para="fecha_extracto">
                    <x-input type="date" id="fecha_extracto" name="fecha_extracto" wire:model.live="fecha_extracto" />
                </x-campo>
            </div>
            <div class="mt-4 flex flex-wrap items-center gap-2">
                <x-button type="button" wire:click="facturasCliente()"><x-icono nombre="magnifying-glass" /> Buscar</x-button>
                @if (count($facturas) > 0)
                    <x-secondary-button wire:click="generarCSV()">
                        <x-icono nombre="table-cells" class="h-4 w-4 text-emerald-600 dark:text-emerald-400" /> Generar CSV
                    </x-secondary-button>
                @endif
                <span wire:loading.flex wire:target="facturasCliente" class="items-center gap-1.5 text-[12px] text-[var(--acento-texto)]" role="status">
                    <x-icono nombre="arrow-path" class="h-4 w-4 animate-spin" /> Consultando…
                </span>
            </div>
        </x-tarjeta>

        <div wire:loading.block wire:target="generarCSV">
            <x-alerta tipo="aviso"><strong>Excelente.</strong> Tu solicitud de exportación está siendo procesada.</x-alerta>
        </div>

        <x-alerta tipo="aviso">
            <strong>Para tener en cuenta:</strong> para generar el archivo <strong>CSV</strong> es importante que se seleccione al
            menos un registro del resultado de la consulta de facturas.
        </x-alerta>

        @if ($cargarResumen == 0)
            <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">
                    <h2 class="flex items-center gap-2 text-[14px] font-bold text-[var(--texto)]">
                        Facturas
                        <span class="rounded-full bg-[var(--superficie-2)] px-2 py-0.5 text-[11px] font-bold tabular-nums text-[var(--texto-suave)]">{{ count($facturas) }}</span>
                    </h2>
                    <span wire:loading.delay class="flex items-center gap-1.5 whitespace-nowrap text-[12px] text-[var(--acento-texto)]" role="status">
                        <x-icono nombre="arrow-path" class="h-4 w-4 animate-spin" /> Consultando…
                    </span>
                </div>
                <div class="ctc-tabla-caja">
                    <table class="ctc-tabla">
                        <thead>
                            <tr>
                                <th class="ctc-fija ctc-fija-ultima" style="left:0">Nro factura</th>
                                <th>Fecha extracto</th>
                                <th>Documento transporte</th>
                                <th>Fecha documento transporte</th>
                                <th class="text-right">Días extracto vs doc. embarque</th>
                                <th>Numeral</th>
                                <th class="text-right">Valor FOB</th>
                                <th class="text-right">Numeral 1510</th>
                                <th class="text-center">Validación</th>
                                <th class="text-center">
                                    <label class="inline-flex flex-col items-center gap-1">
                                        Seleccionar todas
                                        <x-checkbox name="chk_all" id="chk_all" aria-label="Seleccionar todas las facturas"
                                                    x-on:change="$wire.set('chkFacturas', $event.target.checked, false); $wire.seleccionarTodas()" />
                                    </label>
                                </th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse ($facturas as $index => $factura)
                                <tr wire:key="factura-{{ $factura['id'] }}">
                                    <td class="ctc-fija ctc-fija-ultima font-medium" style="left:0">{{ $factura['nro_factura'] }}</td>
                                    <td class="whitespace-nowrap">{{ $fecha_extracto }}</td>
                                    <td>{{ $factura['documento_transporte'] }}</td>
                                    <td class="whitespace-nowrap">{!! $factura['fecha_doc_transporte'] == '' ? '<span class="text-[var(--texto-tenue)]">—</span>' : e($factura['fecha_doc_transporte']) !!}</td>
                                    <td class="text-right tabular-nums">{{ $factura['dias'] }}</td>
                                    <td><x-etiqueta variante="neutro">{{ $factura['numeral'] }}</x-etiqueta></td>
                                    <td class="whitespace-nowrap text-right tabular-nums">${{ number_format($factura['valor_fob']) }}</td>
                                    <td class="whitespace-nowrap text-right tabular-nums">${{ number_format($factura['valor_sfo']) }}</td>
                                    <td class="text-center">
                                        @include('livewire.po.partials.declaracion-cambio-validacion', ['cuadra' => $factura['valor_factura'] == $factura['valor_fob'] + $factura['valor_sfo'], 'otro' => 'numeral 1510'])
                                    </td>
                                    <td class="text-center">
                                        <x-checkbox id="{{ $factura['id'] }}" aria-label="Seleccionar factura {{ $factura['nro_factura'] }}"
                                                    wire:click="marcarFactura({{ $index }})" :checked="$factura['envio'] == 1" />
                                    </td>
                                </tr>
                                @php
                                    $total_fob += $factura['valor_fob'];
                                    $total_num_1510 += $factura['valor_sfo'];
                                @endphp
                            @empty
                                <tr data-sin-hover><td colspan="10" 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">Elige compañía, cliente, entidad bancaria y fecha de extracto, y pulsa Buscar.</p>
                                    </div>
                                </td></tr>
                            @endforelse
                            @if (count($facturas) > 0)
                                <tr data-sin-hover class="bg-[var(--superficie-2)] font-semibold">
                                    <td class="ctc-fija ctc-fija-ultima bg-[var(--superficie-2)]" style="left:0">TOTAL</td>
                                    <td colspan="5"></td>
                                    <td class="whitespace-nowrap text-right tabular-nums">${{ number_format($total_fob) }}</td>
                                    <td class="whitespace-nowrap text-right tabular-nums">${{ number_format($total_num_1510) }}</td>
                                    <td></td>
                                    <td></td>
                                </tr>
                            @endif
                        </tbody>
                    </table>
                </div>
            </section>
        @endif

        {{-- Resumen de la operación --}}
        @if ($cargarResumen == 1)
            @livewire('po.resumen-declaracion-cambio', ['declaracion' => $resumen, 'operacion' => $operacion, 'url_file' => $url_file])
        @endif
    </x-pagina>
</div>