@extends('layouts.app', ['activePage' => 'reporte_ingresos', 'menuParent' => 'reportes', 'titlePage' => __('Bancos - Reportes ingresos')])
@section('content')
@include('includes.tailwind')

<div class="content">
    <div class="container-fluid mt-4">
        <div class="row mb-4">
            <div class="col-12">
                <div class="d-flex justify-content-between align-items-center">
                    <div>
                        <h5 class="text-2xl font-bold text-gray-900 mb-1">Reporte de ingresos</h5>
                        <p class="text-sm text-gray-600">Consulta y filtra los ingresos bancarios registrados</p>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-12">
                <div class="bg-white rounded-lg shadow-md">
                    <div class="px-6 py-2">
                        <div class="grid grid-cols-12 mb-2">
                            <div class="col-span-12 flex justify-between mt-4">
                                <div class="flex items-center gap-3">
                                    <button id="btnExportarExcel"
                                        type="button"
                                        class="flex items-center px-4 py-2 text-sm font-semibold rounded-lg shadow-sm bg-green-600 hover:bg-green-700 text-white transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-green-500">
                                        <i class="material-icons align-middle text-sm mr-2">description</i>
                                        Exportar a Excel
                                    </button>
                                    <button id="btnExportarPDF"
                                        type="button"
                                        class="flex items-center px-4 py-2 text-sm font-semibold rounded-lg shadow-sm bg-red-600 hover:bg-red-700 text-white transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-red-500">
                                        <i class="material-icons align-middle text-sm mr-2">picture_as_pdf</i>
                                        Exportar a PDF
                                    </button>
                                </div>
                                <button type="button"
                                    class="flex items-center px-4 py-2 text-sm font-semibold rounded-lg shadow-sm bg-blue-600 hover:bg-blue-700 text-white transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-blue-500"
                                    id="filtros">
                                    <i class="material-icons align-middle text-sm mr-2">filter_list</i>
                                    Filtrar
                                </button>
                            </div>
                        </div>
                        <div class="table-scroll">
                            <table class="min-w-full" id="list-ingresos" style="width: 100%;">
                                <thead class="sticky-top bg-gray-50 px-6 py-3 text-[11px] font-semibold text-left font-medium text-gray-500 uppercase tracking-wider">
                                    <tr>
                                        <th class="px-2 py-2">Creado</th>
                                        <th class="px-2 py-2">Fecha pago</th>
                                        <th class="px-2 py-2">Folio</th>
                                        <th class="px-2 py-2">Concepto</th>
                                        <th class="px-2 py-2">Forma de pago</th>
                                        <th class="px-2 py-2">Cuenta</th>
                                        <th class="px-2 py-2">Monto</th>
                                    </tr>
                                </thead>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Modal Filtros Ingresos -->
