195 lines
5.5 KiB
HTML
195 lines
5.5 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;
|
|
--blue-light: #007bbd;
|
|
--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;
|
|
}
|
|
|
|
/* === Header === */
|
|
.page-header {
|
|
position: relative;
|
|
height: 22mm;
|
|
margin: 8mm 20mm 0 20mm;
|
|
}
|
|
.header-ar {
|
|
position: absolute;
|
|
left: 0;
|
|
top: 4mm;
|
|
text-align: left;
|
|
}
|
|
.header-logo-wrap {
|
|
position: absolute;
|
|
left: 50%;
|
|
top: 0;
|
|
transform: translateX(-50%);
|
|
text-align: center;
|
|
}
|
|
.header-en {
|
|
position: absolute;
|
|
right: 0;
|
|
top: 4mm;
|
|
text-align: right;
|
|
}
|
|
.header-logo {
|
|
width: 55px;
|
|
height: auto;
|
|
object-fit: contain;
|
|
}
|
|
.header-hospital-name {
|
|
font-size: 14px;
|
|
font-weight: 700;
|
|
color: var(--blue);
|
|
}
|
|
.header-cr {
|
|
font-size: 9px;
|
|
font-weight: 700;
|
|
color: var(--blue);
|
|
text-align: center;
|
|
}
|
|
.header-line {
|
|
height: 2px;
|
|
background: var(--blue);
|
|
margin: 8px 20mm 0 20mm;
|
|
}
|
|
|
|
/* === Watermark === */
|
|
.watermark {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
opacity: 0.04;
|
|
pointer-events: none;
|
|
z-index: 0;
|
|
}
|
|
.watermark img {
|
|
width: 300px;
|
|
height: auto;
|
|
}
|
|
|
|
/* === Footer === */
|
|
.page-footer {
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
}
|
|
.footer-line {
|
|
height: 2px;
|
|
background: var(--blue);
|
|
margin: 0 15mm;
|
|
}
|
|
.footer-content {
|
|
padding: 6px 15mm 10mm 15mm;
|
|
text-align: center;
|
|
font-size: 8px;
|
|
color: var(--muted);
|
|
line-height: 1.8;
|
|
}
|
|
.footer-ar { direction: rtl; }
|
|
.footer-en { direction: ltr; }
|
|
|
|
/* === Body === */
|
|
.form-body {
|
|
padding: 8mm 20mm;
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
|
|
.data-table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
margin-top: 12px;
|
|
}
|
|
.data-table td {
|
|
border: 1px solid var(--border);
|
|
font-size: 11px;
|
|
padding: 8px 12px;
|
|
}
|
|
.data-table .lbl {
|
|
background: var(--surface);
|
|
color: var(--body);
|
|
font-weight: 700;
|
|
width: 15%;
|
|
}
|
|
.data-table .val {
|
|
color: var(--ink);
|
|
width: 35%;
|
|
}
|
|
.data-table .text-cell {
|
|
padding: 12px;
|
|
line-height: 2;
|
|
text-align: justify;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<div class="page">
|
|
{% include "complaints/partials/pdf_letterhead_header.html" %}
|
|
<div class="watermark"><img src="{{ logo_path }}" alt=""></div>
|
|
|
|
<div class="form-body">
|
|
<table class="data-table">
|
|
<tr>
|
|
<td class="lbl">رقم الشكوى</td>
|
|
<td class="val">{{ complaint.reference_number }}</td>
|
|
<td class="lbl">تاريخ الإرسال</td>
|
|
<td class="val">{{ sent_date }}</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="lbl">القسم</td>
|
|
<td class="val">{{ department_name|default:"—" }}</td>
|
|
<td class="lbl">الموظف المشكو عليه</td>
|
|
<td class="val">{{ staff_name|default:"—" }}</td>
|
|
</tr>
|
|
{% if staff_title %}
|
|
<tr>
|
|
<td class="lbl">الوظيفة</td>
|
|
<td class="val">{{ staff_title }}</td>
|
|
<td class="lbl"></td>
|
|
<td class="val"></td>
|
|
</tr>
|
|
{% endif %}
|
|
</table>
|
|
|
|
<table class="data-table">
|
|
<tr>
|
|
<td colspan="4" class="text-cell">{{ complaint.description }}</td>
|
|
</tr>
|
|
</table>
|
|
</div>
|
|
|
|
{% include "complaints/partials/pdf_letterhead_footer.html" %}
|
|
</div>
|
|
|
|
</body>
|
|
</html>
|