var sweet_loader = '<div class="sweet_loader"><svg viewBox="0 0 140 140" width="140" height="140"><g class="outline"><path d="m 70 28 a 1 1 0 0 0 0 84 a 1 1 0 0 0 0 -84" stroke="rgba(0,0,0,0.1)" stroke-width="4" fill="none" stroke-linecap="round" stroke-linejoin="round"></path></g><g class="circle"><path d="m 70 28 a 1 1 0 0 0 0 84 a 1 1 0 0 0 0 -84" stroke="#71BBFF" stroke-width="4" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-dashoffset="200" stroke-dasharray="300"></path></g></svg></div>';

function PaymentInvoice(invoice = 0) {
    $.ajax({
        url: ApiUserPaymentInvoice,
        data: {
            invoice: invoice
        },
        type: "post",
        beforeSend: function () {
            Swal.fire({
                html: sweet_loader + "<h4>Đang xử lý dữ liệu ...</h4>",
                showConfirmButton: false,
            })
        },
        success: function (response) {
            if (response.error === false) {
                Swal.fire({
                    title: "Payment Successfully",
                    text: "Thanh toán hoá đơn thành công!",
                    icon: "success",
                    confirmButtonColor: "#3085d6",
                    confirmButtonText: "Xác nhận"
                }).then((result) => {
                    if (result.isConfirmed) {
                        location.reload()
                    }
                })
            } else {
                Swal.fire({
                    title: "Có lỗi xảy ra?",
                    text: response.message,
                    icon: "warning",
                    showCancelButton: false,
                    confirmButtonColor: "var(--color-brand)",
                    confirmButtonText: "Xác nhận"
                })
            }
        }
    })
}

/* Action for VirtualMachine */
function VirtualMachineAction(action = '', id = '', userid = 0) {
    $.ajax({
        url: APIServiceAction,
        data: {
            action: action,
            product: id,
            userid: userid
        },
        type: "post",
        beforeSend: function () {
            Swal.fire({
                html: sweet_loader + "<h4>Đang xử lý dữ liệu ...</h4>",
                showConfirmButton: false,
            })
        },
        success: function (response) {
            if (response.status === false) {
                Swal.fire({
                    title: "Có lỗi xảy ra?",
                    text: data.message,
                    icon: "warning",
                    showCancelButton: true,
                    confirmButtonColor: "var(--color-brand)",
                    cancelButtonColor: "#818181",
                    confirmButtonText: "Ok"
                })
            } else {
                $('.system-status').empty().append('<span class="badge me-2 fs-5 text-warning">Đang load panel</span><div style="width: 30px; height: 30px; margin-left: 10px" class="spinner-border text-warning" role="status"><span class="visually-hidden">Loading...</span></div>')
                Swal.fire({
                    title: "Thành công",
                    text: response.message,
                    icon: "success",
                    showCancelButton: false,
                    confirmButtonColor: "var(--color-brand)",
                    confirmButtonText: "Xác nhận"
                }).then((results) => {
                    if (results.isConfirmed)
                    {
                        $('.append-action').empty();
                    }
                })
            }
        }
    })
}

/* Append all input from Form Order to form Coupon */
function loadForm(e) {
    let form = $(e).parent().parent().parent()

    let Inputs = document.querySelectorAll('[name^="vps["],[name^="hosting["]');

    Inputs.forEach((element) => {
        let key = element.getAttribute('name');
        form.append(`<input type="hidden" name="${key}" value="${element.value}">`);

    })
    form.submit()
}

