


<?php $__env->startSection('tituloPagina', 'Variables Financieras'); ?>


<?php $__env->startSection('cssPlantilla'); ?>

    <!-- Font Awesome v5.15.4  -->
    <link rel="stylesheet" href="<?php echo e(asset('vendor/daite/coopdigital/src/public/librerias/font-awesome/5.15.4/css/fontawesome.css')); ?>">

    

    
    <link rel="stylesheet" href="<?php echo e(asset('archivos/utilidades/tablasRegistros/css/tablaRegistrosFiltro.css')); ?>">

    <!-- CSS -->
    <link rel="stylesheet" href="<?php echo e(asset('vendor/daite/coopdigital/src/public/css/vista/panel/variablesFinancieras.css')); ?>">

    <style>
/* ! Tabla */

table {
    border-radius: 2.5px !important
}

table thead th:first-child {
    border-top-left-radius: 2.5px
}

table thead th:last-child {
    border-top-right-radius: 2.5px
}

table[id] tbody tr:has([colspan="100%"]) {
    background-color: #2e9939a1;
    font-size: 11px;
    letter-spacing: 1px;
    color: #fff
}

table[id] tbody tr:hover,
table[id] tbody tr:focus {
    background-color: #2E9939
}

table[id] tbody tr:hover *,
table[id] tbody tr:focus * {
    color: #fff !important
}

/* ! Acordeón */

.acordeon {
    margin-bottom: 0;
    padding: 5px !important
}

.acordeon .card-header {
    padding: 0
}

.acordeon .accordion-button.collapsed {
    border-radius: 2.5px;
    background-color: #75ba1b !important
}

.acordeon .accordion-button.collapsed:hover,
.acordeon .accordion-button.collapsed:active {
    background-color: #2E9939 !important
}

.acordeon .accordion-button.collapsed:focus {
    box-shadow: 0 0 0 2.5px rgb(127 179 68 / 25%) !important;
    background-color: #2E9939 !important
}

.acordeon .accordion-button {
    height: 25px;
    border-radius: 2.5px 2.5px 0 0;
    padding: 0 5px;
    background-color: #2E9939 !important;
    font-size: 10px;
    color: #fff !important
}

.acordeon .accordion-button:focus {
    box-shadow: none !important
}

.acordeon .accordion-button::after {
    background-size: auto;
    width: 10px;
    height: 10px
}

.acordeon #contenidoAcordeon .card-body {
    margin: 2.5px;
    padding: 5px;
    border-radius: 0 0 2.5px 2.5px;
    box-shadow: 0 0 0 2.5px rgb(127 179 68 / 25%) !important;
    text-align: -webkit-center !important
}

.buttons-print {
    display: none;
    width: 25px;
    height: 25px;
    background-color: #2E9939;
    font-size: 10px
}

.buttons-print:hover,
.buttons-print:focus {
    background-color: #2E9939
}

.daterangepicker.single .drp-calendar.left,
.daterangepicker .calendar-table {
    border-radius: 5px 5px 0 0;
    background-color: #75ba1b
}

.daterangepicker .calendar-table .next span,
.daterangepicker .calendar-table .prev span {
    border: solid #fff;
    border-width: 0 1px 1px 0
}

.daterangepicker select.monthselect,
.daterangepicker select.yearselect {
    border-radius: 5px;
    border: none;
    width: auto;
    color: #6c757d
}

.daterangepicker select.monthselect:focus,
.daterangepicker select.yearselect:focus {
    box-shadow: 0 0 0 2.5px rgb(255 255 255 / 25%) !important;
    outline: 0
}


/* .daterangepicker select.monthselect>option,
.daterangepicker select.yearselect>option {
    background-color: #75ba1b;
    color: #fff
}


.daterangepicker select.monthselect>option:focus,
.daterangepicker select.yearselect>option:focus,
.daterangepicker select.monthselect>option:checked,
.daterangepicker select.yearselect>option:checked {
    background-color: #2E9939 !important;
    color: #fff
} */

.daterangepicker .drp-calendar.left .calendar-table {
    padding: 0
}

.daterangepicker .calendar-table table {
    width: 200px !important;
    min-width: 0
}

