@extends('layouts.reporte')
    <!-- END Hero -->
@section('php')
    @php
        $meses1 = [
            1=>'Enero', 2=>'Febrero', 3=>'Marzo',
            4=>'Abril', 5=>'Mayo', 6=>'Junio',
            7=>'Julio', 8=>'Agosto', 9=>'Septiembre',
            10=>'Octubre', 11=>'Noviembre', 12=>'Diciembre'
        ];
        $locales = [];
        $cantidad = 1;
        while ($cantidad <= $cantidad_locales) {
            $locales []= $cantidad;
            $cantidad = $cantidad + 100;
        }
        if ($cantidad % 100 == 0) {
            $locales []= $cantidad_locales;
        }
        $cliente = config('app.CLIENTE');
        $locales = json_encode($locales);
        $variable = json_encode(["3-5"=>"LOCAL"]);
        $periodo_grafdisp = json_encode(["dia"=> __('messages.dias'),]);
        if ($cliente == "colgate") {
            $valor_salida = json_encode(["uni"=> __('messages.unidades'), "700" => __('messages.dias-de-inventario')]);
        }else{
            $valor_salida = json_encode(["uni"=> __('messages.unidades')]);
        }
        $periodo_comp = json_encode(["100"=> __('messages.100'), "20" => __('messages.20'), "80" => __('messages.80')]);
        $salida_detalle = json_encode(["1"=> "Unidades", "2" => "Kilos"]);

        $salida = json_encode(["50"=>"Stock (U)", "val" => "Stock ($)", "700" => __('messages.dias-de-inventario')]);
        if($cliente == 'siksa'){
            $salidaDoh = json_encode(["555"=>"Stock (Kg)","700" => __('messages.dias-de-inventario'), "ven-stock-u" => __('messages.ventas-y-stock'), "50"=>"Stock (U)", "dias_inv_kilos" => "DOH Kilos", "ven-stock-u-kg" => "Ventas (kg) y Stock (kg)"]);

            $salida = json_encode(["50"=>"Stock (U)", "60"=>"Stock (Kg)", "51"=>"Stock CD", "81" => "Stock Total (Kg)", "82" => "Stock Total (Und)" ]);
            $salida_evo = json_encode(["10" => "Kilos (Kg)", "2"=> __('messages.ventas'), "61" => "Ventas + IVA ($)", "1" => __('messages.unidades'), "3" => __('messages.costo')]);
        }else{
            $salidaDoh = json_encode(["700" => __('messages.dias-de-inventario'), "ven-stock-u" => __('messages.ventas-y-stock'), "101010"=>"Stock (U)" , "555"=>"Peso Stock (Kg)"]);
        }
        $tipo_periodo_ = 'mes';
        $display = 'block';
        $variable_displocal = json_encode(["local" => "LOCAL","local-producto" => "LOCAL-PRODUCTO", "local-reponedor" => "LOCAL-REPONEDOR", "local-vendedor" => "LOCAL-VENDEDOR", "local-producto-rep" => "LOCAL-PRODUCTO-REPONEDOR", "local-producto-ven" => "LOCAL-PRODUCTO-VENDEDOR"]);
        $periodo = json_encode(["dia"=> __('messages.dias')]);
        $periodo_evo = json_encode(["dia"=> __('messages.dias'), "sem" => __('messages.semanas'), "mes" => __('messages.meses')]);
        $periodo2 = json_encode(["mes"=> __('messages.meses'),"dia"=> __('messages.dias'),"sem"=> __('messages.semanas')]);
        $periodo3 = json_encode(["acum"=> __('messages.acumulado'),"mec"=> __('messages.mec'),3=> $meses1[date('n', strtotime(date('Y-m-d')." -1 month"))]]);
        $periodo4 = json_encode(["dia"=> __('messages.dias'),"sem"=> __('messages.semanas')]);
        $tipoStock = json_encode(["1" => __('messages.catalogado'), "0" => __('messages.no-catalogado'), "2" => __('messages.no-informado'), "" => __('messages.todos')]);
        $tipoStock2 = json_encode(["1" => __('messages.catalogado'), "0" => __('messages.no-catalogado')]);
        $agrupacionesAle = json_encode(['1-15' => __('messages.variable-producto'), '3-5' => __('messages.variable-local'),
                            '2-0' => __('messages.var-cadena'), '2-5' => __('messages.var-holding')]);
        $diasVentas = json_encode(['30' => '30 '.__('messages.dias'), '14' => '14 '.__('messages.dias'), '7' => '7 '.__('messages.dias')]);
        $tiposAlertas = json_encode(['cvss' => 'Quiebres (Con ventas y sin stock)','svss' => 'Crítico (Sin ventas y sin stock)', 'svcs' => 'Ajustes (Sin ventas y con stock)',
                         'posible_quiebre' => 'Posible quiebre (Días stock < 8)',
                        'sobrestock' => 'Sobrestock (Días stock > 180)',  'todo' => 'Todas las alertas']); //, 'sin_alerta' => 'Sin alerta'
        $tiposAlertas2= json_encode(['cvss' => 'Quiebres (Con ventas y sin stock)','svss' => 'Crítico (Sin ventas y sin stock)', 'svcs' => 'Ajustes (Sin ventas y con stock)',
                         'posible_quiebre' => 'Posible quiebre (Días stock < 8)',
                        'sobrestock' => 'Sobrestock (Días stock > 180)']);
        if($cliente == 'dona'){
            $tiposAlertas = json_encode(['cvss' => 'Quiebres (Con ventas y sin stock)','svss' => 'Crítico (Sin ventas y sin stock)', 'svcs' => 'Ajustes (Sin ventas y con stock)',
                         'posible_quiebre' => 'Posible quiebre (Días stock < 8)',
                        'sobrestock' => 'Sobrestock (Días stock > 30)', 'sin_alertas' => 'Sin Alertas', 'todo' => 'Todas las alertas']);

            
        }
        if($cliente == 'siksa'){
            $tiposAlertas2= json_encode(['cvss' => 'Quiebres (Con ventas y sin stock)','svss' => 'Crítico (Sin ventas y sin stock)', 'svcs' => 'Ajustes (Sin ventas y con stock)',
                         'posible_quiebre' => 'Posible quiebre (Días stock < 7)',
                        'sobrestock' => 'Sobrestock (Días stock > 180)']);
            
            $tiposAlertas = json_encode(['cvss' => 'Quiebres (Con ventas y sin stock)','svss' => 'Crítico (Sin ventas y sin stock)', 'svcs' => 'Ajustes (Sin ventas y con stock)',
                'posible_quiebre' => 'Posible quiebre (Días stock < 7)',
            'sobrestock' => 'Sobrestock (Días stock > 180)',  'todo' => 'Todas las alertas']);
        }
        $unidades = json_encode(['1' => 'Unidades']);
        $tipos_graficos = json_encode([ "msline" => "Líneas", "stackedcolumn2d" => (__('messages.selector-tipo-grafico-columnas-apiladas')),"mscolumn2d" => "Columnas agrupadas", "stackedbar2d" => "Barras apiladas"]);
        $display_grafico = '';
        $display_tabla = '';
        if($cliente == "colgate"){
        $warning = "Los porcentajes mostrados en las tablas se calculan de la siguiente manera: \n
        Instock: (SUMA(Instock)/Total de registros) x 100
        DOH: Stock Valorizado * 28 / Ventas ult 28 dias
        OSA: (SUMA(OSA)/Total de registros) x 100
        Quiebre: (Total de registros - SUMA(Instock)/Total de registros) x 100
        Inv. Fantasma: 100% - OSA% - Quiebre%
        Fillrate: (Cantidad recibida/Cantidad solicitada) x 100\n
        Pasar el cursor por encima de la celda de una tabla mostrará mayor información acerca del cálculo aplicado.\n";
        }else{
            $warning = "";
        }
        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_locales = json_encode($variables[__('messages.variable-local')]);
        $variables_producto = $variables[__('messages.variable-producto')];
        if ($cliente != "demoqa") {
            $variables_producto["1-5"] = __('messages.variable-producto-unificado');
        }else{
            $variables_producto["1-16"] = __('messages.variable-producto-unificado');
        }
        //dd($variables_locales);
        $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;
    @endphp
@endsection

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

