{% load i18n %}
<select id="verify-method-select" name="mfa_type" class="form-control select-con" onchange="selectChange(this.value)">
    {% for method in methods %}
        <option value="{{ method.name }}"
                {% if method.selected %} selected {% endif %}
                {% if not method.enable %} disabled {% endif %}
        >
            {{ method.label }}
        </option>
    {% endfor %}
</select>
<div class="mfa-div">
    <input id="mfa-code" type="text" class="form-control input-style" required name="code"
           placeholder="{% trans 'Please enter verification code' %}">
    <button id='send-sms-verify-code' type="button" class="btn btn-primary full-width" onclick="sendSMSVerifyCode()"
            style="margin-left: 10px!important;height: 100%">{% trans 'Send verification code' %}</button>
</div>

<style type="text/css">
    .input-style {
        width: calc(100% - 114px);
        display: inline-block;
    }

    #send-sms-verify-code {
        width: 110px !important;
        height: 100%;
        vertical-align: top;
    }
</style>
<script>
    var methodSelect = document.getElementById('verify-method-select');
    if (methodSelect.value !== null) {
        selectChange(methodSelect.value);
    }
    function selectChange(type) {
        var otpPlaceholder = '{% trans 'Please enter MFA code'  %}';
        var smsPlaceholder = '{% trans 'Please enter SMS code'  %}';
        if (type === "sms") {
            $("#mfa-code").css("cssText", "width: calc(100% - 114px)").attr('placeholder', smsPlaceholder);
            $("#send-sms-verify-code").css("cssText", "display: inline-block !important");
        } else {
            $("#mfa-code").css("cssText", "width: 100% !important").attr('placeholder', otpPlaceholder);
            $("#send-sms-verify-code").css("cssText", "display: none !important");
        }
    }

    function sendSMSVerifyCode() {
        var currentBtn = document.getElementById('send-sms-verify-code');
        var time = 60
        var url = "{% url 'api-auth:sms-verify-code-send' %}";
        var data = {
            username: $("#id_username").val()
        };
        requestApi({
            url: url,
            method: "POST",
            body: JSON.stringify(data),
            success: function (data) {
                currentBtn.innerHTML = `{% trans 'Wait: ' %} ${time}`;
                currentBtn.disabled = true
                currentBtn.classList.add("disabledBtn")
                var TimeInterval = setInterval(() => {
                    --time
                    currentBtn.innerHTML = `{% trans 'Wait: ' %} ${time}`;
                    if (time === 0) {
                        currentBtn.innerHTML = "{% trans 'Send verification code' %}"
                        currentBtn.disabled = false
                        currentBtn.classList.remove("disabledBtn")
                        clearInterval(TimeInterval)
                    }
                }, 1000)
                alert("{% trans 'The verification code has been sent' %}");
            },
            error: function (text, data) {
                alert(data.detail)
            },
            flash_message: false
        })
    }
</script>