<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>℞ {{ $prescription->ref_no }}</title>
<style>
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
    font-family: 'Segoe UI', Arial, sans-serif;
    font-size: 13px;
    color: #1e293b;
    background: #fff;
    padding: 0;
}

/* ── Force backgrounds to print ──────────────────────── */
* { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }

/* ── Page shell ───────────────────────────────────────── */
.page {
    max-width: 800px;
    margin: 0 auto;
    padding: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* ── Letterhead ───────────────────────────────────────── */
.letterhead {
    background: linear-gradient(135deg, #1a3a5c 0%, #2980b9 60%, #3498db 100%);
    color: #fff;
    padding: 22px 32px 18px;
    position: relative;
    overflow: hidden;
}
.letterhead::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle, rgba(255,255,255,.08) 1px, transparent 1px);
    background-size: 18px 18px;
    pointer-events: none;
}
.letterhead-inner {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 20px;
}
.clinic-icon {
    width: 58px; height: 58px;
    background: rgba(255,255,255,.18);
    border: 1.5px solid rgba(255,255,255,.32);
    border-radius: 14px;
    display: flex; align-items: center; justify-content: center;
    font-size: 30px; font-weight: 900; font-family: serif;
    flex-shrink: 0;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.25);
}
.clinic-name {
    font-size: 22px; font-weight: 800; letter-spacing: -.3px;
    margin-bottom: 3px;
}
.clinic-contact {
    font-size: 11.5px; color: rgba(255,255,255,.82);
    display: flex; flex-wrap: wrap; gap: 12px;
}
.clinic-contact span { display: flex; align-items: center; gap: 4px; }

