<!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;
            page-break-after: always;
        }
        .page:last-child { page-break-after: auto; }

        /* === Header === */
        .page-header {
            padding: 12mm 15mm 0 15mm;
        }
        .header-content {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0 15mm;
        }
        .header-side {
            width: 50%;
        }
        .header-side--ar {
            text-align: right;
            direction: rtl;
        }
        .header-logo {
            width: 90px;
            height: auto;
            object-fit: contain;
        }
        .header-hospital-name {
            font-size: 14px;
            color: var(--blue);
        }
        .header-branch {
            font-size: 10px;
            color: var(--muted);
        }
        .header-cr {
            font-size: 9px;
            color: var(--muted);
        }
        .header-line {
            height: 2px;
            background: var(--blue);
            margin: 8px 15mm 0 15mm;
        }

        /* === Watermark === */
        .watermark {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            opacity: 0.04;
            pointer-events: none;
            z-index: 0;
        }
        .watermark img {
            width: 180px;
            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;
        }

        /* === Form Body === */
        .form-body {
            padding: 8mm 15mm;
            position: relative;
            z-index: 1;
        }

        .form-title {
            text-align: center;
            font-size: 16px;
            color: var(--blue);
            padding: 10px 0 16px 0;
        }

        .form-section-header {
            font-size: 12px;
            color: var(--blue);
            background: var(--surface);
            padding: 6px 12px;
            border-right: 3px solid var(--blue);
            margin-top: 12px;
            margin-bottom: 2px;
        }

        .form-row {
            display: flex;
            border-bottom: 1px solid var(--border);
        }
        .form-row:last-child {
            border-bottom: none;
        }
        .form-label {
            width: 35%;
            padding: 8px 12px;
            font-size: 11px;
            color: var(--body);
            background: var(--surface);
        }
        .form-value {
            width: 65%;
            padding: 8px 12px;
            font-size: 11px;
            color: var(--ink);
        }

        .form-text-block {
            padding: 12px;
            font-size: 11px;
            color: var(--ink);
            line-height: 2;
            text-align: justify;
        }

        .signature-block {
            margin-top: 24px;
            padding-top: 16px;
            border-top: 1px solid var(--border);
            text-align: center;
        }
        .signature-label {
            font-size: 11px;
            color: var(--blue);
        }
        .signature-line {
            width: 200px;
            border-bottom: 1px solid var(--border);
            margin: 30px auto 0 auto;
            height: 1px;
        }
        .signature-stamp-text {
            font-size: 9px;
            color: var(--muted);
            margin-top: 8px;
        }
    </style>
</head>
<body>

    <!-- Page 1: Complaint Forwarding Form -->
    <div class="page">
        {% include "complaints/partials/pdf_letterhead_header.html" %}
        <div class="watermark"><img src="{{ logo_path }}" alt=""></div>

        <div class="form-body">
            <div class="form-title">نموذج الشكوى</div>

            <div class="form-section-header">بيانات المشفى</div>
            <div class="form-row">
                <div class="form-label">رقم الملف</div>
                <div class="form-value">{{ complaint.reference_number|default:"—" }}</div>
            </div>
            <div class="form-row">
                <div class="form-label">الاسم</div>
                <div class="form-value">{{ complainant_name|default:"—" }}</div>
            </div>
            <div class="form-row">
                <div class="form-label">جهة الادعاء</div>
                <div class="form-value">{{ source_name|default:"—" }}</div>
            </div>
            <div class="form-row">
                <div class="form-label">تاريخ تقديم الشكوى</div>
                <div class="form-value">{{ submission_date }}</div>
            </div>
            <div class="form-row">
                <div class="form-label">تاريخ الحادثة</div>
                <div class="form-value">{{ incident_date }}</div>
            </div>
            <div class="form-row">
                <div class="form-label">رقم الحالة</div>
                <div class="form-value">{{ complaint.reference_number|default:"—" }}</div>
            </div>

            <div class="form-section-header">بيانات المشفى</div>
            <div class="form-row">
                <div class="form-label">القسم</div>
                <div class="form-value">{{ department_name|default:"—" }}</div>
            </div>
            <div class="form-row">
                <div class="form-label">اسم الموظف</div>
                <div class="form-value">{{ accused_staff_name|default:"—" }}</div>
            </div>
            <div class="form-row">
                <div class="form-label">الوظيفة</div>
                <div class="form-value">{{ accused_staff_title|default:"—" }}</div>
            </div>
            <div class="form-row">
                <div class="form-label">تاريخ إرسال الشكوى</div>
                <div class="form-value">{{ sent_to_dept_date }}</div>
            </div>

            <div class="form-section-header">مختصر الشكوى</div>
            <div class="form-text-block">
                {{ content_summary }}
            </div>

            <div class="signature-block">
                <div class="signature-label">قسم علاقات المرضى</div>
                <div class="signature-line"></div>
                <div class="signature-stamp-text">التوقيع والختم</div>
            </div>
        </div>

        {% include "complaints/partials/pdf_letterhead_footer.html" %}
    </div>

    <!-- Page 2: Complaint Response Form -->
    <div class="page">
        {% include "complaints/partials/pdf_letterhead_header.html" %}
        <div class="watermark"><img src="{{ logo_path }}" alt=""></div>

        <div class="form-body">
            <div class="form-title">نموذج رد الشكوى</div>

            <div class="form-section-header">بيانات رد الشكوى</div>
            <div class="form-row">
                <div class="form-label">اسم الموظف</div>
                <div class="form-value">{{ accused_staff_name|default:"—" }}</div>
            </div>
            <div class="form-row">
                <div class="form-label">الوظيفة</div>
                <div class="form-value">{{ accused_staff_title|default:"—" }}</div>
            </div>
            <div class="form-row">
                <div class="form-label">القسم</div>
                <div class="form-value">{{ department_name|default:"—" }}</div>
            </div>
            <div class="form-row">
                <div class="form-label">تاريخ رد الشكوى</div>
                <div class="form-value">{{ response_date }}</div>
            </div>
            <div class="form-row">
                <div class="form-label">تاريخ إرسال الشكوى</div>
                <div class="form-value">{{ sent_to_dept_date }}</div>
            </div>

            <div class="form-section-header">مختصر الرد</div>
            <div class="form-text-block">
                {% if dept_response_summary %}
                {{ dept_response_summary }}
                {% else %}
                لم يتم تسجيل رد من القسم بعد.
                {% endif %}
            </div>

            <div class="signature-block">
                <div class="signature-label">قسم علاقات المرضى</div>
                <div class="signature-line"></div>
                <div class="signature-stamp-text">التوقيع والختم</div>
            </div>
        </div>

        {% include "complaints/partials/pdf_letterhead_footer.html" %}
    </div>

</body>
</html>
