@extends('layouts.reporte')

@section('php')
    @php

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

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

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

        $tipo_periodo = 'mec';
        $tipo_periodo_ = 'dia';

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

    
        $salida_siksa = 2;

        $array_clientes = [];
        $salida = json_encode(['351' => __('messages.ventas'), '352' => __('messages.unidades'), '353' => __('messages.costo')]);
        $salida_matri = json_encode(['351' => __('messages.ventas'), '352' => __('messages.unidades')]);
        $salida_vcomuna = json_encode(['351' => __('messages.ventas')]);
        $salida_default = json_encode(['351' => __('messages.ventas')]);
        // 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')]);
        $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(['351' => __('messages.ventas'), '352' => __('messages.unidades'), '353' => __('messages.costo'), '355' => __('messages.unidadespack')]);
            $salida_matri = json_encode(['351' => __('messages.ventas'), '352' => __('messages.unidades'), '355' => __('messages.unidadespack')]);
        }else if($cliente == 'unibag'){
            $salida = json_encode(['351' => __('messages.ventas'), '352' => __('messages.unidades'), '353' => __('messages.costo'), '355' => __('messages.cajas')]);
            $salida_matri = json_encode(['351' => __('messages.ventas'), '352' => __('messages.unidades'), '355' => __('messages.cajas')]);
        }else if($cliente == 'siksa'){
            $salida_siksa = 10;
            $salida = json_encode(['355' => "Kilos (Kg)", '351' => __('messages.ventas'), '354' => 'Ventas + IVA ($)', '352' => __('messages.unidades'), '353' => __('messages.costo')]);
            $salida_matri = json_encode(['355' => "Kilos (Kg)", '351' => __('messages.ventas'), '352' => __('messages.unidades') ]);
            $salida_mec3meses  = json_encode(['355' => "Kilos (Kg)", '351' => __('messages.ventas'), '352' => __('messages.unidades') ]);
        }else if($cliente == "manares"){
            $salida = json_encode(['351' => __('messages.ventas'), '352' => __('messages.unidades'), '353' => __('messages.costo'), '800' => __('messages.margen'),
            "600"=> __('messages.contribucion')]);
            $salida_matri = json_encode(['351' => __('messages.ventas'), '352' => __('messages.unidades'), '800' => __('messages.margen'), '600'=> __('messages.contribucion')]);
        }else if($cliente == "empresaspolar"){
            $salida = json_encode(['351' => __('messages.ventas'), '354' => 'Ventas + IVA ($)', '352' => __('messages.unidades'), '353' => __('messages.costo')]);
            $salida_matri = json_encode(['351' => __('messages.ventas'), '354' => 'Ventas + IVA ($)', '352' => __('messages.unidades')]);
        }else if($cliente == 'ducasse'){
            $salida = json_encode(['354'=> __('messages.ventas'), '355' => __('messages.unidades'), '301' => __('messages.costo')]);
            $salida_matri = json_encode(['354'=> __('messages.ventas'), '355' => __('messages.unidades'), '301' => __('messages.costo')]);
            $salida_vcomuna = json_encode(['354' => __('messages.ventas')]);
            $salida_default = json_encode(['354' => __('messages.ventas')]);
        }else if(in_array($cliente, ['maisa'])){
            $salida = json_encode(['351' => __('messages.ventas_con_iva'), '352' => __('messages.unidades'), '353' => __('messages.costo'), '354' => __('messages.ventas_sin_iva')]);
            $salida_matri = json_encode(['351' => __('messages.ventas_con_iva'), '352' => __('messages.unidades'), '353' => __('messages.costo'), '354' => __('messages.ventas_sin_iva')]);
            $salida_default = json_encode(['351' => __('messages.ventas_con_iva'), '354' => __('messages.ventas_sin_iva')]);
        }else if(in_array($cliente, ['clorox'])){
            $salida = json_encode(['351' => __('messages.ventas_sin_iva'), '357' => __('messages.ventas_con_iva'), '352' => __('messages.unidades'), '353' => __('messages.costo'), '355' => __('messages.sc'), '356' => __('messages.ac')]);
            $salida_matri = $salida;

            $periodo = json_encode(['dia'=> __('messages.dias'), 'sem' => __('messages.semanas'), 'mes' => __('messages.meses'), 'fye' => 'Año Fiscal', 'trif' => 'Trimestre Fiscal']);
            $periodo_grafmatri = json_encode(['ytdf' => __('messages.ytdf'), 'ytd' => __('messages.ytd'), 'mec' => __('messages.mec'), 'dia' => __('messages.dias'), 'fye' => 'Año Fiscal', 'trif' => 'Trimestre Fiscal']);
            $periodo_comp = json_encode(['dia'=> __('messages.dias'), 'ytdf' => __('messages.ytdf'), 'ytd' => __('messages.ytd'), 'mec' => __('messages.mec'), 'sem' => __('messages.semanas'), 
            'mes' => __('messages.meses'), 'uam' => __('messages.ult-anio-movil'), 'fye' => 'Año Fiscal', 'trif' => 'Trimestre Fiscal']);
            $periodo_grafcomp = json_encode(['dia'=> __('messages.dias'), 'sem' => __('messages.semanas'), 'mes' => __('messages.meses'), 'ytdf' => __('messages.ytdf'), 'ytd' => __('messages.ytd'), 'trif' => 'Trimestre Fiscal', 'trif' => 'Trimestre Fiscal']);
            $periodo_matri = json_encode(['ytdf' => __('messages.ytdf'), 'ytd' => __('messages.ytd'), 'mec' => __('messages.mec'), 'mes' => __('messages.meses'), 'sem' => __('messages.semanas'), 
            'dia' => __('messages.dias'), 'fye' => 'Año Fiscal', 'trif' => 'Trimestre Fiscal']);
        }else if($cliente == 'genomma'){
            $salida = json_encode(['354' => 'Ventas CUF ($)' ,'351' => __('messages.ventas'), '352' => __('messages.unidades'), '353' => __('messages.costo'), "2222" => "Ventas ($) GLC ","1111" => "Unidades (U) GLC"]);
            $salida_matri = $salida;
        }

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

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

        $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']);


        use Illuminate\Support\Facades\DB;
        $periodoMax = DB::table('data_b2b_trad')->select(DB::raw('max(periodo) as periodo'))->get();

        foreach ($meses as $value) {
            list($_mes, $_year) = explode(' ', $value->nombre);
            //if(($_year == $yearAct || $_year == $yearAnt || $_year == $yearAnt2) && $value->periodo <= $periodoMax[0]->periodo+1)  {
            if($_year == $yearAct || $_year == $yearAnt || $_year == $yearAnt2) {
                $mesesComp []= $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 == $yearAct) {
                $semanasComp []= $value;
            }
        }
        if ($div_reportes != null) {
            $div = '<div style="padding: 5px 16px;overflow: hidden;background-color: lightblue;text-align: center;"><ul>';
            foreach ($div_reportes as $value) {
                $div.="<li>".$value->Descripcion."</li>";
            }
            $div.="</ul></div>";
        }else{
            $div='';
        }
        $variables_2 = $variables_3 = $variables;
        if(in_array($cliente, ['siksa', 'loveco', 'lesaffre'])){ // Permite el cruce Locales x Producto
            // No se eliminan estas opciones.
        }else{
            if(isset($variables_2['Local']) && isset($variables_2['Local']['3-5'])){
                unset($variables_2['Local']['3-5']);
                unset($variables_3['Local']['3-5']);
            }
            if(isset($variables_2['Producto']) && isset($variables_2['Producto']['1-15'])){
                unset($variables_2['Producto']['1-15']);
            }
        }

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

        $ninguno = ['' => ['-1' => 'Sin Seleccionar']];
        $variables_2 = $ninguno + $variables_2;
        $variables_inout[""]["total"] = __('messages.compañia');

        $variables['Canal-Tradicional'] = ['351-1' => 'Identificador Cliente'];
        //$variables['Local'] = ['351-1' => 'Identificador Cliente'];
        //unset($variables['Local']['3-5']);

        $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 = ['clorox'];
    @endphp
