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

<!-- Librerías de soporte -->
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<style>
    /* Reset & Espaciado Compacto */
    body.blurglass {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    .pago-gastos-compact {
        width: 100%;
        max-width: 100%;
        margin: 0;
        padding: 10px 18px;
        background-color: #f8fafc;
        min-height: calc(100vh - 50px);
        font-family: 'Outfit', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    }

    /* Barra Superior Ultra-Compacta */
    .top-header-compact {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 10px;
        padding-bottom: 8px;
        border-bottom: 1px solid #e2e8f0;
        flex-wrap: wrap;
        gap: 8px;
    }

    .top-header-compact h1 {
        font-size: 19px;
        font-weight: 800;
        color: #0f172a;
        margin: 0;
        display: inline-flex;
        align-items: center;
        gap: 8px;
    }

    /* Tarjeta Única de Filtros y Configuración */
    .filter-card-compact {
        background: #ffffff;
        border: 1px solid #cbd5e1;
        border-radius: 10px;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
        padding: 10px 14px;
        margin-bottom: 10px;
    }

    .lbl-compact {
        font-size: 9.5px;
        font-weight: 700;
        color: #475569;
        text-transform: uppercase;
        letter-spacing: 0.4px;
        margin-bottom: 3px;
        display: block;
    }

    .input-compact {
        font-size: 11.5px;
        border-radius: 6px;
        padding: 5px 8px;
        height: 31px;
        border: 1px solid #cbd5e1;
        color: #0f172a;
        width: 100%;
        transition: all 0.15s;
    }

    .input-compact:focus {
        border-color: #0284c7;
        box-shadow: 0 0 0 2px rgba(2, 132, 199, 0.15);
        outline: none;
    }

    /* Tabla de Gastos Optimizada */
    .table-card-compact {
        background: #ffffff;
        border: 1px solid #e2e8f0;
        border-radius: 10px;
        overflow: hidden;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.03);
    }

    .table-header-bar {
        padding: 8px 14px;
        background: #f1f5f9;
        border-bottom: 1px solid #e2e8f0;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .table-compact-view {
        width: 100%;
        border-collapse: separate;
        border-spacing: 0;
        font-size: 11.5px;
        margin: 0;
    }

    .table-compact-view thead th {
        background-color: #f8fafc;
        color: #334155;
        font-weight: 700;
        font-size: 10.5px;
        text-transform: uppercase;
        letter-spacing: 0.4px;
        padding: 7px 10px;
        border-bottom: 2px solid #e2e8f0;
        white-space: nowrap;
        position: sticky;
        top: 0;
        z-index: 10;
    }

    .table-compact-view tbody tr {
        transition: background-color 0.1s ease;
    }

    .table-compact-view tbody tr:hover {
        background-color: #f0fdf4;
    }

    .table-compact-view tbody tr.selected-row {
        background-color: #e0f2fe !important;
    }

    .table-compact-view td {
        padding: 6px 10px;
        border-bottom: 1px solid #f1f5f9;
        vertical-align: middle;
        color: #1e293b;
    }

    .badge-estado {
        padding: 2px 7px;
        border-radius: 12px;
        font-size: 9.5px;
        font-weight: 700;
        text-transform: uppercase;
        display: inline-block;
    }

    .badge-pendiente {
        background-color: #fef3c7;
        color: #92400e;
    }

    .badge-abonado {
        background-color: #e0f2fe;
        color: #0369a1;
    }

    .badge-pagado {
        background-color: #dcfce7;
        color: #166534;
    }

    /* Barra Inferior de Pago (Compacta y Fija a la Tabla) */
    .footer-pago-compact {
        background: #0f172a;
        color: #ffffff;
        padding: 8px 16px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom-left-radius: 10px;
        border-bottom-right-radius: 10px;
    }

    .btn-liquidar-action {
        background: #10b981;
        color: #ffffff;
        border: none;
        padding: 7px 22px;
        border-radius: 7px;
        font-weight: 700;
        font-size: 12.5px;
        letter-spacing: 0.3px;
        cursor: pointer;
        transition: all 0.15s;
        display: inline-flex;
        align-items: center;
        gap: 6px;
    }

    .btn-liquidar-action:hover:not(:disabled) {
        background: #059669;
        transform: translateY(-1px);
    }

    .btn-liquidar-action:disabled {
        background: #64748b;
        cursor: not-allowed;
        transform: none;
    }

    .tab-btn-mini {
        padding: 5px 14px;
        border-radius: 6px;
        font-size: 11.5px;
        font-weight: 700;
        border: 1px solid #cbd5e1;
        background: #ffffff;
        color: #475569;
        cursor: pointer;
        transition: all 0.15s;
    }

    .tab-btn-mini.active {
        background: #0284c7;
        border-color: #0284c7;
        color: #ffffff;
    }
</style>

