@extends('layout.master', [
    'activePage' => $activePage,
    'categoria' => $categoria,
    'menuParent' => $menuParent,
    'titlePage' => $titlePage
])

@push('plugin-styles')
{!! Html::style('plugins/apex/apexcharts.css') !!}
{!! Html::style('assets/css/dashboard/dashboard_1.css') !!}
{!! Html::style('plugins/flatpickr/flatpickr.css') !!}
{!! Html::style('plugins/flatpickr/custom-flatpickr.css') !!}
{!! Html::style('assets/css/elements/tooltip.css') !!}
{!! Html::style('plugins/table/datatable/datatables.css') !!}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2-bootstrap-theme/0.1.0-beta.10/select2-bootstrap.min.css"></link>
<link rel="stylesheet" href="https://jsuites.net/v5/jsuites.css" type="text/css" />

<style>

    .ui-autocomplete-input {
        font-size: 14px;
        z-index: 500;
        position: relative;
    }

    .ui-menu .ui-menu-item a {
        font-size: 12px;
    }

    .ui-autocomplete {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 1000 !important;
        float: left;
        display: none;
        min-width: 160px;
        width: 160px;
        padding: 4px 0;
        margin: 2px 0 0 0;
        list-style: none;
        background-color: #ffffff;
        border-color: #ccc;
        border-color: rgba(0, 0, 0, 0.2);
        border-style: solid;
        border-width: 1px;
        -webkit-border-radius: 2px;
        -moz-border-radius: 2px;
        border-radius: 2px;
        -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
        -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
        box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
        -webkit-background-clip: padding-box;
        -moz-background-clip: padding;
        background-clip: padding-box;
        *border-right-width: 2px;
        *border-bottom-width: 2px;
    }

    .ui-menu .ui-menu-item{
        cursor: pointer;
    }

    .ui-autocomplete {
        max-height: 200px;
        overflow-y: auto;
        /* prevent horizontal scrollbar */
        overflow-x: hidden;
        /* add padding to account for vertical scrollbar */
        padding-right: 20px;
    }

    .ui-menu-item>a.ui-corner-all {
        display: block;
        padding: 3px 15px;
        clear: both;
        font-weight: normal;
        line-height: 18px;
        color: #555555;
        white-space: nowrap;
        text-decoration: none;
    }

    .ui-state-hover,
    .ui-state-active {
        color: #ffffff;
        text-decoration: none;
        background-color: #0088cc;
        border-radius: 0px;
        -webkit-border-radius: 0px;
        -moz-border-radius: 0px;
        background-image: none;
    }
    .text-bold {
        font-weight: bold !important;
    }

    .text-normal {
        font-weight: normal !important;
    }

    input[type="date"].form-control-sm {
        padding: .25rem .5rem !important;
    }

    input[type="file"].form-control-sm {
        padding: 0rem 1rem !important;
    }

    .btn-submit:hover {
        background-color: #E8C552 !important;
        color: black !important;
        border-color: #E8C552 !important
    }

    .icon-large {
        font-size: 1.5em !important;
    }

    .icon-xl {
        font-size: 2em !important;
    }

    .btn-pdf {
        background-color: #C62A2A !important;
        color: white;
        border-color: #C62A2A !important;
    }

    .select2-container .select2-selection--single .select2-selection__rendered  {
        display: contents;
    }

    .select2-container--bootstrap {
        min-width: 15rem !important;
    }

    .select2-container--bootstrap .select2-selection--single{
        max-height: 1.5rem !important;
        height: auto !important;
        font-size: smaller !important;
        margin-bottom: -.8rem
    }

    .hide-element {
        display: none !important;
    }

    .table-header th {
        background-color: #555555 !important;
        font-size: .9rem !important;
    }

    .footer-totales {
        background-color: #E8C552 !important;
        font-weight: bold !important;
    }

    .row-sucursal {
        background-color: #88DDEE !important;
        font-weight: bold !important;
    }

    .btn-excel {
        background-color: #3ec782 !important;
        color: white !important;
        border-color: #3ec782 !important
    }


    .indicador-verde {
        background-color: #30D773 !important;
        font-weight: bold !important;
        color: white !important;
    }

    .indicador-amarillo {
        background-color: #E8F75D !important;
        font-weight: bold !important;
        color: black !important;
    }

    .indicador-rojo {
        background-color: #E52A2A !important;
        font-weight: bold !important;
        color: white !important;
    }

