@extends('layouts.reporte_analytics')

@section('css_aft')
    <link rel="stylesheet" href="{{asset('css\vendor\buttons.bootstrap5.css') }}">
    <style>
        body[data-leftbar-compact-mode="condensed"]:not(.authentication-bg){
            min-height: 0 !important;
        }
        .boton-blue{
            background-color: #2874A6 !important;
            border-color: #2874A6 !important;
            box-shadow: none !important;
        }
        .boton-blue:hover{
            background-color: #0B5F96 !important;
            border-color: #0B5F96 !important;
        }
        .boton2{
            background-color: #00a65a !important;
        }
        .boton2:hover{
            background-color: #008d4c !important;
        }
        .max-width{
            max-width: 200px;
        }
        .w-90{
            width: 90% !important;
        } 
        .col.col-md-2{
            padding: 0px 35px 5px 0px;
        }
        .tooltiptext{
            display: none;
            position: absolute;
            width: 300px;
            margin-top: 12px;
            transform: translate(-140px, 25px);
            color: white;
            background-color: black;
            border-radius: 20px;
            padding: 10px;
            z-index: 99;
        }
        .fa-sort-up{
            display: none;
            position: absolute;
            margin-top: 12px;
            transform: translate(8px, 20px);
            color: black;
        }
    </style>
@endsection

