<?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"); ?>

<!-- Function for button to update database when pressing the button -->
<?php
	$userID = $_SESSION['userID'];
?>


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

		<!-- 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 type="text/css">

				section *{
					transition: all .1s ease;
				}

				label{
					margin-bottom: 2px;
				}

				.box .content{
					padding: 8% 10%;
					padding-top: 140px;
				}
					@media all and (max-width: 768px) {
						.box .content{
							padding-top: 180px;
						}
					}

				.header_profile{
					position: absolute;
					top: 4%; left: 50%;
					transform: translate(-50%,-2%);

					text-align: center;
				}
					.header_profile>span{
						display: block;
					}
						.header_profile>span:first-of-type{
							margin-top: 10px;
							
							font-size: larger; font-weight: bold;
						}

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

				.button{
					text-transform: none;
				}

				.btnCustomised{
					text-transform: unset;

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

				#btnDelete{
					background-color: white; color: red !important;
					border: 1px solid red; border-radius: 8px;
				}
					#btnDelete:hover{
						background-color: red; color: white !important;
					}
					@media screen and (min-width: 480px){
						#btnDelete{
							float: right;
						}
					}

				#classRow,#codeRow{
					display: inline-block;
				}

				@media all and (max-width: 992px) {
					#codeResult_gap{
						display: none !important;
					}
				}

				@media screen and (max-width: 480px){
					#btn_usernameChange,#btn_emailChange,#btn_passwordChange{
					    width: unset;
					    padding: 0 1.5rem;
					}
				}

			</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>Profile</h2>
					</header>
				</div>
			</section>



		<!-- Content -->
			<section id="two" class="wrapper style2" style="padding: 8rem 0 6rem 0">
				<div class="inner">

					<?php
						$db_username = $db_email = $db_cid = $db_sid = '';
						$db_cName = $db_code = $db_sName = '';

						$data = $conn->query("SELECT * FROM user_account WHERE user_id = '$userID'");
						$row = $data->fetch_assoc();

						// echo '<script>alert('.$row['class_id'].');</script>';
						
							$db_username = $row['username'];
							$db_email = $row['email'];

							if ( $row['class_id'] != 0 ){
								$db_cid = $row['class_id'];
							}
							if ( $row['school_id'] != 0 ){
								$db_sid = $row['school_id'];
							}

						$role_data = $conn->query("SELECT * FROM user_role WHERE role_id = ".$row['accountType']);
						$role_row = $role_data->fetch_assoc();

							
						$class_data = $conn->query("SELECT * FROM school_class WHERE class_id = ".$row['class_id']);
						if ($class_data->num_rows > 0){
							$class_row = $class_data->fetch_assoc();
							$db_cName = $class_row['class_name'];
							$db_code = $class_row['specific_classCode'];
						}

						$school_data = $conn->query("SELECT * FROM school WHERE school_id = ".$row['school_id']);
						if ($school_data->num_rows > 0){
							$school_row = $school_data->fetch_assoc();
							$db_sName = $school_row['school_name'];
						}
					?>

					<div class="header_profile">
						<i class="fas fa-user-circle" aria-hidden="true" style="color: #548b54; background-color: #e0e0e0; font-size: 150px; border: 10px solid #f2f2f2; border-radius: 150px;"></i>
						<span><?php echo $role_row['role'] ?></span>
						<span><?php echo $db_sName ?></span>
						<!-- <span><?php echo $db_sName.'/'.$db_cName ?></span> -->
					</div>
					
					<div class="box">
	  					<div class="content">

	  						<hr>

	  						<p style="margin-top: 2rem; margin-bottom: 1.5rem; overflow-x: auto; white-space: nowrap;">Edit your details by filling in the boxes and press the 'Update' button below:</p>

	  						<div class="content_inner">
	  						<!-- Username -->
		  						<label for="usernameLogged" style="display: inline-block; width: max-content;">Username: </label>
									<!-- error -->
									<div id="username_error" class="animated fadeInDown ctm-hide" style="display: inline-block;"></div>
									
									<div style="display: block;">
										<!-- txtfield -->
										<div class="9u 8u$(small)" style="display: inline-block;">
											<input type="text" id="usernameLogged" name="usernameLogged" class="form-control mb-4 ctm-disable" style="display: inline-block;" value="<?php echo $db_username ?>" />
										</div>
										<!-- button -->
										<div class="2u" style="display: inline-block;">
											<div id="btn_usernameChange" class="button btnCustomised">Change</div>
											<div id="btn_usernameChange_cancel" class="button btnCustomised" style="display: none; background-color: #ececec; color: black !important;">Cancel</div>
										</div>
									</div>

								<br>

							<!-- Email -->
		  						<label for="email" style="display: inline-block; width: max-content;">Email: </label>
									<!-- error -->
									<div id="email_error" class="animated fadeInDown ctm-hide" style="display: inline-block;"></div>
									
									<div style="display: block;">
										<!-- txtfield -->
										<div class="9u 8u$(small)" style="display: inline-block;">
											<input type="text" id="email" name="email" class="form-control mb-4 ctm-disable" style="display: inline-block;" value="<?php echo $db_email ?>" />
										</div>
										<!-- button -->
										<div class="2u" style="display: inline-block;">
											<div id="btn_emailChange" class="button btnCustomised">Change</div>
											<div id="btn_emailChange_cancel" class="button btnCustomised" style="display: none; background-color: #ececec; color: black !important;">Cancel</div>
										</div>
									</div>

								<br>

							<!-- Password -->
								<div style="padding-bottom: 10px;">
									<label for="password" style="display: inline-block; width: max-content;">Change your password: </label>
										<!-- error -->
										<div id="passwordExist_error" class="animated fadeInDown ctm-hide" style="display: inline-block;"></div>
										
										<!-- old -->
										<div id="password_old">
											<!-- txtfield -->
											<div class="9u 8u$(small)" style="display: inline-block;">
												<input type="password" id="passwordDisplay" name="passwordDisplay" class="form-control ctm-disable" style="margin-bottom: 10px;" value="******" />
											</div>
											<!-- button -->
											<div class="2u" style="display: inline-block;">
												<div id="btn_passwordChange" class="button btnCustomised">Change</div>
											</div>
										</div>

										<!-- new -->
										<div id="password_new" class="animated fadeInDown" style="display: none;">
											<!-- txtfield -->
											<div class="9u 8u$(small)" style="display: inline-block;">
												<input type="password" id="passwordExist" name="passwordExist" class="form-control" style="margin-bottom: 10px;" placeholder="Current Password" />
												<br>
												<input type="password" id="password" name="password" class="form-control ctm-disable" style="margin-bottom: 10px;" placeholder="New Password" />
												<input type="password" id="passwordConfirm" name="passwordConfirm" class="form-control mb-4 ctm-disable" placeholder="Confirm Password" />
											</div>
											<!-- button -->
											<div class="2u" style="display: inline-block;">
												<div id="btn_passwordChange_cancel" class="button btnCustomised" style="background-color: #ececec; color: black !important;">Cancel</div>
											</div>
											<!-- error -->
											<div id="password_error" class="animated fadeInDown" style="display: none; color: red;"></div>
										</div>
								</div>


							<?php
								if ( $_SESSION['accountType'] == 0 || $_SESSION['accountType'] == 1 ){
							?>
								<div id="codeSection_activator" style="display: block; color: #548B54; margin-bottom: 20px; text-decoration: underline; cursor: pointer;">Enter an access code</div>
								<div id="codeSection" class="animated fadeInDown" style="display: none;">
									<br>
									<!-- School -->
										<div id="schoolRow" class="5u 12u$(medium)" style="margin-bottom: 15px;">
											<label for="school">School:</label>
												<!-- txtfield -->
												<div class="11u ctm-disable" style="display: inline-block;">
													<input type="text" id="school" name="school" class="form-control mb-4" value="<?php echo $db_sName ?>" />
												</div>
										</div>

									<!-- Class -->
										<div id="classRow" class="5u 12u$(medium)">
											<label for="class">Class:</label>
												<!-- txtfield -->
												<div class="7u 7u$(small) ctm-disable" style="display: inline-block;">
													<input type="text" id="class" name="class" class="form-control mb-4" value="<?php echo $db_cName ?>" />
												</div>
												<!-- button -->
												<div class="4u 4u$(small)" style="display: inline-block; padding: 5px 0;">
													<div id="btn_classChange" class="button btnCustomised">Change</div>
												</div>
										</div>

									<!-- Access-Code -->
										<div id="codeRow" class="animated fadeInLeft 5u 12u$(medium)" style="display: none;">
											<label for="code">Access Code:</label>
												<!-- txtfield -->
												<div class="7u 7u$(small)" style="display: inline-block;">
													<input type="text" id="code" name="code" class="form-control mb-4" value="<?php echo $db_code ?>" />
												</div>
												<!-- button -->
												<div class="4u 4u$(small)" style="display: inline-block; padding: 5px 0;">
													<div id="btn_classCancel" class="button btnCustomised" style="background-color: #ececec; color: black !important;">Cancel</div>
												</div>
										</div>

										<!-- Code-Result -->
										<div id="codeResult_row" style="display: none; height: 60px;">
											<!-- space-gap -->
											<div id="codeResult_gap" class="5u 0u$(medium)" style="display: inline-block;"></div>
											<!-- text -->
											<div id="codeResult" class="animated fadeInDown 5u 12u$(medium)" style="display: inline-block; padding: 5px; transition: all .6 ease;"></div>
										</div>
								</div id="codeSection">
							<?php
								}
							?>
								<br>

							<!-- Button -->
								<div style="display: block;">
									<button type="submit" id="btnUpdate" class="button special" style="margin-bottom: 10px;">Update</button>
									<button id="btnDelete" class="button special" style="margin-bottom: 10px;">Delete this account</button>
								</div>

							</div>

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

				
		<!-- ==========  <- Pop-up ->  ========== -->
		<?php include_once(dir_rootPHP.'_global/tools/popAlert.php'); ?>

		<!-- ==========  <- Pop-Notification ->  ========== -->
		<?php include_once(dir_rootPHP.'_global/tools/popNotif.php'); ?>

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

		<div id="screen_loader"></div>

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

				// disable 'Tab' key [for all textfield]
				$('input[type="text"], input[type="password"]').keydown(function(e){
					if (e.which == 9){
						e.preventDefault();
					}
				});
				
				/* -- Username -- */
					var original_username = '';
					var changing_username = false;
					var error_username = false;

					$('#btn_usernameChange').click(function(){
						// allow editing 'Username'
						$('#usernameLogged').removeClass('ctm-disable');
						// hide button 'Change'
						$('#btn_usernameChange').hide();
						// show button 'Cancel'
						$('#btn_usernameChange_cancel').show();

						// store original 'Username-value'
						original_username = '<?php echo $db_username; ?>';
						changing_username = true;
					});
						$('#btn_usernameChange_cancel').click(function(){
							// allow editing 'Username'
							$('#usernameLogged').addClass('ctm-disable');
							// show button 'Change'
							$('#btn_usernameChange').show();
							// hide button 'Cancel'
							$('#btn_usernameChange_cancel').hide();

							$('#username_error').addClass('ctm-hide');  // hide

							// restore original 'Username-value'
							$('#usernameLogged').val(original_username);
							changing_username = false;
						});

					// (check) Username [if already exist]
						$('#usernameLogged').blur(function(){
							if ( changing_username == true ){
								error_inUsername();
							}
						});
							function error_inUsername(){
								if ( $('#usernameLogged').val().length == 0 ){
									$('#username_error').addClass('ctm-hide');  // hide
								}
								else if ( original_username == $('#usernameLogged').val() ){
									$('#username_error').addClass('ctm-hide');  // hide
									error_username = false;
								}
								else{
									$.ajax({
										type :'GET',
										url  :'<?php echo dir_root; ?>php/ajax/check_username.php?username='+$('#usernameLogged').val(),
										date :'',
										success:function(m){
											$('#username_error').removeClass('ctm-hide');  // show

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

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

												error_username = true;
											}
										}
									});
								}
							}

				/* -- Email -- */
					var original_email = '';
					var changing_email = false;
					var error_email = false;

					$('#btn_emailChange').click(function(){
						// allow editing 'Email'
						$('#email').removeClass('ctm-disable');
						// hide button 'Change'
						$('#btn_emailChange').hide();
						// show button 'Cancel'
						$('#btn_emailChange_cancel').show();

						// store original 'Email-value'
						original_email = '<?php echo $db_email; ?>';
						changing_email = true;
					});
						$('#btn_emailChange_cancel').click(function(){
							// allow editing 'Email'
							$('#email').addClass('ctm-disable');
							// show button 'Change'
							$('#btn_emailChange').show();
							// hide button 'Cancel'
							$('#btn_emailChange_cancel').hide();

							$('#email_error').addClass('ctm-hide');  // hide

							// restore original 'Email-value'
							$('#email').val(original_email);
							changing_email = false;
						});

					// (check) Email [if already exist]
						$('#email').blur(function(){
							if ( changing_email == true ){
								error_inEmail();
							}
						});
							function error_inEmail(){
								if ( $('#email').val().length == 0 ){
									$('#email_error').addClass('ctm-hide');  // hide
								}
								else if ( original_email == $('#email').val() ){
									$('#email_error').addClass('ctm-hide');  // hide
									error_email = false;
								}
								else{
									$.ajax({
										type :'GET',
										url  :'<?php echo dir_root; ?>php/ajax/check_email.php?email='+$('#email').val(),
										date :'',
										success:function(m){
											$('#email_error').removeClass('ctm-hide');  // show

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

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

												error_email = true;
											}

											// Warning: Changing Email will disable account, and require to verify again, need confirmation.
											// show pop-alert
												$title = 'Account Verification';
												$msg = 'Changing email will require re-verification of the account, please confirm before continue.';
												$confirm = 'Confirm';
												$cancel = 'Cancel';
												$icon = 4;

											popAlert_show($title,$msg,$confirm,$cancel,$icon);

											$('#popBtn_cancel').click(function(){
												setTimeout(function() {
													$('#btn_emailChange_cancel').click();
												}, animTime);
											});
										}
									});
								}
							}

				/* -- Password -- */
					var changing_password = false;

					$('#btn_passwordChange').click(function(){
						$('#password_old').hide();
						$('#password_new').show();
						changing_password = true;
					});
						$('#btn_passwordChange_cancel').click(function(){
							// unset value for all password text-field
							$('#passwordExist').val('');
							$('#password').val('');
							$('#passwordConfirm').val('');

							$('#password').val('').addClass('ctm-disable');
							$('#passwordConfirm').val('').addClass('ctm-disable');

							$('#password_old').show();
							$('#password_new').hide();
							$('#passwordExist_error').addClass('ctm-hide');  // hide
							changing_password = false;
						});

					// (check) Existing Password
						$('#passwordExist').keyup(function(){
							if ( changing_password == true ){
								error_inPasswordExist();
							}
						});
							function error_inPasswordExist(){
								$.ajax({
									type :'GET',
									url  :'<?php echo dir_root; ?>php/ajax/check_password.php?password='+$('#passwordExist').val(),
									date :'',
									success:function(m){
										$('#passwordExist_error').removeClass('ctm-hide');  // show

										if (m == 1){	//password 'Correct'
											$('#passwordExist_error').css({ 'color': 'green', 'font-weight': 'bold' });
											$('#passwordExist_error').html('(Correct Password)');

											$('#password').removeClass('ctm-disable');

											return false;
										}
										else{			//password 'Wrong'
											$('#passwordExist_error').css({ 'color': 'red', 'font-weight': 'bold' });
											$('#passwordExist_error').html('(Wrong Password)');

											$('#password').val('').addClass('ctm-disable');
											$('#passwordConfirm').val('').addClass('ctm-disable');

											return true;
										}
									}
								});
							}

					// (check) Password
						$('#password').keyup(function(){
							if ( changing_password == true ){
								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');
									return true;
							    }
							    else{
							    	$('#password_error').hide();
									$('#passwordConfirm').removeClass('ctm-disable');
									return false;
							    }
							}

					// (check) Confirm Password [need to macth password]
						$('#passwordConfirm').keyup(function(){
							if ( changing_password == true ){
								error_inPasswordConfirm();
							}
						});
							function error_inPasswordConfirm(){
								if ( $('#passwordConfirm').val() != $('#password').val() ){
									$('#password_error').html('Password does not match');
									$('#password_error').show();
									return true;
								}
								else{
									$('#password_error').hide();
									return false;
								}
							}

				// Code-Activator
					$('#codeSection_activator').click(function(){
						$(this).hide();
						$('#codeSection').show();
					})

				/* -- Class -- */
					var original_code = '';
					var original_school = $('#school').val();
					var original_class = $('#class').val();
					var changing_class = false;
					var error_code = false;
					var cResult = '';

					$('#btn_classChange').click(function(){
						// disable 'Class'
						$('#classRow').addClass('ctm-disable');
						// show 'Code'
						$('#codeRow').show();
						// store original 'Code-value'
						original_code = $('#code').val();
						changing_class = true;
					});

					$('#btn_classCancel').click(function(){
						// disable 'Class'
						$('#classRow').removeClass('ctm-disable');
						// show 'Code'
						$('#codeRow').hide();
						// store original 'Code-value'
						$('#code').val(original_code);
						$('#school').val(original_school);
						$('#class').val(original_class);
						$('#codeResult').html('');
						$('#codeResult_row').hide();
						changing_class = false;
					});

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

							$('#codeResult_row').show();
							$('#codeResult').hide();

							error_inCode();
						});
							function error_inCode(){
								var rCode_val = $("#code").val();
									if (rCode_val.length == 0){
										$('#codeResult_row').hide();
										$('#codeResult').html('');

										// var nullResult = '';
										cResult = '';
										error_code = false;
									}
									else {
										// alert(rCode_val);
										$.ajax({
											type :'GET',
											url  :'<?php echo dir_root; ?>php/ajax/get_codeRole.php?code='+rCode_val,
											date :'',
											success:function(m){
												cResult = m.split(',');

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

					// (on-blur) Class-Code
						$('#code').blur(function(){
							if ( original_code != $('#code').val() ){

								if ($('#code').val().length == 0){
									$title = 'Switch to "Participant" Account';
									$msg = 'leaving the "Access Code" blank will result in switching your account into a participant account and you will no longer belong to any classes or schools';
								}
								else if (original_school.length == 0){
									var assignClass = '';
									if (cResult[0] == 1){
										assignClass = '<br>You will be assign to class <b>"'+cResult[4]+'"</b>.';
									}
									else
										assignClass = '';
									
									$title = 'Switch to "'+cResult[5]+'" Account';
									$msg = 'Your account-type will become <b>"'+cResult[5]+'"</b>.<br>You will be assign to school <b>"'+cResult[2]+'"</b>.'+assignClass;
								}
								else{
									$title = 'Change class?';
									$msg = 'from <b>"<?php echo $db_cName ?>"</b> to <b>"'+cResult[4]+'"</b>';
								}

								if (error_code == false){
									// show pop-alert
										$confirm = 'Confirm';
										$cancel = 'Cancel';
										$icon = 4;
									
									popAlert_show($title,$msg,$confirm,$cancel,$icon);

									$('#popBtn_confirm').click(function(){
										setTimeout(function() {
											if ($('#code').val().length == 0){
												$('#school, #class').val('');
											}
											else{
												$('#school').val(cResult[2]);
												$('#class').val(cResult[4]);
											}
										}, animTime);
									});

									$('#popBtn_cancel').click(function(){
										setTimeout(function() {
											$('#code').val(original_code);
											$('#school').val(original_school);
											$('#class').val(original_class);
										}, animTime);
									});
								}
							}
							else{
								$('#school').val(original_school);
								$('#class').val(original_class);
							}
						});

				/* -- Submit -- */
					$('#btnUpdate').click(function(event){
						event.preventDefault();
						
						var submitting = false;
						var empty_field = false;

						// (validate) Username
							if ( changing_username == true ){

								if ( $('#usernameLogged').val().length != 0 ){
									if ( original_username != $('#usernameLogged').val() ){
										if ( error_username == false ){

											$msg_username = 'Change <b>Username</b> from: <br>"'+original_username+'" to <b>"'+$('#usernameLogged').val()+'"</b>?<br><br>';
											submitting = true;
										}
									}
									else
										$msg_username = '';
								}
								else
									empty_field = true;
							}
							else
								$msg_username = '';

						// (validate) Email
							if ( changing_email == true ){

								if ( $('#email').val().length != 0 ){
									if ( original_email != $('#email').val() ){
										if ( error_email == false ){

											$msg_email = 'Change <b>Email</b> from: <br>"'+original_email+'" to <br><b>"'+$('#email').val()+'"</b>?<br><br>';
											submitting = true;
										}
									}
									else
										$msg_email = '';
								}
								else
									empty_field = true;
							}
							else
								$msg_email = '';

						// (validate) Password
							if ( changing_password == true ){

								var passE = $('#passwordExist').val().length;
								var passN = $('#password').val().length;
								var passC = $('#passwordConfirm').val().length;

								if ( passE != 0 && passN != 0 && passC != 0 ){
									if ( !error_inPasswordExist() && !error_inPassword() && !error_inPasswordConfirm() ){
										$msg_password = 'Resetting your <b>Password</b>?<br><br>';
										submitting = true;
									}
								}
								else
									empty_field = true;
							}
							else
								$msg_password = '';

						// (validate) Code
							if ( changing_class == true ){

								if ( original_code != $('#code').val() ){
									if ( error_code == false ){
										
										if (cResult == ''){
											$msg_class = '<b>No access code is entered</b>, are you sure to turn your account into a participant account?';
										}
										else if (<?php echo $_SESSION['accountType'] ?> == 1){
											$msg_class = 'Changing class from<br><b>"<?php echo $db_cName ?>"</b> to <b>"'+cResult[4]+'"</b><br>?';
										}
										else if (original_school.length == 0){
											var assignClass = '';
											if (cResult[0] == 1){
												assignClass = '<br>You will be assign to class <b>"'+cResult[4]+'"</b>.';
											}
											else
												assignClass = '';
											
											$msg_class = 'Your account-type will become <b>"'+cResult[5]+'"</b>.<br>You will be assign to school <b>"'+cResult[2]+'"</b>.'+assignClass;
										}

										submitting = true;
									}
								}
							}
							else
								$msg_class = '';

						// pop-up Alert
						if (empty_field){
							// show pop-alert
								$title = 'Empty-Fields!!';
								$msg = 'If the "change" button is pressed, the textfield corresponded cannot be blank.';
								$confirm = 'Okay';
								$cancel = '';
								$icon = 3;
							
							popAlert_btnSingle();
							popAlert_show($title,$msg,$confirm,$cancel,$icon);
						}
						else if (submitting){
							alert_toConfirm();
						}

							function alert_toConfirm(){
								// show pop-alert
									$title = 'Confirmation<br><br>';
									$msg = $msg_username+$msg_email+$msg_password+$msg_class;
									$confirm = 'Update';
									$cancel = 'Cancel';
									$icon = 0;
								
								popAlert_show($title,$msg,$confirm,$cancel,$icon);

								$('#popBtn_confirm').click(function(){
									// $('form').submit();
									update_toDb();
								});
							}
								function update_toDb(){
									// var $classVal = '';
									// if ( typeof $('#class').val() === 'undefined' ){
									// 	$classVal = '';
									// }
									// else
									// 	$classVal = cResult[4];
									// alert(typeof cResult);
									loader_show();

									$.ajax({
										type :'POST',
										url  :'<?php echo dir_root; ?>php/request/post_profile.php?edited_username='+changing_username+'&edited_email='+changing_email+'&edited_password='+changing_password+'&edited_class='+changing_class+'&username='+$('#usernameLogged').val()+'&email='+$('#email').val()+'&password='+$('#password').val()+'&codeVal='+cResult,
										date :'',
										success:function(m){
											console.log(m);
											loader_hide();
											if (m == 1){
												location.reload();
											}
											else{
												// Notification
													$icon = 2;
													$msg = 'Failed updating to database';
												popNotif_show($icon,$msg);
											}
										}
									});
								}
					});

				/* -- Delete Account -- */
					$('#btnDelete').click(function(){

						// show pop-alert
							$title = 'Delete Account?';
							$msg = 'This will permanently delete your account<br>are you sure?';
							$confirm = 'Delete Account';
							$cancel = 'Cancel';
							$icon = 3;
						
						popAlert_btnConfirm_red();
						popAlert_show($title,$msg,$confirm,$cancel,$icon);

						$('#popBtn_confirm').click(function(){
							delete_account();
						});
					});
						function delete_account(){
							$.ajax({
								type :'POST',
								url  :'<?php echo dir_root; ?>php/request/post_deleteAccount.php?userID=<?php echo $userID; ?>',
								date :'',
								success:function(m){
									if (m == 1){
										location.reload();
									}
									else{
										// Notification
											$icon = 2;
											$msg = 'Failed to delete account from database';
										popNotif_show($icon,$msg);
									}
								}
							});
						}

			</script>

	</body>
</html>