<div class="modal fade" id="modal-filtros-ingresos" tabindex="-1" role="dialog" aria-labelledby="modalFiltrosLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content shadow-2xl rounded-3xl border-0 overflow-hidden" style="background: linear-gradient(120deg, #f8fafc 60%, #dbeafe 100%);">
            <div class="modal-header items-center bg-gradient-to-r from-blue-700 to-blue-500 text-white py-4 px-7 border-b-0 rounded-t-3xl">
                <h5 class="modal-title text-xl font-extrabold tracking-wide flex items-center gap-2" id="modalFiltrosLabel">
                    <i class="material-icons text-2xl text-blue-200">filter_list</i>
                    Filtrar Ingresos
                </h5>
                <button type="button" class="close flex items-center justify-center ml-auto text-white text-3xl transition-all hover:bg-blue-400/40 w-10 h-10 rounded-full focus:outline-none focus:ring-2 focus:ring-blue-300" data-dismiss="modal" aria-label="Close" style="background:none;border:none;">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <form id="form-filtros-ingresos">
                <div class="modal-body px-10 pt-7 pb-2 scrollbar-thin scrollbar-thumb-blue-200 scrollbar-track-gray-100" style="max-height:70vh;overflow-y:auto;">
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                        <!-- Rango de Fechas -->
                        <div>
                            <label class="block mb-2 text-sm font-semibold text-blue-800">Fecha de pago (de):</label>
                            <input type="date" id="filtro-fecha-inicio" name="fecha_inicio" class="form-input block w-full border border-blue-300 bg-white rounded-lg px-4 py-2.5 focus:ring-2 focus:ring-blue-400 focus:border-blue-500 transition text-sm shadow-sm" autocomplete="off">
                        </div>
                        <div>
                            <label class="block mb-2 text-sm font-semibold text-blue-800">a:</label>
                            <input type="date" id="filtro-fecha-fin" name="fecha_fin" class="form-input block w-full border border-blue-300 bg-white rounded-lg px-4 py-2.5 focus:ring-2 focus:ring-blue-400 focus:border-blue-500 transition text-sm shadow-sm" autocomplete="off">
                        </div>
                        <!-- Formas de Pago -->
                        <div>
                            <label class="block mb-2 text-sm font-semibold text-blue-800">Forma de pago:</label>
                            <select id="filtro-forma-pago" name="forma_pago" class="form-select block w-full border border-blue-300 bg-white rounded-lg px-4 py-2.5 text-sm shadow-sm focus:ring-2 focus:ring-blue-400 focus:border-blue-500 transition">
                                <option value="">Todas</option>
                                <option value="Efectivo">Efectivo</option>
                                <option value="Transferencia">Transferencia</option>
                                <option value="Cheque">Cheque</option>
                                <option value="Tarjeta">Tarjeta</option>
                                <!-- Agrega más según tus opciones -->
                            </select>
                        </div>
                        <!-- Cuenta -->
                        <div>
                            <label class="block mb-2 text-sm font-semibold text-blue-800">Cuenta:</label>
                            <select id="filtro-cuenta" name="cuenta" class="form-select block w-full border border-blue-300 bg-white rounded-lg px-4 py-2.5 text-sm shadow-sm focus:ring-2 focus:ring-blue-400 focus:border-blue-500 transition">
                                <option value="">Todas</option>
                                {{-- Opciones dinámicas desde backend o JS --}}
                            </select>
                        </div>
                        <!-- Concepto -->
                        <div>
                            <label class="block mb-2 text-sm font-semibold text-blue-800">Concepto:</label>
                            <input type="text" id="filtro-concepto" name="concepto" placeholder="Buscar concepto" class="form-input block w-full border border-blue-300 bg-white rounded-lg px-4 py-2.5 text-sm shadow-sm focus:ring-2 focus:ring-blue-400 focus:border-blue-500 transition">
                        </div>
                        <!-- Folio -->
                        <div>
                            <label class="block mb-2 text-sm font-semibold text-blue-800">Folio:</label>
                            <input type="text" id="filtro-folio" name="folio" placeholder="Buscar folio" class="form-input block w-full border border-blue-300 bg-white rounded-lg px-4 py-2.5 text-sm shadow-sm focus:ring-2 focus:ring-blue-400 focus:border-blue-500 transition">
                        </div>
                        <!-- Estatus -->
                        <div>
                            <label class="block mb-2 text-sm font-semibold text-blue-800">Estatus:</label>
                            <select id="filtro-estatus" name="estatus" class="form-select block w-full border border-blue-300 bg-white rounded-lg px-4 py-2.5 text-sm shadow-sm focus:ring-2 focus:ring-blue-400 focus:border-blue-500 transition">
                                <option value="">Todos</option>
                                <option value="Pagado">Pagado</option>
                                <option value="Pendiente">Pendiente</option>
                                <!-- Agrega más si es necesario -->
                            </select>
                        </div>
                        <!-- LUGAR DISPONIBLE PARA NUEVOS FILTROS EN EL FUTURO -->
                    </div>
                </div>
                <div class="modal-footer flex justify-end space-x-4 px-8 py-5 bg-gradient-to-r from-blue-50 to-blue-100 border-t-0 rounded-b-3xl">
                    <button type="button" class="bg-gray-200 hover:bg-gray-300 text-gray-700 px-5 py-2.5 rounded shadow-sm transition font-semibold flex items-center gap-1" data-dismiss="modal">
                        <i class="material-icons text-gray-400 text-base">close</i>
                        Cancelar
                    </button>
                    <button type="button" id="btn-aplicar-filtros-ingresos" class="bg-gradient-to-r from-blue-600 to-blue-400 hover:from-blue-700 hover:to-blue-500 text-white font-bold px-6 py-2.5 rounded shadow-md transition flex items-center gap-2 focus:outline-none focus:ring-2 focus:ring-blue-300">
                        <i class="material-icons text-base text-blue-100">done</i>
                        Aplicar Filtros
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>


