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

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

			<!-- table-fucntions -->
				<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/bs4-4.1.1/jq-3.3.1/jszip-2.5.0/dt-1.10.21/af-2.3.5/b-1.6.3/b-colvis-1.6.3/b-flash-1.6.3/b-html5-1.6.3/b-print-1.6.3/cr-1.5.2/fc-3.3.1/fh-3.1.7/kt-2.5.2/r-2.2.5/rg-1.1.2/rr-1.2.7/sc-2.0.2/sb-1.0.0/sp-1.1.1/sl-1.3.1/datatables.min.css"/>

				<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/pdfmake.min.js"></script>
				<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/vfs_fonts.js"></script>
				<script type="text/javascript" src="https://cdn.datatables.net/v/bs4-4.1.1/jq-3.3.1/jszip-2.5.0/dt-1.10.21/af-2.3.5/b-1.6.3/b-colvis-1.6.3/b-flash-1.6.3/b-html5-1.6.3/b-print-1.6.3/cr-1.5.2/fc-3.3.1/fh-3.1.7/kt-2.5.2/r-2.2.5/rg-1.1.2/rr-1.2.7/sc-2.0.2/sb-1.0.0/sp-1.1.1/sl-1.3.1/datatables.min.js"></script>

		<!-- css -->
			<link rel="stylesheet" href="<?php echo dir_root; ?>css/template-hielo/main.css" />
			<link rel="stylesheet" href="<?php echo dir_root; ?>css/template-hielo/dataTable.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">

				.animated{
				  -webkit-animation-duration: .6s;
				  animation-duration: .6s;
				}
				
				input[type="text"]{height: 2rem;}

				table{
					min-width: 600px;
				}

				.table thead th{
					border-bottom: 0px;
				}

				table td{
					padding-right: 3rem;
				}

				table tbody tr:hover{
					background-color: #58ff582e !important; /*#47cd475c*/
				}

				#thDel{
					pointer-events: none;
				}
					#thDel::before, #thDel::after{
						content: '';
					}

				#btnAdd{
					width: 100%; height: 40px;
					padding: 0 10px;

					border: 1px dashed grey; border-radius: 5px;
					background-color: #ffffff40;
					
					transition: all .2s ease;
				}
						#btnAdd>iconPlus{
							color: green;
							transition: all .2s ease;
						}

					#btnAdd:hover{
						background-color: #548B54; /*background-color: #eaeaea40;*/
						border-style: solid;
						cursor: pointer;
					}
						#btnAdd:hover >iconPlus{
							color: white;
							transform: scale(1.02);
						}

				#btnDel{
					text-align: center;
					
					padding-right: 1rem;
					border-left: 1px solid #cbcbcb;

					cursor: pointer;
					transition: all .4s ease;
				}
					#btnDel:hover{
						background-color: #f55757;
					}
					#btnDel:hover >i{
						color: white;
					}

					#btnDel >i{
						color: #e80000;
						padding-left: 2px;
					}

				.tField_Url{
					display: inline-block !important;
					width: 90% !important;
				}

				#surveyAdd_row, #tCode_row{
					display: flex;
					padding: 20px;
				}
					.surveyAdd_rowInner, .tCode_rowInner{
						display: inherit;
						width: 100%; padding: 20px;

						border: 1px solid #eee; border-radius: 15px;
						box-shadow: 0 0 15px #ececec;
					}
					@media all and (max-width: 992px){
						#surveyAdd_row, #tCode_row{
							display: block;
							padding: 10px;
						}
					}

				#btnClose{
					position: absolute;
				    top: 10px;
				    right: 15px;

				    cursor: pointer;
				}
					@media all and (max-width: 992px){
						#btnClose{
						    top: 55px;
						    right: 0;
						}
					}

				@media all and (max-width: 576px) {
					.inner{ width: 95% !important; }
					.content{ padding: 2rem 1rem !important; }
				}

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

		<!-- Access-Code (Teacher) -->
			<section id="two" class="wrapper style2" style="padding-bottom: .5rem;">
				<div class="animated fadeInUp inner">

					<div class="box ctm-box">
						<div class="content" style="padding: 0;">
							<?php

								$db_sid = 0;
								$db_tCode = 0;

								// Get 'School ID'
								$result = $conn->query("SELECT * FROM user_account WHERE user_id = ".$_SESSION['userID']);
								if($result) {
									while ( $row = $result->fetch_assoc() ){
										$db_sid = $row['school_id'];
									}
								}

								
								// If 'School-Code' exist
								if ($db_sid != 0){

									// Get 'Teacher-Code'
									$result = $conn->query("SELECT specific_teacherCode FROM school WHERE school_id = ".$db_sid);
									if($result) {
										while ( $row = $result->fetch_assoc() ){
											$db_tCode = $row['specific_teacherCode'];
										}
									}
							?>
									<div id="tCode_row" class="" style="padding: 0;">
										<!-- <div class="3u 12u$(medium)"><h2>New Teacher</h2></div> -->
										<div class="9u 9u$(medium) tCode_rowInner">
											<!-- Survey-Name -->
												<div class="10u 12u$(medium)" style="padding: 10px;">
													<div class=""><label for="newCode">Access-Code (Teacher)</label></div>
													<input id="newCode" name="newCode" type="text" style="border-color: #9f9f9f; border-radius: 5px;" value="<?php echo $db_tCode; ?>" />
													<div style="padding: 10px; padding-bottom: 0;"><b>Note:</b> This is the current Access-Code for your school's teachers, in the text-field</div>
												</div>

											<!-- ==== (Complete) button ==== -->
												<div class="2u 12u$(medium)" style="padding: 10px;">
													<div style="height: 2rem;"></div>
													<div id="btnComplete_tCode" class="animated fadeIn ctm-toCenter" onclick="chkCode()">
														<div class="button special fit" style="text-transform: unset; border-radius: 5px; margin: 0;">Add Code</div>
													</div>
												</div>

											<!-- ==== (Close) button ==== -->
												<!-- <div id="btnClose"><i class="fa fa-times-circle-o" style="font-size: 32px; color: #ff00009e;" onclick="surveyAdd_close()"></i></div> -->
										</div>
									</div>
							<?php
								}
							?>

						</div>
					</div>

				</div>
			</section>

		<!-- Content -->
			<section id="two" class="wrapper style2" style="padding-top: .5rem;">
				<div class="inner">

					<div class="box ctm-box">
						<div class="content">

							<!-- Table -->
							<div class="table-wrapper">
								
								<!-- <h2>Manage Teachers</h2> -->

								<div style="padding: 5px; overflow-x: auto;">
									
									<?php

										// if($userAccountType == 5){
										// 	$result = $conn->query
										// 	("SELECT user_id AS 'ID', username AS 'Username', SUBSTRING(password, 1, 20) AS 'Password', IFNULL(school_name,'Not Applicable') AS 'School', IFNULL(specific_classCode,'Not Applicable') AS 'Class',active AS 'Active' 
										// 	FROM user_account
										// 	inner join user_role on user_account.accountType = user_role.role_id
										// 	left join school on user_account.school_id = school.school_id
										// 	left join school_class on user_account.class_id = school_class.class_id
										// 	WHERE accountType = 2
										// 	ORDER BY user_id ASC");
										// }
										// else{
										// 	$result = $conn->query
										// 	("SELECT user_id AS 'ID', username AS 'Username', SUBSTRING(password, 1, 20) AS 'Password', IFNULL(school_name,'Not Applicable') AS 'School', IFNULL(specific_classCode,'Not Applicable') AS 'Class',active AS 'Active' 
										// 	FROM user_account
										// 	inner join user_role on user_account.accountType = user_role.role_id
										// 	left join school on user_account.school_id = school.school_id
										// 	left join school_class on user_account.class_id = school_class.class_id
										// 	Where  accountType = 2
										// 	AND user_account.school_id = $schoolID 
										// 	ORDER BY user_id ASC");
										// }
									
										$userAccount = $conn->query("SELECT accountType, school_id FROM user_account WHERE username = '".$_SESSION['user']. "'");
										$row = $userAccount->fetch_assoc();
										$userAccountType = $row['accountType'];
										$schoolID = $row['school_id'];
										//echo $schoolID;

										$userRole = $conn->query("SELECT role FROM user_role WHERE role_id = ".$userAccountType);
										//echo $userAccountType;
										// while ($row = $userAccount->fetch_assoc()) {
										// 	echo $row['accountType']."<br>";
										// }
										// echo $_SESSION['user'];
										if($userAccountType == 5){
											$result = $conn->query
											("SELECT user_id AS 'ID', username AS 'Username', email AS 'Email', password AS 'Password', IFNULL(school_name,'Not Applicable') AS 'School',active AS 'Active' 
											FROM user_account
											inner join user_role on user_account.accountType = user_role.role_id
											left join school on user_account.school_id = school.school_id
											left join school_class on user_account.class_id = school_class.class_id
											WHERE accountType = 2
											ORDER BY user_id ASC");
										}
										else{
											$result = $conn->query
											("SELECT user_id AS 'ID', username AS 'Username', email AS 'Email', password AS 'Password', IFNULL(school_name,'Not Applicable') AS 'School',active AS 'Active' 
											FROM user_account
											inner join user_role on user_account.accountType = user_role.role_id
											left join school on user_account.school_id = school.school_id
											left join school_class on user_account.class_id = school_class.class_id
											Where  accountType = 2
											AND user_account.school_id = $schoolID 
											ORDER BY user_id ASC");
										}




											$tablesAndTheirData = array();
										    array_push($tablesAndTheirData, array(
										        'fields' => $result->fetch_fields(),
										        'data' => $result
										    ));

					                	foreach($tablesAndTheirData as $table){
					                		if($table['data']->num_rows){
		                			?>
					                			<table id="data_table" class="table table-striped" style="width:100%;">

					                                <thead class="animated fadeInUp">
					                                    <tr>
															<th>ID</th>
															<th>Username</th>
															<th>Email</th>
															<th>Password</th>
															<!-- <th>Account Type</th> -->
															<th>School</th>
															<!-- <th>Class</th> -->
															<th>Active</th>

						                                    <!-- <?php
						                                    	//foreach($table['fields'] as $field){
																	?>
																			<th><?php //echo $field->name;?></th>
																	<?php
																		//}
																	?> -->

						                                    <th id="thDel" class="1u 1u$(xsmall)"></th>
					                                    </tr>
					                                </thead>

					                                <tbody>
							                            <?php
															$order_num = 0;
							                            	while($row = $table['data']->fetch_assoc()){
							                            		$order_num++;
							                            ?>
								                                <tr class="animated fadeIn">
								                                    <?php
								                                    	$index = 0;

								                                    	foreach($row as $key => $value){
								                                    		if ($key == 'ID'){
								                                    			$index = $value;
								                                    		}
								                                    ?>
								                                    		<td>
								                                    			<?php
								                                    				if ($key == 'Username'){
								                                    			?>
									                                    			<!-- label -->
																						<div id="nameRow_<?php echo $index; ?>">
																							<label id="name_<?php echo $index; ?>" style="display: inline-block; margin: 0 !important;"><?php echo $value; ?></label>
																							<i class="fa fa-pencil" style="padding-left: 2px; cursor: pointer;" onclick="surveyEdit('name','<?php echo $index; ?>')"></i>
																						</div>
																					<!-- txtfield -->
																						<div id="nameTField_row<?php echo $index; ?>" class="ctm-toCenter" style="display: none;">
																							<input id="nameTField_<?php echo $index; ?>" name="nameTField_<?php echo $index; ?>" type="text" value="<?php echo $value; ?>" />
																						</div>
																				<?php
																					}
																					else if ($key == 'Email'){
																				?>
																						<!-- label -->
																						<div id="emailRow_<?php echo $index; ?>">
																							<label id="email_<?php echo $index; ?>" style="display: inline-block; margin: 0 !important;"><?php echo $value; ?></label>
																							<i class="fa fa-pencil" style="padding-left: 2px; cursor: pointer;" onclick="surveyEdit('email','<?php echo $index; ?>')"></i>
																						</div>
																						<!-- txtfield -->
																							<div id="emailTField_row<?php echo $index; ?>" class="ctm-toCenter" style="display: none;">
																								<input id="emailTField_<?php echo $index; ?>" name="emailTField_<?php echo $index; ?>" type="text" value="<?php echo $value; ?>" />
																							</div>
																				<?php
																					}
																					else if ($key == 'Password'){
																				?>
																						<button id="btnPasswordChange" class="button special" style="height: 1.9rem; line-height: 2rem; background-color: #8c8c8c; padding: 0 .8rem; font-size: 12px; text-transform: unset; border-radius: 5px;" onclick="passwordEdit('<?php echo $index; ?>')">Change</button>
																				<?php
																					}
																					else if ($key == 'Active'){
																						if ($value == 1){
																							$bColor = 'green';
																							$statusVal = 'Active';
																							$statusIc = 'on';
																						}
																						else{
																							$bColor = '#bdbdbd';
																							$statusVal = 'Inactive';
																							$statusIc = 'off';
																						}
																				?>
																						<div style="display: block;">
																							<!-- <div style="display: inline-block; width: 70px; text-align: center; background-color: <?php echo $bColor; ?>; color: white; font-size: 14px; padding: 2px 5px; border-radius: 5px;"><?php echo $statusVal; ?></div> -->
																							<i id="statusIc_<?php echo $index; ?>" class="fas fa-toggle-<?php echo $statusIc; ?>" style="display: inline-block; color: <?php echo $bColor; ?>; font-size: 32px; padding-left: 2px; transition: .2s; cursor: pointer;"
																								onclick="activeEdit('<?php echo $index; ?>','<?php echo $value; ?>')"></i>
																						</div>
																				<?php
																					}
																					else
																						echo $value;
																				?>
								                                    		</td>
								                                    <?php
								                                    	}
								                                    ?>

																	<!-- Delete -->
																	<td id="btnDel" class="1u 1u$(xsmall)" onclick="surveyDelete('<?php echo $index; ?>')">
																		<i id="icDel_<?php echo $index; ?>" class="fa fa-trash" ></i>
																	</td>
								                                </tr>
							                            <?php
							                            	}
							                            ?>
					                                </tbody>
					                            </table>
		                			<?php
					                		}
					                	}
					                ?>

								</div>

								<div style="height: 10px;"></div>

								<!-- ==== (Add) button ==== -->
									<div id="btnAdd" class="animated fadeIn ctm-toCenter" onclick="surveyAdd()">
										<iconPlus><i class="fa fa-plus-circle"></i>   Add Teacher</iconPlus>
									</div>

									<!-- ==== New-Teacher ==== -->
										<div id="surveyAdd_row" class="animated fadeInDown ctm-hide">
											<div class="3u 12u$(medium)"><h2>New Teacher</h2></div>
											<div class="9u 9u$(medium) surveyAdd_rowInner">
												<!-- Survey-Name -->
													<div class="9u 12u$(medium)" style="padding: 10px;">
														<div class=""><label for="newName">Username</label></div>
														<input id="newName" name="newName" type="text" style="border-color: #9f9f9f; border-radius: 5px;" value="" />
														<div style="padding: 10px; padding-bottom: 0;"><b>Note:</b> The teacher must already has an (participant) account with GEESE, and to assign here by searching their username.</div>
													</div>

												<!-- ==== (Complete) button ==== -->
													<div class="3u 12u$(medium)" style="padding: 10px;">
														<div style="height: 2rem;"></div>
														<div id="btnComplete" class="animated fadeIn ctm-toCenter" onclick="surveyAdd_toDb()">
															<div class="button special fit" style="text-transform: unset; border-radius: 5px; margin: 0;">Find Teacher</div>
														</div>
													</div>

												<!-- ==== (Close) button ==== -->
													<div id="btnClose"><i class="fa fa-times-circle-o" style="font-size: 32px; color: #ff00009e;" onclick="surveyAdd_close()"></i></div>
											</div>
										</div>
							</div>

						</div>
					</div>
				</div>
			</section>
			

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

		<script type="text/javascript">
			$(document).ready(function() {
	            $('#data_table').DataTable( {
	                dom: 'frtip',
	                pageLength: 10
	            });
	        });
		</script>

		<!-- 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-Notification ->  ========== -->
			<?php include_once(dir_rootPHP.'_global/tools/popNotif.php'); ?>

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

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

		<!-- Scripts (custom) -->
			<script type="text/javascript">
				
				/* -----  Edit-Name  ----- */
				function surveyEdit($id,$index){
					// hide 'label'
					$('#'+$id+'Row_'+$index).hide();
					// show 'txtfield'
					$('#'+$id+'TField_row'+$index).show();
					// edit in 'txtfield'
					$('#'+$id+'TField_'+$index).focus();


						$('#'+$id+'TField_'+$index).focusout(function(){  // click outside txtfield
							updateName($id,$index);
						});
						$('#'+$id+'TField_'+$index).keypress(function(e){
							if(e.which == 13){  // the enter key code
								updateName($id,$index);
							}
						});

				}
						function updateName($id,$index){
							$newVal = $('#'+$id+'TField_'+$index).val();
							$.ajax({
								type :'POST',
								url  :'<?php echo dir_root; ?>php/ajax/post_teacherUpdate.php?act=update_sField&index='+$index+'&field='+$id+'&value='+$newVal,
								date :'',
								success:function(m){
									// hide 'txtfield'
									$('#'+$id+'TField_row'+$index).hide();
									// update 'label'
									$nameVal = $('#'+$id+'TField_'+$index).val();
									$('#'+$id+'_'+$index).text($nameVal);
									// show 'label'
									$('#'+$id+'Row_'+$index).show();

									// Notification
										$icon = 1;
										$msg = 'Success: '+$id+' is updated';
									popNotif_show($icon,$msg);
								}
							});
						}

				/* -----  Change-Password  ----- */
				function passwordEdit($sid){
					// show pop-pWin
						$pWUrl = '<?php echo dir_root; ?>_global/html/getForm_manageUser_passwordChange.php';
						$pWTitle = 'Password';
						$pWHeader = 'Change Password';
						$pWMsg = '';
						$pWConfirm = 'Confirm';
						$pWCancel = 'Cancel';
						$pWIcon = 0;
					
					popWindow_show($pWUrl,$pWTitle,$pWHeader,$pWMsg,$pWConfirm,$pWCancel,$pWIcon);

					$('#popWinBtn_confirm').click(function(e){
						// console.log('clicked');
						
						var iFrame_func = $('#popWin_iFrame')[0].contentWindow;

						if (!iFrame_func.error_inPassword() && !iFrame_func.error_inPasswordConfirm()){
							// console.log('password correct');
							
							$password = iFrame_func.$('#password').val();
							
							// show pop-alert
								$title = 'Change Password?';
								$msg = 'Are you sure to change password for user: '+$('#name_'+$sid).text()+'?';
								$confirm = 'Confirm';
								$cancel = 'Cancel';
								$icon = 0;
							
							popAlert_show($title,$msg,$confirm,$cancel,$icon);

							$('#popBtn_confirm').click(function(){
								$.ajax({
									type :'POST',
									url  :'<?php echo dir_root; ?>php/ajax/post_userUpdate.php?act=update_password&sid='+$sid+'&password='+$password,
									date :'',
									success:function(m){
										// console.log(m);
										if (m == 1){
											// location.reload();
											popWindow_hide();

											// Notification
												$icon = 1;
												$msg = 'Success: password changed!!';
											popNotif_show($icon,$msg);
										}
										else{
											// Notification
												$icon = 2;
												$msg = 'Failed to add user to database';
											popNotif_show($icon,$msg);
										}
									}
								});
							});
						}
					});
				}

				/* -----  Active-Status  ----- */
				function activeEdit($index,$value){

					var newVal;

					if ($value == 1){
						$title = 'Disable an Account?';
						$msg = 'Are you sure to <b style="color: red;">disable</b> the account for <b>"'+$('#name_'+$index).html()+'"</b>?';
						newVal = -1;
					}
					else{
						$title = 'Active an Account?';
						$msg = 'Are you sure to <b style="color: #00a500;">active</b> the account for <b>"'+$('#name_'+$index).html()+'"</b>?';
						newVal = 1;
					}

					// show pop-alert
						$confirm = 'Confirm';
						$cancel = 'Cancel';
						$icon = 0;
					
					popAlert_show($title,$msg,$confirm,$cancel,$icon);

					$('#popBtn_confirm').click(function(){setTimeout(function() {
							updateStatus($index,newVal);
					}, animTime);});
				}
					function updateStatus($index,$value){
						$.ajax({
							type :'POST',
							url  :'<?php echo dir_root; ?>php/ajax/post_userUpdate.php?act=update_status&index='+$index+'&statVal='+$value,
							date :'',
							success:function(m){
								// Notification
								if (m == 1){
									location.reload();
									// $icon = 1;
									// $msg = '<b>Success: </b>The row of <b>"'+$('#name_'+$index).html()+'"</b> is updated';

									// if ($value == 1){
									// 	$('#statusIc_'+$index).removeClass('fa-toggle-on').addClass('fa-toggle-off').css({ 'color': '#bdbdbd' });
									// }
									// else
									// 	$('#statusIc_'+$index).removeClass('fa-toggle-off').addClass('fa-toggle-on').css({ 'color': 'green' });
								}
								else{
									$icon = 2;
									$msg = 'Failed updating to database';
								}
								popNotif_show($icon,$msg);
							}
						});
					}

				/* -----  Delete  ----- */
				function surveyDelete($sid){

					// style 'Confirm'
						$('#popBtn_confirm').css({'color': 'red'});
							
						$('#popBtn_confirm').hover(function(){
							$(this).css({'background-color': 'red','color': 'white'});
						},function(){
							$(this).css({'background-color': '','color': 'red'});
						});

					// style 'Cancel'
						$('#popBtn_cancel').hover(function(){
							$(this).css({'background-color': 'white','color': 'unset','font-weight': 'bold'});
						},function(){
							$(this).css({'background-color': '','color': '','font-weight': ''});
						});

					// show pop-alert
						$title = 'Remove Teacher?<br><br>';
						$msg = 'Are you sure to remove teacher: <b>'+$('#name_'+$sid).html()+'</b> from this school?<br><br>';
						$msg += 'Removing will turn the teacher account to participant and the account will no longer be assigned to any school.';
						$confirm = 'Remove';
						$cancel = 'Cancel';
						$icon = 4;
					
					popAlert_show($title,$msg,$confirm,$cancel,$icon);

					$('#popBtn_confirm').click(function(){
						$.ajax({
							type :'POST',
							url  :'<?php echo dir_root; ?>php/ajax/post_teacherDelete.php?sid='+$sid,
							date :'',
							success:function(m){
								if (m == 1){
									location.reload();
								}
								else{
									// Notification
										$icon = 2;
										$msg = 'Failed to accomplish the command with the database';
									popNotif_show($icon,$msg);
								}
							}
						});
					});
				}

				/* -----  Add-section  ----- */
				function surveyAdd(){
					//console.log("hello");
					$('#surveyAdd_row').removeClass('ctm-hide');
					$('#btnAdd').addClass('ctm-hide');
				}
					/* -----  Add (Teacher)  ----- */
					$('#newName,#newUrl').keypress(function(e){
						if(e.which == 13){  // the enter key code
							surveyAdd_toDb();
						}
					});
					function surveyAdd_toDb(){
						$newName = $('#newName').val();
						$newUrl = $('#newUrl').val();
						$order_num = '<? echo $order_num?>';

						// (validate) 'Survey-Name' cannot be empty
						if ($newName == ''){
							
							// style 'Confirm'
								$('#popBtn_confirm').css({'background-color': 'white','color': 'black','font-weight': 'normal'});

								$('#popBtn_confirm').hover(function(){
									$(this).css({'font-weight': 'bold'});
								},function(){
									$(this).css({'font-weight': 'normal'});
								});

							// show pop-alert
								$title = 'Enter Username';
								$msg = 'Please enter the <b>"Username"</b> to search in database';
								$confirm = 'Okay';
								$cancel = 'Cancel';
								$icon = 3;

							popAlert_btnSingle();
							popAlert_show($title,$msg,$confirm,$cancel,$icon);
						}
						else{
							$.ajax({
								type :'POST',
								url  :'<?php echo dir_root; ?>php/ajax/check_username_forTeacher.php?username='+$newName+'&sid=<?php echo $db_sid; ?>',
								date :'',
								success:function(html){
									// alert(html);
									console.log(html);
									if (html == 1){
										
										$title = 'Username Available and created successfully';
										$msg = $newName+ ' is created in database';
										$confirm = 'Okay';
										$cancel = 'Cancel';
										$icon = 1;
										popAlert_btnSingle();
										popAlert_show($title,$msg,$confirm,$cancel,$icon);

										$('#popBtn_confirm').click(function(){
											location.reload();
										});
									}
									else if (html == 0){
										$title = 'Username Not Available';
										$msg = $newName+ ' Already Taken';
										$confirm = 'Okay';
										$cancel = 'Cancel';
										$icon = 3;
										popAlert_btnSingle();
										popAlert_show($title,$msg,$confirm,$cancel,$icon);
									}
								}
							});
						}
					}

					/* -----  Add (Teacher-Code)  ----- */
					function chkCode(){
						$newCode = $('#newCode').val();
						// $newUrl = $('#newUrl').val();
						$order_num = '<? echo $order_num?>';

						// style 'Confirm'
							$('#popBtn_confirm').css({'background-color': 'white','color': 'black','font-weight': 'normal'});

							$('#popBtn_confirm').hover(function(){
								$(this).css({'font-weight': 'bold'});
							},function(){
								$(this).css({'font-weight': 'normal'});
							});

						// show pop-alert
							$title = 'Confirmation<br>(Teacher) Access-Code';
							$msg = '<br>Are you sure to change or add this code to be the access-code for participant to register with?<br><br>';
							$msg += 'So anyone who entered this access-code in the registration page will be registered with a teacher account under your school.';
							$confirm = 'Confirm';
							$cancel = 'Cancel';
							$icon = 4;

						// $('alertmsg').removeClass('popMsgEl_toCenter'); // make it to left
						popAlert_show($title,$msg,$confirm,$cancel,$icon);

						$('#popBtn_confirm').click(function(){
							$.ajax({
								type :'GET',
								url  :'<?php echo dir_root; ?>php/ajax/get_codeRole.php?code='+$newCode,
								date :'',
								success:function(m){
									cResult = m.split(',');

									if ( cResult[0] != 0 ){
										// console.log(html);
										// Notification
											$icon = 2;
											$msg = 'Access-Code Exist';
										popNotif_show($icon,$msg);
									}
									else{
										// Notification
											$icon = 1;
											$msg = 'Available';
										popNotif_show($icon,$msg);

										codeAdd_toDb($newCode);
									}
								}
							});
						});
					}
						function codeAdd_toDb($newCode){
							$.ajax({
								type :'POST',
								url  :'<?php echo dir_root; ?>php/ajax/get_school_teacherCode.php?sid=<?php echo $db_sid; ?>&newCode='+$newCode,
								date :'',
								success:function(html){
									
									console.log(html);
									
									if (html == 1){
										// Notification
											$icon = 1;
											$msg = 'Success: Access-Code updated';
										popNotif_show($icon,$msg);


									}
									else{
										// Notification
											$icon = 2;
											$msg = 'Failed updating to database';
										popNotif_show($icon,$msg);
									}
								}
							});
						}

			
			/* -----  Add-section (close)  ----- */
			function surveyAdd_close(){
				$('#surveyAdd_row').addClass('ctm-hide');
				$('#btnAdd').removeClass('ctm-hide');
			}

			</script>

	</body>
</html>