@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);

        $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 = 2;


        $salida = json_encode(["2"=> __('messages.ventas'), "1" => __('messages.unidades'), "3" => __('messages.costo')]);
     
   

      
        $periodo = json_encode(["dia"=> __('messages.dias'), "sem" => __('messages.semanas'), "mes" => __('messages.meses')]);
    
       
        $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'))]);
    
        $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;
            }
        }

   
 
   
  
        //dd($mesesComp);
        $selector_usuarios = json_encode($usuarios);
        $selector_tmp = json_encode($tmp);
        $selector_salas_visitadas = json_encode(["1"=> "Si"]);
        $selector_gps = json_encode($gps);
        
    @endphp
@endsection
@section('grafico')
        {{-- @if(isset($selectores_grafico['grafevo']))
        <x-grafico id="grafevo" style="height: 450px !important;" >
            <x-selector-variable id="variables_grafevo" :lista='$variables' selected="2-5" cliente='$cliente'/>

            <x-selector-generico id="salida_grafevo2" idselect="salida_grafevo" :salida="$salida"  class="selector-generico" style="width: 110px">
                <x-slot name="texto">
                    {{__('messages.selector-generico-texto-valor')}}
                </x-slot>
            </x-selector-generico>
            @if ($cliente == 'colgate' || $cliente == 'bless')
                <x-selector-generico id="f_tmp_grafevo2" idselect="f_tmp_grafevo" :salida="$periodo"  class="selector-generico" style="width: 90px" selected="mes">
                    <x-slot name="texto">
                        {{__('messages.selector-generico-texto-periodo')}}
                    </x-slot>
                </x-selector-generico>
            @else
                <x-selector-generico id="f_tmp_grafevo2" idselect="f_tmp_grafevo" :salida="$periodo"  class="selector-generico" style="width: 90px" selected="dia">
                    <x-slot name="texto">
                        {{__('messages.selector-generico-texto-periodo')}}
                    </x-slot>
                </x-selector-generico>
            @endif
            @if ($cliente == 'colgate' || $cliente == 'bless')
            <x-selector-dias idpadre="grafevo" style="display: none;"/>
            <!--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>
            @else
            <x-selector-dias idpadre="grafevo"/>
            <!--EVOLUTVO MES-->
            <x-selector-meses id="fltr_mes_grafevo" idselect="f_mes_grafevo_ini" :meses="$meses" class="fltr_periodo_grafevo" style="display: none;">
                <x-slot name="texto">
                    {{__('messages.selector-semanas-meses-texto-desde')}}
                </x-slot>
            </x-selector-meses>
            <x-selector-meses id="fltr_mes_grafevo2" idselect="f_mes_grafevo_fin" :meses="$meses" class="fltr_periodo_grafevo" style="display: none;">
                <x-slot name="texto">
                    {{__('messages.selector-semanas-meses-texto-hasta')}}
                </x-slot>
            </x-selector-meses>
            @endif
            <!--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>
            <!--AÑO-->
            <div id="fltr_year_grafevo" style="width:100px;display:none;" class="fltr_periodo_grafevo 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_grafevo_ini" name="f_year_grafevo_ini" class="flt form-control select2 " data-toggle="select2" width="100%">
                        <option value="202001">2020</option>
                        <option value="202101">2021</option>
                    </select>
                </label>
            </div>
            <div id="fltr_year_grafevo2" style="width:100px;display:none;" class="fltr_periodo_grafevo 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_grafevo_fin" name="f_year_grafevo_fin" class="flt form-control select2 " data-toggle="select2" width="100%">
                        <option value="202053">2020</option>
                        <option value="202153">2021</option>
                    </select>
                </label>
            </div>

            <x-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="getGrafEvo('{{$cliente}}', 'accesoMovil');"/> 

            <x-infobox tamano="25px" texto="" modal="grafico_evolutivo_modal"/>
            <div class="modal fade bd-example-modal-lg" id="grafico_evolutivo_modal" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
                <div class="modal-dialog modal-lg">
                    <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="">Gráfico Evolutivo</h5>     
                    </div>
                        <div class="text-center">
                            <img src="{{asset('images/ventas_grafico_evolutivo.png')}}" class="img-fluid" alt="Responsive image">
                        </div>
                        <!-- add div for text -->
                        <p><b>Consultas sobre el gráfico:</b> Para utilizar el gráfico; definir los parámetros en los selectores y presionar "Actualizar".</p>
                        <ul>
                            <li><b>Selector Variable:</b> Definir Variable a representar en el gráfico.</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>
                            <li><b>Selector Tipo gráfico:</b> Define el diseño del gráfico para representar los datos.</li>
                        </ul>
                        <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 una imagen del gráfico.</p>
                    </div>
                </div>
            </div>
            <!--
            <div class="notification-list col-md-auto obj_filtro form-group ms-auto">
                <div class="nav-link end-bar-toggle d-flex align-items-center" href="javascript: void(0);" 
                style="padding: 0rem 1rem; color: #566573; height: 48px;" onclick="filtrosCubo(this, 'grafevo')">
                    <i class="fas fa-filter"></i>
                </div>
            </div>
            -->
            

            
            <div class="w-100 justify-content-center" id="f_carga_grafevo" style="height: 450px; display: none;">
                <img src="{{asset('images/preloader_pie.gif')}}" style="width: 60px; height: 60px;" class="align-self-center">
            </div>
        </x-grafico>
        @php $display_grafico = 'display: none;'; @endphp
        @endif --}}
    
