237 lines
7.9 KiB
HTML
237 lines
7.9 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="ar" dir="rtl">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>تقرير الشكوى - {{ complaint.reference_number }}</title>
|
|
<style>
|
|
@page { size: A4; margin: 0; }
|
|
@page :first { margin: 0; }
|
|
|
|
@font-face { font-family: 'Noto Kufi Arabic'; font-style: normal; font-weight: 400; src: url('vendor/fonts/noto-kufi-arabic/files/noto-kufi-arabic-full-regular.ttf') format('truetype'); }
|
|
@font-face { font-family: 'Noto Kufi Arabic'; font-style: normal; font-weight: 700; src: url('vendor/fonts/noto-kufi-arabic/files/noto-kufi-arabic-full-bold.ttf') format('truetype'); }
|
|
|
|
:root {
|
|
--blue: #005696;
|
|
--ink: #1e293b;
|
|
--body: #334155;
|
|
--muted: #64748b;
|
|
--border: #cbd5e1;
|
|
--surface: #f1f5f9;
|
|
--white: #ffffff;
|
|
--font: 'Noto Kufi Arabic', sans-serif;
|
|
}
|
|
|
|
* { box-sizing: border-box; margin: 0; padding: 0; font-family: var(--font); }
|
|
body { background: var(--white); color: var(--ink); }
|
|
|
|
.page {
|
|
width: 210mm;
|
|
height: 297mm;
|
|
position: relative;
|
|
overflow: hidden;
|
|
background-image: url('{{ letterhead_path }}');
|
|
background-size: 210mm 297mm;
|
|
background-repeat: no-repeat;
|
|
background-position: top left;
|
|
}
|
|
|
|
.stamp {
|
|
position: fixed;
|
|
bottom: 22mm;
|
|
right: 20mm;
|
|
width: 40mm;
|
|
height: auto;
|
|
z-index: 100;
|
|
}
|
|
|
|
/* === Form Body === */
|
|
.form-body {
|
|
padding: 38mm 18mm 30mm 18mm;
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
|
|
/* === Title === */
|
|
.form-title {
|
|
text-align: center;
|
|
font-size: 18px;
|
|
font-weight: 700;
|
|
color: var(--blue);
|
|
padding: 6px 0 14px 0;
|
|
}
|
|
|
|
/* === Section Header === */
|
|
.section-title {
|
|
background: var(--surface);
|
|
color: var(--blue);
|
|
font-size: 11px;
|
|
font-weight: 700;
|
|
padding: 6px 12px;
|
|
border: 1px solid var(--border);
|
|
border-bottom: none;
|
|
margin-top: 6px;
|
|
}
|
|
|
|
/* === Data Tables === */
|
|
.data-table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
}
|
|
.data-table td {
|
|
border: 1px solid var(--border);
|
|
font-size: 10px;
|
|
padding: 6px 10px;
|
|
}
|
|
.data-table .lbl {
|
|
background: var(--surface);
|
|
color: var(--body);
|
|
font-weight: 700;
|
|
width: 18%;
|
|
}
|
|
.data-table .val {
|
|
color: var(--ink);
|
|
width: 32%;
|
|
}
|
|
|
|
/* === Summary Block === */
|
|
.summary-box {
|
|
border: 1px solid var(--border);
|
|
padding: 12px;
|
|
font-size: 10px;
|
|
line-height: 2;
|
|
text-align: justify;
|
|
min-height: 40mm;
|
|
}
|
|
|
|
/* === Responsible Department === */
|
|
.responsible-dept {
|
|
margin-top: 8mm;
|
|
background: var(--blue);
|
|
color: var(--white);
|
|
text-align: center;
|
|
font-size: 12px;
|
|
font-weight: 700;
|
|
padding: 8px 12px;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
/* === Bottom: QR + Notice (fixed position, like stamp) === */
|
|
.qr-block {
|
|
position: fixed;
|
|
bottom: 22mm;
|
|
left: 18mm;
|
|
z-index: 100;
|
|
}
|
|
.qr-block table {
|
|
border-collapse: collapse;
|
|
}
|
|
.qr-block td {
|
|
vertical-align: top;
|
|
padding: 0;
|
|
}
|
|
.qr-block img {
|
|
width: 25mm;
|
|
height: 25mm;
|
|
}
|
|
.qr-label {
|
|
font-size: 7px;
|
|
color: var(--muted);
|
|
margin-top: 2px;
|
|
text-align: center;
|
|
}
|
|
.qr-notice {
|
|
font-size: 8px;
|
|
color: var(--muted);
|
|
line-height: 1.6;
|
|
text-align: right;
|
|
padding-right: 5mm;
|
|
max-width: 45mm;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<div class="page">
|
|
<div class="form-body">
|
|
<!-- Title -->
|
|
<div class="form-title">نموذج الشكوى</div>
|
|
|
|
<!-- Section 1: Complainant Information -->
|
|
<div class="section-title">بيانات مقدم الشكوى</div>
|
|
<table class="data-table">
|
|
<tr>
|
|
<td class="lbl">الاسم</td>
|
|
<td class="val">{{ complainant_name|default:"—" }}</td>
|
|
<td class="lbl">رقم الملف</td>
|
|
<td class="val">{{ complaint.reference_number|default:"—" }}</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="lbl">جهة الادعاء</td>
|
|
<td class="val">{{ source_name|default:"—" }}</td>
|
|
<td class="lbl">الموقع</td>
|
|
<td class="val">{{ department_name|default:"—" }}</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="lbl">تاريخ الحادثة</td>
|
|
<td class="val">{{ incident_date|default:"—" }}</td>
|
|
<td class="lbl">تاريخ التقديم</td>
|
|
<td class="val">{{ submission_date|default:"—" }}</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="lbl">رقم الاتصال</td>
|
|
<td class="val" colspan="3">{{ complaint.contact_phone|default:"—" }}</td>
|
|
</tr>
|
|
</table>
|
|
|
|
<!-- Section 2: Information About Person Complained Of -->
|
|
<div class="section-title">بيانات الموظف المشكو عليه</div>
|
|
<table class="data-table">
|
|
<tr>
|
|
<td class="lbl">الموظف</td>
|
|
<td class="val">{{ accused_staff_name|default:"—" }}</td>
|
|
<td class="lbl">القسم</td>
|
|
<td class="val">{{ department_name|default:"—" }}</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="lbl">القسم الرئيسي</td>
|
|
<td class="val">{% if complaint.department and complaint.department.parent %}{{ complaint.department.parent.name_ar|default:complaint.department.parent.name_en }}{% elif complaint.department %}{{ complaint.department.name_ar|default:complaint.department.name_en }}{% else %}—{% endif %}</td>
|
|
<td class="lbl">تاريخ الإرسال</td>
|
|
<td class="val">{{ sent_to_dept_date|default:"—" }}</td>
|
|
</tr>
|
|
</table>
|
|
|
|
<!-- Section 3: Complaint Summary -->
|
|
<div class="section-title">مختصر الشكوى</div>
|
|
<div class="summary-box">{{ content_summary|default:complaint.description }}</div>
|
|
|
|
<!-- Section 4: Responsible Department -->
|
|
<div class="responsible-dept">قسم علاقات المرضى</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- QR Code + Notice (fixed bottom-left, table-aligned tops) -->
|
|
{% if qr_code_path %}
|
|
<div class="qr-block">
|
|
<table dir="ltr">
|
|
<tr>
|
|
<td>
|
|
<img src="{{ qr_code_path }}" alt="QR">
|
|
<div class="qr-label">للتحقق من صحة المستند</div>
|
|
</td>
|
|
<td class="qr-notice">
|
|
هذه الوثيقة صادرة إلكترونياً ولا تتطلب توقيعاً يدوياً.<br>
|
|
This document is electronically generated<br>
|
|
and does not require a signature.
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
</div>
|
|
{% endif %}
|
|
|
|
{% if stamp_path %}
|
|
<img class="stamp" src="{{ stamp_path }}" alt="">
|
|
{% endif %}
|
|
|
|
</body>
|
|
</html>
|