@extends('layouts.reporte')

@section('php')
    @php
        $cliente = config('app.CLIENTE');

        $salida = json_encode(['351' => __('messages.ventas')]);
        $salida_evo = json_encode(['num' => __('messages.numerico'), 'porc' => __('messages.porcentual')]);
        $salida_matri = json_encode(['cobertura-clorox' => __('messages.cobertura')]);

        $periodo = json_encode(['dia'=> __('messages.dias'), 'sem' => __('messages.semanas'), 'mes' => __('messages.meses')]);
        $periodo_comp = json_encode(['dia'=> __('messages.dias'),'ytd' => __('messages.ytd'), 'mec' => __('messages.mec'), 'sem' => __('messages.semanas'), 
        'mes' => __('messages.meses'), 'uam' => __('messages.ult-anio-movil')]);
        $periodo_matri = json_encode(['mec' => __('messages.mec'), 'mes' => __('messages.meses'), 'sem' => __('messages.semanas'), 
        'dia' => __('messages.dias')]);

        $tipos_graficos = json_encode(['msline' => 'Líneas', 'stackedcolumn2d' => (__('messages.selector-tipo-grafico-columnas-apiladas')), 'mscolumn2d' => 'Columnas agrupadas', 'stackedbar2d' => 'Barras apiladas']);

        if(in_array($cliente, ['clorox'])){
            $periodo = json_encode(['dia'=> __('messages.dias'), 'sem' => __('messages.semanas'), 'mes' => __('messages.meses'), 'ytdf' => __('messages.ytdf'), 'ytd' => __('messages.ytd'), 'fye' => 'Año Fiscal', 'trif' => 'Trimestre Fiscal']);
            $periodo_comp = json_encode(['dia'=> __('messages.dias'), 'ytdf' => __('messages.ytdf'), 'ytd' => __('messages.ytd'), 'mec' => __('messages.mec'), 'sem' => __('messages.semanas'), 
            'mes' => __('messages.meses'), 'uam' => __('messages.ult-anio-movil'), 'fye' => 'Año Fiscal', 'trif' => 'Trimestre Fiscal']);
            $periodo_matri = json_encode(['mec' => __('messages.mec'), 'mes' => __('messages.meses'), 'sem' => __('messages.semanas'), 
            'dia' => __('messages.dias'), 'fye' => 'Año Fiscal', 'trif' => 'Trimestre Fiscal']);
        }
        $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;
        }
        $locales = json_encode($locales);

        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['Canal Tradicional'] = ['351-1' => 'Identificador Cliente'];
        //$variables['Local'] = ['351-1' => 'Identificador Cliente'];
        //unset($variables['Local']['3-5']);

        $filtros2 = $filtros;
        unset($filtrosAv['clientes']);
        unset($filtros2['clientes']);
        $vacio = [];

        $arr_dos_periodos = ['clorox'];

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

