101 lines
4.2 KiB
HTML
101 lines
4.2 KiB
HTML
{% extends 'base.html' %}
|
|
{% load i18n %}
|
|
|
|
{% block title %}{% trans "Edit Profile" %} | masarX{% endblock %}
|
|
|
|
{% block content %}
|
|
<section class="py-5 bg-light" style="min-height: 80vh;">
|
|
<div class="container py-5">
|
|
<div class="row justify-content-center">
|
|
<div class="col-md-8">
|
|
<!-- Back to Profile -->
|
|
<div class="mb-4">
|
|
<a href="{% url 'profile' %}" class="btn btn-link text-decoration-none text-muted ps-0">
|
|
<i class="bi {% if LANGUAGE_BIDI %}bi-arrow-right{% else %}bi-arrow-left{% endif %} me-2"></i>{% trans "Back to Profile" %}
|
|
</a>
|
|
</div>
|
|
|
|
<div class="card shadow-sm border-0">
|
|
<div class="card-body p-5">
|
|
<h2 class="fw-bold mb-4 text-center">{% trans "Edit Profile" %}</h2>
|
|
<form method="post" enctype="multipart/form-data">
|
|
{% csrf_token %}
|
|
{% for field in form %}
|
|
<div class="mb-3">
|
|
<label class="form-label fw-semibold" for="{{ field.id_for_label }}">{{ field.label }}</label>
|
|
{{ field }}
|
|
{% if field.help_text %}
|
|
<div class="form-text small">{{ field.help_text }}</div>
|
|
{% endif %}
|
|
{% if field.errors %}
|
|
<div class="text-danger small">{{ field.errors }}</div>
|
|
{% endif %}
|
|
</div>
|
|
{% endfor %}
|
|
<div class="d-flex gap-2 mt-4">
|
|
<a href="{% url 'profile' %}" class="btn btn-outline-secondary w-50 py-2">{% trans "Cancel" %}</a>
|
|
<button type="submit" class="btn btn-masarx-primary w-50 py-2">{% trans "Save & Verify" %}</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
const countrySelect = document.getElementById('id_country');
|
|
const governateSelect = document.getElementById('id_governate');
|
|
const citySelect = document.getElementById('id_city');
|
|
|
|
countrySelect.addEventListener('change', function() {
|
|
const countryId = this.value;
|
|
governateSelect.innerHTML = '<option value="">{% trans "Select Governate" %}</option>';
|
|
citySelect.innerHTML = '<option value="">{% trans "Select City" %}</option>';
|
|
|
|
if (countryId) {
|
|
fetch(`{% url 'get_governates' %}?country_id=${countryId}`)
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
data.forEach(gov => {
|
|
const option = document.createElement('option');
|
|
option.value = gov.id;
|
|
option.textContent = gov.name;
|
|
governateSelect.appendChild(option);
|
|
});
|
|
});
|
|
}
|
|
});
|
|
|
|
governateSelect.addEventListener('change', function() {
|
|
const governateId = this.value;
|
|
citySelect.innerHTML = '<option value="">{% trans "Select City" %}</option>';
|
|
|
|
if (governateId) {
|
|
fetch(`{% url 'get_cities' %}?governate_id=${governateId}`)
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
data.forEach(city => {
|
|
const option = document.createElement('option');
|
|
option.value = city.id;
|
|
option.textContent = city.name;
|
|
citySelect.appendChild(option);
|
|
});
|
|
});
|
|
}
|
|
});
|
|
});
|
|
</script>
|
|
|
|
<style>
|
|
.btn-masarx-primary {
|
|
background-color: var(--accent-orange);
|
|
border-color: var(--accent-orange);
|
|
color: white;
|
|
font-weight: 600;
|
|
border-radius: 8px;
|
|
}
|
|
</style>
|
|
{% endblock %} |