var mapEdit, drawnItems, drawControl, googleStreets, iconMarker;
var currentMarkerEdit = null;

var formEdit = document.getElementById("edit-form");
var provinceEditField = formEdit.querySelector("#province-edit-field");
var provinceEditVal = new Choices(provinceEditField);

var regencyEditContainer = formEdit.querySelector("#regency-edit-container");
let regencyCode = formEdit.querySelector("#regency-code").dataset.regency;
var regencyEditField = formEdit.querySelector("#regency-edit-field");
var regencyEditVal = new Choices(regencyEditField, {
    shouldSort: false,
});

var districtEditContainer = formEdit.querySelector("#district-edit-container");
let districtCode = formEdit.querySelector("#district-code").dataset.district;
var districtEditField = formEdit.querySelector("#district-edit-field");
var districtEditVal = new Choices(districtEditField, {
    shouldSort: false,
});

var addressEditContainer = formEdit.querySelector("#address-edit-container");
var addressEditField = formEdit.querySelector("#address-edit-field");

var mapEditConatiner = formEdit.querySelector("#map-edit-container");
var latEditField = formEdit.querySelector("#lat-edit");
var lngEditField = formEdit.querySelector("#lng-edit");

let latDb = formEdit.querySelector("#lat-db").dataset.lat;
let lngDb = formEdit.querySelector("#lng-db").dataset.lng;

var loadingEdit = formEdit.querySelector("#loading-edit");
var btnEditContainer = formEdit.querySelector("#edit-footer");

function initMapEdit() {
    mapEdit = L.map("map-edit", {
        attributionControl: false,
    }).setView([-8.157416852745705, 113.72281580436439], 16);

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

    iconMarker = L.icon({
        iconUrl: "/assets/images/marker.png",
        iconSize: [50, 50],
        iconAnchor: [25, 50],
        popupAnchor: [0, -50],
    });

    currentMarkerEdit = L.marker([-8.157416852745705, 113.72281580436439], {
        icon: iconMarker,
        draggable: true,
    })
        .addTo(mapEdit)
        .bindPopup(
            `<div class="text-center"><b>Anda berada di sini</b><br />Silahkan tentukan petak lahan.<br />Pastikan lokasi anda sudah benar.</div>`
        );

    drawnItems = new L.FeatureGroup();
    mapEdit.addLayer(drawnItems);

    drawControl = new L.Control.Draw({
        draw: {
            polygon: true, // Izinkan user menggambar polygon
            polyline: false,
            rectangle: false,
            circle: false,
            marker: false,
            circlemarker: false,
        },
        edit: {
            featureGroup: drawnItems, // Edit hanya objek yang sudah digambar
            remove: true, // Izinkan menghapus objek
        },
    });
    mapEdit.addControl(drawControl);

    mapEdit.on("draw:created", handleDrawCreated);
    mapEdit.on("draw:edited", handleDrawEdited);
    mapEdit.invalidateSize();
}

document.addEventListener("DOMContentLoaded", function () {
    initMapEdit();
    getRegencies(provinceEditField.value);
    getDistricts(regencyCode);
    setMapEdit();
});

function getProvinces(provinceId) {
    return new Promise(function (resolve, reject) {
        $.ajax({
            url: "/location/get-province",
            type: "GET",
            success: function (response) {
                if (response.success) {
                    const province = response.data.find(
                        (province) => province.id == provinceId
                    );

                    resolve(province);
                } else {
                    reject(new Error("Terjadi kesalahan saat mengambil data"));
                }
            },
            error: function (xhr, status, error) {
                reject(new Error("Terjadi kesalahan saat mengambil data"));
            },
        });
    });
}

function getRegencies(provinceId) {
    regencyEditContainer.style.display = "none";
    districtEditContainer.style.display = "none";
    addressEditContainer.style.display = "none";
    loadingEdit.style.display = "block";
    mapEditConatiner.style.display = "none";

    const url = "/location/get-regency/" + provinceId;
    $.ajax({
        url: url,
        type: "GET",
        success: function (response) {
            if (response.success) {
                loadingEdit.style.display = "none";
                const data = response.data;

                regencyEditVal.clearStore();
                regencyEditVal.clearChoices();

                regencyEditVal.value = "";
                regencyEditVal.setChoices([
                    {
                        value: "",
                        label: "Pilih Kabupaten",
                        selected: false,
                        disabled: true,
                    },
                ]);

                if (Array.isArray(data)) {
                    regencyEditVal.setChoices(
                        data.map((regency) => ({
                            value: regency.id,
                            label: regency.name,
                            selected: regency.id == regencyCode,
                            disabled: false,
                        }))
                    );
                    regencyEditContainer.style.display = "block";
                } else {
                    mapEditConatiner.style.display = "block";
                    mapEditConatiner.innerHTML =
                        "<p class='text-center text-muted'>Terjadi kesalaahan saat mengambil data, silahkan coba beberapa saat lagi</p>";
                }
            }
        },
        error: function (xhr, status, error) {
            mapEditConatiner.style.display = "block";
            mapEditConatiner.innerHTML =
                "<p class='text-center text-muted'>Terjadi kesalaahan saat mengambil data, silahkan coba beberapa saat lagi</p>";
        },
    });
}

