@extends('layouts.reporte')

@section('php')
    @php
        $semanasx = $semanas;
        $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;
        }
        $filtros_comisiones = ["cadena" => [],"marca" => []];
        $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_ = 'dia';

        $display = 'block';
        $display_ = 'none';
        $paretos = json_encode(['100' => __('messages.100'), '20' => __('messages.20'), '80' => __('messages.80')]);

        $periodos_walmart = false;

        $salida_siksa = 2;

        $array_clientes = [];
        $salida = json_encode(['2' => __('messages.ventas'), '1' => __('messages.unidades'), '3' => __('messages.costo')]);
        $variable_salida = json_encode(['local' => 'Local', 'producto' => 'Local - Producto']);

        $salida_matri = json_encode(['2' => __('messages.ventas'), '1' => __('messages.unidades')]);
        $salida_vcomuna = json_encode(['2' => __('messages.ventas')]);
        $salida_default = json_encode(['2' => __('messages.ventas')]);
        $salida_mult = json_encode(['2' => __('messages.ventas'), '1' => __('messages.unidades'), '3' => __('messages.costo')]);
        // 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(['2' => __('messages.dinero'), '1' => __('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')]);
        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')]);
        }
        $periodo_comp = json_encode(['dia'=> __('messages.dias'),'ytd' => __('messages.ytd'), 'mec' => __('messages.mec'), 'sem' => __('messages.semanas'), 
        'mes' => __('messages.meses'), 'uam' => __('messages.ult-anio-movil'),'umc' => 'Ult. Mes Cerrado']);
        $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_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(['1' => __('messages.acomulado'), 'mec' => __('messages.mec'), '3' => __('messages.mesanterior')]);

        if($cliente == 'oriental'){
            $salida = json_encode(['2' => __('messages.ventas'), '1' => __('messages.unidades'), '3' => __('messages.costo'), "10" => __('messages.unidadespack')]);
            $salida_matri = json_encode(['2' => __('messages.ventas'), '1' => __('messages.unidades'), "10" => __('messages.unidadespack')]);
        }else if($cliente == 'unibag'){
            $salida = json_encode(['2' => __('messages.ventas'), '1' => __('messages.unidades'), '3' => __('messages.costo'), "1001" => __('messages.cajas')]);
            $salida_matri = json_encode(['2' => __('messages.ventas'), '1' => __('messages.unidades'), "1001" => __('messages.cajas')]);
        }else if($cliente == 'siksa'){
            $salida_siksa = 10;
            $salida = json_encode(["10" => "Kilos (Kg)", '2' => __('messages.ventas'), '61' => "Ventas + IVA ($)", '1' => __('messages.unidades'), '3' => __('messages.costo')]);
            $salida_matri = json_encode(["1001" => "Kilos (Kg)", '2' => __('messages.ventas'), '1' => __('messages.unidades') ]);
            $salida_mec3meses  = json_encode(["1001" => "Kilos (Kg)", '2' => __('messages.ventas'), '1' => __('messages.unidades') ]);
        }else if($cliente == 'comarsa'){
            $salida_siksa = 10;
            $salida = json_encode(["10" => "Cajas", '2' => __('messages.ventas'), '1' => __('messages.unidades'), '3' => __('messages.costo')]);
            $salida_matri = json_encode(["1001" => "Cajas", '2' => __('messages.ventas'), '1' => __('messages.unidades') ]);
            $salida_mec3meses  = json_encode(["1001" => "Cajas", '2' => __('messages.ventas'), '1' => __('messages.unidades') ]);
        }else if($cliente == "manares"){
            $salida = json_encode(['2' => __('messages.ventas'), '1' => __('messages.unidades'), '3' => __('messages.costo'),"800"=> __('messages.margen'),
            "600"=> __('messages.contribucion')]);
            $salida_matri = json_encode(['2' => __('messages.ventas'), '1' => __('messages.unidades'),"800"=> __('messages.margen'),"600"=> __('messages.contribucion')]);
        }else if($cliente == "empresaspolar"){
            $salida = json_encode(['2' => __('messages.ventas'), '61' => "Ventas + IVA ($)", '1' => __('messages.unidades'), '3' => __('messages.costo')]);
            $salida_matri = json_encode(['2' => __('messages.ventas'), '61' => "Ventas + IVA ($)", '1' => __('messages.unidades')]);
        }else if($cliente == 'ducasse'){
            $salida = json_encode(['30'=> __('messages.ventas'), '1001' => __('messages.unidades'), '301' => __('messages.costo')]);
            $salida_matri = json_encode(['30'=> __('messages.ventas'), '1001' => __('messages.unidades'), '301' => __('messages.costo')]);
            $salida_vcomuna = json_encode(['30' => __('messages.ventas')]);
            $salida_default = json_encode(['30' => __('messages.ventas')]);
        }else if(in_array($cliente, ['maisa'])){
            $salida = json_encode(['2' => __('messages.ventas_con_iva'), '30' => __('messages.ventas_sin_iva')]);
            $salida_comparativo = json_encode(['2' => __('messages.ventas_con_iva'), '30' => __('messages.ventas_sin_iva')]);

            $salida_matri = json_encode(['2' => __('messages.ventas_con_iva'), '1' => __('messages.unidades'), '3' => __('messages.costo'), '30' => __('messages.ventas_sin_iva')]);
            $salida_default = json_encode(['2' => __('messages.ventas_con_iva'), '30' => __('messages.ventas_sin_iva')]);
        }else if(in_array($cliente, ['clorox'])){
            $salida = json_encode(['2' => __('messages.ventas_sin_iva'), '33' => __('messages.ventas_con_iva'), '1' => __('messages.unidades'), '3' => __('messages.costo'), '10' => __('messages.sc'), '15' => __('messages.ac')]);
            $salida_matri = $salida;

            $periodo = json_encode(['dia'=> __('messages.dias'), 'sem' => __('messages.semanas'), 'mes' => __('messages.meses'), 'ytdf' => __('messages.ytdf'), 'ytd' => __('messages.ytd')]);
            $periodo_grafmatri = json_encode(['ytdf' => __('messages.ytdf'), 'ytd' => __('messages.ytd'), 'mec' => __('messages.mec'), 'dia' => __('messages.dias')]);
            $periodo_comp = json_encode(['dia'=> __('messages.dias'), 'ytd' => __('messages.ytd'), 'mec' => __('messages.mec'), 'sem' => __('messages.semanas'), 
            'mes' => __('messages.meses'), 'uam' => __('messages.ult-anio-movil'), 'ytdf' => __('messages.ytdf')]);
            $periodo_grafcomp = json_encode(['dia'=> __('messages.dias'), 'sem' => __('messages.semanas'), 'mes' => __('messages.meses'), 'ytd' => __('messages.ytd'), 'ytdf' => __('messages.ytdf')]);
            $periodo_matri = json_encode(['ytdf' => __('messages.ytdf'), 'ytd' => __('messages.ytd'), 'mec' => __('messages.mec'), 'mes' => __('messages.meses'), 'sem' => __('messages.semanas'), 
            'dia' => __('messages.dias')]);
        }else if($cliente == 'genomma'){
            $salida = json_encode(['30' => 'Ventas CUF ($)' ,'2' => __('messages.ventas'), '1' => __('messages.unidades'), '3' => __('messages.costo'), "2222" => "Ventas ($) GLC ","1111" => "Unidades (U) GLC"]);
            $salida_matri = $salida;
        }else if($cliente == 'gama'){
            $salida_siksa = 30;
            $salida = json_encode(['2' => __('messages.ventas_sin_iva'), '30' => __('messages.ventas_con_iva'), '1' => __('messages.unidades'), '3' => __('messages.costo')]);
            $salida_matri = $salida;
            $salida_comparativo = json_encode(['2' => __('messages.ventas_sin_iva'), '30' => __('messages.ventas_con_iva')]);

            $periodo = json_encode(['dia'=> __('messages.dias'), 'sem' => __('messages.semanas'), 'semx' => __('messages.semanas').' SRX', 'mes' => __('messages.meses'), 'mesx' => __('messages.meses').' SRX']);
            $periodo_comp = json_encode(['dia'=> __('messages.dias'),'ytd' => __('messages.ytd'), 'mec' => __('messages.mec'), 'sem' => __('messages.semanas'), 
            'semx' => __('messages.semanas').' SRX', 'mes' => __('messages.meses'), 'mesx' => __('messages.meses').' SRX', 'uam' => __('messages.ult-anio-movil'),'mes_sem' => __('messages.meses').' - '. __('messages.semanas')]);
            $periodo_grafcomp = json_encode(['dia'=> __('messages.dias'), 'sem' => __('messages.semanas'), 'semx' => __('messages.semanas').' SRX', 'mes' => __('messages.meses'), 'mesx' => __('messages.meses').' SRX', 'ytd' => __('messages.ytd')]);
        }else if($cliente == 'canontex'){
            $salida = json_encode(['2' => __('messages.ventas'), '1' => __('messages.unidades'), '3' => __('messages.costo'), '15' => 'Costo Canontex', '251' => 'Ventas Sell In ($)', '252' => 'Unidades Sell In (U)']);
            $salida_matri = $salida;

            $salida_comparativo = json_encode(['2' => __('messages.ventas'), '251' => 'Ventas Sell In ($)']);
        }else if($cliente == 'cintaazul'){
            $salida = json_encode(['2' => __('messages.ventas'), '1' => __('messages.unidades'), '3' => __('messages.costo'), '8' => __('messages.cajas')]);
            $salida_matri = json_encode(['2' => __('messages.ventas'), '10' => __('messages.unidades'), '15' => __('messages.costo'), '8' => __('messages.cajas')]);
        }else if($cliente == 'marvest'){
            $salida = json_encode(['2' => __('messages.ventas')." Sell out", '1' => __('messages.unidades'), '3' => __('messages.costo')." Sell In", '15' => 'Costo PvP','10' => 'Unidades Convertidas']);
            $salida_matri = json_encode(['2' => __('messages.ventas')." Sell out", '1' => __('messages.unidades'), '3' => __('messages.costo')." Sell In", '15' => 'Costo PvP','10' => 'Unidades Convertidas']);
        }else if($cliente == 'team'){
            $salida = json_encode(['2' => __('messages.ventas'), '1' => __('messages.unidades'), '3' => __('messages.costo'), '10' => 'Litros', '32' => 'Kilos']);
            $salida_matri = json_encode(['2' => __('messages.ventas'), '1' => __('messages.unidades'), '10' => 'Litros', '32' => 'Kilos']);
        }else if($cliente == 'mdlzcostarica' || $cliente == 'mdlzsalvador' || $cliente == 'mdlzguatemala' || $cliente == 'mdlzhonduras' || $cliente == 'mdlznicaragua' || $cliente == 'mdlzpanama'){
            $periodos_walmart = true;
            $semanasx = $semanas_wm;
            $periodo = json_encode(['dia'=> __('messages.dias'), 'sem' => __('messages.semanas'), 'semx' => __('messages.semanas').' WM', 'mes' => __('messages.meses'), 'mesx' => __('messages.meses').' WM']);
            $periodo_comp = json_encode(['dia'=> __('messages.dias'),'ytd' => __('messages.ytd'), 'mec' => __('messages.mec'), 'sem' => __('messages.semanas'), 
            'semx' => __('messages.semanas').' WM', 'mes' => __('messages.meses'), 'mesx' => __('messages.meses').' WM']);
        }else if($cliente == 'hoffmann'){
            $salida_hoffmann = json_encode(['2' => __('messages.ventas'), '1' => __('messages.unidades'), '3' => __('messages.costo'), '10' => 'Kilos','vuk' => 'Ventas - Unidades - Kilos']);
            $salida = json_encode(['2' => __('messages.ventas'), '1' => __('messages.unidades'), '3' => __('messages.costo'), '10' => 'Kilos']);
            $salida_matri = json_encode(['2' => __('messages.ventas'), '1' => __('messages.unidades'), '10' =>  'Kilos']);
        }

        $arr_top = [];
        for($i = 1; $i <= 10; ++$i){
            $arr_top[$i] = 'Top '.$i;
        }
        $arr_top = json_encode($arr_top);

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

        $semanasComp = [];
        $yearAct = date("Y");
        $yearAct2 = date("Y") + 1;
        $yearAnt = date("Y") - 1;
        $yearAnt2 = date("Y") - 2;

        $variable_nuevo_desc = json_encode(['new' => 'Nuevos', 'desc' => 'Descontinuados']);
        $salida_nuevo_desc = json_encode(['1' => __("messages.grupo-Producto"), '2' => __("messages.grupo-Local")]);
        $salida2 = json_encode(['1' => __('messages.unidades')]);
        $mes_new = [];
        $mes_desc = [];
        for ($i=0; $i < 10; $i+=2) { 
            $mes_new[$i+2] = ($i+2).' meses o menos';
            $mes_desc[$i+2] = ($i+2).' meses o mas';
        }

        $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(['1'=>"Total Consulta", '2' =>"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;
            }
        }
        $mesesComisiones = [];
        foreach ($meses as $value) {
            list($_mes, $_year) = explode(' ', $value->nombre);
            if($_year == $yearAct || $_year == $yearAct2 || $_year == $yearAnt || $_year == $yearAnt2) {
                $mesesComisiones []= $value;
            }
        }

        foreach ($meses as $value) {
            list($_mes, $_year) = explode(' ', $value->nombre);
            if($_year == $yearAct ) {
                $mesesTree []= $value;
            }
        }
        
        foreach ($semanas as $value) {
            $_year = substr($value->periodo, 0, 4);
            if($_year >= $yearAnt) {
                $semanasComp []= $value;
            }
        }
        
        $semanasxComp = $semanasComp;
        if($periodos_walmart){
            $semanasxComp = [];
            foreach ($semanas_wm as $value) {
                $_year = substr($value->periodo, 0, 4);
                if($_year >= $yearAnt) {
                    $semanasxComp []= $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', 'lesaffre','afee'])){ // 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']);
            }
        }

        $variables_comisiones['Producto'] = $variables['Producto'];

        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 = '';
        $warning = "Se compara Costo Sell Out vs Venta Sell In";
        //dd($mesesComp);
        
        $_12MonthsAgo = date('Ym', strtotime(date('Y-m-01').'-11 month'));

        $arr_dos_periodos = ['canontex', 'demo'];

    @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;" selected="{{$salida_siksa}}">
                <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="dia">
                <x-slot name="texto">
                    {{__('messages.selector-generico-texto-periodo')}}
                </x-slot>
            </x-selector-generico>

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

            <!--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>

            <x-selector-semanas id="fltr_semx_grafcomp" idselect="f_semx_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_semx_grafcomp2" idselect="f_semx_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')}}" style="display:none;">
                <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" style="display:none;">
                <x-slot name="texto">
                    {{__('messages.selector-semanas-meses-texto-hasta')}}
                </x-slot>
            </x-selector-meses>

            <x-selector-meses id="fltr_mesx_grafcomp" idselect="f_mesx_grafcomp_ini" :meses="$mesesComp" class="fltr_periodo_grafcomp" selected="{{date('Y01')}}" style="display:none;">
                <x-slot name="texto">
                    {{__('messages.selector-semanas-meses-texto-desde')}}
                </x-slot>

            </x-selector-meses>
            <x-selector-meses id="fltr_mesx_grafcomp2" idselect="f_mesx_grafcomp_fin" :meses="$mesesComp" class="fltr_periodo_grafcomp" style="display:none;">
                <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;" selected="{{$salida_siksa}}">
                <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="sem">
                <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">
                <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">
                <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" style="display: none;">
                <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" style="display: none;">
                <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" selected="{{$salida_siksa}}">
                <x-slot name="texto">
                    {{__('messages.selector-generico-texto-valor')}}
                </x-slot>
            </x-selector-generico>
            @if ($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 == '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>

            <x-selector-meses id="fltr_mesx_grafevo" idselect="f_mesx_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_mesx_grafevo2" idselect="f_mesx_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>
            
            <x-selector-semanas id="fltr_semx_grafevo" idselect="f_semx_grafevo_ini" :semanas="$semanasx" :semanawm="$periodos_walmart" 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_semx_grafevo2" idselect="f_semx_grafevo_fin" :semanas="$semanasx" :semanawm="$periodos_walmart" 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:100px;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:100px;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" style="width:160px;">
                <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="dia">
                <x-slot name="texto">
                    {{__('messages.selector-generico-texto-periodo')}}
                </x-slot>
            </x-selector-generico>

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

            <!--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" style="display:none;">
                <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" style="display:none;">
                <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%; width:120px;">
                <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%; width:120px;">
                <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>

            <x-selector-semanas id="fltr_semx_graftree" idselect="f_semx_graftree_ini" :semanas="$semanasxComp" :semanawm="$periodos_walmart" 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_semx_graftree2" idselect="f_semx_graftree_fin" :semanas="$semanasxComp" :semanawm="$periodos_walmart" 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-meses id="fltr_mesx_graftree" idselect="f_mesx_graftree_ini" :meses="$mesesTree" class="fltr_periodo_graftree" style="display: none">
                <x-slot name="texto">
                    {{__('messages.selector-semanas-meses-texto-desde')}}
                </x-slot>
            </x-selector-meses>
            <x-selector-meses id="fltr_mesx_graftree2" idselect="f_mesx_graftree_fin" :meses="$mesesTree" class="fltr_periodo_graftree" style="display: none">
                <x-slot name="texto">
                    {{__('messages.selector-semanas-meses-texto-hasta')}}
                </x-slot>
            </x-selector-meses>

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

            <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-filtro id="f_clientes_grafvar" :lista="$clientes" style="max-width: 120px; min-width: 120px; width: 120px;" class="ms-auto">
                <x-slot name="texto">
                    @if($cliente != 'siksa'){{__('messages.filtro-texto-cliente')}}@else Cadena @endif
                </x-slot>
            </x-filtro>
            <x-filtro id="f_categorias_grafvar" :lista="$categorias" style="max-width: 120px;min-width: 120px;width: 120px;">
                <x-slot name="texto">
                    @if($cliente == 'clorox') {{__('messages.MFF')}} @else {{__('messages.filtro-texto-categoria')}} @endif
                </x-slot>
            </x-filtro>
            <x-filtro id="f_kam_grafvar" :lista="$kam" style="max-width: 120px;min-width: 120px;width: 120px;">
                <x-slot name="texto">
                    @if($cliente == 'clorox') {{__('messages.kas')}} @else {{__('messages.filtro-texto-kam')}} @endif
                </x-slot>
            </x-filtro>
        </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" selected="{{$salida_siksa}}">
                <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="d-none" 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="dia">
                <x-slot name="texto">
                    {{__('messages.selector-generico-texto-periodo')}}
                </x-slot>
            </x-selector-generico>

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

            <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

    @if(isset($selectores_grafico['grafcomptop']))
        <x-grafico id="grafcomptop" style="height: 450px !important; {{$display_grafico}}" :filtros="$filtros" :filtrosAv="$filtrosAv" :filtrosAvAlias="$filtrosAvAlias">
            <x-selector-variable id="variables_grafcomptop" :lista='$variables' selected="2-0" cliente='$cliente'/>
            <x-selector-generico id="salida_grafcomptop2" idselect="salida_grafcomptop" :salida="$salida"  class="selector-generico" style="width: 120px;" selected="{{$salida_siksa}}">
                <x-slot name="texto">
                    {{__('messages.selector-generico-texto-valor')}}
                </x-slot>
            </x-selector-generico>

            <x-selector-generico id="f_top_grafcomptop2" idselect="f_top_grafcomptop" :salida="$arr_top"  class="selector-generico" style="width: 120px;" selected="5">
                <x-slot name="texto">
                    Top
                </x-slot>
            </x-selector-generico>

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

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

            <!--EVOLUTVO SEMANA-->
            <x-selector-semanas id="fltr_sem_grafcomptop" idselect="f_sem_grafcomptop_ini" :semanas="$semanas"  class="fltr_periodo_grafcomptop" style="display: none;">
                <x-slot name="texto">
                    {{__('messages.selector-semanas-meses-texto-desde')}}
                </x-slot>
            </x-selector-semanas>
            <x-selector-semanas id="fltr_sem_grafcomptop2" idselect="f_sem_grafcomptop_fin" :semanas="$semanas" class="fltr_periodo_grafcomptop" style="display: none;">
                <x-slot name="texto">
                    {{__('messages.selector-semanas-meses-texto-hasta')}}
                </x-slot>
            </x-selector-semanas>

            <x-selector-semanas id="fltr_semx_grafcomptop" idselect="f_semx_grafcomptop_ini" :semanas="$semanasx" :semanawm="$periodos_walmart" class="fltr_periodo_grafcomptop" style="display: none;">
                <x-slot name="texto">
                    {{__('messages.selector-semanas-meses-texto-desde')}}
                </x-slot>
            </x-selector-semanas>
            <x-selector-semanas id="fltr_semx_grafcomptop2" idselect="f_semx_grafcomptop_fin" :semanas="$semanasx" :semanawm="$periodos_walmart" class="fltr_periodo_grafcomptop" 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_grafcomptop" idselect="f_sem_wd_grafcomptop_ini" :semanas="$semanas"  class="fltr_periodo_grafcomptop" 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_grafcomptop2" idselect="f_sem_wd_grafcomptop_fin" :semanas="$semanas" class="fltr_periodo_grafcomptop" 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_grafcomptop" idselect="f_mes_grafcomptop_ini" :meses="$mesesComp" class="fltr_periodo_grafcomptop" selected="{{date('Y01')}}" style="display:none;">
                <x-slot name="texto">
                    {{__('messages.selector-semanas-meses-texto-desde')}}
                </x-slot>

            </x-selector-meses>
            <x-selector-meses id="fltr_mes_grafcomptop2" idselect="f_mes_grafcomptop_fin" :meses="$mesesComp" class="fltr_periodo_grafcomptop" style="display:none;">
                <x-slot name="texto">
                    {{__('messages.selector-semanas-meses-texto-hasta')}}
                </x-slot>
            </x-selector-meses>

            <x-selector-meses id="fltr_mesx_grafcomptop" idselect="f_mesx_grafcomptop_ini" :meses="$mesesComp" class="fltr_periodo_grafcomptop" selected="{{date('Y01')}}" style="display:none;">
                <x-slot name="texto">
                    {{__('messages.selector-semanas-meses-texto-desde')}}
                </x-slot>

            </x-selector-meses>
            <x-selector-meses id="fltr_mesx_grafcomptop2" idselect="f_mesx_grafcomptop_fin" :meses="$mesesComp" class="fltr_periodo_grafcomptop" style="display:none;">
                <x-slot name="texto">
                    {{__('messages.selector-semanas-meses-texto-hasta')}}
                </x-slot>
            </x-selector-meses>

            <x-selector-generico id="f_type_grafcomptop2" idselect="f_type_grafcomptop" :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="getGrafCompTop('{{$cliente}}', 'ventas');"/>
            
            <x-infobox tamano="25px" texto="" modal="grafico_comparativotop_modal"/>
            <div class="modal fade bd-example-modal-lg" id="grafico_comparativotop_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 Top</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>
                        <p>Filtra por sobre el top seleccionado</p>
                        <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
@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'/>

            @if(!in_array($cliente, ['gama', 'maisa', 'canontex']))
                <x-selector-generico id="salida_comp2" idselect="salida_comp" :salida="$salida"  class="selector-generico d-none" style="width: 120px" selected="{{$salida_siksa}}">
                    <x-slot name="texto">
                        {{__('messages.selector-generico-texto-valor')}}
                    </x-slot>
                </x-selector-generico>
            @else
                <x-selector-generico id="salida_comp2" idselect="salida_comp" :salida="$salida_comparativo"  class="selector-generico" style="width: 120px" selected="{{$salida_siksa}}">
                    <x-slot name="texto">
                        {{__('messages.selector-generico-texto-valor')}}
                    </x-slot>
                </x-selector-generico>
            @endif

            <x-selector-generico id="f_pareto_comp2" idselect="f_pareto_comp" :salida="$paretos"  class="selector-generico" style="width: 120px" selected="">
                <x-slot name="texto">
                    {{__('messages.selector-generico-texto-pareto')}}
                </x-slot>
            </x-selector-generico>

            <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-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-semanas id="fltr_semx_comp" idselect="f_semx_comp_ini" :semanas="$semanasxComp" :semanawm="$periodos_walmart" 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_semx_comp2" idselect="f_semx_comp_fin" :semanas="$semanasxComp" :semanawm="$periodos_walmart" 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-meses id="fltr_mesx_comp" idselect="f_mesx_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_mesx_comp2" idselect="f_mesx_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>

            @if(in_array($cliente, $arr_dos_periodos))
                <div id="activador_dos_periodos_comp" style="display:none;"></div>
                <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-semanas id="fltr_semx_compf" idselect="f_semx_compf_ini" :semanas="$semanasxComp" :semanawm="$periodos_walmart" 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_semx_compf2" idselect="f_semx_compf_fin" :semanas="$semanasxComp" :semanawm="$periodos_walmart" 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>
                <x-selector-meses id="fltr_mesx_compf" idselect="f_mesx_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_mesx_compf2" idselect="f_mesx_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

            <x-selector-meses id="fltr_mes_sem_comp" idselect="f_mes_sem_comp_ini" :meses="$mesesComp" class="fltr_periodo_comp" style="display: none;">
                <x-slot name="texto">
                    Mes
                </x-slot>
            </x-selector-meses>
            <x-selector-semanas id="fltr_mes_sem_comp2" idselect="f_mes_sem_comp_fin" :semanas="$semanasComp" class="fltr_periodo_comp" style="display: none;">
                <x-slot name="texto">
                    Semana
                </x-slot>
            </x-selector-semanas>

            <x-selector-dias idpadre="comp" 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_comp" value="first_checkbox" style="margin-right: 5px"> Agrupar
                    </label>
                </div>
            @endif

            <x-boton-actualizar onclick="getComp('{{$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="">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" selected="{{$salida_siksa}}">
            
            </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-0" 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"  class="selector-generico" style="width: 120px" selected="{{$salida_siksa}}">
                <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 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>

            <x-selector-semanas id="fltr_semx_evo" idselect="f_semx_evo_ini" :semanas="$semanasx" :semanawm="$periodos_walmart" 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_semx_evo2" idselect="f_semx_evo_fin" :semanas="$semanasx" :semanawm="$periodos_walmart" 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>

            <x-selector-meses id="fltr_mesx_evo" idselect="f_mesx_evo_ini" :meses="$meses" class="fltr_periodo_evo" style="display: none;">
                <x-slot name="texto">
                    {{__('messages.selector-semanas-meses-texto-desde')}}
                </x-slot>
            </x-selector-meses>
            <x-selector-meses id="fltr_mesx_evo2" idselect="f_mesx_evo_fin" :meses="$meses" class="fltr_periodo_evo" style="display: none;">
                <x-slot name="texto">
                    {{__('messages.selector-semanas-meses-texto-hasta')}}
                </x-slot>
            </x-selector-meses>
            <!--AÑO-->
            <div id="fltr_year_evo" style="width:100px; 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:100px; 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" selected="{{$salida_siksa}}">
                <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:100px; 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:100px; 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="3-1" 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-0" 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" selected="{{$salida_siksa}}">
                <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:100px;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:100px;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: 100px;">
                <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:100px; 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:100px; 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: 100px;">
                <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: 100px;">
                <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['comisiones']))
        <x-tabla id="comisiones" style="height: 600px !important; {{$display_tabla}}" :filtros="$filtros" :filtrosAv="$filtrosAv" :filtrosAvAlias="$filtrosAvAlias">
            <x-selector-variable id="variables_comisiones" :lista='$variables_comisiones' cliente='$cliente'>
                <x-slot name="titulo">
                    {{__('messages.selector-variable-texto-fila')}}
                </x-slot>
            </x-selector-variable>
            <x-selector-meses id="fltr_mes_comisiones2" idselect="f_mes_comisiones_fin" :meses="$mesesComisiones" class="fltr_periodo_comp" style="">
                <x-slot name="texto">
                    Periodo
                </x-slot>
            </x-selector-meses>

            <x-boton-actualizar onclick="getComisionesBritannia('{{$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:100px; 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:100px; 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: 100px" 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['s2s']))
        <x-tabla id="s2s" style="height: 600px !important; {{$display_tabla}}" :filtros="$filtros" :filtrosAv="$filtrosAv" :filtrosAvAlias="$filtrosAvAlias">
            <x-selector-variable id="variables_s2s" :lista='$variables' selected="2-5" cliente='$cliente'/>
            <x-selector-variable id="variables_s2s2" :lista='$variables_2' selected="" cliente='$cliente'/>

            <x-selector-generico id="f_tmp_s2s2" idselect="f_tmp_s2s" :salida="$periodo"  class="selector-generico" style="width: 120px" selected="sem">
                <x-slot name="texto">
                    {{__('messages.selector-generico-texto-periodo')}}
                </x-slot>
            </x-selector-generico>
            <x-selector-dias style="display: none;" idpadre="s2s"/>

            
            <!--EVOLUTVO SEMANA-->
            <x-selector-semanas id="fltr_sem_s2s" idselect="f_sem_s2s_ini" :semanas="$semanas"  class="fltr_periodo_s2s">
                <x-slot name="texto">
                    {{__('messages.selector-semanas-meses-texto-desde')}}
                </x-slot>
            </x-selector-semanas>
            <x-selector-semanas id="fltr_sem_s2s2" idselect="f_sem_s2s_fin" :semanas="$semanas" class="fltr_periodo_s2s">
                <x-slot name="texto">
                    {{__('messages.selector-semanas-meses-texto-hasta')}}
                </x-slot>
            </x-selector-semanas>
            <!--EVOLUTVO MES-->
            <x-selector-meses id="fltr_mes_s2s" idselect="f_mes_s2s_ini" :meses="$meses" class="fltr_periodo_s2s" style="display: none;">
                <x-slot name="texto">
                    {{__('messages.selector-semanas-meses-texto-desde')}}
                </x-slot>
            </x-selector-meses>
            <x-selector-meses id="fltr_mes_s2s2" idselect="f_mes_s2s_fin" :meses="$meses" class="fltr_periodo_s2s" style="display: none;">
                <x-slot name="texto">
                    {{__('messages.selector-semanas-meses-texto-hasta')}}
                </x-slot>
            </x-selector-meses>
            <!--AÑO-->
            <div id="fltr_year_s2s" style="width:100px; display:none;" class="fltr_periodo_s2s 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_s2s_ini" name="f_year_s2s_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_s2s2" style="width:100px; display:none;" class="fltr_periodo_s2s 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_s2s_fin" name="f_year_s2s_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="getS2S('{{$cliente}}', 'ventas');"/>

            <x-infobox tamano="25px" texto="" modal="tabla_s2s_modal"/>
            <div class="modal fade bd-example-modal-lg" id="tabla_s2s_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 S2S</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> En este reporte, la salida siempre será la cantidad de ventas.</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['evomult']))
        <x-tabla id="evomult" style="height: 600px !important; {{$display_tabla}}" :filtros="$filtros" :filtrosAv="$filtrosAv" :filtrosAvAlias="$filtrosAvAlias">
            <x-selector-variable id="variables_evomult" :lista='$variables' selected="2-5" cliente='$cliente'/>

            <x-selector-generico id="salida_evomult2" idselect="salida_evomult" :salida="$salida_mult" 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_evomult2" idselect="f_tmp_evomult" :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="evomult" style="display:none;"/>

            <!--EVOLUTVO SEMANA-->
            <x-selector-semanas id="fltr_sem_evomult" idselect="f_sem_evomult_ini" :semanas="$semanas"  class="fltr_periodo_evomult" style="display: none;">
                <x-slot name="texto">
                    {{__('messages.selector-semanas-meses-texto-desde')}}
                </x-slot>
            </x-selector-semanas>
            <x-selector-semanas id="fltr_sem_evomult2" idselect="f_sem_evomult_fin" :semanas="$semanas" class="fltr_periodo_evomult" style="display: none;">
                <x-slot name="texto">
                    {{__('messages.selector-semanas-meses-texto-hasta')}}
                </x-slot>
            </x-selector-semanas>

            <x-selector-semanas id="fltr_semx_evomult" idselect="f_semx_evomult_ini" :semanas="$semanasx" :semanawm="$periodos_walmart" class="fltr_periodo_evomult" style="display: none;">
                <x-slot name="texto">
                    {{__('messages.selector-semanas-meses-texto-desde')}}
                </x-slot>
            </x-selector-semanas>
            <x-selector-semanas id="fltr_semx_evomult2" idselect="f_semx_evomult_fin" :semanas="$semanasx" :semanawm="$periodos_walmart" class="fltr_periodo_evomult" 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_evomult" idselect="f_mes_evomult_ini" :meses="$meses" class="fltr_periodo_evomult">
                <x-slot name="texto">
                    {{__('messages.selector-semanas-meses-texto-desde')}}
                </x-slot>
            </x-selector-meses>
            <x-selector-meses id="fltr_mes_evomult2" idselect="f_mes_evomult_fin" :meses="$meses" class="fltr_periodo_evomult">
                <x-slot name="texto">
                    {{__('messages.selector-semanas-meses-texto-hasta')}}
                </x-slot>
            </x-selector-meses>

            <x-selector-meses id="fltr_mesx_evomult" idselect="f_mesx_evomult_ini" :meses="$meses" class="fltr_periodo_evomult" style="display: none;">
                <x-slot name="texto">
                    {{__('messages.selector-semanas-meses-texto-desde')}}
                </x-slot>
            </x-selector-meses>
            <x-selector-meses id="fltr_mesx_evomult2" idselect="f_mesx_evomult_fin" :meses="$meses" class="fltr_periodo_evomult" style="display: none;">
                <x-slot name="texto">
                    {{__('messages.selector-semanas-meses-texto-hasta')}}
                </x-slot>
            </x-selector-meses>
            <!--AÑO-->
            <div id="fltr_year_evomult" style="width:100px; display:none;" class="fltr_periodo_evomult 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_evomult_ini" name="f_year_evomult_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_evomult2" style="width:100px; display:none;" class="fltr_periodo_evomult 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_evomult_fin" name="f_year_evomult_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="getEvoMult('{{$cliente}}', 'ventas');"/>
        </x-tabla>
        @php $display_tabla = 'display: none;'; @endphp
    @endif

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

            @if($cliente != 'maisa')
                <x-selector-generico id="salida_compsiso2" idselect="salida_compsiso" :salida="$salida"  class="selector-generico d-none" style="width: 120px" selected="{{$salida_siksa}}">
                    <x-slot name="texto">
                        {{__('messages.selector-generico-texto-valor')}}
                    </x-slot>
                </x-selector-generico>
            @else
                <x-selector-generico id="salida_compsiso2" idselect="salida_compsiso" :salida="$salida"  class="selector-generico" style="width: 120px" selected="{{$salida_siksa}}">
                    <x-slot name="texto">
                        {{__('messages.selector-generico-texto-valor')}}
                    </x-slot>
                </x-selector-generico>
            @endif
            
            <x-selector-generico id="f_tmp_compsiso2" idselect="f_tmp_compsiso" :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-semanas id="fltr_sem_compsiso" idselect="f_sem_compsiso_ini" :semanas="$semanasComp" class="fltr_periodo_compsiso" style="display: none;">
                <x-slot name="texto">
                    {{__('messages.selector-semanas-meses-texto-desde')}}
                </x-slot>
            </x-selector-semanas>
            <x-selector-semanas id="fltr_sem_compsiso2" idselect="f_sem_compsiso_fin" :semanas="$semanasComp" class="fltr_periodo_compsiso" style="display: none;">
                <x-slot name="texto">
                    {{__('messages.selector-semanas-meses-texto-hasta')}}
                </x-slot>
            </x-selector-semanas>

            <x-selector-semanas id="fltr_semx_compsiso" idselect="f_semx_compsiso_ini" :semanas="$semanasxComp" :semanawm="$periodos_walmart" class="fltr_periodo_compsiso" style="display: none;">
                <x-slot name="texto">
                    {{__('messages.selector-semanas-meses-texto-desde')}}
                </x-slot>
            </x-selector-semanas>
            <x-selector-semanas id="fltr_semx_compsiso2" idselect="f_semx_compsiso_fin" :semanas="$semanasxComp" :semanawm="$periodos_walmart" class="fltr_periodo_compsiso" style="display: none;">
                <x-slot name="texto">
                    {{__('messages.selector-semanas-meses-texto-hasta')}}
                </x-slot>
            </x-selector-semanas>

            <x-selector-meses id="fltr_mes_compsiso" idselect="f_mes_compsiso_ini" :meses="$mesesComp" class="fltr_periodo_compsiso" style="display: {{$display_}};">
                <x-slot name="texto">
                    {{__('messages.selector-semanas-meses-texto-desde')}}
                </x-slot>
            </x-selector-meses>
            <x-selector-meses id="fltr_mes_compsiso2" idselect="f_mes_compsiso_fin" :meses="$mesesComp" class="fltr_periodo_compsiso" style="display: {{$display_}};">
                <x-slot name="texto">
                    {{__('messages.selector-semanas-meses-texto-hasta')}}
                </x-slot>
            </x-selector-meses>

            <x-selector-meses id="fltr_mesx_compsiso" idselect="f_mesx_compsiso_ini" :meses="$mesesComp" class="fltr_periodo_compsiso" style="display: {{$display_}};">
                <x-slot name="texto">
                    {{__('messages.selector-semanas-meses-texto-desde')}}
                </x-slot>
            </x-selector-meses>
            <x-selector-meses id="fltr_mesx_compsiso2" idselect="f_mesx_compsiso_fin" :meses="$mesesComp" class="fltr_periodo_compsiso" style="display: {{$display_}};">
                <x-slot name="texto">
                    {{__('messages.selector-semanas-meses-texto-hasta')}}
                </x-slot>
            </x-selector-meses>

            <x-selector-dias idpadre="compsiso" 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_compsiso" value="first_checkbox" style="margin-right: 5px"> Agrupar
                    </label>
                </div>
            @endif

            <x-boton-actualizar onclick="getCompSiso('{{$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="">Tabla Comparativo SI vs SO</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>
                        <p>La tabla consulta las Ventas Sell Out para un determinado periodo vs el mismo periodo del año anterior pero de las Ventas Sell In.</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 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['nuevo_desc']))
        <x-tabla id="nuevo_desc" style="height: 600px !important; {{$display_tabla}}" :filtrosAv="$filtrosAv" :filtrosAvAlias="$filtrosAvAlias">
            <x-selector-generico id="f_nuevo_desc2" idselect="f_nuevo_desc" :salida="$variable_nuevo_desc"  class="selector-generico" style="width: 120px">
                <x-slot name="texto">
                    {{__('messages.nuevo_desc')}}
                </x-slot>
            </x-selector-generico>
            
            <x-selector-generico id="salida_nuevo_desc2" idselect="salida_nuevo_desc" :salida="$salida_nuevo_desc"  class="selector-generico" style="width: 120px">
                <x-slot name="texto">
                    {{__('messages.grupo-Producto').' / '.__('messages.grupo-Local')}}
                </x-slot>
            </x-selector-generico>

            <x-selector-generico id="salida_nuevo_desc_campo2" idselect="salida_nuevo_desc_campo" :salida="$salida2"  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_mes_corte_new2" idselect="f_mes_corte_n" :salida="json_encode($mes_new)"  class="selector-generico" style="width: 160px" selected="4">
                <x-slot name="texto">
                    {{__('messages.nuevo-hace')}}
                </x-slot>
            </x-selector-generico>

            <x-selector-generico id="f_mes_corte_desc2" idselect="f_mes_corte_desc" :salida="json_encode($mes_desc)"  class="selector-generico d-none" style="width: 160px;" selected="4">
                <x-slot name="texto">
                    {{__('messages.sin-ventas-en')}}
                </x-slot>
            </x-selector-generico>

            <x-boton-actualizar onclick="getNuevoDesc('{{$cliente}}', 'ventas');" />
            
        </x-tabla>
        @php $display_tabla = ' display: none;'; @endphp
    @endif
    @if(isset($selectores_tabla['evo_hoffmann']))
        <x-tabla id="evo_hoffmann" style="height: 600px !important; {{$display_tabla}}" :filtros="$filtros" :filtrosAv="$filtrosAv" :filtrosAvAlias="$filtrosAvAlias">
            <x-selector-generico id="vari_evo_hoffmann2" idselect="vari_evo_hoffmann" :salida="$variable_salida"  class="selector-generico" style="width: 120px">
                <x-slot name="texto">
                    Variable
                </x-slot>
            </x-selector-generico>
            <x-selector-generico id="salida_evo_hoffmann2" idselect="salida_evo_hoffmann" :salida="$salida_hoffmann"  class="selector-generico" style="width: 120px" selected="{{$salida_siksa}}">
                <x-slot name="texto">
                    {{__('messages.selector-generico-texto-valor')}}
                </x-slot>
            </x-selector-generico>
        


        
            <!--evo_hoffmannLUTVO MES-->
            <x-selector-meses id="fltr_mes_evo_hoffmann" idselect="f_mes_evo_hoffmann_ini" :meses="$meses" class="fltr_periodo_evo_hoffmann" >
                <x-slot name="texto">
                    {{__('messages.selector-semanas-meses-texto-desde')}}
                </x-slot>
            </x-selector-meses>
            <x-selector-meses id="fltr_mes_evo_hoffmann2" idselect="f_mes_evo_hoffmann_fin" :meses="$meses" class="fltr_periodo_evo_hoffmann" >
                <x-slot name="texto">
                    {{__('messages.selector-semanas-meses-texto-hasta')}}
                </x-slot>
            </x-selector-meses>

            <x-selector-meses id="fltr_mesx_evo_hoffmann" idselect="f_mesx_evo_hoffmann_ini" :meses="$meses" class="fltr_periodo_evo_hoffmann" style="display: none;">
                <x-slot name="texto">
                    {{__('messages.selector-semanas-meses-texto-desde')}}
                </x-slot>
            </x-selector-meses>
            <x-selector-meses id="fltr_mesx_evo_hoffmann2" idselect="f_mesx_evo_hoffmann_fin" :meses="$meses" class="fltr_periodo_evo_hoffmann" style="display: none;">
                <x-slot name="texto">
                    {{__('messages.selector-semanas-meses-texto-hasta')}}
                </x-slot>
            </x-selector-meses>
            <!--AÑO-->
        
            <x-boton-actualizar onclick="getevo_hoffmann('{{$cliente}}', 'ventas');"/>

            <x-infobox tamano="25px" texto="" modal="tabla_evo_hoffmannlutivo_modal"/>
            <div class="modal fade bd-example-modal-lg" id="tabla_evo_hoffmannlutivo_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 evo_hoffmannlutivo</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

