document.addEventListener("DOMContentLoaded", function () {
    loadParameterListHeightSubDistrict("2021");

    $(document).on("click", ".btn-edit-height", function () {
        let heightSubDistrictId = $(this).data("height-sub-district-id");
        let subDistrictId = $(this).data("sub-district-id");
        let subDistrict = $(this).data("sub-district");
        let year = $(this).data("year");
        let height = $(this).data("height");

        $('[name="heightSubDistrictId"]').val(heightSubDistrictId);
        $('[name="subDistrictId"]').val(subDistrictId);
        $('[name="subDistrict"]').val(subDistrict).prop("readonly", true);
        $('[name="year"]').val(year).prop("readonly", true);
        $('[name="height"]').val(height);
    });

    $("#choiceYear").on("change", function () {
        year = $(this).val();

        $("#span-year").text(year);
        loadParameterListHeightSubDistrict(year);
    });

    $(document).on("click", "#btn-hapus", function () {
        let id = $(this).data("id");
        Swal.fire({
            html: '<div class="mt-3"><lord-icon src="https://cdn.lordicon.com/gsqxdxog.json" trigger="loop" colors="primary:#f7b84b,secondary:#f06548" style="width:100px;height:100px"></lord-icon><div class="mt-4 pt-2 fs-15 mx-5"><h4>Apakah anda benar ?</h4><p class="text-muted mx-4 mb-0">Anda benar, akan menghapus data ketinggian kecamatan (tahunan) ?</p></div></div>',
            showCancelButton: !0,
            confirmButtonClass: "btn btn-primary w-xs me-2 mb-1",
            confirmButtonText: "Ya, hapus!",
            cancelButtonClass: "btn btn-danger w-xs mb-1",
            buttonsStyling: !1,
            showCloseButton: !0,
        }).then((result) => {
            if (result.isConfirmed) {
                window.location.href =
                    "/list-parameter-ketinggian-kecamatan/deleteListHeightSubDistrict/" +
                    id;
            }
        });
    });
});

let gridInstance;
function loadParameterListHeightSubDistrict(years) {
    const tableContainerListHeightSubDistrict = document.getElementById(
        "table-parameter-list-height-sub-district"
    );

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

    $.ajax({
        url: "/list-parameter-ketinggian-kecamatan/" + years,
        type: "GET",
        dataType: "json",
        success: function (data) {
            const TableListHeightSubDistrict = data[
                "listHeightSubDistrict"
            ].map((item, index) => [
                index + 1,
                item["sub_district"],
                item["height"],
                gridjs.html(`
                    <button type="button" class="btn btn-warning btn-edit-height"
                        data-bs-toggle="modal"
                        data-bs-target="#modal-edit"
                        data-height-sub-district-id="${item.hsd_id}"
                        data-sub-district-id="${item.sd_id}"
                        data-sub-district="${item.sub_district}"
                        data-year = "${item.year}"
                        data-height = "${item.height}">
                        Ubah
                    </button>
                    <button type="button" class="btn btn-danger btn-hapus-height" id="btn-hapus"
                        data-id="${item.hsd_id}">
                        Hapus
                    </button>`),
            ]);

            // Render ulang grid jika instance sudah ada, atau buat baru
            if (gridInstance) {
                gridInstance
                    .updateConfig({
                        data: TableListHeightSubDistrict, // Update data
                    })
                    .forceRender(); // Paksa render ulang
            } else {
                // Jika grid belum ada, buat grid baru
                gridInstance = new gridjs.Grid({
                    columns: ["No", "Kecamatan", "Ketinggian Tempat", "aksi"],
                    data: TableListHeightSubDistrict,
                    search: true,
                    sort: true,
                    pagination: {
                        limit: 10,
                    },
                }).render(tableContainerListHeightSubDistrict);
            }
        },
    });
}
