<!DOCTYPE html>
<?php 
require"../inc/conn.php";
?>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>Login Administrator - <?php echo $rsw['judul_modul'];?></title>
  <!-- Tell the browser to be responsive to screen width -->
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" href="../assets/img/logohairbeauty.png?p=1" sizes="16x16" type="image/png">
  <!-- Font Awesome -->
  <link rel="stylesheet" href="<?php echo $base_url_admin;?>/assets/plugins/fontawesome-free/css/all.min.css">
  <!-- Ionicons -->
  <link rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">

  <link rel="stylesheet" href="<?php echo $base_url_admin;?>/assets/css/adminlte.min.css">
  <!-- Google Font: Source Sans Pro -->
  <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700" rel="stylesheet">
</head>
<body class="hold-transition login-page" style="background-image: url('<?php echo $base_url;?>/assets/img/herobg.png');background-repeat: no-repeat;background-size: 100% 100%;">
<div class="login-box">
  <div class="login-logo">  
    <img src="../assets/img/logosanggul.png?p=1" width="80"><br>
    <div style="color:#c2326f;font-weight:800;margin-bottom:-10px;font-size:37px;"><b>HAIRBEAUTY.ID</b></div>
  </div>
  <!-- /.login-logo -->
  <div class="card">
    <div class="card-body login-card-body">
      
      
        <div class="input-group mb-3">
          <input id="username" type="text" onkeyup="cekenter()" name="username" class="form-control" placeholder="Username">
          <div class="input-group-append">
            <div class="input-group-text">
              <span class="fas fa-user"></span>
            </div>
          </div>
        </div>
        <div class="input-group mb-3">
          <input id="password" type="password" onkeyup="cekenter()" name="password" class="form-control" placeholder="Password">
          <div class="input-group-append">
            <div class="input-group-text">
              <span class="fas fa-lock"></span>
            </div>
          </div>
        </div>
        <div class="row">
          <div class="col-12">
            <div id="message"></div>
            <div class="text-center loader" id="loader" style="display:none;">
              <div class="spinner-border text-primary" role="status">
                <span class="sr-only">Loading...</span>
              </div>
            </div>
            <button onclick="masuk()" class="tombollogin btn btn-block" style="background:#c2326f;color:white;">LOGIN</button>
            
          </div>
          <!-- /.col -->
        </div>
     

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

  <div class="col-md-12 text-center">
    <span style="color:#c2326f;"><b>&copy; <?php echo date('Y');?> <a href="<?php echo $base_url;?>" style="color:#c2326f;">WWW.HAIRBEAUTY.ID</a></b></span><br>
  </div>


</div>


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

<!-- jQuery -->
<script src="<?php echo $base_url_admin;?>/assets/plugins/jquery/jquery.min.js"></script>
<!-- Bootstrap 4 -->
<script src="<?php echo $base_url_admin;?>/assets/plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- AdminLTE App -->
<script src="<?php echo $base_url_admin;?>/assets/js/adminlte.min.js"></script>


<script src="<?php echo $base_url_admin;?>/assets/js/jquery.min.js"></script>
<script type='text/javascript'>
  
  function cekenter(e){
    if(event.keyCode===13){
      masuk()
    }
  }

  function masuk(){
    
    $(".loader").show();
    $(".tombollogin").hide();
    var username = document.getElementById('username').value;
    var password = document.getElementById('password').value;  

    $.ajax({
      url: 'ajax/login.php',
      type: 'POST',
      data: {
        username: username,
        password: password,
      },
      success: function(response){ 
        if(response == 1){
          msg = '<div class="alert alert-success" role="alert">Login berhasil, mengalihkan ...</div>'
          $("#message").html(msg);
          $(".tombollogin").hide();
          $(".loader").hide();
          window.location = "dashboard";
        }else{
          $("#message").html(response);
          $(".loader").hide();
          $(".tombollogin").show();
        }
        
      }
    });
  
  }

</script>

</body>
</html>
