{{-- Facturas y gastos de una orden (importación: po.facturacion; exportación: ex-po.ex-po-facturacion).
     Botón por fila y su diálogo de Alpine (antes, modal Bootstrap); su estado sobrevive a las actualizaciones
     de Livewire. Los datos se cargan al abrir (specs/Rendimiento.MD, R2).
     $conBl: exportación del grupo 28, con número y fecha de BL y "Related Parties". --}}
@php
    $conBl = $conBl ?? false;
    $numero = fn ($v) => '$' . number_format((float) $v, 2);
    $total_facturacion = $total_fob = $total_seguro = $total_fletes = $total_otros_gastos = $total_gastos = 0;
    foreach ($facturas as $f) {
        $total_facturacion += $f->valor_factura; $total_fob += $f->valor_fob; $total_seguro += $f->valor_seguro;
        $total_fletes += $f->valor_fletes; $total_otros_gastos += $f->otros_gastos;
    }
    foreach ($gastos as $g) { $total_gastos += $g->valor_gasto; }
@endphp
<div x-data="{ abierto: false, seccion: @js($operacion == 2 ? 'gastos' : 'facturas') }" x-on:keydown.escape.window="if (abierto) { abierto = false; $wire.limpiar_formulario() }">
    <button type="button" class="ctc-accion" aria-label="Facturas y gastos de la orden" title="Facturas y gastos de la orden" x-on:click="abierto = true; $wire.abrir()">
        <x-icono nombre="receipt-percent" class="h-[18px] w-[18px]" />
    </button>

    <template x-teleport="body">
        <div x-show="abierto" x-cloak class="fixed inset-0 z-[60] flex items-start justify-center overflow-y-auto px-4 py-10" role="dialog" aria-modal="true" aria-labelledby="factura-titulo-{{ $id_po }}">
            <div class="fixed inset-0 bg-black/40" x-on:click="abierto = false; $wire.limpiar_formulario()"></div>
            <div class="relative w-full max-w-4xl overflow-hidden rounded-2xl border border-[var(--borde)] bg-[var(--superficie)] text-left shadow-[var(--sombra-panel)]">
                <header class="flex items-start justify-between gap-3 border-b border-[var(--borde)] px-5 py-4">
                    <div>
                        <p class="text-[10.5px] font-extrabold uppercase tracking-[0.12em] text-[var(--texto-tenue)]">Orden de compra</p>
                        <h2 id="factura-titulo-{{ $id_po }}" class="mt-0.5 text-[15px] font-bold text-[var(--texto)]">{{ $orden_compra }}</h2>
                    </div>
                    <div class="flex items-start gap-4">
                        <div class="text-right">
                            <p class="text-[11px] font-bold uppercase tracking-[0.12em] text-[var(--texto-tenue)]">Incoterms</p>
                            <p class="text-[13px] font-semibold text-[var(--texto)]">{{ $des_incoterms ?: '—' }}</p>
                        </div>
                        <x-boton-icono etiqueta="Cerrar" x-on:click="abierto = false; $wire.limpiar_formulario()">
                            <x-icono nombre="x-mark" class="h-5 w-5" />
                        </x-boton-icono>
                    </div>
                </header>

                <div class="max-h-[70vh] space-y-4 overflow-y-auto px-5 py-4 text-[13px]">
                    @if (!$cargado)
                        <p class="py-8 text-center text-[var(--texto-suave)]" role="status">Cargando facturas y gastos…</p>
                    @else
                    @if ($errors->any())
                        <x-alerta tipo="error">
                            <p class="font-semibold">Se presentaron los siguientes errores:</p>
                            <ul class="mt-1 list-disc pl-5">
                                @foreach ($errors->all() as $error)<li>{{ $error }}</li>@endforeach
                            </ul>
                        </x-alerta>
                    @endif
                    @if (session()->has('message'))
                        <x-alerta tipo="exito">{{ session('message') }}</x-alerta>
                    @endif

                    <x-campo etiqueta="Operación" para="operacion-{{ $id_po }}" class="max-w-xs">
                        <x-select id="operacion-{{ $id_po }}" wire:model.live="operacion">
                            <option value="">- Seleccione una operación -</option>
                            <option value="1">Registrar facturación</option>
                            <option value="2">Registrar gasto</option>
                        </x-select>
                    </x-campo>

                    @if ($operacion == 1)
                        <div class="grid gap-3 rounded-xl border border-[var(--borde)] bg-[var(--superficie-2)] p-4 sm:grid-cols-2 lg:grid-cols-4">
                            <x-campo etiqueta="Número de factura" para="nro_factura-{{ $id_po }}"><x-input id="nro_factura-{{ $id_po }}" type="text" wire:model.live="nro_factura" /></x-campo>
                            <x-campo etiqueta="Concepto de facturación" para="concepto-{{ $id_po }}">
                                <x-select id="concepto-{{ $id_po }}" wire:model.live="id_concepto_factura">
                                    <option value="">- Seleccione una opción -</option>
                                    @foreach ($conceptos as $concepto)
                                        @if ($concepto->operacion == 'F')<option value="{{ $concepto->id }}">{{ $concepto->concepto }}</option>@endif
                                    @endforeach
                                </x-select>
                            </x-campo>
                            <x-campo etiqueta="Valor factura" para="valor_factura-{{ $id_po }}"><x-input id="valor_factura-{{ $id_po }}" type="text" class="jnumber tabular-nums" wire:model.live="valor_factura" /></x-campo>
                            <x-campo etiqueta="Fecha factura" para="fecha_factura-{{ $id_po }}"><x-input id="fecha_factura-{{ $id_po }}" type="date" wire:model.live="fecha_factura" /></x-campo>
                            <x-campo etiqueta="Valor FOB" para="valor_fob-{{ $id_po }}"><x-input id="valor_fob-{{ $id_po }}" type="text" class="tabular-nums" wire:model.live="valor_fob" /></x-campo>
                            <x-campo etiqueta="Valor seguro" para="valor_seguro-{{ $id_po }}"><x-input id="valor_seguro-{{ $id_po }}" type="text" class="tabular-nums" wire:model.live="valor_seguro" /></x-campo>
                            <x-campo etiqueta="Valor fletes" para="valor_fletes-{{ $id_po }}"><x-input id="valor_fletes-{{ $id_po }}" type="text" class="tabular-nums" wire:model.live="valor_fletes" /></x-campo>
                            <x-campo etiqueta="Valor otros gastos" para="otros_gastos-{{ $id_po }}"><x-input id="otros_gastos-{{ $id_po }}" type="text" class="tabular-nums" wire:model.live="otros_gastos" /></x-campo>
                            @if ($conBl)
                                <x-campo etiqueta="Número de BL" para="numero_bl-{{ $id_po }}"><x-input id="numero_bl-{{ $id_po }}" type="text" placeholder="BL asociado a la factura" wire:model.live="numero_bl" /></x-campo>
                                <x-campo etiqueta="Fecha de BL" para="fecha_bl-{{ $id_po }}"><x-input id="fecha_bl-{{ $id_po }}" type="date" wire:model.live="fecha_bl" /></x-campo>
                                <x-campo etiqueta="Related parties" para="triangulacion-{{ $id_po }}">
                                    <x-select id="triangulacion-{{ $id_po }}" wire:model.live="triangulacion">
                                        <option value="">- Seleccione una opción -</option>
                                        <option value="0">Compañía relacionada con {{ session('dominio') }}</option>
                                        <option value="1">Compañía de terceros</option>
                                    </x-select>
                                </x-campo>
                            @endif
                            <div class="flex flex-wrap justify-end gap-2 sm:col-span-2 lg:col-span-4">
                                <x-secondary-button wire:click="limpiar_formulario()">Cancelar</x-secondary-button>
                                <x-button type="button" wire:click="procesarForm()" wire:loading.attr="disabled">{{ $id_po_factura == 0 ? 'Agregar factura' : 'Actualizar factura' }}</x-button>
                            </div>
                        </div>
                    @elseif ($operacion == 2)
                        <div class="grid gap-3 rounded-xl border border-[var(--borde)] bg-[var(--superficie-2)] p-4 sm:grid-cols-3">
                            <x-campo etiqueta="Concepto del gasto" para="concepto_gasto-{{ $id_po }}">
                                <x-select id="concepto_gasto-{{ $id_po }}" wire:model.live="id_concepto_gasto">
                                    <option value="">- Seleccione una opción -</option>
                                    @foreach ($conceptos as $concepto)
                                        @if ($concepto->operacion == 'G')<option value="{{ $concepto->id }}">{{ $concepto->concepto }}</option>@endif
                                    @endforeach
                                </x-select>
                            </x-campo>
                            <x-campo etiqueta="Valor gasto" para="valor_gasto-{{ $id_po }}"><x-input id="valor_gasto-{{ $id_po }}" type="text" class="tabular-nums" wire:model.live="valor_gasto" /></x-campo>
                            <x-campo etiqueta="Fecha gasto" para="fecha_gasto-{{ $id_po }}"><x-input id="fecha_gasto-{{ $id_po }}" type="date" wire:model.live="fecha_gasto" /></x-campo>
                            <div class="flex flex-wrap justify-end gap-2 sm:col-span-3">
                                <x-secondary-button wire:click="limpiar_formulario()">Cancelar</x-secondary-button>
                                <x-button type="button" wire:click="procesarGasto()" wire:loading.attr="disabled">{{ $id_po_gasto == 0 ? 'Agregar gasto' : 'Actualizar gasto' }}</x-button>
                            </div>
                        </div>
                    @endif

                    {{-- Pestañas: facturas / gastos (antes, acordeón Bootstrap) --}}
                    <div class="flex gap-1 border-b border-[var(--borde)]" role="tablist">
                        <x-pestana etiqueta="Facturas" :conteo="count($facturas)" icono="document-text" tamano="chica" alpine="seccion === 'facturas'" x-on:click="seccion = 'facturas'" />
                        <x-pestana etiqueta="Gastos" :conteo="count($gastos)" icono="banknotes" tamano="chica" alpine="seccion === 'gastos'" x-on:click="seccion = 'gastos'" />
                    </div>

                    <div x-show="seccion === 'facturas'" role="tabpanel">
                        @if ($facturas->isEmpty())
                            <p class="py-6 text-center text-[var(--texto-tenue)]">Sin facturas registradas para esta orden de compra.</p>
                        @else
                            <div class="ctc-tabla-caja rounded-xl border border-[var(--borde)]" style="--alto-tabla: 22rem">
                                <table class="ctc-tabla">
                                    <thead>
                                        <tr>
                                            <th>Factura</th>
                                            <th class="!text-right">Valor</th>
                                            <th>Fecha</th>
                                            @if ($conBl)
                                                <th>Número de BL</th>
                                                <th>Fecha de BL</th>
                                                <th>Related parties</th>
                                            @endif
                                            <th class="!text-right">FOB</th>
                                            <th class="!text-right">Seguro</th>
                                            <th class="!text-right">Fletes</th>
                                            <th class="!text-right">Otros gastos</th>
                                            <th><span class="sr-only">Acciones</span></th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @foreach ($facturas as $factura)
                                            <tr>
                                                <td class="font-mono">{{ $factura->nro_factura }}</td>
                                                <td class="text-right tabular-nums">{{ $numero($factura->valor_factura) }}</td>
                                                <td>{{ $factura->fecha_factura }}</td>
                                                @if ($conBl)
                                                    <td class="font-mono">{{ $factura->numero_bl }}</td>
                                                    <td>{{ $factura->fecha_bl }}</td>
                                                    <td>
                                                        @if (!is_null($factura->triangulacion))
                                                            {{ $factura->triangulacion == 0 ? 'Compañía relacionada con ' . session('dominio') : 'Compañía de terceros' }}
                                                        @endif
                                                    </td>
                                                @endif
                                                <td class="text-right tabular-nums">{{ $numero($factura->valor_fob) }}</td>
                                                <td class="text-right tabular-nums">{{ $numero($factura->valor_seguro) }}</td>
                                                <td class="text-right tabular-nums">{{ $numero($factura->valor_fletes) }}</td>
                                                <td class="text-right tabular-nums">{{ $numero($factura->otros_gastos) }}</td>
                                                <td class="!px-2 text-right">
                                                    <div class="inline-flex gap-0.5">
                                                        <button type="button" class="ctc-accion" aria-label="Editar factura {{ $factura->nro_factura }}" title="Editar factura {{ $factura->nro_factura }}" wire:click="editarFactura({{ $factura->id }})">
                                                            <x-icono nombre="pencil-square" class="h-[18px] w-[18px]" />
                                                        </button>
                                                        <button type="button" class="ctc-accion hover:bg-red-50 hover:text-red-600 dark:hover:bg-red-500/10 dark:hover:text-red-400" aria-label="Eliminar factura {{ $factura->nro_factura }}" title="Eliminar factura {{ $factura->nro_factura }}" wire:click="eliminar({{ $factura->id }})">
                                                            <x-icono nombre="trash" class="h-[18px] w-[18px]" />
                                                        </button>
                                                    </div>
                                                </td>
                                            </tr>
                                        @endforeach
                                        <tr data-sin-hover class="bg-[var(--superficie-2)] font-semibold">
                                            <td>Totales</td>
                                            <td class="text-right tabular-nums">{{ $numero($total_facturacion) }}</td>
                                            <td @if ($conBl) colspan="4" @endif></td>
                                            <td class="text-right tabular-nums">{{ $numero($total_fob) }}</td>
                                            <td class="text-right tabular-nums">{{ $numero($total_seguro) }}</td>
                                            <td class="text-right tabular-nums">{{ $numero($total_fletes) }}</td>
                                            <td class="text-right tabular-nums">{{ $numero($total_otros_gastos) }}</td>
                                            <td></td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        @endif
                    </div>

                    <div x-show="seccion === 'gastos'" x-cloak role="tabpanel">
                        @if ($gastos->isEmpty())
                            <p class="py-6 text-center text-[var(--texto-tenue)]">Sin gastos registrados para esta orden de compra.</p>
                        @else
                            <div class="ctc-tabla-caja rounded-xl border border-[var(--borde)]" style="--alto-tabla: 22rem">
                                <table class="ctc-tabla">
                                    <thead>
                                        <tr>
                                            <th>Concepto</th>
                                            <th class="!text-right">Valor</th>
                                            <th>Fecha</th>
                                            <th><span class="sr-only">Acciones</span></th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @foreach ($gastos as $gasto)
                                            <tr>
                                                <td>{{ $gasto->concepto->concepto }}</td>
                                                <td class="text-right tabular-nums">{{ $numero($gasto->valor_gasto) }}</td>
                                                <td>{{ $gasto->fecha_gasto }}</td>
                                                <td class="!px-2 text-right">
                                                    <div class="inline-flex gap-0.5">
                                                        <button type="button" class="ctc-accion" aria-label="Editar gasto" title="Editar gasto" wire:click="editarGasto({{ $gasto->id }})">
                                                            <x-icono nombre="pencil-square" class="h-[18px] w-[18px]" />
                                                        </button>
                                                        <button type="button" class="ctc-accion hover:bg-red-50 hover:text-red-600 dark:hover:bg-red-500/10 dark:hover:text-red-400" aria-label="Eliminar gasto" title="Eliminar gasto" wire:click="eliminarGasto({{ $gasto->id }})">
                                                            <x-icono nombre="trash" class="h-[18px] w-[18px]" />
                                                        </button>
                                                    </div>
                                                </td>
                                            </tr>
                                        @endforeach
                                        <tr data-sin-hover class="bg-[var(--superficie-2)] font-semibold">
                                            <td>Total</td>
                                            <td class="text-right tabular-nums">{{ $numero($total_gastos) }}</td>
                                            <td colspan="2"></td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        @endif
                    </div>
                    @endif
                </div>

                @if ($facturas->isNotEmpty() || $gastos->isNotEmpty())
                    <footer class="grid gap-3 border-t border-[var(--borde)] bg-[var(--superficie-2)] px-5 py-3 sm:grid-cols-2">
                        <div>
                            <p class="text-[11px] font-bold uppercase tracking-[0.12em] text-[var(--texto-tenue)]">Total facturación</p>
                            <p class="text-lg font-bold tabular-nums text-[var(--texto)]">{{ $numero($total_facturacion) }}</p>
                        </div>
                        <div>
                            <p class="text-[11px] font-bold uppercase tracking-[0.12em] text-[var(--texto-tenue)]">Total gastos</p>
                            <p class="text-lg font-bold tabular-nums text-[var(--texto)]">{{ $numero($total_gastos) }}</p>
                        </div>
                    </footer>
                @endif
            </div>
        </div>
    </template>
</div>