@extends('layouts.reporte')

@section('php')
    @php
        /*$selectores_tabla = ["mec" => 'MEC', 'ytd' => 'YTD', "metas"=>"Metas", "fore"=>"Forecast"];
        $selectores_grafico = ["grafIndices" => 'Indices', "grafEvo" =>__('messages.evolucion')];*/
        $cliente = config('app.CLIENTE');
        $yearAct = date('Y');
        $yearAnt = $yearAct - 1;
        $tipos_graficos = json_encode([ "msline" => "Líneas", "stackedcolumn2d" => (__('messages.selector-tipo-grafico-columnas-apiladas')),"mscolumn2d" => "Columnas agrupadas", "stackedbar2d" => "Barras apiladas"]);
        //$year = json_encode([$yearAct=>$yearAct, strval($yearAct-1) => $yearAct-1]);
        $year = json_encode([$yearAct=>$yearAct]);
        $variables_metas=[__('messages.grupo-Local') => $variables[__('messages.grupo-Local')]];

        $salida_default = json_encode(['2'=> __('messages.ventas')]);
        if(in_array($cliente, ['unibag', 'lesaffre', 'marvest'])){
            $salida_default = json_encode(['1' => __('messages.unidades')]);
        }else if(in_array($cliente, ['clorox'])){
            $salida_default = json_encode(['32' => __('messages.unidades')]);
        }else if($cliente == 'ducasse'){
            $salida_default = json_encode(['30' => __('messages.ventas')]);
        }else if(in_array($cliente, ['kunafoods'])){
            $salida_default = json_encode(['3' => __('messages.costo')]);
        }
       
      
        $tmp_marca = json_encode(['mec' => __('messages.mec'), 'mes' => __('messages.meses')]);

        $metas_sin_productos = ['clorox', 'canontex'];

        $mesesComp = $periodo_marca = [];
        foreach ($meses as $value) {
            list($_mes, $_year) = explode(' ', $value->nombre);
            if($_year == $yearAct || $_year == $yearAnt) {
                $mesesComp []= $value;
            }
            // dd($value->periodo);
            if($_year == $yearAct && $value->periodo < date('Ym')){
                $periodo_marca []=$value;
            }
        }
        // dd($periodo_marca);
        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='';
        }

        $filtros2 = $filtros;
        unset($filtros2['categorias']); unset($filtros2['subcategoria']); unset($filtros2['marca']); unset($filtros2['producto']); unset($filtros2['ean']); unset($filtros2['agrupacion']);
        if(in_array($cliente, $metas_sin_productos)){ // Estos clientes no tienen desglose de meta por producto, así que se caerán las ejecuciones si se conservan los parámetros
            $variables = $variables_metas;
            unset($filtros['categorias']); unset($filtros['subcategoria']); unset($filtros['marca']); unset($filtros['producto']); unset($filtros['ean']); unset($filtros['agrupacion']);
        }

        $display_grafico = '';
        $display_tabla = '';
        $true = true;

        $variables_metas_pormarca = $variables;
        unset($variables_metas_pormarca['Producto']['1-1']);
    @endphp
@endsection
@section('div_reportes')
    @php echo $div; @endphp
