function WebElementsForm() {

    sendForm();
    phoneMask();

    function sendForm() {

        var form = '.js_WebElementsForm';
        var apiUrl = '/extensions/Components/WebElementsForm/Api/';

        $(document).on('submit', form, function () {
            send($(this));
            return false;
        });


        function send(obj) {

            var componentId = obj.parents('.uni-componentContent').data('id');

            if (!componentId) {
                setNotify('Не удалось получить Id компонента!', 'error');
            }

            var data = new FormData;

            $.each(obj.serializeArray(), function (index, value) {
                data.append(value.name, value.value);
            });

            data.append('action', 'sendForm');
            data.append('componentId', componentId);

            preloader(obj);

            $.ajax({
                url: apiUrl,
                data: data,
                processData: false,
                contentType: false,
                type: 'POST',
                success: function (data) {
                    if(dataLayer) {
                        dataLayer.push({'event': 'formsend'});
                    }
                }
            });
        }

        function preloader(obj) {
            obj.find('button').attr('disabled', 'disabled');
            obj.css({
                'pointer-events': 'none',
                'opacity': '0.8'
            });
            setTimeout(function () {

                obj.find('input').val('');
                obj.find('textarea').val('');

                var message = '';

                message += '<div style="width: 400px; height: 180px; text-align: center;">';

                message += '<div class="js_WebElementsFormSuccessLoader" style="position: relative;"><img style="position: absolute; left: 0; right: 0; margin: 0 auto; top: 25px;" src="/resources/images/preloaders/loader1.svg"></div>';

                message += '<div class="js_WebElementsFormSuccessText" style="opacity: 0; transition: 0.4s">Форма успешно отправлена, мы скоро свяжемся с вами!<div style="text-align: center; margin-top: 10px;"><img class="js_WebElementsFormSuccessSmile" style="opacity: 0; transition: 1s; width: 30px;" src="/extensions/Components/WebElementsForm/Static/img/hugging-face.png"></div></div>';

                message += '</div>';

                $.fancybox.close();

                setTimeout(function () {
                    $.fancybox.open(message);
                }, 100);

                setTimeout(function () {
                    $('.js_WebElementsFormSuccessLoader').hide();
                    $('.js_WebElementsFormSuccessText').css('opacity', 1);

                    setTimeout(function () {
                        $('.js_WebElementsFormSuccessSmile').css('opacity', 1);
                    }, 200);

                    setTimeout(function () {
                        $.fancybox.close();
                        $('.js_WebElementsFormSuccessSmile').css('opacity', 0);
                        $('.js_WebElementsFormSuccessText').css('opacity', 0);
                    }, 7000);

                }, 700);

                obj.css({
                    'pointer-events': 'all',
                    'opacity': '1'
                });

                setTimeout(function () {
                    obj.find('button').removeAttr('disabled');
                }, 8000);

            }, 100);
        }
    }

    function phoneMask() {

        var phone = '.js_WebElementsForm .js-phone';

        var input = document.querySelector(phone);
        var countryData = window.intlTelInputGlobals.getCountryData();

        String.prototype.replaceAt = function (index, replacement) {
            return this.substr(0, index) + replacement + this.substr(index + replacement.length);
        };

        for (var i = 0; i < countryData.length; i++) {
            var country = countryData[i];
            country.name = country.name.replace(/.+\((.+)\)/, "$1");
        }

        var iti = window.intlTelInput(input, {
            initialCountry: "ru",
            utilsScript: "https://cdn.jsdelivr.net/npm/intl-tel-input@16.0.11/build/js/utils.js?1562189064761"
        });

        input.addEventListener('countrychange', function () {
            $(this).removeAttr('maxlength');
        });

        $(document).on('focus', phone, function () {
          if($(this).attr('placeholder') == undefined) {
            return false;
          }

          var mask = $(this).attr('placeholder').replace(/[1-9]/g, '9');
          var country = iti.getSelectedCountryData();

          if (country.iso2 == 'ru') {
              mask = mask.replaceAt(0, '8');
          }

          $(this).mask(mask);
        });
    }


}

$(function () {
    WebElementsForm();
});