@extends('layouts.kaiadmin.master')

@section('title', 'Factura Electrónica')

@section('content_header')
    <div class="page-header">
        <h1 class="page-title">
            <i class="fas fa-file-invoice-dollar mr-2"></i>
            Factura Electrónica en Línea - FEL
        </h1>
    </div>
@stop

@section('content')
<div class="card shadow-sm border-0">
    <div class="card-header bg-gradient-primary">
        <div class="d-flex justify-content-between align-items-center">
            <h4 class="mb-0">
                <i class="fas fa-receipt mr-2"></i>
                Detalles de la Factura
            </h4>
            <button id="btnGenerarFactura" class="btn btn-primary btn-lg">
                <i class="fas fa-check-circle mr-2"></i>
                Generar Factura
            </button>
        </div>
    </div>
    
    <div class="card-body p-4">
        <!-- Búsqueda de cuenta -->
        <div class="search-section mb-4 p-4 bg-light rounded">
            <div class="row align-items-end">
                <div class="col-md-6">
                    <label for="codigoservicio" class="form-label font-weight-bold">
                        <i class="fas fa-search mr-1"></i>
                        Buscar Cuenta
                    </label>
                    <div class="input-group input-group-lg">
                        <div class="input-group-prepend">
                            <span class="input-group-text bg-white">
                                <i class="fas fa-hashtag text-primary"></i>
                            </span>
                        </div>
                        <input type="text" 
                               id="codigoservicio" 
                               name="codigoservicio" 
                               class="form-control text-uppercase"
                               style="text-transform: uppercase;"
                            oninput="this.value = this.value.toUpperCase();" 
                               placeholder="Ej: A-001">
                        <div class="input-group-append">
                            <button class="btn btn-primary px-4" type="button" id="btnBuscar">
                                <i class="fas fa-search mr-2"></i>
                                Buscar
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Información del cliente y sistema -->
        <div class="row mb-4">
            <!-- Datos del servicio -->
            <div class="col-lg-6 mb-3">
                <div class="info-card h-100 p-4 bg-white border rounded shadow-sm">
                    <h5 class="mb-3 text-primary border-bottom pb-2">
                        <i class="fas fa-user-circle mr-2"></i>
                        Información del Cliente
                    </h5>
                    <div class="info-item mb-3">
                        <span class="info-label">
                            <i class="fas fa-user text-muted mr-2"></i>
                            Usuario:
                        </span>
                        <span class="info-value" id="usrSerNombreUsuario">-</span>
                    </div>
                    <div class="info-item mb-3">
                        <span class="info-label">
                            <i class="fas fa-map-marker-alt text-muted mr-2"></i>
                            Dirección:
                        </span>
                        <span class="info-value" id="usrSerDireccion">-</span>
                    </div>
                    <div class="info-item mb-3">
                        <span class="info-label">
                            <i class="fas fa-tachometer-alt text-muted mr-2"></i>
                            Medidor:
                        </span>
                        <span class="info-value" id="usrSerContador">-</span>
                    </div>
                    <div class="info-item">
                        <span class="info-label">
                            <i class="fas fa-id-card text-muted mr-2"></i>
                            NIT:
                        </span>
                        <span class="info-value" id="usrSerNit">-</span>
                    </div>
                </div>
            </div>

            <!-- Información del sistema -->
            <div class="col-lg-6 mb-3">
                <div class="info-card h-100 p-4 bg-white border rounded shadow-sm">
                    <h5 class="mb-3 text-success border-bottom pb-2">
                        <i class="fas fa-info-circle mr-2"></i>
                        Información del Sistema
                    </h5>
                    <div class="info-item mb-3">
                        <span class="info-label">
                            <i class="fas fa-calendar-alt text-muted mr-2"></i>
                            Fecha:
                        </span>
                        <span class="info-value">{{ date('d/m/Y') }}</span>
                    </div>
                    <div class="info-item mb-3">
                        <span class="info-label">
                            <i class="fas fa-user-tie text-muted mr-2"></i>
                            Receptor:
                        </span>
                        <span class="info-value" id="receptorName">-</span>
                    </div>
                    <div class="info-item">
                        <span class="info-label">
                            <i class="fas fa-cash-register text-muted mr-2"></i>
                            Caja:
                        </span>
                        <span class="info-value" id="cajaName">-</span>
                    </div>
                </div>
            </div>
        </div>

        <!-- Tabla de registros -->
        <div class="table-section">
            <h5 class="mb-3">
                <i class="fas fa-list-alt mr-2 text-primary"></i>
                Registros Pendientes
            </h5>
            <div class="table-responsive">
                <table id="facturaTable" class="table table-hover table-bordered">
                    <thead class="thead-light">
                        <tr>
                            <th><i class="fas fa-calendar mr-1"></i> Fecha</th>
                            <th><i class="fas fa-align-left mr-1"></i> Descripción</th>
                            <th><i class="fas fa-bolt mr-1"></i> Kwh</th>
                            <th><i class="fas fa-exclamation-triangle mr-1"></i> Vencido</th>
                            <th><i class="fas fa-money-bill-wave mr-1"></i> Q. Total</th>
                            <th><i class="fas fa-percent mr-1"></i> IVA</th>
                        </tr>
                    </thead>
                    <tbody></tbody>
                </table>
            </div>
        </div>

        <!-- Total a pagar -  -->
        <div class="row mt-4">
            <div class="col-12">
                
                    <div class="d-flex justify-content-between align-items-center flex-wrap">
                        <div class="d-flex align-items-center mb-2 mb-md-0">
                            <label for="registros-facturar" class="mb-0 mr-3 font-weight-bold">
                                <i class="fas fa-file-invoice mr-2"></i>
                                Registros a facturar:
                            </label>
                            <input type="number" 
                                   id="registros-facturar" 
                                   name="registros-facturar" 
                                   min="0" 
                                   value="0" 
                                   class="form-control form-control-lg font-weight-bold text-center" 
                                   style="width: 100px; background: white; color: #2c3e50;">
                        </div>
                        <div class="total-display text-center">
                            <div class="mb-1" style="font-size: 0.9rem; opacity: 0.9;">
                                <i class="fas fa-calculator mr-1"></i>TOTAL A PAGAR
                            </div>
                            <div class="total-pagar font-weight-bold" style="font-size: 2rem; text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);">
                                Q 0.00
                            </div>
                        </div>
                    </div>
                
            </div>
        </div>
    </div>
