var map, googleSat, marker, polygon;

let evaluationElement = document.getElementById("evaluations");
let evaluation = JSON.parse(evaluationElement.dataset.evaluations);

document.addEventListener("DOMContentLoaded", function () {
    initMap();
    map.invalidateSize();
    console.log(evaluation);
    setEvaluationToMap();
});

function initMap() {
    map = L.map("map", {
        attributionControl: false,
    }).setView([-8.172495095862395, 113.69876818661332], 10);

    googleSat = L.tileLayer(
        "http://{s}.google.com/vt?lyrs=s&x={x}&y={y}&z={z}",
        {
            maxZoom: 20,
            subdomains: ["mt0", "mt1", "mt2", "mt3"],
        }
    ).addTo(map);
}

function setEvaluationToMap() {
    evaluation.forEach((evaluation) => {
        let coordinates = evaluation.land.detail_lands.map((detail) => {
            return [detail.lat, detail.lng];
        });

        let cfValue = evaluation.cf_value * 100;
        console.log(cfValue.toFixed(2));

        polygon = L.polygon(coordinates, {
            color: "blue",
            fillColor: "blue",
            fillOpacity: 0.5,
        }).addTo(map);

        marker = L.marker(coordinates[0])
            .addTo(map)
            .bindPopup(
                `<div class="text-center font-semibold"><b> Hasil presentase CF pada lahan <br /> ${
                    evaluation.land.owner
                }</br>${cfValue.toFixed(2)} %</b></div>`
            );
    });
}