$(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();
        let isActive = $("#isActive").is(":checked") ? 1 : 0;

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

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

            let message = "Harap masukkan " + (label[searchBy] || "kata kunci");

            // Highlight input
            $("#search-value").addClass("is-invalid").focus();

            // Tampilkan pesan
            $("#search-status").removeClass("text-success").addClass("text-danger").text(message);

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

            return;
        }

        let searchData = {
            searchBy: searchBy,
            searchValue: searchValue,
            memberType: memberType,
            department: department,
            vehicle: vehicle,
            isActive: isActive,
        };

        // =========================
        // AJAX
        // =========================

        $.ajax({
            url: url,
            type: "POST",
            // data: $("#search-form").serialize(),
            data: searchData,
            headers: { "X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr("content") },
            dataType: "json",
            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 is-invalid" style="text-align: center;" width="3%">${index + 1}</td>` : ""}
                                    ${rowIndex === 0 ? oldAdmin(notrans, rowspan) : ""}
                                    ${rowIndex === 0 ? `<td rowspan="${rowspan}" style="padding: 2px;" width="8%">${element.nama}</td>` : ""}
                                    ${rowIndex === 0 ? `<td rowspan="${rowspan}" style="padding: 2px;" width="10%">${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;" width="11%">${element.awal} <br> ${element.akhir}</td>` : ""}
                                    ${rowIndex === 0 ? `<td rowspan="${rowspan}" class="p-2" style="padding: 2px;" width="10%"> ${[...new Set(rows.map((r) => `${r.nopol || "No. Polisi tidak ada"} (${r.vehicle || ""})`))].join("<br>")} </td>` : ""}
                                    ${rowIndex === 0 ? `<td rowspan="${rowspan}" style="text-align: center; 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>`,
                    );
                }
            },
        });
    });

    function oldAdmin(value, rowSpan) {
        let hasSlash = value.includes("/");
        if (hasSlash) {
            return `<td rowspan="${rowSpan}" class="p2 text-danger" style="padding: 2px;" width="17%">
                ${value} <i class="mdi mdi-help-circle-outline ms-1"
                           data-bs-toggle="tooltip"
                           data-bs-placement="bottom"
                           title="Gunakan manufacture versi lama">
                        </i>
            </td>`;
        }
        return `<td rowspan="${rowSpan}" class="p2" style="padding: 2px;" width="17%">
                ${value}
            </td>`;
    }
});