@if(count($selectores_grafico)>0)
@section('grafico')

    @if(isset($selectores_grafico['grafstockale']))
        <x-grafico id="grafstockale" style="height: 450px !important; {{$display_grafico}}" :filtrosAv="$filtrosAv" :filtrosAvAlias="$filtrosAvAlias">
            <x-selector-generico id="agrupacion_grafstockale2" idselect="agrupacion_grafstockale" :salida="$agrupacionesAle"  class="selector-generico" style="width: 120px" selected="2-0">
                <x-slot name="texto">
                    Desglosar Por
                </x-slot>
            </x-selector-generico>

            @if($cliente == "arenys")
                <x-selector-generico id="tipo_stock_grafstockale2" idselect="tipo_stock_grafstockale" :salida="$tipoStock" class="selector-generico" style="width: 120px" selected="">
                    <x-slot name="texto">
                        {{__('messages.selector-generico-texto-stock')}}
                    </x-slot>
                </x-selector-generico>
            @else
                <x-selector-generico id="tipo_stock_grafstockale2" idselect="tipo_stock_grafstockale" :salida="$tipoStock" class="selector-generico" style="width: 120px">
                    <x-slot name="texto">
                        {{__('messages.selector-generico-texto-stock')}}
                    </x-slot>
                </x-selector-generico>
            @endif

            <x-selector-generico id="f_dias_ventas_grafstockale2" idselect="f_dias_ventas_grafstockale" :salida="$diasVentas"  class="selector-generico" style="width: 120px">
                <x-slot name="texto">
                    {{__('messages.periodo_ventas')}}
                </x-slot>
            </x-selector-generico>

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

            <x-filtro id="f_clientes_grafstockale" :lista="$clientes" style="max-width: 120px;min-width: 120px;width: 120px;" class="ms-auto">
                <x-slot name="texto">
                    @if($cliente != 'siksa'){{__('messages.filtro-texto-cliente')}}@else Cadena @endif
                </x-slot>
            </x-filtro>
            @if ($cliente == "colgate")
            <x-filtro id="f_subcategoria_grafstockale" :lista="$subcategoria" style="max-width: 120px;min-width: 120px;width: 120px;">
                <x-slot name="texto">
                    {{__('messages.campo-pr-subcategoria')}}
                </x-slot>
            </x-filtro>
            @else
            <x-filtro id="f_categorias_grafstockale" :lista="$categorias" style="max-width: 120px;min-width: 120px;width: 120px;">
                <x-slot name="texto">
                    {{__('messages.filtro-texto-categoria')}}
                </x-slot>
            </x-filtro>
            @endif
            @if ($cliente == "colgate")
            <x-filtro id="f_producto_sku_prov_grafstockale" :lista="$producto_sku_prov" style="max-width: 120px;min-width: 120px;width: 120px;">
                <x-slot name="texto">
                    {{__('messages.variable-producto-unificado')}}
                </x-slot>
            </x-filtro>
            @else
            <x-filtro id="f_kam_grafstockale" :lista="$kam" style="max-width: 120px;min-width: 120px;width: 120px;">
                <x-slot name="texto">
                    {{__('messages.filtro-texto-kam')}}
                </x-slot>
            </x-filtro>
            @endif

            <div class="w-100 justify-content-center" id="f_carga_grafstockale" 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['grafevo']))
        <x-grafico id="grafevo" style="height: 450px !important; {{$display_grafico}}" :filtrosAv="$filtrosAv" :filtrosAvAlias="$filtrosAvAlias">
            <x-selector-variable id="variables_grafevo" :lista='$variables' selected="2-5" />

            <x-selector-generico id="salida_grafevo2" idselect="salida_grafevo" :salida="$salida" class="selector-generico" style="width: 135px;">
                    <x-slot name="texto">
                        {{__('messages.selector-generico-texto-valor')}}
                    </x-slot>
            </x-selector-generico>

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

            <x-selector-dias idpadre="grafevo" />
            <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>
            <!--EVOLUTVO MES-->
            <x-selector-meses id="fltr_mes_grafevo" idselect="f_mes_grafevo_ini" :meses="$meses" class="fltr_periodo_grafevo" style="display: none;">
                <x-slot name="texto">
                    {{__('messages.selector-semanas-meses-texto-desde')}}
                </x-slot>
            </x-selector-meses>
            <x-selector-meses id="fltr_mes_grafevo2" idselect="f_mes_grafevo_fin" :meses="$meses" class="fltr_periodo_grafevo" style="display: none;">
                <x-slot name="texto">
                    {{__('messages.selector-semanas-meses-texto-hasta')}}
                </x-slot>
            </x-selector-meses>

            <x-selector-generico id="f_type_grafevo2" idselect="f_type_grafevo" :salida="$tipos_graficos"  class="selector-generico" style="width: 150px" selected="stackedcolumn2d">
                <x-slot name="texto">
                    {{__('messages.selector-tipo-grafico')}}
                </x-slot>
            </x-selector-generico>
            <x-infobox tamano="25px" :texto="$warning"/>
            <x-boton-actualizar onclick="getGrafEvo('{{$cliente}}', 'stock');"/>
            <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>
            @if ($cliente == "colgate")
            <x-filtro id="f_subcategoria_grafevo" :lista="$subcategoria" style="max-width: 120px;min-width: 120px;width: 120px;">
                <x-slot name="texto">
                    {{__('messages.campo-pr-subcategoria')}}
                </x-slot>
            </x-filtro>
            @else
            <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>
            @endif
            @if ($cliente == "colgate")
            <x-filtro id="f_producto_sku_prov_grafevo" :lista="$producto_sku_prov" style="max-width: 120px;min-width: 120px;width: 120px;">
                <x-slot name="texto">
                    {{__('messages.variable-producto-unificado')}}
                </x-slot>
            </x-filtro>
            @else
            <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>
            @endif
        </x-grafico>
        @php $display_grafico = 'display: none;'; @endphp
    @endif

    @if(isset($selectores_grafico['grafdisp']))
        <x-grafico id="grafdisp" style="height: 450px !important; {{$display_grafico}}" :filtrosAv="$filtrosAv" :filtrosAvAlias="$filtrosAvAlias">
           

            <x-selector-generico id="salida_grafdisp2" idselect="salida_grafdisp" :salida="$salida" class="selector-generico" style="width: 135px;display:none">
                    {{-- <x-slot name="texto">
                        {{__('messages.selector-generico-texto-valor')}}
                    </x-slot> --}}
            </x-selector-generico>

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

            <x-selector-generico id="catalogado_grafdisp2" idselect="catalogado_grafdisp    " :salida="$tipoStock2"  class="selector-generico" style="width: 135px">
                <x-slot name="texto">
                    Tipo Stock
                </x-slot>
            </x-selector-generico>

            <x-selector-dias idpadre="grafdisp" style="display: block"/>

            <x-selector-generico id="f_type_grafdisp2" idselect="f_type_grafdisp" :salida="$tipos_graficos"  class="selector-generico" style="width: 150px" selected="mscolumn2d">
                <x-slot name="texto">
                    {{__('messages.selector-tipo-grafico')}}
                </x-slot>
            </x-selector-generico>
            <x-infobox tamano="25px" :texto="$warning"/>
            <x-boton-actualizar onclick="getGrafDisp('{{$cliente}}', 'stock');"/>
            <x-filtro id="f_clientes_grafdisp" :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-grafico>
        @php $display_grafico = 'display: none;'; @endphp
    @endif

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

            <x-selector-generico id="f_catalogado_grafalefecha2" idselect="f_catalogado_grafalefecha" :salida="$tipoStock2" class="selector-generico" style="width: 120px" selected="">
                <x-slot name="texto">
                    {{__('messages.selector-generico-texto-stock')}}
                </x-slot>
            </x-selector-generico>

            <x-selector-generico id="f_tmp_grafalefecha2" idselect="f_tmp_grafalefecha" :salida="$periodo2"  class="selector-generico" style="width: 80px">
                <x-slot name="texto">
                    {{__('messages.selector-generico-texto-periodo')}}
                </x-slot>
            </x-selector-generico>

            <x-selector-dias idpadre="grafalefecha" style="display: none;"/>
            <!--EVOLUTVO SEMANA-->
            <x-selector-semanas id="fltr_sem_grafalefecha" idselect="f_sem_grafalefecha_ini" :semanas="$semanas"  class="fltr_periodo_grafalefecha" style="display: none;">
                <x-slot name="texto">
                    {{__('messages.selector-semanas-meses-texto-desde')}}
                </x-slot>
            </x-selector-semanas>
            <x-selector-semanas id="fltr_sem_grafalefecha2" idselect="f_sem_grafalefecha_fin" :semanas="$semanas" class="fltr_periodo_grafalefecha" 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_grafalefecha" idselect="f_mes_grafalefecha_ini" :meses="$meses" class="fltr_periodo_grafalefecha">
                <x-slot name="texto">
                    {{__('messages.selector-semanas-meses-texto-desde')}}
                </x-slot>
            </x-selector-meses>
            <x-selector-meses id="fltr_mes_grafalefecha2" idselect="f_mes_grafalefecha_fin" :meses="$meses" class="fltr_periodo_grafalefecha">
                <x-slot name="texto">
                    {{__('messages.selector-semanas-meses-texto-hasta')}}
                </x-slot>
            </x-selector-meses>

            <x-boton-actualizar onclick="getGrafAleFecha('{{$cliente}}', 'stock');"/>
            <x-filtro id="f_clientes_grafalefecha" :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>
            @if ($cliente == "colgate")
            <x-filtro id="f_subcategoria_grafalefecha" :lista="$subcategoria" style="max-width: 120px;min-width: 120px;width: 120px;">
                <x-slot name="texto">
                    {{__('messages.campo-pr-subcategoria')}}
                </x-slot>
            </x-filtro>
            @else
            <x-filtro id="f_categorias_grafalefecha" :lista="$categorias" style="max-width: 120px;min-width: 120px;width: 120px;">
                <x-slot name="texto">
                    {{__('messages.filtro-texto-categoria')}}
                </x-slot>
            </x-filtro>
            @endif
            @if ($cliente == "colgate")
            <x-filtro id="f_producto_sku_prov_grafalefecha" :lista="$producto_sku_prov" style="max-width: 120px;min-width: 120px;width: 120px;">
                <x-slot name="texto">
                    {{__('messages.variable-producto-unificado')}}
                </x-slot>
            </x-filtro>
            @else
            <x-filtro id="f_kam_grafalefecha" :lista="$kam" style="max-width: 120px;min-width: 120px;width: 120px;">
                <x-slot name="texto">
                    {{__('messages.filtro-texto-kam')}}
                </x-slot>
            </x-filtro>
            @endif
        </x-grafico>
    @php $display_grafico = 'display: none;'; @endphp
