agdar/referrals/templates/referrals/external_referral_form.html
Marwan Alwali 8f027e9826 update
2025-11-06 15:39:09 +03:00

314 lines
16 KiB
HTML

{% load i18n static %}
<!DOCTYPE html>
<html lang="{{ LANGUAGE_CODE|default:'en' }}" dir="{% if LANGUAGE_CODE == 'ar' %}rtl{% else %}ltr{% endif %}">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{% trans "External Referral" %} - {% if tenant %}{{ tenant.name }}{% else %}Agdar Centre{% endif %}</title>
<!-- Core CSS -->
{% if LANGUAGE_CODE == 'ar' %}
<link href="{% static 'css/default/app-rtl.min.css' %}" rel="stylesheet" />
<link href="{% static 'css/rtl-fixes.css' %}" rel="stylesheet" />
{% else %}
<link href="{% static 'css/default/app.min.css' %}" rel="stylesheet" />
{% endif %}
<link href="{% static 'css/vendor.min.css' %}" rel="stylesheet" />
<link href="{% static 'css/custom.css' %}" rel="stylesheet" />
<style>
body {
background-color: #f8f9fa;
min-height: 100vh;
padding: 20px 0;
}
.referral-container {
max-width: 900px;
margin: 0 auto;
}
.page-header {
background: white;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
padding: 30px;
margin-bottom: 20px;
text-align: center;
}
.page-header .tenant-logo {
max-width: 150px;
max-height: 80px;
margin-bottom: 15px;
}
.page-header h1 {
margin: 0;
font-size: 2rem;
font-weight: 600;
color: #333;
}
.page-header p {
margin: 10px 0 0 0;
color: #6c757d;
}
.info-box {
background: #e7f3ff;
border-left: 4px solid #0d6efd;
padding: 15px;
margin-bottom: 20px;
border-radius: 5px;
}
.info-box i {
color: #0d6efd;
margin-right: 10px;
}
.form-section {
margin-bottom: 20px;
}
.required-field::after {
content: " *";
color: #dc3545;
}
.btn-submit {
padding: 12px 40px;
font-size: 1.1rem;
font-weight: 600;
}
.footer-text {
text-align: center;
margin-top: 30px;
color: #6c757d;
}
</style>
</head>
<body>
<div class="referral-container">
<!-- Page Header -->
<div class="page-header">
{% if tenant and tenant.logo %}
<img src="{{ tenant.logo.url }}" alt="{{ tenant.name }}" class="tenant-logo">
{% else %}
<img src="{% static 'img/logo/Agdar-Logo.png' %}" alt="{{ tenant.name }}" class="tenant-logo">
{% endif %}
<h1><i class="fas fa-hospital-user me-2"></i>{% trans "External Referral Form" %}</h1>
<p>{% if tenant %}{{ tenant.name }}{% else %}{% trans "Agdar Centre" %}{% endif %}</p>
</div>
<!-- Info Box -->
<div class="info-box">
<i class="fas fa-info-circle"></i>
<strong>{% trans "Welcome!" %}</strong> {% trans "Please fill out this form to refer a patient to our center. We will review your referral and contact you within 24-48 hours with next steps." %}
</div>
<!-- Messages -->
{% if messages %}
{% for message in messages %}
<div class="alert alert-{{ message.tags }} alert-dismissible fade show" role="alert">
{{ message }}
<button type="button" class="btn-close" data-bs-dismiss="alert"></button>
</div>
{% endfor %}
{% endif %}
<form method="post" novalidate>
{% csrf_token %}
<!-- Referring Center Information -->
<div class="form-section">
<div class="card border-0 shadow-sm">
<div class="card-header bg-primary text-white">
<h5 class="mb-0">
<i class="fas fa-building me-2"></i>{% trans "Referring Center Information" %}
</h5>
</div>
<div class="card-body">
<div class="row g-3">
<div class="col-12">
<label for="{{ form.referring_center_name.id_for_label }}" class="form-label required-field">{{ form.referring_center_name.label }}</label>
{{ form.referring_center_name }}
{% if form.referring_center_name.errors %}
<div class="text-danger small mt-1">{{ form.referring_center_name.errors }}</div>
{% endif %}
</div>
<div class="col-md-6">
<label for="{{ form.referring_doctor_name.id_for_label }}" class="form-label required-field">{{ form.referring_doctor_name.label }}</label>
{{ form.referring_doctor_name }}
{% if form.referring_doctor_name.errors %}
<div class="text-danger small mt-1">{{ form.referring_doctor_name.errors }}</div>
{% endif %}
</div>
<div class="col-md-6">
<label for="{{ form.referring_contact_phone.id_for_label }}" class="form-label required-field">{{ form.referring_contact_phone.label }}</label>
{{ form.referring_contact_phone }}
{% if form.referring_contact_phone.errors %}
<div class="text-danger small mt-1">{{ form.referring_contact_phone.errors }}</div>
{% endif %}
</div>
<div class="col-12">
<label for="{{ form.referring_contact_email.id_for_label }}" class="form-label required-field">{{ form.referring_contact_email.label }}</label>
{{ form.referring_contact_email }}
{% if form.referring_contact_email.errors %}
<div class="text-danger small mt-1">{{ form.referring_contact_email.errors }}</div>
{% endif %}
</div>
</div>
</div>
</div>
</div>
<!-- Patient Information -->
<div class="form-section">
<div class="card border-0 shadow-sm">
<div class="card-header bg-info text-white">
<h5 class="mb-0">
<i class="fas fa-user me-2"></i>{% trans "Patient Information" %}
</h5>
</div>
<div class="card-body">
<div class="row g-3">
<div class="col-md-6">
<label for="{{ form.patient_first_name.id_for_label }}" class="form-label required-field">{{ form.patient_first_name.label }}</label>
{{ form.patient_first_name }}
{% if form.patient_first_name.errors %}
<div class="text-danger small mt-1">{{ form.patient_first_name.errors }}</div>
{% endif %}
</div>
<div class="col-md-6">
<label for="{{ form.patient_last_name.id_for_label }}" class="form-label required-field">{{ form.patient_last_name.label }}</label>
{{ form.patient_last_name }}
{% if form.patient_last_name.errors %}
<div class="text-danger small mt-1">{{ form.patient_last_name.errors }}</div>
{% endif %}
</div>
<div class="col-md-4">
<label for="{{ form.patient_date_of_birth.id_for_label }}" class="form-label required-field">{{ form.patient_date_of_birth.label }}</label>
{{ form.patient_date_of_birth }}
{% if form.patient_date_of_birth.errors %}
<div class="text-danger small mt-1">{{ form.patient_date_of_birth.errors }}</div>
{% endif %}
</div>
<div class="col-md-4">
<label for="{{ form.patient_sex.id_for_label }}" class="form-label required-field">{{ form.patient_sex.label }}</label>
{{ form.patient_sex }}
{% if form.patient_sex.errors %}
<div class="text-danger small mt-1">{{ form.patient_sex.errors }}</div>
{% endif %}
</div>
<div class="col-md-4">
<label for="{{ form.patient_national_id.id_for_label }}" class="form-label">{{ form.patient_national_id.label }}</label>
{{ form.patient_national_id }}
{% if form.patient_national_id.errors %}
<div class="text-danger small mt-1">{{ form.patient_national_id.errors }}</div>
{% endif %}
</div>
</div>
</div>
</div>
</div>
<!-- Guardian Information -->
<div class="form-section">
<div class="card border-0 shadow-sm">
<div class="card-header bg-success text-white">
<h5 class="mb-0">
<i class="fas fa-user-friends me-2"></i>{% trans "Parent/Guardian Information" %}
</h5>
</div>
<div class="card-body">
<div class="row g-3">
<div class="col-12">
<label for="{{ form.caregiver_name.id_for_label }}" class="form-label required-field">{{ form.caregiver_name.label }}</label>
{{ form.caregiver_name }}
{% if form.caregiver_name.errors %}
<div class="text-danger small mt-1">{{ form.caregiver_name.errors }}</div>
{% endif %}
</div>
<div class="col-md-6">
<label for="{{ form.caregiver_phone.id_for_label }}" class="form-label required-field">{{ form.caregiver_phone.label }}</label>
{{ form.caregiver_phone }}
{% if form.caregiver_phone.errors %}
<div class="text-danger small mt-1">{{ form.caregiver_phone.errors }}</div>
{% endif %}
</div>
<div class="col-md-6">
<label for="{{ form.caregiver_relationship.id_for_label }}" class="form-label required-field">{{ form.caregiver_relationship.label }}</label>
{{ form.caregiver_relationship }}
{% if form.caregiver_relationship.errors %}
<div class="text-danger small mt-1">{{ form.caregiver_relationship.errors }}</div>
{% endif %}
</div>
</div>
</div>
</div>
</div>
<!-- Referral Details -->
<div class="form-section">
<div class="card border-0 shadow-sm">
<div class="card-header bg-warning text-dark">
<h5 class="mb-0">
<i class="fas fa-clipboard-list me-2"></i>{% trans "Referral Details" %}
</h5>
</div>
<div class="card-body">
<div class="row g-3">
<div class="col-md-6">
<label for="{{ form.urgency.id_for_label }}" class="form-label required-field">{{ form.urgency.label }}</label>
{{ form.urgency }}
{% if form.urgency.errors %}
<div class="text-danger small mt-1">{{ form.urgency.errors }}</div>
{% endif %}
</div>
<div class="col-md-6">
<label for="{{ form.requested_specialty.id_for_label }}" class="form-label required-field">{{ form.requested_specialty.label }}</label>
{{ form.requested_specialty }}
{% if form.requested_specialty.errors %}
<div class="text-danger small mt-1">{{ form.requested_specialty.errors }}</div>
{% endif %}
</div>
<div class="col-12">
<label for="{{ form.reason.id_for_label }}" class="form-label required-field">{{ form.reason.label }}</label>
{{ form.reason }}
{% if form.reason.errors %}
<div class="text-danger small mt-1">{{ form.reason.errors }}</div>
{% endif %}
</div>
<div class="col-12">
<label for="{{ form.clinical_summary.id_for_label }}" class="form-label">{{ form.clinical_summary.label }}</label>
{{ form.clinical_summary }}
<small class="form-text text-muted">{% trans "Include diagnosis, current treatment, medications, etc." %}</small>
{% if form.clinical_summary.errors %}
<div class="text-danger small mt-1">{{ form.clinical_summary.errors }}</div>
{% endif %}
</div>
</div>
</div>
</div>
</div>
<!-- Non-field errors -->
{% if form.non_field_errors %}
<div class="alert alert-danger">
{{ form.non_field_errors }}
</div>
{% endif %}
<!-- Submit Button -->
<div class="d-grid">
<button type="submit" class="btn btn-primary btn-lg btn-submit">
<i class="fas fa-paper-plane me-2"></i>{% trans "Submit Referral" %}
</button>
</div>
</form>
<!-- Footer -->
<div class="footer-text">
<p><small>&copy; 2025 {% if tenant %}{{ tenant.name }}{% else %}{% trans "Agdar Centre" %}{% endif %}. {% trans "All rights reserved." %}</small></p>
</div>
</div>
<!-- Core JS -->
<script src="{% static 'js/vendor.min.js' %}"></script>
<script src="{% static 'js/app.min.js' %}"></script>
</body>
</html>