<style>
    .select2-container {
        width: 100% !important;
    }

    .select2-container .select2-selection--single {
        height: 40px !important;
    }

    .select2-container .select2-selection--single .select2-selection__rendered {
        line-height: 40px !important;
    }

    .dataTables_wrapper .dataTables_length,
    .dataTables_wrapper .dataTables_filter,
    .dataTables_wrapper .dataTables_info,
    .dataTables_wrapper .dataTables_processing,
    .dataTables_wrapper .dataTables_paginate {
        font-size: 12px;
    }

    .dataTables_wrapper .dataTables_length select,
    .dataTables_wrapper .dataTables_filter input {
        font-size: 12px !important;
    }

    table.dataTable thead th,
    table.dataTable thead td {
        font-size: 12px !important;
    }

    table.dataTable tfoot th,
    table.dataTable tfoot td {
        font-size: 13px !important;
    }

    table.dataTable tbody td {
        font-size: 13px !important;
    }

    table.dataTable tbody tr:hover {
        background-color: #f8f9fa;
        cursor: pointer;
    }

    .dataTables_wrapper .dataTables_filter input {
        padding: 0.25rem 0.5rem !important;
        border-radius: 0.375rem !important;
        border: 1px solid #e2e8f0 !important;
    }

    .dataTables_wrapper .dataTables_filter input:focus {
        outline: none !important;
        border-color: #0A415F !important;
        box-shadow: 0 0 0 2px rgba(10, 65, 95, 0.1) !important;
    }

    .table-scroll {
        max-height: 650px;
        overflow-y: auto;
    }
</style>
@endsection

