@extends('layouts.backend')
@push('stylesheet')
<style>
    .nav-tabs-custom {
        margin-bottom: 10px;
        background: #fff;
        box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
        border-radius: 3px;
    }
    .header{
        font-size: 15px !important;
        border-bottom: 1px solid #f4f4f4;
        padding: 0 10px;
        line-height: 35px;
    }
    .container-fluid{
        padding: 0px !important;
    }
    .card{
        margin-bottom: 0px !important;
    }
</style>
@endpush
@section('content')
@php
    $cliente = config('app.CLIENTE');
    $salida = json_encode(["11"=> __('messages.ventas'), "10" => __('messages.unidades'), "15" => __('messages.costo')]);
@endphp
    <div class="row">
        <div class="col-xs-6 col-sm-6 col-md-3 col-lg-3" style="margin-top: 5px;margin-left:0px;margin-right:0px;padding:0px;padding-left: 5px">
            <div class="row" style="margin-top:-5px;margin-bottom:-10px;">
                <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
                    <div class="content">
                        <div class="nav-tabs-custom" style=" pointer-events: none;">
                            <div class="header" style="margin: 5px;">

                                Sell in Vs Forecast Anual
                            </div>
                            <div class="w-100 justify-content-center" id="f_carga_ventin" style="height:217px; display:flex; align-items:center;">
                                <img src="{{asset('images/Preloader_21.gif')}}" style="width: 60px; height: 60px;" class="align-self-center">
                            </div>
                            <div id="ventin_cont" style="height: 217px" class="chart card overflow-auto d-none">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6" style="margin-left: 0px; padding-left: 0px">
                    <div class="content">
                        <div class="nav-tabs-custom">
                            <div class="header" style="margin: 5px">

                                Sell in Vs Forecast MEC
                            </div>
                            <div class="w-100 justify-content-center" id="f_carga_ventmec" style="height:217px; display:flex; align-items:center;">
                                <img src="{{asset('images/Preloader_21.gif')}}" style="width: 60px; height: 60px;" class="align-self-center">
                            </div>
                            <div id="ventmec_cont" style="height: 217px" class="chart card overflow-auto d-none">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row" style="margin-top:-10px;">
                <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                    <div class="content">
                        <div class="nav-tabs-custom">
                            <div style="height: 300px;margin: 5px;" class="chart card">
                                <div id="dash_mec" style="height: 100%">

                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-xs-12 col-sm-12 col-md-9 col-lg-6 align-self-stretch d-flex" style="margin-top: 5px">
            <div class="nav-tabs-custom align-self-stretch w-100">
                <div class="header row" style="margin: 5px;">
                    Ventas Diaria Mes en Curso
                    <x-selector-generico id="salida_dash_vista2" idselect="salida_dash_vista" :salida="$salida"
                    class="selector-generico ms-auto" style="width: 110px; font-size: 12px!important; line-height: 27px !important; margin-bottom: 5px;">
                        <x-slot name="texto">
                        </x-slot>
                    </x-selector-generico>
                </div>
                <div style="background-color:#FFF;margin-bottom:0px;min-height: 400px;">
                    <div id="objeto_zoom">

                    </div>
                </div>
            </div>
        </div>
        <div class="col-lg-3 d-flex flex-column" style="margin-top: 5px; padding-left: 0px;">
            <div class="row" style="margin-top:0px;margin-left:0px;margin-bottom:0px;height:61px;">
                <div class="nav-tabs-custom" style="padding:0px;margin-bottom:0px;">
                    <div class="header" style="margin: 0px;">
                        Compañía: Variación %
                    </div>
                    <div class="row" style="width:98%;margin-left:0px;height:20px;overflow-y:auto;font-size:10px;">
                        <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4" style="background-color:#FFF;margin-:0px;height:auto;overflow-y:auto;">
                            <div id="cia_ven_title" class="ind up d-flex">
                                <div class="ind1" style="font-size: 16px; color: #069623; line-height: 16px;">
                                    <i class="fas fa-caret-up">
                                    </i>
                                </div>
                                <div id="cia_ven" class="ind2" style="color: #069623; margin: 0px 5px;">%</div>
                                <div class="ind3">VENTA</div>
                            </div>
                        </div>
                        <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4" style="background-color:#FFF;margin-:0px;height:auto;overflow-y:auto;">
                            <div id="cia_uni_title" class="ind up d-flex">
                                <div class="ind1" style="font-size: 16px; color: #069623; line-height: 16px;">
                                    <i class="fas fa-caret-up">
                                    </i>
                                </div>
                                <div id="cia_uni" class="ind2" style="color: #069623; margin: 0px 5px;">%</div>
                                <div class="ind3">UNIDADES</div>
                            </div>
                        </div>
                        <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4" style="background-color:#FFF;margin-:0px;height:auto;overflow-y:auto;">
                            <div id="cia_cos_title" class="ind up d-flex">
                                <div class="ind1" style="font-size: 16px; color: #069623; line-height: 16px;">
                                    <i class="fas fa-caret-up">
                                    </i>
                                </div>
                                <div id="cia_cos" class="ind2" style="color: #069623; margin: 0px 5px;">%</div>
                                <div class="ind3">COSTO</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="nav-tabs-custom" style="margin-top:5px;margin-left:0px;margin-right:-5px;height:120px">
                <div class="header" style="margin: 0px;">
                    Canal: Variación %
                </div>
                <div class="w-100 justify-content-center" id="f_carga_gg" style="height:80px; display:flex; align-items:center;">
                    <img src="{{asset('images/Preloader_21.gif')}}" style="width: 60px; height: 60px;" class="align-self-center">
                </div>
                <div id="gg" style="padding-left:5px;width:98%;margin-left:0px;height:80px;overflow-y:auto;" class="d-none">
                    <div class="row w-100" style="font-size:10px;">
                        <div id="g1" class="col-xs-12 col-sm-12 col-md-6 col-lg-6 align-self-center"
                        style="background-color:#FFF; overflow-y:auto; margin-bottom: 6px;">
                            <div class="ind up d-flex">
                                <div class="ind1" style="font-size: 16px; color: #069623; line-height: 16px;">
                                    <i class="fas fa-caret-up">
                                    </i>
                                </div>
                                <div class="ind2" style="color: #069623; margin: 0px 5px;">
                                    
                                </div>
                                <div class="ind3"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="nav-tabs-custom" style="margin:-5px -5px 0px 0px;height:227px">
                <div class="header" style="margin: 0px;">
                    Top {{ __('messages.variable-productos')}}: Mayores Variaciones % Considerando Pareto 80/20
                </div>
                <div class="w-100 justify-content-center" id="f_carga_mayorVar" style="height:190px; display:flex; align-items:center;">
                    <img src="{{asset('images/Preloader_21.gif')}}" style="width: 60px; height: 60px;" class="align-self-center">
                </div>
                <div id="mayorVar" style="padding-left:5px;width:100%;margin-left:0px;height:190px;overflow-y:auto;" class="d-none">
                    <div class="row w-100" style="font-size:10px;">
                        <div id="mv1" class="col-xs-12 col-sm-12 col-md-12 col-lg-12 align-self-center"
                        style="background-color:#FFF; overflow-y:auto; margin-bottom: 6px;">
                            <div class="ind up d-flex">
                                <div class="ind1" style="font-size: 16px; color: #069623; line-height: 16px;">
                                    <i class="fas fa-caret-up">
                                    </i>
                                </div>
                                <div class="ind2" style="color: #069623; margin: 0px 5px;">
                                
                                </div>
                                <div class="ind3"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="nav-tabs-custom flex-fill d-flex flex-column" style="margin:5px -5px 10px 0px;">
                <div class="header" style="margin: 0px;">
                    Familia: Variación %
                </div>
                <div class="w-100 justify-content-center flex-fill" id="f_carga_fv" style="display:flex; align-items:center;">
                    <img src="{{asset('images/Preloader_21.gif')}}" style="width: 60px; height: 60px;" class="align-self-center">
                </div>
                <div id="fv" style="padding-left:5px;width:100%;margin-left:0px;overflow-y:auto;" class="d-none flex-fill">
                    <div class="row w-100" style="font-size:10px;">
                        <div id="fv1" class="col-xs-12 col-sm-12 col-md-6 col-lg-6 align-self-center"
                        style="background-color:#FFF; overflow-y:auto; margin-bottom: 6px;">
                            <div class="ind up d-flex">
                                <div class="ind1" style="font-size: 16px; color: #069623; line-height: 16px;">
                                    <i class="fas fa-caret-up">
                                    </i>
                                </div>
                                <div class="ind2" style="color: #069623; margin: 0px 5px;">
                                    
                                </div>
                                <div class="ind3"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="row" style="margin-top:-5px;">

        <select name="agrupacion_grafstockale" id="agrupacion_grafstockale" style="display: none;">
            <option value="2-0" selected></option>
        </select>
        <select name="tipo_stock_grafstockale" id="tipo_stock_grafstockale" style="display: none;">
            <option value="1" selected></option>
        </select>
        <select name="f_dias_ventas_grafstockale" id="f_dias_ventas_grafstockale" style="display: none;">
            <option value="30" selected></option>
        </select>
        <div class="col-lg-6" style="margin-top:0px; margin-right: 0px; padding-right: 0px">
            <div class="row w-100">
                <div class="col-lg-6" style="padding-right: 0px;">
                    <div class="nav-tabs-custom" style="height: 163px; margin-bottom: 5px; margin-right: 0px">
                        <div class="w-100 justify-content-center" id="f_carga_grafcat1" style="height:163px; display:flex; align-items:center;">
                            <img src="{{asset('images/Preloader_21.gif')}}" style="width: 60px; height: 60px;" class="align-self-center">
                        </div>
                        <div id="grafcat1_cont" style="height:163px;margin:0x;padding:0px" class="d-none">
                        </div>
                    </div>
                </div>
                <div class="col-lg-6" style="padding-right: 0px">
                    <div class="nav-tabs-custom" style="height: 163px; margin-bottom: 5px; margin-right: 0px">
                        <div class="w-100 justify-content-center" id="f_carga_grafcat2" style="height:163px; display:flex; align-items:center;">
                            <img src="{{asset('images/Preloader_21.gif')}}" style="width: 60px; height: 60px;" class="align-self-center">
                        </div>
                        <div id="grafcat2_cont" style="height:163px;margin:0x;padding:0px" class="d-none">
                        </div>
                    </div>
                </div>
            </div>
            <div class="row w-100">
                <div class="col-lg-6" style="padding-right: 0px;">
                    <div class="nav-tabs-custom" style="height: 215px; margin-bottom: 5px; margin-right: 0px">
                        <div class="w-100 justify-content-center" id="f_carga_grafpart1" style="height:163px; display:flex; align-items:center;">
                            <img src="{{asset('images/Preloader_21.gif')}}" style="width: 60px; height: 60px;" class="align-self-center">
                        </div>
                        <div id="grafpart1_cont" style="height:205px;margin:0x;padding:0px" class="d-none">
                        </div>
                    </div>
                </div>
                <div class="col-lg-6" style="padding-right: 0px">
                    <div class="nav-tabs-custom" style="height: 215px; margin-bottom: 5px; margin-right: 0px">
                        <div class="w-100 justify-content-center" id="f_carga_grafpart2" style="height:163px; display:flex; align-items:center;">
                            <img src="{{asset('images/Preloader_21.gif')}}" style="width: 60px; height: 60px;" class="align-self-center">
                        </div>
                        <div id="grafpart2_cont" style="height:205px;margin:0x;padding:0px" class="d-none">
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-lg-3" style="margin-top:0px; padding-left: 0px;">
            <div class="nav-tabs-custom">
                <div id="objeto_cols" style="height: 383px;">
                    <div class="w-100 justify-content-center" id="f_carga_meta_mec" style="height:331px; display:flex; align-items:center;">
                        <img src="{{asset('images/Preloader_21.gif')}}" style="width: 60px; height: 60px;" class="align-self-center">
                    </div>
                    <div id="meta_mec" style="height: 331px" class="d-none">

                    </div>
                </div>
            </div>
        </div>
        <div class="col-lg-3" style="margin-top:0px; padding: 0px;">
            <div class="nav-tabs-custom">
                <div id="objeto_cols" style="height: 383px;">
                    <div class="w-100 justify-content-center" id="f_carga_meta_ytd" style="height:331px; display:flex; align-items:center;">
                        <img src="{{asset('images/Preloader_21.gif')}}" style="width: 60px; height: 60px;" class="align-self-center">
                    </div>
                    <div id="meta_ytd" style="height: 331px" class="d-none">

                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- No coloques JS ni CSS en las plantillas Blade y no coloques HTML en clases de PHP --}}
    <input id="x_messages_ventas" type="hidden" value='{{ __('messages.ventas') }}'>
    <input id="x_messages_unidades" type="hidden" value='{{ __('messages.unidades') }}'>
    <input id="x_messages_costo" type="hidden" value='{{ __('messages.costo') }}'>
