<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Si GIAT 1000</title>
    <meta name="csrf-token" content="<?php echo e(csrf_token()); ?>" />
    <link rel="shortcut icon" href="<?php echo url('dist/img/logo/logo-unair.png'); ?>">
    <!-- Tell the browser to be responsive to screen width -->
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
    <!-- Bootstrap 3.3.5 -->
    <link rel="stylesheet" href="<?php echo url('bootstrap/css/bootstrap.min.css'); ?>">
    <!-- Font Awesome -->
    <link rel="stylesheet" href="<?php echo url('https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css'); ?>">
    <!-- Ionicons -->
    <link rel="stylesheet" href="<?php echo url('https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css'); ?>">
    <!-- Theme style -->
    <link rel="stylesheet" href="<?php echo url('dist/css/AdminLTE.min.css'); ?>">
    <!-- iCheck -->
    <link rel="stylesheet" href="<?php echo url('plugins/iCheck/square/blue.css'); ?>">
    <!-- Animate -->
    <link rel="stylesheet" href="<?php echo url('dist/css/animate.css'); ?>">

    <!--  ..::: SWEET ALERT :::.. -->
    <link rel="stylesheet" href="<?php echo url('dist/css/sweetalert.css'); ?>">
    <script src="<?php echo url('dist/js/sweetalert-dev.js'); ?>"></script>
    <!--  ..::: END SWEET ALERT :::.. -->

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
        <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
    <style type="text/css">
      .login-box-body {
        border: 1px solid #00d3ff;
        background: rgba(217, 236, 240, 0.75) !important;
        box-shadow: 3px 3px 10px #bfbfbf;
        border-radius: 5px;
      }

      .input-group-addon {
        padding: 10px 12px;
        font-size: 16px;
        color: #8b9199;
        font-weight: normal;
        line-height: 1;
        text-align: center;
        background-color: #ffffff;
        border: none;
        border-radius: 0;
      }
      .form-control {
        border: none;
        font-size: 16px;
        padding: 10px 12px;
        height: auto;
      }
      .input-group {
        padding-bottom: 15px;
      }
      .btnSubmit {
        width:100%;font-size:16px;
      }
      .panel-versi{
        position: absolute;
        right: 5px;
        bottom: 0px;
      }
      .panel-versi .no-versi{
        width: 100%;
        text-align: right;
      }
    </style>
  </head>
  <body class="hold-transition login-page">
    <div class="login-box">
      <form class='login-form'>
        <div class="login-box-body" style='text-align:center'>
          <p class="login-img" style='font-size:50px;color:#34aadc;'><i class="fa fa-lock"></i></p>
          <div class="input-group">
            <span class="input-group-addon"><i class="fa fa-user"></i></span>
            <input type="text" name="email" class="form-control" placeholder="Email/NIK" autofocus>
          </div>
          <div class="input-group">
            <span class="input-group-addon"><i class="fa fa-key"></i></span>
            <input type="password" name="password" class="form-control" placeholder="Password">
          </div>
          <button class="btn btn-info btnSubmit" id="btn-login" type="submit"><i class="fa fa-lock"></i> SIGN IN</button>
        </div><!-- /.login-box-body -->
      </form>
    </div><!-- /.login-box -->
    
    <div class="panel-versi">
      <div class="no-versi">
        <b>Version</b> 1.1.0
      </div>
      <strong>Copyright &copy; 2017 FKM UNAIR. Development by <a href="http://natusi.co.id" target='_blank'> CV. Natusi</a></strong>
    </div>

    <!-- jQuery 2.1.4 -->
    <script src="<?php echo url('plugins/jQuery/jQuery-2.1.4.min.js'); ?>"></script>
    <!-- Bootstrap 3.3.5 -->
    <script src="<?php echo url('bootstrap/js/bootstrap.min.js'); ?>"></script>
    <!-- iCheck -->
    <script src="<?php echo url('plugins/iCheck/icheck.min.js'); ?>"></script>
    <!-- Animate -->
    <script src="<?php echo url('dist/js/animate.js'); ?>"></script>
    <!-- Validate -->
    <script src="<?php echo url('dist/js/validate.js'); ?>"></script>
    <script>
      $(function () {
        $('input').iCheck({
          checkboxClass: 'icheckbox_square-blue',
          radioClass: 'iradio_square-blue',
          increaseArea: '20%' // optional
        });
      });
    </script>
    <script type="text/javascript">
      $.ajaxSetup({
        headers: {
              'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        }
      });
    </script>
    <!--BACKSTRETCH-->
    <!-- You can use an image of whatever size. This script will stretch to fit in any screen size.-->
    <script type="text/javascript" src="<?php echo url('dist/js/jquery.backstretch.min.js'); ?>"></script>
    <script>
        $.backstretch("<?php echo url('dist/img/background/Background login.jpg'); ?>", {speed: 500});
    </script>
    <script type="text/javascript">
      $(document).ready(function(){
        $('.login-form').animateCss('flipInY');
      });
      $('.login-form').submit(function(e){
        e.preventDefault();
        var button = $('#btn-login');
        var data = $('.login-form').serialize();
        button.html('Please wait...').attr('disabled', true);
        $.post("<?php echo route('DoLogin'); ?>", data).done(function(data){
          button.html('<i class="fa fa-lock"></i> Sign In').removeAttr('disabled');
          $('.login-form').validate(data.result, 'has-error');
          if(data.status == 'success'){
            window.location.replace("<?php echo url($data['next_url']); ?>");
          // } else if($.isPlainObject(data.result)){
            // button.animateCss('shake');
          } else if(data.status == 'error' || data.status == 'warning'){
            swal('Maaf', data.message, data.status);
          } else {
            // swal({
            //   type: data.status,
            //   title: 'Warning!',
            //   text: data.result
            // });
            // if(data.code==403){
            //   window.location.reload();
            // }
            button.animateCss('shake');
          }
        });
      });
      <?php if(!empty(session('message'))): ?>
        swal({
          type: 'warning',
          title: 'Warning!',
          text: '<?php echo e(session('message')); ?>',
          animation: false,
          customClass: 'animated shake'
        });
      <?php endif; ?>
    </script>
  </body>
</html>