</style>
@endpush

@section('content')
    <div class="sub-header-container">
        <header class="header navbar navbar-expand-sm">
            <ul class="navbar-nav flex-row">
                <li>
                    <div class="page-header">
                        <nav class="breadcrumb-one" aria-label="breadcrumb">
                            <ol class="breadcrumb">
                                <li class="breadcrumb-item"><a href="javascript:void(0);"> {{__('Reportes')}}</a></li>
                                <li class="breadcrumb-item active" aria-current="page"><span> {{__('REPORTE DE SIGNOS')}}</span></li>
                            </ol>
                        </nav>
                    </div>
                </li>
            </ul>
        </header>
    </div>

    <div class="layout-px-spacing">
        <div class="container-fluid p-0">
            <div class="row d-flex justify-content-center">
                <div class="card col m-3">
                    <div class="card-body">
                        <form action="#" method="post" id="frm_reporte_signos">
                            <div class="row">
                                <div class="col">
                                    <label class="text-bold">Dias hábiles: <span class="text-danger">*</span></label>
                                    <input id="habiles" name="habiles" class="form-control form-control-sm" onkeydown="validateNumber(event)" oninput="validateForm()" required/>
                                </div>

                                <div class="col">
                                    <label class="text-bold">Dias transcurridos: <span class="text-danger">*</span></label>
                                    <input id="transcurridos" name="transcurridos" class="form-control form-control-sm" onkeydown="validateNumber(event)" oninput="validateForm()" required/>
                                </div>

                                <div class="col">
                                    <label class="text-bold">Fecha: <span class="text-danger">*</span></label>
                                    <input type="date" id="fecha" name="fecha" class="form-control form-control-sm" oninput="validateForm()" value="{{ $fecha_actual }}" required/>
                                </div>

                                <div class="col">
                                    <label class="text-bold text-center">¿Incluir año anterior?:</label>
                                    <div class="btn-group btn-group-anterior btn-group-sm margin-radio-group d-flex justify-content-center" role="group" aria-label="Seleccionar opción">
                                        <input type="radio" id="radio-anterior-no" name="anterior" value="no" onchange="selectAnteriorOption(this)" checked hidden>
                                        <label class="btn btn-outline-secondary btn-sm" for="radio-anterior-no">No incluir</label>

                                        <input type="radio" id="radio-anterior-si" name="anterior" value="si" onchange="selectAnteriorOption(this)" hidden>
                                        <label class="btn btn-outline-secondary btn-sm active" for="radio-anterior-si">Incluir</label>
                                    </div>
                                </div>
                            </div>
                            <hr>

                            <div class="row d-flex justify-content-center">
                                <div class="col-auto">
                                    <button type="button" id="btnProcess" class="btn btn-primary btn-submit d-inline-flex align-items-center" title="Procesar el reporte" onclick="procesarReporte()" disabled>
                                        <i class="las la-file-export icon-large mr-2"></i> Procesar reporte
                                    </button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>

            <div class="fragmento-tablas hide-element">

                <div class="row">
                    <div class="col d-flex justify-content-start">
                        <h6 class="text-bold" id="empresa"></h6>
                    </div>
                    <div class="col d-flex justify-content-end">
                        <button type="button" class="btn btn-primary btn-excel btn-submit" onclick="exportarExcel()">
                            <i class="las la-file-excel"></i> Descargar Excel
                        </button>
                    </div>
                </div>
                <div class="row">
                    <div class="col d-flex justify-content-start">
                        <h6 class="text-bold mr-2">Reporte de signos:</h6>
                        <h6 id="mostrarFecha"></h6>
                    </div>
                    <div class="col d-flex justify-content-start">
                        <h6 id="fechaHoy"></h6>
                    </div>
                </div>
                <div class="row">
                    <div class="col d-flex justify-content-start">
                        <h6 class="text-bold mr-2">Dias hábiles del mes: </h6>
                        <h6 id="mostrarHabiles"></h6>
                    </div>
                </div>
                <div class="row">
                    <div class="col d-flex justify-content-start">
                        <h6 class="text-bold mr-2">Dias hábiles transcurridos: </h6>
                        <h6 id="mostrarTranscurridos"></h6>
                    </div>
                </div>

                <div class="row">
                    <div class="col">
                        <div class="overflow-auto" style="max-width: 100%; width: 100%;">
                            <table class="table table-responsive-sm table-sm">
                                <thead>
                                    <tr class="table-header">
                                        <th colspan="5" style="text-align: center">Ventas</th>
                                        <th colspan="4" style="text-align: center">Ventas Acumuladas</th>
                                        <th colspan="4" style="text-align: center">Proyección</th>
                                    </tr>

                                    <tr>
                                        <th style="text-align: center">Sucursal</th>
                                        <th style="text-align: center">Venta</th>
                                        <th style="text-align: center">Costo</th>
                                        <th style="text-align: center">Utilidad</th>
                                        <th style="text-align: center">Margen (%)</th>

                                        <th style="text-align: center">Venta</th>
                                        <th style="text-align: center">Costo</th>
                                        <th style="text-align: center">Utilidad</th>
                                        <th style="text-align: center">Margen (%)</th>

                                        <th style="text-align: center">Proyección</th>
                                        <th style="text-align: center">Cuota</th>
                                        <th style="text-align: center">Cub (%)</th>
                                        <th style="text-align: center">Prod (%)</th>
                                    </tr>
                                </thead>
                                <tbody id="tabla_ventas">
                                    <!-- Aquí irían las filas de datos -->
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>

                <div class="row">
                    <table class="table table-responsive-sm table-sm">
                        <thead>
                            <tr class="table-header">
                                <th colspan="5" style="text-align: center">Pedidos</th>
                                <th colspan="4" style="text-align: center">Pedidos Acumulados</th>
                            </tr>

                            <tr>
                                <th style="text-align: center">Sucursal</th>
                                <th style="text-align: center">Pedidos</th>
                                <th style="text-align: center">Costo</th>
                                <th style="text-align: center">Utilidad</th>
                                <th style="text-align: center">Margen (%)</th>

                                <th style="text-align: center">Pedidos</th>
                                <th style="text-align: center">Costo</th>
                                <th style="text-align: center">Utilidad</th>
                                <th style="text-align: center">Margen (%)</th>
                            </tr>
                        </thead>
                        <tbody id="tabla_pedidos">
                            <!-- Aquí irían las filas de datos -->
                        </tbody>
                    </table>
                </div>

                <div class="row">
                    <table class="table table-responsive-sm table-sm">
                        <thead>
                            <tr class="table-header">
                                <th colspan="4" style="text-align: center">Cobranza</th>
                                <th colspan="3" style="text-align: center">Cobranzas Acumuladas</th>
                                <th colspan="3" style="text-align: center">Proyección</th>
                            </tr>

                            <tr>
                                <th style="text-align: center">Sucursal</th>
                                <th style="text-align: center">Cobranza</th>
                                <th style="text-align: center">Credito</th>
                                <th style="text-align: center">Contado</th>

                                <th style="text-align: center">Cobranza Acumulada</th>
                                <th style="text-align: center">Credito</th>
                                <th style="text-align: center">Contado</th>

                                <th style="text-align: center">Proyección</th>
                                <th style="text-align: center">Cuota</th>
                                <th style="text-align: center">Cub (%)</th>
                            </tr>
                        </thead>
                        <tbody id="tabla_cobranza">
                            <!-- Aquí irían las filas de datos -->
                        </tbody>
                    </table>
                </div>

                <div class="row">
                    <table class="table table-responsive-sm table-sm">
                        <thead>
                            <tr class="table-header">
                                <th colspan="8" style="text-align: center">Cartera</th>
                            </tr>

                            <tr>
                                <th style="text-align: center">Sucursal</th>
                                <th style="text-align: center">Saldo</th>
                                <th style="text-align: center">Vencido</th>
                                <th style="text-align: center">Vencido (%)</th>

                                <th style="text-align: center">Por vencer</th>
                                <th style="text-align: center">Por vencer (%)</th>

                                <th style="text-align: center">+30 dias vencido</th>
                                <th style="text-align: center">+30 dias vencido (%)</th>
                            </tr>
                        </thead>
                        <tbody id="tabla_cartera">
                            <!-- Aquí irían las filas de datos -->
                        </tbody>
                    </table>
                </div>

                <div class="row">
                    <table class="table table-responsive-sm table-sm">
                        <thead>
                            <tr class="table-header">
                                <th colspan="6" style="text-align: center">Inventario unidades</th>
                            </tr>

                            <tr>
                                <th style="text-align: center">Familia</th>
                                <th style="text-align: center">Ventas</th>
                                <th style="text-align: center">Ruta</th>
                                <th style="text-align: center">Consignación</th>
                                <th style="text-align: center">No disponible</th>
                                <th style="text-align: center">Total</th>
                            </tr>
                        </thead>
                        <tbody id="tabla_inventario">
                            <!-- Aquí irían las filas de datos -->
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('plugin-scripts')
    {!! Html::script('assets/js/loader.js') !!}
    {!! Html::script('plugins/jquery-ui/jquery-ui.min.js') !!}
    {!! Html::script('plugins/table/datatable/datatables.js') !!}
