@extends('layouts.reporte_analytics')

@section('css_aft')
    <link rel="stylesheet" href="{{asset('css\vendor\buttons.bootstrap5.css') }}">
    <style>
        body[data-leftbar-compact-mode="condensed"]:not(.authentication-bg){
            min-height: 0 !important;
        }
        .boton-blue{
            background-color: #2874A6 !important;
            border-color: #2874A6 !important;
            box-shadow: none !important;
        }
        .boton-blue:hover{
            background-color: #0B5F96 !important;
            border-color: #0B5F96 !important;
        }
        .boton2{
            background-color: #00a65a !important;
        }
        .boton2:hover{
            background-color: #008d4c !important;
        }
        .max-width{
            max-width: 200px;
        }
        .w-90{
            width: 90% !important;
        } 
        .col.col-md-2{
            padding: 0px 35px 5px 0px;
        }
        .tooltiptext{
            display: none;
            position: absolute;
            width: 300px;
            margin-top: 12px;
            transform: translate(-140px, 25px);
            color: white;
            background-color: black;
            border-radius: 20px;
            padding: 10px;
            z-index: 99;
        }
        .fa-sort-up{
            display: none;
            position: absolute;
            margin-top: 12px;
            transform: translate(8px, 20px);
            color: black;
        }
    </style>
