@page
@using AfRApay.Web.Backend.Database
@model IndexModel
@{
	ViewData["Title"] = "Index";
	var db = new DatabaseContext();
}

@section Header {
	<link rel="stylesheet" href="~/lib/datatables/dataTables.bootstrap5.min.css"/>
}

@section HeaderAddUser {
	<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#add_user_modal">
		Add User
	</button>
}
@section HeaderAddSearch {
	<input
		type="search"
		class="form-control me-2 align-self-center"
		placeholder="Search"
		oninput="liveSearch()"
		id="searchbox"
		style="width: 40vw;"
	>
}

@section Scripts {
	<script>
	$(() => {
        setInterval(() => {
			fetch("/").then(res => {
				res.text().then(text => {
					let dummyDOM = $('<div></div>');
					dummyDOM.html(text);
					let newTableContents = $('#users>', dummyDOM);
					$('#users').html(newTableContents);
				})
			});
        }, 1000);
	});
	
	function liveSearch() {
    	let cards = document.getElementsByClassName("user-card-container")
    	let search_query = document.getElementById("searchbox").value;
    	for (var i = 0; i < cards.length; i++) {
    		// If the text is within the card...
    		if(cards[i].innerText.toLowerCase()
    		// ...and the text matches the search query...
    		.includes(search_query.toLowerCase())) {
    			// ...remove the `.is-hidden` class.
    			cards[i].classList.remove("is-hidden");
    		} else {
    		// Otherwise, add the class.
    		cards[i].classList.add("is-hidden");
    		}
		}
	}
	</script>
}

<!-- Modal dialog for adding a user -->
<div class="modal fade" id="add_user_modal" tabindex="-1" aria-labelledby="add_user_modal_label" aria-hidden="true">
	<div class="modal-dialog modal-dialog-centered">
		<div class="modal-content">
			<div class="modal-header">
				<h5 class="modal-title" id="add_user_modal_label">Add User</h5>
				<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
			</div>
				<div class="modal-body">
					<form method="POST" id="add_user">
							<label for="nickname" class="form-label">Nickname</label>
							<input type="text" maxlength="10" class="form-control" id="nickname" name="nickname" placeholder="nick" required autofocus>
					</form>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-lg btn-secondary" data-bs-dismiss="modal">Cancel</button>
					<button type="submit" form="add_user" class="btn btn-lg btn-primary" name="action" value="add_user">Save</button>
			</div>
		</div>
	</div>
</div>

<div class="row row-cols-auto justify-content-start g-0" id="users">
	@foreach (var user in db.Users.OrderBy(p => p.Nickname.ToLower())) {
		<div class="col user-card-container" id="user_@user.Id">
			<a href="/EditUser/@user.Id">
				<div class="d-flex flex-column align-items-center justify-content-center bg-light shadow-sm user-card">
						<div class="text-dark">@user.Nickname</div>
						@if (user.Balance < 0) {
							<div class ="balance-neg">@($"{user.Balance / 100M:C}")</div>
						}
						else {
							<div class ="balance-pos">@($"{user.Balance / 100M:C}")</div>
						}
				</div>
			</a>
		</div>
	}
</div>