.daterangepicker .calendar-table th,
.daterangepicker .calendar-table td {
    border-radius: 0.3rem;
    border: 0;
    min-height: 0;
    background-color: #75ba1b;
    color: #fff;
    line-height: 0
}

.daterangepicker td.start-date.end-date {
    border-radius: 0.3rem;
}

.daterangepicker td.available:hover,
.daterangepicker th.available:hover {
    background-color: #2E9939;
    color: #fff
}

.daterangepicker td.start-date.end-date {
    background-color: #2E9939
}

.daterangepicker td.disabled,
.daterangepicker option.disabled {
    background-color: #2E9939 !important
}

.drp-selected {
    color: #fff
}

.daterangepicker .drp-buttons {
    border-radius: 0 0 0.3rem 0.3rem;
    border-top: 1px solid #fff;
    background-color: #75ba1b
}

.daterangepicker .drp-buttons .btn {
    border-radius: 0.3rem;
    border: none;
    background-color: #fff;
    padding: 0;
    color: #6c757d
}

.daterangepicker .drp-buttons .btn:hover {
    background-color: #2E9939;
    color: #fff
}

#filtroCuenta,
#filtroNumeroCuenta {
    border-radius: 0.3rem;
    background-image: none;
    appearance: auto
}

#filtroTipoCuenta {
    border-radius: 0.3rem;
    background-image: none;
    appearance: auto
}

#filtroDebitoCredito {
    border-radius: 0.3rem;
    background-image: none;
    appearance: auto
}

select.form-select.form-select-sm {
    background-image: none;
    appearance: auto
}

.col-12.col-lg-2 label {
    margin-top: 5px
}

#filtroFecha {
    width: 124px !important;
}

#filtroFecha,
.col-12.col-lg-2 .col-6 [name]:not([type="checkbox"]) {
    height: 25px
}

.col-12.col-lg-2 .col-6 [name]:not([type="checkbox"]) {
    width: 114px
}

.col-12.col-lg-2 .col-12 [name] {
    height: 25px
}

#botonBuscar,
#botonCalcular {
    width: 100%;
    height: 26px;
    margin: 5px 0;
    border: none;
    background-color: #75ba1b;
    font-size: 10px
}

#botonBuscar:hover,
#botonBuscar:active,
#botonBuscar:focus,
#botonCalcular:hover,
#botonCalcular:active,
#botonCalcular:focus {
    background-color: #2E9939
}

.contenedorTabla {
    padding: 5px !important
}

.dataTables_wrapper.dt-bootstrap5 input {
    width: auto;
    height: auto;
    padding: 0 5px;
    font-size: 7px !important
}

.dataTables_wrapper.dt-bootstrap5>div:last-child {
    margin-bottom: 0 !important
}

[name="tablaRegistros_length"] {
    border-radius: 0.3rem;
    text-align: center;
    padding: 0;
    background-image: none
}


/* [name="tablaRegistros_length"]>option {
    background-color: #75ba1b;
    color: #fff
}

[name="tablaRegistros_length"]>option:checked {
    background-color: #2E9939;
} */

.col-sm-12.col-md-4 {
    width: 50% !important
}

.col-sm-12.col-md-2 {
    width: 50%
}

.dataTables_filter>label>input {
    border-radius: 0.3rem;
}

.col-md-4 {
    padding-right: 0;
    width: 38%
}

.col-md-2 {
    padding-left: 0;
    width: 12%
}

.col-sm-12.col-md-2>.flexcontent {
    text-align: right
}

.buttons-collection,
.buttons-print {
    border-radius: 0.3rem !important;
    border: none;
    padding: 0;
}

.buttons-collection>span>i,
.buttons-print>span>i {
    width: auto;
    height: auto
}

table.dataTable>tbody>tr.child span.dtr-title {
    text-transform: capitalize
}

.dataTables_scrollHead {
    border-radius: 2.5px 2.5px 0 0;
    background-color: #75ba1b;
    text-align: center
}

.dataTables_scrollHeadInner,
.table.dataTable {
    width: 100% !important;
}

.table.dataTable {
    margin: 0 !important
}

.dataTables_scrollBody {
    max-height: 70px !important;
}


/* #tablaRegistros>thead {
    display: none
} */