/* ── Rx strip ─────────────────────────────────────────── */
.rx-strip {
    background: #f8fafc;
    border-bottom: 2px solid #e2e8f0;
    padding: 12px 32px;
    display: flex;
    align-items: center;
    gap: 14px;
}
.rx-label {
    background: linear-gradient(135deg, #1a3a5c, #2980b9);
    color: #fff;
    padding: 4px 14px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .5px;
}
.rx-ref {
    font-size: 16px;
    font-weight: 800;
    color: #1a3a5c;
}
.rx-date {
    margin-left: auto;
    font-size: 11.5px;
    color: #64748b;
}
.rx-status {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 3px 10px; border-radius: 20px;
    font-size: 11px; font-weight: 700;
}

/* ── Body content ─────────────────────────────────────── */
.body-content { padding: 22px 32px; flex: 1; }

/* ── Info grid ────────────────────────────────────────── */
.info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 18px;
}
.info-box {
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    overflow: hidden;
}
.info-box-hd {
    background: #f1f5f9;
    padding: 5px 12px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: #64748b;
    border-bottom: 1px solid #e2e8f0;
}
.info-box-body {
    padding: 10px 12px;
}
.info-name { font-size: 14px; font-weight: 700; color: #1e293b; margin-bottom: 2px; }
.info-sub { font-size: 11.5px; color: #64748b; }

/* ── Diagnosis ────────────────────────────────────────── */
.diag-box {
    background: #fefce8;
    border: 1px solid #fde68a;
    border-left: 4px solid #f59e0b;
    border-radius: 8px;
    padding: 10px 14px;
    margin-bottom: 18px;
    font-size: 13px;
    color: #78350f;
    white-space: pre-wrap;
}
.diag-label {
    font-size: 10px; font-weight: 700; text-transform: uppercase;
    letter-spacing: .5px; color: #92400e; margin-bottom: 4px;
}

/* ── Medicine list ────────────────────────────────────── */
.med-section-hd {
    font-size: 11px; font-weight: 700; text-transform: uppercase;
    letter-spacing: .5px; color: #475569;
    border-bottom: 2px solid #e2e8f0;
    padding-bottom: 7px; margin-bottom: 12px;
}
.med-item {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    padding: 12px 0;
    border-bottom: 1px dashed #e9eef3;
}
.med-item:last-child { border-bottom: none; }
.med-num {
    width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0;
    background: linear-gradient(135deg, #1a3a5c, #2980b9);
    color: #fff; font-weight: 800; font-size: 12px;
    display: flex; align-items: center; justify-content: center;
}
.med-name { font-size: 14px; font-weight: 700; color: #1e293b; margin-bottom: 5px; }
.med-pills { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 4px; }
.med-pill {
    display: inline-flex; align-items: center; gap: 3px;
    background: #f1f5f9; border: 1px solid #e2e8f0;
    border-radius: 10px; padding: 1px 9px;
    font-size: 11px; color: #475569; font-weight: 600;
}
.med-instr { font-size: 11.5px; color: #64748b; font-style: italic; margin-top: 2px; }

.med-empty {
    text-align: center; padding: 24px;
    color: #94a3b8; font-size: 13px;
    border: 1px dashed #e2e8f0; border-radius: 8px;
}

/* ── Notes ────────────────────────────────────────────── */
.notes-box {
    background: #f8fafc; border: 1px solid #e2e8f0;
    border-radius: 8px; padding: 10px 14px;
    margin-top: 16px;
    font-size: 13px; color: #334155; white-space: pre-wrap;
}
.notes-label {
    font-size: 10px; font-weight: 700; text-transform: uppercase;
    letter-spacing: .5px; color: #64748b; margin-bottom: 4px;
}

/* ── Signature row ────────────────────────────────────── */
.sig-row {
    display: flex;
    justify-content: flex-end;
    margin-top: 36px;
    padding-top: 12px;
}
.sig-block { text-align: center; }
.sig-line {
    width: 180px; border-top: 1.5px solid #334155;
    margin-bottom: 5px;
}
.sig-name { font-size: 13px; font-weight: 700; color: #1e293b; }
.sig-spec { font-size: 11px; color: #64748b; margin-top: 1px; }

/* ── Footer ───────────────────────────────────────────── */
.footer {
    margin-top: 22px;
    padding: 10px 32px;
    border-top: 1px solid #e2e8f0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 10.5px;
    color: #94a3b8;
    background: #f8fafc;
}

/* ── Print overrides ──────────────────────────────────── */
@media print {
    @page { margin: 0; }
    body { padding: 0; }
    .page { max-width: 100%; }
}
</style>
</head>
<body>
@php
$statusColors = ['active' => '#27ae60', 'completed' => '#3498db', 'cancelled' => '#e74c3c'];
$sc = $statusColors[$prescription->status] ?? '#95a5a6';
@endphp

<div class="page">

    {{-- Letterhead --}}
    <div class="letterhead">
        <div class="letterhead-inner">
            <div class="clinic-icon">℞</div>
            <div>
                <div class="clinic-name">{{ $business->name ?? 'Vet Clinic' }}</div>
                <div class="clinic-contact">
                    @if(!empty($business->mobile))
                    <span>📞 {{ $business->mobile }}</span>
                    @endif
                    @if(!empty($business->email))
                    <span>✉ {{ $business->email }}</span>
                    @endif
                    @if(!empty($business->city))
                    <span>📍 {{ $business->city }}</span>
                    @endif
                </div>
            </div>
        </div>
    </div>

    {{-- Rx strip --}}
    <div class="rx-strip">
        <span class="rx-label">PRESCRIPTION</span>
        <span class="rx-ref">{{ $prescription->ref_no }}</span>
        <span class="rx-status" style="background:{{ $sc }}22;color:{{ $sc }};border:1px solid {{ $sc }}44;">
            ● {{ ucfirst($prescription->status) }}
        </span>
        <span class="rx-date">
            Prescribed: {{ optional($prescription->prescribed_date)->format('d M Y') ?? '—' }}
            @if($prescription->valid_until)
            &nbsp;·&nbsp; Valid until: {{ optional($prescription->valid_until)->format('d M Y') }}
            @endif
        </span>
    </div>

    {{-- Body --}}
    <div class="body-content">

        {{-- Patient / Owner / Doctor grid --}}
        <div class="info-grid">
            {{-- Patient --}}
            <div class="info-box">
                <div class="info-box-hd">🐾 Patient (Pet)</div>
                <div class="info-box-body">
                    <div class="info-name">{{ optional($prescription->pet)->petname ?? '—' }}</div>
                    <div class="info-sub">
                        {{ optional($prescription->pet)->species }}
                        {{ optional($prescription->pet)->breed ? '· ' . $prescription->pet->breed : '' }}
                    </div>
                    @if(optional($prescription->pet)->color)
                    <div class="info-sub">Color: {{ $prescription->pet->color }}</div>
                    @endif
                    @if(optional($prescription->pet)->gender)
                    <div class="info-sub">{{ ucfirst($prescription->pet->gender) }}</div>
                    @endif
                    @if(optional($prescription->pet)->weight_kg)
                    <div class="info-sub">Weight: {{ $prescription->pet->weight_kg }} kg</div>
                    @endif
                </div>
            </div>

            {{-- Owner --}}
            <div class="info-box">
                <div class="info-box-hd">👤 Owner</div>
                <div class="info-box-body">
                    <div class="info-name">{{ optional($prescription->owner)->name ?? '—' }}</div>
                    @if(optional($prescription->owner)->mobile)
                    <div class="info-sub">{{ $prescription->owner->mobile }}</div>
                    @endif
                    @if(optional($prescription->owner)->email)
                    <div class="info-sub">{{ $prescription->owner->email }}</div>
                    @endif
                </div>
            </div>

            {{-- Doctor --}}
            @if(optional($prescription->doctor)->name)
            <div class="info-box">
                <div class="info-box-hd">👨‍⚕️ Prescribing Doctor</div>
                <div class="info-box-body">
                    <div class="info-name">{{ $prescription->doctor->name }}</div>
                    @if($prescription->doctor->specialization)
                    <div class="info-sub">{{ $prescription->doctor->specialization }}</div>
                    @endif
                </div>
            </div>
            @endif

            {{-- Appointment reference --}}
            @if($prescription->appointment_id)
            <div class="info-box">
                <div class="info-box-hd">📅 Appointment</div>
                <div class="info-box-body">
                    <div class="info-sub">Ref: #{{ $prescription->appointment_id }}</div>
                    @if(optional($prescription->appointment)->appointment_date)
                    <div class="info-sub">Date: {{ optional($prescription->appointment->appointment_date)->format('d M Y') }}</div>
                    @endif
                </div>
            </div>
            @endif
        </div>

        {{-- Diagnosis --}}
        @if($prescription->diagnosis)
        <div class="diag-box">
            <div class="diag-label">🔬 Diagnosis / Clinical Findings</div>
            {{ $prescription->diagnosis }}
        </div>
        @endif

        {{-- Medicine list --}}
        <div class="med-section-hd">💊 Medicines Prescribed</div>

        @forelse($prescription->items as $i => $item)
        <div class="med-item">
            <div class="med-num">{{ $i + 1 }}</div>
            <div style="flex:1;min-width:0;">
                <div class="med-name">{{ $item->medicine_name }}</div>
                <div class="med-pills">
                    @if($item->dosage)
                    <span class="med-pill">⚗ {{ $item->dosage }}</span>
                    @endif
                    @if($item->frequency)
                    <span class="med-pill">🕐 {{ $item->frequency }}</span>
                    @endif
                    @if($item->duration_days)
                    <span class="med-pill">📅 {{ $item->duration_days }} days</span>
                    @endif
                    @if($item->quantity && $item->quantity > 1)
                    <span class="med-pill"># Qty: {{ $item->quantity }}</span>
                    @endif
                </div>
                @if($item->instructions)
                <div class="med-instr">ℹ {{ $item->instructions }}</div>
                @endif
            </div>
        </div>
        @empty
        <div class="med-empty">No medicines prescribed.</div>
        @endforelse

        {{-- Notes --}}
        @if($prescription->notes)
        <div class="notes-box">
            <div class="notes-label">📝 Additional Notes</div>
            {{ $prescription->notes }}
        </div>
        @endif

        {{-- Next Visit (auto-printed when the consultation set a next visit) --}}
        @php $apt = $prescription->appointment ?? null; @endphp
        @if($apt && $apt->next_visit_date)
        <div style="margin:18px 0;padding:12px 16px;background:#eef2ff;border:1.5px dashed #6366f1;border-radius:8px;">
            <div style="display:flex;align-items:center;gap:8px;margin-bottom:6px;">
                <i class="fa fa-calendar-plus" style="color:#6366f1;font-size:14px;"></i>
                <strong style="color:#4338ca;font-size:13px;letter-spacing:.3px;text-transform:uppercase;">Next Visit</strong>
            </div>
            <div style="font-size:13px;color:#1e293b;line-height:1.6;">
                <strong>{{ \Carbon\Carbon::parse($apt->next_visit_date)->format('l, d M Y') }}</strong>
                @if($apt->next_visit_time) at <strong>{{ \Carbon\Carbon::parse($apt->next_visit_time)->format('H:i') }}</strong> @endif
                @php
                    $nvDoc = $apt->next_visit_doctor_id
                        ? \Modules\VetClinic\Entities\VcDoctor::find($apt->next_visit_doctor_id)
                        : ($apt->doctor ?? null);
                    $nvDept = $apt->next_visit_department_id
                        ? \Modules\VetClinic\Entities\VcDepartment::find($apt->next_visit_department_id)
                        : ($apt->department ?? null);
                @endphp
                @if($nvDoc) &middot; with <strong>{{ $nvDoc->name }}</strong>@endif
                @if($nvDept) ({{ $nvDept->name }})@endif
                @if($apt->next_visit_reason)
                    <br><span style="color:#64748b;">Reason:</span> {{ $apt->next_visit_reason }}
                @endif
                @if($apt->next_visit_notes)
                    <br><span style="color:#64748b;">Notes:</span> {{ $apt->next_visit_notes }}
                @endif
            </div>
        </div>
        @endif

        {{-- Signature --}}
        <div class="sig-row">
            <div class="sig-block">
                <div class="sig-line"></div>
                <div class="sig-name">{{ optional($prescription->doctor)->name ?? 'Doctor' }}</div>
                @if(optional($prescription->doctor)->specialization)
                <div class="sig-spec">{{ $prescription->doctor->specialization }}</div>
                @endif
                <div class="sig-spec">Doctor's Signature</div>
            </div>
        </div>

    </div>{{-- /body-content --}}

    {{-- Footer --}}
    <div class="footer">
        <span>Generated: {{ now()->format('d M Y, H:i') }}</span>
        <span>{{ $prescription->ref_no }} &bull; {{ $business->name ?? '' }}</span>
        <span>This prescription is valid for medical use only.</span>
    </div>

</div>

{{-- Item #8 - TPS branding footer --}}
@include('vetClinic::partials._print_branding', ['mode' => 'footer'])

<script>
window.onload = function () { window.print(); };
</script>
</body>
</html>
