<!DOCTYPE html>
<html>
	<head>
		<title>Register - School Web</title>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
		<meta name="format-detection" content="telephone=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<!-- Fonts-->
		<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.10.2/css/all.min.css">
		<link rel="stylesheet" type="text/css" href="assets/fonts/themify-icons/themify-icons.css">
		<!-- Vendors-->
		<link rel="stylesheet" type="text/css" href="assets/vendors/bootstrap/css/bootstrap-grid.min.css">
		<link rel="stylesheet" type="text/css" href="assets/vendors/bootstrap/css/bootstrap.min.css">
		<link rel="stylesheet" type="text/css" href="assets/vendors/magnific-popup/magnific-popup.min.css">
		<link rel="stylesheet" type="text/css" href="assets/vendors/owl.carousel/owl.carousel.css">
		<link rel="stylesheet" type="text/css" href="assets/vendors/_jquery/jquery.min.css">
		<!-- <link rel="stylesheet" type="text/css" href="assets/vendors/bootstrap4/bootstrap-grid.min.css"> -->
		<!-- <link rel="stylesheet" type="text/css" href="assets/vendors/bootstrap4/bootstrap-grid.min.css"> -->
		<!-- App & fonts-->
		<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Roboto:300,300i,400,400i,700,700i&amp;amp;subset=latin-ext">
		<link rel="stylesheet" type="text/css" href="assets/css/main.css"><!--[if lt IE 9]>
			<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
		<![endif]-->
		<link rel="stylesheet" type="text/css" href="assets/css/register.css">
	</head>
	
	<body>
		<div class="container register-container">
      <div class="row">
        <div class="col-md-3 ads text-center">
        	<a href="index.php" class="btn">
        		<img class="shadow rounded-circle " src="assets/img/logos/swb_logo.png" alt="" style="max-height: 100px;" />
        	</a>
            <h5 class="my-2">About SchoolWeb</h5>
            <p>
            	SchoolWeb is highly acclaimed school data management software. Make your school data management easy with SchoolWeb. Make your school world class! 
            </p>
            
        </div>
        <div class="col-md-9 register-form">
          <!--div class="profile-img mt-2">
            <span class="fas fa-user fa-3x"></span>
          </div-->
          <h4 class="text-center mt-4">Register a school</h4>
          <p class="text-center">Registration is FREE*. Register Now.</p>
          <div class="text-center mb-2">
          	<a href="#!" class="text-primary" id="user_information_link" onclick="user_information_content_view()">Your Information</a>
          	|
          	<a href="#!" class="text-dark" id="school_information_link" onclick="school_information_content_view()">School Information</a>
          </div>
          <form>
          	<!--User Information-->
          	<div class="row" id="user_information_content">
          		<div class="form-group col-12 col-sm-12 col-md-6 col-lg-6 col-xl-6">
	              <input type="text" class="form-control" name="email" placeholder="Email">
	            </div>
	            <div class="form-group col-12 col-sm-12 col-md-6 col-lg-6 col-xl-6">
	              <input type="text" class="form-control" name="phone" placeholder="Phone">
	            </div>
	            <div class="form-group col-12 col-sm-12 col-md-6 col-lg-6 col-xl-6">
	              <input type="text" class="form-control" name="username" placeholder="Username">
	            </div>
	            <div class="form-group col-12 col-sm-12 col-md-6 col-lg-6 col-xl-6">
	              <input type="text" class="form-control" name="firstname" placeholder="First name">
	            </div>
	            <div class="form-group col-12 col-sm-12 col-md-6 col-lg-6 col-xl-6">
	              <input type="text" class="form-control" name="lastname" placeholder="Last name">
	            </div>
	            <div class="form-group col-12 col-sm-12 col-md-6 col-lg-6 col-xl-6">
	              <input type="text" class="form-control" name="gender" placeholder="Gender">
	            </div>
	            <div class="form-group col-12 col-sm-12 col-md-6 col-lg-6 col-xl-6">
	              <input type="text" class="form-control" name="password" placeholder="Password">
	            </div>
	            <div class="form-group col-12 col-sm-12 col-md-6 col-lg-6 col-xl-6">
	              <input type="text" class="form-control" name="rpassword" placeholder="Re-enter password">
	            </div>
	            <div class="col-md-12">
	            	<p class="text-danger py-2">*Note: This account is for only those who own a school.</p>
		            <div class="form-group mt-2 text-center">
		              <a href="#!" class="btn btn-primary btn-lg" onclick="school_information_content_view()">NEXT</a>
		            </div>
		            <div class="form-group mt-2 text-center">
		              Already have an account ? <a class="text-primary" href="login.php">Login</a>
		            </div>
	            </div>
          	</div>
          	<!--School Information-->
          	<div class="row" style="display: none;" id="school_information_content">
          		<div class="form-group col-12 col-sm-12 col-md-6 col-lg-6 col-xl-6">
	              <input type="text" class="form-control" name="school_name" placeholder="School Name">
	            </div>
	            <div class="form-group col-12 col-sm-12 col-md-6 col-lg-6 col-xl-6">
	              <input type="text" class="form-control" name="school_name_initials" placeholder="School Name Initials">
	            </div>
	            <div class="form-group col-12 col-sm-12 col-md-6 col-lg-6 col-xl-6">
	              <input type="text" class="form-control" name="school_email" placeholder="School Email">
	            </div>
	            <div class="form-group col-12 col-sm-12 col-md-6 col-lg-6 col-xl-6">
	              <input type="text" class="form-control" name="school_telphone" placeholder="School Telephone">
	            </div>
	            <div class="form-group col-12 col-sm-12 col-md-6 col-lg-6 col-xl-6">
	              <input type="text" class="form-control" name="school_phone_number" placeholder="School phone number">
	            </div>
	            <div class="input-group col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12">
	            	<input type="checkbox" name="terms_and_conditions">
	            	<label class="input-group-append mb-0">&nbsp; I agree with the <a href="terms_and_conditions.php" class="text-primary" target="_blank">Terms and Conditions</a></label> 
	            </div>
	            <div class="col-md-12">
	            	<p class="text-danger py-2">*Note: This account is for only those who own a school.</p>
		            <div class="form-group mt-2 d-flex justify-content-between">
		              <a href="#!" class="btn btn-primary btn-lg" onclick="user_information_content_view()"> BACK</a>
		              <button type="button" class="btn btn-primary btn-lg" onclick="register()">FINISH</button>
		            </div>
		            <div class="form-group mt-2 text-center">
		              Already have an account ? <a class="text-primary" href="login.php">Login</a>
		            </div>
	            </div>
          	</div>
          </form>
        </div>
      </div>
    </div>
		<!-- Vendors-->
		<script type="text/javascript" src="assets/vendors/jquery/jquery.min.js"></script>
		<script type="text/javascript" src="assets/vendors/imagesloaded/imagesloaded.pkgd.js"></script>
		<script type="text/javascript" src="assets/vendors/isotope-layout/isotope.pkgd.js"></script>
		<script type="text/javascript" src="assets/vendors/jquery.countdown/jquery.countdown.min.js"></script>
		<script type="text/javascript" src="assets/vendors/jquery.countTo/jquery.countTo.min.js"></script>
		<script type="text/javascript" src="assets/vendors/jquery.countUp/jquery.countup.min.js"></script>
		<script type="text/javascript" src="assets/vendors/jquery.matchHeight/jquery.matchHeight.min.js"></script>
		<script type="text/javascript" src="assets/vendors/jquery.mb.ytplayer/jquery.mb.YTPlayer.min.js"></script>
		<script type="text/javascript" src="assets/vendors/magnific-popup/jquery.magnific-popup.min.js"></script>
		<script type="text/javascript" src="assets/vendors/masonry-layout/masonry.pkgd.js"></script>
		<script type="text/javascript" src="assets/vendors/owl.carousel/owl.carousel.js"></script>
		<script type="text/javascript" src="assets/vendors/jquery.waypoints/jquery.waypoints.min.js"></script>
		<script type="text/javascript" src="assets/vendors/menu/menu.min.js"></script>
		<script type="text/javascript" src="assets/vendors/smoothscroll/SmoothScroll.min.js"></script>
		<!-- App-->
		<script type="text/javascript" src="assets/js/main.js"></script>
		<script type="text/javascript">
			function user_information_content_view() {
				$("#user_information_content").show()
				$("#school_information_content").hide()
				$("#user_information_link").removeClass("text-dark");
				$("#user_information_link").addClass("text-primary");

				$("#school_information_link").removeClass("text-primary");
				$("#school_information_link").addClass("text-dark");
			}
			function school_information_content_view() {
				$("#user_information_content").hide()
				$("#school_information_content").show()

				$("#user_information_link").removeClass("text-primary");
				$("#user_information_link").addClass("text-dark");

				$("#school_information_link").removeClass("text-dark");
				$("#school_information_link").addClass("text-primary");
			}
		</script>
	</body>
</html>