{% 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-edit me-2"></i>Update User
				</h1>
				<p class="text-muted small">{{user_profile.user.first_name|upper}} {{user_profile.middle_name|upper}} ({{user_profile.user.username}})</p>
			</div>
			<a href="{% url 'view-user' user_profile.user.id %}" 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="{% 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">
				<!-- 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">
									{% if user_profile.profile_picture_url %}
									<img alt="Profile Picture" id="userProfilePicture" src="{{user_profile.profile_picture_url}}"
										class="rounded-circle img-responsive mt-2" width="128" height="128" />
									{% else %}
									<img alt="Profile Picture" 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-sm" style="background: #0e2e63; color: #fff; border-radius: 6px;">
														<i class="fas fa-camera"></i> Camera
													</span>
												</label>
												<input type="hidden" id="captured-image" name="captured_image">
											</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">
									</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"
										{% if old_input_field_values %} value="{{old_input_field_values.username}}" {% else %} value="{{user_profile.user.username}}" {% endif %}>
								</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 old_input_field_values %}
											{% if system_role.role_name == old_input_field_values.system_role %}
											<option value="{{system_role.role_name}}" selected>{{system_role.role_name}}</option>
											{% else %}
											<option value="{{system_role.role_name}}">{{system_role.role_name}}</option>
											{% endif %}
										{% else %}
											{% if system_role.role_name == user_profile.system_role.role_name %}
											<option value="{{system_role.role_name}}" selected>{{system_role.role_name}}</option>
											{% else %}
											<option value="{{system_role.role_name}}">{{system_role.role_name}}</option>
											{% endif %}
										{% endif %}
										{% endfor %}
									</select>
								</div>
								<div class="mb-3">
									<div class="form-check">
										{% 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 %}
										<label class="form-check-label fw-semibold" style="color: #0e2e63;">Account Active</label>
									</div>
								</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"
								{% if old_input_field_values %} value="{{old_input_field_values.first_name}}" {% else %} value="{{user_profile.user.first_name}}" {% endif %}>
						</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"
								{% if old_input_field_values %} value="{{old_input_field_values.middle_name}}" {% else %} value="{{user_profile.middle_name}}" {% endif %}>
						</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"
								{% if old_input_field_values %} value="{{old_input_field_values.last_name}}" {% else %} value="{{user_profile.user.last_name}}" {% endif %}>
						</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"
								{% if old_input_field_values %} value="{{old_input_field_values.email}}" {% else %} value="{{user_profile.user.email}}" {% endif %}>
						</div>
						<div class="mb-3">
							<label class="form-label fw-semibold" style="color: #0e2e63;">Mobile</label>
							<input type="text" class="form-control" name="mobile" style="border-radius: 8px; padding: 10px;" placeholder="Enter mobile number"
								{% if old_input_field_values %} value="{{old_input_field_values.mobile}}" {% else %} value="{{user_profile.mobile}}" {% endif %}>
						</div>
						<div class="mb-3">
							<label class="form-label fw-semibold" style="color: #0e2e63;">Telephone</label>
							<input type="text" class="form-control" name="telephone" style="border-radius: 8px; padding: 10px;" placeholder="Enter telephone"
								{% if old_input_field_values %} value="{{old_input_field_values.telephone}}" {% else %} value="{{user_profile.telephone}}" {% endif %}>
						</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"
								{% if old_input_field_values %} value="{{old_input_field_values.address}}" {% else %} value="{{user_profile.address}}" {% endif %}>
						</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 old_input_field_values %}
									{% if country.country_name == old_input_field_values.country_name %}
									<option value="{{country.country_name}}" selected>{{country.country_name}}</option>
									{% else %}
									<option value="{{country.country_name}}">{{country.country_name}}</option>
									{% endif %}
								{% else %}
									{% if country.country_name == user_profile.branch.country.country_name %}
									<option value="{{country.country_name}}" selected>{{country.country_name}}</option>
									{% else %}
									<option value="{{country.country_name}}">{{country.country_name}}</option>
									{% endif %}
								{% 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="select-branch-code-select-tag" style="border-radius: 8px; padding: 10px;">
								{% for branch in branches %}
								{% if old_input_field_values %}
									{% if branch.branch_code == old_input_field_values.branch_code %}
									<option value="{{branch.branch_code}}" selected>{{branch.branch_code}}</option>
									{% else %}
									<option value="{{branch.branch_code}}">{{branch.branch_code}}</option>
									{% endif %}
								{% else %}
									{% if branch.branch_code == user_profile.branch.branch_code %}
									<option value="{{branch.branch_code}}" selected>{{branch.branch_code}}</option>
									{% else %}
									<option value="{{branch.branch_code}}">{{branch.branch_code}}</option>
									{% endif %}
								{% 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="select-branch-name-select-tag" style="border-radius: 8px; padding: 10px;">
								{% for branch in branches %}
								{% if old_input_field_values %}
									{% if branch.branch_name == old_input_field_values.branch_name %}
									<option value="{{branch.branch_name}}" selected>{{branch.branch_name}}</option>
									{% else %}
									<option value="{{branch.branch_name}}">{{branch.branch_name}}</option>
									{% endif %}
								{% else %}
									{% if branch.branch_name == user_profile.branch.branch_name %}
									<option value="{{branch.branch_name}}" selected>{{branch.branch_name}}</option>
									{% else %}
									<option value="{{branch.branch_name}}">{{branch.branch_name}}</option>
									{% endif %}
								{% 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"
								{% if old_input_field_values %} value="{{old_input_field_values.employee_number}}" {% else %} value="{{user_profile.employee_number}}" {% endif %}>
						</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 old_input_field_values %}
									{% if job_role == old_input_field_values.job_role %}
									<option value="{{job_role}}" selected>{{job_role}}</option>
									{% else %}
									<option value="{{job_role}}">{{job_role}}</option>
									{% endif %}
								{% else %}
									{% if job_role == user_profile.job_role %}
									<option value="{{job_role}}" selected>{{job_role}}</option>
									{% else %}
									<option value="{{job_role}}">{{job_role}}</option>
									{% endif %}
								{% 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"
								{% if old_input_field_values %} value="{{old_input_field_values.reference_id}}" {% else %} value="{{user_profile.reference_id}}" {% endif %}>
						</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> Update User
							</button>
							<a href="{% url 'update-user' user_profile.user.id %}" class="btn btn-light" style="border-radius: 8px; padding: 10px 30px;">Reset</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/update-user3.js' %}"></script>
{% endblock %}