{% extends 'base.html' %}

{% load static %}




{% block content %}

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


		<div class="row">
			<div class="col-md-12">
					<div class="row">
						<div class="col-md-8">
							<h1 class="h3 d-inline align-middle">Update User - {{user_profile.user.first_name|upper}}
								{{user_profile.middle_name|upper}} ({{user_profile.user.username}})</h1>
								<br><i>All fields marked with an asterisk (<span style="color:red;">*</span>) are required</i>
						</div>

						<div class="col-md-4 mb-3 text-sm-end">
							<span><a href="{% url 'view-user' user_profile.user.id %}" class="btn btn-dark"><i class="align-middle" data-feather="arrow-left"></i>Go Back</a></span>
						</div>
					</div>
			</div>
		</div>

		

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

		

			<form class="row" action="{% url 'update-user' %}" method="post" enctype="multipart/form-data">

				{% csrf_token %}

				<input type="hidden" id="originalUsername" name="original_username" value="{{user_profile.user.username}}">
				<input type="hidden" id="originalUserID" name="original_user_id" value="{{user_profile.user.id}}">

				<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">
											
											{% if user_profile.profile_picture_url %}
											<img alt="Avatar" id="userProfilePicture"
											src="{{user_profile.profile_picture_url}}"
											class="rounded-circle img-responsive mt-2" width="128" height="128" />

											{% else %}
											<img alt="Avatar" id="userProfilePicture"
											src="{% static 'img/avatars/default-user.png' %}"
											class="rounded-circle img-responsive mt-2" width="128" height="128" />

											{% endif %}

										<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>

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

												</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>

											
												<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 form-group required">
										<label class="form-label control-label" for="username">Username</label>
										<input type="text" class="form-control" name="username" id="inputUsername"
											{% if old_input_field_values %} value="{{old_input_field_values.username}}" {% else %} value="{{user_profile.user.username}}" {% endif %} placeholder="Username">
									</div>

									<div class="mb-3 form-gorup required">
										<label class="form-label control-label">System Role {{old_input_field_values.system_role }}</label>

										<select class="form-select" name="system_role">
											{% for system_role in system_roles %}

											{% if old_input_field_values %}
												{% if system_role.role_name == old_input_field_values.system_role %}
												<option name="system_role" value="{{system_role.role_name}}" selected>
													{{system_role.role_name}}</option>

												{% else %}
												<option name="system_role" value="{{system_role.role_name}}">
													{{system_role.role_name}}</option>
												{% endif %}

											{% else %}
												{% if system_role.role_name == user_profile.system_role.role_name %}
												<option name="system_role" value="{{system_role.role_name}}" selected>
													{{system_role.role_name}}</option>

												{% else %}
												<option name="system_role" value="{{system_role.role_name}}">
													{{system_role.role_name}}</option>
												{% endif %}
											{% endif %}

											

											{% endfor %}
										</select>

									</div>

									<div class="mb-3">
										<label class="form-check mb-3 mt-3">

											{% if old_input_field_values %}
												{% if old_input_field_values.account_active %}

												<input type="checkbox" class="form-check-input" name="account_active" checked>

												{% else %}

												<input type="checkbox" class="form-check-input" name = "account_active">

												{% endif %}
											
											{% else %}
												{% if user_profile.user.is_active %}

												<input type="checkbox" class="form-check-input" name="account_active" checked>

												{% else %}

												<input type="checkbox" class="form-check-input" name = "account_active">

												{% endif %}
											
											{% endif %} 

											<span class="form-check-label">Account Active</span>
										</label>


									</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 control-label col-sm-4 text-sm-end">First Name</label>
								<div class="col-sm-8">
									<input type="text" class="form-control" name="first_name" placeholder="First Name"
									{% if old_input_field_values %} value="{{old_input_field_values.first_name}}" {% else %} value="{{user_profile.user.first_name}}" {% endif %} >
								</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"
										{% if old_input_field_values %} value="{{old_input_field_values.middle_name}}" {% else %} value="{{user_profile.middle_name}}" {% endif %}>
								</div>
							</div>

							<div class="mb-3 row form-group required">
								<label class="col-form-label control-label col-sm-4 text-sm-end">Last Name (Sir Name)</label>
								<div class="col-sm-8">
									<input type="text" class="form-control" name="last_name" placeholder="Last Name"
										{% if old_input_field_values %} value="{{old_input_field_values.last_name}}" {% else %} value="{{user_profile.user.last_name}}" {% endif %}>
								</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"
										{% if old_input_field_values %} value="{{old_input_field_values.email}}" {% else %} value="{{user_profile.user.email}}" {% endif %}>
								</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" class="form-control" name="mobile" placeholder="Mobile" oninput="this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*)\./g, '$1');"
										{% if old_input_field_values %} value="{{old_input_field_values.mobile}}" {% else %} value="{{user_profile.mobile}}" {% endif %}>
								</div>
							</div>


						</div>
					</div>

				</div>

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

					<div class="card">
						<div class="card-body">
							<div class="row">


								<div class="col-6">
									
								</div>

								<div class="col-6 text-sm-end">
									<button type="submit" class="btn btn-primary mb-3 mt-3">Save Changes</button>
									<span><a href="{% url 'update-user' user_profile.user.id %}" class="btn btn-secondary mb-3 mt-3">Reset</a></span>
								</div>

							</div>

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


			</form>
		

	</div>
</main>

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

{% endblock %}