$(document).ready(function () {
    $(document).on("change", ".form-select", function () {
        if ($("option:selected", this).val() == "") {
            $(".nama").css("display", "none");
            $(".nopol").css("display", "none");
            $(".nocard").css("display", "none");
            $(".notrans").css("display", "none");
            // $(".site").val('');
        } else if ($("option:selected", this).val() == "nama") {
            $(".nama").css("display", "block");
            $(".nopol").css("display", "none");
            $(".nocard").css("display", "none");
            $(".notrans").css("display", "none");
            $(".input-default").val("");
        } else if ($("option:selected", this).val() == "nopol") {
            $(".nama").css("display", "none");
            $(".nopol").css("display", "block");
            $(".nocard").css("display", "none");
            $(".notrans").css("display", "none");
            $(".input-default").val("");
        } else if ($("option:selected", this).val() == "nocard") {
            $(".nama").css("display", "none");
            $(".nopol").css("display", "none");
            $(".nocard").css("display", "block");
            $(".notrans").css("display", "none");
            $(".input-default").val("");
        } else if ($("option:selected", this).val() == "notrans") {
            $(".nama").css("display", "none");
            $(".nopol").css("display", "none");
            $(".nocard").css("display", "none");
            $(".notrans").css("display", "block");
            $(".input-default").val("");
        } else {
            $(".position").css("display", "none");
            $(".level-area").css("display", "none");
            $(".input-default").val("");
        }
    });

    var url = $("#example").data("url");

    $("#search-button").on("click", function () {
        let searchBy = $("#search-by").val();
        let searchValue = $("#search-value").val().trim();

        let memberType = $("#member-type").val();
        let department = $("#department").val();
        let vehicle = $("#vehicle").val();

        // =========================
        // VALIDASI PENCARIAN
        // =========================

        if (searchBy !== "" && searchValue === "") {
            let label = {
                nama: "Nama",
                alamat: "Alamat",
                nopol: "No. Polisi",
                nocard: "No. Card",
                notrans: "No. Transaksi",
            };

            alert("Harap masukkan " + (label[searchBy] || "kata kunci"));

            $("#search-value").focus();

            return;
        }

        // =========================
        // DEBUG
        // =========================

        console.log({
            searchBy,
            searchValue,
            memberType,
            department,
            vehicle,
        });

        // =========================
        // AJAX
        // =========================
        $.ajax({
            url: url,
            type: "POST",
            data: $("#search-form").serialize(),
            headers: { "X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr("content") },
            dataType: "json",
            beforeSend: function () {
                $("#search-button").prop("disabled", true).html(`
                                <i class="fa fa-spinner fa-spin me-2"></i>
                                Mencari...
                            `);
            },
            success: function (response) {
                var tbody = $("#example tbody");
                tbody.empty();

                if (response.length !== 0) {
                    // Kelompokkan data berdasarkan notrans
                    var groupedData = {};
                    response.forEach((element) => {
                        if (!groupedData[element.notrans]) {
                            groupedData[element.notrans] = [];
                        }
                        groupedData[element.notrans].push(element);
                    });

                    // Generate HTML
                    Object.keys(groupedData).forEach((notrans, index) => {
                        var rows = groupedData[notrans];
                        var rowspan = rows.length;

                        rows.forEach((element, rowIndex) => {
                            var rowHtml = `
                                <tr class="mb-2"
                                        data-notrans="${element.notrans}"
                                        data-nama="${element.nama}"
                                        data-alamat="${element.alamat}"
                                        data-telp="${element.telepon}"
                                        data-jmember="${element.jmember}"
                                        data-dept="${element.dept}"
                                        data-awal="${element.awal}"
                                        data-akhir="${element.akhir}"
                                    >
                                    ${rowIndex === 0 ? `<td rowspan="${rowspan}" class="p2" style="text-align: center;">${index + 1}</td>` : ""}
                                    ${rowIndex === 0 ? `<td rowspan="${rowspan}" class="p2" style="padding: 2px;">${element.notrans}</td>` : ""}
                                    ${rowIndex === 0 ? `<td rowspan="${rowspan}" style="padding: 2px;">${element.nama}</td>` : ""}
                                    ${rowIndex === 0 ? `<td rowspan="${rowspan}" style="padding: 2px;">${element.alamat}</td>` : ""}
                                    ${rowIndex === 0 ? `<td rowspan="${rowspan}" style="padding: 2px;">${element.telepon}</td>` : ""}
                                    ${rowIndex === 0 ? `<td rowspan="${rowspan}" style="padding: 2px;">${element.jmember}</td>` : ""}
                                    ${rowIndex === 0 ? `<td rowspan="${rowspan}" style="padding: 2px;">${element.dept}</td>` : ""}
                                    ${rowIndex === 0 ? `<td rowspan="${rowspan}" width="200" style="text-align: center; padding: 2px;">${element.awal} <br> ${element.akhir}</td>` : ""}
                                    ${rowIndex === 0 ? `<td rowspan="${rowspan}" class="p-2" style="padding: 2px;"> ${[...new Set(rows.map((r) => `${r.nopol || "No. Polisi tidak ada"} (${r.vehicle || ""})`))].join("<br>")} </td>` : ""}
                                    ${rowIndex === 0 ? `<td rowspan="${rowspan}" style="padding: 2px;">${[...new Set(rows.map((r) => r.no_card || "Tidak ada kartu"))].join("<br>")}</td>` : ""}
                                    </tr>
                                    `;
                            // ${rowIndex === 0 ? `<td rowspan="${rowspan}" class="p-2" style="text-align: center;">
                            //     <button class="btn btn-secondary btn-xs extend-button mb-1" data-id="${element.notrans}">Extend</button>
                            //     <button class="btn btn-primary btn-xs edit-button mb-1" data-id="${element.notrans}">Edit</button>
                            //     <button class="btn btn-danger btn-xs delete-button mb-1" data-id="${element.notrans}">Delete</button>
                            // </td>` : ''}
                            tbody.append(rowHtml);
                        });
                    });
                } else {
                    alert("Data tidak ditemukan.");
                    $("#example tbody").html(
                        `<tr>
                            <td colspan="11" style="text-align: center;"><p class="text-danger mt-3">Tidak ditemukan data</p></td>
                        <tr>`,
                    );
                }
            },
        });
    });
});