Untitled

<?php
	require('../connection/databaseConnection.php');
	$connect = db_connect();
	$role_query = "SELECT role_id, role_name FROM role";
	$role = mysqli_query($connect, $role_query)->fetch_all(MYSQLI_ASSOC);

	$user_query = "SELECT user_id, username, password, role_name, active FROM user INNER JOIN role ON user.role_id = role.role_id";
	$user = mysqli_query($connect, $user_query)->fetch_all(MYSQLI_ASSOC);
?>

<!DOCTYPE html>
<html>
<head>
	<title>Cental Control | Create a user</title>
	<script type="text/javascript" src="../js/jquery-3.2.1.js"></script>
</head>
<body>
	<form action="../user/create.php" method="POST">
		<label>Username: </label>
		<input type="text" required name="username">
		<input type="password" required name="password">
		<select name="role">
			<?php

				foreach ($role as $value) {
					$id = $value['role_id'];
					$role_name = $value['role_name'];
					echo "<option value='$id'>$role_name</option>";
				}
			 ?>
		</select>
		<button type="submit">Submit</button>
	</form>
<br><br><br>
UPDATE<form action="../user/edit.php" method="POST">


		<input type="text" name="user_id">
		<input type="text" required name="username">
		<input type="password" required name="password">
		<select name="role">
			<?php

				foreach ($role as $value) {
					$id = $value['role_id'];
					$role_name = $value['role_name'];
					echo "<option value='$id'>$role_name</option>";
				}
			 ?>
		</select>
		<input type="text" name="active">
		<button type="submit">Submit</button>
	</form>

<br><br><br>
DELETE<form action="../user/delete.php" method="POST">


		<input type="text" name="user_id">
		<button type="submit">Submit</button>
	</form>
<br><br><br>
-----------------
	<table style="border: 1px solid gray">
		<thead>
			<tr>
				<th></th>
				<th>USER ID</th>
				<th>USERNAME</th>
				<th>PASSWORD</th>
				<th>ROLE NAME</th>
				<th>ACTIVE</th>
			</tr>
		</thead>
		<tbody>
			<?php
				foreach ($user as $users) {
					$user_id = $users['user_id'];
					$username = $users['username'];
					$password = $users['password'];
					$rolename = $users['role_name'];
					$active = $users['active'];


					echo "<tr>";
						echo "<form name='editform' id='editform'>";
						echo "<td><input type='checkbox' name='check' data-id='$user_id' value='$user_id'></td>";
						echo "<td><span>$user_id</span><input id='uid' type='hidden' disabled value='$user_id'></td>";
						echo "<td><span>$username</span><input name='username' id='uuname' type='hidden' value='$username'></td>";
						echo "<td><span>$password</span><input name='password' id='upass' type='hidden' value='$password'></td>";
						echo "<td><span>$rolename</span><select id='rolename' name='rolename' style='display: none;'>";
						 	foreach ($role as $value) {
								$id = $value['role_id'];
								$role_name = $value['role_name'];
								echo "<option value='$id'>$role_name</option>";
							}
						echo "</select></td>";
						echo "<td><span>$active</span><input name='active' id='uactive' type='hidden'></td>";
						echo "<td><button id='editBtn' name='editBtn' type='button' data-id='$user_id' class='edit-btn' >EDIT</button><button id='confirmBtn' name='confirmBtn' hidden type='button' data-id='$user_id' class='confirm-btn' >CONFIRM</button></td>";
						echo "<td><button id='deleteBtn' name='deleteBtn' type='button' data-id='$user_id' class='delete-btn'>DELETE</button></td>";
						echo "</form>";
				}	echo "</tr>";
			?>
		</tbody>
	</table>

	<script type="text/javascript">
		$(document).ready(function(){
			//Primary Button Confirm
			$('.edit-btn').on('click', function(){

				var row = $(this).parent().parent();
				var toTrim = $(row).find('#editBtn').html();
				var trimmed = $.trim(toTrim);
				//console.log(trimmed);

				var user_id = $('#uid').val();
				var username = $('#uuname').val();
				var password = $('#upass').val();
				var rolename = $('#rolename').val();
				var active = $('#uactive').val();


				if(trimmed == 'EDIT') {
					$(row).find('span').css('display', 'none');
					$(row).find('input[type="hidden"]').attr('type', 'text');
					$(row).find('select').show();
					$('table button').attr('disabled', 'disabled');
					$(row).find('#editBtn').html('CONFIRM').removeAttr('disabled').css('color', 'green');
					$(row).find('#deleteBtn').html('CANCEL').removeAttr('disabled');
				}
				else {
						$.ajax ({
							type: "POST",
							url: "edit.php",
							data: {user_id: user_id, username: username, password: password, rolename: rolename, active: active },
							success: function(result) {
								var result = JSON.parse(result);
								if(result.status == 'success') {
									alert(result.message);
								}
							}
						});
				}
			});

			$('.confirm-btn').on('click', function(){
				alert('deleted');
			});


			//Secondary Button Cancel Action
			$('.delete-btn').on('click', function(){
				var row = $(this).parent().parent();
				var toTrim = $(row).find('#deleteBtn').html();
				var trimmed = $.trim(toTrim);
				console.log(trimmed);
				if(trimmed == 'CANCEL') {
					var row = $(this).parent().parent();
					$(row).find('span').show();
					$(row).find('input[type="text"]').attr('type', 'hidden');
					$(row).find('select').css('display', 'none');
					$('table button').removeAttr('disabled');
					$(row).find('#confirmBtn').hide();
					$(row).find('#editBtn').show().html('EDIT').removeAttr('disabled');
					$(row).find('#deleteBtn').html($.trim('DELETE')).removeAttr('disabled');
				}
				else {
					$('table button').attr('disabled', 'disabled');
					$(row).find('#editBtn').hide();
					$(row).find('#confirmBtn').show().removeAttr('disabled');
					$(row).find('#deleteBtn').html('CANCEL').removeAttr('disabled');
				}


			});


		});
	</script>
</body>
</html>