{% 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 bi-arrow-left 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 %}