@endpush

@push('custom-scripts')
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.17.0/xlsx.full.min.js"></script>
    <script>

        const ajaxErrorMessage = {
            icon: 'error',
            title: '¡Lo sentimos!',
            text: 'Ha ocurrido un error inesperado, intentelo de nuevo más tarde'
        }

        $(document).ready(() => {
            $('#radio-anterior-no').prop('checked', true).trigger('change');
        });

        function selectAnteriorOption(input) {
            $('.btn-group-anterior .btn').removeClass('active');

            if ($(input).is(':checked')) {
                $(input).next('label').addClass('active');
            }
        }

        function validateForm() {
            const form = $('#frm_reporte_signos')[0];

            const formValid = form.checkValidity();

            $('#btnProcess').attr('disabled', !formValid);

            return formValid;
        }

        function procesarReporte() {
            if(validateForm()) {
                $('#tabla_ventas').empty();
                $('#tabla_pedidos').empty();
                $('#tabla_cobranza').empty();
                $('#tabla_cartera').empty();
                $('#tabla_inventario').empty();
                $('.fragmento-tablas').addClass('hide-element');

                const form = $('#frm_reporte_signos')[0];
                const formData = new FormData(form);

                $.ajax({
                    url: "{{ url('reportes/signos') }}",
                    type: 'POST',
                    data: formData,
                    processData: false,
                    contentType: false,
                    beforeSend: () => {
                        $("#loadingModal").modal("show");
                    },
                    success: (res, _, jqXHR) => {
                        setTimeout(() => {

                            $("#loadingModal").modal("hide")

                            mostrarInfo(res.infoConsulta, res.empresa, res.now);

                        }, 500);
                    },
                    error: (error) => {
                        setTimeout(() => {
                            $("#loadingModal").modal("hide")
                            Swal.fire(ajaxErrorMessage);
                        }, 500);
                    }
                })
            }
        }

        function mostrarInfo(infoConsulta, empresa, now, excelInfo = null) {
            fillVentas(infoConsulta.apartadoVentas, infoConsulta.apartadoVentasTotales)
            fillPedidos(infoConsulta.apartadoPedidos, infoConsulta.apartadoPedidosTotales)
            fillCobranza(infoConsulta.apartadoCobranza, infoConsulta.apartadoCobranzaTotales)
            fillCartera(infoConsulta.apartadoCartera, infoConsulta.apartadoCarteraTotales)
            fillInventario(infoConsulta.apartadoInventario, infoConsulta.apartadoInventarioTotales)

            $('.fragmento-tablas').removeClass('hide-element');

            $('#empresa').text(empresa);
            $('#mostrarFecha').text($('#fecha').val());
            $('#mostrarHabiles').text($('#habiles').val());
            $('#mostrarTranscurridos').text($('#transcurridos').val());

            $('#fechaHoy').text(now);

            $('#btnExcel').attr('href', excelInfo?.excelUrl ?? '');
            $('#btnExcel').attr('download', excelInfo?.excelFileName ?? '');
        }

        function fillVentas(ventas, totales) {
            let row = '';

            Object.keys(ventas).forEach(sucursal => {
                const venta = ventas[sucursal];
                let rowsFamilias = '';

                Object.keys(venta.familias).forEach(idFamilia => {
                    const familia = venta.familias[idFamilia];

                    rowsFamilias += `
                        <tr>
                            <td style="text-align: center">${familia.nombre}</td>
                            <td style="text-align: center">${aplicarRegexMonto(parseInt(familia.ventaFecha ?? 0), 0)}</td>
                            <td style="text-align: center">${aplicarRegexMonto(parseInt(familia.costoFecha ?? 0), 0)}</td>
                            <td style="text-align: center">${aplicarRegexMonto(parseInt(familia.utilidadFecha ?? 0), 0)}</td>
                            <td style="text-align: center" class="${familia.indicadorFecha}">${familia.margenFecha}%</td>
                            <td style="text-align: center">${aplicarRegexMonto(parseInt(familia.ventaAcumulada ?? 0), 0)}</td>
                            <td style="text-align: center">${aplicarRegexMonto(parseInt(familia.costoAcumulado ?? 0), 0)}</td>
                            <td style="text-align: center">${aplicarRegexMonto(parseInt(familia.utilidadAcumulada ?? 0), 0)}</td>
                            <td style="text-align: center" class="${familia.indicadorAcumulado}">${familia.margenAcumulado}%</td>
                            <td style="text-align: center">${aplicarRegexMonto(parseInt(familia.proyeccion ?? 0), 0)}</td>
                            <td style="text-align: center">${aplicarRegexMonto(parseInt(familia.cuota ?? 0), 0)}</td>
                            <td style="text-align: center" class="${familia.indicadorCuota}">${familia.porcentajeCuota}%</td>
                            <td style="text-align: center"> - </td>
                        </tr>
                    `;
                });

                row += `
                    <tr class="row-sucursal">
                        <td style="text-align: center">${venta.nombre}</td>
                        <td style="text-align: center">${aplicarRegexMonto(parseInt(venta.ventaFecha ?? 0), 0)}</td>
                        <td style="text-align: center">${aplicarRegexMonto(parseInt(venta.costoFecha ?? 0), 0)}</td>
                        <td style="text-align: center">${aplicarRegexMonto(parseInt(venta.utilidadFecha ?? 0), 0)}</td>
                        <td style="text-align: center">${venta.margenFecha}%</td>
                        <td style="text-align: center">${aplicarRegexMonto(parseInt(venta.ventaAcumulada ?? 0), 0)}</td>
                        <td style="text-align: center">${aplicarRegexMonto(parseInt(venta.costoAcumulado ?? 0), 0)}</td>
                        <td style="text-align: center">${aplicarRegexMonto(parseInt(venta.utilidadAcumulada ?? 0), 0)}</td>
                        <td style="text-align: center">${venta.margenAcumulado}%</td>
                        <td style="text-align: center">${aplicarRegexMonto(parseInt(venta.proyeccion ?? 0), 0)}</td>
                        <td style="text-align: center">${aplicarRegexMonto(parseInt(venta.cuota ?? 0), 0)}</td>
                        <td style="text-align: center" class="${venta.indicadorCuota}">${venta.porcentajeCuota}%</td>
                        <td style="text-align: center">${venta.porcentajeProductividad}%</td>
                    </tr>
                    ${rowsFamilias}
                `;
            });
            row += `
                <tr class="footer-totales">
                    <td style="text-align: center">Totales:</td>
                    <td style="text-align: center">${aplicarRegexMonto(parseInt(totales.totalVentasFecha ?? 0), 0)}</td>
                    <td style="text-align: center">${aplicarRegexMonto(parseInt(totales.totalCostosFecha ?? 0), 0)}</td>
                    <td style="text-align: center">${aplicarRegexMonto(parseInt(totales.totalUtilidadFecha ?? 0), 0)}</td>
                    <td style="text-align: center">${totales.totalMargenFecha}%</td>
                    <td style="text-align: center">${aplicarRegexMonto(parseInt(totales.totalMargenFecha ?? 0), 0)}</td>
                    <td style="text-align: center">${aplicarRegexMonto(parseInt(totales.totalCostosAcumuladas ?? 0), 0)}</td>
                    <td style="text-align: center">${aplicarRegexMonto(parseInt(totales.totalUtilidadAcumuladas ?? 0), 0)}</td>
                    <td style="text-align: center">${totales.totalMargenAcumuladas}%</td>
                    <td style="text-align: center">${aplicarRegexMonto(parseInt(totales.totalProyecciones ?? 0), 0)}</td>
                    <td style="text-align: center">${aplicarRegexMonto(parseInt(totales.totalCuotas ?? 0), 0)}</td>
                    <td style="text-align: center">${totales.totalPorcentajesCuota}%</td>
                    <td style="text-align: center">${totales.totalPorcentajesProductividad}%</td>
                </tr>
            `;

            $('#tabla_ventas').append(row);
        }

        function fillPedidos(pedidos, totales) {
            let row = '';

            Object.keys(pedidos).forEach(sucursal => {
                const pedido = pedidos[sucursal];
                let rowsFamilias = '';

                Object.keys(pedido.familias).forEach(idFamilia => {
                    const familia = pedido.familias[idFamilia];

                    rowsFamilias += `
                        <tr>
                            <td style="text-align: center">${familia.nombre}</td>
                            <td style="text-align: center">${aplicarRegexMonto(parseInt(familia.ventaFecha ?? 0), 0)}</td>
                            <td style="text-align: center">${aplicarRegexMonto(parseInt(familia.costoFecha ?? 0), 0)}</td>
                            <td style="text-align: center">${aplicarRegexMonto(parseInt(familia.utilidadFecha ?? 0), 0)}</td>
                            <td style="text-align: center" class="${familia.indicadorFecha}">${familia.margenFecha}%</td>
                            <td style="text-align: center">${aplicarRegexMonto(parseInt(familia.ventaAcumulada ?? 0), 0)}</td>
                            <td style="text-align: center">${aplicarRegexMonto(parseInt(familia.costoAcumulado ?? 0), 0)}</td>
                            <td style="text-align: center">${aplicarRegexMonto(parseInt(familia.utilidadAcumulada ?? 0), 0)}</td>
                            <td style="text-align: center" class="${familia.indicadorAcumulado}">${familia.margenAcumulado}%</td>
                        </tr>
                    `;
                });

                row += `
                    <tr class="row-sucursal">
                        <td style="text-align: center">${pedido.nombre}</td>
                        <td style="text-align: center">${aplicarRegexMonto(parseInt(pedido.ventaFecha ?? 0), 0)}</td>
                        <td style="text-align: center">${aplicarRegexMonto(parseInt(pedido.costoFecha ?? 0), 0)}</td>
                        <td style="text-align: center">${aplicarRegexMonto(parseInt(pedido.utilidadFecha ?? 0), 0)}</td>
                        <td style="text-align: center">${pedido.margenFecha}%</td>
                        <td style="text-align: center">${aplicarRegexMonto(parseInt(pedido.ventaAcumulada ?? 0), 0)}</td>
                        <td style="text-align: center">${aplicarRegexMonto(parseInt(pedido.costoAcumulado ?? 0), 0)}</td>
                        <td style="text-align: center">${aplicarRegexMonto(parseInt(pedido.utilidadAcumulada ?? 0), 0)}</td>
                        <td style="text-align: center">${pedido.margenAcumulado}%</td>
                    </tr>
                    ${rowsFamilias}
                `;
            });
            row += `
                <tr class="footer-totales">
                    <td style="text-align: center">Totales:</td>
                    <td style="text-align: center">${aplicarRegexMonto(parseInt(totales.totalVentasFecha ?? 0), 0)}</td>
                    <td style="text-align: center">${aplicarRegexMonto(parseInt(totales.totalCostosFecha ?? 0), 0)}</td>
                    <td style="text-align: center">${aplicarRegexMonto(parseInt(totales.totalUtilidadFecha ?? 0), 0)}</td>
                    <td style="text-align: center">${totales.totalMargenFecha}%</td>
                    <td style="text-align: center">${aplicarRegexMonto(parseInt(totales.totalMargenFecha ?? 0), 0)}</td>
                    <td style="text-align: center">${aplicarRegexMonto(parseInt(totales.totalCostosAcumuladas ?? 0), 0)}</td>
                    <td style="text-align: center">${aplicarRegexMonto(parseInt(totales.totalUtilidadAcumuladas ?? 0), 0)}</td>
                    <td style="text-align: center">${totales.totalMargenAcumuladas}%</td>
                </tr>
            `;

            $('#tabla_pedidos').append(row);
        }

        function fillCobranza(cobranzas, totales) {
            let row = '';

            Object.keys(cobranzas).forEach(sucursal => {
                const cobranza = cobranzas[sucursal];
                let rowsFamilias = '';

                Object.keys(cobranza.familias).forEach(idFamilia => {
                    const familia = cobranza.familias[idFamilia];

                    rowsFamilias += `
                        <tr>
                            <td style="text-align: center">${familia.nombre}</td>
                            <td style="text-align: center">${aplicarRegexMonto(parseInt(familia.cobranzaFecha ?? 0), 0)}</td>
                            <td style="text-align: center">${aplicarRegexMonto(parseInt(familia.creditoFecha ?? 0), 0)}</td>
                            <td style="text-align: center">${aplicarRegexMonto(parseInt(familia.contadoFecha ?? 0), 0)}</td>
                            <td style="text-align: center">${aplicarRegexMonto(parseInt(familia.cobranzaAcumulado ?? 0), 0)}</td>
                            <td style="text-align: center">${aplicarRegexMonto(parseInt(familia.creditoAcumulado ?? 0), 0)}</td>
                            <td style="text-align: center">${aplicarRegexMonto(parseInt(familia.contadoAcumulado ?? 0), 0)}</td>
                            <td style="text-align: center">${aplicarRegexMonto(parseInt(familia.proyeccion ?? 0, 0))}</td>
                            <td style="text-align: center">${aplicarRegexMonto(parseInt(familia.cuota ?? 0, 0))}</td>
                            <td style="text-align: center"class="${familia.indicadorCuota}">${familia.porcentajeCuota}%</td>
                        </tr>
                    `;
                });

                row += `
                    <tr class="row-sucursal">
                        <td style="text-align: center">${cobranza.nombre}</td>
                        <td style="text-align: center">${aplicarRegexMonto(parseInt(cobranza.cobranzaFecha ?? 0), 0)}</td>
                        <td style="text-align: center">${aplicarRegexMonto(parseInt(cobranza.creditoFecha ?? 0), 0)}</td>
                        <td style="text-align: center">${aplicarRegexMonto(parseInt(cobranza.contadoFecha ?? 0), 0)}</td>
                        <td style="text-align: center">${aplicarRegexMonto(parseInt(cobranza.cobranzaAcumulado ?? 0), 0)}</td>
                        <td style="text-align: center">${aplicarRegexMonto(parseInt(cobranza.creditoAcumulado ?? 0), 0)}</td>
                        <td style="text-align: center">${aplicarRegexMonto(parseInt(cobranza.contadoAcumulado ?? 0), 0)}</td>
                        <td style="text-align: center">${aplicarRegexMonto(parseInt(cobranza.proyeccion ?? 0, 0))}</td>
                        <td style="text-align: center">${aplicarRegexMonto(parseInt(cobranza.cuota ?? 0, 0))}</td>
                        <td style="text-align: center" class="${cobranza.indicadorCuota}">${cobranza.porcentajeCuota}%</td>
                    </tr>
                    ${rowsFamilias}
                `;
            });
            row += `
                <tr class="footer-totales">
                    <td style="text-align: center">Totales:</td>
                    <td style="text-align: center">${aplicarRegexMonto(parseInt(totales.totalCobranzaFecha ?? 0), 0)}</td>
                    <td style="text-align: center">${aplicarRegexMonto(parseInt(totales.totalCreditoFecha ?? 0), 0)}</td>
                    <td style="text-align: center">${aplicarRegexMonto(parseInt(totales.totalContadoFecha ?? 0), 0)}</td>
                    <td style="text-align: center">${aplicarRegexMonto(parseInt(totales.totalCobranzaAcumulado ?? 0), 0)}</td>
                    <td style="text-align: center">${aplicarRegexMonto(parseInt(totales.totalCreditoAcumulado ?? 0), 0)}</td>
                    <td style="text-align: center">${aplicarRegexMonto(parseInt(totales.totalContadoAcumulado ?? 0), 0)}</td>
                    <td style="text-align: center">${aplicarRegexMonto(parseInt(totales.totalProyeccion ?? 0, 0))}</td>
                    <td style="text-align: center">${aplicarRegexMonto(parseInt(totales.totalCuota ?? 0, 0))}</td>
                    <td style="text-align: center">${totales.totalPorcentajeCuota}%</td>
                </tr>
            `;

            $('#tabla_cobranza').append(row);
        }

        function fillCartera(infoCartera, totales) {
            let row = '';

            Object.keys(infoCartera).forEach(sucursal => {
                const cartera = infoCartera[sucursal];

                row += `
                    <tr class="row-sucursal">
                        <td style="text-align: center">${sucursal}</td>
                        <td style="text-align: center">${aplicarRegexMonto(parseInt(cartera.saldo ?? 0), 0)}</td>
                        <td style="text-align: center">${aplicarRegexMonto(parseInt(cartera.saldoVencido ?? 0), 0)}</td>
                        <td style="text-align: center">${cartera.porcentajeSaldoVencido ?? 0}%</td>
                        <td style="text-align: center">${aplicarRegexMonto(parseInt(cartera.saldoVencer ?? 0), 0)}</td>
                        <td style="text-align: center">${cartera.porcentajeSaldoVencer ?? 0}%</td>
                        <td style="text-align: center">${aplicarRegexMonto(parseInt(cartera.saldoVencidoMes ?? 0), 0)}</td>
                        <td style="text-align: center">${cartera.porcentajeSaldoVencidoMes}%</td>
                    </tr>
                `;
            });
            row += `
                <tr class="footer-totales">
                    <td style="text-align: center">Totales:</td>
                    <td style="text-align: center">${aplicarRegexMonto(parseInt(totales.totalSaldo ?? 0), 0)}</td>
                    <td style="text-align: center">${aplicarRegexMonto(parseInt(totales.totalSaldoVencido ?? 0), 0)}</td>
                    <td style="text-align: center">${totales.totalPorcentajeSaldoVencido ?? 0}%</td>
                    <td style="text-align: center">${aplicarRegexMonto(parseInt(totales.totalSaldoVencer ?? 0), 0)}</td>
                    <td style="text-align: center">${totales.totalPorcentajeSaldoVencer ?? 0}%</td>
                    <td style="text-align: center">${aplicarRegexMonto(parseInt(totales.totalSaldoVencidoMes ?? 0), 0)}</td>
                    <td style="text-align: center">${totales.totalPorcentajeSaldoVencidoMes}%</td>
                </tr>
            `;

            $('#tabla_cartera').append(row);
        }

        function fillInventario(infoInventario, totales, decimales = 0) {
            let row = '';

            Object.keys(infoInventario).forEach(familia => {
                const inventario = infoInventario[familia];

                row += `
                    <tr class="row-sucursal">
                        <td style="text-align: center">${familia}</td>
                        <td style="text-align: center">${aplicarRegexMonto(parseInt(inventario.Ventas ?? 0), decimales)}</td>
                        <td style="text-align: center">${aplicarRegexMonto(parseInt(inventario.Ruta ?? 0), decimales)}</td>
                        <td style="text-align: center">${aplicarRegexMonto(parseInt(inventario.Consignacion ?? 0), decimales)}</td>
                        <td style="text-align: center">${aplicarRegexMonto(parseInt(inventario['No disponible'] ?? 0), decimales)}</td>
                        <td style="text-align: center">${aplicarRegexMonto(parseInt(inventario.Total ?? 0), decimales)}</td>
                    </tr>
                `;
            });

            row += `
                <tr class="footer-totales">
                    <td style="text-align: center">Totales:</td>
                    <td style="text-align: center">${aplicarRegexMonto(parseInt(totales.Ventas ?? 0), decimales)}</td>
                    <td style="text-align: center">${aplicarRegexMonto(parseInt(totales.Ruta ?? 0), decimales)}</td>
                    <td style="text-align: center">${aplicarRegexMonto(parseInt(totales.Consignacion ?? 0), decimales)}</td>
                    <td style="text-align: center">${aplicarRegexMonto(parseInt(totales['No disponible'] ?? 0), decimales)}</td>
                    <td style="text-align: center">${aplicarRegexMonto(parseInt(totales.Total ?? 0), decimales)}</td>
                </tr>
            `;

            $('#tabla_inventario').append(row);
        }

        function exportarExcel() {
            let wb = XLSX.utils.book_new();

            let allData = [];

            let tablas = document.querySelectorAll('table');

            tablas.forEach((tabla, index) => {
                let ws = XLSX.utils.table_to_sheet(tabla);

                if (index > 0) {
                    allData.push([]);
                }

                let rows = XLSX.utils.sheet_to_json(ws, {header: 1});

                allData.push(...rows);
            });

            let wsFinal = XLSX.utils.aoa_to_sheet(allData);

            XLSX.utils.book_append_sheet(wb, wsFinal, "Signos");

            XLSX.writeFile(wb, 'ReporteSignos.xlsx');
        }
    </script>
@endpush