<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Staff Login</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
    integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous" />
  <link rel="icon" href="img/kp.png" type="image/png" />
  <link rel="stylesheet" href="vendors/themefy_icon/themify-icons.css" />
  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
    integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
    crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
    integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
    crossorigin="anonymous"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
    integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
    crossorigin="anonymous"></script>
  <link rel="stylesheet" href="assets/css/bootstrap.min.css" />
  <link rel="stylesheet" href="assets/js/bootstrap.min.js" />
  <link rel="stylesheet" href="/assets/style.css" />
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" />
  <script src="index.js"></script>
  <!-- toastr -->
  <link href="js/toastr.css" rel="stylesheet">
</head>

<body>
  <section class="bg-light2">
    <div class="container">
      <div class="row justify-content-center">
        <div class="col-lg-4 col-md-12 col-sm-6 login mx-5 pt-3 mt-4 mb-4">
          <div class="row justify-content-center">
            <div class="col-lg-5 col-md-6 col-sm-6">
              <img class="logo_center mx-auto" src="/assets/Image/kp.png" style="height: 130px;width:130px" alt="2" />
            </div>
          </div>
          <div class="row pt-3 justify-content-center">
            <div class="col-lg-12 col-md-6 col-sm-6">
              <h4 class="text-center fw-bold">CORASS STAFF LOGIN!</h4>
              <p class="para_21 mt-1 px-2">Please sign-in to your account to manage student research projects</p>
            </div>
          </div>
          <input style="display: none ;" id="account_type" type="text" placeholder="e.g BFN/2/3/02"
            class=" form-control p-2 shadow-none" value="staff" />
          <div class="row">
            <div class="col-lg-12 col-md-6 col-sm-6">
              <label for="username" class="user_id">STAFF ID</label>
              <p>
                <input id="username" type="text" placeholder="e.g REG/P/1234" class=" form-control p-2 shadow-none" />
              </p>
            </div>

          </div>
          <div class="row ">
            <div class="col-lg-12">
              <label for="password" class="user_id">Password </label>
              <div class="col-lg-7 col-md-6 col-sm-6 pass ">
                <p class="pass user_id"> <a class="text text-success text-center" href="/user/forget-password"> Forgot
                    Password? </a></p>
              </div>
              <p>
                <input id="password" type="password" placeholder="********" class=" form-control p-2 shadow-none" /><i
                  class="ti ti-eye" id="togglePassword"></i>
              </p>
            </div>
            <div class="col-lg-12 mt-2">
              <div class="form-check">
                <input type="checkbox" class="form-check-input " value="" id="flexCheckDefault" />
                <label for="flexCheckDefault" class="form-check-label user_ide">Remember Me</label>
              </div>
            </div>
          </div>
          <div class="row">
            <div class="col-lg-11 mt-4">
              <button id="stafflogin" class="btn_col btn btn-block">
                Sign in
              </button>
            </div>
          </div>
          <div class="row justify-content-center">
            <div class="col-lg-12 col-md-6 col-sm-6 text text-center "><a href="/student-login"
                class="text text-success text-center user_id">Click here to login to student Account</a></div>
          </div>
        </div>
      </div>
  </section>

  <script>
    const togglePassword = document.querySelector('#togglePassword');
    const password = document.querySelector('#password');

    togglePassword.addEventListener('click', function (e) {
      // toggle the type attribute
      const type = password.getAttribute('type') === 'password' ? 'text' : 'password';
      password.setAttribute('type', type);
      // toggle the eye slash icon
      this.classList.toggle('ti ti-eye-slash');
    });
  </script>
  <!--Start of Tawk.to Script-->
  <script type="text/javascript">
    var Tawk_API = Tawk_API || {}, Tawk_LoadStart = new Date();
    (function () {
      var s1 = document.createElement("script"), s0 = document.getElementsByTagName("script")[0];
      s1.async = true;
      s1.src = 'https://embed.tawk.to/6380aa9fdaff0e1306d96312/1gin9l0pn';
      s1.charset = 'UTF-8';
      s1.setAttribute('crossorigin', '*');
      s0.parentNode.insertBefore(s1, s0);
    })();
  </script>
  <!--End of Tawk.to Script-->
  <script src="js/popper1.min.js"></script>
  <script src="js/corass-auth2.js"></script>
  <script src="//cdn.jsdelivr.net/npm/sweetalert2@11"></script>
  <script src="js/jquery1-3.4.1.min.js"></script>
  <!--Start of Tawk.to Script-->
  <script type="text/javascript">
    var Tawk_API = Tawk_API || {}, Tawk_LoadStart = new Date();
    (function () {
      var s1 = document.createElement("script"), s0 = document.getElementsByTagName("script")[0];
      s1.async = true;
      s1.src = 'https://embed.tawk.to/6380aa9fdaff0e1306d96312/1gin9l0pn';
      s1.charset = 'UTF-8';
      s1.setAttribute('crossorigin', '*');
      s0.parentNode.insertBefore(s1, s0);
    })();
  </script>
  <!--End of Tawk.to Script-->
  <script src="js/toastr.min.js"></script>
  <script src="js/popper.min.js"></script>

  <%if(error){%>
    <input hidden id="errorHandler" value="<%=error.error%>">

    <script>toastr.options.progressBar = true;
      toastr.error(
        document.getElementById('errorHandler').value,
        "ERROR", {
        timeOut: 9000
      }
      );</script>
    <%}%>
</body>

</html>