<!-- This messages are shawn when a user attempts tp verify the phone number. -->

<!-- Flash messages end. -->

{{ form_ajax('onUpdate',{class:'post_form','data-request-validate':''}) }}

    <div class="post_input">
        <label for="name">{{'auth.name'|_}}</label>
        <input type="text"  id="name" name="name" value="{{user.name}}">
        <span class="error_txt" data-validate-for="name"></span>
    </div>

    <div class="post_input">
        <label for="surname">{{'auth.surname'|_}}</label>
        <input type="text" id="surname" name="surname" value="{{user.surname}}">
        <span class="error_txt" data-validate-for="surname"></span>
    </div>

    <div class="post_input">
        <label for="phone_num">{{'auth.phone'|_}}</label>
        <input type="text"  id="phone_num" disabled value="{{user.username}}">
        <span class="error_txt" data-validate-for="username"></span>

        <!-- Phone verification -->
        {% if user.dial_code == '+993' and not user.phone_verified %}
        <a href="#" class="verify disabled verify_mail" onclick="$('.sms-code').addClass('active'); $(this).request('onSendSmsCode', {
                error: function(e) {
                    console.error(e);
                    $('.sms-code').removeClass(active);
                }
            }); return false;"
        >
            <svg width="20" height="20" viewBox="0 0 20 20" fill="none"
                xmlns="http://www.w3.org/2000/svg">
                <path
                    d="M18.8238 11.0404C18.1179 14.5697 15.457 17.8927 11.723 18.6353C9.90196 18.9979 8.01288 18.7768 6.32477 18.0034C4.63667 17.23 3.23561 15.9437 2.32108 14.3277C1.40656 12.7117 1.02519 10.8483 1.23128 9.00289C1.43737 7.15752 2.22042 5.42421 3.46893 4.04975C6.02973 1.22921 10.3537 0.452783 13.8829 1.86447"
                    stroke="#003197" stroke-width="1.5" stroke-linecap="round"
                    stroke-linejoin="round" />
                <path d="M6.82422 9.62852L10.3534 13.1578L18.8235 3.98178" stroke="#003197"
                    stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
            </svg>
        </a>
        {% endif %}

        {% if user.dial_code == '+993' and user.phone_verified %}
        <a href="#" class="verify verify_phone">
            <svg width="20" height="20" viewBox="0 0 20 20" fill="none"
                xmlns="http://www.w3.org/2000/svg">
                <path
                    d="M18.8238 11.0404C18.1179 14.5697 15.457 17.8927 11.723 18.6353C9.90196 18.9979 8.01288 18.7768 6.32477 18.0034C4.63667 17.23 3.23561 15.9437 2.32108 14.3277C1.40656 12.7117 1.02519 10.8483 1.23128 9.00289C1.43737 7.15752 2.22042 5.42421 3.46893 4.04975C6.02973 1.22921 10.3537 0.452783 13.8829 1.86447"
                    stroke="#003197" stroke-width="1.5" stroke-linecap="round"
                    stroke-linejoin="round" />
                <path d="M6.82422 9.62852L10.3534 13.1578L18.8235 3.98178" stroke="#003197"
                    stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
            </svg>
        </a>
        {% endif %}
        <!-- End Phone verification -->
    </div>


    <div class="post_input">
        <label for="blue_mail">{{'auth.email'|_}}</label>
        <input type="email"  id="blue_mail" name="email" value="{{user.email}}">
        <span class="error_txt" data-validate-for="email"></span>

        <!-- Email verification -->
        {% if not user.email_verified %}
        <a href="#" class="verify disabled verify_mail" onclick="$(this).request('onSendEmailVerificationLink', {
                error: function(e) {
                    console.error(e);
                }
            }); return false;"
        >
            <svg width="20" height="20" viewBox="0 0 20 20" fill="none"
                xmlns="http://www.w3.org/2000/svg">
                <path
                    d="M18.8238 11.0404C18.1179 14.5697 15.457 17.8927 11.723 18.6353C9.90196 18.9979 8.01288 18.7768 6.32477 18.0034C4.63667 17.23 3.23561 15.9437 2.32108 14.3277C1.40656 12.7117 1.02519 10.8483 1.23128 9.00289C1.43737 7.15752 2.22042 5.42421 3.46893 4.04975C6.02973 1.22921 10.3537 0.452783 13.8829 1.86447"
                    stroke="#003197" stroke-width="1.5" stroke-linecap="round"
                    stroke-linejoin="round" />
                <path d="M6.82422 9.62852L10.3534 13.1578L18.8235 3.98178" stroke="#003197"
                    stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
            </svg>
        </a>
        {% else %}
        <a href="#" class="verify verify_phone">
            <svg width="20" height="20" viewBox="0 0 20 20" fill="none"
                xmlns="http://www.w3.org/2000/svg">
                <path
                    d="M18.8238 11.0404C18.1179 14.5697 15.457 17.8927 11.723 18.6353C9.90196 18.9979 8.01288 18.7768 6.32477 18.0034C4.63667 17.23 3.23561 15.9437 2.32108 14.3277C1.40656 12.7117 1.02519 10.8483 1.23128 9.00289C1.43737 7.15752 2.22042 5.42421 3.46893 4.04975C6.02973 1.22921 10.3537 0.452783 13.8829 1.86447"
                    stroke="#003197" stroke-width="1.5" stroke-linecap="round"
                    stroke-linejoin="round" />
                <path d="M6.82422 9.62852L10.3534 13.1578L18.8235 3.98178" stroke="#003197"
                    stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
            </svg>
        </a>
        {% endif %}
        <!-- End Email verification -->
    </div>

    <div class="post_input">
        <label for="company">{{'account.company'|_}}</label>
        <input type="text" id="company" name="company" value="{{user.company}}">
        <span class="error_txt" data-validate-for="company"></span>
    </div>

    <div class="post_input">
        <label for="zip">{{'account.legalization_number'|_}}</label>
        <input type="text" placeholder="123456" id="zip" name="zip" value="{{user.zip}}">
        <span class="error_txt" data-validate-for="zip"></span>
    </div>

    <div class="post_input">
        <label for="password">{{'account.new_password'|_}}</label>
        <input type="password" placeholder="************" id="password" name="password">
        <div class="eye">
            <img class="eye_off" src="{{'assets/images/svg/eye-off.svg'|theme}}" alt="eye">
            <img class="eye_on" src="{{'assets/images/svg/eye.svg'|theme}}" alt="eye">
        </div>
        <span class="error_txt" data-validate-for="password"></span>
    </div>
    <div class="post_input">
        <label for="password_confirmation">{{'account.password_confirmation'|_}}</label>
        <input type="password" placeholder="************" id="password_confirmation" name="password_confirmation">
        <div class="eye">
            <img class="eye_off" src="{{'assets/images/svg/eye-off.svg'|theme}}" alt="eye">
            <img class="eye_on" src="{{'assets/images/svg/eye.svg'|theme}}" alt="eye">
        </div>
        <span class="error_txt" data-validate-for="password_confirmation"></span>
    </div>

    <div class="btn_bg">
        <button class="post_btn" type="submit">
            {{'account.save'|_}}
        </button>
    </div>
{{ form_close() }}

{% put scripts %}
<script>

    // document.querySelector('.eye_off').addEventListener('click', function () {
    //     document.getElementById('password').type = "password"
    //     document.getElementById('password_current').type = "password"

    //     document.querySelector('.eye_on').classList.remove('active');
    //     document.querySelector('.eye_off').classList.remove('active');
    // })

    // document.querySelector('.eye_on').addEventListener('click', function () {
    //     document.getElementById('password').type = "text";
    //     document.getElementById('password_current').type = "text";

    //     document.querySelector('.eye_on').classList.add('active');
    //     document.querySelector('.eye_off').classList.add('active');
    // })

    // document.querySelector('.profile_head').addEventListener('click', function () {
    //     sleep(2).then(() => {
    //         document.querySelector('.profile_drop').classList.toggle('active');
    //     });
    // });

</script>
{% endput %}