function getDistricts(regencyId) {
    districtEditContainer.style.display = "none";
    addressEditContainer.style.display = "none";
    loadingEdit.style.display = "block";
    mapEditConatiner.style.display = "none";

    const url = "/location/get-district/" + regencyId;
    $.ajax({
        url: url,
        type: "GET",
        success: function (response) {
            if (response.success) {
                loadingEdit.style.display = "none";
                const data = response.data;

                districtEditVal.clearStore();
                districtEditVal.clearChoices();

                districtEditVal.value = "";
                districtEditVal.setChoices([
                    {
                        value: "",
                        label: "Pilih Kecamatan",
                        selected: false,
                        disabled: true,
                    },
                ]);

                if (Array.isArray(data)) {
                    districtEditVal.setChoices(
                        data.map((district) => ({
                            value: district.id,
                            label: district.name,
                            selected: district.id == districtCode,
                            disabled: false,
                        }))
                    );
                    districtEditContainer.style.display = "block";
                } else {
                    mapEditConatiner.style.display = "block";
                    mapEditConatiner.innerHTML =
                        "<p class='text-center text-muted'>Terjadi kesalaahan saat mengambil data, silahkan coba beberapa saat lagi</p>";
                }
            }
        },
        error: function (xhr, status, error) {
            mapEditConatiner.style.display = "block";
            mapEditConatiner.innerHTML =
                "<p class='text-center text-muted'>Terjadi kesalaahan saat mengambil data, silahkan coba beberapa saat lagi</p>";
        },
    });
}

function showmap(districtId) {
    loadingEdit.style.display = "block";
    if (!navigator.geolocation) {
        alert("Geolocation tidak didukung oleh browser ini.");
        return;
    }

    navigator.geolocation.getCurrentPosition(
        function (position) {
            loadingEdit.style.display = "none";

            mapEditConatiner.style.display = "block";
            mapEdit.invalidateSize();

            addressEditContainer.style.display = "block";

            btnEditContainer.style.display = "block";

            var lat = position.coords.latitude;
            var lng = position.coords.longitude;

            console.log(lat, lng);

            mapEdit.setView([lat, lng], 16);

            if (currentMarkerEdit) {
                mapEdit.removeLayer(currentMarkerEdit);
            }

            var iconMarker = L.icon({
                iconUrl: "/assets/images/marker.png",
                iconSize: [50, 50],
                iconAnchor: [25, 50],
                popupAnchor: [0, -50],
            });

            currentMarkerEdit = L.marker([lat, lng], {
                icon: iconMarker,
                draggable: true,
            }).addTo(mapEdit);

            currentMarkerEdit.on("dragend", onPointerDragend);

            currentMarkerEdit
                .bindPopup(
                    `<div class="text-center"><b>Anda berada di sini</b><br />Silahkan tentukan petak lahan.<br />Pastikan lokasi anda sudah benar.</div>`
                )
                .openPopup();

            latEditField.value = lat;
            lngEditField.value = lng;
        },
        function (error) {
            alert("Error: " + error.message);
        }
    );
}

function setMapEdit() {
    loadingEdit.style.display = "block";

    mapEditConatiner.style.display = "block";
    mapEdit.invalidateSize();
    addressEditContainer.style.display = "block";
    btnEditContainer.style.display = "block";
    mapEdit.setView([latDb, lngDb], 16);

    if (currentMarkerEdit) {
        mapEdit.removeLayer(currentMarkerEdit);
    }

    var iconMarker = L.icon({
        iconUrl: "/assets/images/marker.png",
        iconSize: [50, 50],
        iconAnchor: [25, 50],
        popupAnchor: [0, -50],
    });

    currentMarkerEdit = L.marker([latDb, lngDb], {
        icon: iconMarker,
        draggable: true,
    }).addTo(mapEdit);

    currentMarkerEdit.on("dragend", onPointerDragend);

    currentMarkerEdit
        .bindPopup(
            `<div class="text-center"><b>Anda berada di sini</b><br />Silahkan tentukan petak lahan.<br />Pastikan lokasi anda sudah benar.</div>`
        )
        .openPopup();
}

