$(document).ready(function () {
    // var vehicle = @json($vehicleSelect);

    // let selectedRowData = null;
    let harga = 0;

    $("#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 transaksi:", selectedRowData);

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

    $(document).on("click", ".extend-button", function () {
        console.log("Tombol extend ditekan");
        if (!selectedRowData) {
            alert("Pilih data terlebih dahulu");
            return;
        }
        var rawId = $(this).data("id");
        // let id = rawId.substring(0, rawId.indexOf('/'));
        let id = selectedRowData.notrans;
        var kendaraan = vehicle;
        console.log("Data ID : ", id);
        let actionUrl = $(this).data("url");

        // var actionUrl = '{{ route("getStikerMember.show", ":id") }}';
        // actionUrl = actionUrl.replace(":id", "" + encodeURIComponent(id));
        actionUrl = actionUrl.replace(":id", "" + encodeURIComponent(id));
        console.log("Action URL : ", actionUrl);
        // $('#extend-member').attr('action'), actionUrl;
        $.ajax({
            url: actionUrl,
            type: "GET",
            success: function (r) {
                console.log("Datanya : ", r);
                if (r) {
                    $("#extend-member").val("");
                    $("#list-nopol-ext").empty();
                    $("#list-card-ext").empty();
                    $(".notransnya").val(r.notrans);
                    $(".namanya").val(r.nama);
                    $(".address").val(r.alamat);
                    $("#periode-ext").val(
                        `${moment(r.awal).format("DD-MM-YYYY HH:mm")} - ${moment(r.akhir).format("DD-MM-YYYY HH:mm")}`,
                    );
                    $("#ext-jenisLang")
                        .val(
                            $("#ext-jenisLang option")
                                .filter(function () {
                                    return $(this).text().trim() === r.jmember;
                                })
                                .val(),
                        )
                        .trigger("change")
                        .prop("disabled", true);
                    $("#ext-jenisLang-value").val(r.jenis_langganan);
                    $("#ext-department")
                        .val(
                            $("#ext-department option")
                                .filter(function () {
                                    return $(this).text().trim() === r.dept;
                                })
                                .val(),
                        )
                        .trigger("change")
                        .prop("disabled", true);
                    $("#ext-department-value").val(r.unit_kerja);
                    $("#member-ext").val(r.unit_kerja);
                    $("#department-ext").val(r.jenis_langganan);
                    var rows = r.stiker_details;
                    if (rows.length !== 0) {
                        rows.forEach((row) => {
                            var vehicleName = String(row.jenis_mobil)?.nama || "Unknown";
                            harga += Number(row.tarif);
                            $("#list-nopol-ext").append(`
                                <tr>
                                    <td class="text-center p-2">${row.nopol}</td>
                                    <td class="text-center p-2" data-value="${row.jenis_mobil}">
                                        ${row.vehicle}
                                    </td>
                                    <td class="text-center p-2">${row.jenis_member} - ${row.tarif}</td>
                                    <td class="text-center p-2">${row.merk}</td>
                                    <td class="text-center p-2">
                                        <button class="btn btn-danger btn-xs delete-row" disabled>
                                            Hapus
                                        </button>
                                    </td>
                                </tr>
                            `);
                        });
                        $(".harga")
                            .val(harga ?? r.harga ?? 0)
                            .prop("disabled", true);
                    } else {
                        $("#list-nopol-ext").append(`
                            <tr>
                                <td class="text-center p-2">Tidak ada data</td>
                                <td class="text-center p-2">Tidak ada data</td>
                                <td class="text-center p-2">Tidak ada data</td>
                                <td class="text-center p-2">Tidak ada data</td>
                            </tr>
                        `);
                    }

                    var rowss = r.memberCard;
                    if (rowss.length !== 0) {
                        rowss.forEach((ro) => {
                            $("#list-card-ext").append(`
                                <tr>
                                    <td class="text-center p-2">${ro.no_card}</td>
                                    <td class="text-center p-2">${ro.no_urut}</td>
                                    <td class="text-center p-2"><button class="btn btn-danger btn-xs delete-row" disabled>Hapus<buttion></td>
                                </tr>
                            `);
                        });
                    } else {
                        $("#list-card-ext").append(`
                            <tr>
                                <td class="text-center p-2">Tidak ada data</td>
                                <td class="text-center p-2">Tidak ada data</td>
                                <td class="text-center p-2">Tidak ada data</td>
                            </tr>
                        `);
                    }
                    console.log("Data : ", r);
                }
            },
            error: function (xhr) {
                console.error("Error : ", xhr);
            },
        });

        $("#modal-extend").modal("show");
    });

    const today = moment();
    const startDate = moment(today).startOf("day").format("DD-MM-YYYY 00:00");
    const endDate = moment(today).endOf("day").format("DD-MM-YYYY 23:59");

    $(".input-daterange-timepicker-ext").daterangepicker(
        // 👈 method-nya "daterangepicker", bukan "datepicker"
        {
            timePicker: true,
            locale: {
                format: "DD-MM-YYYY HH:mm",
            },
            timePicker24Hour: true,
            timePickerSeconds: false,
            buttonClasses: ["btn", "btn-sm"],
            applyClass: "btn-danger",
            cancelClass: "btn-inverse",
            startDate: startDate,
            endDate: endDate,
            parentEl: "#extend-member", // 👈 daterangepicker pakai "parentEl", bukan "container"
        },
        function (startDate, endDate) {
            console.log(
                `Range selected: ${startDate.format("DD-MM-YYYY HH:mm")} s/d ${endDate.format("DD-MM-YYYY HH:mm")}`,
            );
            $(".input-daterange-timepicker-ext").val(
                `${startDate.format("DD-MM-YYYY HH:mm")} s/d ${endDate.format("DD-MM-YYYY HH:mm")}`,
            );
        },
    );

    $(".input-daterange-timepicker-ext").val(`${startDate} - ${endDate}`);

    $(".nopol-add").on("input", function () {
        $(this).val($(this).val().replace(/\s/g, ""));
    });

    $(".merk").on("input", function () {
        $(this).val($(this).val().replace(/\s/g, ""));
    });

    $(".kartu").on("input", function () {
        $(this).val($(this).val().replace(/\s/g, ""));
    });

    $(".nourut").on("input", function () {
        $(this).val($(this).val().replace(/\s/g, ""));
    });

    $("#jenisVehicleExt").on("change", function () {
        const jenisMembers = member;
        const vehicleSelected = $(this).val();
        const jenisMemberExt = $("#jenisMemberExt");

        jenisMemberExt.empty();
        jenisMemberExt.append('<option selected value="">Pilih Jenis</option>');

        jenisMembers.forEach((item) => {
            if (String(item.id_mobil) === String(vehicleSelected)) {
                jenisMemberExt.append(`
                    <option value="${item.tarif}">
                        ${item.jenis_langganan} - ${item.tarif}
                    </option>
                `);
            }
        });

        // Kalau tidak ada pilihan
        if (jenisMemberExt.children("option").length === 1) {
            jenisMemberExt.append('<option value="">Tidak ada pilihan</option>');
        }
    });

    $("#ext-nopol-add").on("click", function () {
        var nopolExt = $(".ext-nopol-add").val().trim();
        // var vehicle = $('#jenisVehicle option:selected').text();
        var vehicleExtName = $("#jenisVehicleExt option:selected").text();
        var vehicleExt = $("#jenisVehicleExt").val();
        var memberExt = $("#jenisMemberExt option:selected").text();
        var memberExtValue = $("#jenisMemberExt option:selected").val();
        var merkExt = $(".merkExt").val().trim();
        console.log(merkExt);
        $(".ext-nopol-add").removeClass("is-invalid"); // Hapus kelas jika ada sebelumnya
        $(".ext-nopol-add").next(".invalid-feedback").hide();

        if (!vehicleExt) {
            alert("Wajib pilih jenis kendaraan");
            return;
        }

        $.ajax({
            url: "stiker/checkField",
            type: "POST",
            data: { nopol: nopolExt },
            headers: { "X-CSRF-token": $('meta[name="csrf-token"]').attr("content") },
            success: function (r) {
                if (r.response === true) {
                    harga += Number(memberExtValue);
                    var rowhtml = `
                        <tr>
                            <td class="text-center">${nopolExt}</td>
                            <td class="text-center" data-value="${vehicleExt}">${vehicleExtName}</td>
                            <td class="text-center">${memberExt}</td>
                            <td class="text-center">${merkExt}</td>
                            <td class="text-center p-1" style="text-align: center;">
                                <button class="btn btn-danger btn-xs delete-row">Hapus<buttion>
                            </td>
                        </tr>
                    `;
                    $("#list-nopol-ext").append(rowhtml);
                    console.log("Berhasil menambahkan " + nopolExt);

                    $(".ext-nopol-add").val("");
                    $("#jenisVehicleExt").val("");
                    $("#jenisMemberExt").val("");
                    $(".merkExt").val("");
                    $(".harga")
                        .val(harga ?? r.harga ?? 0)
                        .text(`Rp. ${harga}` ?? `${r.harga}` ?? 0)
                        .prop("disabled", true);
                } else {
                    // var warn = `<div class="invalid-feedback">Nopol sudah ada</div>`;
                    $(".ext-nopol-add").addClass("is-invalid"); // Tambahkan kelas invalid
                    $(".ext-nopol-add").next(".invalid-feedback").text(r.message).show(); // Tampilkan pesan error
                    console.log(r.message);
                }
            },
            error: function () {
                alert("Terjadi kesalahan saat memeriksa nopol");
            },
        });
    });

    $(".simpan-ext").on("click", function () {
        let url = $("#extend-member").attr("action");
        let extend = $(this);
        let formExtend = $("#extend-member").serialize();
        let nopolData = [];
        let cardData = [];

        $("#list-nopol-ext tr").each(function () {
            var row = $(this);
            var rowData = {
                nopol: row.find("td:nth-child(1)").text().trim(),
                vehicle: row.find("td:nth-child(2)").data("value"),
                member: row.find("td:nth-child(3)").text().trim(),
                merk: row.find("td:nth-child(4)").text().trim(),
            };
            nopolData.push(rowData);
        });

        console.log(nopolData);

        $("#list-card-ext tr").each(function () {
            var row = $(this);
            // var rowCard = {
            //     nocard: row.find('td:nth-child(1)').text(),
            //     nourut: row.find('td:nth-child(2)').text(),
            // };
            const nocard = row.find("td:nth-child(1)").text().trim();
            const nourut = row.find("td:nth-child(2)").text().trim();

            if (!nocard || nocard === "Tidak ada data" || !nourut || nourut === "Tidak ada data") {
                return;
            }

            cardData.push({
                nocard: nocard,
                nourut: nourut,
            });
            // cardData.push(rowCard);
            cardData.push({
                nocard: nocard,
                nourut: nourut,
            });
        });

        const stringDataExt = formExtend;

        // Mengonversi query string menjadi objek
        const formDataExt = {};
        const searchExtend = new URLSearchParams(stringDataExt);

        searchExtend.forEach((value, key) => {
            formDataExt[key] = value;
        });

        var extData = {
            formData: formDataExt,
            nopolData: nopolData,
            cardNumber: cardData,
        };

        console.log(extData);

        $.ajax({
            url: url,
            type: "POST",
            data: extData,
            headers: {
                "X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr("content"),
            },
            berforeSend: function () {
                extend.text("Loading...");
            },
            success: function (data) {
                if (data.status === true) {
                    Swal.fire({
                        icon: "success",
                        title: "Berhasil",
                        text: "Member berhasil di daftarkan.. !!" + data.message,
                    });
                    $("#modal-member-extend").modal("hide");
                } else {
                    Swal.fire({
                        icon: "error",
                        title: "Gagal",
                        text: data.message,
                    });
                }
                console.log(data);
            },
            error: function (xhr) {
                console.error("Error : ", xhr);
            },
        });
    });

    // $(document).on('click', '.edit-button', function () {
    //     let id = selectedRowData;
    //     $('#edit-member').attr('action', '/transaksi/member/' + id);
    //     $('#ubah-member').modal('show');
    //     // console.log(selectedRowData);
    //     // console.log(id);
    //     $.get(`/transaksi/member/${selectedRowData}`, function(res){

    //         fillMemberModal(res);

    //         $('#modal-member').modal('show');

    //     });
    // });
    // $('#btnEdit').on('click', function(){

    //     if(!selectedRowData) {
    //         alert('Pilih data dulu');
    //         return;
    //     }
    //     console.log(selectedRowData);

    //     $.get(`/member/${selectedRowData.notrans}`, function(res){

    //         fillMemberModal(res);

    //         $('#modal-member').modal('show');

    //     });
    // });

    // function fillMemberModal(res){

    //     let m = res.member;

    //     // TAB 1 - DATA PENGUNJUNG
    //     $('[name="nama"]').val(m.nama);
    //     $('[name="address"]').val(m.alamat);
    //     $('[name="daterange"]').val(m.awal + ' - ' + m.akhir);
    //     $('[name="member"]').val(m.jenis_langganan).trigger('change');
    //     $('[name="depart"]').val(m.dept).trigger('change');
    //     $('[name="note"]').val(m.note);
    //     $('[name="harga"]').val(m.harga);

    //     // =========================
    //     // TAB 2 - KENDARAAN
    //     // =========================
    //     $('#list-nopol').empty();

    //     res.kendaraan.forEach(v => {
    //         $('#list-nopol').append(`
    //             <tr>
    //                 <td>${v.nopol}</td>
    //                 <td>${v.jenis}</td>
    //                 <td>${v.merk}</td>
    //                 <td>${v.member}</td>
    //                 <td>
    //                     <button class="btn btn-danger btn-sm remove-nopol" data-id="${v.id}">Hapus</button>
    //                 </td>
    //             </tr>
    //         `);
    //     });

    //     // =========================
    //     // TAB 3 - KARTU
    //     // =========================
    //     $('#list-card').empty();

    //     res.kartu.forEach(k => {
    //         $('#list-card').append(`
    //             <tr>
    //                 <td>${k.kartu}</td>
    //                 <td>${k.nourut}</td>
    //                 <td>
    //                     <button class="btn btn-danger btn-sm remove-card" data-id="${k.id}">Hapus</button>
    //                 </td>
    //             </tr>
    //         `);
    //     });

    // }

    // $('#modal-member').on('hidden.bs.modal', function () {
    //     $(this).find('form')[0].reset();
    //     $('#list-nopol').empty();
    //     $('#list-card').empty();
    // });
});