@extends('layouts.reporte_analytics')

@section('php')
    @php
        $locales = [];
        $cantidad = 100;
        while ($cantidad <= $cantidad_locales) {
            $locales[$cantidad] = $cantidad;
            $cantidad = $cantidad + 100;
        }
        if ($cantidad % 100 == 0) {
            $locales[$cantidad_locales] = $cantidad_locales;
        }
        $locales = json_encode($locales);
        $anhos = [];
        $semestres = [];
        foreach ($anos as $value) {
            if(property_exists($value, "ano")){
                $anhos[$value->ano] = $value->ano;
                $semestres[$value->ano."-1"] = $value->ano."-1";
                $semestres[$value->ano."-2"] = $value->ano."-2";
            }else{
                $anhos[$value->ANO] = $value->ANO;
                $semestres[$value->ANO."-1"] = $value->ANO."-1";
                $semestres[$value->ANO."-2"] = $value->ANO."-2";
            }
        }
        $cliente = config('app.CLIENTE');
        
        $salida = json_encode(['2'=> 'Sell Out']);
        $salida_matri = json_encode(["2"=> __('messages.ventas'), "1" => __('messages.unidades')]);
        $tipo_var = json_encode(["2"=> __('messages.dinero'), "1" => __('messages.porcentaje')]);
        $periodo = json_encode(["sem" => __('messages.semanas'), "mes" => __('messages.meses')]);
        $periodo2 = json_encode(["year" => "Año", "mes" => __('messages.meses')]);
        $periodo_grafcomp = json_encode([date("Y")-1 => date("Y")-1, date("Y") => date("Y")]);
        $periodo_grafcomp2 = json_encode([date("Y") => date("Y"), date("Y")-1 => date("Y")-1]);
        $periodo_comp = json_encode(["dia"=> __('messages.dias'),"ytd"=> __('messages.ytd'), "mec" => __('messages.mec'), "sem" => __('messages.semanas'), "mes" => __('messages.meses')]);
        $periodo_matri = json_encode(["ytd"=> __('messages.ytd'), "mec" => __('messages.mec'), "sem" => __('messages.semanas'), 'dia' => __('messages.dias')]);
        $periodo_grafmatri = json_encode(["ytd"=> __('messages.ytd'), "mec" => __('messages.mec'), 'dia' => __('messages.dias')]);
        $periodo_var = json_encode(["dia"=> __('messages.dias')]);
        $mesesComp = [];
        $semanasComp = [];
        $yearAct = date("Y");
        $tipo = json_encode(["year" => (__('messages.año'))."-".(__('messages.meses'))."-".(__('messages.dias')), 
        "local" => __('messages.var-cadena')."-Formato-".(__('messages.variable-local')),
        "marca"=>__('messages.marca')."-".(__('messages.filtro-texto-categoria'))."-".(__('messages.variable-producto'))]);
        $tipo_var = json_encode(["dinero"=>__('messages.dinero'), "porcentaje" =>__('messages.porcentaje')]);
        $lim_inf = json_encode(["-100"=>"-100%", "-50" =>"-50%", "-25"=>"-25%", "-10"=>"-10%"]);
        $lim_sup = json_encode(["100"=>"100%", "50" =>"50%", "25"=>"25%", "10"=>"10%"]);
        $tipos_graficos = json_encode([ "msline" => "Líneas", 
        "stackedcolumn2d" => (__('messages.selector-tipo-grafico-columnas-apiladas')),"mscolumn2d" => "Columnas agrupadas", "stackedbar2d" => "Barras apiladas"]);
        foreach ($meses as $value) {
            list($_mes, $_year) = explode(' ', $value->nombre);
            if($_year == $yearAct) {
                $mesesComp []= $value;
            }
        }
        foreach ($semanas as $value) {
            $_year = substr($value->periodo, 0, 4);
            if($_year == $yearAct) {
                $semanasComp []= $value;
            }
        }
        if ($cliente == 'colgate') {
            $div = '<div style="padding: 5px 16px;overflow: hidden;background-color: lightblue;text-align: center;"><ul>';
            foreach ($div_reportes as $value) {
                $div.="<li>".$value->Descripcion."</li>";
            }
            $div.="</ul></div>";
        }else{
            $div='';
        }
        $variables_2 = $variables;
        if(isset($variables_2['Local']) && isset($variables_2['Local']['3-5'])){
            unset($variables_2['Local']['3-5']);
        }
        if(isset($variables_2['Producto']) && isset($variables_2['Producto']['1-15'])){
            unset($variables_2['Producto']['1-15']);
        }

        $ninguno = ['' => ['-1' => 'Sin Seleccionar']];
        $variables_2 = $ninguno + $variables_2;

        $display_grafico = '';
        $display_tabla = '';
        $variables_agrupacion = json_encode(["1"=>"Cadena", "2-5"=>"Holding", "2-0"=>"Compañía"]);
        $orden_ventas = json_encode(["1"=>"Primeras mejores 30 salas", "2"=>"Segundas mejores 30 salas", "3"=>"Terceras mejores 30 salas", "4"=>"Cuartas mejores 30 salas"]);
        $orden = json_encode(["1" => "Descendente", "2" => "Ascendente"]);
        $top = json_encode(["1" => "Primeras 20 salas", "2" => "Segundas 20 salas", "3" => "Terceras 20 salas"]);
        $texto = "Moda: Corresponde al valor con mayor frecuencia en una distribución de datos. En
        este caso corresponde al precio que apareció la mayor cantidad de veces en el
        periodo seleccionado
        Promedio: El promedio o Media corresponde al valor característico de un conjunto
        de datos cuantitativos y se obtiene a partir de la suma de todos los valores del
        conjunto de datos dividido por la cantidad de datos sumados.
        Mediana: Corresponde al valor del dato central dentro de un conjunto de datos
        cuantitativos ordenados.
        Rango: Corresponde a la diferencia entre el mayor y el menor dato en un conjunto
        de datos cuantitativos.
        Desviación Estándar: Corresponde a una medida que se utiliza para cuantificar
        la variación o la dispersión de un conjunto de datos numéricos. Una desviación
        estándar baja indica que la mayor parte de los datos de una muestra tienden a estar
        agrupados cerca de su media (promedio), mientras que una desviación estándar alta
        indica que los datos se extienden sobre un rango de valores más amplio.
        Se toma el 99% de los datos, dejando fuera los extremos.";
                $texto_prec = "Si mantiene presionado el click del mouse mientras mueve el cursor, puede seleccionar
        un área específica del gráfico para realizar zoom.
        En la esquina superior derecha del gráfico se pueden encontrar 5 botones (de izquierda a
        derecha):
        Primer botón: Permite acercar el zoom del gráfico.
        Segundo botón: Permite alejar el zoom del gráfico.
        Tercer botón: Permite resetear el zoom del gráfico al zoom inicial.
        Cuarto botón: Permite realizar zoom sobre un área específica del gráfico que se debe
        marcar con el mouse. Esta acción se puede realizar repetidas veces hasta lograr el
        zoom deseado.
        Quinto botón: Permite desplazarse por el gráfico al mantener presionado el click del
        mouse y desplazando el cursor.";

        $display_salida = 'd-none';
        if($cliente == 'canontex'){
            $salida = json_encode(['2'=> 'Sell Out', '251' => 'Sell In']);
            $display_salida = '';
        }
    @endphp
