{% extends 'base.html' %}
{% load static %}

{% block content %}
<main class="content">
	<div class="container-fluid p-4">
		<div class="d-flex justify-content-between align-items-center mb-4">
			<div>
				<h1 class="h2 mb-1 fw-bold" style="color: #0e2e63;">
					<i class="fas fa-user-plus me-2"></i>Add New User
				</h1>
				<p class="text-muted small">Create a new user account</p>
			</div>
			<a href="{% url 'user-details' %}" class="btn btn-light">
				<i class="fas fa-arrow-left me-1"></i> Back
			</a>
		</div>

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

		<form class="row g-4" action="add-user" method="post" enctype="multipart/form-data">
			{% csrf_token %}

			<div class="col-12 col-xl-6">
				<!-- Login Details Card -->
				<div class="card shadow-sm border-0" style="border-radius: 12px;">
					<div class="card-header bg-white border-0">
						<h5 class="fw-bold" style="color: #0e2e63;">
							<i class="fas fa-lock me-2"></i>Login Details
						</h5>
					</div>
					<div class="card-body">
						<div class="row">
							<div class="col-md-4">
								<div class="text-center">
									<img alt="Profile Picture" 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-sm" style="background: #0e2e63; color: #fff; border-radius: 6px;">
														<i class="fas fa-camera"></i> Camera
													</span>
												</label>
											</div>
											<div class="col-md-6">
												<label for="chooseUserProfilePicture">
													<span class="btn btn-sm" style="background: #0e2e63; color: #fff; border-radius: 6px;">
														<i class="fas fa-upload"></i> Upload
													</span>
												</label>
											</div>
										</div>
										<input type="file" id="chooseUserProfilePicture" name="choose-user-profile-picture"
											style="display:none;" accept="image/png, image/gif, image/jpeg">
										<input type="hidden" id="captured-image" name="captured_image">
									</div>
									<small class="text-muted">Image at least 128px x 128px</small>
								</div>
							</div>
							<div class="col-md-8">
								<div class="mb-3">
									<label class="form-label fw-semibold" style="color: #0e2e63;">Username <span class="text-danger">*</span></label>
									<input type="text" class="form-control" name="username" style="border-radius: 8px; padding: 10px;" placeholder="Enter username" value="{{old_input_field_values.username}}">
								</div>
								<div class="mb-3">
									<label class="form-label fw-semibold" style="color: #0e2e63;">Password <span class="text-danger">*</span></label>
									<div class="input-group">
										<input type="password" class="form-control" id="inputPassword" name="password" style="border-radius: 8px 0 0 8px; padding: 10px;" placeholder="Enter password" value="{{old_input_field_values.password}}">
										<button type="button" class="btn btn-outline-secondary" id="togglePassword" style="border-radius: 0 8px 8px 0;">
											<i class="bi bi-eye"></i>
										</button>
									</div>
								</div>
								<div class="mb-3">
									<label class="form-label fw-semibold" style="color: #0e2e63;">Re-type Password <span class="text-danger">*</span></label>
									<div class="input-group">
										<input type="password" class="form-control" name="re_typed_password" id="inputRetypePassword" style="border-radius: 8px 0 0 8px; padding: 10px;" placeholder="Re-type password" value="{{old_input_field_values.re_typed_password}}">
										<button type="button" class="btn btn-outline-secondary" id="toggleRetypePassword" style="border-radius: 0 8px 8px 0;">
											<i class="bi bi-eye"></i>
										</button>
									</div>
								</div>
								<div class="mb-3">
									<label class="form-label fw-semibold" style="color: #0e2e63;">System Role <span class="text-danger">*</span></label>
									<select class="form-select" name="system_role" style="border-radius: 8px; padding: 10px;">
										{% for system_role in system_roles %}
										{% if system_role|lower == old_input_field_values.system_role|lower %}
										<option value="{{system_role.role_name}}" selected>{{system_role.role_name|upper}}</option>
										{% else %}
										<option value="{{system_role.role_name}}">{{system_role.role_name|upper}}</option>
										{% endif %}
										{% endfor %}
									</select>
								</div>
							</div>
						</div>
					</div>
				</div>

				<!-- Personal Details Card -->
				<div class="card shadow-sm border-0 mt-4" style="border-radius: 12px;">
					<div class="card-header bg-white border-0">
						<h5 class="fw-bold" style="color: #0e2e63;">
							<i class="fas fa-user me-2"></i>Personal Details
						</h5>
					</div>
					<div class="card-body">
						<div class="mb-3">
							<label class="form-label fw-semibold" style="color: #0e2e63;">First Name <span class="text-danger">*</span></label>
							<input type="text" class="form-control" name="first_name" style="border-radius: 8px; padding: 10px;" placeholder="Enter first name" value="{{old_input_field_values.first_name}}">
						</div>
						<div class="mb-3">
							<label class="form-label fw-semibold" style="color: #0e2e63;">Middle Name</label>
							<input type="text" class="form-control" name="middle_name" style="border-radius: 8px; padding: 10px;" placeholder="Enter middle name" value="{{old_input_field_values.middle_name}}">
						</div>
						<div class="mb-3">
							<label class="form-label fw-semibold" style="color: #0e2e63;">Last Name <span class="text-danger">*</span></label>
							<input type="text" class="form-control" name="last_name" style="border-radius: 8px; padding: 10px;" placeholder="Enter last name" value="{{old_input_field_values.last_name}}">
						</div>
					</div>
				</div>
			</div>

			<div class="col-12 col-xl-6">
				<!-- Contact Details Card -->
				<div class="card shadow-sm border-0" style="border-radius: 12px;">
					<div class="card-header bg-white border-0">
						<h5 class="fw-bold" style="color: #0e2e63;">
							<i class="fas fa-address-card me-2"></i>Contact Details
						</h5>
					</div>
					<div class="card-body">
						<div class="mb-3">
							<label class="form-label fw-semibold" style="color: #0e2e63;">Email</label>
							<input type="email" class="form-control" name="email" style="border-radius: 8px; padding: 10px;" placeholder="Enter email" value="{{old_input_field_values.email}}">
						</div>
						<div class="mb-3">
							<label class="form-label fw-semibold" style="color: #0e2e63;">Mobile</label>
							<input type="text" oninput="this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*)\./g, '$1');" class="form-control" name="mobile" style="border-radius: 8px; padding: 10px;" placeholder="Enter mobile number" value="{{old_input_field_values.mobile}}">
						</div>
						<div class="mb-3">
							<label class="form-label fw-semibold" style="color: #0e2e63;">Telephone</label>
							<input type="text" oninput="this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*)\./g, '$1');" class="form-control" name="telephone" style="border-radius: 8px; padding: 10px;" placeholder="Enter telephone" value="{{old_input_field_values.telephone}}">
						</div>
						<div class="mb-3">
							<label class="form-label fw-semibold" style="color: #0e2e63;">Address</label>
							<input type="text" class="form-control" name="address" style="border-radius: 8px; padding: 10px;" placeholder="Enter address" value="{{old_input_field_values.address}}">
						</div>
					</div>
				</div>

				<!-- Occupation Details Card -->
				<div class="card shadow-sm border-0 mt-4" style="border-radius: 12px;">
					<div class="card-header bg-white border-0">
						<h5 class="fw-bold" style="color: #0e2e63;">
							<i class="fas fa-briefcase me-2"></i>Occupation Details
						</h5>
					</div>
					<div class="card-body">
						<div class="mb-3">
							<label class="form-label fw-semibold" style="color: #0e2e63;">Country</label>
							<select class="form-select" name="country_name" style="border-radius: 8px; padding: 10px;">
								{% for country in countries %}
								{% if country.country_name|lower == old_input_field_values.country_name|lower %}
								<option value="{{country.country_name}}" selected>{{country.country_name}}</option>
								{% else %}
								<option value="{{country.country_name}}">{{country.country_name}}</option>
								{% endif %}
								{% endfor %}
							</select>
						</div>
						<div class="mb-3">
							<label class="form-label fw-semibold" style="color: #0e2e63;">Branch Code</label>
							<select class="form-select" name="branch_code" id="selectBranchCode" style="border-radius: 8px; padding: 10px;">
								{% for branch in branches %}
								{% if branch.branch_code|lower == old_input_field_values.branch_code|lower %}
								<option value="{{branch.branch_code}}" selected>{{branch.branch_code}}</option>
								{% else %}
								<option value="{{branch.branch_code}}">{{branch.branch_code}}</option>
								{% endif %}
								{% endfor %}
							</select>
						</div>
						<div class="mb-3">
							<label class="form-label fw-semibold" style="color: #0e2e63;">Branch Name</label>
							<select class="form-select" name="branch_name" id="selectBranchName" style="border-radius: 8px; padding: 10px;">
								{% for branch in branches %}
								{% if branch.branch_name|lower == old_input_field_values.branch_name|lower %}
								<option value="{{branch.branch_name}}" selected>{{branch.branch_name}}</option>
								{% else %}
								<option value="{{branch.branch_name}}">{{branch.branch_name}}</option>
								{% endif %}
								{% endfor %}
							</select>
						</div>
						<div class="mb-3">
							<label class="form-label fw-semibold" style="color: #0e2e63;">Employee Number</label>
							<input type="text" class="form-control" name="employee_number" style="border-radius: 8px; padding: 10px;" placeholder="Enter employee number" value="{{old_input_field_values.employee_number}}">
						</div>
						<div class="mb-3">
							<label class="form-label fw-semibold" style="color: #0e2e63;">Job Role <span class="text-danger">*</span></label>
							<select class="form-select" name="job_role" style="border-radius: 8px; padding: 10px;">
								{% for job_role in job_roles %}
								{% if job_role|lower == old_input_field_values.job_role|lower %}
								<option value="{{job_role}}" selected>{{job_role}}</option>
								{% else %}
								<option value="{{job_role}}">{{job_role}}</option>
								{% endif %}
								{% endfor %}
							</select>
						</div>
						<div class="mb-3">
							<label class="form-label fw-semibold" style="color: #0e2e63;">Reference ID</label>
							<input type="text" class="form-control" name="reference_id" style="border-radius: 8px; padding: 10px;" placeholder="Enter reference ID" value="{{old_input_field_values.reference_id}}">
						</div>
					</div>
				</div>
			</div>

			<!-- Submit Button -->
			<div class="col-12">
				<div class="card shadow-sm border-0" style="border-radius: 12px;">
					<div class="card-body">
						<div class="text-sm-end">
							<button type="submit" class="btn" style="background: #0e2e63; color: #fff; padding: 10px 40px; border-radius: 8px;">
								<i class="fas fa-save me-2"></i> Add New User
							</button>
							<a href="{% url 'add-user' %}" class="btn btn-light" style="border-radius: 8px; padding: 10px 30px;">Clear</a>
						</div>
					</div>
				</div>
			</div>
		</form>

		<!-- Camera Modal -->
		<div class="modal fade" id="captureImageModal" tabindex="-1" aria-hidden="true">
			<div class="modal-dialog modal-dialog-centered">
				<div class="modal-content" style="border-radius: 12px;">
					<div class="modal-header border-0">
						<h5 class="modal-title" style="color: #0e2e63;">Capture Image</h5>
						<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
					</div>
					<div class="modal-body text-center">
						<video id="video" width="320" height="240" autoplay style="border-radius: 8px;"></video>
						<canvas id="canvas" width="240" height="240" style="display: none;"></canvas>
					</div>
					<div class="modal-footer border-0">
						<button type="button" id="click-photo" class="btn" style="background: #0e2e63; color: #fff; border-radius: 6px;">
							<i class="fas fa-camera"></i> Capture
						</button>
						<button type="button" id="save-photo" data-bs-dismiss="modal" class="btn btn-success" style="border-radius: 6px;">
							<i class="fas fa-check"></i> Use Image
						</button>
						<button type="button" id="cancel-camera" class="btn btn-danger" data-bs-dismiss="modal" style="border-radius: 6px;">
							<i class="fas fa-times"></i> Cancel
						</button>
					</div>
				</div>
			</div>
		</div>
	</div>
</main>

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