@extends('layouts.reporte')

@section('php')
    @php

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

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

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

        }

            $tipo_periodo = 'mec';
            $tipo_periodo_ = 'mes';

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

        
            $salida_siksa = 30;

        $array_clientes = [];
        $salida = json_encode(['2' => __('messages.ventas'), '1' => __('messages.unidades'), '3' => __('messages.costo')]);
        $salida_matri = json_encode(['2' => __('messages.ventas'), '1' => __('messages.unidades')]);
        $salida_vcomuna = json_encode(['2' => __('messages.ventas')]);
        $salida_default = json_encode(['2' => __('messages.ventas')]);
        // dd($clientes,$salida);

        for ($i=0; $i < count($clientes); $i++) { 
            $array_clientes [$clientes[$i]->valor] = $clientes[$i]->valor;
        }

        if($cliente == 'oriental'){
            $salida = json_encode(['2' => __('messages.ventas'), '1' => __('messages.unidades'), '3' => __('messages.costo'), "10" => __('messages.unidadespack')]);
            $salida_matri = json_encode(['2' => __('messages.ventas'), '1' => __('messages.unidades'), "10" => __('messages.unidadespack')]);
        }else if($cliente == 'unibag'){
            $salida = json_encode(['2' => __('messages.ventas'), '1' => __('messages.unidades'), '3' => __('messages.costo'), "1001" => __('messages.cajas')]);
            $salida_matri = json_encode(['2' => __('messages.ventas'), '1' => __('messages.unidades'), "1001" => __('messages.cajas')]);
        }else if($cliente == 'siksa'){
            $salida_siksa = 10;
            $salida = json_encode(["10" => "Kilos (Kg)", '2' => __('messages.ventas'), '61' => "Ventas + IVA ($)", '1' => __('messages.unidades'), '3' => __('messages.costo')]);
            $salida_matri = json_encode(["1001" => "Kilos (Kg)", '2' => __('messages.ventas'), '1' => __('messages.unidades') ]);
            $salida_mec3meses  = json_encode(["1001" => "Kilos (Kg)", '2' => __('messages.ventas'), '1' => __('messages.unidades') ]);
        }else if($cliente == "manares"){
            $salida = json_encode(['2' => __('messages.ventas'), '1' => __('messages.unidades'), '3' => __('messages.costo'),"800"=> __('messages.margen'),
            "600"=> __('messages.contribucion')]);
            $salida_matri = json_encode(['2' => __('messages.ventas'), '1' => __('messages.unidades'),"800"=> __('messages.margen'),"600"=> __('messages.contribucion')]);
        }else if($cliente == "empresaspolar"){
            $salida = json_encode(['2' => __('messages.ventas'), '61' => "Ventas + IVA ($)", '1' => __('messages.unidades'), '3' => __('messages.costo')]);
            $salida_matri = json_encode(['2' => __('messages.ventas'), '61' => "Ventas + IVA ($)", '1' => __('messages.unidades')]);
        }else if($cliente == 'ducasse'){
            $salida = json_encode(['30'=> __('messages.ventas'), '1001' => __('messages.unidades'), '301' => __('messages.costo')]);
            $salida_matri = json_encode(['30'=> __('messages.ventas'), '1001' => __('messages.unidades'), '301' => __('messages.costo')]);
            $salida_vcomuna = json_encode(['30' => __('messages.ventas')]);
            $salida_default = json_encode(['30' => __('messages.ventas')]);
        }else if(in_array($cliente, ['maisa'])){
            $salida = json_encode(['2' => __('messages.ventas_con_iva'), '1' => __('messages.unidades'), '3' => __('messages.costo'), '30' => __('messages.ventas_sin_iva')]);
            $salida_matri = json_encode(['2' => __('messages.ventas_con_iva'), '1' => __('messages.unidades'), '3' => __('messages.costo'), '30' => __('messages.ventas_sin_iva')]);
        }
        $salida_default = json_encode(['30' => __('messages.ventas_con_iva'), '2' => __('messages.ventas_sin_iva')]);
        $salida_inout = json_encode(['13' => __('messages.ventas'), '12' => __('messages.unidades')]);
        $tipo_var = json_encode(['2' => __('messages.dinero'), '1' => __('messages.porcentaje')]);
        $periodo = json_encode(['dia'=> __('messages.dias'), 'sem' => __('messages.semanas'), 'mes' => __('messages.meses')]);
        $periodo_crec = json_encode(['sem' => __('messages.semanas'), 'mes' => __('messages.meses')]);
        $periodo_grafcomp = json_encode(['dia'=> __('messages.dias'), 'sem' => __('messages.semanas'), 'mes' => __('messages.meses'), 'ytd' => __('messages.ytd')]);
        if($cliente == "southwind"){
            $periodo_grafcomp = json_encode(['dia'=> __('messages.dias'), 'sem' => __('messages.semanas'), "sem_wd" => "Semanas (Por días)", 
            'mes' => __('messages.meses'), 'ytd' => __('messages.ytd')]);
        }
        $periodo_comp = json_encode(['sem' => __('messages.semanas'), 'mec' => __('messages.mec'), 'ytd' => __('messages.ytd')]);
        $periodo_compcalef  = json_encode(['sem' => __('messages.semanas'), 'mec' => __('messages.mec'), 'ytd' => __('messages.ytd')]);
        $periodo_comparativo = json_encode(['ytd' => __('messages.ytd'), 'mec' => __('messages.mec'), 
        'mes' => __('messages.meses')]);
        $periodo_matri = json_encode(['ytd' => __('messages.ytd'), 'mec' => __('messages.mec'), 'mes' => __('messages.meses'), 'sem' => __('messages.semanas'), 
        'dia' => __('messages.dias')]);
        $periodo_vcomuna = json_encode(['mes' => __('messages.meses'),'dia' => __('messages.dias')]);
        $periodo_mec3meses  = json_encode(['ytd' => __('messages.ytd'), 'mec' => __('messages.mec'), 'mes' => __('messages.meses'), 'sem' => __('messages.semanas'), 
        'dia' => __('messages.dias')]);
        $periodo_grafmatri = json_encode(['ytd' => __('messages.ytd'), 'mec' => __('messages.mec'), 'dia' => __('messages.dias')]);
        $periodo_var = json_encode(['dia' => __('messages.dias')]);
        $periodo_perdi = json_encode(['1' => __('messages.acomulado'), 'mec' => __('messages.mec'), '3' => __('messages.mesanterior')]);
        $mesesComp = [];
        $mesesTree = [];

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

        

        $tipo = json_encode(['year' => (__('messages.año'))."-".(__('messages.meses'))."-".(__('messages.dias')), 
        "local" => __('messages.var-cadena')."-Formato-".(__('messages.variable-local')),
        "marca"=>__('messages.marca')."-".(__('messages.filtro-texto-categoria'))."-".(__('messages.variable-producto'))]);
        $tipo_var = json_encode(["dinero"=>__('messages.dinero'), "porcentaje" =>__('messages.porcentaje')]);
        $lim_inf = json_encode(["-100"=>"-100%", "-50" =>"-50%", "-25"=>"-25%", "-10"=>"-10%"]);
        $lim_sup = json_encode(["100"=>"100%", "50" =>"50%", "25"=>"25%", "10"=>"10%"]);
        $participacion = json_encode(['1'=>"Total Consulta", '2' =>"Total ".__('messages.participacion')]);
        $tipos_graficos = json_encode([ "msline" => "Líneas", "stackedcolumn2d" => (__('messages.selector-tipo-grafico-columnas-apiladas')),
        "mscolumn2d" => "Columnas agrupadas", "stackedbar2d" => "Barras apiladas"]);
        foreach ($meses as $value) {
            list($_mes, $_year) = explode(' ', $value->nombre);
            if($_year == $yearAct || $_year == $yearAnt || $_year == $yearAnt2) {
                $mesesComp []= $value;
            }
        }

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

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

        $ninguno = ['' => ['-1' => 'Sin Seleccionar']];
        $variables_2 = $ninguno + $variables_2;
        $variables_inout[""]["total"] = __('messages.compañia');
        $display_grafico = '';
        $display_tabla = '';
        $warning = "Se compara Costo Sell Out vs Venta Sell In";
        //dd($mesesComp);
        
        $_12MonthsAgo = date('Ym', strtotime(date('Y-m-01').'-11 month'));

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

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


