$(document).ready(function () {
    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");

    $(".tambah-member").validate({
        rules: {
            nama: {
                required: true,
            },
            member: {
                required: true,
            },
            depart: {
                required: true,
            },
        },
        messages: {
            nama: {
                required: "Masukkan nama member",
            },
            member: {
                required: "Jenis Member belum di pilih",
            },
            depart: {
                required: "Jenis Langganan belum di pilih",
            },
        },
        // errorElement: 'span',
        // errorPlacement: function (error, element) {
        //     error.addClass('invalid-feedback');
        //     // element.closest('.form-group').append(error);
        // },
        highlight: function (element, errorClass, validClass) {
            $(element).addClass("is-invalid");
        },
        unhighlight: function (element, errorClass, validClass) {
            $(element).removeClass("is-invalid");
        },
    });

    // const startDate = moment().startOf("day"); // hari ini jam 00:00
    // const endDate = moment().add(7, "days").endOf("day"); // +7 hari

    $(".input-daterange-timepicker").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: "#modal-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").val(
                `${startDate.format("DD-MM-YYYY HH:mm")} s/d ${endDate.format("DD-MM-YYYY HH:mm")}`,
            );
        },
    );

    // Set nilai awal dan akhir di input
    $(".input-daterange-timepicker").val(`${startDate} - ${endDate}`);
    // $('.awal').val(startDate);
    // $('.akhir').val(endDate);

    $("#jenisVehicle").on("change", function () {
        var jenisMembers = member;
        var vehicleSelected = $(this).val();
        var $jenisMember = $("#jenis-member");
        // console.log(jenisMembers);

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

        jenisMembers.forEach((item) => {
            if (item.id_mobil === vehicleSelected) {
                if (item.id_mobil !== 0) {
                    $jenisMember.append(
                        `<option value="${item.tarif}">${item.jenis_langganan} - ${item.tarif} </option>`,
                    );
                    console.log($jenisMember);
                } else {
                    $jenisMember.append(`<option value="">Tidak ada Pilihan </option>`);
                }
            }
        });
    });

    // Jumlahkan tarif semua kendaraan di list -> isi otomatis ke Harga.
    // Harga dikirim angka polos (kolom double), tanpa pemisah ribuan.
    function updateHarga() {
        let total = 0;
        $("#modal-member #list-nopol tr").each(function () {
            total += parseFloat($(this).data("tarif")) || 0;
        });
        $("#modal-member input[name='harga']").val(total);
    }

    $("#nopol-add").on("click", function () {
        var nopol = $(".nopol-add").val().trim();
        console.log(nopol);
        // var vehicle = $('#jenisVehicle option:selected').text();
        var vehicle = $("#jenisVehicle").val();
        var vehicleName = $("#jenisVehicle option:selected").text();
        var member = $("#jenis-member option:selected").text();
        var tarif = parseFloat($("#jenis-member").val()) || 0;
        var merk = $(".merk").val().trim();
        $(".nopol-add").removeClass("is-invalid"); // Hapus kelas jika ada sebelumnya
        $(".nopol-add").next(".invalid-feedback").hide();

        if (!vehicle) {
            Swal.fire({icon: 'warning', title: 'Belum lengkap', text: "Wajib pilih jenis kendaraan"});
            return;
        }

        $.ajax({
            url: "stiker/checkField",
            type: "POST",
            data: { nopol: nopol },
            headers: { "X-CSRF-token": $('meta[name="csrf-token"]').attr("content") },
            success: function (r) {
                if (r.response === true) {
                    var rowhtml = `
                        <tr data-tarif="${tarif}">
                            <td class="text-center">${nopol}</td>
                            <td class="text-center" data-value="${vehicle}">${vehicleName}</td>
                            <td class="text-center">${member}</td>
                            <td class="text-center">${merk}</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").append(rowhtml);
                    console.log("Berhasil menambahkan " + nopol);
                    updateHarga();

                    $(".nopol-add").val("");
                    $("#jenisVehicle").val("");
                    $("#jenis-member").val("");
                    $(".merk").val("");
                } else {
                    // var warn = `<div class="invalid-feedback">Nopol sudah ada</div>`;
                    $(".nopol-add").addClass("is-invalid"); // Tambahkan kelas invalid
                    $(".nopol-add").next(".invalid-feedback").text(r.message).show(); // Tampilkan pesan error
                    console.log(r.message);
                }
            },
            error: function (xhr) {
                Swal.fire({icon: 'error', title: 'Gagal memeriksa', text: xhr.responseJSON?.message || "Terjadi kesalahan saat memeriksa nopol"});
            },
        });
    });

    $(".kartu").on("keydown", function (e) {
        var kartu = $(".kartu").val().trim();

        if (e.key === "Enter") {
            // $.ajax ({
            //     url: 'member/checkField',
            //     type: 'POST',
            //     data: {nocard: kartu},
            //     headers: {'X-CSRF-token': $('meta[name="csrf-token"]').attr('content')},
            //     success: function (r) {
            // if (r.response === true) {
            e.preventDefault();
            $(".nourut").focus();
            // }
            //     }
            // });
        }
    });

    $(".nourut").on("keydown", function (e) {
        if (e.key === "Enter") {
            e.preventDefault();

            var nocard = $(".kartu").val().trim();
            var nourut = $(".nourut").val().trim();

            var rowHtml = `
                <tr>
                    <td class="text-center strong">${nocard}</td>
                    <td class="text-center strong">${nourut}</td>
                    <td class="text-center p-2" >
                        <button class="btn btn-danger btn-xs delete-row">Hapus<buttion>
                    </td>
                </tr>
            `;
            $("#list-card").append(rowHtml);
            $(".kartu").val("");
            $(".nourut").val("");
        }
    });

    $("#list-card").on("click", ".delete-row", function () {
        $(this).closest("tr").remove(); // Hapus baris yang diklik
    });

    $("#list-nopol").on("click", ".delete-row", function () {
        $(this).closest("tr").remove();
        updateHarga();
    });

    $(".simpan").on("click", function () {
        var tombol = $(this);
        var formCollect = $("#add-member").serialize();
        var collectNopol = [];
        var cardCollect = [];

        $("#list-nopol 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(),
            };
            collectNopol.push(rowData);
        });

        console.log(collectNopol);

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

        console.log(cardCollect);

        const formDataString = formCollect;

        // Mengonversi query string menjadi objek
        const formDataObj = {};
        const searchParams = new URLSearchParams(formDataString);

        searchParams.forEach((value, key) => {
            formDataObj[key] = value;
        });

        console.log(formDataObj);

        var allData = {
            formData: formDataObj,
            nopolData: collectNopol,
            cardNumber: cardCollect,
        };

        console.log("FORM ADD:", allData);

        updateHarga(); // pastikan harga = jumlah tarif kendaraan sebelum simpan
        formDataObj.harga = $("#modal-member input[name='harga']").val();

        if ($(".tambah-member").valid()) {
            const saveBtn = tombol;
            const saveHtml = saveBtn.html();
            saveBtn.prop('disabled', true).html('<span class="spinner-border spinner-border-sm me-1"></span>Menyimpan...');
            $.ajax({
                url: $("#add-member").attr("action"),
                type: "POST",
                data: allData,
                headers: { "X-CSRF-token": $('meta[name="csrf-token"]').attr("content") },
                beforeSend: function () {
                    // tombol.attr("disabled", true);
                },
                success: function (r) {
                    const ok = r.status == true || r.response == true;
                    if (ok) {
                        $("#modal-member").modal("hide");
                        Swal.fire({
                            icon: "success",
                            title: "Berhasil!!",
                            text: "Member berhasil di daftarkan.. !!",
                            timer: 5000,
                            // showConfirmButton: !1,
                        }).then(function () {
                            // Reload halaman setelah SweetAlert ditutup
                            // location.reload(); // Ini akan me-reload halaman
                        });
                    } else {
                        Swal.fire({
                            icon: "error",
                            title: "Oops...",
                            text: r.message || "Terjadi kendala, silakan hubungi admin.",
                        });
                    }
                    console.log(r);
                },
                error: function (xhr, status, error) {
                    Swal.fire({icon: 'error', title: 'Gagal menyimpan', text: xhr.responseJSON?.message || ("Terjadi kesalahan: " + error)});
                },
                complete: function () {
                    saveBtn.prop('disabled', false).html(saveHtml);
                },
            });
        }
    });

    // ================= UBAH (update di tempat, nomor dipertahankan) =================
    function updateHargaUbah() {
        let total = 0;
        $("#ubah-member #edit-list-nopol tr").each(function () {
            total += parseFloat($(this).data("tarif")) || 0;
        });
        $("#ubah-member input[name='harga']").val(total);
    }

    function showUrlFor(notrans) {
        const tpl = $("#btnExtend").data("url") || "/transaksi/stiker/:id";
        return tpl.replace(":id", encodeURIComponent(notrans));
    }

    $(document).on("click", ".edit-button", function () {
        const notrans = (typeof selectedRowData !== "undefined" && selectedRowData?.notrans)
            || $(this).data("id") || "";
        if (!notrans) {
            Swal.fire({icon: "warning", title: "Belum pilih data", text: "Klik salah satu baris transaksi dulu."});
            return;
        }
        $.ajax({
            url: showUrlFor(notrans),
            type: "GET",
            success: function (r) {
                const m = $("#ubah-member");
                m.find("#edit-notrans").val(r.notrans);
                m.find("[name='nama']").val(r.nama ?? "");
                m.find("[name='address']").val(r.alamat ?? "");
                m.find("[name='phone']").val(r.telepon ?? "");
                m.find("[name='note']").val(r.keterangan ?? "");
                m.find("[name='harga']").val(r.harga ?? 0);
                m.find("[name='member']").val(r.jenis_langganan ?? "");
                m.find("[name='depart']").val(r.unit_kerja ?? "");
                if (r.awal && r.akhir) {
                    m.find("[name='daterange']").val(
                        `${moment(r.awal).format("DD-MM-YYYY HH:mm")} - ${moment(r.akhir).format("DD-MM-YYYY HH:mm")}`,
                    );
                }
                const jl = $("#edit-list-nopol").empty();
                (r.stiker_details || []).forEach((row) => {
                    jl.append(`
                        <tr data-tarif="${row.tarif ?? 0}">
                            <td class="text-center">${row.nopol ?? ""}</td>
                            <td class="text-center" data-value="${row.jenis_mobil ?? ""}">${row.vehicle ?? ""}</td>
                            <td class="text-center">${row.jenis_member ?? ""}</td>
                            <td class="text-center">${row.merk ?? ""}</td>
                            <td class="text-center p-1"><button class="btn btn-danger btn-xs edit-del-nopol" type="button">Hapus</button></td>
                        </tr>`);
                });
                const kl = $("#edit-list-card").empty();
                (r.memberCard || []).forEach((ro) => {
                    kl.append(`
                        <tr>
                            <td class="text-center">${ro.no_card ?? ""}</td>
                            <td class="text-center">${ro.no_urut ?? ""}</td>
                            <td class="text-center p-2"><button class="btn btn-danger btn-xs edit-del-card" type="button">Hapus</button></td>
                        </tr>`);
                });
                updateHargaUbah();
            },
            error: function (xhr) {
                Swal.fire({icon: "error", title: "Gagal memuat data", text: xhr.responseJSON?.message || "Data tidak ditemukan."});
            },
        });
    });

    $("#edit-jenisVehicle").on("change", function () {
        const vehicleSelected = $(this).val();
        const box = $("#edit-jenis-member").empty().append('<option selected value="">Pilih Jenis</option>');
        (member || []).forEach((item) => {
            if (String(item.id_mobil) === String(vehicleSelected) && item.id_mobil !== 0) {
                box.append(`<option value="${item.tarif}">${item.jenis_langganan} - ${item.tarif}</option>`);
            }
        });
    });

    $("#edit-nopol-add").on("click", function () {
        const nopol = $(".enopol-add").val().trim();
        const vehicle = $("#edit-jenisVehicle").val();
        const vehicleName = $("#edit-jenisVehicle option:selected").text();
        const memberTxt = $("#edit-jenis-member option:selected").text();
        const tarif = parseFloat($("#edit-jenis-member").val()) || 0;
        const merk = $(".emerk").val().trim();
        $(".enopol-add").removeClass("is-invalid");
        if (!vehicle) {
            Swal.fire({icon: "warning", title: "Belum lengkap", text: "Wajib pilih jenis kendaraan"});
            return;
        }
        $.ajax({
            url: "/transaksi/stiker/checkField",
            type: "POST",
            data: { nopol: nopol },
            headers: { "X-CSRF-token": $('meta[name="csrf-token"]').attr("content") },
            success: function (rr) {
                if (rr.response === true) {
                    $("#edit-list-nopol").append(`
                        <tr data-tarif="${tarif}">
                            <td class="text-center">${nopol}</td>
                            <td class="text-center" data-value="${vehicle}">${vehicleName}</td>
                            <td class="text-center">${memberTxt}</td>
                            <td class="text-center">${merk}</td>
                            <td class="text-center p-1"><button class="btn btn-danger btn-xs edit-del-nopol" type="button">Hapus</button></td>
                        </tr>`);
                    $(".enopol-add, .emerk").val("");
                    $("#edit-jenisVehicle, #edit-jenis-member").val("");
                    updateHargaUbah();
                } else {
                    $(".enopol-add").addClass("is-invalid").next(".invalid-feedback").text(rr.message).show();
                }
            },
            error: function (xhr) {
                Swal.fire({icon: "error", title: "Gagal memeriksa", text: xhr.responseJSON?.message || "Terjadi kesalahan saat memeriksa nopol"});
            },
        });
    });

    $(".ekartu").on("keydown", function (e) {
        if (e.key === "Enter") { e.preventDefault(); $(".enourut").focus(); }
    });
    $(".enourut").on("keydown", function (e) {
        if (e.key !== "Enter") return;
        e.preventDefault();
        const nocard = $(".ekartu").val().trim();
        const nourut = $(".enourut").val().trim();
        if (!nocard) return;
        $("#edit-list-card").append(`
            <tr><td class="text-center">${nocard}</td><td class="text-center">${nourut}</td>
            <td class="text-center p-2"><button class="btn btn-danger btn-xs edit-del-card" type="button">Hapus</button></td></tr>`);
        $(".ekartu, .enourut").val("");
    });

    $("#edit-list-nopol").on("click", ".edit-del-nopol", function () {
        $(this).closest("tr").remove();
        updateHargaUbah();
    });
    $("#edit-list-card").on("click", ".edit-del-card", function () {
        $(this).closest("tr").remove();
    });

    $(".simpan-ubah").on("click", function () {
        const btn = $(this);
        const notrans = $("#edit-notrans").val();
        if (!notrans) {
            Swal.fire({icon: "warning", title: "Belum ada data", text: "Buka ulang modal Ubah dari baris transaksi."});
            return;
        }
        const nopolData = [];
        $("#edit-list-nopol tr").each(function () {
            const row = $(this);
            nopolData.push({
                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(),
            });
        });
        const cardNumber = [];
        $("#edit-list-card tr").each(function () {
            const row = $(this);
            const nocard = row.find("td:nth-child(1)").text().trim();
            if (!nocard) return;
            cardNumber.push({ nocard: nocard, nourut: row.find("td:nth-child(2)").text().trim() });
        });
        const payload = {
            nama: $("#ubah-member [name='nama']").val(),
            address: $("#ubah-member [name='address']").val(),
            phone: $("#ubah-member [name='phone']").val(),
            member: $("#ubah-member [name='member']").val(),
            depart: $("#ubah-member [name='depart']").val(),
            note: $("#ubah-member [name='note']").val(),
            harga: $("#ubah-member [name='harga']").val(),
            daterange: $("#ubah-member [name='daterange']").val(),
            nopolData: nopolData,
            cardNumber: cardNumber,
        };
        const saveHtml = btn.html();
        btn.prop("disabled", true).html('<span class="spinner-border spinner-border-sm me-1"></span>Menyimpan...');
        $.ajax({
            url: `${location.origin}/transaksi/member/${encodeURIComponent(notrans)}`,
            type: "PUT",
            data: payload,
            headers: { "X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr("content") },
            success: function (r) {
                $("#ubah-member").modal("hide");
                Swal.fire({icon: "success", title: "Berhasil", text: r.message || "Data diperbarui."}).then(() => location.reload());
            },
            error: function (xhr) {
                Swal.fire({icon: "error", title: "Gagal menyimpan", text: xhr.responseJSON?.message || "Periksa kembali isian."});
            },
            complete: function () {
                btn.prop("disabled", false).html(saveHtml);
            },
        });
    });
});