/* Change Cart when change Month */
function appendChangeCart(target = '', key = 0) {

    /* Create new variable element */
    let ElementSubTotal = $('.cart_total_novat');
    let ElementVat = $('.cart_vat');
    let ElementTotal = $('.cart_total_amount');
    let PriceTarget = $(`[data-focus="${target}_${key}"]`)


    /* Create new variable price for element SubTotal */
    let PriceSubTotal = Number(ElementSubTotal.attr('data-price'));

    /* Create Old variable element Product for target */
    let CartTarget = $(`[data-product="${key}"][data-target="${target}"]`)
    let OldPrice = Number(PriceTarget.find(`.${target}_${key}_price-amount`).attr('data-price'));

    /* Get all Old addon total */
    let OldAddOnTotal = 0
    let AllElementAddon = document.querySelectorAll('.name-price');
    if (AllElementAddon.length) {
        AllElementAddon.forEach((element) => {
            OldAddOnTotal += Number($(element).attr('data-price__addon'));
        })
    }


    /* Config new Month */
    let ElementMonth = CartTarget.find('.time-buy__change');
    let Price = Number(ElementMonth.attr('data-price'));
    let Month = Number(ElementMonth.find('option:selected').val())

    /* Set new Config Month */
    PriceTarget.find(`.${target}_${key}_month`).text(Month);
    PriceTarget.find(`.${target}_${key}_month`).attr('data-month', Month);

    /* Create new variable Price */
    let TotalAddon = SumTotalAddon();
    let SubTotalPrice = (PriceSubTotal - OldPrice - OldAddOnTotal) + (Price * Month + TotalAddon);
    let VAT = SubTotalPrice * 0.1;
    let Total = SubTotalPrice + VAT;

    /* Config new price to all element */

    PriceTarget.find(`.${target}_${key}_price-amount`).attr('data-price', Price * Month);
    PriceTarget.find(`.${target}_${key}_price-amount`).text((Price * Month).toLocaleString());


    ElementSubTotal.attr('data-price', SubTotalPrice)
    ElementSubTotal.text(SubTotalPrice.toLocaleString())

    ElementVat.attr('data-price', VAT)
    ElementVat.text(VAT.toLocaleString())

    ElementTotal.attr('data-price', Total)
    ElementTotal.text(Total.toLocaleString())
}

/* Change Cart when change Addon */
function appendAddonCart(target = '', price = 0, quantity = 0, step = 0, type = "-", parent = 0, parent_target = '') {
    let parentTarget = $(`[data-focus="${parent_target}_${parent}"]`).find('.box-add__on')

    if (quantity === 0) {

        let service_element = $(`div[data-target="${parent_target}"][data-product="${parent}"]`);

        if (parentTarget.find(`.${parent_target}_${parent}_add_${target}`)) {
            parentTarget.find(`.${parent_target}_${parent}_add_${target}`).remove()
        }

        if (Number(service_element.find('.input-qty[data-name="cpu"]').val()) === 0 && Number(service_element.find('.input-qty[data-name="ssd"]').val()) === 0 && Number(service_element.find('.input-qty[data-name="ram"]').val()) === 0) {
            parentTarget.addClass('d-none')
        }

        appendChangeCart(parent_target, parent);
        return false;
    }

    parentTarget.removeClass('d-none')

    if (parentTarget.find(`.${parent_target}_${parent}_add_${target}`)) {
        parentTarget.find(`.${parent_target}_${parent}_add_${target}`).remove()
    }

    let html = `<div class="price addon-price ${parent_target}_${parent}_add_${target}">`
    html += `<div class="addon-price__name">${target.toLocaleUpperCase()}</div>`;
    html += "<div class='d-flex justify-content-between'>";
    html += "<div>";
    html += "<span class=\"price-amount\">"
    html += `<span data-price="${(price * quantity)}" class="${parent_target}_${parent}_add_${target}_price-amount">`
    html += (price * quantity).toLocaleString();
    html += "</span>đ</span>"
    html += "</div>"
    html += "<div> X ";
    html += quantity;
    html += "</div>";
    html += "</div>";
    html += "</div>";

    parentTarget.append(html)

    appendChangeCart(parent_target, parent);

}

