<% layout('layouts/boilerplate') %>
<nav aria-label="breadcrumb">
	<ol class="breadcrumb small">
		<li class="breadcrumb-item"><a href="/admin/users" class="link-dark">Manage Users</a></li>
		<li class="breadcrumb-item active" aria-current="page">
			<%= user.firstname %>
			<%= user.surname %>
		</li>
	</ol>
</nav>
<div class="card shadow py-3 px-3 mb-3">
	<div class="card-header bg-white mb-3">
		<h4>Edit User</h4>
	</div>
	<div class="card-body">
		<form action="/admin/users/<%= user._id %>" method="POST">
			<div class="row">
				<div class="col">
					<div class="mb-3">
						<div class="row">
							<div class="col">
								<label for="firstname">Firstname</label>
								<input type="text" class="form-control" id="firstname" name="firstname" value="<%= user.firstname %>">
							</div>
							<div class="col">
								<label for="firstname">Surname</label>
								<input type="text" class="form-control" id="surname" name="surname" value="<%= user.surname %>">
							</div>
						</div>
					</div>
					<div class="mb-3">
						<label for="email">E-mail Address</label>
						<input type="text" id="email" name="username" value="<%= user.username %>" class="form-control" autocomplete="off">
					</div>
					<% if (user.googleId || user.facebookId) { %>
					<div class="mb-3">
						<% if (user.googleId) { %>
						<a href="#" class="btn btn-outline-dark"><img height="25px" class="my-0 me-2" src="/img/web_light_sq_ctn@4x.png">Connected with Google</a>
						<%} %>
						<% if (user.facebookId) { %><a href="#" class="btn btn-outline-primary"><i class="bi bi-facebook me-2"></i>Connected with Facebook</a>
						<% } %>
					</div>
					<% } %>
					<div class="mb-3">
						<button class="btn btn-success">Update</button>
						<% if (!user.googleId && !user.facebookId && user.role != 'superAdmin') { %>
						<a href="#" onclick="document.getElementById('resetPassword').submit()" class="btn btn-secondary">Reset Password</a>
						<% } %>
						<% if ((user.role != 'superAdmin' || currentUser.role == 'superAdmin') && user.role != 'superAdmin') { %>
						<a href="" class="btn btn-danger" data-bs-toggle="modal" data-bs-target="#deleteModal">Delete User</a>
                        <% } else { %>
                            <a href="" class="btn btn-danger disabled">Some features disabled for this user</a>
                         <% } %>
					</div>
				</div>
				<div class="col">
					<div class="mb-3">
						<div class="row">
							<div class="col">
								<label for="userRole">User Role</label>
								<select name="role" id="userRole" class="form-select">
									<option value="user" <%= user.role == 'user' ? 'selected' : '' %>>User</option>
									<option value="eventHost" <%= user.role == 'eventHost' ? 'selected' : '' %>>Event Host</option>
									<option value="systemAdmin" <%= user.role == 'systemAdmin' ? 'selected' : '' %>>Event System Admin</option>
                                    <% if (['superAdmin','admin'].includes(currentUser.role)) { %>
									<option value="admin" <%= user.role == 'admin' ? 'selected' : '' %>>Administrator</option>
                                    <% } if (currentUser.role == 'superAdmin') { %>
									<option value="superAdmin" <%= user.role == 'superAdmin' ? 'selected' : '' %>>Super Administrator</option>
                                    <% } %>
								</select>
							</div>
							<div class="col">
								<div class="row gx-1">
									<div class="col-10">
										<label for="eventSystems">Add as a System Host</label>
										<select id="eventSystems" class="form-select">
											<% for (system of eventSystems) { %>
											<option value="<%= system._id %>"><%= system.name %></option>
											<% } %>
										</select>
									</div>
									<div class="col-1 pt-4">
										<a href="#" onclick="addSystem('<%= user._id %>')" class="btn btn-success"><i class="bi bi-plus-circle-fill"></i></a>
									</div>
								</div>
								<table class="table table-striped">
									<tbody>
										<% for (system of user.eventSystems) { %>
										<tr>
											<td scope="row">
												<%= system.name %>
											</td>
											<td scope="row"><a href="#" onclick="delSystem('<%= user._id %>','<%= system._id %>')" class="link-dark"><i class="bi bi-trash"></i></a></td>
										</tr>
										<% } %>
									</tbody>
								</table>
							</div>
						</div>
					</div>
					<div class="row">
						<div class="col">
							<div class="mb-3 pt-3">
								<p class="mb-0"><i>Account Created: <%= new Date(user.dateCreated).toLocaleDateString() %></i></p>
								<p class="<%= user.character ? 'text-success' : 'text-danger' %>">
									<%= user.character ? 'Character Token Linked' : 'Character Token Unlinked' %>
								</p>
							</div>
						</div>
						<div class="col">
							<div class="row gx-1">
								<div class="col-10">
									<label for="eventHosts">Add as an Event Host</label>
									<select id="eventHosts" class="form-select">
										<% for (host of eventHosts) { %>
										<option data-img="<%= host.img %>" value="<%= host._id %>"><%= host.name %></option>
										<% } %>
									</select>
								</div>
								<div class="col-1 pt-4">
									<a href="#" onclick="addHost('<%= user._id %>')" class="btn btn-success"><i class="bi bi-plus-circle-fill"></i></a>
								</div>
							</div>
							<table class="table table-striped">
								<tbody>
									<% for (host of user.eventHosts) { %>
									<tr>
										<td scope="row">
											<%= host.name %>
										</td>
										<td scope="row"><a href="#" onclick="delHost('<%= user._id %>','<%= host._id %>')" class="link-dark"><i class="bi bi-trash"></i></a></td>
									</tr>
									<% } %>
								</tbody>
							</table>
						</div>
					</div>
				</div>
			</div>
		</form>
	</div>
</div>
<div class="modal fade" id="deleteModal" tabindex="-1" aria-labelledby="deleteModalLabel" aria-hidden="true">
	<div class="modal-dialog modal-dialog-centered">
		<div class="modal-content">
			<div class="modal-header">
				<h1 class="modal-title fs-5" id="deleteModalLabel">Delete User?</h1>
				<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
			</div>
			<div class="modal-body">
				<p>Are you sure you want to delete this user?</p>
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
				<form action="/admin/users/<%= user._id %>?_method=DELETE" method="POST">
					<button type="submit" class="btn btn-danger">Delete User</button>
				</form>

			</div>
		</div>
	</div>
</div>
<form action="/admin/users/<%= user._id %>/reset" id="resetPassword" method="POST"></form>
<script src="/js/adminAccount.js"></script>