@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');
        $yearAct = date('Y');
        $yearAnt = date('Y') - 1;
        $yearAnt2 = date('Y') - 2;
        

        $display = 'block';
        $display_ = 'none';
        foreach ($meses as $value) {
            list($_mes, $_year) = explode(' ', $value->nombre);
            if($_year == $yearAct || $_year == $yearAnt || $_year == $yearAnt2) {
                $mesesComp []= $value;
            }
        }
        
        $periodo = json_encode(['sem' => __('messages.semanas'), 'mes' => __('messages.meses')]);

        $salida = json_encode(['0' => 'Todos', '1' => 'Cajas Entregadas(u)', '2' => 'Cajas No Entregadas (u)', '3' => 'Fill Rate %']);
        $salidaFR = json_encode(['unidades' => 'Unidades (U)', 'cajas' => 'Cajas', 'valorado' => 'Valorado $']);

        if(in_array($cliente, ['mdlzcolombia'])){
            $salidaFR = json_encode(['unidades' => 'Unidades (U)', 'valorado' => 'Valorado $']);
        }else if(in_array($cliente, ['mdlzcostarica', 'mdlzguatemala', 'mdlzhonduras', 'mdlznicaragua', 'mdlzsalvador'])){
            $salidaFR = json_encode(['unidades' => 'Unidades (U)', 'cajas' => 'Cajas']);
        }else if(in_array($cliente, ['mdlzperu'])){
            $salidaFR = json_encode(['unidades' => 'Unidades (U)']);
        }

        // $salida = json_encode(['0' => 'Cajas', '1' => 'Unidades (U)']);

        $tipoStock = json_encode(['1' => __('messages.catalogado'), '0' => __('messages.no-catalogado'), '2' => __('messages.no-informado'), '' => __('messages.todos')]);
        $tipoStock2 = json_encode(['1' => __('messages.catalogado'), '0' => __('messages.no-catalogado')]);

        $locales_filtrosAv = ['cadena', 'canal', 'ciudad', 'comuna', 'local', 'region', 'reponedor', 'supervisor', 'vendedor', 'zona', 'cod_prov', 'formato', 'estatus', 'kam', 'clientes'];
        $filtrosAv2 = $filtrosAv;
        foreach($locales_filtrosAv as $key_filtro){
            unset($filtrosAv2[$key_filtro]);
        }

        $variables = ["Productos" => ['1-11' => 'Linea']];
        $salida_octabla = json_encode(['2' => 'Solicitados', '1' => 'Recibidos', '3' => 'Fillrate']);

        $display_grafico = '';
        $display_tabla = '';
        $filtros2 = ['categorias' => []];
    @endphp
@endsection


