<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>وصفة طبية — {{ $record->patient->user->name }}</title>
    <style>
        @page { size: A4; margin: 0; }

        * { box-sizing: border-box; margin: 0; padding: 0; }

        body {
            font-family: 'Segoe UI', Tahoma, Arial, sans-serif;
            background: #e8e8e8;
            direction: rtl;
            color: #1e293b;
        }

        /* ══ صفحة A4 ══ */
        .page {
            width: 210mm;
            min-height: 297mm;
            margin: 12mm auto;
            background: #fff;
            display: flex;
            flex-direction: column;
            box-shadow: 0 4px 30px rgba(0,0,0,.2);
            overflow: hidden;
        }

        /* ══ الترويسة — شريط علوي ملون ══ */
        .header-stripe {
            background: #1d4ed8;
            height: 6px;
            width: 100%;
        }

        /* ══ منطقة معلومات الطبيب ══ */
        .header-body {
            padding: 20px 28px 16px;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 20px;
            border-bottom: 1px solid #e2e8f0;
            text-align: center;
        }

        .logo-wrap {
            flex-shrink: 0;
        }
        .logo-img {
            width: 72px;
            height: 72px;
            object-fit: contain;
            border-radius: 10px;
            border: 1px solid #e2e8f0;
        }
        .logo-placeholder {
            width: 72px;
            height: 72px;
            background: #1d4ed8;
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 2rem;
            color: #fff;
        }

        .doctor-info {
            text-align: center;
        }
        .doctor-name {
            font-size: 1.45rem;
            font-weight: 700;
            color: #1d4ed8;
            margin-bottom: 3px;
        }
        .doctor-specialty {
            font-size: .88rem;
            color: #475569;
            margin-bottom: 8px;
        }
        .doctor-meta {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 6px 14px;
            font-size: .75rem;
            color: #64748b;
        }
        .doctor-meta span {
            display: flex;
            align-items: center;
            gap: 4px;
        }

        .rx-wrap {
            flex-shrink: 0;
            text-align: center;
        }
        .rx-text {
            font-size: 2.8rem;
            font-weight: 900;
            color: #1d4ed8;
            font-style: italic;
            line-height: 1;
        }
        .rx-num {
            font-size: .65rem;
            color: #94a3b8;
            margin-top: 2px;
        }

        /* ══ شريط المريض ══ */
        .patient-bar {
            background: #f8faff;
            border-bottom: 1px solid #e2e8f0;
            padding: 10px 28px;
        }
        .patient-grid {
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;
            gap: 6px;
        }
        .pf {
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        .pf-label {
            font-size: .62rem;
            color: #94a3b8;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: .06em;
            margin-bottom: 2px;
        }
        .pf-value {
            font-size: .88rem;
            font-weight: 700;
            color: #1e293b;
        }
        .pf-value.blood { color: #dc2626; }

        /* ══ المحتوى ══ */
        .content {
            padding: 16px 28px;
            flex: 1;
        }

        /* ── قسم ── */
        .sec {
            margin-bottom: 14px;
        }
        .sec-title {
            font-size: .65rem;
            font-weight: 700;
            color: #94a3b8;
            text-transform: uppercase;
            letter-spacing: .08em;
            margin-bottom: 5px;
            padding-bottom: 3px;
            border-bottom: 1px solid #f1f5f9;
        }

        /* ── المؤشرات الحيوية ── */
        .vitals {
            display: flex;
            gap: 8px;
            flex-wrap: wrap;
        }
        .vital {
            background: #f8faff;
            border: 1px solid #e2e8f0;
            border-radius: 8px;
            padding: 6px 14px;
            text-align: center;
            min-width: 70px;
        }
        .vital .v-l { font-size: .62rem; color: #94a3b8; }
        .vital .v-v { font-size: .9rem;  font-weight: 700; color: #1e293b; }

        /* ── التشخيص ── */
        .diagnosis-box {
            background: #eff6ff;
            border-right: 4px solid #1d4ed8;
            border-radius: 0 8px 8px 0;
            padding: 8px 14px;
            font-size: .9rem;
            font-weight: 700;
            color: #1e3a8a;
        }
        .complaint-text {
            font-size: .85rem;
            color: #475569;
            background: #f8faff;
            padding: 6px 12px;
            border-radius: 6px;
        }

        /* ── الوصفة ── */
        .med-table {
            width: 100%;
            border-collapse: collapse;
            font-size: .82rem;
        }
        .med-table thead tr {
            background: #1d4ed8;
            color: #fff;
        }
        .med-table thead th {
            padding: 6px 10px;
            font-weight: 600;
            font-size: .72rem;
        }
        .med-table tbody tr:nth-child(even) {
            background: #f8faff;
        }
        .med-table tbody tr:nth-child(odd) {
            background: #fff;
        }
        .med-table tbody td {
            padding: 7px 10px;
            border-bottom: 1px solid #f1f5f9;
            vertical-align: middle;
        }
        .med-num {
            width: 22px;
            height: 22px;
            background: #1d4ed8;
            color: #fff;
            border-radius: 50%;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-size: .65rem;
            font-weight: 700;
        }
        .med-name {
            font-weight: 700;
            color: #1e293b;
        }
        .med-sub {
            font-size: .72rem;
            color: #64748b;
            font-style: italic;
        }

        /* ── التحاليل ── */
        .tests-list {
            display: flex;
            flex-wrap: wrap;
            gap: 6px;
        }
        .test-chip {
            background: #fff5f5;
            border: 1px solid #fecaca;
            border-radius: 20px;
            padding: 4px 14px;
            font-size: .8rem;
            font-weight: 700;
            color: #991b1b;
            display: flex;
            align-items: center;
            gap: 5px;
        }
        .test-note {
            font-size: .68rem;
            color: #b45309;
            margin-top: 2px;
            padding-right: 8px;
        }

        /* ── التعليمات ── */
        .instructions-box {
            background: #fffbeb;
            border: 1px solid #fde68a;
            border-radius: 6px;
            padding: 8px 12px;
            font-size: .82rem;
            color: #78350f;
        }

        /* ── المتابعة ── */
        .followup {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            background: #f0fdf4;
            border: 1px solid #86efac;
            border-radius: 8px;
            padding: 6px 14px;
            font-size: .82rem;
            color: #14532d;
            font-weight: 600;
        }

        /* ══ التذييل ══ */
        .footer {
            border-top: 1px solid #e2e8f0;
            padding: 12px 28px;
            display: flex;
            align-items: flex-end;
            justify-content: space-between;
        }
        .footer-left {
            font-size: .68rem;
            color: #94a3b8;
            line-height: 1.6;
        }
        .sig-area {
            text-align: center;
        }
        .sig-img {
            height: 44px;
            max-width: 130px;
            object-fit: contain;
            display: block;
            margin: 0 auto 4px;
        }
        .sig-line {
            width: 130px;
            border-top: 1px solid #94a3b8;
            margin: 0 auto 4px;
        }
        .sig-name {
            font-size: .75rem;
            font-weight: 700;
            color: #1e293b;
        }
        .sig-label {
            font-size: .62rem;
            color: #64748b;
        }

        /* ══ شريط أدوات الطباعة ══ */
        .toolbar {
            position: fixed;
            bottom: 20px;
            left: 50%;
            transform: translateX(-50%);
            background: #1e293b;
            border-radius: 50px;
            padding: 10px 18px;
            display: flex;
            align-items: center;
            gap: 10px;
            box-shadow: 0 8px 30px rgba(0,0,0,.35);
            z-index: 999;
        }
        .tb-btn {
            padding: 8px 22px;
            border-radius: 30px;
            border: none;
            font-weight: 700;
            cursor: pointer;
            font-size: .88rem;
            display: flex;
            align-items: center;
            gap: 6px;
            text-decoration: none;
            font-family: inherit;
        }
        .tb-print  { background: #2563eb; color: #fff; }
        .tb-close  { background: rgba(255,255,255,.1); color: rgba(255,255,255,.8); }
        .tb-back   { background: rgba(255,255,255,.06); color: rgba(255,255,255,.5); font-size: .8rem; }

        /* ══ طباعة ══ */
        @media print {
            body { background: #fff; }
            .page    { margin: 0; box-shadow: none; width: 100%; }
            .toolbar { display: none; }
        }
    </style>
</head>
<body>

@php
    $doctor  = $record->doctor;
    $patient = $record->patient;
    $hasMeds  = $record->prescriptions && count(array_filter($record->prescriptions ?? [], fn($p) => !empty($p['medicine'])));
    $hasTests = $record->lab_tests && count(array_filter($record->lab_tests ?? [], fn($t) => !empty($t['test'])));
    $hasVitals= $record->blood_pressure || $record->temperature || $record->pulse || $record->oxygen_saturation || $record->weight;
@endphp

<div class="page">

    {{-- شريط أزرق علوي --}}
    <div class="header-stripe"></div>

    {{-- ══ الترويسة — مركزية ══ --}}
    <div class="header-body">

        {{-- Rx على اليسار --}}
        <div class="rx-wrap">
            <div class="rx-text">Rx</div>
            <div class="rx-num">#{{ str_pad($record->id, 5, '0', STR_PAD_LEFT) }}</div>
        </div>

        {{-- معلومات الطبيب في المنتصف --}}
        <div class="doctor-info">
            <div class="doctor-name">د. {{ $doctor->user->name }}</div>
            <div class="doctor-specialty">
                {{ $doctor->specialty }}
                @if($doctor->experience_years)
                    &mdash; خبرة {{ $doctor->experience_years }} سنة
                @endif
            </div>
            @if($doctor->prescription_header)
                <div style="font-size:.75rem;color:#7c3aed;font-weight:600;margin-bottom:6px">
                    {{ $doctor->prescription_header }}
                </div>
            @endif
            <div class="doctor-meta">
                @if($doctor->clinic_name)
                    <span>🏥 {{ $doctor->clinic_name }}</span>
                @endif
                @if($doctor->clinic_address)
                    <span>📍 {{ $doctor->clinic_address }}</span>
                @endif
                @if($doctor->phone)
                    <span>📞 {{ $doctor->phone }}</span>
                @endif
                @if($doctor->city)
                    <span>🌍 {{ $doctor->city }}</span>
                @endif
                @if($doctor->license_number)
                    <span>🪪 {{ $doctor->license_number }}</span>
                @endif
                @if($doctor->website)
                    <span>🌐 {{ $doctor->website }}</span>
                @endif
            </div>
        </div>

        {{-- الشعار على اليمين --}}
        <div class="logo-wrap">
            @if($doctor->logo)
                <img src="{{ asset('storage/'.$doctor->logo) }}" class="logo-img" alt="شعار">
            @else
                <div class="logo-placeholder">🏥</div>
            @endif
        </div>

    </div>

    {{-- ══ شريط المريض ══ --}}
    <div class="patient-bar">
        <div class="patient-grid">
            <div class="pf">
                <div class="pf-label">اسم المريض</div>
                <div class="pf-value">{{ $patient->user->name }}</div>
            </div>
            @if($patient->date_of_birth)
            <div class="pf">
                <div class="pf-label">العمر</div>
                <div class="pf-value">{{ $patient->date_of_birth->age }} سنة</div>
            </div>
            @endif
            <div class="pf">
                <div class="pf-label">الجنس</div>
                <div class="pf-value">{{ $patient->gender === 'male' ? 'ذكر' : ($patient->gender === 'female' ? 'أنثى' : '—') }}</div>
            </div>
            @if($patient->blood_type)
            <div class="pf">
                <div class="pf-label">فصيلة الدم</div>
                <div class="pf-value blood">{{ $patient->blood_type }}</div>
            </div>
            @endif
            @if($patient->user->phone)
            <div class="pf">
                <div class="pf-label">الهاتف</div>
                <div class="pf-value">{{ $patient->user->phone }}</div>
            </div>
            @endif
            <div class="pf">
                <div class="pf-label">تاريخ الزيارة</div>
                <div class="pf-value">{{ $record->visit_date->format('Y/m/d') }}</div>
            </div>
        </div>
    </div>

    {{-- ══ المحتوى ══ --}}
    <div class="content">

        {{-- المؤشرات الحيوية — فقط إذا كانت موجودة --}}
        @if($hasVitals)
        <div class="sec">
            <div class="sec-title">المؤشرات الحيوية</div>
            <div class="vitals">
                @if($record->blood_pressure)
                <div class="vital">
                    <div class="v-l">الضغط</div>
                    <div class="v-v">{{ $record->blood_pressure }}</div>
                </div>
                @endif
                @if($record->temperature)
                <div class="vital">
                    <div class="v-l">الحرارة</div>
                    <div class="v-v">{{ $record->temperature }}°</div>
                </div>
                @endif
                @if($record->pulse)
                <div class="vital">
                    <div class="v-l">النبض</div>
                    <div class="v-v">{{ $record->pulse }}</div>
                </div>
                @endif
                @if($record->oxygen_saturation)
                <div class="vital">
                    <div class="v-l">O₂</div>
                    <div class="v-v">{{ $record->oxygen_saturation }}%</div>
                </div>
                @endif
                @if($record->weight)
                <div class="vital">
                    <div class="v-l">الوزن</div>
                    <div class="v-v">{{ $record->weight }}kg</div>
                </div>
                @endif
            </div>
        </div>
        @endif

        {{-- الشكوى — فقط إذا كانت موجودة --}}
        @if($record->chief_complaint)
        <div class="sec">
            <div class="sec-title">الشكوى الرئيسية</div>
            <div class="complaint-text">{{ $record->chief_complaint }}</div>
        </div>
        @endif

        {{-- التشخيص --}}
        <div class="sec">
            <div class="sec-title">التشخيص</div>
            <div class="diagnosis-box">{{ $record->diagnosis }}</div>
        </div>

        {{-- الوصفة الطبية — فقط إذا كانت موجودة --}}
        @if($hasMeds)
        <div class="sec">
            <div class="sec-title">الوصفة الطبية</div>
            <table class="med-table">
                <thead>
                    <tr>
                        <th style="width:4%">#</th>
                        <th style="width:30%">الدواء</th>
                        <th style="width:18%">الجرعة</th>
                        <th style="width:22%">طريقة الاستخدام</th>
                        <th style="width:14%">المدة</th>
                        <th style="width:12%">تعليمات</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($record->prescriptions as $i => $med)
                    @if(!empty($med['medicine']))
                    <tr>
                        <td><span class="med-num">{{ $i + 1 }}</span></td>
                        <td>
                            <div class="med-name">{{ $med['medicine'] }}</div>
                        </td>
                        <td>{{ $med['dose'] ?? '—' }}</td>
                        <td>{{ $med['times'] ?? '—' }}</td>
                        <td>{{ $med['duration'] ?? '—' }}</td>
                        <td>
                            @if(!empty($med['instructions']))
                                <span class="med-sub">{{ $med['instructions'] }}</span>
                            @else
                                —
                            @endif
                        </td>
                    </tr>
                    @endif
                    @endforeach
                </tbody>
            </table>
        </div>
        @endif

        {{-- التحاليل — فقط إذا كانت موجودة --}}
        @if($hasTests)
        <div class="sec">
            <div class="sec-title">طلبات التحليل</div>
            <div class="tests-list">
                @foreach($record->lab_tests as $test)
                @if(!empty($test['test']))
                <div>
                    <div class="test-chip">
                        🔬 {{ $test['test'] }}
                    </div>
                    @if(!empty($test['instructions']))
                    <div class="test-note">⚠ {{ $test['instructions'] }}</div>
                    @endif
                </div>
                @endif
                @endforeach
            </div>
        </div>
        @endif

        {{-- التعليمات — فقط إذا كانت موجودة --}}
        @if($record->instructions)
        <div class="sec">
            <div class="sec-title">تعليمات للمريض</div>
            <div class="instructions-box">{{ $record->instructions }}</div>
        </div>
        @endif

        {{-- موعد المتابعة — فقط إذا كان موجوداً --}}
        @if($record->next_visit_date)
        <div class="sec">
            <span class="followup">
                📅 موعد المتابعة:
                <strong>{{ $record->next_visit_date->format('Y/m/d') }}</strong>
                @if(!$record->next_visit_date->isPast())
                    — بعد {{ now()->diffInDays($record->next_visit_date) }} يوم
                @endif
            </span>
        </div>
        @endif

    </div>

    {{-- ══ التذييل ══ --}}
    <div class="footer">
        <div class="footer-left">
            <div>تاريخ الطباعة: {{ now()->format('Y/m/d — H:i') }}</div>
            @if($doctor->prescription_footer)
            <div>{{ $doctor->prescription_footer }}</div>
            @endif
        </div>

        <div class="sig-area">
            @if($doctor->signature)
                <img src="{{ asset('storage/'.$doctor->signature) }}"
                     class="sig-img" alt="توقيع">
            @else
                <div class="sig-line"></div>
            @endif
            <div class="sig-label">توقيع الطبيب</div>
            <div class="sig-name">د. {{ $doctor->user->name }}</div>
        </div>
    </div>

</div>{{-- end page --}}

{{-- ══ شريط الأدوات ══ --}}
<div class="toolbar">
    <button class="tb-btn tb-print" onclick="window.print()">
        🖨 طباعة الوصفة
    </button>
    <button class="tb-btn tb-close" onclick="window.close()">
        ✕ إغلاق
    </button>
    <a href="{{ route('doctor.archive.patient', $record->patient_id) }}"
       class="tb-btn tb-back">
        ← ملف المريض
    </a>
</div>

</body>
</html>
