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

if(!empty($_POST['mid']))
$mid=$_POST['mid'];
else if(!empty($_GET['mid']))
$mid=$_GET['mid'];
else
$mid='';

if(!empty($_POST['parent_email']))
$suc=kids_signup();
?>
<!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 registration page for LMS platform.">
  <title>Kids Registration | 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="register.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>Create Account</h1>
          <p class="auth-lead">Start your learning adventure with fun lessons, games, and badges.</p>
          <form method="post" action="<?php $_SERVER['PHP_SELF']; ?>" id="kidsRegisterForm" class="needs-validation" novalidate>
            <div id="formFeedback" class="alert d-none mb-3" role="alert"></div>
            <?php
				if(!empty($_GET['exist']))
				{
			  ?>
				<div class="alert alert-danger" align="center"><strong style="color:black"> <centrer> Email Id Already Exists . </centrer> </strong></div>
			<?php
				}
			 ?>
            <div class="row g-3">
                         
              <div class="col-12 col-md-12">
                <label for="email" class="form-label">Parent's Name</label>
                <input type="text" class="form-control" id="parent_name" name="parent_name" required>
                <div class="invalid-feedback">Parent's Name Required.</div>
              </div>
              <div class="col-12 col-md-12">
                <label for="password" class="form-label">Parent's Email</label>
                  <input type="email" class="form-control" id="parent_email" name="parent_email" required>
                  <div class="invalid-feedback">Parent's Email Required.</div>
              </div>
              
               <div class="col-12 col-md-12">
                <label for="email" class="form-label">Parent's Mobile No</label>
                <input type="number" class="form-control" id="parent_mobile" name="parent_mobile" required>
                <div class="invalid-feedback">Parent's Mobile No Required.</div>
              </div>
               
              <div class="col-12 d-grid mt-2">
                <button type="submit" class="btn btn-auth">Register</button>
              </div>
            </div>
          </form>
          <p class="auth-footnote">Already have an account? <a href="index.php">Login</a></p>
        </div>
      </div>
      <div class="col-lg-6 auth-media-pane">
        <div class="auth-media-content">
          <h2>Learn with colorful adventures</h2>
          <p>Explore coding, robotics, and creative projects in a safe and fun learning space.</p>
          <div class="feature-pill"><i class="bi bi-controller me-2"></i>Games + Rewards + Progress</div>
        </div>
        <div class="auth-media-image-wrap">
          <img src="https://images.unsplash.com/photo-1503676260728-1c00da094a0b?auto=format&fit=crop&w=1200&q=80" alt="Kids learning with technology" class="auth-media-image">
        </div>
      </div>
    </div>
  </div>
  
  

  
  <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>
