{{-- resources/views/livewire/cxc/index.blade.php --}}
<div>
    {{-- ── HEADER ──────────────────────────────────── --}}
    <div style="display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:20px;">
        <div>
            <div class="page-title">💰 Cuentas por cobrar</div>
            <div class="page-sub">Facturas a crédito · antigüedad · registro de pagos</div>
        </div>
        <div style="display:flex;gap:8px;">
            <button wire:click="$set('vista_activa','listado')"
                    class="{{ $vista_activa === 'listado' ? 'btn-blue' : 'btn-plain' }}"
                    style="font-size:12px;padding:8px 14px;">
                📋 Listado
            </button>
            <button wire:click="$set('vista_activa','antiguedad')"
                    class="{{ $vista_activa === 'antiguedad' ? 'btn-blue' : 'btn-plain' }}"
                    style="font-size:12px;padding:8px 14px;">
                📊 Antigüedad
            </button>
        </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 pendiente</div>
            <div style="font-size:22px;font-weight:700;">₡{{ number_format($totales->total_pendiente ?? 0, 0) }}</div>
            <div style="font-size:11px;color:var(--label2);margin-top:4px;">{{ $totales->total_facturas ?? 0 }} facturas</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;">✅ Cobrado</div>
            <div style="font-size:22px;font-weight:700;color:var(--green2);">₡{{ number_format($totales->total_cobrado ?? 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;">Total facturado</div>
            <div style="font-size:22px;font-weight:700;">₡{{ number_format($totales->total_facturado ?? 0, 0) }}</div>
        </div>
    </div>

    @if($vista_activa === 'antiguedad')
    {{-- ── VISTA ANTIGÜEDAD ─────────────────────── --}}
    <div class="group-label">Antigüedad de saldos</div>
    <div class="inset-card" style="padding:20px;">
        @php
            $total_ant = ($antiguedad['rango_0_30'] ?? 0) + ($antiguedad['rango_31_60'] ?? 0)
                       + ($antiguedad['rango_61_90'] ?? 0) + ($antiguedad['rango_mas_90'] ?? 0);
        @endphp
        @foreach([
            ['label' => '0–30 días (vigente)', 'key' => 'rango_0_30', 'color' => 'var(--green)'],
            ['label' => '31–60 días', 'key' => 'rango_31_60', 'color' => 'var(--orange)'],
            ['label' => '61–90 días', 'key' => 'rango_61_90', 'color' => 'var(--red)'],
            ['label' => 'Más de 90 días', 'key' => 'rango_mas_90', 'color' => '#7F1D1D'],
        ] as $rango)
        @php $monto = $antiguedad[$rango['key']] ?? 0; $pct = $total_ant > 0 ? ($monto / $total_ant * 100) : 0; @endphp
        <div style="display:flex;align-items:center;gap:14px;padding:12px 0;
                    border-bottom:.5px solid var(--separator);">
            <div style="width:120px;font-size:12px;font-weight:500;">{{ $rango['label'] }}</div>
            <div style="flex:1;height:8px;background:var(--bg);border-radius:4px;overflow:hidden;">
                <div style="height:100%;border-radius:4px;background:{{ $rango['color'] }};
                            width:{{ min(100, $pct) }}%;transition:width .3s;"></div>
            </div>
            <div style="width:100px;text-align:right;font-weight:700;font-family:'Courier New',monospace;font-size:13px;
                        color:{{ $rango['color'] }};">
                ₡{{ number_format($monto, 0) }}
            </div>
            <div style="width:45px;text-align:right;font-size:11px;color:var(--label2);">
                {{ number_format($pct, 1) }}%
            </div>
        </div>
        @endforeach
        <div style="display:flex;justify-content:space-between;padding-top:12px;
                    font-size:14px;font-weight:700;">
            <span>Total pendiente</span>
            <span style="font-family:'Courier New',monospace;">₡{{ number_format($total_ant, 0) }}</span>
        </div>
    </div>
    @endif

    {{-- ── 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_cliente"
                   placeholder="🔍 Buscar cliente o cédula…"
                   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>Cliente</th>
                        <th>Factura</th>
                        <th>Emitida</th>
                        <th>Vence</th>
                        <th style="text-align:right;">Total</th>
                        <th style="text-align:right;">Pendiente</th>
                        <th>Estado</th>
                        <th>REP</th>
                        <th style="text-align:center;">Acciones</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($cxcs as $cxc)
                    <tr wire:key="cxc-{{ $cxc->id }}">
                        <td>
                            <div class="td-bold" style="font-size:12px;">
                                {{ $cxc->tercero?->nombre ?? '—' }}
                            </div>
                            <div style="font-size:10px;color:var(--label2);">
                                {{ $cxc->tercero?->cedula_numero }}
                            </div>
                        </td>
                        <td>
                            <a href="{{ route('documentos.detalle', $cxc->factura_venta_id) }}"
                               wire:navigate
                               style="font-family:'Courier New',monospace;font-size:11px;
                                      color:var(--blue);text-decoration:none;font-weight:600;">
                                {{ $cxc->factura?->consecutivo }}
                            </a>
                        </td>
                        <td style="font-size:11px;color:var(--label2);white-space:nowrap;">
                            {{ $cxc->fecha_emision->format('d M Y') }}
                        </td>
                        <td style="white-space:nowrap;">
                            @php $diasVencida = $cxc->diasVencida(); @endphp
                            <span style="font-size:11px;font-weight:600;
                                color:{{ $diasVencida > 0 ? 'var(--red)' : 'var(--label2)' }};">
                                {{ $cxc->fecha_vencimiento->format('d M Y') }}
                                @if($diasVencida > 0) · {{ $diasVencida }}d @endif
                            </span>
                        </td>
                        <td style="text-align:right;font-family:'Courier New',monospace;font-size:12px;">
                            ₡{{ number_format($cxc->monto_total, 2) }}
                        </td>
                        <td style="text-align:right;font-weight:700;font-size:12px;
                                   color:{{ $cxc->monto_pendiente > 0 ? 'var(--orange)' : 'var(--green2)' }};">
                            ₡{{ number_format($cxc->monto_pendiente, 2) }}
                        </td>
                        <td>
                            <span class="chip {{ match($cxc->estado) {
                                'pagado'   => 'ch-green',
                                'vencido'  => 'ch-red',
                                'parcial'  => 'ch-blue',
                                'pendiente'=> 'ch-orange',
                                default    => 'ch-gray',
                            } }}">
                                {{ match($cxc->estado) {
                                    'pagado'   => '✓ Pagado',
                                    'vencido'  => '🔴 Vencido',
                                    'parcial'  => '◑ Parcial',
                                    'pendiente'=> '⏳ Pendiente',
                                    default    => $cxc->estado,
                                } }}
                            </span>
                        </td>
                        <td>
                            @if($cxc->factura?->rep_requerido)
                                @if($cxc->factura->rep_generado)
                                    <span class="chip ch-green">✓ REP</span>
                                @else
                                    <span class="chip ch-orange">⏳ REP</span>
                                @endif
                            @else
                                <span style="font-size:11px;color:var(--label2);">—</span>
                            @endif
                        </td>
                        <td>
                            <div style="display:flex;gap:5px;justify-content:center;">
                                @if($cxc->estado !== 'pagado')
                                <button wire:click="abrirPago({{ $cxc->id }})"
                                        class="btn-blue" style="font-size:11px;padding:6px 12px;">
                                    💵 Pagar
                                </button>
                                @endif
                                @if($cxc->tercero?->email)
                                <button wire:click="enviarRecordatorio({{ $cxc->id }})"
                                        class="btn-plain" style="font-size:11px;padding:5px 9px;"
                                        title="Enviar recordatorio de cobro">
                                    ✉️
                                </button>
                                @endif
                            </div>
                        </td>
                    </tr>
                    @empty
                    <tr>
                        <td colspan="9" style="text-align:center;padding:40px;color:var(--label2);">
                            No hay cuentas por cobrar con los filtros seleccionados
                        </td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
        @if($cxcs->hasPages())
        <div style="padding:14px 18px;border-top:.5px solid var(--separator);">
            {{ $cxcs->links() }}
        </div>
        @endif
    </div>

    {{-- ── MODAL REGISTRAR PAGO ─────────────────────── --}}
    @if($pagando_cxc_id)
    @php $cxc_modal = $cxcs->firstWhere('id', $pagando_cxc_id) ?? \App\Models\CuentaPorCobrar::with('tercero')->find($pagando_cxc_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_cxc_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</div>
            <div style="font-size:13px;color:var(--label2);margin-bottom:20px;">
                {{ $cxc_modal?->tercero?->nombre }}
                · Pendiente: ₡{{ number_format($cxc_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 (SINPE, transferencia, etc.)</label>
                <input type="text"
                       wire:model="referencia_pago"
                       placeholder="Número de operación o referencia" />
            </div>

            <div class="field" style="margin-bottom:20px;">
                <label>Notas</label>
                <input type="text" wire:model="notas_pago" placeholder="Opcional" />
            </div>

            @if($cxc_modal?->factura?->rep_requerido && !$cxc_modal?->factura?->rep_generado)
            <div class="alert alert-orange" style="margin-bottom:16px;">
                <span style="flex-shrink:0;">⚠️</span>
                <span>Esta factura tiene IVA diferido. Al completar el pago se generará
                      automáticamente el <strong>REP</strong> para Hacienda.</span>
            </div>
            @endif

            <div style="display:flex;gap:10px;">
                <button wire:click="$set('pagando_cxc_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>