/* Sum total addon */
function SumTotalAddon() {
    /* Get all Element Producht */
    let total = 0;
    let allProduct = document.querySelectorAll('.name-price');
    if (allProduct.length) {
        allProduct.forEach(function (element) {
            let price = 0;
            let variable = $(element);
            let target = variable.attr('data-focus')
            let boxHasElementAddon = variable.find('.addon-price .price-amount');
            let Month = Number(variable.find(`.${target}_month`).attr('data-month'));

            if (boxHasElementAddon.length) {
                boxHasElementAddon.each(function (index, element) {
                    let AddonPrice = $(element).find('span').attr('data-price')
                    price += Number(AddonPrice) * Month;
                })
            }

            variable.attr('data-price__addon', price);
            total += price;
        });
    }
    return Number(total);

}

/* Append Os Group to Element*/
function appendOsGroup() {
    $(`#os_group_id`).empty().append('<option value="">Loading ...</option>');
    $.get(APIGetOsGroup, {host: $('input[name="host_id"]').val()}, function (response) {
        if (response.error === false) {
            let html = '<option value="0">---------</option>';
            response.data.forEach((element) => {
                html += `<option value="${element.id}">${element.name}</option>`;
            })
            $(`#os_group_id`).empty().append(html)
        } else {
            $(`#os_group_id`).empty().append('<option value="0">---------</option>');
        }
    })
}

/* Append Element */
function appendChild(apiUrl = '', id = '', data = {}) {
    $(`#${id}`).empty().append('<option value="">Loading ...</option>');
    $.get(apiUrl, data, function (response) {
        if (response.error === false) {
            let html = '<option value="0">---------</option>';
            response.data.forEach((element) => {
                html += `<option value="${element.id}">${element.name}</option>`;
            })
            $(`#${id}`).empty().append(html)
        } else {
            $(`#${id}`).empty().append('<option value="0">---------</option>');
        }
    })
        .fail(function (error) {
            toastr.error(error.statusText)
        })
}

/* Append Snapshot */
function appendSnapshot(product = 0, userid = 0) {
    Swal.fire({
        html: sweet_loader + "<h4>Đang xử lý dữ liệu ...</h4>",
        showConfirmButton: false,
    })
    $.get(APIGetSnapshot, {product: product, user: userid})
        .done(function (response) {
            Swal.close();
            if ($('body').find('#staticBackdrop').length) {
                $('body').find('#staticBackdrop').remove()
            }
            $('.append-action').after(response.data);
            $('#staticBackdrop').addClass('show')
        })
        .catch()
}

/* Action Snap */
function SnapshotAction(product = 0, userid = 0, action = '', snap = 0) {
    $('body').find('#staticBackdrop').remove()
    Swal.fire({
        html: sweet_loader + "<h4>Đang xử lý dữ liệu ...</h4>",
        showConfirmButton: false,
    })
    $.post(APIServiceSnapShot, {product: product, userid: userid, action: action, snap: snap})
        .done(function (response) {
            if (response.status === false) {
                Swal.fire({
                    title: "Có lỗi xảy ra?",
                    text: data.message,
                    icon: "warning",
                    showCancelButton: true,
                    confirmButtonColor: "var(--color-brand)",
                    cancelButtonColor: "#818181",
                    confirmButtonText: "Ok"
                })
            } else {
                window.Echo.channel('Notification')
                    .listen('.Notification-Event', (response) => {
                        Swal.close();
                        if (response.status) {
                            Swal.fire({
                                title: "Thành công",
                                text: response.message,
                                icon: "success",
                                showCancelButton: false,
                                confirmButtonColor: "var(--color-brand)",
                                confirmButtonText: "Xác nhận"
                            })
                        } else {
                            Swal.fire({
                                title: "Có lỗi xảy ra?",
                                text: response.message,
                                icon: "warning",
                                showCancelButton: true,
                                confirmButtonColor: "var(--color-brand)",
                                cancelButtonColor: "#818181",
                                confirmButtonText: "Ok"
                            })
                        }
                    });
            }
        })
        .catch(function (response) {

        })
}

