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

    // function update criteria
    $(document).on("click", ".btn-edit-criteria", function (event) {
        let button = event.target;

        let id = $(this).data("id");
        let criteria = button.getAttribute("data-criteria");
        let bobot = button.getAttribute("data-bobot");
        let status = button.getAttribute("data-status");

        $("#criteria_id").val(id);
        $("#criteria").val(criteria);
        $("#bobot").val(bobot);
        $("#keterangan").val(status);
    });

    // function deleter criteria
    $(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 kriteria ?</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-data-kriteria/deleteCriteria/" + id;
            }
        });
    });
});

let gridInstance;
function loadListCriteriaData() {
    const tableContainerListCriteriaData = document.getElementById(
        "table-list-criteria-data"
    );

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

    $.ajax({
        url: `/list-data-kriteria/getListCriteriaData`,
        type: "GET",
        dataType: "json",
        success: function (data) {
            const tableDataListCriteria = data["listCriteriaData"].map(
                (item, index) => [
                    index + 1,
                    item["criteria"],
                    item["bobot"],
                    item["status"],
                    gridjs.html(
                        `<button type="button" class="btn btn-warning btn-edit-criteria" data-bs-toggle="modal" data-bs-target="#btn-edit" data-id="${item["id"]}"
                        data-criteria="${item["criteria"]}" data-bobot="${item["bobot"]}" data-status="${item["status"]}">
                            ubah
                        </button>
                        <button type="button" class="btn btn-danger btn-md" data-id="${item["id"]}" id="btn-hapus">hapus</button>`
                    ),
                ]
            );

            if (gridInstance) {
                gridInstance
                    .updateConfig({
                        data: tableDataListCriteria,
                    })
                    .forceRender();
            } else {
                gridInstance = new gridjs.Grid({
                    columns: ["No", "Kriteria", "Bobot", "Keterangan", "Aksi"],
                    data: tableDataListCriteria,
                    search: true,
                    sort: true,
                    pagination: {
                        limit: 5,
                    },
                }).render(tableContainerListCriteriaData);
            }
        },
    });
}