@endsection
@if(count($selectores_grafico)>0)
@section('grafico')
    @if(isset($selectores_grafico['grafIndices']))
        <x-grafico id="grafIndices" style="height: 450px !important; {{$display_grafico}}" :favoritosDisabled="$true">
            <x-selector-generico id="salida_grafIndices2" idselect="salida_grafIndices" :salida="$salida_default" class="selector-generico d-none" style="width: 120px;">
                <x-slot name="texto">
                    {{__('messages.selector-generico-texto-valor')}}
                </x-slot>
            </x-selector-generico>

            @if(in_array($cliente, ['maisa']))
                <x-filtro id="f_cadena_grafIndices" :lista="[]">
                    <x-slot name="texto">
                        {{__('messages.var-cadena')}}
                    </x-slot>
                </x-filtro>

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

                @if(!in_array($cliente, $metas_sin_productos))
                    <x-filtro id="f_categorias_grafIndices" :lista="$categorias" style="max-width: 120px;min-width: 120px;width: 120px;">
                        <x-slot name="texto">
                            @if($cliente == 'clorox') {{__('messages.MFF')}} @else {{__('messages.filtro-texto-categoria')}} @endif
                        </x-slot>
                    </x-filtro>
                @endif

                <x-filtro id="f_kam_grafIndices" :lista="$kam" style="max-width: 120px;min-width: 120px;width: 120px;">
                    <x-slot name="texto">
                        @if($cliente == 'clorox') {{__('messages.kas')}} @else {{__('messages.filtro-texto-kam')}} @endif
                    </x-slot>
                </x-filtro>
            @endif

            <x-boton-actualizar onclick="getGrafMetasIndices();"/>

            {{-- <div class="d-flex">
                <div style=" background-color: #FFFFFF; box-shadow: none; border: none" class=" col-xs-4 col-sm-4 col-md-4 col-lg-4">
                    <div id="metasMEC">
                    </div>
                </div>
                <div style=" background-color: #FFFFFF; box-shadow: none; border: none" class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
                    <div id="metasYTD">
                    </div>
                </div>
                <div style=" background-color: #FFFFFF; box-shadow: none; border: none" class=" col-xs-4 col-sm-4 col-md-4 col-lg-4">
                    <div id="AleVal">
                    </div>
                </div>
            </div> --}}
            @php
                $col_graficos = 'col-xs-12 col-sm-12 col-md-6 col-lg-6';
                if($cliente == 'grupomor') $col_graficos = 'col-xs-12 col-sm-12 col-md-4 col-lg-4';
            @endphp

            <div class="row" style="height:auto;margin-bottom: 10px;">
                <div class="{{$col_graficos}}" style="height:270px;background-color: #FFF">
                    <div id="metasMEC" style="margin:0px;padding-top:10px;background-color:#FFF;position:relative; height:270px;"></div>
                </div>
                <div class="{{$col_graficos}}" style="height:270px;background-color: #FFF">
                   <div id="metasYTD" style="margin:0px;padding-top:10px;background-color:#FFF;position:relative; height:270px;"></div> 
                </div>
            @if($cliente == 'grupomor')
                <div class="{{$col_graficos}}" style="height:270px;background-color: #FFF">
                    <div id="AleVal" style="margin:0px;padding-top:10px;background-color:#FFF;position:relative; height:270px;"></div>
                </div>
            @endif
                <!-- <div class="col-xs-12 col-sm-12 col-offset col-lg-2">
                    <div id="chart-otros"></div>
                </div> -->
            </div>
        </x-grafico>
        @php $display_grafico = 'display: none;'; @endphp
    @endif

    @if(isset($selectores_grafico['grafEvo']))
        <x-grafico id="grafEvo" style="height: 450px !important;  {{$display_grafico}}" :favoritosDisabled="$true">
            <x-selector-generico id="salida_grafEvo2" idselect="salida_grafEvo" :salida="$salida_default" class="selector-generico d-none" style="width: 120px;">
                <x-slot name="texto">
                    {{__('messages.selector-generico-texto-valor')}}
                </x-slot>
            </x-selector-generico>

            <x-filtro id="f_clientes_grafEvo" :lista="$clientes" style="max-width: 120px; min-width: 120px; width: 120px;">
                <x-slot name="texto">
                    @if($cliente != 'siksa'){{__('messages.filtro-texto-cliente')}}@else Cadena @endif
                </x-slot>
            </x-filtro>
            @if(!in_array($cliente, $metas_sin_productos))
                <x-filtro id="f_categorias_grafEvo" :lista="$categorias" style="max-width: 120px;min-width: 120px;width: 120px;">
                    <x-slot name="texto">
                        @if($cliente == 'clorox') {{__('messages.MFF')}} @else {{__('messages.filtro-texto-categoria')}} @endif
                    </x-slot>
                </x-filtro>
            @endif
            <x-filtro id="f_kam_grafEvo" :lista="$kam" style="max-width: 120px;min-width: 120px;width: 120px;">
                <x-slot name="texto">
                    @if($cliente == 'clorox') {{__('messages.kas')}} @else {{__('messages.filtro-texto-kam')}} @endif
                </x-slot>
            </x-filtro>

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


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