.sorting,
.sorting_desc,
.sorting_asc,
.sorting_disabled {
    color: #fff;
    text-transform: capitalize
}

.dataTables_empty {
    padding: 0 !important
}

.odd[role="row"]>td,
.even[role="row"]>td {
    text-align: center
}


/* tr.odd td,
tr.even td {
    min-width: 0 !important;
    max-width: 0 !important;
    width: auto !important
} */

.even[role="row"] {
    background-color: rgb(0 92 172 / 10%)
}

.dataTables_scrollFoot {
    border-radius: 0 0 2.5px 2.5px;
    background-color: #75ba1b;
    text-align: center
}

.dataTables_scrollFootInner {
    width: 100% !important
}

.dataTables_scrollFoot>.dataTables_scrollFootInner>.table.dataTable>tfoot>tr>th[rowspan="1"] {
    color: #fff
}

table.dataTable>thead>tr>td:not(.sorting_disabled2),
table.dataTable>thead>tr>th:not(.sorting_disabled2),
div.dataTables_scrollBody>table>tbody tr:first-child td,
div.dataTables_scrollBody>table>tbody tr:first-child th,
.odd[role="row"]>td,
.even[role="row"]>td,
.dataTables_scrollFoot>.dataTables_scrollFootInner>.table.dataTable>tfoot>tr>th[rowspan="1"] {
    /* padding: 2.5px 0.18px; */
    height: 20px;
    padding: 0 0.18px;
    font-size: 7px !important
}
#collapseOne>.card-body {
    text-align: -webkit-center;
}

.col-12.col-lg-2:has(label) * {
    font-size: 10px
}

.dataTable-table>:not(caption)>*>*,
.table>:not(caption)>*>* {
    padding: 0
}

thead {
    position: sticky;
    top: 0;
    background-color: #75ba1b;
    color: #fff
}

.table-responsive thead th,
.table-responsive tbody {
    font-size: 11px;
    letter-spacing: -0.4px
}

.contenedorTabla {
    /* height: 29vh; */
    overflow: auto;
    white-space: nowrap
}

.table-responsive tbody tr:has(:not([scope="colgroup"])) {
    font-size: 11px;
    letter-spacing: -0.4px;
    color: #000 !important
}

.table-responsive tbody tr:has(#A-total-variacion) * {
    font-weight: 700;
}

.dataTable-table>:not(caption)>*>*,
.table>:not(caption)>*>* {
    padding: 2.5px;
}


/* 10px */


/* 4.285714285714286vw */

/* @media (min-width: 576px) {}

@media (min-width: 768px) {}

@media (min-width: 992px) {
    .col-12:has(.page-heading) {
        margin: 0 0;
    }
    .page-heading .campoTitulo {
        width: auto;
        height: auto;
    }
    .page-heading .campoFecha {
        width: auto;
        height: auto;
    }
    .page-heading .campoBuscar {
        width: auto;
        height: auto;
    }
    .campoTitulo h3 {
        width: auto;
        height: auto;
        font-size: 12px
    }
    .campoFecha input,
    .campoBuscar button {
        width: 100%;
        height: 100%;
        padding: 0;
        font-size: 12px
    }
    .daterangepicker {
        width: auto
    }
    .daterangepicker li {
        font-size: 12px !important
    }
    .table-responsive thead th,
    .table-responsive tbody h4 {
        font-size: 12px
    }
    .page-content>.row>.col-12.col-lg-12 {
        height: 144.16666666666666vw;
        overflow: auto
    }
    .table-responsive tbody tr {
        font-size: 12px
    }
}

@media (min-width: 1200px) {
    .col-12:has(.page-heading) {
        margin: 0 0;
    }
    .page-heading .campoTitulo {
        width: auto;
        height: auto;
    }
    .page-heading .campoFecha {
        width: auto;
        height: auto;
    }
    .page-heading .campoBuscar {
        width: auto;
        height: auto;
    }
    .campoTitulo h3 {
        width: auto;
        height: auto;
        font-size: 12px
    }
    .campoFecha input,
    .campoBuscar button {
        width: 100%;
        height: 100%;
        padding: 0;
        font-size: 12px
    }
    .daterangepicker {
        width: auto
    }
    .daterangepicker li {
        font-size: 12px !important
    }
    .table-responsive thead th,
    .table-responsive tbody h4 {
        font-size: 12px
    }
    .page-content>.row>.col-12.col-lg-12 {
        height: 600px;
        overflow: auto
    }
    .table-responsive tbody tr {
        font-size: 12px
    }
} */

