{include file="./index_top.tpl"}
<script>
    $(document).ready(()=>{
        let time_interval;
        if ($('#code_sending_interval')) {
            time_interval = setInterval(()=>{
                let time = $('#code_sending_interval').text();
                if (time != 0) {
                    $('#code_sending_interval').text(--time);
                } else {
                    $('.login__check-code--error-txt').html('<span></span>');
                    clearInterval(time_interval);
                }
            }, 1000)
        }
    })
</script>

<style>
.check_code-item::-webkit-outer-spin-button,
.check_code-item::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
.check_code-item {
  -moz-appearance: textfield;
}
</style>
<div class="login__check-code">
    {if $error}
        <div class="login__check-code--error-txt">
            <span>{$error}</span>
        </div>
    {else}
        <div class="login__check-code--success-txt">
            {if $config.login_confirm==2}
                <span>{$lang.login_confirm_sms} {$user_phone} {$lang.login_confirm_send}</span>
            {elseif $config.login_confirm==3}
                <span>{$lang.login_confirm_email} {$user_email} {$lang.login_confirm_tg} {$lang.login_confirm_send}</span>
            {else}
                <span>{$lang.login_confirm_email} {$user_email} {$lang.login_confirm_send}</span>
            {/if}
        </div>
    {/if}
    <br>
    {if !$no_input_box}
    <form action="login.php" method="post">
        <div class="login__check-code--input-code-header">
            {$lang.enter_check_code}{if $attempts} ({$lang.attempts_remaining} - {$attempts}){/if}:
        </div>
        <div>
            <input type="number" min="0" max="9" style="width:30px" class="form-control check_code-item">
            <input type="number" min="0" max="9" style="width:30px" class="form-control check_code-item">
            <input type="number" min="0" max="9" style="width:30px" class="form-control check_code-item">
            <input type="number" min="0" max="9" style="width:30px" class="form-control check_code-item">
        </div>
        <div>
            <input type="submit" name="auth_code_confirm" class="btn btn-default" value="{$lang.Enter}" onclick="if (!save_code()) return false;">
        </div>
        <input type="hidden" name="check_code" id="check_code">
        <input type="hidden" name="csrf" value="{$csrf}">
    </form>
    <div><a href="login.php?send_code_again=yes" style="color: gray; text-decoration: underline dashed 1px;">{$lang.send_code_again}</a></div>
    {else}
    <div><input type="button" class="btn btn-default" value="{$lang.send_code_again}" onclick="location.href='login.php?send_code_again=yes'"></div>
    {/if}
</div>
<script>
$(document).ready(function() {
    let arr_check_code_item = document.querySelectorAll('.check_code-item');
    arr_check_code_item[0].focus();
    for(let i=0;i<arr_check_code_item.length;i++){
        arr_check_code_item[i].addEventListener('input',function(){

            if(arr_check_code_item[i+1] != undefined && arr_check_code_item[i].value == ''){
                arr_check_code_item[i].focus();
            } else if(arr_check_code_item[i+1] != undefined && arr_check_code_item[i].value != '') {
                arr_check_code_item[i].value = arr_check_code_item[i].value.substring(0,1);
                arr_check_code_item[i+1].focus();
            } else if (arr_check_code_item[i+1] != undefined && arr_check_code_item[i].value == '') {
                arr_check_code_item[i].value = arr_check_code_item[i].value.substring(0,1);
                arr_check_code_item[i+1].value = arr_check_code_item[i].value.substring(1,2);
                arr_check_code_item[i+1].focus();
            } else{
                arr_check_code_item[i].value = arr_check_code_item[i].value.substring(0,1);
            }

        });
    }

    // Событие на Backspace
    arr_check_code_item.forEach(function(elem) {
      elem.addEventListener('keydown', function(event) {
        if (event.key === "Backspace" || event.key === "Delete") {
          event.preventDefault();
          if (event.target.value !== '') {
            event.target.value = '';
          } else if (event.target.value === '' && event.target.previousElementSibling !== null) {
            event.target.previousElementSibling.focus();
            event.target.previousElementSibling.value = '';
          }
        }
      })
    });
});
function save_code(){
    let full_code = '';
    for (let i=0; i<document.querySelectorAll('.check_code-item').length; i++) {
        full_code += document.getElementsByClassName('check_code-item')[i].value;
    }
    if (full_code.length == 4) {
        document.getElementById('check_code').value = full_code;
        return true;
    } else {
        return false;
    }
}
</script>