@if(count($selectores_grafico)>0)
    @section('grafico')
        @if(isset($selectores_grafico['evofr']))
            <x-grafico id="evofr" style="max-height: 450px !important; {{$display_grafico}}" :filtros="$filtros" :filtrosAv="$filtrosAv" :filtrosAvAlias="$filtrosAvAlias">
                <x-selector-generico id="salida_evofr2" idselect="salida_evofr" :salida="$salida"  class="selector-generico d-none" style="width: 120px">
                    <x-slot name="texto">
                        Salida
                    </x-slot>
                </x-selector-generico>

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

                <!--EVOLUTVO SEMANA-->
                <x-selector-semanas id="fltr_sem_evofr" idselect="f_sem_evofr_ini" :semanas="$semanas"  class="fltr_periodo_evofr" style="display: none;">
                    <x-slot name="texto">
                        {{__('messages.selector-semanas-meses-texto-desde')}}
                    </x-slot>
                </x-selector-semanas>
                <x-selector-semanas id="fltr_sem_evofr2" idselect="f_sem_evofr_fin" :semanas="$semanas" class="fltr_periodo_evofr" 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_evofr" idselect="f_mes_evofr_ini" :meses="$mesesComp" class="fltr_periodo_evofr">
                    <x-slot name="texto">
                        {{__('messages.selector-semanas-meses-texto-desde')}}
                    </x-slot>
                </x-selector-meses>
                <x-selector-meses id="fltr_mes_evofr2" idselect="f_mes_evofr_fin" :meses="$mesesComp" class="fltr_periodo_evofr">
                    <x-slot name="texto">
                        {{__('messages.selector-semanas-meses-texto-hasta')}}
                    </x-slot>
                </x-selector-meses>
                
                
                <x-boton-actualizar onclick="getevofr('{{$cliente}}')"/>

            </x-grafico>
            @php $display_grafico = 'display: none;'; @endphp
        @endif

        @if(isset($selectores_grafico['grafevofr']))
            <x-grafico id="grafevofr" style="max-height: 450px !important; {{$display_grafico}}" :filtros="$filtros" :filtrosAv="$filtrosAv" :filtrosAvAlias="$filtrosAvAlias">
                <x-selector-generico id="salida_grafevofr2" idselect="salida_grafevofr" :salida="$salidaFR"  class="selector-generico" style="width: 120px">
                    <x-slot name="texto">
                        Salida
                    </x-slot>
                </x-selector-generico>

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

                <!--EVOLUTVO SEMANA-->
                <x-selector-semanas id="fltr_sem_grafevofr" idselect="f_sem_grafevofr_ini" :semanas="$semanas"  class="fltr_periodo_grafevofr" style="display: none;">
                    <x-slot name="texto">
                        {{__('messages.selector-semanas-meses-texto-desde')}}
                    </x-slot>
                </x-selector-semanas>
                <x-selector-semanas id="fltr_sem_grafevofr2" idselect="f_sem_grafevofr_fin" :semanas="$semanas" class="fltr_periodo_grafevofr" 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_grafevofr" idselect="f_mes_grafevofr_ini" :meses="$mesesComp" class="fltr_periodo_grafevofr">
                    <x-slot name="texto">
                        {{__('messages.selector-semanas-meses-texto-desde')}}
                    </x-slot>
                </x-selector-meses>
                <x-selector-meses id="fltr_mes_grafevofr2" idselect="f_mes_grafevofr_fin" :meses="$mesesComp" class="fltr_periodo_grafevofr">
                    <x-slot name="texto">
                        {{__('messages.selector-semanas-meses-texto-hasta')}}
                    </x-slot>
                </x-selector-meses>
                
                
                <x-boton-actualizar onclick="getGrafEvoFR('{{$cliente}}')"/>

            </x-grafico>
            @php $display_grafico = 'display: none;'; @endphp
        @endif
    @endsection
@endif

@if(count($selectores_tabla)>0)
@section('tabla')
    @if(isset($selectores_tabla['matrizfr']))
        <x-tabla id="matrizfr" style="height: 600px !important; {{$display_tabla}}" :filtros="$filtros2" :filtrosAv="$filtrosAv2" :filtrosAvAlias="$filtrosAvAlias">
            <x-selector-generico id="catalogado_matrizfr2" idselect="catalogado_matrizfr" :salida="$tipoStock"  class="selector-generico d-none" style="width: 120px">
                <x-slot name="texto">
                    Tipo Stock
                </x-slot>
            </x-selector-generico>
            <x-selector-semanas id="fltr_sem_matrizfr" idselect="f_sem_matrizfr_ini" :semanas="$semanas" class="fltr_periodo_matrizfr" style="display: none;">
                <x-slot name="texto">
                    {{__('messages.selector-semanas-meses-texto-desde')}}
                </x-slot>
            </x-selector-semanas>
            <x-selector-semanas id="fltr_sem_matrizfr2" idselect="f_sem_matrizfr_fin" :semanas="$semanas"  class="fltr_periodo_matrizfr">
                <x-slot name="texto">
                    {{__('messages.selector-semanas-meses-texto-hasta')}}
                </x-slot>
            </x-selector-semanas>

            <x-boton-actualizar onclick="getmatrizfr('{{$cliente}}')"/>
        </x-tabla>
        @php $display_tabla = ' display: none;'; @endphp
    @endif
    @if(isset($selectores_tabla['variacfr']))
        <x-tabla id="variacfr" style="height: 600px !important; {{$display_tabla}}" :filtros="$filtros2" :filtrosAv="$filtrosAv2" :filtrosAvAlias="$filtrosAvAlias">
            <x-selector-generico id="catalogado_variacfr2" idselect="catalogado_variacfr" :salida="$tipoStock"  class="selector-generico d-none" style="width: 120px">
                <x-slot name="texto">
                    Tipo Stock
                </x-slot>
            </x-selector-generico>
            <x-selector-semanas id="fltr_sem_variacfr" idselect="f_sem_variacfr_ini" :semanas="$semanas" class="fltr_periodo_variacfr" style="display: none;">
                <x-slot name="texto">
                    {{__('messages.selector-semanas-meses-texto-desde')}}
                </x-slot>
            </x-selector-semanas>
            <x-selector-semanas id="fltr_sem_variacfr2" idselect="f_sem_variacfr_fin" :semanas="$semanas"  class="fltr_periodo_variacfr">
                <x-slot name="texto">
                    {{__('messages.selector-semanas-meses-texto-hasta')}}
                </x-slot>
            </x-selector-semanas>

            <x-boton-actualizar onclick="getvariacfr('{{$cliente}}')"/>
        </x-tabla>
        @php $display_tabla = ' display: none;'; @endphp
    @endif

    @if(isset($selectores_tabla['octabla']))
        <x-tabla id="octabla" style="height: 600px !important;  {{$display_tabla}}" :filtrosAv="$filtrosAv" :filtrosAvAlias="$filtrosAvAlias"> 
            
            <x-selector-generico id="salida_octabla" idselect="octabla_salida" :salida="$salida_octabla"  class="selector-generico" style="width: 120px">
                <x-slot name="texto">
                    Salida
                </x-slot>
            </x-selector-generico>

            <x-selector-dias idpadre="octabla" />         
        
            <x-boton-actualizar onclick="getOC('{{$cliente}}', 'stocks')"/>

            <x-filtro id="f_clientes_octabla" :lista="$clientes" style="max-width: 120px;min-width: 120px;width: 120px;" class="ms-auto">
                <x-slot name="texto">
                    {{__('messages.filtro-texto-cliente')}}
                </x-slot>
            </x-filtro>
                
        </x-tabla>
        @php $display_tabla = 'display: none;'; @endphp
    @endif

   