@if(count($selectores_grafico)>0)
@section('grafico')
    @if(isset($selectores_grafico['grafevo']))
        <x-tabla id="grafevo" style="{{$display_tabla}}" :filtros="$filtros2" :filtrosAv="$filtrosAv" :filtrosAvAlias="$filtrosAvAlias">
            <x-selector-generico id="f_clienteunico_grafevo2" idselect="f_clienteunico_grafevo" :salida="$holding_trad" class="selector-generico" style="width: 120px" >
                <x-slot name="texto">
                    {{__('messages.var-holding')}}
                </x-slot>
            </x-selector-generico>
            
            <x-selector-variable id="variables_grafevo" :lista='$variables' selected="2-5" cliente='$cliente'/>

            <x-selector-generico id="f_tmp_grafevo2" idselect="f_tmp_grafevo" :salida="$periodo" class="selector-generico" style="width: 120px" selected="mes">
                <x-slot name="texto">
                    {{__('messages.selector-generico-texto-periodo')}}
                </x-slot>
            </x-selector-generico>
            <x-selector-dias idpadre="grafevo" style="display:none;"/>
            
            <!--EVOLUTVO SEMANA-->
            <x-selector-semanas id="fltr_sem_grafevo" idselect="f_sem_grafevo_ini" :semanas="$semanas" class="fltr_periodo_grafevo" style="display: none;">
                <x-slot name="texto">
                    {{__('messages.selector-semanas-meses-texto-desde')}}
                </x-slot>
            </x-selector-semanas>
            <x-selector-semanas id="fltr_sem_grafevo2" idselect="f_sem_grafevo_fin" :semanas="$semanas" class="fltr_periodo_grafevo" style="display: none;">
                <x-slot name="texto">
                    {{__('messages.selector-semanas-meses-texto-hasta')}}
                </x-slot>
            </x-selector-semanas>
            <!--EVOLUTVO MES-->
            <x-selector-meses id="fltr_mes_grafevo" idselect="f_mes_grafevo_ini" :meses="$meses" class="fltr_periodo_grafevo">
                <x-slot name="texto">
                    {{__('messages.selector-semanas-meses-texto-desde')}}
                </x-slot>
            </x-selector-meses>
            <x-selector-meses id="fltr_mes_grafevo2" idselect="f_mes_grafevo_fin" :meses="$meses" class="fltr_periodo_grafevo">
                <x-slot name="texto">
                    {{__('messages.selector-semanas-meses-texto-hasta')}}
                </x-slot>
            </x-selector-meses>

            <x-selector-fiscal id="fltr_fye_grafevo" idselect="f_fye_grafevo_ini" :fiscal="$fiscal" class="fltr_periodo_grafevo" style="display: none;">
                <x-slot name="texto">
                    {{__('messages.selector-semanas-meses-texto-desde')}}
                </x-slot>
            </x-selector-fiscal>
            <x-selector-fiscal id="fltr_fye_grafevo2" idselect="f_fye_grafevo_fin" :fiscal="$fiscal" class="fltr_periodo_grafevo" style="display: none;">
                <x-slot name="texto">
                    {{__('messages.selector-semanas-meses-texto-hasta')}}
                </x-slot>
            </x-selector-fiscal>

            <x-selector-trimestref id="fltr_trif_grafevo" idselect="f_trif_grafevo_ini" :trimestref="$trimestref" class="fltr_periodo_grafevo" style="display:none;">
                <x-slot name="texto">
                    {{__('messages.selector-semanas-meses-texto-desde')}}
                </x-slot>
            </x-selector-trimestref>
            <x-selector-trimestref id="fltr_trif_grafevo2" idselect="f_trif_grafevo_fin" :trimestref="$trimestref" class="fltr_periodo_grafevo" style="display:none;">
                <x-slot name="texto">
                    {{__('messages.selector-semanas-meses-texto-hasta')}}
                </x-slot>
            </x-selector-trimestref>
            
            <x-selector-generico id="f_type_grafevo2" idselect="f_type_grafevo" :salida="$tipos_graficos"  class="selector-generico" style="width: 120px;" selected="stackedcolumn2d">
                <x-slot name="texto">
                    {{__('messages.selector-tipo-grafico')}}
                </x-slot>
            </x-selector-generico>

            <x-boton-actualizar onclick="getGrafCoberturaEvo('{{$cliente}}', 'ventas');"/>
        </x-tabla>
        @php $display_grafico = 'display: none;'; @endphp
    @endif
@endsection
@endif

