{{-- resources/views/livewire/cxp/index.blade.php --}}
<div>
    {{-- ── HEADER ──────────────────────────────────── --}}
    <div style="margin-bottom:20px;">
        <div class="page-title">💳 Cuentas por pagar</div>
        <div class="page-sub">Facturas de proveedores · vencimientos · registro de pagos</div>
    </div>

    {{-- ── MENSAJES ─────────────────────────────────── --}}
    @if($mensaje_exito)
    <div class="alert alert-green" x-data x-init="setTimeout(() => $wire.set('mensaje_exito',''), 5000)">
        ✅ {{ $mensaje_exito }}
    </div>
    @endif
    @if($mensaje_error)
    <div class="alert alert-red" x-data x-init="setTimeout(() => $wire.set('mensaje_error',''), 5000)">
        ❌ {{ $mensaje_error }}
    </div>
    @endif

    {{-- ── KPIs ────────────────────────────────────── --}}
    <div style="display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:20px;">
        <div style="background:#fff;border-radius:16px;padding:16px;box-shadow:var(--shadow);">
            <div style="font-size:11px;color:var(--label2);margin-bottom:6px;text-transform:uppercase;letter-spacing:.4px;">Total por pagar</div>
            <div style="font-size:22px;font-weight:700;">₡{{ number_format($totales->total_pendiente ?? 0, 0) }}</div>
        </div>
        <div style="background:#fff;border-radius:16px;padding:16px;box-shadow:var(--shadow);">
            <div style="font-size:11px;color:var(--label2);margin-bottom:6px;text-transform:uppercase;letter-spacing:.4px;">⏰ Vence en 7 días</div>
            <div style="font-size:22px;font-weight:700;color:var(--orange);">₡{{ number_format($totales->vence_7_dias ?? 0, 0) }}</div>
        </div>
        <div style="background:#fff;border-radius:16px;padding:16px;box-shadow:var(--shadow);">
            <div style="font-size:11px;color:var(--label2);margin-bottom:6px;text-transform:uppercase;letter-spacing:.4px;">🔴 Vencido</div>
            <div style="font-size:22px;font-weight:700;color:var(--red);">₡{{ number_format($totales->total_vencido ?? 0, 0) }}</div>
        </div>
        <div style="background:#fff;border-radius:16px;padding:16px;box-shadow:var(--shadow);">
            <div style="font-size:11px;color:var(--label2);margin-bottom:6px;text-transform:uppercase;letter-spacing:.4px;">✅ Pagado</div>
            <div style="font-size:22px;font-weight:700;color:var(--green2);">₡{{ number_format($totales->total_pagado ?? 0, 0) }}</div>
        </div>
    </div>

    {{-- ── FILTROS ──────────────────────────────────── --}}
    <div class="inset-card" style="margin-bottom:16px;">
        <div style="padding:14px 18px;display:flex;gap:10px;flex-wrap:wrap;align-items:center;">
            <input type="text"
                   wire:model.live.debounce.400ms="filtro_proveedor"
                   placeholder="🔍 Buscar proveedor…"
                   style="font-size:13px;padding:8px 14px;background:var(--bg);border:none;
                          border-radius:50px;min-width:200px;outline:none;font-family:'Ubuntu',sans-serif;" />

            <select wire:model.live="filtro_estado"
                    style="font-size:12px;padding:8px 12px;background:var(--bg);border:none;
                           border-radius:50px;font-family:'Ubuntu',sans-serif;outline:none;">
                <option value="">Todos los estados</option>
                @foreach($estados as $val => $label)
                <option value="{{ $val }}">{{ $label }}</option>
                @endforeach
            </select>

            <input type="date" wire:model.live="filtro_desde"
                   style="font-size:12px;padding:7px 10px;background:var(--bg);border:none;
                          border-radius:50px;font-family:'Ubuntu',sans-serif;outline:none;" />
            <span style="font-size:12px;color:var(--label2);">—</span>
            <input type="date" wire:model.live="filtro_hasta"
                   style="font-size:12px;padding:7px 10px;background:var(--bg);border:none;
                          border-radius:50px;font-family:'Ubuntu',sans-serif;outline:none;" />
        </div>
    </div>

    {{-- ── TABLA ────────────────────────────────────── --}}
    <div class="inset-card">
        <div style="overflow-x:auto;">
            <table class="ios-table" style="min-width:900px;">
                <thead>
                    <tr>
                        <th>Proveedor</th>
                        <th>Clave Hacienda</th>
                        <th>Fecha</th>
                        <th>Vence</th>
                        <th style="text-align:right;">Total</th>
                        <th style="text-align:right;">Pendiente</th>
                        <th style="text-align:right;">IVA acreditado</th>
                        <th>Estado</th>
                        <th style="text-align:center;">Acciones</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($cxps as $cxp)
                    <tr wire:key="cxp-{{ $cxp->id }}">
                        <td>
                            <div class="td-bold" style="font-size:12px;">
                                {{ $cxp->tercero?->nombre ?? $cxp->factura?->proveedor_nombre ?? '—' }}
                            </div>
                            <div style="font-size:10px;color:var(--label2);">
                                {{ $cxp->tercero?->cedula_numero ?? $cxp->factura?->proveedor_cedula }}
                            </div>
                        </td>
                        <td>
                            <div class="td-mono" style="font-size:10px;">
                                {{ substr($cxp->factura?->clave_hacienda ?? '', 0, 12) }}…
                            </div>
                        </td>
                        <td style="font-size:11px;color:var(--label2);white-space:nowrap;">
                            {{ $cxp->fecha_emision->format('d M Y') }}
                        </td>
                        <td style="white-space:nowrap;">
                            @php $dias = now()->diffInDays($cxp->fecha_vencimiento, false); @endphp
                            <span style="font-size:11px;font-weight:600;
                                color:{{ $dias < 0 ? 'var(--red)' : ($dias <= 7 ? 'var(--orange)' : 'var(--label2)') }};">
                                {{ $cxp->fecha_vencimiento->format('d M Y') }}
                                @if($dias < 0) · {{ abs($dias) }}d vencida
                                @elseif($dias <= 7) · {{ $dias }}d ⚠️
                                @endif
                            </span>
                        </td>
                        <td style="text-align:right;font-family:'Courier New',monospace;font-size:12px;">
                            ₡{{ number_format($cxp->monto_total, 2) }}
                        </td>
                        <td style="text-align:right;font-weight:700;font-size:12px;
                                   color:{{ $cxp->monto_pendiente > 0 ? 'var(--orange)' : 'var(--green2)' }};">
                            ₡{{ number_format($cxp->monto_pendiente, 2) }}
                        </td>
                        <td style="text-align:right;font-size:12px;color:var(--green2);font-weight:600;">
                            ₡{{ number_format($cxp->factura?->iva_acreditable ?? 0, 2) }}
                        </td>
                        <td>
                            <span class="chip {{ match($cxp->estado) {
                                'pagado'   => 'ch-green',
                                'vencido'  => 'ch-red',
                                'parcial'  => 'ch-blue',
                                'pendiente'=> 'ch-orange',
                                default    => 'ch-gray',
                            } }}">
                                {{ match($cxp->estado) {
                                    'pagado'   => '✓ Pagado',
                                    'vencido'  => '🔴 Vencido',
                                    'parcial'  => '◑ Parcial',
                                    'pendiente'=> '⏳ Pendiente',
                                    default    => $cxp->estado,
                                } }}
                            </span>
                        </td>
                        <td>
                            <div style="display:flex;gap:5px;justify-content:center;">
                                @if($cxp->estado !== 'pagado')
                                <button wire:click="abrirPago({{ $cxp->id }})"
                                        class="btn-blue" style="font-size:11px;padding:6px 12px;">
                                    💳 Pagar
                                </button>
                                @endif
                            </div>
                        </td>
                    </tr>
                    @empty
                    <tr>
                        <td colspan="9" style="text-align:center;padding:40px;color:var(--label2);">
                            No hay cuentas por pagar con los filtros seleccionados
                        </td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
        @if($cxps->hasPages())
        <div style="padding:14px 18px;border-top:.5px solid var(--separator);">
            {{ $cxps->links() }}
        </div>
        @endif
    </div>

    {{-- ── MODAL REGISTRAR PAGO ─────────────────────── --}}
    @if($pagando_cxp_id)
    @php $cxp_modal = \App\Models\CuentaPorPagar::with('tercero','factura')->find($pagando_cxp_id); @endphp
    <div style="position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:100;
                display:flex;align-items:center;justify-content:center;"
         wire:click.self="$set('pagando_cxp_id', null)">
        <div style="background:#fff;border-radius:22px;padding:28px;width:400px;
                    box-shadow:0 20px 60px rgba(0,0,0,.2);">

            <div style="font-size:17px;font-weight:700;margin-bottom:4px;">💳 Registrar pago a proveedor</div>
            <div style="font-size:13px;color:var(--label2);margin-bottom:20px;">
                {{ $cxp_modal?->tercero?->nombre ?? $cxp_modal?->factura?->proveedor_nombre }}
                · Pendiente: ₡{{ number_format($cxp_modal?->monto_pendiente ?? 0, 2) }}
            </div>

            @if($pago_error)
            <div class="alert alert-red" style="margin-bottom:14px;">❌ {{ $pago_error }}</div>
            @endif

            <div class="field" style="margin-bottom:14px;">
                <label>Monto del pago</label>
                <input type="number" wire:model="monto_pago" step="0.01" min="0.01" placeholder="₡0.00" />
            </div>
            <div class="field" style="margin-bottom:14px;">
                <label>Medio de pago</label>
                <select wire:model="medio_pago">
                    @foreach($medios_pago as $codigo => $nombre)
                    <option value="{{ $codigo }}">{{ $nombre }}</option>
                    @endforeach
                </select>
            </div>
            <div class="field" style="margin-bottom:14px;">
                <label>Referencia (número de transferencia, etc.)</label>
                <input type="text" wire:model="referencia_pago" placeholder="Número de operación" />
            </div>
            <div class="field" style="margin-bottom:20px;">
                <label>Notas</label>
                <input type="text" wire:model="notas_pago" placeholder="Opcional" />
            </div>

            <div style="display:flex;gap:10px;">
                <button wire:click="$set('pagando_cxp_id', null)"
                        class="btn-plain" style="flex:1;justify-content:center;">Cancelar</button>
                <button wire:click="registrarPago"
                        wire:loading.attr="disabled"
                        class="btn-blue" style="flex:1;justify-content:center;">
                    <span wire:loading.remove wire:target="registrarPago">✅ Registrar pago</span>
                    <span wire:loading wire:target="registrarPago">Procesando…</span>
                </button>
            </div>
        </div>
    </div>
    @endif

</div>