<?= $this->extend(config('Auth')->views['layout']) ?>
<?= $this->section('title') ?>Verifikasi Token<?= $this->endSection() ?>
<?= $this->section('main') ?>

<div class="login-box">
   <div class="login-logo">
      <img src="<?= base_url('satria-color.svg') ?>" alt="Paris" class="img img-round" width="100"><br>
      <a href="#"><b>Satria</b> | BC Denpasar</a>
   </div>
   <!-- /.login-logo -->
   <div class="login-box-body">
      <p class="login-box-msg"><?= lang('Auth.email2FATitle') ?></p>
      <p style="text-align:center;">Masukkan 6 digit kode Authenticator Anda.</p>
      <?php if (session('error') !== null) : ?>
      <div class="alert alert-danger"><?= session('error') ?></div>
      <?php endif ?>

      <form action="<?= url_to('auth-action-verify') ?>" method="post">
         <?= csrf_field() ?>
         <!-- Code -->
         <div class="form-group">
            <input type="number" class="form-control text-center" autofocus name="token_2fa" required onKeyPress="if(this.value.length==6) return false;"/>
         </div>

         <div class="d-grid col-8 mx-auto m-3">
            <button type="submit" class="btn btn-primary btn-block"><?= lang('Auth.confirm') ?></button>
         </div>
      </form>
      <div class="overlay">
         <i class="fas fa-2x fa-sync-alt"></i>
      </div>
   </div>
   <!-- /.login-box-body -->
   <div class="row">
      <div class="foot text-center">
         Copyright &copy; <?= date('Y') ?> KPPBC TMP A Denpasar<br>
      </div>
   </div>
</div>
<!-- /.login-box -->
<?= $this->endSection() ?>

<?= $this->section('pageScripts') ?>
<script type="text/javascript">
   $(document).ready(function() {
      $("#users_form").submit(function(e){
         e.preventDefault();
         var url = '<?= url_to('auth-action-verify') ?>';
         var formData = $(this).serialize();
         $.ajax({
            url: url,
            type: "post",
            dataType: 'json',
            data: formData,
            beforeSend  : function() {
               $(".form-group").removeClass("has-error");
               $(".error-message").html('').hide();
               $("#btn_users").button('loading');
            },
            error: function (xhr, status, message) {
               if (xhr.status == 400) {
                  var res = JSON.parse(xhr.responseText);
                  $(res.messages).each(function(i,val){
                     var inputname = Object.keys(val)[0];
                     $.each(val,function(k,v){
                        $("#"+inputname).focus();
                        $("#fg_"+k).addClass("has-error");
                        $("#em_"+k).html(v).fadeIn();
                     });
                  });
               } else {
                  alert(xhr.statusText );
               }
            },
            success: function(result) {
              window.location.href = result.message;
            },
            complete: function() {
                $("#btn_users").button('reset');
            }
        });
      });
   });
</script>
<?= $this->endSection() ?>