@endif

@endsection
@endif

@if(count($selectores_tabla)>0)
@section('tabla')
    @if(isset($selectores_tabla['matri']))
        <x-tabla id="matri" style="height: 600px !important; {{$display_tabla}}" :filtrosAv="$filtrosAv" :filtrosAvAlias="$filtrosAvAlias">
            <select name="f_tmp_matri" id="f_tmp_matri" style="display: none;">
                <option value="none" selected></option>
            </select>
            <select name="f_none_matri_ini" id="f_none_matri_ini" style="display: none;">
                <option value="0" selected></option>
            </select>
            <select name="f_none_matri_fin" id="f_none_matri_fin" style="display: none;">
                <option value="0" selected></option>
            </select>
            <x-selector-generico id="variables_matri12" idselect="variables_matri1" :salida="json_encode($variables_producto)" selected="1-5" class="selector-generico" style="width: 135px">
                <x-slot name="texto">
                    {{__('messages.selector-variable-texto-fila')}}
                </x-slot>
            </x-selector-generico>
            @if (config('app.CLIENTE') == 'spes')
                <x-selector-generico id="variables_matri22" idselect="variables_matri2" :salida="json_encode($variables[__('messages.variable-local')])" selected="3-5" class="selector-generico" style="width: 135px">
                    <x-slot name="texto">
                        {{__('messages.selector-variable-texto-columna')}}
                    </x-slot>
                </x-selector-generico>
            @else
                <x-selector-generico id="variables_matri22" idselect="variables_matri2" :salida="json_encode($variables[__('messages.variable-local')])" selected="2-5" class="selector-generico" style="width: 135px">
                    <x-slot name="texto">
                        {{__('messages.selector-variable-texto-columna')}}
                    </x-slot>
                </x-selector-generico>
            @endif
            @if (config('app.CLIENTE') == 'spes')
                <x-selector-generico id="salida_matri2" idselect="salida_matri" :salida="$salidaDoh" class="selector-generico" style="width: 155px">
                    <x-slot name="texto">
                        {{__('messages.selector-generico-texto-valor')}}
                    </x-slot>
                </x-selector-generico>
            @else
                <x-selector-generico id="salida_matri2" idselect="salida_matri" :salida="$salidaDoh" selected="ven-stock-u" class="selector-generico" style="width: 155px">
                    <x-slot name="texto">
                        {{__('messages.selector-generico-texto-valor')}}
                    </x-slot>
                </x-selector-generico>
            @endif

            @if($cliente == "arenys")
                <x-selector-generico id="tipo_stock_matri2" idselect="tipo_stock_matri" :salida="$tipoStock" class="selector-generico" style="width: 135px" selected="">
                    <x-slot name="texto">
                        {{__('messages.selector-generico-texto-stock')}}
                    </x-slot>
                </x-selector-generico>
            @else
                <x-selector-generico id="tipo_stock_matri2" idselect="tipo_stock_matri" :salida="$tipoStock" class="selector-generico" style="width: 135px">
                    <x-slot name="texto">
                        {{__('messages.selector-generico-texto-stock')}}
                    </x-slot>
                </x-selector-generico>
            @endif
            @if($cliente != 'tezaclean')
            <x-selector-generico id="f_orden_locales2" idselect="f_orden_locales" :salida="$locales" class="selector-generico d-none" style="max-width: 350px; min-width: 140px;">
                <x-slot name="texto">
                    {{__('messages.selector-generico-texto-locales')}}
                </x-slot>
            </x-selector-generico>
            @endif
            @if ($cliente != "oriental")
                <x-selector-generico id="f_marcar_alerta2" idselect="f_marcar_alerta" :salida="$tiposAlertas2" class="selector-generico" style="max-width: 350px; min-width: 140px;">
                    <x-slot name="texto">
                        {{__('messages.selector-generico-marcar-alerta')}}
                    </x-slot>
                </x-selector-generico>
            @endif
            <x-infobox tamano="25px" texto="" modal="tabla_diasinventario_modal"/>
            <div class="modal fade bd-example-modal-lg" id="tabla_diasinventario_modal" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
                <div class="modal-dialog modal-lg">
                    <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="exampleModalLabel">Tabla Días de inventario</h5>     
                    </div>
                        <!-- Center a image from ../public/images/ventas_tabla_matriz.png -->
                        <div class="text-center">
                            <img src="{{asset('images/stock_tabla_inventario.png')}}" class="img-fluid" alt="Responsive image">
                        </div>
                        <!-- add div for text -->
                        <p><b>Consultas sobre la tabla:</b> Para utilizar la tabla; definir los parámetros en los selectores y presionar "Actualizar".</p>
                        <ul>
                            <li><b>Selector Variables fila:</b> Define variable a desplegar por fila.</li>
                            <li><b>Selector Variable Columna:</b> Define variable a desplegar por columna.</li>
                            <li><b>Selector Valor Salida:</b> Seleccionar valores a desplegar en tabla.</li>
                            <li><b>Selector Tipo Stock:</b> Seleccionar si desea ver productos catalogados.</li>
                            <li><b>Selector Marcar Alertas:</b> Seleccionar tipo de alerta que desea resaltar en la tabla.</li>
                        </ul>
                        <p><b>Ordenar:</b> Clickear en los encabezados de las columnas ordenará los registros de la tabla en orden descendiente según lo que representa esa columna. Clickear nuevamente ordenará los registros en orden ascendente.</p>
                        <p><b>Fila y Columna Total (Títulos de variables seleccionadas):</b> Valores calculados tomando todos los registros.</p>
                        <p><b>Filtros Rápidos:</b> Marcar las opciones a filtrar en cada selector.</p>
                        <ul>
                            <li><b>Selector Cliente:</b> Filtrar por cliente.</li>
                            <li><b>Selector Categoría:</b> Filtrar por Categoría    .</li>
                            <li><b>Selector KAM:</b> Filtrar por <i>Key Account Manager</i>.</li>
                        </ul>
                        <p><b>Exportar:</b> Descargar datos de las tabla.</p>
                    </div>
                </div>
            </div>
            <x-boton-actualizar onclick="getMatri('{{$cliente}}', 'stock');"/>

            <x-filtro id="f_clientes_matri" :lista="$clientes" style="max-width: 120px;min-width: 120px;width: 120px;" class="ms-auto">
                <x-slot name="texto">
                    @if($cliente != 'siksa'){{__('messages.filtro-texto-cliente')}}@else Cadena @endif
                </x-slot>
            </x-filtro>
            @if ($cliente == "colgate")
                <x-filtro id="f_subcategoria_matri" :lista="$subcategoria" style="max-width: 120px;min-width: 120px;width: 120px;">
                    <x-slot name="texto">
                        {{__('messages.campo-pr-subcategoria')}}
                    </x-slot>
                </x-filtro>
            @else
                <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>
            @endif
            @if ($cliente == "colgate")
            <x-filtro id="f_producto_sku_prov_matri" :lista="$producto_sku_prov" style="max-width: 120px;min-width: 120px;width: 120px;">
                <x-slot name="texto">
                    {{__('messages.variable-producto-unificado')}}
                </x-slot>
            </x-filtro>
            @else
            <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>
            @endif
        </x-tabla>
        @php $display_tabla = 'display: none;'; @endphp
    @endif
    @if(isset($selectores_tabla['detallestock']))
        <x-tabla id="detallestock" style="height: 600px !important;  {{$display_tabla}}" :filtrosAv="$filtrosAv" :filtrosAvAlias="$filtrosAvAlias"> 
            <x-selector-variable id="variables_detallestocks" :lista='$variables' selected='2-0' />
            <x-selector-generico id="selector_txt_valor2" idselect="selector_txt_valor" :salida="$valor_salida"  class="selector-generico d-none" style="width: 200px" >
                <x-slot name="texto">
                    {{__('messages.selector-generico-texto-valor')}}
                </x-slot>
            </x-selector-generico>
        
            <x-selector-generico id="f_pareto2" idselect="f_pareto" :salida="$periodo_comp"  class="selector-generico" style="width: 100px" >
                <x-slot name="texto">
                    {{__('messages.selector-generico-texto-pareto')}}
                </x-slot>
            </x-selector-generico>
            @if ($cliente == "siksa")
                <x-selector-generico id="f_salida2" idselect="f_salida" :salida="$salida_detalle "  class="selector-generico" style="width: 100px" >
                    <x-slot name="texto">
                        Salida
                    </x-slot>
                </x-selector-generico>
                @else
                <x-selector-generico id="f_salida2" idselect="f_salida" :salida="$salida_detalle "  class="selector-generico" style="width: 100px;display:none" >
                    <x-slot name="texto">
                        Salida
                    </x-slot>
                </x-selector-generico>
            @endif
            

            @if($cliente == 'siksa')
            <x-infobox tamano="25px" texto="" modal="tabla_detalles_modal"/>
            <div class="modal fade bd-example-modal-lg" id="tabla_detalles_modal" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
                <div class="modal-dialog modal-lg">
                    <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="exampleModalLabel">Tabla Detalles</h5>     
                    </div>
                        <!-- Center a image from ../public/images/ventas_tabla_matriz.png -->
                        <div class="text-center">
                            <img src="{{asset('images/tabla_detalle_siksa.png')}}" class="img-fluid" alt="Responsive image">
                        </div>
                        <!-- add div for text -->
                        <p><b>Consultas sobre la tabla:</b> Para utilizar la tabla; definir los parámetros en los selectores y presionar "Actualizar".</p>
                        <ul>
                            <li><b>Selector Variable Filas:</b> Definir Variable en filas de la tabla.</li>
                            <li><b>Selector Pareto:</b> Selección de concentración de ventas según relacion 80/20 o 20/80.</li>
                            <li><b>Selector Salida:</b> Valor de salida a consultar en tabla.</li>
                        </ul>
                        <p><b>Ordenar:</b> Clickear en los encabezados de las columnas ordenará los registros de la tabla en orden descendiente según lo que representa esa columna. Clickear nuevamente ordenará los registros en orden ascendente.</p>
                        <p><b>Fila y Columna Total (Títulos de variables seleccionadas):</b> Valores calculados tomando todos los registros.</p>
                        <p><b>Filtros Rápidos:</b> Marcar las opciones a filtrar en cada selector.</p>
                        <ul>
                            <li><b>Selector Cliente:</b> Filtrar por cliente.</li>
                            <li><b>Selector Categoría:</b> Filtrar por Categoría    .</li>
                            <li><b>Selector KAM:</b> Filtrar por <i>Key Account Manager</i>.</li>
                        </ul>
                        <p><b>Exportar:</b> Descargar datos de las tabla.</p>
                        <ul>
                            <li><b>Columa Stock:</b>Valor de Stock en sala</li>
                            <li><b>Columa Stock CD:</b> Valor de Stock en Centros de Distribución.</li>
                            <li><b>Columa Transito:</b> Valor de stock en transito.</li>
                            <li><b>Columa Quiebre:</b> Cantidad de productos en Quiebre.</li>
                            <li><b>Columa InStock:</b> Cantidad de productos InStock.</li>
                            <li><b>Columa Catalogados:</b> Cantidad de productos en Catalogo.</li>
                            <li><b>Columa Venta últimas 12 semanas:</b> Cantidad de ventas últimos 90 días.</li>
                            <li><b>Columa Venta últimas 4 semanas:</b> Cantidad de ventas últimos 30 días.</li>
                            <li><b>Columa Venta última semana:</b> Cantidad de ventas últimos 7 días.</li>
                            <li><b>Columa DOH:</b> Formula: (STOCK*30) / Ventas ult. 30 dias</li>
                        </ul>
                    </div>
                </div>
            </div>
            @endif
            <x-boton-actualizar onclick="getDetalleStocks('{{$cliente}}', 'stocks')"/>
        
            <x-filtro id="f_clientes_detallestock" :lista="$clientes" style="max-width: 120px;min-width: 120px;width: 120px;" class="ms-auto">
                <x-slot name="texto">
                    @if($cliente != 'siksa'){{__('messages.filtro-texto-cliente')}}@else Cadena @endif
                </x-slot>
            </x-filtro>
            @if ($cliente == "colgate")
                <x-filtro id="f_subcategoria_detallestock" :lista="$subcategoria" style="max-width: 120px;min-width: 120px;width: 120px;">
                    <x-slot name="texto">
                        {{__('messages.campo-pr-subcategoria')}}
                    </x-slot>
                </x-filtro>
            @else
                <x-filtro id="f_categorias_detallestock" :lista="$categorias" style="max-width: 120px;min-width: 120px;width: 120px;">
                    <x-slot name="texto">
                        {{__('messages.filtro-texto-categoria')}}
                    </x-slot>
                </x-filtro>
            @endif
            @if ($cliente == "colgate")
            <x-filtro id="f_producto_sku_prov_detallestock" :lista="$producto_sku_prov" style="max-width: 120px;min-width: 120px;width: 120px;">
                <x-slot name="texto">
                    {{__('messages.variable-producto-unificado')}}
                </x-slot>
            </x-filtro>
            @else
            <x-filtro id="f_kam_detallestock" :lista="$kam" style="max-width: 120px;min-width: 120px;width: 120px;">
                <x-slot name="texto">
                    {{__('messages.filtro-texto-kam')}}
                </x-slot>
            </x-filtro>
            @endif
        </x-tabla>
    @php $display_tabla = 'display: none;'; @endphp
    @endif

    @if(isset($selectores_tabla['stockale']))
        <x-tabla id="stockale" style="height: 600px !important; {{$display_tabla}}" :filtrosAv="$filtrosAv" :filtrosAvAlias="$filtrosAvAlias">
            <x-selector-generico id="var_stockale2" idselect="var_stockale" :salida="$tiposAlertas"  class="selector-generico" style="width: 150px" selected="cvss">
                <x-slot name="texto">
                    {{__('messages.alerta')}}
                </x-slot>
            </x-selector-generico>

            @if($cliente == "arenys")
                <x-selector-generico id="tipo_stock_stockale2" idselect="tipo_stock_stockale" :salida="$tipoStock"  class="selector-generico" style="width: 110px" selected="">
                    <x-slot name="texto">
                        {{__('messages.selector-generico-texto-stock')}}
                    </x-slot>
                </x-selector-generico>
            @else
                <x-selector-generico id="tipo_stock_stockale2" idselect="tipo_stock_stockale" :salida="$tipoStock"  class="selector-generico" style="width: 110px">
                    <x-slot name="texto">
                        {{__('messages.selector-generico-texto-stock')}}
                    </x-slot>
                </x-selector-generico>
            @endif

            <x-selector-generico id="salida_stockale2" idselect="salida_stockale" :salida="$unidades"  class="selector-generico @if($cliente=='siksa') d-none @endif" style="width: 110px">
                <x-slot name="texto">
                    {{__('messages.selector-generico-texto-valor')}}
                </x-slot>
            </x-selector-generico>

            <x-selector-generico id="f_dias_ventas_stockale2" idselect="f_dias_ventas_stockale" :salida="$diasVentas"  class="selector-generico" style="width: 80px">
                <x-slot name="texto">
                    {{__('messages.periodo_ventas')}}
                </x-slot>
            </x-selector-generico>
            <x-infobox tamano="25px" texto="" modal="tabla_alertas_modal"/>
            <div class="modal fade bd-example-modal-lg" id="tabla_alertas_modal" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
                <div class="modal-dialog modal-lg">
                    <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="exampleModalLabel">Tabla Alertas</h5>     
                    </div>
                        <!-- Center a image from ../public/images/ventas_tabla_matriz.png -->
                        <div class="text-center">
                            <img src="{{asset('images/stock_tabla_alertas.png')}}" class="img-fluid" alt="Responsive image">
                        </div>
                        <!-- add div for text -->
                        <p><b>Consultas sobre la tabla:</b> Para utilizar la tabla; definir los parámetros en los selectores y presionar "Actualizar".</p>
                        <ul>
                            <li><b>Selector Alerta:</b> Define que tipo de alerta analizar.</li>
                            <li><b>Selector Tipo Stock:</b> Seleccionar si desea ver productos catalogados.</li>
                            <li><b>Selector Periodo:</b> Seleccionar Periodo a consultar.</li>
                        </ul>
                        <p><b>Ordenar:</b> Clickear en los encabezados de las columnas ordenará los registros de la tabla en orden descendiente según lo que representa esa columna. Clickear nuevamente ordenará los registros en orden ascendente.</p>
                        <p><b>Fila y Columna Total (Títulos de variables seleccionadas):</b> Valores calculados tomando todos los registros.</p>
                        <p><b>Filtros Rápidos:</b> Marcar las opciones a filtrar en cada selector.</p>
                        <ul>
                            <li><b>Selector Cliente:</b> Filtrar por cliente.</li>
                            <li><b>Selector Categoría:</b> Filtrar por Categoría    .</li>
                            <li><b>Selector KAM:</b> Filtrar por <i>Key Account Manager</i>.</li>
                        </ul>
                        <p><b>Exportar:</b> Descargar datos de las tabla.</p>
                        <ul>
                        </ul>
                    </div>
                </div>
            </div>
            <x-boton-actualizar onclick="getStockAle('{{$cliente}}', 'alerta_stock');"/>

            <x-filtro id="f_clientes_stockale" :lista="$clientes" style="max-width: 120px;min-width: 120px;width: 120px;" class="ms-auto">
                <x-slot name="texto">
                    @if($cliente != 'siksa'){{__('messages.filtro-texto-cliente')}}@else Cadena @endif
                </x-slot>
            </x-filtro>
            @if ($cliente == "colgate")
                <x-filtro id="f_subcategoria_stockale" :lista="$subcategoria" style="max-width: 120px;min-width: 120px;width: 120px;">
                    <x-slot name="texto">
                        {{__('messages.campo-pr-subcategoria')}}
                    </x-slot>
                </x-filtro>
            @else
                <x-filtro id="f_categorias_stockale" :lista="$categorias" style="max-width: 120px;min-width: 120px;width: 120px;">
                    <x-slot name="texto">
                        {{__('messages.filtro-texto-categoria')}}
                    </x-slot>
                </x-filtro>
            @endif
            @if ($cliente == "colgate")
            <x-filtro id="f_producto_sku_prov_stockale" :lista="$producto_sku_prov" style="max-width: 120px;min-width: 120px;width: 120px;">
                <x-slot name="texto">
                    {{__('messages.variable-producto-unificado')}}
                </x-slot>
            </x-filtro>
            @else
            <x-filtro id="f_kam_stockale" :lista="$kam" style="max-width: 120px;min-width: 120px;width: 120px;">
                <x-slot name="texto">
                    {{__('messages.filtro-texto-kam')}}
                </x-slot>
            </x-filtro>
            @endif
        </x-tabla>
        @php $display_tabla = 'display: none;'; @endphp
    @endif

    @if(isset($selectores_tabla['aleval']))
        <x-tabla id="aleval" style="height: 600px !important;  {{$display_tabla}}" :filtrosAv="$filtrosAv" :filtrosAvAlias="$filtrosAvAlias">
            <x-selector-variable id="variables_aleval" :lista='$variables' selected="2-5" />
            <x-infobox tamano="25px" :texto="$warning"/>
            <x-boton-actualizar onclick="getAleVal('{{$cliente}}', 'alerta_stock');"/>

            <x-filtro id="f_clientes_aleval" :lista="$clientes" style="max-width: 120px;min-width: 120px;width: 120px;" class="ms-auto">
                <x-slot name="texto">
                    @if($cliente != 'siksa'){{__('messages.filtro-texto-cliente')}}@else Cadena @endif
                </x-slot>
            </x-filtro>
            @if ($cliente == "colgate")
                <x-filtro id="f_subcategoria_aleval" :lista="$subcategoria" style="max-width: 120px;min-width: 120px;width: 120px;">
                    <x-slot name="texto">
                        {{__('messages.campo-pr-subcategoria')}}
                    </x-slot>
                </x-filtro>
            @else
                <x-filtro id="f_categorias_aleval" :lista="$categorias" style="max-width: 120px;min-width: 120px;width: 120px;">
                    <x-slot name="texto">
                        {{__('messages.filtro-texto-categoria')}}
                    </x-slot>
                </x-filtro>
            @endif
            @if ($cliente == "colgate")
            <x-filtro id="f_producto_sku_prov_aleval" :lista="$producto_sku_prov" style="max-width: 120px;min-width: 120px;width: 120px;">
                <x-slot name="texto">
                    {{__('messages.variable-producto-unificado')}}
                </x-slot>
            </x-filtro>
            @else
            <x-filtro id="f_kam_aleval" :lista="$kam" style="max-width: 120px;min-width: 120px;width: 120px;">
                <x-slot name="texto">
                    {{__('messages.filtro-texto-kam')}}
                </x-slot>
            </x-filtro>
            @endif
        </x-tabla>
        @php $display_tabla = 'display: none;'; @endphp
    @endif

    @if(isset($selectores_tabla['venper']))
        <x-tabla id="venper" style="height: 600px !important;  {{$display_tabla}}" :filtrosAv="$filtrosAv" :filtrosAvAlias="$filtrosAvAlias">
            <x-selector-variable id="variables_venper" :lista='$variables' selected="1-5">
                <x-slot name="titulo">
                    {{__('messages.selector-variable-texto')}}
                </x-slot>
            </x-selector-variable>
            <x-selector-generico id="f_tmp_venper2" idselect="f_tmp_venper" :salida="$periodo3"  class="selector-generico" style="width: 120px" selected="mec">
                <x-slot name="texto">
                    {{__('messages.selector-generico-texto-periodo')}}
                </x-slot>
            </x-selector-generico>
            <x-boton-actualizar onclick="getVentasPerdida('{{$cliente}}', 'stock');"/>
            <x-infobox tamano="25px" texto="{{__('messages.texto-infobox')}}"/>
            <x-filtro id="f_clientes_venper" :lista="$clientes" style="max-width: 120px;min-width: 120px;width: 120px;" class="ms-auto">
                <x-slot name="texto">
                    @if($cliente != 'siksa'){{__('messages.filtro-texto-cliente')}}@else Cadena @endif
                </x-slot>
            </x-filtro>
            @if ($cliente == "colgate")
                <x-filtro id="f_subcategoria_venper" :lista="$subcategoria" style="max-width: 120px;min-width: 120px;width: 120px;">
                    <x-slot name="texto">
                        {{__('messages.campo-pr-subcategoria')}}
                    </x-slot>
                </x-filtro>
            @else
                <x-filtro id="f_categorias_venper" :lista="$categorias" style="max-width: 120px;min-width: 120px;width: 120px;">
                    <x-slot name="texto">
                        {{__('messages.filtro-texto-categoria')}}
                    </x-slot>
                </x-filtro>
            @endif
            @if ($cliente == "colgate")
            <x-filtro id="f_producto_sku_prov_venper" :lista="$producto_sku_prov" style="max-width: 120px;min-width: 120px;width: 120px;">
                <x-slot name="texto">
                    {{__('messages.variable-producto-unificado')}}
                </x-slot>
            </x-filtro>
            @else
            <x-filtro id="f_kam_venper" :lista="$kam" style="max-width: 120px;min-width: 120px;width: 120px;">
                <x-slot name="texto">
                    {{__('messages.filtro-texto-kam')}}
                </x-slot>
            </x-filtro>
            @endif
        </x-tabla>
        @php $display_tabla = 'display: none;'; @endphp
    @endif

    @if(isset($selectores_tabla['disp']) && $cliente == "siksa")
        <x-tabla id="disp" :filtrosAv="$filtrosAv" :filtrosAvAlias="$filtrosAvAlias" style="height: 600px !important; display: none;">
            <x-selector-generico id="variables_disp2" idselect="variables_disp" :salida="$variable"  class="selector-generico d-none" style="width: 90px" disabled="">
                <x-slot name="texto">
                    {{__('messages.selector-variable-texto')}}
                </x-slot>
            </x-selector-generico>

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

            <x-selector-generico id="catalogado_disp2" idselect="catalogado_disp" :salida="$tipoStock2"  class="selector-generico" style="width: 135px">
                <x-slot name="texto">
                    Tipo Stock
                </x-slot>
            </x-selector-generico>
           
            <x-selector-generico id="f_tmp_disp2" idselect="f_tmp_disp" :salida="$periodo_grafdisp"  class="selector-generico" style="width: 90px" selected="dia">
                <x-slot name="texto">
                    {{__('messages.selector-generico-texto-periodo')}}
                </x-slot>
            </x-selector-generico>
            <x-selector-dias idpadre="disp" style="display: block"/>

            <x-selector-meses id="fltr_mes_disp" idselect="f_mes_disp_ini" :meses="$meses" class="fltr_periodo_disp" style="display: none;">
                <x-slot name="texto">
                    {{__('messages.selector-semanas-meses-texto-desde')}}
                </x-slot>
            </x-selector-meses>
            <x-selector-meses id="fltr_mes_disp2" idselect="f_mes_disp_fin" :meses="$meses" class="fltr_periodo_disp" style="display: none;">
                <x-slot name="texto">
                    {{__('messages.selector-semanas-meses-texto-hasta')}}
                </x-slot>
            </x-selector-meses>
           
            <x-selector-semanas id="fltr_sem_disp" idselect="f_sem_disp_ini" :semanas="$semanas"  class="fltr_periodo_disp" style="display: none;">
                <x-slot name="texto">
                    {{__('messages.selector-semanas-meses-texto-desde')}}
                </x-slot>
            </x-selector-semanas>
            <x-selector-semanas id="fltr_sem_disp2" idselect="f_sem_disp_fin" :semanas="$semanas" class="fltr_periodo_disp" style="display: none;">
                <x-slot name="texto">
                    {{__('messages.selector-semanas-meses-texto-hasta')}}
                </x-slot>
            </x-selector-semanas>
            <x-infobox tamano="25px" texto="" modal="tabla_disponibilidad_modal"/>
            <div class="modal fade bd-example-modal-lg" id="tabla_disponibilidad_modal" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
                <div class="modal-dialog modal-lg">
                    <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="exampleModalLabel">Tabla Disponibilidad</h5>     
                    </div>
                        <!-- Center a image from ../public/images/ventas_tabla_matriz.png -->
                        <div class="text-center">
                            <img src="{{asset('images/stock_tabla_disponibilidad.png')}}" class="img-fluid" alt="Responsive image">
                        </div>
                        <!-- add div for text -->
                        <p><b>Consultas sobre la tabla:</b> Para utilizar la tabla; definir los parámetros en los selectores y presionar "Actualizar".</p>
                        <ul>
                            <li><b>Selector Desglosar por:</b> La tabla se encuentra por defecto para combinación Productos - Local</li>
                            <li><b>Selector Catalogado:</b> Define si quiere ver productos catalogados o no.</li>
                            <li><b>Selector Periodo:</b> Seleccionar tipo de periódo para ver los datos.</li>
                        </ul>
                        <p><b>Ordenar:</b> Clickear en los encabezados de las columnas ordenará los registros de la tabla en orden descendiente según lo que representa esa columna. Clickear nuevamente ordenará los registros en orden ascendente.</p>
                        <p><b>Fila y Columna Total (Títulos de variables seleccionadas):</b> Valores calculados tomando todos los registros.</p>
                        <p><b>Filtros Rápidos:</b> Marcar las opciones a filtrar en cada selector.</p>
                        <ul>
                            <li><b>Selector Cliente:</b> Filtrar por cliente.</li>
                            <li><b>Selector Categoría:</b> Filtrar por Categoría    .</li>
                            <li><b>Selector KAM:</b> Filtrar por <i>Key Account Manager</i>.</li>
                        </ul>
                        <p><b>Exportar:</b> Descargar datos de las tabla.</p>
                        <ul>
                            <li><b>Columna Producto - Local:</b> Nombre del local más el nombre del producto.</li>
                            <li><b>Columnas por período:</b> Muestra valores 1 o 0, donde 1 indica que el producto se encontraba disponible en ese período y 0 indica producto no disponible.</li>
                            <li><b>Columna Promedio de Venta(Kg):</b>Indica el promedio de venta en Kilogramos para el período de tiempo establecido.</li>
                        </ul>
                    </div>
                </div>
            </div>
            <x-boton-actualizar onclick="getDisp('{{$cliente}}', 'ventas');" />
            <x-filtro id="f_clientes_disp" :lista="$clientes" style="max-width: 120px;min-width: 120px;width: 120px;" class="ms-auto">
                <x-slot name="texto">
                    @if($cliente != 'siksa'){{__('messages.filtro-texto-cliente')}}@else Cadena @endif
                </x-slot>
            </x-filtro>
           
            <x-filtro id="f_categorias_disp" :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_disp" :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>
    @endif

    @if(isset($selectores_tabla['displocal']) && $cliente == "siksa")
        <x-tabla id="displocal" :filtrosAv="$filtrosAv" :filtrosAvAlias="$filtrosAvAlias" style="height: 600px !important; display: none;">
            <x-selector-generico id="variables_displocal2" idselect="variables_displocal" :salida="$variable"  class="selector-generico d-none" style="width: 90px" disabled="">
                <x-slot name="texto">
                    {{__('messages.selector-variable-texto')}}
                </x-slot>
            </x-selector-generico>
            <x-selector-generico id="salida_displocal2" idselect="salida_displocal" :salida="$variable_displocal"  class="selector-generico" style="width: 135px">
                <x-slot name="texto">
                    {{__('messages.selector-generico-texto-valor')}}
                </x-slot>
            </x-selector-generico>
           
            <x-selector-generico id="catalogado_displocal2" idselect="catalogado_displocal" :salida="$tipoStock2"  class="selector-generico" style="width: 135px">
                <x-slot name="texto">
                    Tipo Stock
                </x-slot>
            </x-selector-generico>

            <x-selector-generico id="f_tmp_displocal2" idselect="f_tmp_displocal" :salida="$periodo_grafdisp"  class="selector-generico" style="width: 90px" selected="dia">
                <x-slot name="texto">
                    {{__('messages.selector-generico-texto-periodo')}}
                </x-slot>
            </x-selector-generico>
            <x-selector-dias idpadre="displocal" style="display: block"/>

            <x-selector-meses id="fltr_mes_displocal" idselect="f_mes_displocal_ini" :meses="$meses" class="fltr_periodo_disp" style="display: none;">
                <x-slot name="texto">
                    {{__('messages.selector-semanas-meses-texto-desde')}}
                </x-slot>
            </x-selector-meses>
            <x-selector-meses id="fltr_mes_displocal2" idselect="f_mes_displocal_fin" :meses="$meses" class="fltr_periodo_disp" style="display: none;">
                <x-slot name="texto">
                    {{__('messages.selector-semanas-meses-texto-hasta')}}
                </x-slot>
            </x-selector-meses>
           
            <x-selector-semanas id="fltr_sem_displocal" idselect="f_sem_displocal_ini" :semanas="$semanas"  class="fltr_periodo_disp" style="display: none;">
                <x-slot name="texto">
                    {{__('messages.selector-semanas-meses-texto-desde')}}
                </x-slot>
            </x-selector-semanas>
            <x-selector-semanas id="fltr_sem_displocal2" idselect="f_sem_displocal_fin" :semanas="$semanas" class="fltr_periodo_disp" style="display: none;">
                <x-slot name="texto">
                    {{__('messages.selector-semanas-meses-texto-hasta')}}
                </x-slot>
            </x-selector-semanas>
            <x-infobox tamano="25px" texto="" modal="tabla_disponibilidad_local_modal"/>
            <div class="modal fade bd-example-modal-lg" id="tabla_disponibilidad_local_modal" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
                <div class="modal-dialog modal-lg">
                    <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="exampleModalLabel">Tabla Disponibilidad Local</h5>     
                    </div>
                        <!-- Center a image from ../public/images/ventas_tabla_matriz.png -->
                        <div class="text-center">
                            <img src="{{asset('images/stock_tabla_disponibilidad_local.png')}}" class="img-fluid" alt="Responsive image">
                        </div>
                        <!-- add div for text -->
                        <p><b>Consultas sobre la tabla:</b> Para utilizar la tabla; definir los parámetros en los selectores y presionar "Actualizar".</p>
                        <ul>
                            <li><b>Selector Desglosar por:</b>Seleccione variable disponible para desglosar tabla</li>
                            <li><b>Selector Catalogado:</b> Define si quiere ver productos catalogados o no.</li>
                            <li><b>Selector Periodo:</b> Seleccionar tipo de periódo para ver los datos.</li>
                        </ul>
                        <p><b>Ordenar:</b> Clickear en los encabezados de las columnas ordenará los registros de la tabla en orden descendiente según lo que representa esa columna. Clickear nuevamente ordenará los registros en orden ascendente.</p>
                        <p><b>Fila y Columna Total (Títulos de variables seleccionadas):</b> Valores calculados tomando todos los registros.</p>
                        <p><b>Filtros Rápidos:</b> Marcar las opciones a filtrar en cada selector.</p>
                        <ul>
                            <li><b>Selector Cliente:</b> Filtrar por cliente.</li>
                            <li><b>Selector Categoría:</b> Filtrar por Categoría    .</li>
                            <li><b>Selector KAM:</b> Filtrar por <i>Key Account Manager</i>.</li>
                        </ul>
                        <p><b>Exportar:</b> Descargar datos de las tabla.</p>
                        <ul>
                            <li><b>Columna Principal:</b> Nombre de variable seleccionada.</li>
                            <li><b>Columnas por período:</b> Muestra porcentajes de acuerdo a disponibilidad de productos en el local. Se considera disponible un producto cuando el DOH > 7.</li>
                            <li><b>Columna Total:</b>Porcentaje promedio de disponibilidad para el periodo de tiempo seleccionado.</li>
                            <li><b>Fila Total:</b>Porcentaje promedio de disponibilidad en la columna del periodo.</li>
                        </ul>
                    </div>
                </div>
            </div>
            <x-boton-actualizar onclick="getDispLocal('{{$cliente}}', 'ventas');" />
            <x-filtro id="f_clientes_displocal" :lista="$clientes" style="max-width: 120px;min-width: 120px;width: 120px;" class="ms-auto">
                <x-slot name="texto">
                    @if($cliente != 'siksa'){{__('messages.filtro-texto-cliente')}}@else Cadena @endif
                </x-slot>
            </x-filtro>
           
            <x-filtro id="f_categorias_displocal" :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_displocal" :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>
    @endif
     @if(isset($selectores_tabla['evo']))
        <x-tabla id="evo" style="height: 600px !important; {{$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_evo"  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_evo"  class="selector-generico" style="width: 100px" selected="{{$tipo_periodo_}}">
                <x-slot name="texto">
                    {{__('messages.selector-generico-texto-periodo')}}
                </x-slot>
            </x-selector-generico>
            <x-selector-dias style="display: none;" idpadre="evo"/>

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

            <x-infobox tamano="25px" texto="" modal="tabla_evolutivo_modal"/>
            <div class="modal fade bd-example-modal-lg" id="tabla_evolutivo_modal" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
                <div class="modal-dialog modal-lg">
                    <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="exampleModalLabel">Tabla Evolutivo</h5>     
                    </div>
                        <!-- Center a image from ../public/images/ventas_tabla_matriz.png -->
                        <div class="text-center">
                            <img src="{{asset('images/ventas_tabla_matriz.png')}}" class="img-fluid" alt="Responsive image">
                        </div>
                        <!-- add div for text -->
                        <p><b>Consultas sobre la tabla:</b> Para utilizar la tabla; definir los parámetros en los selectores y presionar "Actualizar".</p>
                        <ul>
                            <li><b>Selector Variable:</b> Definir Variable en filas de la tabla.</li>
                            <li><b>Selector Valor Salida:</b> Seleccionar tipo de unidad sobre la que se consulta.</li>
                            <li><b>Selector Tipo Periodo:</b> Definir el tipo de periodo que se consulta.</li>
                            <li><b>Selector Periodo:</b> Definir el rango de fechas que se consulta.</li>
                        </ul>
                        <p><b>Ordenar:</b> Clickear en los encabezados de las columnas ordenará los registros de la tabla en orden descendiente según lo que representa esa columna. Clickear nuevamente ordenará los registros en orden ascendente.</p>
                        <p><b>Fila y Columna Total (Títulos de variables seleccionadas):</b> Valores calculados tomando todos los registros.</p>
                        <p><b>Filtros Rápidos:</b> Marcar las opciones a filtrar en cada selector.</p>
                        <ul>
                            <li><b>Selector Cliente:</b> Filtrar por cliente.</li>
                            <li><b>Selector Categoría:</b> Filtrar por Categoría    .</li>
                            <li><b>Selector KAM:</b> Filtrar por <i>Key Account Manager</i>.</li>
                        </ul>
                        <p><b>Exportar:</b> Descargar datos de las tabla.</p>
                    </div>
                </div>
            </div>
        
            <x-filtro id="f_clientes_evo" :lista="$clientes" style="max-width: 120px;min-width: 120px;width: 120px;" class="ms-auto">
                <x-slot name="texto">
                    @if($cliente != 'siksa'){{__('messages.filtro-texto-cliente')}}@else Cadena @endif
                </x-slot>
            </x-filtro>
            @if ($cliente == "colgate")
            <x-filtro id="f_subcategoria_evo" :lista="$subcategoria" style="max-width: 120px;min-width: 120px;width: 120px;">
                <x-slot name="texto">
                    {{__('messages.campo-pr-subcategoria')}}
                </x-slot>
            </x-filtro>
            @else
            <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>
            @endif
            @if ($cliente == "colgate")
            <x-filtro id="f_producto_sku_prov_evo" :lista="$producto_sku_prov" style="max-width: 120px;min-width: 120px;width: 120px;">
                <x-slot name="texto">
                    {{__('messages.variable-producto-unificado')}}
                </x-slot>
            </x-filtro>
            @else
            <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>
            @endif
        </x-tabla>
        @php $display_tabla = 'display: none;'; @endphp
    @endif