@section('php')
    @php
        $locales = [];
        $cantidad = 100;
        while ($cantidad <= $cantidad_locales) {
            $locales[$cantidad] = $cantidad;
            $cantidad = $cantidad + 100;
        }
        if ($cantidad % 100 == 0) {
            $locales[$cantidad_locales] = $cantidad_locales;
        }
        $locales = json_encode($locales);
        $anhos = [];
        $semestres = [];
        foreach ($anos as $value) {
            if(property_exists($value, "ano")){
                $anhos[$value->ano] = $value->ano;
                $semestres[$value->ano."-1"] = $value->ano."-1";
                $semestres[$value->ano."-2"] = $value->ano."-2";
            }else{
                $anhos[$value->ANO] = $value->ANO;
                $semestres[$value->ANO."-1"] = $value->ANO."-1";
                $semestres[$value->ANO."-2"] = $value->ANO."-2";
            }
        }
        $cliente = config('app.CLIENTE');
        
        $salida = json_encode(['2'=> 'Sell Out']);
        $salida_matri = json_encode(["2"=> __('messages.ventas'), "1" => __('messages.unidades')]);
        $tipo_var = json_encode(["2"=> __('messages.dinero'), "1" => __('messages.porcentaje')]);
        $periodo = json_encode(["dia"=> __('messages.dias'), "sem" => __('messages.semanas'), "mes" => __('messages.meses')]);
        $periodo_grafcomp = json_encode([/*"dia"=> __('messages.dias'), "ytd" => __('messages.ytd'),*/ "sem" => __('messages.semanas'), "mes" => __('messages.meses'), "year" => __('messages.time-str-años'), /*'semestre' => __('messages.time-str-semestres')*/]);
        $periodo_comp = json_encode(["dia"=> __('messages.dias'),"ytd"=> __('messages.ytd'), "mec" => __('messages.mec'), "sem" => __('messages.semanas'), "mes" => __('messages.meses')]);
        $periodo_matri = json_encode(["ytd"=> __('messages.ytd'), "mec" => __('messages.mec'), "sem" => __('messages.semanas'), 'dia' => __('messages.dias')]);
        $periodo_grafmatri = json_encode(["ytd"=> __('messages.ytd'), "mec" => __('messages.mec'), 'dia' => __('messages.dias')]);
        $periodo_var = json_encode(["dia"=> __('messages.dias')]);
        $mesesComp = [];
        $semanasComp = [];
        $yearAct = date("Y");
        $yearAnt = date("Y") - 1;
        $tipo = json_encode(["year" => (__('messages.año'))."-".(__('messages.meses'))."-".(__('messages.dias')), 
        "local" => __('messages.var-cadena')."-Formato-".(__('messages.variable-local')),
        "marca"=>__('messages.marca')."-".(__('messages.filtro-texto-categoria'))."-".(__('messages.variable-producto'))]);
        $tipo_var = json_encode(["dinero"=>__('messages.dinero'), "porcentaje" =>__('messages.porcentaje')]);
        $lim_inf = json_encode(["-100"=>"-100%", "-50" =>"-50%", "-25"=>"-25%", "-10"=>"-10%"]);
        $lim_sup = json_encode(["100"=>"100%", "50" =>"50%", "25"=>"25%", "10"=>"10%"]);
        $tipos_graficos = json_encode([ "msline" => "Líneas", "stackedcolumn2d" => (__('messages.selector-tipo-grafico-columnas-apiladas')),"mscolumn2d" => "Columnas agrupadas", "stackedbar2d" => "Barras apiladas"]);
        foreach ($meses as $value) {
            list($_mes, $_year) = explode(' ', $value->nombre);
            if($_year == $yearAct || $_year == $yearAnt) {
                $mesesComp []= $value;
            }
        }
        foreach ($semanas as $value) {
            $_year = substr($value->periodo, 0, 4);
            if($_year == $yearAct) {
                $semanasComp []= $value;
            }
        }
        if ($cliente == 'colgate') {
            $div = '<div style="padding: 5px 16px;overflow: hidden;background-color: lightblue;text-align: center;"><ul>';
            foreach ($div_reportes as $value) {
                $div.="<li>".$value->Descripcion."</li>";
            }
            $div.="</ul></div>";
        }else{
            $div='';
        }
        $variables_2 = $variables;
        if(isset($variables_2['Local']) && isset($variables_2['Local']['3-5'])){
            unset($variables_2['Local']['3-5']);
        }
        if(isset($variables_2['Producto']) && isset($variables_2['Producto']['1-15'])){
            unset($variables_2['Producto']['1-15']);
        }

        $ninguno = ['' => ['-1' => 'Sin Seleccionar']];
        $variables_2 = $ninguno + $variables_2;

        $display_grafico = '';
        $display_tabla = '';
        $variables_agrupacion = json_encode(["1"=>"Cadena", "2-5"=>"Holding", "2-0"=>"Compañía"]);
        $orden_ventas = json_encode(["1"=>"Primeras mejores 30 salas", "2"=>"Segundas mejores 30 salas", "3"=>"Terceras mejores 30 salas", "4"=>"Cuartas mejores 30 salas"]);
        $orden_ventas_prod = json_encode(["1"=>"Primeras mejores 30 productos", "2"=>"Segundas mejores 30 productos", "3"=>"Terceras mejores 30 productos", "4"=>"Cuartas mejores 30 productos"]);
        $orden_ventas_prod_loc = json_encode(["1"=>"Primeras mejores 15 Salas", "2"=>"Segundas mejores 15 Salas", "3"=>"Terceras mejores 15 Salas", "4"=>"Cuartas mejores 15 Salas"]);

        $texto = nl2br("El color azul representa una correlación positiva. Mientras mas intenso es el azul, mayor es la correlación.

El color rojo representa una correlación negativa. Mientras mas intenso es el rojo, mayor es la correlación.

La correlación representa que tan relacionadas se encuentran 2 variables. Su valor puede oscilar entre -1 y 1. Si la correlación es positiva, significa que el aumento en una de las variables lleva al aumento de la otra (mientras mas cercano a -1 es el valor, mas se cumple esta relación),
Si se presiona sobre un punto, debajo se desplegará un gráfico mostrando la dispersión de los puntos.
");
        $filtrosAvLoc = $filtrosAv;
        unset($filtrosAvLoc['local']);

        $display_salida = 'd-none';
        if($cliente == 'canontex'){
            $salida = json_encode(['2'=> 'Sell Out', '251' => 'Sell In']);
            $display_salida = '';
        }
    @endphp
@endsection
@section('div_reportes')
<script>

    function formatMoney(amount, decimalCount = 0, decimal = ",", thousands = ".") {
      try {
        decimalCount = Math.abs(decimalCount);
        decimalCount = isNaN(decimalCount) ? 2 : decimalCount;

        const negativeSign = amount < 0 ? "-" : "";

        let i = parseInt(amount = Math.abs(Number(amount) || 0).toFixed(decimalCount)).toString();
        let j = (i.length > 3) ? i.length % 3 : 0;

        return negativeSign + (j ? i.substr(0, j) + thousands : '') + i.substr(j).replace(/(\d{3})(?=\d)/g, "$1" + thousands) + (decimalCount ? decimal + Math.abs(amount - i).toFixed(decimalCount).slice(2) : "");
      } catch (e) {
        console.log(e)
      }
    }
    function GraficoScatter(nombre,name1,name2, correlacion){
        var ventas_loc1 = [];
        var ventas_loc2 = [];
        var fechas = [];
        if(nombre == 'grafsalas'){
            ventas_loc1 = correlacion_locales[name1];
            ventas_loc2 = correlacion_locales[name2];
            fechas = periodos_corr_locales;
        }else if(nombre == 'grafProd'){
            ventas_loc1 = correlacion_productos[name1];
            ventas_loc2 = correlacion_productos[name2];
            fechas = periodos_corr_productos;
        }

        var datos = [];
        var max = Math.max.apply(Math, ventas_loc1);
        var max2 = Math.max.apply(Math, ventas_loc2);
        var min = Math.min.apply(Math, ventas_loc1);
        var min2 = Math.min.apply(Math, ventas_loc2);
        
        let color = '';

        if(max2 > max) max = max2;
        if(min2 < min) min = min2;

        if(correlacion > 0)
            color = '#0C6616';
        else if(correlacion < 0)
            color = '#D50E0E';
        else
            color = '#0066cc';
        

        for (var i=0; i<ventas_loc1.length; i++){
            //var data = '{"id":"' + (i+1).toString() + '","y":"' + ventas_loc2[i].toString() + '","x":"' + ventas_loc1[i].toString() + '"}';
            var data = {};
            data["id"] = (i+1).toString();
            data["x"] = ventas_loc2[i];
            data["y"] = ventas_loc1[i];
            data["toolText"] = "<b>Ventas " + name2 + ":</b> $" + formatMoney(ventas_loc2[i]) + "<br/><b>Ventas " + name1 + ":</b> $" + formatMoney(ventas_loc1[i]) + "<br/><b>Periodo:</b> "+ fechas[i];
            datos.push(data);
        }
        //console.log(datos);
        //console.log(max);
        //console.log(min);
        FusionCharts.ready(function() {
            var myChart = new FusionCharts({
                type: 'scatter',
                renderAt: nombre+"_cont2",
                width: "800",
                height: "800",
                dataFormat: "json",
                dataSource: {
                    "chart": {
                        "caption": "Ventas vs Ventas | Correlación: "+correlacion,
                        "subcaption": "(cada punto representa un periodo)",
                        "theme": "fusion",
                        "exportenabled": "1",
                        "exportmode": "client",
                        "xAxisName": name2,
                        "yAxisName": name1,
                        xAxisMinValue: min,
                        yAxisMinValue: min,
                        xAxisMaxValue: max,
                        yAxisMaxValue: max,
                    },
                    dataset: [{
                    "showregressionline": "1",
                    "regressionLineColor": color,
                    "anchorbgcolor": "#0066cc",
                    "anchorbordercolor": "#0066cc",
                    "data":datos
                    }]
                }
            }).render();
        });

        let aTag = $("#"+nombre+"_cont2");
        $('html,body').animate({scrollTop: aTag.offset().top},'slow');
    }
    function GraficoScatter2(nombre,name1,name2, correlacion, datos_grafico, datos_grafico2, datos_grafico3){

      var datos = [];
      var max = 0;
      var nombre_comb = name1 + ' | ' + name2;
      if((nombre_comb in datos_grafico)){
        for (var i=0; i<datos_grafico[nombre_comb].length; i++){
          //var data = '{"id":"' + (i+1).toString() + '","y":"' + ventas_loc2[i].toString() + '","x":"' + ventas_loc1[i].toString() + '"}';
          var data = {};
          data["x"] = datos_grafico[nombre_comb][i][1];
          data["y"] = datos_grafico[nombre_comb][i][2];
          if(data["x"] > max){
            max = data["x"];
          }
          if(data["y"] > max){
            max = data["y"];
          }
          data["toolText"] = "<b>Ventas Promedio " + name1 + ":</b> $" + formatMoney(datos_grafico[nombre_comb][i][1]) + "<br/><b>Ventas Promedio " + name2 + ":</b> $" + formatMoney(datos_grafico[nombre_comb][i][2]) + "<br/><b>PRODUCTO:</b> "+ datos_grafico[nombre_comb][i][0];
          datos.push(data);
        }
      }

      var datos2 = [];
      if((nombre_comb in datos_grafico2)){
        for (var i=0; i<datos_grafico2[nombre_comb].length; i++){
          //var data = '{"id":"' + (i+1).toString() + '","y":"' + ventas_loc2[i].toString() + '","x":"' + ventas_loc1[i].toString() + '"}';
          var data = {};
          data["x"] = datos_grafico2[nombre_comb][i][1];
          data["y"] = datos_grafico2[nombre_comb][i][2];
          if(data["x"] > max){
            max = data["x"];
          }
          if(data["y"] > max){
            max = data["y"];
          }
          data["toolText"] = "<b>Ventas Promedio " + name1 + ":</b> $" + formatMoney(datos_grafico2[nombre_comb][i][1]) + "<br/><b>Ventas Promedio " + name2 + ":</b> $" + formatMoney(datos_grafico2[nombre_comb][i][2]) + "<br/><b>PRODUCTO:</b> "+ datos_grafico2[nombre_comb][i][0];
          datos2.push(data);
        }
      }

      var datos3 = [];
      if((nombre_comb in datos_grafico3)){
        for (var i=0; i<datos_grafico3[nombre_comb].length; i++){
          //var data = '{"id":"' + (i+1).toString() + '","y":"' + ventas_loc2[i].toString() + '","x":"' + ventas_loc1[i].toString() + '"}';
          var data = {};
          data["x"] = datos_grafico3[nombre_comb][i][1];
          data["y"] = datos_grafico3[nombre_comb][i][2];
          if(data["x"] > max){
            max = data["x"];
          }
          if(data["y"] > max){
            max = data["y"];
          }
          data["toolText"] = "<b>Ventas Promedio " + name1 + ":</b> $" + formatMoney(datos_grafico3[nombre_comb][i][1]) + "<br/><b>Ventas Promedio " + name2 + ":</b> $" + formatMoney(datos_grafico3[nombre_comb][i][2]) + "<br/><b>PRODUCTO:</b> "+ datos_grafico3[nombre_comb][i][0];
          datos3.push(data);
        }
      }

      if(correlacion > 0)
        color = '#0C6616';
      else if(correlacion < 0)
        color = '#D50E0E';
      else
        color = '#0066cc';


      FusionCharts.ready(function() {
        console.log({
              type: 'zoomscatter',
              renderAt: nombre+"_cont2",
              width: "800",
              height: "800",
              dataFormat: "json",
              dataSource: {
                "chart": {
                    "caption": "Ventas vs Ventas | Correlación: "+correlacion,
                    "subcaption": "(cada punto representa un producto)",
                    "theme": "fusion",
                    "exportenabled": "1",
                    "exportmode": "client",
                    "xAxisName": name1,
                    "yAxisName": name2,
                    staticRadius: 1,
                    xAxisMinValue: 0,
                    yAxisMinValue: 0,
                    xAxisMaxValue: max,
                    yAxisMaxValue: max,
                },
                dataset: [{
                  "seriesname": "Productos en com\u00FAn",
                  "showregressionline": "1",
                  "regressionLineColor": color,
                  "anchorbgcolor": "#0066cc",
                  "anchorbordercolor": "#0066cc",
                  "data":datos
                },
                {
                  "seriesname": "Productos en " + name1,
                  "anchorbgcolor": "#ff0000",
                  "anchorbordercolor": "#ff0000",
                  "data":datos2
                },
                {
                  "seriesname": "Productos en " + name2,
                  "anchorbgcolor": "#99cc00",
                  "anchorbordercolor": "#99cc00",
                  "data":datos3
                }
              ]
              }
          });
          var myChart = new FusionCharts({
              type: 'zoomscatter',
              renderAt: nombre+"_cont2",
              width: "800",
              height: "800",
              dataFormat: "json",
              dataSource: {
                "chart": {
                    "caption": "Ventas vs Ventas | Correlación: "+correlacion,
                    "subcaption": "(cada punto representa un producto)",
                    "theme": "fusion",
                    "exportenabled": "1",
                    "exportmode": "client",
                    "xAxisName": name1,
                    "yAxisName": name2,
                    "staticRadius": 1,
                    "xAxisMinValue": 0,
                    "yAxisMinValue": 0,
                    "xAxisMaxValue": max,
                    "yAxisMaxValue": max,
                },
                dataset: [{
                  "seriesname": "Productos en com\u00FAn",
                  "showregressionline": "1",
                  "regressionLineColor": color,
                  "anchorbgcolor": "#0066cc",
                  "anchorbordercolor": "#0066cc",
                  "data":datos
                },
                {
                  "seriesname": "Productos en " + name1,
                  "anchorbgcolor": "#ff0000",
                  "anchorbordercolor": "#ff0000",
                  "data":datos2
                },
                {
                  "seriesname": "Productos en " + name2,
                  "anchorbgcolor": "#99cc00",
                  "anchorbordercolor": "#99cc00",
                  "data":datos3
                }
              ]
              }
          }).render();
          });

          let aTag = $("#"+nombre+"_cont2");
          $('html,body').animate({scrollTop: aTag.offset().top},'slow');
    }
    </script>
    <style>
        table tr td {
            border: 2px solid #D1D1D1;
            padding: 10px;
        }
        table tr:nth-child(odd) {
            background: #f4f4f4;
        }
    </style>
    @php echo $div; @endphp
@endsection

@if(count($selectores_grafico)>0)
@section('grafico')
    @if(isset($selectores_grafico['grafsalas']))
        <x-grafico id="grafsalas" style="{{$display_grafico}}" :filtrosAv="$filtrosAvLoc" :filtrosAvAlias="$filtrosAvAlias">
            <x-selector-generico id="salida_grafsalas2" idselect="salida_grafsalas" :salida="$salida"  class="selector-generico {{$display_salida}}" style="width: 120px">
                <x-slot name="texto">
                    {{__('messages.selector-generico-texto-valor')}}
                </x-slot>
            </x-selector-generico>

            <x-selector-generico id="f_rango_grafsalas2" idselect="f_rango_grafsalas" :salida="$orden_ventas" class="selector-generico" style='width: 200px'>
                <x-slot name="texto">
                    Rango Salas
                </x-slot>
            </x-selector-generico>

            <x-selector-generico id="f_tmp_grafsalas2" idselect="f_tmp_grafsalas" :salida="$periodo_grafcomp"  class="" style="width: 120px" selected="mes">
                <x-slot name="texto">
                    {{__('messages.selector-generico-texto-periodo')}}
                </x-slot>
            </x-selector-generico>

            <x-selector-dias idpadre="grafsalas" style="display:none;" />

            <!--EVOLUTVO SEMANA-->
            <x-selector-semanas id="fltr_sem_grafsalas" idselect="f_sem_grafsalas_ini" :semanas="$semanas"  class="fltr_periodo_grafsalas" style="display: none;">
                <x-slot name="texto">
                    {{__('messages.selector-semanas-meses-texto-desde')}}
                </x-slot>
            </x-selector-semanas>
            <x-selector-semanas id="fltr_sem_grafsalas2" idselect="f_sem_grafsalas_fin" :semanas="$semanas" class="fltr_periodo_grafsalas" style="display: none;">
                <x-slot name="texto">
                    {{__('messages.selector-semanas-meses-texto-hasta')}}
                </x-slot>
            </x-selector-semanas>
            <!--EVOLUTVO MES-->
            <x-selector-meses id="fltr_mes_grafsalas" idselect="f_mes_grafsalas_ini" :meses="$mesesComp" class="fltr_periodo_grafsalas">
                <x-slot name="texto">
                    {{__('messages.selector-semanas-meses-texto-desde')}}
                </x-slot>
            </x-selector-meses>
            <x-selector-meses id="fltr_mes_grafsalas2" idselect="f_mes_grafsalas_fin" :meses="$mesesComp" class="fltr_periodo_grafsalas">
                <x-slot name="texto">
                    {{__('messages.selector-semanas-meses-texto-hasta')}}
                </x-slot>
            </x-selector-meses>
            <div id="fltr_year_grafsalas" style="width:120px;display:none;" class="fltr_periodo_grafsalas col-lg-2 col-md-4 col-sm-6 col-xs-12 obj_filtro form-group">
                <div style="text-align:center; font-size: 1.0em;color:#566573">
                    {{__('messages.selector-semanas-meses-texto-desde')}}
                </div>
                <label class="w-100">
                    <select id="f_year_grafsalas_ini" name="f_year_grafsalas_ini" class="flt form-control select2 " data-toggle="select2" width="100%">
                        @foreach($anhos as $key => $value)
                            <option value="{{$key}}01">{{$value}}</option>
                        @endforeach
                    </select>
                </label>
            </div>
            <div id="fltr_year_grafsalas2" style="width:120px;display:none;" class="fltr_periodo_grafsalas col-lg-2 col-md-4 col-sm-6 col-xs-12 obj_filtro form-group">
                <div style="text-align:center; font-size: 1.0em;color:#566573">
                    {{__('messages.selector-semanas-meses-texto-hasta')}}
                </div>
                <label class="w-100">
                    <select id="f_year_grafsalas_fin" name="f_year_grafsalas_fin" class="flt form-control select2 " data-toggle="select2" width="100%">
                        @foreach($anhos as $key => $value)
                        @if (date("Y") == $key)
                            <option value="{{$key}}12" selected>{{$value}}</option>
                        @else
                            <option value="{{$key}}12">{{$value}}</option>
                        @endif
                        @endforeach
                    </select>
                </label>
            </div>
            <div id="fltr_semestre_grafsalas" style="width:120px;display:none;" class="fltr_periodo_grafsalas col-lg-2 col-md-4 col-sm-6 col-xs-12 obj_filtro form-group">
                <div style="text-align:center; font-size: 1.0em;color:#566573">
                    {{__('messages.selector-semanas-meses-texto-desde')}}
                </div>
                <label class="w-100">
                    <select id="f_semestre_grafsalas_ini" name="f_semestre_grafsalas_ini" class="flt form-control select2 " data-toggle="select2" width="100%">
                        @foreach($semestres as $key => $value)
                            @if ((date("m") < 6 && date("Y")."-2" != $key) || date("m") >= 6)
                                @if (explode("-",$key)[1] == "1")
                                    <option value="{{explode("-",$key)[0]}}01">{{$value}}</option>
                                @else
                                    <option value="{{explode("-",$key)[0]}}07">{{$value}}</option>
                                @endif
                            @endif
                        @endforeach
                    </select>
                </label>
            </div>
            <div id="fltr_semestre_grafsalas2" style="width:120px;display:none;" class="fltr_periodo_grafsalas col-lg-2 col-md-4 col-sm-6 col-xs-12 obj_filtro form-group">
                <div style="text-align:center; font-size: 1.0em;color:#566573">
                    {{__('messages.selector-semanas-meses-texto-hasta')}}
                </div>
                <label class="w-100">
                    <select id="f_semestre_grafsalas_fin" name="f_semestre_grafsalas_fin" class="flt form-control select2 " data-toggle="select2" width="100%">
                        @foreach($semestres as $key => $value)
                            @if (date("m") >= 6)
                                @if (date("Y")."-2" == $key)
                                    <option value="{{explode("-",$key)[0]}}12" selected>{{$value}}</option>
                                @else
                                    @if (explode("-",$key)[1] == "1")
                                        <option value="{{explode("-",$key)[0]}}06">{{$value}}</option>
                                    @else
                                        <option value="{{explode("-",$key)[0]}}12">{{$value}}</option>
                                    @endif
                                @endif
                            @else
                                @if (date("Y")."-1" == $key)
                                    <option value="{{explode("-",$key)[0]}}06" selected>{{$value}}</option>
                                @else
                                    @if (date("Y")."-2" != $key)
                                        @if (explode("-",$key)[1] == "1")
                                            <option value="{{explode("-",$key)[0]}}06">{{$value}}</option>
                                        @else
                                            <option value="{{explode("-",$key)[0]}}12">{{$value}}</option>
                                        @endif
                                    @endif
                                @endif
                            @endif
                        @endforeach
                    </select>
                </label>
            </div>
            <div class="col col-md-auto obj_filtro form-group font-weight-normal d-flex align-items-center">
                <label class="align-items-center d-flex" style="padding-top: 15px">
                    <input type="checkbox" id="f_seleccion_grafsalas" value="first_checkbox" style="margin-right: 5px" onclick="mostrar('local_grafsalas')"> Selección Salas
                </label>
            </div>
            <x-filtro id="f_local_grafsalas" :lista="$filtrosAv['local']" style="max-width: 120px; min-width: 120px; width: 120px; display: none">
                <x-slot name="texto">
                    {{__('messages.'.$filtrosAvAlias['local'])}}
                </x-slot>
            </x-filtro>
            <x-boton-actualizar onclick="getGrafSalas('{{$cliente}}', 'ventas');"/>
            <div class="col d-flex flex-row-reverse justify-content-end">
                <i class="fas fa-info-circle my-auto" style="margin-right: 20px; font-size: 24px; height: fit-content" onmouseover="MessageIn(this)" onmouseout="MessageOut(this)"></i>
                <i class="fas fa-sort-up"></i>
                <div class="tooltiptext" style="text-align: justify;"></div>
            </div>
            <!--
            <div class="notification-list col-md-auto obj_filtro form-group ms-auto">
                <div class="nav-link end-bar-toggle d-flex align-items-center" href="javascript: void(0);" 
                style="padding: 0rem 1rem; color: #566573; height: 48px;" onclick="filtrosCubo(this, 'grafcomp')">
                    <i class="fas fa-filter"></i>
                </div>
            </div>
            -->
        </x-grafico>
        @php $display_grafico = 'display: none;'; @endphp
    @endif

    @if(isset($selectores_grafico['grafProd']))
        <x-grafico id="grafProd" style="{{$display_grafico}}" :filtrosAv="$filtrosAv" :filtrosAvAlias="$filtrosAvAlias">
            <x-selector-generico id="salida_grafProd2" idselect="salida_grafProd" :salida="$salida" class="selector-generico {{$display_salida}}" style="width: 120px">
                <x-slot name="texto">
                    {{__('messages.selector-generico-texto-valor')}}
                </x-slot>
            </x-selector-generico>

            <x-selector-generico id="f_rango_grafProd2" idselect="f_rango_grafProd" :salida="$orden_ventas_prod" class="selector-generico" style='width: 200px'>
                <x-slot name="texto">
                    Rango Productos
                </x-slot>
            </x-selector-generico>

            <x-selector-generico id="f_tmp_grafProd2" idselect="f_tmp_grafProd" :salida="$periodo_grafcomp"  class="" style="width: 120px" selected="mes">
                <x-slot name="texto">
                    {{__('messages.selector-generico-texto-periodo')}}
                </x-slot>
            </x-selector-generico>

            <x-selector-dias idpadre="grafProd" style="display:none;" />

            <!--EVOLUTVO SEMANA-->
            <x-selector-semanas id="fltr_sem_grafProd" idselect="f_sem_grafProd_ini" :semanas="$semanas"  class="fltr_periodo_grafProd" style="display: none;">
                <x-slot name="texto">
                    {{__('messages.selector-semanas-meses-texto-desde')}}
                </x-slot>
            </x-selector-semanas>
            <x-selector-semanas id="fltr_sem_grafProd2" idselect="f_sem_grafProd_fin" :semanas="$semanas" class="fltr_periodo_grafProd" style="display: none;">
                <x-slot name="texto">
                    {{__('messages.selector-semanas-meses-texto-hasta')}}
                </x-slot>
            </x-selector-semanas>
            <!--EVOLUTVO MES-->
            <x-selector-meses id="fltr_mes_grafProd" idselect="f_mes_grafProd_ini" :meses="$mesesComp" class="fltr_periodo_grafProd">
                <x-slot name="texto">
                    {{__('messages.selector-semanas-meses-texto-desde')}}
                </x-slot>
            </x-selector-meses>
            <x-selector-meses id="fltr_mes_grafProd2" idselect="f_mes_grafProd_fin" :meses="$mesesComp" class="fltr_periodo_grafProd">
                <x-slot name="texto">
                    {{__('messages.selector-semanas-meses-texto-hasta')}}
                </x-slot>
            </x-selector-meses>
            <div id="fltr_year_grafProd" style="width:120px;display:none;" class="fltr_periodo_grafProd col-lg-2 col-md-4 col-sm-6 col-xs-12 obj_filtro form-group">
                <div style="text-align:center; font-size: 1.0em;color:#566573">
                    {{__('messages.selector-semanas-meses-texto-desde')}}
                </div>
                <label class="w-100">
                    <select id="f_year_grafProd_ini" name="f_year_grafProd_ini" class="flt form-control select2 " data-toggle="select2" width="100%">
                        @foreach($anhos as $key => $value)
                            <option value="{{$key}}01">{{$value}}</option>
                        @endforeach
                    </select>
                </label>
            </div>
            <div id="fltr_year_grafProd2" style="width:120px;display:none;" class="fltr_periodo_grafProd col-lg-2 col-md-4 col-sm-6 col-xs-12 obj_filtro form-group">
                <div style="text-align:center; font-size: 1.0em;color:#566573">
                    {{__('messages.selector-semanas-meses-texto-hasta')}}
                </div>
                <label class="w-100">
                    <select id="f_year_grafProd_fin" name="f_year_grafProd_fin" class="flt form-control select2 " data-toggle="select2" width="100%">
                        @foreach($anhos as $key => $value)
                        @if (date("Y") == $key)
                            <option value="{{$key}}12" selected>{{$value}}</option>
                        @else
                            <option value="{{$key}}12">{{$value}}</option>
                        @endif
                        @endforeach
                    </select>
                </label>
            </div>
            <div id="fltr_semestre_grafProd" style="width:120px;display:none;" class="fltr_periodo_grafProd col-lg-2 col-md-4 col-sm-6 col-xs-12 obj_filtro form-group">
                <div style="text-align:center; font-size: 1.0em;color:#566573">
                    {{__('messages.selector-semanas-meses-texto-desde')}}
                </div>
                <label class="w-100">
                    <select id="f_semestre_grafProd_ini" name="f_semestre_grafProd_ini" class="flt form-control select2 " data-toggle="select2" width="100%">
                        @foreach($semestres as $key => $value)
                            @if ((date("m") < 6 && date("Y")."-2" != $key) || date("m") >= 6)
                                @if (explode("-",$key)[1] == "1")
                                    <option value="{{explode("-",$key)[0]}}01">{{$value}}</option>
                                @else
                                    <option value="{{explode("-",$key)[0]}}07">{{$value}}</option>
                                @endif
                            @endif
                        @endforeach
                    </select>
                </label>
            </div>
            <div id="fltr_semestre_grafProd2" style="width:120px;display:none;" class="fltr_periodo_grafProd col-lg-2 col-md-4 col-sm-6 col-xs-12 obj_filtro form-group">
                <div style="text-align:center; font-size: 1.0em;color:#566573">
                    {{__('messages.selector-semanas-meses-texto-hasta')}}
                </div>
                <label class="w-100">
                    <select id="f_semestre_grafProd_fin" name="f_semestre_grafProd_fin" class="flt form-control select2 " data-toggle="select2" width="100%">
                        @foreach($semestres as $key => $value)
                            @if (date("m") >= 6)
                                @if (date("Y")."-2" == $key)
                                    <option value="{{explode("-",$key)[0]}}12" selected>{{$value}}</option>
                                @else
                                    @if (explode("-",$key)[1] == "1")
                                        <option value="{{explode("-",$key)[0]}}06">{{$value}}</option>
                                    @else
                                        <option value="{{explode("-",$key)[0]}}12">{{$value}}</option>
                                    @endif
                                @endif
                            @else
                                @if (date("Y")."-1" == $key)
                                    <option value="{{explode("-",$key)[0]}}06" selected>{{$value}}</option>
                                @else
                                    @if (date("Y")."-2" != $key)
                                        @if (explode("-",$key)[1] == "1")
                                            <option value="{{explode("-",$key)[0]}}06">{{$value}}</option>
                                        @else
                                            <option value="{{explode("-",$key)[0]}}12">{{$value}}</option>
                                        @endif
                                    @endif
                                @endif
                            @endif
                        @endforeach
                    </select>
                </label>
            </div>
            <div class="col col-md-auto obj_filtro form-group font-weight-normal d-flex align-items-center">
                <label class="align-items-center d-flex" style="padding-top: 15px">
                    <input type="checkbox" id="f_seleccion_grafProd" value="first_checkbox" style="margin-right: 5px" onclick="mostrar('producto_grafProd')"> Selección productos 
                </label>
            </div>
            @if(isset($filtrosAvAlias['producto']))
                <x-filtro id="f_producto_grafProd" :lista="$filtrosAv['producto']" style="max-width: 120px; min-width: 120px; width: 120px; display: none">
                    <x-slot name="texto">
                        {{__('messages.'.$filtrosAvAlias['producto'])}}
                    </x-slot>
                </x-filtro>
            @else
                <x-filtro id="f_producto_grafProd" :lista="[]" style="max-width: 120px; min-width: 120px; width: 120px; display: none">
                    <x-slot name="texto">
                        Producto
                    </x-slot>
                </x-filtro>
            @endif
            <x-boton-actualizar onclick="getGrafProd('{{$cliente}}', 'ventas');"/>
            <div class="col d-flex flex-row-reverse justify-content-end">
                <i class="fas fa-info-circle my-auto" style="margin-right: 20px; font-size: 24px; height: fit-content" onmouseover="MessageIn(this)" onmouseout="MessageOut(this)"></i>
                <i class="fas fa-sort-up"></i>
                <div class="tooltiptext" style="text-align: justify;"></div>
            </div>
            <!--
            <div class="notification-list col-md-auto obj_filtro form-group ms-auto">
                <div class="nav-link end-bar-toggle d-flex align-items-center" href="javascript: void(0);" 
                style="padding: 0rem 1rem; color: #566573; height: 48px;" onclick="filtrosCubo(this, 'grafcomp')">
                    <i class="fas fa-filter"></i>
                </div>
            </div>
            -->
        </x-grafico>
        @php $display_grafico = 'display: none;'; @endphp
    @endif

    @if(isset($selectores_grafico['grafLoc']))
        <x-grafico id="grafLoc" style="{{$display_grafico}}" :filtrosAv="$filtrosAvLoc" :filtrosAvAlias="$filtrosAvAlias">
            <x-selector-generico id="salida_grafLoc2" idselect="salida_grafLoc" :salida="$salida" class="selector-generico {{$display_salida}}" style="width: 120px">
                <x-slot name="texto">
                    {{__('messages.selector-generico-texto-valor')}}
                </x-slot>
            </x-selector-generico>

            <x-selector-generico id="f_rango_grafLoc2" idselect="f_rango_grafLoc" :salida="$orden_ventas_prod_loc" class="selector-generico" style='width: 200px'>
                <x-slot name="texto">
                    Rango Productos
                </x-slot>
            </x-selector-generico>

            <x-selector-generico id="f_tmp_grafLoc2" idselect="f_tmp_grafLoc" :salida="$periodo_grafcomp"  class="" style="width: 120px" selected="mes">
                <x-slot name="texto">
                    {{__('messages.selector-generico-texto-periodo')}}
                </x-slot>
            </x-selector-generico>

            <x-selector-dias idpadre="grafLoc" style="display:none;" />

            <!--EVOLUTVO SEMANA-->
            <x-selector-semanas id="fltr_sem_grafLoc" idselect="f_sem_grafLoc_ini" :semanas="$semanas"  class="fltr_periodo_grafLoc" style="display: none;">
                <x-slot name="texto">
                    {{__('messages.selector-semanas-meses-texto-desde')}}
                </x-slot>
            </x-selector-semanas>
            <x-selector-semanas id="fltr_sem_grafLoc2" idselect="f_sem_grafLoc_fin" :semanas="$semanas" class="fltr_periodo_grafLoc" style="display: none;">
                <x-slot name="texto">
                    {{__('messages.selector-semanas-meses-texto-hasta')}}
                </x-slot>
            </x-selector-semanas>
            <!--EVOLUTVO MES-->
            <x-selector-meses id="fltr_mes_grafLoc" idselect="f_mes_grafLoc_ini" :meses="$mesesComp" class="fltr_periodo_grafLoc">
                <x-slot name="texto">
                    {{__('messages.selector-semanas-meses-texto-desde')}}
                </x-slot>
            </x-selector-meses>
            <x-selector-meses id="fltr_mes_grafLoc2" idselect="f_mes_grafLoc_fin" :meses="$mesesComp" class="fltr_periodo_grafLoc">
                <x-slot name="texto">
                    {{__('messages.selector-semanas-meses-texto-hasta')}}
                </x-slot>
            </x-selector-meses>
            <div id="fltr_year_grafLoc" style="width:120px;display:none;" class="fltr_periodo_grafLoc col-lg-2 col-md-4 col-sm-6 col-xs-12 obj_filtro form-group">
                <div style="text-align:center; font-size: 1.0em;color:#566573">
                    {{__('messages.selector-semanas-meses-texto-desde')}}
                </div>
                <label class="w-100">
                    <select id="f_year_grafLoc_ini" name="f_year_grafLoc_ini" class="flt form-control select2 " data-toggle="select2" width="100%">
                        @foreach($anhos as $key => $value)
                            <option value="{{$key}}01">{{$value}}</option>
                        @endforeach
                    </select>
                </label>
            </div>
            <div id="fltr_year_grafLoc2" style="width:120px;display:none;" class="fltr_periodo_grafLoc col-lg-2 col-md-4 col-sm-6 col-xs-12 obj_filtro form-group">
                <div style="text-align:center; font-size: 1.0em;color:#566573">
                    {{__('messages.selector-semanas-meses-texto-hasta')}}
                </div>
                <label class="w-100">
                    <select id="f_year_grafLoc_fin" name="f_year_grafLoc_fin" class="flt form-control select2 " data-toggle="select2" width="100%">
                        @foreach($anhos as $key => $value)
                        @if (date("Y") == $key)
                            <option value="{{$key}}12" selected>{{$value}}</option>
                        @else
                            <option value="{{$key}}12">{{$value}}</option>
                        @endif
                        @endforeach
                    </select>
                </label>
            </div>
            <div id="fltr_semestre_grafLoc" style="width:120px;display:none;" class="fltr_periodo_grafLoc col-lg-2 col-md-4 col-sm-6 col-xs-12 obj_filtro form-group">
                <div style="text-align:center; font-size: 1.0em;color:#566573">
                    {{__('messages.selector-semanas-meses-texto-desde')}}
                </div>
                <label class="w-100">
                    <select id="f_semestre_grafLoc_ini" name="f_semestre_grafLoc_ini" class="flt form-control select2 " data-toggle="select2" width="100%">
                        @foreach($semestres as $key => $value)
                            @if ((date("m") < 6 && date("Y")."-2" != $key) || date("m") >= 6)
                                @if (explode("-",$key)[1] == "1")
                                    <option value="{{explode("-",$key)[0]}}01">{{$value}}</option>
                                @else
                                    <option value="{{explode("-",$key)[0]}}07">{{$value}}</option>
                                @endif
                            @endif
                        @endforeach
                    </select>
                </label>
            </div>
            <div id="fltr_semestre_grafLoc2" style="width:120px;display:none;" class="fltr_periodo_grafLoc col-lg-2 col-md-4 col-sm-6 col-xs-12 obj_filtro form-group">
                <div style="text-align:center; font-size: 1.0em;color:#566573">
                    {{__('messages.selector-semanas-meses-texto-hasta')}}
                </div>
                <label class="w-100">
                    <select id="f_semestre_grafLoc_fin" name="f_semestre_grafLoc_fin" class="flt form-control select2 " data-toggle="select2" width="100%">
                        @foreach($semestres as $key => $value)
                            @if (date("m") >= 6)
                                @if (date("Y")."-2" == $key)
                                    <option value="{{explode("-",$key)[0]}}12" selected>{{$value}}</option>
                                @else
                                    @if (explode("-",$key)[1] == "1")
                                        <option value="{{explode("-",$key)[0]}}06">{{$value}}</option>
                                    @else
                                        <option value="{{explode("-",$key)[0]}}12">{{$value}}</option>
                                    @endif
                                @endif
                            @else
                                @if (date("Y")."-1" == $key)
                                    <option value="{{explode("-",$key)[0]}}06" selected>{{$value}}</option>
                                @else
                                    @if (date("Y")."-2" != $key)
                                        @if (explode("-",$key)[1] == "1")
                                            <option value="{{explode("-",$key)[0]}}06">{{$value}}</option>
                                        @else
                                            <option value="{{explode("-",$key)[0]}}12">{{$value}}</option>
                                        @endif
                                    @endif
                                @endif
                            @endif
                        @endforeach
                    </select>
                </label>
            </div>
            <div class="col col-md-auto obj_filtro form-group font-weight-normal d-flex align-items-center">
                <label class="align-items-center d-flex" style="padding-top: 15px">
                    <input type="checkbox" id="f_seleccion_grafLoc" value="first_checkbox" style="margin-right: 5px" onclick="mostrar('local_grafLoc')"> Selección Salas 
                </label>
            </div>
            <x-filtro id="f_local_grafLoc" :lista="$filtrosAv['local']" style="max-width: 120px; min-width: 120px; width: 120px; display: none">
                <x-slot name="texto">
                    {{__('messages.'.$filtrosAvAlias['local'])}}
                </x-slot>
            </x-filtro>
            <x-boton-actualizar onclick="getGrafLoc('{{$cliente}}', 'ventas');"/>
            <div class="col d-flex flex-row-reverse justify-content-end">
                <i class="fas fa-info-circle my-auto" style="margin-right: 20px; font-size: 24px; height: fit-content" onmouseover="MessageIn(this)" onmouseout="MessageOut(this)"></i>
                <i class="fas fa-sort-up"></i>
                <div class="tooltiptext" style="text-align: justify;"></div>
            </div>
            <!--
            <div class="notification-list col-md-auto obj_filtro form-group ms-auto">
                <div class="nav-link end-bar-toggle d-flex align-items-center" href="javascript: void(0);" 
                style="padding: 0rem 1rem; color: #566573; height: 48px;" onclick="filtrosCubo(this, 'grafcomp')">
                    <i class="fas fa-filter"></i>
                </div>
            </div>
            -->
        </x-grafico>
        @php $display_grafico = 'display: none;'; @endphp
    @endif
    @if(isset($selectores_grafico['grafvar']))
        <x-grafico id="grafvar" style="{{$display_grafico}}" :filtrosAv="$filtrosAv" :filtrosAvAlias="$filtrosAvAlias">
            <x-selector-generico id="salida_grafvar2" idselect="salida_grafvar" :salida="$tipo_var"  class="selector-generico" style="width: 120px">
                <x-slot name="texto">
                    {{__('messages.selector-generico-texto-valor')}}
                </x-slot>
            </x-selector-generico>

            <x-selector-dias idpadre="grafvar"/>

            <x-boton-actualizar onclick="getGrafVar('{{$cliente}}', 'ventas');"/>
            <x-infobox tamano="25px" texto="{{$texto}}"/>

            <x-filtro id="f_clientes_grafvar" :lista="$clientes" style="max-width: 120px; min-width: 120px; width: 120px;" class="ms-auto">
                <x-slot name="texto">
                    {{__('messages.filtro-texto-cliente')}}
                </x-slot>
            </x-filtro>
            <x-filtro id="f_categorias_grafvar" :lista="$categorias" style="max-width: 120px;min-width: 120px;width: 120px;">
                <x-slot name="texto">
                    {{__('messages.filtro-texto-categoria')}}
                </x-slot>
            </x-filtro>
            <x-filtro id="f_kam_grafvar" :lista="$kam" style="max-width: 120px;min-width: 120px;width: 120px;">
                <x-slot name="texto">
                    {{__('messages.filtro-texto-kam')}}
                </x-slot>
            </x-filtro>
        </x-grafico>
        @php $display_grafico = 'display: none;'; @endphp
    @endif
@endsection
@endif
@section('right-bar')
    <div class="p-3 align-items-center flex-column d-none" id="f_grafcomp">
        
    </div>
    <div class="p-3 align-items-center flex-column d-none" id="f_grafevo">
    </div>
@endsection
@section('js_aft')
    <script>
    
        function MessageIn(icon){
            $('.tooltiptext').fadeIn(200);
            $('.fa-sort-up').fadeIn(200);
        }
        function MessageOut(icon){
            $('.tooltiptext').fadeOut(200);
            $('.fa-sort-up').fadeOut(200);
        }
    
        let ids = ['grafLoc', 'grafProd', 'grafsalas', 'grafcomp', 'comp', 'grafdri', 'graftree', 'grafvar', 'grafmatri'];
        function mostrar(texto){
            if(!$('#f_'+texto+'_cont').is(":visible")){
                $('#f_'+texto+'_cont').show();
            }else{
                $('#f_'+texto+'_cont').hide();
            }
        }
        
        var filtrosPromise = getFiltrosAv('{{$cliente}}', '{{$codigo}}');
        $(document).ready(() => {
            ids.forEach(function(item){
                if($('#'+item).length > 0 && $('#f_favoritos_'+item).length > 0) cargarFavoritos(item);
            });

            filtrosPromise.then(function(resp){
                ponerFiltrosAv(resp);
            });

            let filtros = ['clientes', 'categorias', 'kam'];
            for(let filtro of filtros) {
                for(let id of ids) {
                    multiSelect(filtro, id, "{{__('messages.seleccionar')}}");
                }
            }

            // $("#f_clientes_comp").select2({closeOnSelect:false, multiple: true, placeholder: "Seleccionar Cliente", width: "auto"});
            $('#variables_comp').select2MultiCheckboxes({
                placeholder: "{{__('messages.elegir-variables')}}",
                width: "auto",
                templateSelection: function(selected, total) {
                    return selected.length + " de " + total + " total";
                }
            });
            
            let ahora = new Date();
            let congifDate = {
                ...("{{config('app.locale')}}" == "es") && {
                    locale: {
                        format: 'YYYY/MM/DD',
                        daysOfWeek: ["Do", "Lu", "Ma", "Mi", "Ju", "Vi", "Sa"],
                        monthNames: ["Enero", "Febrero", "Marzo", "Abril",
                                    "Mayo", "Junio", "Julio", "Agosto",
                                    "Septiembre", "Octubre", "Noviembre", "Diciembre"],
                        applyLabel: "Aplicar",
                        cancelLabel: "Cancelar",
                        firstDay: 1
                    }
                },
                    maxDate: moment(ahora),
                    startDate: moment((new Date()).setDate(ahora.getDate()-21)),
                    endDate: ahora
            };
            ["#f_dia_comp_ini","#f_dia_grafevo_ini", "#f_dia_grafevo_fin", "#f_dia_matri_ini","#f_dia_grafdri_ini","#f_dia_graftree_ini"].forEach((selector, i) => {
                $(selector).daterangepicker(congifDate);
            });

            congifDate2 = congifDate;
            congifDate2.startDate = moment((new Date()).setDate(ahora.getDate()-15));
            ["#f_dia_evo_ini", "#f_dia_evo_fin"].forEach((selector, i) => {
                $(selector).daterangepicker(congifDate2);
            });
            congifDate["minDate"] = moment(new Date(ahora.getFullYear(), 0, 1));
            [ "#f_dia_grafcomp_ini", "#f_dia_grafcomp_fin"].forEach((selector, i) => {
                $(selector).daterangepicker(congifDate);
            });
            congifDate["minDate"] = moment((new Date()).setDate(ahora.getDate()-365));
            [ "#f_dia_grafmatri_ini"].forEach((selector, i) => {
                $(selector).daterangepicker(congifDate);
            });
            
            $("#tipo_grafdri").change(function(elem){
                if(elem.target.value=="year"){
                    $("#f_tmp_grafdri2").hide();
                    $(".fltr_periodo_grafdri").hide();
                }else{
                    $("#f_tmp_grafdri2").show();
                    $("#f_tmp_grafdri").change();
                }
            });
            let fechaMin = new Date(new Date().setFullYear(new Date().getFullYear() - 1));
            congifDate["minDate"] = moment(fechaMin);
            [ "#f_dia_grafvar_ini"].forEach((selector, i) => {
                $(selector).daterangepicker(congifDate);
            });
            $('select[id^="f_tmp_"]').change(function(elem){
                let aux = elem.target.id.split("_");
                let macroTmp = aux[aux.length - 1];
                let tmp = $("#f_tmp_" + macroTmp).find('option:selected').val();
                $(".fltr_periodo_" + macroTmp).css("display","none");
                $("#fltr_"+tmp+"_" + macroTmp).css("display","inline-block");
                $("#fltr_"+tmp+"_" + macroTmp + "2").css("display","inline-block");
                $("#fltr_"+tmp+"_" + macroTmp + "3").css("display","inline-block");
            });
            $(".navbar-402").css("border-style","solid");
            $(".navbar-402").css("border-left","0px");
            $(".navbar-402").css("border-color","#57775F");
            $(".navbar-402").css("background-color","#57775F");

            $('#variables_matri1').change(verificar_selectores);

            $('#variables_matri2').change(verificar_selectores);
            $('[data-toggle="infobox"]').tooltip();

            // clickActualizar(['grafcomp', 'comp', 'grafevo', 'evo', 'matri', 'grafdri', 'graftree', 'grafvar']);
            // (async _ => {
            //     await getGrafComp('', 'ventas');
            //     await getComp('', 'ventas');
            //     await getGrafEvo('', 'ventas');
            //     await getEvo('', 'ventas');
            //     await getMatri('', 'ventas');
            //     await getGrafDri('', 'ventas');
            //     await getGrafTree('', 'ventas');
            // })();
        });
    </script>
@endsection