<?= $this->extend(config('Auth')->views['layout']) ?>

<?= $this->section('title') ?><?= lang('Auth.register') ?> <?= $this->endSection() ?>

<?= $this->section('main') ?>

<div class="login-box" style="margin-top: 50px;">
  <div class="login-logo">
    <a href="#"><?= env('app.name') ?></a>
  </div>
  <!-- /.login-logo -->
  <div class="login-box-body">
    <p class="login-box-msg"><?= lang('Auth.register') ?></p>

    <?php if (session('error') !== null) : ?>
        <div class="alert alert-danger" role="alert"><?= session('error') ?></div>
    <?php elseif (session('errors') !== null) : ?>
        <div class="alert alert-danger" role="alert">
            <?php if (is_array(session('errors'))) : ?>
                <?php foreach (session('errors') as $error) : ?>
                    <?= $error ?>
                    <br>
                <?php endforeach ?>
            <?php else : ?>
                <?= session('errors') ?>
            <?php endif ?>
        </div>
    <?php endif ?>

    <?php if (session('message') !== null) : ?>
    <div class="alert alert-success" role="alert"><?= session('message') ?></div>
    <?php endif ?>

    <div id="fg_error">
        <strong class="control-label" for="error"><p class="error-message" id="em_error" style="display: none; color: #dd4b39;"></p></strong>
    </div>

    <?= form_open('', 'id="users_form"') ?>
      <?= form_input('username', $username) ?>
      <?= form_input('email', $email) ?>
      <?= form_password('password', $password) ?>
      <?= form_password('password_confirm', $password_confirm) ?>

      <div class="form-group has-feedback">
        <button type="submit" class="btn btn-primary btn-block" id="btn_users"><?= lang('Auth.register') ?></button>
      </div>

      <p class="text-center"><?= lang('Auth.haveAccount') ?> <a href="<?= url_to('login') ?>"><?= lang('Auth.login') ?></a></p>

    </form>

  </div>
  <!-- /.login-box-body -->
</div>
<!-- /.login-box -->

<?= $this->endSection() ?>

<?= $this->section('pageScripts') ?>
<script type="text/javascript">
$("#users_form").submit(function(e){
  e.preventDefault();
  var url = '<?= $action ?>'
  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() ?>