.nuevoRow {
  background: transparent !important;
  margin-top: 10px !important
}

    </style>

<?php $__env->stopSection(); ?>


<?php $__env->startSection('contenidoPlantilla'); ?>

    
    <div class="row nuevoRow">
        <div class="col-12 col-lg-12">
            <div class="row">

                
                <div class="card acordeon">

                    
                    <div class="card-header">
                        <a class="btn accordion-button" data-bs-toggle="collapse" href="#contenidoAcordeon"
                            aria-expanded="true">
                            Filtros
                        </a>
                    </div>

                    
                    <div id="contenidoAcordeon" class="collapse show" data-bs-parent="#filtros">
                        <div class="card-body">
                            <div class="row">

                              <div class="col-12">
                                  <div class="row">

                                      <div class="col-12 col-lg-3">
                                          <div class="row">

                                              
                                              <div class="col-6">
                                                  <label for="sucursal">Sucursal</label>
                                                  <select class="form-select form-select-sm"
                                                      id="sucursal" name="sucursal">

                                                      <option value=""></option>

                                                  </select>
                                              </div>

                                              
                                              <div class="col-6">
                                                  <label for="clase">Clase</label>
                                                  <select class="form-select form-select-sm"
                                                      id="clase" name="clase">

                                                      <option value=""></option>

                                                  </select>
                                              </div>

                                          </div>
                                      </div>

                                      <div class="col-12 col-lg-3">
                                          <div class="row">

                                              
                                              <div class="col-6">
                                                  <label for="cobrador">Cobrador</label>
                                                  <select class="form-select form-select-sm"
                                                      id="cobrador" name="cobrador">

                                                      <option value=""></option>

                                                  </select>
                                              </div>

                                              
                                              

                                              
                                              <div class="col-6">
                                                  <label for="supervisor">Supervisor</label>
                                                  <select class="form-select form-select-sm"
                                                      id="supervisor" name="supervisor">

                                                      <option value=""></option>

                                                  </select>
                                              </div>

                                          </div>
                                      </div>

                                      <div class="col-12 col-lg-3">
                                          <div class="row">

                                              
                                              <div class="col-6">
                                                  <label for="anoMes">Año - Mes</label>
                                                  <input type="month" class="form-control form-control-sm" id="anoMes" name="anoMens" max="<?php echo e(date('Y')); ?>-12" />
                                              </div>

                                              
                                              <div class="col-6">
                                                <div class="form-check">
                                                  <input type="checkbox" class="form-check-input form-check-primary form-check-glow" id="carteraMora" name="carteraMora">
                                                  <label class="form-check-label" for="carteraMora">Cartera en Mora</label>
                                                </div>
                                              </div>

                                          </div>
                                      </div>

                                      
                                      <div class="col-12 col-lg-3">
                                          <button class="btn btn-secondary"
                                              id="botonBuscar">Buscar</button>
                                      </div>

                                  </div>
                              </div>

                            </div>
                        </div>
                    </div>
                </div>


                
                <?php echo csrf_field(); ?>

                
                <div class="contenedorTabla">

                    
                    <table class="table table-responsive" id="tablaRegistros">

                        
                        <thead>
                            <tr>
                                <th class="alinearIzquierda" scope="col">Renglón</th>
                                <th class="alinearDerecha" id="mesAnterior" scope="col"></th>
                                <th class="alinearDerecha" scope="col">%</th>
                                <th class="alinearDerecha" id="mesActual" scope="col"></th>
                                <th class="alinearDerecha" scope="col">%</th>
                                <th class="alinearDerecha" scope="col">Variación</th>
                            </tr>
                        </thead>

                        
                        <tbody>
                        </tbody>

                        
                        <tfoot>
                            <tr>
                            </tr>
                        </tfoot>

                    </table>

                </div>

            </div>
        </div>
    </div>

<?php $__env->stopSection(); ?>