@if(count($selectores_tabla)>0)
@section('tabla')
    @if(isset($selectores_tabla['pormarca']))
        <x-tabla id="pormarca" style="height: 600px !important;  {{$display_tabla}}" :filtros="$filtros" :filtrosAvAlias="$filtrosAvAlias">
            <x-selector-generico id="salida_pormarca2" idselect="salida_pormarca" :salida="$salida_default" class="selector-generico d-none" style="width: 120px;">
                <x-slot name="texto">
                    {{__('messages.selector-generico-texto-valor')}}
                </x-slot>
            </x-selector-generico>

            <x-selector-variable id="variables_pormarca" :lista='$variables' selected="2-0" />

            <x-selector-generico id="f_tmp_pormarca2" idselect="f_tmp_pormarca" :salida="$tmp_marca"  class="selector-generico" style="width: 120px" selected="mec">
                <x-slot name="texto">
                    {{__('messages.selector-generico-texto-periodo')}}
                </x-slot>
            </x-selector-generico>
            <x-selector-meses id="fltr_mes_pormarca" idselect="f_mes_pormarca_ini" :meses="$periodo_marca" class="fltr_periodo_pormarca" style="display:none">
                <x-slot name="texto">
                    {{__('messages.selector-semanas-meses-texto-desde')}}
                </x-slot>
            </x-selector-meses>
            
            <x-boton-actualizar onclick="getMetasPorMarca('{{$cliente}}', 'metas');" />
        </x-tabla>
        @php $display_tabla = 'display: none;'; @endphp
    @endif
    @if(isset($selectores_tabla['mec']))
        <x-tabla id="mec" style="height: 600px !important;  {{$display_tabla}}" :filtros="$filtros" :filtrosAvAlias="$filtrosAvAlias">
            <x-selector-generico id="salida_mec2" idselect="salida_mec" :salida="$salida_default" class="selector-generico d-none" style="width: 120px;">
                <x-slot name="texto">
                    {{__('messages.selector-generico-texto-valor')}}
                </x-slot>
            </x-selector-generico>

            <x-selector-variable id="variables_mec" :lista='$variables' selected="2-0" />
            
            <x-boton-actualizar onclick="getMetasMEC('{{$cliente}}', 'metas');" />
        </x-tabla>
        @php $display_tabla = 'display: none;'; @endphp
    @endif

    @if(isset($selectores_tabla['ytd']))
        <x-tabla id="ytd" style="height: 600px !important; {{$display_tabla}}" :filtros="$filtros" :filtrosAvAlias="$filtrosAvAlias">
            <x-selector-generico id="salida_ytd2" idselect="salida_ytd" :salida="$salida_default" class="selector-generico d-none" style="width: 120px;">
                <x-slot name="texto">
                    {{__('messages.selector-generico-texto-valor')}}
                </x-slot>
            </x-selector-generico>

            <x-selector-variable id="variables_ytd" :lista='$variables' selected="2-0" />
            
            <x-boton-actualizar onclick="getMetasYTD('{{$cliente}}', 'metas');" />
        </x-tabla>
        @php $display_tabla = 'display: none;'; @endphp
    @endif

    @if(isset($selectores_tabla['metas']))
        <x-tabla id="metas" style="height: 600px !important; {{$display_tabla}}" :filtros="$filtros2" :filtrosAvAlias="$filtrosAvAlias">
            <x-selector-variable id="variables_metas" :lista='$variables_metas' selected="2-0" />

            <x-selector-generico id="salida_metas2" idselect="salida_metas" :salida="$salida_default" class="selector-generico d-none" style="width: 120px;">
                <x-slot name="texto">
                    {{__('messages.selector-generico-texto-valor')}}
                </x-slot>
            </x-selector-generico>

            <x-selector-generico id="f_year_metas2" idselect="f_year_metas" :salida="$year"  class="selector-generico" style="width: 120px">
                <x-slot name="texto">
                    {{__('messages.año')}}
                </x-slot>
            </x-selector-generico>

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

    @if(isset($selectores_tabla['fore']))
        <x-tabla id="fore" style="height: 600px !important; {{$display_tabla}}" :filtros="$filtros" :filtrosAvAlias="$filtrosAvAlias">
            <x-selector-variable id="variables_fore" :lista='$variables' selected="2-0" />
            <!--EVOLUTVO MES-->
            <x-selector-meses id="fltr_mes_fore" idselect="f_mes_fore_ini" :meses="$mesesComp" class="fltr_periodo_fore">
                <x-slot name="texto">
                    {{__('messages.selector-semanas-meses-texto-desde')}}
                </x-slot>
            </x-selector-meses>

            <x-selector-meses id="fltr_mes_fore2" idselect="f_mes_fore_fin" :meses="$mesesComp" class="fltr_periodo_fore">
                <x-slot name="texto">
                    {{__('messages.selector-semanas-meses-texto-hasta')}}
                </x-slot>
            </x-selector-meses>

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

    @if(isset($selectores_tabla['reafore']))
        <x-tabla id="reafore" style="height: 600px !important; {{$display_tabla}}" :filtros="$filtros" :filtrosAvAlias="$filtrosAvAlias">
            <x-selector-generico id="salida_reafore2" idselect="salida_reafore" :salida="$salida_default" class="selector-generico d-none" style="width: 120px;">
                <x-slot name="texto">
                    {{__('messages.selector-generico-texto-valor')}}
                </x-slot>
            </x-selector-generico>

            <x-selector-variable id="variables_reafore" :lista='$variables' selected="2-0" />

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

    @if(isset($selectores_tabla['reameta']))
        <x-tabla id="reameta" style="height: 600px !important; {{$display_tabla}}" :filtros="$filtros2" :filtrosAvAlias="$filtrosAvAlias">
            <x-selector-generico id="salida_reameta2" idselect="salida_reameta" :salida="$salida_default" class="selector-generico d-none" style="width: 120px;">
                <x-slot name="texto">
                    {{__('messages.selector-generico-texto-valor')}}
                </x-slot>
            </x-selector-generico>

            <x-selector-variable id="variables_reameta" :lista='$variables_metas' selected="2-0" />

            <x-selector-generico id="f_year_reameta2" idselect="f_year_reameta" :salida="$year"  class="selector-generico" style="width: 120px">
                <x-slot name="texto">
                    {{__('messages.año')}}
                </x-slot>
            </x-selector-generico>
            <x-boton-actualizar onclick="getRealMeta('{{$cliente}}', 'metas');" />
        </x-tabla>
        @php $display_tabla = 'display: none;'; @endphp
    @endif

    @if(isset($selectores_tabla['metafore']))
        <x-tabla id="metafore"  style="height: 600px !important; {{$display_tabla}}" :filtros="$filtros2" :filtrosAvAlias="$filtrosAvAlias">
            <x-selector-variable id="variables_metafore" :lista='$variables_metas_pormarca' selected="2-0" />

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

    @if(isset($selectores_tabla['comisiones']))
        <x-tabla id="comisiones"  style="height: 600px !important; {{$display_tabla}}" :filtros="$filtros2" :filtrosAvAlias="$filtrosAvAlias">
            <x-selector-meses id="fltr_mes_comisiones2" idselect="f_mes_comisiones_fin" :meses="$mesesComp" class="fltr_periodo_comisiones" >
                <x-slot name="texto">
                    Mes
                </x-slot>
            </x-selector-meses>

            <div class="col col-md-auto obj_filtro form-group font-weight-normal">
                <div style="text-align:center; font-size: 1.0em;color:#566573">
                        Valor                              
                </div>
                <label>
                    <select id="f_vsta_comisiones" name="f_vsta_comisiones2" class="flt form-control select2" data-toggle="select2">
                        <option value="costo_b2b" selected> COSTO ($)</option>
                        <option value="ventas_b2b"> VENTA ($)</option>

                
                      
                    </select>
                </label>
            </div>  

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