@push('js')
<script>
    $(document).ready(function() {
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });

        $('.select2').select2({
            placeholder: "-Selecciona-",
            width: '100%',
        });

        $('.select2-modal').select2({
            placeholder: "-Selecciona-",
            width: '100%',
            dropdownParent: $('#modalCuentas')
        });


        // Llamar a la función getIngresos
        getIngresos();

    });


    $('#filtros').click(() => {
        $('#modal-filtros-ingresos').modal('show');

    })
    $('#btn-aplicar-filtros-ingresos').click(() => {
        // Recopila los valores de los filtros
        var filtros = {
            fecha_inicio: document.getElementById('filtro-fecha-inicio').value,
            fecha_fin: document.getElementById('filtro-fecha-fin').value,
            forma_pago: document.getElementById('filtro-forma-pago').value,
            cuenta: document.getElementById('filtro-cuenta').value,
            concepto: document.getElementById('filtro-concepto').value,
            folio: document.getElementById('filtro-folio').value,
            estatus: document.getElementById('filtro-estatus').value
        };
        getIngresos(filtros);
        // Cierra el modal
        $('#modal-filtros-ingresos').modal('hide');
    });

    function getIngresos(filtros = null) {
        $('#list-ingresos').dataTable().fnDestroy();

        // Si no existe el tfoot, lo agregamos dinámicamente para mostrar los totales
        if ($('#list-ingresos tfoot').length === 0) {
            var tfoot = `
                <tfoot>
                    <tr>
                        <th colspan="6" style="text-align:right;" class="font-semibold text-gray-700 text-lg">Total página:</th>
                        <th id="footer-total-pagina" class="font-bold text-green-700 text-lg"></th>
                    </tr>
                    <tr>
                        <th colspan="6" style="text-align:right;" class="font-semibold text-gray-700 text-lg">Total:</th>
                        <th id="footer-gran-total" class="font-bold text-blue-700 text-lg"></th>
                    </tr>
                </tfoot>
            `;
            $('#list-ingresos').append(tfoot);
        }

        // Loader a nivel de tabla
        if ($('#ingresos-loader').length === 0) {
            // Inserta el loader como overlay sobre la tabla
            var $table = $('#list-ingresos');
            // El contenedor debe ser relativo para overlay absoluto
            $table.closest('.table-scroll').css('position', 'relative');
            $table.closest('.table-scroll').append(`
                <div id="ingresos-loader" style="position: absolute; z-index: 20; top:0; left:0; width:100%; height:100%; background:rgba(255,255,255,0.7); display: flex; align-items: center; justify-content: center;">
                    <div style="border:6px solid #4F46E5; border-top:6px solid #c7d2fe; border-radius:50%; width:50px; height:50px; animation: spin 0.8s linear infinite"></div>
                </div>
                <style>
                    @keyframes spin {
                        0% { transform: rotate(0deg);}
                        100% { transform: rotate(360deg);}
                    }
                </style>
            `);
        } else {
            $('#ingresos-loader').show();
        }

        var table = $('#list-ingresos').DataTable({
            lengthMenu: [10, 15, 20, 50, 100, 200, 500],
            language: {
                url: "{{asset('material/datatable_sp.json')}}"
            },
            ajax: {
                url: "{{route('ingresos.get-ingresos')}}",
                type: "POST",
                data: {
                    ...filtros
                },
                beforeSend: function() {
                    // Muestra el loader solo sobre la tabla
                    $('#ingresos-loader').show();
                },
                dataSrc: function(json) {
                    // Guardamos todos los datos para el gran total
                    $('#list-ingresos').data('all-data', json.data || []);
                    // Ocultamos el loader después de recibir datos
                    $('#ingresos-loader').fadeOut(200);
                    return json.data || [];
                },
                error: function() {
                    $('#ingresos-loader').fadeOut(200);
                }
            },
            createdRow: function(row, data, rowIndex) {
                $.each($('td', row), function(colIndex) {
                    $(this).attr('title', 'Ver detalles del movimiento');
                });
            },
            columns: [{
                    data: "created_at",
                    title: "Creado"
                },
                {
                    data: "fecha",
                    title: "Fecha pago"
                },
                {
                    data: "folio",
                    title: "Folio"
                },
                {
                    data: "concepto",
                    title: "Concepto"
                },
                {
                    data: "forma_pago",
                    title: "Forma de pago"
                },
                {
                    data: "cuenta",
                    title: "Cuenta"
                },
                {
                    data: "monto",
                    title: "Monto"
                },
            ],
            order: [
                [0, "desc"]
            ],
            drawCallback: function(settings) {
                // Calculamos el total de la página
                var api = this.api();

                // Total de la página actual
                var pageTotal = 0;
                api.rows({
                    page: 'current'
                }).every(function(rowIdx, tableLoop, rowLoop) {
                    var data = this.data();
                    pageTotal += parseFloat(($(data.monto).text() || "0").replace(/[^0-9.-]+/g, "")) || 0;
                });

                // Gran total de todos los registros
                var allData = $('#list-ingresos').data('all-data') || [];
                var totalGeneral = 0;
                allData.forEach(function(item) {
                    var monto = parseFloat(($(item.monto).text() || "0").replace(/[^0-9.-]+/g, "")) || 0;
                    totalGeneral += monto;
                });

                // Formatear como moneda
                function formatoMoneda(n) {
                    return '$' + n.toLocaleString('es-MX', {
                        minimumFractionDigits: 2
                    });
                }

                // Colocamos los totales en el footer
                $('#footer-total-pagina')
                    .hide().fadeIn()
                    .html(`<span class="rounded bg-green-100 px-3 py-1">${formatoMoneda(pageTotal)}</span>`);
                $('#footer-gran-total')
                    .hide().fadeIn()
                    .html(`<span class="rounded bg-blue-100 px-3 py-1">${formatoMoneda(totalGeneral)}</span>`);
            },
            footerCallback: function(row, data, start, end, display) {
                // Esta función puede quedar vacía al tener el drawCallback para control completo
            }
        });

        table.on('click', 'tr', function(e) {
            var target = $(e.target);
            var cell = table.cell(target);

            if (!cell || !cell.index()) {
                return;
            }

            var columnIndex = cell.index().column;
            var columnTitle = table.column(columnIndex).header().textContent.trim();

            if (columnTitle === 'Acciones' || columnTitle === 'Estatus') {
                return;
            }

            var row = table.row(this).data();
            if (!row) {
                return;
            }

        });
    }



    function exportarTablaPDF() {
        // Solo exportar la tabla sin la barra superior/inferior del DataTable (sin paginación, input buscar, ni info)
        var tableElement = document.getElementById('list-ingresos');
        if (!tableElement) {
            alert('No se encontró la tabla para exportar');
            return;
        }

        // ---------- Agregar título y fecha manualmente ----------
        var titulo = "Reporte de Ingresos";
        var fecha = new Date();
        var fechaStr = fecha.toLocaleDateString('es-MX', {
                year: 'numeric',
                month: '2-digit',
                day: '2-digit'
            }) +
            " " +
            fecha.toLocaleTimeString('es-MX', {
                hour: '2-digit',
                minute: '2-digit'
            });

        var encabezadoDiv = document.createElement('div');
        encabezadoDiv.style.textAlign = 'center';
        encabezadoDiv.style.marginBottom = '10px';

        var tituloElem = document.createElement('h2');
        tituloElem.style.margin = '0';
        tituloElem.style.fontSize = '1.5em';
        tituloElem.style.fontWeight = 'bold';
        tituloElem.innerText = titulo;

        var fechaElem = document.createElement('div');
        fechaElem.style.marginTop = '4px';
        fechaElem.style.fontSize = '1em';
        fechaElem.innerText = "Fecha de exportación: " + fechaStr;

        encabezadoDiv.appendChild(tituloElem);
        encabezadoDiv.appendChild(fechaElem);

        // ---------- Fin encabezado personalizado ----------

        // Clonar la tabla para limpiar clases y obtener solo la tabla limpia
        var tempDiv = document.createElement('div');

        // Agregar encabezado arriba del div contenedor
        tempDiv.appendChild(encabezadoDiv);

        // Clonar también el thead/tbody dinámico generado, para obtener solo la tabla
        var clonedTable = tableElement.cloneNode(true);

        // Eliminar atributos de ancho y otros inline
        clonedTable.removeAttribute('style');
        clonedTable.className = "min-w-full"; // mantener base tailwind estilos

        // Opcional: borrar clases de DataTables agregadas dinámicamente (si aplica)
        clonedTable.classList.remove('dataTable', 'no-footer');

        tempDiv.appendChild(clonedTable);

        var opt = {
            margin: 0.2,
            filename: 'ingresos.pdf',
            image: {
                type: 'jpeg',
                quality: 0.98
            },
            html2canvas: {
                scale: 2
            },
            jsPDF: {
                unit: 'in',
                format: 'a4',
                orientation: 'landscape'
            }
        };

        html2pdf().from(tempDiv).set(opt).save();
    }

    function exportarTablaExcel() {
        var table = document.getElementById('list-ingresos');
        if (!table) {
            alert('No se encontró la tabla para exportar');
            return;
        }

        // Definir título y fecha
        var titulo = "Reporte de Ingresos";
        var fecha = new Date();
        var fechaStr = fecha.toLocaleDateString('es-MX', {
                year: 'numeric',
                month: '2-digit',
                day: '2-digit'
            }) +
            " " +
            fecha.toLocaleTimeString('es-MX', {
                hour: '2-digit',
                minute: '2-digit'
            });

        // Crear una hoja de excel mejor diseñada
        var ws_data = [];

        // Agregar una fila vacía para margen superior visual
        ws_data.push([]);

        // Añadir fila Título (merge después)
        ws_data.push([titulo]);
        // Añadir fila Fecha
        ws_data.push(["Fecha de exportación: " + fechaStr]);
        // Fila vacía para separación
        ws_data.push([]);

        // Tomar los headers visibles
        var headers = [];
        var ths = table.querySelectorAll('thead tr th');
        ths.forEach(function(th) {
            headers.push(th.innerText.trim());
        });
        ws_data.push(headers);

        // Tomar los datos visibles de la tabla (tbody)
        var trs = table.querySelectorAll('tbody tr');
        trs.forEach(function(tr) {
            var row = [];
            var tds = tr.querySelectorAll('td');
            tds.forEach(function(td) {
                row.push(td.innerText.trim());
            });
            if (row.length > 0) {
                ws_data.push(row);
            }
        });

        // Agregar los totales si existen en el tfoot
        var tfoot = table.querySelector('tfoot');
        if (tfoot) {
            var tfootRows = tfoot.querySelectorAll('tr');
            tfootRows.forEach(function(tfootTr) {
                var row = [];
                var tds = tfootTr.querySelectorAll('th,td');
                tds.forEach(function(td) {
                    row.push(td.innerText.trim());
                });
                if (row.length > 0) {
                    ws_data.push(row);
                }
            });
        }

        // Crear libro y hoja
        var wb = XLSX.utils.book_new();
        var ws = XLSX.utils.aoa_to_sheet(ws_data);

        // Definir el rango de columnas a mergear para título y fecha
        var numCols = headers.length;
        ws['!merges'] = [{
                s: {
                    r: 1,
                    c: 0
                },
                e: {
                    r: 1,
                    c: numCols - 1
                }
            }, // Título
            {
                s: {
                    r: 2,
                    c: 0
                },
                e: {
                    r: 2,
                    c: numCols - 1
                }
            } // Fecha
        ];

        // Aplicar colores y estilos
        // Título centrado, grande, negrita, color azul
        var tituloCell = ws[XLSX.utils.encode_cell({
            c: 0,
            r: 1
        })];
        if (!tituloCell.s) tituloCell.s = {};
        tituloCell.s = {
            font: {
                bold: true,
                sz: 16,
                color: {
                    rgb: "FFFFFF"
                }
            },
            fill: {
                fgColor: {
                    rgb: "2563EB"
                }
            },
            alignment: {
                horizontal: "center",
                vertical: "center"
            }
        };

        // Fecha en gris claro, itálica, centrada
        var fechaCell = ws[XLSX.utils.encode_cell({
            c: 0,
            r: 2
        })];
        if (!fechaCell.s) fechaCell.s = {};
        fechaCell.s = {
            font: {
                italic: true,
                color: {
                    rgb: "4B5563"
                }
            },
            fill: {
                fgColor: {
                    rgb: "F3F4F6"
                }
            },
            alignment: {
                horizontal: "center",
                vertical: "center"
            }
        };

        // Header: fondo azul, blanco, negrita, centrado
        ths.forEach(function(_, idx) {
            var cell = ws[XLSX.utils.encode_cell({
                c: idx,
                r: 4
            })];
            if (cell && !cell.s) cell.s = {};
            if (cell) {
                cell.s.font = {
                    bold: true,
                    color: {
                        rgb: "FFFFFF"
                    }
                };
                cell.s.fill = {
                    fgColor: {
                        rgb: "1D4ED8"
                    }
                };
                cell.s.alignment = {
                    horizontal: "center",
                    vertical: "center"
                };
                cell.s.border = {
                    top: {
                        style: "thin",
                        color: {
                            rgb: "2B6CB0"
                        }
                    },
                    bottom: {
                        style: "thin",
                        color: {
                            rgb: "2B6CB0"
                        }
                    }
                };
            }
        });

        // Auto width column
        var colWidths = [];
        for (let c = 0; c < headers.length; c++) {
            let maxLen = headers[c].length;
            for (let r = 5; r < ws_data.length; r++) {
                if (ws_data[r] && ws_data[r][c] && ws_data[r][c].toString().length > maxLen) {
                    maxLen = ws_data[r][c].toString().length;
                }
            }
            colWidths.push({
                wch: Math.max(14, maxLen + 2)
            });
        }
        ws['!cols'] = colWidths;

        // Aplicar estilos a los totales (última fila si existe tfoot)
        var lastRow = ws_data.length - 1;
        if (tfoot && ws_data.length > 5) {
            for (let c = 0; c < headers.length; c++) {
                let celltfoot = ws[XLSX.utils.encode_cell({
                    c: c,
                    r: lastRow
                })];
                if (celltfoot) {
                    if (!celltfoot.s) celltfoot.s = {};
                    celltfoot.s.font = {
                        bold: true,
                        color: {
                            rgb: "1D4ED8"
                        }
                    };
                    celltfoot.s.fill = {
                        fgColor: {
                            rgb: "DBEAFE"
                        }
                    };
                    celltfoot.s.alignment = {
                        horizontal: "right",
                        vertical: "center"
                    };
                }
            }
        }

        // Zebra striping para filas de datos
        for (let r = 5; r < ws_data.length - (tfoot ? 1 : 0); r++) {
            if ((r - 5) % 2 === 1) {
                for (let c = 0; c < headers.length; c++) {
                    let cell = ws[XLSX.utils.encode_cell({
                        c: c,
                        r: r
                    })];
                    if (cell) {
                        if (!cell.s) cell.s = {};
                        cell.s.fill = {
                            fgColor: {
                                rgb: "F1F5F9"
                            }
                        }; // azul muy claro
                    }
                }
            }
        }

        XLSX.utils.book_append_sheet(wb, ws, "Ingresos");
        // Formatear nombre del archivo con fecha
        var nombreArchivo = "Ingresos_" +
            fecha.getFullYear() +
            ("0" + (fecha.getMonth() + 1)).slice(-2) +
            ("0" + fecha.getDate()).slice(-2) + "_" +
            ("0" + fecha.getHours()).slice(-2) +
            ("0" + fecha.getMinutes()).slice(-2) +
            ("0" + fecha.getSeconds()).slice(-2) +
            ".xlsx";
        XLSX.writeFile(wb, nombreArchivo);
    }

    $('#btnExportarExcel').on('click', exportarTablaExcel);
    $('#btnExportarPDF').on('click', exportarTablaPDF);
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.18.5/xlsx.full.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.10.1/html2pdf.bundle.min.js"></script>
@endpush