@extends('layouts.reporte_analytics')

@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 = [];
        $cliente = config('app.CLIENTE');

        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";
            }
        }
        
        $salida = json_encode(['2' => __('messages.ventas'), '1' => __('messages.unidades'), '3' => __('messages.costo')]);
        $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'),*/ 'sem' => __('messages.semanas'), 'mes' => __('messages.meses'), "ytd" => __('messages.ytd'), "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");
        $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) {
                $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 = '';
        $orden_ventas = json_encode(['1' => 'Menor a Mayor', '2' => 'Mayor a Menor']);
        $div = json_encode(['mes' => 'Mes-Comparado', 'semana' => 'Semana-Comparada', 'pro-mes' => 'Mes-Consolidado', 'pro-sem' => 'Semana-Consolidada']);
        $div2 = json_encode(['mes' => 'Mes', 'semana' => 'Semana', 'ano' => 'Año']);
        $filtrosAv1 = $filtrosAv;
        if(isset($filtrosAv1['producto'])) unset($filtrosAv1['producto']);
        if(isset($filtrosAv1['local'])) unset($filtrosAv1['local']);
        if(isset($filtrosAv1['clientes'])) unset($filtrosAv1['clientes']);
        $texto = 'Cada recuadro representa la salida total ($) o (U) en un periodo especifico. Mientras mas oscuro es el color, mayor es la cantidad de ventas en ese periodo.';

        if($cliente == 'canontex'){
            $salida_matri = json_encode(['2' => __('messages.ventas'), '1' => __('messages.unidades'), '251' => 'Ventas Sell In ($)', '252' => 'Unidades Sell In (U)',]);
        }
    @endphp
@endsection
@section('div_reportes')
@endsection

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

            <x-selector-generico id="f_div_grafEstacHist2" idselect="f_div_grafEstacHist" :salida="$div"  class="" style="width: 160px" selected="mes">
                <x-slot name="texto">
                    {{__('messages.division')}}
                </x-slot>
            </x-selector-generico>
            <div id="fltr_year_grafEstacHist" style="width:120px;" class="fltr_periodo_grafEstacHist 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_grafEstacHist_ini" name="f_year_grafEstacHist_ini" class="flt form-control select2 " data-toggle="select2" width="100%">
                        @foreach($anhos as $key => $value)
                        @if (date("Y") - 1 == $key)
                            <option value="{{$key}}01" selected>{{$value}}</option>
                        @else
                            <option value="{{$key}}01">{{$value}}</option>
                        @endif
                        @endforeach
                    </select>
                </label>
            </div>
            <div id="fltr_year_grafEstacHist2" style="width:120px;" class="fltr_periodo_grafEstacHist 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_grafEstacHist_fin" name="f_year_grafEstacHist_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 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_pp_grafEstacHist" value="first_checkbox" style="margin-right: 5px" onclick="mostrar('producto_grafEstacHist')"> Por Productos
                </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_ps_grafEstacHist" value="first_checkbox" style="margin-right: 5px" onclick="mostrar('local_grafEstacHist')"> Por Salas
                </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_pc_grafEstacHist" value="first_checkbox" style="margin-right: 5px" onclick="mostrar('clientes_grafEstacHist')"> Por Cadenas
                </label>
            </div>
            @if(isset($filtrosAvAlias['producto']))
                <x-filtro id="f_producto_grafEstacHist" :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_grafEstacHist" :lista="[]" style="max-width: 120px; min-width: 120px; width: 120px; display: none">
                    <x-slot name="texto">
                        Producto
                    </x-slot>
                </x-filtro>
            @endif
            <x-filtro id="f_local_grafEstacHist" :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-filtro id="f_clientes_grafEstacHist" :lista="$clientes" style="max-width: 120px;min-width: 120px;width: 120px; display: none">
                <x-slot name="texto">
                    {{__('messages.filtro-texto-cliente')}}
                </x-slot>
            </x-filtro>
            <x-boton-actualizar onclick="getGrafEstacHist('{{$cliente}}', 'ventas');"/>
            <!--
            <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['grafEstaSem']))
        <x-grafico id="grafEstaSem" style="{{$display_grafico}}" :filtrosAv="$filtrosAv1" :filtrosAvAlias="$filtrosAvAlias">
            <x-selector-generico id="salidagrafEstaSem" idselect="salida_grafEstaSem" :salida="$salida_matri" class="selector-generico" style='width: 120px'>
                <x-slot name="texto">
                    {{__('messages.selector-generico-texto-valor')}}
                </x-slot>
            </x-selector-generico>

            <x-selector-generico id="f_div_grafEstaSem2" idselect="f_div_grafEstaSem" :salida="$div2"  class="" style="width: 160px" selected="mes">
                <x-slot name="texto">
                    {{__('messages.division')}}
                </x-slot>
            </x-selector-generico>
            <div id="fltr_year_grafEstaSem" style="width:120px;" class="fltr_periodo_grafEstaSem 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_grafEstaSem_ini" name="f_year_grafEstaSem_ini" class="flt form-control select2 " data-toggle="select2" width="100%">
                        @foreach($anhos as $key => $value)
                        @if (date("Y") - 1 == $key)
                        <option value="{{$key}}01" selected>{{$value}}</option>
                    @else
                        <option value="{{$key}}01">{{$value}}</option>
                    @endif
                        @endforeach
                    </select>
                </label>
            </div>
            <div id="fltr_year_grafEstaSem2" style="width:120px;" class="fltr_periodo_grafEstaSem 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_grafEstaSem_fin" name="f_year_grafEstaSem_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 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_pp_grafEstaSem" value="first_checkbox" style="margin-right: 5px" onclick="mostrar('producto_grafEstaSem')"> Por Productos
                </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_ps_grafEstaSem" value="first_checkbox" style="margin-right: 5px" onclick="mostrar('local_grafEstaSem')"> Por Salas
                </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_pc_grafEstaSem" value="first_checkbox" style="margin-right: 5px" onclick="mostrar('clientes_grafEstaSem')"> Por Cadenas
                </label>
            </div>
            @if(isset($filtrosAvAlias['producto']))
                <x-filtro id="f_producto_grafEstaSem" :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_grafEstaSem" :lista="[]" style="max-width: 120px; min-width: 120px; width: 120px; display: none">
                <x-slot name="texto">
                    Producto
                </x-slot>
            </x-filtro>
            @endif
            <x-filtro id="f_local_grafEstaSem" :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-filtro id="f_clientes_grafEstaSem" :lista="$clientes" style="max-width: 120px;min-width: 120px;width: 120px; display: none">
                <x-slot name="texto">
                    {{__('messages.filtro-texto-cliente')}}
                </x-slot>
            </x-filtro>
            <x-boton-actualizar onclick="getGrafEstaSem('{{$cliente}}', 'ventas');"/>
            <x-infobox tamano="25px" texto="{{$texto}}"/>
            <!--
            <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['grafEstaComp']))
    <x-grafico id="grafEstaComp" style="{{$display_grafico}}" :filtrosAv="$filtrosAv1" :filtrosAvAlias="$filtrosAvAlias">
        <x-selector-generico id="salidagrafEstaComp" idselect="salida_grafEstaComp" :salida="$salida_matri" class="selector-generico" style='width: 120px'>
            <x-slot name="texto">
                {{__('messages.selector-generico-texto-valor')}}
            </x-slot>
        </x-selector-generico>

        <x-selector-generico id="f_div_grafEstaComp2" idselect="f_div_grafEstaComp" :salida="$div2"  class="" style="width: 160px" selected="mes">
            <x-slot name="texto">
                {{__('messages.division')}}
            </x-slot>
        </x-selector-generico>
        <div id="fltr_year_grafEstaComp" style="width:120px;" class="fltr_periodo_grafEstaComp 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_grafEstaComp_ini" name="f_year_grafEstaComp_ini" class="flt form-control select2 " data-toggle="select2" width="100%">
                    @foreach($anhos as $key => $value)
                    @if (date("Y") - 1 == $key)
                    <option value="{{$key}}01" selected>{{$value}}</option>
                @else
                    <option value="{{$key}}01">{{$value}}</option>
                @endif
                    @endforeach
                </select>
            </label>
        </div>
        <div id="fltr_year_grafEstaComp2" style="width:120px;" class="fltr_periodo_grafEstaComp 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_grafEstaComp_fin" name="f_year_grafEstaComp_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 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_pp_grafEstaComp" value="first_checkbox" style="margin-right: 5px" onclick="mostrar('producto_grafEstaComp')"> Por Productos
            </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_ps_grafEstaComp" value="first_checkbox" style="margin-right: 5px" onclick="mostrar('local_grafEstaComp')"> Por Salas
            </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_pc_grafEstaComp" value="first_checkbox" style="margin-right: 5px" onclick="mostrar('clientes_grafEstaComp')"> Por Cadenas
            </label>
        </div>
        @if(isset($filtrosAvAlias['producto']))
            <x-filtro id="f_producto_grafEstaComp" :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_grafEstaComp" :lista="[]" style="max-width: 120px; min-width: 120px; width: 120px; display: none">
                <x-slot name="texto">
                    Producto
                </x-slot>
            </x-filtro>
        @endif
        <x-filtro id="f_local_grafEstaComp" :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-filtro id="f_clientes_grafEstaComp" :lista="$clientes" style="max-width: 120px;min-width: 120px;width: 120px; display: none">
            <x-slot name="texto">
                {{__('messages.filtro-texto-cliente')}}
            </x-slot>
        </x-filtro>
        <x-boton-actualizar onclick="getGrafEstaComp('{{$cliente}}', 'ventas');"/>
        <x-infobox tamano="25px" texto="{{$texto}}"/>
        <!--
        <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

@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>
        let ids = ['grafEstacHist','grafEstaSem', 'grafEstaComp'];
        
        var filtrosPromise = getFiltrosAv('{{$cliente}}', '{{$codigo}}');
        function mostrar(texto){
            if(!$('#f_'+texto+'_cont').is(":visible")){
                $('#f_'+texto+'_cont').show();
            }else{
                $('#f_'+texto+'_cont').hide();
            }
        }
        $(document).ready(() => {

            $('#f_div_grafEstacHist').on('change',function(){
                let selector_tmp = $('#f_div_grafEstacHist');
                let ini = $('#f_year_grafEstacHist_ini');
                let fin = $('#f_year_grafEstacHist_fin');
                console.log(selector_tmp.val() + ini.val() + fin.val());
                /*if(selector_tmp.val() == 'semana'){
                    var option = $('<option></option>').attr("value", "202252").text("2022");
                    fin.empty().append(option);
                }*/
            });

            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