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

if(!empty($_POST['email_id']))
$suc=kid_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="Kids login page for LMS platform.">
  <title>Kids 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="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.css" rel="stylesheet">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
  <link href="css/auth.css" rel="stylesheet">
   <link href="css/style.css" rel="stylesheet">
</head>
<body class="kids-auth-page">
  <div class="auth-shell container-fluid">
    <div class="row g-0 auth-card">
      <div class="col-lg-6 auth-form-pane">
        <a href="index.php" class="auth-brand">
          <center><span class="auth-brand__icon"><img src="img/roboticsacademy.jpg" style="width: 240px;border-radius: 20px;" ></span> </center>
        </a>
        <div class="auth-form-wrap">
          <p class="auth-eyebrow">Kids Portal</p>
          <h1>Welcome Back</h1>
          <p class="auth-lead">Login to continue your lessons, activities, and badge challenges.</p>
          <form method="post" action="<?php $_SERVER['PHP_SELF']; ?>" id="kidsLoginForm" class="needs-validation" novalidate>
            <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">Email Id Required.</div>
              </div>
              <div class="col-12">
                <label for="password" class="form-label">Password</label>
                <div class="input-group">
                  <input type="password" class="form-control" name="password" id="password" required>
                  <button class="btn btn-outline-secondary toggle-pass" type="button" data-target="#password"><i class="bi bi-eye"></i></button>
                   <div class="invalid-feedback">Password Required.</div>
                </div>
               
              </div>
              <div class="col-12 auth-meta" style="display:none">
                <div class="form-check">
                  <input class="form-check-input" type="checkbox" id="rememberMe">
                  <label class="form-check-label" for="rememberMe">Remember me</label>
                </div>
                <a href="#" class="forgot-link">Forgot password?</a>
              </div>
              <div class="col-12 d-grid mt-1">
                <button type="submit" class="btn btn-auth">Login</button>
              </div>
            </div>
          </form>
          <p class="auth-footnote">New here? <a href="register.php">Create account</a></p>
        </div>
      </div>
      <div class="col-lg-6 auth-media-pane">
        <div class="auth-media-content">
          <h2>Jump into your next quest</h2>
          <p>Track your progress, unlock milestones, and keep learning every day.</p>
          <div class="feature-pill"><i class="bi bi-rocket me-2"></i>Purple themed fun learning</div>
        </div>
        <div class="auth-media-image-wrap">
          <img src="https://images.unsplash.com/photo-1509062522246-3755977927d7?auto=format&fit=crop&w=1200&q=80" alt="Kids in digital learning class" class="auth-media-image">
        </div>
      </div>
    </div>
  </div>
  
  
  <div id="welcomePopup" class="welcome-popup" style="display:none;">
    <div class="popup-box">
        <h3>🎉 Logged In</h3>
        <a href="index.php"> <button>Continue</button> </a>
    </div>
</div>




<script>
$(document).ready(function(){

const params = new URLSearchParams(window.location.search);

if(params.get('succ') === '1')
{
    $('#welcomePopup').fadeIn();

    setTimeout(function(){
        $('#welcomePopup').fadeOut();
    },2000);

    window.history.replaceState({}, document.title, window.location.pathname);
}

});
</script>

  
  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
  <script src="js/auth.js"></script>
</body>
</html>