@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}}";
        let usuario_ = "{{Auth::user()->usuario}}";
        $("#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_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','evo_hoffmann','comp','comparativo', 'inout', 'grafdri', 'graftree', 'grafvar', 'grafmatri', 'grafcrec', 'grafevo', 'grafcomp','perdidas', 'evo_sell_in', 's2s', 'evomult', 'compsiso', 'grafcomptop', 'nuevo_desc','comisiones'];
        
        $(document).ready(() => {
            let usuario_ = "{{Auth::user()->usuario}}";

            if(cliente_ == "gama" || cliente_ == "afee"){
                $("#btn-grafico").click();
            }

            jQuery.extend( jQuery.fn.dataTableExt.oSort, {
                "percent-pre": function ( a ) {
                    var x = (a == "--%") ? 0 : a.replace( /%/, "" );
                    return parseFloat( x );
                },

                "percent-asc": function ( a, b ) {
                    return ((a < b) ? -1 : ((a > b) ? 1 : 0));
                },

                "percent-desc": function ( a, b ) {
                    return ((a < b) ? 1 : ((a > b) ? -1 : 0));
                }
            } );

            $("#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')}}");
                }
            }

            // $("#f_clientes_comp").select2({closeOnSelect:false, multiple: true, placeholder: "Seleccionar Cliente", width: "auto"});
            $('#variables_comp').select2MultiCheckboxes({
                placeholder: "{{__('messages.elegir-variables')}}",
                width: "auto",
                templateSelection: function(selected, total) {
                    return selected.length + " de " + total + " total";
                }
            });

            $('#variables_mec3meses1').select2MultiCheckboxes({
                placeholder: "{{__('messages.elegir-variables')}}",
                width: "auto",
                templateSelection: function(selected, total) {
                    return selected.length + " de " + total + " total";
                }
            });

            $('#variables_comparativo').select2MultiCheckboxes({
                placeholder: "{{__('messages.elegir-variables')}}",
                width: "auto",
                templateSelection: function(selected, total) {
                    return selected.length + " de " + total + " total";
                }
            });

            $('#variables_evomult').select2MultiCheckboxes({
                placeholder: "{{__('messages.elegir-variables')}}",
                width: "auto",
                templateSelection: function(selected, total) {
                    return selected.length + " de " + total + " total";
                }
            });

            $('#variables_compsiso').select2MultiCheckboxes({
                placeholder: "{{__('messages.elegir-variables')}}",
                width: "auto",
                templateSelection: function(selected, total) {
                    return selected.length + " de " + total + " total";
                }
            });

            $('#salida_evomult').select2MultiCheckboxes({
                placeholder: "{{__('messages.elegir-variables')}}",
                width: "auto",
                templateSelection: function(selected, total) {
                    return selected.length + " de " + total + " total";
                }
            });
            
            let ahora = new Date();

            let congifDate = {
                ...("{{config('app.locale')}}" == "es") && {
                    locale: {
                        format: 'YYYY/MM/DD',
                        daysOfWeek: ["Do", "Lu", "Ma", "Mi", "Ju", "Vi", "Sa"],
                        monthNames: ["Enero", "Febrero", "Marzo", "Abril",
                                    "Mayo", "Junio", "Julio", "Agosto",
                                    "Septiembre", "Octubre", "Noviembre", "Diciembre"],
                        applyLabel: "Aplicar",
                        cancelLabel: "Cancelar",
                        firstDay: 1
                    }
                },
                    maxDate: moment(ahora),
                    startDate: moment((new Date()).setDate(ahora.getDate()-21)),
                    endDate: moment((new Date()).setDate(ahora.getDate()-1))
            };
            ["#f_dia_inout_ini","#f_dia_comp_ini", "#f_dia_comparativo_ini","#f_dia_matri_ini", "#f_dia_grafcrec_ini", '#f_dia_evomult_ini', '#f_dia_compsiso_ini', '#f_dia_grafcomptop_ini'].forEach((selector, i) => {
                $(selector).daterangepicker(congifDate);
            });
            congifDate2 = congifDate;
            congifDate2.startDate = moment((new Date()).setDate(ahora.getDate()-15));
            ["#f_dia_grafevo_fin", "#f_dia_evo_fin", ,"#f_dia_evo_sell_in_ini", "#f_dia_evo_sell_in_fin"].forEach((selector, i) => {
                $(selector).daterangepicker(congifDate2);
            });
            congifDate3 = congifDate;
            congifDate3.startDate = moment((new Date()).setDate(ahora.getDate()-30)); // Configuración Calendario últimos 30 días
            ["#f_dia_grafevo_ini", "#f_dia_grafdri_ini", "#f_dia_graftree_ini", "#f_dia_evo_ini"].forEach((selector, i) => {
                $(selector).daterangepicker(congifDate3);
            });

            congifDate["minDate"] = moment(new Date(ahora.getFullYear(), 0, 1));
            [ "#f_dia_grafcomp_fin"].forEach((selector, i) => {
                $(selector).daterangepicker(congifDate);
            });
            congifDate3["minDate"] = moment((new Date()).setDate(ahora.getDate()-730));
            [ "#f_dia_grafcomp_ini"].forEach((selector, i) => {
                $(selector).daterangepicker(congifDate3);
            });
            congifDate3["minDate"] = moment((new Date()).setDate(ahora.getDate()-365));
            [ "#f_dia_grafmatri_ini"].forEach((selector, i) => {
                $(selector).daterangepicker(congifDate3);
            });
            $("#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));
            congifDate4 = congifDate;
            congifDate4.startDate = moment((new Date()).setDate(ahora.getDate()-{{(date('j')-1)}})); // Configuración Calendario MEC
            congifDate4["minDate"] = moment(fechaMin);
            //maxdate yesterday
            congifDate4["maxDate"] = moment((new Date()).setDate(ahora.getDate()-1));
            [ "#f_dia_grafvar_ini"].forEach((selector, i) => {
                $(selector).daterangepicker(congifDate4);
            });
            $('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 == '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");

            if($('#activador_dos_periodos_comp')){
                $('#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(cliente_ != 'lesaffre'){
                $('#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();
                // $('#f_type_grafcomp').val('mscolumn2d').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
              
                let sem = moment().subtract(1, 'weeks').format('YYYY') + moment().subtract(1, 'weeks').format('WW');
                console.log(sem);
                $('#f_sem_comp_ini').val(sem).change(); // Semana de comparación
 
            }else if(['clorox'].includes(cliente_)){
                // Gráfico Evolutivo
                $("#f_tmp_grafevo").val('mes').change(); // Desglose por mes
                $("#f_mes_grafevo_ini").val("{{(date('Y')).'01'}}").change(); // Que inicie desde enero del año actual
                // Gráfico Comparativo
                $('#f_tmp_grafcomp').val('sem').change(); // Desglose por semana
                $('#salida_grafcomp').val('33').change(); // Ventas con IVA
                // Gráfico Matriz
                $('#f_tmp_grafmatri').val('mec').change(); // Data para el mes en curso
                // Gráfico Crecimiento
                $('#variables_grafcrec').val('2-5').change(); // Visualización por CLiente
                $('#f_tmp_grafcrec').val('sem').change(); // Data para semanas
                // Gráfico Tree
                $('#f_tmp_graftree').val('sem').change(); // Data para semanas

                // Tabla Evolución
                $('#variables_evo').val('2-5').change(); // Desglose por Cliente
                $("#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 actual
                // Tabla Comparación
                $('#variables_comp').val(['2-5', '2-0']).change(); // Desglose por Cliente y Cadena
                // Tabla Matriz
                $('#variables_matri1').val('1-1').change(); // Variables Filas = Marca
                $('#variables_matri2').val('2-5').change(); // Variables Columnas = Cliente
            }else if(['mdlzchile'].includes(cliente_)){
                // Gráfico Evolutivo
                $("#f_tmp_grafevo").val('sem').change(); // Desglose por semana
                // Gráfico Comparativo
                $('#f_tmp_grafcomp').val('sem').change(); // Desglose por semana
                // Gráfico Matriz
                $('#f_tmp_grafmatri').val('mec').change(); // Data para el mes en curso
                // Gráfico Crecimiento
                $('#f_tmp_grafcrec').val('sem').change(); // Data para semanas
                // Gráfico Variación
                $("#f_dia_grafvar_ini").daterangepicker(congifDate3);

                // Tabla Evolución
                $("#f_tmp_evo").val('sem').change(); // Desglose por semana
                $('#variables_evo').val('2-5').change(); // Desglose por Cliente
                // Tabla Comparación
                $('#variables_comp').val(['2-5', '2-0']).change(); // Desglose por Cliente y Cadena
                $('#f_tmp_comp').val('sem').change(); // Desglose por semana
                // Tabla Matriz
                $('#variables_matri1').val('1-1').change(); // Variables Filas = Marca
                $('#variables_matri2').val('2-5').change(); // Variables Columnas = Cliente
                $('#f_tmp_matri').val('dia').change(); // Periodo a buscar: Días
            }else if(['genomma'].includes(cliente_)){
                // Gráfico Evolutivo
                $("#f_tmp_grafevo").val('mes').change(); // Desglose por mes
                // Gráfico Comparativo
                $('#f_tmp_grafcomp').val('mes').change(); // Desglose por mes
                // Gráfico Matriz
                $('#f_tmp_grafmatri').val('mec').change(); // Data para el mes en curso
                // Gráfico Crecimiento
                $('#f_tmp_grafcrec').val('mes').change(); // Data para mes
                let seis_meses_atras = moment().subtract(6, 'months').format('YYYY') + moment().subtract(6, 'months').format('MM');
                $('#f_mes_grafcrec_ini').val(seis_meses_atras).change(); // Que inicie desde hace 6 meses
                $('#variables_grafcrec').val('2-1').change(); // Visualización por Canal

                // Gráfico Variación
                $("#f_dia_grafvar_ini").daterangepicker(congifDate3);
    
                // Tabla Evolución
                $("#f_tmp_evo").val('mes').change(); // Desglose por mes

            }else if(['lesaffre'].includes(cliente_)){ // Todas las vistas en unidades
                for(let id of ids) {
                    if($('#salida_'+id).length > 0){
                        if(!['grafvar'].includes(id)){ // Array de subsecciones que no tienen reporte salida de este tipo: Ejemplo: Grafvar tiene como salida Dinero ($) o Porcentaje (%)
                            $('#salida_'+id).val('1').change();
                        }
                    }
                }
            }else if(cliente_ == 'gama'){
                // Gráfico Evolución
                $("#f_tmp_grafevo").val('mes').change(); // Desglose por mes
                $("#f_mes_grafevo_ini").val("{{(date('Y')).'01'}}").change(); // Que inicie desde enero del año actual

                // Gráfico Matriz
                $('#f_tmp_grafmatri').val('mec').change();
                $('#variables_grafmatri').val('2-5').change();
                $('#variables_grafcomp').val('2-5').change(); // Por Cliente

                $('#variables_grafcomptop').val('2-5').change(); // Por Cliente
                
                // Gráfico Crecimiento
                $('#variables_grafcrec').val('2-5').change(); // Por Cliente
                $('#f_tmp_grafcrec').val('mes').change(); // Desglose por mes
                $('#f_mes_grafcrec_ini').val("{{(date('Y')).'01'}}").change();

                // let sem = moment().subtract(1, 'weeks').format('YYYY') + moment().subtract(1, 'weeks').format('WW');
                // let mes = moment().format('YYYY') + moment().format('MM');
                $('#variables_matri1').val('2-5').change();
                $('#variables_matri2').val('1-1').change();
                // $('#f_mes_sem_comp_ini').val(mes).change();

                // $('#f_mes_sem_comp_fin').val(sem).change();
                $('#f_tmp_comp').val('mec').change(); // Desglose por mes

                // Tabla Comparación
                //$('#salida_comp2').val('33').change(); // Ventas con IVA
                $('#variables_comp').val(['2-5']).change(); // Categoría, Marca

                // Tabla Evolución
                $("#f_tmp_evo").val('mes').change(); // Desglose por mes
                $('#variables_evo').val('2-5').change(); // Default Cliente
            }else if(cliente_ == 'grupomor'){
                // Gráfico Evolución
                $("#f_tmp_grafevo").val('mes').change(); // Desglose por mes
                $("#f_mes_grafevo_ini").val("{{(date('Y')).'01'}}").change(); // Que inicie desde enero del año actual

            


                // Gráfico Crecimiento
                $('#f_tmp_grafcrec').val('mes').change(); // Desglose por mes
                $('#f_mes_grafcrec_ini').val("{{(date('Y')).'01'}}").change();

                // let sem = moment().subtract(1, 'weeks').format('YYYY') + moment().subtract(1, 'weeks').format('WW');
                // let mes = moment().format('YYYY') + moment().format('MM');

                // $('#f_mes_sem_comp_ini').val(mes).change();

                // $('#f_mes_sem_comp_fin').val(sem).change();

                // Tabla Comparación
                //$('#salida_comp2').val('33').change(); // Ventas con IVA

                // Tabla Evolución
                $("#f_tmp_evo").val('mes').change(); // Desglose por mes
            }else if(cliente_ == 'britanniafoods'){
                $('#variables_comisiones').val('1-2').change(); // Desglose por Holding

                let mes = moment().subtract(1, 'months').format('YYYY') + moment().subtract(1, 'months').format('MM');

                console.log(mes);
                 $('#f_mes_comisiones_fin').val(mes).change();

            }else if(cliente_ == 'canontex'){
                // Gráfico Matriz
                $('#variables_grafmatri').val('2-5').change(); // Desglose por Holding
                $('#f_tmp_grafmatri').val('mec').change();

                // Gráfico Crecimiento
                $('#variables_grafcrec').val('2-5').change(); // Desglose por Holding
                $('#f_tmp_grafcrec').val('mes').change(); // Default por mes

                // Tabla Matriz
                $('#variables_matri1').val('1-3').change();
                $('#variables_matri2').val('2-5').change();

                console.log(usuario_);
                if(usuario_ == 'cannon.talca'){
                    // Tabla Comparación
                    $('#variables_comp').val('1-15').change();
                    $('#variables_evo').val('1-15').change(); 



                }else{
                    $('#variables_comp').val('2-5').change();
                    $('#variables_evo').val('2-5').change(); 


                }
                $('#f_tmp_evo').val('mes').change();


                // Tabla Evolución Múltiple
                $('#salida_evomult').val(['2', '1', '3']).change();
            }else if(cliente_ == 'cintaazul'){
                // Gráfico Evolución
                $('#variables_grafevo').val('2-5').change();

                // Tabla Comparativo
                $('#variables_comp').val(['2-0', '1-1']).change();

                // Tabla Evolución
                $('#variables_evo').val('2-5').change();

                // Tabla Matriz
                $('#variables_matri1').val('2-5').change();
                $('#variables_matri2').val('1-1').change();
            }else if(cliente_ == 'juanvaldez'){
                $('#variables_comp').val(['2-5', '2-0']).change(); // Desglose por Cliente y Cadena

            }else if(cliente_ == 'team'){
                $("#f_tmp_grafevo").val('mes').change(); // Desglose por mes

            }else if(['mdlzcolombia', 'mdlzcostarica', 'mdlzguatemala', 'mdlzhonduras', 'mdlznicaragua', 'mdlzperu', 'mdlzsalvador'].includes(cliente_)){
                $('#variables_matri1').val('1-1').change();
            }else if(cliente_ == 'kunafoods'){
                $('#variables_grafcomp').val('3-4').change();
                $('#variables_grafmatri').val('3-4').change();
                $('#variables_grafcrec').val('3-4').change();
                $('#variables_comp').val('3-4').change();
                $('#variables_evo').val('3-4').change();
                $('#variables_matri2').val('3-4').change();
            }

            $("#f_nuevo_desc").on('change', function() {
                var selectedValue = $(this).val();
                if(selectedValue == "desc") {
                    console.log('entra')
                    $("#f_mes_corte_new2").addClass('d-none');
                    $("#f_mes_corte_desc2").removeClass('d-none');
                }else{
                    $("#f_mes_corte_new2").removeClass('d-none');
                    $("#f_mes_corte_desc2").addClass('d-none');
                }
            });
        });
        var filtrosPromise = getFiltrosAv('{{$cliente}}', '{{$codigo}}');

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

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