/* Append Upgrade System */
function appendUpgradeForm(product = 0) {
    Swal.fire({
        html: sweet_loader + "<h4>Đang xử lý dữ liệu ...</h4>",
        showConfirmButton: false,
    })
    $.get(APIGetProductAddon, {product: product})
        .done(function (response) {
            Swal.close();
            let body = $('body')

            body.find('#upgrade').length ? body.find('#upgrade').remove() : "";

            $('.append-action').after(response.data);
            $('#upgrade').addClass('show')
        })
        .catch(function (response) {
            console.log(response)
        })
}

/* Addon Change Form Upgrade */

function appendAddon(parent, item = '', price = 0, step = 0, type = '-') {
    let quantity = Number(parent.find('.input-qty').val());
    let OldPrice = price * quantity
    if (type === '-') {
        quantity -= step;
    } else {
        quantity += step;
    }

    parent.find('.input-qty').val(quantity <= 0 ? 0 : quantity)

    let html = `
    <div id="${item}" class="item-bottom item-price-all d-flex justify-content-between align-items-center">
                                    <span class="font-weight-bold cart_widget_subtitle">
                                        ${item.toLocaleUpperCase()}
                                    </span>
                                    <span class="price">
                                        <span data-price="${quantity * price}"
                                              class="price-amount price-one font-weight-bold color-main">
                                           ${(quantity * price).toLocaleString()}đ
                                        </span>
                                    </span>
                                </div>`;
    let body = $('body');
    body.find(`#upgrade .col-md-5 .box-add__on #${item}`).remove()
    if (quantity <= 0) {
        actionChangePriceUpgrade(price, quantity, step, type, OldPrice)
        return false;
    }
    actionChangePriceUpgrade(price, quantity, step, type, OldPrice)
    body.find('#upgrade .col-md-5 .box-add__on hr').before(html)
}

function actionChangePriceUpgrade(price = 0, quantity = 0, step = 0, type = '', oldPrice = 0) {
    if (quantity < 0) {
        return false;
    }
    let body = $('body');
    let TotalNoVal = body.find('#upgrade .cart_total_novat')
    let VAT = body.find('#upgrade .cart_vat')
    let Total = body.find('#upgrade .cart_total_amount')
    let Billing = Number(body.find('#upgrade input[name="billing"]').val())

    /* ============================================== */
    let TotalNoValPrice = Number(TotalNoVal.attr('data-price'));
    let VATPrice = Number(VAT.attr('data-price'));
    let TotalPrice = Number(Total.attr('data-price'));
    /* ============================================== */

    if (type === '-') {

        TotalNoValPrice = (TotalNoValPrice - oldPrice * Billing) + (price * quantity * Billing);

        if (TotalNoValPrice <= 0) {
            TotalNoValPrice = 0;
        }
        VATPrice = TotalNoValPrice * 0.1;
        TotalPrice = TotalNoValPrice + VATPrice;
    } else {
        TotalNoValPrice = (TotalNoValPrice - oldPrice * Billing) + (price * quantity * Billing);
        VATPrice = TotalNoValPrice * 0.1;
        TotalPrice = TotalNoValPrice + VATPrice;
    }

    TotalNoVal.attr('data-price', TotalNoValPrice);
    TotalNoVal.text(TotalNoValPrice.toLocaleString());

    VAT.attr('data-price', VATPrice);
    VAT.text(VATPrice.toLocaleString());

    Total.attr('data-price', TotalPrice);
    Total.text(TotalPrice.toLocaleString());
}

