<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <title>SAP Information System</title>
  <!-- Tell the browser to be responsive to screen width -->
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <!-- Font Awesome -->
  <link rel="stylesheet" href="plugins/fontawesome-free/css/all.min.css">
  <!-- Ionicons -->
  <link rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
  <!-- icheck bootstrap -->
  <link rel="stylesheet" href="plugins/icheck-bootstrap/icheck-bootstrap.min.css">
  <!-- Theme style -->
  <link rel="stylesheet" href="dist/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">

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Teko:wght@300;500;600&display=swap" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<!-- <style type="">
  #images_d{
            background-image: url('images/bg-adminlogin.jpg'); background-position: center;background-repeat: no-repeat;background-size: cover;
           }
</style> -->
<style>
.footer {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  background-color: black;
  color: white;
  text-align: center;
}
</style>
</head>
<body class="hold-transition login-page" style="font-family: 'Teko', sans-serif;"  id="images_d">
<div class="login-box">

  <!-- /.login-logo -->
  <div class="card" >
    <div class="card-body login-card-body">
   <div class="login-logo">
    <img src="images/SAP1.png" width="170" height="130">
  </div>
<!--       <p class="login-box-msg"><h3><b><center>Log In</center> </b></h3></p> -->

       <form role="form" id="logform">
          <div id="myalert" style="display:none;">
              <div class="col-md-12">
                  <div class="alert alert-danger">
                      <center><span id="alerttext"></span></center>
                  </div>

              </div>
          </div>
          <div id="myalert3" style="display:none;">
              <div class="col-md-12">
                  <div class="alert alert-success">
                      <center><span id="alerttext3"></span></center>
                  </div>

              </div>
          </div>

          <div id="myalert2" style="display:none;">
              <div class="col-md-12">
                  <div class="alert alert-danger">
                      <center><span id="alerttext2"></span></center>
                  </div>
              </div>
          </div>
        <div class="input-group mb-3">
          <input type="text" class="form-control" name="username" id="username"  placeholder="Username" autocomplete="off">
          <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 type="password" class="form-control"  name="password" id="password" placeholder="Password" autocomplete="off" >
          <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 class="icheck-primary">
              <input type="checkbox" id="remember" onclick="myFunction()">
              <label for="remember">
                Show Password
              </label>
            </div>
          </div>   
        </div>
      <div class="row">
          <div class="col-12">
            <input class="form-control" name="role" id="role" type="hidden" value="Admin">
            <button type="submit" class="btn btn-primary btn-block" id="login-button">Log In</button>
          </div>
        </div>
      </form>
    </div>
  </div>
</div><br><br><br><br><br><br>
<div class="footer">
  <img alt="Brandd" src="images/SAP1.png" alt="left" style="width: 60px; height: 40px;" >
  <p>SOCIAL AMELIORATION PROGRAM<br> 
  <a href="contact/contact.php">* CONTACT US</a></p>
  <p style="font-size: 13px; color: white; text-align: center;">SAP Information System Website --- CopyRight 2021</p>
</div>

<script>
function myFunction() {
  var x = document.getElementById("password");
  if (x.type === "password") {
    x.type = "text";
  } else {
    x.type = "password";
  }
}
</script>

<script type="text/javascript" src="js/user-loginaccount.js"></script>
<script src="plugins/jquery/jquery.min.js"></script>
<script src="plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
<script src="dist/js/adminlte.min.js"></script>

</body>
</html>
