document.addEventListener("DOMContentLoaded", function () {
    loadParameterListPhSubDistrict();

    $("#btn-update-list-ph-sub-district").on("click", function () {
        // window.open("/list-parameter-cuaca-kecamatan/" + years, "_self");

        $.ajax({
            url: "/list-parameter-ph-kecamatan/updateListParameterPhSubDistrict",
            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-kecamatan";
                }, 1000);
            },
            error: function (xhr) {
                NProgress.done();
                $("#result").html(
                    "<p style='color:red;'>Gagal mengambil data!</p>"
                );
                console.log("gagal");
            },
        });
    });
});

let gridInstance;
function loadParameterListPhSubDistrict() {
    const tableParameterListPhSubDistrict = document.getElementById(
        "table-parameter-list-ph-sub-district"
    );

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

    $.ajax({
        url: "/list-parameter-ph-kecamatan/getDataParameterListPhSubDistrict",
        type: "GET",
        dataType: "json",
        success: function (data) {
            const TableDataSubDistrict = data["listPhSubDistrict"].map(
                (item, index) => [
                    index + 1,
                    item["sub_district"],
                    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: TableDataSubDistrict, // Update data
                    })
                    .forceRender(); // Paksa render ulang
            } else {
                // Jika grid belum ada, buat grid baru
                gridInstance = new gridjs.Grid({
                    columns: [
                        "No",
                        "Kecamatan",
                        "0 - 5 cm",
                        "5 - 15 cm",
                        "15 - 30 cm",
                        "30 - 60 cm",
                        "60 - 100 cm",
                        "100 - 200 cm",
                    ],
                    data: TableDataSubDistrict,
                    search: true,
                    sort: true,
                    pagination: {
                        limit: 15,
                    },
                }).render(tableParameterListPhSubDistrict);
            }
        },
    });
}