@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(['comuna' => 'Comuna', 'cantidad' => 'Cantidad de locales (Q)', 'region' => 'Región', 'ven_loc' => 'Ventas por Local ($)', 'loc_sin_ven' => 'locales sin Venta (Q)', 'loc_con_ven' => 'locales con Ventas (%)', 'desco' => 'locales Descontinuados (Q)', 'cob' => 'Cobertura (%)']);
    $tipo = json_encode(['cantidad' => 'Cantidad de locales (Q)', 'ven_loc' => 'Ventas por Local ($)', 'loc_sin_ven' => 'locales sin Venta (Q)', 'loc_con_ven' => 'locales con Ventas (%)', 'desco' => 'locales Descontinuados (Q)', 'cob' => 'Cobertura (%)']);
    $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 = '* Cantidad de locales en el sector \n * Total de ventas por local. \n * Total de locales sin venta. \n * Total de locales con venta. \n * Total de locales descontinuados. \n * Cobertura.';
    }
@endphp
    <x-tabla id="maplocales" style="{{$display_tabla}}; margin-top:30px;" :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="getMapDist('{{$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">
            </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">
                                    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?v=20250223")}}"></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")."';
                    const poblacion = '".asset("geojson/poblacion_comuna_2022.csv")."';</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);
        }
        });

        //ayuda(dataStock);
        
        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 = '';
            switch ($('#f_orden').val()) {
                case "comuna":
                    if($("button i").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($("button i").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 "cantidad":
                    if($("button i").hasClass("fa-chevron-down")){
                        datas.sort((a,b) => {return a['locales'] > b['locales'] ? 1: a['locales'] < b['locales'] ? -1: 0});
                    }else{
                        datas.sort((a,b) => {return a['locales'] < b['locales'] ? 1: a['locales'] > b['locales'] ? -1: 0});
                    }
                    break;
                case "ven_loc":
                    if($("button i").hasClass("fa-chevron-down")){
                        datas.sort((a,b) => {return (a['ventas30']/a['locales']) > (b['ventas30']/b['locales']) ? 1: (a['ventas30']/a['locales']) < (b['ventas30']/b['locales']) ? -1: 0});
                    }else{
                        datas.sort((a,b) => {return (a['ventas30']/a['locales']) < (b['ventas30']/b['locales']) ? 1: (a['ventas30']/a['locales']) > (b['ventas30']/b['locales']) ? -1: 0});
                    }
                    break;
                case "loc_sin_ven":
                    if($("button i").hasClass("fa-chevron-down")){
                        datas.sort((a,b) => {return a['locales_sin_venta'] > b['locales_sin_venta'] ? 1: a['locales_sin_venta'] < b['locales_sin_venta'] ? -1: 0});
                    }else{
                        datas.sort((a,b) => {return a['locales_sin_venta'] < b['locales_sin_venta'] ? 1: a['locales_sin_venta'] > b['locales_sin_venta'] ? -1: 0});
                    }
                    break;
                case "loc_con_ven":
                    if($("button i").hasClass("fa-chevron-down")){
                        datas.sort((a,b) => {return ((a['locales']-a['locales_sin_venta'])/a['locales'])*100 > ((b['locales']-b['locales_sin_venta'])/b['locales'])*100 ? 1: ((a['locales']-a['locales_sin_venta'])/a['locales'])*100 < ((b['locales']-b['locales_sin_venta'])/b['locales'])*100 ? -1: 0});
                    }else{
                        datas.sort((a,b) => {return ((a['locales']-a['locales_sin_venta'])/a['locales'])*100 < ((b['locales']-b['locales_sin_venta'])/b['locales'])*100 ? 1: ((a['locales']-a['locales_sin_venta'])/a['locales'])*100 > ((b['locales']-b['locales_sin_venta'])/b['locales'])*100 ? -1: 0});
                    }
                    break;
                case "desco":
                    if($("button i").hasClass("fa-chevron-down")){
                        datas.sort((a,b) => {return a['descont'] > b['descont'] ? 1: a['descont'] < b['descont'] ? -1: 0});
                    }else{
                        datas.sort((a,b) => {return a['descont'] < b['descont'] ? 1: a['descont'] > b['descont'] ? -1: 0});
                    }
                    break;
                case "cob":
                    if($("button i").hasClass("fa-chevron-down")){
                        datas.sort((a,b) => {return a['cobertura'] > b['cobertura'] ? 1: a['cobertura'] < b['cobertura'] ? -1: 0});
                    }else{
                        datas.sort((a,b) => {return a['cobertura'] < b['cobertura'] ? 1: a['cobertura'] > b['cobertura'] ? -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 maxCobertura =  d3.max(datas, (d) => d.cobertura);
                const maxConVentas = d3.max(datas, (d) => (d.locales-d.locales_sin_venta)/d.locales);
                const maxSinVentas =  d3.max(datas, (d) => d.locales_sin_venta);
                const maxlocales =  d3.max(datas, (d) => d.locales);
                const maxVentasLocal =  d3.max(datas, (d) => (d.ventas30/d.locales));
                const maxDescontinuados =  d3.max(datas, (d) => d.descont);
                const fillScaleCobertura = d3
                    .scaleSequential()
                    .interpolator(d3.interpolateReds)
                    .domain([0, maxCobertura]);
                const fillScaleConVentas = d3
                    .scaleSequential()
                    .interpolator(d3.interpolateReds)
                    .domain([0, maxConVentas]);
                const fillScaleSinVentas = d3
                    .scaleSequential()
                    .interpolator(d3.interpolateReds)
                    .domain([0, maxSinVentas]);
                const fillScalelocales = d3
                    .scaleSequential()
                    .interpolator(d3.interpolateReds)
                    .domain([0, maxlocales]);
                const fillScaleVentasLocal = d3
                    .scaleSequential()
                    .interpolator(d3.interpolateReds)
                    .domain([0, maxVentasLocal]);
                const fillScaleDescontinuados = d3
                    .scaleSequential()
                    .interpolator(d3.interpolateReds)
                    .domain([0, maxDescontinuados]);
                if(criterio){
                    d3.selectAll("path[comuna='"+datas[index]['comuna']+"']").attr("fill", (d) => {
                        if ($("#tipo_vis").val() == "cob") {
                            return (!isNaN(datas[index]['cobertura'])) ? fillScaleCobertura((datas[index]['cobertura'])) : fillScaleCobertura(0);
                        }else if($("#tipo_vis").val() == "loc_con_ven"){
                            return (!isNaN(datas[index]['locales'])) ? fillScaleConVentas((datas[index]['locales']-datas[index]['locales_sin_venta']/datas[index]['locales'])) : fillScaleConVentas(0);
                        }else if($("#tipo_vis").val() == "loc_sin_ven"){
                            return (!isNaN(datas[index]['locales_sin_venta'])) ? fillScaleSinVentas((datas[index]['locales_sin_venta'])) : fillScaleSinVentas(0);
                        }else if($("#tipo_vis").val() == "cantidad"){
                            return (!isNaN(datas[index]['locales'])) ? fillScalelocales((datas[index]['locales'])) : fillScalelocales(0);
                        }else if($("#tipo_vis").val() == "ven_loc"){
                            return (!isNaN(datas[index]['locales'])) ? fillScaleVentasLocal(datas[index]['ventas30']/datas[index]['locales']) : fillScaleVentasLocal(0);
                        }else if($("#tipo_vis").val() == "desco"){
                            return (!isNaN(datas[index]['descont'])) ? fillScaleDescontinuados(datas[index]['descont']) : fillScaleDescontinuados(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";
                element8.style.borderBottom = "1px solid #e6e6e6";
                if (datas[index]['cobertura']!=0) {
                    element8.innerHTML = 'Cobertura: '+
                    (datas[index]['cobertura']*100).toFixed(1).toString()+'%';
                }else{
                    element8.innerHTML = 'Cobertura: -%';
                }
                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 #e6e6e6";
                if (datas[index]['locales']!=0) {
                    element9.innerHTML = 'locales con Ventas: '+
                    ((datas[index]['locales']-datas[index]['locales_sin_venta'])/datas[index]['locales']*100).toFixed(1).toString()+'%';
                }else{
                    element9.innerHTML = 'locales con Ventas: -%';
                }
                var element10 = document.createElement("p");
                element10.style.fontSize = '12px';
                element10.style.margin = '0 0 0 0';
                element10.style.padding ="5px 15px";
                element10.style.borderBottom = "1px solid #e6e6e6";
                if (datas[index]['locales_sin_venta']!=0) {
                    element10.innerHTML = 'locales Sin Venta: '+
                    (datas[index]['locales_sin_venta']).toString();
                }else{
                    element10.innerHTML = 'locales Sin Venta: 0';
                }
                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 #e6e6e6";
                if (datas[index]['locales']!=0) {
                    element11.innerHTML = 'locales: '+
                    (datas[index]['locales']).toString();
                }else{
                    element11.innerHTML = 'locales : 0';
                }
                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 #e6e6e6";
                if (datas[index]['locales']!=0) {
                    element12.innerHTML = 'Ventas por Local (Últimos 30 días): '+
                    '$'+numberWithPoints((datas[index]['ventas30']/datas[index]['locales']).toFixed(0));
                }else{
                    element12.innerHTML = 'Ventas por Local (Últimos 30 días): $0';
                }
                var element13 = document.createElement("p");
                element13.style.fontSize = '12px';
                element13.style.margin = '0 0 0 0';
                element13.style.padding ="5px 15px";
                element13.style.borderBottom = "1px solid #e6e6e6";
                if (datas[index]['descont']!=0) {
                    element13.innerHTML = 'locales Descontinuados: '+
                    (datas[index]['descont']);
                }else{
                    element13.innerHTML = 'locales Descontinuados: 0';
                }
                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{
                getMapDist(cliente);
            }
        }
        function aplicarCriterio(button) {
            if(dataStock){
                reOrden(dataStock, true);
            }
        }
        $('#f_orden').on('select2:select', function (e) {
            reOrden(dataStock);
        });
        getMapDist('{{$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