async function updateData(data) {
    const land = data.land;
    const userRole = data.role;

    var ownerEditField = formEdit.querySelector("#owner-edit-field");
    var noHpEditField = formEdit.querySelector("#nohp-edit-field");
    var rentalPriceEditField = formEdit.querySelector(
        "#rentalprice-edit-field"
    );
    var rentalStartEditField = formEdit.querySelector(
        "#rentalstart-edit-field"
    );
    var rentalUntilEditField = formEdit.querySelector(
        "#rentaluntil-edit-field"
    );
    var landNameEditField = formEdit.querySelector("#landname-edit-field");
    var provinceEditField = formEdit.querySelector("#province-edit-field");
    var provinceEditVal = new Choices(provinceEditField);

    let rentalPrice = new Intl.NumberFormat("id-ID", {
        style: "currency",
        currency: "IDR",
        minimumFractionDigits: 0,
    }).format(land.rental_price);

    ownerEditField.value = land.owner;
    noHpEditField.value = land.no_hp;
    rentalPriceEditField.value = rentalPrice.replace(/Rp\s?/g, "").trim();
    rentalStartEditField.value = land.rental_start;
    rentalUntilEditField.value = land.rental_until;
    landNameEditField.value = land.land_name;
    provinceEditField.value = land.province_code;
    try {
        const province = await getProvinces(land.province_code);
        provinceEditVal.setChoices([
            {
                value: province.id,
                label: province.name,
                selected: true,
                disabled: true,
            },
        ]);

        $.ajax({
            type: "GET",
            url: "/location/get-regency/" + land.province_code,
            success: function (response) {
                if (response.success) {
                    const dataRegencies = response.data;
                    const regencies = response.data.find(
                        (regency) => regency.id === parseInt(land.regency_code)
                    );

                    regencyEditVal.setChoices([
                        {
                            value: regencies.id,
                            label: regencies.name,
                            selected: true,
                            disabled: true,
                        },
                    ]);

                    if (Array.isArray(dataRegencies)) {
                        regencyEditVal.setChoices(
                            dataRegencies.map((regency) => ({
                                value: regency.id,
                                label: regency.name,
                                selected: false,
                                disabled: false,
                            }))
                        );
                    } else {
                        mapEditConatiner.style.display = "block";
                        mapEditConatiner.innerHTML =
                            "<p class='text-center text-muted'>Terjadi kesalaahan saat mengambil data, silahkan coba beberapa saat lagi</p>";
                    }
                }
            },
        });

        $.ajax({
            type: "GET",
            url: "/location/get-district/" + land.regency_code,
            success: function (response) {
                if (response.success) {
                    const dataDistricts = response.data;
                    const districts = response.data.find(
                        (district) =>
                            district.id === parseInt(land.district_code)
                    );

                    districtEditVal.setChoices([
                        {
                            value: districts.id,
                            label: districts.name,
                            selected: true,
                            disabled: true,
                        },
                    ]);

                    if (Array.isArray(dataDistricts)) {
                        districtEditVal.setChoices(
                            dataDistricts.map((district) => ({
                                value: district.id,
                                label: district.name,
                                selected: false,
                                disabled: false,
                            }))
                        );
                    } else {
                        mapEditConatiner.style.display = "block";
                        mapEditConatiner.innerHTML =
                            "<p class='text-center text-muted'>Terjadi kesalaahan saat mengambil data, silahkan coba beberapa saat lagi</p>";
                    }
                }
            },
        });

        addressEditContainer.style.display = "block";
        addressEditField.value = land.address;

        mapEdit.setView([land.latitude, land.longitude], 16);
        currentMarkerEdit
            .setLatLng([land.latitude, land.longitude])
            .openPopup();

        latEditField.value = land.latitude;
        lngEditField.value = land.longitude;

        if (userRole === "admin") {
            formEdit.action = "/data-lahan/" + land.id;
        } else {
            formEdit.action = "/data-lahan-petugas/" + land.id;
        }
    } catch (error) {
        console.log(error);
    }
}

function handleDrawCreated(e) {
    var layer = e.layer;
    drawnItems.addLayer(layer);
    var coordinates = layer.getLatLngs()[0];
    console.log("Koordinat Polygon:", coordinates);
    polygonField.value = JSON.stringify(coordinates);

    layer.bindPopup("<b>Petak Lahan Berhasil Dibuat!</b>").openPopup();
    btnContainer.style.display = "block";
}

function handleDrawEdited(e) {
    var layers = e.layers;
    layers.eachLayer(function (layer) {
        var coordinates = layer.getLatLngs();
        console.log("Koordinat setelah diedit:", coordinates);
        polygonField.value = JSON.stringify(coordinates);

        layer.bindPopup("<b>Petak Lahan Berhasil Diedit!</b>").openPopup();
    });
}

function onPointerDragend() {
    if (!currentMarkerEdit) return;
    var coordinates = currentMarkerEdit.getLatLng();
    currentMarkerEdit
        .setLatLng(coordinates)
        .bindPopup(
            `<div class="text-center"><b>Anda berada di sini</b><br />Silahkan tentukan petak lahan.<br />Pastikan lokasi anda sudah benar.</div>`
        )
        .openPopup();

    latEditField.value = coordinates.lat;
    lngEditField.value = coordinates.lng;
}