function OrderAddon(product = 0, billing = 0) {
    let body = $('body');
    let allItem = body.find('#upgrade .input-qty');
    let error = [];
    let addon = {};
    if (allItem.length) {
        allItem.each((index, object) => {
            if (Number(object.value) === 0) {
                error.push(object.name)
            }
            addon[`${object.name}`] = {
                price: object.getAttribute('data-price'),
                quantity: object.value
            };
        })
    }
    if (error.length === 3) {
        error.forEach((element) => {
            body.find(`#upgrade .input-qty[name="${element}"]`).addClass('error');
        })
        return false;
    }

    Swal.fire({
        title: "Chú ý?",
        text: "Trong quá trình nâng cấp, Chúng tôi sẽ tắt máy chủ của bạn!",
        icon: "warning",
        showCancelButton: true,
        confirmButtonColor: "#3085d6",
        cancelButtonColor: "#d33",
        confirmButtonText: "Xác nhận"
    }).then((result) => {
        if (result.isConfirmed) {
            $.ajax({
                url: APICartAddon,
                data: {
                    addon,
                    product,
                    billing
                },
                type: 'post',
                beforeSend: function () {
                    Swal.fire({
                        html: sweet_loader + "<h4>Đang xử lý dữ liệu ...</h4>",
                        showConfirmButton: false,
                    })
                },
                success: function (response) {
                    Swal.close();
                    if (response.error === false) {
                        Swal.fire({
                            title: "Đặt hàng thành công",
                            text: response.message,
                            icon: "success",
                            showCancelButton: true,
                            confirmButtonColor: "#3085d6",
                            cancelButtonColor: "#d33",
                            confirmButtonText: "Xác nhận"
                        }).then((result) => {
                            $('body').find('#upgrade').remove()
                        })
                    } else {
                        Swal.fire({
                            icon: "error",
                            title: "Oops...",
                            text: response.message
                        });
                    }
                }
            });
        }
    });
}

function RenewService(product = 0, billing = 0, type = 0) {
    Swal.fire({
        title: "Chú ý?",
        text: "Bạn đang yêu cầu gia hạn dịch vụ!",
        icon: "warning",
        showCancelButton: true,
        confirmButtonColor: "#3085d6",
        cancelButtonColor: "#d33",
        confirmButtonText: "Xác nhận"
    }).then((result) => {
        if (result.isConfirmed) {
            $.ajax({
                url: APIRenewService,
                data: {
                    type,
                    product,
                    billing
                },
                type: 'post',
                beforeSend: function () {
                    Swal.fire({
                        html: sweet_loader + "<h4>Đang xử lý dữ liệu ...</h4>",
                        showConfirmButton: false,
                    })
                },
                success: function (response) {
                    Swal.close();
                    if (response.error === false) {
                        Swal.fire({
                            title: "Success",
                            text: response.message,
                            icon: "success",
                            showCancelButton: true,
                            confirmButtonColor: "#3085d6",
                            cancelButtonColor: "#d33",
                            confirmButtonText: "Xác nhận"
                        }).then((result) => {
                            $('#renew').modal('hide')
                        })
                    } else {
                        Swal.fire({
                            icon: "error",
                            title: "Oops...",
                            text: response.message
                        });
                    }
                }
            });
        }
    });
}

function CopyDiscount(value = '') {

    let tempTextarea = $('<textarea>');
    $('body').append(tempTextarea);
    tempTextarea.val(value).select();
    document.execCommand('copy');
    tempTextarea.remove();

    Swal.fire({
        title: "Copy Successfully",
        text: "Copy mã giảm giá thành công!",
        icon: "success",
        confirmButtonColor: "#3085d6",
        confirmButtonText: "Xác nhận"
    })
}

toastr.options = {
    "closeButton": false,
    "debug": false,
    "newestOnTop": false,
    "progressBar": false,
    "positionClass": "toast-top-right",
    "preventDuplicates": false,
    "onclick": null,
    "showDuration": "300",
    "hideDuration": "1000",
    "timeOut": "5000",
    "extendedTimeOut": "1000",
    "showEasing": "swing",
    "hideEasing": "linear",
    "showMethod": "fadeIn",
    "hideMethod": "fadeOut"
}