205 lines
11 KiB
HTML
205 lines
11 KiB
HTML
{% extends 'base.html' %}
|
|
{% load static %}
|
|
{% load i18n %}
|
|
|
|
{% block content %}
|
|
<div class="container py-5">
|
|
<div class="row justify-content-center">
|
|
<div class="col-md-8">
|
|
<!-- Back to Dashboard -->
|
|
<div class="mb-4">
|
|
<a href="{% url 'dashboard' %}" 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 Dashboard" %}
|
|
</a>
|
|
</div>
|
|
|
|
<div class="card border-0 shadow-sm p-4" style="border-radius: 20px;">
|
|
<div class="d-flex justify-content-between align-items-center mb-4">
|
|
<h2 class="mb-0">{% trans "Edit Shipment" %}</h2>
|
|
<span class="badge bg-warning text-dark">{{ parcel.tracking_number }}</span>
|
|
</div>
|
|
|
|
<form method="POST">
|
|
{% csrf_token %}
|
|
<div class="row g-3">
|
|
<!-- General Info -->
|
|
<div class="col-12">
|
|
<label class="form-label" for="{{ form.description.id_for_label }}">{{ form.description.label }}</label>
|
|
{{ form.description }}
|
|
{% if form.description.errors %}
|
|
<div class="text-danger small">{{ form.description.errors }}</div>
|
|
{% endif %}
|
|
</div>
|
|
<div class="col-md-6">
|
|
<label class="form-label" for="{{ form.weight.id_for_label }}">{{ form.weight.label }}</label>
|
|
{{ form.weight }}
|
|
{% if form.weight.errors %}
|
|
<div class="text-danger small">{{ form.weight.errors }}</div>
|
|
{% endif %}
|
|
</div>
|
|
<div class="col-md-6">
|
|
<label class="form-label" for="{{ form.price.id_for_label }}">{{ form.price.label }}</label>
|
|
{{ form.price }}
|
|
{% if form.price.errors %}
|
|
<div class="text-danger small">{{ form.price.errors }}</div>
|
|
{% endif %}
|
|
</div>
|
|
|
|
<!-- Pickup Details -->
|
|
<div class="col-12 mt-4">
|
|
<h4 class="mb-3 text-secondary border-bottom pb-2">{% trans "Pickup Details" %}</h4>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<label class="form-label" for="{{ form.pickup_country.id_for_label }}">{{ form.pickup_country.label }}</label>
|
|
{{ form.pickup_country }}
|
|
{% if form.pickup_country.errors %}
|
|
<div class="text-danger small">{{ form.pickup_country.errors }}</div>
|
|
{% endif %}
|
|
</div>
|
|
<div class="col-md-6">
|
|
<label class="form-label" for="{{ form.pickup_governate.id_for_label }}">{{ form.pickup_governate.label }}</label>
|
|
{{ form.pickup_governate }}
|
|
{% if form.pickup_governate.errors %}
|
|
<div class="text-danger small">{{ form.pickup_governate.errors }}</div>
|
|
{% endif %}
|
|
</div>
|
|
<div class="col-md-6">
|
|
<label class="form-label" for="{{ form.pickup_city.id_for_label }}">{{ form.pickup_city.label }}</label>
|
|
{{ form.pickup_city }}
|
|
{% if form.pickup_city.errors %}
|
|
<div class="text-danger small">{{ form.pickup_city.errors }}</div>
|
|
{% endif %}
|
|
</div>
|
|
<div class="col-md-6">
|
|
<label class="form-label" for="{{ form.pickup_address.id_for_label }}">{{ form.pickup_address.label }}</label>
|
|
{{ form.pickup_address }}
|
|
{% if form.pickup_address.errors %}
|
|
<div class="text-danger small">{{ form.pickup_address.errors }}</div>
|
|
{% endif %}
|
|
</div>
|
|
|
|
<!-- Delivery Details -->
|
|
<div class="col-12 mt-4">
|
|
<h4 class="mb-3 text-secondary border-bottom pb-2">{% trans "Delivery Details" %}</h4>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<label class="form-label" for="{{ form.delivery_country.id_for_label }}">{{ form.delivery_country.label }}</label>
|
|
{{ form.delivery_country }}
|
|
{% if form.delivery_country.errors %}
|
|
<div class="text-danger small">{{ form.delivery_country.errors }}</div>
|
|
{% endif %}
|
|
</div>
|
|
<div class="col-md-6">
|
|
<label class="form-label" for="{{ form.delivery_governate.id_for_label }}">{{ form.delivery_governate.label }}</label>
|
|
{{ form.delivery_governate }}
|
|
{% if form.delivery_governate.errors %}
|
|
<div class="text-danger small">{{ form.delivery_governate.errors }}</div>
|
|
{% endif %}
|
|
</div>
|
|
<div class="col-md-6">
|
|
<label class="form-label" for="{{ form.delivery_city.id_for_label }}">{{ form.delivery_city.label }}</label>
|
|
{{ form.delivery_city }}
|
|
{% if form.delivery_city.errors %}
|
|
<div class="text-danger small">{{ form.delivery_city.errors }}</div>
|
|
{% endif %}
|
|
</div>
|
|
<div class="col-md-6">
|
|
<label class="form-label" for="{{ form.delivery_address.id_for_label }}">{{ form.delivery_address.label }}</label>
|
|
{{ form.delivery_address }}
|
|
{% if form.delivery_address.errors %}
|
|
<div class="text-danger small">{{ form.delivery_address.errors }}</div>
|
|
{% endif %}
|
|
</div>
|
|
|
|
<!-- Receiver Details -->
|
|
<div class="col-12 mt-4">
|
|
<h4 class="mb-3 text-secondary border-bottom pb-2">{% trans "Receiver Details" %}</h4>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<label class="form-label" for="{{ form.receiver_name.id_for_label }}">{{ form.receiver_name.label }}</label>
|
|
{{ form.receiver_name }}
|
|
{% if form.receiver_name.errors %}
|
|
<div class="text-danger small">{{ form.receiver_name.errors }}</div>
|
|
{% endif %}
|
|
</div>
|
|
<div class="col-md-6">
|
|
<label class="form-label" for="{{ form.receiver_phone.id_for_label }}">{{ form.receiver_phone.label }}</label>
|
|
<div class="d-flex gap-2">
|
|
<div class="flex-shrink-0" style="width: 140px;">
|
|
{{ form.receiver_phone_code }}
|
|
</div>
|
|
<div class="flex-grow-1">
|
|
{{ form.receiver_phone }}
|
|
</div>
|
|
</div>
|
|
{% if form.receiver_phone_code.errors %}
|
|
<div class="text-danger small">{{ form.receiver_phone_code.errors }}</div>
|
|
{% endif %}
|
|
{% if form.receiver_phone.errors %}
|
|
<div class="text-danger small">{{ form.receiver_phone.errors }}</div>
|
|
{% endif %}
|
|
</div>
|
|
|
|
<div class="col-12 mt-4 d-flex gap-2">
|
|
<a href="{% url 'dashboard' %}" class="btn btn-outline-secondary w-50 py-3">{% trans "Cancel" %}</a>
|
|
<button type="submit" class="btn btn-masarx-primary w-50 py-3">{% trans "Update Shipment" %}</button>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
function setupDependentDropdowns(countryId, governateId, cityId) {
|
|
const countrySelect = document.getElementById(countryId);
|
|
const governateSelect = document.getElementById(governateId);
|
|
const citySelect = document.getElementById(cityId);
|
|
|
|
if (!countrySelect || !governateSelect || !citySelect) return;
|
|
|
|
countrySelect.addEventListener('change', function() {
|
|
const val = this.value;
|
|
governateSelect.innerHTML = '<option value="">{% trans "Select Governate" %}</option>';
|
|
citySelect.innerHTML = '<option value="">{% trans "Select City" %}</option>';
|
|
|
|
if (val) {
|
|
fetch(`{% url 'get_governates' %}?country_id=${val}`)
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
data.forEach(item => {
|
|
const option = document.createElement('option');
|
|
option.value = item.id;
|
|
option.textContent = item.name;
|
|
governateSelect.appendChild(option);
|
|
});
|
|
});
|
|
}
|
|
});
|
|
|
|
governateSelect.addEventListener('change', function() {
|
|
const val = this.value;
|
|
citySelect.innerHTML = '<option value="">{% trans "Select City" %}</option>';
|
|
|
|
if (val) {
|
|
fetch(`{% url 'get_cities' %}?governate_id=${val}`)
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
data.forEach(item => {
|
|
const option = document.createElement('option');
|
|
option.value = item.id;
|
|
option.textContent = item.name;
|
|
citySelect.appendChild(option);
|
|
});
|
|
});
|
|
}
|
|
});
|
|
}
|
|
|
|
setupDependentDropdowns('id_pickup_country', 'id_pickup_governate', 'id_pickup_city');
|
|
setupDependentDropdowns('id_delivery_country', 'id_delivery_governate', 'id_delivery_city');
|
|
});
|
|
</script>
|
|
{% endblock %} |