var result = [];
$(document).ready(function () {
    PopulateLokasi();
});

function PopulateLokasi() {
    $.ajax({
        url: "https://banksampah.jakarta.go.id/api/web/index",
        method: 'GET',
        success: function (result) {
            arrTipeLokasi = [];
            arrTipeLokasi = result;
            drawTipeLokasi(result);
        }
    });
}
function drawTipeLokasi(result) {
    const map = L.map('map', {
        scrollWheelZoom: false
    })
        //.setView([-6.149451590260942, 106.84327788839438], 10.5)
    .setView([-6.18451590260942, 106.84327788839438], 11.5)
    L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
        attribution: '  '
    }).addTo(map);
    [
        "jakut",
        "jaksel",
        "jakpus",
        "jaktim",
        "jakbar",
        "kep1000",
    ].map((city) => {
        $.getJSON(`/StaticFiles/geojson/id-jk-${city}.geojson`, (data) => {
            L.geoJSON(data, {
                color: '#4f9bd9',
                fillColor: '#fff',
                fillOpacity: 0.1,
                radius: 500
            }).addTo(map);
        })
    })
    let markers = [], options
    for (var i in result) {
        var regexLat = new RegExp('^(\\+|-)?(?:90(?:(?:\\.0{1,20})?)|(?:[0-9]|[1-8][0-9])(?:(?:\\.[0-9]{1,20})?))$');
        var regexLong = new RegExp('^(\\+|-)?(?:180(?:(?:\\.0{1,20})?)|(?:[0-9]|[1-9][0-9]|1[0-7][0-9])(?:(?:\\.[0-9]{1,20})?))$');

        if (!regexLat.exec(result[i].latitude)) {
            console.log(result[i].id+" - "+result[i].latitude);
        } else if (!regexLong.exec(result[i].longitude)) {
            console.log(result[i].id + " - " +result[i].longitude);
        }   
        else {
            options = {
                icon: L.divIcon({
                    iconSize: 'auto',
                    html: `<a href="/detail_lokasi/?id=${result[i].id}">
                      <div style="width: 5rem; margin-left:-2.4rem; margin-right:-2.4rem; wrap:wrap; 
                        margin-top:-0.2rem; background:transparent; gap:0.5rem" class="d-flex flex-column align-items-center justify-content-center">
                        <div title="" class="marker-circle rounded-circle d-block bg-${result[i].color} d-flex justify-content-center align-items-center text-white"
                            style="transition: 0.5s;width:1rem;height:1rem;font-size: 0.5rem; border-width:0.1rem; border-style:solid; border-color:rgba(255,255,255,0.5)">
                        </div>
                      </div>
                  </a>`,
                })
            }
            markers[100] = L.marker([result[i].latitude, result[i].longitude], options).addTo(map);
        }
       

       
    }


    var legend = L.control({ position: "bottomleft" });
    legend.onAdd = function (map) {
        var div = L.DomUtil.create("div", "legend");
        div.innerHTML += "<h4>Keterangan</h4>";
        div.innerHTML += '<i style="background: #499F68"></i><span>Bank Sampah Unit</span><br>';
        div.innerHTML += '<i style="background: #DD1C1A"></i><span>Bank Sampah Induk</span><br>';
        return div;
    };

    legend.addTo(map);

}