<?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>Classes | 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" /> -->

			<!-- 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*/
				}

				select{
					height: 2rem;
					padding: 0 .5rem;
					border-radius: 5px;
				    border-color: #9f9f9f !important;
					cursor: pointer;
				}
					.select-wrapper{
						/*display: inline-block;*/
						/*width: 80%;*/
					}
					.select-wrapper::before{
						width: 2rem; height: 2rem;
						line-height: 2rem;
					}

				#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_Code{
					display: inline-block !important;
					width: 90% !important;
				}

				#classAdd_row{
					display: flex;
					padding: 20px;
				}
					.classAdd_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){
						#classAdd_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 Class</h2>
					</header>
				</div>
			</section>

		<!-- Content -->
			<section id="two" class="wrapper style2">
				<div class="inner">
					
					<div class="box ctm-box">
						<div class="content">

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

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

					                	if ($_SESSION['accountType'] > 0 && $_SESSION['accountType'] < 4){ // Student, Teacher, School-Admin
					                		$result_role = $conn->query("SELECT * FROM user_account WHERE user_id = '".$_SESSION['userID']."' ORDER BY class_id ASC");

					                		if ($result_role){
					                			while ( $row = $result_role->fetch_assoc() ){
					                				echo "<script>console.log('data');</script>";
					                				if ($_SESSION['accountType'] == 2){ // Teacher
					                					$sql_where = "WHERE school_class.school_id = '".$row['school_id']."' AND school_class.teacher_id = '".$_SESSION['userID']."'";
					                				}
					                				else if ($_SESSION['accountType'] == 3){ // School-Admin
					                					$sql_where = "WHERE school_class.school_id = '".$row['school_id']."'";
					                				}
					                			}
					                		}
					                	}

					                	// $result = $conn->query("SELECT school_id AS 'sID', class_id AS 'ID', class_name AS 'Class Name', specific_classCode AS 'Access Code', teacher_id AS 'Teacher (username)' FROM school_class ".$sql_where." ORDER BY class_id ASC");
					                	$result = $conn->query("SELECT school_class.school_id AS 'sID', school_class.class_id AS 'ID', IFNULL(school_name,'Not Assigned') AS 'School', school_class.teacher_id AS 'Teacher (username)', school_class.class_name AS 'Class Name', school_class.specific_classCode AS 'Access Code' 
					                		FROM school_class 
					                		INNER JOIN school on school_class.school_id = school.school_id 
					                		".$sql_where." 
					                		ORDER BY class_id ASC");

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


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


					                	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>
						                                    <?php
						                                    	foreach($table['fields'] as $field){
						                                    		if ($field->name != 'sID'){
						                                    ?>
						                                        		<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 == 'sID'){
								                                    			$index_school = $value;
								                                    		}

								                                    		if ($key == 'ID'){
								                                    			$index = $value;
								                                    		}

								                                    		if ($key != 'sID'){
								                                    ?>
									                                    		<td>
																					<?php
																						if ($key == 'Teacher (username)'){
																							
																							$teacherIndex = 0;
																							$db_tid = '';
																							$db_tUsername = '';

																							// get Teacher-Name (relevant to class)
																							$result = $conn->query("SELECT * FROM user_account WHERE user_id = ".$value);
																							$row = $result->fetch_assoc();
																								$db_tid = $row['user_id'];
																								$db_tUsername = $row['username'];

																							// check if account is 'researcher' or 'super-admin' | id yes, show
																							if ( $_SESSION['accountType'] > 2 ){
																								$section_display = '';
																							}
																							else{
																								$section_display = 'display: none;';
																							}

																					?>
																							<div>
																								<!-- label -->
																								<div id="teacherLabelRow_<?php echo $index; ?>">
																									<div id="teacherLabel_<?php echo $index; ?>" style="display: inline-block; margin: 0 !important;"><?php echo $db_tUsername; ?></div>
																									<i id="teacherIc_<?php echo $index; ?>" class="fa fa-pencil" style="<?php echo $section_display; ?> padding-left: 2px; cursor: pointer;"
																										onclick="selectEdit('teacher','<?php echo $index; ?>')"></i>
																								</div>
																								<!-- Dropdown -->
																								<div id="teacherRow_<?php echo $index; ?>" class="select-wrapper ctm-disable" style="display: none;">
																									<select id="teacher_<?php echo $index; ?>">
																										<!-- <option value="0">---</option> -->
																					<?php
																										$teacherIndex = 0;
																										echo '<script>console.log('.$index_school.')</script>';
																										$result = $conn->query("SELECT * FROM user_account WHERE accountType = 2 AND school_id = ".$index_school);

																										while ( $row = $result->fetch_assoc() ){
																											$teacherIndex++;

																											$typeSelected = $row['user_id'] == $value ? 'selected="true"' : '';
																					?>
																											<option value="<?php echo $row['user_id'] ?>" <?php echo $typeSelected ?> username="<?php echo $row['username'] ?>" ><?php echo $teacherIndex.'. '.$row['username'] ?></option>
																					<?php
																										}
																					?>
																									</select>
																								</div>
																							</div>
									                                    			<?php
									                                    				}
									                                    				else if ($key == 'Class Name'){
									                                    			?>
										                                    			<!-- 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="classEdit('<?php echo $index; ?>')"></i>
																							</div>
																						<!-- txtfield -->
																							<div id="nameTField_row<?php echo $index; ?>" class="ctm-toCenter" style="display: none;">
																								<input id="txtfield_<?php echo $index; ?>" name="txtfield_<?php echo $index; ?>" type="text" value="<?php echo $value; ?>" />
																							</div>
																					<?php
																						}
																						else if ($key == 'Access Code'){
																					?>
																							<input id="class_<?php echo $index; ?>" name="class_<?php echo $index; ?>" type="text" class="ctm-disable tField_Code" value="" placeholder="<?php echo $value; ?>" />
																							<i id="codeIc_<?php echo $index; ?>" class="fa fa-pencil" style="padding-left: 2px; cursor: pointer;"
																								onclick="codeEdit('<?php echo $index; ?>')"></i>
																					<?php
																						}
																						else
																							echo $value;
																					?>
									                                    		</td>
								                                    <?php
								                                    		}
								                                    	}
								                                    ?>

																	<!-- Delete -->
																	<td id="btnDel" class="1u 1u$(xsmall)" onclick="classDelete('<?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="classAdd()">
										<iconPlus><i class="fa fa-plus-circle"></i>   add class</iconPlus>
									</div>

									<!-- ==== New-Class ==== -->
										<div id="classAdd_row" class="animated fadeInDown ctm-hide">
											<div class="3u 12u$(medium)"><h2>New Class</h2></div>
											<div class="9u 9u$(medium) classAdd_rowInner">
												<?php
													if ($_SESSION['accountType'] == 5){
												?>
													<!-- School -->
														<div class="4u 12u$(medium)" style="padding: 10px;">
															<div class=""><label for="newSchool">School</label></div>
															<div class="select-wrapper">
																<select id="newSchool">
																	<option value="0">---</option>
																	<?php
																		$result = $conn->query("SELECT * FROM school");
																		if($result) {
																			while ( $row = $result->fetch_assoc() ){
																	?>
																				<option value="<?php echo $row['school_id'] ?>"><?php echo $row['school_id'].'. '.$row['school_name'] ?></option>
																	<?php
																			}
																		}
																	?>
																</select>
															</div>
														</div>
												<?php
													}

													if ($_SESSION['accountType'] == 5 || $_SESSION['accountType'] == 3){
												?>
													<!-- Teacher -->
														<div class="4u 12u$(medium)" style="padding: 10px;">
															<div class=""><label for="newTeacher">Teacher</label></div>
															<div class="select-wrapper">
																<select id="newTeacher">
																	<option value="0">---</option>
																</select>
															</div>
														</div>
												<?php
													}
												?>

												<!-- Class-Name -->
													<div class="4u 12u$(medium)" style="padding: 10px;">
														<div class=""><label for="newClass">Class-name</label></div>
														<input id="newClass" name="newClass" type="text" style="border-color: #9f9f9f; border-radius: 5px;" value="" />
													</div>
														
												<!-- Access Code -->
													<div class="4u 12u$(medium)" style="padding: 10px;">
														<div class=""><label for="newCode">Access-Code</label></div>
														<input id="newCode" name="newCode" type="text" class="" style="border-color: #9f9f9f; border-radius: 5px;" value="" placeholder="" />
													</div>

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

												<!-- ==== (Close) button ==== -->
													<div id="btnClose"><i class="fa fa-times-circle-o" style="font-size: 32px; color: #ff00009e;" onclick="classAdd_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: 5
	            });
	        });
		</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'); ?>

		<!-- Scripts (custom) -->
			<script type="text/javascript">
				/* -----  Edit-Name  ----- */
				function classEdit($sid){
					// hide 'label'
					$('#nameRow_'+$sid).hide();
					// show 'txtfield'
					$('#nameTField_row'+$sid).show();
					// edit in 'txtfield'
					$('#txtfield_'+$sid).focus();


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

				}
						function updateName($sid){
							$newClass = $('#txtfield_'+$sid).val();
							$.ajax({
								type :'POST',
								url  :'<?php echo dir_root; ?>php/ajax/post_classUpdate.php?act=update_sName&sid='+$sid+'&sName='+$newClass,
								date :'',
								success:function(m){
									// hide 'txtfield'
									$('#nameTField_row'+$sid).hide();
									// update 'label'
									$nameVal = $('#txtfield_'+$sid).val();
									$('#name_'+$sid).text($nameVal);
									// show 'label'
									$('#nameRow_'+$sid).show();

									// Notification
										$icon = 1;
										$msg = '"Class-Name" is updated';
									popNotif_show($icon,$msg);
								}
							});
						}

				/* -----  Edit-Code  ----- */
				var cResult = '';
				var init_codeVal = '';

				function codeEdit($sid){
					// hide 'icon'
					$('#codeIc_'+$sid).addClass('ctm-disable');
					// enable 'txtfield'
					$('#class_'+$sid).removeClass('ctm-disable').focus().val($('#class_'+$sid).attr('placeholder'));

					init_codeVal = $('#class_'+$sid).val();

						$('#class_'+$sid).focusout(function(){  // click outside txtfield
							chkCode($sid);
						});
						$('#class_'+$sid).keypress(function(e){
							if(e.which == 13){  // the enter key code
								$('#class_'+$sid).blur();
							}
						});
				}
					function chkCode($sid){
						var rCode_val = $('#class_'+$sid).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 ){
									updateCode($sid);
								}
								else{
									// console.log(init_codeVal+'||'+rCode_val);

									if (init_codeVal == rCode_val){
										$('#class_'+$sid).attr('placeholder', rCode_val);
										$('#codeIc_'+$sid).removeClass('ctm-disable');
										$('#class_'+$sid).addClass('ctm-disable');
									}
									else{
										// Notification
											$icon = 2;
											$msg = 'Access-Code: exist';
										popNotif_show($icon,$msg);
									}
								}
							}
						});
					}
						function updateCode($sid){
							$newCode = $('#class_'+$sid).val();

							$.ajax({
								type :'POST',
								url  :'<?php echo dir_root; ?>php/ajax/post_classUpdate.php?act=update_sCode&sid='+$sid+'&sCode='+$newCode,
								date :'',
								success:function(m){

									if (m == 1){
										// Notification
											$icon = 1;
											$msg = '"Access-Code" is updated';
										popNotif_show($icon,$msg);

										$('#class_'+$sid).attr('placeholder', $newCode);
										$('#codeIc_'+$sid).removeClass('ctm-disable');
										$('#class_'+$sid).addClass('ctm-disable');
									}
								}
							});
						}

				/* -----  Edit-Teacher  ----- */
				function selectEdit($cHead,$index){
					// hide 'label'
					$('#'+$cHead+'LabelRow_'+$index).hide();
					// enable 'select-row'
					$('#'+$cHead+'Row_'+$index).removeClass('ctm-disable').show();
					// focus on 'select'
					$('#'+$cHead+'_'+$index).focus();

						$('#'+$cHead+'_'+$index).blur(function(){
							$('#'+$cHead+'Row_'+$index).hide();
							$('#'+$cHead+'LabelRow_'+$index).show();
						});

						$('#'+$cHead+'_'+$index).change(function(){
							// show pop-alert
								$title = 'Class Assign to '+$('#'+$cHead+' option:selected').attr('username')+'?';
								$msg = 'clicking "Delete" will permanently delete the class';
								$confirm = 'Delete';
								$cancel = 'Cancel';
								$icon = 0;
							
							popAlert_show($title,$msg,$confirm,$cancel,$icon);
						});
				}

				/* -----  Delete  ----- */
				function classDelete($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 Class?<br><br>';
						$msg = 'Are you sure to remove class: <b>'+$('#name_'+$sid).html()+'</b>?<br><br>';
						$msg += 'Removing is not invertible, and all students will no longer be assigned to this class!';
						$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_classDelete.php?sid='+$sid,
							date :'',
							success:function(m){
								location.reload();
							}
						});
					});
				}

				/* -----  Add-section  ----- */
				function classAdd(){
					$('#classAdd_row').removeClass('ctm-hide');
					$('#btnAdd').addClass('ctm-hide');
				}
					/* -----  Add-Teacher  ----- */
					<?php
						if ($_SESSION['accountType'] == 2 || $_SESSION['accountType'] == 3){
					?>
							$('#newSchool').val('<?php echo $index_school ?>');
							getTeacher_fromDb();
					<?php
						}
					?>

					$('#newSchool').change(function(){
						getTeacher_fromDb();
					});
						function getTeacher_fromDb($sid){
							$.ajax({
								type :'POST',
								url  :'<?php echo dir_root; ?>php/ajax/get_classTeacher.php?sid='+$('#newSchool').val(),
								dataType :'json',
								success:function(m){
									console.log(m);
									if (m.length > 0){
										$('#newTeacher>option[value=0]').siblings('option').remove();

										$.each(m, function(key, value){
											var str = "<option value='"+this.tID+"'>"+this.tIndex+". "+this.tName+"</option>";
											$('#newTeacher').append(str);
										});
									}
									else{
										// Notification
											$icon = 2;
											$msg = 'Failed to load teacher from database.';
										popNotif_show($icon,$msg);
									}
								}
							});
						}

					/* -----  Add  ----- */
					$('#newClass,#newCode').keypress(function(e){
						if(e.which == 13){  // the enter key code
							classAdd_toDb();
						}
					});
					function classAdd_toDb(){
						$newSchool = $('#newSchool').val();
						$newTeacher = $('#newTeacher').val();
						$newClass = $('#newClass').val();
						$newCode = $('#newCode').val();

						<?php
							if ($_SESSION['accountType'] == 2 || $_SESSION['accountType'] == 3){
						?>
								$newSchool = '<?php echo $index_school ?>';
						<?php
							}
						?>

						<?php
						if ($_SESSION['accountType'] == 2){
						?>
								$newTeacher = '<?php echo $_SESSION['userID'] ?>';
						<?php
							}
						?>

						// (validate) 'Class-Name' cannot be empty
						if ($newSchool == 0){
							
							// 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 = 'Choose School';
								$msg = 'Please choose a "school" to add new class';
								$confirm = 'Okay';
								$cancel = 'Cancel';
								$icon = 3;

							popAlert_btnSingle();
							popAlert_show($title,$msg,$confirm,$cancel,$icon);
						}
						else if ($newTeacher == 0){
							
							// 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 = 'Choose Teacher';
								$msg = 'Please choose a "teacher" to assign the new class';
								$confirm = 'Okay';
								$cancel = 'Cancel';
								$icon = 3;

							popAlert_btnSingle();
							popAlert_show($title,$msg,$confirm,$cancel,$icon);
						}
						else if ($newClass == ''){
							
							// 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 Class-Name';
								$msg = 'Please enter the "class-name" to add new class';
								$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/post_classAdd.php?newSchool='+$newSchool+'&newTeacher='+$newTeacher+'&newClass='+$newClass+'&newCode='+$newCode,
								date :'',
								success:function(m){
									console.log(m);
									if (m == 1){
										location.reload();
									}
									else{
										// Notification
											$icon = 2;
											$msg = 'Failed to add class to database,<br>"Access Code" might have already exist';
										popNotif_show($icon,$msg);
									}
								}
							});
						}
					}
				/* -----  Add-section (close)  ----- */
				function classAdd_close(){
					$('#classAdd_row').addClass('ctm-hide');
					$('#btnAdd').removeClass('ctm-hide');
				}
			</script>

	</body>
</html>