{{-- Resumen de la operación de Declaración de Cambio (impo y expo), kit ui-ctc.
     Lo visible es el resumen con el kit. "Generar PDF" sigue igual: el componente padre toma el HTML de #contenido,
     #tablaContendido y #tablaTotales y descargarResumen() lo pasa a dompdf con las hojas de estilo de Bootstrap.
     Por eso esos tres bloques se conservan abajo, ocultos y con el marcado anterior (clases de Bootstrap a propósito):
     así el PDF sale igual que antes. --}}
<div x-data="{ abierto: true, visible: true }" x-show="visible">
    <section class="overflow-hidden rounded-xl border border-[var(--borde)] bg-[var(--superficie)]">
        <header class="flex flex-wrap items-center justify-between gap-3 border-b border-[var(--borde)] px-4 py-3">
            <div class="min-w-0">
                <h2 class="flex items-center gap-2 text-[15px] font-bold text-[var(--texto)]">
                    <x-icono nombre="globe-americas" class="h-[18px] w-[18px] text-[var(--acento-texto)]" /> Resumen de la operación
                </h2>
                <p class="mt-0.5 text-[12px] text-[var(--texto-suave)]">Fecha de generación: {{ $declaracion['fecha'] }}</p>
            </div>
            <div class="flex items-center gap-0.5">
                <button type="button" class="ctc-accion" x-on:click="abierto = !abierto" :aria-expanded="abierto"
                        title="Plegar o desplegar" aria-label="Plegar o desplegar el resumen">
                    <x-icono nombre="chevron-up" variante="m" class="h-[18px] w-[18px] transition-transform" x-bind:class="! abierto && 'rotate-180'" />
                </button>
                <button type="button" class="ctc-accion" x-on:click="visible = false" title="Cerrar" aria-label="Cerrar el resumen">
                    <x-icono nombre="x-mark" class="h-[18px] w-[18px]" />
                </button>
            </div>
        </header>

        <div x-show="abierto" class="space-y-4 p-4">
            <dl class="grid gap-3 [grid-template-columns:repeat(auto-fit,minmax(200px,1fr))]">
                <div>
                    <dt class="text-[12px] text-[var(--texto-suave)]">Compañía</dt>
                    <dd class="mt-0.5 text-[14px] font-semibold text-[var(--texto)]">{{ $declaracion['company']['razon_social'] }}</dd>
                </div>
                <div>
                    <dt class="text-[12px] text-[var(--texto-suave)]">Cliente</dt>
                    <dd class="mt-0.5 text-[14px] font-semibold text-[var(--texto)]">{{ $declaracion['cliente']['nombre'] }}</dd>
                </div>
                <div>
                    <dt class="text-[12px] text-[var(--texto-suave)]">Entidad financiera</dt>
                    <dd class="mt-0.5 text-[14px] font-semibold text-[var(--texto)]">{{ $declaracion['banco']['descripcion'] }}</dd>
                </div>
            </dl>

            <div class="overflow-hidden rounded-lg border border-[var(--borde)]">
                <div class="ctc-tabla-caja" style="--alto-tabla: 28rem">
                    <table class="ctc-tabla">
                        <thead>
                            <tr>
                                <th>Nro factura</th>
                                <th>Fecha extracto</th>
                                <th>Documento de transporte</th>
                                <th>Fecha documento de transporte</th>
                                <th class="text-right">Días extracto vs doc. embarque</th>
                                <th>Numeral cambiario</th>
                                <th class="text-right">Valor FOB</th>
                                <th class="text-right">Valor numeral 2016</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach (json_decode($declaracion['facturas']) as $fac)
                                <tr>
                                    <td class="font-medium">{{ $fac->nro_factura }}</td>
                                    <td class="whitespace-nowrap">{{ $fac->fecha_extracto }}</td>
                                    <td>{{ $fac->documento_transporte }}</td>
                                    <td class="whitespace-nowrap">{{ $fac->fecha_doc_transporte }}</td>
                                    <td class="text-right tabular-nums">{{ $fac->dias }}</td>
                                    <td><x-etiqueta variante="neutro">{{ $fac->numeral }}</x-etiqueta></td>
                                    <td class="whitespace-nowrap text-right tabular-nums">${{ number_format($fac->valor_fob, 2) }}</td>
                                    <td class="whitespace-nowrap text-right tabular-nums">${{ number_format($fac->valor_sfo, 2) }}</td>
                                </tr>
                            @endforeach
                            <tr data-sin-hover class="bg-[var(--superficie-2)] font-semibold">
                                <td colspan="6"></td>
                                <td class="whitespace-nowrap text-right tabular-nums">{{ number_format($declaracion['total_fob'], 2) }}</td>
                                <td class="whitespace-nowrap text-right tabular-nums">{{ number_format($declaracion['total_sfo'], 2) }}</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>

            <div class="flex flex-wrap items-end justify-between gap-4">
                <div>
                    <p class="text-[12px] font-semibold uppercase tracking-wide text-[var(--texto-suave)]">Valor total facturas</p>
                    <p class="mt-0.5 text-[20px] font-semibold tabular-nums text-[var(--texto)]">$ {{ number_format($declaracion['total_fob'] + $declaracion['total_sfo'], 2) }}</p>
                </div>
                <div class="flex flex-wrap items-center gap-2">
                    @if (count($url_file) > 0)
                        @foreach ($url_file as $u)
                            <x-secondary-button wire:click="downloadFile({{ \Illuminate\Support\Js::from($u['nom']) }})">
                                <x-icono nombre="arrow-down-tray" class="h-4 w-4 text-emerald-600 dark:text-emerald-400" /> Descargar CSV {{ $u['num'] }}
                            </x-secondary-button>
                        @endforeach
                        <small class="text-[12px] text-[var(--texto-suave)]">Antes de generar el PDF por favor descargue los archivos.</small>
                    @endif
                    <x-button type="button" id="print" wire:click="print"><x-icono nombre="arrow-down-tray" /> Generar PDF</x-button>
                </div>
            </div>
        </div>
    </section>

    {{-- Marcado del PDF (no se ve en pantalla). Se conserva tal cual estaba: lo lee el padre y lo pinta dompdf. --}}
    <div class="hidden" aria-hidden="true">
        <div class="row" id="contenido">
          <div class="col-12 invoice-header">
            <h1>
                <i class="fa fa-globe"></i> Resumen
                <small class="pull-right">Fecha de generación: {{ $declaracion['fecha'] }}</small>
            </h1>
          </div>
          <div class="col-12">
            <div class="row invoice-info">
              <div class="col-sm-4 invoice-col">
                <p>Compañia</p>
                <p>{{ $declaracion['company']['razon_social'] }}</p>
              </div>
              <div class="col-sm-4 invoice-col">
                <p>Cliente</p>
                <p>{{ $declaracion['cliente']['nombre'] }}</p>
              </div>
              <div class="col-sm-4 invoice-col">
                <p>Entidad Financiera</p>
                <p>{{ $declaracion['banco']['descripcion'] }}</p>
              </div>
            </div>
          </div>
        </div>
        <div class="col-12" id="tablaContendido">
          <div class=" table-responsive">
            <table class="table table-striped">
              <thead>
                <tr>
                  <th>Nro Factura</th>
                  <th>Fecha Extracto</th>
                  <th>Documento de Transporte</th>
                  <th>Fecha Documento de Transporte</th>
                  <th>Dias Extracto vs Doc Embarque</th>
                  <th>Numeral Cambiario</th>
                  <th>Valor FOB</th>
                  <th>Valor Numeral 2016</th>
                </tr>
              </thead>
              <tbody>
                @foreach (json_decode($declaracion['facturas']) as $fac)
                <tr>
                  <td>{{ $fac->nro_factura }}</td>
                  <td>{{ $fac->fecha_extracto }}</td>
                  <td>{{ $fac->documento_transporte }}</td>
                  <td>{{ $fac->fecha_doc_transporte }}</td>
                  <td>{{ $fac->dias }}</td>
                  <td>{{ $fac->numeral }}</td>
                  <td>${{ number_format($fac->valor_fob, 2) }}</td>
                  <td>${{ number_format($fac->valor_sfo, 2) }}</td>
                </tr>
                @endforeach
                <tr>
                  <td colspan="6"></td>
                  <td> {{ number_format($declaracion['total_fob'], 2) }}</td>
                  <td>{{ number_format($declaracion['total_sfo'], 2) }}</td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
        <div class="row" id="tablaTotales">
              <div class="col-md-6">
                <h5 class="">Valor TOTAL FACTURAS</h5>
                <div class="table">
                  <table class="table">
                    <tbody>
                      <tr>
                        <th>Total:</th>
                        <td>$ {{ number_format($declaracion['total_fob'] + $declaracion['total_sfo'], 2) }}</td>
                      </tr>
                    </tbody>
                  </table>
                </div>
              </div>
        </div>
    </div>
</div>