@extends('padre.padre')
@section('contenido')

<style>
    /* Fix viewport issue for SweetAlert2 caused by backdrop-filter on body */
    body.blurglass {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    /* Estilos Premium y Harmoniosos */
    .payment-container {
        width: 100%;
        max-width: 100%;
        margin: 0;
        padding: 10px 20px;
        background-color: var(--primary-bg, #f8fafc);
        min-height: 100vh;
        font-family: 'Outfit', 'Inter', sans-serif;
    }

    .payment-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 25px;
        border-bottom: 1px solid var(--border-color, #e2e8f0);
        padding-bottom: 15px;
    }

    .payment-header h1 {
        font-weight: 800;
        color: var(--text-dark, #0f172a);
        font-size: 24px;
        margin: 0;
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .payment-card {
        background: var(--card-bg, #ffffff);
        border: 1px solid var(--border-color, #e2e8f0);
        border-radius: 16px;
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.02);
        padding: 24px;
        margin-bottom: 24px;
        transition: all 0.3s ease;
    }

    .form-group label {
        font-weight: 700;
        font-size: 13px;
        text-transform: uppercase;
        color: var(--text-muted, #64748b);
        margin-bottom: 8px;
        display: block;
        letter-spacing: 0.5px;
    }

    .form-control, .form-select {
        border-radius: 10px;
        border: 1px solid var(--border-color, #cbd5e1);
        padding: 10px 14px;
        font-size: 14px;
        transition: all 0.2s ease;
        background-color: var(--input-bg, #ffffff);
        color: var(--text-dark, #0f172a);
    }

    .form-control:focus, .form-select:focus {
        border-color: var(--accent-blue, #3b82f6);
        box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
        outline: none;
    }

    .table-container {
        margin-top: 15px;
        overflow-x: auto;
        border-radius: 12px;
        border: 1px solid var(--border-color, #e2e8f0);
    }

    .custom-table {
        width: 100%;
        border-collapse: collapse;
        font-size: 14px;
    }

    .custom-table th {
        background-color: #f1f5f9;
        color: #475569;
        font-weight: 700;
        padding: 14px 16px;
        text-align: left;
        border-bottom: 2px solid #e2e8f0;
        text-transform: uppercase;
        font-size: 12px;
        letter-spacing: 0.5px;
    }

    .custom-table td {
        padding: 12px 16px;
        border-bottom: 1px solid #e2e8f0;
        color: #334155;
    }

    .custom-table tr:hover {
        background-color: #f8fafc;
    }

    .badge-pending {
        background-color: #fef3c7;
        color: #d97706;
        padding: 4px 10px;
        border-radius: 9999px;
        font-weight: 700;
        font-size: 11px;
    }

    .total-box {
        background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
        color: white;
        border-radius: 12px;
        padding: 20px;
        text-align: right;
        margin-top: 20px;
        box-shadow: 0 4px 12px rgba(59, 130, 246, 0.2);
    }

    .total-box h3 {
        margin: 0;
        font-size: 14px;
        text-transform: uppercase;
        font-weight: 700;
        letter-spacing: 1px;
        opacity: 0.9;
    }

    .total-box .price {
        font-size: 32px;
        font-weight: 800;
        margin: 5px 0 0 0;
        letter-spacing: -0.5px;
    }

    .btn-payment {
        background-color: #22c55e;
        color: white;
        border: none;
        border-radius: 10px;
        padding: 14px 28px;
        font-weight: 700;
        text-transform: uppercase;
        font-size: 14px;
        letter-spacing: 0.5px;
        transition: all 0.2s;
        box-shadow: 0 4px 6px -1px rgba(34, 197, 94, 0.2);
        cursor: pointer;
    }

    .btn-payment:hover {
        background-color: #16a34a;
        transform: translateY(-1px);
        box-shadow: 0 8px 12px -1px rgba(34, 197, 94, 0.3);
    }

    .btn-payment:disabled {
        background-color: #94a3b8;
        cursor: not-allowed;
        transform: none;
        box-shadow: none;
    }

    .empty-state {
        text-align: center;
        padding: 40px 20px;
        color: var(--text-muted, #64748b);
    }

    .empty-state .icon {
        font-size: 48px;
        margin-bottom: 12px;
        display: block;
    }

    /* Estilos de Switch visual para checkboxes */
    .checkbox-custom {
        width: 20px;
        height: 20px;
        cursor: pointer;
    }

    /* Animación de carga */
    .loading-spinner {
        display: inline-block;
        width: 20px;
        height: 20px;
        border: 3px solid rgba(255,255,255,.3);
        border-radius: 50%;
        border-top-color: #fff;
        animation: spin 1s ease-in-out infinite;
        margin-right: 8px;
        vertical-align: middle;
    }

    @keyframes spin {
        to { transform: rotate(360deg); }
    }

    .active-tab-btn {
        color: #3b82f6 !important;
        border-bottom: 3px solid #3b82f6 !important;
    }
    .inactive-tab-btn {
        color: #64748b !important;
        border-bottom: 3px solid transparent !important;
    }
    .inactive-tab-btn:hover {
        color: #334155 !important;
    }
</style>

<div class="payment-container">
    <div class="payment-header">
        <h1><span>💸</span> Pago a Terceros / Proveedores</h1>
        @include('menu.botonRegresar')
    </div>

    <!-- Pestañas de Navegación Premium -->
    <div class="d-flex gap-2 mb-3" style="border-bottom: 2px solid #e2e8f0; padding-bottom: 8px;">
        <button type="button" id="tab_registrar_pagos" class="btn active-tab-btn" style="border: none; background: none; font-weight: bold; padding: 6px 16px; font-size: 14px; cursor: pointer; transition: all 0.2s;">
            💸 Registrar Pago Masivo
        </button>
        <button type="button" id="tab_historial_pagos" class="btn inactive-tab-btn" style="border: none; background: none; font-weight: bold; padding: 6px 16px; font-size: 14px; cursor: pointer; transition: all 0.2s;">
            📅 Relación de Pagos / Historial
        </button>
        <button type="button" id="tab_buscar_factura" class="btn inactive-tab-btn" style="border: none; background: none; font-weight: bold; padding: 6px 16px; font-size: 14px; cursor: pointer; transition: all 0.2s;">
            🔍 Buscar por Factura
        </button>
    </div>

    <!-- SECCIÓN 1: REGISTRAR PAGOS -->
    <div id="seccion_registrar_pagos">
        <form id="formPagoProveedores">
            @csrf
            <!-- Barra Superior: 2 filas compactas dentro de una sola tarjeta -->
            <div class="payment-card" style="padding: 12px 20px; margin-bottom: 12px;">

                <!-- Fila 1: Datos fijos del pago (siempre visible) -->
                <div class="d-flex align-items-end gap-3 flex-wrap">

                    <!-- Proveedor -->
                    <div style="flex: 2; min-width: 200px;">
                        <label for="proveedor_search" style="font-size: 10px; font-weight: 700; color: #64748b; text-transform: uppercase; letter-spacing: 0.5px; display:block; margin-bottom:3px;">Proveedor (NIT o Nombre)</label>
                        <input type="text" list="proveedores_list" id="proveedor_search" class="form-control form-control-sm" placeholder="Escriba NIT o Nombre..." required autocomplete="off" style="border-radius: 7px;">
                        <datalist id="proveedores_list"></datalist>
                        <input type="hidden" name="nit" id="nit" value="">
                    </div>

                    <!-- Regla Contable -->
                    <div style="flex: 1; min-width: 140px;">
                        <label for="tipo_movimiento" style="font-size: 10px; font-weight: 700; color: #64748b; text-transform: uppercase; letter-spacing: 0.5px; display:block; margin-bottom:3px;">Regla Contable</label>
                        <select required class="form-select form-select-sm" name="tipo_movimiento" id="tipo_movimiento" style="border-radius: 7px;">
                            <option value="">-- Regla --</option>
                            @foreach($tipos_movimientos as $tipo)
                                <option value="{{ $tipo }}" {{ $tipo == 'Pagos' ? 'selected' : '' }}>{{ $tipo }}</option>
                            @endforeach
                        </select>
                    </div>

                    <!-- Fecha Pago -->
                    <div style="flex: 1; min-width: 140px;">
                        <label for="fecha" style="font-size: 10px; font-weight: 700; color: #64748b; text-transform: uppercase; letter-spacing: 0.5px; display:block; margin-bottom:3px;">Fecha Pago</label>
                        <input required type="date" class="form-control form-control-sm" name="fecha" id="fecha" value="{{ date('Y-m-d') }}" style="border-radius: 7px;">
                    </div>

                    <!-- Observación -->
                    <div style="flex: 3; min-width: 220px;">
                        <label for="observacion" style="font-size: 10px; font-weight: 700; color: #64748b; text-transform: uppercase; letter-spacing: 0.5px; display:block; margin-bottom:3px;">Observación / Comentario</label>
                        <input required type="text" class="form-control form-control-sm" name="observacion" id="observacion" placeholder="Ej. Abono a facturas pendientes..." style="border-radius: 7px;">
                    </div>
                </div>

                <!-- Fila 2: Filtros de facturas (aparece al seleccionar proveedor) -->
                <div id="seccionFiltrosCol" style="display: none; margin-top: 10px; padding-top: 10px; border-top: 1px dashed #e2e8f0;">
                    <div class="d-flex align-items-end gap-3 flex-wrap">
                        <div style="flex: 1; min-width: 110px;">
                            <label for="filtro_factura" style="font-size: 10px; font-weight: 700; color: #64748b; text-transform: uppercase; display:block; margin-bottom:3px;">Nro. Factura</label>
                            <input type="text" id="filtro_factura" class="form-control form-control-sm" placeholder="Ej. 12345" style="border-radius: 7px;">
                        </div>
                        <div style="flex: 1; min-width: 120px;">
                            <label for="filtro_estado" style="font-size: 10px; font-weight: 700; color: #64748b; text-transform: uppercase; display:block; margin-bottom:3px;">Estado</label>
                            <select id="filtro_estado" class="form-select form-select-sm" style="border-radius: 7px;">
                                <option value="pendientes" selected>Pendientes</option>
                                <option value="pagadas">Pagadas</option>
                                <option value="contado">Contado</option>
                                <option value="todas">Todas</option>
                            </select>
                        </div>
                        <div style="flex: 1; min-width: 130px;">
                            <label for="filtro_fecha_inicio" style="font-size: 10px; font-weight: 700; color: #64748b; text-transform: uppercase; display:block; margin-bottom:3px;">Desde</label>
                            <input type="date" id="filtro_fecha_inicio" class="form-control form-control-sm" style="border-radius: 7px;">
                        </div>
                        <div style="flex: 1; min-width: 130px;">
                            <label for="filtro_fecha_fin" style="font-size: 10px; font-weight: 700; color: #64748b; text-transform: uppercase; display:block; margin-bottom:3px;">Hasta</label>
                            <input type="date" id="filtro_fecha_fin" class="form-control form-control-sm" style="border-radius: 7px;">
                        </div>
                        <div class="d-flex gap-2 pb-0" style="align-self: flex-end;">
                            <button type="button" id="btnLimpiarFiltros" class="btn btn-light btn-sm" style="border-radius: 7px; font-weight: 700; border: 1px solid #cbd5e1; padding: 5px 14px; font-size: 12px; color: #475569;">Limpiar</button>
                            <button type="button" id="btnFiltrar" class="btn btn-primary btn-sm" style="border-radius: 7px; font-weight: 700; background-color: #3b82f6; border-color: #3b82f6; padding: 5px 14px; font-size: 12px;">Filtrar</button>
                        </div>
                    </div>
                </div>

                <div hidden id="filtroPlaceholder"></div>
            </div>


        <!-- Sección de Facturas de Compra -->
        <div class="payment-card" style="padding: 20px;">
            <!-- <h3 style="font-weight: 700; margin-bottom: 15px; font-size: 15px; color: var(--accent-indigo, #4f46e5); text-transform: uppercase; letter-spacing: 0.5px;">Listado de Facturas</h3> -->

            <div id="loadingFacturas" class="empty-state" style="display: none;">
                <span class="icon">🔄</span>
                <span>Buscando facturas de compra...</span>
            </div>

            <div id="noFacturas" class="empty-state">
                <span class="icon">🔍</span>
                <span>Seleccione un proveedor en el panel superior para visualizar su listado de facturas.</span>
            </div>

            <!-- Panel de Operación e Ingestión de Facturas -->
            <div id="operacionFacturasWrapper" style="display: none; background: #f8fafc; padding: 18px; border-radius: 12px; border: 1px solid #e2e8f0; margin-bottom: 20px;">
                <h4 style="font-weight: 700; margin-top: 0; margin-bottom: 12px; font-size: 13px; color: #4f46e5; text-transform: uppercase; letter-spacing: 0.5px;">1. Seleccionar Factura y Configurar Pago</h4>

                <!-- Alerta de factura de contado -->
                <div id="alertaContado" style="display:none; background:#fff7ed; border:1px solid #fed7aa; border-radius:10px; padding:10px 16px; margin-bottom:12px; color:#c2410c; font-size:13px; font-weight:700; display:flex; align-items:center; gap:8px;">
                    <span style="font-size:18px;">🚫</span>
                    <span>Esta factura es de <strong>CONTADO</strong> — no admite abonos parciales. Solo se puede registrar el pago total.</span>
                </div>

                <div class="row g-2 align-items-start">
                    <!-- Selector de Factura -->
                    <div class="col-md-4">
                        <label style="font-size: 11px; font-weight: 700; color: #64748b; margin-bottom: 4px; display: block; text-transform: uppercase;">Seleccionar Factura</label>
                        <input type="text" id="buscar_factura_select" class="form-control form-control-sm mb-1" placeholder="🔍 Filtrar por número..." style="border-radius: 8px;">
                        <select id="selector_factura" class="form-select form-select-sm" size="6" style="border-radius: 8px; height: 130px; overflow-y: auto;">
                            <!-- Inyectado dinámicamente -->
                        </select>
                    </div>

                    <!-- Panel de Datos y Configuración -->
                    <div class="col-md-8">
                        <!-- Fila Informativa de Saldos -->
                        <div class="row g-2 mb-2">
                            <div class="col-3">
                                <div style="background:#ffffff; padding:8px 10px; border:1px solid #e2e8f0; border-radius:8px; display:flex; flex-direction:column; justify-content:center;">
                                    <span style="font-size:9px; font-weight:700; color:#64748b; text-transform:uppercase; display:block;">Total Factura</span>
                                    <span id="det_total_factura" style="font-size:14px; font-weight:800; color:#1e293b;">$0.00</span>
                                </div>
                            </div>
                            <div class="col-3">
                                <div style="background:#ffffff; padding:8px 10px; border:1px solid #e2e8f0; border-radius:8px; display:flex; flex-direction:column; justify-content:center;">
                                    <span style="font-size:9px; font-weight:700; color:#64748b; text-transform:uppercase; display:block;">Abonado</span>
                                    <span id="det_saldo_abonado" style="font-size:14px; font-weight:800; color:#64748b;">$0.00</span>
                                </div>
                            </div>
                            <div class="col-3">
                                <div style="background:#fff1f2; padding:8px 10px; border:1px solid #fecdd3; border-radius:8px; display:flex; flex-direction:column; justify-content:center;">
                                    <span style="font-size:9px; font-weight:700; color:#e11d48; text-transform:uppercase; display:block;">Devolución</span>
                                    <span id="det_saldo_devolucion" style="font-size:14px; font-weight:800; color:#e11d48;">$0.00</span>
                                </div>
                            </div>
                            <div class="col-3">
                                <div style="background:#eef2ff; padding:8px 10px; border:1px solid #c7d2fe; border-radius:8px; display:flex; flex-direction:column; justify-content:center;">
                                    <span style="font-size:9px; font-weight:700; color:#4f46e5; text-transform:uppercase; display:block;">Saldo Pendiente</span>
                                    <span id="det_saldo_pendiente" style="font-size:14px; font-weight:800; color:#4f46e5;">$0.00</span>
                                </div>
                            </div>
                        </div>

                        <!-- Tipo de pago (solo credito lo muestra activo) -->
                        <!-- Tipo de pago (solo credito lo muestra activo) -->
                        <div id="panelConfigPago">
                            <div class="row g-2">
                                <!-- Valor a Pagar / Abono Bruto -->
                                <div class="col-md-4">
                                    <label style="font-size:10px; font-weight:700; color:#475569; margin-bottom:2px; display:block;">Valor a Pagar ($)</label>
                                    <input type="number" step="0.01" min="0" id="valor_pagar_item" class="form-control form-control-sm" style="border-radius:8px; font-weight:700; text-align:right; font-size:14px;">
                                </div>
                                <!-- Descuento de la Factura -->
                                <div class="col-md-4">
                                    <label style="font-size:10px; font-weight:700; color:#16a34a; margin-bottom:2px; display:block;">Descuento Factura ($)</label>
                                    <input type="number" step="0.01" min="0" id="descuento_item" class="form-control form-control-sm" value="0" style="border-radius:8px; font-weight:700; text-align:right; color:#16a34a;">
                                </div>
                                <!-- Aportes Realizados -->
                                <div class="col-md-4">
                                    <label style="font-size:10px; font-weight:700; color:#8b5cf6; margin-bottom:2px; display:block;">Aportes Realizados ($)</label>
                                    <input type="number" step="0.01" min="0" id="aporte_item" class="form-control form-control-sm" value="0" style="border-radius:8px; font-weight:700; text-align:right; color:#8b5cf6;">
                                </div>

                                <!-- Retención: valor (opcional) -->
                                <div class="col-md-4" hidden>
                                    <label style="font-size:10px; font-weight:700; color:#dc2626; margin-bottom:2px; ">Retención ($)</label>
                                    <input type="number" step="0.01" min="0" id="retencion_item" class="form-control form-control-sm" value="0" style="border-radius:8px; font-weight:700; text-align:right; color:#dc2626;">
                                </div>

                                <!-- Tipo de retención: solo visible si retención > 0 -->
                                <div hidden class="col-md-6" id="wrapperTipoRetencion" style="display:none;">
                                    <label style="font-size:10px; font-weight:700; color:#dc2626; margin-bottom:2px; ">Tipo de Retención</label>
                                    <select id="tipo_retencion_item" class="form-select form-select-sm" style="border-radius:8px; font-weight:600;">
                                        <option value="RTF">📋 Retefuente (RTF)</option>
                                        <option value="RTIC">📋 ReteICA (RTIC)</option>
                                        <option value="RTIV">📋 ReteIVA (RTIV)</option>
                                    </select>
                                </div>

                                <!-- Neto calculado en tiempo real -->
                                <div class="col-12" id="wrapperNetoPreview" style="display:none; margin-top: 4px;">
                                    <div style="background:#f1f5f9; border:1px solid #cbd5e1; border-radius:8px; padding:6px 14px; display:flex; justify-content:space-between; align-items:center;">
                                        <span style="font-size:11px; font-weight:700; color:#475569; text-transform:uppercase;">Neto Real a Desembolsar (Valor a Pagar - Dto + Aportes):</span>
                                        <span id="neto_preview" style="font-size:16px; font-weight:800; color:#0f172a;">$0.00</span>
                                    </div>
                                </div>
                            </div> <!-- Cierra row g-2 -->
                        </div> <!-- Cierra panelConfigPago -->

                        <!-- Configuración de Cuentas Contables y Botón Agregar (AHORA DENTRO DE COL-MD-8) -->
                        <div class="row g-2 mt-2">
                            <div class="col-12">
                                <!-- Subpanel de Configuración de Cuentas Contables (Siempre visible) -->
                                <div class="card" style="border: 1px solid #cbd5e1; border-radius: 10px; overflow: hidden; background-color: #f8fafc;">
                                    <div class="card-header d-flex justify-content-between align-items-center" id="headingCuentas" style="background-color: #f1f5f9; padding: 6px 12px; border-bottom: 1px solid #cbd5e1; user-select: none; cursor: pointer;">
                                        <span style="font-size: 11px; font-weight: 800; color: #475569; text-transform: uppercase; letter-spacing: 0.5px; display: flex; align-items: center; gap: 4px;">
                                            ⚙️ Configuración de Cuentas Contables para esta Factura
                                        </span>
                                        <span id="collapseIcon" style="font-size: 11px; font-weight: 700; color: #64748b;">[-] Contraer</span>
                                    </div>
                                    <div class="card-body" id="bodyCuentas" style="display: block; padding: 12px; background: #ffffff;">
                                        <div class="row g-2">
                                            <!-- Cuenta Proveedores -->
                                            <div class="col-md-3">
                                                <label style="font-size:9px; font-weight:700; color:#475569; margin-bottom:2px; display:block; text-transform:uppercase;">Prov / Débito (22%)</label>
                                                <select id="cta_proveedor_item" class="form-select form-select-sm" style="border-radius:6px; font-size:11px;">
                                                    @foreach($cuentas_proveedor as $cta)
                                                        <option value="{{ $cta->codeC }}" {{ $cta->codeC == '220501' ? 'selected' : '' }}>{{ $cta->codeC }} - {{ $cta->NombreCuenta }}</option>
                                                    @endforeach
                                                </select>
                                            </div>
                                            <!-- Cuenta de Pago (Activo) -->
                                            <div class="col-md-3">
                                                <label style="font-size:9px; font-weight:700; color:#2563eb; margin-bottom:2px; display:block; text-transform:uppercase;">Pago / Activo (11%)</label>
                                                <select id="cta_activo_item" class="form-select form-select-sm" style="border-radius:6px; font-size:11px;">
                                                    @foreach($cuentas_activo as $cta)
                                                        <option value="{{ $cta->codeC }}" {{ $cta->codeC == '111005' ? 'selected' : '' }}>{{ $cta->codeC }} - {{ $cta->NombreCuenta }}</option>
                                                    @endforeach
                                                </select>
                                            </div>
                                            <!-- Cuenta Descuento -->
                                            <div class="col-md-3" id="wrapperCtaDescuento" style="display:none;">
                                                <label style="font-size:9px; font-weight:700; color:#16a34a; margin-bottom:2px; display:block; text-transform:uppercase;">Dto / Fletes / Ajuste</label>
                                                <select id="cta_descuento_item" class="form-select form-select-sm" style="border-radius:6px; font-size:11px;">
                                                    @foreach($cuentas_descuento as $cta)
                                                        <option value="{{ $cta->codeC }}" {{ $cta->codeC == '421040' ? 'selected' : '' }}>{{ $cta->codeC }} - {{ $cta->NombreCuenta }}</option>
                                                    @endforeach
                                                </select>
                                            </div>
                                            <!-- Cuenta Aportes -->
                                            <div class="col-md-3" id="wrapperCtaAporte" style="display:none;">
                                                <label style="font-size:9px; font-weight:700; color:#8b5cf6; margin-bottom:2px; display:block; text-transform:uppercase;">Aportes / Fondos (1220% / 3115%)</label>
                                                @php
                                                    $cta1220 = $cuentas_aporte->first(function($c) { return strpos($c->codeC, '1220') === 0; });
                                                    $defaultAporteCta = $cta1220 ? $cta1220->codeC : ($cuentas_aporte->first(function($c) { return $c->codeC == '311505'; })->codeC ?? ($cuentas_aporte->first()->codeC ?? '1220'));
                                                @endphp
                                                <select id="cta_aporte_item" class="form-select form-select-sm" style="border-radius:6px; font-size:11px;">
                                                    @foreach($cuentas_aporte as $cta)
                                                        <option value="{{ $cta->codeC }}" {{ $cta->codeC == $defaultAporteCta ? 'selected' : '' }}>{{ $cta->codeC }} - {{ $cta->NombreCuenta }}</option>
                                                    @endforeach
                                                </select>
                                            </div>
                                            <!-- Cuenta Retefuente -->
                                            <div hidden class="col-md-4">
                                                <label style="font-size:9px; font-weight:700; color:#dc2626; margin-bottom:2px; text-transform:uppercase;">Cuenta Retefuente (RTF - 2365%)</label>
                                                <select id="cta_retefuente_item" class="form-select form-select-sm" style="border-radius:6px; font-size:11px;">
                                                    @foreach($cuentas_retefuente as $cta)
                                                        <option value="{{ $cta->codeC }}">{{ $cta->codeC }} - {{ $cta->NombreCuenta }}</option>
                                                    @endforeach
                                                </select>
                                            </div>
                                            <!-- Cuenta ReteICA -->
                                            <div hidden class="col-md-4">
                                                <label style="font-size:9px; font-weight:700; color:#dc2626; margin-bottom:2px;  text-transform:uppercase;">Cuenta ReteICA (RTIC - 2367%)</label>
                                                <select id="cta_reteica_item" class="form-select form-select-sm" style="border-radius:6px; font-size:11px;">
                                                    @foreach($cuentas_reteica as $cta)
                                                        <option value="{{ $cta->codeC }}">{{ $cta->codeC }} - {{ $cta->NombreCuenta }}</option>
                                                    @endforeach
                                                </select>
                                            </div>
                                            <!-- Cuenta ReteIVA -->
                                            <div hidden class="col-md-4">
                                                <label style="font-size:9px; font-weight:700; color:#dc2626; margin-bottom:2px;  text-transform:uppercase;">Cuenta ReteIVA (RTIV - 2368%)</label>
                                                <select id="cta_reteiva_item" class="form-select form-select-sm" style="border-radius:6px; font-size:11px;">
                                                    @foreach($cuentas_reteiva as $cta)
                                                        <option value="{{ $cta->codeC }}">{{ $cta->codeC }} - {{ $cta->NombreCuenta }}</option>
                                                    @endforeach
                                                </select>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            
                            <!-- Botón Agregar (Alineado a la derecha) -->
                            <div class="col-12 d-flex justify-content-end mt-2">
                                <button type="button" id="btnAgregarFacturaLote" class="btn btn-success btn-sm" style="border-radius:8px; font-weight:700; padding:8px 25px; background-color:#22c55e; border-color:#22c55e; font-size:13px;">
                                    ➕ Agregar al Comprobante
                                </button>
                            </div>
                        </div> <!-- Cierra row de Cuentas Contables y Botón -->
                    </div> <!-- Cierra col-md-8 -->
                </div> <!-- Cierra row g-2 align-items-start -->
            </div> <!-- Cierra operacionFacturasWrapper -->

        <!-- Tabla de items en el lote de pago actual -->
        <div id="tableWrapper" style="display: none;">
            <h4 style="font-weight: 700; margin-top: 10px; margin-bottom: 10px; font-size: 13px; color: #4f46e5; text-transform: uppercase; letter-spacing: 0.5px;">2. Listado de Facturas a Pagar en este Comprobante</h4>
            <div class="table-container">
                <table class="custom-table" id="tablaFacturas">
                    <thead>
                        <tr>
                            <th>Factura</th>
                            <th>Fecha</th>
                            <th>Tipo</th>
                            <th>Total</th>
                            <th>Pendiente</th>
                            <th style="color: #2563eb; font-weight: 800;">Abono Bruto</th>
                            <th style="color: #16a34a;">Descuento</th>
                            <th style="color: #8b5cf6;">Aportes</th>
                            <th style="color: #0f172a; font-weight: 800; background-color: #f1f5f9;">Neto Pagado</th>
                            <th style="width: 60px; text-align: center;">Quitar</th>
                        </tr>
                    </thead>
                    <tbody id="cuerpoFacturas">
                        <!-- Inyectado dinámicamente por JS desde el lote temporal -->
                    </tbody>
                </table>
            </div>

            <!-- Caja de totales en tiempo real -->
            <div class="total-box" style="display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:15px;">
                <div>
                    <h3>Resumen del Comprobante de Egreso</h3>
                    <div style="font-size:13px; opacity:0.9; margin-top:4px;">
                        Descuentos: <strong id="textTotalDescuento">$0.00</strong> &nbsp;|&nbsp; 
                        Aportes: <strong id="textTotalAporte">$0.00</strong>
                    </div>
                </div>
                <div style="text-align:right;">
                    <div style="font-size:12px; opacity:0.8; text-transform:uppercase; letter-spacing:0.5px;">Total Abonos Brutos</div>
                    <div class="price" id="textTotalLote" style="font-size:28px;">$0.00</div>
                    <div style="font-size:12px; opacity:0.9; margin-top:2px;">Neto real a desembolsar: <strong id="textNetoTotal" style="font-size:16px;">$0.00</strong></div>
                </div>
            </div>

                <!-- Botón de Envío -->
                <div class="d-flex justify-content-end mt-4">
                    <button type="submit" class="btn-payment" id="btnProcesarPago">
                        <span id="spinner" class="loading-spinner" style="display: none;"></span>
                        Registrar Pago Masivo
                    </button>
                </div>
            </div>
        </div>
        </form>
    </div>

    <!-- SECCIÓN 2: HISTORIAL DE PAGOS / RELACIÓN DE COMPROBANTES -->
    <div id="seccion_historial_pagos" style="display: none;">
        <!-- Panel de Filtros de Historial -->
        <div class="payment-card" style="padding: 18px; margin-bottom: 15px;">
            <h3 style="font-weight: 700; margin-bottom: 15px; font-size: 14px; color: var(--accent-indigo, #4f46e5); text-transform: uppercase; letter-spacing: 0.5px;">Filtros de Búsqueda de Comprobantes</h3>
            <div class="row g-2 align-items-end">
                <div class="col-md-3">
                    <div class="form-group mb-2">
                        <label for="hist_bodega" style="font-size: 11px; margin-bottom: 4px; font-weight: 700; color: #64748b; text-transform: uppercase; letter-spacing: 0.5px;">Bodega</label>
                        <select id="hist_bodega" class="form-select form-select-sm" style="border-radius: 8px;">
                            <option value="todas">-- Todas las Bodegas --</option>
                            @foreach($bodegas as $bod)
                                <option value="{{ $bod->id }}">{{ $bod->nombreBodega }}</option>
                            @endforeach
                        </select>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="form-group mb-2">
                        <label for="hist_proveedor_search" style="font-size: 11px; margin-bottom: 4px; font-weight: 700; color: #64748b; text-transform: uppercase; letter-spacing: 0.5px;">Proveedor (Buscador)</label>
                        <input type="text" list="hist_proveedores_list" id="hist_proveedor_search" class="form-control form-control-sm" placeholder="Escriba NIT o Nombre..." autocomplete="off" style="border-radius: 8px;">
                        <datalist id="hist_proveedores_list">
                            <!-- Se llena dinámicamente -->
                        </datalist>
                        <input type="hidden" id="hist_nit" value="">
                    </div>
                </div>
                <div class="col-md-2">
                    <div class="form-group mb-2">
                        <label for="hist_fecha_inicio" style="font-size: 11px; margin-bottom: 4px; font-weight: 700; color: #64748b; text-transform: uppercase; letter-spacing: 0.5px;">Desde</label>
                        <input type="date" id="hist_fecha_inicio" class="form-control form-control-sm" value="{{ date('Y-m-01') }}" style="border-radius: 8px;">
                    </div>
                </div>
                <div class="col-md-2">
                    <div class="form-group mb-2">
                        <label for="hist_fecha_fin" style="font-size: 11px; margin-bottom: 4px; font-weight: 700; color: #64748b; text-transform: uppercase; letter-spacing: 0.5px;">Hasta</label>
                        <input type="date" id="hist_fecha_fin" class="form-control form-control-sm" value="{{ date('Y-m-t') }}" style="border-radius: 8px;">
                    </div>
                </div>
                <div class="col-md-2">
                    <div class="form-group mb-2">
                        <label for="hist_consecutivo" style="font-size: 11px; margin-bottom: 4px; font-weight: 700; color: #64748b; text-transform: uppercase; letter-spacing: 0.5px;">Comprobante #</label>
                        <input type="text" id="hist_consecutivo" class="form-control form-control-sm" placeholder="Nro..." style="border-radius: 8px;">
                    </div>
                </div>
                <div class="col-12 d-flex justify-content-end gap-2 mt-2">
                    <button type="button" id="btnExportarExcel" class="btn btn-payment btn-sm" style="border-radius: 8px; font-weight: 700; background-color: #16a34a; box-shadow: none; font-size: 12px; padding: 6px 14px; text-transform: none; display: flex; align-items: center; gap: 4px;">
                        <span>🟢</span> Exportar a Excel
                    </button>
                    <button type="button" id="btnBuscarHistorial" class="btn btn-payment btn-sm" style="border-radius: 8px; font-weight: 700; background-color: #3b82f6; box-shadow: none; font-size: 12px; padding: 6px 14px; text-transform: none; display: flex; align-items: center; gap: 4px;">
                        <span>🔍</span> Buscar Comprobantes
                    </button>
                </div>
            </div>
        </div>

        <!-- Tabla del Historial -->
        <div class="payment-card" style="padding: 20px;">
            <h3 style="font-weight: 700; margin-bottom: 15px; font-size: 14px; color: var(--accent-indigo, #4f46e5); text-transform: uppercase; letter-spacing: 0.5px;">Comprobantes Registrados</h3>
            <div id="loadingHistorial" class="empty-state" style="display: none;">
                <span class="icon">🔄</span>
                <span>Consultando historial contable...</span>
            </div>
            
            <!-- Placeholder inicial o cuando no hay resultados -->
            <div id="noHistorial" class="empty-state">
                <span class="icon">🔍</span>
                <span>Haga clic en "Buscar Comprobantes" para consultar el historial contable.</span>
            </div>

            <div id="cuerpoHistorialWrapper" class="table-container" style="display: none;">
                <table class="custom-table" id="tablaHistorial">
                    <thead>
                        <tr>
                            <th>Comp #</th>
                            <th>Factura #</th>
                            <th>Fecha</th>
                            <th>Proveedor</th>
                            <th>Bodega</th>
                            <th class="text-right" style="color: #2563eb; font-weight: 700;">Total Bruto</th>
                            <th class="text-right" style="color: #16a34a;">Total Dtos</th>
                            <th class="text-right" style="color: #8b5cf6;">Total Aportes</th>
                            <th class="text-right" style="color: #dc2626;">Total Retenciones</th>
                            <th class="text-right" style="font-weight: 800; background-color: #f1f5f9; color: #0f172a;">Neto Desembolsado</th>
                            <th style="text-align: center;">Acción</th>
                        </tr>
                    </thead>
                    <tbody id="cuerpoHistorial">
                        <!-- Inyectado vía AJAX -->
                    </tbody>
                </table>
            </div>
            </div>
        </div>

    <!-- SECCIÓN 3: BUSCAR PAGOS POR FACTURA -->
    <div id="seccion_buscar_factura" style="display: none;">
        <!-- Panel de Búsqueda -->
        <div class="payment-card" style="padding: 18px; margin-bottom: 15px;">
            <h3 style="font-weight: 700; margin-bottom: 15px; font-size: 14px; color: var(--accent-indigo, #4f46e5); text-transform: uppercase; letter-spacing: 0.5px;">Búsqueda de Pagos por Factura Específica</h3>
            <div class="row g-2 align-items-end">
                <div class="col-md-6">
                    <div class="form-group mb-2">
                        <label for="buscar_nro_factura" style="font-size: 11px; margin-bottom: 4px; font-weight: 700; color: #64748b; text-transform: uppercase; letter-spacing: 0.5px;">Número de Factura de Compra</label>
                        <input type="text" id="buscar_nro_factura" class="form-control form-control-sm" placeholder="Ingrese el número exacto de la factura (Ej: 12345)..." style="border-radius: 8px; font-size: 14px; font-weight: 600;">
                    </div>
                </div>
                <div class="col-md-3">
                    <button type="button" id="btnBuscarPagosFactura" class="btn btn-payment btn-sm w-100 mb-2" style="border-radius: 8px; font-weight: 700; background-color: #3b82f6; box-shadow: none; font-size: 13px; padding: 8px 14px; text-transform: none; display: flex; align-items: center; justify-content: center; gap: 4px;">
                        <span>🔍</span> Buscar Abonos
                    </button>
                </div>
            </div>
        </div>

        <!-- Tabla de Pagos por Factura -->
        <div class="payment-card" style="padding: 20px;">
            <h3 style="font-weight: 700; margin-bottom: 15px; font-size: 14px; color: var(--accent-indigo, #4f46e5); text-transform: uppercase; letter-spacing: 0.5px;">Abonos / Pagos de la Factura <span id="lbl_factura_buscada" style="color: #0f172a;"></span></h3>
            
            <!-- Resumen Informativo de Saldos de la Factura -->
            <div id="resumenSaldosFactura" style="display: none; background: #f8fafc; padding: 15px; border-radius: 12px; border: 1px solid #e2e8f0; margin-bottom: 20px;">
                <div class="row g-2 text-center">
                    <div class="col-md-3">
                        <span style="font-size:10px; font-weight:700; color:#64748b; text-transform:uppercase; display:block;">Proveedor</span>
                        <strong id="res_factura_proveedor" style="font-size:13px; color:#1e293b;">—</strong>
                    </div>
                    <div class="col-md-3">
                        <span style="font-size:10px; font-weight:700; color:#64748b; text-transform:uppercase; display:block;">Total Factura</span>
                        <strong id="res_factura_total" style="font-size:15px; color:#1e293b;">$0.00</strong>
                    </div>
                    <div class="col-md-3">
                        <span style="font-size:10px; font-weight:700; color:#16a34a; text-transform:uppercase; display:block;">Total Abonado / Cruces</span>
                        <strong id="res_factura_abonado" style="font-size:15px; color:#16a34a;">$0.00</strong>
                    </div>
                    <div class="col-md-3">
                        <span style="font-size:10px; font-weight:700; color:#2563eb; text-transform:uppercase; display:block;">Saldo Pendiente</span>
                        <strong id="res_factura_pendiente" style="font-size:15px; color:#2563eb;">$0.00</strong>
                    </div>
                </div>
            </div>

            <div id="loadingPagosFactura" class="empty-state" style="display: none;">
                <span class="icon">🔄</span>
                <span>Buscando abonos realizados...</span>
            </div>
            
            <div id="noPagosFactura" class="empty-state">
                <span class="icon">🔍</span>
                <span>Ingrese un número de factura y haga clic en "Buscar Abonos" para consultar los pagos realizados.</span>
            </div>

            <div id="cuerpoPagosFacturaWrapper" class="table-container" style="display: none;">
                <table class="custom-table" id="tablaPagosFactura">
                    <thead>
                        <tr>
                            <th>Comp #</th>
                            <th>Fecha Pago</th>
                            <th>Cuenta Prov</th>
                            <th class="text-right" style="color: #2563eb; font-weight: 700;">Abono Bruto</th>
                            <th class="text-right" style="color: #16a34a;">Descuento</th>
                            <th class="text-right" style="color: #8b5cf6;">Aportes</th>
                            <th class="text-right" style="color: #dc2626;">Retención</th>
                            <th class="text-right" style="font-weight: 800; background-color: #f1f5f9; color: #0f172a;">Neto Desembolsado</th>
                            <th>Observación</th>
                            <th style="text-align: center;">Acción</th>
                        </tr>
                    </thead>
                    <tbody id="cuerpoPagosFactura">
                        <!-- Inyectado vía AJAX -->
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>
@endsection

@section('pie')
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script>
    document.addEventListener("DOMContentLoaded", function() {
        const Swal = window.Swal ? window.Swal.mixin({ heightAuto: false }) : {
            fire: function(opts) {
                alert((opts.title || '') + "\n" + (opts.text || opts.html || ''));
                return Promise.resolve({ isConfirmed: true });
            }
        };

        // Prevenir que la tecla Enter envíe el formulario o accione guardados accidentales
        document.addEventListener('keydown', function(event) {
            if (event.key === 'Enter') {
                const activeEl = document.activeElement;
                if (activeEl.tagName !== 'TEXTAREA' && activeEl.tagName !== 'BUTTON' && activeEl.type !== 'submit') {
                    event.preventDefault();
                }
            }
        });
        
        // ELEMENTOS DE REGISTRAR PAGOS
        const inputSearch = document.getElementById("proveedor_search");
        const hiddenNit = document.getElementById("nit");
        const datalistProveedores = document.getElementById("proveedores_list");
        
        const loadingFacturas = document.getElementById("loadingFacturas");
        const noFacturas = document.getElementById("noFacturas");
        const tableWrapper = document.getElementById("tableWrapper");
        const cuerpoFacturas = document.getElementById("cuerpoFacturas");
        const textTotalLote = document.getElementById("textTotalLote");
        const formPagoProveedores = document.getElementById("formPagoProveedores");
        const btnProcesarPago = document.getElementById("btnProcesarPago");
        const spinner = document.getElementById("spinner");

        let invoicesAvailable = [];
        let loteFacturas = [];

        // Toggle de panel de cuentas contables específicas
        const headingCuentas = document.getElementById("headingCuentas");
        const bodyCuentas = document.getElementById("bodyCuentas");
        const collapseIcon = document.getElementById("collapseIcon");

        if (headingCuentas && bodyCuentas) {
            headingCuentas.addEventListener("click", function() {
                if (bodyCuentas.style.display === "none") {
                    bodyCuentas.style.display = "block";
                    if (collapseIcon) collapseIcon.innerText = "[-] Contraer";
                } else {
                    bodyCuentas.style.display = "none";
                    if (collapseIcon) collapseIcon.innerText = "[+] Expandir";
                }
            });
        }

        // =====================================================================
        // 1. AUTOCUMPLETADOR ASÍNCRONO DE PROVEEDORES (OPTIMIZADO PARA ESCALA)
        // =====================================================================
        let debounceTimer;
        
        function inicializarBuscadorAsincrono(inputEl, datalistEl, hiddenNitEl, callbackOnChange = null) {
            inputEl.addEventListener("input", function() {
                const val = this.value.trim();
                
                // Si seleccionó una opción válida del datalist
                const options = datalistEl.options;
                let matchFound = false;
                for (let i = 0; i < options.length; i++) {
                    if (val === options[i].value || val === options[i].text) {
                        hiddenNitEl.value = options[i].value;
                        matchFound = true;
                        if (callbackOnChange) callbackOnChange(options[i].value);
                        break;
                    }
                }
                
                if (matchFound) return;
                
                // Si sigue escribiendo, limpiar y buscar con delay (debounce)
                hiddenNitEl.value = "";
                if (callbackOnChange) callbackOnChange("");
                
                clearTimeout(debounceTimer);
                if (val.length < 2) {
                    datalistEl.innerHTML = "";
                    return;
                }
                
                debounceTimer = setTimeout(() => {
                    fetch("{{ url('api/proveedores/buscar-filtro') }}", {
                        method: "POST",
                        headers: { "Content-Type": "application/json", "X-CSRF-TOKEN": "{{ csrf_token() }}" },
                        body: JSON.stringify({ q: val })
                    })
                    .then(res => res.json())
                    .then(data => {
                        datalistEl.innerHTML = "";
                        data.forEach(prov => {
                            const opt = document.createElement("option");
                            opt.value = prov.provedor;
                            opt.text = prov.nombre;
                            datalistEl.appendChild(opt);
                        });
                    })
                    .catch(err => console.error("Error al buscar proveedores:", err));
                }, 300);
            });
        }

        inicializarBuscadorAsincrono(inputSearch, datalistProveedores, hiddenNit, function(nit) {
            if (!nit) {
                tableWrapper.style.display = "none";
                document.getElementById("operacionFacturasWrapper").style.display = "none";
                document.getElementById("seccionFiltrosCol").style.display = "none";
                document.getElementById("filtroPlaceholder").style.display = "flex";
                noFacturas.style.display = "block";
                noFacturas.innerHTML = `<span class="icon">🔍</span><span>Seleccione un proveedor en el panel superior para visualizar su listado de facturas.</span>`;
                return;
            }
            document.getElementById("seccionFiltrosCol").style.display = "block";
            document.getElementById("filtroPlaceholder").style.display = "none";
            cargarFacturas();
        });

        // =====================================================================
        // 2. NAVEGACIÓN ENTRE PESTAÑAS (TABS)
        // =====================================================================
        const tabRegistrar = document.getElementById("tab_registrar_pagos");
        const tabHistorial = document.getElementById("tab_historial_pagos");
        const tabBuscarFactura = document.getElementById("tab_buscar_factura");
        const divRegistrar = document.getElementById("seccion_registrar_pagos");
        const divHistorial = document.getElementById("seccion_historial_pagos");
        const divBuscarFactura = document.getElementById("seccion_buscar_factura");
        
        tabRegistrar.addEventListener("click", function() {
            tabRegistrar.classList.remove("inactive-tab-btn");
            tabRegistrar.classList.add("active-tab-btn");
            tabHistorial.classList.remove("active-tab-btn");
            tabHistorial.classList.add("inactive-tab-btn");
            tabBuscarFactura.classList.remove("active-tab-btn");
            tabBuscarFactura.classList.add("inactive-tab-btn");
            
            divRegistrar.style.display = "block";
            divHistorial.style.display = "none";
            divBuscarFactura.style.display = "none";
        });
        
        tabHistorial.addEventListener("click", function() {
            tabHistorial.classList.remove("inactive-tab-btn");
            tabHistorial.classList.add("active-tab-btn");
            tabRegistrar.classList.remove("active-tab-btn");
            tabRegistrar.classList.add("inactive-tab-btn");
            tabBuscarFactura.classList.remove("active-tab-btn");
            tabBuscarFactura.classList.add("inactive-tab-btn");
            
            divRegistrar.style.display = "none";
            divHistorial.style.display = "block";
            divBuscarFactura.style.display = "none";
            
            cargarHistorialComprobantes();
        });

        tabBuscarFactura.addEventListener("click", function() {
            tabBuscarFactura.classList.remove("inactive-tab-btn");
            tabBuscarFactura.classList.add("active-tab-btn");
            tabRegistrar.classList.remove("active-tab-btn");
            tabRegistrar.classList.add("inactive-tab-btn");
            tabHistorial.classList.remove("active-tab-btn");
            tabHistorial.classList.add("inactive-tab-btn");
            
            divRegistrar.style.display = "none";
            divHistorial.style.display = "none";
            divBuscarFactura.style.display = "block";
            
            setTimeout(() => {
                document.getElementById("buscar_nro_factura").focus();
            }, 100);
        });

        // =====================================================================
        // 3. CONSULTAR HISTORIAL DE COMPROBANTES VIA AJAX
        // =====================================================================
        const btnBuscarHistorial = document.getElementById("btnBuscarHistorial");
        const btnExportarExcel = document.getElementById("btnExportarExcel");
        const loadingHistorial = document.getElementById("loadingHistorial");
        const noHistorial = document.getElementById("noHistorial");
        const cuerpoHistorialWrapper = document.getElementById("cuerpoHistorialWrapper");
        const cuerpoHistorial = document.getElementById("cuerpoHistorial");
        
        const histInputSearch = document.getElementById("hist_proveedor_search");
        const histHiddenNit = document.getElementById("hist_nit");
        const histDatalist = document.getElementById("hist_proveedores_list");
        inicializarBuscadorAsincrono(histInputSearch, histDatalist, histHiddenNit);

        btnBuscarHistorial.addEventListener("click", cargarHistorialComprobantes);
        
        function cargarHistorialComprobantes() {
            loadingHistorial.style.display = "block";
            noHistorial.style.display = "none";
            cuerpoHistorialWrapper.style.display = "none";
            cuerpoHistorial.innerHTML = "";
            
            const payload = {
                fi: document.getElementById("hist_fecha_inicio").value,
                ff: document.getElementById("hist_fecha_fin").value,
                bodega: document.getElementById("hist_bodega").value,
                proveedor: document.getElementById("hist_nit").value,
                consecutivo: document.getElementById("hist_consecutivo").value
            };
            
            fetch("{{ url('api/proveedores/pagos-realizados') }}", {
                method: "POST",
                headers: { "Content-Type": "application/json", "X-CSRF-TOKEN": "{{ csrf_token() }}" },
                body: JSON.stringify(payload)
            })
            .then(res => res.json())
            .then(data => {
                loadingHistorial.style.display = "none";
                if (data.status === "ok" && data.pagos.length > 0) {
                    cuerpoHistorialWrapper.style.display = "block";
                    data.pagos.forEach(pago => {
                        const tr = document.createElement("tr");
                        const f = String(pago.fecha || '').split(' ')[0].split('-');
                        const fechaFormateada = f.length === 3 ? `${f[2]}/${f[1]}/${f[0].slice(2)}` : pago.fecha;
                        tr.innerHTML = `
                            <td style="font-weight:700; color:#1e293b;">#${pago.consecutivo}</td>
                            <td style="font-weight:700; color:#475569;">#${pago.factura_nro}</td>
                            <td style="color:#475569;">${fechaFormateada}</td>
                            <td style="font-weight:600; color:#0f172a;">${pago.nit} - ${pago.nombre_proveedor}</td>
                            <td><span style="background:#e2e8f0; color:#475569; padding:2px 8px; border-radius:12px; font-size:11px; font-weight:700;">${pago.nombre_bodega}</span></td>
                            <td class="text-right" style="font-weight:600; color:#2563eb;">$${formatNumber(pago.total_bruto)}</td>
                            <td class="text-right" style="color:#16a34a;">$${formatNumber(pago.total_descuento)}</td>
                            <td class="text-right" style="color:#8b5cf6;">$${formatNumber(pago.total_aporte || 0)}</td>
                            <td class="text-right" style="color:#dc2626;">$${formatNumber(pago.total_retencion)}</td>
                            <td class="text-right" style="font-weight:800; background-color:#f1f5f9; color:#0f172a;">$${formatNumber(pago.total_neto)}</td>
                            <td style="text-align:center;">
                                <div class="d-flex gap-1 justify-content-center">
                                    <button type="button" class="btn btn-sm btn-primary btn-descargar-pdf" data-consecutivo="${pago.consecutivo}" style="border-radius:6px; padding:3px 10px; font-size:11px; font-weight:700; background-color:#3b82f6; border-color:#3b82f6;">📑 PDF</button>
                                    <button type="button" class="btn btn-sm btn-danger btn-anular-egreso" data-consecutivo="${pago.consecutivo}" data-factura="${pago.factura_nro}" style="border-radius:6px; padding:3px 10px; font-size:11px; font-weight:700; background-color:#ef4444; border-color:#ef4444;">🗑️ Anular</button>
                                </div>
                            </td>
                        `;
                        cuerpoHistorial.appendChild(tr);
                    });
                    document.querySelectorAll(".btn-descargar-pdf").forEach(btn => {
                        btn.addEventListener("click", function() {
                            window.open("{{ url('contabilidad/pago-proveedores/pdf') }}/" + this.getAttribute("data-consecutivo"), "_blank");
                        });
                    });
                    document.querySelectorAll(".btn-anular-egreso").forEach(btn => {
                        btn.addEventListener("click", function() {
                            const consecutivo = this.getAttribute("data-consecutivo");
                            const factura = this.getAttribute("data-factura");
                            anularComprobante(consecutivo, factura, cargarHistorialComprobantes);
                        });
                    });
                } else {
                    noHistorial.style.display = "block";
                    noHistorial.innerHTML = `<span class="icon">🎉</span><span>No se encontraron comprobantes con los filtros seleccionados.</span>`;
                }
            })
            .catch(err => {
                loadingHistorial.style.display = "none";
                noHistorial.style.display = "block";
                noHistorial.innerHTML = `<span class="icon">⚠️</span><span>Error al cargar historial. Reintente.</span>`;
            });
        }
        
        // =====================================================================
        // 4. EXPORTAR HISTORIAL A EXCEL
        // =====================================================================
        btnExportarExcel.addEventListener("click", function() {
            const params = new URLSearchParams({
                fi: document.getElementById("hist_fecha_inicio").value,
                ff: document.getElementById("hist_fecha_fin").value,
                bodega: document.getElementById("hist_bodega").value,
                proveedor: document.getElementById("hist_nit").value,
                consecutivo: document.getElementById("hist_consecutivo").value
            });
            window.location.href = "{{ url('contabilidad/pago-proveedores/excel') }}?" + params.toString();
        });

        // =====================================================================
        // 4.5 BUSCAR PAGOS POR FACTURA ESPECÍFICA VIA AJAX
        // =====================================================================
        const btnBuscarPagosFactura = document.getElementById("btnBuscarPagosFactura");
        const inputBuscarNroFactura = document.getElementById("buscar_nro_factura");
        const loadingPagosFactura = document.getElementById("loadingPagosFactura");
        const noPagosFactura = document.getElementById("noPagosFactura");
        const cuerpoPagosFacturaWrapper = document.getElementById("cuerpoPagosFacturaWrapper");
        const cuerpoPagosFactura = document.getElementById("cuerpoPagosFactura");
        
        const resumenSaldosFactura = document.getElementById("resumenSaldosFactura");
        const resFacturaProveedor = document.getElementById("res_factura_proveedor");
        const resFacturaTotal = document.getElementById("res_factura_total");
        const resFacturaAbonado = document.getElementById("res_factura_abonado");
        const resFacturaPendiente = document.getElementById("res_factura_pendiente");
        const lblFacturaBuscada = document.getElementById("lbl_factura_buscada");

        btnBuscarPagosFactura.addEventListener("click", cargarPagosPorFactura);
        inputBuscarNroFactura.addEventListener("keypress", function(e) {
            if (e.key === "Enter") {
                e.preventDefault();
                cargarPagosPorFactura();
            }
        });

        function cargarPagosPorFactura() {
            const facturaNro = inputBuscarNroFactura.value.trim();
            if (!facturaNro) {
                Swal.fire({ title: 'Ingrese un número', text: 'Debe escribir un número de factura para buscar.', icon: 'warning', confirmButtonColor: '#3b82f6' });
                return;
            }

            loadingPagosFactura.style.display = "block";
            noPagosFactura.style.display = "none";
            cuerpoPagosFacturaWrapper.style.display = "none";
            resumenSaldosFactura.style.display = "none";
            cuerpoPagosFactura.innerHTML = "";
            lblFacturaBuscada.innerText = "";

            fetch("{{ url('api/proveedores/pagos-por-factura') }}", {
                method: "POST",
                headers: { "Content-Type": "application/json", "X-CSRF-TOKEN": "{{ csrf_token() }}" },
                body: JSON.stringify({ factura_nro: facturaNro })
            })
            .then(res => res.json())
            .then(data => {
                loadingPagosFactura.style.display = "none";
                if (data.status === "ok") {
                    lblFacturaBuscada.innerText = `[${facturaNro}]`;
                    
                    // Renderizar resumen si la factura fue encontrada en factcompra
                    if (data.factura) {
                        resumenSaldosFactura.style.display = "block";
                        resFacturaProveedor.innerText = `${data.factura.nit} - ${data.factura.nombre_proveedor}`;
                        resFacturaTotal.innerText = `$${formatNumber(data.factura.total)}`;
                        resFacturaAbonado.innerText = `$${formatNumber(data.factura.abonado)}`;
                        resFacturaPendiente.innerText = `$${formatNumber(data.factura.pendiente)}`;
                    } else {
                        resumenSaldosFactura.style.display = "block";
                        resFacturaProveedor.innerText = "No registrada en factcompra";
                        resFacturaTotal.innerText = "$0.00";
                        resFacturaAbonado.innerText = "$0.00";
                        resFacturaPendiente.innerText = "$0.00";
                    }

                    if (data.pagos && data.pagos.length > 0) {
                        cuerpoPagosFacturaWrapper.style.display = "block";
                        data.pagos.forEach(pago => {
                            const tr = document.createElement("tr");
                            const f = String(pago.fecha || '').split(' ')[0].split('-');
                            const fechaFormateada = f.length === 3 ? `${f[2]}/${f[1]}/${f[0].slice(2)}` : pago.fecha;

                            tr.innerHTML = `
                                <td style="font-weight:700; color:#1e293b;">#${pago.consecutivo}</td>
                                <td style="color:#475569;">${fechaFormateada}</td>
                                <td style="color:#475569; font-weight:600;">${pago.cta_proveedor}</td>
                                <td class="text-right" style="font-weight:600; color:#2563eb;">$${formatNumber(pago.abono_bruto)}</td>
                                <td class="text-right" style="color:#16a34a;">$${formatNumber(pago.descuento)}</td>
                                <td class="text-right" style="color:#8b5cf6;">$${formatNumber(pago.aporte || 0)}</td>
                                <td class="text-right" style="color:#dc2626;">$${formatNumber(pago.retencion)}</td>
                                <td class="text-right" style="font-weight:800; background-color:#f1f5f9; color:#0f172a;">$${formatNumber(pago.neto)}</td>
                                <td style="max-width: 250px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">${pago.observacion || ''}</td>
                                <td style="text-align:center;">
                                    <div class="d-flex gap-1 justify-content-center">
                                        <button type="button" class="btn btn-sm btn-primary btn-descargar-pdf-abono" data-consecutivo="${pago.consecutivo}" style="border-radius:6px; padding:3px 10px; font-size:11px; font-weight:700; background-color:#3b82f6; border-color:#3b82f6;">📑 PDF</button>
                                        <button type="button" class="btn btn-sm btn-danger btn-anular-egreso-abono" data-consecutivo="${pago.consecutivo}" style="border-radius:6px; padding:3px 10px; font-size:11px; font-weight:700; background-color:#ef4444; border-color:#ef4444;">🗑️ Anular</button>
                                    </div>
                                </td>
                            `;
                            cuerpoPagosFactura.appendChild(tr);
                        });

                        document.querySelectorAll(".btn-descargar-pdf-abono").forEach(btn => {
                            btn.addEventListener("click", function() {
                                window.open("{{ url('contabilidad/pago-proveedores/pdf') }}/" + this.getAttribute("data-consecutivo"), "_blank");
                            });
                        });
                        document.querySelectorAll(".btn-anular-egreso-abono").forEach(btn => {
                            btn.addEventListener("click", function() {
                                const consecutivo = this.getAttribute("data-consecutivo");
                                anularComprobante(consecutivo, facturaNro, cargarPagosPorFactura);
                            });
                        });
                    } else {
                        cuerpoPagosFacturaWrapper.style.display = "none";
                        noPagosFactura.style.display = "block";
                        noPagosFactura.innerHTML = `<span class="icon">🎉</span><span>No se encontraron abonos registrados para la factura #${facturaNro} en contabilidad.</span>`;
                    }
                } else {
                    noPagosFactura.style.display = "block";
                    noPagosFactura.innerHTML = `<span class="icon">⚠️</span><span>${data.message || 'Error al buscar pagos.'}</span>`;
                }
            })
            .catch(err => {
                loadingPagosFactura.style.display = "none";
                noPagosFactura.style.display = "block";
                noPagosFactura.innerHTML = `<span class="icon">⚠️</span><span>Ocurrió un error de red o servidor. Reintente.</span>`;
                console.error(err);
            });
        }

        // =====================================================================
        // 5. LÓGICA DE REGISTRO DE PAGOS ORIGINAL RECONSTRUIDA
        // =====================================================================
        function cargarFacturas() {
            const nit = hiddenNit.value;
            if (!nit) return;

            loadingFacturas.style.display = "block";
            noFacturas.style.display = "none";
            tableWrapper.style.display = "none";
            document.getElementById("operacionFacturasWrapper").style.display = "none";
            cuerpoFacturas.innerHTML = "";

            const payload = {
                nit: nit,
                fi: document.getElementById("filtro_fecha_inicio").value,
                ff: document.getElementById("filtro_fecha_fin").value,
                factura: document.getElementById("filtro_factura").value,
                estado: document.getElementById("filtro_estado").value
            };

            fetch("{{ url('api/proveedores/facturas-pendientes') }}", {
                method: "POST",
                headers: { "Content-Type": "application/json", "X-CSRF-TOKEN": "{{ csrf_token() }}" },
                body: JSON.stringify(payload)
            })
            .then(res => res.json())
            .then(data => {
                loadingFacturas.style.display = "none";
                if (data.status === "ok" && data.facturas.length > 0) {
                    invoicesAvailable = data.facturas;
                    document.getElementById("operacionFacturasWrapper").style.display = "block";
                    resetPanelConfigPago();
                    renderSelectorFacturas("");

                    const savedLote = localStorage.getItem(`pago_terceros_lote_${nit}`);
                    loteFacturas = savedLote ? JSON.parse(savedLote) : [];
                    loteFacturas.forEach(it => {
                        if (!it.cta_descuento) it.cta_descuento = document.getElementById("cta_descuento_item") ? document.getElementById("cta_descuento_item").value : "421040";
                        if (!it.cta_aporte) it.cta_aporte = document.getElementById("cta_aporte_item") ? document.getElementById("cta_aporte_item").value : "{{ $defaultAporteCta }}";
                        if (!it.cta_proveedor) it.cta_proveedor = document.getElementById("cta_proveedor_item") ? document.getElementById("cta_proveedor_item").value : "220501";
                        if (!it.cta_activo) it.cta_activo = document.getElementById("cta_activo_item") ? document.getElementById("cta_activo_item").value : "111005";
                    });
                    renderTablaLote();
                } else {
                    noFacturas.style.display = "block";
                    noFacturas.innerHTML = `<span class="icon">🎉</span><span>No se encontraron facturas con los filtros seleccionados.</span>`;
                }
            })
            .catch(err => {
                loadingFacturas.style.display = "none";
                noFacturas.style.display = "block";
                noFacturas.innerHTML = `<span class="icon">⚠️</span><span>Ocurrió un error al cargar las facturas. Por favor reintente.</span>`;
                console.error(err);
            });
        }

        function renderSelectorFacturas(filterQuery) {
            const selector = document.getElementById("selector_factura");
            selector.innerHTML = "";
            const query = filterQuery.trim().toLowerCase();
            const filtered = invoicesAvailable.filter(fact => fact.factura.toString().toLowerCase().includes(query));

            if (filtered.length > 0) {
                filtered.forEach(fact => {
                    const opt = document.createElement("option");
                    const fechaLimpia = fact.fecha ? String(fact.fecha).split(' ')[0] : '';
                    const partesFecha = fechaLimpia.split('-');
                    const fechaCorta = partesFecha.length === 3
                        ? `${partesFecha[2]}/${partesFecha[1]}/${partesFecha[0].slice(2)}`
                        : fechaLimpia;

                    opt.value = fact.factura;
                    opt.setAttribute("data-bodega",     fact.bodega);
                    opt.setAttribute("data-total",      fact.total);
                    opt.setAttribute("data-abonado",    fact.abonado);
                    opt.setAttribute("data-pendiente",  fact.pendiente);
                    opt.setAttribute("data-devolucion", fact.devolucion || 0);
                    opt.setAttribute("data-fecha",      fechaLimpia);
                    opt.setAttribute("data-credito",    fact.credito || 0);

                    const esContado    = parseFloat(fact.credito || 0) === 0;
                    const devolucion   = parseFloat(fact.devolucion || 0);
                    const tipoLabel    = esContado ? "CONTADO" : "CRÉDITO";
                    let valorLabel     = esContado
                        ? `$${formatNumber(fact.total)}`
                        : `Pend $${formatNumber(fact.pendiente)}`;
                    if (devolucion > 0 && !esContado) {
                        valorLabel += ` (Dev: -$${formatNumber(devolucion)})`;
                    }

                    opt.text = `${fact.factura}  ·  ${fechaCorta}  ·  ${tipoLabel}  ·  ${valorLabel}`;
                    opt.style.padding    = "5px 10px";
                    opt.style.fontSize   = "12px";
                    opt.style.fontWeight = "600";

                    if (esContado) {
                        opt.style.color           = "#92400e";
                        opt.style.backgroundColor = "#fff7ed";
                    }
                    selector.appendChild(opt);
                });
            } else {
                const opt = document.createElement("option");
                opt.disabled = true;
                opt.text = "— No se encontraron facturas —";
                selector.appendChild(opt);
            }
        }

        document.getElementById("buscar_factura_select").addEventListener("input", function() {
            renderSelectorFacturas(this.value);
        });

        document.getElementById("selector_factura").addEventListener("change", function() {
            const opt = this.options[this.selectedIndex];
            if (!opt || opt.disabled) return;

            const facturaId  = opt.value;
            const total     = parseFloat(opt.getAttribute("data-total"))    || 0;
            const abonado   = parseFloat(opt.getAttribute("data-abonado"))  || 0;
            const pendiente = parseFloat(opt.getAttribute("data-pendiente"))|| 0;
            const credito   = parseFloat(opt.getAttribute("data-credito"))  || 0;
            const esContado = credito === 0;

            const realMax = esContado ? total : (pendiente > 0 ? pendiente : total);
            const abonosAcumulados = loteFacturas
                .filter(item => item.factura === facturaId)
                .reduce((sum, item) => sum + item.abono, 0);
            const saldoDisponible = Math.max(realMax - abonosAcumulados, 0);

            const devolucion = parseFloat(opt.getAttribute("data-devolucion")) || 0;
            document.getElementById("det_total_factura").innerText      = `$${formatNumber(total)}`;
            document.getElementById("det_saldo_abonado").innerText      = `$${formatNumber(abonado + abonosAcumulados)}`;
            document.getElementById("det_saldo_devolucion").innerText   = `$${formatNumber(devolucion)}`;
            document.getElementById("det_saldo_pendiente").innerText    = `$${formatNumber(saldoDisponible)}`;

            const alertaContado = document.getElementById("alertaContado");
            if (esContado) {
                alertaContado.style.display = "flex";
                document.getElementById("valor_pagar_item").value = saldoDisponible.toFixed(2);
                document.getElementById("valor_pagar_item").setAttribute("readonly", true);
                document.getElementById("descuento_item").value = "0";
                if (document.getElementById("aporte_item")) document.getElementById("aporte_item").value = "0";
                document.getElementById("retencion_item").value = "0";
                actualizarNetoPreview();
            } else {
                alertaContado.style.display = "none";
                document.getElementById("valor_pagar_item").removeAttribute("readonly");
                document.getElementById("retencion_item").removeAttribute("readonly");
                const valorPagar = document.getElementById("valor_pagar_item");
                valorPagar.value = saldoDisponible.toFixed(2);
                document.getElementById("descuento_item").value = "0";
                if (document.getElementById("aporte_item")) document.getElementById("aporte_item").value = "0";
                document.getElementById("retencion_item").value = "0";
                actualizarNetoPreview();
                valorPagar.focus();
                valorPagar.select();
            }
        });

        function actualizarNetoPreview() {
            const abono     = parseFloat(document.getElementById("valor_pagar_item").value) || 0;
            const desc      = parseFloat(document.getElementById("descuento_item").value)   || 0;
            const aporte    = parseFloat(document.getElementById("aporte_item") ? document.getElementById("aporte_item").value : 0) || 0;
            const retencion = parseFloat(document.getElementById("retencion_item").value)   || 0;
            const neto      = Math.max(abono - desc + aporte - retencion, 0);

            const hasDeducciones = desc > 0 || aporte > 0 || retencion > 0;
            document.getElementById("wrapperNetoPreview").style.display  = hasDeducciones ? "block" : "none";
            document.getElementById("wrapperTipoRetencion").style.display = (retencion > 0) ? "block" : "none";

            const wrapperDesc = document.getElementById("wrapperCtaDescuento");
            if (wrapperDesc) wrapperDesc.style.display = (desc > 0) ? "block" : "none";

            const wrapperAporte = document.getElementById("wrapperCtaAporte");
            if (wrapperAporte) wrapperAporte.style.display = (aporte > 0) ? "block" : "none";

            document.getElementById("neto_preview").innerText = `$${formatNumber(neto)}`;
        }

        ["valor_pagar_item", "descuento_item", "aporte_item", "retencion_item"].forEach(id => {
            const el = document.getElementById(id);
            if (el) {
                el.addEventListener("input",  actualizarNetoPreview);
                el.addEventListener("change", actualizarNetoPreview);
            }
        });

        document.getElementById("btnAgregarFacturaLote").addEventListener("click", function() {
            const selector = document.getElementById("selector_factura");
            const index    = selector.selectedIndex;
            if (index === -1) {
                Swal.fire({ title: 'Selección Requerida', text: 'Seleccione una factura de la lista antes de agregar.', icon: 'warning', confirmButtonColor: '#3b82f6' });
                return;
            }

            const opt = selector.options[index];
            if (opt.disabled) return;

            const facturaId  = opt.value;
            const fecha      = opt.getAttribute("data-fecha");
            const bodega     = parseInt(opt.getAttribute("data-bodega"));
            const total      = parseFloat(opt.getAttribute("data-total"));
            const abonado    = parseFloat(opt.getAttribute("data-abonado"));
            const pendiente  = parseFloat(opt.getAttribute("data-pendiente")) || 0;
            const credito    = parseFloat(opt.getAttribute("data-credito"))   || 0;
            const esContado  = credito === 0;

            const abono      = parseFloat(document.getElementById("valor_pagar_item").value)  || 0;
            const descuento  = parseFloat(document.getElementById("descuento_item").value)    || 0;
            const aporte     = parseFloat(document.getElementById("aporte_item") ? document.getElementById("aporte_item").value : 0) || 0;
            const retencion  = parseFloat(document.getElementById("retencion_item").value)    || 0;
            const tipoRet    = document.getElementById("tipo_retencion_item").value || "RTF";
            const neto       = Math.max(abono - descuento + aporte - retencion, 0);

            if (abono <= 0) {
                Swal.fire({ title: 'Valor inválido', text: 'El valor a pagar debe ser mayor a cero.', icon: 'warning', confirmButtonColor: '#3b82f6' });
                return;
            }

            const realMax = esContado ? total : (pendiente > 0 ? pendiente : total);
            const abonosAcumuladosLote = loteFacturas
                .filter(item => item.factura === facturaId)
                .reduce((sum, item) => sum + item.abono, 0);
            const saldoDisponible = Math.max(realMax - abonosAcumuladosLote, 0);

            if (saldoDisponible <= 0.001) {
                Swal.fire({ title: 'Factura Totalmente Cubierta', text: 'Esta factura ya tiene cubierto todo su valor pendiente en este comprobante.', icon: 'warning', confirmButtonColor: '#3b82f6' });
                return;
            }

            if (abono > saldoDisponible + 0.01) {
                Swal.fire({ title: 'Valor Excedido', text: `El valor ingresado ($${formatNumber(abono)}) supera el saldo disponible para esta factura ($${formatNumber(saldoDisponible)}).`, icon: 'warning', confirmButtonColor: '#3b82f6' });
                return;
            }

            if (descuento + retencion > abono + 0.01) {
                Swal.fire({ title: 'Error de Distribución', text: 'La suma de descuento y retención no puede superar el abono bruto.', icon: 'error', confirmButtonColor: '#ef4444' });
                return;
            }

            loteFacturas.push({
                factura: facturaId,
                fecha: fecha,
                bodega: bodega,
                total: total,
                abonado: abonado,
                pendiente: pendiente,
                esContado: esContado,
                abono: abono,
                descuento: descuento,
                aporte: aporte,
                retencion: retencion,
                tipo_retencion: retencion > 0 ? tipoRet : null,
                neto: neto,
                cta_proveedor: document.getElementById("cta_proveedor_item").value,
                cta_activo: document.getElementById("cta_activo_item").value,
                cta_descuento: document.getElementById("cta_descuento_item").value,
                cta_aporte: document.getElementById("cta_aporte_item") ? document.getElementById("cta_aporte_item").value : "{{ $defaultAporteCta }}",
                cta_retefuente: document.getElementById("cta_retefuente_item").value,
                cta_reteica: document.getElementById("cta_reteica_item").value,
                cta_reteiva: document.getElementById("cta_reteiva_item").value
            });

            localStorage.setItem(`pago_terceros_lote_${hiddenNit.value}`, JSON.stringify(loteFacturas));
            renderTablaLote();

            document.getElementById("buscar_factura_select").value = "";
            renderSelectorFacturas("");
            resetPanelConfigPago();
        });

        function resetPanelConfigPago() {
            document.getElementById("det_total_factura").innerText      = "$0.00";
            document.getElementById("det_saldo_abonado").innerText      = "$0.00";
            document.getElementById("det_saldo_devolucion").innerText   = "$0.00";
            document.getElementById("det_saldo_pendiente").innerText    = "$0.00";
            document.getElementById("valor_pagar_item").value = "";
            document.getElementById("valor_pagar_item").removeAttribute("readonly");
            document.getElementById("descuento_item").value  = "0";
            if (document.getElementById("aporte_item")) document.getElementById("aporte_item").value  = "0";
            document.getElementById("retencion_item").value  = "0";
            document.getElementById("retencion_item").removeAttribute("readonly");
            document.getElementById("wrapperTipoRetencion").style.display = "none";
            document.getElementById("wrapperNetoPreview").style.display   = "none";
            document.getElementById("alertaContado").style.display = "none";
            
            const wrapperDesc = document.getElementById("wrapperCtaDescuento");
            if (wrapperDesc) wrapperDesc.style.display = "none";
            const wrapperAporte = document.getElementById("wrapperCtaAporte");
            if (wrapperAporte) wrapperAporte.style.display = "none";
        }

        function renderTablaLote() {
            cuerpoFacturas.innerHTML = "";
            let totalBruto = 0;
            let totalDescuento = 0;
            let totalAporte = 0;
            let totalNeto  = 0;

            if (loteFacturas.length > 0) {
                tableWrapper.style.display = "block";

                loteFacturas.forEach((item, idx) => {
                    totalBruto += item.abono;
                    totalDescuento += (item.descuento || 0);
                    totalAporte += (item.aporte || 0);
                    totalNeto  += item.neto;

                    const tipoBadge = item.esContado
                        ? `<span style="background:#fff7ed;color:#c2410c;padding:2px 8px;border-radius:12px;font-size:10px;font-weight:700;">CONTADO</span>`
                        : `<span style="background:#eef2ff;color:#4f46e5;padding:2px 8px;border-radius:12px;font-size:10px;font-weight:700;">CRÉDITO</span>`;

                    const tr = document.createElement("tr");
                    const fp = String(item.fecha || '').split(' ')[0].split('-');
                    const fechaFila = fp.length === 3
                        ? `${fp[2]}/${fp[1]}/${fp[0].slice(2)}`
                        : item.fecha;

                    tr.innerHTML = `
                        <td style="font-weight:700;color:#1e293b;">${item.factura}</td>
                        <td style="color:#475569;">${fechaFila}</td>
                        <td>${tipoBadge}</td>
                        <td style="font-weight:600;">$${formatNumber(item.total)}</td>
                        <td><span class="badge-pending">$${formatNumber(item.pendiente)}</span></td>
                        <td style="font-weight:700;color:#2563eb;">$${formatNumber(item.abono)}</td>
                        <td style="color:#16a34a;font-weight:600;">$${formatNumber(item.descuento)}</td>
                        <td style="color:#8b5cf6;font-weight:600;">$${formatNumber(item.aporte || 0)}</td>
                        <td style="font-weight:800;background-color:#f1f5f9;color:#0f172a;">$${formatNumber(item.neto)}</td>
                        <td style="text-align:center;">
                            <button type="button" class="btn btn-sm btn-outline-danger btn-quitar-item" data-index="${idx}" style="border-radius:6px;padding:2px 8px;">🗑️</button>
                        </td>
                    `;
                    cuerpoFacturas.appendChild(tr);

                    // Fila de Cuentas Contables Editable
                    const trCuentas = document.createElement("tr");
                    trCuentas.style.backgroundColor = "#f8fafc";
                    
                    let cuentasHtml = `
                        <td colspan="10" style="padding: 6px 12px; border-bottom: 2px solid #e2e8f0;">
                            <div style="display:flex; flex-wrap:wrap; gap:10px; font-size:10px; align-items:center;">
                                <strong style="color:#475569; display:flex; align-items:center; gap:4px;">
                                    <span>⚙️</span> Contabilización:
                                </strong>
                                
                                <div style="display:flex; align-items:center; gap:4px;">
                                    <span style="color:#64748b; font-weight:700;">Prov / Débito:</span>
                                    <select class="form-select form-select-sm cta-edit-proveedor" data-index="${idx}" style="font-size:10px; padding:2px 6px; width:160px; max-width:200px; height:auto; border-radius:4px;">
                                        @foreach($cuentas_proveedor as $cta)
                                            <option value="{{ $cta->codeC }}" ${item.cta_proveedor == '{{ $cta->codeC }}' ? 'selected' : ''}>{{ $cta->codeC }} - {{ $cta->NombreCuenta }}</option>
                                        @endforeach
                                    </select>
                                </div>`;

                    if (item.neto > 0) {
                        cuentasHtml += `
                                <div style="display:flex; align-items:center; gap:4px;">
                                    <span style="color:#2563eb; font-weight:700;">Pago (11%):</span>
                                    <select class="form-select form-select-sm cta-edit-activo" data-index="${idx}" style="font-size:10px; padding:2px 6px; width:160px; max-width:200px; height:auto; border-radius:4px;">
                                        @foreach($cuentas_activo as $cta)
                                            <option value="{{ $cta->codeC }}" ${item.cta_activo == '{{ $cta->codeC }}' ? 'selected' : ''}>{{ $cta->codeC }} - {{ $cta->NombreCuenta }}</option>
                                        @endforeach
                                    </select>
                                </div>`;
                    }

                    if (item.descuento > 0) {
                        cuentasHtml += `
                                <div style="display:flex; align-items:center; gap:4px;">
                                    <span style="color:#16a34a; font-weight:700;">Dto / Ajuste:</span>
                                    <select class="form-select form-select-sm cta-edit-descuento" data-index="${idx}" style="font-size:10px; padding:2px 6px; width:160px; max-width:200px; height:auto; border-radius:4px;">
                                        @foreach($cuentas_descuento as $cta)
                                            <option value="{{ $cta->codeC }}" ${item.cta_descuento == '{{ $cta->codeC }}' ? 'selected' : ''}>{{ $cta->codeC }} - {{ $cta->NombreCuenta }}</option>
                                        @endforeach
                                    </select>
                                </div>`;
                    }

                    if (item.aporte > 0) {
                        cuentasHtml += `
                                <div style="display:flex; align-items:center; gap:4px;">
                                    <span style="color:#8b5cf6; font-weight:700;">Aportes:</span>
                                    <select class="form-select form-select-sm cta-edit-aporte" data-index="${idx}" style="font-size:10px; padding:2px 6px; width:160px; max-width:200px; height:auto; border-radius:4px;">
                                        @foreach($cuentas_aporte as $cta)
                                            <option value="{{ $cta->codeC }}" ${item.cta_aporte == '{{ $cta->codeC }}' ? 'selected' : ''}>{{ $cta->codeC }} - {{ $cta->NombreCuenta }}</option>
                                        @endforeach
                                    </select>
                                </div>`;
                    }

                    if (item.retencion > 0) {
                        cuentasHtml += `
                                <div style="display:flex; align-items:center; gap:4px;">
                                    <span style="color:#dc2626; font-weight:700;">Ret (${item.tipo_retencion}):</span>
                                    <select class="form-select form-select-sm cta-edit-retencion" data-index="${idx}" style="font-size:10px; padding:2px 6px; width:160px; max-width:200px; height:auto; border-radius:4px;">`;
                                    
                        if (item.tipo_retencion === 'RTF') {
                            cuentasHtml += `
                                        @foreach($cuentas_retefuente as $cta)
                                            <option value="{{ $cta->codeC }}" ${item.cta_retefuente == '{{ $cta->codeC }}' ? 'selected' : ''}>{{ $cta->codeC }} - {{ $cta->NombreCuenta }}</option>
                                        @endforeach`;
                        }
                        if (item.tipo_retencion === 'RTIC') {
                            cuentasHtml += `
                                        @foreach($cuentas_reteica as $cta)
                                            <option value="{{ $cta->codeC }}" ${item.cta_reteica == '{{ $cta->codeC }}' ? 'selected' : ''}>{{ $cta->codeC }} - {{ $cta->NombreCuenta }}</option>
                                        @endforeach`;
                        }
                        if (item.tipo_retencion === 'RTIV') {
                            cuentasHtml += `
                                        @foreach($cuentas_reteiva as $cta)
                                            <option value="{{ $cta->codeC }}" ${item.cta_reteiva == '{{ $cta->codeC }}' ? 'selected' : ''}>{{ $cta->codeC }} - {{ $cta->NombreCuenta }}</option>
                                        @endforeach`;
                        }
                        cuentasHtml += `</select></div>`;
                    }

                    cuentasHtml += `</div></td>`;
                    trCuentas.innerHTML = cuentasHtml;
                    cuerpoFacturas.appendChild(trCuentas);
                });

                // Attach change events to selects
                document.querySelectorAll(".cta-edit-proveedor").forEach(sel => sel.addEventListener("change", function() {
                    const idx = this.getAttribute("data-index");
                    loteFacturas[idx].cta_proveedor = this.value;
                    localStorage.setItem(`pago_terceros_lote_${hiddenNit.value}`, JSON.stringify(loteFacturas));
                }));
                document.querySelectorAll(".cta-edit-activo").forEach(sel => sel.addEventListener("change", function() {
                    const idx = this.getAttribute("data-index");
                    loteFacturas[idx].cta_activo = this.value;
                    localStorage.setItem(`pago_terceros_lote_${hiddenNit.value}`, JSON.stringify(loteFacturas));
                }));
                document.querySelectorAll(".cta-edit-descuento").forEach(sel => sel.addEventListener("change", function() {
                    const idx = this.getAttribute("data-index");
                    loteFacturas[idx].cta_descuento = this.value;
                    localStorage.setItem(`pago_terceros_lote_${hiddenNit.value}`, JSON.stringify(loteFacturas));
                }));
                document.querySelectorAll(".cta-edit-aporte").forEach(sel => sel.addEventListener("change", function() {
                    const idx = this.getAttribute("data-index");
                    loteFacturas[idx].cta_aporte = this.value;
                    localStorage.setItem(`pago_terceros_lote_${hiddenNit.value}`, JSON.stringify(loteFacturas));
                }));
                document.querySelectorAll(".cta-edit-retencion").forEach(sel => sel.addEventListener("change", function() {
                    const idx = this.getAttribute("data-index");
                    const tipo = loteFacturas[idx].tipo_retencion;
                    if (tipo === 'RTF') loteFacturas[idx].cta_retefuente = this.value;
                    if (tipo === 'RTIC') loteFacturas[idx].cta_reteica = this.value;
                    if (tipo === 'RTIV') loteFacturas[idx].cta_reteiva = this.value;
                    localStorage.setItem(`pago_terceros_lote_${hiddenNit.value}`, JSON.stringify(loteFacturas));
                }));

                document.querySelectorAll(".btn-quitar-item").forEach(btn => {
                    btn.addEventListener("click", function() {
                        const idx = parseInt(this.getAttribute("data-index"));
                        loteFacturas.splice(idx, 1);
                        const nit = hiddenNit.value;
                        if (loteFacturas.length > 0) {
                            localStorage.setItem(`pago_terceros_lote_${nit}`, JSON.stringify(loteFacturas));
                        } else {
                            localStorage.removeItem(`pago_terceros_lote_${nit}`);
                        }
                        renderTablaLote();
                    });
                });
            } else {
                tableWrapper.style.display = "none";
            }

            textTotalLote.innerText = `$${formatNumber(totalBruto)}`;
            const totalDescEl = document.getElementById("textTotalDescuento");
            if (totalDescEl) totalDescEl.innerText = `$${formatNumber(totalDescuento)}`;
            const totalAporteEl = document.getElementById("textTotalAporte");
            if (totalAporteEl) totalAporteEl.innerText = `$${formatNumber(totalAporte)}`;
            const netoTotalEl = document.getElementById("textNetoTotal");
            if (netoTotalEl) netoTotalEl.innerText = `$${formatNumber(totalNeto)}`;
        }

        document.getElementById("btnFiltrar").addEventListener("click", cargarFacturas);
        document.getElementById("btnLimpiarFiltros").addEventListener("click", function() {
            document.getElementById("filtro_factura").value      = "";
            document.getElementById("filtro_fecha_inicio").value = "";
            document.getElementById("filtro_fecha_fin").value    = "";
            document.getElementById("filtro_estado").value       = "pendientes";
            cargarFacturas();
        });

        document.getElementById("filtro_factura").addEventListener("keypress", function(e) {
            if (e.key === 'Enter') { e.preventDefault(); cargarFacturas(); }
        });

        formPagoProveedores.addEventListener("submit", function(e) {
            e.preventDefault();

            if (loteFacturas.length <= 0) {
                Swal.fire({ title: 'Listado Vacío', text: 'Debe agregar al menos una factura antes de registrar el pago.', icon: 'warning', confirmButtonColor: '#3b82f6' });
                return;
            }

            const payload = {
                nit:             hiddenNit.value,
                tipo_movimiento: document.getElementById("tipo_movimiento").value,
                fecha:           document.getElementById("fecha").value,
                observacion:     document.getElementById("observacion").value,
                facturas:        loteFacturas
            };

            btnProcesarPago.disabled = true;
            spinner.style.display    = "inline-block";

            fetch("{{ url('api/proveedores/pagar') }}", {
                method: "POST",
                headers: { "Content-Type": "application/json", "X-CSRF-TOKEN": "{{ csrf_token() }}" },
                body: JSON.stringify(payload)
            })
            .then(res => res.json())
            .then(data => {
                btnProcesarPago.disabled = false;
                spinner.style.display    = "none";

                if (data.status === "ok") {
                    localStorage.removeItem(`pago_terceros_lote_${hiddenNit.value}`);
                    loteFacturas = [];

                    Swal.fire({
                        title: '¡Pago Registrado!',
                        html: `Comprobante de Egreso <strong>#${data.consecutivo}</strong><br>Abonos brutos: <strong>$${formatNumber(data.total_pagado)}</strong>`,
                        icon: 'success',
                        showCancelButton: true,
                        confirmButtonText: '📑 Descargar PDF',
                        cancelButtonText: 'Cerrar',
                        confirmButtonColor: '#3b82f6',
                        cancelButtonColor: '#64748b'
                    }).then((result) => {
                        if (result.isConfirmed) {
                            window.open("{{ url('contabilidad/pago-proveedores/pdf') }}/" + data.consecutivo, "_blank");
                        }

                        inputSearch.value = "";
                        hiddenNit.value   = "";
                        tableWrapper.style.display = "none";
                        noFacturas.style.display   = "block";
                        noFacturas.innerHTML = `<span class="icon">🔍</span><span>Seleccione un proveedor para visualizar su listado de facturas.</span>`;
                        document.getElementById("observacion").value                      = "";
                        document.getElementById("seccionFiltrosCol").style.display        = "none";
                        document.getElementById("filtroPlaceholder").style.display        = "flex";
                        document.getElementById("operacionFacturasWrapper").style.display = "none";
                    });
                } else {
                    Swal.fire({ title: 'Error al Pagar', text: data.message || 'Error inesperado al procesar el pago.', icon: 'error', confirmButtonColor: '#ef4444' });
                }
            })
            .catch(err => {
                btnProcesarPago.disabled = false;
                spinner.style.display    = "none";
                Swal.fire({ title: 'Error de Conexión', text: 'No se pudo conectar con el servidor. Revise su red.', icon: 'error', confirmButtonColor: '#ef4444' });
                console.error(err);
            });
        });

        function anularComprobante(consecutivo, factura_nro, successCallback) {
            // Si el segundo argumento es una función (porque no se pasó factura_nro), reasignar
            if (typeof factura_nro === 'function') {
                successCallback = factura_nro;
                factura_nro = null;
            }

            const title = factura_nro ? '¿Está seguro de anular el pago?' : '¿Está seguro de anular?';
            const html = factura_nro 
                ? `Se anulará el pago de la factura <strong>#${factura_nro}</strong> en el comprobante <strong>#${consecutivo}</strong>.<br><br><span style="color:#dc2626; font-weight:700;">⚠️ Esta acción es irreversible:</span><br>• Se reversará el abono, descuento y aportes de esta factura.<br>• Se eliminará su asiento contable y se devolverá el saldo a la caja diario.`
                : `Se anulará por completo el comprobante de egreso <strong>#${consecutivo}</strong>.<br><br><span style="color:#dc2626; font-weight:700;">⚠️ Esta acción es irreversible:</span><br>• Se reversarán los abonos, descuentos y aportes de todas las facturas.<br>• Se eliminarán los asientos contables y se devolverán los saldos a la caja diario.`;

            Swal.fire({
                title: title,
                html: html,
                icon: 'warning',
                showCancelButton: true,
                confirmButtonText: 'Sí, anular',
                cancelButtonText: 'Cancelar',
                confirmButtonColor: '#ef4444',
                cancelButtonColor: '#64748b'
            }).then((result) => {
                if (result.isConfirmed) {
                    Swal.fire({
                        title: 'Procesando anulación...',
                        allowOutsideClick: false,
                        didOpen: () => { Swal.showLoading(); }
                    });

                    fetch("{{ url('api/proveedores/anular-pago') }}", {
                        method: "POST",
                        headers: { "Content-Type": "application/json", "X-CSRF-TOKEN": "{{ csrf_token() }}" },
                        body: JSON.stringify({ consecutivo: consecutivo, factura_nro: factura_nro })
                    })
                    .then(res => res.json())
                    .then(data => {
                        if (data.status === "ok") {
                            Swal.fire({ title: '¡Anulado!', text: data.message, icon: 'success', confirmButtonColor: '#3b82f6' });
                            if (successCallback) successCallback();
                        } else {
                            Swal.fire({ title: 'Error al anular', text: data.message || 'Ocurrió un error al anular.', icon: 'error', confirmButtonColor: '#ef4444' });
                        }
                    })
                    .catch(err => {
                        Swal.fire({ title: 'Error de Red', text: 'No se pudo conectar con el servidor.', icon: 'error', confirmButtonColor: '#ef4444' });
                        console.error(err);
                    });
                }
            });
        }

        function formatNumber(num) {
            return parseFloat(num).toLocaleString('es-CO', { minimumFractionDigits: 2, maximumFractionDigits: 2 });
        }
    });
</script>
@endsection