</div>
@stop

@section('css')
<style>
    /* Gradientes personalizados */
    .bg-gradient-primary {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    }
    
    .bg-gradient-success {
        background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
    }

    /* Header de página */
    .page-header {
        margin-bottom: 1.5rem;
    }
    
    .page-title {
        color: #2c3e50;
        font-weight: 600;
        font-size: 1.75rem;
    }

    /* Card principal */
    .card {
        border-radius: 12px;
        overflow: hidden;
    }
    
    .card-header {
        padding: 1.5rem;
        border: none;
    }

    /* Sección de búsqueda */
    .search-section {
        border-left: 4px solid #667eea;
    }

    /* Cards de información */
    .info-card {
        transition: all 0.3s ease;
    }
    
    .info-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0,0,0,0.1) !important;
    }
    
    .info-item {
        display: flex;
        justify-content: space-between;
        align-items: start;
    }
    
    .info-label {
        font-weight: 600;
        color: #555;
        min-width: 120px;
    }
    
    .info-value {
        font-weight: 500;
        color: #2c3e50;
        text-align: right;
        flex: 1;
    }

    /* Tabla */
    .table-section {
        margin-top: 2rem;
    }
    
    #facturaTable {
        border-radius: 8px;
        overflow: hidden;
    }
    
    #facturaTable thead th {
        background-color: #f8f9fa;
        font-weight: 600;
        text-transform: uppercase;
        font-size: 0.85rem;
        color: #495057;
        border-bottom: 2px solid #dee2e6;
        padding: 1rem 0.75rem;
    }
    
    #facturaTable tbody td {
        vertical-align: middle;
        padding: 0.85rem 0.75rem;
        font-size: 0.9rem;
    }
    
    #facturaTable tbody tr {
        transition: all 0.2s ease;
    }
    
    #facturaTable tbody tr:hover {
        background-color: #f1f3f5;
        transform: scale(1.01);
    }

    /* Estados de vencimiento */
    .vencido-si {
        background: linear-gradient(135deg, #ff6b6b 0%, #ee5a6f 100%);
        color: white;
        padding: 0.4rem 0.8rem;
        border-radius: 20px;
        font-weight: 600;
        font-size: 0.85rem;
        display: inline-block;
        box-shadow: 0 2px 4px rgba(238, 90, 111, 0.3);
    }
    
    .vencido-no {
        background: linear-gradient(135deg, #51cf66 0%, #37b24d 100%);
        color: white;
        padding: 0.4rem 0.8rem;
        border-radius: 20px;
        font-weight: 600;
        font-size: 0.85rem;
        display: inline-block;
        box-shadow: 0 2px 4px rgba(55, 178, 77, 0.3);
    }

    /* Sección de total - MEJORADA */
    .total-section {
        border-radius: 10px;
        border: 2px solid rgba(255,255,255,0.3);
    }
    
    .total-display {
        min-width: 200px;
    }
    
    .total-pagar {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        color: #ffffff !important;
        font-weight: bold !important;
        text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
        background: rgba(255,255,255,0.2);
        padding: 0.5rem 1.5rem;
        border-radius: 10px;
        border: 2px solid rgba(255,255,255,0.5);
    }

    /* Inputs */
    .form-control:focus {
        border-color: #667eea;
        box-shadow: 0 0 0 0.2rem rgba(102, 126, 234, 0.25);
    }
    
    .input-group-text {
        border: 1px solid #ced4da;
    }

    /* Botones */
    .btn {
        transition: all 0.3s ease;
        font-weight: 500;
    }
    
    .btn:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 8px rgba(0,0,0,0.15);
    }
    
    .btn-primary {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        border: none;
    }
    
    .btn-light {
        background: white;
        color: #667eea;
        border: 2px solid white;
        font-weight: 600;
    }
    
    .btn-light:hover {
        background: #f8f9fa;
        color: #764ba2;
    }

    /* DataTables personalización */
    .dataTables_wrapper .dataTables_length select {
        padding: 0.375rem 1.75rem 0.375rem 0.75rem;
        border-radius: 0.25rem;
    }
    
    .dataTables_wrapper .dataTables_filter input {
        border-radius: 20px;
        padding: 0.5rem 1rem;
        border: 1px solid #ced4da;
    }
    
    .dataTables_wrapper .dataTables_paginate .paginate_button.current {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
        border-color: #667eea !important;
        color: white !important;
    }

    /* Responsive */
    @media (max-width: 768px) {
        .page-title {
            font-size: 1.25rem;
        }
        
        .info-item {
            flex-direction: column;
        }
        
        .info-value {
            text-align: left;
            margin-top: 0.25rem;
        }
        
        .total-display {
            min-width: 100%;
            margin-top: 1rem;
        }
        
        .total-pagar {
            font-size: 1.5rem !important;
            padding: 0.5rem 1rem;
        }
    }

    /* Animaciones */
    @keyframes fadeIn {
        from { opacity: 0; transform: translateY(10px); }
        to { opacity: 1; transform: translateY(0); }
    }
    
    .card {
        animation: fadeIn 0.5s ease-out;
    }
    
    /* Efecto de pulso para cambios en el total */
    @keyframes pulse {
        0% { transform: scale(1); }
        50% { transform: scale(1.05); }
        100% { transform: scale(1); }
    }
    
    .total-pagar.changed {
        animation: pulse 0.5s ease-in-out;
    }
</style>
@stop

@section('js')
<script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

<script>
let facturaTable;
let registrosGlobales = [];
let vencidosCount = 0;
let totalRegistros = 0;
let codigoServicioActual = '';

// Ordenar por fecha ISO descendente
function ordenarPorFechaDesc(arr) {
    return arr.slice().sort((a,b) => {
        const dateA = a.fechaISO ? new Date(a.fechaISO) : new Date(a.fechaIngreso?.split('/').reverse().join('-'));
        const dateB = b.fechaISO ? new Date(b.fechaISO) : new Date(b.fechaIngreso?.split('/').reverse().join('-'));
        return dateB - dateA;
    });
}

// Calcula selección: todos vencidos + extras no vencidos
function calcularSeleccion(numSeleccionar) {
    if (!Array.isArray(registrosGlobales) || registrosGlobales.length === 0) {
        console.log('No hay registros para calcular selección');
        return { seleccion: [], total: 0 };
    }

    const ordenados = ordenarPorFechaDesc(registrosGlobales);
    const vencidos = ordenados.filter(r => r.vencido === true || r.vencido === 'Sí');
    const noVencidos = ordenados.filter(r => !(r.vencido === true || r.vencido === 'Sí'));

    console.log('Vencidos encontrados:', vencidos.length);
    console.log('No vencidos:', noVencidos.length);

    const num = Math.min(Math.max(parseInt(numSeleccionar) || 0, vencidos.length), ordenados.length);
    const seleccion = vencidos.slice(0, num);
    const extraNecesarios = Math.max(0, num - vencidos.length);

    if (extraNecesarios > 0) {
        seleccion.push(...noVencidos.slice(0, extraNecesarios));
    }

    const total = seleccion.reduce((s, it) => s + (parseFloat(it.cargoQ) || 0), 0);
    
    console.log('Selección calculada:', {
        solicitados: numSeleccionar,
        vencidosSeleccionados: vencidos.slice(0, num).length,
        noVencidosSeleccionados: extraNecesarios,
        total: total
    });

    return { seleccion, total };
}

// Función mejorada para actualizar el total con efectos visuales
function actualizarTotalPagar(total) {
    const totalElement = document.querySelector('.total-pagar');
    const formattedTotal = `Q ${total.toFixed(2)}`;
    
    // Solo animar si el valor cambió
    if (totalElement.textContent !== formattedTotal) {
        totalElement.textContent = formattedTotal;
        totalElement.classList.add('changed');
        
        // Remover la clase de animación después de completar
        setTimeout(() => {
            totalElement.classList.remove('changed');
        }, 500);
    }
}

// Actualizar UI inicial
function aplicarTotalesInicial() {
    if (!Array.isArray(registrosGlobales)) {
        console.error('registrosGlobales no es un array');
        return;
    }

    const venc = registrosGlobales.filter(r => r.vencido === true || r.vencido === 'Sí');
    vencidosCount = venc.length;
    totalRegistros = registrosGlobales.length;
    const totalVencidos = venc.reduce((s, it) => s + (parseFloat(it.cargoQ) || 0), 0);

    const input = document.getElementById('registros-facturar');
    input.min = vencidosCount;
    input.max = totalRegistros;
    input.value = vencidosCount;

    actualizarTotalPagar(totalVencidos);

    console.log('Totales aplicados:', {
        totalRegistros: totalRegistros,
        vencidosCount: vencidosCount,
        totalVencidos: totalVencidos
    });
}

// Cargar receptor/caja inicial
document.addEventListener('DOMContentLoaded', () => {
    fetch('/facturacion', { headers: { "X-Requested-With": "XMLHttpRequest" } })
        .then(res => res.json())
        .then(data => {
            document.getElementById('receptorName').textContent = data.receptor ?? '-';
            document.getElementById('cajaName').textContent = data.caja ?? '-';
        })
        .catch(err => {
            console.error('Error cargando datos iniciales:', err);
        });
});

// Buscar servicio y DataTable CON SERVER-SIDE
document.getElementById('btnBuscar').addEventListener('click', function() {
    const codigo = document.getElementById('codigoservicio').value.trim();
    if (!codigo) {
        Swal.fire({
            icon: 'error',
            title: 'Error',
            text: 'Ingrese un código de servicio',
            confirmButtonColor: '#667eea'
        });
        return;
    }

    codigoServicioActual = codigo;
    
    Swal.fire({ 
        title: 'Buscando cuenta...', 
        html: '<div class="spinner-border text-primary" role="status"><span class="sr-only">Cargando...</span></div>',
        allowOutsideClick: false,
        showConfirmButton: false
    });

    // Destruir DataTable existente
    if ($.fn.DataTable.isDataTable('#facturaTable')) {
        facturaTable.destroy();
        $('#facturaTable tbody').empty();
    }

    // Inicializar DataTable con server-side processing
    facturaTable = $('#facturaTable').DataTable({
        processing: false,
        serverSide: true,
        ajax: {
            url: '/buscar-servicio',
            type: 'GET',
            data: function (d) {
                d.codigo = codigoServicioActual;
                d.draw = d.draw;
                d.start = d.start;
                d.length = d.length;
                d.search = d.search;
                d.order = d.order;
                d.columns = d.columns;
            },
            dataSrc: function (json) {
                Swal.close();
                
                if (json.error) {
                    Swal.fire({ 
                        icon: 'error', 
                        title: 'Error', 
                        text: json.error,
                        confirmButtonColor: '#667eea'
                    });
                    return [];
                }

                // Llenar datos del usuario
                document.getElementById('usrSerNombreUsuario').textContent = json.usuario?.nombre ?? '-';
                document.getElementById('usrSerDireccion').textContent = json.usuario?.direccion ?? '-';
                document.getElementById('usrSerContador').textContent = json.usuario?.medidor ?? '-';
                document.getElementById('usrSerNit').textContent = json.usuario?.nit ?? '-';
                document.getElementById('receptorName').textContent = json.receptor ?? '-';
                document.getElementById('cajaName').textContent = json.caja ?? '-';

                if (Array.isArray(json.registros)) {
                    registrosGlobales = json.registros.map(r => ({
                        id: String(r.id),
                        fechaISO: r.fechaISO || r.fechaIngreso || null,
                        fechaIngreso: r.fechaIngreso || null,
                        descripcionIngreso: r.descripcionIngreso || '',
                        cargoQ: parseFloat(r.subValores?.cargo_periodo?.valor_cargo || r.cargoQ || 0),
                        kwh: parseFloat(r.subValores?.kwh_red?.valor_tecnico || 0),
                        iva: parseFloat(r.subValores?.i_v_a?.valor_cargo || 0),
                        diasCredito: r.diasCredito || 0,
                        vencido: r.vencido === 'Sí' || r.vencido_bool === true,
                        origen: r.origen || 'desconocido'
                    }));
                } else {
                    registrosGlobales = [];
                }

                console.log('Datos recibidos del servidor:', {
                    totalRegistrosBackend: json.recordsTotal,
                    registrosEnData: json.data ? json.data.length : 0,
                    registrosGlobales: registrosGlobales.length,
                    totalVencidosBackend: json.totalVencidos,
                    cantidadVencidosBackend: json.cantidadVencidos
                });

                const input = document.getElementById('registros-facturar');
                const totalVencidosBackend = parseFloat(json.totalVencidos) || 0;
                const cantidadVencidosBackend = parseInt(json.cantidadVencidos) || 0;
                
                actualizarTotalPagar(totalVencidosBackend);
                
                input.min = cantidadVencidosBackend;
                input.max = json.recordsTotal || 0;
                input.value = cantidadVencidosBackend;

                if (registrosGlobales.length === 0 && Array.isArray(json.data)) {
                    registrosGlobales = json.data.map(r => ({
                        id: String(r.id),
                        fechaISO: r.fechaISO || r.fechaIngreso || null,
                        fechaIngreso: r.fechaIngreso || null,
                        descripcionIngreso: r.descripcionIngreso || '',
                        cargoQ: parseFloat(r.subValores?.cargo_periodo?.valor_cargo || r.cargoQ || 0),
                        kwh: parseFloat(r.subValores?.kwh_red?.valor_tecnico || 0),
                        iva: parseFloat(r.subValores?.i_v_a?.valor_cargo || 0),
                        diasCredito: r.diasCredito || 0,
                        vencido: r.vencido === 'Sí' || r.vencido_bool === true,
                        origen: r.origen || 'desconocido'
                    }));
                }

                return json.data || [];
            },
            error: function (xhr, error, thrown) {
                Swal.close();
                console.error('Error en AJAX:', error, thrown);
                Swal.fire({ 
                    icon: 'error', 
                    title: 'Error', 
                    text: 'Error al cargar los datos: ' + (thrown || error),
                    confirmButtonColor: '#667eea'
                });
            }
        },
        columns: [
            { 
                data: 'fechaIngreso',
                render: function(data, type, row) {
                    return data || '-';
                }
            },
            { 
                data: 'descripcionIngreso',
                render: function(data, type, row) {
                    return data || '-';
                }
            },
            { 
                data: null,
                render: function(data, type, row) {
                    const kwh = parseFloat(row.subValores?.kwh_red?.valor_tecnico || 0);
                    return kwh.toFixed(2);
                }
            },
            { 
                data: 'vencido',
                render: function(data, type, row) {
                    const esVencido = data === 'Sí' || row.vencido_bool === true;
                    const clase = esVencido ? 'vencido-si' : 'vencido-no';
                    const texto = esVencido ? 'SÍ' : 'No';
                    return `<span class="${clase}">${texto}</span>`;
                }
            },
            { 
                data: null,
                render: function(data, type, row) {
                    const total = parseFloat(row.subValores?.cargo_periodo?.valor_cargo || 0);
                    return `Q ${total.toFixed(2)}`;
                }
            },
            { 
                data: null,
                render: function(data, type, row) {
                    const iva = parseFloat(row.subValores?.i_v_a?.valor_cargo || 0);
                    return `Q ${iva.toFixed(2)}`;
                }
            }
        ],
        order: [[0, 'desc']],
        language: {
            "emptyTable": "No se encontraron registros pendientes",
            "info": "Mostrando _START_ a _END_ de _TOTAL_ registros",
            "infoEmpty": "Mostrando 0 a 0 de 0 registros",
            "infoFiltered": "(filtrado de _MAX_ registros totales)",
            "search": "Buscar:",
            "zeroRecords": "No se encontraron registros coincidentes",
            "paginate": {
                "first": "Primero",
                "last": "Último",
                "next": "Siguiente",
                "previous": "Anterior"
            },
            "processing": "Procesando..."
        },
        dom: '<"row"<"col-sm-12 col-md-6"l><"col-sm-12 col-md-6"f>>rt<"row"<"col-sm-12 col-md-5"i><"col-sm-12 col-md-7"p>>',
        pageLength: 10,
        responsive: true,
        searching: false,
        paging: true,
        info: true
    });
});

// Cambiar registros a facturar
document.getElementById('registros-facturar').addEventListener('input', function() {
    const val = parseInt(this.value) || 0;
    const min = parseInt(this.min) || 0;
    const max = parseInt(this.max) || totalRegistros || registrosGlobales.length;
    const num = Math.min(Math.max(val, min), max);
    this.value = num;

    console.log('Cambiando registros a facturar:', num);

    const { total } = calcularSeleccion(num);
    actualizarTotalPagar(total);
});

// Generar factura
document.getElementById('btnGenerarFactura').addEventListener('click', async function() {
    const numRegistros = parseInt(document.getElementById('registros-facturar').value) || 0;
    if (numRegistros === 0) {
        Swal.fire({
            icon: 'error',
            title: 'Error',
            text: 'Debe seleccionar al menos un registro a facturar',
            confirmButtonColor: '#667eea'
        });
        return;
    }

    const { seleccion } = calcularSeleccion(numRegistros);
    if (!seleccion.length) {
        Swal.fire({
            icon: 'error',
            title: 'Error',
            text: 'No hay registros seleccionados',
            confirmButtonColor: '#667eea'
        });
        return;
    }

    console.log('Registros seleccionados para facturar:', seleccion);

    const detalleHTML = `
        <div style="font-family: Arial, sans-serif; max-width:600px; margin:0 auto;">
            <h5 style="text-align: center; margin-bottom: 15px; color: #667eea;">Detalle de Facturación</h5>
            <div style="border:1px solid #e0e0e0; border-radius:8px; padding:15px; max-height:300px; overflow-y:auto; background: #f8f9fa;">
            ${seleccion.map((ing, index) => `
                <div style="display:flex; justify-content:space-between; padding:10px; margin-bottom: 8px; border-radius: 6px; background: white; box-shadow: 0 1px 3px rgba(0,0,0,0.1);">
                    <span style="flex:2; color: #495057;">${ing.descripcionIngreso}</span>
                    <span style="flex:1; text-align:right; font-weight:bold; color: #667eea;">Q ${parseFloat(ing.cargoQ || 0).toFixed(2)}</span>
                </div>
            `).join('')}
            </div>
            <div style="display:flex; justify-content:space-between; margin-top:20px; padding:15px; border-radius: 8px; background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%); color: white; font-size: 1.2rem;">
                <span style="font-weight: 600;">TOTAL:</span>
                <span style="font-weight: bold;">Q ${seleccion.reduce((sum, ing) => sum + parseFloat(ing.cargoQ || 0), 0).toFixed(2)}</span>
            </div>
        </div>
    `;

    try {
        // Obtener métodos de pago
        const resMetodos = await fetch('/metodos-pago');
        const metodos = await resMetodos.json();
        
        if (!Array.isArray(metodos) || !metodos.length) {
            Swal.fire({
                icon: 'error',
                title: 'Error',
                text: 'No hay métodos de pago disponibles',
                confirmButtonColor: '#667eea'
            });
            return;
        }

        const options = metodos.map(m => `<option value="${m.id}">${m.metodoPago}</option>`).join('');

        const { value: formValues, isConfirmed } = await Swal.fire({
            title: 'Confirmar Facturación',
            html: detalleHTML + `
                <div style="margin-top:25px; text-align: left;">
                    <div class="form-group" style="margin-bottom: 20px;">
                        <label for="metodoPago" style="font-weight: 600; color: #495057; margin-bottom: 8px; display: block;">
                            <i class="fas fa-credit-card" style="margin-right: 8px; color: #667eea;"></i>
                            Método de pago:
                        </label>
                        <select id="metodoPago" class="form-control" style="border-radius: 8px; border: 2px solid #e0e0e0; padding: 10px;">${options}</select>
                    </div>
                    <div class="form-group">
                        <label for="observaciones" style="font-weight: 600; color: #495057; margin-bottom: 8px; display: block;">
                            <i class="fas fa-comment-alt" style="margin-right: 8px; color: #667eea;"></i>
                            Observaciones:
                        </label>
                        <textarea id="observaciones" rows="3" class="form-control" placeholder="Observaciones opcionales..." style="border-radius: 8px; border: 2px solid #e0e0e0; padding: 10px;"></textarea>
                    </div>
                </div>
            `,
            width: 750,
            showCancelButton: true,
            confirmButtonText: '<i class="fas fa-check-circle mr-2"></i>Generar Factura y Pago',
            cancelButtonText: '<i class="fas fa-times mr-2"></i>Cancelar',
            confirmButtonColor: '#667eea',
            cancelButtonColor: '#dc3545',
            customClass: {
                confirmButton: 'btn btn-lg',
                cancelButton: 'btn btn-lg'
            },
            preConfirm: () => {
                return {
                    metodoPago: document.getElementById('metodoPago').value,
                    observaciones: document.getElementById('observaciones').value
                };
            }
        });

        if (!isConfirmed) return;

        Swal.fire({
            title: 'Generando factura...',
            html: '<div class="spinner-border text-primary" role="status"><span class="sr-only">Procesando...</span></div>',
            allowOutsideClick: false,
            showConfirmButton: false
        });

        const ingresos_ids = seleccion.map(s => s.id);
        const servicio_id = document.getElementById('codigoservicio').value;

        console.log('Enviando datos al servidor:', {
            ingresos_ids: ingresos_ids,
            servicio_id: servicio_id,
            metodoPago: formValues.metodoPago
        });

        const response = await fetch('/generar-factura-pago', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content
            },
            body: JSON.stringify({
                ingresos_ids: ingresos_ids,
                servicio_id: servicio_id,
                receptor: document.getElementById('receptorName').textContent,
                caja: document.getElementById('cajaName').textContent,
                metodoPago: formValues.metodoPago,
                observaciones: formValues.observaciones
            })
        });

        const result = await response.json();
        Swal.close();

        if (result.success) {
            Swal.fire({
                icon: 'success',
                title: '¡Facturación Completada!',
                html: `
                    <div style="text-align: left; padding: 15px;">
                        <p style="margin-bottom: 15px; font-size: 1.1rem; color: #495057;">Facturas generadas exitosamente:</p>
                        <div style="background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%); padding:15px; border-radius:8px; margin:15px 0; border-left: 4px solid #38ef7d;">
                            <strong style="color: #2c3e50; font-size: 1.05rem;">${result.facturas.join('<br>')}</strong>
                        </div>
                        <div style="margin-top:20px; padding: 15px; background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%); border-radius: 8px; color: white;">
                            <p style="margin: 0; font-size: 1.2rem;">
                                <i class="fas fa-dollar-sign mr-2"></i>
                                Total facturado: <strong>Q ${result.total_facturado || '0.00'}</strong>
                            </p>
                        </div>
                    </div>
                `,
                width: 650,
                confirmButtonColor: '#667eea',
                confirmButtonText: '<i class="fas fa-check mr-2"></i>Entendido'
            });
            
            // Recargar la tabla
            if (facturaTable) {
                facturaTable.ajax.reload();
            }
        } else {
            Swal.fire({
                icon: 'error',
                title: 'Error en Facturación',
                text: result.error || 'No se pudo generar la factura',
                width: 500,
                confirmButtonColor: '#667eea'
            });
        }

    } catch (err) {
        Swal.close();
        console.error('Error generando factura:', err);
        Swal.fire({
            icon: 'error',
            title: 'Error',
            text: 'Error al generar la factura: ' + err.message,
            width: 500,
            confirmButtonColor: '#667eea'
        });
    }
});

// También permitir buscar con Enter
document.getElementById('codigoservicio').addEventListener('keypress', function(e) {
    if (e.key === 'Enter') {
        document.getElementById('btnBuscar').click();
    }
});
</script>
@stop