157 lines
6.6 KiB
HTML
157 lines
6.6 KiB
HTML
{% extends 'layouts/public_base.html' %}
|
|
{% load i18n %}
|
|
|
|
{% block title %}{% trans "Submit Complaint" %} - PX360{% endblock %}
|
|
|
|
{% block extra_css %}
|
|
<style>
|
|
.type-badge {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
padding: 0.25rem 0.625rem;
|
|
border-radius: 0.5rem;
|
|
font-size: 0.6875rem;
|
|
font-weight: 700;
|
|
letter-spacing: 0.025em;
|
|
}
|
|
.type-badge.ed { background: #fef3c7; color: #92400e; }
|
|
.type-badge.ip { background: #dbeafe; color: #1e40af; }
|
|
.type-badge.op { background: #d1fae5; color: #065f46; }
|
|
.type-badge.daycase { background: #f3e8ff; color: #6b21a8; }
|
|
.type-badge.appointment { background: #fce7f3; color: #9d174d; }
|
|
.vip-badge {
|
|
background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
|
|
color: white;
|
|
padding: 0.125rem 0.5rem;
|
|
border-radius: 9999px;
|
|
font-size: 0.625rem;
|
|
font-weight: 800;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.05em;
|
|
}
|
|
.form-textarea {
|
|
width: 100%;
|
|
padding: 0.875rem 1.125rem;
|
|
border: 2px solid #cbd5e1;
|
|
border-radius: 0.875rem;
|
|
font-size: 0.95rem;
|
|
transition: all 0.2s;
|
|
background: white;
|
|
color: #1e293b;
|
|
font-family: 'Inter', sans-serif;
|
|
resize: none;
|
|
}
|
|
.form-textarea:focus {
|
|
outline: none;
|
|
border-color: #007bbd;
|
|
box-shadow: 0 0 0 4px rgba(0, 123, 189, 0.1);
|
|
transform: translateY(-1px);
|
|
}
|
|
</style>
|
|
{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="max-w-2xl mx-auto px-4 py-8 md:py-12">
|
|
<!-- Breadcrumb -->
|
|
<nav class="flex items-center gap-2 text-sm text-slate mb-6">
|
|
<a href="{% url 'complaints:patient_complaint_portal' session.token %}"
|
|
class="hover:text-navy transition flex items-center gap-1 group font-medium">
|
|
<i data-lucide="arrow-left" class="w-4 h-4 group-hover:-translate-x-1 transition-transform"></i>
|
|
{% trans "Hospitals" %}
|
|
</a>
|
|
<i data-lucide="chevron-right" class="w-4 h-4 text-slate-300"></i>
|
|
<a href="{% url 'complaints:patient_complaint_hospital_visits' session.token visit.hospital.id %}"
|
|
class="hover:text-navy transition font-medium">
|
|
{{ visit.hospital.name }}
|
|
</a>
|
|
<i data-lucide="chevron-right" class="w-4 h-4 text-slate-300"></i>
|
|
<span class="font-bold text-navy">{% trans "Complaint Form" %}</span>
|
|
</nav>
|
|
|
|
<!-- Visit Summary -->
|
|
<div class="glass-card rounded-2xl shadow-xl overflow-hidden mb-6 animate-fade-in">
|
|
<div class="p-6">
|
|
<div class="flex items-center gap-3 mb-4">
|
|
<div class="w-10 h-10 bg-navy/10 rounded-xl flex items-center justify-center">
|
|
<i data-lucide="calendar-check" class="w-5 h-5 text-navy"></i>
|
|
</div>
|
|
<div>
|
|
<div class="flex items-center gap-2">
|
|
<span class="type-badge {{ visit.patient_type|lower }}">{{ visit.patient_type }}</span>
|
|
<span class="font-mono text-xs text-slate bg-slate-100 px-2 py-0.5 rounded-md">{{ visit.admission_id }}</span>
|
|
{% if visit.is_vip %}<span class="vip-badge">VIP</span>{% endif %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="grid grid-cols-2 md:grid-cols-3 gap-4">
|
|
<div class="bg-slate-50 rounded-xl p-3">
|
|
<p class="text-xs text-slate font-semibold uppercase tracking-wider mb-0.5">{% trans "Admission" %}</p>
|
|
<p class="font-medium text-gray-800 text-sm">{{ visit.admit_date|date:"d M Y, H:i" }}</p>
|
|
</div>
|
|
<div class="bg-slate-50 rounded-xl p-3">
|
|
<p class="text-xs text-slate font-semibold uppercase tracking-wider mb-0.5">{% trans "Doctor" %}</p>
|
|
<p class="font-medium text-gray-800 text-sm truncate">{{ visit.doctor_display }}</p>
|
|
</div>
|
|
{% if visit.discharge_date %}
|
|
<div class="bg-green-50 rounded-xl p-3">
|
|
<p class="text-xs text-green-600 font-semibold uppercase tracking-wider mb-0.5">{% trans "Discharge" %}</p>
|
|
<p class="font-medium text-green-700 text-sm">{{ visit.discharge_date|date:"d M Y, H:i" }}</p>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Complaint Form -->
|
|
<div class="glass-card rounded-2xl shadow-xl overflow-hidden animate-slide-up" style="animation-delay: 0.1s">
|
|
<div class="p-6 border-b border-slate-100">
|
|
<h2 class="text-lg font-bold text-navy flex items-center gap-2">
|
|
<div class="w-9 h-9 bg-navy/10 rounded-xl flex items-center justify-center">
|
|
<i data-lucide="edit-3" class="w-5 h-5 text-navy"></i>
|
|
</div>
|
|
{% trans "Describe Your Complaint" %}
|
|
</h2>
|
|
<p class="text-sm text-slate mt-1">{% trans "Please provide details about the issue you experienced" %}</p>
|
|
</div>
|
|
|
|
<form method="post" class="p-6">
|
|
{% csrf_token %}
|
|
<input type="hidden" name="session_id" value="{{ session.id }}">
|
|
|
|
{% if error %}
|
|
<div class="mb-4 p-4 bg-red-50 border border-red-200 rounded-xl text-sm text-red-700 flex items-center gap-3">
|
|
<i data-lucide="alert-circle" class="w-5 h-5 flex-shrink-0"></i>
|
|
{{ error }}
|
|
</div>
|
|
{% endif %}
|
|
|
|
<div class="mb-6">
|
|
<label for="description" class="block text-sm font-medium text-gray-700 mb-2">
|
|
{% trans "Complaint Details" %} <span class="text-red-500">*</span>
|
|
</label>
|
|
<textarea id="description" name="description" rows="6" required
|
|
class="form-textarea"
|
|
placeholder="{% trans 'Please describe what happened, when it occurred, and any staff involved...' %}"></textarea>
|
|
</div>
|
|
|
|
<button type="submit"
|
|
class="w-full px-6 py-3.5 bg-gradient-to-r from-navy to-blue text-white font-bold rounded-xl hover:shadow-lg hover:-translate-y-0.5 transition-all duration-300 flex items-center justify-center gap-2 btn-hover">
|
|
<i data-lucide="send" class="w-5 h-5"></i>
|
|
{% trans "Submit Complaint" %}
|
|
</button>
|
|
</form>
|
|
</div>
|
|
|
|
<p class="text-xs text-slate/60 text-center mt-6 animate-slide-up" style="animation-delay: 0.2s">
|
|
<i data-lucide="shield-check" class="w-3 h-3 inline mr-1"></i>
|
|
{% trans "Your complaint will be reviewed by our team and you'll receive updates via SMS." %}
|
|
</p>
|
|
</div>
|
|
{% endblock %}
|
|
|
|
{% block extra_js %}
|
|
<script>
|
|
lucide.createIcons();
|
|
</script>
|
|
{% endblock %}
|