<?php 
ob_start();
session_start();
include_once("include/functions.php");

if(!empty($_POST['email_id']))
$suc=instructor_login();
?>
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="Instructor login page for LMS platform.">
  <title>Instructor Login | LMS</title>

  <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=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
  <link href="css/bootstrap.min.css" rel="stylesheet">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.css" rel="stylesheet">
  <link href="css/main.css" rel="stylesheet">
  <link href="css/login.css" rel="stylesheet">
 
  <style>
    .err{
	
	color:#DC3545;
	}
  
  </style>
</head>
<body class="instructor-login-page">
  <div class="login-shell container-fluid">
    <div class="row g-0 login-card">
      <div class="col-lg-6 login-form-pane">
        <a href="index.php" class="login-brand">
           <span class="auth-brand__icon"><img src="images/logo.jpg" style="width: 240px;border-radius: 20px;" ></span>
        </a>

        <div class="login-form-wrap">
          <p class="login-eyebrow">Instructor Portal</p>
          <h1>Instructor Login</h1>
          <p class="login-lead">Access your dashboard, manage courses, and continue guiding learners with confidence.</p>

         <!-- <form id="instructorLoginForm" class="needs-validation" novalidate>-->
         <form method="post" action="<?php $_SERVER['PHP_SELF']; ?>" id="instructorLoginForm" class="needs-validation" novalidate enctype="multipart/form-data">
            <div id="formFeedback" class="alert d-none mb-3" role="alert"></div>
            
            <?php
			  if(!empty($_GET['fail']))
			  {
			 ?>
				<div class="alert alert-danger" role="alert"> <center> <strong style="color:black"> Invalid Credentials.... </strong> </center> </div>
			<?php
				}
			?> 

            <div class="row g-3">
                 <div class="col-12">
                  <label for="email" class="form-label">Email</label>
                  <input type="email" class="form-control" name="email_id" id="email" required>
                  <div class="invalid-feedback" id="emailError">Enter Email Id.</div>
             </div>

              <div class="col-12">
                <label for="password" class="form-label">Password</label>
                <div class="input-group">
                  <input type="password" class="form-control" id="password" name="password" required>
                  <button class="btn btn-outline-secondary toggle-pass" type="button" data-target="#password" aria-label="Show password">
                    <i class="bi bi-eye"></i>
                  </button>
                  <div class="invalid-feedback">Password Required.</div>
                </div>
                
              </div>

              <div class="col-12 login-meta">
             <!--   <div class="form-check">
                  <input class="form-check-input" type="checkbox" id="rememberMe" >
                  <label class="form-check-label" for="rememberMe">Remember me</label>
                  <div class="invalid-feedback">You Must Confirm Before Login.</div>
                </div>-->
                <a href="recoveryAccount.php" class="forgot-link">Forgot password?</a>
              </div>

              <div class="col-12 d-grid mt-1">
                <button type="submit" class="btn btn-primary">Login</button>
              </div>
            </div>
          </form>

          <p class="login-footnote">
            New instructor?
            <a href="register.php">Create an account</a>
          </p>
        </div>
      </div>

      <div class="col-lg-6 login-media-pane">
        <div class="login-media-content">
          <h2>Welcome back, Instructor</h2>
          <p>Teach smarter with AI-ready tools, monitor learner progress, and publish high-impact courses at scale.</p>
          <div class="feature-pill"><i class="bi bi-robot me-2"></i>Smart teaching workspace</div>
        </div>
        <div class="login-media-image-wrap">
          <img
            src="images/instructorwithrobot.jpg?auto=format&fit=crop&w=1200&q=80"
            alt="Instructor interacting with robotics learning setup"
            class="login-media-image"
          >
        </div>
      </div>
    </div>
  </div>
<div id="welcomePopup" class="welcome-popup" style="display:none;">
<div class="popup-box">

<h4>ðŸŽ‰ Successfully Registered! Login to continue.</h4>

<a href="dashboard.php"> <button>Continue</button> </a>

</div>
</div>
  <script src="js/jquery.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
  <script src="js/main.js"></script>
  <script language="javascript">
  $(function () {
    initWelcomePopup();
  });
  </script>
</body>
</html>
