@extends('layouts.reporte')

@section('php')
    @php
        $cliente = config('app.CLIENTE');
        $yearAct = date('Y');
        $yearAnt = $yearAct - 1;
        $year = json_encode([$yearAct => $yearAct]);
        if(in_array($cliente, ['mdlzchile'])){
            $variables_metas = $variables;
        }else{
            $variables_metas = [__('messages.grupo-Local') => $variables[__('messages.grupo-Local')]];
        }

        $salida_default = json_encode(['451' => __('messages.ventas')]);

        $metas_sin_productos = ['clorox'];

        $mesesComp = [];
        foreach ($meses as $value) {
            list($_mes, $_year) = explode(' ', $value->nombre);
            if($_year == $yearAct || $_year == $yearAnt) {
                $mesesComp []= $value;
            }
        }
        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;
        if(!in_array($cliente, ['mdlzchile'])){
            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;
    @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="chart card">
                    <div id="metasMEC">
                    </div>
                </div>
                <div style=" background-color: #FFFFFF; box-shadow: none; border: none" class="chart card">
                    <div id="metasYTD">
                    </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['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">
            <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' selected="2-0" />

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

    @if(isset($selectores_tabla['holdmarca']))
        <x-tabla id="holdmarca" style="height: 600px !important; {{$display_tabla}}" :favoritosDisabled="$true">
            <x-selector-generico id="salida_holdmarca2" idselect="salida_holdmarca" :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_holdmarca2" idselect="f_year_holdmarca" :salida="$year"  class="selector-generico" style="width: 120px">
                <x-slot name="texto">
                    {{__('messages.año')}}
                </x-slot>
            </x-selector-generico>
            <x-boton-actualizar onclick="getHoldMarca('{{$cliente}}', 'metas');" />
        </x-tabla>
        @php $display_tabla = 'display: none;'; @endphp
    @endif
@endsection
@endif

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

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

            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"].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";
                }
            });
            if("{{$cliente}}" == "oriental"){
                $('#variables_metas').val(['2-1']);
                $('#variables_fore').val(['2-1']);
            }else if(['mdlzchile'].includes("{{$cliente}}")){
                $('#variables_mec').val(['2-5', '1-1']);
                $('#variables_ytd').val(['2-5', '1-1']);
                $('#variables_metas').val(['2-5', '1-1']);
                $('#variables_reameta').val(['2-5', '1-1']);
            }else if(['maisa', 'clorox'].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{
                $('#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');
        });
    </script>
@endsection