@extends('layouts.app', ['activePage' => 'reporte_egresos', 'menuParent' => 'reportes', 'titlePage' => __('Bancos - Reportes ingreos')])
@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 egresos</h5>
                        <p class="text-sm text-gray-600">Consulta y filtra los egresos 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"
                                    onclick="getIngresos()">
                                    <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-egresos" 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">Categoría</th>
                                        <th class="px-2 py-2">Proveedor</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>



<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 getEgresos
        getEgresos();

    });

    function getEgresos() {
        $('#list-egresos').dataTable().fnDestroy();

        // Agregar tfoot si no existe para mostrar los totales
        if ($('#list-egresos tfoot').length === 0) {
            var tfoot = `
                <tfoot>
                    <tr>
                        <th colspan="8" 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>xw
                    </tr>
                    <tr>
                        <th colspan="8" 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-egresos').append(tfoot);
        }

        // Loader a nivel de tabla
        if ($('#egresos-loader').length === 0) {
            // Inserta el loader como overlay sobre la tabla
            var $table = $('#list-egresos');
            $table.closest('.table-scroll').css('position', 'relative');
            $table.closest('.table-scroll').append(`
                <div id="egresos-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 {
            $('#egresos-loader').show();
        }

        var table = $('#list-egresos').DataTable({
            lengthMenu: [10, 15, 20, 50, 100, 200, 500],
            language: {
                url: "{{asset('material/datatable_sp.json')}}"
            },
            ajax: {
                url: "{{route('egresos.get-egresos')}}",
                type: "POST",
                beforeSend: function() {
                    // Muestra el loader solo sobre la tabla
                    $('#egresos-loader').show();
                },
                dataSrc: function(json) {
                    // Guardar los datos para calcular gran total
                    $('#list-egresos').data('all-data', json.data || []);
                    // Oculta el loader después de recibir datos
                    $('#egresos-loader').fadeOut(200);
                    return json.data || [];
                },
                error: function() {
                    $('#egresos-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"
                },
                {
                    data: "folio",
                    title: "Folio"
                },
                {
                    data: "concepto",
                    title: "Concepto"
                },
                {
                    data: "categoria",
                    title: "Categoría"
                },
                {
                    data: "proveedor",
                    title: "Proveedor"
                },
                {
                    data: "forma_pago",
                    title: "Forma de pago"
                },
                {
                    data: "cuenta",
                    title: "Cuenta"
                },
                {
                    data: "monto",
                    title: "Monto"
                },
            ],
            order: [
                [0, "desc"]
            ],
            drawCallback: function(settings) {
                // Total página
                var api = this.api();
                var pageTotal = 0;
                api.rows({
                    page: 'current'
                }).every(function(rowIdx, tableLoop, rowLoop) {
                    var data = this.data();
                    // El campo "monto" es HTML con un número
                    pageTotal += parseFloat(($(data.monto).text() || "0").replace(/[^0-9.-]+/g, "")) || 0;
                });

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

                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) {
                // Vacío por control en drawCallback
            }
        });

        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-egresos');
        if (!tableElement) {
            alert('No se encontró la tabla para exportar');
            return;
        }

        // ---------- Agregar título y fecha manualmente ----------
        var titulo = "Reporte de Egresos";
        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: 'egresos.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-egresos');
        if (!table) {
            alert('No se encontró la tabla para exportar');
            return;
        }

        // Definir título y fecha
        var titulo = "Reporte de Egresos";
        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, "Egresos");
        // Formatear nombre del archivo con fecha
        var nombreArchivo = "Egresos_" +
            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