@endsection
@endif

@section('js_aft')
<script src="{{asset('js\vendor\dataTables.natural.js')}}"></script>
<script>
    var cliente_ = "{{$cliente}}";
    if(cliente_ == "colflex"){
        $("#agrupacion_grafstockale").val("3-5").change();
    }
    $("#variables_evo2").val("2-5").change();
    $("#variables_evo").val("1-15").change();
    let ids = ['evo','grafalefecha', 'grafevo', 'grafdisp','detallestock', 'matri', 'grafstockale', 'stockale', 'aleval', 'venper', 'disp', 'displocal'];
    $(document).ready(() => {
        ids.forEach(function(item){
            if($('#'+item).length > 0 && $('#f_favoritos_'+item).length > 0) cargarFavoritos(item);
        });

        let filtros = ['clientes','categorias', 'kam', "subcategoria", "producto_sku_prov"];
        for(let filtro of filtros) {
            for(let id of ids) {
                multiSelect(filtro, id, "{{__('messages.seleccionar')}}");
            }
        }
        let ahora = new Date();
        let dias = (cliente_ == 'siksa')? 7 : 30;
        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()-dias)),
            endDate: ahora
        };

        let congifDate2 = {
            ...("{{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()-15)),
            endDate: ahora
        };
        
        let congifDate3 = {
            ...("{{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()-10)),
            endDate: ahora
        }; 
        $("#f_dia_disp_ini").daterangepicker(congifDate3);
        $("#f_dia_displocal_ini").daterangepicker(congifDate3);
        $("#f_dia_grafdisp_ini").daterangepicker(congifDate2);
        $("#f_dia_grafdisploc_ini").daterangepicker(congifDate2);
        $("#f_dia_evo_ini").daterangepicker(congifDate);
        $("#f_dia_grafevo_ini").daterangepicker(congifDate);
        $("#f_dia_grafalefecha_ini").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");
        });
        $(".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);
            $("#objeto").css("visibility", "visible");
        
        $("#muestrafiltros").click(function(){
            console.log("click en AV");
        });
        $('#variables_detallestocks').select2MultiCheckboxes({
            placeholder: "{{__('messages.elegir-variables')}}",
            width: "auto",
            templateSelection: function(selected, total) {
                return selected.length + " de " + total + " total";
            }

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

        function cargandoDatos(modo){
            contador_filtros = 0;
            var arr = new Array();
            var cad = new String();
            $(".obj_filtro button").removeClass('f_seleccionado');
            $(".obj_filtro i").removeClass('fa-filter');
            if(modo==1){
                try {
                    if(objetos){
                        for(i=0;i<objetos.length;i++){
                            cad = leerLista("f_"+objetos[i]);
                            if(cad != ''){
                                contador_filtros++;
                                $("#bt_f_"+objetos[i]).addClass("f_seleccionado");
                                $("#bt_f_"+objetos[i]).remove('i');
                                $("#bt_f_"+objetos[i]).append('<i class="fa fa-filter"></i>');
                            }
                        }
                    }
                    cad = leerLista("f_holding");
                    if(cad != ''){
                        contador_filtros++;
                        $("#bt_f_holding").addClass("f_seleccionado");
                        $("#bt_f_holding").remove('i');
                        $("#bt_f_holding").append('<i class="fa fa-filter"></i>');
                    }
                } catch (e) {
                    if (e instanceof ReferenceError) {
                        //alert(e, true);
                    } else {
                    //alert(e, false);
                    }
                }
                $(".loader2").fadeOut("slow");
                $("#enviadatos").prop("disabled",false);
                $("#muestrafiltros").prop("disabled",false);
                $("#limpiafiltros").prop("disabled",false);
                $("#exportar").prop("disabled",false);
                if(contador_filtros>0){
                    $("#muestrafiltros").css("width","200px");
                    $("#muestrafiltros").html(contenido_botom+' ('+contador_filtros+')');
                }else{
                    $("#muestrafiltros").css("width","auto");
                    $("#muestrafiltros").html(contenido_botom);
                }
            }else{
                $(".loader2").show();
                $('#tbl_report').html('<div class="loader2" style="height:650px;"><p><img src="img/Preloader_21.gif" width="64" height="64"/></p></div>');
                $("#enviadatos").prop("disabled",true);
                $("#muestrafiltros").prop("disabled",true);
                //$("#muestrafiltros").html(contenido_botom);
                $("#limpiafiltros").prop("disabled",true);
                $("#exportar").prop("disabled",true);
                //if ($("#chart_show").is(':visible')) $(".chart").loading({overlay: $(".custom-overlay")});	
            }
        }

        //  if("{{$cliente}}" == 'spes'){
        //      $('#btn-grafico').click();
        //     }else if("{{$cliente}}" != 'cafesenork' || {{$cliente}} != 'demo' ){
        //      $("#f_clientes_matri").val('CENCOSUD');
        //      $('#f_clientes_matri').trigger('change');
        //  }
    });
    var filtrosPromise = getFiltrosAv('{{$cliente}}', '{{$codigo}}');
    filtrosPromise.then(function(resp){
        ponerFiltrosAv(resp);
    });

    function getDisp(cliente, tipo) {
        var tmp = document.getElementById("f_tmp_disp").value;
        var [ini, fin] = getDate(tmp, "#f_"+tmp+"_disp_ini");
        let salida = document.getElementById("salida_disp").value;

        changeStateFiltrosAv("disp", false);
        document.getElementById("f_carga_disp").style.display = "flex";
        $("#disp_cont").addClass("d-none");
        $("#disp").find("#aplicarfiltrosparent").hide();
        return $.ajax({
            url: "/tabla/dispsiksa",
            method: "post",
            dataType: "html",
            crossDomain: false,
            headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            data: {
                variables: document.getElementById("variables_disp").value,
                salida: salida,
                nombreVar: document.getElementById("variables_disp").selectedOptions[0].textContent,
                tmp: tmp,
                rangoTmp: [ini,fin],
                tipo: tipo,
                is_table : 1,
                filtros: getFiltros("disp"),
                cliente: cliente,
                catalogado: document.getElementById("catalogado_disp").value,
            },
        }).done(function(data, textStatus, jqXHR) {
            let cont = document.getElementById("disp_cont");
            cont.innerHTML = data;
            let tabla = document.querySelector("#disp_cont table");
            tabla.id = "disp_tabla";
            document.getElementById("f_carga_disp").style.display = "none";
            changeStateFiltrosAv("disp", true);
            $("#disp_cont").removeClass("d-none");
            $("#disp").find("#aplicarfiltrosparent").hide();
            var tab = $('#disp_tabla').DataTable({
            ...(userLanguage == 'es') && {
                    language: configLocale,
                },
                pageLength: 25,
                lengthMenu: [[25, 50, 100], [25, 50, 100]],
                autoWidth: true,
                responsive: false,
                scrollY: "500px",
                scrollX: true,
                scrollCollapse: true,
                fixedColumns: true,
                order: [[ 1, "asc" ]],
                buttons: [
                    { extend: 'excel', className: 'boton btn btn-sm', title: '' },
                    { extend: 'copy', className: 'boton btn btn-sm' },
                    { extend: 'csv', className: 'boton btn btn-sm' }
                ],
                dom: "<'row'<'col-sm-12 col-md-4'f><'col-sm-12 col-md-4'<'text-center bg-body-light py-2 mb-2'l>>"+
                "<'col-sm-12 col-md-4 align-items-center d-flex justify-content-end'B>><'row'<'col-sm-12 tables'tr>><'row'<'col-sm-12 col-md-5'i><'col-sm-12 col-md-7'p>>"
            });
            tab.on('buttons-action', function ( e, buttonApi, dataTable, node, config ) {
                
            });
        })
        .fail(function( jqXHR, textStatus, errorThrown ) {
            //console.log(jqXHR);
            document.getElementById("f_carga_disp").style.display = "none";
            $("#disp_cont").removeClass("d-none");
            $("#disp").find("#aplicarfiltrosparent").hide();
            changeStateFiltrosAv("disp", true);
            $( "#progress_container" ).fadeOut( "slow" );
        });
    }

    function getDispLocal(cliente, tipo) {
        var tmp = document.getElementById("f_tmp_displocal").value;
        var [ini, fin] = getDate(tmp, "#f_"+tmp+"_displocal_ini");
        let salida = document.getElementById("salida_displocal").value;

        changeStateFiltrosAv("displocal", false);
        document.getElementById("f_carga_displocal").style.display = "flex";
        $("#displocal_cont").addClass("d-none");
        $("#displocal").find("#aplicarfiltrosparent").hide();
        return $.ajax({
            url: "/tabla/displocalsiksa",
            method: "post",
            dataType: "html",
            crossDomain: false,
            headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            data: {
                variables: document.getElementById("salida_displocal").value,
                salida: salida,
                nombreVar: document.getElementById("variables_displocal").selectedOptions[0].textContent,
                tmp: tmp,
                rangoTmp: [ini,fin],
                tipo: tipo,
                filtros: getFiltros("displocal"),
                cliente: cliente,
                catalogado: document.getElementById("catalogado_displocal").value
            },
        }).done(function(data, textStatus, jqXHR) {
            let cont = document.getElementById("displocal_cont");
            cont.innerHTML = data;
            let tabla = document.querySelector("#displocal_cont table");
            tabla.id = "displocal_tabla";
            document.getElementById("f_carga_displocal").style.display = "none";
            changeStateFiltrosAv("displocal", true);
            $("#displocal_cont").removeClass("d-none");
            $("#displocal").find("#aplicarfiltrosparent").hide();
            var tab = $('#displocal_tabla').DataTable({
            ...(userLanguage == 'es') && {
                    language: configLocale,
                },
                pageLength: 25,
                lengthMenu: [[25, 50, 100], [25, 50, 100]],
                autoWidth: true,
                responsive: false,
                scrollY: "500px",
                scrollX: true,
                scrollCollapse: true,
                fixedColumns: true,
                order: [[ 1, "asc" ]],
                buttons: [
                    { extend: 'excel', className: 'boton btn btn-sm', title: '' },
                    { extend: 'copy', className: 'boton btn btn-sm' },
                    { extend: 'csv', className: 'boton btn btn-sm' }
                ],
                dom: "<'row'<'col-sm-12 col-md-4'f><'col-sm-12 col-md-4'<'text-center bg-body-light py-2 mb-2'l>>"+
                "<'col-sm-12 col-md-4 align-items-center d-flex justify-content-end'B>><'row'<'col-sm-12 tables'tr>><'row'<'col-sm-12 col-md-5'i><'col-sm-12 col-md-7'p>>"
            });
            tab.on('buttons-action', function ( e, buttonApi, dataTable, node, config ) {
                
            });
        })
        .fail(function( jqXHR, textStatus, errorThrown ) {
            //console.log(jqXHR);
            document.getElementById("f_carga_displocal").style.display = "none";
            $("#displocal_cont").removeClass("d-none");
            $("#displocal").find("#aplicarfiltrosparent").hide();
            changeStateFiltrosAv("displocal", true);
            $( "#progress_container" ).fadeOut( "slow" );
        });
    }

    function getGrafDisp(cliente, tipo) {
        var tmp = document.getElementById("f_tmp_grafdisp").value;
        var [ini, fin] = getDate(tmp, "#f_"+tmp+"_grafdisp_ini");
        document.getElementById("f_carga_grafdisp").style.display = "flex";
        $("#grafdisp_cont").addClass("d-none");
        $("#grafdisp").find("#aplicarfiltrosparent").hide();
        let filtros = getFiltros("grafdisp");
        return $.ajax({
            url: "/grafico/disp",
            method: "post",
            dataType: "json",
            crossDomain: false,
            headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            data: {
                salida: document.getElementById("salida_grafdisp").value,
                nombreSalida: document.getElementById("salida_grafdisp").selectedOptions[0].textContent,
                tmp: tmp,
                rangoTmp: [ini,fin],
                tipo: tipo,
                is_table: 0,
                filtros: getFiltros("grafdisp"),
                cliente: cliente,
                vista: 'stock',
                catalogado: document.getElementById("catalogado_grafdisp").value,
            },
        })
        .done(function(data, textStatus, jqXHR) {
            document.getElementById("f_carga_grafdisp").style.display = "none";
            $("#grafdisp_cont").removeClass("d-none");
            $("#grafdisp").find("#aplicarfiltrosparent").show();
            let tipoGrafico = document.getElementById('f_type_grafdisp').value;//tipo=='stock'?'stackedcolumn2d':'msline';
            var modal = document.getElementById("myModal");
           
                const chartConfig = {
                    id: 'grafdisp_co',
                    type: tipoGrafico,
                    renderAt: 'grafdisp_cont',
                    width: '100%',
                    height: '400',
                    dataFormat: 'json',
                    dataSource: data,
                    ...(userLanguage == 'es') && {
                        dataLoadStartMessage: 'Recuperando datos. Por favor, espere.',
                        dataLoadErrorMessage: 'Error al cargar los datos.',
                        dataInvalidMessage: 'Datos no válidos.',
                        dataEmptyMessage: 'No hay datos para mostrar',
                        typeNotSupportedMessage: 'Tipo de gráfico no soportado.',
                        loadMessage: 'Cargando gráfico. Por favor, espere.',
                        renderErrorMessage: 'No se puede representar el gráfico.',
                        decimalSeparator: ',',
                        // thousandSeparator: '.',
                        percentValueSufix: '%',
                    },
                };
                FusionCharts.ready(function(){
                    var fusioncharts = new FusionCharts(chartConfig);
                    fusioncharts.render();
                    fusioncharts.setChartAttribute("per", ".");
                });
           
        })
        .fail(function( jqXHR, textStatus, errorThrown ) {
            //console.log(jqXHR);
            document.getElementById("f_carga_grafdisp").style.display = "none";
            $("#grafdisp_cont").removeClass("d-none");
            $("#grafdisp").find("#aplicarfiltrosparent").show();
        });
    }

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

@endsection