<!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>Student 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="stylesheet" href="vendors/themefy_icon/themify-icons.css" />
  <link rel="icon" href="img/kp.png" type="image/png" />
  <link rel="stylesheet" href="assets/css/bootstrap.min.css" />
  <link rel="stylesheet" href="assets/js/bootstrap.min.js" />
  <link rel="stylesheet" href="/assets/main_style.css" />
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" />
  <!-- 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-9 col-md-8 col-sm-12 mt-5 box">
          <div class="row">
            <div class="col-lg-6 col-md-6 col-sm-12 form_wrap">
              <div class="container">
                <div class="row pt-3 justify-content-center">
                  <div class="col-lg-12 col-md-12 col-sm-6">
                    <img class="logo_center mx-auto" src="/assets/Image/kp.png"
                      style="height: 130px;width:130px;margin: auto;" alt="2" /><br>
                    <h4 class="text-center fw-bold">CORASS STUDENT LOGIN!</h4>
                    <!-- <p class=" mt-1 px-2 text-center"><small>Please Login through your main Portal to manage your Research Work.</small></p> -->
                  </div>

                  <div class="row">
                    <div class="col-lg-12 col-md-6 col-sm-6">
                      <label for="username" class="user_id">Matric Number</label>
                      <p>
                        <input id="username" type="text" placeholder="e.g ND/21/COM/FT/000"
                          class=" form-control p-2 shadow-none" />
                      </p>
                    </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="student" />
                  </div>
                  <div class="row ">
                    <div class="col-lg-12">
                      <label for="password" class="user_id">Password </label>
                      <div class="col-lg-7 col-md-7 col-sm-6 pass "><a href="/user/forget-password"
                        class="text text-success text-center user_id pass" >Forgot Password?</a></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 col-md-12 col-sm-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 col-md-11 col-sm-12 mt-4">
                        <!-- <a href="https://portal.kwarastatepolytechnic.edu.ng/login.php" class="btn_col btn btn-block" -->
                      <a id="studentlogin" class="btn_col btn btn-block"
                        style="background-color: #069140;color: white;">
                        Login
                    </a>
                    </div>
                  </div> 
                  <div class="row justify-content-center">
                    <div class="col-lg-12 col-md-12 col-sm-6 text-center mt-2"><a href="/staff-login" class="text text-success text-center user_id">Click here to
                        login to staff Account</a></div>
                  </div>
                </div>
              </div>
            </div>
            <div class="col-lg-6 img_wrap">
              <div class="container">
                <div class="row justify-content-center">
                  <div class="col-lg-12">
                    <img class="img-fluid" src="/assets/Image/illlog.png" alt="2" style="margin-top: 150px;" />
                  </div>
                </div>
              </div>
            </div>
          </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="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>
  <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>
  <script src="js/toastr.min.js"></script>
  <script src="js/popper.min.js"></script>

  <input hidden id="errorHandler" value="<%=error.error%>">
  <input hidden id="successHandler" value="<%=success.message%>">

  <%if(error){%>


    <script>
      const incomingError = document.getElementById('errorHandler').value
      const incomingSuccess = document.getElementById('successHandler').value

      if (incomingError != undefined) {
        toastr.options.progressBar = true;
        toastr.error(
          document.getElementById('errorHandler').value,
          "Invalid Credential", {
          timeOut: 9000
        }
        );
      }
    </script>
    <%}%>


</body>

</html>