@extends('layouts.reporte')

@section('php')
    @php
        $locales = [];
        $cantidad = 100;
        while ($cantidad <= $cantidad_locales) {
            $locales[$cantidad] = $cantidad;
            $cantidad = $cantidad + 100;
        }
        if ($cantidad % 100 == 0) {
            $locales[$cantidad_locales] = $cantidad_locales;
        }
        $locales = json_encode($locales);
        $yearAct = date("Y");

        $cliente = config('app.CLIENTE');
        $year = json_encode([$yearAct=>$yearAct, strval($yearAct-1) => $yearAct-1]);

        $salida = json_encode(["11"=> __('messages.ventas'), "1" => __('messages.unidades'), "10" => "Unidades Pack", "15" => __('messages.costo')]);
        $salida_comp4 = json_encode(["1"=> __('messages.unidades'), "10" => "Unidades Pack"]);

        $salida_matri = json_encode(["11"=> __('messages.ventas'), "10" => __('messages.unidades')]);
        $salida_inout = json_encode(["11"=> __('messages.ventas'), "10" => __('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')]);
        $periodo_comp = json_encode(["dia"=> __('messages.dias'),"ytd"=> __('messages.ytd'), "mec" => __('messages.mec'), "sem" => __('messages.semanas'), "mes" => __('messages.meses')]);
        $periodo_matri = json_encode(["ytd"=> __('messages.ytd'), "mec" => __('messages.mec'), "sem" => __('messages.semanas'), 'dia' => __('messages.dias')]);
        $periodo_grafmatri = json_encode(["ytd"=> __('messages.ytd'), "mec" => __('messages.mec'), 'dia' => __('messages.dias')]);
        $periodo_var = json_encode(["dia"=> __('messages.dias')]);
        $periodo_perdi = json_encode(["1"=> __('messages.acomulado'),"mec" => __('messages.mec'),"3" => __('messages.mesanterior')]);
        $mesesComp = [];
        $semanasComp = [];
        $yearAct = date("Y");
        $yearAnt = date("Y") - 1;
        $tipo = json_encode(["year" => (__('messages.año'))."-".(__('messages.meses'))."-".(__('messages.dias')), 
        "local" => __('messages.var-cadena')."-Formato-".(__('messages.variable-local')),
        "marca"=>__('messages.marca')."-".(__('messages.filtro-texto-categoria'))."-".(__('messages.variable-producto'))]);
        $tipo_var = json_encode(["dinero"=>__('messages.dinero'), "porcentaje" =>__('messages.porcentaje')]);
        $lim_inf = json_encode(["-100"=>"-100%", "-50" =>"-50%", "-25"=>"-25%", "-10"=>"-10%"]);
        $lim_sup = json_encode(["100"=>"100%", "50" =>"50%", "25"=>"25%", "10"=>"10%"]);
        $participacion = json_encode(["1"=>"Total Consulta", "2" =>"Total ".__('messages.participacion')]);
        $tipos_graficos = json_encode([ "msline" => "Líneas", "stackedcolumn2d" => (__('messages.selector-tipo-grafico-columnas-apiladas')),"mscolumn2d" => "Columnas agrupadas", "stackedbar2d" => "Barras apiladas"]);
        foreach ($meses as $value) {
            list($_mes, $_year) = explode(' ', $value->nombre);
            if($_year == $yearAct || $_year == $yearAnt) {
                $mesesComp []= $value;
            }
        }
        foreach ($semanas as $value) {
            $_year = substr($value->periodo, 0, 4);
            if($_year == $yearAct) {
                $semanasComp []= $value;
            }
        }
        if ($cliente == 'colgate') {
            $div = '<div style="padding: 5px 16px;overflow: hidden;background-color: lightblue;text-align: center;"><ul>';
            foreach ($div_reportes as $value) {
                $div.="<li>".$value->Descripcion."</li>";
            }
            $div.="</ul></div>";
        }else{
            $div='';
        }
        $variables_2 = $variables;
        if(isset($variables_2['Local']) && isset($variables_2['Local']['3-5'])){
            unset($variables_2['Local']['3-5']);
        }
        if(isset($variables_2['Producto']) && isset($variables_2['Producto']['1-15'])){
            unset($variables_2['Producto']['1-15']);
        }

        $ninguno = ['' => ['-1' => 'Sin Seleccionar']];
        $variables_2 = $ninguno + $variables_2;
        $variables_inout = ["" => []];
        if(array_key_exists('Local',$variables)){
            if (array_key_exists('2-0',$variables['Local'])) {
                $variables_inout[""]["2-0"] = $variables['Local']['2-0'];
            }
        }
        if(array_key_exists('Producto',$variables)){
            if (array_key_exists('1-3',$variables['Producto'])) {
                $variables_inout[""]["1-3"] = $variables['Producto']['1-3'];
            }
            if (array_key_exists('1-15',$variables['Producto'])) {
                $variables_inout[""]["1-15"] = $variables['Producto']['1-15'];
            }
        }
        $variables_inout[""]["total"] = __('messages.compañia');
        $display_grafico = '';
        $display_tabla = '';
    @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="{{$display_grafico}}" :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: 110px">
                <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: 90px" 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 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-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-filtro id="f_clientes_grafcomp" :lista="$clientes" style="max-width: 120px; min-width: 120px; width: 120px;" class="ms-auto">
                <x-slot name="texto">
                    {{__('messages.filtro-texto-cliente')}}
                </x-slot>
            </x-filtro> --}}
            <x-filtro id="f_categorias_grafcomp" :lista="$categorias" style="max-width: 120px;min-width: 120px;width: 120px;">
                <x-slot name="texto">
                    {{__('messages.filtro-texto-categoria')}}
                </x-slot>
            </x-filtro>
            <x-filtro id="f_kam_grafcomp" :lista="$kam" style="max-width: 120px;min-width: 120px;width: 120px;">
                <x-slot name="texto">
                    {{__('messages.filtro-texto-kam')}}
                </x-slot>
            </x-filtro>
            <!--
            <div class="notification-list col-md-auto obj_filtro form-group ms-auto">
                <div class="nav-link end-bar-toggle d-flex align-items-center" href="javascript: void(0);" 
                style="padding: 0rem 1rem; color: #566573; height: 48px;" onclick="filtrosCubo(this, 'grafcomp')">
                    <i class="fas fa-filter"></i>
                </div>
            </div>
            -->
        </x-grafico>
        @php $display_grafico = 'display: none;'; @endphp
    @endif
    @if(isset($selectores_grafico['grafcrec']))
        <x-grafico id="grafcrec" style="{{$display_grafico}}" :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: 110px">
                <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: 90px" selected="sem">
                <x-slot name="texto">
                    {{__('messages.selector-generico-texto-periodo')}}
                </x-slot>
            </x-selector-generico>

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

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

            {{-- <x-filtro id="f_clientes_grafcrec" :lista="$clientes" style="max-width: 120px; min-width: 120px; width: 120px;" class="ms-auto">
                <x-slot name="texto">
                    {{__('messages.filtro-texto-cliente')}}
                </x-slot>
            </x-filtro> --}}
            <x-filtro id="f_categorias_grafcrec" :lista="$categorias" style="max-width: 120px;min-width: 120px;width: 120px;">
                <x-slot name="texto">
                    {{__('messages.filtro-texto-categoria')}}
                </x-slot>
            </x-filtro>
            <x-filtro id="f_kam_grafcrec" :lista="$kam" style="max-width: 120px;min-width: 120px;width: 120px;">
                <x-slot name="texto">
                    {{__('messages.filtro-texto-kam')}}
                </x-slot>
            </x-filtro>
            <!--
            <div class="notification-list col-md-auto obj_filtro form-group ms-auto">
                <div class="nav-link end-bar-toggle d-flex align-items-center" href="javascript: void(0);" 
                style="padding: 0rem 1rem; color: #566573; height: 48px;" onclick="filtrosCubo(this, 'grafcomp')">
                    <i class="fas fa-filter"></i>
                </div>
            </div>
            -->
        </x-grafico>
        @php $display_grafico = 'display: none;'; @endphp
    @endif

    @if(isset($selectores_grafico['grafevo']))
        <x-grafico id="grafevo" style="{{$display_grafico}}" :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: 110px">
                <x-slot name="texto">
                    {{__('messages.selector-generico-texto-valor')}}
                </x-slot>
            </x-selector-generico>
            @if ($cliente == 'colgate')
                <x-selector-generico id="f_tmp_grafevo2" idselect="f_tmp_grafevo" :salida="$periodo"  class="selector-generico" style="width: 90px" selected="mes">
                    <x-slot name="texto">
                        {{__('messages.selector-generico-texto-periodo')}}
                    </x-slot>
                </x-selector-generico>
            @else
                <x-selector-generico id="f_tmp_grafevo2" idselect="f_tmp_grafevo" :salida="$periodo"  class="selector-generico" style="width: 90px" selected="dia">
                    <x-slot name="texto">
                        {{__('messages.selector-generico-texto-periodo')}}
                    </x-slot>
                </x-selector-generico>
            @endif
            @if ($cliente == 'colgate')
            <x-selector-dias idpadre="grafevo" style="display: none;"/>
            <!--EVOLUTVO MES-->
            <x-selector-meses id="fltr_mes_grafevo" idselect="f_mes_grafevo_ini" :meses="$meses" class="fltr_periodo_grafevo">
                <x-slot name="texto">
                    {{__('messages.selector-semanas-meses-texto-desde')}}
                </x-slot>
            </x-selector-meses>
            <x-selector-meses id="fltr_mes_grafevo2" idselect="f_mes_grafevo_fin" :meses="$meses" class="fltr_periodo_grafevo">
                <x-slot name="texto">
                    {{__('messages.selector-semanas-meses-texto-hasta')}}
                </x-slot>
            </x-selector-meses>
            @else
            <x-selector-dias idpadre="grafevo"/>
            <!--EVOLUTVO MES-->
            <x-selector-meses id="fltr_mes_grafevo" idselect="f_mes_grafevo_ini" :meses="$meses" class="fltr_periodo_grafevo" style="display: none;">
                <x-slot name="texto">
                    {{__('messages.selector-semanas-meses-texto-desde')}}
                </x-slot>
            </x-selector-meses>
            <x-selector-meses id="fltr_mes_grafevo2" idselect="f_mes_grafevo_fin" :meses="$meses" class="fltr_periodo_grafevo" style="display: none;">
                <x-slot name="texto">
                    {{__('messages.selector-semanas-meses-texto-hasta')}}
                </x-slot>
            </x-selector-meses>
            @endif
            <!--EVOLUTVO SEMANA-->
            <x-selector-semanas id="fltr_sem_grafevo" idselect="f_sem_grafevo_ini" :semanas="$semanas"  class="fltr_periodo_grafevo" style="display: none;">
                <x-slot name="texto">
                    {{__('messages.selector-semanas-meses-texto-desde')}}
                </x-slot>
            </x-selector-semanas>
            <x-selector-semanas id="fltr_sem_grafevo2" idselect="f_sem_grafevo_fin" :semanas="$semanas" class="fltr_periodo_grafevo" style="display: none;">
                <x-slot name="texto">
                    {{__('messages.selector-semanas-meses-texto-hasta')}}
                </x-slot>
            </x-selector-semanas>
            <!--AÑO-->
            <div id="fltr_year_grafevo" style="width:100px;display:none;" class="fltr_periodo_grafevo col-lg-2 col-md-4 col-sm-6 col-xs-12 obj_filtro form-group">
                <div style="text-align:center; font-size: 1.0em;color:#566573">
                    {{__('messages.selector-semanas-meses-texto-desde')}}
                </div>
                <label class="w-100">
                    <select id="f_year_grafevo_ini" name="f_year_grafevo_ini" class="flt form-control select2 " data-toggle="select2" width="100%">
                        <option value="202001">2020</option>
                        <option value="202101">2021</option>
                    </select>
                </label>
            </div>
            <div id="fltr_year_grafevo2" style="width:100px;display:none;" class="fltr_periodo_grafevo col-lg-2 col-md-4 col-sm-6 col-xs-12 obj_filtro form-group">
                <div style="text-align:center; font-size: 1.0em;color:#566573">
                    {{__('messages.selector-semanas-meses-texto-hasta')}}
                </div>
                <label class="w-100">
                    <select id="f_year_grafevo_fin" name="f_year_grafevo_fin" class="flt form-control select2 " data-toggle="select2" width="100%">
                        <option value="202053">2020</option>
                        <option value="202153">2021</option>
                    </select>
                </label>
            </div>

            <x-selector-generico id="f_type_grafevo2" idselect="f_type_grafevo" :salida="$tipos_graficos"  class="selector-generico" style="width: 120px" selected="stackedcolumn2d">
                <x-slot name="texto">
                    {{__('messages.selector-tipo-grafico')}}
                </x-slot>
            </x-selector-generico>
        
            <x-boton-actualizar onclick="getGrafEvoIn('{{$cliente}}', 'ventas',true);"/> 
            <!--
            <div class="notification-list col-md-auto obj_filtro form-group ms-auto">
                <div class="nav-link end-bar-toggle d-flex align-items-center" href="javascript: void(0);" 
                style="padding: 0rem 1rem; color: #566573; height: 48px;" onclick="filtrosCubo(this, 'grafevo')">
                    <i class="fas fa-filter"></i>
                </div>
            </div>
            -->
            {{-- <x-filtro id="f_clientes_grafevo" :lista="$clientes" style="max-width: 120px; min-width: 120px; width: 120px;" class="ms-auto">
                <x-slot name="texto">
                    {{__('messages.filtro-texto-cliente')}}
                </x-slot>
            </x-filtro> --}}
            <x-filtro id="f_categorias_grafevo" :lista="$categorias" style="max-width: 120px;min-width: 120px;width: 120px;">
                <x-slot name="texto">
                    {{__('messages.filtro-texto-categoria')}}
                </x-slot>
            </x-filtro>
            <x-filtro id="f_kam_grafevo" :lista="$kam" style="max-width: 120px;min-width: 120px;width: 120px;">
                <x-slot name="texto">
                    {{__('messages.filtro-texto-kam')}}
                </x-slot>
            </x-filtro>

            
            <div class="w-100 justify-content-center" id="f_carga_grafevo" style="height: 400px; display: none;">
                <img src="{{asset('images/preloader_pie.gif')}}" style="width: 60px; height: 60px;" class="align-self-center">
            </div>
        </x-grafico>
        @php $display_grafico = 'display: none;'; @endphp
    @endif
    
    @if(isset($selectores_grafico['grafdri']))
        <x-grafico id="grafdri" style="{{$display_grafico}}" :filtrosAv="$filtrosAv" :filtrosAvAlias="$filtrosAvAlias">
            <x-selector-generico id="tipo_grafdri2" idselect="tipo_grafdri" :salida="$tipo" class="" selected="local">
                <x-slot name="texto">
                    {{__('messages.selector-variable-texto-fila')}}
                </x-slot>
            </x-selector-generico>
            <x-selector-generico id="f_tmp_grafdri2" idselect="f_tmp_grafdri" :salida="$periodo"  class="" style="width: 90px" selected="mes">
                <x-slot name="texto">
                    {{__('messages.selector-generico-texto-periodo')}}
                </x-slot>
            </x-selector-generico>

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

            <!--EVOLUTVO SEMANA-->
            <x-selector-semanas id="fltr_sem_grafdri" idselect="f_sem_grafdri_ini" :semanas="$semanas"  class="fltr_periodo_grafdri" style="display: none;">
                <x-slot name="texto">
                    {{__('messages.selector-semanas-meses-texto-desde')}}
                </x-slot>
            </x-selector-semanas>
            <x-selector-semanas id="fltr_sem_grafdri2" idselect="f_sem_grafdri_fin" :semanas="$semanas" class="fltr_periodo_grafdri" style="display: none;">
                <x-slot name="texto">
                    {{__('messages.selector-semanas-meses-texto-hasta')}}
                </x-slot>
            </x-selector-semanas>
            <!--EVOLUTVO MES-->
            <x-selector-meses id="fltr_mes_grafdri" idselect="f_mes_grafdri_ini" :meses="$meses" class="fltr_periodo_grafdri">
                <x-slot name="texto">
                    {{__('messages.selector-semanas-meses-texto-desde')}}
                </x-slot>
            </x-selector-meses>
            <x-selector-meses id="fltr_mes_grafdri2" idselect="f_mes_grafdri_fin" :meses="$meses" class="fltr_periodo_grafdri">
                <x-slot name="texto">
                    {{__('messages.selector-semanas-meses-texto-hasta')}}
                </x-slot>
            </x-selector-meses>
            <x-boton-actualizar onclick="getGrafDri('{{$cliente}}', 'ventas');"/>
            {{-- <x-filtro id="f_clientes_grafdri" :lista="$clientes" style="max-width: 120px; min-width: 120px; width: 120px;" class="ms-auto">
                <x-slot name="texto">
                    {{__('messages.filtro-texto-cliente')}}
                </x-slot>
            </x-filtro> --}}
            <x-filtro id="f_categorias_grafdri" :lista="$categorias" style="max-width: 120px;min-width: 120px;width: 120px;">
                <x-slot name="texto">
                    {{__('messages.filtro-texto-categoria')}}
                </x-slot>
            </x-filtro>
            <x-filtro id="f_kam_grafdri" :lista="$kam" style="max-width: 120px;min-width: 120px;width: 120px;">
                <x-slot name="texto">
                    {{__('messages.filtro-texto-kam')}}
                </x-slot>
            </x-filtro>
        </x-grafico>
        @php $display_grafico = 'display: none;'; @endphp
    @endif

    @if(isset($selectores_grafico['graftree']))
        <x-grafico id="graftree" style="{{$display_grafico}}" :filtrosAv="$filtrosAv" :filtrosAvAlias="$filtrosAvAlias">
            <x-selector-variable id="variables_graftree" :lista='$variabletree' selected="2-0" cliente='$cliente'/>
            <x-selector-generico id="inf_graftree2" idselect="inf_graftree" :salida="$lim_inf" class="" style="width: 100%">
                <x-slot name="texto">
                    Límite Inferior
                </x-slot>
            </x-selector-generico>
            <x-selector-generico id="sup_graftree2" idselect="sup_graftree" :salida="$lim_sup" class="" style="width: 100%">
                <x-slot name="texto">
                    Límite Superior
                </x-slot>
            </x-selector-generico>

            <x-selector-dias idpadre="graftree" style="display:none;" />
            <x-selector-generico id="f_tmp_graftree2" idselect="f_tmp_graftree" :salida="$periodo_matri"  class="" style="width: 90px" selected="mec">
                <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="$mesesComp" class="fltr_periodo_graftree" style="display: none">
                <x-slot name="texto">
                    {{__('messages.selector-semanas-meses-texto-desde')}}
                </x-slot>
            </x-selector-meses>
            <x-selector-meses id="fltr_mes_graftree2" idselect="f_mes_graftree_fin" :meses="$mesesComp" class="fltr_periodo_graftree" style="display: none">
                <x-slot name="texto">
                    {{__('messages.selector-semanas-meses-texto-hasta')}}
                </x-slot>
            </x-selector-meses>
            <x-boton-actualizar onclick="getGrafTree('{{$cliente}}', 'ventas');"/>

            {{-- <x-filtro id="f_clientes_graftree" :lista="$clientes" style="max-width: 120px; min-width: 120px; width: 120px;" class="ms-auto">
                <x-slot name="texto">
                    {{__('messages.filtro-texto-cliente')}}
                </x-slot>
            </x-filtro> --}}
            <x-filtro id="f_categorias_graftree" :lista="$categorias" style="max-width: 120px;min-width: 120px;width: 120px;">
                <x-slot name="texto">
                    {{__('messages.filtro-texto-categoria')}}
                </x-slot>
            </x-filtro>
            <x-filtro id="f_kam_graftree" :lista="$kam" style="max-width: 120px;min-width: 120px;width: 120px;">
                <x-slot name="texto">
                    {{__('messages.filtro-texto-kam')}}
                </x-slot>
            </x-filtro>
        </x-grafico>
        @php $display_grafico = 'display: none;'; @endphp
    @endif

    @if(isset($selectores_grafico['grafvar']))
        {{-- <x-grafico id="grafvar" style="{{$display_grafico}}"  :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: 90px" 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">
                    {{__('messages.filtro-texto-cliente')}}
                </x-slot>
            </x-filtro>
            <x-filtro id="f_categorias_grafvar" :lista="$categorias" style="max-width: 120px;min-width: 120px;width: 120px;">
                <x-slot name="texto">
                    {{__('messages.filtro-texto-categoria')}}
                </x-slot>
            </x-filtro>
            <x-filtro id="f_kam_grafvar" :lista="$kam" style="max-width: 120px;min-width: 120px;width: 120px;">
                <x-slot name="texto">
                    {{__('messages.filtro-texto-kam')}}
                </x-slot>
            </x-filtro>
        </x-grafico> --}}
        @php $display_grafico = 'display: none;'; @endphp
    @endif

    @if(isset($selectores_grafico['grafmatri']))
        <x-grafico id="grafmatri" style="{{$display_grafico}}" :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: 110px">
                <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="mec">
                <x-slot name="texto">
                    {{__('messages.selector-generico-texto-periodo')}}
                </x-slot>
            </x-selector-generico>

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

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

            {{-- <x-filtro id="f_clientes_grafmatri" :lista="$clientes" style="max-width: 120px; min-width: 120px; width: 120px;" class="ms-auto">
                <x-slot name="texto">
                    {{__('messages.filtro-texto-cliente')}}
                </x-slot>
            </x-filtro> --}}
            <x-filtro id="f_categorias_grafmatri" :lista="$categorias" style="max-width: 120px;min-width: 120px;width: 120px;">
                <x-slot name="texto">
                    {{__('messages.filtro-texto-categoria')}}
                </x-slot>
            </x-filtro>
            <x-filtro id="f_kam_grafmatri" :lista="$kam" style="max-width: 120px;min-width: 120px;width: 120px;">
                <x-slot name="texto">
                    {{__('messages.filtro-texto-kam')}}
                </x-slot>
            </x-filtro>
        </x-grafico>
        @php $display_grafico = 'display: none;'; @endphp
    @endif

    @if(isset($selectores_grafico['grafvar']))
        <x-grafico id="grafvar" style="{{$display_grafico}}" :filtrosAv="$filtrosAv" :filtrosAvAlias="$filtrosAvAlias">
            <x-selector-generico id="salida_grafvar2" idselect="salida_grafvar" :salida="$tipo_var"  class="selector-generico" style="width: 110px">
                <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-filtro id="f_clientes_grafvar" :lista="$clientes" style="max-width: 120px; min-width: 120px; width: 120px;" class="ms-auto">
                <x-slot name="texto">
                    {{__('messages.filtro-texto-cliente')}}
                </x-slot>
            </x-filtro> --}}
            <x-filtro id="f_categorias_grafvar" :lista="$categorias" style="max-width: 120px;min-width: 120px;width: 120px;">
                <x-slot name="texto">
                    {{__('messages.filtro-texto-categoria')}}
                </x-slot>
            </x-filtro>
            <x-filtro id="f_kam_grafvar" :lista="$kam" style="max-width: 120px;min-width: 120px;width: 120px;">
                <x-slot name="texto">
                    {{__('messages.filtro-texto-kam')}}
                </x-slot>
            </x-filtro>
        </x-grafico>
        @php $display_grafico = 'display: none;'; @endphp
    @endif
