jQuery(function ($) {
    let body = $("body");

    $(document).on("click", "input.check-all", function (e) {
        e.preventDefault();
        let __self = $(this);
        let closest = __self.closest(".table");
        let input = closest.find('tbody input[name="id[]"]');
        __self.is(":checked")
            ? __self.prop("checked", false)
            : __self.prop("checked", true);
        input.is(":checked")
            ? input.prop("checked", false)
            : input.prop("checked", true);
    });

    $(".btn-import__from").click(function () {
        $(".file-selector").click();
    });

    $(document).on("change", "#option_selected", function () {
        let value = Number($(this).find("option:selected").val());
        if (value && value !== 0) {
            $("#ip-pool").addClass("d-none");
            $("#row-ip").removeClass("d-none");
        } else {
            $("#ip-pool").removeClass("d-none");
            $("#row-ip").addClass("d-none");
        }
    });

    // $('.select2').select2();
    $(document).on("click", ".btn-add__newProduct", function (e) {
        e.preventDefault();
        let __self = $(this);
        let apiGetProductType = __self.attr("data-ajax");
        loadMultipleProduct(apiGetProductType);
    });

    /*
     * Select product type
     */
    $(document).on("change", ".order_product_type", function (e) {
        e.preventDefault();
        let value = $(this).find("option:selected").val();
        let target = $(this).attr("data-append");

        if (value && value !== 0) {
            $(`.product_id[name="${target}"]`)
                .empty()
                .append('<option value="">Loading ...</option>');
            $.get(apiGetProduct, { type: value }, function (response) {
                if (response.error === false) {
                    let html = '<option value="0">---------</option>';
                    response.data.forEach((element) => {
                        html += `<option value="${element.id}"
                                        data-price="${element.price}"
                                        data-price-sale="${element.price_sale}">${element.name}</option>`;
                    });
                    $(`.product_id[name="${target}"]`).empty().append(html);
                } else {
                    $(`.product_id[name="${target}"]`)
                        .empty()
                        .append('<option value="0">---------</option>');
                }
            });
        }
    });

    /*
     * Select product item
     */
    $(document).on("change", ".product_id", function () {
        let product = $(this).find("option:selected");
        let parent = $(this).parent().parent().parent();

        if (product.length && Number(product.val()) !== 0) {
            let html = `<tr class="border-bottom"
                                        data-price="${Number(
                                            product.attr("data-price")
                                        )}"
                                        data-product="${$(this).attr("name")}">
                                    <td class="fs-20"><strong>${product.text()}</strong></td>
                                    <td class="quantity__append fs-20">${parent
                                        .find(".quantity")
                                        .val()}</td>
                                    <td
                                        data-quantity="${Number(
                                            parent.find(".quantity").val()
                                        )}"
                                        data-price="${Number(
                                            product.attr("data-price")
                                        )}"
                                        class="text-right price-append fs-20">
                                        ${Number(
                                            product.attr("data-price")
                                        ).toLocaleString()}đ
                                    </td>
                                    </tr>`;

            $(`tr[data-product="${product.attr("name")}"]`).remove();
            $(".append-element__js").append(html);

            appendBilling();
        }
    });

    /*
     * Change quantity
     */
    $(document).on("keyup", ".quantity", function () {
        let quantity = $(this).val();
        let item_id = $(this).attr("name");
        item_id = item_id.replace("product[", "");
        item_id = item_id.replace("][quantity]", "");

        let elementParent = $(
            `tr[data-product="product[${item_id}][product_id]"]`
        );
        let appendDataQuantity = elementParent.find(".price-append");
        let appendTrElement = elementParent.find(".quantity__append");
        let priceProduct = appendDataQuantity.attr("data-price");
        appendDataQuantity
            .empty()
            .text(Number(priceProduct * quantity).toLocaleString() + "đ");
        appendDataQuantity.attr("data-quantity", quantity);
        appendTrElement.empty().text(quantity);
        appendBilling();
    });

    /*
     * Change price custom
     */
    $(document).on("keyup", ".price_custom", function () {
        let price = Number($(this).val());

        let item_id = $(this).attr("name");

        item_id = item_id.replace("product[", "");
        item_id = item_id.replace("][price_custom]", "");
        let elementParent = $(
            `tr[data-product="product[${item_id}][product_id]"]`
        );
        let appendDataQuantity = elementParent.find(".price-append");

        let elementQuantity = appendDataQuantity.attr("data-quantity");
        appendDataQuantity.attr("data-price", Number(price));

        appendDataQuantity.text(
            Number(price * elementQuantity).toLocaleString() + "đ"
        );

        if (price === 0) {
            appendDataQuantity.attr(
                "data-price",
                Number(elementParent.attr("data-price"))
            );
            appendDataQuantity.text(
                Number(
                    elementParent.attr("data-price") * elementQuantity
                ).toLocaleString() + "đ"
            );
        }
        appendBilling();
    });

    // //Trigger vCenter when click to Create button
    // $('.btn-trigger').click(function () {
    //     appendOsGroup()
    // })
    $(document).on("click", ".btn-reinstall", function (e) {
        e.preventDefault();
        appendOsGroup();
        let __self = $(this);
        let taskReinstall = __self.attr("data-ajax");
        let form = $(__self.attr("data-target"));
        form.attr("action", taskReinstall);
        form.find("input.form-action").empty().val("reinstall");
    });

    $('select[name="change-product"]').change(function () {
        let value = $(this).find("option:selected").attr("data-url");
        if (value) {
            return (window.location.href = value);
        }
    });

    $(".change-validate").keyup(function () {
        let val = $(this).val();
        $('input[type="hidden"][name="domain"]').empty().val(val);
    });

    $(".btn-general__code").click(function () {
        let Character = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
        let limit = 10;
        let coupon = "";
        let CharacterArray = Character.split("");

        for (let i = 0; i < limit; i++) {
            let Number = randomIntFromInterval(0, CharacterArray.length - 1);
            coupon += CharacterArray[Number];
        }
        $('input[name="code"]').empty().val(coupon);
    });

    //Date range picker
    $(".reservation")
        .daterangepicker({
            autoUpdateInput: false,
        })
        .on("apply.daterangepicker", function (e, picker) {
            picker.element.val(
                picker.startDate.format("MM/DD/YYYY") +
                    " - " +
                    picker.endDate.format("MM/DD/YYYY")
            );
        });

    $("#input-file").change(function () {
        $(".btn-upload__file").removeClass("disabled");
    });

    $(".btn-upload__file").click(function (e) {
        e.preventDefault();
        let modal = $("#modal-form-xl");
        let form = new FormData();
        form.append("file", $("#input-file")[0].files[0]);
        $.ajax({
            url: apiUpload,
            data: form,
            type: "POST",
            enctype: "multipart/form-data",
            processData: false, // tell jQuery not to process the data
            contentType: false, // tell jQuery not to set contentType
            beforeSend: function () {
                swal.fire({
                    html: sweet_loader + "<h4>Đang tải lên dữ liệu</h4>",
                    showConfirmButton: false,
                });
            },
            success: function (response) {
                swal.close();
                if (response.error === false) {
                    Swal.fire({
                        title: "Thành công",
                        text: response.message,
                        icon: "success",
                        confirmButtonColor: "#28a745",
                        confirmButtonText: "Xác nhận",
                    }).then((result) => {
                        if (result.isConfirmed) {
                            modal.modal("hide");
                            let attr = modal.attr("data-last");
                            $(`input[name="${attr}"]`)
                                .val(response.url)
                                .trigger("input");
                        }
                    });
                } else {
                    Swal.fire({
                        title: "Opp...",
                        text: response.message,
                        icon: "error",
                        confirmButtonColor: "#28a745",
                        confirmButtonText: "Xác nhận",
                    });
                }
            },
        });
    });

    $(".btn-loadMore").click(function () {
        let default_number = 20;
        let number_img = $(".filer-show__media > div").length;
        let page = Math.ceil(number_img / default_number) + 1;
        $.ajax({
            url: apiMedia,
            data: {
                pages: page,
            },
            type: "post",
            beforeSend: function () {
                Swal.fire({
                    html: sweet_loader + "<h4>Please wait a second ...</h4>",
                    showConfirmButton: false,
                });
            },
            success: function (response) {
                Swal.close();
                let base_iframe = $(".filer-show__media");
                if (response.data) {
                    base_iframe.append(response.data);
                }
            },
        });
    });

    $('[data-toggle="tooltip"]').tooltip();

    $(".info-box").click(function () {
        let href = $(this).attr("data-href");
        if (href) {
            window.location.href = href;
            return;
        }
    });
    $(".check-all__permission").click(function (e) {
        e.stopPropagation();
        $('input[name="permission[]"]').prop("checked", true);
    });
    $(".uncheck-all__permission").click(function (e) {
        e.stopPropagation();
        $('input[name="permission[]"]').prop("checked", false);
    });
});

var initSelect2 = function () {
    $('.select2.single__select').select2({
        allowClear: false,
        width: '100%',
        height: '100%',
    });
};