@endsection
@section('tabla')
    @if(isset($selectores_tabla['acceso_movil']))

        <div style="background-color: white;padding: 10px;" class="row">

            <x-tabla id="acceso_movil" >

                <x-filtro id="f_clientes_acceso_movil" :lista="$clientes" style="max-width: 120px;min-width: 120px;width: 120px;" class="">
                    <x-slot name="texto">
                        {{__('messages.filtro-texto-cliente')}}
                    </x-slot>
                </x-filtro>
        
                <x-selector-generico selected="Todos" :salida="$selector_usuarios" id="f_usuarios_acceso_movil2" idselect="f_usuarios_acceso_movil" style="max-width: 245px;min-width: 245;width: 245;" class=""  >
                    <x-slot name="texto">
                        Usuarios
                    </x-slot>
                </x-selector-generico>
                
                <x-selector-generico selected="mec" :salida="$selector_tmp" id="f_tmp_acceso_movil2" idselect="f_tmp_acceso_movil" style="max-width: 120px;min-width: 120;width: 120;" class=""  >
                    <x-slot name="texto">
                        Temporalidad
                    </x-slot>
                </x-selector-generico>
        
                <x-selector-generico selected="all" :salida="$selector_salas_visitadas" id="f_salas_visitadas_acceso_movil2" idselect="f_salas_visitadas_acceso_movil" style="max-width: 80px;min-width: 80;width: 80;" class="" >
                    <x-slot name="texto">
                        Salas Visitadas
                    </x-slot>
                </x-selector-generico>
        
                <x-selector-generico selected="0" :salida="$selector_gps" id="f_gps_acceso_movil2" idselect="f_gps_acceso_movil" style="max-width: 80px;min-width: 80;width: 80;" class=""  >
                    <x-slot name="texto">
                        GPS
                    </x-slot>
                </x-selector-generico>
            
                <x-boton-actualizar onclick="getAccesoMovil('{{$cliente}}', 'accesoMovil');"/>
            </x-tabla>
            
        </div>
    @endif


@endsection



@section('js_aft')
    <script>
            let ids = [ 'grafevo', 'acceso_movil'];

        $(document).ready(() => {
            let filtros = ['clientes', 'categorias', 'kam', 'canal', 'cadena', 'formato', 'local', 'region', 'supervisor',
            'ciudad', 'comuna', 'zona', 'reponedor', 'vendedor', 'marca', 'subcategoria', 'familia', 'estado', 'producto'];
            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
            };
         
            congifDate2 = congifDate;
            congifDate2.startDate = moment((new Date()).setDate(ahora.getDate()-15));
            ["#f_dia_grafevo_ini"].forEach((selector, i) => {
                $(selector).daterangepicker(congifDate2);
            });


            for(let filtro of filtros) {
                for(let id of ids) {
                    $(`#f_${filtro}_${id}`).select2MultiCheckboxes({
                        closeOnSelect:false,
                        multiple: true,
                        placeholder: `{{__('messages.seleccionar')}} ${filtro.replace(/^\w/, c => c.toUpperCase())}`,
                        width: "120",
                        templateSelection: function(selected, total) {
                            return selected.length + " de " + total + " total";
                        }
                    });
                    $(`#f_${filtro}_${id}`).find('option').prop("selected", false);
                    $(`#f_${filtro}_${id}`).trigger('change');
                }
            }
            $('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");
            });
           
            $(".navbar-1100").css("border-style","solid");
            $(".navbar-1100").css("border-left","0px");
            $(".navbar-1100").css("border-color","#57775F");
            $(".navbar-1100").css("background-color","#57775F");

           
            
        });
    </script>
@endsection