@extends('layouts.reporte')

@section('php')
    @php

        $locales = [];
        $cantidad = 100;
        while ($cantidad <= $cantidad_locales) {
            $locales[(($cantidad-99)." - ".$cantidad)] = $cantidad;
            $cantidad = $cantidad + 100;
        }
        if ($cantidad % 100 == 0) {
            $locales[(($cantidad-99)." - ".$cantidad_locales)] = $cantidad_locales;
        }
        // dd($locales);
        $max = $maxfecha[0]->fecha;
        
        $locales = json_encode($locales);
        $cliente = config('app.CLIENTE');

        if($cliente == 'bless'){
            $tipo_periodo = 'mes';
            $tipo_periodo_ = 'mes';

            $display = 'block';
            $display_ = 'block';

        }

            $tipo_periodo = 'mec';
            $tipo_periodo_ = 'mes';

            $display = 'block';
            $display_ = 'none';

        
            $salida_siksa = 2;

        $array_clientes = [];
        $salida = json_encode(['451' => __('messages.ventas'), '452' => __('messages.unidades'), '453' => __('messages.costo')]);
        $salida_evo = json_encode(['451' => __('messages.ventas'), '452' => __('messages.unidades'), '453' => __('messages.costo'), 'peso-ecom' => __('messages.peso-porc')]);
        $salida_matri = json_encode(['451' => __('messages.ventas'), '452' => __('messages.unidades')]);
        $salida_vcomuna = json_encode(['451' => __('messages.ventas')]);
        $salida_default = json_encode(['451' => __('messages.ventas')]);
        $salida_promo = json_encode(['num' => 'Numérica', 'porc' => 'Porcentual']);
        // dd($clientes,$salida);

        for ($i=0; $i < count($clientes); $i++) { 
            $array_clientes [$clientes[$i]->valor] = $clientes[$i]->valor;
        }

        $salida_inout = json_encode(['13' => __('messages.ventas'), '12' => __('messages.unidades')]);
        $tipo_var = json_encode(['451' => __('messages.dinero'), '452' => __('messages.porcentaje')]);
        $periodo = json_encode(['dia'=> __('messages.dias'), 'sem' => __('messages.semanas'), 'mes' => __('messages.meses')]);
        $periodo_crec = json_encode(['sem' => __('messages.semanas'), 'mes' => __('messages.meses')]);
        $periodo_grafcomp = json_encode(['dia'=> __('messages.dias'), 'sem' => __('messages.semanas'), 'mes' => __('messages.meses'), 'ytd' => __('messages.ytd')]);
        $periodo_comp = json_encode(['dia'=> __('messages.dias'),'ytd' => __('messages.ytd'), 'mec' => __('messages.mec'), 'sem' => __('messages.semanas'), 
        'mes' => __('messages.meses')]);
        $periodo_comparativo = json_encode(['ytd' => __('messages.ytd'), 'mec' => __('messages.mec'), 
        'mes' => __('messages.meses')]);
        $periodo_matri = json_encode(['ytd' => __('messages.ytd'), 'mec' => __('messages.mec'), 'mes' => __('messages.meses'), 'sem' => __('messages.semanas'), 'dia' => __('messages.dias')]);
        $periodo_disp = json_encode(['mes' => __('messages.meses'), 'dia' => __('messages.dias')]);
        
        $periodo_vcomuna = json_encode(['mes' => __('messages.meses'),'dia' => __('messages.dias')]);
        $periodo_mec3meses  = json_encode(['ytd' => __('messages.ytd'), 'mec' => __('messages.mec'), 'mes' => __('messages.meses'), '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')]);
        $periodo_perdi = json_encode(['452' => __('messages.acomulado'), 'mec' => __('messages.mec'), '453' => __('messages.mesanterior')]);

        if($cliente == "southwind"){
            $periodo_grafcomp = json_encode(['dia'=> __('messages.dias'), 'sem' => __('messages.semanas'), "sem_wd" => "Semanas (Por días)", 
            'mes' => __('messages.meses'), 'ytd' => __('messages.ytd')]);
        }else if(in_array($cliente, ['clorox'])){
            $salida = json_encode(['451' => __('messages.ventas_sin_iva'), '457' => __('messages.ventas_con_iva'), '452' => __('messages.unidades'), '453' => __('messages.costo'), '455' => __('messages.sc'), '456' => __('messages.ac')]);
            $salida_evo = $salida;
            $salida_matri = json_encode(['451' => __('messages.ventas_sin_iva'), '452' => __('messages.unidades')]);

            $periodo_grafmatri = json_encode(['ytdf' => __('messages.ytdf'), 'ytd' => __('messages.ytd'), 'mec' => __('messages.mec'), 'dia' => __('messages.dias')]);
            $periodo_comp = json_encode(['dia'=> __('messages.dias'), 'ytdf' => __('messages.ytdf'), 'ytd' => __('messages.ytd'), 'mec' => __('messages.mec'), 'sem' => __('messages.semanas'), 
            'mes' => __('messages.meses'), 'uam' => __('messages.ult-anio-movil')]);
            $periodo_grafcomp = json_encode(['dia'=> __('messages.dias'), 'sem' => __('messages.semanas'), 'mes' => __('messages.meses'), 'ytdf' => __('messages.ytdf'), 'ytd' => __('messages.ytd')]);
            $periodo_matri = json_encode(['ytdf' => __('messages.ytdf'), 'ytd' => __('messages.ytd'), 'mec' => __('messages.mec'), 'mes' => __('messages.meses'), 'sem' => __('messages.semanas'), 
            'dia' => __('messages.dias')]);
        }

        $mesesComp = [];
        $mesesTree = [];

        $semanasComp = [];
        $yearAct = date('Y');
        $yearAnt = date('Y') - 1;
        $yearAnt2 = date('Y') - 2;
        $year = json_encode([$yearAct => $yearAct]);

        $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%"]);
        $participacion = json_encode(['452'=>"Total Consulta", '451' =>"Total ".__('messages.participacion')]);
        $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 || $_year == $yearAnt2) {
                $mesesComp []= $value;
            }
        }

        foreach ($meses as $value) {
            list($_mes, $_year) = explode(' ', $value->nombre);
            if($_year >= $yearAct-1) {
                $mesesTree []= $value;
            }
        }
        foreach ($semanas as $value) {
            $_year = substr($value->periodo, 0, 4);
            if($_year >= $yearAct-1) {
                $semanasComp []= $value;
            }
        }
        if ($div_reportes != null) {
            $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_3 = $variables;
        if(in_array($cliente, ['siksa', 'loveco'])){ // Permite el cruce Locales x Producto
            // No se eliminan estas opciones.
        }else{
            if(isset($variables_2['Local']) && isset($variables_2['Local']['3-5'])){
                unset($variables_2['Local']['3-5']);
                unset($variables_3['Local']['3-5']);
            }
            if(isset($variables_2['Producto']) && isset($variables_2['Producto']['1-15'])){
                unset($variables_2['Producto']['1-15']);
            }
        }

        if(isset($variables_3['Local']) && isset($variables_3['Local']['3-5'])){
            unset($variables_3['Local']['3-5']);
        }
        if(isset($variables_3['Producto']) && isset($variables_3['Producto']['1-15'])){
            unset($variables_3['Producto']['1-15']);
        }

        $ninguno = ['' => ['-1' => 'Sin Seleccionar']];
        $variables_2 = $ninguno + $variables_2;
        $variables_inout[""]["total"] = __('messages.compañia');
        $display_grafico = '';
        $display_tabla = '';
        $true = true;
        $warning = "Se compara Costo Sell Out vs Venta Sell In";
        //dd($mesesComp);
        
        $_12MonthsAgo = date('Ym', strtotime(date('Y-m-01').'-11 month'));

        $array_meses = ['', __('messages.enero'), __('messages.febrero'), __('messages.marzo'), __('messages.abril'), __('messages.mayo'), __('messages.junio'), __('messages.julio'), __('messages.agosto'), __('messages.septiembre'), __('messages.octubre'), __('messages.noviembre'), __('messages.diciembre')];
        $periodo_cierremes_aux = [];
        $anio_ini = date('Y')-1; $anio_fin = date('Y');
        for($i = $anio_fin; $i >= $anio_ini; --$i){
            for($c = 12; $c >= 1; --$c){
                $mes_str = $i.str_pad($c, 2, '0', STR_PAD_LEFT);
                if($mes_str > date('Ym')) continue;
                else if($mes_str == date('Ym')){
                    $periodo_cierremes_aux[$mes_str] = __('messages.mec');
                }else{
                    $periodo_cierremes_aux[$mes_str] = $array_meses[$c].' '.$i;
                }
            }
        }
        //$periodo_cierremes_aux = json_encode([date('Ym') => __('messages.messages.mec')]);

        $salida_disp  = json_encode(['2' => __('messages.ventas'), '1' => __('messages.unidades')]);

        $periodo_cierremes = json_encode($periodo_cierremes_aux);

        $arr_dos_periodos = ['mdlzchile'];

    @endphp
@endsection
@section('div_reportes')
    @php echo $div; @endphp
@endsection

@if(count($selectores_grafico)>0)
@section('grafico')
    @if(isset($selectores_grafico['grafcomp']))
        <x-grafico id="grafcomp" style="height: 450px !important; {{$display_grafico}}" :filtros="$filtros" :filtrosAv="$filtrosAv" :filtrosAvAlias="$filtrosAvAlias">
            <x-selector-variable id="variables_grafcomp" :lista='$variables' selected="2-0" cliente='$cliente'/>
            <x-selector-generico id="salida_grafcomp2" idselect="salida_grafcomp" :salida="$salida"  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_tmp_grafcomp2" idselect="f_tmp_grafcomp" :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="grafcomp" style="display:none;" />

            <!--EVOLUTVO SEMANA-->
            <x-selector-semanas id="fltr_sem_grafcomp" idselect="f_sem_grafcomp_ini" :semanas="$semanas"  class="fltr_periodo_grafcomp" style="display: none;">
                <x-slot name="texto">
                    {{__('messages.selector-semanas-meses-texto-desde')}}
                </x-slot>
            </x-selector-semanas>
            <x-selector-semanas id="fltr_sem_grafcomp2" idselect="f_sem_grafcomp_fin" :semanas="$semanas" class="fltr_periodo_grafcomp" style="display: none;">
                <x-slot name="texto">
                    {{__('messages.selector-semanas-meses-texto-hasta')}}
                </x-slot>
            </x-selector-semanas>
            <!--EVOLUTVO SEMANA-->
            <x-selector-semanas id="fltr_sem_wd_grafcomp" idselect="f_sem_wd_grafcomp_ini" :semanas="$semanas"  class="fltr_periodo_grafcomp" style="display: none;">
                <x-slot name="texto">
                    {{__('messages.selector-semanas-meses-texto-desde')}}
                </x-slot>
            </x-selector-semanas>
            <x-selector-semanas id="fltr_sem_wd_grafcomp2" idselect="f_sem_wd_grafcomp_fin" :semanas="$semanas" class="fltr_periodo_grafcomp" 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_grafcomp" idselect="f_mes_grafcomp_ini" :meses="$mesesComp" class="fltr_periodo_grafcomp" selected="{{date('Y01')}}">
                <x-slot name="texto">
                    {{__('messages.selector-semanas-meses-texto-desde')}}
                </x-slot>

            </x-selector-meses>
            <x-selector-meses id="fltr_mes_grafcomp2" idselect="f_mes_grafcomp_fin" :meses="$mesesComp" class="fltr_periodo_grafcomp">
                <x-slot name="texto">
                    {{__('messages.selector-semanas-meses-texto-hasta')}}
                </x-slot>
            </x-selector-meses>

            <x-selector-generico id="f_type_grafcomp2" idselect="f_type_grafcomp" :salida="$tipos_graficos"  class="selector-generico" style="width: 120px" 
            selected="msline">
                <x-slot name="texto">
                    {{__('messages.selector-tipo-grafico')}}
                </x-slot>
            </x-selector-generico>

            <x-boton-actualizar onclick="getGrafComp('{{$cliente}}', 'ventas');"/>
            
            <x-infobox tamano="25px" texto="" modal="grafico_comparativo_modal"/>
            <div class="modal fade bd-example-modal-lg" id="grafico_comparativo_modal" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
                <div class="modal-dialog modal-lg">
                    <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="">Gráfico Comparativo</h5>     
                    </div>
                        <!-- Center a image from ../public/images/ventas_grafico_comparativo.png -->
                        <div class="text-center">
                            <img src="{{asset('images/ventas_grafico_comparativo.png')}}" class="img-fluid" alt="Responsive image">
                        </div>
                        <!-- add div for text -->
                        <p><b>Consultas sobre el gráfico:</b> Para utilizar el gráfico; definir los parámetros en los selectores y presionar "Actualizar".</p>
                        <ul>
                            <li><b>Selector Variable:</b> Definir Variable a representar en el gráfico.</li>
                            <li><b>Selector Valor Salida:</b> Seleccionar tipo de unidad sobre la que se consulta.</li>
                            <li><b>Selector Tipo Periodo:</b> Definir el tipo de periodo que se consulta.</li>
                            <li><b>Selector Periodo:</b> Definir el rango de fechas que se consulta.</li>
                            <li><b>Selector Tipo gráfico:</b> Define el diseño del gráfico para representar los datos.</li>
                        </ul>
                        <p><b>Filtros Rápidos:</b> Marcar las opciones a filtrar en cada selector.</p>
                        <ul>
                            <li><b>Selector Cliente:</b> Filtrar por cliente.</li>
                            <li><b>Selector Categoría:</b> Filtrar por Categoría    .</li>
                            <li><b>Selector KAM:</b> Filtrar por <i>Key Account Manager</i>.</li>
                        </ul>
                        <p><b>Exportar:</b> Descargar una imagen del gráfico.</p>
                    </div>
                </div>
            </div>

        </x-grafico>
        @php $display_grafico = 'display: none;'; @endphp
    @endif
    
    @if(isset($selectores_grafico['grafcrec']))
        <x-grafico id="grafcrec" style="height: 450px !important; {{$display_grafico}}" :filtros="$filtros" :filtrosAv="$filtrosAv" :filtrosAvAlias="$filtrosAvAlias">
            <x-selector-variable id="variables_grafcrec" :lista='$variables' selected="2-0" cliente='$cliente'/>
            <x-selector-generico id="salida_grafcrec2" idselect="salida_grafcrec" :salida="$salida"  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_tmp_grafcrec2" idselect="f_tmp_grafcrec" :salida="$periodo_crec"  class="" style="width: 120px" selected="mes">
                <x-slot name="texto">
                    {{__('messages.selector-generico-texto-periodo')}}
                </x-slot>
            </x-selector-generico>

            <!--EVOLUTVO SEMANA-->
            <x-selector-semanas id="fltr_sem_grafcrec" idselect="f_sem_grafcrec_ini" :semanas="$semanas"  class="fltr_periodo_grafcrec" style="display: none;">
                <x-slot name="texto">
                    {{__('messages.selector-semanas-meses-texto-desde')}}
                </x-slot>
            </x-selector-semanas>
            <x-selector-semanas id="fltr_sem_grafcrec2" idselect="f_sem_grafcrec_fin" :semanas="$semanas" class="fltr_periodo_grafcrec" 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_grafcrec" idselect="f_mes_grafcrec_ini" :meses="$mesesComp" class="fltr_periodo_grafcrec">
                <x-slot name="texto">
                    {{__('messages.selector-semanas-meses-texto-desde')}}
                </x-slot>
            </x-selector-meses>
            <x-selector-meses id="fltr_mes_grafcrec2" idselect="f_mes_grafcrec_fin" :meses="$mesesComp" class="fltr_periodo_grafcrec">
                <x-slot name="texto">
                    {{__('messages.selector-semanas-meses-texto-hasta')}}
                </x-slot>
            </x-selector-meses>

            <x-boton-actualizar onclick="getGrafCrec('{{$cliente}}', 'ventas');"/>

        </x-grafico>
        @php $display_grafico = 'display: none;'; @endphp
    @endif

    @if(isset($selectores_grafico['grafevo']))
        <x-grafico id="grafevo" style="height: 450px !important; {{$display_grafico}}" :filtros="$filtros" :filtrosAv="$filtrosAv" :filtrosAvAlias="$filtrosAvAlias">
            <x-selector-variable id="variables_grafevo" :lista='$variables' selected="2-5" cliente='$cliente'/>

            <x-selector-generico id="salida_grafevo2" idselect="salida_grafevo" :salida="$salida"  class="selector-generico" style="width: 120px">
                <x-slot name="texto">
                    {{__('messages.selector-generico-texto-valor')}}
                </x-slot>
            </x-selector-generico>
            @if ($cliente == 'colgate' || $cliente == 'bless')
                <x-selector-generico id="f_tmp_grafevo2" idselect="f_tmp_grafevo" :salida="$periodo"  class="selector-generico" style="width: 120px" selected="mes">
                    <x-slot name="texto">
                        {{__('messages.selector-generico-texto-periodo')}}
                    </x-slot>
                </x-selector-generico>
            @else
                <x-selector-generico id="f_tmp_grafevo2" idselect="f_tmp_grafevo" :salida="$periodo"  class="selector-generico" style="width: 120px" selected="dia">
                    <x-slot name="texto">
                        {{__('messages.selector-generico-texto-periodo')}}
                    </x-slot>
                </x-selector-generico>
            @endif
            @if ($cliente == 'colgate' || $cliente == 'bless')
            <x-selector-dias idpadre="grafevo" style="display: none;"/>
            <!--EVOLUTVO MES-->
            <x-selector-meses id="fltr_mes_grafevo" idselect="f_mes_grafevo_ini" :meses="$meses" class="fltr_periodo_grafevo">
                <x-slot name="texto">
                    {{__('messages.selector-semanas-meses-texto-desde')}}
                </x-slot>
            </x-selector-meses>
            <x-selector-meses id="fltr_mes_grafevo2" idselect="f_mes_grafevo_fin" :meses="$meses" class="fltr_periodo_grafevo">
                <x-slot name="texto">
                    {{__('messages.selector-semanas-meses-texto-hasta')}}
                </x-slot>
            </x-selector-meses>
            @else
            <x-selector-dias idpadre="grafevo"/>
            <!--EVOLUTVO MES-->
            <x-selector-meses id="fltr_mes_grafevo" idselect="f_mes_grafevo_ini" :meses="$meses" class="fltr_periodo_grafevo" style="display: none;">
                <x-slot name="texto">
                    {{__('messages.selector-semanas-meses-texto-desde')}}
                </x-slot>
            </x-selector-meses>
            <x-selector-meses id="fltr_mes_grafevo2" idselect="f_mes_grafevo_fin" :meses="$meses" class="fltr_periodo_grafevo" style="display: none;">
                <x-slot name="texto">
                    {{__('messages.selector-semanas-meses-texto-hasta')}}
                </x-slot>
            </x-selector-meses>
            @endif
            <!--EVOLUTVO SEMANA-->
            <x-selector-semanas id="fltr_sem_grafevo" idselect="f_sem_grafevo_ini" :semanas="$semanas"  class="fltr_periodo_grafevo" style="display: none;">
                <x-slot name="texto">
                    {{__('messages.selector-semanas-meses-texto-desde')}}
                </x-slot>
            </x-selector-semanas>
            <x-selector-semanas id="fltr_sem_grafevo2" idselect="f_sem_grafevo_fin" :semanas="$semanas" class="fltr_periodo_grafevo" style="display: none;">
                <x-slot name="texto">
                    {{__('messages.selector-semanas-meses-texto-hasta')}}
                </x-slot>
            </x-selector-semanas>
            <!--AÑO-->
            <div id="fltr_year_grafevo" style="width:120px;display:none;" class="fltr_periodo_grafevo 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_grafevo_ini" name="f_year_grafevo_ini" class="flt form-control select2 " data-toggle="select2" width="100%">
                        <option value="202001">2020</option>
                        <option value="202101">2021</option>
                    </select>
                </label>
            </div>
            <div id="fltr_year_grafevo2" style="width:120px;display:none;" class="fltr_periodo_grafevo 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_grafevo_fin" name="f_year_grafevo_fin" class="flt form-control select2 " data-toggle="select2" width="100%">
                        <option value="202053">2020</option>
                        <option value="202153">2021</option>
                    </select>
                </label>
            </div>

            <x-selector-generico id="f_type_grafevo2" idselect="f_type_grafevo" :salida="$tipos_graficos"  class="selector-generico" style="width: 120px;" 
            selected="stackedcolumn2d">
                <x-slot name="texto">
                    {{__('messages.selector-tipo-grafico')}}
                </x-slot>
            </x-selector-generico>
        
            <x-boton-actualizar onclick="getGrafEvo('{{$cliente}}', 'ventas');"/> 

            <x-infobox tamano="25px" texto="" modal="grafico_evolutivo_modal"/>
            <div class="modal fade bd-example-modal-lg" id="grafico_evolutivo_modal" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
                <div class="modal-dialog modal-lg">
                    <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="">Gráfico Evolutivo</h5>     
                    </div>
                        <div class="text-center">
                            <img src="{{asset('images/ventas_grafico_evolutivo.png')}}" class="img-fluid" alt="Responsive image">
                        </div>
                        <!-- add div for text -->
                        <p><b>Consultas sobre el gráfico:</b> Para utilizar el gráfico; definir los parámetros en los selectores y presionar "Actualizar".</p>
                        <ul>
                            <li><b>Selector Variable:</b> Definir Variable a representar en el gráfico.</li>
                            <li><b>Selector Valor Salida:</b> Seleccionar tipo de unidad sobre la que se consulta.</li>
                            <li><b>Selector Tipo Periodo:</b> Definir el tipo de periodo que se consulta.</li>
                            <li><b>Selector Periodo:</b> Definir el rango de fechas que se consulta.</li>
                            <li><b>Selector Tipo gráfico:</b> Define el diseño del gráfico para representar los datos.</li>
                        </ul>
                        <p><b>Filtros Rápidos:</b> Marcar las opciones a filtrar en cada selector.</p>
                        <ul>
                            <li><b>Selector Cliente:</b> Filtrar por cliente.</li>
                            <li><b>Selector Categoría:</b> Filtrar por Categoría    .</li>
                            <li><b>Selector KAM:</b> Filtrar por <i>Key Account Manager</i>.</li>
                        </ul>
                        <p><b>Exportar:</b> Descargar una imagen del gráfico.</p>
                    </div>
                </div>
            </div>
            
        </x-grafico>
        @php $display_grafico = 'display: none;'; @endphp
    @endif
    
    @if(isset($selectores_grafico['grafdri']))
        <x-grafico id="grafdri" style="height: 450px !important; {{$display_grafico}}" :filtros="$filtros" :filtrosAv="$filtrosAv" :filtrosAvAlias="$filtrosAvAlias">
            <x-selector-generico id="tipo_grafdri2" idselect="tipo_grafdri" :salida="$tipo" class="" selected="local">
                <x-slot name="texto">
                    {{__('messages.selector-variable-texto-fila')}}
                </x-slot>
            </x-selector-generico>

            <x-selector-generico id="salida_grafdri2" idselect="salida_grafdri" :salida="$salida_default"  class="selector-generico d-none" style="width: 120px;">
                <x-slot name="texto">
                    {{__('messages.selector-generico-texto-valor')}}
                </x-slot>
            </x-selector-generico>

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

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

            <!--EVOLUTVO SEMANA-->
            <x-selector-semanas id="fltr_sem_grafdri" idselect="f_sem_grafdri_ini" :semanas="$semanas"  class="fltr_periodo_grafdri" style="display: none;">
                <x-slot name="texto">
                    {{__('messages.selector-semanas-meses-texto-desde')}}
                </x-slot>
            </x-selector-semanas>
            <x-selector-semanas id="fltr_sem_grafdri2" idselect="f_sem_grafdri_fin" :semanas="$semanas" class="fltr_periodo_grafdri" 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_grafdri" idselect="f_mes_grafdri_ini" :meses="$meses" class="fltr_periodo_grafdri">
                <x-slot name="texto">
                    {{__('messages.selector-semanas-meses-texto-desde')}}
                </x-slot>
            </x-selector-meses>
            <x-selector-meses id="fltr_mes_grafdri2" idselect="f_mes_grafdri_fin" :meses="$meses" class="fltr_periodo_grafdri">
                <x-slot name="texto">
                    {{__('messages.selector-semanas-meses-texto-hasta')}}
                </x-slot>
            </x-selector-meses>
            <x-boton-actualizar onclick="getGrafDri('{{$cliente}}', 'ventas');"/>

            <x-infobox tamano="25px" texto="" modal="grafico_drill_modal"/>
            <div class="modal fade bd-example-modal-lg" id="grafico_drill_modal" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
                <div class="modal-dialog modal-lg">
                    <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="">Gráfico Drill</h5>     
                    </div>
                        <div class="text-center">
                            <img src="{{asset('images/ventas_grafico_drill.png')}}" class="img-fluid" alt="Responsive image">
                        </div>
                        <!-- add div for text -->
                        <p><b>Consultas sobre el gráfico:</b> Para utilizar el gráfico; definir los parámetros en los selectores y presionar "Actualizar".</p>
                        <ul>
                            <li><b>Selector Variable:</b> Definir Variable a representar en el gráfico.</li>
                            <li><b>Selector Tipo Periodo:</b> Definir el tipo de periodo que se consulta.</li>
                            <li><b>Selector Periodo:</b> Definir el rango de fechas que se consulta.</li>
                            <li><b>Selector Tipo gráfico:</b> Define el diseño del gráfico para representar los datos.</li>
                        </ul>
                        <p><b>Filtros Rápidos:</b> Marcar las opciones a filtrar en cada selector.</p>
                        <ul>
                            <li><b>Selector Cliente:</b> Filtrar por cliente.</li>
                            <li><b>Selector Categoría:</b> Filtrar por Categoría    .</li>
                            <li><b>Selector KAM:</b> Filtrar por <i>Key Account Manager</i>.</li>
                        </ul>
                        <p><b>Exportar:</b> Descargar una imagen del gráfico.</p>
                    </div>
                </div>
            </div>

        </x-grafico>
        @php $display_grafico = 'display: none;'; @endphp
    @endif

    @if(isset($selectores_grafico['graftree']))
        <input id="maxfecha" type="text" value="{{$max}}" style="display:none">
        <x-grafico id="graftree" style="height: 450px !important; {{$display_grafico}}" :filtros="$filtros" :filtrosAv="$filtrosAv" :filtrosAvAlias="$filtrosAvAlias">
            <x-selector-generico id="salida_graftree2" idselect="salida_graftree" :salida="$salida_default"  class="selector-generico d-none" style="width: 120px;">
                <x-slot name="texto">
                    {{__('messages.selector-generico-texto-valor')}}
                </x-slot>
            </x-selector-generico>

            <x-selector-variable id="variables_graftree" :lista='$variabletree' selected="2-0" cliente='$cliente'/>
            <x-selector-generico id="inf_graftree2" idselect="inf_graftree" :salida="$lim_inf" class="" style="width: 100%">
                <x-slot name="texto">
                    Límite Inferior
                </x-slot>
            </x-selector-generico>
            <x-selector-generico id="sup_graftree2" idselect="sup_graftree" :salida="$lim_sup" class="" style="width: 100%">
                <x-slot name="texto">
                    Límite Superior
                </x-slot>
            </x-selector-generico>

            <x-selector-generico id="f_tmp_graftree2" idselect="f_tmp_graftree" :salida="$periodo_comp"  class="" style="width: 120px" selected="{{$tipo_periodo}}">
                <x-slot name="texto">
                    {{__('messages.selector-generico-texto-periodo')}}
                </x-slot>
            </x-selector-generico>
            <!--EVOLUTVO SEMANA-->
            <x-selector-semanas id="fltr_sem_graftree" idselect="f_sem_graftree_ini" :semanas="$semanasComp"  class="fltr_periodo_graftree" style="display: none;">
                <x-slot name="texto">
                    {{__('messages.selector-semanas-meses-texto-desde')}}
                </x-slot>
            </x-selector-semanas>
            <x-selector-semanas id="fltr_sem_graftree2" idselect="f_sem_graftree_fin" :semanas="$semanasComp" class="fltr_periodo_graftree" 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_graftree" idselect="f_mes_graftree_ini" :meses="$mesesTree" class="fltr_periodo_graftree" style="display: {{$display_}}">
                <x-slot name="texto">
                    {{__('messages.selector-semanas-meses-texto-desde')}}
                </x-slot>
            </x-selector-meses>
            <x-selector-meses id="fltr_mes_graftree2" idselect="f_mes_graftree_fin" :meses="$mesesTree" class="fltr_periodo_graftree" style="display: {{$display_}}">
                <x-slot name="texto">
                    {{__('messages.selector-semanas-meses-texto-hasta')}}
                </x-slot>
            </x-selector-meses>

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

            <x-boton-actualizar onclick="getGrafTree('{{$cliente}}', 'ventas');"/>

            <x-infobox tamano="25px" texto="" modal="grafico_tree_modal"/>
            <div class="modal fade bd-example-modal-lg" id="grafico_tree_modal" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
                <div class="modal-dialog modal-lg">
                    <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="">Gráfico Tree</h5>     
                    </div>
                        <div class="text-center">
                            <img src="{{asset('images/ventas_grafico_tree.png')}}" class="img-fluid" alt="Responsive image">
                        </div>
                        <!-- add div for text -->
                        <p><b>Consideraciones del gráfico:</b> Variación Mes en Curso año actual versus mismo Mes en Curso año anterior. Selector Cadena permite consultar sobre la cadena elegida exclusivamente.</p>
                        <p><b>Consultas sobre el gráfico:</b> Para utilizar el gráfico; definir los límites de valores (crecimiento) en los selectores y presionar "Actualizar".</p>
                        <ul>
                            <li><b>Selector Límite Inferior:</b> Seleccionar el valor mínimo de crecimiento que se mostrará.</li>
                            <li><b>Selector Límite Superior:</b> Seleccionar el valor máximo de crecimiento que se mostrará.</li>
                        </ul>
                        <p><b>Detalles:</b> Pasar el cursor por el gráfico entregará detalles sobre lo que se esta representando.</p>
                        <p><b>Deslizador bajo el gráfico: </b> Definir valor máximo y mínimo para ocultar valores fuera de este rango. (Outliers seguirán marcados)</p>
                        <p><b>Filtros Rápidos:</b> Marcar las opciones a filtrar en cada selector.</p>
                        <ul>
                            <li><b>Selector Cliente:</b> Filtrar por cliente.</li>
                            <li><b>Selector Categoría:</b> Filtrar por Categoría    .</li>
                            <li><b>Selector KAM:</b> Filtrar por <i>Key Account Manager</i>.</li>
                        </ul>
                        <p><b>Exportar:</b> Descargar una imagen del gráfico.</p>
                    </div>
                </div>
            </div>

        </x-grafico>
        @php $display_grafico = 'display: none;'; @endphp
    @endif

    @if(isset($selectores_grafico['grafvar']))
        {{-- <x-grafico id="grafvar" style="height: 450px !important; {{$display_grafico}}" :filtros="$filtros" :filtrosAvAlias="$filtrosAvAlias">
            <x-selector-generico id="tipo_grafvar2" idselect="tipo_grafvar" :salida="$tipo_var" class="" selected="dinero">
                <x-slot name="texto">
                    {{__('messages.selector-generico-texto-valor')}}
                </x-slot>
            </x-selector-generico>
            <x-selector-generico id="f_tmp_grafvar2" idselect="f_tmp_grafvar" :salida="$periodo_var"  class="" style="width: 120px" selected="dia" disabled="">
                <x-slot name="texto">
                    {{__('messages.selector-generico-texto-periodo')}}
                </x-slot>
            </x-selector-generico>
            <x-selector-dias idpadre="grafvar"/>

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

        </x-grafico> --}}
        @php $display_grafico = 'display: none;'; @endphp
    @endif

    @if(isset($selectores_grafico['grafmatri']))
        <x-grafico id="grafmatri" style="height: 450px !important; {{$display_grafico}}" :filtros="$filtros" :filtrosAv="$filtrosAv" :filtrosAvAlias="$filtrosAvAlias">
            <x-selector-variable id="variables_grafmatri" :lista='$variables' selected="2-0" cliente='$cliente'/>
            <x-selector-generico id="salida_grafmatri2" idselect="salida_grafmatri" :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_participacion_grafmatri2" idselect="f_participacion_grafmatri" :salida="$participacion"  class="" style="width: 120px">
                <x-slot name="texto">
                    {{__('messages.participacion')}}
                </x-slot>
            </x-selector-generico>
            <x-selector-generico id="f_tmp_grafmatri2" idselect="f_tmp_grafmatri" :salida="$periodo_grafmatri"  class="" style="width: 120px" selected="mes">
                <x-slot name="texto">
                    {{__('messages.selector-generico-texto-periodo')}}
                </x-slot>
            </x-selector-generico>

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

            <x-boton-actualizar onclick="getGrafMatri('{{$cliente}}', 'ventas');"/>

            <x-infobox tamano="25px" texto="" modal="grafico_matriz_modal"/>
            <div class="modal fade bd-example-modal-lg" id="grafico_matriz_modal" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
                <div class="modal-dialog modal-lg">
                    <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="">Gráfico Matriz</h5>     
                    </div>
                        <div class="text-center">
                            <img src="{{asset('images/ventas_grafico_matriz.png')}}" class="img-fluid" alt="Responsive image">
                        </div>
                        <!-- add div for text -->
                        <p><b>Consultas sobre el gráfico:</b> Para utilizar el gráfico; definir los parámetros en los selectores y presionar "Actualizar".</p>
                        <ul>
                            <li><b>Selector Variable:</b> Seleccionar parámetro principal del gráfico.</li>
                            <li><b>Selector Valor Salida:</b> Seleccionar tipo de unidad sobre la que se consulta.</li>
                            <li><b>Selector Participación:</b> Definir el alcance de la participación de la variable elegida.</li>
                            <li><b>Selector Periodo:</b> Definir el periodo sobre el que se consulta.</li>
                        </ul>
                        <p><b>Detalles:</b> Pasar el cursor por el gráfico entregará detalles sobre lo que se esta representando.</p>

                        <p><b>Filtros Rápidos:</b> Marcar las opciones a filtrar en cada selector.</p>
                        <ul>
                            <li><b>Selector Cliente:</b> Filtrar por cliente.</li>
                            <li><b>Selector Categoría:</b> Filtrar por Categoría    .</li>
                            <li><b>Selector KAM:</b> Filtrar por <i>Key Account Manager</i>.</li>
                        </ul>
                        <p><b>Exportar:</b> Descargar una imagen del gráfico.</p>
                    </div>
                </div>
            </div>

        </x-grafico>
        @php $display_grafico = 'display: none;'; @endphp
    @endif

    @if(isset($selectores_grafico['grafvar']))
        <x-grafico id="grafvar" style="height: 450px !important; {{$display_grafico}}" :filtros="$filtros" :filtrosAv="$filtrosAv" :filtrosAvAlias="$filtrosAvAlias">
            <x-selector-generico id="salida_grafvardefault2" idselect="salida_grafvardefault" :salida="$salida_default"  class="selector-generico d-none" style="width: 120px;">
                <x-slot name="texto">
                    {{__('messages.selector-generico-texto-valor')}}
                </x-slot>
            </x-selector-generico>

            <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="" modal="grafico_variacion_modal"/>
            <div class="modal fade bd-example-modal-lg" id="grafico_variacion_modal" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
                <div class="modal-dialog modal-lg">
                    <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="">Gráfico Variación</h5>     
                    </div>
                        <div class="text-center">
                            <img src="{{asset('images/ventas_grafico_variacion.png')}}" class="img-fluid" alt="Responsive image">
                        </div>
                        <!-- add div for text -->
                        <p><b>Consultas sobre el gráfico:</b> Para utilizar el gráfico; definir los parámetros en los selectores y presionar "Actualizar".</p>
                        <ul>
                            <li><b>Selector Valor Salida:</b> Seleccionar tipo de unidad sobre la que se consulta.</li>
                            <li><b>Selector Periodo:</b> Definir el periodo sobre el que se consulta.</li>
                        </ul>
                        <p><b>Detalles:</b> Pasar el cursor por el gráfico entregará detalles sobre lo que se esta representando.</p>

                        <p><b>Filtros Rápidos:</b> Marcar las opciones a filtrar en cada selector.</p>
                        <ul>
                            <li><b>Selector Cliente:</b> Filtrar por cliente.</li>
                            <li><b>Selector Categoría:</b> Filtrar por Categoría    .</li>
                            <li><b>Selector KAM:</b> Filtrar por <i>Key Account Manager</i>.</li>
                        </ul>
                        <p><b>Exportar:</b> Descargar una imagen del gráfico.</p>
                    </div>
                </div>
            </div>

        </x-grafico>
        @php $display_grafico = 'display: none;'; @endphp
    @endif
@endsection
@endif

@if(count($selectores_tabla)>0)
@section('tabla')
@if ($cliente == "siksa")
<div style="padding: 5px 16px;overflow: hidden;background-color: lightblue;text-align: center;"><p>Para la descarga en excel el separador de decimal esta representado por una coma</p></div>
@endif 
    @if(isset($selectores_tabla['comp']))
        <x-tabla id="comp" style="height: 600px !important; {{$display_tabla}}" :filtros="$filtros" :filtrosAv="$filtrosAv" :filtrosAvAlias="$filtrosAvAlias">
            <x-selector-variable id="variables_comp" :lista='$variables' selected='2-0' cliente='$cliente'/>
            
            <x-selector-generico id="f_tmp_comp2" idselect="f_tmp_comp" :salida="$periodo_comp"  class="selector-generico" style="width: 120px;" selected="{{$tipo_periodo}}">
                <x-slot name="texto" >
                    {{__('messages.selector-generico-texto-periodo')}}
                </x-slot>
            </x-selector-generico>
            <x-selector-generico id="salida_comp2" idselect="salida_comp" :salida="$salida_default"  class="selector-generico" style="width: 120px;display:none" selected="{{$salida_siksa}}">
            
            </x-selector-generico>

            <x-selector-semanas id="fltr_sem_comp" idselect="f_sem_comp_ini" :semanas="$semanasComp" class="fltr_periodo_comp" style="display: none;">
                <x-slot name="texto">
                    {{__('messages.selector-semanas-meses-texto-desde')}}
                </x-slot>
            </x-selector-semanas>
            <x-selector-semanas id="fltr_sem_comp2" idselect="f_sem_comp_fin" :semanas="$semanasComp" class="fltr_periodo_comp" style="display: none;">
                <x-slot name="texto">
                    {{__('messages.selector-semanas-meses-texto-hasta')}}
                </x-slot>
            </x-selector-semanas>
            <x-selector-meses id="fltr_mes_comp" idselect="f_mes_comp_ini" :meses="$mesesComp" class="fltr_periodo_comp" style="display: {{$display_}};">
                <x-slot name="texto">
                    {{__('messages.selector-semanas-meses-texto-desde')}}
                </x-slot>
            </x-selector-meses>
            <x-selector-meses id="fltr_mes_comp2" idselect="f_mes_comp_fin" :meses="$mesesComp" class="fltr_periodo_comp" style="display: {{$display_}};">
                <x-slot name="texto">
                    {{__('messages.selector-semanas-meses-texto-hasta')}}
                </x-slot>
            </x-selector-meses>

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

            @if(in_array($cliente, $arr_dos_periodos))
                <x-selector-dias idpadre="compf" style="display: none;"/>

                <x-selector-semanas id="fltr_sem_compf" idselect="f_sem_compf_ini" :semanas="$semanasComp" class="fltr_periodo_compf" style="display: none;">
                    <x-slot name="texto">
                        {{__('messages.selector-semanas-meses-texto-desde')}}
                    </x-slot>
                </x-selector-semanas>
                <x-selector-semanas id="fltr_sem_compf2" idselect="f_sem_compf_fin" :semanas="$semanasComp" class="fltr_periodo_compf" style="display: none;">
                    <x-slot name="texto">
                        {{__('messages.selector-semanas-meses-texto-hasta')}}
                    </x-slot>
                </x-selector-semanas>
                <x-selector-meses id="fltr_mes_compf" idselect="f_mes_compf_ini" :meses="$mesesComp" class="fltr_periodo_compf" style="display: {{$display_}};">
                    <x-slot name="texto">
                        {{__('messages.selector-semanas-meses-texto-desde')}}
                    </x-slot>
                </x-selector-meses>
                <x-selector-meses id="fltr_mes_compf2" idselect="f_mes_compf_fin" :meses="$mesesComp" class="fltr_periodo_compf" style="display: {{$display_}};">
                    <x-slot name="texto">
                        {{__('messages.selector-semanas-meses-texto-hasta')}}
                    </x-slot>
                </x-selector-meses>
            @endif

            @if ($cliente == "oriental")
                <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_agru_comp" value="first_checkbox" style="margin-right: 5px"> Agrupar
                    </label>
                </div>
            @endif

            <x-boton-actualizar onclick="getComp('{{$cliente}}', 'ecom')"/>
            <x-infobox tamano="25px" texto="" modal="tabla_comparativo_modal"/>
            <div class="modal fade bd-example-modal-lg" id="tabla_comparativo_modal" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
                <div class="modal-dialog modal-lg">
                    <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="">Tabla Comparativo</h5>     
                    </div>
                        <!-- Center a image from ../public/images/ventas_tabla_matriz.png -->
                        <div class="text-center">
                            <img src="{{asset('images/ventas_tabla_comparativo.png')}}" class="img-fluid" alt="Responsive image">
                        </div>
                        <!-- add div for text -->
                        <p><b>Consultas sobre la tabla:</b> Para utilizar la tabla; definir los parámetros en los selectores y presionar "Actualizar".</p>
                        <ul>
                            <li><b>Selector Variable:</b> Definir Variable en filas de la tabla.</li>
                            <li><b>Selector Valor Salida:</b> Seleccionar tipo de unidad sobre la que se consulta.</li>
                            <li><b>Selector Tipo Periodo:</b> Definir el tipo de periodo que se consulta.</li>
                            <li><b>Selector Periodo:</b> Definir el rango de fechas que se consulta.</li>
                        </ul>
                        <p><b>Ordenar:</b> Clickear en los encabezados de las columnas ordenará los registros de la tabla en orden descendiente según lo que representa esa columna. Clickear nuevamente ordenará los registros en orden ascendente.</p>
                        <p><b>Fila y Columna Total (Títulos de variables seleccionadas):</b> Valores calculados tomando todos los registros.</p>
                        <p><b>Filtros Rápidos:</b> Marcar las opciones a filtrar en cada selector.</p>
                        <ul>
                            <li><b>Selector Cliente:</b> Filtrar por cliente.</li>
                            <li><b>Selector Categoría:</b> Filtrar por Categoría    .</li>
                            <li><b>Selector KAM:</b> Filtrar por <i>Key Account Manager</i>.</li>
                        </ul>
                        <p><b>Exportar:</b> Descargar datos de las tabla.</p>
                    </div>
                </div>
            </div>

        </x-tabla>
        @php $display_tabla = ' display: none;'; @endphp
    @endif

    @if(isset($selectores_tabla['comparativo']))
        <x-tabla id="comparativo" style="height: 600px !important; {{$display_tabla}}" :filtros="$filtros" :filtrosAv="$filtrosAv" :filtrosAvAlias="$filtrosAvAlias">
            <x-selector-variable id="variables_comparativo" :lista='$variables' selected='2-0' cliente='$cliente'/>
            
            <x-selector-generico id="f_tmp_comparativo2" idselect="f_tmp_comparativo" :salida="$periodo_comparativo"  class="selector-generico" style="width: 120px" selected="{{$tipo_periodo}}">
                <x-slot name="texto">
                    {{__('messages.selector-generico-texto-periodo')}}
                </x-slot>
            </x-selector-generico>
            <x-selector-generico id="salida_comparativo2" idselect="salida_comparativo" :salida="$salida"  class="selector-generico" style="width: 120px;display:none">
            
            </x-selector-generico>

            <x-selector-semanas id="fltr_sem_comparativo" idselect="f_sem_comparativo_ini" :semanas="$semanasComp" class="fltr_periodo_comparativo" style="display: none;">
                <x-slot name="texto">
                    {{__('messages.selector-generico-texto-periodo')}}
                </x-slot>
            </x-selector-semanas>
            <x-selector-semanas id="fltr_sem_comparativo2" idselect="f_sem_comparativo_fin" :semanas="$semanasComp" class="fltr_periodo_comparativo" style="display: none;">
                <x-slot name="texto">
                    {{__('messages.selector-semanas-meses-texto-hasta')}}
                </x-slot>
            </x-selector-semanas>
            <x-selector-meses id="fltr_mes_comparativo" idselect="f_mes_comparativo_ini" :meses="$mesesComp" class="fltr_periodo_comparativo" style="display: {{$display_}};">
                <x-slot name="texto">
                    {{__('messages.selector-semanas-meses-texto-desde')}}
                </x-slot>
            </x-selector-meses>
            <x-selector-meses id="fltr_mes_comparativo2" idselect="f_mes_comparativo_fin" :meses="$mesesComp" class="fltr_periodo_comparativo" style="display: {{$display_}};">
                <x-slot name="texto">
                    {{__('messages.selector-semanas-meses-texto-hasta')}}
                </x-slot>
            </x-selector-meses>
            <x-selector-dias idpadre="comparativo" style="display: none;"/>
          

            <x-boton-actualizar onclick="getComparativo('{{$cliente}}', 'ventas')"/>

            <x-infobox tamano="25px" texto="" modal="tabla_comparativo_modal"/>
            <div class="modal fade bd-example-modal-lg" id="tabla_comparativo_modal" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
                <div class="modal-dialog modal-lg">
                    <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="exampleModalLabel">Tabla Comparativo</h5>     
                    </div>
                        <!-- Center a image from ../public/images/ventas_tabla_matriz.png -->
                        <div class="text-center">
                            <img src="{{asset('images/ventas_tabla_comparativo.png')}}" class="img-fluid" alt="Responsive image">
                        </div>
                        <!-- add div for text -->
                        <p><b>Consultas sobre la tabla:</b> Para utilizar la tabla; definir los parámetros en los selectores y presionar "Actualizar".</p>
                        <ul>
                            <li><b>Selector Variable Filas:</b> Definir Variable en filas de la tabla.</li>
                            <li><b>Selector Tipo Periodo:</b> Definir el tipo de periodo que se consulta.</li>
                            <li><b>Selector Periodo:</b> Definir el rango de fechas que se consulta.</li>
                        </ul>
                        <p><b>Ordenar:</b> Clickear en los encabezados de las columnas ordenará los registros de la tabla en orden descendiente según lo que representa esa columna. Clickear nuevamente ordenará los registros en orden ascendente.</p>
                        <p><b>Fila y Columna Total (Títulos de variables seleccionadas):</b> Valores calculados tomando todos los registros.</p>
                        <p><b>Filtros Rápidos:</b> Marcar las opciones a filtrar en cada selector.</p>
                        <ul>
                            <li><b>Selector Cliente:</b> Filtrar por cliente.</li>
                            <li><b>Selector Categoría:</b> Filtrar por Categoría    .</li>
                            <li><b>Selector KAM:</b> Filtrar por <i>Key Account Manager</i>.</li>
                        </ul>
                        <p><b>Exportar:</b> Descargar datos de las tabla.</p>
                    </div>
                </div>
            </div>
        </x-tabla>
        @php $display_tabla = 'display: none;'; @endphp
    @endif

    @if(isset($selectores_tabla['evo']))
        <x-tabla id="evo" style="height: 600px !important; {{$display_tabla}}" :filtros="$filtros" :filtrosAv="$filtrosAv" :filtrosAvAlias="$filtrosAvAlias">
            <x-selector-variable id="variables_evo" :lista='$variables' selected="2-5" cliente='$cliente'/>
            <x-selector-variable id="variables_evo2" :lista='$variables_2' selected="" cliente='$cliente'/>

            <x-selector-generico id="salida_evo2" idselect="salida_evo" :salida="$salida_evo"  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_tmp_evo2" idselect="f_tmp_evo" :salida="$periodo"  class="selector-generico" style="width: 120px" selected="{{$tipo_periodo_}}">
                <x-slot name="texto">
                    {{__('messages.selector-generico-texto-periodo')}}
                </x-slot>
            </x-selector-generico>
            <x-selector-dias style="display: none;" idpadre="evo"/>

            
            <!--EVOLUTVO SEMANA-->
            <x-selector-semanas id="fltr_sem_evo" idselect="f_sem_evo_ini" :semanas="$semanas"  class="fltr_periodo_evo" style="display: none;">
                <x-slot name="texto">
                    {{__('messages.selector-semanas-meses-texto-desde')}}
                </x-slot>
            </x-selector-semanas>
            <x-selector-semanas id="fltr_sem_evo2" idselect="f_sem_evo_fin" :semanas="$semanas" class="fltr_periodo_evo" 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_evo" idselect="f_mes_evo_ini" :meses="$meses" class="fltr_periodo_evo" style="display: {{$display}};">
                <x-slot name="texto">
                    {{__('messages.selector-semanas-meses-texto-desde')}}
                </x-slot>
            </x-selector-meses>
            <x-selector-meses id="fltr_mes_evo2" idselect="f_mes_evo_fin" :meses="$meses" class="fltr_periodo_evo" style="display: {{$display}};">
                <x-slot name="texto">
                    {{__('messages.selector-semanas-meses-texto-hasta')}}
                </x-slot>
            </x-selector-meses>
            <!--AÑO-->
            <div id="fltr_year_evo" style="width:120px; display:none;" class="fltr_periodo_evo col-md-auto 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_evo_ini" name="f_year_evo_ini" class="flt form-control select2 " data-toggle="select2" width="100%">
                        <option value="202001">2020</option>
                        <option value="202101">2021</option>
                    </select>
                </label>
            </div>
            <div id="fltr_year_evo2" style="width:120px; display:none;" class="fltr_periodo_evo col-md-auto 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_evo_fin" name="f_year_evo_fin" class="flt form-control select2 " data-toggle="select2" width="100%">
                        <option value="202053">2020</option>
                        <option value="202153">2021</option>
                    </select>
                </label>
            </div>
            <x-boton-actualizar onclick="getEvo('{{$cliente}}', 'ventas');"/>

            <x-infobox tamano="25px" texto="" modal="tabla_evolutivo_modal"/>
            <div class="modal fade bd-example-modal-lg" id="tabla_evolutivo_modal" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
                <div class="modal-dialog modal-lg">
                    <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="exampleModalLabel">Tabla Evolutivo</h5>     
                    </div>
                        <!-- Center a image from ../public/images/ventas_tabla_matriz.png -->
                        <div class="text-center">
                            <img src="{{asset('images/ventas_tabla_matriz.png')}}" class="img-fluid" alt="Responsive image">
                        </div>
                        <!-- add div for text -->
                        <p><b>Consultas sobre la tabla:</b> Para utilizar la tabla; definir los parámetros en los selectores y presionar "Actualizar".</p>
                        <ul>
                            <li><b>Selector Variable:</b> Definir Variable en filas de la tabla.</li>
                            <li><b>Selector Valor Salida:</b> Seleccionar tipo de unidad sobre la que se consulta.</li>
                            <li><b>Selector Tipo Periodo:</b> Definir el tipo de periodo que se consulta.</li>
                            <li><b>Selector Periodo:</b> Definir el rango de fechas que se consulta.</li>
                            <li><b>Limitaciones:</b> 12 Meses, 52 Semanas o 45 Días para combinaciones Producto-Local.</li>
                        </ul>
                        <p><b>Ordenar:</b> Clickear en los encabezados de las columnas ordenará los registros de la tabla en orden descendiente según lo que representa esa columna. Clickear nuevamente ordenará los registros en orden ascendente.</p>
                        <p><b>Fila y Columna Total (Títulos de variables seleccionadas):</b> Valores calculados tomando todos los registros.</p>
                        <p><b>Filtros Rápidos:</b> Marcar las opciones a filtrar en cada selector.</p>
                        <ul>
                            <li><b>Selector Cliente:</b> Filtrar por cliente.</li>
                            <li><b>Selector Categoría:</b> Filtrar por Categoría    .</li>
                            <li><b>Selector KAM:</b> Filtrar por <i>Key Account Manager</i>.</li>
                        </ul>
                        <p><b>Exportar:</b> Descargar datos de las tabla.</p>
                    </div>
                </div>
            </div>
        </x-tabla>
        @php $display_tabla = 'display: none;'; @endphp
    @endif

    @if(isset($selectores_tabla['evo_sell_in']))
        <x-tabla id="evo_sell_in" style="height: 600px !important; {{$display_tabla}}" :filtros="$filtros" :filtrosAv="$filtrosAv" :filtrosAvAlias="$filtrosAvAlias">
            <x-selector-variable id="variables_evo_sell_in" :lista='$variables' selected="2-5" cliente='$cliente'/>
            <x-selector-variable id="variables_evo2_sell_in" :lista='$variables_2' selected="" cliente='$cliente'/>

            <x-selector-generico id="salida_evo2_sell_in" idselect="salida_evo_sell_in" :salida="$salida"  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_tmp_evo2_sell_in" idselect="f_tmp_evo_sell_in" :salida="$periodo"  class="selector-generico" style="width: 120px" selected="{{$tipo_periodo_}}">
                <x-slot name="texto">
                    {{__('messages.selector-generico-texto-periodo')}}
                </x-slot>
            </x-selector-generico>
            <x-selector-dias style="display: none;" idpadre="evo_sell_in"/>

            
            <!--EVOLUTVO SEMANA-->
            <x-selector-semanas id="fltr_sem_evo_sell_in" idselect="f_sem_evo_sell_in_ini" :semanas="$semanas"  class="fltr_periodo_evo" style="display: none;">
                <x-slot name="texto">
                    {{__('messages.selector-semanas-meses-texto-desde')}}
                </x-slot>
            </x-selector-semanas>
            <x-selector-semanas id="fltr_sem_evo2_sell_in" idselect="f_sem_evo_sell_in_fin" :semanas="$semanas" class="fltr_periodo_evo" 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_evo_sell_in" idselect="f_mes_evo_sell_in_ini" :meses="$meses" class="fltr_periodo_evo" style="display: {{$display}};">
                <x-slot name="texto">
                    {{__('messages.selector-semanas-meses-texto-desde')}}
                </x-slot>
            </x-selector-meses>
            <x-selector-meses id="fltr_mes_evo2_sell_in" idselect="f_mes_evo_sell_in_fin" :meses="$meses" class="fltr_periodo_evo" style="display: {{$display}};">
                <x-slot name="texto">
                    {{__('messages.selector-semanas-meses-texto-hasta')}}
                </x-slot>
            </x-selector-meses>
            <!--AÑO-->
            <div id="fltr_year_evo_sell_in" style="width:120px; display:none;" class="fltr_periodo_evo col-md-auto 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_evo_ini_sell_in" name="f_year_evo_sell_in_ini" class="flt form-control select2 " data-toggle="select2" width="100%">
                        <option value="202001">2020</option>
                        <option value="202101">2021</option>
                    </select>
                </label>
            </div>
            <div id="fltr_year_evo2_sell_in" style="width:120px; display:none;" class="fltr_periodo_evo col-md-auto 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_evo_fin_sell_in" name="f_year_evo_sell_in_fin" class="flt form-control select2 " data-toggle="select2" width="100%">
                        <option value="202053">2020</option>
                        <option value="202153">2021</option>
                    </select>
                </label>
            </div>
            <x-boton-actualizar onclick="getEvo_sell_in('{{$cliente}}', 'ventas');"/>
        
            <x-infobox tamano="25px" texto="" modal="tabla_evolutivo2_modal"/>
            <div class="modal fade bd-example-modal-lg" id="tabla_evolutivo2_modal" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
                <div class="modal-dialog modal-lg">
                    <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="exampleModalLabel">Tabla Evolutivo</h5>     
                    </div>
                        <!-- Center a image from ../public/images/ventas_tabla_matriz.png -->
                        <div class="text-center">
                            <img src="{{asset('images/ventas_tabla_matriz.png')}}" class="img-fluid" alt="Responsive image">
                        </div>
                        <!-- add div for text -->
                        <p><b>Consultas sobre la tabla:</b> Para utilizar la tabla; definir los parámetros en los selectores y presionar "Actualizar".</p>
                        <ul>
                            <li><b>Selector Variable:</b> Definir Variable en filas de la tabla.</li>
                            <li><b>Selector Valor Salida:</b> Seleccionar tipo de unidad sobre la que se consulta.</li>
                            <li><b>Selector Tipo Periodo:</b> Definir el tipo de periodo que se consulta.</li>
                            <li><b>Selector Periodo:</b> Definir el rango de fechas que se consulta.</li>
                        </ul>
                        <p><b>Ordenar:</b> Clickear en los encabezados de las columnas ordenará los registros de la tabla en orden descendiente según lo que representa esa columna. Clickear nuevamente ordenará los registros en orden ascendente.</p>
                        <p><b>Fila y Columna Total (Títulos de variables seleccionadas):</b> Valores calculados tomando todos los registros.</p>
                        <p><b>Filtros Rápidos:</b> Marcar las opciones a filtrar en cada selector.</p>
                        <ul>
                            <li><b>Selector Cliente:</b> Filtrar por cliente.</li>
                            <li><b>Selector Categoría:</b> Filtrar por Categoría    .</li>
                            <li><b>Selector KAM:</b> Filtrar por <i>Key Account Manager</i>.</li>
                        </ul>
                        <p><b>Exportar:</b> Descargar datos de las tabla.</p>
                    </div>
                </div>
            </div>

        </x-tabla>
        @php $display_tabla = 'display: none;'; @endphp
    @endif

    @if(isset($selectores_tabla['matri']))
        <x-tabla id="matri" style="height: 600px !important; {{$display_tabla}}" :filtros="$filtros" :filtrosAv="$filtrosAv" :filtrosAvAlias="$filtrosAvAlias">
            <x-selector-variable id="variables_matri1" :lista='$variables' selected="1-5" cliente='$cliente'>
                <x-slot name="titulo">
                    {{__('messages.selector-variable-texto-fila')}}
                </x-slot>
            </x-selector-variable>
            <x-selector-variable id="variables_matri2" :lista='$variables' selected="2-5" cliente='$cliente'>
                <x-slot name="titulo">
                    {{__('messages.selector-variable-texto-columna')}}
                </x-slot>
            </x-selector-variable>
            
            <x-selector-generico id="salida_matri2" idselect="salida_matri" :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_tmp_matri2" idselect="f_tmp_matri" :salida="$periodo_matri"  class="selector-generico" style="width: 120px" selected="{{$tipo_periodo}}">
                <x-slot name="texto">
                    {{__('messages.selector-generico-texto-periodo')}}
                </x-slot>
            </x-selector-generico>

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

            <!--EVOLUTVO SEMANA-->
            <x-selector-semanas id="fltr_sem_matri" idselect="f_sem_matri_ini" :semanas="$semanas"  class="fltr_periodo_matri" style="display: none;">
                <x-slot name="texto">
                    {{__('messages.selector-semanas-meses-texto-desde')}}
                </x-slot>
            </x-selector-semanas>
            <x-selector-semanas id="fltr_sem_matri2" idselect="f_sem_matri_fin" :semanas="$semanas" class="fltr_periodo_matri" 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_matri" idselect="f_mes_matri_ini" :meses="$meses" class="fltr_periodo_matri" style="display: {{$display_}};">
                <x-slot name="texto">
                    {{__('messages.selector-semanas-meses-texto-desde')}}
                </x-slot>
            </x-selector-meses>
            <x-selector-meses id="fltr_mes_matri2" idselect="f_mes_matri_fin" :meses="$meses" class="fltr_periodo_matri" style="display: {{$display_}};">
                <x-slot name="texto">
                    {{__('messages.selector-semanas-meses-texto-hasta')}}
                </x-slot>
            </x-selector-meses>
            <!--AÑO-->
            <div id="fltr_year_matri" style="width:120px;display:none;" class="fltr_periodo_matri 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_matri_ini" name="f_year_matri_ini" class="flt form-control select2 " data-toggle="select2" width="100%">
                        <option value="{{date("Y")."01"-100}}">{{date("Y")-1}}</option>
                        <option value="{{date("Y")."01"}}">{{date("Y")}}</option>
                    </select>
                </label>
            </div>
            <div id="fltr_year_matri2" style="width:120px;display:none;" class="fltr_periodo_matri 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_matri_fin" name="f_year_matri_fin" class="flt form-control select2 " data-toggle="select2" width="100%">
                        <option value="{{date("Y")-1}}53">{{date("Y")-1}}</option>
                        <option value="{{date("Y")}}53">{{date("Y")}}</option>
                    </select>
                </label>
            </div>
            {{-- Este selector solo aparece cuando se seleciona tienda/store en la tabla matriz --}}
            <x-selector-generico2 id="f_orden_locales2" idselect="f_orden_locales" :salida="$locales" class="selector-generico d-none" style="max-width: 200px; min-width: 120px;">
                <x-slot name="texto">
                    Rango de Locales por Ventas
                </x-slot>
            </x-selector-generico>
            <x-boton-actualizar onclick="getMatri('{{$cliente}}', 'ventas');"/>
            <x-infobox tamano="25px" texto="{{__('messages.texto-infobox')}}" modal="tabla_matriz_modal"/>
            <div class="modal fade bd-example-modal-lg" id="tabla_matriz_modal" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
                <div class="modal-dialog modal-lg">
                    <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="exampleModalLabel">Tabla Matriz</h5>     
                    </div>
                        <!-- Center a image from ../public/images/ventas_tabla_matriz.png -->
                        <div class="text-center">
                            <img src="{{asset('images/ventas_tabla_matriz.png')}}" class="img-fluid" alt="Responsive image">
                        </div>
                        <!-- add div for text -->
                        <p><b>Consultas sobre la tabla:</b> Para utilizar la tabla; definir los parámetros en los selectores y presionar "Actualizar".</p>
                        <ul>
                            <li><b>Selector Variable Filas:</b> Definir Variable en filas de la tabla.</li>
                            <li><b>Selector Variable Columnas:</b> Definir Variable en columnas de la tabla.</li>
                            <li><b>Selector Valor Salida:</b> Seleccionar tipo de unidad sobre la que se consulta.</li>
                            <li><b>Selector Pareto:</b> Definir la distribución de los datos.
                                <ul style="list-style-type: circle;">
                                    <li><b>80 / 20:</b> Mayores valores que acumulan el 80%.</li>
                                    <li><b>20 / 80:</b> Menores valores que acumulan el 20%,</li>
                                    <li><b>Todos:</b> Todos los valores.</li>
                                </ul>
                            </li>
                            <li><b>Selector Tipo Periodo:</b> Definir el tipo de periodo que se consulta.</li>
                            <li><b>Selector Periodo:</b> Definir el rango de fechas que se consulta.</li>
                        </ul>
                        <p><b>Ordenar:</b> Clickear en los encabezados de las columnas ordenará los registros de la tabla en orden descendiente según lo que representa esa columna. Clickear nuevamente ordenará los registros en orden ascendente.</p>
                        <p><b>Fila y Columna Total (Títulos de variables seleccionadas):</b> Valores calculados tomando todos los registros.</p>
                        <p><b>Filtros Rápidos:</b> Marcar las opciones a filtrar en cada selector.</p>
                        <ul>
                            <li><b>Selector Cliente:</b> Filtrar por cliente.</li>
                            <li><b>Selector MFF:</b> Filtrar por MFF.</li>
                            <li><b>Selector KAM:</b> Filtrar por <i>Key Account Manager</i>.</li>
                        </ul>
                        <p><b>Exportar:</b> Descargar datos de las tabla.</p>
                    </div>
                </div>
            </div>
        </x-tabla>
        @php $display_tabla = 'display: none;'; @endphp
    @endif

    @if(isset($selectores_tabla['vcomuna']))
        <x-tabla id="vcomuna" style="height: 600px !important; {{$display_tabla}}" :filtros="$filtros" :filtrosAv="$filtrosAv" :filtrosAvAlias="$filtrosAvAlias">
            <x-selector-variable id="variables_vcomuna1" :lista='$variables' selected="1-5" cliente='$cliente' style="display:none;">
                <x-slot name="titulo">
                    {{__('messages.selector-variable-texto-fila')}}
                </x-slot>
            </x-selector-variable>
            <x-selector-variable id="variables_vcomuna2" :lista='$variables' selected="2-5" cliente='$cliente' style="display:none;">
                <x-slot name="titulo">
                    {{__('messages.selector-variable-texto-columna')}}
                </x-slot>
            </x-selector-variable>
            
            <x-selector-generico id="salida_vcomuna2" idselect="salida_vcomuna" :salida="$salida_vcomuna"  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_tmp_vcomuna2" idselect="f_tmp_vcomuna" :salida="$periodo_vcomuna"  class="selector-generico" style="width: 120px" selected="{{$tipo_periodo}}">
                <x-slot name="texto">
                    {{__('messages.selector-generico-texto-periodo')}}
                </x-slot>
            </x-selector-generico>

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

            <!--EVOLUTVO SEMANA-->
            <x-selector-semanas id="fltr_sem_vcomuna" idselect="f_sem_vcomuna_ini" :semanas="$semanas"  class="fltr_periodo_vcomuna" style="display: none;">
                <x-slot name="texto">
                    {{__('messages.selector-semanas-meses-texto-desde')}}
                </x-slot>
            </x-selector-semanas>
            <x-selector-semanas id="fltr_sem_vcomuna2" idselect="f_sem_vcomuna_fin" :semanas="$semanas" class="fltr_periodo_vcomuna" style="display: none;">
                <x-slot name="texto">
                    {{__('messages.selector-semanas-meses-texto-hasta')}}
                </x-slot>
            </x-selector-semanas>
            <!--MES-->
            <x-selector-meses id="fltr_mes_vcomuna" idselect="f_mes_vcomuna_ini" :meses="$meses" class="fltr_periodo_vcomuna" style="display: none;">
                <x-slot name="texto">
                    {{__('messages.selector-semanas-meses-texto-desde')}}
                </x-slot>
            </x-selector-meses>
            <x-selector-meses id="fltr_mes_vcomuna2" idselect="f_mes_vcomuna_fin" :meses="$meses" class="fltr_periodo_vcomuna" style="display: none;">
                <x-slot name="texto">
                    {{__('messages.selector-semanas-meses-texto-hasta')}}
                </x-slot>
            </x-selector-meses>
            <!--AÑO-->
            <div id="fltr_year_vcomuna" style="width:120px; display:none;" class="fltr_periodo_vcomuna col-md-auto 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_vcomuna_ini" name="f_year_vcomuna_ini" class="flt form-control select2 " data-toggle="select2" width="100%">
                        <option value="{{date("Y")-1}}01">{{date("Y")-1}}</option>
                        <option value="{{date("Y")}}01">{{date("Y")}}</option>
                    </select>
                </label>
            </div>
            <div id="fltr_year_vcomuna2" style="width:120px; display:none;" class="fltr_periodo_vcomuna col-md-auto 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_vcomuna_fin" name="f_year_vcomuna_fin" class="flt form-control select2 " data-toggle="select2" width="100%">
                        <option value="{{date("Y")-1}}53">{{date("Y")-1}}</option>
                        <option value="{{date("Y")}}53">{{date("Y")}}</option>
                    </select>
                </label>
            </div>
            {{-- Este selector solo aparece cuando se seleciona tienda/store en la tabla vcomunaz --}}
            <x-selector-generico2 id="f_orden_locales2" idselect="f_orden_locales" :salida="$locales" class="selector-generico d-none" style="max-width: 200px; min-width: 120px;">
                <x-slot name="texto">
                    Rango de Locales por Ventas
                </x-slot>
            </x-selector-generico>
            <x-boton-actualizar onclick="getComuna('{{$cliente}}', 'ventas');"/>
            <x-infobox tamano="25px" texto="{{__('messages.texto-infobox')}}" modal="tabla_vcomunaz_modal"/>
            <div class="modal fade bd-example-modal-lg" id="tabla_vcomunaz_modal" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
                <div class="modal-dialog modal-lg">
                    <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="exampleModalLabel">Tabla comunas</h5>     
                    </div>
                        <!-- Center a image from ../public/images/ventas_tabla_vcomunaz.png -->
                        <div class="text-center">
                            <img src="{{asset('images/ventas_tabla_matriz.png')}}" class="img-fluid" alt="Responsive image">
                        </div>
                        <!-- add div for text -->
                        <p><b>Consultas sobre la tabla:</b> Para utilizar la tabla; definir los parámetros en los selectores y presionar "Actualizar".</p>
                        <ul>
                            <li><b>Selector Variable Filas:</b> Definir Variable en filas de la tabla.</li>
                            <li><b>Selector Variable Columnas:</b> Definir Variable en columnas de la tabla.</li>
                            <li><b>Selector Valor Salida:</b> Seleccionar tipo de unidad sobre la que se consulta.</li>
                            <li><b>Selector Pareto:</b> Definir la distribución de los datos.
                                <ul style="list-style-type: circle;">
                                    <li><b>80 / 20:</b> Mayores valores que acumulan el 80%.</li>
                                    <li><b>20 / 80:</b> Menores valores que acumulan el 20%,</li>
                                    <li><b>Todos:</b> Todos los valores.</li>
                                </ul>
                            </li>
                            <li><b>Selector Tipo Periodo:</b> Definir el tipo de periodo que se consulta.</li>
                            <li><b>Selector Periodo:</b> Definir el rango de fechas que se consulta.</li>
                        </ul>
                        <p><b>Ordenar:</b> Clickear en los encabezados de las columnas ordenará los registros de la tabla en orden descendiente según lo que representa esa columna. Clickear nuevamente ordenará los registros en orden ascendente.</p>
                        <p><b>Fila y Columna Total (Títulos de variables seleccionadas):</b> Valores calculados tomando todos los registros.</p>
                        <p><b>Filtros Rápidos:</b> Marcar las opciones a filtrar en cada selector.</p>
                        <ul>
                            <li><b>Selector Cliente:</b> Filtrar por cliente.</li>
                            <li><b>Selector MFF:</b> Filtrar por MFF.</li>
                            <li><b>Selector KAM:</b> Filtrar por <i>Key Account Manager</i>.</li>
                        </ul>
                        <p><b>Exportar:</b> Descargar datos de las tabla.</p>
                    </div>
                </div>
            </div>
        </x-tabla>
        @php $display_tabla = 'display: none;'; @endphp
    @endif

    @if(isset($selectores_tabla['mec3meses']))
        <x-tabla id="mec3meses" style="height: 600px !important; {{$display_tabla}}" :filtros="$filtros" :filtrosAv="$filtrosAv" :filtrosAvAlias="$filtrosAvAlias">
            <x-selector-variable id="variables_mec3meses1" :lista='$variables' selected="4-3" cliente='$cliente'>
                <x-slot name="titulo">
                    {{__('messages.selector-variable-texto-fila')}}
                </x-slot>
            </x-selector-variable>
       
            <x-selector-generico id="salida_mec3meses2" idselect="salida_mec3meses" :salida="$salida_mec3meses"  class="selector-generico" style="width: 120px">
                <x-slot name="texto">
                    {{__('messages.selector-generico-texto-valor')}}
                </x-slot>
            </x-selector-generico>

            <x-selector-meses id="fltr_mes_mec3meses" idselect="f_mes_mec3meses_ini" :meses="$meses" class="fltr_periodo_mec3meses">
                <x-slot name="texto">
                    Mes
                </x-slot>
            </x-selector-meses>

            {{-- Este selector solo aparece cuando se seleciona tienda/store en la tabla mec3mesesz --}}
            <x-selector-generico2 id="f_orden_locales2" idselect="f_orden_locales" :salida="$locales" class="selector-generico d-none" style="max-width: 200px; min-width: 120px;">
                <x-slot name="texto">
                    Rango de Locales por Ventas
                </x-slot>
            </x-selector-generico>
            <x-boton-actualizar onclick="getmec3meses('{{$cliente}}', 'ventas');"/>
            <x-infobox tamano="25px" texto="{{__('messages.texto-infobox')}}" modal="tabla_mec3meses_modal"/>
            <div class="modal fade bd-example-modal-lg" id="tabla_mec3meses_modal" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
                <div class="modal-dialog modal-lg">
                    <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="exampleModalLabel">Tabla mec3meses</h5>     
                    </div>
                        <!-- Center a image from ../public/images/ventas_tabla_mec3mesesz.png -->
                        <div class="text-center">
                            <img src="{{asset('images/ventas_tabla_matriz.png')}}" class="img-fluid" alt="Responsive image">
                        </div>
                        <!-- add div for text -->
                        <p><b>Consultas sobre la tabla:</b> Para utilizar la tabla; definir los parámetros en los selectores y presionar "Actualizar".</p>
                        <ul>
                            <li><b>Selector Variable Filas:</b> Definir Variable en filas de la tabla.</li>
                            <li><b>Selector Variable Columnas:</b> Definir Variable en columnas de la tabla.</li>
                            <li><b>Selector Valor Salida:</b> Seleccionar tipo de unidad sobre la que se consulta.</li>
                            <li><b>Selector Pareto:</b> Definir la distribución de los datos.
                                <ul style="list-style-type: circle;">
                                    <li><b>80 / 20:</b> Mayores valores que acumulan el 80%.</li>
                                    <li><b>20 / 80:</b> Menores valores que acumulan el 20%,</li>
                                    <li><b>Todos:</b> Todos los valores.</li>
                                </ul>
                            </li>
                            <li><b>Selector Tipo Periodo:</b> Definir el tipo de periodo que se consulta.</li>
                            <li><b>Selector Periodo:</b> Definir el rango de fechas que se consulta.</li>
                        </ul>
                        <p><b>Ordenar:</b> Clickear en los encabezados de las columnas ordenará los registros de la tabla en orden descendiente según lo que representa esa columna. Clickear nuevamente ordenará los registros en orden ascendente.</p>
                        <p><b>Fila y Columna Total (Títulos de variables seleccionadas):</b> Valores calculados tomando todos los registros.</p>
                        <p><b>Filtros Rápidos:</b> Marcar las opciones a filtrar en cada selector.</p>
                        <ul>
                            <li><b>Selector Cliente:</b> Filtrar por cliente.</li>
                            <li><b>Selector MFF:</b> Filtrar por MFF.</li>
                            <li><b>Selector KAM:</b> Filtrar por <i>Key Account Manager</i>.</li>
                        </ul>
                        <p><b>Exportar:</b> Descargar datos de las tabla.</p>
                    </div>
                </div>
            </div>
        </x-tabla>
        @php $display_tabla = 'display: none;'; @endphp
    @endif

{{--    @if(isset($selectores_tabla['res_general']))
        <x-tabla id="res_general" style="{{$display_tabla}}">
            <x-boton-actualizar onclick="getResumenGeneral('{{$cliente}}', 'ventas');"/>
        </x-tabla>
        @php $display_tabla = 'display: none;'; @endphp
    @endif  --}}

    @if(isset($selectores_tabla['venper']))
        <x-tabla id="venper" style="height: 600px !important; {{$display_tabla}}">
            <x-selector-variable id="variables_venper" :lista='$variables_2' selected="2-0" cliente='$cliente'>
                <x-slot name="titulo">
                    {{__('messages.selector-variable-texto-fila')}}
                </x-slot>
            </x-selector-variable>
            <x-selector-generico id="f_tmp_venper2" idselect="f_tmp_venper" :salida="$periodo_perdi"  class="selector-generico" style="width: 120px" selected="dia">
                <x-slot name="texto">
                    {{__('messages.selector-generico-texto-periodo')}}
                </x-slot>
            </x-selector-generico>
            <x-boton-actualizar onclick="getVentasPerdida('{{$cliente}}', 'ventas');"/>
        </x-tabla>
        @php $display_tabla = 'display: none;'; @endphp
    @endif

    @if(isset($selectores_tabla['perdidas']))
        <x-tabla id="perdidas" style="height: 600px !important; {{$display_tabla}}" :filtrosAv="$filtrosAv" :filtrosAvAlias="$filtrosAvAlias">
            <x-selector-variable id="variables_perdidas" :lista='$variables_2' selected="2-0" cliente='$cliente'>
                <x-slot name="titulo">
                    {{__('messages.selector-variable-texto-fila')}}
                </x-slot>
            </x-selector-variable>
            <x-selector-generico id="f_tmp_perdidas2" idselect="f_tmp_perdidas" :salida="$periodo_perdi"  class="selector-generico" style="width: 120px" selected="dia">
                <x-slot name="texto">
                    {{__('messages.selector-generico-texto-periodo')}}
                </x-slot>
            </x-selector-generico>
            <x-boton-actualizar onclick="getPerdidasVentas('{{$cliente}}', 'ventas');"/>
        </x-tabla>
        @php $display_tabla = 'display: none;'; @endphp
    @endif

    @if(isset($selectores_tabla['inout']))
        <x-tabla id="inout" style="height: 600px !important; {{$display_tabla}}" :filtros="$filtros" :filtrosAv="$filtrosAv" :filtrosAvAlias="$filtrosAvAlias">
            <x-selector-variable id="variables_inout" :lista='$variables_inout' selected="total" cliente='$cliente'/>
            @if ($cliente != "oriental")
            <x-selector-generico id="salida_inout2" idselect="salida_inout" :salida="$salida_inout"  class="selector-generico" style="width: 120px">
                <x-slot name="texto">
                    {{__('messages.selector-generico-texto-valor')}}
                </x-slot>
            </x-selector-generico>
            @endif
            <x-selector-generico id="clientes_inout2" idselect="clientes_inout" :salida="json_encode($array_clientes)"  class="selector-generico" style="width: 120px" selected="dia">
                <x-slot name="texto">
                    {{__('messages.filtro-texto-cliente')}}
                </x-slot>
            </x-selector-generico>
            <x-selector-generico id="f_tmp_inout2" idselect="f_tmp_inout" :salida="$periodo"  class="selector-generico" style="width: 120px" selected="dia">
                <x-slot name="texto">
                    {{__('messages.selector-generico-texto-periodo')}}
                </x-slot>
            </x-selector-generico>
            <x-selector-dias idpadre="inout"/>

            
            <!--SEMANA-->
            <x-selector-semanas id="fltr_sem_inout" idselect="f_sem_inout_ini" :semanas="$semanas"  class="fltr_periodo_inout" style="display: none;">
                <x-slot name="texto">
                    {{__('messages.selector-semanas-meses-texto-desde')}}
                </x-slot>
            </x-selector-semanas>
            <x-selector-semanas id="fltr_sem_inout2" idselect="f_sem_inout_fin" :semanas="$semanas" class="fltr_periodo_inout" style="display: none;">
                <x-slot name="texto">
                    {{__('messages.selector-semanas-meses-texto-hasta')}}
                </x-slot>
            </x-selector-semanas>
            <!--MES-->
            <x-selector-meses id="fltr_mes_inout" idselect="f_mes_inout_ini" :meses="$meses" class="fltr_periodo_inout" style="display: none;">
                <x-slot name="texto">
                    {{__('messages.selector-semanas-meses-texto-desde')}}
                </x-slot>
            </x-selector-meses>
            <x-selector-meses id="fltr_mes_inout2" idselect="f_mes_inout_fin" :meses="$meses" class="fltr_periodo_inout" style="display: none;">
                <x-slot name="texto">
                    {{__('messages.selector-semanas-meses-texto-hasta')}}
                </x-slot>
            </x-selector-meses>
            <!--AÑO-->
            <div id="fltr_year_inout" style="width:120px; display:none;" class="fltr_periodo_inout col-md-auto 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_inout_ini" name="f_year_inout_ini" class="flt form-control select2 " data-toggle="select2" width="100%">
                        <option value="{{date("Y")-1}}01">{{date("Y")-1}}</option>
                        <option value="{{date("Y")}}01">{{date("Y")}}</option>
                    </select>
                </label>
            </div>
            <div id="fltr_year_inout2" style="width:120px; display:none;" class="fltr_periodo_inout col-md-auto 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_inout_fin" name="f_year_inout_fin" class="flt form-control select2 " data-toggle="select2" width="100%">
                        <option value="{{date("Y")-1}}53">{{date("Y")-1}}</option>
                        <option value="{{date("Y")}}53">{{date("Y")}}</option>
                    </select>
                </label>
            </div>
            <x-boton-actualizar onclick="getSellinSellout('{{$cliente}}', 'ventas');"/>
            @if ($cliente == "oriental")
                <x-infobox tamano="25px" :texto="$warning"/>
            @endif

            {{-- <x-selector-generico id="f_clientes_inout2" idselect="f_clientes_inout" :salida=""  class="selector-generico" style="width: 120px" selected="dia">
                <x-slot name="texto">
                    {{__('messages.filtro-texto-cliente')}}
                </x-slot>
            </x-selector-generico> --}}

        </x-tabla>
        @php $display_tabla = 'display: none;'; @endphp
    @endif

    @if(isset($selectores_tabla['cierremes']))
        <x-tabla id="cierremes" style="height: 600px !important; {{$display_tabla}}" :filtros="$filtros" :filtrosAv="$filtrosAv" :filtrosAvAlias="$filtrosAvAlias">
            <x-selector-variable id="variables_cierremes" :lista='$variables' selected="total" cliente='$cliente'/>

            <x-selector-generico id="salida_cierremes2" idselect="salida_cierremes" :salida="$salida"  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_mes_cierremes_ini2" idselect="f_mes_cierremes_ini" :salida="$periodo_cierremes"  class="selector-generico" style="width: 120px" selected="dia">
                <x-slot name="texto">
                    {{__('messages.selector-generico-texto-periodo')}}
                </x-slot>
            </x-selector-generico>

            <x-boton-actualizar onclick="getCierremes('{{$cliente}}', 'ventas');"/>
        </x-tabla>
        @php $display_tabla = 'display: none;'; @endphp
    @endif

    @if(isset($selectores_tabla['penetracion']))
        <x-tabla id="penetracion" style="height: 600px !important; {{$display_tabla}}" :filtros="$filtros" :filtrosAv="$filtrosAv" :filtrosAvAlias="$filtrosAvAlias">
            <x-selector-variable id="variables_penetracion" :lista='$variables' selected="2-5"/>

            {{--<x-selector-generico id="salida_penetracion2" idselect="salida_penetracion" :salida="$salida_penetracion"  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_tmp_penetracion2" idselect="f_tmp_penetracion" :salida="$periodo"  class="selector-generico" style="width: 120px" selected="mes">
                <x-slot name="texto">
                    {{__('messages.selector-generico-texto-periodo')}}
                </x-slot>
            </x-selector-generico>

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

            <!--SEMANA-->
            <x-selector-semanas id="fltr_sem_penetracion" idselect="f_sem_penetracion_ini" :semanas="$semanas"  class="fltr_periodo_penetracion" style="display: none;">
                <x-slot name="texto">
                    {{__('messages.selector-semanas-meses-texto-desde')}}
                </x-slot>
            </x-selector-semanas>
            <x-selector-semanas id="fltr_sem_penetracion2" idselect="f_sem_penetracion_fin" :semanas="$semanas" class="fltr_periodo_penetracion" style="display: none;">
                <x-slot name="texto">
                    {{__('messages.selector-semanas-meses-texto-hasta')}}
                </x-slot>
            </x-selector-semanas>
            <!--MES-->
            <x-selector-meses id="fltr_mes_penetracion" idselect="f_mes_penetracion_ini" :meses="$meses" class="fltr_periodo_penetracion">
                <x-slot name="texto">
                    {{__('messages.selector-semanas-meses-texto-desde')}}
                </x-slot>
            </x-selector-meses>
            <x-selector-meses id="fltr_mes_penetracion2" idselect="f_mes_penetracion_fin" :meses="$meses" class="fltr_periodo_penetracion">
                <x-slot name="texto">
                    {{__('messages.selector-semanas-meses-texto-hasta')}}
                </x-slot>
            </x-selector-meses>

            <x-boton-actualizar onclick="getEcomPenetracion('{{$cliente}}', 'ventas');"/>

            <x-infobox tamano="25px" texto="" modal="tabla_penetracion_modal"/>
            <div class="modal fade bd-example-modal-lg" id="tabla_penetracion_modal" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
                <div class="modal-dialog modal-lg">
                    <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="exampleModalLabel">Tabla Penetración (Ecommerce sobre Sell Out)</h5>     
                    </div>
                        <div class="text-center">
                            <img src="{{asset('images/ecom_tabla_penetracion.png')}}" class="img-fluid" alt="Responsive image">
                        </div>
                        <p>El reporte muestra la penetración porcentual (ventas ecommerce / ventas sell out) según el desglose y periodo. Al pasar el puntero sobre la celda se mostrará el detalle de la división. Para los casos de Cornershop y Uber, se utiliza de referencia las ventas sell out de Cencosud.</p>
                        <p><b>Consultas sobre la tabla:</b> Para utilizar la tabla; definir los parámetros en los selectores y presionar "Actualizar".</p>
                        <ul>
                            <li><b>Selector Desglosar por:</b> Definir Variables por las cuales se desglosará la tabla.</li>
                            <li><b>Selector Tipo Periodo:</b> Definir el tipo de periodo que se consulta.</li>
                            <li><b>Selector Periodo:</b> Definir el rango de periodos que se consulta.</li>
                        </ul>
                        <p><b>Ordenar:</b> Clickear en los encabezados de las columnas ordenará los registros de la tabla en orden descendiente según lo que representa esa columna. Clickear nuevamente ordenará los registros en orden ascendente.</p>
                        <p><b>Filtros Rápidos:</b> Marcar las opciones a filtrar en cada selector.</p>
                        <ul>
                            <li><b>Selector Categoría:</b> Filtrar por Categoría.</li>
                            <li><b>Selector KAM:</b> Filtrar por <i>Key Account Manager</i>.</li>
                            <li><b>Selector Cliente:</b> Filtrar por cliente.</li>
                        </ul>
                        <p><b>Exportar:</b> Descargar datos de las tabla.</p>
                    </div>
                </div>
            </div>
        </x-tabla>
        @php $display_tabla = 'display: none;'; @endphp
    @endif

    @if(isset($selectores_tabla['promo']))
        <x-tabla id="promo" style="height: 600px !important; {{$display_tabla}}" :filtros="$filtros" :filtrosAv="$filtrosAv" :filtrosAvAlias="$filtrosAvAlias">
            <x-selector-variable id="variables_promo" :lista='$variables' selected="1-15"/>

            <x-selector-generico id="salida_promo2" idselect="salida_promo" :salida="$salida_promo" 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_tmp_promo2" idselect="f_tmp_promo" :salida="$periodo"  class="selector-generico" style="width: 120px" selected="mes">
                <x-slot name="texto">
                    {{__('messages.selector-generico-texto-periodo')}}
                </x-slot>
            </x-selector-generico>

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

            <!--SEMANA-->
            <x-selector-semanas id="fltr_sem_promo" idselect="f_sem_promo_ini" :semanas="$semanas"  class="fltr_periodo_promo" style="display: none;">
                <x-slot name="texto">
                    {{__('messages.selector-semanas-meses-texto-desde')}}
                </x-slot>
            </x-selector-semanas>
            <x-selector-semanas id="fltr_sem_promo2" idselect="f_sem_promo_fin" :semanas="$semanas" class="fltr_periodo_promo" style="display: none;">
                <x-slot name="texto">
                    {{__('messages.selector-semanas-meses-texto-hasta')}}
                </x-slot>
            </x-selector-semanas>

            <x-selector-semanas id="fltr_sem_promof" idselect="f_sem_promof_ini" :semanas="$semanas"  class="fltr_periodo_promo" style="display: none;">
                <x-slot name="texto">
                    {{__('messages.selector-semanas-meses-texto-desde')}}
                </x-slot>
            </x-selector-semanas>
            <x-selector-semanas id="fltr_sem_promof2" idselect="f_sem_promof_fin" :semanas="$semanas" class="fltr_periodo_promo" style="display: none;">
                <x-slot name="texto">
                    {{__('messages.selector-semanas-meses-texto-hasta')}}
                </x-slot>
            </x-selector-semanas>
            <!--MES-->
            <x-selector-meses id="fltr_mes_promo" idselect="f_mes_promo_ini" :meses="$meses" class="fltr_periodo_promo">
                <x-slot name="texto">
                    {{__('messages.selector-semanas-meses-texto-desde')}}
                </x-slot>
            </x-selector-meses>
            <x-selector-meses id="fltr_mes_promo2" idselect="f_mes_promo_fin" :meses="$meses" class="fltr_periodo_promo">
                <x-slot name="texto">
                    {{__('messages.selector-semanas-meses-texto-hasta')}}
                </x-slot>
            </x-selector-meses>

            <x-selector-meses id="fltr_mes_promof" idselect="f_mes_promof_ini" :meses="$meses" class="fltr_periodo_promo">
                <x-slot name="texto">
                    {{__('messages.selector-semanas-meses-texto-desde')}}
                </x-slot>
            </x-selector-meses>
            <x-selector-meses id="fltr_mes_promof2" idselect="f_mes_promof_fin" :meses="$meses" class="fltr_periodo_promo">
                <x-slot name="texto">
                    {{__('messages.selector-semanas-meses-texto-hasta')}}
                </x-slot>
            </x-selector-meses>

            <x-boton-actualizar onclick="getEcomPromocion('{{$cliente}}', 'ventas');"/>

            <x-infobox tamano="25px" texto="" modal="tabla_promo_modal"/>
            <div class="modal fade bd-example-modal-lg" id="tabla_promo_modal" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
                <div class="modal-dialog modal-lg">
                    <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="exampleModalLabel">Tabla Promoción</h5>     
                    </div>
                        <div class="text-center">
                            <img src="{{asset('images/ecom_tabla_promocion.png')}}" class="img-fluid" alt="Responsive image">
                        </div>
                        <p>El reporte utiliza dos rangos de periodos (Periodo 1 y Periodo 2) del <b>mismo tipo</b> (días, semanas o meses) y los compara. Calcula los precios promedios por el desglose seleccionado en base a sus ventas, y solamente muestra los casos donde se producen <b>decrecimiento</b>, lo que sería equivalente a detectar una promoción.</p>
                        <p><b>Consultas sobre la tabla:</b> Para utilizar la tabla; definir los parámetros en los selectores y presionar "Actualizar".</p>
                        <ul>
                            <li><b>Selector Desglosar por:</b> Definir Variables por las cuales se desglosará la tabla.</li>
                            <li><b>Selector Tipo Periodo:</b> Definir el tipo de periodo que se consulta.</li>
                            <li><b>Selector Periodo 1:</b> Definir el rango de periodos que se consulta para el primer rango.</li>
                            <li><b>Selector Periodo 2:</b> Definir el rango de periodos que se consulta para el segundo rango.</li>
                        </ul>
                        <p><b>Ordenar:</b> Clickear en los encabezados de las columnas ordenará los registros de la tabla en orden descendiente según lo que representa esa columna. Clickear nuevamente ordenará los registros en orden ascendente.</p>
                        <p><b>Filtros Rápidos:</b> Marcar las opciones a filtrar en cada selector.</p>
                        <ul>
                            <li><b>Selector Categoría:</b> Filtrar por Categoría.</li>
                            <li><b>Selector KAM:</b> Filtrar por <i>Key Account Manager</i>.</li>
                            <li><b>Selector Cliente:</b> Filtrar por cliente.</li>
                        </ul>
                        <p><b>Exportar:</b> Descargar datos de las tabla.</p>
                    </div>
                </div>
            </div>
        </x-tabla>
        @php $display_tabla = 'display: none;'; @endphp
    @endif

    @if(isset($selectores_tabla['holdmarca']))
        <x-tabla id="holdmarca" style="height: 600px !important; {{$display_tabla}}" :favoritosDisabled="$true">
            <x-selector-generico id="salida_holdmarca2" idselect="salida_holdmarca" :salida="$salida_default" class="selector-generico d-none" style="width: 120px;">
                <x-slot name="texto">
                    {{__('messages.selector-generico-texto-valor')}}
                </x-slot>
            </x-selector-generico>

            <x-selector-generico id="f_year_holdmarca2" idselect="f_year_holdmarca" :salida="$year"  class="selector-generico" style="width: 120px">
                <x-slot name="texto">
                    {{__('messages.año')}}
                </x-slot>
            </x-selector-generico>
            <x-boton-actualizar onclick="getHoldMarca('{{$cliente}}', 'metas');" />
        </x-tabla>
        @php $display_tabla = 'display: none;'; @endphp
    @endif

    @if(isset($selectores_tabla['disp']))
        <x-tabla id="disp" style="height: 600px !important; {{$display_tabla}}" :filtros="$filtros" :filtrosAv="$filtrosAv" :filtrosAvAlias="$filtrosAvAlias" :favoritosDisabled="$true">
            <x-selector-variable id="variables_disp1" :lista='$variables' selected="1-15" cliente='$cliente' class="d-none">
                <x-slot name="titulo">
                    {{__('messages.selector-variable-texto-fila')}}
                </x-slot>
            </x-selector-variable>
            <x-selector-variable id="variables_disp2" :lista='$variables' selected="3-5" cliente='$cliente' class="d-none">
                <x-slot name="titulo">
                    {{__('messages.selector-variable-texto-columna')}}
                </x-slot>
            </x-selector-variable>
            
            <x-selector-generico id="salida_disp2" idselect="salida_disp" :salida="$salida_disp"  class="selector-generico d-none" style="width: 120px">
                <x-slot name="texto">
                    {{__('messages.selector-generico-texto-valor')}}
                </x-slot>
            </x-selector-generico>
            <x-selector-generico id="f_tmp_disp2" idselect="f_tmp_disp" :salida="$periodo_disp"  class="selector-generico" style="width: 120px" selected="{{$tipo_periodo}}">
                <x-slot name="texto">
                    {{__('messages.selector-generico-texto-periodo')}}
                </x-slot>
            </x-selector-generico>

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

            <!--EVOLUTVO SEMANA-->
            <x-selector-semanas id="fltr_sem_disp" idselect="f_sem_disp_ini" :semanas="$semanas"  class="fltr_periodo_disp" style="display: none;">
                <x-slot name="texto">
                    {{__('messages.selector-semanas-meses-texto-desde')}}
                </x-slot>
            </x-selector-semanas>
            <x-selector-semanas id="fltr_sem_disp2" idselect="f_sem_disp_fin" :semanas="$semanas" class="fltr_periodo_disp" 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_disp" idselect="f_mes_disp_ini" :meses="$meses" class="fltr_periodo_disp">
                <x-slot name="texto">
                    {{__('messages.selector-semanas-meses-texto-desde')}}
                </x-slot>
            </x-selector-meses>
            <x-selector-meses id="fltr_mes_disp2" idselect="f_mes_disp_fin" :meses="$meses" class="fltr_periodo_disp">
                <x-slot name="texto">
                    {{__('messages.selector-semanas-meses-texto-hasta')}}
                </x-slot>
            </x-selector-meses>
            <!--AÑO-->
            <div id="fltr_year_disp" style="width:100px;display:none;" class="fltr_periodo_disp 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_disp_ini" name="f_year_disp_ini" class="flt form-control select2 " data-toggle="select2" width="100%">
                        <option value="{{date("Y")."01"-100}}">{{date("Y")-1}}</option>
                        <option value="{{date("Y")."01"}}">{{date("Y")}}</option>
                    </select>
                </label>
            </div>
            <div id="fltr_year_disp2" style="width:100px;display:none;" class="fltr_periodo_disp 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_disp_fin" name="f_year_disp_fin" class="flt form-control select2 " data-toggle="select2" width="100%">
                        <option value="{{date("Y")-1}}53">{{date("Y")-1}}</option>
                        <option value="{{date("Y")}}53">{{date("Y")}}</option>
                    </select>
                </label>
            </div>
            {{-- Este selector solo aparece cuando se seleciona tienda/store en la tabla dispz --}}
            <x-selector-generico2 id="f_orden_locales2" idselect="f_orden_locales" :salida="$locales" class="selector-generico d-none" style="max-width: 200px; min-width: 100px;">
                <x-slot name="texto">
                    Rango de Locales por Ventas
                </x-slot>
            </x-selector-generico>
            <x-boton-actualizar onclick="getDisp('{{$cliente}}', 'ventas');"/>
        </x-tabla>
        @php $display_tabla = 'display: none;'; @endphp
    @endif

    @if(isset($selectores_tabla['evodisp']))
        <x-tabla id="evodisp" style="height: 600px !important; {{$display_tabla}}" :filtros="$filtros" :filtrosAv="$filtrosAv" :filtrosAvAlias="$filtrosAvAlias" :favoritosDisabled="$true">
            <x-selector-variable id="variables_evodisp" :lista='$variables' selected="2-5" cliente='$cliente'/>
            <x-selector-variable id="variables_evodisp2" :lista='$variables_2' selected="" cliente='$cliente'/>

            <x-selector-generico id="salida_evodisp2" idselect="salida_evodisp" :salida="$salida_evo"  class="selector-generico d-none" style="width: 120px">
                <x-slot name="texto">
                    {{__('messages.selector-generico-texto-valor')}}
                </x-slot>
            </x-selector-generico>
            <x-selector-generico id="f_tmp_evodisp2" idselect="f_tmp_evodisp" :salida="$periodo_disp"  class="selector-generico" style="width: 120px" selected="{{$tipo_periodo_}}">
                <x-slot name="texto">
                    {{__('messages.selector-generico-texto-periodo')}}
                </x-slot>
            </x-selector-generico>
            <x-selector-dias idpadre="evodisp" style="display: none;"/>

            
            <!--EVOLUTVO SEMANA-->
            <x-selector-semanas id="fltr_sem_evodisp" idselect="f_sem_evodisp_ini" :semanas="$semanas"  class="fltr_periodo_evo" style="display: none;">
                <x-slot name="texto">
                    {{__('messages.selector-semanas-meses-texto-desde')}}
                </x-slot>
            </x-selector-semanas>
            <x-selector-semanas id="fltr_sem_evodisp2" idselect="f_sem_evodisp_fin" :semanas="$semanas" class="fltr_periodo_evodisp" 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_evodisp" idselect="f_mes_evodisp_ini" :meses="$meses" class="fltr_periodo_evodisp" style="display: {{$display}};">
                <x-slot name="texto">
                    {{__('messages.selector-semanas-meses-texto-desde')}}
                </x-slot>
            </x-selector-meses>
            <x-selector-meses id="fltr_mes_evodisp2" idselect="f_mes_evodisp_fin" :meses="$meses" class="fltr_periodo_evodisp" style="display: {{$display}};">
                <x-slot name="texto">
                    {{__('messages.selector-semanas-meses-texto-hasta')}}
                </x-slot>
            </x-selector-meses>
            <!--AÑO-->
            <div id="fltr_year_evodisp" style="width:120px; display:none;" class="fltr_periodo_evodisp col-md-auto 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_evodisp_ini" name="f_year_evodisp_ini" class="flt form-control select2 " data-toggle="select2" width="100%">
                        <option value="202001">2020</option>
                        <option value="202101">2021</option>
                    </select>
                </label>
            </div>
            <div id="fltr_year_evodisp2" style="width:120px; display:none;" class="fltr_periodo_evodisp col-md-auto 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_evodisp_fin" name="f_year_evodisp_fin" class="flt form-control select2 " data-toggle="select2" width="100%">
                        <option value="202053">2020</option>
                        <option value="202153">2021</option>
                    </select>
                </label>
            </div>
            <x-boton-actualizar onclick="getEvoDisp('{{$cliente}}', 'ventas');"/>

            <x-infobox tamano="25px" texto="" modal="tabla_evodisplutivo_modal"/>
            <div class="modal fade bd-example-modal-lg" id="tabla_evodisplutivo_modal" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
                <div class="modal-dialog modal-lg">
                    <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="exampleModalLabel">Tabla Evolutivo</h5>     
                    </div>
                        <!-- Center a image from ../public/images/ventas_tabla_matriz.png -->
                        <div class="text-center">
                            <img src="{{asset('images/ventas_tabla_matriz.png')}}" class="img-fluid" alt="Responsive image">
                        </div>
                        <!-- add div for text -->
                        <p><b>Consultas sobre la tabla:</b> Para utilizar la tabla; definir los parámetros en los selectores y presionar "Actualizar".</p>
                        <ul>
                            <li><b>Selector Variable:</b> Definir Variable en filas de la tabla.</li>
                            <li><b>Selector Valor Salida:</b> Seleccionar tipo de unidad sobre la que se consulta.</li>
                            <li><b>Selector Tipo Periodo:</b> Definir el tipo de periodo que se consulta.</li>
                            <li><b>Selector Periodo:</b> Definir el rango de fechas que se consulta.</li>
                            <li><b>Limitaciones:</b> 12 Meses, 52 Semanas o 45 Días para combinaciones Producto-Local.</li>
                        </ul>
                        <p><b>Ordenar:</b> Clickear en los encabezados de las columnas ordenará los registros de la tabla en orden descendiente según lo que representa esa columna. Clickear nuevamente ordenará los registros en orden ascendente.</p>
                        <p><b>Fila y Columna Total (Títulos de variables seleccionadas):</b> Valores calculados tomando todos los registros.</p>
                        <p><b>Filtros Rápidos:</b> Marcar las opciones a filtrar en cada selector.</p>
                        <ul>
                            <li><b>Selector Cliente:</b> Filtrar por cliente.</li>
                            <li><b>Selector Categoría:</b> Filtrar por Categoría    .</li>
                            <li><b>Selector KAM:</b> Filtrar por <i>Key Account Manager</i>.</li>
                        </ul>
                        <p><b>Exportar:</b> Descargar datos de las tabla.</p>
                    </div>
                </div>
            </div>
        </x-tabla>
        @php $display_tabla = 'display: none;'; @endphp
    @endif

    @if(isset($selectores_tabla['dispcomp']))
        <x-tabla id="dispcomp" style="height: 600px !important; {{$display_tabla}}" :filtros="$filtros" :filtrosAv="$filtrosAv" :filtrosAvAlias="$filtrosAvAlias" :favoritosDisabled="$true">
            <x-selector-variable id="variables_dispcomp1" :lista='$variables' selected="1-15" cliente='$cliente' class="d-none">
                <x-slot name="titulo">
                    {{__('messages.selector-variable-texto-fila')}}
                </x-slot>
            </x-selector-variable>
            <x-selector-variable id="variables_dispcomp2" :lista='$variables' selected="3-5" cliente='$cliente' class="d-none">
                <x-slot name="titulo">
                    {{__('messages.selector-variable-texto-columna')}}
                </x-slot>
            </x-selector-variable>
            
            <x-selector-generico id="salida_dispcomp2" idselect="salida_dispcomp" :salida="$salida_disp"  class="selector-generico d-none" style="width: 120px; display:none;">
                <x-slot name="texto">
                    {{__('messages.selector-generico-texto-valor')}}
                </x-slot>
            </x-selector-generico>
            
            <x-selector-generico id="f_tmp_dispcomp2" idselect="f_tmp_dispcomp" :salida="$periodo_disp"  class="selector-generico" style="width: 120px;" selected="{{$tipo_periodo}}">
                <x-slot name="texto" >
                    {{__('messages.selector-generico-texto-periodo')}}
                </x-slot>
            </x-selector-generico>           

            <x-selector-semanas id="fltr_sem_dispcomp" idselect="f_sem_dispcomp_ini" :semanas="$semanasComp" class="fltr_periodo_dispcomp" style="display: none;">
                <x-slot name="texto">
                    {{__('messages.selector-semanas-meses-texto-desde')}}
                </x-slot>
            </x-selector-semanas>
            <x-selector-semanas id="fltr_sem_dispcomp2" idselect="f_sem_dispcomp_fin" :semanas="$semanasComp" class="fltr_periodo_dispcomp" style="display: none;">
                <x-slot name="texto">
                    {{__('messages.selector-semanas-meses-texto-hasta')}}
                </x-slot>
            </x-selector-semanas>
            <x-selector-meses id="fltr_mes_dispcomp" idselect="f_mes_dispcomp_ini" :meses="$mesesComp" class="fltr_periodo_dispcomp">
                <x-slot name="texto">
                    {{__('messages.selector-semanas-meses-texto-desde')}}
                </x-slot>
            </x-selector-meses>
            <x-selector-meses id="fltr_mes_dispcomp2" idselect="f_mes_dispcomp_fin" :meses="$mesesComp" class="fltr_periodo_dispcomp" >
                <x-slot name="texto">
                    {{__('messages.selector-semanas-meses-texto-hasta')}}
                </x-slot>
            </x-selector-meses>
            <x-selector-dias idpadre="dispcomp" style="display: none;"/>
            @if ($cliente == "oriental")
                <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_agru_dispcomp" value="first_checkbox" style="margin-right: 5px"> Agrupar
                    </label>
                </div>
            @endif

            <x-boton-actualizar onclick="getDispComp('{{$cliente}}', 'ventas')"/>

        </x-tabla>
        @php $display_tabla = ' 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>
        var currentYear = new Date().getFullYear();
        var cliente_ = "{{$cliente}}";
        $("#f_mes_grafcomp_ini").val(currentYear+"01").change();
        $("#f_mes_graftree_ini").val(currentYear+"01").change();
        $("#f_mes_evo_ini").val(currentYear+"01").change();
        $("#f_mes_evodisp_ini").val(currentYear+"01").change();
        $("#f_mes_evo_sell_in_ini").val(currentYear+"01").change();
        if(cliente_ == "siksa"){
            $("#variables_evo2").val("2-5").change();
            $("#variables_evo").val("1-15").change();
            $("#variables_evo2_sell_in").val("2-5").change();
            $("#variables_evo_sell_in").val("1-15").change();
        }else if(cliente_ == "colflex"){
            $("#variables_comp").val("2-8").change();
            $("#variables_evo").val("2-8").change();
            $("#variables_matri1").val("2-8").change();
            $("#variables_grafcomp").val("2-8").change();
            $("#variables_grafevo").val("2-8").change();
            $("#variables_grafmatri").val("2-8").change();
        }else if(cliente_ == "proximo"){
            //add class d-none to all ids that start with f_categroias_
            $("[id^=f_categorias_]").addClass("d-none");
        }else if(['lafermentista', 'demo'].includes(cliente_)){
            var _12MonthsAgo = "{{$_12MonthsAgo}}";
            $("#f_mes_grafcomp_ini").val(_12MonthsAgo).change();
        }
        let ids = ['evo', 'vcomuna','matri', 'mec3meses','comp','comparativo', 'inout', 'grafdri', 'graftree', 'grafvar', 'grafmatri', 'grafcrec', 'grafevo', 'grafcomp','perdidas', 'evo_sell_in', 'cierremes', 'penetracion', 'promo', 'disp', 'evodisp', 'dispcomp'];
        
        $(document).ready(() => {
            $("#vcomuna > div:nth-child(2) > div:nth-child(1) > div:nth-child(1) > div:nth-child(1)").hide()
            $("#vcomuna > div:nth-child(2) > div:nth-child(1) > div:nth-child(1) > div:nth-child(2)").hide()
             
            ids.forEach(function(item){
                if($('#'+item).length > 0 && $('#f_favoritos_'+item).length > 0) cargarFavoritos(item);
            });
            
            let filtros = ['clientes', 'categorias', 'kam', "subcategoria", "producto_sku_prov"];
            for(let filtro of filtros) {
                for(let id of ids) {
                    multiSelect(filtro, id, "{{__('messages.seleccionar')}}");
                }
            }

            ['#variables_comp', '#variables_mec3meses1', '#variables_comparativo', '#variables_cierremes', '#variables_penetracion', '#variables_promo'].forEach(function(element){
                $(element).select2MultiCheckboxes({
                    placeholder: "{{__('messages.elegir-variables')}}",
                    width: "auto",
                    templateSelection: function(selected, total) {
                        return selected.length + " de " + total + " total";
                    }
                });
            });

            // $("#f_clientes_comp").select2({closeOnSelect:false, multiple: true, placeholder: "Seleccionar Cliente", width: "auto"});            
            
            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: moment((new Date()).setDate(ahora.getDate()-1))
            };
            ["#f_dia_inout_ini","#f_dia_comp_ini", "#f_dia_dispcomp_ini", "#f_dia_comparativo_ini","#f_dia_matri_ini","#f_dia_grafdri_ini","#f_dia_graftree_ini", "#f_dia_grafcrec_ini", "#f_dia_penetracion_ini", '#f_dia_promo_ini', "#f_dia_disp_ini","#f_dia_evodisp_ini"].forEach((selector, i) => {
                $(selector).daterangepicker(congifDate);
            });
            congifDate2 = congifDate;
            congifDate2.startDate = moment((new Date()).setDate(ahora.getDate()-15));
            ["#f_dia_grafevo_ini", "#f_dia_grafevo_fin","#f_dia_evo_ini", "#f_dia_evo_fin", "#f_dia_disp_fin", "#f_dia_dispcomp_fin" , "#f_dia_evodisp_fin","#f_dia_evo_sell_in_ini", "#f_dia_evo_sell_in_fin"].forEach((selector, i) => {
                $(selector).daterangepicker(congifDate2);
            });

            congifDate["minDate"] = moment(new Date(ahora.getFullYear(), 0, 1));
            [ "#f_dia_grafcomp_fin"].forEach((selector, i) => {
                $(selector).daterangepicker(congifDate);
            });
            congifDate["minDate"] = moment((new Date()).setDate(ahora.getDate()-730));
            [ "#f_dia_grafcomp_ini"].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();
                //console.log(" tmp"+tmp);
                //console.log(" macroTmp "+macroTmp);

                $(".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");
                if(macroTmp == 'promo' || macroTmp == 'comp'){
                    var macroTmp2 = macroTmp+'f';
                    $(".fltr_periodo_" + macroTmp2).css("display","none");
                    $("#fltr_"+tmp+"_" + macroTmp2).css("display","inline-block");
                    $("#fltr_"+tmp+"_" + macroTmp2 + "2").css("display","inline-block");
                    $("#fltr_"+tmp+"_" + macroTmp2 + "3").css("display","inline-block");
                }
            });
            $('#f_mes_grafcomp_ini').change(function(elem){
                let date = new Date();
                    $('#f_mes_grafcomp_fin').find("option").prop("disabled", false);
               
                    $('#f_mes_grafcomp_fin').val(parseInt(elem.target.value) + 100);

                $('#f_mes_grafcomp_fin').trigger('change');
            });
            $(".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');
            // })();

            if(['maisa'].includes(cliente_)){
                // Gráfico Evolutivo
                $("#f_tmp_grafevo").val('sem').change();
                // Gráfico Comparativo
                $('#f_tmp_grafcomp').val('sem').change();
                // Gráfico Matriz
                $('#f_tmp_grafmatri').val('dia').change();
                // Gráfico Crecimiento
                $('#f_tmp_grafcrec').val('sem').change();
                // Tabla Evolución
                $('#f_tmp_evo').val('sem').change();
                // Tabla Comparación
                $('#f_tmp_comp').val('sem').change();
                $('#variables_comp').val(['2-5', '2-0']).change(); // Desglose por Cliente y Cadena
                // Tabla Matriz
                $('#variables_matri1').val('1-1').change(); // Variables Filas = Marca
                $('#f_tmp_matri').val('dia').change(); // Periodo por día
            }else if(['clorox'].includes(cliente_)){
                // Gráfico Evolutivo
                $("#f_tmp_grafevo").val('mes').change(); // Desglose por mes
                $("#f_mes_grafevo_ini").val("{{(date('Y')-1).'01'}}").change(); // Que inicie desde enero del año anterior
                // Gráfico Comparativo
                $('#f_tmp_grafcomp').val('sem').change(); // Desglose por semana
                $('#salida_grafcomp').val('457').change(); // Ventas con IVA

                // Tabla Evolución
                $("#f_tmp_evo").val('mes').change(); // Desglose por mes
                $("#f_mes_evo_ini").val("{{(date('Y')-1).'01'}}").change(); // Que inicie desde enero del año anterior
            }else if(cliente_ == 'mdlzchile'){
                $('#variables_cierremes').val(['1-16', '2-5']).change(); // Desglose por local por defecto
                $('#variables_penetracion').val('2-5').change(); // Desglose por holding por defecto

                // Para largas selecciones de meses, los precios varían demasiado
                $('#f_mes_promo_ini').val($('#f_mes_promo_fin').val()).change();
                $('#f_mes_promof_ini').val($('#f_mes_promof_fin').val()).change();
                $('#f_sem_promo_ini').val($('#f_sem_promo_fin').val()).change();
                $('#f_sem_promof_ini').val($('#f_sem_promof_fin').val()).change();

                // Tabla comparación
                $('#f_tmp_comp').val('mes').change();

                if(('#comp').length > 0){
                    $('#f_mes_comp_ini').val($('#f_mes_comp_fin').val()).change();
                    $('#f_mes_compf_ini').val($('#f_mes_compf_fin').val()).change();
                    $('#f_sem_comp_ini').val($('#f_sem_comp_fin').val()).change();
                    $('#f_sem_compf_ini').val($('#f_sem_compf_fin').val()).change();

                    var configDateComp = congifDate;
                    configDateComp['minDate'] = moment((new Date()).setDate(ahora.getDate()-730));
                    configDateComp['startDate'] = moment((new Date()).setDate(ahora.getDate()-387));
                    configDateComp['endDate'] = moment((new Date()).setDate(ahora.getDate()-367))
                    $('#f_dia_compf_ini').daterangepicker(configDateComp);

                    $('#f_mes_compf_ini').val($('#f_mes_compf_ini').val() - 100).change();
                    $('#f_mes_compf_fin').val($('#f_mes_compf_fin').val() - 100).change();

                    $('#f_sem_compf_ini').val($('#f_sem_compf_ini').val() - 100).change();
                    $('#f_sem_compf_fin').val($('#f_sem_compf_fin').val() - 100).change();
                }
            }

            if($('#promo').length > 0){
                var configDatePromo = congifDate;
                configDatePromo['minDate'] = moment((new Date()).setDate(ahora.getDate()-730));
                configDatePromo['startDate'] = moment((new Date()).setDate(ahora.getDate()-387));
                configDatePromo['endDate'] = moment((new Date()).setDate(ahora.getDate()-367))
                $('#f_dia_promof_ini').daterangepicker(configDatePromo);

                $('#f_mes_promof_ini').val($('#f_mes_promof_ini').val() - 100).change();
                $('#f_mes_promof_fin').val($('#f_mes_promof_fin').val() - 100).change();

                $('#f_sem_promof_ini').val($('#f_sem_promof_ini').val() - 100).change();
                $('#f_sem_promof_fin').val($('#f_sem_promof_fin').val() - 100).change();
            }
        });
        var filtrosPromise = getFiltrosAv('{{$cliente}}', '{{$codigo}}');

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

        function openModal(modal){
            $("#"+modal).modal("show");
        }
    </script>
@endsection