<?php $__env->startSection('jsPlantilla'); ?>

    

    <!-- Moment.js v2.22.1 -->
    <script src="<?php echo e(asset('vendor/daite/coopdigital/src/public/librerias/moment.js/2.22.1/moment.min.js')); ?>"></script>

    
    <script src="<?php echo e(asset('vendor/daite/coopdigital/src/public/librerias/moment.js/2.22.1/locales/moment-locale-es-do.js')); ?>"></script>

    
    <script>

        $('#mesAnterior').text(
            moment().subtract(1, 'month').format('MMMM')
        );

        $('#mesActual').text(
            moment().format('MMMM')
        );

    </script>
    <script type="module" src="<?php echo e(asset('archivos/js/aplicacion/seccion/variablesFinancieras.js')); ?>"></script>

    <script src="<?php echo e(asset('vendor/daite/coopdigital/src/public/js/utilidades/herramientas.js')); ?>"></script>

    <script>

      const traerFiltros = "<?php echo e(route('traerFiltrosVariablesFinancieras')); ?>";
      const traerRegistros = "<?php echo e(route('traerVariablesFinancierasPrestamos')); ?>";

      // {}
      $(async function() {

          // ! Petición hacía la base de datos para los selectores (filtros para la tabla de registros)
          await $.get(traerFiltros, function(registros) {

              // + Opciones del selector #surcusal
              registros.sucursales.forEach(sucursal => {

                  $('#sucursal')
                      .last()
                      .append(
                          '<option value="' + sucursal['codigo_sucursal'] + '">' +
                          sucursal['sucursal'] +
                          '</option>'
                      );

              });

              // + Opciones del selector #vendedor
              registros.vendedores.forEach(vendedor => {

                  $('#vendedor')
                      .last()
                      .append(
                          '<option value="' + vendedor['codigo_vendedor'] + '">' +
                          vendedor['vendedor'] +
                          '</option>'
                      );

              });

              // + Opciones del selector #clase
              registros.clases.forEach(clase => {

                  $('#clase')
                      .last()
                      .append(
                          '<option value="' + clase['codigo_clase'] + '">' +
                          clase['clase'] +
                          '</option>'
                      );

              });

              // + Opciones del selector #cobrador
              registros.cobradores.forEach(cobrador => {

                  $('#cobrador')
                      .last()
                      .append(
                          '<option value="' + cobrador['codigo_cobrador'] + '">' +
                          cobrador['cobrador'] +
                          '</option>'
                      );

              });

              // + Opciones del selector #oficialCuenta
              registros.oficiales.forEach(oficialCuenta => {

                  $('#oficialCuenta')
                      .last()
                      .append(
                          '<option value="' + oficialCuenta['codigo_oficial'] + '">' +
                          oficialCuenta['oficial'] +
                          '</option>'
                      );

              });

              // + Opciones del selector #supervisor
              registros.supervisores.forEach(supervisor => {

                  $('#supervisor')
                      .last()
                      .append(
                          '<option value="' + supervisor['codigo_supervisor'] + '">' +
                          supervisor['supervisor'] +
                          '</option>'
                      );

              });

              // + Campo mes #anoMes
              $('#anoMes').val(
                  moment().format('YYYY-MM')
              );

              // + Campo fecha #fechaCorte
              $('#fechaCorte').val(
                  moment().format('YYYY-MM-DD')
              )

          });

          // ! Serial para poder solicitar peticiones de tipo POST
          $.ajaxSetup({
              headers: {
                  'X-CSRF-TOKEN': $('[name="_token"]').val()
              }
          });

          // ! Inicializando tabla de registros normal con petición hacía la base de datos para los registros
          // inicializarResumen();

          // ! Evento al presionar clic en el botón #botonBuscar
          $('#botonBuscar').on('click', function() {

              // ? Inicializando tabla de registros normal con petición hacía la base de datos para los registros
              inicializarResumen()

          });

          // ! Función para inicializar la tabla de registros con petición hacía la base de datos para los registros
          function inicializarResumen() {

              // + Petición hacía la base de datos para traer los registros de la tabla de registros normal .table
              $.ajax({
                  url: traerRegistros,
                  type: 'POST',

                  // ? Parámetros para al realizar la petición de tipo POST
                  data: (0) ? {

                      ano: parseInt(
                          anoMes
                          .value
                          .split('-')[0]
                      ),
                      mes: parseInt(anoMes
                          .value
                          .split('-')[1]
                      ),
                      sucursal: sucursal.value,
                      vendedor: vendedor.value,

                  } : {

                      ano: parseInt(
                          anoMes
                          .value
                          .split('-')[0]
                      ),
                      mes: parseInt(anoMes
                          .value
                          .split('-')[1]
                      ),
                      sucursal: sucursal.value,
                      clase_prestamo: clase.value,
                      cobrador: cobrador.value,
                      // oficial_prestamo: oficialCuenta.value,
                      salida_con_mora: (carteraMora.checked) ? 1 : 0,
                      // fecha_corte: fechaCorte.value.replaceAll('-', ''),
                      supervisor: supervisor.value

                  },
                  dataType: 'JSON',
                  beforeSend: function() {

                      botonBuscar.disabled = true

                  },

                  // ? Función al terminar la petición hacía la base de datos para asignar los registros a la tabla de registros normal .table
                  success: function(registros) {

                      // * Eliminando todos los registros
                      $('tbody > *').remove();

                      // * Asignando cantidad total de registros, porcientos y montos
                      let total = {
                          mesAnterior: parseFloat(0),
                          porcientoAnterior: parseFloat(0),
                          mesActual: parseFloat(0),
                          porcientoActual: parseFloat(0),
                          variacion: parseFloat(0)
                      };

                      registros.forEach((registro, indice) => {

                          // * Condición para identificar si es la primera vez del ciclo
                          if (indice == 0) {

                              // Asignando estructura HTML para la tabla de registros normal .table con los registros de la petición
                              $('tbody').append(`
                              <tr>
                                  <th class="${registro.grupo}" colspan="100%" scope="colgroup">
                                      ${registro.descripcion_grupo}
                                  </th>
                              </tr>
                              <tr>
                                  <td class="alinearIzquierda">${registro.categoria}</td>
                                  <td class="alinearDerecha ${registro.grupo}-mesAnterior">
                                      ${formatoNumerico(registro.valor_anterior, 2)}
                                  </td>
                                  <td class="alinearDerecha ${registro.grupo}-porcientoAnterior">
                                      ${formatoNumerico(registro.porciento_anterior, 2)}
                                  </td>
                                  <td class="alinearDerecha ${registro.grupo}-mesActual">
                                      ${formatoNumerico(registro.valor_actual, 2)}
                                  </td>
                                  <td class="alinearDerecha ${registro.grupo}-porcientoActual">
                                      ${formatoNumerico(registro.porciento_actual, 2)}
                                  </td>
                                  <td class="alinearDerecha ${registro.grupo}-variacion">
                                      ${formatoNumerico(registro.variacion, 2)}
                                  </td>
                              </tr>
                              <tr>
                                  <td class="alinearIzquierda">TOTAL</td>
                                  <td class="alinearDerecha" id="${registro.grupo}-total-mesAnterior"></td>
                                  <td class="alinearDerecha" id="${registro.grupo}-total-porcientoAnterior"></td>
                                  <td class="alinearDerecha" id="${registro.grupo}-total-mesActual"></td>
                                  <td class="alinearDerecha" id="${registro.grupo}-total-porcientoActual"></td>
                                  <td class="alinearDerecha" id="${registro.grupo}-total-variacion"></td>
                              </tr>
                              `)

                          } else {

                              // Condición para identificar si los registros pertenecen a la misma lista ordenada
                              if (registro.grupo == registros[indice - 1].grupo) {

                                  // Asignando estructura HTML para la tabla de registros normal .table con los registros de la petición
                                  $(`.table tbody > :not(tr:has(#${registro.grupo}-total-mesAnterior))`).last().after(`
                                  <tr>
                                      <td class="alinearIzquierda">${registro.categoria}</td>
                                      <td class="alinearDerecha ${registro.grupo}-mesAnterior">
                                          ${formatoNumerico(registro.valor_anterior, 2)}
                                      </td>
                                      <td class="alinearDerecha ${registro.grupo}-porcientoAnterior">
                                          ${formatoNumerico(registro.porciento_anterior, 2)}
                                      </td>
                                      <td class="alinearDerecha ${registro.grupo}-mesActual">
                                          ${formatoNumerico(registro.valor_actual, 2)}
                                      </td>
                                      <td class="alinearDerecha ${registro.grupo}-porcientoActual">
                                          ${formatoNumerico(registro.porciento_actual, 2)}
                                      </td>
                                      <td class="alinearDerecha ${registro.grupo}-variacion">
                                          ${formatoNumerico(registro.variacion, 2)}
                                      </td>
                                  </tr>
                                  `);

                                  // Asignando total de registros, porcientos y montos
                                  total.mesAnterior += parseFloat(registro.valor_anterior);
                                  total.porcientoAnterior += parseFloat(registro.porciento_anterior);
                                  total.mesActual += parseFloat(registro.valor_actual);
                                  total.porcientoActual += parseFloat(registro.porciento_actual);
                                  total.variacion += parseFloat(registro.variacion)

                              } else {

                                  // Asignando total de registros, porcientos y montos
                                  total.mesAnterior = parseFloat(registro.valor_anterior);
                                  total.mesActual = parseFloat(registro.valor_actual);
                                  total.variacion = parseFloat(registro.variacion);

                                  // Asignando estructura HTML para la tabla de registros normal .table con los registros de la petición
                                  $(`tbody`).append(`
                                  <tr>
                                      <th class="${registro.grupo}" colspan="100%" scope="colgroup">
                                          ${registro.descripcion_grupo}
                                      </th>
                                  </tr>
                                  <tr>
                                      <td class="alinearIzquierda">${registro.categoria}</td>
                                      <td class="alinearDerecha ${registro.grupo}-mesAnterior">
                                          ${formatoNumerico(registro.valor_anterior, 2)}
                                      </td>
                                      <td class="alinearDerecha ${registro.grupo}-porcientoAnterior">
                                          ${formatoNumerico(registro.porciento_anterior, 2)}
                                      </td>
                                      <td class="alinearDerecha ${registro.grupo}-mesActual">
                                          ${formatoNumerico(registro.valor_actual, 2)}
                                      </td>
                                      <td class="alinearDerecha ${registro.grupo}-porcientoActual">
                                          ${formatoNumerico(registro.porciento_actual, 2)}
                                      </td>
                                      <td class="alinearDerecha ${registro.grupo}-variacion">
                                          ${formatoNumerico(registro.variacion, 2)}
                                      </td>
                                  </tr>
                                  `)

                              }

                          }

                          // * Asignando a la lista ordenada `#{orden}-total-mesAnterior` el total de registros
                          $(`#${registro.grupo}-total-mesAnterior`).text(`
                          ${formatoNumerico(total.mesAnterior.toString(), 2)}
                          `);

                          // * Asignando a la lista ordenada `#{orden}-total-porcientoAnterior` el total de porciento anterior
                          $(`#${registro.grupo}-total-porcientoAnterior`).text(`
                          ${formatoNumerico(total.porcientoAnterior.toString(), 2)}
                          `);

                          // * Asignando a la lista ordenada `#{orden}-total-mesActual` el total de porcientos
                          $(`#${registro.grupo}-total-mesActual`).text(`
                          ${formatoNumerico(total.mesActual.toString(), 2)}
                          `);

                          // * Asignando a la lista ordenada `#{orden}-total-porcientoActual` el total de porciento actual
                          $(`#${registro.grupo}-total-porcientoActual`).text(`
                          ${formatoNumerico(total.porcientoActual.toString(), 2)}
                          `);

                          // * Asignando a la lista ordenada `#{orden}-total-variacion` el total de montos
                          $(`#${registro.grupo}-total-variacion`).text(`
                          ${formatoNumerico(total.variacion.toString(), 2)}
                          `)

                      });

                      botonBuscar.disabled = false

                  }

              })

          }

      });

    </script>

<?php $__env->stopSection(); ?>

<?php echo $__env->make('coopdigital::diseños.plantilla', \Illuminate\Support\Arr::except(get_defined_vars(), ['__data', '__path']))->render(); ?><?php /**PATH C:\xampp\htdocs\aplicaciones\clientes\cooperativas\coopriogrande\vendor\daite\coopdigital\src/views/panel/variablesFinancieras.blade.php ENDPATH**/ ?>