$(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");

    function syncPeriode() {
        const aktif = $("#isActive").is(":checked");
        $("#periode").prop("disabled", false);
        $("#periode-hint").text(
            aktif
                ? "Aktif + periode: langganan berlaku saat ini dalam rentang tanggal."
                : "Nonaktif: saring berdasarkan tanggal atau tgl diubah.",
        );
    }
    $("#isActive").on("change", syncPeriode);

    // Satu input periode (date-range) -> isi hidden tgl_awal/tgl_akhir (YYYY-MM-DD).
    $(".input-daterange-filter").daterangepicker(
        {
            autoUpdateInput: false,
            locale: { format: "DD-MM-YYYY", cancelLabel: "Hapus" },
            parentEl: "#search-form",
        },
    );
    $(".input-daterange-filter").on("apply.daterangepicker", function (ev, picker) {
        $(this).val(picker.startDate.format("DD-MM-YYYY") + " - " + picker.endDate.format("DD-MM-YYYY"));
        $("#tgl-awal").val(picker.startDate.format("YYYY-MM-DD"));
        $("#tgl-akhir").val(picker.endDate.format("YYYY-MM-DD"));
    });
    $(".input-daterange-filter").on("cancel.daterangepicker", function () {
        $(this).val("");
        $("#tgl-awal").val("");
        $("#tgl-akhir").val("");
    });
    syncPeriode();

    $("#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,
            tgl_awal: $("#tgl-awal").val(),
            tgl_akhir: $("#tgl-akhir").val(),
        };

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

        const btn = $("#search-button");
        const btnHtml = btn.html();
        btn.prop("disabled", true).html('<i class="fa fa-spinner fa-spin me-2"></i>Mencari...');
        $("#example tbody").html(
            `<tr><td colspan="11" class="text-center text-muted py-4"><span class="spinner-border spinner-border-sm me-2"></span>Memuat data...</td></tr>`,
        );

        $.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>`,
                    );
                }
            },
            error: function (xhr) {
                let msg = "Gagal memuat data.";
                if (xhr.status === 422 && xhr.responseJSON?.message) msg = xhr.responseJSON.message;
                $("#example tbody").html(
                    `<tr><td colspan="11" class="text-center text-danger py-4">${msg}</td></tr>`,
                );
                Swal.fire({icon: "error", title: "Pencarian gagal", text: msg});
            },
            complete: function () {
                btn.prop("disabled", false).html(btnHtml);
            },
        });
    });

    $("#btnDelete").on("click", function () {
        const notrans = typeof selectedRowData !== "undefined" ? selectedRowData?.notrans : null;
        if (!notrans) {
            Swal.fire({icon: "warning", title: "Belum pilih data", text: "Klik salah satu baris transaksi dulu."});
            return;
        }
        const base = $("#btnDelete").data("destroy");
        Swal.fire({
            title: "Hapus transaksi?",
            text: `${notrans} akan diarsipkan ke transaksi_stiker_res.`,
            icon: "warning",
            showCancelButton: true,
            confirmButtonText: "Ya, arsipkan",
            cancelButtonText: "Batal",
            confirmButtonColor: "#dc3545",
            showLoaderOnConfirm: true,
            preConfirm: () =>
                $.ajax({
                    url: base + "/" + encodeURIComponent(notrans),
                    type: "DELETE",
                    headers: { "X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr("content") },
                }).catch((xhr) => {
                    Swal.showValidationMessage(xhr.responseJSON?.message || "Gagal menghapus data.");
                }),
        }).then((result) => {
            if (result.isConfirmed && result.value) {
                Swal.fire({icon: "success", title: "Berhasil", text: "Data diarsipkan.", timer: 1500, showConfirmButton: false}).then(() => {
                    $("#rowActions").addClass("d-none");
                    $("#search-button").click();
                });
            }
        });
    });

    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>`;
    }
});