<style>
    /*Эффект для кнопки*/
    .login-signup-btn {
        background: linear-gradient(158.55deg, #8468F5 2.75%, #A66CF0 30.28%, #EC74E7 88.2%);
        transition: all 1s ease-in-out !important;

    }
    /*Эффект для кнопки*/
    .login-signup-btn:hover {
        background: linear-gradient(164.7deg, #EC74E7 2.75%, #8468F5 88.2%);

        transition: all 1s ease-in-out !important;
    }
</style>

<div class="t-container">
    <div class="t-col t-col_8 t-prefix_2">
        <div class="signup-status-messages">
            <div class="t186__blockinput-errorbox signup-errorbox" style="display:none;">
                <div class="t186__blockinput-errors-text t-text t-text_md" style="color:red;background-color:white;padding:10px;">
                    <p class="t186__blockinput-errors-item " errorcode="4adf7e0f-6f28-4325-80ff-919f7b042b31">Your email already used for tenant registration. Use sign-in form</p>
                    <p class="t186__blockinput-errors-item " errorcode="6597870d-d69d-42f3-981b-d6abbb992e31">Please use your business e-mail to create an account</p>
                    <p class="t186__blockinput-errors-item " errorcode="c1051bb4-d103-4f74-8988-acbcafc7fdc3">Fill in your business email please</p>
                    <p class="t186__blockinput-errors-item " errorcode="bd79c0ab-ddba-46cc-a703-a7a4b08de310">This email address looks a bit wrong and probably don't work...</p>
                    <p class="t186__blockinput-errors-item " errorcode="unknownErrorCode">Unknown error code: </p>
                </div>
            </div>
            <div class="t186__blockinput-success t-text t-text_md signup-status-success" style="display:none; margin-bottom: 15px; color:#cd5aed;"> You're almost there! Check email in 1-2 minutest to enter your account </div>
            <div class="t186__blockinput-success t-text t-text_md signup-status-message" style="display:none; margin-bottom: 15px;"> Processing....please wait a bit. </div>
        </div>
        <div class="t186__wrapper signup-inputellements">
            <div class="t186__blockinput">
                <input type="text" name="signupmail" class="t186__input t-input " value="" placeholder="Your Corporate E-mail" data-tilda-rule="email" style="color:#323c5a; border:2px solid #e0e5ee; border-radius: 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px; margin-bottom:15px; " id="inp_signupemail_id">
            </div>
            <div class="t186__blockbutton">

                <!-- кнопка -->
                <div class="t228__right_buttons_wrap">
                    <div class="t228__right_buttons_but">
                        <a href="#" target="" class="t-btn login-signup-btn" style="color:#ffffff;border-radius:30px; -moz-border-radius:30px; -webkit-border-radius:30px;font-family:Montserrat;font-weight:500;box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.1);" id="btn_signup_id">
                            <table style="width:100%; height:100%;">
                                <tbody>
                                <tr><td>Sign-up</td></tr>
                                </tbody>
                            </table>
                        </a>
                    </div>
                </div>

            </div>
        </div>
    </div>
</div>

<!-- production version, optimized for size and speed -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.18.0/axios.min.js"></script>
<script>

    let clickListener = function () {
        const baseUrl = 'https://fourdevtest-admin.mobsted.com/api/v8';
        let input = document.querySelector('input[id="inp_signupemail_id"]');
        let email = input.value;

        document.querySelector('.signup-status-messages > .signup-status-message').style.display = 'inherit';
        document.querySelector('.signup-inputellements').style.display = 'none';

        let signup_errormessages = document.querySelectorAll('div.signup-errorbox > div > p');
        for (let i = 0; i < signup_errormessages.length; i++) {
            signup_errormessages[i].style.display='none';
        }
        document.querySelector('.signup-errorbox').style.display='none';
        document.querySelector('.signup-inputellements').style.display = 'none';

        axios.post(`${baseUrl}/tilda/webhook/register`, {
            email: email,
        }).then(function (response) {
            console.log(response);
            document.querySelector('.signup-status-messages > .signup-status-success').style.display = 'inherit';;
            document.querySelector('.signup-status-messages > .signup-status-message').style.display = 'none';
        }).catch(function (error) {
            console.log(error);
            let response = error.response;
            let statusMessageBlock = document.querySelector('.signup-status-messages > .signup-status-message');
            let input = document.querySelector('input[id="inp_signupemail_id"]');

            input.style.display = 'inherit';
            statusMessageBlock.style.display = 'none';
            if (response.status) {
                if (response.status == 400 && response.data.errors) {
                    let error = response.data.errors[0];
                    let errorMessageBlock = document.querySelector('.signup-errorbox > div > p[errorcode="' + error.code + '"]');


                    if(error.code == '4adf7e0f-6f28-4325-80ff-919f7b042b31')
                    {
                        // If error code indicate "Your email already used for tenant registration. Use sign-in form" make redirect only
                        window.location.replace('https://mobsted.com/sign-in?loginemail=' + document.querySelector('input[id="inp_signupemail_id"]').value);
                    }
                    else
                    {
                        document.querySelector('.signup-status-messages > .signup-status-message').style.display = 'none';
                        document.querySelector('.signup-inputellements').style.display = 'inherit';
                        document.querySelector('.signup-errorbox').style.display='inherit';
                        if(errorMessageBlock)
                            errorMessageBlock.style.display = 'inherit'
                        else
                        {
                            errorMessageBlock = document.querySelector('.signup-errorbox > div > p[errorcode="unknownErrorCode"]');
                            errorMessageBlock.style.display = 'inherit';
                            errorMessageBlock.innerHTML += error.code;
                        }
                    }

                }
            }
        });
    };

    document.querySelector('a[id="btn_signup_id"]').addEventListener('click', clickListener);
</script>