let handleAjaxError = (error) => {
    toastr.error(error.statusText);
};

let appendVCenter = (apiGetVCenter) => {
    let vCenterSelect = $('[name="vCenter_id"]');
    vCenterSelect.empty().append('<option value="">Loading ...</option>');
    $.get(apiGetVCenter, (response) => {
        if (!response.error) {
            let html = '<option value="0">---------</option>';
            response.data.forEach((element) => {
                html += `<option value="${element.id}">${element.host}</option>`;
            });
            vCenterSelect.empty().append(html);
        } else {
            toastr.error(response.message);
            vCenterSelect.empty().append('<option value="0">---------</option>');
        }
    }).fail(handleAjaxError);
};

let appendBilling = () => {
    let prices = $(".price-append");
    let total_price = 0;
    let tax_price = 0;
    if (prices.length) {
        prices.each((index, element) => {
            let quantity = $(element).attr("data-quantity");
            total_price += Number($(element).attr("data-price")) * quantity;
            tax_price += total_price * 0.1;
        });
    }

    let total = total_price + tax_price;

    $("#tax_append").empty().text(tax_price.toLocaleString() + "đ");
    $("#total_append").empty().text(total.toLocaleString() + "đ");
};

let loadMultipleProduct = (apiGetProductType) => {
    let productItem = $(".product_id").length;
    let html = `<div class="box clients-summary__box p-4">
                    <div class="row form-group">
                        <label for="order_product_type" class="col-md-4">Product Type</label>
                        <div class="col-md-8">
                            <select class="form-control order_product_type" data-append="product[${productItem}][product_id]" name="product[${productItem}][type]">
                                <option value="0">-----------</option>
                            </select>
                        </div>
                    </div>
                    <div class="row form-group">
                        <label for="product_id" class="col-md-4">Product</label>
                        <div class="col-md-8">
                            <select class="form-control product_id" name="product[${productItem}][product_id]">
                                <option value="0">-----------</option>
                            </select>
                        </div>
                    </div>
                    <div class="row form-group">
                        <label for="Domain" class="col-md-4">Domain</label>
                        <div class="col-md-8">
                            <input type="text" class="form-control Domain" name="product[${productItem}][domain]" value="" >
                        </div>
                    </div>
                    <div class="row form-group">
                        <label for="billing" class="col-md-4">Billing Cycle</label>
                        <div class="col-md-8">
                            <select class="form-control billing" name="product[${productItem}][billing]">
                                <option value="0">Free</option>
                                <option value="1">One Time</option>
                                <option value="2" selected>Monthly</option>
                                <option value="3">Quarterly</option>
                                <option value="4">Semi-Annually</option>
                                <option value="5">Annually</option>
                            </select>
                        </div>
                    </div>
                    <div class="row form-group">
                        <label for="quantity" class="col-md-4">Quantity</label>
                        <div class="col-md-8">
                            <input type="number" class="form-control quantity" name="product[${productItem}][quantity]" value="1" min="1">
                        </div>
                    </div>
                    <div class="row form-group">
                        <label for="price_custom" class="col-md-4">Price Override</label>
                        <div class="col-md-8">
                            <input type="number" class="form-control price_custom" name="product[${productItem}][price_custom]" value="" min="1">
                        </div>
                    </div>
                </div>`;

    $(".append-new__product").append(html);

    $.get(apiGetProductType, (response) => {
        if (!response.error) {
            let html = '<option value="0">---------</option>';
            response.data.forEach((element) => {
                html += `<option value="${element.id}">${element.name}</option>`;
            });
            $(`select[name="product[${productItem}][type]"]`).empty().append(html);
        } else {
            toastr.error(response.message);
            $(`select[name="product[${productItem}][type]"]`).empty().append('<option value="0">---------</option>');
        }
    }).fail(handleAjaxError);
};

let randomIntFromInterval = (min, max) => Math.floor(Math.random() * (max - min + 1) + min);

let appendOsGroup = () => {
    let osGroupSelect = $('#os_group_id');
    osGroupSelect.empty().append('<option value="">Loading ...</option>');
    $.get(apiGetOsGroup, { host: $('input[name="host_id"]').val() }, (response) => {
        if (!response.error) {
            let html = '<option value="0">---------</option>';
            response.data.forEach((element) => {
                html += `<option value="${element.id}">${element.name}</option>`;
            });
            osGroupSelect.empty().append(html);
        } else {
            osGroupSelect.empty().append('<option value="0">---------</option>');
        }
    }).fail(handleAjaxError);
};

let appendChild = (apiUrl = "", item, data = {}) => {
    item.empty().append('<option value="">Loading ...</option>');
    $.get(apiUrl, data, (response) => {
        if (!response.error) {
            let html = '<option value="0">---------</option>';
            response.data.forEach((element) => {
                html += `<option value="${element.id}">${element.name}</option>`;
            });
            item.empty().append(html);
        } else {
            item.empty().append('<option value="0">---------</option>');
        }
    }).fail(handleAjaxError);
};

let LoadAllMedia = () => {
    $.ajax({
        url: apiMedia,
        data: { pages: 1 },
        type: "post",
        beforeSend: () => {
            Swal.fire({
                html: sweet_loader + "<h4>Please wait a second ...</h4>",
                showConfirmButton: false,
            });
        },
        success: (response) => {
            Swal.close();
            let baseIframe = $(".filer-show__media");
            baseIframe.empty();
            if (response.data.length) {
                baseIframe.append(response.data);
            }
        },
    });
};