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

<!DOCTYPE html>
<!--
	Transit by TEMPLATED
	templated.co @templatedco
	Released for free under the Creative Commons Attribution 3.0 license (templated.co/license)
-->
<html lang="en">
	<head>
		<title>Registration | GEESE</title>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1" />
		<!-- <meta http-equiv="content-type" content="text/html; charset=utf-8" /> -->
		<!-- <meta name="description" content="" /> -->
		<!-- <meta name="keywords" content="" /> -->
		
		<?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;
			    }

			    .form-group{
			    	padding-right: 20px;
			    }

			    .error_hide{
			    	display: none;
			    }

			</style>
	</head>
	<body class="landing">

		<!-- 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" style="padding: 6% 0 6% 0;">
				<div class="inner">
					
					<div class="section-1-container section-container">
					    <div class="container">

					    	<form action="<?php echo dir_root; ?>php/request/post_signUp.php" method="post" name="register" onsubmit="return validateForm();">

								<div class="form-row">
						        	<!-- Username -->
						        	<div class="form-group 6u 12u$(medium)">
						        		<!-- error -->
						        		<label for="username">Username 
						        			<span id="username-chk" class="ctm-hide"></span>
						        			<span id="username-error" class=" small alert alert-danger error_hide" style="background-color: white;"><b>Please contain at least 4 words</b></span>
						        		</label>
						        		<!-- txtfield -->
						        		<input type="text" class="form-control" name="username" id="username" onblur="checkUsername()" placeholder="Username">
						        		<!-- <span id="user-valid" class=" small alert alert-warning" style="background-color: yellow;"></span> -->
						        	</div>

						        	<!-- E-mail -->
						        	<div class="form-group 6u 12u$(medium)">
						        		<!-- error -->
						        		<label for="email">Email 
						        			<span id="email-chk" class="ctm-hide"></span>
						        			<span id="email-error" class="small alert alert-danger error_hide" style="background-color: white;"><b>Please enter a valid email</b></span>
						        		</label>
						        		<!-- txtfield -->
						        		<input type="text" class="form-control" name="email" id="email" onblur="checkemail()" placeholder="Email">
						        		<!-- <span id="email-valid" class=" small alert alert-warning" style="background-color: yellow;"></span> -->
						        	</div>
						        </div>

						        <!-- Password -->
						        <div class="form-row">
						        	<!-- Password -->
						        	<div class="form-group 6u 12u$(medium)">
						        		<!-- error -->
						        		<label for="inputEmail4">Password <span id="p1-error" class="small alert alert-danger error_hide" style="background-color: white;"><b>Please read the guidelines</b></span></label>
						        		<!-- txtfield -->
						        		<input type="password" class="form-control" name="password" id="password" onblur="checkpassword()" placeholder="Password">
						        	</div>

						        	<!-- Re-Password -->
						        	<div class="form-group 6u 12u$(medium)">
						        		<!-- error -->
						        		<label for="inputPassword4">Confirm Password <span id="p2-error" class="small alert alert-danger error_hide" style="background-color: white;"><b>Password don't match</b></span></label>
						        		<!-- txtfield -->
						        		<input type="password" class="form-control" name="password2" id="re-password" onblur="confirmPassword()" placeholder="Re-enter Password">
						        	</div>
						        </div>
							        <!-- (error) Password -->
							        <div id="password-guidelines" class="form-row error_hide">
							        	<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>

						        <!--Access-code-->
						        <div class="form-row" id="specify-code-section">
						        	<div class="form-group col-md-6" style="padding-right: 20px;">
						        		<label for="specify-code">Access Code</label>
						        		<input type="text" class="form-control" name="specify-code"  id="specify-code" placeholder="Code for teacher and student account">
						        		<div id="specify-code-result" style="padding: 5px;"></div>
						        	</div>
						        </div>

						        <input type="submit" class="btn btn-primary btn-lg btn-block" name="submit" value="Register" style="background-color: #548B54 !important;">								

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


		<!-- ==========  <- Loading-Screen ->  ========== -->
		<?php include_once(dir_rootPHP.'_global/tools/screenLoader.php'); ?>


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

				var username_existed = false;
				var email_existed = false;
				// (validate) Username
					$("#username").keyup(function(){

						var username_val = $("#username").val();

						if (username_val.length != 0){
							// alert(username_val);
							$.ajax({
								type :'GET',
								url  :'<?php echo dir_root; ?>php/ajax/check_signup.php?act=chk_username&username='+username_val,
								date :'',
								success:function(callback){
									$('#username-chk').removeClass('ctm-hide');

									if (callback == 1){
										$('#username-chk').css({'color': 'red'});
										$('#username-chk').html('  (already exist)');

										username_existed = true;
									}
									else{
										$('#username-chk').css({'color': 'green'});
										$('#username-chk').html('  (available)');

										username_existed = false;
									}
								}
							});
						}
					});

				// (validate) Email
					$("#email").keyup(function(){

						var email_val = $("#email").val();

						if (email_val.length != 0){
							// alert(email_val);
							$.ajax({
								type :'GET',
								url  :'<?php echo dir_root; ?>php/ajax/check_signup.php?act=chk_email&email='+email_val,
								date :'',
								success:function(callback){
									$('#email-chk').removeClass('ctm-hide');

									if (callback == 1){
										$('#email-chk').css({'color': 'red'});
										$('#email-chk').html('  (already exist)');

										email_existed = true;
									}
									else{
										$('#email-chk').html('');
										email_existed = false;
									}
								}
							});
						}
					});

				// (validate) Specify-Code
					$("#specify-code").keyup(function(){

						var rCode_val = $("#specify-code").val();
							if (rCode_val.length == 0){
								$('#specify-code-result').html('');
							}
							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').html(m);
										cResult = m.split(',');

										if ( cResult[0] != 0 ){
											$('#specify-code-result').html('<span>'+cResult[3]+': <b>'+cResult[4]+'</b></span><br><span>account type: <b>'+cResult[5]+'</b></span>');
											$('#specify-code-result').show();
											error_code = false;
										}
										else{
											$('#specify-code-result').html('<span style="color: red;">the code is invalid</span>');
											$('#specify-code-result').show();
											error_code = true;
										}
									}
								});
							}
					});
				
			</script>

			<script>

			    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";
			        // document.getElementById("user-valid").style.display = "none";
			        return false;

			      } else {

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

			      //   document.getElementById("user-valid").style.display = "inline";
			      //   document.getElementById("username-error").style.display = "none";
			      //   document.getElementById("user-valid").style.backgroundColor = "orangered";
			      //   document.getElementById("user-valid").style.fontWeight = "bold";
			      //     var request = new XMLHttpRequest();
			      //     request.open("GET","get_username_validation.php?q=" + username, false);
			      //     request.send();
			      //     if(request.readyState == 4 && request.status == 200){
			      //       if (request.responseText.length == 1) {
			      //           document.getElementById("user-valid").innerText = "Username Is Available!";
			      //           document.getElementById("user-valid").style.backgroundColor = "greenyellow";
			      //           return true;
			      //         }else{
			      //           document.getElementById("user-valid").innerText = "Username is Already Registered!";
			      //           document.getElementById("user-valid").style.backgroundColor = "orangered";
			      //         return false;
			      //         }
			      //     }
			      // }
			  	 }
			    }

			    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";
			        // document.getElementById("email-valid").style.display = "none";
			        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;
			          // document.getElementById("email-valid").style.display = "inline";
			          // document.getElementById("email-valid").style.backgroundColor = "orangered";
			          // document.getElementById("email-valid").style.fontWeight = "bold";


			          //document.getElementById("email-valid").style.display = "none";
			          // xhttp = new XMLHttpRequest();
			          // xhttp.onreadystatechange = function () {
			          //   if (this.readyState == 4 && this.status == 200) {
			             
			          //     var theresponse = this.responseText;
			          //     if (theresponse.length == 1) {
			          //       document.getElementById("email-valid").innerText = "email is available!";
			          //       return true;
			          //     }

			          //     if (theresponse.length > 1) {
			          //       document.getElementById("email-valid").innerText = "email is taken!";
			          //       return false;
			          //     }
			          //   }
			          // };
			          // xhttp.open("GET", "get_email_validation.php?q=" + email, false);
			          // xhttp.send();

			          

			          // var request = new XMLHttpRequest();
			          // request.open("GET","get_email_validation.php?q=" + email, false);
			          // request.send();
			          // if(request.readyState == 4 && request.status == 200){
			          //   if (request.responseText.length == 1) {
			          //       document.getElementById("email-valid").innerText = "Email Is Available!";
			          //       document.getElementById("email-valid").style.backgroundColor = "greenyellow";
			          //       return true;
			          //     }else{
			          //       document.getElementById("email-valid").innerText = "Email Is Already Registered";
			          //       document.getElementById("email-valid").style.backgroundColor = "orangered";
			          //     return false;
			          //     }
			          // }
			        }else {

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

			        }

			          // alert("It still comes in here");
			      }
			    }

			    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 validateForm() {
			      var username = checkUsername();
			      var email = checkemail();
			      var password = checkpassword();
			      var password2 = confirmPassword();
			      // var terms = checkAgree(document.getElementById("terms"));
			      // var state = selectedState();
			      //var account = selectedAccount();

			      // alert("The value of username in validate is:" + username);
			      // alert("The value of email in validate is: " + email);

			      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 (checkUsername() && checkemail() && checkpassword() && confirmPassword() && !username_existed && !email_existed) {
			        loader_show();
			        return true;
			      } else {
			        event.preventDefault();
			      }

			    }

			  </script>

	</body>
</html>
