<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>تحويل طبي — {{ $referral->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; }

        .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; }

        @php $cfg = $referral->type_config; @endphp

        .header-stripe { height: 6px; background: {{ $cfg['color'] }}; }

        .header-body {
            padding: 18px 28px 14px;
            display: flex; align-items: center; justify-content: space-between;
            border-bottom: 1px solid #e2e8f0; gap: 16px;
        }

        .rx-wrap { text-align: center; flex-shrink: 0; }
        .rx-icon { font-size: 2.4rem; line-height: 1; }
        .rx-label { font-size: .65rem; color: #94a3b8; margin-top: 2px; }

        .doctor-info { flex: 1; text-align: center; }
        .doctor-name { font-size: 1.35rem; font-weight: 700; color: {{ $cfg['color'] }}; margin-bottom: 2px; }
        .doctor-specialty { font-size: .85rem; color: #475569; margin-bottom: 6px; }
        .doctor-meta { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 12px; font-size: .72rem; color: #64748b; }

        .logo-wrap { flex-shrink: 0; }
        .logo-img { width: 68px; height: 68px; object-fit: contain; border-radius: 10px; border: 1px solid #e2e8f0; }
        .logo-placeholder { width: 68px; height: 68px; background: {{ $cfg['color'] }}; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 1.8rem; }

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

        /* بانر نوع التحويل */
        .referral-banner {
            margin: 16px 28px 12px;
            background: {{ $cfg['bg'] }};
            border: 2px solid {{ $cfg['border'] }};
            border-radius: 12px;
            padding: 14px 20px;
            display: flex;
            align-items: center;
            gap: 14px;
        }
        .banner-icon { font-size: 2.4rem; flex-shrink: 0; }
        .banner-title { font-size: 1.15rem; font-weight: 700; color: {{ $cfg['color'] }}; }
        .banner-sub { font-size: .8rem; color: {{ $cfg['color'] }}; opacity: .75; margin-top: 2px; }
        .urgent-badge {
            margin-right: auto;
            background: #dc2626; color: #fff;
            padding: 4px 14px; border-radius: 20px;
            font-size: .82rem; font-weight: 700;
            display: inline-flex; align-items: center; gap: 5px;
        }

        /* قائمة الإجراءات */
        .content { padding: 0 28px 16px; flex: 1; }
        .items-list { list-style: none; }
        .item-row {
            display: flex; align-items: flex-start; gap: 14px;
            padding: 10px 14px; margin-bottom: 6px;
            background: {{ $cfg['bg'] }};
            border: 1px solid {{ $cfg['border'] }};
            border-radius: 10px;
        }
        .item-num {
            width: 26px; height: 26px;
            background: {{ $cfg['color'] }}; color: #fff;
            border-radius: 50%; display: flex; align-items: center; justify-content: center;
            font-size: .7rem; font-weight: 700; flex-shrink: 0; margin-top: 2px;
        }
        .item-content { flex: 1; }
        .item-name { font-size: .95rem; font-weight: 700; color: #1e293b; }
        .item-inst { font-size: .78rem; color: #475569; margin-top: 2px; font-style: italic; }
        .item-urgent { font-size: .72rem; background: #fee2e2; color: #991b1b; padding: 1px 8px; border-radius: 20px; font-weight: 600; }

        /* الملاحظات السريرية */
        .clinical-box { background: #fffbeb; border: 1px solid #fde68a; border-radius: 8px; padding: 10px 14px; font-size: .85rem; color: #78350f; margin: 0 28px 12px; }

        /* التذييل */
        .footer { border-top: 1px solid #e2e8f0; padding: 10px 28px; display: flex; align-items: flex-end; justify-content: space-between; background: #fafafa; }
        .footer-left { font-size: .65rem; color: #94a3b8; line-height: 1.7; }
        .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>

<div class="page">

    <div class="header-stripe"></div>

    {{-- الترويسة --}}
    <div class="header-body">
        <div class="rx-wrap">
            <div class="rx-icon">{{ $cfg['icon'] }}</div>
            <div class="rx-label">تحويل #{{ str_pad($referral->id, 4, '0', STR_PAD_LEFT) }}</div>
        </div>
        <div class="doctor-info">
            <div class="doctor-name">د. {{ $referral->doctor->user->name }}</div>
            <div class="doctor-specialty">
                {{ $referral->doctor->specialty }}
                @if($referral->doctor->experience_years)
                    &mdash; خبرة {{ $referral->doctor->experience_years }} سنة
                @endif
            </div>
            @if($referral->doctor->prescription_header)
                <div style="font-size:.72rem;color:#7c3aed;font-weight:600;margin-bottom:5px">{{ $referral->doctor->prescription_header }}</div>
            @endif
            <div class="doctor-meta">
                @if($referral->doctor->clinic_name)  <span>🏥 {{ $referral->doctor->clinic_name }}</span> @endif
                @if($referral->doctor->clinic_address)<span>📍 {{ $referral->doctor->clinic_address }}</span>@endif
                @if($referral->doctor->phone)         <span>📞 {{ $referral->doctor->phone }}</span>@endif
                @if($referral->doctor->license_number)<span>🪪 {{ $referral->doctor->license_number }}</span>@endif
            </div>
        </div>
        <div class="logo-wrap">
            @if($referral->doctor->logo)
                <img src="{{ asset('storage/'.$referral->doctor->logo) }}" class="logo-img">
            @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">{{ $referral->patient->user->name }}</div></div>
            @if($referral->patient->date_of_birth)
            <div class="pf"><div class="pf-label">العمر</div><div class="pf-value">{{ $referral->patient->date_of_birth->age }} سنة</div></div>
            @endif
            <div class="pf"><div class="pf-label">الجنس</div>
                <div class="pf-value">{{ $referral->patient->gender === 'male' ? 'ذكر' : ($referral->patient->gender === 'female' ? 'أنثى' : '—') }}</div>
            </div>
            @if($referral->patient->blood_type)
            <div class="pf"><div class="pf-label">فصيلة الدم</div><div class="pf-value" style="color:#dc2626">{{ $referral->patient->blood_type }}</div></div>
            @endif
            @if($referral->patient->user->phone)
            <div class="pf"><div class="pf-label">الهاتف</div><div class="pf-value">{{ $referral->patient->user->phone }}</div></div>
            @endif
            <div class="pf"><div class="pf-label">التاريخ</div><div class="pf-value">{{ $referral->created_at->format('Y/m/d') }}</div></div>
        </div>
    </div>

    {{-- بانر نوع التحويل --}}
    <div class="referral-banner">
        <div class="banner-icon">{{ $cfg['icon'] }}</div>
        <div>
            <div class="banner-title">{{ $referral->title }}</div>
            <div class="banner-sub">{{ $cfg['label'] }}</div>
        </div>
        @if($referral->is_urgent)
        <div class="urgent-badge">🔴 عاجل — يرجى التسريع</div>
        @endif
    </div>

    {{-- الإجراءات المطلوبة --}}
    <div class="content">
        <ul class="items-list">
            @foreach($referral->items as $i => $item)
            @if(!empty($item['name']))
            <li class="item-row">
                <div class="item-num">{{ $i + 1 }}</div>
                <div class="item-content">
                    <div class="item-name">{{ $item['name'] }}</div>
                    @if(!empty($item['instructions']))
                    <div class="item-inst">⚠ {{ $item['instructions'] }}</div>
                    @endif
                </div>
                @if(!empty($item['urgent']))
                <span class="item-urgent">🔴 عاجل</span>
                @endif
            </li>
            @endif
            @endforeach
        </ul>
    </div>

    {{-- الملاحظات السريرية --}}
    @if($referral->clinical_notes)
    <div class="clinical-box">
        <div style="font-size:.65rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:#92400e;margin-bottom:4px">
            ملاحظات سريرية للمختبر
        </div>
        {{ $referral->clinical_notes }}
    </div>
    @endif

    {{-- التذييل --}}
    <div class="footer">
        <div class="footer-left">
            <div>تاريخ الطباعة: {{ now()->format('Y/m/d — H:i') }}</div>
            @if($referral->doctor->prescription_footer)
            <div>{{ $referral->doctor->prescription_footer }}</div>
            @endif
        </div>
        <div class="sig-area">
            @if($referral->doctor->signature)
                <img src="{{ asset('storage/'.$referral->doctor->signature) }}" class="sig-img">
            @else
                <div class="sig-line"></div>
            @endif
            <div class="sig-label">توقيع الطبيب</div>
            <div class="sig-name">د. {{ $referral->doctor->user->name }}</div>
        </div>
    </div>

</div>

<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', $referral->patient_id) }}" class="tb-btn tb-back">← ملف المريض</a>
</div>

</body>
</html>