@endsection
@endif

@section('js_aft')
    <script>
        function getGrafMetasIndices(){
            getGrafMetasMEC('{{$cliente}}');
            getGrafMetasYTD('{{$cliente}}');
            if('{{$cliente}}' == 'grupomor') getGrafAleVal('{{$cliente}}');
        }
        let ids = ['grafIndices', 'grafEvo', 'mec', 'ytd', 'metas', 'fore', 'reafore', 'reameta', 'metafore', 'pormarca', 'comisiones'];
        var filtrosPromise = getFiltrosAv('{{$cliente}}', '{{$codigo}}');
        var cliente_ = "{{$cliente}}";
        $(document).ready(() => {
            
            filtrosPromise.then(function(resp){
                ponerFiltrosAv(resp);
            });

            if(cliente_ == "gama" || cliente_ == "afee"){
                $("#btn-grafico").click();
            }

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

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

            // $("#f_clientes_comp").select2({closeOnSelect:false, multiple: true, placeholder: "Seleccionar Cliente", width: "auto"});
            ["variables_mec", "variables_ytd","variables_metas","variables_fore","variables_reafore","variables_reameta","variables_metafore",'variables_pormarca'].forEach(element => {
                $('#'+element).select2MultiCheckboxes({
                    placeholder: "{{__('messages.elegir-variables')}}",
                    width: "auto",
                    templateSelection: function(selected, total) {
                        return selected.length + " de " + total + " total";
                    }
                });
            });
            ["variables_mec", "variables_ytd"].forEach(element => {
                $('#'+element).on('select2:selecting', function() {
                    if ($('#'+element).val().length > 1) {
                        $(this).select2('close');
                        return false;
                    }
                });
            });
            $('#variables_reafore').select2MultiCheckboxes({
                placeholder: "{{__('messages.elegir-variables')}}",
                width: "auto",
                maximumSelectionLength: 2,
                templateSelection: function(selected, total) {
                    return selected.length + " de " + total + " total";
                }
            });

            $('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");

            });


            if("{{$cliente}}" == "oriental"){
                $('#variables_metas').val(['2-1']);
                $('#variables_fore').val(['2-1']);
            }else if(['maisa', 'clorox', 'mdlzchile'].includes("{{$cliente}}")){
                $('#variables_mec').val(['2-0', '2-5']);
                $('#variables_ytd').val(['2-0', '2-5']);
                $('#variables_metas').val(['2-0', '2-5']);
                $('#variables_reameta').val(['2-0', '2-5']);
            }else if(['gama'].includes("{{$cliente}}")){
                
                $('#variables_pormarca').val(['4-2']);
                $('#variables_mec').val(['4-2']);
                $('#variables_ytd').val(['4-2']);
                $('#variables_metas').val(['4-2']);
                $('#variables_reameta').val(['4-2']);
            }else if("{{$cliente}}" == "martini"){
                $('#f_mes_comisiones_fin').val("{{(date('Y')).(date('m'))}}").change();
            }else{
                $('#variables_metas').val(['2-0', '2-5']);
                $('#variables_fore').val(['2-0', '2-5']);
            }
            $('#variables_mec').trigger('change');
            $('#variables_ytd').trigger('change');
            $('#variables_metas').trigger('change');
            $('#variables_reameta').trigger('change');
            $('#variables_fore').trigger('change');

            if(cliente_ == 'canontex'){
                $('#variables_reameta').val(['2-5', '2-0']).change();

                $('#variables_mec').val(['2-5', '4-4']).change();
                $('#variables_ytd').val(['2-5', '4-4']).change();
            }
        });
    </script>
@endsection