jQuery(document).ready(function ($){

    let tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
    tooltipTriggerList.map(function (tooltipTriggerEl) {
        return new bootstrap.Tooltip(tooltipTriggerEl)
    })
    $('.password-toggle-icon').click(function () {
        let password = $(this).parent().find('input')

        if (password.attr("type") === "password") {
            password.attr("type", "text")
            $(this).find('i').removeClass("fa-eye-slash");
            $(this).find('i').addClass("fa-eye");

        } else {
            password.attr("type", "password")
            $(this).find('i').addClass("fa-eye-slash");
            $(this).find('i').removeClass("fa-eye");
        }
    })

    $('.select-version__os').change(function () {
        let selected = $(this).find('option:selected').val();
        if (selected === 0) return this;
        let parent = $(this).parent().parent().parent();
        parent.parent().find('.box-os_center').removeClass('active');
        parent.addClass('active')
        let os_id = parent.attr('data-os');
        let os_version_id = selected;
        let product_id = parent.parent().parent().parent().attr('data-product');
        parent.parent().find(`input[name="vps[${product_id}][os_id]"]`).empty().val(os_id)
        parent.parent().find(`input[name="vps[${product_id}][os_version_id]"]`).empty().val(os_version_id)
    });

    $('.time-buy__change').change(function () {
        let element = $(this).parent().parent().parent().parent();
        let target = element.attr('data-target');
        let key = element.attr('data-product');

        appendChangeCart(target, key)
    })

    /* downgrade add on */
    $('input.minus.is-form').click(function () {
        let elementParent = $(this).parent();
        let productElement = elementParent.parent().parent().parent().parent().parent();
        let elementChange = elementParent.find('.input-qty');
        let step = Number(elementChange.attr('step'));
        let min = Number(elementChange.attr('min'));
        let price = Number(elementChange.attr('data-price'));
        let target = elementChange.attr('data-name');
        let quantity = Number(elementChange.val());

        quantity -= step;

        if (min > quantity) {

            return false
        }

        elementChange.empty().val(quantity)

        appendAddonCart(target, price, quantity, step, "-", productElement.attr('data-product'), productElement.attr('data-target'));

    })

    /* upgrade add on */
    $('input.plus.is-form').click(function () {
        let elementParent = $(this).parent();
        let productElement = elementParent.parent().parent().parent().parent().parent();
        let elementChange = elementParent.find('.input-qty');
        let step = Number(elementChange.attr('step'));
        let max = Number(elementChange.attr('max'));
        let price = Number(elementChange.attr('data-price'));
        let target = elementChange.attr('data-name');
        let quantity = Number(elementChange.val());

        quantity += step;

        if (quantity > max) {
            return false;
        }
        elementChange.empty().val(quantity)
        appendAddonCart(target, price, quantity, step, "+", productElement.attr('data-product'), productElement.attr('data-target'));
    })

    /* Rules validate form Oder at Cart Page */
    if ($('.form-submit__oder').length) {
        let allProduct = document.querySelectorAll('.row-product__item');
        if (allProduct.length) {
            let form = $(".form-submit__oder")
            form.validate({
                onfocusout: false,
                onkeyup: false,
                onclick: false,
                ignore: ":hidden:not('.os_select_hidden')"
            })
            let formRule = form.validate().settings.rules;
            let formMessage = form.validate().settings.messages;
            allProduct.forEach((element, index) => {
                switch ($(element).attr('data-target')) {
                    case "hosting":
                        formRule[`hosting[${index}][time_buy]`] = "required";
                        formMessage[`hosting[${index}][time_buy]`] = {
                            required: "Vui lòng chọn thời gian thanh toán!"
                        };

                        formRule[`hosting[${index}][domain]`] = "required";
                        formMessage[`hosting[${index}][domain]`] = {
                            required: "Vui lòng nhập tên miền để kích hoạt!"
                        };

                        break;
                    case "vps":
                        formRule[`vps[${index}][time_buy]`] = "required";
                        formMessage[`vps[${index}][time_buy]`] = {
                            required: "Vui lòng chọn thời gian thanh toán!"
                        };

                        formRule[`vps[${index}][hostname]`] = "required";
                        formMessage[`vps[${index}][hostname]`] = {
                            required: "Vui lòng nhập hostname!"
                        };

                        formRule[`vps[${index}][os_id]`] = "required";
                        formMessage[`vps[${index}][os_id]`] = {
                            required: "Vui lòng chọn hệ điều hành!"
                        };

                        formRule[`vps[${index}][os_version_id]`] = "required";
                        formMessage[`vps[${index}][os_version_id]`] = {
                            required: "Vui lòng chọn phiên bản cần cài đặt!"
                        };
                        break;
                }
            })
            form.validate().settings.rules = formRule;
            form.validate().settings.messages = formMessage;
        }

    }

    $('.btn-order').click(function () {
        let promotion = $('input[name="promotion_code"]').val()
        let form = $('.form-submit__oder')
        if (form.valid()) {
            form.append(`<input type="hidden" name="discount" value="${promotion}">`);
            form.submit()
        }

    })

    $('body').on('click', '.btn-reinstall', function () {
        appendOsGroup();
        $('input.form-action').empty().val('reinstall');
    })

    $('#os_group_id').change(function () {
        let value = Number($(this).find('option:selected').val());

        if (value && value !== 0) {
            appendChild(APIGetVersion, 'os_version', {group: value});
        }
    })

})