<?php include '../header.php'; ?> 
<?php include '../sidemenu.php'; ?> 
<div class="content-wrapper">
	<section class="content-header">
		<div class="container-fluid">
			<div class="row mb-2">
					<h1>User Role</h1>
			</div>
		</div>
	</section>
	<section class="content">
		<div class="container-fluid">
			<div class="card card-outline card-primary">
				<div class="card-body">
					<button type="button" class="btn btn-success btn-md" onclick='addNewRole()'>Create User Role</button>
				</div>
			</div>
			<div class="card card-outline card-primary">
				<div class="card-header">
					<h3 class="card-title">User Role List</h3>
				</div>
				<div class="card-body p-0 table-responsive">
					<table class="table table-striped table-bordered" id="myTable" >
						<thead>                  
							<tr>
								<th style="width: 4%;">#</th>
								<th>Role Name</th>
								<th style="width: 8%;">Actions</th>
							</tr>
						</thead>
						<tbody>
						</tbody>
					</table>
				</div>
			</div>
		</div>
	</section>
</div>

<?php include '../footer.php'; ?>
<script>
$(function() {
	// $('[data-widget="pushmenu"]').PushMenu('toggle');
	$('body').addClass('sidebar-collapse');
	getAll();
});

function getAll(){
	$("#myTable").find("tbody").find("tr").remove();
	$.ajax({
		url: APP_URL + "api/createrole/get_all_rows.php"
	}).done(function(data) {
		console.log(data);
		$.each(data.records, function(i, v) {
			console.log(v);
			$("#myTable").find("tbody")
			.append($('<tr>')
				.append("<td>" + (i+1) + "</td>")
				.append("<td>" + v.rolename + "</td>")
				.append("<td style='width: 70px;white-space: nowrap;'><span type='button' class='btn btn-primary btn-sm ' onclick='editUserRole(\"" + v.id + "\", this)' style='padding: 0px 8px; min-width: 20px;' title='Edit'><i class='fas fa-edit'></i> </span> <span type='button' class='btn btn-danger btn-sm' onclick='del(\"" + v.id + "\",this)' style='padding: 0px 8px; min-width: 20px;' title='Delete'><i class='fas fa-trash'></i></span></td>")
				)
		});
	});
}

function del(id,obj){
	bootbox.confirm({
		message: "<h4>Are you sure that you want to delete?</h4>",
		buttons: {
			confirm: {
				label: '<span class="glyphicon glyphicon-ok"></span> Yes',
				className: 'btn-danger'
			},
			cancel: {
				label: '<span class="glyphicon glyphicon-remove"></span> No',
				className: 'btn-primary'
			}
		},
		callback: function (result) {
			if(result){
				$.ajax({
					type: "POST",
					url: APP_URL + "api/createrole/delete.php",
					data: JSON.stringify({ id: id }),
					success: function(data){
						if(data=="deleted"){
							$(obj).parent().parent().remove();
						}else{
							bootbox.alert("Error on server side.");
						}
					}
				});
			}
		}
	});
}

function editUserRole(id){
	window.location.href = APP_URL + "admin/userrole.php?id=" + id;
}

function addNewRole(){
	window.location.href = APP_URL + "admin/userrole.php";
}

</script>	
