document.addEventListener("DOMContentLoaded", function () {
    loadParameterListPhVillage("15");

    $("#btn-update-list-ph-village").on("click", function () {
        var subDistrictId = $("#choiceSubDistrict").val();

        $.ajax({
            url:
                "/list-parameter-ph-desa/updateListParameterPhVillage/" +
                subDistrictId,
            method: "GET",
            dataType: "json",
            beforeSend: function () {
                NProgress.start(); // Menampilkan progress bar
            },
            success: function (response) {
                NProgress.done();
                $("#result").html(`<p>${response.message}</p>`);
                console.log(response);

                // agar refresh
                setTimeout(function () {
                    window.location.href = "/list-parameter-ph-desa";
                }, 1000);
            },
            error: function (xhr) {
                NProgress.done();
                $("#result").html(
                    "<p style='color:red;'>Gagal mengambil data!</p>"
                );

                // agar refresh
                setTimeout(function () {
                    window.location.href = "/list-parameter-ph-desa";
                }, 1000);
                console.log("gagal");
            },
        });
    });

    $("#choiceSubDistrict").on("change", function () {
        var subDistrictId = $(this).val();

        loadParameterListPhVillage(subDistrictId);
    });
});

let gridInstance;
function loadParameterListPhVillage(subDistrictId) {
    const tableParameterListPhVillage = document.getElementById(
        "table-parameter-list-ph-village"
    );

    if (tableParameterListPhVillage) {
        tableParameterListPhVillage.innerHTML = "";
    }

    $.ajax({
        url:
            "/list-parameter-ph-desa/getDataParameterListPhVillage/" +
            subDistrictId,
        type: "GET",
        dataType: "json",
        success: function (data) {
            const TableDataVillage = data["listPhVillage"].map(
                (item, index) => [
                    index + 1,
                    item["village"],
                    item["meter_0_5"],
                    item["meter_5_15"],
                    item["meter_15_30"],
                    item["meter_30_60"],
                    item["meter_60_100"],
                    item["meter_100_200"],
                ]
            );

            // Render ulang grid jika instance sudah ada, atau buat baru
            if (gridInstance) {
                gridInstance
                    .updateConfig({
                        data: TableDataVillage, // Update data
                    })
                    .forceRender(); // Paksa render ulang
            } else {
                // Jika grid belum ada, buat grid baru
                gridInstance = new gridjs.Grid({
                    columns: [
                        "No",
                        "Desa / Kelurahan",
                        "0 - 5 cm",
                        "5 - 15 cm",
                        "15 - 30 cm",
                        "30 - 60 cm",
                        "60 - 100 cm",
                        "100 - 200 cm",
                    ],
                    data: TableDataVillage,
                    search: true,
                    sort: true,
                    pagination: {
                        limit: 15,
                    },
                }).render(tableParameterListPhVillage);
            }
        },
    });
}
