@extends('padre.padre')
@section('contenido')
    <!-- SweetAlert2 -->
    <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>
        :root {
            --primary-gradient: linear-gradient(135deg, #1e3a8a 0%, #3b82f6 100%);
            --secondary-gradient: linear-gradient(135deg, #111827 0%, #1f2937 100%);
            --accent-color: #3b82f6;
            --success-color: #10b981;
            --danger-color: #ef4444;
            --warning-color: #f59e0b;
            --info-color: #06b6d4;
            --bg-light: #f1f5f9;
            --card-shadow: 0 4px 20px -2px rgba(0, 0, 0, 0.1);
        }

        body {
            background-color: var(--bg-light);
            font-family: 'Outfit', 'Inter', sans-serif;
            overflow-x: hidden;
        }

        .payroll-hero {
            background: var(--primary-gradient);
            padding: 1rem 2rem;
            color: white;
            display: flex;
            justify-content: space-between;
            align-items: center;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }

        .main-container-fluid {
            padding: 1rem;
            min-height: calc(100vh - 60px);
        }

        .glass-card {
            background: rgba(255, 255, 255, 0.95);
            border-radius: 12px;
            box-shadow: var(--card-shadow);
            border: 1px solid rgba(255,255,255,0.2);
            overflow: hidden;
            display: flex;
            flex-direction: column;
            margin-bottom: 1rem;
        }

        .card-header {
            padding: 1rem 1.5rem;
            border-bottom: 1px solid rgba(0,0,0,0.05);
        }

        .form-control-modern {
            border: 1px solid #e2e8f0;
            border-radius: 8px;
            padding: 0.5rem 1rem;
            background: #f8fafc;
            color: #334155;
            transition: all 0.2s;
        }

        .form-control-modern:focus {
            border-color: var(--accent-color);
            background: #fff;
            box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
            outline: none;
        }

        .btn-modern {
            border: none;
            border-radius: 8px;
            padding: 0.6rem 1.2rem;
            font-weight: 600;
            letter-spacing: 0.5px;
            transition: all 0.2s;
            cursor: pointer;
            text-transform: uppercase;
            font-size: 0.85rem;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 0.5rem;
        }

        .btn-primary-modern {
            background: var(--primary-gradient);
            color: white;
            box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
        }

        .btn-primary-modern:hover {
            transform: translateY(-1px);
            box-shadow: 0 6px 15px rgba(59, 130, 246, 0.4);
            color: white;
        }

        .btn-success-modern {
            background: var(--success-color);
            color: white;
        }

        .btn-success-modern:hover {
            background: #059669;
            color: white;
        }

        .modern-table {
            width: 100%;
            border-collapse: separate;
            border-spacing: 0;
            font-size: 0.85rem;
        }

        .modern-table th {
            background: #f8fafc;
            color: #475569;
            font-weight: 600;
            padding: 1rem;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            border-bottom: 2px solid #e2e8f0;
            position: sticky;
            top: 0;
            z-index: 10;
        }

        .modern-table td {
            padding: 0.75rem 1rem;
            border-bottom: 1px solid #f1f5f9;
            color: #334155;
            vertical-align: middle;
        }

        .modern-table tbody tr:hover {
            background: #f8fafc;
        }

        .total-pay-box {
            background: #f8fafc;
            border: 2px dashed #94a3b8;
            border-radius: 12px;
            padding: 1.5rem;
            text-align: center;
        }

        .total-amount {
            font-size: 2rem;
            font-weight: 800;
            color: var(--success-color);
            margin: 0.5rem 0;
        }

    </style>

    <div class="payroll-hero">
        <div>
            <h4 class="m-0 font-weight-bold" style="letter-spacing: 1px;"><i class="fa fa-money"></i> MÓDULO DE PAGOS DE NÓMINA (CAUSACIÓN)</h4>
            <small class="opacity-75">Cruce de pasivos laborales (Cesantías, Prima, Salarios) contra bancos/caja</small>
        </div>
        <div>
            <div class="bg-white text-primary px-3 py-1 rounded shadow-sm text-center">
                <small class="d-block text-muted" style="font-size: 0.7rem; font-weight: 600;">FECHA TRABAJO</small>
                <span class="font-weight-bold" style="font-size: 0.9rem;">{{ date('d M Y') }}</span>
            </div>
        </div>
    </div>

    <div class="container-fluid main-container-fluid">
        <div class="row h-100">
            <!-- PANEL IZQUIERDO: FILTROS DE BÚSQUEDA Y PAGO -->
            <div class="col-md-4 d-flex flex-column h-100">
                <!-- Búsqueda de Causaciones -->
                <div class="glass-card mb-3">
                    <div class="card-header bg-secondary text-white">
                        <h6 class="m-0 font-weight-bold"><i class="fa fa-search"></i> BUSCAR DEUDAS (PASIVOS)</h6>
                    </div>
                    <div class="card-body">
                        <form id="formBusqueda">
                            <div class="form-group mb-3">
                                <label class="small font-weight-bold text-muted">Tipo de Búsqueda</label>
                                <select class="form-control form-control-modern w-100" id="tipo_busqueda" required>
                                    <option value="comprobante" selected>Por Comprobantes Específicos</option>
                                    <option value="historico">Por Saldo Histórico Acumulado</option>
                                </select>
                            </div>

                            <div class="form-group mb-3" id="grupo_comprobantes">
                                <label class="small font-weight-bold text-muted">Comp. Causaciones Orginales (Separados por coma)</label>
                                <input type="text" class="form-control form-control-modern w-100" id="comprobantes_origen" placeholder="Ej: 1, 2, 3, 4" required>
                                <small class="text-info"><i class="fa fa-info-circle"></i> Ingresa los números de comprobante de nómina donde se causó la deuda.</small>
                            </div>
                            
                            <div class="form-group mb-3">
                                <label class="small font-weight-bold text-muted">Cuenta del Pasivo a Pagar</label>
                                <select class="form-control form-control-modern w-100" id="cuenta_pasivo" required>
                                    <option value="" disabled selected>Seleccione cuenta (Ej. Prima, Cesantías)</option>
                                    @foreach($cuentas_pasivo as $cta)
                                        <option value="{{ $cta->codeC }}">{{ $cta->codeC }} - {{ $cta->NombreCuenta }}</option>
                                    @endforeach
                                </select>
                            </div>

                            <button type="submit" class="btn-modern btn-primary-modern w-100 mt-2" id="btnBuscarDeudas">
                                <i class="fa fa-search"></i> CONSULTAR SALDOS PENDIENTES
                            </button>
                        </form>
                    </div>
                </div>

                <!-- Panel de Pago -->
                <div class="glass-card flex-fill">
                    <div class="card-header bg-success text-white">
                        <h6 class="m-0 font-weight-bold"><i class="fa fa-bank"></i> REGISTRAR PAGO</h6>
                    </div>
                    <div class="card-body d-flex flex-column justify-content-between">
                        <div>
                            <div class="form-group mb-3">
                                <label class="small font-weight-bold text-muted"><i class="fa fa-calendar"></i> Fecha del Pago</label>
                                <input type="date" class="form-control form-control-modern w-100" id="fecha_pago" value="{{ date('Y-m-d') }}" required>
                            </div>

                            <div class="form-group mb-4">
                                <label class="small font-weight-bold text-muted">¿De dónde sale el dinero? (Activo)</label>
                                <select class="form-control form-control-modern w-100" id="cuenta_activo_pago">
                                    <option value="" disabled selected>Seleccione Caja o Banco</option>
                                    @foreach($cuentas_activo as $cta)
                                        <option value="{{ $cta->codeC }}">{{ $cta->codeC }} - {{ $cta->NombreCuenta }}</option>
                                    @endforeach
                                </select>
                            </div>

                            <div class="total-pay-box">
                                <h6 class="text-muted font-weight-bold m-0">TOTAL A PAGAR (SELECCIONADO)</h6>
                                <div class="total-amount" id="lbl_total_pago">$ 0</div>
                                <span class="badge badge-info" id="lbl_empleados_seleccionados">0 empleados seleccionados</span>
                            </div>
                        </div>

                        <button type="button" class="btn-modern btn-success-modern w-100 mt-4 py-3" id="btnProcesarPago" disabled>
                            <i class="fa fa-check-circle fa-lg"></i> PROCESAR PAGOS Y GENERAR EGRESO
                        </button>
                    </div>
                </div>
            </div>

            <!-- PANEL DERECHO: RESULTADOS -->
            <div class="col-md-8 d-flex flex-column h-100">
                <!-- Card 1: Detalle de Deudas -->
                <div class="glass-card mb-3" style="flex: 1; min-height: 250px;">
                    <div class="card-header bg-light d-flex justify-content-between align-items-center flex-wrap" style="gap: 10px;">
                        <h6 class="m-0 font-weight-bold text-secondary"><i class="fa fa-users"></i> DETALLE DE DEUDAS A EMPLEADOS</h6>
                        <div class="d-flex align-items-center" style="gap: 10px;">
                            <input type="text" id="buscar_empleado" class="form-control form-control-modern" placeholder="Buscar por cédula o nombre..." style="max-width: 250px; display: none; padding: 0.25rem 0.75rem; font-size: 0.85rem; height: auto;">
                            <button type="button" class="btn btn-sm btn-outline-secondary font-weight-bold" id="btnSeleccionarTodos" style="display:none;">SELECCIONAR TODOS</button>
                        </div>
                    </div>
                    
                    <div class="modern-table-container" style="overflow-y: auto; flex: 1;">
                        <table class="modern-table text-center" id="tablaCausaciones">
                            <thead>
                                <tr>
                                    <th width="50">
                                        Sel.
                                    </th>
                                    <th>Cédula</th>
                                    <th class="text-left">Nombres</th>
                                    <th>Comprobantes</th>
                                    <th class="text-right">Saldo Pendiente</th>
                                    <th class="text-right" style="width: 150px;">Valor a Pagar</th>
                                </tr>
                            </thead>
                            <tbody id="tbodyCausaciones">
                                <tr>
                                    <td colspan="6" class="p-5 text-muted text-center">
                                        <i class="fa fa-search fa-3x mb-3 opacity-25"></i>
                                        <h6>Realiza una búsqueda para ver los empleados con deudas pendientes.</h6>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>

                <!-- Card 2: Historial de Egresos Recientes -->
                <div class="glass-card mb-3" style="height: 260px; min-height: 200px;">
                    <div class="card-header bg-info text-white d-flex justify-content-between align-items-center flex-wrap" style="padding: 0.5rem 1rem; gap: 10px;">
                        <h6 class="m-0 font-weight-bold"><i class="fa fa-list"></i> ÚLTIMOS EGRESOS DE NÓMINA</h6>
                        <form id="formFiltroEgresos" class="d-flex align-items-center flex-wrap text-white m-0" style="gap: 8px; font-size: 0.8rem;">
                            <span>Desde:</span>
                            <input type="date" id="filtro_egreso_fi" class="form-control form-control-modern text-center" style="max-width: 130px; padding: 0.2rem 0.4rem; font-size: 0.8rem; height: auto; display: inline-block;">
                            <span>Hasta:</span>
                            <input type="date" id="filtro_egreso_ff" class="form-control form-control-modern text-center" style="max-width: 130px; padding: 0.2rem 0.4rem; font-size: 0.8rem; height: auto; display: inline-block;">
                            <button type="submit" class="btn btn-xs btn-light font-weight-bold" style="padding: 3px 8px; color: #1e3a8a;"><i class="fa fa-search"></i> FILTRAR</button>
                            <button type="button" class="btn btn-xs btn-outline-light font-weight-bold" id="btnLimpiarFiltroEgresos" style="padding: 3px 8px;"><i class="fa fa-times"></i></button>
                            <button type="button" class="btn btn-xs btn-outline-light font-weight-bold" id="btnActualizarEgresos" style="padding: 3px 8px;"><i class="fa fa-refresh"></i></button>
                        </form>
                    </div>
                    <div class="modern-table-container" style="overflow-y: auto; flex: 1;">
                        <table class="modern-table text-center table-sm">
                            <thead>
                                <tr>
                                    <th>Egreso N°</th>
                                    <th>Fecha</th>
                                    <th class="text-left">Concepto</th>
                                    <th>Empleados</th>
                                    <th class="text-right">Total Pagado</th>
                                    <th>Acciones</th>
                                </tr>
                            </thead>
                            <tbody id="tbodyPagosRecientes">
                                <tr>
                                    <td colspan="6" class="p-4 text-muted text-center">
                                        <i class="fa fa-spinner fa-spin"></i> Cargando egresos...
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>

                <!-- Card 3: Reimprimir Comprobante -->
                <div class="glass-card mb-3">
                    <div class="card-header text-white" style="background-color: #00c0ef; padding: 0.75rem 1.25rem;">
                        <h6 class="m-0 font-weight-bold"><i class="fa fa-print"></i> REIMPRIMIR COMPROBANTE</h6>
                    </div>
                    <div class="card-body" style="padding: 1.25rem;">
                        <div class="form-group mb-3">
                            <label class="small font-weight-bold text-muted d-block mb-2">Número de Egreso de Nómina</label>
                            <input type="number" class="form-control form-control-modern w-100" id="reimprimir_consecutivo" placeholder="Ej: 15" required style="padding: 0.6rem 1rem; font-size: 1rem; height: auto;">
                        </div>
                        <button type="button" class="btn-modern btn-primary-modern w-100 py-3" id="btnReimprimir" style="font-size: 0.95rem; font-weight: 700; border-radius: 8px;">
                            <i class="fa fa-file-pdf-o"></i> REIMPRIMIR / DESCARGAR PDF
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>

@endsection

@section("pie")
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            const formatCurrency = new Intl.NumberFormat('es-CO', { style: 'currency', currency: 'COP', minimumFractionDigits: 0 });
            
            let empleadosPendientes = [];

            // Elementos DOM
            const formBusqueda = document.getElementById('formBusqueda');
            const tbodyCausaciones = document.getElementById('tbodyCausaciones');
            const btnProcesarPago = document.getElementById('btnProcesarPago');
            const lblTotalPago = document.getElementById('lbl_total_pago');
            const lblEmpleadosSeleccionados = document.getElementById('lbl_empleados_seleccionados');
            const btnBuscarDeudas = document.getElementById('btnBuscarDeudas');
            const btnSeleccionarTodos = document.getElementById('btnSeleccionarTodos');
            const buscarEmpleadoInput = document.getElementById('buscar_empleado');
            const btnReimprimir = document.getElementById('btnReimprimir');
            const reimprimirConsecutivo = document.getElementById('reimprimir_consecutivo');
            const btnActualizarEgresos = document.getElementById('btnActualizarEgresos');
            const tbodyPagosRecientes = document.getElementById('tbodyPagosRecientes');
            
            const formFiltroEgresos = document.getElementById('formFiltroEgresos');
            const filtroEgresoFi = document.getElementById('filtro_egreso_fi');
            const filtroEgresoFf = document.getElementById('filtro_egreso_ff');
            const btnLimpiarFiltroEgresos = document.getElementById('btnLimpiarFiltroEgresos');

            const tipoBusqueda = document.getElementById('tipo_busqueda');

            // --- REIMPRIMIR COMPROBANTE ---
            btnReimprimir.addEventListener('click', function() {
                const consecutivo = reimprimirConsecutivo.value.trim();
                if (!consecutivo) {
                    Swal.fire('Atención', 'Debe ingresar un número de egreso.', 'warning');
                    return;
                }
                window.open(`contabilidad/egreso-nomina/pdf/${consecutivo}`, '_blank');
            });

            // --- FILTRAR EGRESOS POR FECHA ---
            formFiltroEgresos.addEventListener('submit', function(e) {
                e.preventDefault();
                cargarEgresosRecientes();
            });

            btnLimpiarFiltroEgresos.addEventListener('click', function() {
                filtroEgresoFi.value = '';
                filtroEgresoFf.value = '';
                cargarEgresosRecientes();
            });

            // --- VER RECIENTES ---
            function cargarEgresosRecientes() {
                tbodyPagosRecientes.innerHTML = '<tr><td colspan="6" class="text-center p-4"><i class="fa fa-spinner fa-spin"></i> Cargando pagos...</td></tr>';
                
                const fi = filtroEgresoFi.value;
                const ff = filtroEgresoFf.value;
                let url = 'api/nomina/pagos-recientes';
                if (fi && ff) {
                    url += `?fi=${fi}&ff=${ff}`;
                }

                fetch(url)
                    .then(res => res.json())
                    .then(data => {
                        if (data.status === 'ok' && data.pagos.length > 0) {
                            tbodyPagosRecientes.innerHTML = '';
                            data.pagos.forEach(p => {
                                const tr = document.createElement('tr');
                                tr.innerHTML = `
                                    <td><strong>${p.consecutivo}</strong></td>
                                    <td>${p.fecha}</td>
                                    <td class="text-left"><small>${p.observacion || 'Pago de Nómina'}</small></td>
                                    <td><span class="badge badge-light border text-muted">${p.total_empleados}</span></td>
                                    <td class="text-right font-weight-bold text-success">${formatCurrency.format(p.total_pagado)}</td>
                                    <td>
                                        <button type="button" class="btn btn-xs btn-outline-info btn-imprimir-reciente" data-consecutivo="${p.consecutivo}" title="Imprimir PDF" style="padding: 2px 6px;">
                                            <i class="fa fa-file-pdf-o"></i> PDF
                                        </button>
                                        <button type="button" class="btn btn-xs btn-outline-secondary btn-seleccionar-reciente" data-consecutivo="${p.consecutivo}" title="Cargar para reimprimir" style="padding: 2px 6px;">
                                            <i class="fa fa-arrow-left"></i> Cargar
                                        </button>
                                    </td>
                                `;
                                tbodyPagosRecientes.appendChild(tr);
                            });

                            // Vincular eventos de botones
                            tbodyPagosRecientes.querySelectorAll('.btn-imprimir-reciente').forEach(btn => {
                                btn.addEventListener('click', function() {
                                    window.open(`contabilidad/egreso-nomina/pdf/${this.dataset.consecutivo}`, '_blank');
                                });
                            });

                            tbodyPagosRecientes.querySelectorAll('.btn-seleccionar-reciente').forEach(btn => {
                                btn.addEventListener('click', function() {
                                    reimprimirConsecutivo.value = this.dataset.consecutivo;
                                    reimprimirConsecutivo.focus();
                                });
                            });
                        } else {
                            tbodyPagosRecientes.innerHTML = '<tr><td colspan="6" class="text-muted p-4">No se han registrado pagos de nómina aún.</td></tr>';
                        }
                    })
                    .catch(err => {
                        console.error(err);
                        tbodyPagosRecientes.innerHTML = '<tr><td colspan="6" class="text-danger p-4">Error al cargar historial.</td></tr>';
                    });
            }

            btnActualizarEgresos.addEventListener('click', cargarEgresosRecientes);
            cargarEgresosRecientes();
            const grupoComprobantes = document.getElementById('grupo_comprobantes');
            const comprobantesOrigen = document.getElementById('comprobantes_origen');

            // Mostrar/ocultar input de comprobantes según tipo de búsqueda
            tipoBusqueda.addEventListener('change', function () {
                if (this.value === 'historico') {
                    grupoComprobantes.style.display = 'none';
                    comprobantesOrigen.removeAttribute('required');
                } else {
                    grupoComprobantes.style.display = 'block';
                    comprobantesOrigen.setAttribute('required', 'required');
                }
            });

            // --- BUSCAR CAUSACIONES ---
            formBusqueda.addEventListener('submit', function (e) {
                e.preventDefault();
                
                const tipoBusquedaVal = tipoBusqueda.value;
                const comprobantesStr = comprobantesOrigen.value.trim();
                const cuentaPasivo = document.getElementById('cuenta_pasivo').value;

                if (tipoBusquedaVal === 'comprobante' && !comprobantesStr) {
                    Swal.fire('Error', 'Debe ingresar al menos un número de comprobante.', 'warning');
                    return;
                }

                if (!cuentaPasivo) {
                    Swal.fire('Error', 'Faltan datos para la búsqueda.', 'warning');
                    return;
                }

                // Parsear comprobantes: "1, 2, 3" -> [1,2,3]
                const comprobantes = tipoBusquedaVal === 'comprobante'
                    ? comprobantesStr.split(',').map(s => s.trim()).filter(s => s !== '')
                    : [];

                // Loader
                btnBuscarDeudas.innerHTML = '<i class="fa fa-spinner fa-spin"></i> BUSCANDO...';
                btnBuscarDeudas.disabled = true;
                tbodyCausaciones.innerHTML = '<tr><td colspan="6" class="text-center p-4">Cargando datos...</td></tr>';
                
                const payload = {
                    comprobantes: comprobantes,
                    cuenta_pasivo: cuentaPasivo,
                    tipo_busqueda: tipoBusquedaVal,
                    _token: '{{ csrf_token() }}'
                };

                fetch('api/nomina/causaciones', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'Accept': 'application/json'
                    },
                    body: JSON.stringify(payload)
                })
                .then(res => res.json())
                .then(data => {
                    btnBuscarDeudas.innerHTML = '<i class="fa fa-search"></i> CONSULTAR SALDOS PENDIENTES';
                    btnBuscarDeudas.disabled = false;

                    if (data.status === 'ok') {
                        buscarEmpleadoInput.value = '';
                        empleadosPendientes = data.empleados;
                        renderTablaCausaciones();
                    } else {
                        Swal.fire('Atención', data.message || 'No se encontraron registros.', 'info');
                        tbodyCausaciones.innerHTML = `<tr><td colspan="6" class="text-muted p-4">${data.message || 'No hay datos'}</td></tr>`;
                        empleadosPendientes = [];
                        buscarEmpleadoInput.value = '';
                        buscarEmpleadoInput.style.display = 'none';
                        actualizarTotalesPago();
                    }
                })
                .catch(err => {
                    console.error(err);
                    btnBuscarDeudas.innerHTML = '<i class="fa fa-search"></i> CONSULTAR SALDOS PENDIENTES';
                    btnBuscarDeudas.disabled = false;
                    Swal.fire('Error', 'Error de conexión con el servidor.', 'error');
                });
            });

            // --- FILTRAR EMPLEADOS EN TIEMPO REAL ---
            buscarEmpleadoInput.addEventListener('input', function() {
                const query = this.value.toLowerCase().trim();
                const rows = tbodyCausaciones.querySelectorAll('tr');
                
                rows.forEach(row => {
                    if (row.cells.length < 5) return; // omitir fila vacía/loader
                    
                    const nit = row.cells[1].textContent.toLowerCase();
                    const nombres = row.cells[2].textContent.toLowerCase();
                    
                    if (nit.includes(query) || nombres.includes(query)) {
                        row.style.display = '';
                    } else {
                        row.style.display = 'none';
                    }
                });
            });

            // --- RENDERIZAR TABLA ---
            function renderTablaCausaciones() {
                tbodyCausaciones.innerHTML = '';
                
                if (empleadosPendientes.length === 0) {
                    tbodyCausaciones.innerHTML = '<tr><td colspan="6" class="text-center p-4 text-muted">No se encontraron empleados con saldos en estos comprobantes.</td></tr>';
                    btnSeleccionarTodos.style.display = 'none';
                    buscarEmpleadoInput.style.display = 'none';
                    return;
                }

                btnSeleccionarTodos.style.display = 'inline-block';
                buscarEmpleadoInput.style.display = 'inline-block';

                empleadosPendientes.forEach((emp, index) => {
                    const tr = document.createElement('tr');
                    tr.innerHTML = `
                        <td>
                            <input type="checkbox" class="chk-empleado" style="width: 22px; height: 22px; cursor: pointer; accent-color: var(--success-color);" data-index="${index}">
                        </td>
                        <td><strong>${emp.nit}</strong></td>
                        <td class="text-left">${emp.nombres}</td>
                        <td><span class="badge badge-light border text-muted">${emp.comprobantes_unidos}</span></td>
                        <td class="text-right font-weight-bold text-danger">${formatCurrency.format(emp.saldo_total)}</td>
                        <td>
                            <input type="number" class="form-control form-control-modern text-right input-valor-pagar" 
                                   data-index="${index}" 
                                   value="${emp.saldo_total}" 
                                   min="1" 
                                   max="${emp.saldo_total}" 
                                   style="max-width: 120px; display: inline-block; padding: 0.25rem 0.5rem; height: auto;">
                        </td>
                    `;
                    tbodyCausaciones.appendChild(tr);
                });

                // Attach events to checkboxes
                document.querySelectorAll('.chk-empleado').forEach(chk => {
                    chk.addEventListener('change', actualizarTotalesPago);
                });

                // Attach events to inputs
                document.querySelectorAll('.input-valor-pagar').forEach(input => {
                    input.addEventListener('input', function() {
                        const index = parseInt(this.dataset.index);
                        const maxVal = parseFloat(empleadosPendientes[index].saldo_total);
                        let currentVal = parseFloat(this.value);

                        if (isNaN(currentVal) || currentVal < 0) {
                            currentVal = 0;
                        } else if (currentVal > maxVal) {
                            Swal.fire('Valor Excedido', 'El valor a pagar no puede ser mayor que el saldo pendiente.', 'warning');
                            this.value = maxVal;
                            currentVal = maxVal;
                        }
                        
                        // If the checkbox is checked, update total
                        actualizarTotalesPago();
                    });
                });
                
                actualizarTotalesPago();
            }

            // --- SELECCIONAR TODOS ---
            let todosSeleccionados = false;
            btnSeleccionarTodos.addEventListener('click', function() {
                todosSeleccionados = !todosSeleccionados;
                const rows = tbodyCausaciones.querySelectorAll('tr');
                rows.forEach(row => {
                    if (row.cells.length >= 5 && row.style.display !== 'none') {
                        const chk = row.querySelector('.chk-empleado');
                        if (chk) chk.checked = todosSeleccionados;
                    }
                });
                this.innerText = todosSeleccionados ? 'DESELECCIONAR TODOS' : 'SELECCIONAR TODOS';
                actualizarTotalesPago();
            });

            // --- ACTUALIZAR TOTALES AL CAMBIAR CHECKBOXES ---
            function actualizarTotalesPago() {
                let totalAPagar = 0;
                let numSeleccionados = 0;

                const checkboxes = document.querySelectorAll('.chk-empleado');
                checkboxes.forEach(chk => {
                    if (chk.checked) {
                        const idx = parseInt(chk.dataset.index);
                        const inputVal = document.querySelector(`.input-valor-pagar[data-index="${idx}"]`);
                        const val = inputVal ? parseFloat(inputVal.value) : 0;
                        totalAPagar += isNaN(val) ? 0 : val;
                        numSeleccionados++;
                    }
                });

                lblTotalPago.innerText = formatCurrency.format(totalAPagar);
                lblEmpleadosSeleccionados.innerText = `${numSeleccionados} empleados seleccionados`;

                if (numSeleccionados > 0) {
                    btnProcesarPago.disabled = false;
                } else {
                    btnProcesarPago.disabled = true;
                }
            }

            // --- PROCESAR PAGO ---
            btnProcesarPago.addEventListener('click', function() {
                const cuentaActivo = document.getElementById('cuenta_activo_pago').value;
                const cuentaPasivo = document.getElementById('cuenta_pasivo').value;
                const fechaPago = document.getElementById('fecha_pago').value;
                const tipoBusquedaVal = tipoBusqueda.value;
                const comprobantesStr = comprobantesOrigen.value;

                if (!fechaPago) {
                    Swal.fire('Falta Fecha', 'Debe seleccionar la fecha del pago.', 'warning');
                    return;
                }

                if (!cuentaActivo) {
                    Swal.fire('Falta Cuenta', 'Debe seleccionar la cuenta de Activo (Caja o Banco) para realizar el pago.', 'warning');
                    return;
                }

                if (!cuentaPasivo) return;

                const empleadosApagar = [];
                let totalAPagar = 0;

                document.querySelectorAll('.chk-empleado').forEach(chk => {
                    if (chk.checked) {
                        const idx = parseInt(chk.dataset.index);
                        const inputVal = document.querySelector(`.input-valor-pagar[data-index="${idx}"]`);
                        const valorPago = inputVal ? parseFloat(inputVal.value) : 0;

                        const empCopy = { ...empleadosPendientes[idx], valor_pago: valorPago };
                        empleadosApagar.push(empCopy);
                        totalAPagar += valorPago;
                    }
                });

                if (empleadosApagar.length === 0) return;

                Swal.fire({
                    title: '¿Confirmar Pago?',
                    html: `Se registrará un pago por <strong>${formatCurrency.format(totalAPagar)}</strong> con fecha <strong>${fechaPago}</strong> saliendo de la cuenta <strong>${cuentaActivo}</strong> para liquidar el pasivo <strong>${cuentaPasivo}</strong> a <strong>${empleadosApagar.length}</strong> empleados.`,
                    icon: 'question',
                    showCancelButton: true,
                    confirmButtonColor: '#10b981',
                    cancelButtonColor: '#6e7d88',
                    confirmButtonText: 'Sí, Pagar y Generar Egreso',
                    cancelButtonText: 'Cancelar'
                }).then((result) => {
                    if (result.isConfirmed) {
                        ejecutarPagoBackend(empleadosApagar, cuentaActivo, cuentaPasivo, comprobantesStr, tipoBusquedaVal, fechaPago);
                    }
                });
            });

            function ejecutarPagoBackend(empleadosApagar, cuentaActivo, cuentaPasivo, comprobantesStr, tipoBusquedaVal, fechaPago) {
                // Bloquear UI
                btnProcesarPago.innerHTML = '<i class="fa fa-spinner fa-spin"></i> REGISTRANDO PAGOS...';
                btnProcesarPago.disabled = true;

                const payload = {
                    empleados: empleadosApagar,
                    cuenta_activo: cuentaActivo,
                    cuenta_pasivo: cuentaPasivo,
                    comprobantes_origen: comprobantesStr, // Para dejar el rastro en el egreso
                    tipo_busqueda: tipoBusquedaVal,
                    fecha_pago: fechaPago,
                    bodega: '{{ session("bodega", 1) }}',
                    _token: '{{ csrf_token() }}'
                };

                fetch('api/nomina/pagar', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'Accept': 'application/json'
                    },
                    body: JSON.stringify(payload)
                })
                .then(res => res.json())
                .then(data => {
                    if (data.status === 'ok') {
                        Swal.fire({
                            title: '¡Pago Registrado!',
                            html: `Se ha generado el comprobante de egreso número: <strong>${data.comprobante_egreso}</strong><br>El pasivo ha sido saldado.`,
                            icon: 'success',
                            showCancelButton: true,
                            confirmButtonColor: '#10b981',
                            cancelButtonColor: '#6e7d88',
                            confirmButtonText: '<i class="fa fa-file-pdf-o"></i> Descargar PDF',
                            cancelButtonText: 'Cerrar'
                        }).then((result) => {
                            if (result.isConfirmed) {
                                window.open(`contabilidad/egreso-nomina/pdf/${data.comprobante_egreso}`, '_blank');
                            }
                            // Limpiar, volver a buscar y actualizar egresos
                            document.getElementById('formBusqueda').dispatchEvent(new Event('submit'));
                            cargarEgresosRecientes();
                            btnProcesarPago.innerHTML = '<i class="fa fa-check-circle fa-lg"></i> PROCESAR PAGOS Y GENERAR EGRESO';
                        });
                    } else {
                        Swal.fire('Error', data.message || 'Error al procesar el pago.', 'error');
                        btnProcesarPago.innerHTML = '<i class="fa fa-check-circle fa-lg"></i> PROCESAR PAGOS Y GENERAR EGRESO';
                        btnProcesarPago.disabled = false;
                    }
                })
                .catch(err => {
                    console.error(err);
                    Swal.fire('Error', 'Falla de conexión al procesar el pago.', 'error');
                    btnProcesarPago.innerHTML = '<i class="fa fa-check-circle fa-lg"></i> PROCESAR PAGOS Y GENERAR EGRESO';
                    btnProcesarPago.disabled = false;
                });
            }
        });
    </script>
@endsection