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

<?php
	$username = $_GET['username'];
	$email = $_GET['email'];
	$type = $_GET['type'];
	$subject = $_GET['subject'];
	$message = $_GET['message'];
?>

<!DOCTYPE html>
<html>
<head>

	<!-- animation -->
		<link rel="stylesheet" href="<?php echo dir_root; ?>libs/Animate/animate.css" />
		<link rel="stylesheet" href="<?php echo dir_root; ?>libs/Animate/animate_fade.css" />

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

		<style type="text/css">
			
			@media screen and (max-width: 480px) {
				html, body {
					min-width: unset;
				}
			}

			.content_inner{
				padding: 0 5px;
			}
				@media all and (max-width: 768px) {
					.content_inner{
						padding: 0;
					}
				}

			.error{
				display: inline-block;
				color: red;
			}

			.button{
				text-transform: none;
			}

			.btnCustomised{
				text-transform: unset;

				border-radius: 5px;
				
				transform: scale(.9);
			}
				.btnCustomised:hover{
					background-color: #989898 !important;
				}
		</style>
</head>

<body>
	<div id="form_addUser" class="content_inner">
		<div style="display: block; width: 100%;">
			<!-- Username -->
				<div class="12u" style="display: inline-block; padding-right: 50px;">
					<!-- label -->
					<label for="name" style="display: inline-block; width: max-content;">Name: </label>
					<!-- txtfield -->
					<div id="name" style="display: block;"></div>
				</div>

			<!-- Email -->
				<div class="5u" style="display: inline-block;">
					<!-- label -->
					<label for="email" style="display: inline-block; width: max-content;">Email: </label>
					<!-- error -->
					<div id="email_error" class="animated fadeInDown" style="display: inline-block;"></div>
					<!-- txtfield -->
					<input type="text" id="email" name="email" class="form-control mb-4" style="display: inline-block;" placeholder="email" value="" />
				</div>
		</div>

		<br>

	<!-- Password -->
		<div style="display: block; width: 100%;">
			<!-- Password -->
				<div class="5u" style="display: inline-block; padding-right: 50px;">
					<!-- label -->
					<label for="password" style="display: inline-block; width: max-content;">Password: </label>
					<!-- error -->
					<div id="password_error" class="animated fadeInDown error"></div>
					<!-- txtfield -->
					<input type="password" id="password" name="password" class="form-control mb-4" style="display: inline-block;" placeholder="password" value="" />
				</div>

			<!-- Confirm Password -->
				<div class="5u" style="display: inline-block;">
					<!-- label -->
					<label for="passwordConfirm" style="display: inline-block; width: max-content;">Confirm Password: </label>
					<!-- error -->
					<div id="passwordConfim_error" class="animated fadeInDown error"></div>
					<!-- txtfield -->
					<input type="password" id="passwordConfirm" name="passwordConfirm" class="form-control mb-4" style="display: inline-block;" placeholder="confirm password" value="" />
				</div>
		</div>

		<br>

	<!-- Account Type -->
		<div style="display: block; width: 100%;">
			<!-- Dropdown -->
				<div class="5u" style="display: inline-block; padding-right: 50px;">
					<!-- label -->
					<label for="role" style="display: inline-block; width: max-content;">Account Type: </label>
					<!-- error -->
					<div id="role_error" class="animated fadeInDown error"></div>
					<!-- select -->
					<div class="select-wrapper">
						<select id="role" style="cursor: pointer;">
							<option value="-1">---</option>
							<?php
								$result = $conn->query("SELECT * FROM user_role");

								while ( $row = $result->fetch_assoc() ){
							?>
									<option value="<?php echo $row['role_id'] ?>"><?php echo $row['role'] ?></option>
							<?php
								}
							?>
						</select>
					</div>
				</div>
		</div>

		<br>

	<!-- School/Class -->
		<div id="form_scRow" class="animated fadeInDown" style="display: none; width: 100%;">
			<!-- School -->
				<div id="schoolRow" class="animated fadeInDown 5u" style="display: inline-block; padding-right: 50px;">
					<!-- label -->
					<label for="school" style="display: inline-block; width: max-content;">School: </label>
					<!-- error -->
					<div id="school_error" class="animated fadeInDown error"></div>
					<!-- select -->
					<div class="select-wrapper">
						<select id="school" style="cursor: pointer;">
							<option value="0">---</option>
							<?php
								$result = $conn->query("SELECT * FROM school");

								while ( $row = $result->fetch_assoc() ){
							?>
									<option value="<?php echo $row['school_id'] ?>"><?php echo $row['school_name'] ?></option>
							<?php
								}
							?>
						</select>
					</div>
				</div>

			<!-- Class -->
				<div id="classRow" class="animated fadeInLeft 5u" style="display: inline-block; padding-right: 50px;">
					<!-- label -->
					<label for="class" style="display: inline-block; width: max-content;">Class: </label>
					<!-- error -->
					<div id="class_error" class="animated fadeInDown error"></div>
					<!-- select -->
					<div class="select-wrapper">
						<select id="class" class="ctm-disable" style="cursor: pointer;">
							<option value="0">---</option>
							<?php
								$result = $conn->query("SELECT * FROM school_class");

								while ( $row = $result->fetch_assoc() ){
							?>
									<option value="<?php echo $row['class_id'] ?>"><?php echo $row['class_name'] ?></option>
							<?php
								}
							?>
						</select>
					</div>
				</div>
		</div>

	</div>

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

	<script type="text/javascript">
		var test= true;
		
		var error_username = false,error_email = false,error_password = false,error_passwordConfirm = false,error_role = false,error_school = false,error_class = false;

	/* =============================================== 01. Username  =============================================== */
		
		$('#username').focus(function(){
			if ($('#username').val() == 'new user'){
				$('#username').val('');
			}
		});

		// (check) Username [if already exist]
			var original_username = '<?php echo $_SESSION['user']; ?>';

			$('#username').keyup(function(e){
				error_inUsername();
			});
				function error_inUsername(){

					if ($('#username').val() == 'new user'){
						$('#username').val('');
						$('#username_error').css({ 'color': 'red' }).html('This field cannot be empty');
						error_username = true;
						return true;
					}

					if ( $('#username').val().length == 0 ){
						$('#username_error').css({ 'color': 'red' }).html('This field cannot be empty');
						
						error_username = true;
						return true;
					}
					else if ( original_username == $('#username').val() ){  // if matches current logged in username
						$('#username_error').css({ 'color': 'red' }).html('(already exist)');

						
						error_username = true;
						return true;
					}
					else{
						$.ajax({
							type :'GET',
							url  :'<?php echo dir_root; ?>php/ajax/check_username.php?username='+$('#username').val(),
							date :'',
							success:function(m){

								if (m == 1){	//username 'Available'
									$('#username_error').css({ 'color': 'green' }).html('(available)');

									error_username = false;
									return false;
								}
								else{			//username 'Exists'
									$('#username_error').css({ 'color': 'red' }).html('(already exist)');

									
									error_username = true;
									return true;
								}
							}
						});
					}
				}
					function show_errorUsername($txt){
						$('#username_error').css({ 'color': 'red', 'font-weight': '' });
						$('#username_error').html($txt);
					}

	/* =============================================== 02. Email  =============================================== */
		
		// (check) Email [if already exist]
			var original_email = '<?php echo $_SESSION['email']; ?>';

			$('#email').keyup(function(e){
				error_inEmail();
			});
				function error_inEmail(){

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

			        if ( $('#email').val().length == 0 ){
						$('#email_error').css({ 'color': 'red' }).html('This field cannot be empty');
						
						error_email = true;
						return true;
					}
					else if (mailformat.test($('#email').val())){
			        	
			        	if ( original_email == $('#email').val() ){  // if matches current logged in email
							$('#email_error').css({ 'color': 'red' }).html('(already exist)');

							
							error_email = true;
							return true;
						}
						else{
							$.ajax({
								type :'GET',
								url  :'<?php echo dir_root; ?>php/ajax/check_email.php?email='+$('#email').val(),
								date :'',
								success:function(m){

									if (m == 1){	//email 'Available'
										$('#email_error').css({ 'color': 'green' }).html('(available)');

										error_email = false;
										return false;
									}
									else{			//email 'Exists'
										$('#email_error').css({ 'color': 'red' }).html('(already exist)');

										
										error_email = true;
										return true;
									}
								}
							});
						}
			        }
			        else{
			        	$('#email_error').css({ 'color': 'red' }).html('invalid format');
			        }
				}

	/* =============================================== 03. Password  =============================================== */
		
		// (check) Password
			$('#password').keyup(function(){
				error_inPassword();
			});
				function error_inPassword(){
					var re = /(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{6,}/;

					if ( re.test($('#password').val()) == false ) {
						$('#password_error').html('Password must contain at least 8 characters, 1 lowercase, 1 uppercase letter');
						$('#password_error').show();
						// $('#passwordConfirm').val('').addClass('ctm-disable');

						error_password = true;
						return true;
				    }
				    else{
				    	$('#password_error').hide();
						// $('#passwordConfirm').removeClass('ctm-disable');
						error_password = false;
						return false;
				    }
				}

	/* =============================================== 04. Confirm-Password  =============================================== */
		
		// (check) Confirm-Password
			$('#passwordConfirm').keyup(function(){
				error_inPasswordConfirm();
			});
				function error_inPasswordConfirm(){
					
					if ( $('#passwordConfirm').val() != $('#password').val() ){
						$('#passwordConfim_error').html('Password does not match');
						$('#passwordConfim_error').show();
						
						error_passwordConfirm = true;
						return true;
				    }
				    else{
				    	$('#passwordConfim_error').hide();
						error_passwordConfirm = false;
						return false;
				    }
				}

	/* =============================================== 05. Account-Type (role)  =============================================== */

		$('#role').change(function(){

			$('#school').val(0);
			$('#class').val(0);

			if ($('#role').val() > 0 && $('#role').val() < 4){	// is education role
				$('#form_scRow').show();
			}
			else{
				$('#form_scRow').hide();
			}

			if ($('#role').val() == 2 || $('#role').val() == 3){	// is teacher, school-admin
				$('#classRow').hide();
			}
			else if ($('#role').val() == 1){	// is student
				$('#classRow').show();
			}
		});

		// (check) Account-Type empty
			function error_inRole(){
				if ($('#role').val() < 0){
					$('#role_error').html('This field cannot be empty');
					$('#role_error').show();
					
					error_role = true;
					return true;
				}
				else{
					$('#role_error').hide();

					error_role = false;
					return false;
				}
			}

	/* =============================================== 06. School  =============================================== */

		// (check) School empty
			function error_inSchool(){
				
				var isEduRole = false;

				if ($('#role').val() > 0 && $('#role').val() < 4){	// is education role
					isEduRole = true;
				}

				if (isEduRole){
					if ($('#school').val() == 0){
						$('#school_error').html('This field cannot be empty');
						$('#school_error').show();
						
						error_school = true;
						return true;
					}
					else
						return false;
				}
				else
					return false;
			}

	/* =============================================== 07. Class  =============================================== */

		// (get) Class responsively
			$('#school').change(function(){
				select_ajaxClass();
			});			
				function select_ajaxClass(){
					$get_sid = $('#school').val();

					$.ajax({
						type :'GET',
						url  :'<?php echo dir_root; ?>php/ajax/get_selectClass.php?sid='+$get_sid,
						dataType :'json',
						success:function(m){
							
							// console.log(m.length);
							if (m.length > 0){
								$('#class >option[value=0]').siblings('option').remove();

								$.each(m, function(key, value){
									var str = "<option value='"+this.cID+"'>"+this.cIndex+". "+this.cName+"</option>";
									$('#class').append(str);
								});

								$('#class').removeClass('ctm-disable');
							}
							else
								$('#class').addClass('ctm-disable');
						}
					});
			}

	</script>

</body>
</html>