@endsection
@push('javascript')
    <script src="{{ asset("js/custom/utilidades.js") }}"></script>
    <script src="{{ asset("js/custom/reporteriaGetter.js") }}"></script>
    <script src="{{ asset('fusioncharts\v3.15.1\js\fusioncharts.js') }}"></script>
    <script src="{{ asset('fusioncharts\v3.15.1\js\themes\fusioncharts.theme.fusion.js') }}"></script>
    <script src="{{ asset('js\vendor\bootstrap-datepicker.min.js') }}"></script>
    <script src="{{ asset('js/vendor/jquery.dataTables.min.js') }}"></script>
    <script src="{{ asset('js\vendor\dataTables.bootstrap5.js') }}"></script>
    <script src="{{ asset('js\vendor\dataTables.buttons.min.js') }}"></script>
    <script src="{{ asset('js\vendor\buttons.print.min.js') }}"></script>
    <script src="{{ asset('js\vendor\buttons.html5.min.js') }}"></script>
    <script src="{{ asset('js\jszip.min.js') }}"></script>
    <script src="{{ asset('js\vendor\buttons.flash.min.js') }}"></script>
    <script src="{{ asset('js/dataTables.fixedColumns.min.js') }}"></script>
    <script src="{{ asset('js/dataTables.fixedHeader.min.js') }}"></script>