@if(count($selectores_tabla)>0)
@section('tabla')
    @if(isset($selectores_tabla['evo']))
        <x-tabla id="evo" style="height: 600px !important; {{$display_tabla}}" :filtros="$filtros2" :filtrosAv="$filtrosAv" :filtrosAvAlias="$filtrosAvAlias">
            <x-selector-generico id="f_clienteunico_evo2" idselect="f_clienteunico_evo" :salida="$holding_trad" class="selector-generico" style="width: 120px" >
                <x-slot name="texto">
                    {{__('messages.var-holding')}}
                </x-slot>
            </x-selector-generico>

            <x-selector-variable id="variables_evo" :lista='$variables' selected="1-15" cliente='$cliente'/>

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

            <x-selector-generico id="f_tmp_evo2" idselect="f_tmp_evo" :salida="$periodo" class="selector-generico" style="width: 120px" selected="mes">
                <x-slot name="texto">
                    {{__('messages.selector-generico-texto-periodo')}}
                </x-slot>
            </x-selector-generico>
            <x-selector-dias idpadre="evo" style="display:none;"/>
            
            <!--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">
                <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">
                <x-slot name="texto">
                    {{__('messages.selector-semanas-meses-texto-hasta')}}
                </x-slot>
            </x-selector-meses>

            <x-selector-fiscal id="fltr_fye_evo" idselect="f_fye_evo_ini" :fiscal="$fiscal" class="fltr_periodo_evo" style="display: none;">
                <x-slot name="texto">
                    {{__('messages.selector-semanas-meses-texto-desde')}}
                </x-slot>
            </x-selector-fiscal>
            <x-selector-fiscal id="fltr_fye_evo2" idselect="f_fye_evo_fin" :fiscal="$fiscal" class="fltr_periodo_evo" style="display: none;">
                <x-slot name="texto">
                    {{__('messages.selector-semanas-meses-texto-hasta')}}
                </x-slot>
            </x-selector-fiscal>

            <x-selector-trimestref id="fltr_trif_evo" idselect="f_trif_evo_ini" :trimestref="$trimestref" class="fltr_periodo_evo" style="display:none;">
                <x-slot name="texto">
                    {{__('messages.selector-semanas-meses-texto-desde')}}
                </x-slot>
            </x-selector-trimestref>
            <x-selector-trimestref id="fltr_trif_evo2" idselect="f_trif_evo_fin" :trimestref="$trimestref" class="fltr_periodo_evo" style="display:none;">
                <x-slot name="texto">
                    {{__('messages.selector-semanas-meses-texto-hasta')}}
                </x-slot>
            </x-selector-trimestref>

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

            <x-infobox tamano="25px" texto="" modal="tabla_evo"/>
            <div class="modal fade bd-example-modal-lg" id="tabla_evo" 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 Cobertura Evolución</h5>     
                        </div>
                        <div class="text-center">
                            <img src="{{asset('images/cobertura_tabla_evolucion.png')}}" class="img-fluid" alt="Responsive image">
                        </div>
                        <p><b>Explicación:</b> La tabla muestra la variedad de clientes (de manera numérica o porcentual) que realizaron compras positivas de unidades durante los periodos seleccionados</p>
                        <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 Holding:</b> Filtra por un holding único.</li>
                            <li><b>Selector Salida:</b> Define la salida de la tabla, pudiendo ser numérica o porcentual (el porcentaje es el numérico de la celda * 100 / variedad de clientes del periodo).</li>
                            <li><b>Selector Tipo Periodo:</b> Definir el tipo de periodo por el cual se desglosa y 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>Exportar:</b> Descargar datos de las tabla.</p>
                    </div>
                </div>
            </div>
        </x-tabla>
        @php $display_tabla = 'display: none;'; @endphp
    @endif

    @if(isset($selectores_tabla['matri']))
        <x-tabla id="matri" style="height: 600px !important; {{$display_tabla}}" :filtros="$filtros" :filtrosAv="$filtrosAv" :filtrosAvAlias="$filtrosAvAlias">
            <x-selector-variable id="variables_matri1" :lista='$variables' selected="1-6" cliente='$cliente'>
                <x-slot name="titulo">
                    {{__('messages.selector-variable-texto-fila')}}
                </x-slot>
            </x-selector-variable>
            <x-selector-variable id="variables_matri2" :lista='$variables' selected="2-0" cliente='$cliente'>
                <x-slot name="titulo">
                    {{__('messages.selector-variable-texto-columna')}}
                </x-slot>
            </x-selector-variable>
            
            <x-selector-generico id="salida_matri2" idselect="salida_matri" :salida="$salida_matri"  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_tmp_matri2" idselect="f_tmp_matri" :salida="$periodo_matri"  class="selector-generico" style="width: 120px" selected="mes">
                <x-slot name="texto">
                    {{__('messages.selector-generico-texto-periodo')}}
                </x-slot>
            </x-selector-generico>

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

            <!--EVOLUTVO SEMANA-->
            <x-selector-semanas id="fltr_sem_matri" idselect="f_sem_matri_ini" :semanas="$semanas"  class="fltr_periodo_matri" style="display: none;">
                <x-slot name="texto">
                    {{__('messages.selector-semanas-meses-texto-desde')}}
                </x-slot>
            </x-selector-semanas>
            <x-selector-semanas id="fltr_sem_matri2" idselect="f_sem_matri_fin" :semanas="$semanas" class="fltr_periodo_matri" style="display: none;">
                <x-slot name="texto">
                    {{__('messages.selector-semanas-meses-texto-hasta')}}
                </x-slot>
            </x-selector-semanas>
            <!--EVOLUTVO MES-->
            <x-selector-meses id="fltr_mes_matri" idselect="f_mes_matri_ini" :meses="$meses" class="fltr_periodo_matri">
                <x-slot name="texto">
                    {{__('messages.selector-semanas-meses-texto-desde')}}
                </x-slot>
            </x-selector-meses>
            <x-selector-meses id="fltr_mes_matri2" idselect="f_mes_matri_fin" :meses="$meses" class="fltr_periodo_matri">
                <x-slot name="texto">
                    {{__('messages.selector-semanas-meses-texto-hasta')}}
                </x-slot>
            </x-selector-meses>

            <x-selector-fiscal id="fltr_fye_matri" idselect="f_fye_matri_ini" :fiscal="$fiscal" class="fltr_periodo_matri" style="display: none;">
                <x-slot name="texto">
                    {{__('messages.selector-semanas-meses-texto-desde')}}
                </x-slot>
            </x-selector-fiscal>
            <x-selector-fiscal id="fltr_fye_matri2" idselect="f_fye_matri_fin" :fiscal="$fiscal" class="fltr_periodo_matri" style="display: none;">
                <x-slot name="texto">
                    {{__('messages.selector-semanas-meses-texto-hasta')}}
                </x-slot>
            </x-selector-fiscal>

            <x-selector-trimestref id="fltr_trif_matri" idselect="f_trif_matri_ini" :trimestref="$trimestref" class="fltr_periodo_matri" style="display:none;">
                <x-slot name="texto">
                    {{__('messages.selector-semanas-meses-texto-desde')}}
                </x-slot>
            </x-selector-trimestref>
            <x-selector-trimestref id="fltr_trif_matri2" idselect="f_trif_matri_fin" :trimestref="$trimestref" class="fltr_periodo_matri" style="display:none;">
                <x-slot name="texto">
                    {{__('messages.selector-semanas-meses-texto-hasta')}}
                </x-slot>
            </x-selector-trimestref>

            <!--AÑO-->
            <div id="fltr_year_matri" style="width:100px;display:none;" class="fltr_periodo_matri col-lg-2 col-md-4 col-sm-6 col-xs-12 obj_filtro form-group">
                <div style="text-align:center; font-size: 1.0em;color:#566573">
                    {{__('messages.selector-semanas-meses-texto-desde')}}
                </div>
                <label class="w-100">
                    <select id="f_year_matri_ini" name="f_year_matri_ini" class="flt form-control select2 " data-toggle="select2" width="100%">
                        <option value="{{date("Y")."01"-100}}">{{date("Y")-1}}</option>
                        <option value="{{date("Y")."01"}}">{{date("Y")}}</option>
                    </select>
                </label>
            </div>
            <div id="fltr_year_matri2" style="width:100px;display:none;" class="fltr_periodo_matri col-lg-2 col-md-4 col-sm-6 col-xs-12 obj_filtro form-group">
                <div style="text-align:center; font-size: 1.0em;color:#566573">
                    {{__('messages.selector-semanas-meses-texto-hasta')}}
                </div>
                <label class="w-100">
                    <select id="f_year_matri_fin" name="f_year_matri_fin" class="flt form-control select2 " data-toggle="select2" width="100%">
                        <option value="{{date("Y")-1}}53">{{date("Y")-1}}</option>
                        <option value="{{date("Y")}}53">{{date("Y")}}</option>
                    </select>
                </label>
            </div>
            {{-- Este selector solo aparece cuando se seleciona tienda/store en la tabla matriz --}}
            <x-selector-generico2 id="f_orden_locales2" idselect="f_orden_locales" :salida="$locales" class="selector-generico d-none" style="max-width: 200px; min-width: 100px;">
                <x-slot name="texto">
                    Rango de Locales por Ventas
                </x-slot>
            </x-selector-generico>
            <x-boton-actualizar onclick="getMatriCoberturaTrad('{{$cliente}}', 'ventas');"/>
            <x-infobox tamano="25px" texto="{{__('messages.texto-infobox')}}" modal="tabla_matriz_modal"/>
            <div class="modal fade bd-example-modal-lg" id="tabla_matriz_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 Matriz</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 Filas:</b> Definir Variable en filas de la tabla.</li>
                            <li><b>Selector Variable Columnas:</b> Definir Variable en columnas de la tabla.</li>
                            <li><b>Selector Valor Salida:</b> Seleccionar tipo de unidad sobre la que se consulta.</li>
                            <li><b>Selector Pareto:</b> Definir la distribución de los datos.
                                <ul style="list-style-type: circle;">
                                    <li><b>80 / 20:</b> Mayores valores que acumulan el 80%.</li>
                                    <li><b>20 / 80:</b> Menores valores que acumulan el 20%,</li>
                                    <li><b>Todos:</b> Todos los valores.</li>
                                </ul>
                            </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 MFF:</b> Filtrar por MFF.</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-tabla>
        @php $display_tabla = 'display: none;'; @endphp
    @endif

    @if(isset($selectores_tabla['comp']))
        <x-tabla id="comp" style="height: 600px !important; {{$display_tabla}}" :filtros="$filtros2" :filtrosAv="$filtrosAv" :filtrosAvAlias="$filtrosAvAlias">
            <x-selector-generico id="f_clienteunico_comp2" idselect="f_clienteunico_comp" :salida="$holding_trad" class="selector-generico" style="width: 120px" >
                <x-slot name="texto">
                    {{__('messages.var-holding')}}
                </x-slot>
            </x-selector-generico>

            <x-selector-variable id="variables_comp" :lista='$variables' selected="1-15" cliente='$cliente'/>
            
            <x-selector-generico id="f_tmp_comp2" idselect="f_tmp_comp" :salida="$periodo_comp"  class="selector-generico" style="width: 120px;" selected="mes">
                <x-slot name="texto" >
                    {{__('messages.selector-generico-texto-periodo')}}
                </x-slot>
            </x-selector-generico>

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

            <x-selector-fiscal id="fltr_fye_comp" idselect="f_fye_comp_ini" :fiscal="$fiscal" class="fltr_periodo_comp" style="display: none;">
                <x-slot name="texto">
                    {{__('messages.selector-semanas-meses-texto-desde')}} Primer Periodo
                </x-slot>
            </x-selector-fiscal>
            <x-selector-fiscal id="fltr_fye_comp2" idselect="f_fye_comp_fin" :fiscal="$fiscal" class="fltr_periodo_comp" style="display: none;">
                <x-slot name="texto">
                    {{__('messages.selector-semanas-meses-texto-hasta')}} Primer Periodo
                </x-slot>
            </x-selector-fiscal>

            <x-selector-trimestref id="fltr_trif_comp" idselect="f_trif_comp_ini" :trimestref="$trimestref" class="fltr_periodo_comp" style="display:none;">
                <x-slot name="texto">
                    {{__('messages.selector-semanas-meses-texto-desde')}} Primer Periodo
                </x-slot>
            </x-selector-trimestref>
            <x-selector-trimestref id="fltr_trif_comp2" idselect="f_trif_comp_fin" :trimestref="$trimestref" class="fltr_periodo_comp" style="display:none;">
                <x-slot name="texto">
                    {{__('messages.selector-semanas-meses-texto-hasta')}} Primer Periodo
                </x-slot>
            </x-selector-trimestref>

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

            @if(in_array($cliente, $arr_dos_periodos))
                <x-selector-semanas id="fltr_sem_compf" idselect="f_sem_compf_ini" :semanas="$semanas" class="fltr_periodo_compf" style="display: none;">
                    <x-slot name="texto">
                        {{__('messages.selector-semanas-meses-texto-desde')}} Segundo Periodo
                    </x-slot>
                </x-selector-semanas>
                <x-selector-semanas id="fltr_sem_compf2" idselect="f_sem_compf_fin" :semanas="$semanas" class="fltr_periodo_compf" style="display: none;">
                    <x-slot name="texto">
                        {{__('messages.selector-semanas-meses-texto-hasta')}} Segundo Periodo
                    </x-slot>
                </x-selector-semanas>
                <x-selector-meses id="fltr_mes_compf" idselect="f_mes_compf_ini" :meses="$meses" class="fltr_periodo_compf">
                    <x-slot name="texto">
                        {{__('messages.selector-semanas-meses-texto-desde')}} Segundo Periodo
                    </x-slot>
                </x-selector-meses>
                <x-selector-meses id="fltr_mes_compf2" idselect="f_mes_compf_fin" :meses="$meses" class="fltr_periodo_compf">
                    <x-slot name="texto">
                        {{__('messages.selector-semanas-meses-texto-hasta')}} Segundo Periodo
                    </x-slot>
                </x-selector-meses>

                <x-selector-fiscal id="fltr_fye_compf" idselect="f_fye_compf_ini" :fiscal="$fiscal" class="fltr_periodo_compf" style="display: none;">
                    <x-slot name="texto">
                        {{__('messages.selector-semanas-meses-texto-desde')}} Segundo Periodo
                    </x-slot>
                </x-selector-fiscal>
                <x-selector-fiscal id="fltr_fye_compf2" idselect="f_fye_compf_fin" :fiscal="$fiscal" class="fltr_periodo_compf" style="display: none;">
                    <x-slot name="texto">
                        {{__('messages.selector-semanas-meses-texto-hasta')}} Segundo Periodo
                    </x-slot>
                </x-selector-fiscal>

                <x-selector-trimestref id="fltr_trif_compf" idselect="f_trif_compf_ini" :trimestref="$trimestref" class="fltr_periodo_compf" style="display:none;">
                    <x-slot name="texto">
                        {{__('messages.selector-semanas-meses-texto-desde')}} Segundo Periodo
                    </x-slot>
                </x-selector-trimestref>
                <x-selector-trimestref id="fltr_trif_compf2" idselect="f_trif_compf_fin" :trimestref="$trimestref" class="fltr_periodo_compf" style="display:none;">
                    <x-slot name="texto">
                        {{__('messages.selector-semanas-meses-texto-hasta')}} Segundo Periodo
                    </x-slot>
                </x-selector-trimestref>

                <x-selector-dias idpadre="compf" style="display: none;"/>
            @endif
            
            <x-boton-actualizar onclick="getCoberturaCompTrad('{{$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-tabla>
        @php $display_tabla = ' display: none;'; @endphp
    @endif

