@extends('layouts.backend')

@section('css_after')
    <link rel="stylesheet" href="{{asset('css\vendor\buttons.bootstrap5.css') }}">
    <style>
        .panel-heading{
            padding: 10px 15px;
            background-color: #c6c6c6;
            border-top-left-radius: 3px;
            border-top-right-radius: 3px;
            border-bottom: 1px solid #c6c6c6;
        }
        h5{
            font-size: 14px !important;
            font-weight: 500 !important;
        }
        h6{
            font-size: 12px !important;
            font-weight: 500 !important;
        }
        .panel{
            background-color: #fff;
            border: 1px solid transparent;
            border-radius: 4px;
        }
        .panel-default{
            border-color: #ddd;
        }
        .panel-body{
            padding: 15px;
        }
        #mapa {
            height: 100%;
        }
    </style>
@endsection
@section('content')
@php
    $orden = json_encode(["ventas_mec"=>"Ventas ($)", "comuna"=>"Comuna", "region"=>"Región","variacion"=>"Variación Ventas (%)", "precio_promedio" => "Precio Promedio ($)", "variacion_precio" => "Variación Precio (%)", "meta" => "Meta ($)", "avance" => "Avance (%)"]);
    $tipo = json_encode(["ventas_mec"=>"Ventas ($)","variacion"=>"Variación Ventas (%)", "precio_promedio" => "Precio Promedio ($)", "variacion_precio" => "Variación Precio (%)", "meta" => "Meta ($)", "avance" => "Avance (%)"]);
    $cliente = config('app.CLIENTE');
    $display_tabla='';
    if($cliente == "bless"){
        $warning="* Las Ventas mostradas en los cuadros del mapa corresponden a la venta de los ultimos dias \n * La Variacion corresponde a la diferencia de las ventas de los ultimos dias vs los dias anteriores. \n * El Stock mostrado corresponde al ultimo disponible.";
    }else{
        $warning="* Se muestra el total de ventas \n * La variación de las ventas en porcentaje \n * El precio promedio \n * La variación del precio en porcentaje. \n * Las metas. \n * Avance.";
    }
