{{-- Declaración de Cambio de importación (calculonumerales), kit ui-ctc. Una sola raíz: el x-data recibe los eventos
     que antes escuchaba el <script> con jQuery:
     - resumen-csv (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="$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="Importaciones · Operaciones" titulo="Declaración de Cambio"
                             :descripcion="'Pagos realizados por ' . strtoupper(session()->get('dominio')) . ' al exterior'">
            <x-slot name="acciones">
                <x-secondary-button id="btnHistorico" wire:click="$set('historico', {{ $historico == 0 ? 1 : 0 }})">
                    @if ($historico == 0)
                        <x-icono nombre="clock" /> Ver histórico de facturas procesadas
                    @else
                        <x-icono nombre="arrow-uturn-left" /> Volver a consultar facturas para declaración de cambio
                    @endif
                </x-secondary-button>
            </x-slot>
        </x-encabezado-pagina>

        <x-catalogo.avisos />

        @if ($historico == 1)
            @livewire('po.declaracion-cambio-historico')
        @endif

        @if ($historico == 0)
            <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>
                        <div class="flex flex-wrap items-center gap-3 text-[12px] text-[var(--texto-suave)]">
                            <span class="flex items-center gap-1.5"><span class="h-2.5 w-2.5 rounded-sm border border-red-500 bg-red-500/25"></span>Sin fecha de documento de transporte</span>
                            <span wire:loading.delay class="flex items-center gap-1.5 whitespace-nowrap text-[var(--acento-texto)]" role="status">
                                <x-icono nombre="arrow-path" class="h-4 w-4 animate-spin" /> Consultando…
                            </span>
                        </div>
                    </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 2016</th>
                                    <th class="text-center">Validación</th>
                                    <th>Documentos soporte</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)
                                    @php $sinFechaDt = $factura['fecha_doc_transporte'] == ''; @endphp
                                    <tr wire:key="factura-{{ $factura['id'] }}"
                                        @if ($sinFechaDt) data-sin-hover style="background-color: color-mix(in srgb, #EF4444 22%, transparent); box-shadow: inset 4px 0 0 #EF4444" @endif>
                                        <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">{!! $sinFechaDt ? '<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 2016'])
                                        </td>
                                        <td>
                                            <div class="flex flex-wrap gap-1">
                                                @foreach ($factura['documentos'] as $doc)
                                                    <a href="{{ $doc['ruta'] }}" target="_blank" rel="noopener" class="hover:underline">
                                                        <x-etiqueta variante="info" class="!text-[11px]"><x-icono nombre="document-text" class="h-3.5 w-3.5" /> {{ $doc['documento_aws'] }}</x-etiqueta>
                                                    </a>
                                                @endforeach
                                            </div>
                                        </td>
                                        <td class="text-center">
                                            @if (! $sinFechaDt)
                                                <x-checkbox class="chk" id="{{ $factura['id'] }}" aria-label="Seleccionar factura {{ $factura['nro_factura'] }}"
                                                            wire:click="marcarFactura({{ $index }})" :checked="$factura['envio'] == 1" />
                                            @endif
                                        </td>
                                    </tr>
                                    @php
                                        $total_fob += $factura['valor_fob'];
                                        $total_num_2016 += $factura['valor_sfo'];
                                    @endphp
                                @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">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_2016) }}</td>
                                        <td></td>
                                        <td></td>
                                        <td></td>
                                    </tr>
                                @endif
                            </tbody>
                        </table>
                    </div>
                </section>
            @endif
        @endif {{-- Aquí termina el condicional del formulario que consulta facturas para generar el CSV de régimen cambiario --}}

        {{-- 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>