@if(count($selectores_tabla)>0)
@section('tabla')

    @if(isset($selectores_tabla['comp']))
        <x-tabla id="comp" style="height: 900px !important; {{$display_tabla}}"  :filtros="$filtros" :filtrosAv="$filtrosAv" :filtrosAvAlias="$filtrosAvAlias" :favoritosDisabled="$true">
        <!--  -->
            <x-selector-variable id="variables_comp" :lista='$variables' selected='' cliente='$cliente'/>

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

            <x-selector-generico id="f_pareto_comp2" idselect="f_pareto_com" :salida="$paretos"  class="selector-generico d-none" style="width: 120px" selected="">
                <x-slot name="texto">
                    {{__('messages.selector-generico-texto-pareto')}}
                </x-slot>
            </x-selector-generico>
            
            <x-selector-generico id="f_tmp_comp2" idselect="f_tmp_comp" :salida="$periodo_comp"  class="selector-generico" style="width: 100px;" selected="{{$tipo_periodo}}">
                <x-slot name="texto" >
                    {{__('messages.selector-semanas-meses-texto-periodo')}}
                </x-slot>
            </x-selector-generico>
      
            <x-selector-semanas id="fltr_sem_comp" idselect="f_sem_comp_ini" :semanas="$semanasComp" class="fltr_periodo_comp" style="display: none;">
                <x-slot name="texto">
                    {{__('messages.selector-semanas-meses-texto-desde')}}
                </x-slot>
            </x-selector-semanas>
            <x-selector-semanas id="fltr_sem_comp2" idselect="f_sem_comp_fin" :semanas="$semanasComp" class="fltr_periodo_comp" style="display: none;">
                <x-slot name="texto">
                    {{__('messages.selector-semanas-meses-texto-hasta')}}
                </x-slot>
            </x-selector-semanas>
            <x-selector-meses id="fltr_mes_comp" idselect="f_mes_comp_ini" :meses="$mesesComp" class="fltr_periodo_comp" style="display: {{$display_}};">
                <x-slot name="texto">
                    {{__('messages.selector-semanas-meses-texto-desde')}}
                </x-slot>
            </x-selector-meses>
            <x-selector-meses id="fltr_mes_comp2" idselect="f_mes_comp_fin" :meses="$mesesComp" class="fltr_periodo_comp" style="display: {{$display_}};">
                <x-slot name="texto">
                    {{__('messages.selector-semanas-meses-texto-hasta')}}
                </x-slot>
            </x-selector-meses>
            <x-selector-dias idpadre="comp" style="display: none;"/>
        

            <x-boton-actualizar onclick="getCompIPL('{{$cliente}}', 'ventas')"/>
           {{-- <x-infobox tamano="25px" texto="" modal="tabla_comparativo_modal"/> --}}
            <div class="modal fade bd-example-modal-lg" id="tabla_comparativo_modal" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
                <div class="modal-dialog modal-lg">
                    <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="">Tabla Comparativo</h5>     
                    </div>
                        <!-- Center a image from ../public/images/ventas_tabla_matriz.png -->
                        <div class="text-center">
                            <img src="{{asset('images/ventas_tabla_comparativo.png')}}" class="img-fluid" alt="Responsive image">
                        </div>
                        <!-- add div for text -->
                        <p><b>Consultas sobre la tabla:</b> Para utilizar la tabla; definir los parámetros en los selectores y presionar "Actualizar".</p>
                        <ul>
                            <li><b>Selector Variable:</b> Definir Variable en filas de la tabla.</li>
                            <li><b>Selector Valor Salida:</b> Seleccionar tipo de unidad sobre la que se consulta.</li>
                            <li><b>Selector Tipo Periodo:</b> Definir el tipo de periodo que se consulta.</li>
                            <li><b>Selector Periodo:</b> Definir el rango de fechas que se consulta.</li>
                        </ul>
                        <p><b>Ordenar:</b> Clickear en los encabezados de las columnas ordenará los registros de la tabla en orden descendiente según lo que representa esa columna. Clickear nuevamente ordenará los registros en orden ascendente.</p>
                        <p><b>Fila y Columna Total (Títulos de variables seleccionadas):</b> Valores calculados tomando todos los registros.</p>
                        <p><b>Filtros Rápidos:</b> Marcar las opciones a filtrar en cada selector.</p>
                        <ul>
                            <li><b>Selector Cliente:</b> Filtrar por cliente.</li>
                            <li><b>Selector Categoría:</b> Filtrar por Categoría    .</li>
                            <li><b>Selector KAM:</b> Filtrar por <i>Key Account Manager</i>.</li>
                        </ul>
                        <p><b>Exportar:</b> Descargar datos de las tabla.</p>
                    </div>
                </div>
            </div>

            <x-filtro id="f_clientes_comp" :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_comp" :lista="$categorias" style="max-width: 120px;min-width: 120px;width: 120px;">
                <x-slot name="texto">
                    {{__('messages.filtro-texto-categoria')}}
                </x-slot>
            </x-filtro>
        
           
            <x-filtro id="f_kam_comp" :lista="$kam" style="max-width: 120px;min-width: 120px;width: 120px; display:none;">
                <x-slot name="texto">
                    {{__('messages.filtro-texto-kam')}}
                </x-slot>
            </x-filtro>
          
        </x-tabla>
        @php $display_tabla = ' display: none;'; @endphp
    @endif

    @if(isset($selectores_tabla['compcalef']))
        <x-tabla id="compcalef" style="height: 900px !important; {{$display_tabla}}"  :filtros="$filtros" :filtrosAv="$filtrosAv" :filtrosAvAlias="$filtrosAvAlias" :favoritosDisabled="$true">
        <!--  -->
        <x-selector-variable id="variables_compcalef" :lista='$variables' selected='' cliente='$cliente'/>

            <x-selector-generico id="salida_compcalef2" idselect="salida_compcalef" :salida="$salida_default"  class="selector-generico" style="width: 120px" selected="{{$salida_siksa}}">
                <x-slot name="texto">
                    {{__('messages.selector-generico-texto-valor')}}
                </x-slot>
            </x-selector-generico>

            <x-selector-generico id="f_pareto_compcalef2" idselect="f_pareto_com" :salida="$paretos"  class="selector-generico d-none" style="width: 120px" selected="">
                <x-slot name="texto">
                    {{__('messages.selector-generico-texto-pareto')}}
                </x-slot>
            </x-selector-generico>
            
            <x-selector-generico id="f_tmp_compcalef2" idselect="f_tmp_compcalef" :salida="$periodo_comp"  class="selector-generico" style="width: 100px;" selected="{{$tipo_periodo}}">
                <x-slot name="texto" >
                    {{__('messages.selector-semanas-meses-texto-periodo')}}
                </x-slot>
            </x-selector-generico>
      
            <x-selector-semanas id="fltr_sem_compcalef" idselect="f_sem_compcalef_ini" :semanas="$semanasComp" class="fltr_periodo_comp" style="display: none;">
                <x-slot name="texto">
                    {{__('messages.selector-semanas-meses-texto-desde')}}
                </x-slot>
            </x-selector-semanas>
            <x-selector-semanas id="fltr_sem_compcalef2" idselect="f_sem_compcalef_fin" :semanas="$semanasComp" class="fltr_periodo_comp" style="display: none;">
                <x-slot name="texto">
                    {{__('messages.selector-semanas-meses-texto-hasta')}}
                </x-slot>
            </x-selector-semanas>
            <x-selector-meses id="fltr_mes_compcalef" idselect="f_mes_compcalef_ini" :meses="$mesesComp" class="fltr_periodo_comp" style="display: {{$display_}};">
                <x-slot name="texto">
                    {{__('messages.selector-semanas-meses-texto-desde')}}
                </x-slot>
            </x-selector-meses>
            <x-selector-meses id="fltr_mes_compcalef2" idselect="f_mes_compcalef_fin" :meses="$mesesComp" class="fltr_periodo_comp" style="display: {{$display_}};">
                <x-slot name="texto">
                    {{__('messages.selector-semanas-meses-texto-hasta')}}
                </x-slot>
            </x-selector-meses>
            <x-selector-dias idpadre="compcalef" style="display: none;"/>
        

            <x-boton-actualizar onclick="getCompCALEF('{{$cliente}}', 'ventas')"/>
           {{-- <x-infobox tamano="25px" texto="" modal="tabla_compcalefarativo_modal"/> --}}
            <div class="modal fade bd-example-modal-lg" id="tabla_compcalefarativo_modal" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
                <div class="modal-dialog modal-lg">
                    <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="">Tabla Comparativo</h5>     
                    </div>
                        <!-- Center a image from ../public/images/ventas_tabla_matriz.png -->
                        <div class="text-center">
                            <img src="{{asset('images/ventas_tabla_compcalefarativo.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_compcalef" :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_compcalef" :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_compcalef" :lista="$kam" style="max-width: 120px;min-width: 120px;width: 120px; display:none;">
                <x-slot name="texto">
                    {{__('messages.filtro-texto-kam')}}
                </x-slot>
            </x-filtro>
          
        </x-tabla>
        @php $display_tabla = ' display: none;'; @endphp
    @endif 
    @if(isset($selectores_tabla['compinternet']))
        <x-tabla id="compinternet" style="height: 900px !important; {{$display_tabla}}"  :filtros="$filtros" :filtrosAv="$filtrosAv" :filtrosAvAlias="$filtrosAvAlias" :favoritosDisabled="$true">
        <!--  -->
        <x-selector-variable id="variables_compinternet" :lista='$variables' selected='' cliente='$cliente'/>

            <x-selector-generico id="salida_compinternet2" idselect="salida_compinternet" :salida="$salida_default"  class="selector-generico" style="width: 120px" selected="{{$salida_siksa}}">
                <x-slot name="texto">
                    {{__('messages.selector-generico-texto-valor')}}
                </x-slot>
            </x-selector-generico>

            <x-selector-generico id="f_pareto_compinternet2" idselect="f_pareto_com" :salida="$paretos"  class="selector-generico d-none" style="width: 120px" selected="">
                <x-slot name="texto">
                    {{__('messages.selector-generico-texto-pareto')}}
                </x-slot>
            </x-selector-generico>
            
            <x-selector-generico id="f_tmp_compinternet2" idselect="f_tmp_compinternet" :salida="$periodo_comp"  class="selector-generico" style="width: 100px;" selected="{{$tipo_periodo}}">
                <x-slot name="texto" >
                    {{__('messages.selector-semanas-meses-texto-periodo')}}
                </x-slot>
            </x-selector-generico>
    
            <x-selector-semanas id="fltr_sem_compinternet" idselect="f_sem_compinternet_ini" :semanas="$semanasComp" class="fltr_periodo_comp" style="display: none;">
                <x-slot name="texto">
                    {{__('messages.selector-semanas-meses-texto-desde')}}
                </x-slot>
            </x-selector-semanas>
            <x-selector-semanas id="fltr_sem_compinternet2" idselect="f_sem_compinternet_fin" :semanas="$semanasComp" class="fltr_periodo_comp" style="display: none;">
                <x-slot name="texto">
                    {{__('messages.selector-semanas-meses-texto-hasta')}}
                </x-slot>
            </x-selector-semanas>
            <x-selector-meses id="fltr_mes_compinternet" idselect="f_mes_compinternet_ini" :meses="$mesesComp" class="fltr_periodo_comp" style="display: {{$display_}};">
                <x-slot name="texto">
                    {{__('messages.selector-semanas-meses-texto-desde')}}
                </x-slot>
            </x-selector-meses>
            <x-selector-meses id="fltr_mes_compinternet2" idselect="f_mes_compinternet_fin" :meses="$mesesComp" class="fltr_periodo_comp" style="display: {{$display_}};">
                <x-slot name="texto">
                    {{__('messages.selector-semanas-meses-texto-hasta')}}
                </x-slot>
            </x-selector-meses>
            <x-selector-dias idpadre="compinternet" style="display: none;"/>
        

            <x-boton-actualizar onclick="getCompinternet('{{$cliente}}', 'ventas')"/>
        {{-- <x-infobox tamano="25px" texto="" modal="tabla_compinternetarativo_modal"/> --}}
            <div class="modal fade bd-example-modal-lg" id="tabla_compinternetarativo_modal" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
                <div class="modal-dialog modal-lg">
                    <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="">Tabla Comparativo</h5>     
                    </div>
                        <!-- Center a image from ../public/images/ventas_tabla_matriz.png -->
                        <div class="text-center">
                            <img src="{{asset('images/ventas_tabla_compinternetarativo.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_compinternet" :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_compinternet" :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_compinternet" :lista="$kam" style="max-width: 120px;min-width: 120px;width: 120px; display:none;">
                <x-slot name="texto">
                    {{__('messages.filtro-texto-kam')}}
                </x-slot>
            </x-filtro>
        
        </x-tabla>
        @php $display_tabla = ' display: none;'; @endphp
    @endif 