@endsection
@section('div_reportes')
    @php echo $div; @endphp
@endsection

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

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

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

            <!--EVOLUTVO SEMANA-->
            <x-selector-semanas id="fltr_sem_grafcomp" idselect="f_sem_grafcomp_ini" :semanas="$semanas"  class="fltr_periodo_grafcomp" style="display: none;">
                <x-slot name="texto">
                    {{__('messages.selector-semanas-meses-texto-desde')}}
                </x-slot>
            </x-selector-semanas>
            <x-selector-semanas id="fltr_sem_grafcomp2" idselect="f_sem_grafcomp_fin" :semanas="$semanas" class="fltr_periodo_grafcomp" style="display: none;">
                <x-slot name="texto">
                    {{__('messages.selector-semanas-meses-texto-hasta')}}
                </x-slot>
            </x-selector-semanas>
            <!--EVOLUTVO SEMANA-->
            <x-selector-semanas id="fltr_sem_wd_grafcomp" idselect="f_sem_wd_grafcomp_ini" :semanas="$semanas"  class="fltr_periodo_grafcomp" style="display: none;">
                <x-slot name="texto">
                    {{__('messages.selector-semanas-meses-texto-desde')}}
                </x-slot>
            </x-selector-semanas>
            <x-selector-semanas id="fltr_sem_wd_grafcomp2" idselect="f_sem_wd_grafcomp_fin" :semanas="$semanas" class="fltr_periodo_grafcomp" style="display: none;">
                <x-slot name="texto">
                    {{__('messages.selector-semanas-meses-texto-hasta')}}
                </x-slot>
     
            </x-selector-semanas>
            <!--EVOLUTVO MES-->
            <x-selector-meses id="fltr_mes_grafcomp" idselect="f_mes_grafcomp_ini" :meses="$mesesComp" class="fltr_periodo_grafcomp">
                <x-slot name="texto">
                    {{__('messages.selector-semanas-meses-texto-desde')}}
                </x-slot>
            </x-selector-meses>
            <x-selector-meses id="fltr_mes_grafcomp2" idselect="f_mes_grafcomp_fin" :meses="$mesesComp" class="fltr_periodo_grafcomp">
                <x-slot name="texto">
                    {{__('messages.selector-semanas-meses-texto-hasta')}}
                </x-slot>
            </x-selector-meses>

            <x-selector-fiscal id="fltr_fye_grafcomp" idselect="f_fye_grafcomp_ini" :fiscal="$fiscal" class="fltr_periodo_grafcomp" style="display: none;">
                <x-slot name="texto">
                    {{__('messages.selector-semanas-meses-texto-desde')}}
                </x-slot>
            </x-selector-fiscal>
            <x-selector-fiscal id="fltr_fye_grafcomp2" idselect="f_fye_grafcomp_fin" :fiscal="$fiscal" class="fltr_periodo_grafcomp" style="display: none;">
                <x-slot name="texto">
                    {{__('messages.selector-semanas-meses-texto-hasta')}}
                </x-slot>
            </x-selector-fiscal>

            <x-selector-trimestref id="fltr_trif_grafcomp" idselect="f_trif_grafcomp_ini" :trimestref="$trimestref" class="fltr_periodo_grafcomp" style="display:none;">
                <x-slot name="texto">
                    {{__('messages.selector-semanas-meses-texto-desde')}}
                </x-slot>
            </x-selector-trimestref>
            <x-selector-trimestref id="fltr_trif_grafcomp2" idselect="f_trif_grafcomp_fin" :trimestref="$trimestref" class="fltr_periodo_grafcomp" style="display:none;">
                <x-slot name="texto">
                    {{__('messages.selector-semanas-meses-texto-hasta')}}
                </x-slot>
            </x-selector-trimestref>

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

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

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

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

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

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

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

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

            <x-selector-generico id="salida_grafevo2" idselect="salida_grafevo" :salida="$salida"  class="selector-generico" style="width: 120px">
                <x-slot name="texto">
                    {{__('messages.selector-generico-texto-valor')}}
                </x-slot>
            </x-selector-generico>
            <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>
            <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>
            <!--EVOLUTVO SEMANA-->
            <x-selector-semanas id="fltr_sem_grafevo" idselect="f_sem_grafevo_ini" :semanas="$semanas"  class="fltr_periodo_grafevo" style="display: none;">
                <x-slot name="texto">
                    {{__('messages.selector-semanas-meses-texto-desde')}}
                </x-slot>
            </x-selector-semanas>
            <x-selector-semanas id="fltr_sem_grafevo2" idselect="f_sem_grafevo_fin" :semanas="$semanas" class="fltr_periodo_grafevo" style="display: none;">
                <x-slot name="texto">
                    {{__('messages.selector-semanas-meses-texto-hasta')}}
                </x-slot>
            </x-selector-semanas>
            <!--AÑO-->
            <div id="fltr_year_grafevo" style="width: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-fiscal id="fltr_fye_grafevo" idselect="f_fye_grafevo_ini" :fiscal="$fiscal" class="fltr_periodo_grafevo" style="display: none;">
                <x-slot name="texto">
                    {{__('messages.selector-semanas-meses-texto-desde')}}
                </x-slot>
            </x-selector-fiscal>
            <x-selector-fiscal id="fltr_fye_grafevo2" idselect="f_fye_grafevo_fin" :fiscal="$fiscal" class="fltr_periodo_grafevo" style="display: none;">
                <x-slot name="texto">
                    {{__('messages.selector-semanas-meses-texto-hasta')}}
                </x-slot>
            </x-selector-fiscal>

            <x-selector-trimestref id="fltr_trif_grafevo" idselect="f_trif_grafevo_ini" :trimestref="$trimestref" class="fltr_periodo_grafevo" style="display:none;">
                <x-slot name="texto">
                    {{__('messages.selector-semanas-meses-texto-desde')}}
                </x-slot>
            </x-selector-trimestref>
            <x-selector-trimestref id="fltr_trif_grafevo2" idselect="f_trif_grafevo_fin" :trimestref="$trimestref" class="fltr_periodo_grafevo" style="display:none;">
                <x-slot name="texto">
                    {{__('messages.selector-semanas-meses-texto-hasta')}}
                </x-slot>
            </x-selector-trimestref>

            <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="mes">
                <x-slot name="texto">
                    {{__('messages.selector-generico-texto-periodo')}}
                </x-slot>
            </x-selector-generico>

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

            <!--EVOLUTVO SEMANA-->
            <x-selector-semanas id="fltr_sem_grafdri" idselect="f_sem_grafdri_ini" :semanas="$semanas"  class="fltr_periodo_grafdri" style="display: none;">
                <x-slot name="texto">
                    {{__('messages.selector-semanas-meses-texto-desde')}}
                </x-slot>
            </x-selector-semanas>
            <x-selector-semanas id="fltr_sem_grafdri2" idselect="f_sem_grafdri_fin" :semanas="$semanas" class="fltr_periodo_grafdri" style="display: none;">
                <x-slot name="texto">
                    {{__('messages.selector-semanas-meses-texto-hasta')}}
                </x-slot>
            </x-selector-semanas>
            <!--EVOLUTVO MES-->
            <x-selector-meses id="fltr_mes_grafdri" idselect="f_mes_grafdri_ini" :meses="$meses" class="fltr_periodo_grafdri">
                <x-slot name="texto">
                    {{__('messages.selector-semanas-meses-texto-desde')}}
                </x-slot>
            </x-selector-meses>
            <x-selector-meses id="fltr_mes_grafdri2" idselect="f_mes_grafdri_fin" :meses="$meses" class="fltr_periodo_grafdri">
                <x-slot name="texto">
                    {{__('messages.selector-semanas-meses-texto-hasta')}}
                </x-slot>
            </x-selector-meses>

            <x-selector-fiscal id="fltr_fye_grafdri" idselect="f_fye_grafdri_ini" :fiscal="$fiscal" class="fltr_periodo_grafdri" style="display: none;">
                <x-slot name="texto">
                    {{__('messages.selector-semanas-meses-texto-desde')}}
                </x-slot>
            </x-selector-fiscal>
            <x-selector-fiscal id="fltr_fye_grafdri2" idselect="f_fye_grafdri_fin" :fiscal="$fiscal" class="fltr_periodo_grafdri" style="display: none;">
                <x-slot name="texto">
                    {{__('messages.selector-semanas-meses-texto-hasta')}}
                </x-slot>
            </x-selector-fiscal>

            <x-selector-trimestref id="fltr_trif_grafdri" idselect="f_trif_grafdri_ini" :trimestref="$trimestref" class="fltr_periodo_grafdri" style="display:none;">
                <x-slot name="texto">
                    {{__('messages.selector-semanas-meses-texto-desde')}}
                </x-slot>
            </x-selector-trimestref>
            <x-selector-trimestref id="fltr_trif_grafdri2" idselect="f_trif_grafdri_fin" :trimestref="$trimestref" class="fltr_periodo_grafdri" style="display:none;">
                <x-slot name="texto">
                    {{__('messages.selector-semanas-meses-texto-hasta')}}
                </x-slot>
            </x-selector-trimestref>

            <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="mes">
                <x-slot name="texto">
                    {{__('messages.selector-generico-texto-periodo')}}
                </x-slot>
            </x-selector-generico>
            <!--EVOLUTVO SEMANA-->
            <x-selector-semanas id="fltr_sem_graftree" idselect="f_sem_graftree_ini" :semanas="$semanasComp"  class="fltr_periodo_graftree" style="display: none;">
                <x-slot name="texto">
                    {{__('messages.selector-semanas-meses-texto-desde')}}
                </x-slot>
            </x-selector-semanas>
            <x-selector-semanas id="fltr_sem_graftree2" idselect="f_sem_graftree_fin" :semanas="$semanasComp" class="fltr_periodo_graftree" style="display: none;">
                <x-slot name="texto">
                    {{__('messages.selector-semanas-meses-texto-hasta')}}
                </x-slot>
            </x-selector-semanas>
            <!--EVOLUTVO MES-->
            <x-selector-meses id="fltr_mes_graftree" idselect="f_mes_graftree_ini" :meses="$mesesTree" class="fltr_periodo_graftree">
                <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">
                <x-slot name="texto">
                    {{__('messages.selector-semanas-meses-texto-hasta')}}
                </x-slot>
            </x-selector-meses>

            <x-selector-fiscal id="fltr_fye_graftree" idselect="f_fye_graftree_ini" :fiscal="$fiscal" class="fltr_periodo_graftree" style="display: none;">
                <x-slot name="texto">
                    {{__('messages.selector-semanas-meses-texto-desde')}}
                </x-slot>
            </x-selector-fiscal>
            <x-selector-fiscal id="fltr_fye_graftree2" idselect="f_fye_graftree_fin" :fiscal="$fiscal" class="fltr_periodo_graftree" style="display: none;">
                <x-slot name="texto">
                    {{__('messages.selector-semanas-meses-texto-hasta')}}
                </x-slot>
            </x-selector-fiscal>

            <x-selector-trimestref id="fltr_trif_graftree" idselect="f_trif_graftree_ini" :trimestref="$trimestref" class="fltr_periodo_graftree" style="display:none;">
                <x-slot name="texto">
                    {{__('messages.selector-semanas-meses-texto-desde')}}
                </x-slot>
            </x-selector-trimestref>
            <x-selector-trimestref id="fltr_trif_graftree2" idselect="f_trif_graftree_fin" :trimestref="$trimestref" class="fltr_periodo_graftree" style="display:none;">
                <x-slot name="texto">
                    {{__('messages.selector-semanas-meses-texto-hasta')}}
                </x-slot>
            </x-selector-trimestref>

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

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

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

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

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

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

            <x-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">
                <x-slot name="texto">
                    {{__('messages.selector-generico-texto-valor')}}
                </x-slot>
            </x-selector-generico>
            <x-selector-generico id="f_participacion_grafmatri2" idselect="f_participacion_grafmatri" :salida="$participacion"  class="" style="width: 120px">
                <x-slot name="texto">
                    {{__('messages.participacion')}}
                </x-slot>
            </x-selector-generico>
            <x-selector-generico id="f_tmp_grafmatri2" idselect="f_tmp_grafmatri" :salida="$periodo_grafmatri" class="" style="width: 120px" selected="ytd">
                <x-slot name="texto">
                    {{__('messages.selector-generico-texto-periodo')}}
                </x-slot>
            </x-selector-generico>

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

            <x-selector-fiscal id="fltr_fye_grafmatri" idselect="f_fye_grafmatri_ini" :fiscal="$fiscal" class="fltr_periodo_grafmatri" style="display: none;">
                <x-slot name="texto">
                    {{__('messages.selector-semanas-meses-texto-desde')}}
                </x-slot>
            </x-selector-fiscal>
            <x-selector-fiscal id="fltr_fye_grafmatri2" idselect="f_fye_grafmatri_fin" :fiscal="$fiscal" class="fltr_periodo_grafmatri" style="display: none;">
                <x-slot name="texto">
                    {{__('messages.selector-semanas-meses-texto-hasta')}}
                </x-slot>
            </x-selector-fiscal>

            <x-selector-trimestref id="fltr_trif_grafmatri" idselect="f_trif_grafmatri_ini" :trimestref="$trimestref" class="fltr_periodo_grafmatri" style="display:none;">
                <x-slot name="texto">
                    {{__('messages.selector-semanas-meses-texto-desde')}}
                </x-slot>
            </x-selector-trimestref>
            <x-selector-trimestref id="fltr_trif_grafmatri2" idselect="f_trif_grafmatri_fin" :trimestref="$trimestref" class="fltr_periodo_grafmatri" style="display:none;">
                <x-slot name="texto">
                    {{__('messages.selector-semanas-meses-texto-hasta')}}
                </x-slot>
            </x-selector-trimestref>

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

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

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

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

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

            <x-selector-generico id="salida_grafvar2" idselect="salida_grafvar" :salida="$tipo_var"  class="selector-generico" style="width: 120px">
                <x-slot name="texto">
                    {{__('messages.selector-generico-texto-valor')}}
                </x-slot>
            </x-selector-generico>

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

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

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

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

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

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

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

            <x-selector-fiscal id="fltr_fye_comp" idselect="f_fye_comp_ini" :fiscal="$fiscal" class="fltr_periodo_comp" style="display: none;">
                <x-slot name="texto">
                    {{__('messages.selector-semanas-meses-texto-desde')}}
                </x-slot>
            </x-selector-fiscal>
            <x-selector-fiscal id="fltr_fye_comp2" idselect="f_fye_comp_fin" :fiscal="$fiscal" class="fltr_periodo_comp" style="display: none;">
                <x-slot name="texto">
                    {{__('messages.selector-semanas-meses-texto-hasta')}}
                </x-slot>
            </x-selector-fiscal>

            <x-selector-trimestref id="fltr_trif_comp" idselect="f_trif_comp_ini" :trimestref="$trimestref" class="fltr_periodo_comp" style="display:none;">
                <x-slot name="texto">
                    {{__('messages.selector-semanas-meses-texto-desde')}}
                </x-slot>
            </x-selector-trimestref>
            <x-selector-trimestref id="fltr_trif_comp2" idselect="f_trif_comp_fin" :trimestref="$trimestref" class="fltr_periodo_comp" style="display:none;">
                <x-slot name="texto">
                    {{__('messages.selector-semanas-meses-texto-hasta')}}
                </x-slot>
            </x-selector-trimestref>

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

            @if(in_array($cliente, $arr_dos_periodos))
                <x-selector-semanas id="fltr_sem_compf" idselect="f_sem_compf_ini" :semanas="$semanasComp" class="fltr_periodo_compf" style="display: none;">
                    <x-slot name="texto">
                        {{__('messages.selector-semanas-meses-texto-desde')}}
                    </x-slot>
                </x-selector-semanas>
                <x-selector-semanas id="fltr_sem_compf2" idselect="f_sem_compf_fin" :semanas="$semanasComp" class="fltr_periodo_compf" style="display: none;">
                    <x-slot name="texto">
                        {{__('messages.selector-semanas-meses-texto-hasta')}}
                    </x-slot>
                </x-selector-semanas>
                <x-selector-meses id="fltr_mes_compf" idselect="f_mes_compf_ini" :meses="$mesesComp" class="fltr_periodo_compf">
                    <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">
                    <x-slot name="texto">
                        {{__('messages.selector-semanas-meses-texto-hasta')}}
                    </x-slot>
                </x-selector-meses>

                <x-selector-fiscal id="fltr_fye_compf" idselect="f_fye_compf_ini" :fiscal="$fiscal" class="fltr_periodo_compf" style="display: none;">
                    <x-slot name="texto">
                        {{__('messages.selector-semanas-meses-texto-desde')}}
                    </x-slot>
                </x-selector-fiscal>
                <x-selector-fiscal id="fltr_fye_compf2" idselect="f_fye_compf_fin" :fiscal="$fiscal" class="fltr_periodo_compf" style="display: none;">
                    <x-slot name="texto">
                        {{__('messages.selector-semanas-meses-texto-hasta')}}
                    </x-slot>
                </x-selector-fiscal>

                <x-selector-trimestref id="fltr_trif_compf" idselect="f_trif_compf_ini" :trimestref="$trimestref" class="fltr_periodo_compf" style="display:none;">
                    <x-slot name="texto">
                        {{__('messages.selector-semanas-meses-texto-desde')}}
                    </x-slot>
                </x-selector-trimestref>
                <x-selector-trimestref id="fltr_trif_compf2" idselect="f_trif_compf_fin" :trimestref="$trimestref" class="fltr_periodo_compf" style="display:none;">
                    <x-slot name="texto">
                        {{__('messages.selector-semanas-meses-texto-hasta')}}
                    </x-slot>
                </x-selector-trimestref>

                <x-selector-dias idpadre="compf" style="display: none;" style="display:none;"/>
            @endif

            @if ($cliente == "oriental")
                <div class="col col-md-auto obj_filtro form-group font-weight-normal d-flex align-items-center">
                    <label class="align-items-center d-flex" style="padding-top: 15px">
                        <input type="checkbox" id="f_agru_comp" value="first_checkbox" style="margin-right: 5px"> Agrupar
                    </label>
                </div>
            @endif

            <x-boton-actualizar onclick="getComp('{{$cliente}}', '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">
            
            </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">
                <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="mes">
                <x-slot name="texto">
                    {{__('messages.selector-generico-texto-periodo')}}
                </x-slot>
            </x-selector-generico>
            <x-selector-dias idpadre="evo" style="display:none;"/>
            
            <!--EVOLUTVO SEMANA-->
            <x-selector-semanas id="fltr_sem_evo" idselect="f_sem_evo_ini" :semanas="$semanas"  class="fltr_periodo_evo" style="display: none;">
                <x-slot name="texto">
                    {{__('messages.selector-semanas-meses-texto-desde')}}
                </x-slot>
            </x-selector-semanas>
            <x-selector-semanas id="fltr_sem_evo2" idselect="f_sem_evo_fin" :semanas="$semanas" class="fltr_periodo_evo" style="display: none;">
                <x-slot name="texto">
                    {{__('messages.selector-semanas-meses-texto-hasta')}}
                </x-slot>
            </x-selector-semanas>
            <!--EVOLUTVO MES-->
            <x-selector-meses id="fltr_mes_evo" idselect="f_mes_evo_ini" :meses="$meses" class="fltr_periodo_evo">
                <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">
                <x-slot name="texto">
                    {{__('messages.selector-semanas-meses-texto-hasta')}}
                </x-slot>
            </x-selector-meses>

            <x-selector-fiscal id="fltr_fye_evo" idselect="f_fye_evo_ini" :fiscal="$fiscal" class="fltr_periodo_evo" style="display: none;">
                <x-slot name="texto">
                    {{__('messages.selector-semanas-meses-texto-desde')}}
                </x-slot>
            </x-selector-fiscal>
            <x-selector-fiscal id="fltr_fye_evo2" idselect="f_fye_evo_fin" :fiscal="$fiscal" class="fltr_periodo_evo" style="display: none;">
                <x-slot name="texto">
                    {{__('messages.selector-semanas-meses-texto-hasta')}}
                </x-slot>
            </x-selector-fiscal>

            <x-selector-trimestref id="fltr_trif_evo" idselect="f_trif_evo_ini" :trimestref="$trimestref" class="fltr_periodo_evo" style="display:none;">
                <x-slot name="texto">
                    {{__('messages.selector-semanas-meses-texto-desde')}}
                </x-slot>
            </x-selector-trimestref>
            <x-selector-trimestref id="fltr_trif_evo2" idselect="f_trif_evo_fin" :trimestref="$trimestref" class="fltr_periodo_evo" style="display:none;">
                <x-slot name="texto">
                    {{__('messages.selector-semanas-meses-texto-hasta')}}
                </x-slot>
            </x-selector-trimestref>

            <!--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">
                <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">
                <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="mes">
                <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">
                <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">
                <x-slot name="texto">
                    {{__('messages.selector-semanas-meses-texto-hasta')}}
                </x-slot>
            </x-selector-meses>

            <x-selector-fiscal id="fltr_fye_matri" idselect="f_fye_matri_ini" :fiscal="$fiscal" class="fltr_periodo_matri" style="display: none;">
                <x-slot name="texto">
                    {{__('messages.selector-semanas-meses-texto-desde')}}
                </x-slot>
            </x-selector-fiscal>
            <x-selector-fiscal id="fltr_fye_matri2" idselect="f_fye_matri_fin" :fiscal="$fiscal" class="fltr_periodo_matri" style="display: none;">
                <x-slot name="texto">
                    {{__('messages.selector-semanas-meses-texto-hasta')}}
                </x-slot>
            </x-selector-fiscal>

            <x-selector-trimestref id="fltr_trif_matri" idselect="f_trif_matri_ini" :trimestref="$trimestref" class="fltr_periodo_matri" style="display:none;">
                <x-slot name="texto">
                    {{__('messages.selector-semanas-meses-texto-desde')}}
                </x-slot>
            </x-selector-trimestref>
            <x-selector-trimestref id="fltr_trif_matri2" idselect="f_trif_matri_fin" :trimestref="$trimestref" class="fltr_periodo_matri" style="display:none;">
                <x-slot name="texto">
                    {{__('messages.selector-semanas-meses-texto-hasta')}}
                </x-slot>
            </x-selector-trimestref>

            <!--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['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
@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}}";
        var periodoMax = "{{$periodoMax[0]->periodo}}";
        //$("#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','comp','comparativo', 'inout', 'grafdri', 'graftree', 'grafvar', 'grafmatri', 'grafcrec', 'grafevo', 'grafcomp','perdidas', 'evo_sell_in', 's2s'];
        
        $(document).ready(() => {
            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";
                }
            });
            
            
            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"].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);
            [ "#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(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(['clorox'].includes(cliente_)){
                // Gráfico Crecimiento
                $('#variables_grafcrec').val('2-5').change(); // Visualización por CLiente

                // Tabla Evolución
                $('#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
                // Tabla Matriz
                $('#variables_matri1').val('1-2').change(); // Variables Filas = Categoría (MFF)
                $('#variables_matri2').val('2-5').change(); // Variables Columnas = Cliente

                if(('#comp').length > 0){
                    $('#f_mes_comp_fin').val(periodoMax).change();
                    $('#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();
                    $('#f_trif_comp_ini').val($('#f_trif_comp_fin').val()).change();
                    $('#f_trif_compf_ini').val($('#f_trif_compf_fin').val()).change();
                    $('#f_fye_comp_ini').val($('#f_fye_comp_fin').val()).change();
                    $('#f_fye_compf_ini').val($('#f_fye_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(periodoMax - 100).change();
                    $('#f_mes_compf_fin').val(periodoMax - 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();

                    $('#f_trif_compf_ini').val($('#f_trif_compf_ini').val() - 100).change();
                    $('#f_trif_compf_fin').val($('#f_trif_compf_fin').val() - 100).change();

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

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

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