<?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 Account</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='addNewAccount()'>Create User Account</button>
				</div>
			</div>
			<div class="card card-outline card-primary">
				<div class="card-header">
					<h3 class="card-title">User Account List</h3>
					<div class="card-tools">
						<button type="button" class="btn btn-tool" data-card-widget="collapse"><i class="fas fa-minus"></i></button>
						<button type="button" class="btn btn-tool" data-card-widget="remove"><i class="fas fa-remove"></i></button>
					</div>
				</div>
				<div class="card-body p-0">
					<table class="table table-striped table-bordered" id="myTable">
						<thead>                  
							<tr>
								<th style="width: 10px">#</th>
								<th style="width: 9%">Photo</th>
								<th>City</th>	
								<th>User Name</th>
								<th>Role Name</th>	
								<th>Last Login</th>	
								<th style="width: 8%;">Actions</th>
							</tr>
						</thead>
						<tbody>
						</tbody>
					</table>
				</div>
			</div>
		</div>
		<div class="modal fade" tabindex="-1" role="dialog" id="myModal">
			<div class="modal-dialog modal-lg" role="document">
				<div class="modal-content">
					<div class="modal-header">
						<h4 class="modal-title" style="font-size: 20px;">Modal title</h4>
						<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
					</div>
					<div class="modal-body">
						<center><img id="sf_img_large"/></center>
					</div>
					<div class="modal-footer">
						<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
					</div>
				</div>
			</div>
		</div>
	</section>
</div>
<?php include '../footer.php'; ?>
<script>	
$(function() {
	$("body").addClass("sidebar-collapse");
	getAll();
});

function getAll(){
	$("#myTable").find("tbody").find("tr").remove();
	$.ajax({
		url: APP_URL + "api/userlist/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 style='width: 10px'>" + (i+1) + "</td>")
				.append("<td style='width: 60px'><img src='<?=$app_url;?>api/createaccount/" + v.profile + "' style='width:60px;height:60px' onclick='showImage(this)'/></td>")	
				.append("<td>" + v.city + "</td>")
				.append("<td>" + v.username + "</td>")
				.append("<td>" + v.userrole + "</td>")
				.append("<td>" + v.last_login + "</td>")
				.append("<td style='width: 70px;white-space: nowrap;'><span type='button' class='btn btn-primary btn-sm ' onclick='changeUserRole(\"" + 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 changeUserRole(id){	
	window.location.href = APP_URL + "admin/createaccount.php?id=" + id;
}

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

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/userlist/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 showImage(obj){
	$("#sf_img_large").removeClass("rotate_90");
	var aspectRatio = $(obj).width()/$(obj).height();
	$("#sf_img_large").attr("src", $(obj).attr("src"));
	$(".modal-body img").each(function() { 
		console.log(aspectRatio);
		if(aspectRatio>1){
			$(this).addClass("rotate_90");
			$(this).css("width","50%");
			$(this).css("height","auto");
		}else{
			$(this).css("width","50%");
			$(this).css("height","auto");
		}
	});
	$(".modal-title").text($(obj).closest("tr").find("td").eq(3).text());
	$("#myModal").modal('show');

}
</script>	