<script>
        let ventas = $('#x_messages_ventas').val();
        let unidades = $('#x_messages_unidades').val();
        let costo = $('#x_messages_costo').val();
        cliente = @json($cliente);
        $(".navbar-dashboard").css("border-style","solid");
        $(".navbar-dashboard").css("border-left","0px");
        $(".navbar-dashboard").css("border-color","#57775F");
        $(".navbar-dashboard").css("background-color","#57775F");
        function cargar(){
                $("#loader").css('visibility', 'visible');
                var data = getDashboardSellIn(cliente, 'ventas', ['2-1'], function(data){
                    if(Object.keys(data).length == 0){
                        $('#gg').css("visibility", "hidden");
                    }else if(Object.keys(data).length == 1){
                        var keys = "";
                        if(ventas in data[Object.keys(data)[0]]){
                            keys = ventas;
                        }else if(unidades in data[Object.keys(data)[0]]){
                            keys = unidades;
                        }else{
                            keys = costo;
                        }
                        if (keys == unidades) {
                            $('#g1').prop('title', "Mes año anterior: " + data[Object.keys(data)[0]][keys+"_anterior"].toLocaleString() +
                            "; Mes actual: " + data[Object.keys(data)[0]][keys+"_actual"].toLocaleString());
                        }else{
                            $('#g1').prop('title', "Mes año anterior: $" + data[Object.keys(data)[0]][keys+"_anterior"].toLocaleString() +
                            "; Mes actual: $" + data[Object.keys(data)[0]][keys+"_actual"].toLocaleString());
                        }
                        $('#g1 .ind2').text(data[Object.keys(data)[0]][keys]+ "%");
                        $('#g1 .ind3').text(Object.keys(data)[0]);
                    }else{
                        var count = 0;
                        for (let [key, value] of Object.entries(data)) {
                            var keys = "";
                            if(ventas in value){
                                keys = ventas;
                            }else if(unidades in value){
                                keys = unidades;
                            }else{
                                keys = costo;
                            }
                            if (key != "\u0001") {
                                if($("#gg #g" + (count+1)).length){
                                    if (keys == unidades) {
                                        $('#g' + (count+1)).prop('title',"Mes año anterior: " + value[keys+"_anterior"].toLocaleString() +
                                        "; Mes actual: " + value[keys+"_actual"].toLocaleString());
                                    }else{
                                        $('#g' + (count+1)).prop('title',"Mes año anterior: $" + value[keys+"_anterior"].toLocaleString() +
                                        "; Mes actual: $" + value[keys+"_actual"].toLocaleString());
                                    }
                                    if(value[keys] < 0){
                                        $("#gg #g" + (count+1) + " .ind.up .ind1 i").removeClass( "fa-caret-up" ).addClass("fa-caret-down").css("color","#c0392b");
                                        $("#gg #g" + (count+1) + " .ind.up .ind2").css("color","#c0392b");
                                    }
                                    $("#gg #g" + (count+1) + " .ind.up .ind2").text(value[keys]+"%");
                                    $("#gg #g" + (count+1) + " .ind.up .ind3").text(key);
                                }else{
                                    var $elemento = $("#gg #g1").clone().attr('id', 'g'+ (count+1));
                                    if (keys == unidades) {
                                        $elemento.prop('title', "Mes año anterior: " + value[keys+"_anterior"].toLocaleString() +
                                        "; Mes actual: " + value[keys+"_actual"].toLocaleString());
                                    }else{
                                        $elemento.prop('title', "Mes año anterior: $" + value[keys+"_anterior"].toLocaleString() +
                                        "; Mes actual: $" + value[keys+"_actual"].toLocaleString());
                                    }
                                    if(value[keys] < 0){
                                        $elemento.find(".ind1 i").removeClass( "fa-caret-up" ).addClass("fa-caret-down").css("color","#c0392b");
                                        $elemento.find(".ind2").css("color","#c0392b");
                                    }else{
                                        $elemento.find(".ind1 i").removeClass( "fa-caret-down" ).addClass("fa-caret-up").css("color","#069623");
                                        $elemento.find(".ind2").css("color","#069623");
                                    }
                                    $elemento.find(".ind2").text(value[keys]+"%");
                                    $elemento.find(".ind3").text(key);
                                    $("#gg .row").append($elemento);
                                }
                                count++;
                            }
                        }
                    }
                    $("#loader").css('visibility', 'hidden');
                    document.getElementById("f_carga_gg").style.display = "none";
                    $("#gg").removeClass("d-none");
                });
                var data = getDashboardSellIn(cliente, 'ventas', ['1-3'], function(data){
                    if(Object.keys(data).length == 0){
                        $('#fv').css("visibility", "hidden");
                    }else if(Object.keys(data).length == 1){
                        var keys = "";
                        if(ventas in data[Object.keys(data)[0]]){
                            keys = ventas;
                        }else if(unidades in data[Object.keys(data)[0]]){
                            keys = unidades;
                        }else{
                            keys = costo;
                        }
                        if (keys == unidades) {
                            $('#fv1').prop('title', "Mes año anterior: " + data[Object.keys(data)[0]][keys+"_anterior"].toLocaleString() +
                            "; Mes actual: " + data[Object.keys(data)[0]][keys+"_actual"].toLocaleString());
                        }else{
                            $('#fv1').prop('title', "Mes año anterior: $" + data[Object.keys(data)[0]][keys+"_anterior"].toLocaleString() +
                            "; Mes actual: $" + data[Object.keys(data)[0]][keys+"_actual"].toLocaleString());
                        }
                        $('#fv1 .ind2').text(data[Object.keys(data)[0]][keys]+ "%");
                        $('#fv1 .ind3').text(Object.keys(data)[0]);
                    }else{
                        var count = 0;
                        for (let [key, value] of Object.entries(data)) {
                            var keys = "";
                            if(ventas in value){
                                keys = ventas;
                            }else if(unidades in value){
                                keys = unidades;
                            }else{
                                keys = costo;
                            }
                            if (key != "\u0001") {
                                if($("#fv #fv" + (count+1)).length){
                                    if (keys == unidades) {
                                        $('#fv' + (count+1)).prop('title',"Mes año anterior: " + value[keys+"_anterior"].toLocaleString() +
                                        "; Mes actual: " + value[keys+"_actual"].toLocaleString());
                                    }else{
                                        $('#fv' + (count+1)).prop('title',"Mes año anterior: $" + value[keys+"_anterior"].toLocaleString() +
                                        "; Mes actual: $" + value[keys+"_actual"].toLocaleString());
                                    }
                                    if(value[keys] < 0){
                                        $("#fv #fv" + (count+1) + " .ind.up .ind1 i").removeClass( "fa-caret-up" ).addClass("fa-caret-down").css("color","#c0392b");
                                        $("#fv #fv" + (count+1) + " .ind.up .ind2").css("color","#c0392b");
                                    }
                                    $("#fv #fv" + (count+1) + " .ind.up .ind2").text(value[keys]+"%");
                                    $("#fv #fv" + (count+1) + " .ind.up .ind3").text(key);
                                }else{
                                    var $elemento = $("#fv #fv1").clone().attr('id', 'fv'+ (count+1));
                                    if (keys == unidades) {
                                        $elemento.prop('title', "Mes año anterior: " + value[keys+"_anterior"].toLocaleString() +
                                        "; Mes actual: " + value[keys+"_actual"].toLocaleString());
                                    }else{
                                        $elemento.prop('title', "Mes año anterior: $" + value[keys+"_anterior"].toLocaleString() +
                                        "; Mes actual: $" + value[keys+"_actual"].toLocaleString());
                                    }
                                    if(value[keys] < 0){
                                        $elemento.find(".ind1 i").removeClass( "fa-caret-up" ).addClass("fa-caret-down").css("color","#c0392b");
                                        $elemento.find(".ind2").css("color","#c0392b");
                                    }else{
                                        $elemento.find(".ind1 i").removeClass( "fa-caret-down" ).addClass("fa-caret-up").css("color","#069623");
                                        $elemento.find(".ind2").css("color","#069623");
                                    }
                                    $elemento.find(".ind2").text(value[keys]+"%");
                                    $elemento.find(".ind3").text(key);
                                    $("#fv .row").append($elemento);
                                }
                                count++;
                            }
                        }
                    }
                    $("#loader").css('visibility', 'hidden');
                    document.getElementById("f_carga_fv").style.display = "none";
                    $("#fv").removeClass("d-none");
                });

                getDashboardSellIn(cliente, 'ventas', ['1-15'], function(data){
                    var keys = "";
                    var larNumKeys = [];
                    var larNums = {"actual": [], "anterior" : [], "num": []};
                    for (let [key, value] of Object.entries(data)) {
                        if(ventas in value){
                            keys = ventas;
                        }else if(unidades in value){
                            keys = unidades;
                        }else{
                            keys = costo;
                        }
                        if (!isNaN(value[keys])) {
                            if(larNums["num"].length < 28){
                                larNums["num"].push(value[keys]);
                                larNumKeys.push(key);
                                larNums["actual"].push(value[keys+"_actual"]);
                                larNums["anterior"].push(value[keys+"_anterior"]);
                            }else{
                                if(Math.min(...larNums["num"].map(Math.abs)) < Math.abs(value[keys])){
                                    var index = larNums["num"].indexOf(Math.min(...larNums["num"]));
                                    larNums["num"][index] = value[keys];
                                    larNums["actual"][index] = value[keys+"_actual"];
                                    larNums["anterior"][index] = value[keys+"_anterior"];
                                    larNumKeys[index]= key;
                                }
                            }
                        }
                    }
                    var larNum = [];
                    for (let index = 0; index < larNums["num"].length; index++) {
                        larNum.push({"num": larNums["num"][index], "actual": larNums["actual"][index],
                        "anterior": larNums["anterior"][index],"key": larNumKeys[index]});
                    }
                    larNum.sort(function (a,b){
                        return (Math.abs(a["num"]) < Math.abs(b["num"])) ? 1: (Math.abs(a["num"]) == Math.abs(b["num"])) ? 0: -1;
                    });
                    if(Object.keys(data).length == 0){
                        $('#mayorVar').css("visibility", "hidden");
                    }else{
                        var count = 0;
                        for(let i = 0; i<larNum.length; i++){
                            if($("#mayorVar #mv" + (count+1)).length){
                                if (keys == unidades) {
                                    $("#mayorVar #mv" + (count+1)).prop('title', "Mes año anterior: " + larNum[i]["anterior"].toLocaleString() +
                                    "; Mes actual: " + larNum[i]["actual"].toLocaleString());
                                }else{
                                    $("#mayorVar #mv" + (count+1)).prop('title', "Mes año anterior: $" + larNum[i]["anterior"].toLocaleString() +
                                    "; Mes actual: $" + larNum[i]["actual"].toLocaleString());
                                }
                                if(larNum[i]["num"] < 0){
                                    $("#mayorVar #mv" + (count+1) + " .ind.up .ind1 i").removeClass( "fa-caret-up" ).addClass("fa-caret-down").css("color","#c0392b");
                                    $("#mayorVar #mv" + (count+1) + " .ind.up .ind2").css("color","#c0392b");
                                }
                                $("#mayorVar #mv" + (count+1) + " .ind.up .ind2").text(larNum[i]["num"]+"%");
                                $("#mayorVar #mv" + (count+1) + " .ind.up .ind3").text(larNum[i]["key"]);
                            }else if(count < 28){
                                var $elemento = $("#mayorVar #mv1").clone().attr('id', 'mv'+ (count+1));
                                if (keys == unidades) {
                                    $elemento.prop('title', "Mes año anterior: " + larNum[i]["anterior"].toLocaleString() +
                                    "; Mes actual: " + larNum[i]["actual"].toLocaleString());
                                }else{
                                    $elemento.prop('title', "Mes año anterior: $" + larNum[i]["anterior"].toLocaleString() +
                                    "; Mes actual: $" + larNum[i]["actual"].toLocaleString());
                                }
                                if(larNum[i]["num"] < 0){
                                    $elemento.find(".ind1 i").removeClass( "fa-caret-up" ).addClass("fa-caret-down").css("color","#c0392b");
                                    $elemento.find(".ind2").css("color","#c0392b");
                                }else{
                                    $elemento.find(".ind1 i").removeClass( "fa-caret-down" ).addClass("fa-caret-up").css("color","#069623");
                                    $elemento.find(".ind2").css("color","#069623");
                                }
                                $elemento.find(".ind2").text(larNum[i]["num"]+"%");
                                $elemento.find(".ind3").text(larNum[i]["key"]);
                                $("#mayorVar .row").append($elemento);
                            }
                            count++
                        }
                    }
                    document.getElementById("f_carga_mayorVar").style.display = "none";
                    $("#mayorVar").removeClass("d-none");
                });
            }
        $(document).ready(function(){
            getGrafMetasMECDash(cliente, 'ventas',true);
            getGrafMetasYTDDash(cliente, 'ventas',true);
            var length = 0;
            getDashboardSellIn(cliente, 'ventas', [], function(data){
                for (let [key, value] of Object.entries(data[""])) {
                    if(ventas == key){
                        $('#cia_ven').text(value+"%");
                        $("#cia_ven_title").prop('title', "Mes año anterior: $" + data[""][key+"_anterior"].toLocaleString() +
                            "; Mes actual: $" + data[""][key+"_actual"].toLocaleString());
                        if(value < 0){
                            $("#cia_ven_title").find(".ind1 i").removeClass( "fa-caret-up" ).addClass("fa-caret-down").css("color","#c0392b");
                            $("#cia_ven_title").find(".ind2").css("color","#c0392b");
                        }else{
                            $("#cia_ven_title").find(".ind1 i").removeClass( "fa-caret-down" ).addClass("fa-caret-up").css("color","#069623");
                            $("#cia_ven_title").find(".ind2").css("color","#069623");
                        }
                    }else if(unidades == key){
                        $('#cia_uni').text(value+"%");
                        $("#cia_uni_title").prop('title', "Mes año anterior: " + data[""][key+"_anterior"].toLocaleString() +
                            "; Mes actual: " + data[""][key+"_actual"].toLocaleString());
                        if(value < 0){
                            $("#cia_uni_title").find(".ind1 i").removeClass( "fa-caret-up" ).addClass("fa-caret-down").css("color","#c0392b");
                            $("#cia_uni_title").find(".ind2").css("color","#c0392b");
                        }else{
                            $("#cia_uni_title").find(".ind1 i").removeClass( "fa-caret-down" ).addClass("fa-caret-up").css("color","#069623");
                            $("#cia_uni_title").find(".ind2").css("color","#069623");
                        }
                    }else if(costo == key){
                        $('#cia_cos').text(value+"%");
                        $("#cia_cos_title").prop('title', key.split(" ")[0] + " anterior: $" + data[""][key+"_anterior"].toLocaleString() +
                            "; "+ key.split(" ")[""] +" actual: $" + data[""][key+"_actual"].toLocaleString());
                        if(value < 0){
                            $("#cia_cos_title").find(".ind1 i").removeClass( "fa-caret-up" ).addClass("fa-caret-down").css("color","#c0392b");
                            $("#cia_cos_title").find(".ind2").css("color","#c0392b");
                        }else{
                            $("#cia_cos_title").find(".ind1 i").removeClass( "fa-caret-down" ).addClass("fa-caret-up").css("color","#069623");
                            $("#cia_cos_title").find(".ind2").css("color","#069623");
                        }
                    }
                }
            }, ['11', '10', '15'], [ventas, unidades, costo]);
            cargar();
            getGrafZoomSellIn(cliente, 'ventas', [ventas, unidades, costo]);
            $("#salida_dash_vista").change(function(){
                if(FusionCharts('grafZoom')){
                    let grafico = FusionCharts('grafZoom').getChartData();
                    grafico["dataset"].forEach(function(element, index, theArray){
                        if(element["seriesname"].split(" ")[0] == document.getElementById('salida_dash_vista').selectedOptions[0].textContent.split(" ")[0]){
                            delete grafico["dataset"][index]["initiallyHidden"];
                            delete grafico["dataset"][index]["initiallyhidden"];
                        }else{
                            if(!("initiallyHidden" in element)){
                                grafico["dataset"][index]["initiallyHidden"] = 1;
                            }
                        }
                    });
                    FusionCharts('grafZoom').setChartData(grafico);
                }
                cargar();
            });
            getDashSuk(cliente, 'ventas');
        });
    </script>
@endpush