@endphp
    <x-tabla id="mapLocales" style="{{$display_tabla}}" :filtros="$filtros" :filtrosAv="$filtrosAv" :filtrosAvAlias="$filtrosAvAlias">
        <x-selector-generico id="tipo_vis2" idselect="tipo_vis" :salida="$tipo" class="" style="width: 120px;">
            <x-slot name="texto">
                {{__('messages.selector-generico-texto-valor')}}
            </x-slot>
        </x-selector-generico> 
        <x-boton-actualizar onclick="getMapVentaPrecioMeta('{{$cliente}}')"/>
        <div class="col col-md-auto">
            <x-infobox tamano="25px" :texto="$warning"/>
        </div>
    </x-tabla>
    <div class="bg-body-light">
        <div class="content content-full">
            <div class="d-flex flex-column flex-sm-row justify-content-sm-between align-items-sm-center">
                <h3 class="flex-sm-fill font-size-h2 font-w400 mt-2 mb-0 mb-sm-2 text-center" style="font-weight: 400!important;">{{$titulo}}</h3>
                <nav class="flex-sm-00-auto ml-sm-3" aria-label="breadcrumb">
                    
                </nav>
            </div>
        </div>
    </div>
    <div class="row" style="padding: 5px">
        <div class="col-lg-6" style="overflow: hidden;height:auto; padding: 0px 15px; position: relative;">
            <div style="position: absolute; background-color: rgba(255, 255, 255, 0.1);   z-index: 2; top: 5px; left: 20px;" class="d-flex justify-content-center align-items-center">
               
                <!-- <button class="btn boton btn-sm align-middle lh-1 actualizar" onclick="aplicarCriterio(this)" style="margin-left: 5px" id="ap_crit">Aplicar Criterio</button> -->
            </div>
            <div style="position: absolute; background-color: rgba(255, 255, 255, 0.1);; width:30px; height:30px; z-index: 2; top: 5px; right: 20px; border-radius: 25%; border-style: solid;
            border-width: 3px;" class="d-flex justify-content-center align-items-center" id="out">
                <i class="fas fa-plus text-center fa-lg" style="color: gray"></i>
            </div>
            <div style="position: absolute; background-color: rgba(255, 255, 255, 0.1); width:30px; height:30px; z-index: 2; top: 38px; right: 20px; border-color: gray; border-radius: 25%; border-style: solid;
            border-width: 3px;" class="d-flex justify-content-center align-items-center" id="in">
                <i class="fas fa-minus text-center fa-lg" style="color: gray"></i>
            </div>
            <p id="mapa" style="background-color: rgb(255, 255, 255); position: relative; height: 900px;">
            </p>
        </div>
        <div class="col-lg-6 d-flex flex-column" style="height:900px;background-color:#FFF;">
            <div style="padding: 0px 15px 5px 0px">
                <div style="position: relative; padding-top: 10px;">
                    <div class="col-md-auto d-flex" style="margin-top:10px; align-items: center;">
                        <div class="row w-100">
                            <div class="col-md-auto d-flex">
                                <x-selector-generico id="f_orden2" idselect="f_orden" :salida="$orden" class="" style="width: 150px" selected="mes">
                                </x-selector-generico>
                                <button class="btn boton btn-sm align-middle lh-1" onclick="cambiarOrden(this,'{{$cliente}}')" style="margin-left: 5px" id="ordenarBtn">
                                    Ordenar
                                    <i class="fas fa-chevron-up"></i>
                                </button>
                            </div>
                            <div class="col-md-auto ms-auto d-flex">
                               
                            </div>
                        </div>
                        
                    </div>
                </div>
            </div>
            <div class="flex-grow-1 overflow-auto">
                <div id="local_mapa" style="width: 99.4%">
                    <!--
                        for ($i = 0; $i < count(json_decode($elementos)); $i++)
                            if ($i % 3 == 0)
                                <div class="row d-flex flex-wrap" style="margin-top:1px">
                            endif
                                    <div class="col-lg-4" style="padding-right:5px;padding-left:5px;margin-bottom:1px;">
                                        <div panel_id="{{--json_decode($elementos)[$i]['id_local']--}}" onclick="moveMap(this)" class="panel panel-default" style="margin-bottom:10px">
                                            <div class="panel-heading" style="height:90px">
                                                <h5>
                                                    {{--$i+1--}}. {{--explode(" - ",json_decode($elementos)[$i]['local'])[0]--}}
                                                </h5>
                                                <h6 title="{{--explode(" - ",json_decode($elementos)[$i]['local'])[1]--}}" style="display: -webkit-box;
                                                -webkit-line-clamp: 2;
                                                -webkit-box-orient: vertical;
                                                overflow: hidden;
                                                text-overflow: ellipsis;
                                                font-size: 12px;">
                                                    {{--explode(" - ",json_decode($elementos)[$i]['local'])[1]--}}
                                                </h6>
                                            </div>
                                            <div class="panel-body">
                                                <p style="color:#008F39;font-size:12px;margin: 0 0 0 0">Ventas: ${{--json_decode($elementos)[$i]['ventas']--}}</p>
                                                <p style="color:#008F39;font-size:12px;margin: 0 0 0 0">Variación: ${{--json_decode($elementos)[$i]['variacion']--}}</p>
                                            </div>
                                        </div>
                                    </div>
                            if ($i % 3 == 2 || $i == count(json_decode($elementos)) - 1)
                                </div>
                            endif
                        endfor
                    -->
                </div>
            </div>
        </div>
    </div>