<div class="pago-gastos-compact">

    <!-- Encabezado Superior Compacto -->
    <div class="top-header-compact">
        <div class="d-flex align-items-center gap-2">
            @include('menu.botonRegresar')
            <h1>
                <span>💸 Pago de Gastos, CXP y Contratos</span>
            </h1>
            <span class="badge bg-warning text-dark border ms-2" style="font-size: 11px;">
                Pendientes: <strong>{{ $conteoPendientes }}</strong> (${{ number_format($saldoPendienteEstimado, 0, ',', '.') }})
            </span>
        </div>
        <div class="d-flex align-items-center gap-2">
            <button type="button" class="btn btn-outline-success btn-sm" onclick="abrirModalPagoDirecto()" style="font-weight: 700; font-size: 11.5px; padding: 4px 12px; border-radius: 6px;">
                <i class="fa fa-plus-circle"></i> + Pago Directo / Contrato
            </button>
            <div class="btn-group btn-group-sm">
                <button type="button" id="tabBtnLiquidar" class="tab-btn-mini active" onclick="cambiarPestana('liquidar')">
                    <i class="fa fa-money"></i> Liquidar Gastos
                </button>
                <button type="button" id="tabBtnHistorial" class="tab-btn-mini" onclick="cambiarPestana('historial')">
                    <i class="fa fa-history"></i> Historial Egresos
                </button>
            </div>
        </div>
    </div>

    <!-- SECCIÓN 1: LIQUIDAR GASTOS -->
    <div id="seccion_liquidar">

        <!-- Tarjeta Única de Parámetros y Filtros (Espacio Reducido al Mínimo) -->
        <div class="filter-card-compact">

            <!-- Fila 1: Configuración de la Salida de Fondos -->
            <div class="row g-2 align-items-end mb-2 pb-2 border-bottom">
                <!-- Cuenta Salida Fondos -->
                <div class="col-md-4">
                    <label class="lbl-compact" style="color: #0369a1;">
                        <i class="fa fa-university"></i> Cuenta Salida de Fondos (Caja / Banco 11xx) *
                    </label>
                    <select id="cuenta_activo" class="form-select form-select-sm" style="font-size: 11.5px; font-weight: 700; border-color: #0284c7; background: #f0f9ff;">
                        @foreach($cuentas_activo as $idx => $cta)
                            <option value="{{ $cta->codeC }}" {{ $idx === 0 ? 'selected' : '' }}>
                                {{ $cta->codeC }} - {{ $cta->NombreCuenta }}
                            </option>
                        @endforeach
                    </select>
                </div>

                <!-- Fecha del Pago -->
                <div class="col-md-2">
                    <label class="lbl-compact">Fecha Comprobante</label>
                    <input type="date" id="fecha_pago" class="input-compact" value="{{ date('Y-m-d') }}">
                </div>

                <!-- Concepto General -->
                <div class="col-md-4">
                    <label class="lbl-compact">Concepto / Comentario del Egreso</label>
                    <input type="text" id="observacion_pago" class="input-compact" value="Pago de gastos y cuentas por pagar" placeholder="Ej. Pago servicios mes...">
                </div>

                <!-- Afectar Arqueo Físico -->
                <div class="col-md-2">
                    <div class="form-check form-switch pt-1 mb-1">
                        <input class="form-check-input" type="checkbox" id="afectar_arqueo">
                        <label class="form-check-label" for="afectar_arqueo" style="font-size: 11px; font-weight: 700; color: #475569;">
                            Afectar Arqueo Caja
                        </label>
                    </div>
                </div>
            </div>

            <!-- Fila 2: Filtros de Búsqueda -->
            <div class="row g-2 align-items-end">
                <!-- Búsqueda en Vivo -->
                <div class="col-md-3">
                    <label class="lbl-compact"><i class="fa fa-search"></i> Búsqueda Rápida en Vivo</label>
                    <input type="text" id="live_search" class="input-compact" placeholder="Buscar por Contrato, Tercero, Ref..." onkeyup="filtrarTablaEnVivo()">
                </div>

                <!-- Tercero -->
                <div class="col-md-3">
                    <label class="lbl-compact"><i class="fa fa-user"></i> Tercero / Beneficiario</label>
                    <input type="text" id="filtro_tercero" list="lista_terceros" class="input-compact" placeholder="NIT o Nombre..." autocomplete="off">
                    <datalist id="lista_terceros"></datalist>
                    <input type="hidden" id="filtro_nit" value="">
                </div>

                <!-- Contrato / Ref -->
                <div class="col-md-2">
                    <label class="lbl-compact">Contrato / Referencia</label>
                    <input type="text" id="filtro_referencia" class="input-compact" placeholder="Ej: Contrato #04">
                </div>

                <!-- Bodega -->
                <div class="col-md-2">
                    <label class="lbl-compact">Bodega</label>
                    <select id="filtro_bodega" class="form-select form-select-sm" style="font-size: 11.5px;">
                        <option value="todas">-- Todas --</option>
                        @foreach($bodegas as $b)
                            <option value="{{ $b->id }}" {{ $b->id == $bodegaActual ? 'selected' : '' }}>{{ $b->nombreBodega }}</option>
                        @endforeach
                    </select>
                </div>

                <!-- Estado -->
                <div class="col-md-1">
                    <label class="lbl-compact">Estado</label>
                    <select id="filtro_estado" class="form-select form-select-sm" style="font-size: 11.5px;">
                        <option value="pendientes" selected>Pendientes</option>
                        <option value="pagados">Pagados</option>
                        <option value="todos">Todos</option>
                    </select>
                </div>

                <!-- Botón Buscar -->
                <div class="col-md-1">
                    <button type="button" class="btn btn-primary btn-sm w-100" onclick="cargarGastosPendientes()" style="height: 31px; font-size: 11.5px; font-weight: 700; border-radius: 6px;">
                        <i class="fa fa-filter"></i> Filtrar
                    </button>
                </div>
            </div>

        </div>

        <!-- Tabla de Gastos con Máximo Espacio Vertical -->
        <div class="table-card-compact">
            <div class="table-header-bar">
                <div style="font-weight: 700; font-size: 12px; color: #1e293b;">
                    <i class="fa fa-list"></i> Cuentas por Pagar y Gastos Causados (<span id="lbl_conteo_gastos">0</span> encontrados)
                </div>
                <div class="d-flex gap-2">
                    <button type="button" class="btn btn-outline-secondary btn-sm" onclick="seleccionarTodo(true)" style="font-size: 10.5px; font-weight: 700; padding: 2px 8px; border-radius: 5px;">
                        Marcar Todo
                    </button>
                    <button type="button" class="btn btn-outline-secondary btn-sm" onclick="seleccionarTodo(false)" style="font-size: 10.5px; font-weight: 700; padding: 2px 8px; border-radius: 5px;">
                        Desmarcar Todo
                    </button>
                </div>
            </div>

            <div class="table-responsive" style="max-height: calc(100vh - 275px); overflow-y: auto;">
                <table class="table-compact-view" id="tablaGastos">
                    <thead>
                        <tr>
                            <th style="width: 35px; text-align: center;">
                                <input type="checkbox" id="chk_todos" onchange="toggleTodos(this.checked)">
                            </th>
                            <th style="width: 70px;">Gasto #</th>
                            <th style="width: 85px;">Fecha</th>
                            <th style="width: 200px;">Beneficiario / Tercero</th>
                            <th style="width: 150px;">Contrato / Ref / Doc</th>
                            <th>Concepto / Detalle</th>
                            <th style="width: 130px;">Cuenta CXP</th>
                            <th class="text-end" style="width: 95px;">Causado</th>
                            <th class="text-end" style="width: 95px;">Abonado</th>
                            <th class="text-end" style="width: 105px;">Saldo Pendiente</th>
                            <th style="width: 160px;" class="text-end">Valor a Liquidar ($)</th>
                            <th class="text-center" style="width: 80px;">Estado</th>
                        </tr>
                    </thead>
                    <tbody id="tbody_gastos">
                        <tr>
                            <td colspan="12" style="text-align: center; padding: 30px; color: #94a3b8;">
                                <i class="fa fa-spinner fa-spin fa-2x mb-2 d-block"></i>
                                Consultando gastos causados...
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>

            <!-- Barra Inferior de Liquidación (Ultra-Compacta: Solo 40px) -->
            <div class="footer-pago-compact">
                <div class="d-flex align-items-center gap-3">
                    <span style="font-size: 11px; color: #94a3b8;">
                        Marcados: <strong id="lbl_items_seleccionados" style="color: #38bdf8; font-size: 13px;">0</strong>
                    </span>
                    <span style="font-size: 14px; font-weight: 800;">
                        Total a Liquidar: <strong id="lbl_total_liquidar" style="color: #34d399; font-size: 17px;">$0</strong>
                    </span>
                </div>
                <div>
                    <button type="button" id="btnProcesarPago" class="btn-liquidar-action" onclick="confirmarYProcesarPago()" disabled>
                        <i class="fa fa-check-circle"></i> Liquidar y Emitir Comprobante de Egreso
                    </button>
                </div>
            </div>
        </div>

    </div>

    <!-- SECCIÓN 2: HISTORIAL DE COMPROBANTES DE EGRESO -->
    <div id="seccion_historial" style="display: none;">
        <div class="filter-card-compact">
            <div class="row g-2 align-items-end">
                <div class="col-md-2">
                    <label class="lbl-compact">Consecutivo</label>
                    <input type="text" id="hist_consecutivo" class="input-compact" placeholder="Ej. 105">
                </div>
                <div class="col-md-3">
                    <label class="lbl-compact">Tercero (NIT)</label>
                    <input type="text" id="hist_tercero" class="input-compact" placeholder="NIT...">
                </div>
                <div class="col-md-2">
                    <label class="lbl-compact">Desde</label>
                    <input type="date" id="hist_fi" class="input-compact" value="{{ date('Y-m-01') }}">
                </div>
                <div class="col-md-2">
                    <label class="lbl-compact">Hasta</label>
                    <input type="date" id="hist_ff" class="input-compact" value="{{ date('Y-m-d') }}">
                </div>
                <div class="col-md-2">
                    <label class="lbl-compact">Bodega</label>
                    <select id="hist_bodega" class="form-select form-select-sm" style="font-size: 11.5px;">
                        <option value="todas">-- Todas --</option>
                        @foreach($bodegas as $b)
                            <option value="{{ $b->id }}">{{ $b->nombreBodega }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="col-md-1">
                    <button type="button" class="btn btn-primary btn-sm w-100" onclick="cargarHistorialComprobantes()" style="height: 31px; font-weight: 700; font-size: 11.5px;">
                        <i class="fa fa-search"></i> Buscar
                    </button>
                </div>
            </div>
        </div>

        <div class="table-card-compact">
            <div class="table-responsive" style="max-height: calc(100vh - 230px); overflow-y: auto;">
                <table class="table-compact-view">
                    <thead>
                        <tr>
                            <th style="width: 100px;">Consecutivo</th>
                            <th style="width: 95px;">Fecha Pago</th>
                            <th>Beneficiario / Tercero</th>
                            <th style="width: 130px;">Cuenta Salida</th>
                            <th class="text-end" style="width: 110px;">Total Pagado</th>
                            <th>Concepto / Observación</th>
                            <th class="text-center" style="width: 160px;">Acciones</th>
                        </tr>
                    </thead>
                    <tbody id="tbody_historial">
                        <tr>
                            <td colspan="7" style="text-align: center; padding: 30px; color: #94a3b8;">
                                <i class="fa fa-history fa-2x mb-2 d-block"></i>
                                Presione <strong>Buscar</strong> para cargar el historial de egresos.
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>

</div>

<!-- MODAL: NUEVO PAGO DIRECTO EXPRESS -->
<div class="modal fade" id="modalPagoDirecto" tabindex="-1" aria-labelledby="modalPagoDirectoLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg modal-dialog-centered">
        <div class="modal-content" style="border-radius: 12px; border: none; box-shadow: 0 10px 25px rgba(0,0,0,0.2);">
            <div class="modal-header" style="background: #0284c7; color: white; padding: 12px 18px;">
                <h5 class="modal-title font-weight-bold" style="font-size: 15px;">
                    <i class="fa fa-bolt"></i> Nuevo Pago Directo / Contrato Express
                </h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body" style="padding: 16px;">
                <form id="formPagoDirecto" onsubmit="event.preventDefault(); ejecutarPagoDirecto();">
                    <div class="row g-2">
                        <div class="col-md-4">
                            <label class="lbl-compact">NIT / Cédula Beneficiario *</label>
                            <input type="text" id="dir_nit" class="input-compact" placeholder="Ej. 900123456" required autocomplete="off">
                        </div>
                        <div class="col-md-8">
                            <label class="lbl-compact">Nombre / Razón Social Beneficiario *</label>
                            <input type="text" id="dir_nombre" class="input-compact" placeholder="Ej. Inmobiliaria Central S.A.S." required>
                        </div>
                        <div class="col-md-6">
                            <label class="lbl-compact"><i class="fa fa-file-text-o"></i> Número de Contrato / Referencia *</label>
                            <input type="text" id="dir_ref_contrato" class="input-compact" placeholder="Ej. CONTRATO ARRIENDO LOCAL 102" required>
                        </div>
                        <div class="col-md-3">
                            <label class="lbl-compact">Fecha</label>
                            <input type="date" id="dir_fecha" class="input-compact" value="{{ date('Y-m-d') }}" required>
                        </div>
                        <div class="col-md-3">
                            <label class="lbl-compact">Bodega</label>
                            <select id="dir_bodega" class="form-select form-select-sm" style="font-size: 11.5px;" required>
                                @foreach($bodegas as $b)
                                    <option value="{{ $b->id }}" {{ $b->id == $bodegaActual ? 'selected' : '' }}>{{ $b->nombreBodega }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-md-12">
                            <label class="lbl-compact">Concepto / Detalle del Pago *</label>
                            <input type="text" id="dir_concepto" class="input-compact" placeholder="Ej. Canon de arrendamiento mes..." required>
                        </div>
                        <div class="col-md-6">
                            <label class="lbl-compact" style="color: #0369a1;">Cuenta Concepto / Gasto (Débito) *</label>
                            <select id="dir_cuenta_debito" class="form-select form-select-sm" style="font-size: 11.5px;" required>
                                <optgroup label="Cuentas de Gasto (5xxx)">
                                    @foreach($cuentas_gasto as $cg)
                                        <option value="{{ $cg->codeC }}" {{ strpos($cg->codeC, '5120') === 0 ? 'selected' : '' }}>
                                            {{ $cg->codeC }} - {{ $cg->NombreCuenta }}
                                        </option>
                                    @endforeach
                                </optgroup>
                                <optgroup label="Cuentas de Pasivo (23xx)">
                                    @foreach($cuentas_pasivo as $cp)
                                        <option value="{{ $cp->codeC }}">{{ $cp->codeC }} - {{ $cp->NombreCuenta }}</option>
                                    @endforeach
                                </optgroup>
                            </select>
                        </div>
                        <div class="col-md-6">
                            <label class="lbl-compact" style="color: #15803d;">Cuenta Salida Fondos (Crédito 11xx) *</label>
                            <select id="dir_cuenta_activo" class="form-select form-select-sm" style="font-size: 11.5px;" required>
                                @foreach($cuentas_activo as $idx => $ca)
                                    <option value="{{ $ca->codeC }}" {{ $idx === 0 ? 'selected' : '' }}>
                                        {{ $ca->codeC }} - {{ $ca->NombreCuenta }}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-md-6">
                            <label class="lbl-compact" style="color: #047857;">Valor a Pagar ($ COP) *</label>
                            <input type="number" step="0.01" min="1" id="dir_valor" class="input-compact font-weight-bold" style="color: #047857; font-size: 14px;" placeholder="0.00" required>
                        </div>
                        <div class="col-md-6 d-flex align-items-center pt-3">
                            <div class="form-check form-switch">
                                <input class="form-check-input" type="checkbox" id="dir_afectar_arqueo">
                                <label class="form-check-label" for="dir_afectar_arqueo" style="font-size: 11px; font-weight: 700; color: #334155;">
                                    Afectar Arqueo Caja
                                </label>
                            </div>
                        </div>
                    </div>

                    <div class="d-flex justify-content-end gap-2 mt-3 pt-2 border-top">
                        <button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="modal" style="font-size: 11.5px;">Cancelar</button>
                        <button type="submit" class="btn btn-success btn-sm" style="font-size: 11.5px; font-weight: 700;">
                            <i class="fa fa-check"></i> Emitir Egreso Directo
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<!-- Lógica JavaScript Segura -->
<script>
    let gastosActuales = [];

    // Alerta segura: si Swal falla o no cargó, usa alert/confirm nativo
    function safeAlert(titulo, mensaje, icono) {
        if (typeof Swal !== 'undefined') {
            Swal.fire(titulo, mensaje, icono);
        } else {
            alert(`${titulo}\n${mensaje}`);
        }
    }

    document.addEventListener('DOMContentLoaded', function() {
        configurarBuscadorTerceros();
        cargarGastosPendientes();
    });

    function cambiarPestana(tab) {
        if (tab === 'liquidar') {
            document.getElementById('seccion_liquidar').style.display = 'block';
            document.getElementById('seccion_historial').style.display = 'none';
            document.getElementById('tabBtnLiquidar').classList.add('active');
            document.getElementById('tabBtnHistorial').classList.remove('active');
        } else {
            document.getElementById('seccion_liquidar').style.display = 'none';
            document.getElementById('seccion_historial').style.display = 'block';
            document.getElementById('tabBtnLiquidar').classList.remove('active');
            document.getElementById('tabBtnHistorial').classList.add('active');
            cargarHistorialComprobantes();
        }
    }

    function abrirModalPagoDirecto() {
        if (typeof bootstrap !== 'undefined' && bootstrap.Modal) {
            const modal = new bootstrap.Modal(document.getElementById('modalPagoDirecto'));
            modal.show();
        } else if (typeof $ !== 'undefined') {
            $('#modalPagoDirecto').modal('show');
        }
    }

    function configurarBuscadorTerceros() {
        const input = document.getElementById('filtro_tercero');
        const datalist = document.getElementById('lista_terceros');
        const hiddenNit = document.getElementById('filtro_nit');

        let timeout = null;
        input.addEventListener('input', function() {
            clearTimeout(timeout);
            const val = this.value.trim();
            if (val.length < 2) {
                hiddenNit.value = '';
                return;
            }

            const option = Array.from(datalist.options).find(opt => opt.value === val);
            if (option) {
                hiddenNit.value = option.dataset.nit || '';
                return;
            }

            timeout = setTimeout(() => {
                fetch(`{{ url('/api/pago-gastos/buscar-terceros') }}?q=${encodeURIComponent(val)}`)
                    .then(res => res.json())
                    .then(data => {
                        datalist.innerHTML = '';
                        data.forEach(item => {
                            const opt = document.createElement('option');
                            opt.value = `${item.nit} - ${item.nombre_completo}`;
                            opt.dataset.nit = item.nit;
                            datalist.appendChild(opt);
                        });
                    })
                    .catch(err => console.error(err));
            }, 300);
        });

        input.addEventListener('change', function() {
            const val = this.value.trim();
            const option = Array.from(datalist.options).find(opt => opt.value === val);
            if (option) {
                hiddenNit.value = option.dataset.nit;
            } else if (!val) {
                hiddenNit.value = '';
            } else {
                hiddenNit.value = val.split('-')[0].trim();
            }
        });

        // Autocompletar nombre en modal pago directo
        const dirNit = document.getElementById('dir_nit');
        const dirNombre = document.getElementById('dir_nombre');
        dirNit.addEventListener('blur', function() {
            const nitVal = this.value.trim();
            if (nitVal.length >= 3) {
                fetch(`{{ url('/api/pago-gastos/buscar-terceros') }}?q=${encodeURIComponent(nitVal)}`)
                    .then(res => res.json())
                    .then(data => {
                        if (data && data.length > 0) {
                            const match = data.find(d => d.nit === nitVal) || data[0];
                            if (match) {
                                dirNombre.value = match.nombre_completo.replace(`${match.nit} - `, '');
                            }
                        }
                    });
            }
        });
    }

    // Consulta de Gastos
    function cargarGastosPendientes() {
        const tbody = document.getElementById('tbody_gastos');
        tbody.innerHTML = `<tr><td colspan="12" style="text-align: center; padding: 25px;"><i class="fa fa-spinner fa-spin fa-2x"></i><br>Cargando información...</td></tr>`;

        const nit = document.getElementById('filtro_nit').value || document.getElementById('filtro_tercero').value.split('-')[0].trim();
        const bodega = document.getElementById('filtro_bodega').value;
        const referencia = document.getElementById('filtro_referencia').value.trim();
        const estado = document.getElementById('filtro_estado').value;

        fetch(`{{ url('/api/pago-gastos/pendientes') }}`, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': '{{ csrf_token() }}'
            },
            body: JSON.stringify({ nit, bodega, referencia, estado })
        })
        .then(res => res.json())
        .then(res => {
            if (res.status === 'ok') {
                gastosActuales = res.data;
                renderizarGastos(gastosActuales);
            } else {
                safeAlert('Error', res.message || 'No fue posible consultar los gastos.', 'error');
            }
        })
        .catch(err => {
            console.error(err);
            tbody.innerHTML = `<tr><td colspan="12" style="text-align: center; color: #ef4444; padding: 20px;">Error al conectar con el servidor.</td></tr>`;
        });
    }

    // Renderizar Filas de Gastos
    function renderizarGastos(gastos) {
        const tbody = document.getElementById('tbody_gastos');
        document.getElementById('lbl_conteo_gastos').innerText = gastos.length;
        document.getElementById('chk_todos').checked = false;

        if (gastos.length === 0) {
            tbody.innerHTML = `
                <tr>
                    <td colspan="12" style="text-align: center; padding: 35px; color: #64748b;">
                        <i class="fa fa-folder-open-o fa-2x mb-2 d-block"></i>
                        No se encontraron gastos o cuentas por pagar con los filtros seleccionados.
                    </td>
                </tr>`;
            actualizarResumen();
            return;
        }

        let html = '';
        gastos.forEach((g, idx) => {
            const saldoFormat = new Intl.NumberFormat('es-CO', { style: 'currency', currency: 'COP' }).format(g.saldo_pendiente);
            const totalFormat = new Intl.NumberFormat('es-CO', { style: 'currency', currency: 'COP' }).format(g.total_causado);
            const abonadoFormat = new Intl.NumberFormat('es-CO', { style: 'currency', currency: 'COP' }).format(g.total_abonado);

            let badge = '';
            if (g.saldo_pendiente <= 0.01) {
                badge = `<span class="badge-estado badge-pagado">Pagado</span>`;
            } else if (g.total_abonado > 0) {
                badge = `<span class="badge-estado badge-abonado">Abonado</span>`;
            } else {
                badge = `<span class="badge-estado badge-pendiente">Pendiente</span>`;
            }

            const disabledChk = (g.saldo_pendiente <= 0.01) ? 'disabled' : '';
            const refContratoTexto = g.ref_factura && g.ref_factura !== '—' ? g.ref_factura : '';

            html += `
                <tr id="fila_gasto_${g.id}" class="fila-gasto-item" data-search="${(g.nombre_tercero + ' ' + g.nit + ' ' + g.ref_factura + ' ' + g.observacion + ' ' + g.cuenta_pasivo).toLowerCase()}">
                    <td style="text-align: center;">
                        <input type="checkbox" class="chk-gasto" data-id="${g.id}" data-idx="${idx}" onchange="onCheckFila(this)" ${disabledChk}>
                    </td>
                    <td><strong>#${g.numero_documento}</strong></td>
                    <td style="white-space: nowrap;">${g.fecha}</td>
                    <td>
                        <div style="font-weight: 700; color: #0f172a;">${g.nombre_tercero}</div>
                        <small style="color: #64748b;">NIT: <strong>${g.nit}</strong></small>
                    </td>
                    <td>
                        <input type="text" class="form-control form-control-sm input-ref-contrato" 
                            id="input_ref_${g.id}" 
                            value="${refContratoTexto}" 
                            placeholder="Contrato / Ref..." 
                            style="font-size:11px; font-weight:600; padding: 2px 6px; height: 26px;"
                            title="Modifique el número de contrato/referencia si aplica">
                    </td>
                    <td>
                        <div style="font-size: 11px; color: #334155; max-width: 250px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;" title="${g.observacion || ''}">
                            ${g.observacion || 'Causación'}
                        </div>
                    </td>
                    <td>
                        <div style="font-size: 11px; font-weight: 700; color: #0369a1;">${g.cuenta_pasivo}</div>
                        <small style="color: #64748b; font-size:9.5px;">${g.nombre_cta_pasivo}</small>
                    </td>
                    <td class="text-end" style="font-weight: 600;">${totalFormat}</td>
                    <td class="text-end" style="color: #047857;">${abonadoFormat}</td>
                    <td class="text-end" style="font-weight: 800; color: #b91c1c;">${saldoFormat}</td>
                    <td class="text-end">
                        <div class="d-flex align-items-center gap-1 justify-content-end">
                            <input type="number" step="0.01" min="0" max="${g.saldo_pendiente}" 
                                class="form-control form-control-sm text-end" 
                                id="input_abono_${g.id}" 
                                value="${g.saldo_pendiente > 0 ? g.saldo_pendiente : 0}" 
                                oninput="actualizarResumen()" 
                                style="width: 100px; font-weight: 700; height: 26px; font-size: 11px;"
                                ${disabledChk}>
                            <button type="button" class="btn btn-outline-primary btn-sm" onclick="establecerAbono(${g.id}, ${g.saldo_pendiente})" title="Pagar 100%" style="font-size: 9.5px; padding: 2px 5px;" ${disabledChk}>
                                100%
                            </button>
                        </div>
                    </td>
                    <td class="text-center">${badge}</td>
                </tr>
            `;
        });

        tbody.innerHTML = html;
        actualizarResumen();
    }

    function filtrarTablaEnVivo() {
        const query = document.getElementById('live_search').value.toLowerCase().trim();
        const filas = document.querySelectorAll('.fila-gasto-item');
        filas.forEach(f => {
            const data = f.getAttribute('data-search') || '';
            if (!query || data.includes(query)) {
                f.style.display = '';
            } else {
                f.style.display = 'none';
            }
        });
    }

    function establecerAbono(id, valor) {
        document.getElementById(`input_abono_${id}`).value = valor;
        const chk = document.querySelector(`.chk-gasto[data-id="${id}"]`);
        if (chk && !chk.checked) {
            chk.checked = true;
            onCheckFila(chk);
        }
        actualizarResumen();
    }

    function onCheckFila(chk) {
        const tr = document.getElementById(`fila_gasto_${chk.dataset.id}`);
        if (chk.checked) {
            tr.classList.add('selected-row');
        } else {
            tr.classList.remove('selected-row');
        }
        actualizarResumen();
    }

    function toggleTodos(checked) {
        document.querySelectorAll('.chk-gasto:not(:disabled)').forEach(chk => {
            chk.checked = checked;
            const tr = document.getElementById(`fila_gasto_${chk.dataset.id}`);
            if (checked) {
                tr.classList.add('selected-row');
            } else {
                tr.classList.remove('selected-row');
            }
        });
        actualizarResumen();
    }

    function seleccionarTodo(marcar) {
        document.getElementById('chk_todos').checked = marcar;
        toggleTodos(marcar);
    }

    function actualizarResumen() {
        let seleccionados = 0;
        let total = 0;

        document.querySelectorAll('.chk-gasto:checked').forEach(chk => {
            seleccionados++;
            const id = chk.dataset.id;
            const inputVal = parseFloat(document.getElementById(`input_abono_${id}`).value) || 0;
            total += inputVal;
        });

        const totalFormateado = new Intl.NumberFormat('es-CO', { style: 'currency', currency: 'COP' }).format(total);

        document.getElementById('lbl_items_seleccionados').innerText = seleccionados;
        document.getElementById('lbl_total_liquidar').innerText = totalFormateado;

        const btnPagar = document.getElementById('btnProcesarPago');
        btnPagar.disabled = (seleccionados === 0 || total <= 0);
    }

    // Confirmación y procesamiento de pago
    function confirmarYProcesarPago() {
        const cuentaActivo = document.getElementById('cuenta_activo').value;
        if (!cuentaActivo) {
            safeAlert('Cuenta Requerida', 'Debe seleccionar la cuenta de salida de fondos (Caja o Banco).', 'warning');
            return;
        }

        const items = [];
        let totalPagar = 0;

        document.querySelectorAll('.chk-gasto:checked').forEach(chk => {
            const id = chk.dataset.id;
            const idx = parseInt(chk.dataset.idx);
            const g = gastosActuales[idx];
            const valorAbono = parseFloat(document.getElementById(`input_abono_${id}`).value) || 0;
            const refContrato = document.getElementById(`input_ref_${id}`).value.trim();

            if (valorAbono > 0) {
                items.push({
                    id: g.id,
                    tipo_origen: g.tipo_origen || 'GASTO',
                    nit: g.nit,
                    cuenta_pasivo: g.cuenta_pasivo,
                    valor_abonar: valorAbono,
                    bodega_id: g.bodega_id,
                    ref_contrato: refContrato
                });
                totalPagar += valorAbono;
            }
        });

        if (items.length === 0) {
            safeAlert('Atención', 'No hay ningún valor válido a pagar en los gastos seleccionados.', 'warning');
            return;
        }

        const totalFormat = new Intl.NumberFormat('es-CO', { style: 'currency', currency: 'COP' }).format(totalPagar);
        const cuentaNom = document.getElementById('cuenta_activo').selectedOptions[0]?.text || cuentaActivo;

        if (typeof Swal !== 'undefined') {
            Swal.fire({
                title: '¿Confirmar Pago de Gastos?',
                html: `
                    <div style="text-align: left; font-size: 13px; line-height: 1.6;">
                        <p>Se generará el <strong>Comprobante de Egreso Oficial</strong> por:</p>
                        <div style="background: #f1f5f9; padding: 10px; border-radius: 8px; margin-bottom: 10px; border: 1px solid #cbd5e1;">
                            <div><strong>Total a Pagar:</strong> <span style="color: #047857; font-size: 17px; font-weight: 800;">${totalFormat}</span></div>
                            <div><strong>Gastos a Liquidar:</strong> ${items.length}</div>
                            <div><strong>Cuenta de Salida:</strong> ${cuentaNom}</div>
                            <div><strong>Afecta Arqueo Físico:</strong> ${document.getElementById('afectar_arqueo').checked ? 'SÍ' : 'NO'}</div>
                        </div>
                    </div>
                `,
                icon: 'question',
                showCancelButton: true,
                confirmButtonColor: '#10b981',
                cancelButtonColor: '#64748b',
                confirmButtonText: 'Sí, Emitir Egreso',
                cancelButtonText: 'Cancelar'
            }).then(result => {
                if (result.isConfirmed) {
                    ejecutarPago(items);
                }
            });
        } else {
            if (confirm(`¿Emitir Egreso por ${totalFormat} desde la cuenta ${cuentaNom}?`)) {
                ejecutarPago(items);
            }
        }
    }

    // Ejecución AJAX del pago
    function ejecutarPago(items) {
        if (typeof Swal !== 'undefined') {
            Swal.fire({
                title: 'Procesando Pago...',
                text: 'Generando comprobante de egreso y contabilidad...',
                allowOutsideClick: false,
                didOpen: () => Swal.showLoading()
            });
        }

        const payload = {
            fecha: document.getElementById('fecha_pago').value,
            cuenta_activo: document.getElementById('cuenta_activo').value,
            afectar_arqueo: document.getElementById('afectar_arqueo').checked,
            observacion: document.getElementById('observacion_pago').value,
            items: items
        };

        fetch(`{{ url('/api/pago-gastos/pagar') }}`, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': '{{ csrf_token() }}'
            },
            body: JSON.stringify(payload)
        })
        .then(res => res.json())
        .then(res => {
            if (res.status === 'ok') {
                const consecutivo = res.consecutivo;
                if (typeof Swal !== 'undefined') {
                    Swal.fire({
                        title: '¡Comprobante de Egreso Generado!',
                        html: `
                            <p style="font-size: 14px; margin-bottom: 15px;">${res.message}</p>
                            <a href="{{ url('/contabilidad/pago-gastos/pdf') }}/${consecutivo}" target="_blank" class="btn btn-primary btn-sm" style="font-weight: 700;">
                                <i class="fa fa-print"></i> Ver / Imprimir Comprobante PDF #${consecutivo}
                            </a>
                        `,
                        icon: 'success',
                        confirmButtonText: 'Aceptar',
                        confirmButtonColor: '#0284c7'
                    }).then(() => {
                        cargarGastosPendientes();
                    });
                } else {
                    alert(res.message);
                    window.open(`{{ url('/contabilidad/pago-gastos/pdf') }}/${consecutivo}`, '_blank');
                    cargarGastosPendientes();
                }
            } else {
                safeAlert('Error al Procesar', res.message || 'Ocurrió un error inesperado.', 'error');
            }
        })
        .catch(err => {
            console.error(err);
            safeAlert('Error de Conexión', 'No se pudo comunicar con el servidor.', 'error');
        });
    }

    // Pago Directo Modal
    function ejecutarPagoDirecto() {
        const nit = document.getElementById('dir_nit').value.trim();
        const nombre = document.getElementById('dir_nombre').value.trim();
        const refContrato = document.getElementById('dir_ref_contrato').value.trim();
        const concepto = document.getElementById('dir_concepto').value.trim();
        const cuentaDebito = document.getElementById('dir_cuenta_debito').value;
        const cuentaActivo = document.getElementById('dir_cuenta_activo').value;
        const valor = parseFloat(document.getElementById('dir_valor').value) || 0;
        const fecha = document.getElementById('dir_fecha').value;
        const bodegaId = document.getElementById('dir_bodega').value;
        const afectarArqueo = document.getElementById('dir_afectar_arqueo').checked;

        if (!nit || !nombre || !refContrato || !concepto || valor <= 0) {
            safeAlert('Campos Incompletos', 'Por favor complete todos los campos obligatorios (*).', 'warning');
            return;
        }

        if (typeof Swal !== 'undefined') {
            Swal.fire({
                title: 'Procesando Pago Directo...',
                allowOutsideClick: false,
                didOpen: () => Swal.showLoading()
            });
        }

        fetch(`{{ url('/api/pago-gastos/pago-directo') }}`, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': '{{ csrf_token() }}'
            },
            body: JSON.stringify({
                nit, nombre, ref_contrato: refContrato, concepto,
                cuenta_debito: cuentaDebito, cuenta_activo: cuentaActivo,
                valor, fecha, bodega_id: bodegaId, afectar_arqueo: afectarArqueo
            })
        })
        .then(res => res.json())
        .then(res => {
            if (res.status === 'ok') {
                const modalEl = document.getElementById('modalPagoDirecto');
                if (typeof bootstrap !== 'undefined' && bootstrap.Modal) {
                    const modal = bootstrap.Modal.getInstance(modalEl);
                    if (modal) modal.hide();
                } else if (typeof $ !== 'undefined') {
                    $('#modalPagoDirecto').modal('hide');
                }
                document.getElementById('formPagoDirecto').reset();

                const consecutivo = res.consecutivo;
                if (typeof Swal !== 'undefined') {
                    Swal.fire({
                        title: '¡Pago Directo Registrado!',
                        html: `
                            <p style="font-size: 14px; margin-bottom: 15px;">${res.message}</p>
                            <a href="{{ url('/contabilidad/pago-gastos/pdf') }}/${consecutivo}" target="_blank" class="btn btn-primary btn-sm" style="font-weight: 700;">
                                <i class="fa fa-print"></i> Ver / Imprimir Comprobante PDF #${consecutivo}
                            </a>
                        `,
                        icon: 'success',
                        confirmButtonText: 'Aceptar',
                        confirmButtonColor: '#0284c7'
                    }).then(() => {
                        cargarGastosPendientes();
                    });
                } else {
                    alert(res.message);
                    window.open(`{{ url('/contabilidad/pago-gastos/pdf') }}/${consecutivo}`, '_blank');
                    cargarGastosPendientes();
                }
            } else {
                safeAlert('Error', res.message || 'No fue posible registrar el pago.', 'error');
            }
        })
        .catch(err => {
            console.error(err);
            safeAlert('Error de Conexión', 'No se pudo comunicar con el servidor.', 'error');
        });
    }

    // Historial
    function cargarHistorialComprobantes() {
        const tbody = document.getElementById('tbody_historial');
        tbody.innerHTML = `<tr><td colspan="7" style="text-align: center; padding: 25px;"><i class="fa fa-spinner fa-spin fa-2x"></i><br>Cargando historial...</td></tr>`;

        const fi = document.getElementById('hist_fi').value;
        const ff = document.getElementById('hist_ff').value;
        const bodega = document.getElementById('hist_bodega').value;
        const proveedor = document.getElementById('hist_tercero').value.trim();
        const consecutivo = document.getElementById('hist_consecutivo').value.trim();

        fetch(`{{ url('/api/pago-gastos/historial') }}`, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': '{{ csrf_token() }}'
            },
            body: JSON.stringify({ fi, ff, bodega, proveedor, consecutivo })
        })
        .then(res => res.json())
        .then(res => {
            if (res.status === 'ok') {
                renderizarHistorial(res.data);
            } else {
                tbody.innerHTML = `<tr><td colspan="7" style="text-align: center; color: #ef4444; padding: 20px;">Error al cargar historial.</td></tr>`;
            }
        })
        .catch(err => {
            console.error(err);
            tbody.innerHTML = `<tr><td colspan="7" style="text-align: center; color: #ef4444; padding: 20px;">Error de red.</td></tr>`;
        });
    }

    function renderizarHistorial(pagos) {
        const tbody = document.getElementById('tbody_historial');

        if (!pagos || pagos.length === 0) {
            tbody.innerHTML = `
                <tr>
                    <td colspan="7" style="text-align: center; padding: 30px; color: #64748b;">
                        <i class="fa fa-folder-open-o fa-2x mb-2 d-block"></i>
                        No se encontraron comprobantes de egreso emitidos con los criterios ingresados.
                    </td>
                </tr>`;
            return;
        }

        let html = '';
        pagos.forEach(p => {
            const totalFormat = new Intl.NumberFormat('es-CO', { style: 'currency', currency: 'COP' }).format(p.total_pagado);

            html += `
                <tr>
                    <td><strong>#${p.consecutivo}</strong></td>
                    <td style="white-space: nowrap;">${p.fecha ? p.fecha.substring(0, 10) : ''}</td>
                    <td>
                        <div style="font-weight: 700; color: #0f172a;">${p.nombre_proveedor || ('Tercero ' + p.nit)}</div>
                        <small style="color: #64748b;">NIT: <strong>${p.nit}</strong></small>
                    </td>
                    <td><span class="badge bg-light text-primary border">${p.cuenta_salida}</span></td>
                    <td class="text-end" style="font-weight: 800; color: #047857;">${totalFormat}</td>
                    <td><small style="color: #475569;">${p.observacion || 'Pago de Gasto / CXP'}</small></td>
                    <td class="text-center">
                        <div class="btn-group btn-group-sm">
                            <a href="{{ url('/contabilidad/pago-gastos/pdf') }}/${p.consecutivo}" target="_blank" class="btn btn-outline-primary" title="Ver / Imprimir PDF" style="font-weight: 600; font-size: 11px; padding: 2px 7px;">
                                <i class="fa fa-print"></i> PDF
                            </a>
                            <button type="button" class="btn btn-outline-danger" onclick="confirmarAnulacion(${p.consecutivo})" title="Anular Comprobante" style="font-weight: 600; font-size: 11px; padding: 2px 7px;">
                                <i class="fa fa-trash"></i> Anular
                            </button>
                        </div>
                    </td>
                </tr>
            `;
        });

        tbody.innerHTML = html;
    }

    function confirmarAnulacion(consecutivo) {
        if (typeof Swal !== 'undefined') {
            Swal.fire({
                title: `¿Anular Comprobante #${consecutivo}?`,
                text: 'Se revertirán los asientos contables y los gastos asociados volverán a quedar pendientes.',
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#ef4444',
                cancelButtonColor: '#64748b',
                confirmButtonText: 'Sí, Anular',
                cancelButtonText: 'Cancelar'
            }).then(result => {
                if (result.isConfirmed) {
                    ejecutarAnulacion(consecutivo);
                }
            });
        } else {
            if (confirm(`¿Anular Comprobante #${consecutivo}? Se revertirán los asientos contables.`)) {
                ejecutarAnulacion(consecutivo);
            }
        }
    }

    function ejecutarAnulacion(consecutivo) {
        fetch(`{{ url('/api/pago-gastos/anular') }}`, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': '{{ csrf_token() }}'
            },
            body: JSON.stringify({ consecutivo: consecutivo })
        })
        .then(res => res.json())
        .then(res => {
            if (res.status === 'ok') {
                safeAlert('Comprobante Anulado', res.message, 'success');
                cargarHistorialComprobantes();
                cargarGastosPendientes();
            } else {
                safeAlert('Error', res.message || 'No fue posible anular el comprobante.', 'error');
            }
        })
        .catch(err => {
            console.error(err);
            safeAlert('Error de Conexión', 'No se pudo comunicar con el servidor.', 'error');
        });
    }
</script>

@endsection