@endsection

@section('div_reportes')
    @php echo $div; @endphp
    <style>
        table tr td {
            border: 2px solid #D1D1D1;
            padding: 10px;
        }
        table tr:nth-child(odd) {
            background: #f4f4f4;
        }
    </style>
@endsection
@if(count($selectores_grafico)>0)
    @section('grafico')
        @if(isset($selectores_grafico['estadPrecios']))
            <x-grafico id="estadPrecios" style="{{$display_grafico}}" :filtrosAv="$filtrosAv" :filtrosAvAlias="$filtrosAvAlias">
                <x-selector-generico id="salida_estadPrecios2" idselect="salida_estadPrecios" :salida="$salida"  class="selector-generico {{$display_salida}}" style="width: 120px">
                    <x-slot name="texto">
                        {{__('messages.selector-generico-texto-valor')}}
                    </x-slot>
                </x-selector-generico>

                <x-selector-generico id="f_periodo_estadPrecios2" idselect="f_periodo_estadPrecios" :salida="$periodo" class="selector-generico" style='width: 120px'>
                    <x-slot name="texto">
                        Promedio por:
                    </x-slot>
                </x-selector-generico>
                
                <x-selector-generico id="f_tmp_estadPrecios_ini2" idselect="estadPrecios_periodo_ini" :salida="$periodo_grafcomp"  class="" style="width: 120px" >
                    <x-slot name="texto">
                        {{__('messages.selector-semanas-meses-texto-desde')}}
                    </x-slot>
                </x-selector-generico>

                <x-selector-generico id="f_tmp_estadPrecios_fin2" idselect="estadPrecios_periodo_fin" :salida="$periodo_grafcomp2"  class="" style="width: 120px" >
                    <x-slot name="texto">
                        {{__('messages.selector-semanas-meses-texto-hasta')}}
                    </x-slot>
                </x-selector-generico>
                
                <x-boton-actualizar onclick="getGrafEstadPrecios('{{$cliente}}', 'ventas');"/>
                <x-infobox tamano="25px" texto="{{$texto}}"/>

                {{-- <x-filtro id="f_clientes_estadPrecios" :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_estadPrecios" :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_estadPrecios" :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['prevent']))
            @php
                if(array_key_exists("cadena",$filtrosAv)){
                    unset($filtrosAv["cadena"]);
                }
            @endphp
            <x-grafico id="prevent" style="{{$display_grafico}}" :filtrosAv="$filtrosAv" :filtrosAvAlias="$filtrosAvAlias">
                <x-selector-generico id="salida_prevent2" idselect="salida_prevent" :salida="$salida"  class="selector-generico {{$display_salida}}" style="width: 120px">
                    <x-slot name="texto">
                        {{__('messages.selector-generico-texto-valor')}}
                    </x-slot>
                </x-selector-generico>

                <x-filtro id="f_cadena_prevent" :lista="$kam" style="max-width: 120px;min-width: 120px;width: 120px;">
                    <x-slot name="texto">
                    @if($cliente != 'siksa'){{__('messages.var-cadena')}} @else Sub Cadena @endif
                    </x-slot>
                </x-filtro>

                {{--<x-filtro id="f_producto_prevent" :lista="$kam" style="max-width: 120px;min-width: 120px;width: 120px;">
                    <x-slot name="texto">
                        {{__('messages.filtro-texto-producto')}}
                    </x-slot>
                </x-filtro>--}}

                <x-selector-generico id="f_periodo_prevent2" idselect="f_periodo_prevent" :salida="$periodo" class="selector-generico" style='width: 120px'>
                    <x-slot name="texto">
                        Promedio por:
                    </x-slot>
                </x-selector-generico>
                
                <x-selector-generico id="f_tmp_prevent_ini2" idselect="prevent_periodo_ini" :salida="$periodo_grafcomp"  class="" style="width: 120px" >
                    <x-slot name="texto">
                        {{__('messages.selector-semanas-meses-texto-desde')}}
                    </x-slot>
                </x-selector-generico>

                <x-selector-generico id="f_tmp_prevent_fin2" idselect="prevent_periodo_fin" :salida="$periodo_grafcomp2"  class="" style="width: 120px" >
                    <x-slot name="texto">
                        {{__('messages.selector-semanas-meses-texto-hasta')}}
                    </x-slot>
                </x-selector-generico>
                
                <x-boton-actualizar onclick="getGrafPreVent('{{$cliente}}', 'ventas');"/>

                {{-- <x-filtro id="f_clientes_prevent" :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_prevent" :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_prevent" :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;'; 
                $filtrosAv["cadena"] = [];
            @endphp
        @endif
        @if(isset($selectores_grafico['preventpro']))
            @php
                if(array_key_exists("producto",$filtrosAv)){
                    unset($filtrosAv["producto"]);
                }
            @endphp
            <x-grafico id="preventpro" style="{{$display_grafico}}" :filtrosAv="$filtrosAv" :filtrosAvAlias="$filtrosAvAlias">
                <x-selector-generico id="salida_preventpro2" idselect="salida_preventpro" :salida="$salida"  class="selector-generico {{$display_salida}}" style="width: 120px">
                    <x-slot name="texto">
                        {{__('messages.selector-generico-texto-valor')}}
                    </x-slot>
                </x-selector-generico>

                <x-filtro id="f_producto_preventpro" :lista="$kam" style="max-width: 120px;min-width: 120px;width: 120px;">
                    <x-slot name="texto">
                        {{__('messages.filtro-texto-producto')}}
                    </x-slot>
                </x-filtro>

                <x-selector-generico id="f_periodo_preventpro2" idselect="f_periodo_preventpro" :salida="$periodo" class="selector-generico" style='width: 120px'>
                    <x-slot name="texto">
                        Promedio por:
                    </x-slot>
                </x-selector-generico>
                
                <x-selector-generico id="f_tmp_preventpro_ini2" idselect="preventpro_periodo_ini" :salida="$periodo_grafcomp"  class="" style="width: 120px" >
                    <x-slot name="texto">
                        {{__('messages.selector-semanas-meses-texto-desde')}}
                    </x-slot>
                </x-selector-generico>

                <x-selector-generico id="f_tmp_preventpro_fin2" idselect="preventpro_periodo_fin" :salida="$periodo_grafcomp2"  class="" style="width: 120px" >
                    <x-slot name="texto">
                        {{__('messages.selector-semanas-meses-texto-hasta')}}
                    </x-slot>
                </x-selector-generico>
                
                <x-boton-actualizar onclick="getGrafPreVentPro('{{$cliente}}', 'ventas');"/>
{{-- 
                <x-filtro id="f_clientes_preventpro" :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_preventpro" :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_preventpro" :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;';
            $filtrosAv["producto"] = []; @endphp
        @endif
        @if(isset($selectores_grafico['preunipro']))
            <x-grafico id="preunipro" style="{{$display_grafico}}" :filtrosAv="$filtrosAv" :filtrosAvAlias="$filtrosAvAlias">
                <x-selector-generico id="salida_preunipro2" idselect="salida_preunipro" :salida="$salida"  class="selector-generico {{$display_salida}}" style="width: 120px">
                    <x-slot name="texto">
                        {{__('messages.selector-generico-texto-valor')}}
                    </x-slot>
                </x-selector-generico>

                <x-selector-generico id="f_periodo_preunipro2" idselect="f_periodo_preunipro" :salida="$periodo2" class="selector-generico" style='width: 120px'>
                    <x-slot name="texto">
                        Promedio por:
                    </x-slot>
                </x-selector-generico>
                
                <x-selector-generico id="f_year_preunipro2" idselect="f_year_preunipro" :salida="$periodo_grafcomp"  class="" style="width: 120px" >
                    <x-slot name="texto">
                        {{__('messages.año')}}
                    </x-slot>
                </x-selector-generico>

                <x-selector-meses id="f_mes_preunipro2" idselect="f_mes_preunipro" :meses="$meses" class="f_mes_preunipro"  style="width: 120px; display: none">
                    <x-slot name="texto">
                        {{__('messages.meses')}}
                    </x-slot>
                </x-selector-meses>
                
                <x-boton-actualizar onclick="getGrafPreUniPro('{{$cliente}}', 'ventas');"/>
                <x-infobox tamano="25px" texto="{{$texto_prec}}"/>

                {{-- <x-filtro id="f_clientes_preunipro" :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_preunipro" :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_preunipro" :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['prediasem']))
            <x-grafico id="prediasem" style="{{$display_grafico}}">
                <x-selector-generico id="salida_prediasem2" idselect="salida_prediasem" :salida="$salida"  class="selector-generico {{$display_salida}}" style="width: 120px">
                    <x-slot name="texto">
                        {{__('messages.selector-generico-texto-valor')}}
                    </x-slot>
                </x-selector-generico>
                <x-selector-dias idpadre="prediasem"/>
                <x-boton-actualizar onclick="getGrafPreDiaSem('{{$cliente}}', 'ventas');"/>
            </x-grafico>
            @php $display_grafico = 'display: none;'; @endphp
        @endif
        @if(isset($selectores_grafico['preventloc']))
            <x-grafico id="preventloc" style="{{$display_grafico}}" :filtrosAv="$filtrosAv" :filtrosAvAlias="$filtrosAvAlias">
                <x-selector-generico id="salida_preventloc2" idselect="salida_preventloc" :salida="$salida"  class="selector-generico {{$display_salida}}" style="width: 120px">
                    <x-slot name="texto">
                        {{__('messages.selector-generico-texto-valor')}}
                    </x-slot>
                </x-selector-generico>

                <x-selector-generico id="f_periodo_preventloc2" idselect="f_periodo_preventloc" :salida="$periodo2" class="selector-generico" style='width: 120px'>
                    <x-slot name="texto">
                        {{__('messages.selector-generico-texto-periodo')}}
                    </x-slot>
                </x-selector-generico>
                
                <x-selector-generico id="f_year_preventloc2" idselect="f_year_preventloc" :salida="$periodo_grafcomp"  class="" style="width: 120px" >
                    <x-slot name="texto">
                        {{__('messages.año')}}
                    </x-slot>
                </x-selector-generico>

                <x-selector-meses id="f_mes_preventloc2" idselect="f_mes_preventloc" :meses="$meses" class="f_mes_preventloc"  style="width: 120px; display: none">
                    <x-slot name="texto">
                        {{__('messages.meses')}}
                    </x-slot>
                </x-selector-meses>
                
                <x-boton-actualizar onclick="getGrafPreVentLoc('{{$cliente}}', 'ventas');"/>
                <x-infobox tamano="25px" texto="{{$texto_prec}}"/>

                {{-- <x-filtro id="f_clientes_preventloc" :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_preventloc" :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_preventloc" :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['rankingsalas']))
            <x-grafico id="rankingsalas" style="{{$display_grafico}}" :filtrosAv="$filtrosAv" :filtrosAvAlias="$filtrosAvAlias">
                <x-selector-generico id="salida_rankingsalas2" idselect="salida_rankingsalas" :salida="$salida"  class="selector-generico {{$display_salida}}" style="width: 120px">
                    <x-slot name="texto">
                        {{__('messages.selector-generico-texto-valor')}}
                    </x-slot>
                </x-selector-generico>
                
                <x-selector-generico id="f_top_rankingsalas2" idselect="f_top_rankingsalas" :salida="$top" class="selector-generico" style='width: 160px'>
                    <x-slot name="texto">
                        Top
                    </x-slot>
                </x-selector-generico>

                <x-filtro id="f_cadena_rankingsalas" :lista="$kam" style="max-width: 120px;min-width: 120px;width: 120px;">
                    <x-slot name="texto">
                        {{__('messages.var-cadena')}}
                    </x-slot>
                </x-filtro>

                <x-selector-generico id="f_orden_rankingsalas2" idselect="f_orden_rankingsalas" :salida="$orden" class="selector-generico" style='width: 120px'>
                    <x-slot name="texto">
                        Orden
                    </x-slot>
                </x-selector-generico>

                <x-selector-generico id="f_periodo_rankingsalas2" idselect="f_periodo_rankingsalas" :salida="$periodo2" class="selector-generico" style='width: 120px'>
                    <x-slot name="texto">
                        {{__('messages.selector-generico-texto-periodo')}}
                    </x-slot>
                </x-selector-generico>
                
                <x-selector-generico id="f_year_rankingsalas_ini2" idselect="f_year_rankingsalas_ini" :salida="$periodo_grafcomp"  class="" style="width: 120px" >
                    <x-slot name="texto">
                        {{__('messages.selector-semanas-meses-texto-desde')}}
                    </x-slot>
                </x-selector-generico>
                
                <x-selector-generico id="f_year_rankingsalas_fin2" idselect="f_year_rankingsalas_fin" :salida="$periodo_grafcomp"  class="" style="width: 120px"
                 :selected="$yearAct">
                    <x-slot name="texto">
                        {{__('messages.selector-semanas-meses-texto-hasta')}}
                    </x-slot>
                </x-selector-generico>

                <x-selector-meses id="f_mes_rankingsalas_ini2" idselect="f_mes_rankingsalas_ini" :meses="$meses" class="f_mes_rankingsalas"  style="width: 120px; display: none">
                    <x-slot name="texto">
                        {{__('messages.meses')}}
                    </x-slot>
                </x-selector-meses>
                <x-selector-dias idpadre="rankingsalas" style="display: none"/>

                <div class="col col-md-auto obj_filtro form-group font-weight-normal d-flex align-items-center" id="f_precios_rankingsalas2">
                    <label class="align-items-center d-flex" style="padding-top: 15px">
                        <input type="checkbox" id="f_precios_rankingsalas" value="first_checkbox" style="margin-right: 5px"> Ranking Por Precios
                    </label>
                </div>

                <div class="col col-md-auto obj_filtro form-group font-weight-normal d-flex align-items-center" id="f_rango_rankingsalas2">
                    <label class="align-items-center d-flex" style="padding-top: 15px">
                        <input type="checkbox" id="f_rango_rankingsalas" value="first_checkbox" style="margin-right: 5px"> Ranking Por Rango
                    </label>
                </div>
                
                <x-boton-actualizar onclick="getGrafRankingSalas('{{$cliente}}', 'ventas');"/>
{{-- 
                <x-filtro id="f_clientes_rankingsalas" :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_rankingsalas" :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_rankingsalas" :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

@section('js_aft')
    <script>
        let ids = ['estadPrecios', 'prevent', 'preventpro', 'preunipro', "rankingsalas"];
        var filtrosPromise = getFiltrosAv('{{$cliente}}', '{{$codigo}}');
        $(document).ready(() => {
            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')}}");
                }
            }

            ids.forEach(function(item){
                if($('#'+item).length > 0 && $('#f_favoritos_'+item).length > 0) cargarFavoritos(item);
            });

            multiSelect('cadena', 'prevent', "{{__('messages.seleccionar')}}");
            multiSelect('cadena', 'rankingsalas', "{{__('messages.seleccionar')}}");
            multiSelect('producto', 'preventpro', "{{__('messages.seleccionar')}}");
            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_prediasem_ini", "#f_dia_rankingsalas_ini"].forEach((selector, i) => {
                $(selector).daterangepicker(congifDate);
            });
        });
        $("#f_precios_rankingsalas").change(function () {
                if(this.checked){
                    $("#f_rango_rankingsalas2").removeClass("d-flex");
                    $("#f_rango_rankingsalas2").hide();
                }else{
                    $("#f_rango_rankingsalas2").addClass("d-flex");
                    $("#f_rango_rankingsalas2").show();
                }
                console.log(this.checked);
            }
        );
        $("#f_rango_rankingsalas").change(function () {
                if(this.checked){
                    $("#f_precios_rankingsalas2").removeClass("d-flex");
                    $("#f_precios_rankingsalas2").hide();
                }else{
                    $("#f_precios_rankingsalas2").addClass("d-flex");
                    $("#f_precios_rankingsalas2").show();
                }
            }
        );
        ["preunipro", "preventloc", "rankingsalas"].forEach(element => {
            $("#f_periodo_"+element).change(function () {
                if ($(this).find(":selected").val() == "mes") {
                    $("#fltr_dia_"+element).hide();
                    $("#f_mes_"+element+"2").show();
                    $("#f_year_"+element+"2").hide();
                    $("#f_mes_"+element+"_ini2").show();
                    $("#f_year_"+element+"_ini2").hide();
                    $("#f_mes_"+element+"_fin2").show();
                    $("#f_year_"+element+"_fin2").hide();
                }else if($(this).find(":selected").val() == "year"){
                    $("#fltr_dia_"+element).hide();
                    $("#f_mes_"+element+"2").hide();
                    $("#f_year_"+element+"2").show();
                    $("#f_mes_"+element+"_ini2").hide();
                    $("#f_year_"+element+"_ini2").show();
                    $("#f_mes_"+element+"_fin2").hide();
                    $("#f_year_"+element+"_fin2").show();
                }else{
                    $("#fltr_dia_"+element).show();
                    $("#f_mes_"+element+"2").hide();
                    $("#f_year_"+element+"2").hide();
                    $("#f_mes_"+element+"_ini2").hide();
                    $("#f_year_"+element+"_ini2").hide();
                    $("#f_mes_"+element+"_fin2").hide();
                    $("#f_year_"+element+"_fin2").hide();
                }
            });
        });
        $('[data-toggle="infobox"]').tooltip();
    </script>
@endsection