@endsection
@endif

@section('right-bar')
    <div class="p-3 align-items-center flex-column d-none" id="f_grafmot">
        
    </div>
@endsection
@section('js_aft')
    <script>
        var cliente_ = "{{$cliente}}";
    
        let ids = ['evofr','matrizfr', 'variacfr', 'octabla', 'grafevofr'];

        let month = new Date().getFullYear() + '01';
        $('#f_mes_evofr_ini').val(month).change();

        var preSelectedRules = @json($preSelectedRules);

        $(document).ready(() => {
            ids.forEach(function(item){
                if($('#'+item).length > 0 && $('#f_favoritos_'+item).length > 0) cargarFavoritos(item);
            });

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

                    preSelectOptions(id, filtro, cliente_, preSelectedRules);
                }
            }

            $('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");
            });
            
            changeLastClosedWeek('f_sem_matrizfr_fin');
            changeLastClosedWeek('f_sem_variacfr_fin');

            function changeLastClosedWeek(id){
                var valor_actual = $('#'+id).val();
                var nuevo_valor = valor_actual - 1;
                if(nuevo_valor % 100 == 0){
                    nuevo_valor_aux = ((nuevo_valor/100)-1)*100+53;
                    if($("#"+id+"option[value='"+nuevo_valor_aux+"']").length == 0){ // No existe el 53
                        nuevo_valor_aux = ((nuevo_valor/100)-1)*100+52
                    }
                    nuevo_valor = nuevo_valor_aux;
                }
                $("#"+id).val(nuevo_valor).change();
            }

            let ahora = new Date();
            let dias = 7 ;
            let congifDate = {
                ...("{{config('app.locale')}}" == "es") && {
                    locale: {
                        format: 'YYYY/MM/DD',
                        daysOfWeek: ["Do", "Lu", "Ma", "Mi", "Ju", "Vi", "Sa"],
                        monthNames: ["Enero", "Febrero", "Marzo", "Abril",
                                    "Mayo", "Junio", "Julio", "Agosto",
                                    "Septiembre", "Octubre", "Noviembre", "Diciembre"],
                        applyLabel: "Aplicar",
                        cancelLabel: "Cancelar",
                        firstDay: 1
                    }
                },
                maxDate: moment(ahora),
                startDate: moment((new Date()).setDate(ahora.getDate()-dias)),
                endDate: ahora
            };

            $("#f_dia_octabla_ini").daterangepicker(congifDate);
        });

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

        filtrosPromise.then(function(resp){
            ponerFiltrosAv(resp);
        });
    </script>
@endsection