@endsection
@endif

@if(count($selectores_tabla)>0)
@section('tabla')
    @if(isset($selectores_tabla['comp']))
        <x-tabla id="comp" style="{{$display_tabla}}" :filtrosAv="$filtrosAv" :filtrosAvAlias="$filtrosAvAlias">
            <x-selector-variable id="variables_comp" :lista='$variables' selected='2-0' cliente='$cliente'/>

            <x-selector-generico id="salida_comp2" idselect="salida_comp" :salida="$salida_comp4"  class="selector-generico" style="width: 110px">
                <x-slot name="texto">
                    {{__('messages.selector-generico-texto-valor')}}
                </x-slot>
            </x-selector-generico>

            <x-selector-generico id="f_tmp_comp2" idselect="f_tmp_comp" :salida="$periodo_comp"  class="selector-generico" style="width: 100px" selected="mec">
                <x-slot name="texto">
                    {{__('messages.selector-generico-texto-periodo')}}
                </x-slot>
            </x-selector-generico>

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

            <x-boton-actualizar onclick="getComp('{{$cliente}}', 'ventas',true)"/>
{{-- 
            <x-filtro id="f_clientes_comp" :lista="$clientes" style="max-width: 120px;min-width: 120px;width: 120px;" class="ms-auto">
                <x-slot name="texto">
                    {{__('messages.filtro-texto-cliente')}}
                </x-slot>
            </x-filtro> --}}
            <x-filtro id="f_categorias_comp" :lista="$categorias" style="max-width: 120px;min-width: 120px;width: 120px;">
                <x-slot name="texto">
                    {{__('messages.filtro-texto-categoria')}}
                </x-slot>
            </x-filtro>
            <x-filtro id="f_kam_comp" :lista="$kam" style="max-width: 120px;min-width: 120px;width: 120px;">
                <x-slot name="texto">
                    {{__('messages.filtro-texto-kam')}}
                </x-slot>
            </x-filtro>
        </x-tabla>
        @php $display_tabla = 'display: none;'; @endphp
    @endif

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

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

            
            <!--EVOLUTVO SEMANA-->
            <x-selector-semanas id="fltr_sem_evo" idselect="f_sem_evo_ini" :semanas="$semanas"  class="fltr_periodo_evo" style="display: none;">
                <x-slot name="texto">
                    {{__('messages.selector-semanas-meses-texto-desde')}}
                </x-slot>
            </x-selector-semanas>
            <x-selector-semanas id="fltr_sem_evo2" idselect="f_sem_evo_fin" :semanas="$semanas" class="fltr_periodo_evo" style="display: none;">
                <x-slot name="texto">
                    {{__('messages.selector-semanas-meses-texto-hasta')}}
                </x-slot>
            </x-selector-semanas>
            <!--EVOLUTVO MES-->
            <x-selector-meses id="fltr_mes_evo" idselect="f_mes_evo_ini" :meses="$meses" class="fltr_periodo_evo" style="display: none;">
                <x-slot name="texto">
                    {{__('messages.selector-semanas-meses-texto-desde')}}
                </x-slot>
            </x-selector-meses>
            <x-selector-meses id="fltr_mes_evo2" idselect="f_mes_evo_fin" :meses="$meses" class="fltr_periodo_evo" style="display: none;">
                <x-slot name="texto">
                    {{__('messages.selector-semanas-meses-texto-hasta')}}
                </x-slot>
            </x-selector-meses>
            <!--AÑO-->
            <div id="fltr_year_evo" style="width:100px; display:none;" class="fltr_periodo_evo col-md-auto obj_filtro form-group">
                <div style="text-align:center; font-size: 1.0em;color:#566573">
                    {{__('messages.selector-semanas-meses-texto-desde')}}
                </div>
                <label class="w-100">
                    <select id="f_year_evo_ini" name="f_year_evo_ini" class="flt form-control select2 " data-toggle="select2" width="100%">
                        <option value="202001">2020</option>
                        <option value="202101">2021</option>
                    </select>
                </label>
            </div>
            <div id="fltr_year_evo2" style="width:100px; display:none;" class="fltr_periodo_evo col-md-auto obj_filtro form-group">
                <div style="text-align:center; font-size: 1.0em;color:#566573">
                    {{__('messages.selector-semanas-meses-texto-hasta')}}
                </div>
                <label class="w-100">
                    <select id="f_year_evo_fin" name="f_year_evo_fin" class="flt form-control select2 " data-toggle="select2" width="100%">
                        <option value="202053">2020</option>
                        <option value="202153">2021</option>
                    </select>
                </label>
            </div>
            <x-boton-actualizar onclick="getEvoIn('{{$cliente}}', 'ventas');"/>

            {{-- <x-filtro id="f_clientes_evo" :lista="$clientes" style="max-width: 120px;min-width: 120px;width: 120px;" class="ms-auto">
                <x-slot name="texto">
                    {{__('messages.filtro-texto-cliente')}}
                </x-slot>
            </x-filtro> --}}
            <x-filtro id="f_categorias_evo" :lista="$categorias" style="max-width: 120px;min-width: 120px;width: 120px;">
                <x-slot name="texto">
                    {{__('messages.filtro-texto-categoria')}}
                </x-slot>
            </x-filtro>
            <x-filtro id="f_kam_evo" :lista="$kam" style="max-width: 120px;min-width: 120px;width: 120px;">
                <x-slot name="texto">
                    {{__('messages.filtro-texto-kam')}}
                </x-slot>
            </x-filtro>
        </x-tabla>
        @php $display_tabla = 'display: none;'; @endphp
    @endif

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

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

            <!--EVOLUTVO SEMANA-->
            <x-selector-semanas id="fltr_sem_matri" idselect="f_sem_matri_ini" :semanas="$semanas"  class="fltr_periodo_matri" style="display: none;">
                <x-slot name="texto">
                    {{__('messages.selector-semanas-meses-texto-desde')}}
                </x-slot>
            </x-selector-semanas>
            <x-selector-semanas id="fltr_sem_matri2" idselect="f_sem_matri_fin" :semanas="$semanas" class="fltr_periodo_matri" style="display: none;">
                <x-slot name="texto">
                    {{__('messages.selector-semanas-meses-texto-hasta')}}
                </x-slot>
            </x-selector-semanas>
            <!--EVOLUTVO MES-->
            <x-selector-meses id="fltr_mes_matri" idselect="f_mes_matri_ini" :meses="$meses" class="fltr_periodo_matri" style="display: none;">
                <x-slot name="texto">
                    {{__('messages.selector-semanas-meses-texto-desde')}}
                </x-slot>
            </x-selector-meses>
            <x-selector-meses id="fltr_mes_matri2" idselect="f_mes_matri_fin" :meses="$meses" class="fltr_periodo_matri" style="display: none;">
                <x-slot name="texto">
                    {{__('messages.selector-semanas-meses-texto-hasta')}}
                </x-slot>
            </x-selector-meses>
            <!--AÑO-->
            <div id="fltr_year_matri" style="width:100px;display:none;" class="fltr_periodo_matri col-lg-2 col-md-4 col-sm-6 col-xs-12 obj_filtro form-group">
                <div style="text-align:center; font-size: 1.0em;color:#566573">
                    {{__('messages.selector-semanas-meses-texto-desde')}}
                </div>
                <label class="w-100">
                    <select id="f_year_matri_ini" name="f_year_matri_ini" class="flt form-control select2 " data-toggle="select2" width="100%">
                        <option value="202001">2020</option>
                        <option value="202101">2021</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="202053">2020</option>
                        <option value="202153">2021</option>
                    </select>
                </label>
            </div>
            {{-- Este selector solo aparece cuando se seleciona tienda/store en la tabla matriz --}}
            <x-selector-generico 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">
                    {{__('messages.selector-generico-texto-locales')}}
                </x-slot>
            </x-selector-generico>
            <x-boton-actualizar onclick="getMatri('{{$cliente}}', 'ventas');"/>
            <x-infobox tamano="25px" texto="{{__('messages.texto-infobox')}}"/>

            {{-- <x-filtro id="f_clientes_matri" :lista="$clientes" style="max-width: 120px;min-width: 120px;width: 120px;" class="ms-auto">
                <x-slot name="texto">
                    {{__('messages.filtro-texto-cliente')}}
                </x-slot>
            </x-filtro> --}}
            <x-filtro id="f_categorias_matri" :lista="$categorias" style="max-width: 120px;min-width: 120px;width: 120px;">
                <x-slot name="texto">
                    {{__('messages.filtro-texto-categoria')}}
                </x-slot>
            </x-filtro>
            <x-filtro id="f_kam_matri" :lista="$kam" style="max-width: 120px;min-width: 120px;width: 120px;">
                <x-slot name="texto">
                    {{__('messages.filtro-texto-kam')}}
                </x-slot>
            </x-filtro>
        </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="{{$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: 100px" 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['mec']))
        <x-tabla id="mec" style="{{$display_tabla}}" :filtrosAv="$filtrosAv" :filtrosAvAlias="$filtrosAvAlias">
            <x-selector-variable id="variables_mec" :lista='$variables' selected="4-3" />
            
            <x-boton-actualizar onclick="getMetasMECSUK('{{$cliente}}', 'metas');" />
            {{-- <x-filtro id="f_clientes_mec" :lista="$clientes" style="max-width: 120px;min-width: 120px;width: 120px;" class="ms-auto">
                <x-slot name="texto">
                    {{__('messages.filtro-texto-cliente')}}
                </x-slot>
            </x-filtro> --}}
            <x-filtro id="f_categorias_mec" :lista="$categorias" style="max-width: 120px;min-width: 120px;width: 120px;">
                <x-slot name="texto">
                    {{__('messages.filtro-texto-categoria')}}
                </x-slot>
            </x-filtro>
            <x-filtro id="f_kam_mec" :lista="$kam" style="max-width: 120px;min-width: 120px;width: 120px;">
                <x-slot name="texto">
                    {{__('messages.filtro-texto-kam')}}
                </x-slot>
            </x-filtro>
        </x-tabla>
        @php $display_tabla = 'display: none;'; @endphp
    @endif

    @if(isset($selectores_tabla['perdidas']))
        <x-tabla id="perdidas" style="{{$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: 100px" 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="{{$display_tabla}}" :filtrosAv="$filtrosAv" :filtrosAvAlias="$filtrosAvAlias">
            <x-selector-variable id="variables_inout" :lista='$variables_inout' selected="total" cliente='$cliente'/>

            <x-selector-generico id="salida_inout2" idselect="salida_inout" :salida="$salida_inout"  class="selector-generico" style="width: 110px">
                <x-slot name="texto">
                    {{__('messages.selector-generico-texto-valor')}}
                </x-slot>
            </x-selector-generico>
            <x-selector-generico id="f_tmp_inout2" idselect="f_tmp_inout" :salida="$periodo"  class="selector-generico" style="width: 100px" 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="202001">2020</option>
                        <option value="202101">2021</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="202053">2020</option>
                        <option value="202153">2021</option>
                    </select>
                </label>
            </div>
            <x-boton-actualizar onclick="getSellinSellout('{{$cliente}}', 'ventas');"/>

            {{-- <x-filtro id="f_clientes_inout" :lista="$clientes" style="max-width: 120px;min-width: 120px;width: 120px;" class="ms-auto">
                <x-slot name="texto">
                    {{__('messages.filtro-texto-cliente')}}
                </x-slot>
            </x-filtro> --}}
            <x-filtro id="f_categorias_inout" :lista="$categorias" style="max-width: 120px;min-width: 120px;width: 120px;">
                <x-slot name="texto">
                    {{__('messages.filtro-texto-categoria')}}
                </x-slot>
            </x-filtro>
            <x-filtro id="f_kam_inout" :lista="$kam" style="max-width: 120px;min-width: 120px;width: 120px;">
                <x-slot name="texto">
                    {{__('messages.filtro-texto-kam')}}
                </x-slot>
            </x-filtro>
        </x-tabla>
        @php $display_tabla = 'display: none;'; @endphp
    @endif

    @if(isset($selectores_tabla['metas']))
    <x-tabla id="metas" :filtrosAv="$filtrosAv" style="{{$display_tabla}}" :filtrosAvAlias="$filtrosAvAlias">
        <x-selector-variable id="variables_metas" :lista='$variables' selected="4-3" />
        <x-selector-generico id="f_year_metas2" idselect="f_year_metas" :salida="$year"  class="selector-generico" style="width: 110px">
            <x-slot name="texto">
                {{__('messages.año')}}
            </x-slot>
        </x-selector-generico>
        <x-boton-actualizar onclick="getEvoSUK('{{$cliente}}', 'metas');" />
        <x-filtro id="f_clientes_metas" :lista="$clientes" style="max-width: 120px;min-width: 120px;width: 120px;" class="ms-auto">
            <x-slot name="texto">
                {{__('messages.filtro-texto-cliente')}}
            </x-slot>
        </x-filtro>
        <x-filtro id="f_kam_metas" :lista="$kam" style="max-width: 120px;min-width: 120px;width: 120px;">
            <x-slot name="texto">
                {{__('messages.filtro-texto-kam')}}
            </x-slot>
        </x-filtro>
    </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>
    
        let ids = ['evo', 'matri', 'comp', 'inout','mec', 'metas','grafdri', 'graftree', 'grafvar', 'grafmatri', 'grafcrec', 'grafevo', 'grafcomp','perdidas'];
        
        var filtrosPromise = getFiltrosAv('{{$cliente}}', '{{$codigo}}');
        $(document).ready(() => {
            ids.forEach(function(item){
                if($('#'+item).length > 0 && $('#f_favoritos_'+item).length > 0) cargarFavoritos(item);
            });

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

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

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

            ["variables_mec"].forEach(element => {
                $('#'+element).select2MultiCheckboxes({
                    placeholder: "{{__('messages.elegir-variables')}}",
                    width: "auto",
                    templateSelection: function(selected, total) {
                        return selected.length + " de " + total + " total";
                    }
                });
                $('#'+element).on('select2:selecting', function() {
                    if ($('#'+element).val().length > 2) {
                        return false;
                    }
                });
            });
            ["variables_metas"].forEach(element => {
                $('#'+element).select2MultiCheckboxes({
                    placeholder: "{{__('messages.elegir-variables')}}",
                    width: "auto",
                    templateSelection: function(selected, total) {
                        return selected.length + " de " + total + " total";
                    }
                });
                $('#'+element).on('select2:selecting', function() {
                    if ($('#'+element).val().length > 3) {
                        return false;
                    }
                });
            });
            let ahora = new Date();
            let congifDate = {
                ...("{{config('app.locale')}}" == "es") && {
                    locale: {
                        format: 'YYYY/MM/DD',
                        daysOfWeek: ["Do", "Lu", "Ma", "Mi", "Ju", "Vi", "Sa"],
                        monthNames: ["Enero", "Febrero", "Marzo", "Abril",
                                    "Mayo", "Junio", "Julio", "Agosto",
                                    "Septiembre", "Octubre", "Noviembre", "Diciembre"],
                        applyLabel: "Aplicar",
                        cancelLabel: "Cancelar",
                        firstDay: 1
                    }
                },
                    maxDate: moment(ahora),
                    startDate: moment((new Date()).setDate(ahora.getDate()-21)),
                    endDate: ahora
            };
            ["#f_dia_inout_ini","#f_dia_comp_ini", "#f_dia_matri_ini","#f_dia_grafdri_ini","#f_dia_graftree_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_ini", "#f_dia_grafevo_fin","#f_dia_evo_ini", "#f_dia_evo_fin"].forEach((selector, i) => {
                $(selector).daterangepicker(congifDate2);
            });
            congifDate["minDate"] = moment(new Date(ahora.getFullYear(), 0, 1));
            [ "#f_dia_grafcomp_ini", "#f_dia_grafcomp_fin"].forEach((selector, i) => {
                $(selector).daterangepicker(congifDate);
            });
            congifDate["minDate"] = moment((new Date()).setDate(ahora.getDate()-365));
            [ "#f_dia_grafmatri_ini"].forEach((selector, i) => {
                $(selector).daterangepicker(congifDate);
            });
            $("#tipo_grafdri").change(function(elem){
                if(elem.target.value=="year"){
                    $("#f_tmp_grafdri2").hide();
                    $(".fltr_periodo_grafdri").hide();
                }else{
                    $("#f_tmp_grafdri2").show();
                    $("#f_tmp_grafdri").change();
                }
            });
            let fechaMin = new Date(new Date().setFullYear(new Date().getFullYear() - 1));
            congifDate["minDate"] = moment(fechaMin);
            [ "#f_dia_grafvar_ini"].forEach((selector, i) => {
                $(selector).daterangepicker(congifDate);
            });
            $('select[id^="f_tmp_"]').change(function(elem){
                let aux = elem.target.id.split("_");
                let macroTmp = aux[aux.length - 1];
                let tmp = $("#f_tmp_" + macroTmp).find('option:selected').val();
                $(".fltr_periodo_" + macroTmp).css("display","none");
                $("#fltr_"+tmp+"_" + macroTmp).css("display","inline-block");
                $("#fltr_"+tmp+"_" + macroTmp + "2").css("display","inline-block");
                $("#fltr_"+tmp+"_" + macroTmp + "3").css("display","inline-block");
            });
            $('#f_mes_grafcomp_ini').change(function(elem){
                let date = new Date();
                    $('#f_mes_grafcomp_fin').find("option").prop("disabled", false);
                if((date.getFullYear()-1).toString() == elem.target.value.substring(0,4)){
                    $('#f_mes_grafcomp_fin').find("option").each(function(i) {
                        if(this.value >= date.getFullYear().toString() + "" + elem.target.value.substring(4)){
                            this.setAttribute("disabled", true);
                        }
                    });
                    if (elem.target.value.substring(4) == "01") {
                        console.log((date.getFullYear()-1).toString() + "12");
                        $('#f_mes_grafcomp_fin').val((date.getFullYear()-1).toString() + "12");
                    }else{
                        $('#f_mes_grafcomp_fin').val(date.getFullYear().toString() + "" + (elem.target.value.substring(4) - 1));
                    }
                }
                $('#f_mes_grafcomp_fin').trigger('change');
            });
            $(".navbar-402").css("border-style","solid");
            $(".navbar-402").css("border-left","0px");
            $(".navbar-402").css("border-color","#57775F");
            $(".navbar-402").css("background-color","#57775F");

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

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

            // clickActualizar(['grafcomp', 'comp', 'grafevo', 'evo', 'matri', 'grafdri', 'graftree', 'grafvar']);
            // (async _ => {
            //     await getGrafComp('', 'ventas');
            //     await getComp('', 'ventas');
            //     await getGrafEvo('', 'ventas');
            //     await getEvo('', 'ventas');
            //     await getMatri('', 'ventas');
            //     await getGrafDri('', 'ventas');
            //     await getGrafTree('', 'ventas');
            // })();
        });
    </script>
@endsection
{{-- 
<style>
    
    table-striped>tbody>tr:nth-of-type(odd) {
        /* --bs-table-accent-bg: var(--bs-table-striped-bg); */
        color:;
    }
</style> --}}