{% extends 'base.html' %}

{% load static %}




{% block content %}

<main class="content">
	<div class="container-fluid p-0">

		<div class="mb-3">
			<h1 class="h3 d-inline align-middle">Add New User</h1>
			<br><i>All fields marked with an asterisk (<span style="color:red;">*</span>) are required</i>
		</div>

		

		{% include 'partials/_messages.html' %}

		

			<form class="row" action="add-user" method="post" enctype="multipart/form-data">

				{% csrf_token %}

				<div class="col-12 col-xl-6">

					<div class="card">
						<div class="card-header">
							<h5 class="card-title mb-0">Login Details</h5>
							
						</div>
						<div class="card-body">

							<div class="row">

								<div class="col-md-4 mb-5">
									<div class="text-center">
										<img alt="Charles Hall" id="userProfilePicture"
											src="{% static 'img/avatars/default-user.png' %}"
											class="rounded-circle img-responsive mt-2" width="128" height="128" />
										<div class="mt-2">

											<div class="row">
												<div class="col-md-6">
												<label id="start-camera" data-bs-toggle="modal" data-bs-target="#captureImageModal"><span class="btn btn-primary"><i
													class="fas fa-camera"></i>
												Camera</span></label>

												

												</div>

											

												<div class="modal fade" id="captureImageModal" tabindex="-1" role="dialog" aria-hidden="true">
													<div class="modal-dialog modal-dialog-centered" role="document">
														<div class="modal-content">
															<div class="modal-header">
																<h5 class="modal-title">Accessing Your Web Camera</h5>
																<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
															</div>
															<div class="modal-body m-3">
																
																<video id="video" width="320" height="240" autoplay></video>
																<canvas id="canvas" width="240" height="240"></canvas>

																

															</div>
															<div class="modal-footer">
																<button type="button" id="click-photo" class="btn btn-info"><i
																	class="fas fa-camera"> </i> Capture</button>

																	<button type="button" id="save-photo" data-bs-dismiss="modal" class="btn btn-success">Use the captured Image</button>

																<button type="button" id="cancel-camera" class="btn btn-danger" data-bs-dismiss="modal">Cancel</button>
			
															</div>
														</div>
													</div>
												</div>

											<input type="hidden" id="captured-image" name = "captured_image">



											<div class="col-md-6">
												<label for="chooseUserProfilePicture"><span class="btn btn-primary"><i
													class="fas fa-upload"></i>
												Upload</span></label>
											</div>
											</div>
											

											<input type="file" id="chooseUserProfilePicture" name="choose-user-profile-picture"
												style="display:none;visibility:none" accept="image/png, image/gif, image/jpeg" > <!--onchange="readURL(this);"-->


												


										</div>
										<small>For best results, use an image at least 128px by 128px in .jpg
											format</small>
									</div>
								</div>

								 
								

								<div class="col-md-8">

									<div class="mb-3 row form-group required">
										<label class="form-label col-sm-4 text-sm-end control-label" for="username">Username</label>
										<div class="col-sm-8">
											<input type="text" class="form-control" name="username" id="inputUsername"
												placeholder="Username" value="{{old_input_field_values.username}}">
										</div>
									</div>

									<div class="mb-3 row form-group required">
										<label class="form-label col-sm-4 text-sm-end control-label" for="inputPassword">Password</label>
										<div class="col-sm-8">
										  <div class="input-group">
											<input type="password" class="form-control" id="inputPassword" name="password"
												   placeholder="Password" value="{{old_input_field_values.password}}">
											<button type="button" class="btn btn-outline-secondary toggle-password" data-target="#inputPassword">
											  <i class="fa fa-eye"></i>
											</button>
										  </div>
										</div>
									  </div>
									  
									  <div class="mb-3 row form-group required">
										<label class="form-label col-sm-4 text-sm-end control-label" for="inputRetypePassword">Re-type Password</label>
										<div class="col-sm-8">
										  <div class="input-group">
											<input type="password" class="form-control" id="inputRetypePassword" name="re_typed_password"
												   placeholder="Re-type Password" value="{{old_input_field_values.re_typed_password}}">
											<button type="button" class="btn btn-outline-secondary toggle-password" data-target="#inputRetypePassword">
											  <i class="fa fa-eye"></i>
											</button>
										  </div>
										</div>
									  </div>
									  

									<div class="mb-3 row form-group required">
										<label class="form-label col-sm-4 text-sm-end control-label">System Role</label>
										<div class="col-sm-8">
											<select class="form-select" name="system_role">
												{% for system_role in system_roles %}
												{% if system_role|lower == old_input_field_values.system_role|lower %}
												<option name="system_role" value="{{system_role.role_name}}" selected>
													{{system_role.role_name|upper}}</option>
												{% else %}

												<option name="system_role" value="{{system_role.role_name}}">
													{{system_role.role_name|upper}}</option>
												{% endif %}
												{% endfor %}
											</select>
										</div>

									</div>

								</div>

							</div>

						</div>
					</div>



				</div>

				<div class="col-12 col-xl-6">
					<div class="card">
						<div class="card-header">
							<h5 class="card-title">Personal Details</h5>
						</div>
						<div class="card-body">


							<div class="mb-3 row form-group required">
								<label class="col-form-label col-sm-4 text-sm-end control-label">First Name</label>
								<div class="col-sm-8">
									<input type="text" class="form-control" name="first_name" placeholder="First Name" value="{{old_input_field_values.first_name}}">
								</div>
							</div>

							<div class="mb-3 row">
								<label class="col-form-label col-sm-4 text-sm-end">Middle Name (Other Name)</label>
								<div class="col-sm-8">
									<input type="text" class="form-control" name="middle_name"
										placeholder="Middle Name" value="{{old_input_field_values.middle_name}}">
								</div>
							</div>

							<div class="mb-3 row form-group required">
								<label class="col-form-label col-sm-4 text-sm-end control-label">Last Name (Sir Name)</label>
								<div class="col-sm-8">
									<input type="text" class="form-control" name="last_name" placeholder="Last Name" value="{{old_input_field_values.last_name}}">
								</div>
							</div>


							<div class="mb-3 row form-group required">
								<label class="col-form-label control-label col-sm-4 text-sm-end">Email Address</label>
								<div class="col-sm-8">
									<input type="email" class="form-control" name="email" placeholder="Email" value="{{old_input_field_values.email}}">
								</div>
							</div>

							<div class="mb-3 row form-group required">
								<label class="col-form-label control-label col-sm-4 text-sm-end">Mobile</label>
								<div class="col-sm-8">
									<input type="text" oninput="this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*)\./g, '$1');" class="form-control" name="mobile" placeholder="Mobile" value="{{old_input_field_values.mobile}}">
								</div>
							</div>

						</div>
					</div>

				</div>

				<div class="col-md-12">

					<div class="card">
						<div class="card-body">
							<div class="col-12 text-sm-end">
								<button type="submit" class="btn btn-primary mb-3 mt-3">Add New User</button>
								<a href="{% url 'add-user' %}"
									class="btn btn-secondary mb-3 mt-3">Clear</a>
							</div>

						</div>
					</div>
				</div>


			</form>
		

	</div>
</main>
<script>
	document.querySelectorAll(".toggle-password").forEach(btn => {
	  btn.addEventListener("click", function() {
		const target = document.querySelector(this.dataset.target);
		const icon = this.querySelector("i");
  
		if (target.type === "password") {
		  target.type = "text";
		  icon.classList.remove("fa-eye");
		  icon.classList.add("fa-eye-slash");
		} else {
		  target.type = "password";
		  icon.classList.remove("fa-eye-slash");
		  icon.classList.add("fa-eye");
		}
	  });
	});
</script>
  

<script src="{% static 'js/usermanagement/add-user3.js' %}"></script>

{% endblock %}