@endsection
@endif

@section('js_aft')
    <script>
        var cliente_ = "{{$cliente}}";

        ids = ['evo', 'grafevo', 'matri', 'comp'];

        $(document).ready(() => {
            ids.forEach(function(item){
                if($('#'+item).length > 0 && $('#f_favoritos_'+item).length > 0) cargarFavoritos(item);
            });
            
            let filtros = ['categorias', 'kam', 'subcategoria', 'producto_sku_prov'];
            for(let filtro of filtros) {
                for(let id of ids) {
                    multiSelect(filtro, id, "{{__('messages.seleccionar')}}");
                }
            }

            ['#variables_evo', '#variables_comp'].forEach(function(element){
                $(element).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: moment((new Date()).setDate(ahora.getDate()-1))
            };

            ['#f_dia_evo_ini', '#f_dia_matri_ini', '#f_dia_comp_ini', '#f_dia_grafevo_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");
                if(macroTmp == 'comp'){
                    var macroTmp2 = macroTmp+'f';
                    $(".fltr_periodo_" + macroTmp2).css("display","none");
                    $("#fltr_"+tmp+"_" + macroTmp2).css("display","inline-block");
                    $("#fltr_"+tmp+"_" + macroTmp2 + "2").css("display","inline-block");
                    $("#fltr_"+tmp+"_" + macroTmp2 + "3").css("display","inline-block");
                }
            });

            if(cliente_ == 'clorox'){
                $('#f_mes_comp_fin').val({{date('Ym')}}).change();

                $('#f_tmp_comp').val('mes').change();

                if(('#comp').length > 0){
                    $('#f_mes_comp_ini').val($('#f_mes_comp_fin').val()).change();
                    $('#f_mes_compf_ini').val($('#f_mes_compf_fin').val()).change();
                    $('#f_sem_comp_ini').val($('#f_sem_comp_fin').val()).change();
                    $('#f_sem_compf_ini').val($('#f_sem_compf_fin').val()).change();
                    $('#f_trif_comp_ini').val($('#f_trif_comp_fin').val()).change();
                    $('#f_trif_compf_ini').val($('#f_trif_compf_fin').val()).change();
                    $('#f_fye_comp_ini').val($('#f_fye_comp_fin').val()).change();
                    $('#f_fye_compf_ini').val($('#f_fye_compf_fin').val()).change();

                    var configDateComp = congifDate;
                    configDateComp['minDate'] = moment((new Date()).setDate(ahora.getDate()-730));
                    configDateComp['startDate'] = moment((new Date()).setDate(ahora.getDate()-387));
                    configDateComp['endDate'] = moment((new Date()).setDate(ahora.getDate()-367))
                    $('#f_dia_compf_ini').daterangepicker(configDateComp);

                    $('#f_mes_compf_ini').val($('#f_mes_comp_ini').val() - 100).change();
                    $('#f_mes_compf_fin').val($('#f_mes_comp_fin').val() - 100).change();

                    $('#f_sem_compf_ini').val($('#f_sem_comp_ini').val() - 100).change();
                    $('#f_sem_compf_fin').val($('#f_sem_comp_fin').val() - 100).change();

                    $('#f_trif_compf_ini').val($('#f_trif_comp_ini').val() - 100).change();
                    $('#f_trif_compf_fin').val($('#f_trif_comp_fin').val() - 100).change();

                    $('#f_fye_compf_ini').val($('#f_fye_comp_ini').val() - 100).change();
                    $('#f_fye_compf_fin').val($('#f_fye_comp_fin').val() - 100).change();
                }
            }
        });

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

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

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