@endsection
@section('js_after')
    <script src="{{asset('config/datatables.locale.spanish.js')}}"></script>
    <script src="{{asset('config/modal.languege.js')}}"></script>
    <script src="{{asset("js/custom/utilidades.js")}}"></script>
    <script src="{{asset("js/custom/reporteriaGetter.js")}}"></script>
    <script src="{{ asset('js\jszip.min.js') }}"></script>
    <script src="{{asset("js/vendor/d3.min.js")}}" charset="utf-8"></script>
    <script src="https://d3js.org/d3-geo-projection.v3.min.js"></script>
    <script src="{{asset("js/app.js")}}" charset="utf-8"></script>
    <script src="{{asset("js/jquery.animate-shadow.js")}}"></script>
    @php
        echo "<script>const pais = '".asset("geojson/chile1.geojson")."';</script>";
    @endphp
    <script>
        var dataStock;
        const svg = d3.selectAll("p").append("svg").attr("width","100%").attr("height","100%").style("background-color", "#A7D6FE");
        const container = svg.append("g").classed('pais',true).attr("width","100%").attr("height","100%").style("pointer-events", "all");
        const out = d3.selectAll("#out");
        const zin = d3.selectAll("#in");
        var zoom = d3.zoom().on("zoom", function () {
            container.attr("transform", d3.event.transform)
        })

        var ids = ['mapLocales'];
        var filtrosPromise = getFiltrosAv('{{$cliente}}', '{{$codigo}}');

        $(document).ready(() => {
            filtrosPromise.then(function(resp){
                ponerFiltrosAv(resp);
            });
        })

        svg.call(zoom);
        zin.on("click", (d) => {
            svg.transition().duration(750).call(zoom.scaleBy, 0.7);
        });
        out.on("click", (d) => {
            svg.transition().duration(750).call(zoom.scaleBy, 1.4);
        });
        var geoPaths;
        var tooltip = d3.select("body")
            .append("div")
            .attr("class", "tooltip")
            .style("opacity", 0)
            .style("position", "absolute")
            .style("width", "auto")
            .style("height", "auto")
            .style("background-color", "white")
            .style("pointer-events", "none")
            .style("border-radius", "5px");
        $("body").on("mousemove", function(e) {
            if (e) {
                tooltip
                    .style("left", (e.pageX) + "px")
                    .style("top", (e.pageY) + "px");
            }
        });
        const geoData = d3.json(pais).then(function(json) {
        const geoScale = d3
        .geoMercator()
        .center([0, 0])
        .scale(200)
        .fitSize(
            [$(".col-lg-6").width(), 900],
            json
        );
        geoPaths = d3.geoPath().projection(geoScale);
        var maps = container
        .selectAll("path")/*
        .attr("d", geoPaths)
        .attr("stroke", "grey")
        .attr("stroke-width", 0.05)
        .attr("class", "comuna")*/
        .data(json.features)
        .enter()
        .append("path")
        .attr("fill", "#ebebeb")
        .attr("stroke", "grey")
        .attr("stroke-width", 0.1)
        .attr("d", function (d) {
            return geoPaths(d);
        })
        .attr("comuna", (d) => d.properties.nombre_comuna)
        .on("click", (d) => {

            let div = document.getElementById(d.properties.nombre_comuna);
            div.scrollIntoView()

            div.style.boxShadow = "rgb(80, 150, 0) 0px 0px 15px 0px";
            setTimeout(function() {
                div.style.boxShadow = "none";
            }, 1500);

            var x, y, k;
            var centroid = geoPaths.centroid(d);
            x = centroid[0];
            y = centroid[1];
            k = 8*Math.min(
                $(".col-lg-6").width() / x, 900 / y
            );
            container.transition()
                .duration(750)
                .attr("transform", "translate(" + $(".col-lg-6").width()/2 + "," + 900/2 + ")scale(" + k + ")translate(" + -x + "," + -y + ")");

            var transform = d3.zoomIdentity
            .translate(parseInt($(".col-lg-6").width())/2,900/2)
            .scale(k)
            .translate(-x,-y);

            svg.transition().duration(750).call(zoom.transform, transform);
        })
        .attr("region", (d) => d.properties.codigo_region);
        if(dataStock){
            reOrden(dataStock, true);
        }
        });
        function numberWithPoints(x) {
            return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ".");
        }
        function reOrden(datas, criterio = false) {
            d3.selectAll("path").on("mouseover", function(d) {
            tooltip.transition()
            .duration(200)
            .style("opacity", .9);
            if ($(`div[comuna="${d.properties.nombre_comuna}"]`).find(".panel").length) {
            var card = $(`div[comuna="${d.properties.nombre_comuna}"]`).find(".panel").clone();
            tooltip.html(card.html());
            tooltip.attr("class","panel panel-default").style("background-color", "#DDD");
            } else {
                tooltip.html(`<button type="button" class="btn" style="background-color: #F2E3BD; font-weight:bold;">${d.properties.nombre_comuna}</button>`)
            }
        })
        .on("mouseout", function(d) {
            tooltip.transition()
            .duration(500)
            .style("opacity", 0);
        });
            document.getElementById('local_mapa').innerHTML = '';
            var icon = $("#ordenarBtn").find("i");
            switch ($('#f_orden').val()) {
                case "comuna":
                    if(icon.hasClass("fa-chevron-down")){
                        datas.sort((a,b) => {return a['comuna'] > b['comuna'] ? 1: a['comuna'] < b['comuna'] ? -1: 0});
                    }else{
                        datas.sort((a,b) => {return a['comuna'] < b['comuna'] ? 1: a['comuna'] > b['comuna'] ? -1: 0});
                    }
                    break;
                case "region":
                    if(icon.hasClass("fa-chevron-down")){
                        datas.sort((a,b) => {return a['region'] > b['region'] ? 1: a['region'] < b['region'] ? -1: 0});
                    }else{
                        datas.sort((a,b) => {return a['region'] < b['region'] ? 1: a['region'] > b['region'] ? -1: 0});
                    }
                    break;
                case "ventas_mec":
                    if(icon.hasClass("fa-chevron-down")){
                        datas.sort((a,b) => {return a['ventas_mec'] > b['ventas_mec'] ? 1: a['ventas_mec'] < b['ventas_mec'] ? -1: 0});
                    }else{
                        datas.sort((a,b) => {return a['ventas_mec'] < b['ventas_mec'] ? 1: a['ventas_mec'] > b['ventas_mec'] ? -1: 0});
                    }
                    break;
                case "precio_promedio":
                    if(icon.hasClass("fa-chevron-down")){
                        datas.sort((a,b) => {return a['precio_promedio'] > b['precio_promedio'] ? 1: a['precio_promedio'] < b['precio_promedio'] ? -1: 0});
                    }else{
                        datas.sort((a,b) => {return a['precio_promedio'] < b['precio_promedio'] ? 1: a['precio_promedio'] > b['precio_promedio'] ? -1: 0});
                    }
                    break;
                case "meta":
                    if(icon.hasClass("fa-chevron-down")){
                        datas.sort((a,b) => {return a['meta'] > b['meta'] ? 1: a['meta'] < b['meta'] ? -1: 0});
                    }else{
                        datas.sort((a,b) => {return a['meta'] < b['meta'] ? 1: a['meta'] > b['meta'] ? -1: 0});
                    }
                    break;
                case "variacion":
                    if(icon.hasClass("fa-chevron-down")){
                        datas.sort((a,b) => {return a['variacion'] > b['variacion'] ? 1: a['variacion'] < b['variacion'] ? -1: 0});
                    }else{
                        datas.sort((a,b) => {return a['variacion'] < b['variacion'] ? 1: a['variacion'] > b['variacion'] ? -1: 0});
                    }
                    break;
                case "variacion_precio":
                    if(icon.hasClass("fa-chevron-down")){
                        datas.sort((a,b) => {return a['variacion_precio'] > b['variacion_precio'] ? 1: a['variacion_precio'] < b['variacion_precio'] ? -1: 0});
                    }else{
                        datas.sort((a,b) => {return a['variacion_precio'] < b['variacion_precio'] ? 1: a['variacion_precio'] > b['variacion_precio'] ? -1: 0});
                    }
                    break;
                case "avance":
                    if(icon.hasClass("fa-chevron-down")){
                        datas.sort((a,b) => {return a['avance'] > b['avance'] ? 1: a['avance'] < b['avance'] ? -1: 0});
                    }else{
                        datas.sort((a,b) => {return a['avance'] < b['avance'] ? 1: a['avance'] > b['avance'] ? -1: 0});
                    }
                    break;
            }
            dataStock = datas;
            var element;
            for (let index = 0; index < datas.length; index++) {
                if(index % 4 == 0){
                    element = document.createElement("div");
                    element.classList.add('row');
                    element.classList.add('d-flex');
                    element.classList.add('flex-wrap');
                    element.style.marginTop = '1px';
                    element.style.color = 'black';
                }
                var element2 = document.createElement("div");
                element2.classList.add('col-lg-3');
                element2.style.marginBottom = '1px';
                if(datas[index]['comuna'].substr(datas[index]['comuna'].length - 1) == " "){
                    datas[index]['comuna'] = datas[index]['comuna'].substring(0,datas[index]['comuna'].length - 1);
                }
                element2.setAttribute("comuna", datas[index]['comuna']);
                element2.addEventListener("click", function(){
                    if(datas[index]['comuna'].substr(datas[index]['comuna'].length - 1) == " "){
                        datas[index]['comuna'] = datas[index]['comuna'].substring(0,datas[index]['comuna'].length - 1);
                    }
                    d3.selectAll("path[comuna='"+datas[index]['comuna']+"']").dispatch('click');
                });
                const maxVentasComunas =  d3.max(datas, (d) => d.ventas_mec);
                const maxPrecioPromedio = d3.max(datas, (d) => d.precio_promedio);
                const maxMetasComunas =  d3.max(datas, (d) => d.meta);
                const maxAvance =  d3.max(datas, (d) => d.avance);
                const maxVariacion =  d3.max(datas, (d) => d.variacion);
                const maxVariacionPrecio =  d3.max(datas, (d) => d.variacion_precio);
                const minVariacion =  d3.min(datas, (d) => d.variacion);
                const minVariacionPrecio =  d3.min(datas, (d) => d.variacion_precio);
                const fillScaleComunas = d3
                    .scaleSequential()
                    .interpolator(d3.interpolateReds)
                    .domain([0, maxVentasComunas]);
                const fillScaleComunasPrecio = d3
                    .scaleSequential()
                    .interpolator(d3.interpolateReds)
                    .domain([0, maxPrecioPromedio]);
                const fillScaleComunasMeta = d3
                    .scaleSequential()
                    .interpolator(d3.interpolateReds)
                    .domain([0, maxMetasComunas]);
                const fillScaleComunasAvance = d3
                    .scaleSequential()
                    .interpolator(d3.interpolateReds)
                    .domain([0, maxAvance]);
                var fillScaleComunasVariacion = d3
                    .scaleSequential()
                    .interpolator(d3.interpolateReds)
                    .domain([0, maxVariacion]);
                var fillScaleComunasVariacionPrecio = d3
                    .scaleSequential()
                    .interpolator(d3.interpolateReds)
                    .domain([0, maxVariacionPrecio]);
                if(minVariacion < 0){
                    var extremo = d3.max([minVariacion, maxVariacion], (d) => Math.abs(d));
                    var fillScaleComunasVariacion = d3
                        .scaleSequential()
                        .interpolator(d3.interpolateGreens)
                        .domain([0, extremo])
                    var fillScaleComunasVariacionNeg = d3
                        .scaleSequential()
                        .interpolator(d3.interpolateReds)
                        .domain([0, -extremo])
                }
                if(minVariacionPrecio < 0){
                    var extremoPrecio = d3.max([minVariacionPrecio, maxVariacionPrecio], (d) => Math.abs(d));
                    var fillScaleComunasVariacionPrecio = d3
                        .scaleSequential()
                        .interpolator(d3.interpolateGreens)
                        .domain([0, extremoPrecio])
                    var fillScaleComunasVariacionPrecioNeg = d3
                        .scaleSequential()
                        .interpolator(d3.interpolateReds)
                        .domain([0, -extremoPrecio])
                }
                if(criterio){
                    d3.selectAll("path[comuna='"+datas[index]['comuna']+"']").attr("fill", (d) => {
                        if ($("#tipo_vis").val() == "ventas_mec") {
                            return (!isNaN(datas[index]['ventas_mec'])) ? fillScaleComunas((datas[index]['ventas_mec'])) : fillScaleComunas(0);
                        }else if($("#tipo_vis").val() == "precio_promedio"){
                            return (!isNaN(datas[index]['precio_promedio'])) ? fillScaleComunasPrecio((datas[index]['precio_promedio'])) : fillScaleComunasPrecio(0);
                        }else if($("#tipo_vis").val() == "meta"){
                            return (!isNaN(datas[index]['meta'])) ? fillScaleComunasMeta((datas[index]['meta'])) : fillScaleComunasMeta(0);
                        }else if($("#tipo_vis").val() == "avance"){
                            return (!isNaN(datas[index]['avance'])) ? fillScaleComunasAvance((datas[index]['avance'])) : fillScaleComunasAvance(0);
                        }else if($("#tipo_vis").val() == "variacion"){
                            return (!isNaN(datas[index]['variacion'])) ? ((datas[index]['variacion'] >= 0) ? fillScaleComunasVariacion(datas[index]['variacion']) : fillScaleComunasVariacionNeg(datas[index]['variacion'])) : fillScaleComunasVariacion(0);
                        }else if($("#tipo_vis").val() == "variacion_precio"){
                            return (!isNaN(datas[index]['variacion_precio'])) ? ((datas[index]['variacion_precio'] >= 0) ? fillScaleComunasVariacionPrecio(datas[index]['variacion_precio']) : fillScaleComunasVariacionPrecioNeg(datas[index]['variacion_precio'])) : fillScaleComunasVariacionPrecio(0);
                        }
                        else{
                            return (!isNaN(datas[index]['dias_inv'])) ? fillScaleComunas(datas[index]['dias_inv']) : fillScaleComunas(0);
                        }
                    });
                }
                var element3 = document.createElement("div");
                element3.classList.add('panel');
                element3.classList.add('panel-default');
                element3.style.marginBottom = '10px';
                element3.style.backgroundColor = '#DDDDDD';
                element3.setAttribute("panel_id", datas[index]['panel_id']);
                element3.setAttribute("id", datas[index]['comuna']);
                element3.onmouseenter = function () {
                    $(this).stop().animate({boxShadow: '0 0 15px #000'});
                }
                element3.onmouseleave = function () {
                    $(this).stop().animate({boxShadow: '0 0 0 #fff'});
                }
                var element4 = document.createElement("div");
                element4.classList.add('panel-heading');
                element4.style.padding ="4px 15px";
                var element5 = document.createElement("p");
                if (datas[index]['region'].split(" - ").length > 1) {
                    element5.innerHTML = datas[index]['region'].split(" - ")[1];
                    element5.title = datas[index]['region'].split(" - ")[0];
                }else{
                    element5.innerHTML = datas[index]['region'];
                    element5.title = datas[index]['region'];
                }
                element5.style.margin ="0px";
                var element6 = document.createElement("div");
                element6.innerHTML = datas[index]['comuna'];
                element6.style.display = "-webkit-box";
                element6.style.fontSize = "14px";
                element6.style.fontWeight = "bold";
                element6.style.padding ="10px 15px";
                element6.style.borderBottom = "1px solid #e6e6e6";
                var element7 = document.createElement("div");
                element7.classList.add('panel-body');
                element7.style.backgroundColor = "rgba(255, 255, 255, 0.33)";
                element7.style.padding ="0px";
                var element8 = document.createElement("p");
                element8.style.fontSize = '12px';
                element8.style.margin = '0 0 0 0';
                element8.style.padding ="5px 15px";
                var ventas = numberWithPoints(datas[index]['ventas_mec']);
                element8.style.borderBottom = "1px solid #e6e6e6";
                if (datas[index]['ventas_mec']!=0) {
                    element8.innerHTML = ` <span>Ventas (MEC): <br> $${ventas}</span>`;
                }else{
                    element8.innerHTML = ` <span>Ventas (MEC): <br> $0</span>`;
                }
                var element9 = document.createElement("p");
                element9.style.fontSize = '12px';
                element9.style.margin = '0 0 0 0';
                element9.style.padding ="5px 15px";
                element9.style.borderBottom = "1px solid #363636";
                var varIcon = (datas[index]['variacion'] > 0) ? '<i style="color: green" class="fas fa-caret-up"></i>' : '<i style="color:red" class="fas fa-caret-down"></i>';
                var variacion = Math.abs(datas[index]['variacion']).toString().replace(".", ",");
                if (datas[index]['variacion']!=0) {
                    element9.innerHTML = ` ${varIcon} <span> ${variacion}%</span>`;
                }else{
                    element9.innerHTML = ` ${varIcon} <span> -%</span>`;
                }
                var element10 = document.createElement("p");
                element10.style.fontSize = '12px';
                element10.style.margin = '0 0 0 0';
                element10.style.padding ="5px 15px";
                var precio_promedio = numberWithPoints(datas[index]['precio_promedio']);
                element10.style.borderBottom = "1px solid #e6e6e6";
                if (datas[index]['precio_promedio']!=0) {
                    element10.innerHTML = ` <span>Precio Promedio (MEC): <br> $${precio_promedio}</span>`;
                }else{
                    element10.innerHTML = ` <span>Precio Promedio (MEC): <br> $0</span>`;
                }
                var element11 = document.createElement("p");
                element11.style.fontSize = '12px';
                element11.style.margin = '0 0 0 0';
                element11.style.padding ="5px 15px";
                element11.style.borderBottom = "1px solid #363636";
                var varIcon_precio = (datas[index]['variacion_precio'] > 0) ? '<i style="color: green" class="fas fa-caret-up"></i>' : '<i style="color:red" class="fas fa-caret-down"></i>';
                var variacion_precio = Math.abs(datas[index]['variacion_precio']).toString().replace(".", ",");
                if (datas[index]['variacion_precio']!=0) {
                    element11.innerHTML = ` ${varIcon_precio} <span sort="false" criterio="variacion_precio"> ${variacion_precio}%</span>`;
                }else{
                    element11.innerHTML = ` ${varIcon_precio} <span sort="false" criterio="variacion_precio"> -%</span>`;
                }
                var element12 = document.createElement("p");
                element12.style.fontSize = '12px';
                element12.style.margin = '0 0 0 0';
                element12.style.padding ="5px 15px";
                element12.style.borderBottom = "1px solid #363636";
                var meta = numberWithPoints(datas[index]['meta']);
                if (datas[index]['meta']!=0) {
                    element12.innerHTML = ` <span>Meta ($): <br> $${meta}</span>`;
                }else{
                    element12.innerHTML = ` <span>Meta ($): <br> $0</span>`;
                }
                var element13 = document.createElement("p");
                element13.style.fontSize = '12px';
                element13.style.margin = '0 0 0 0';
                element13.style.padding ="5px 15px";
                if (datas[index]['avance']!=0) {
                    element13.innerHTML = 'Avance: '+
                    (datas[index]['avance']).toString()+'%';
                }else{
                    element13.innerHTML = 'Avance: -%';
                }
                element7.appendChild(element8);
                element7.appendChild(element9);
                element7.appendChild(element10);
                element7.appendChild(element11);
                element7.appendChild(element12);
                element7.appendChild(element13);
                element4.appendChild(element5);
                element3.appendChild(element4);
                element3.appendChild(element6);
                element3.appendChild(element7);
                element2.appendChild(element3);
                element.appendChild(element2);
                if(index % 4 == 3 || index == datas.length-1){
                    document.getElementById('local_mapa').appendChild(element);
                }
                //crearMarcador(datas[index]["latitud"], datas[index]["longitud"], "<b>"+datas[index]['local']+"</b><br>Stock Total: " + datas[index]["total_stock"].toFixed(0).toLocaleString(), datas[index]["panel_id"], false);
            }
            //centrar(datas[0]["latitud"], datas[0]["longitud"]);
        }
        function cambiarOrden(boton, cliente) {
            if(boton.getElementsByTagName('i')[0].classList.contains('fa-chevron-up')){
                boton.getElementsByTagName('i')[0].classList.remove('fa-chevron-up');
                boton.getElementsByTagName('i')[0].classList.add('fa-chevron-down');
            }else{
                boton.getElementsByTagName('i')[0].classList.add('fa-chevron-up');
                boton.getElementsByTagName('i')[0].classList.remove('fa-chevron-down');
            }
            if(dataStock){
                reOrden(dataStock, false);
            }else{
                getMapVentaPrecioMeta(cliente);
            }
        }
        function aplicarCriterio(button) {
            if(dataStock){
                reOrden(dataStock, true);
            }
        }
        $('#f_orden').on('select2:select', function (e) {
            reOrden(dataStock);
        });
        getMapVentaPrecioMeta('{{$cliente}}');

        $('#f_ctg').on('select2:select',function (e) {
            if(e.params.data['id'] == 50){
                $('#orden_sellout2').hide();
                if($('#orden_stock2').hasClass('d-none')){
                    $('#orden_stock2').removeClass('d-none');
                }else{
                    $('#orden_stock2').show();
                }
                mostrarMarcador(false);
            }else{
                $('#orden_sellout2').show();
                $('#orden_stock2').hide();
                mostrarMarcador(true);
            }
            if(e.params.data['id'] == "2" && dataSellout){
                reOrden(dataSellout, true);
            }else if(e.params.data['id'] == "50" && dataStock){
                reOrden(dataStock, false);
            }else{
                //getMapAlertas(cliente);
            }
        });
    </script>
@endsection