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

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

				#search_survey{
					height: 100%;
					float: right;
				}
					#search_survey label, #search_survey input{
						display: inline;
						width: auto;
					}
						#search_survey label{
							margin-right: 4px;
						}
						#search_survey input{
							max-width: 100%;

							background-color: white;
							border-radius: .2rem;

							transition: .2s ease;
						}
							#search_survey input:focus{
								box-shadow: 0 0 5px .2px #548B54;
							}
					@media all and (max-width: 576px) {
						#search_survey{
							width: 100%;
						}
					}

				table{
					min-width: 600px;
					border-top: 1px solid #dee2e6;
				}

				table thead th{
					padding-top: .75rem;
				}

				table td{
					padding-right: 3rem;
				}

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

				#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>Site Setting</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="display: block; min-height: 40px; min-height: max-content; padding: 5px 8px; overflow: hidden;">
									<div id="search_survey">
										<label for="txtfield_search">Search: </label>
										<input id="txtfield_search" name="txtfield_search" type="text" value="" />
									</div>
								</div>

								<div style="overflow-x: auto;">
									<table>

										<thead class="animated fadeInUp">
											<tr>
												<th>Survey-Name</th>
												<th>URL</th>
											</tr>
										</thead>

										<tbody>
											<!-- ==== (Edit) Survey ==== -->
											<?php
												$order_num = 0;

												$result = $conn->query("SELECT * FROM survey ORDER BY order_id ASC;");
													if($result) {
														while ( $row = $result->fetch_assoc() ){
															$order_num++;
											?>
															<tr class="animated fadeIn">
																<!-- Survey-Name -->
																<td class="4u 4u$(xsmall)">
																	<!-- label -->
																		<div id="nameRow_<?php echo $row['order_id']; ?>">
																			<label id="name_<?php echo $row['order_id']; ?>" style="display: inline-block; margin: 0 !important;"><?php echo $row['order_id'].'. '.$row['survey_name']; ?></label>
																			<i class="fa fa-pencil" style="padding-left: 2px; cursor: pointer;" onclick="surveyEdit('<?php echo $row['order_id']; ?>')"></i>
																		</div>
																	<!-- txtfield -->
																		<div id="nameTField_row<?php echo $row['order_id']; ?>" class="ctm-toCenter" style="display: none;">
																			<input id="txtfield_<?php echo $row['order_id']; ?>" name="txtfield_<?php echo $row['order_id']; ?>" type="text" value="<?php echo $row['survey_name']; ?>" />
																		</div>
																</td>
																	
																<!-- URL -->
																<td class="8u 8u$(xsmall)">
																	<input id="url_<?php echo $row['order_id']; ?>" name="url_<?php echo $row['order_id']; ?>" type="text" class="ctm-disable tField_Url" value="" placeholder="<?php echo $row['survey_url']; ?>" />
																	<i id="icUrl_<?php echo $row['order_id']; ?>" class="fa fa-pencil" style="padding-left: 2px; cursor: pointer;"
																		onclick="urlEdit('<?php echo $row['order_id']; ?>')"></i>
																</td>

																<!-- Delete -->
																<td id="btnDel" class="8u 8u$(xsmall)" onclick="surveyDelete('<?php echo $row['survey_id']; ?>','<?php echo $row['order_id']; ?>')">
																	<i id="icDel_<?php echo $row['order_id']; ?>" class="fa fa-trash" ></i>
																</td>
																<!-- Button -->
																<!-- <td style="padding-right: .75rem;">
																	<div class="animated fadeInUp"><div class="button special" style="text-transform: unset; transform: scale(.75); border-radius: 5px;">Confirm</div></div>
																</td> -->
															</tr>
											<?php
														}
													}

													$conn->close();
											?>
										</tbody>
										<!-- <tfoot>
											<tr>
												<td colspan="2"></td>
												<td>100.00</td>
											</tr>
										</tfoot> -->
									</table>
								</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 survey</iconPlus>
									</div>

									<!-- ==== New-Survey ==== -->
										<div id="surveyAdd_row" class="animated fadeInDown ctm-hide">
											<div class="3u 12u$(medium)"><h2>New Survey</h2></div>
											<div class="9u 9u$(medium) surveyAdd_rowInner">
												<!-- Survey-Name -->
													<div class="4u 12u$(medium)" style="padding: 10px;">
														<div class=""><label for="newName">Survey-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">URL</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>
													</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'); ?>

		<!-- 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_surveyUpdate.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 = '"Survey-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_surveyUpdate.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 = '"Survey-URL" 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 survey';
						$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_surveyDelete.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 Survey-Name';
								$msg = 'Please enter the "survey-name" to add new survey';
								$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_surveyAdd.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>