<?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>Schools | 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 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{
					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{
					display: flex;
					padding: 20px;
				}
					.surveyAdd_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{
							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 Schools</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 Schools</h2> -->

								<div style="padding: 5px; overflow-x: auto;">
									
									<?php
					                	$result = $conn->query("SELECT school_id AS 'ID', school_name AS 'School Name', specific_sAdminCode AS 'School-Admin Code' FROM school ORDER BY school_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>
						                                    <?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 == 'School-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="surveyEdit('<?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 == 'StaffCode'){
																				?>
																						<input id="url_<?php echo $index; ?>" name="url_<?php echo $index; ?>" type="text" class="ctm-disable tField_Url" value="" placeholder="<?php echo $value; ?>" />
																						<i id="icUrl_<?php echo $index; ?>" class="fa fa-pencil" style="padding-left: 2px; cursor: pointer;"
																							onclick="urlEdit('<?php echo $index; ?>')"></i>
																				<?php
																					}
																					else
																						echo $value;
																				?>
								                                    		</td>
								                                    <?php
								                                    	}
								                                    ?>

																	<!-- Delete -->
																	<td id="btnDel" class="1u 1u$(xsmall)" onclick="surveyDelete('<?php echo $index; ?>','<?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 School</iconPlus>
									</div>

									<!-- ==== New-Survey ==== -->
										<div id="surveyAdd_row" class="animated fadeInDown ctm-hide">
											<div class="3u 12u$(medium)"><h2>New School</h2></div>
											<div class="9u 9u$(medium) surveyAdd_rowInner">
												<!-- Survey-Name -->
													<div class="4u 12u$(medium)" style="padding: 10px;">
														<div class=""><label for="newName">School-name</label></div>
														<input id="newName" name="newName" type="text" style="border-color: #9f9f9f; border-radius: 5px;" value="" />
													</div>
														
												<!-- URL -->
													<div class="8u 12u$(medium)" style="padding: 10px;">
														<div class=""><label for="newUrl">StaffCode</label></div>
														<input id="newUrl" name="newUrl" 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="surveyAdd_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="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: 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 surveyEdit($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){
							$newName = $('#txtfield_'+$sid).val();
							$.ajax({
								type :'POST',
								url  :'<?php echo dir_root; ?>php/ajax/post_schoolUpdate.php?act=update_sName&sid='+$sid+'&sName='+$newName,
								date :'',
								success:function(m){
									// hide 'txtfield'
									$('#nameTField_row'+$sid).hide();
									// update 'label'
									$nameVal = $sid+'. '+$('#txtfield_'+$sid).val();
									$('#name_'+$sid).text($nameVal);
									// show 'label'
									$('#nameRow_'+$sid).show();

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

				/* -----  Edit-Url  ----- */
				function urlEdit($sid){
					// hide 'icon'
					$('#icUrl_'+$sid).addClass('ctm-disable');
					// enable 'txtfield'
					$('#url_'+$sid).removeClass('ctm-disable').focus().val($('#url_'+$sid).attr('placeholder'));

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

							$.ajax({
								type :'POST',
								url  :'<?php echo dir_root; ?>php/ajax/post_schoolUpdate.php?act=update_sUrl&sid='+$sid+'&sUrl='+$newUrl,
								date :'',
								success:function(m){
									$('#url_'+$sid).attr('placeholder', $newUrl);
									$('#icUrl_'+$sid).removeClass('ctm-disable');
									$('#url_'+$sid).addClass('ctm-disable');

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

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

					// 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 = 'Are you sure?';
						$msg = 'clicking "Delete" will permanently delete the school';
						$confirm = 'Delete';
						$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_schoolDelete.php?sid='+$sid+'&sOrder='+$sOrder,
							date :'',
							success:function(m){
								location.reload();
							}
						});
					});
				}

				/* -----  Add-section  ----- */
				function surveyAdd(){
					$('#surveyAdd_row').removeClass('ctm-hide');
					$('#btnAdd').addClass('ctm-hide');
				}
					/* -----  Add  ----- */
					$('#newName,#newUrl').keypress(function(e){
						if(e.which == 13){  // the enter key code
							surveyAdd_toDb();
						}
					});
					function surveyAdd_toDb(){
						$newName = $('#newName').val();
						$newUrl = $('#newUrl').val();

						// (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 School-Name';
								$msg = 'Please enter the "school-name" to add new school';
								$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_schoolAdd.php?newName='+$newName+'&newUrl='+$newUrl+'&newOrder=<?php echo($order_num); ?>',
								date :'',
								success:function(m){
									location.reload();
								}
							});
						}
					}
			/* -----  Add-section (close)  ----- */
			function surveyAdd_close(){
				$('#surveyAdd_row').addClass('ctm-hide');
				$('#btnAdd').removeClass('ctm-hide');
			}

			</script>

	</body>
</html>