$(document).ready(function () {
    $("#example tbody").on("click", "tr", function () {
        console.log($("#example tbody tr").length);
        const notrans = $(this).data("notrans");

        // hapus semua highlight
        $("#example tbody tr").removeClass("selected");

        // highlight semua row dalam 1 grup
        $(`#example tbody tr[data-notrans="${notrans}"]`).addClass("selected");

        // ambil data dari row pertama grup
        const firstRow = $(`#example tbody tr[data-notrans="${notrans}"]`).first();

        selectedRowData = {
            notrans: firstRow.data("notrans"),
        };

        console.log("Selected detail trans :", selectedRowData);

        $("#rowActions").removeClass("d-none");
    });

    $(".detail-button").on("click", function () {
        $("#modal-details").show();
    });
});