106 lines
4.7 KiB
HTML
106 lines
4.7 KiB
HTML
{% extends 'base.html' %}
|
|
{% load i18n %}
|
|
{% load static %}
|
|
|
|
{% block content %}
|
|
<div class="container py-5">
|
|
<div class="row justify-content-center">
|
|
<div class="col-md-8 text-center">
|
|
<div class="card shadow-lg border-0 rounded-4 p-5">
|
|
<div class="mb-4">
|
|
<i class="bi bi-exclamation-triangle-fill text-warning" style="font-size: 4rem;"></i>
|
|
</div>
|
|
<h2 class="fw-bold mb-3">{% trans "Subscription Expired" %}</h2>
|
|
<p class="lead text-muted mb-4">
|
|
{% blocktrans with name=request.user.username %}
|
|
Hello {{ name }}, your subscription to MASAR CARGO has expired.
|
|
{% endblocktrans %}
|
|
</p>
|
|
<div class="alert alert-warning border-0 rounded-3 mb-4 text-start">
|
|
<ul class="mb-0">
|
|
<li><strong>{% trans "Expired on:" %}</strong> {{ profile.subscription_expiry|date:"d/m/Y" }}</li>
|
|
<li><strong>{% trans "Current Plan:" %}</strong> {{ profile.get_subscription_plan_display }}</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<hr class="my-5">
|
|
|
|
<div class="renewal-section text-start">
|
|
<h4 class="fw-bold mb-4 text-center">{% trans "Renew Your Subscription" %}</h4>
|
|
|
|
<form action="{% url 'renew_subscription' %}" method="post">
|
|
{% csrf_token %}
|
|
<div class="mb-4">
|
|
<label class="form-label fw-bold">{{ form.subscription_plan.label }}</label>
|
|
{{ form.subscription_plan }}
|
|
</div>
|
|
|
|
<div id="fee-display" class="alert alert-info border-0 rounded-3 mb-4 text-center d-none">
|
|
<h5 class="mb-1">{% trans "Fee to Pay:" %}</h5>
|
|
<span id="fee-amount" class="display-6 fw-bold">0.00</span>
|
|
<span class="ms-1">{% trans "SAR" %}</span>
|
|
</div>
|
|
|
|
<div class="d-grid">
|
|
{% if app_settings.thawani_enabled %}
|
|
<button type="submit" class="btn btn-primary btn-lg rounded-pill py-3">
|
|
<i class="bi bi-credit-card me-2"></i> {% trans "Renew Now" %}
|
|
</button>
|
|
{% else %}
|
|
<div class="alert alert-warning text-center border-0 rounded-3">
|
|
<i class="bi bi-info-circle me-2"></i>
|
|
{% trans "Online payment is currently disabled. Please contact support for renewal." %}
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</form>
|
|
</div>
|
|
|
|
{% if app_settings.contact_phone or app_settings.contact_email %}
|
|
<div class="mt-5 pt-4 border-top">
|
|
<h5 class="fw-bold small text-uppercase text-muted">{% trans "Need Help?" %}</h5>
|
|
{% if app_settings.contact_phone %}
|
|
<p class="mb-1"><i class="bi bi-whatsapp text-success me-2"></i> {{ app_settings.contact_phone }}</p>
|
|
{% endif %}
|
|
{% if app_settings.contact_email %}
|
|
<p class="mb-0"><i class="bi bi-envelope me-2"></i> {{ app_settings.contact_email }}</p>
|
|
{% endif %}
|
|
</div>
|
|
{% endif %}
|
|
|
|
<div class="mt-4">
|
|
<a href="{% url 'logout' %}" class="btn btn-link text-danger">
|
|
{% trans "Logout" %}
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
const fees = {{ fees_json|safe }};
|
|
const role = "{{ profile.role }}";
|
|
const planSelect = document.getElementById('id_subscription_plan');
|
|
const feeDisplay = document.getElementById('fee-display');
|
|
const feeAmount = document.getElementById('fee-amount');
|
|
|
|
function updateFee() {
|
|
const plan = planSelect.value;
|
|
if (plan && fees[role] && fees[role][plan]) {
|
|
feeAmount.textContent = parseFloat(fees[role][plan]).toFixed(2);
|
|
feeDisplay.classList.remove('d-none');
|
|
} else {
|
|
feeDisplay.classList.add('d-none');
|
|
}
|
|
}
|
|
|
|
if (planSelect) {
|
|
planSelect.addEventListener('change', updateFee);
|
|
updateFee(); // Initial call
|
|
}
|
|
});
|
|
</script>
|
|
{% endblock %}
|