@endsection
@endif

@section('right-bar')
    <div class="p-3 align-items-center flex-column d-none" id="f_grafcomp">
        
    </div>
    <div class="p-3 align-items-center flex-column d-none" id="f_grafevo">
    </div>
@endsection
@section('js_aft')
    <script>
        var currentYear = new Date().getFullYear();
        var cliente_ = "{{$cliente}}";
        $("#f_mes_grafcomp_ini").val(currentYear+"01").change();
        $("#f_mes_grafcompcalef_ini").val(currentYear+"01").change();
        $("#f_mes_graftree_ini").val(currentYear+"01").change();
        $("#f_mes_evo_ini").val(currentYear+"01").change();
        $("#f_mes_evo_sell_in_ini").val(currentYear+"01").change();

        let ids = ['comp', 'compcalef','compinternet'];
        
        $(document).ready(() => {
            jQuery.extend( jQuery.fn.dataTableExt.oSort, {
                "percent-pre": function ( a ) {
                    var x = (a == "--%") ? 0 : a.replace( /%/, "" );
                    return parseFloat( x );
                },

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

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

            $("#vcomuna > div:nth-child(2) > div:nth-child(1) > div:nth-child(1) > div:nth-child(1)").hide()
            $("#vcomuna > div:nth-child(2) > div:nth-child(1) > div:nth-child(1) > div:nth-child(2)").hide()
             
            // ids.forEach(function(item){
            //     if($('#'+item).length > 0 && $('#f_favoritos_'+item).length > 0) cargarFavoritos(item);
            // });

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

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

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

            $('#variables_compinternet').select2MultiCheckboxes({
                placeholder: "{{__('messages.elegir-variables')}}",
                width: "auto",
                templateSelection: function(selected, total) {
                    return selected.length + " de " + total + " total";
                }
            });
            $('#f_categorias_comp').val('IPL').change();
            $('#f_categorias_compcalef').val('CALEFACCION').change();
            $('#f_canal_compinternet').val('E-COMMERCE').change();
            $('#f_formato_compinternet').val('E-COMMERCE').change();

            $('#variables_comp').val(['2-0', '3-5']).change();
            $('#variables_compcalef').val(['2-0', '3-5']).change();
            $('#variables_compinternet').val(['2-5', '1-2','1-15']).change();

            $('#variables_comparativo').select2MultiCheckboxes({
                placeholder: "{{__('messages.elegir-variables')}}",
                width: "auto",
                templateSelection: function(selected, total) {
                    return selected.length + " de " + total + " total";
                }
            });
            // $('#variables_comp').val('2-0').change();
            // $('#variables_comp').val('3-5').change();


            //set selected values "IPL"
           
            
            
            let ahora = new Date();

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

            congifDate["minDate"] = moment(new Date(ahora.getFullYear(), 0, 1));
            [ "#f_dia_grafcomp_fin"].forEach((selector, i) => {
                $(selector).daterangepicker(congifDate);
            });
            congifDate["minDate"] = moment((new Date()).setDate(ahora.getDate()-730));
            [ "#f_dia_grafcomp_ini"].forEach((selector, i) => {
                $(selector).daterangepicker(congifDate);
            });
            congifDate["minDate"] = moment((new Date()).setDate(ahora.getDate()-365));
            [ "#f_dia_grafmatri_ini"].forEach((selector, i) => {
                $(selector).daterangepicker(congifDate);
            });
            $("#tipo_grafdri").change(function(elem){
                if(elem.target.value=="year"){
                    $("#f_tmp_grafdri2").hide();
                    $(".fltr_periodo_grafdri").hide();
                }else{
                    $("#f_tmp_grafdri2").show();
                    $("#f_tmp_grafdri").change();
                }
            });
            let fechaMin = new Date(new Date().setFullYear(new Date().getFullYear() - 1));
            congifDate["minDate"] = moment(fechaMin);
            [ "#f_dia_grafvar_ini"].forEach((selector, i) => {
                $(selector).daterangepicker(congifDate);
            });
            $('select[id^="f_tmp_"]').change(function(elem){
                
                let aux = elem.target.id.split("_");
                let macroTmp = aux[aux.length - 1];
                let tmp = $("#f_tmp_" + macroTmp).find('option:selected').val();
                //console.log(" tmp"+tmp);
                //console.log(" macroTmp "+macroTmp);

                $(".fltr_periodo_" + macroTmp).css("display","none");
                $("#fltr_"+tmp+"_" + macroTmp).css("display","inline-block");
                $("#fltr_"+tmp+"_" + macroTmp + "2").css("display","inline-block");
                $("#fltr_"+tmp+"_" + macroTmp + "3").css("display","inline-block");
            });
            $('#f_mes_grafcomp_ini').change(function(elem){
                let date = new Date();
                    $('#f_mes_grafcomp_fin').find("option").prop("disabled", false);
               
                    $('#f_mes_grafcomp_fin').val(parseInt(elem.target.value) + 100);

                $('#f_mes_grafcomp_fin').trigger('change');
            });
            $(".navbar-402").css("border-style","solid");
            $(".navbar-402").css("border-left","0px");
            $(".navbar-402").css("border-color","#57775F");
            $(".navbar-402").css("background-color","#57775F");

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

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

            // clickActualizar(['grafcomp', 'comp', 'grafevo', 'evo', 'matri', 'grafdri', 'graftree', 'grafvar']);
            // (async _ => {
            //     await getGrafComp('', 'ventas');
            //     await getComp('', 'ventas');
            //     await getGrafEvo('', 'ventas');
            //     await getEvo('', 'ventas');
            //     await getMatri('', 'ventas');
            //     await getGrafDri('', 'ventas');
            //     await getGrafTree('', 'ventas');
            // })();

            if(['maisa'].includes(cliente_)){
                $('#selected_marcas').val('TODAS').change();
                // Gráfico Evolutivo
                $("#f_tmp_grafevo").val('sem').change();
                // Gráfico Comparativo
                $('#f_tmp_grafcomp').val('sem').change();
                // Gráfico Matriz
                $('#f_tmp_grafmatri').val('dia').change();
                // Gráfico Crecimiento
                $('#f_tmp_grafcrec').val('sem').change();
                // Tabla Evolución
                $('#f_tmp_evo').val('sem').change();
                // Tabla Comparación
                $('#f_tmp_comp').val('sem').change();
                $('#f_tmp_compFalabella').val('sem').change();
                $('#f_tmp_compRipley').val('sem').change();
                // Tabla Matriz
                $('#variables_matri1').val('1-1').change(); // Variables Filas = Marca
                $('#f_tmp_matri').val('dia').change(); // Periodo por día

                let sem = moment().subtract(1, 'weeks').format('YYYY') + moment().subtract(1, 'weeks').format('WW');
                console.log(sem);
                $('#f_sem_comp_ini').val(sem).change(); // 
                $('#f_sem_compFalabella_ini').val(sem).change();
                $('#f_sem_compRipley_ini').val(sem).change();
 
 


                
            }
        });
        var filtrosPromise = getFiltrosAv('{{$cliente}}', '{{$codigo}}');

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

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