@endsection
@section('php')
    @php
        $locales = [];
        $cantidad = 100;
        while ($cantidad <= $cantidad_locales) {
            $locales[$cantidad] = $cantidad;
            $cantidad = $cantidad + 100;
        }
        if ($cantidad % 100 == 0) {
            $locales[$cantidad_locales] = $cantidad_locales;
        }
        $locales = json_encode($locales);
        $anhos = [];
        $semestres = [];
        foreach ($anos as $value) {
            if(property_exists($value, 'ano')){
                $anhos[$value->ano] = $value->ano;
                $semestres[$value->ano.'-1'] = $value->ano.'-1';
                $semestres[$value->ano.'-2'] = $value->ano.'-2';
            }else{
                $anhos[$value->ANO] = $value->ANO;
                $semestres[$value->ANO.'-1'] = $value->ANO.'-1';
                $semestres[$value->ANO.'-2'] = $value->ANO.'-2';
            }
        }
        $cliente = config('app.CLIENTE');
        
        $salida = json_encode(['2' => __('messages.ventas'), '1' => __('messages.unidades'), '3' => __('messages.costo')]);
        $salida_matri = json_encode(['2' => __('messages.ventas'), '1' => __('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_grafcomp = json_encode([/*'dia'=> __('messages.dias'),*/ 'sem' => __('messages.semanas'), 'mes' => __('messages.meses'), 'ytd' => __('messages.ytd'), 'year' => __('messages.time-str-años')/*, 'semestre' => __('messages.time-str-semestres')*/]);
        $periodo_comp = json_encode(['dia' => __('messages.dias'), 'ytd'=> __('messages.ytd'), 'mec' => __('messages.mec'), 'sem' => __('messages.semanas'), 'mes' => __('messages.meses')]);
        $periodo_matri = json_encode(['ytd' => __('messages.ytd'), 'mec' => __('messages.mec'), 'sem' => __('messages.semanas'), 'dia' => __('messages.dias')]);
        $periodo_grafmatri = json_encode(['ytd' => __('messages.ytd'), 'mec' => __('messages.mec'), 'dia' => __('messages.dias')]);
        $periodo_var = json_encode(['dia' => __('messages.dias')]);
        $mesesComp = [];
        $semanasComp = [];
        $filtrosAvConProd = $filtrosAv;
        if(isset($filtrosAvConProd['producto'])) unset($filtrosAvConProd['producto']);
        if(isset($filtrosAvConProd['cadena'])) unset($filtrosAvConProd['cadena']);
        $filtrosAvConLoc = $filtrosAv;
        if(isset($filtrosAvConLoc['local'])) unset($filtrosAvConLoc['local']);
        if(isset($filtrosAvConLoc['cadena'])) unset($filtrosAvConLoc['cadena']);
        $yearAct = date("Y");
        $yearAnt = date("Y") - 1;
        $tipo = json_encode(['year' => (__('messages.año'))."-".(__('messages.meses'))."-".(__('messages.dias')), 
        "local" => __('messages.var-cadena')."-Formato-".(__('messages.variable-local')),
        "marca"=>__('messages.marca')."-".(__('messages.filtro-texto-categoria'))."-".(__('messages.variable-producto'))]);
        $tipo_var = json_encode(["dinero"=>__('messages.dinero'), "porcentaje" =>__('messages.porcentaje')]);
        $lim_inf = json_encode(["-100"=>"-100%", "-50" =>"-50%", "-25"=>"-25%", "-10"=>"-10%"]);
        $lim_sup = json_encode(["100"=>"100%", "50" =>"50%", "25"=>"25%", "10"=>"10%"]);
        $tipos_graficos = json_encode([ "msline" => "Líneas", "stackedcolumn2d" => (__('messages.selector-tipo-grafico-columnas-apiladas')),"mscolumn2d" => "Columnas agrupadas", "stackedbar2d" => "Barras apiladas"]);
        foreach ($meses as $value) {
            list($_mes, $_year) = explode(' ', $value->nombre);
            if($_year == $yearAct || $_year == $yearAnt) {
                $mesesComp []= $value;
            }
        }
        foreach ($semanas as $value) {
            $_year = substr($value->periodo, 0, 4);
            if($_year == $yearAct || $_year == $yearAnt) {
                $semanasComp []= $value;
            }
        }
        if ($cliente == 'colgate') {
            $div = '<div style="padding: 5px 16px;overflow: hidden;background-color: lightblue;text-align: center;"><ul>';
            foreach ($div_reportes as $value) {
                $div.="<li>".$value->Descripcion."</li>";
            }
            $div.="</ul></div>";
        }else{
            $div='';
        }
        $variables_2 = $variables;
        if(isset($variables_2['Local']) && isset($variables_2['Local']['3-5'])){
            unset($variables_2['Local']['3-5']);
        }
        if(isset($variables_2['Producto']) && isset($variables_2['Producto']['1-15'])){
            unset($variables_2['Producto']['1-15']);
        }

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

        $display_grafico = '';
        $display_tabla = '';
        $variables_agrupacion = json_encode(['1'=>"Cadena", "2-5"=>"Holding", "2-0"=>"Compañía"]);
        if($cliente == 'siksa'){
            $variables_agrupacion = json_encode(['1' => 'Sub Cadena', '2-5' => 'Cadena', '2-0' => 'Compañía', '3-5' => 'Local']);
        }
        $orden_ventas = json_encode(['1' => 'Menor a Mayor', '2' => 'Mayor a Menor']);
        $texto = nl2br("Al seleccionar un punto de la línea, representa la cantidad y porcentaje de productos que concentran las ventas de la variable del valor de salida seleccionado.");
        $texto2 = nl2br("Al seleccionar un punto de la línea, representa la cantidad y porcentaje de salas que concentran las ventas de la variable del valor de salida seleccionado.");

        if($cliente == 'canontex'){
            $salida = json_encode(['2' => __('messages.ventas'), '1' => __('messages.unidades'), '3' => __('messages.costo'), '251' => 'Ventas Sell In ($)', '252' => 'Unidades Sell In (U)', '253' => 'Costo Sell In ($)']);
        }
    @endphp
@endsection
@section('div_reportes')
    @php echo $div; @endphp
    <style>
        table tr td {
            border: 2px solid #D1D1D1;
            padding: 10px;
        }
        table tr:nth-child(odd) {
            background: #f4f4f4;
        }
    </style>
@endsection

@if(count($selectores_grafico)>0)
@section('grafico')
    @if(isset($selectores_grafico['grafconprod']))
        <x-grafico id="grafconprod" style="{{$display_grafico}}" :filtros="$filtros" :filtrosAv="$filtrosAvConProd" :filtrosAvAlias="$filtrosAvAlias">
            <x-selector-generico id="variables_grafconprod2" idselect="variables_grafconprod" :salida="$variables_agrupacion" class="selector-generico" style='width: 120px'>
                <x-slot name="texto">
                    {{__('messages.selector-generico-texto-valor')}}
                </x-slot>
            </x-selector-generico>
            <x-selector-generico id="salida_grafconprod2" idselect="salida_grafconprod" :salida="$salida"  class="selector-generico" style="width: 120px">
                <x-slot name="texto">
                    {{__('messages.selector-generico-texto-valor')}}
                </x-slot>
            </x-selector-generico>
            <x-selector-generico id="f_orden_grafconprod2" idselect="f_orden_grafconprod" :salida="$orden_ventas" class="selector-generico" style='width: 120px' selected='2'>
                <x-slot name="texto">
                    {{__('messages.orden-ventas')}}
                </x-slot>
            </x-selector-generico>

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

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

            <!--EVOLUTVO SEMANA-->
            <x-selector-semanas id="fltr_sem_grafconprod" idselect="f_sem_grafconprod_ini" :semanas="$semanas"  class="fltr_periodo_grafconprod" style="display: none;">
                <x-slot name="texto">
                    {{__('messages.selector-semanas-meses-texto-desde')}}
                </x-slot>
            </x-selector-semanas>
            <x-selector-semanas id="fltr_sem_grafconprod2" idselect="f_sem_grafconprod_fin" :semanas="$semanas" class="fltr_periodo_grafconprod" 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_grafconprod" idselect="f_mes_grafconprod_ini" :meses="$mesesComp" class="fltr_periodo_grafconprod">
                <x-slot name="texto">
                    {{__('messages.selector-semanas-meses-texto-desde')}}
                </x-slot>
            </x-selector-meses>
            <x-selector-meses id="fltr_mes_grafconprod2" idselect="f_mes_grafconprod_fin" :meses="$mesesComp" class="fltr_periodo_grafconprod">
                <x-slot name="texto">
                    {{__('messages.selector-semanas-meses-texto-hasta')}}
                </x-slot>
            </x-selector-meses>
            <div id="fltr_year_grafconprod" style="width:120px;display:none;" class="fltr_periodo_grafconprod col-lg-2 col-md-4 col-sm-6 col-xs-12 obj_filtro form-group">
                <div style="text-align:center; font-size: 1.0em;color:#566573">
                    {{__('messages.selector-semanas-meses-texto-desde')}}
                </div>
                <label class="w-100">
                    <select id="f_year_grafconprod_ini" name="f_year_grafconprod_ini" class="flt form-control select2 " data-toggle="select2" width="100%">
                        @foreach($anhos as $key => $value)
                            <option value="{{$key}}01">{{$value}}</option>
                        @endforeach
                    </select>
                </label>
            </div>
            <div id="fltr_year_grafconprod2" style="width:120px;display:none;" class="fltr_periodo_grafconprod col-lg-2 col-md-4 col-sm-6 col-xs-12 obj_filtro form-group">
                <div style="text-align:center; font-size: 1.0em;color:#566573">
                    {{__('messages.selector-semanas-meses-texto-hasta')}}
                </div>
                <label class="w-100">
                    <select id="f_year_grafconprod_fin" name="f_year_grafconprod_fin" class="flt form-control select2 " data-toggle="select2" width="100%">
                        @foreach($anhos as $key => $value)
                        @if (date("Y") == $key)
                            <option value="{{$key}}12" selected>{{$value}}</option>
                        @else
                            <option value="{{$key}}12">{{$value}}</option>
                        @endif
                        @endforeach
                    </select>
                </label>
            </div>
            <div id="fltr_semestre_grafconprod" style="width:120px;display:none;" class="fltr_periodo_grafconprod col-lg-2 col-md-4 col-sm-6 col-xs-12 obj_filtro form-group">
                <div style="text-align:center; font-size: 1.0em;color:#566573">
                    {{__('messages.selector-semanas-meses-texto-desde')}}
                </div>
                <label class="w-100">
                    <select id="f_semestre_grafconprod_ini" name="f_semestre_grafconprod_ini" class="flt form-control select2 " data-toggle="select2" width="100%">
                        @foreach($semestres as $key => $value)
                            @if ((date("m") < 6 && date("Y").'-2' != $key) || date("m") >= 6)
                                @if (explode("-",$key)[1] == '1')
                                    <option value="{{explode("-",$key)[0]}}01">{{$value}}</option>
                                @else
                                    <option value="{{explode("-",$key)[0]}}07">{{$value}}</option>
                                @endif
                            @endif
                        @endforeach
                    </select>
                </label>
            </div>
            <div id="fltr_semestre_grafconprod2" style="width:120px;display:none;" class="fltr_periodo_grafconprod col-lg-2 col-md-4 col-sm-6 col-xs-12 obj_filtro form-group">
                <div style="text-align:center; font-size: 1.0em;color:#566573">
                    {{__('messages.selector-semanas-meses-texto-hasta')}}
                </div>
                <label class="w-100">
                    <select id="f_semestre_grafconprod_fin" name="f_semestre_grafconprod_fin" class="flt form-control select2 " data-toggle="select2" width="100%">
                        @foreach($semestres as $key => $value)
                            @if (date("m") >= 6)
                                @if (date("Y").'-2' == $key)
                                    <option value="{{explode("-",$key)[0]}}12" selected>{{$value}}</option>
                                @else
                                    @if (explode("-",$key)[1] == '1')
                                        <option value="{{explode("-",$key)[0]}}06">{{$value}}</option>
                                    @else
                                        <option value="{{explode("-",$key)[0]}}12">{{$value}}</option>
                                    @endif
                                @endif
                            @else
                                @if (date("Y").'-1' == $key)
                                    <option value="{{explode("-",$key)[0]}}06" selected>{{$value}}</option>
                                @else
                                    @if (date("Y").'-2' != $key)
                                        @if (explode("-",$key)[1] == '1')
                                            <option value="{{explode("-",$key)[0]}}06">{{$value}}</option>
                                        @else
                                            <option value="{{explode("-",$key)[0]}}12">{{$value}}</option>
                                        @endif
                                    @endif
                                @endif
                            @endif
                        @endforeach
                    </select>
                </label>
            </div>
            <div class="col col-md-auto obj_filtro form-group font-weight-normal d-flex align-items-center">
                <label class="align-items-center d-flex" style="padding-top: 15px">
                    <input type="checkbox" id="f_null_grafconprod" value="first_checkbox" style="margin-right: 5px" checked> Sin Ventas
                </label>
            </div>
            <x-boton-actualizar onclick="getGrafConProd('{{$cliente}}', 'ventas');"/>
            <div class="col d-flex flex-row-reverse justify-content-end">
                <i class="fas fa-info-circle my-auto" style="margin-right: 20px; font-size: 24px; height: fit-content" onmouseover="MessageIn(this)" onmouseout="MessageOut(this)"></i>
                <i class="fas fa-sort-up"></i>
                <div class="tooltiptext" style="text-align: justify;"></div>
            </div>

        </x-grafico>
        @php $display_grafico = 'display: none;'; @endphp
    @endif
    @if(isset($selectores_grafico['grafconsal']))
        <x-grafico id="grafconsal" style="{{$display_grafico}}" :filtros="$filtros" :filtrosAv="$filtrosAvConProd" :filtrosAvAlias="$filtrosAvAlias">
            <x-selector-generico id="variables_grafconsal2" idselect="variables_grafconsal" :salida="$variables_agrupacion" class="selector-generico" style='width: 120px'>
                <x-slot name="texto">
                    {{__('messages.selector-generico-texto-valor')}}
                </x-slot>
            </x-selector-generico>

            <x-selector-generico id="salida_grafconsal2" idselect="salida_grafconsal" :salida="$salida"  class="selector-generico" style="width: 120px">
                <x-slot name="texto">
                    {{__('messages.selector-generico-texto-valor')}}
                </x-slot>
            </x-selector-generico>
    
            <x-selector-generico id="f_orden_grafconsal2" idselect="f_orden_grafconsal" :salida="$orden_ventas" class="selector-generico" style='width: 120px' selected='2'>
                <x-slot name="texto">
                    {{__('messages.orden-ventas')}}
                </x-slot>
            </x-selector-generico>

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

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

            <!--EVOLUTVO SEMANA-->
            <x-selector-semanas id="fltr_sem_grafconsal" idselect="f_sem_grafconsal_ini" :semanas="$semanas"  class="fltr_periodo_grafconsal" style="display: none;">
                <x-slot name="texto">
                    {{__('messages.selector-semanas-meses-texto-desde')}}
                </x-slot>
            </x-selector-semanas>
            <x-selector-semanas id="fltr_sem_grafconsal2" idselect="f_sem_grafconsal_fin" :semanas="$semanas" class="fltr_periodo_grafconsal" 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_grafconsal" idselect="f_mes_grafconsal_ini" :meses="$mesesComp" class="fltr_periodo_grafconsal">
                <x-slot name="texto">
                    {{__('messages.selector-semanas-meses-texto-desde')}}
                </x-slot>
            </x-selector-meses>
            <x-selector-meses id="fltr_mes_grafconsal2" idselect="f_mes_grafconsal_fin" :meses="$mesesComp" class="fltr_periodo_grafconsal">
                <x-slot name="texto">
                    {{__('messages.selector-semanas-meses-texto-hasta')}}
                </x-slot>
            </x-selector-meses>
            <div id="fltr_year_grafconsal" style="width:120px;display:none;" class="fltr_periodo_grafconsal col-lg-2 col-md-4 col-sm-6 col-xs-12 obj_filtro form-group">
                <div style="text-align:center; font-size: 1.0em;color:#566573">
                    {{__('messages.selector-semanas-meses-texto-desde')}}
                </div>
                <label class="w-100">
                    <select id="f_year_grafconsal_ini" name="f_year_grafconsal_ini" class="flt form-control select2 " data-toggle="select2" width="100%">
                        @foreach($anhos as $key => $value)
                            <option value="{{$key}}01">{{$value}}</option>
                        @endforeach
                    </select>
                </label>
            </div>
            <div id="fltr_year_grafconsal2" style="width:120px;display:none;" class="fltr_periodo_grafconsal col-lg-2 col-md-4 col-sm-6 col-xs-12 obj_filtro form-group">
                <div style="text-align:center; font-size: 1.0em;color:#566573">
                    {{__('messages.selector-semanas-meses-texto-hasta')}}
                </div>
                <label class="w-100">
                    <select id="f_year_grafconsal_fin" name="f_year_grafconsal_fin" class="flt form-control select2 " data-toggle="select2" width="100%">
                        @foreach($anhos as $key => $value)
                        @if (date("Y") == $key)
                            <option value="{{$key}}12" selected>{{$value}}</option>
                        @else
                            <option value="{{$key}}12">{{$value}}</option>
                        @endif
                        @endforeach
                    </select>
                </label>
            </div>
            <div id="fltr_semestre_grafconsal" style="width:120px;display:none;" class="fltr_periodo_grafconsal col-lg-2 col-md-4 col-sm-6 col-xs-12 obj_filtro form-group">
                <div style="text-align:center; font-size: 1.0em;color:#566573">
                    {{__('messages.selector-semanas-meses-texto-desde')}}
                </div>
                <label class="w-100">
                    <select id="f_semestre_grafconsal_ini" name="f_semestre_grafconsal_ini" class="flt form-control select2 " data-toggle="select2" width="100%">
                        @foreach($semestres as $key => $value)
                            @if ((date("m") < 6 && date("Y").'-2' != $key) || date("m") >= 6)
                                @if (explode("-",$key)[1] == '1')
                                    <option value="{{explode("-",$key)[0]}}01">{{$value}}</option>
                                @else
                                    <option value="{{explode("-",$key)[0]}}07">{{$value}}</option>
                                @endif
                            @endif
                        @endforeach
                    </select>
                </label>
            </div>
            <div id="fltr_semestre_grafconsal2" style="width:120px;display:none;" class="fltr_periodo_grafconsal col-lg-2 col-md-4 col-sm-6 col-xs-12 obj_filtro form-group">
                <div style="text-align:center; font-size: 1.0em;color:#566573">
                    {{__('messages.selector-semanas-meses-texto-hasta')}}
                </div>
                <label class="w-100">
                    <select id="f_semestre_grafconsal_fin" name="f_semestre_grafconsal_fin" class="flt form-control select2 " data-toggle="select2" width="100%">
                        @foreach($semestres as $key => $value)
                            @if (date("m") >= 6)
                                @if (date("Y").'-2' == $key)
                                    <option value="{{explode("-",$key)[0]}}12" selected>{{$value}}</option>
                                @else
                                    @if (explode("-",$key)[1] == '1')
                                        <option value="{{explode("-",$key)[0]}}06">{{$value}}</option>
                                    @else
                                        <option value="{{explode("-",$key)[0]}}12">{{$value}}</option>
                                    @endif
                                @endif
                            @else
                                @if (date("Y").'-1' == $key)
                                    <option value="{{explode("-",$key)[0]}}06" selected>{{$value}}</option>
                                @else
                                    @if (date("Y").'-2' != $key)
                                        @if (explode("-",$key)[1] == '1')
                                            <option value="{{explode("-",$key)[0]}}06">{{$value}}</option>
                                        @else
                                            <option value="{{explode("-",$key)[0]}}12">{{$value}}</option>
                                        @endif
                                    @endif
                                @endif
                            @endif
                        @endforeach
                    </select>
                </label>
            </div>
            <div class="col col-md-auto obj_filtro form-group font-weight-normal d-flex align-items-center">
                <label class="align-items-center d-flex" style="padding-top: 15px">
                    <input type="checkbox" id="f_null_grafconsal" value="first_checkbox" style="margin-right: 5px" checked> Sin Ventas
                </label>
            </div>
            <x-boton-actualizar onclick="getGrafConSal('{{$cliente}}', 'ventas');"/>
            <div class="col d-flex flex-row-reverse justify-content-end">
                <i class="fas fa-info-circle my-auto" style="margin-right: 20px; font-size: 24px; height: fit-content" onmouseover="MessageIn(this)" onmouseout="MessageOut(this)"></i>
                <i class="fas fa-sort-up"></i>
                <div class="tooltiptext" style="text-align: justify;"></div>
            </div>

        </x-grafico>
        @php $display_grafico = 'display: none;'; @endphp
    @endif
    @if(isset($selectores_grafico['grafprodcomp']))
        <x-grafico id="grafprodcomp" style="{{$display_grafico}}" :filtros="$filtros" :filtrosAv="$filtrosAvConProd" :filtrosAvAlias="$filtrosAvAlias">
            @if(isset($filtrosAv['producto']))
                @php
                    $producto = $filtrosAv["producto"];
                @endphp
                <x-filtro id="f_producto_grafprodcomp" :lista="$producto" style="max-width: 120px; min-width: 120px; width: 120px;">
                    <x-slot name="texto">
                        {{__('messages.'.$filtrosAvAlias['producto'])}}
                    </x-slot>
                </x-filtro>
            @else
                @php
                    $producto = [];
                @endphp
                <x-filtro id="f_producto_grafprodcomp" :lista="$producto" style="max-width: 120px; min-width: 120px; width: 120px;">
                    <x-slot name="texto">
                        Producto
                    </x-slot>
                </x-filtro>
            @endif

            @php
                $cadena = $filtrosAv["cadena"];
            @endphp

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

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

            <x-selector-generico id="f_orden_grafprodcomp2" idselect="f_orden_grafprodcomp" :salida="$orden_ventas" class="selector-generico" style='width: 120px' selected='2'>
                <x-slot name="texto">
                    {{__('messages.orden-ventas')}}
                </x-slot>
            </x-selector-generico>

            <x-selector-generico id="f_tmp_grafprodcomp2" idselect="f_tmp_grafprodcomp" :salida="$periodo_grafcomp"  class="" style="width: 120px" selected='mes'>
                <x-slot name="texto">
                    {{__('messages.selector-generico-texto-periodo')}}
                </x-slot>
            </x-selector-generico>
            <x-selector-dias idpadre="grafprodcomp" style="display:none;" />

            <!--EVOLUTVO SEMANA-->
            <x-selector-semanas id="fltr_sem_grafprodcomp" idselect="f_sem_grafprodcomp_ini" :semanas="$semanas"  class="fltr_periodo_grafprodcomp" style="display: none;">
                <x-slot name="texto">
                    {{__('messages.selector-semanas-meses-texto-desde')}}
                </x-slot>
            </x-selector-semanas>
            <x-selector-semanas id="fltr_sem_grafprodcomp2" idselect="f_sem_grafprodcomp_fin" :semanas="$semanas" class="fltr_periodo_grafprodcomp" 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_grafprodcomp" idselect="f_mes_grafprodcomp_ini" :meses="$mesesComp" class="fltr_periodo_grafprodcomp">
                <x-slot name="texto">
                    {{__('messages.selector-semanas-meses-texto-desde')}}
                </x-slot>
            </x-selector-meses>
            <x-selector-meses id="fltr_mes_grafprodcomp2" idselect="f_mes_grafprodcomp_fin" :meses="$mesesComp" class="fltr_periodo_grafprodcomp">
                <x-slot name="texto">
                    {{__('messages.selector-semanas-meses-texto-hasta')}}
                </x-slot>
            </x-selector-meses>
            <div id="fltr_year_grafprodcomp" style="width:120px;display:none;" class="fltr_periodo_grafprodcomp col-lg-2 col-md-4 col-sm-6 col-xs-12 obj_filtro form-group">
                <div style="text-align:center; font-size: 1.0em;color:#566573">
                    {{__('messages.selector-semanas-meses-texto-desde')}}
                </div>
                <label class="w-100">
                    <select id="f_year_grafprodcomp_ini" name="f_year_grafprodcomp_ini" class="flt form-control select2 " data-toggle="select2" width="100%">
                        @foreach($anhos as $key => $value)
                            <option value="{{$key}}01">{{$value}}</option>
                        @endforeach
                    </select>
                </label>
            </div>
            <div id="fltr_year_grafprodcomp2" style="width:120px;display:none;" class="fltr_periodo_grafprodcomp col-lg-2 col-md-4 col-sm-6 col-xs-12 obj_filtro form-group">
                <div style="text-align:center; font-size: 1.0em;color:#566573">
                    {{__('messages.selector-semanas-meses-texto-hasta')}}
                </div>
                <label class="w-100">
                    <select id="f_year_grafprodcomp_fin" name="f_year_grafprodcomp_fin" class="flt form-control select2 " data-toggle="select2" width="100%">
                        @foreach($anhos as $key => $value)
                        @if (date("Y") == $key)
                            <option value="{{$key}}12" selected>{{$value}}</option>
                        @else
                            <option value="{{$key}}12">{{$value}}</option>
                        @endif
                        @endforeach
                    </select>
                </label>
            </div>
            <div id="fltr_semestre_grafprodcomp" style="width:120px;display:none;" class="fltr_periodo_grafprodcomp col-lg-2 col-md-4 col-sm-6 col-xs-12 obj_filtro form-group">
                <div style="text-align:center; font-size: 1.0em;color:#566573">
                    {{__('messages.selector-semanas-meses-texto-desde')}}
                </div>
                <label class="w-100">
                    <select id="f_semestre_grafprodcomp_ini" name="f_semestre_grafprodcomp_ini" class="flt form-control select2 " data-toggle="select2" width="100%">
                        @foreach($semestres as $key => $value)
                            @if ((date("m") < 6 && date("Y").'-2' != $key) || date("m") >= 6)
                                @if (explode("-",$key)[1] == '1')
                                    <option value="{{explode("-",$key)[0]}}01">{{$value}}</option>
                                @else
                                    <option value="{{explode("-",$key)[0]}}07">{{$value}}</option>
                                @endif
                            @endif
                        @endforeach
                    </select>
                </label>
            </div>
            <div id="fltr_semestre_grafprodcomp2" style="width:120px;display:none;" class="fltr_periodo_grafprodcomp col-lg-2 col-md-4 col-sm-6 col-xs-12 obj_filtro form-group">
                <div style="text-align:center; font-size: 1.0em;color:#566573">
                    {{__('messages.selector-semanas-meses-texto-hasta')}}
                </div>
                <label class="w-100">
                    <select id="f_semestre_grafprodcomp_fin" name="f_semestre_grafprodcomp_fin" class="flt form-control select2 " data-toggle="select2" width="100%">
                        @foreach($semestres as $key => $value)
                            @if (date("m") >= 6)
                                @if (date("Y").'-2' == $key)
                                    <option value="{{explode("-",$key)[0]}}12" selected>{{$value}}</option>
                                @else
                                    @if (explode("-",$key)[1] == '1')
                                        <option value="{{explode("-",$key)[0]}}06">{{$value}}</option>
                                    @else
                                        <option value="{{explode("-",$key)[0]}}12">{{$value}}</option>
                                    @endif
                                @endif
                            @else
                                @if (date("Y").'-1' == $key)
                                    <option value="{{explode("-",$key)[0]}}06" selected>{{$value}}</option>
                                @else
                                    @if (date("Y").'-2' != $key)
                                        @if (explode("-",$key)[1] == '1')
                                            <option value="{{explode("-",$key)[0]}}06">{{$value}}</option>
                                        @else
                                            <option value="{{explode("-",$key)[0]}}12">{{$value}}</option>
                                        @endif
                                    @endif
                                @endif
                            @endif
                        @endforeach
                    </select>
                </label>
            </div>
            <div class="col col-md-auto obj_filtro form-group font-weight-normal d-flex align-items-center">
                <label class="align-items-center d-flex" style="padding-top: 15px">
                    <input type="checkbox" id="f_null_grafprodcomp" value="first_checkbox" style="margin-right: 5px" checked> Sin Ventas
                </label>
            </div>
            <!--
            <div class="col col-md-auto obj_filtro form-group font-weight-normal d-flex align-items-center">
                <label class="align-items-center d-flex" style="padding-top: 15px">
                    <input type="checkbox" id="f_top_grafprodcomp" value="first_checkbox" style="margin-right: 5px" checked> Top Productos
                </label>
            </div>-->

            <x-boton-actualizar onclick="grafProdComp('{{$cliente}}', 'ventas');"/>
            <!--
            <div class="col d-flex flex-row-reverse justify-content-end">
                <i class="fas fa-info-circle my-auto" style="margin-right: 20px; font-size: 24px; height: fit-content" onmouseover="MessageIn(this)" onmouseout="MessageOut(this)"></i>
                <i class="fas fa-sort-up"></i>
                <div class="tooltiptext" style="text-align: justify;"></div>
            </div>-->

        </x-grafico>
        @php $display_grafico = 'display: none;'; @endphp
    @endif
    @if(isset($selectores_grafico['grafloccomp']))
        <x-grafico id="grafloccomp" style="{{$display_grafico}}" :filtros="$filtros" :filtrosAv="$filtrosAvConLoc" :filtrosAvAlias="$filtrosAvAlias">
            @php
                $local = $filtrosAv["local"];
            @endphp
            <x-filtro id="f_local_grafloccomp" :lista="$local" style="width: 120px;">
                <x-slot name="texto">
                    {{__('messages.'.$filtrosAvAlias['local'])}}
                </x-slot>
            </x-filtro>
            @php
                $cadena = $filtrosAv["cadena"];
            @endphp
            <x-filtro id="f_cadena_grafloccomp" :lista="$cadena" style="max-width: 120px; min-width: 120px; width: 120px;">
                <x-slot name="texto">
                    @if($cliente != 'siksa'){{__('messages.'.$filtrosAvAlias['cadena'])}} @else Sub Cadena @endif
                </x-slot>
            </x-filtro>

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

            <x-selector-generico id="f_orden_grafloccomp2" idselect="f_orden_grafloccomp" :salida="$orden_ventas" class="selector-generico" style='width: 120px' selected='2'>
                <x-slot name="texto">
                    {{__('messages.orden-ventas')}}
                </x-slot>
            </x-selector-generico>

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

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

            <!--EVOLUTVO SEMANA-->
            <x-selector-semanas id="fltr_sem_grafloccomp" idselect="f_sem_grafloccomp_ini" :semanas="$semanas"  class="fltr_periodo_grafloccomp" style="display: none;">
                <x-slot name="texto">
                    {{__('messages.selector-semanas-meses-texto-desde')}}
                </x-slot>
            </x-selector-semanas>
            <x-selector-semanas id="fltr_sem_grafloccomp2" idselect="f_sem_grafloccomp_fin" :semanas="$semanas" class="fltr_periodo_grafloccomp" 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_grafloccomp" idselect="f_mes_grafloccomp_ini" :meses="$mesesComp" class="fltr_periodo_grafloccomp">
                <x-slot name="texto">
                    {{__('messages.selector-semanas-meses-texto-desde')}}
                </x-slot>
            </x-selector-meses>
            <x-selector-meses id="fltr_mes_grafloccomp2" idselect="f_mes_grafloccomp_fin" :meses="$mesesComp" class="fltr_periodo_grafloccomp">
                <x-slot name="texto">
                    {{__('messages.selector-semanas-meses-texto-hasta')}}
                </x-slot>
            </x-selector-meses>
            <div id="fltr_year_grafloccomp" style="width:120px;display:none;" class="fltr_periodo_grafloccomp col-lg-2 col-md-4 col-sm-6 col-xs-12 obj_filtro form-group">
                <div style="text-align:center; font-size: 1.0em;color:#566573">
                    {{__('messages.selector-semanas-meses-texto-desde')}}
                </div>
                <label class="w-100">
                    <select id="f_year_grafloccomp_ini" name="f_year_grafloccomp_ini" class="flt form-control select2 " data-toggle="select2" width="100%">
                        @foreach($anhos as $key => $value)
                            <option value="{{$key}}01">{{$value}}</option>
                        @endforeach
                    </select>
                </label>
            </div>
            <div id="fltr_year_grafloccomp2" style="width:120px;display:none;" class="fltr_periodo_grafloccomp col-lg-2 col-md-4 col-sm-6 col-xs-12 obj_filtro form-group">
                <div style="text-align:center; font-size: 1.0em;color:#566573">
                    {{__('messages.selector-semanas-meses-texto-hasta')}}
                </div>
                <label class="w-100">
                    <select id="f_year_grafloccomp_fin" name="f_year_grafloccomp_fin" class="flt form-control select2 " data-toggle="select2" width="100%">
                        @foreach($anhos as $key => $value)
                        @if (date("Y") == $key)
                            <option value="{{$key}}12" selected>{{$value}}</option>
                        @else
                            <option value="{{$key}}12">{{$value}}</option>
                        @endif
                        @endforeach
                    </select>
                </label>
            </div>
            <div id="fltr_semestre_grafloccomp" style="width:120px;display:none;" class="fltr_periodo_grafloccomp col-lg-2 col-md-4 col-sm-6 col-xs-12 obj_filtro form-group">
                <div style="text-align:center; font-size: 1.0em;color:#566573">
                    {{__('messages.selector-semanas-meses-texto-desde')}}
                </div>
                <label class="w-100">
                    <select id="f_semestre_grafloccomp_ini" name="f_semestre_grafloccomp_ini" class="flt form-control select2 " data-toggle="select2" width="100%">
                        @foreach($semestres as $key => $value)
                            @if ((date("m") < 6 && date("Y").'-2' != $key) || date("m") >= 6)
                                @if (explode("-",$key)[1] == '1')
                                    <option value="{{explode("-",$key)[0]}}01">{{$value}}</option>
                                @else
                                    <option value="{{explode("-",$key)[0]}}07">{{$value}}</option>
                                @endif
                            @endif
                        @endforeach
                    </select>
                </label>
            </div>
            <div id="fltr_semestre_grafloccomp2" style="width:120px;display:none;" class="fltr_periodo_grafloccomp col-lg-2 col-md-4 col-sm-6 col-xs-12 obj_filtro form-group">
                <div style="text-align:center; font-size: 1.0em;color:#566573">
                    {{__('messages.selector-semanas-meses-texto-hasta')}}
                </div>
                <label class="w-100">
                    <select id="f_semestre_grafloccomp_fin" name="f_semestre_grafloccomp_fin" class="flt form-control select2 " data-toggle="select2" width="100%">
                        @foreach($semestres as $key => $value)
                            @if (date("m") >= 6)
                                @if (date("Y").'-2' == $key)
                                    <option value="{{explode("-",$key)[0]}}12" selected>{{$value}}</option>
                                @else
                                    @if (explode("-",$key)[1] == '1')
                                        <option value="{{explode("-",$key)[0]}}06">{{$value}}</option>
                                    @else
                                        <option value="{{explode("-",$key)[0]}}12">{{$value}}</option>
                                    @endif
                                @endif
                            @else
                                @if (date("Y").'-1' == $key)
                                    <option value="{{explode("-",$key)[0]}}06" selected>{{$value}}</option>
                                @else
                                    @if (date("Y").'-2' != $key)
                                        @if (explode("-",$key)[1] == '1')
                                            <option value="{{explode("-",$key)[0]}}06">{{$value}}</option>
                                        @else
                                            <option value="{{explode("-",$key)[0]}}12">{{$value}}</option>
                                        @endif
                                    @endif
                                @endif
                            @endif
                        @endforeach
                    </select>
                </label>
            </div>
            <div class="col col-md-auto obj_filtro form-group font-weight-normal d-flex align-items-center">
                <label class="align-items-center d-flex" style="padding-top: 15px">
                    <input type="checkbox" id="f_null_grafloccomp" value="first_checkbox" style="margin-right: 5px" checked> Sin Ventas
                </label>
            </div>

            <x-boton-actualizar onclick="grafLocComp('{{$cliente}}', 'ventas');"/><!--
            <div class="col d-flex flex-row-reverse justify-content-end">
                <i class="fas fa-info-circle my-auto" style="margin-right: 20px; font-size: 24px; height: fit-content" onmouseover="MessageIn(this)" onmouseout="MessageOut(this)"></i>
                <i class="fas fa-sort-up"></i>
                <div class="tooltiptext" style="text-align: justify;"></div>
            </div>-->

        </x-grafico>
        @php $display_grafico = '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>
    
        function MessageIn(icon){
            $('.tooltiptext').fadeIn(200);
            $('.fa-sort-up').fadeIn(200);
        }
        function MessageOut(icon){
            $('.tooltiptext').fadeOut(200);
            $('.fa-sort-up').fadeOut(200);
        }
        let ids = ['grafconprod','grafconsal','grafloccomp','grafprodcomp', 'matri', 'grafevo', 'grafcomp', 'comp', 'grafdri', 'graftree', 'grafvar', 'grafmatri'];
        
        var filtrosPromise = getFiltrosAv('{{$cliente}}', '{{$codigo}}');
        $(document).ready(() => {
            ids.forEach(function(item){
                if($('#'+item).length > 0 && $('#f_favoritos_'+item).length > 0) cargarFavoritos(item);
            });
            
            filtrosPromise.then(function(resp){
                ponerFiltrosAv(resp);
            });

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

            // $("#f_clientes_comp").select2({closeOnSelect:false, multiple: true, placeholder: "Seleccionar Cliente", width: "auto"});
            $('#variables_comp').select2MultiCheckboxes({
                placeholder: "{{__('messages.elegir-variables')}}",
                width: "auto",
                templateSelection: function(selected, total) {
                    return selected.length + " de " + total + " total";
                }
            });
            
            let ahora = new Date();
            let congifDate = {
                ...("{{config('app.locale')}}" == "es") && {
                    locale: {
                        format: 'YYYY/MM/DD',
                        daysOfWeek: ["Do", "Lu", "Ma", "Mi", "Ju", "Vi", "Sa"],
                        monthNames: ["Enero", "Febrero", "Marzo", "Abril",
                                    "Mayo", "Junio", "Julio", "Agosto",
                                    "Septiembre", "Octubre", "Noviembre", "Diciembre"],
                        applyLabel: "Aplicar",
                        cancelLabel: "Cancelar",
                        firstDay: 1
                    }
                },
                    maxDate: moment(ahora),
                    startDate: moment((new Date()).setDate(ahora.getDate()-21)),
                    endDate: ahora
            };
            ["#f_dia_comp_ini","#f_dia_grafevo_ini", "#f_dia_grafevo_fin", "#f_dia_matri_ini","#f_dia_grafdri_ini","#f_dia_graftree_ini"].forEach((selector, i) => {
                $(selector).daterangepicker(congifDate);
            });

            congifDate2 = congifDate;
            congifDate2.startDate = moment((new Date()).setDate(ahora.getDate()-15));
            ["#f_dia_evo_ini", "#f_dia_evo_fin"].forEach((selector, i) => {
                $(selector).daterangepicker(congifDate2);
            });
            congifDate["minDate"] = moment(new Date(ahora.getFullYear(), 0, 1));
            [ "#f_dia_grafcomp_ini", "#f_dia_grafcomp_fin"].forEach((selector, i) => {
                $(selector).daterangepicker(congifDate);
            });
            congifDate["minDate"] = moment((new Date()).setDate(ahora.getDate()-365));
            [ "#f_dia_grafmatri_ini"].forEach((selector, i) => {
                $(selector).daterangepicker(congifDate);
            });
            
            $("#tipo_grafdri").change(function(elem){
                if(elem.target.value=='year'){
                    $("#f_tmp_grafdri2").hide();
                    $(".fltr_periodo_grafdri").hide();
                }else{
                    $("#f_tmp_grafdri2").show();
                    $("#f_tmp_grafdri").change();
                }
            });
            let fechaMin = new Date(new Date().setFullYear(new Date().getFullYear() - 1));
            congifDate["minDate"] = moment(fechaMin);
            [ "#f_dia_grafvar_ini"].forEach((selector, i) => {
                $(selector).daterangepicker(congifDate);
            });
            $('select[id^="f_tmp_"]').change(function(elem){
                let aux = elem.target.id.split("_");
                let macroTmp = aux[aux.length - 1];
                let tmp = $("#f_tmp_" + macroTmp).find('option:selected').val();
                $(".fltr_periodo_" + macroTmp).css("display","none");
                $("#fltr_"+tmp+"_" + macroTmp).css("display","inline-block");
                $("#fltr_"+tmp+"_" + macroTmp + '2').css("display","inline-block");
                $("#fltr_"+tmp+"_" + macroTmp + '3').css("display","inline-block");
            });
            $(".navbar-402").css("border-style","solid");
            $(".navbar-402").css("border-left","0px");
            $(".navbar-402").css("border-color","#57775F");
            $(".navbar-402").css("background-color","#57775F");

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

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

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