<?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>Page-name | 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" /> -->

	<?php include_once(dir_rootPHP . '_global/footer/footerCSS.php'); ?>
	<!-- 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">

	</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>Dashboard</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 Feedback</h2>

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

							<?php
							$result = $conn->query("SELECT feedback_id AS 'ID', username AS 'Username', email AS 'Email', feedbackType AS 'Feedback-Type', feedbackMessage AS 'Feedback-Message' FROM feedback ORDER BY feedback_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>
															<!--I need to continue editing from here-->
															<?php
															if ($key == 'Username') {
															?>
																<!-- label -->
																<div id="username_Row_<?php echo $index; ?>">
																	<label id="username_<?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;"></i> -->
																</div>
																<!-- onclick="usernameEdit('<?php echo $index; ?>')" -->
																<!-- txtfield -->
																<!-- <div id="username_TField_row_<?php //echo $index; 
																									?>" class="ctm-toCenter" style="display: none;">
															<input id="username_txtfield_<?php //echo $index; 
																							?>" name="username_txtfield_<?php //echo $index; 
																														?>" type="text" value="<?php //echo $value; 
																																									?>" />
														</div> -->
															<?php
															} else if ($key == 'Email') {
															?>
																<!-- label -->
																<div id="email_Row_<?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;"></i> -->
																	<!-- onclick="emailEdit('<?php //echo $index; 
																								?>')" -->
																</div>
																<!-- txtfield -->
																<!-- <div id="email_TField_row_<?php echo $index; ?>" class="ctm-toCenter" style="display: none;">
															<input id="email_txtfield_<?php echo $index; ?>" name="email_txtfield_<?php //echo $index; 
																																	?>" type="text" value="<?php //echo $value; 
																																							?>" />
														</div> -->

															<?php
															} else if ($key == 'Feedback-Type') {
															?>
																<!-- label -->
																<div id="type_Row_<?php echo $index; ?>">
																	<label id="type_<?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="typeEdit('<?php echo $index; ?>')"></i>
																</div>
																<!-- txtfield -->
																<div id="type_TField_row_<?php echo $index; ?>" class="ctm-toCenter" style="display: none;">
																	<input id="type_txtfield_<?php echo $index; ?>" name="type_txtfield_<?php echo $index; ?>" type="text" value="<?php echo $value; ?>" />
																</div>

															<?php
															} else if ($key == 'Feedback-Message') {
															?>
																<!-- label -->
																<div id="messageRow_<?php echo $index; ?>">
																	<label id="message_<?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="messageEdit('<?php echo $index; ?>')"></i>
																</div>
																<!-- txtfield -->
																<div id="message_TField_row_<?php echo $index; ?>" class="ctm-toCenter" style="display: none;">
																	<input id="message_txtfield_<?php echo $index; ?>" name="message_txtfield_<?php echo $index; ?>" type="text" value="<?php echo $value; ?>" />
																</div>

															<?php
															} else {
																echo $value;
															}
															?>
														</td>
													<?php
													}
													?>

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

						<!-- ==== New-Survey ==== -->
						<div id="surveyAdd_row" class="animated fadeInDown ctm-hide">
							<div class="3u 12u$(medium)">
								<h2>New Feedback</h2>
							</div>
							<div class="9u 9u$(medium) surveyAdd_rowInner">
								<!-- Survey-Name -->
								<!--Should probably add a dropdown list over here for type selection-->
								<div class="4u 12u$(medium)" style="padding: 10px;">
									<div class=""><label for="newName">Feedback-Type</label></div>
									<!-- <input id="newName" name="newName" type="text" style="border-color: #9f9f9f; border-radius: 5px;" value="" /> -->
									<select id="newName" name="newName" class="browser-default custom-select mb-4">
										<option value="" selected disabled>Choose option</option>
										<option value="1">Feedback</option>
										<option value="2">Report a bug</option>
										<option value="3">Feature request</option>
									</select>
								</div>

								<!-- URL -->
								<!--This section will be used to fix the message type-->
								<div class="8u 12u$(medium)" style="padding: 10px;">
									<div class=""><label for="newUrl">Feedback-Message</label></div>
									<input id="newUrl" name="newUrl" type="text" class="" style="border-color: #9f9f9f; border-radius: 5px;" value="" placeholder="Message" />
								</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="feedbackAdd_toDb()">
										<div class="button special fit" style="text-transform: unset; border-radius: 5px; margin: 0;">Submit!</div>
									</div>
								</div>

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

	<!-- Scripts (custom) -->
	<script type="text/javascript">
		$(document).ready(function() {
			$('#data_table').DataTable({
				dom: 'frtip'
			});
		});
	</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_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 Username ------*/
		// function usernameEdit($feedid){
		//     $('#username_Row_' + $feedid).hide();
		//     $('#username_TField_row_' + $feedid).show();
		//     $('#username_txtfield_' + $feedid).focus();

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

		// function updateUsername($feedid){
		//     $newName = $('#username_txtfield_' + $feedid).val();
		//     $.ajax({
		//         type: 'POST',
		//         //the link has to be updated
		//         url: '<?php //echo dir_root; 
							?>php/ajax/post_surveyUpdate.php?act=update_sName&sid=' + $sid + '&sName=' + $newName,
		//         date: '',
		//         success: function(m) {
		//             // hide 'txtfield'
		//             $('#username_TField_row_' + $sid).hide();
		//             // update 'label'
		//             $nameVal = $sid + '. ' + $('#txtfield_' + $sid).val();
		//             $('#username_' + $sid).text($nameVal);
		//             // show 'label'
		//             $('#username_Row_' + $sid).show();

		//             // Notification
		//             $icon = 1;
		//             $msg = '"Feedback\'s-Username" is updated';
		//             popNotif_show($icon, $msg);
		//         }
		//     });
		// }

		// /*------ Edit Email-----*/

		// function emailEdit($feedid){
		//     $('#email_Row_' + $feedid).hide();
		//     $('#email_TField_row_' + $feedid).show();
		//     $('#email_txtfield_' + $feedid).focus();

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

		// function updateEmail($feedid){
		//     $newName = $('#email_txtfield_' + $feedid).val();
		//     $.ajax({
		//         type: 'POST',
		//         //the link has to be updated
		//         url: '<?php// echo dir_root; ?>php/ajax/post_surveyUpdate.php?act=update_sName&sid=' + $sid + '&sName=' + $newName,
		//         date: '',
		//         success: function(m) {
		//             // hide 'txtfield'
		//             $('#email_TField_row_' + $sid).hide();
		//             // update 'label'
		//             $nameVal = $sid + '. ' + $('#txtfield_' + $sid).val();
		//             $('#email_' + $sid).text($nameVal);
		//             // show 'label'
		//             $('#email_Row_' + $sid).show();

		//             // Notification
		//             $icon = 1;
		//             $msg = '"Feedback\'s-Email" is updated';
		//             popNotif_show($icon, $msg);
		//         }
		//     });
		// }

		/*------ Edit Type -----*/

		function typeEdit($feedid) {
			$('#type_Row_' + $feedid).hide();
			$('#type_TField_row_' + $feedid).show();
			$('#type_txtfield_' + $feedid).focus();

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

		function updateType($feedid) {
			var $newName = $('#type_txtfield_' + $feedid).val();
			//alert("It is coming to updateType");
			// $.ajax({
			// 	type: 'GET',
			// 	//the link has to be updated
			// 	url: 'post_feedbackUpdate.php?act=updateType&sid=' + $sid + '&sName=' + $newName,
			// 	date: '',
			// 	success: function(m) {
			// 		alert("It comes in here too");
			// 		// hide 'txtfield'
			// 		$('#type_TField_row_' + $sid).hide();
			// 		// update 'label'
			// 		$nameVal = $sid + '. ' + $('#txtfield_' + $sid).val();
			// 		$('#type_' + $sid).text($nameVal);
			// 		// show 'label'
			// 		$('#type_Row_' + $sid).show();

			// 		// Notification
			// 		$icon = 1;
			// 		$msg = '"Feedback\'s-Type" is updated';
			// 		popNotif_show($icon, $msg);
			// 	}
			// });
			var xmlhttp = new XMLHttpRequest();
			xmlhttp.onreadystatechange = function(){
				if (this.readyState == 4 && this.status == 200) {
					$('#type_TField_row_' + $feedid).hide();
					// update 'label'
					$nameVal = $('#type_txtfield_' + $feedid).val();
					$('#type_' + $feedid).text($nameVal);
					// show 'label'
					$('#type_Row_' + $feedid).show();

					// Notification
					$icon = 1;
					$msg = '"Feedback\'s-Type" is updated';
					popNotif_show($icon, $msg);
				}
			};
			xmlhttp.open("GET","post_feedbackUpdate.php?act=updateType&sid=" + $feedid + "&sName=" + $newName , true);
    		xmlhttp.send();
		}

		/*------ Edit message----*/

		function messageEdit($feedid) {
			$('#messageRow_' + $feedid).hide();
			$('#message_TField_row_' + $feedid).show();
			$('#message_txtfield_' + $feedid).focus();

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

		function updateMessage($feedid) {
			$newName = $('#message_txtfield_' + $feedid).val();
			$.ajax({
				type: 'GET',
				//the link has to be updated
				url: 'post_feedbackUpdate.php?act=updateMessage&sid=' + $feedid + '&sName=' + $newName,
				date: '',
				success: function(m) {
					// hide 'txtfield'
					$('#message_TField_row_' + $feedid).hide();
					// update 'label'
					$nameVal =  $('#message_txtfield_' + $feedid).val();
					$('#message_' + $feedid).text($nameVal);
					// show 'label'
					$('#messageRow_' + $feedid).show();

					// Notification
					$icon = 1;
					$msg = '"Feedback\'s-Message" is updated';
					popNotif_show($icon, $msg);
				}
			});
		}

		/* -----  Delete  ----- */
		function feedbackDelete($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 feedback';
			$confirm = 'Delete';
			$cancel = 'Cancel';
			$icon = 0;

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

			$('#popBtn_confirm').click(function() {
				$.ajax({
					type: 'GET',
					url: 'post_feedbackDelete.php?sid=' + $sid,
					date: '',
					success: function(m) {
						location.reload();
					}
				});
			});
		}

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


		function feedbackAdd_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 = 'Select Feedback-Type!';
				$msg = 'Please select "feedback-type" to add new feedback';
				$confirm = 'Okay';
				$cancel = 'Cancel';
				$icon = 3;

				popAlert_btnSingle();
				popAlert_show($title, $msg, $confirm, $cancel, $icon);
			} else {
				$.ajax({
					type: 'GET',
					url: 'post_feedbackAdd.php?type=' + $newName + '&message=' + $newUrl + '&newOrder=<?php echo ($order_num); ?>',
					date: '',
					success: function(m) {
						location.reload();
					}
				});
			}
		}
		/* -----  Add-section (close)  ----- */
		function feedbackAdd_close() {
			$('#surveyAdd_row').addClass('ctm-hide');
			$('#btnAdd').removeClass('ctm-hide');
		}
	</script>
</body>

</html>