(function() {
    let random_id = `7b1e05ece69ccaecf7256917dc11052d`; // случайный id для обращения скрипта к конкретно этой форме
    let site_url = `https://lk.unibix.ru`; // url сайта
    const type_form = 1; // тип формы менять (отправляется на сервер потом)

    // шаблон формы + success alert
    let template_form = `
        <div id="alert_${random_id}"></div>
        <form id="form_${random_id}" method="POST">
            <label>
                <div class="label">Ваше имя</div>
                <input class="input" type="text" placeholder="Введите имя" name="name">
            </label>
            <label>
                <div class="label">Ваш телефон</div>
                <input class="input" type="text" placeholder="Введите телефон" name="phone">
            </label>
            <input class="btn" type="submit" value="Отправить">
        </form>    
    `;

    // стили для формы
    let template_styles = `
        <style>
            #form_${random_id} { 
                display: flex; 
                flex-direction: column; 
                max-width: 100%; 
                padding: 5px; 
                margin: 0px; 
                font-family: sans-serif; 
                font-size: 10px; 
            }

            #form_${random_id}.d-none { display: none; }
            #alert_${random_id} { 
                max-width: 100%; 
                padding: 10px 15px; 
                margin: 0px; 
                margin-bottom: 10px; 
                font-family: sans-serif; 
                font-size: 18px; 
                border: 1px solid lightgray;
                border-radius: 3px;
                display: none;
            }

            #alert_${random_id}.success { 
                display: block;
                color: #0f5132;
                background-color: #d1e7dd;
            }

            #alert_${random_id}.danger { 
                display: block;
                color: #842029;
                background-color: #f5c2c7;
            }
            
            #form_${random_id} .label { font-size: 1.2rem; margin-bottom: 5px; }
            #form_${random_id} .btn { 
                font-size: 1rem; 
                border-radius: 3px; 
                padding: 5px 10px; 
                background-color: #0d6efd; 
                border: none; 
                color: white; 
                cursor: pointer; 
                display: inline-block;
                width: 100px;
            }

            #form_${random_id} .btn:hover { background-color: #4d6efd; }
            #form_${random_id} .input { 
                display: block; 
                width: 100%; 
                margin-bottom: 10px; 
                padding: 5px; 
                font-size: 1rem; 
                border: 1px solid gray;
                border-radius: 3px;
            }
        </style>    
    `;

    // Создаем элемент для вставки
    const form_wrapper = document.createElement('div');
    form_wrapper.innerHTML = template_form + template_styles;
    
    // js логика
    const form_element = form_wrapper.querySelector(`#form_${random_id}`);
    const alert_element = form_wrapper.querySelector(`#alert_${random_id}`);
    form_element.addEventListener('submit', event => handleSubmitForm(event, alert_element));

    // Вставляем форму после <script>
    const currentScript = document.currentScript;
    currentScript.insertAdjacentElement('afterend', form_wrapper);

    // Валидация телефона
    function validatePhone(phone) {
        var formattedPhone = (phone.replace(/[^+0-9]/g, '')).trim();
        return formattedPhone.substr(0, 1) === '+' && (formattedPhone.length === 12 || formattedPhone.length === 13)
    }

    // Валидация имени
    function validateName(name) {
        return name.trim().length;
    }

    // валидация формы
    function validateForm(data) {
        let isPhoneValid = validatePhone(data.phone);
        let isNameValid = validateName(data.name);

        let message = 'Всё ок';
        let isValid = isPhoneValid && isNameValid;

        if(!isPhoneValid) {
            message = 'Неверный телефон. Телефон должен начинаться с +';
        }

        if(!isNameValid) {
            message = 'Введите имя.';
        }

        return {
            isValid,
            message
        };
    }

    // обработка submit формы
    async function handleSubmitForm(event, alert_element) {
        event.preventDefault();
        event.stopPropagation();
        const fields = getFormFields(event.target);
        const formData = getFormData(fields);
        const validatedForm = validateForm(formData);
        if(validatedForm.isValid) {
            const response = await sendData(formData);
            showHideAlert(event.target, alert_element, response.status === 200, response.message);
        } else {
            showHideAlert(event.target, alert_element, false, validatedForm.message);
        }
    }

    // скрыть / показать уведомление
    function showHideAlert(form_elem, alert_element, show, message) {
        if(show) {
            alert_element.classList.remove('danger');
            alert_element.classList.add('success');
            alert_element.innerHTML = 'Успешно отправлено.';
            form_elem.classList.add('d-none');
        } else {
            alert_element.classList.add('danger');
            alert_element.classList.remove('success');
            alert_element.innerHTML = message;
            form_elem.classList.remove('d-none');
        }
    }

    // отправка данных формы
    async function sendData(data) {
        data.type_form = type_form;
        data.from_url = window.location.href;

        const url = `${site_url}/api/handling_form`;
        const response = await fetch(url, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json;'
            },
            body: JSON.stringify(data)
        });
        
        const result = await response.json();
        return result;
    }


    // сбор всех полей формы
    function getFormFields(form) {
        const inputElems = form.querySelectorAll('input:not([type="submit"])');
        const textareaElems = form.querySelectorAll('textarea');
        return [...inputElems, ...textareaElems];
    }

    // получение объекта данных из формы
    function getFormData(fileds) {
        const data = {};
        fileds.forEach(field => {
            const name = field.getAttribute('name');
            const value = field.value.trim();
            data[name] = value;
        });

        return data;
    }
})()