<?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>
		<meta charset="UTF-8">
		<title>PS2020 - GEESE</title>
		<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;
			    }
			</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">
				<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" onsubmit="return validateForm();">

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

							        <!-- Last-Name -->
							        <div class="form-group col-md-6">
							        	<!-- error -->
							        	<label for="lname">Last Name<span id="lname-error" class="small alert alert-danger ctm-hide" style="background-color: white;"><b>Cannot be empty</b></span></label>
							            <!-- txtfield -->
							            <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">
										<!-- error -->
										<label for="username">Username 
											<span id="username-chk" class="ctm-hide" style="color: red;"></span>
											<span id="username-error" class=" small alert alert-danger ctm-hide" style="background-color: white;"><b>Contain at least 4 words</b></span></label>
										<!-- txtfield -->
										<input type="text" class="form-control" name="username" id="username" onblur="checkUserName()" placeholder="Username">
									</div>

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

						        <!-- Password -->
						        <div class="form-row">
						        	<!-- Password -->
						        	<div class="form-group col-md-6">
						        		<!-- error -->
						        		<label for="inputEmail4">Password 
						        			<span id="password-chk" class="ctm-hide" style="color: red;"></span>
						        			<span id="p1-error" class="small alert alert-danger ctm-hide" style="background-color: white;"><b>Please look above</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 col-md-6">
						        		<!-- error -->
						        		<label for="inputPassword4">Re-enter Password <span id="p2-error" class="small alert alert-danger ctm-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 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>

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

								<!-- <input class="" style="width: 500px; background-color: white; color: black; margin: 10px;" name="username" type="text" id="username" value="user1" />
								<input class="" style="width: 500px; background-color: white; color: black; margin: 10px;" name="password" type="text" id="password" value="henry123" /> -->

								<button type="submit" class="btn btn-primary btn-lg btn-block">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">

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

					// $('#username-chk').removeClass('ctm-hide');

					var username_val = $("#username").val();
					if (username_val.length == 0){
						
					}
					else{
						// 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(m){
								$('#username-chk').children().remove();
								$('#username-chk').append(m);
							}
						});
					}
				});

				$("#password").keyup(function(){

					// $('#password-chk').removeClass('ctm-hide');

					var password_val = $("#password").val();
					if (password_val.length == 0){
						
					}
					else{
						// alert(password_val);
						$.ajax({
							type :'GET',
							url  :'<?php echo dir_root; ?>php/ajax/check_signup.php?act=chk_password&password='+password_val,
							date :'',
							success:function(m){
								$('#password-chk').children().remove();
								$('#password-chk').append(m);
							}
						});
					}
				});

				// (validate) Specify-Code
				$("#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 type="text/javascript">
				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;

			      }

			    }


				/* -----  Validate  ----- */
				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"));

			     

			      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>
