<?php include_once($_SERVER['DOCUMENT_ROOT'].'/_ps2020/_global/dir_root.php'); ?>
<?php include_once($_SERVER['DOCUMENT_ROOT'].'/_ps2020/config/cfg_loggedUser.php'); ?>

<!DOCTYPE HTML>
<!--
	Hielo by TEMPLATED
	templated.co @templatedco
	Released for free under the Creative Commons Attribution 3.0 license (templated.co/license)
-->
<html>
	<head>
		<title>Hielo by TEMPLATED</title>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1" />

		<?php include_once(dir_rootPHP.'_global/icon.php'); ?>


		<!-- libs -->
			<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
			<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
			<!-- <link rel="stylesheet" href="<?php echo dir_root; ?>libs/fontAwesome/css/font-awesome.min.css" /> -->
			<!-- <link rel="stylesheet" href="<?php echo dir_root; ?>libs/animate.css" /> -->

			<!-- animation -->
				<link rel="stylesheet" href="<?php echo dir_root; ?>libs/Animate/animate.css" />
				<!-- <link rel="stylesheet" href="<?php echo dir_root; ?>libs/Animate/animate_bounce.css" /> -->
				<link rel="stylesheet" href="<?php echo dir_root; ?>libs/Animate/animate_fade.css" />
				<!-- <link rel="stylesheet" href="<?php echo dir_root; ?>libs/Animate/animate_flip.css" /> -->
				<!-- <link rel="stylesheet" href="<?php echo dir_root; ?>libs/Animate/animate_other.css" /> -->
				<!-- <link rel="stylesheet" href="<?php echo dir_root; ?>libs/Animate/animate_rotate.css" /> -->
				<!-- <link rel="stylesheet" href="<?php echo dir_root; ?>libs/Animate/animate_slide.css" /> -->
				<!-- <link rel="stylesheet" href="<?php echo dir_root; ?>libs/Animate/animate_zoom.css" /> -->

				<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">

		<!-- css -->
			<link rel="stylesheet" href="<?php echo dir_root; ?>css/template-hielo/main.css" />

		<!-- css (custom) -->
			<link rel="stylesheet" href="<?php echo dir_root; ?>css/henry_style.css" />
			<!-- <link rel="stylesheet" href="<?php echo dir_root; ?>css/tanuj_style.css" /> -->
			<!-- <link rel="stylesheet" href="<?php echo dir_root; ?>css/karl_style.css" /> -->
			<!-- <link rel="stylesheet" href="<?php echo dir_root; ?>css/harsh_style.css" /> -->

			<style>
			    .background {
			      width: 100%;
			      height: 100%;
			      margin: 5px;
			      padding: 5px;

			    }

			    .content {
			      width: 1400px;
			      height: 800px;
			      position: absolute;
			      left: 0;
			      right: 0;
			      top: 0;
			      bottom: 0;
			      margin: 20px;

			      max-width: 100%;
			      max-height: 100%;
			      overflow: auto;
			    }


			    #fname-error {
			      display: none;
			    }

			    #lname-error {
			      display: none;
			    }

			    #username-error {
			      display: none;
			    }

			    #email-error {
			      display: none;
			    }

			    #password-guidelines{
			      display: none;
			    }

			    #p1-error {
			      display: none;
			    }

			    #p2-error {
			      display: none;
			    }

			    #agree-error {
			      display: none;
			    }

			    #state-error {
			      display: none;
			    }

			    #researcher-section {
			      display: none;
			    }

			    #student-section {
			      display: none;
			    }

			    #acc-error {
			      display: none;
			    }

			    #staff-section {
			      display: none;
			    }

			    #teacher-section {
			      display: none;
			    }
			  </style>

	</head>
	<!-- <body class="subpage"> -->
	<body>

		<!-- Header | Nav -->
			<?php include_once(dir_rootPHP.'_global/navbar/navbar.php'); ?>
			<?php include_once(dir_rootPHP.'_global/navbar/navbar-mobile.php'); ?>

		
		<!-- Page-Title -->
			<section id="One" class="wrapper style3" style="padding-top: 9rem;">
				<div class="inner">
					<header class="align-center">
						<p>Greenscape Environmental Experience & Learning Survey Experiments</p>
						<h2>Registration</h2>
					</header>
				</div>
			</section>

		<!-- Content -->
			<section id="two" class="wrapper style2">
				<div class="inner">
					
					<div class="section-1-container section-container">
					    <div class="container">
					      
					      <form name="register" action="<?php echo dir_root; ?>php/request/post_signIn.php" onsubmit="validateForm();">
					        
					        <div class="form-row">
					          
					          <!-- First-Name -->
					          <div class="form-group col-md-6">
					            <label for="fname">First Name<span id="fname-error" class="small alert alert-danger" style="background-color: white;"><b>Cannot be
					                empty</b></span></label>
					            <input type="text" class="form-control" name="fname" id="fname" onblur="checkfname()"
					              placeholder="First Name">
					          </div>

					          <!-- Last-Name -->
					          <div class="form-group col-md-6">
					            <label for="lname">Last Name<span id="lname-error" class="small alert alert-danger" style="background-color: white;"><b>Cannot be empty</b></span></label>
					            <input type="text" class="form-control" name="lname" id="lname" onblur="checklname()"
					              placeholder="Last Name">
					          </div>
					        </div>

					        <div class="form-row">
					          <!-- Username -->
					          <div class="form-group col-md-6">
					            <label for="username">Username <span id="username-error" class=" small alert alert-danger" style="background-color: white;"><b>Contain at least 4 words</b></span></label>
					            <input type="text" class="form-control" name="username" id="username" onblur="checkUserName()"
					              placeholder="Username">
					          </div>

					          <!-- E-mail -->
					          <div class="form-group col-md-6">
					            <label for="email">Email <span id="email-error" class="small alert alert-danger" style="background-color: white;"><b>Enter valid email</b></span></label>
					            <input type="text" class="form-control" name="email" id="email" onblur="checkemail()" placeholder="Email">
					          </div>
					        </div>

					        <!-- (error) Password -->
					        <div class="form-row" id="password-guidelines">
					          <div  class="alert alert-warning" role="alert">
					            <h4 class="alert-heading">Guidelines For Password</h4>
					            <p>Password is a combination of small, large alphabets and numbers with special symbols if possible. It should contain at least one of each and should have a length of at least 8 words.</p>
					            <hr>
					            <p class="mb-0">Reason: Just to ensure that your account remains secure.</p>
					          </div>
					        </div>

					        <!-- Password -->
					        <div class="form-row">
					          <!-- Password -->
					          <div class="form-group col-md-6">
					            <label for="inputEmail4">Password <span id="p1-error" class="small alert alert-danger" style="background-color: white;"><b>Please look
					                above</b></span></label>
					            <input type="password" class="form-control" name="password" id="password" onblur="checkpassword()"
					              placeholder="Password">
					          </div>
					          <!-- Re-Password -->
					          <div class="form-group col-md-6">
					            <label for="inputPassword4">Re-enter Password <span id="p2-error" class="small alert alert-danger" style="background-color: white;"><b>Password don't
					                match</b></span></label>
					            <input type="password" class="form-control" name="password2" id="re-password" onblur="confirmPassword()"
					              placeholder="Re-enter Password">
					          </div>
					        </div>

					        <!-- Address -->
					        <div class="form-row">
					          <!-- City -->
						          <div class="form-group col-md-6">
						            <label for="city">City</label>
						            <input type="text" class="form-control" id="city" placeholder="City">
						          </div>
					          <!-- State -->
						          <div class="form-group col-md-4">
						            <label for="state">State</label><span id="state-error" class="small alert alert-danger" style="background-color: white;"><b>Select valid state</b></span>
						            <select id="state" name="state" class="form-control" onchange="selectedState()">
						              <option selected disabled value="">Select A State</option>
						              <option value="NSW">New South Wales</option>
						              <option value="QLD">Queensland</option>
						              <option value="SA">South-Australia</option>
						              <option value="TAS">Tasmania</option>
						              <option value="VIC">Victoria</option>
						              <option value="WA">Western Australia</option>
						            </select>
						          </div>
					          <!-- Zip -->
						          <div class="form-group col-md-2">
						            <label for="zip">Zip</label>
						            <input type="text" class="form-control" id="zip" placeholder="####">
						          </div>
					        </div>

					        <!-- (error) Account-type -->
					        <span id="acc-error" class="small alert alert-danger" style="background-color: white;"><b>Select account-type</b></span>
					        
					        <!-- Account-Type -->
					        <fieldset class="form-group">
					          <div class="row">

					            <legend class="col-form-label col-sm-2 pt-0">Account-Type</legend>

					            <div class="col-sm-10">
					              <div class="form-check">
					                <input class="form-check-input" type="radio" name="acctype" id="acc0" value="particpant"
					                  onchange="selectedAccount()">
					                <label class="form-check-label" for="acc0">
					                  Particpant
					                </label>
					              </div>
					              <div class="form-check">
					                <input class="form-check-input" type="radio" name="acctype" id="acc1" value="student"
					                  onchange="selectedAccount()">
					                <label class="form-check-label" for="acc1">
					                  Student
					                </label>
					              </div>
					              <div class="form-check">
					                <input class="form-check-input" type="radio" name="acctype" id="acc2" value="teacher"
					                  onchange="selectedAccount()">
					                <label class="form-check-label" for="acc2">
					                  Teacher
					                </label>
					              </div>
					              <div class="form-check">
					                <input class="form-check-input" type="radio" name="acctype" id="acc3" value="staff"
					                  onchange="selectedAccount()">
					                <label class="form-check-label" for="acc3">
					                  School-Staff
					                </label>
					              </div>
					              <div class="form-check">
					                <input class="form-check-input" type="radio" name="acctype" id="acc4" value="researcher"
					                  onchange="selectedAccount()">
					                <label class="form-check-label" for="acc4">
					                  Researcher
					                </label>
					              </div>
					              <!-- <div class="form-check">

					                <input class="form-check-input" type="radio" name="acctype" id="acc5" value="admin"
					                  onchange="selectedAccount()">
					                <label class="form-check-label" for="acc5">
					                  Admin
					                </label>
					              </div> -->
					            </div>
					          </div>
					        </fieldset>

					        <!--Here we will ask for the researcher code and admin id-->
					        <div class="form-row" id="researcher-section">
					          <div class="form-group col-md-6">
					            <label for="researcher-code">Researcher Code</label>
					            <input type="text" class="form-control" name="researcher-code" id="researcher-code">
					          </div>
					          <div class="form-group col-md-6">
					            <label for="researcher-id">Admin-ID</label>
					            <input type="text" class="form-control" name="admin-id" id="admin-id">
					          </div>
					        </div>



					        <!--Here we will ask for the researcher code and admin id-->
					        <div class="form-row" id="staff-section">
					          <div class="form-group col-md-6">
					            <label for="staff-access-code">Staff Code</label>
					            <input type="text" class="form-control" name="staff-access-code" id="staff-access-code">
					          </div>
					          <div class="form-group col-md-6">
					            <label for="staff-access-id">School-ID</label>
					            <input type="text" class="form-control" name="staff-access-id" id="staff-access-id">
					          </div>
					        </div>



					        <!--Here we will ask for the researcher code and admin id-->
					        <div class="form-row" id="teacher-section">
					          <div class="form-group col-md-6">
					            <label for="teacher-access-code">School-ID</label>
					            <input type="text" class="form-control" name="teacher-access-code" id="teacher-access-code">
					          </div>
					          <div class="form-group col-md-6">
					            <label for="teacher-class-id">Class-Code</label>
					            <input type="text" class="form-control" name="teacher-class-id" id="teacher-class-id">
					          </div>
					        </div>



					        <!--Here we will ask for the researcher code and admin id-->
					        <div class="form-row" id="student-section">
					          <div class="form-group col-md-6">
					            <label for="teacher-class-access-code">Class-Code</label>
					            <input type="text" class="form-control" name="teacher-class-access-code" id="teacher-class-access-code">
					          </div>
					        </div>



					        <!--Role code-->
					        <div class="form-row" id="specify-code-section">
					          <div class="form-group col-md-6">
					            <label for="specify-code">Specify Code</label>
					            <input type="text" class="form-control" name="specify-code" id="specify-code">
					            <div id="specify-code-result" style="padding: 5px;"></div>
					          </div>
					        </div>


					        <div id="agree-error" class="small alert alert-danger" style="background-color: white;"><b>Please agree to terms and conditions</b></div>
					        <br />
					        <div class="form-group">
					          <div class="form-check">
					            <input class="form-check-input" type="checkbox" name="agree" id="terms" onchange="checkAgree(this)">
					            <label class="form-check-label" for="terms">
					              I agree to <a href="">Terms and Conditions</a>
					            </label>
					          </div>
					        </div>
					        <button type="submit" class="btn btn-primary btn-lg btn-block" onclick="validateForm()">Register</button>
					      </form>
					    </div>
					  </div>

				</div>
			</section>
			

		<!-- Footer -->
			<?php include_once(dir_rootPHP.'_global/footer/footer.php'); ?>

		<!-- Scripts -->
			<script src="<?php echo dir_root; ?>js/template-hielo/jquery.min.js"></script>
			<script src="<?php echo dir_root; ?>js/template-hielo/jquery.scrollex.min.js"></script>
			<script src="<?php echo dir_root; ?>js/template-hielo/skel.min.js"></script>
			<script src="<?php echo dir_root; ?>js/template-hielo/util.js"></script>
			<script src="<?php echo dir_root; ?>js/template-hielo/main.js"></script>


		<!-- Scripts (custom) -->
			<script type="text/javascript">

				$("#specify-code").keyup(function(){

					var rCode_val = $("#specify-code").val();
					if (rCode_val.length == 0){
						
					}
					else{
						// alert(rCode_val);
						$.ajax({
							type :'GET',
							url  :'<?php echo dir_root; ?>php/ajax/get_codeRole.php?code='+rCode_val,
							date :'',
							success:function(m){
								$('#specify-code-result').children().remove();
								$('#specify-code-result').append(m);
							}
						});
					}
				});
				
			</script>

			<script>
				function checkfname() {
			      var fname = document.forms["register"]["fname"].value.trim();

			      //THis is to remove any accidental space added
			      document.forms["register"]["fname"].value = fname;

			      if (fname.length == 0) {
			        document.getElementById('fname-error').style.display = 'inline';
			        return false;
			      } else {
			        document.getElementById('fname-error').style.display = 'none';
			        return true;
			      }
			    }

			    function checklname() {

			      var lname = document.forms["register"]["lname"].value.trim();

			      document.forms["register"]["lname"].value = lname;

			      if (lname.length == 0) {

			        document.getElementById("lname-error").style.display = "inline";
			        return false;

			      } else {

			        document.getElementById("lname-error").style.display = "none";
			        return true;

			      }

			    }

			    function checkUserName() {
			      var username = document.forms["register"]["username"].value.trim();

			      document.forms["register"]["username"].value = username;

			      if (username.length <= 3) {
			        
			        document.getElementById("username-error").style.display = "inline";
			        return false;
			      
			      } else {
			        
			        document.getElementById("username-error").style.display = "none";
			        return true;

			      }
			    }

			    function checkemail() {
			      var email = document.forms["register"]["email"].value.trim();
			      document.forms["register"]["email"].value = email;

			      if (email.length <= 4) {
			        
			        document.getElementById("email-error").style.display = "inline";
			        return false;

			      } else {
			        var mailformat = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;

			        if (email.match(mailformat)) {
			          
			          document.getElementById("email-error").style.display = "none";
			          return true;

			        } else {

			          document.getElementById("email-error").style.display = "inline";
			          return false;

			        }
			      }
			    }

			    function checkpassword() {
			      var password = document.forms["register"]["password"].value.trim();
			      document.forms["register"]["password"].value = password;

			      var re = /(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{6,}/;

			      if (re.test(password)) {
			        document.getElementById("p1-error").style.display = 'none';
			        document.getElementById("password-guidelines").style.display = 'none';
			        return true;

			      } else {
			      
			        document.getElementById("p1-error").style.display = 'inline';
			        document.getElementById("password-guidelines").style.display = 'block';
			        return false;
			      
			      }
			    }

			    function confirmPassword() {

			      var password = document.forms["register"]["password"].value;

			      var password2 = document.forms["register"]["password2"].value;

			      if (password != password2) {
			        
			        document.getElementById("p2-error").style.display = "inline";
			        return false;

			      } else {
			        document.getElementById("p2-error").style.display = "none";
			        return true;

			      }

			    }

			    function checkAgree(checkbx) {

			      if (checkbx.checked) {
			        
			        document.getElementById("agree-error").style.display = "none";
			        return true;

			      } else {
			        
			        document.getElementById("agree-error").style.display = "inline";
			        return false;

			      }

			    }

			    function selectedState() {
			      var e = document.getElementById("state");

			      var result = e.options[e.selectedIndex].value;

			      if (result == "") {
			        
			        document.getElementById("state-error").style.display = "inline";
			        return false;

			      } else {
			       
			        document.getElementById("state-error").style.display = "none";
			        return true;

			      }
			    }

			    // function selectedAccount() {
			    //   var val = "none";
			    //   var radios = document.getElementsByName("acctype");

			    //   for (var i = 0; i < radios.length; i++) {
			    //     if (radios[i].checked) {
			    //       val = radios[i].value;
			    //       break;
			    //     }
			    //   }

			    //   if (val == "none") {
			    //     document.getElementById("acc-error").style.display = "inline";
			    //   } else {
			    //     document.getElementById("acc-error").style.display = "none";
			    //   }
			    // }

			    function selectedAccount() {
			      var val = "none";
			      var radios = document.getElementsByName("acctype");

			      for (var i = 0; i < radios.length; i++) {
			        if (radios[i].checked) {
			          val = radios[i].value;
			          break;
			        }
			      }

			      if(val == "none"){
			        document.getElementById("acc-error").style.display = "inline";
			        return false;
			      }
			        document.getElementById("acc-error").style.display = "none";


			      if (val == "particpant") {
			        document.getElementById("researcher-section").style.display = "none";
			        document.getElementById("staff-section").style.display = "none";
			        document.getElementById("student-section").style.display = "none";
			        document.getElementById("teacher-section").style.display = "none";

			      } else if (val == "staff") {
			        //We need to ask for the random code generated by the system
			        document.getElementById("researcher-section").style.display = "none";
			        document.getElementById("staff-section").style.display = "block";
			        document.getElementById("student-section").style.display = "none";
			        document.getElementById("teacher-section").style.display = "none";


			      } else if (val == "student") {
			        //We need to ask for class code generated by the teacher of the class
			        document.getElementById("researcher-section").style.display = "none";
			        document.getElementById("staff-section").style.display = "none";
			        document.getElementById("student-section").style.display = "block";
			        document.getElementById("teacher-section").style.display = "none";

			      } else if (val == "teacher") {
			        //We need to ask for their school id
			        document.getElementById("researcher-section").style.display = "none";
			        document.getElementById("staff-section").style.display = "none";
			        document.getElementById("student-section").style.display = "none";
			        document.getElementById("teacher-section").style.display = "block";

			      } else if (val == "researcher") {
			        //We need to ask their researcher id
			        document.getElementById("researcher-section").style.display = "block";
			        document.getElementById("staff-section").style.display = "none";
			        document.getElementById("student-section").style.display = "none";
			        document.getElementById("teacher-section").style.display = "none";

			      }

			      return true;

			    }

			    function validateForm() {
			      var fname = checkfname();      
			      var lname = checklname();
			      var username = checkUserName();
			      var email = checkemail();
			      var password = checkpassword();
			      // var password2 = confirmPassword();
			      var terms = checkAgree(document.getElementById("terms"));
			      var state = selectedState();
			      var account = selectedAccount();

			     

			      if(!fname){
			        document.getElementById('fname-error').style.display = 'inline';
			      }
			       if(!lname){
			        document.getElementById("lname-error").style.display = "inline";
			      }if(!username){
			        document.getElementById("username-error").style.display = "inline";
			      }if(!email){
			        document.getElementById("email-error").style.display = "inline";
			      }if(!password){
			        document.getElementById("p1-error").style.display = 'inline';
			        document.getElementById("password-guidelines").style.display = 'block';
			      }
			      // if(!password2){
			      //   document.getElementById("p2-error").style.display = 'inline';
			      // }
			      if(!terms){
			        document.getElementById("agree-error").style.display = "inline";
			      }
			      if(!state){
			        document.getElementById("state-error").style.display = "inline";
			      }
			      if(!account){
			        document.getElementById("acc-error").style.display = "inline";
			      }

			      // document.getElementById("acc-error").style.display = "none";
			      //   document.getElementById("fname-error").style.display = "none";
			      //   document.getElementById("lname-error").style.display = "none";
			      //   document.getElementById("username-error").style.display = "none";
			      //   document.getElementById("emai-error").style.display = "none";
			      //   document.getElementById("p1-error").style.display = "none";
			      //   document.getElementById("p2-error").style.display = "none";
			      //   document.getElementById("state-error").style.display = "none";
			      //   document.getElementById("agree-error").style.display = "none";

			      
			      return false;
			      if(lname && fname && username && password2 && password
			        && email && terms && state && account){
			            return true;
			      }else{
			        return false;
			      }

			    }

			  </script>

	</body>
</html>