<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>{{ $consent->title }} — {{ optional($consent->pet)->petname }}</title>
<style>
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
* { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }

body { font-family: 'Segoe UI', Tahoma, Arial, sans-serif; font-size: 13px; color: #1e293b; background: #fff; }
.page { max-width: 850px; margin: 0 auto; }

/* Letterhead */
.letterhead {
    background: linear-gradient(135deg, #1a3a5c 0%, #2563eb 60%, #3b82f6 100%);
    color: #fff; padding: 20px 30px; display: flex; align-items: center; gap: 16px;
}
.clinic-icon {
    width: 50px; height: 50px; border-radius: 12px; flex-shrink: 0;
    background: rgba(255,255,255,.18); border: 1.5px solid rgba(255,255,255,.32);
    display: flex; align-items: center; justify-content: center; font-size: 24px;
}
.clinic-name { font-size: 19px; font-weight: 800; }
.clinic-contact { font-size: 11px; color: rgba(255,255,255,.85); margin-top: 2px;
    display: flex; flex-wrap: wrap; gap: 10px; }

/* Title bar */
.title-bar {
    background: #f1f5f9; border-bottom: 2px solid #e2e8f0;
    padding: 12px 30px; text-align: center;
}
.consent-tag {
    display: inline-block; background: linear-gradient(135deg, #1a3a5c, #2563eb);
    color: #fff; font-size: 10px; font-weight: 700; letter-spacing: 1px;
    padding: 3px 14px; border-radius: 20px; margin-bottom: 6px;
}
.consent-title { font-size: 18px; font-weight: 800; color: #1a3a5c; }
.consent-title-ar { font-size: 17px; font-weight: 700; color: #1a3a5c; margin-top: 2px; direction: rtl; }

/* Patient strip */
.pat-strip {
    display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 1px;
    background: #e2e8f0; border-bottom: 1px solid #e2e8f0;
}
.pat-cell { background: #fff; padding: 8px 14px; }
.pat-label { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: #94a3b8; }
.pat-value { font-size: 13px; font-weight: 700; color: #1e293b; margin-top: 1px; }
.pat-sub { font-size: 11px; color: #64748b; }

.body { padding: 22px 30px; }

/* Consent body block */
.consent-block { margin-bottom: 18px; }
.block-head {
    font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .6px;
    color: #475569; border-bottom: 2px solid #e2e8f0; padding-bottom: 5px; margin-bottom: 10px;
}
.consent-text {
    font-size: 12.5px; line-height: 1.7; color: #1e293b; white-space: pre-wrap;
}
.consent-text.rtl { direction: rtl; text-align: right; font-size: 13px; }

/* Signature area */
.sig-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 26px 36px; margin-top: 12px; }
.sig-box { }
.sig-line { border-bottom: 1.5px solid #1e293b; height: 30px; }
.sig-caption { font-size: 10.5px; color: #64748b; margin-top: 4px; }
.sig-name { font-size: 12.5px; font-weight: 700; color: #1e293b; }
.sig-role { font-size: 10px; color: #94a3b8; text-transform: uppercase; letter-spacing: .4px; }

.notes-box {
    margin-top: 14px; background: #fefce8; border: 1px solid #fde68a;
    border-left: 4px solid #f59e0b; border-radius: 7px; padding: 9px 13px;
    font-size: 11.5px; color: #78350f; white-space: pre-wrap;
}

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

@media print {
    @page { margin: 12mm; }
    body { padding: 0; }
    .page { max-width: 100%; }
    .no-print { display: none !important; }
}
.toolbar { text-align: center; padding: 10px; background: #f1f5f9; }
.toolbar button {
    background: #2563eb; color: #fff; border: none; padding: 8px 20px;
    border-radius: 6px; font-size: 13px; cursor: pointer; font-weight: 600;
}
</style>
</head>
@php
    $lang = $consent->language ?: 'both';
    $showEn = in_array($lang, ['en', 'both']);
    $showAr = in_array($lang, ['ar', 'both']) && trim((string) $consent->body_ar) !== '';
    $titleAr = optional($consent->template)->name_ar;
    $needsWitness = $consent->witness_name || optional($consent->template)->requires_witness;
    $dateFmt = session('business.date_format', 'd M Y') ?: 'd M Y';

    // Pull the active digital signature (if any) for embed + verify code.
    $activeSig = \Modules\VetClinic\Entities\VcConsentSignature::activeFor($consent->id);
    $shortHash = $activeSig ? substr($activeSig->png_hash_sha256, 0, 12) : null;
    $verifyUrl = $shortHash ? route('vc.consents.verify', $shortHash) : null;
    // External QR generator — encodes only the public verification URL, no PII.
    $qrSrc = $verifyUrl
        ? 'https://api.qrserver.com/v1/create-qr-code/?size=110x110&data=' . urlencode($verifyUrl)
        : null;
@endphp
<body>

<div class="toolbar no-print">
    <button onclick="window.print()">🖨 Print this consent</button>
</div>

<div class="page">

    {{-- Letterhead --}}
    <div class="letterhead">
        <div class="clinic-icon">🐾</div>
        <div>
            <div class="clinic-name">{{ $business->name ?? 'Veterinary 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>

    {{-- Title --}}
    <div class="title-bar">
        <div class="consent-tag">CONSENT FORM &nbsp;·&nbsp; إقرار موافقة</div>
        <div class="consent-title">{{ $consent->title }}</div>
        @if($titleAr)
        <div class="consent-title-ar">{{ $titleAr }}</div>
        @endif
    </div>

    {{-- Patient / owner strip --}}
    <div class="pat-strip">
        <div class="pat-cell">
            <div class="pat-label">Patient / المريض</div>
            <div class="pat-value">{{ optional($consent->pet)->petname ?? '—' }}</div>
            <div class="pat-sub">
                {{ optional($consent->pet)->species }}{{ optional($consent->pet)->breed ? ' · ' . $consent->pet->breed : '' }}
            </div>
        </div>
        <div class="pat-cell">
            <div class="pat-label">Owner / المالك</div>
            <div class="pat-value">{{ optional($consent->owner)->name ?? '—' }}</div>
            @if(optional($consent->owner)->mobile)
            <div class="pat-sub">📞 {{ $consent->owner->mobile }}</div>
            @endif
        </div>
        <div class="pat-cell">
            <div class="pat-label">Appointment / الموعد</div>
            <div class="pat-value">{{ optional($consent->appointment)->ref_no ?? '—' }}</div>
            <div class="pat-sub">
                {{ optional(optional($consent->appointment)->appointment_date)->format($dateFmt) }}
            </div>
        </div>
    </div>

    <div class="body">

        {{-- English body --}}
        @if($showEn)
        <div class="consent-block">
            @if($showAr)<div class="block-head">English</div>@endif
            <div class="consent-text">{{ $consent->body_en }}</div>
        </div>
        @endif

        {{-- Arabic body --}}
        @if($showAr)
        <div class="consent-block">
            <div class="block-head" style="text-align:right;direction:rtl;">العربية</div>
            <div class="consent-text rtl">{{ $consent->body_ar }}</div>
        </div>
        @endif

        {{-- Notes --}}
        @if($consent->notes)
        <div class="notes-box"><strong>Note:</strong> {{ $consent->notes }}</div>
        @endif

        {{-- Signatures --}}
        <div class="block-head" style="margin-top:18px;">Signatures / التوقيعات</div>
        <div class="sig-grid">
            <div class="sig-box">
                @if($activeSig && $activeSig->is_image)
                    {{-- Canvas PNG or uploaded JPG/PNG — embed inline. --}}
                    <img src="{{ $activeSig->png_url }}" alt="Owner signature"
                         style="max-height:60px;max-width:100%;display:block;margin:0 auto 4px;">
                    <div class="sig-line" style="border-top-style:solid;"></div>
                @elseif($activeSig && $activeSig->is_pdf)
                    {{-- Hand-signed PDF on file — can't inline, link to scan. --}}
                    <div style="text-align:center;padding:8px 0;color:#475569;font-size:11px;">
                        📄 Hand-signed copy on file (PDF)
                        <a href="{{ $activeSig->png_url }}" target="_blank"
                           style="color:#2563eb;text-decoration:underline;display:block;margin-top:2px;">
                           View scanned copy
                        </a>
                    </div>
                    <div class="sig-line" style="border-top-style:solid;"></div>
                @else
                    <div class="sig-line"></div>
                @endif
                <div class="sig-name">{{ ($activeSig->signed_by_name ?? null) ?: ($consent->signatory_name ?: '—') }}</div>
                <div class="sig-role">{{ ($activeSig->signed_by_relation ?? null) ?: ($consent->signatory_relationship ?: 'Owner') }} / المالك أو الوكيل</div>
                <div class="sig-caption">
                    @if($activeSig)
                        @if($activeSig->method === 'uploaded_scan')
                            Hand-signed · uploaded {{ $activeSig->signed_at->format($dateFmt . ', H:i') }}
                        @else
                            Signed digitally · {{ $activeSig->signed_at->format($dateFmt . ', H:i') }}
                        @endif
                    @else
                        Signature &amp; date / التوقيع والتاريخ
                    @endif
                </div>
            </div>

            @if($needsWitness)
            <div class="sig-box">
                <div class="sig-line"></div>
                <div class="sig-name">{{ $consent->witness_name ?: '&nbsp;' }}</div>
                <div class="sig-role">Witness / الشاهد</div>
                <div class="sig-caption">Signature &amp; date / التوقيع والتاريخ</div>
            </div>
            @endif

            <div class="sig-box">
                <div class="sig-line"></div>
                <div class="sig-name">{{ optional(optional($consent->appointment)->doctor)->name ?: '&nbsp;' }}</div>
                <div class="sig-role">Veterinarian / clinic representative</div>
                <div class="sig-caption">Signature &amp; date / التوقيع والتاريخ</div>
            </div>
        </div>

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

    @if($activeSig)
    <div style="padding: 10px 30px; background: #f8fafc; border-top: 1px dashed #cbd5e1;
                display: flex; align-items: center; gap: 14px; font-size: 10px; color: #475569;">
        <img src="{{ $qrSrc }}" alt="Verify QR"
             style="width:64px;height:64px;border:1px solid #e2e8f0;border-radius:4px;background:#fff;flex-shrink:0;">
        <div style="line-height:1.55;">
            <div style="font-weight:700;color:#1a3a5c;font-size:11px;margin-bottom:2px;">
                Digital signature verification
            </div>
            <div>Hash: <span style="font-family:monospace;">{{ $shortHash }}</span></div>
            <div>Verify at: <span style="font-family:monospace;">{{ $verifyUrl }}</span></div>
        </div>
    </div>
    @endif

    <div class="footer">
        <span>Issued by {{ optional($consent->issuedBy)->first_name }} {{ optional($consent->issuedBy)->last_name }}
            · {{ optional($consent->issued_at)->format($dateFmt . ', H:i') }}</span>
        <span>Confidential — Veterinary record</span>
    </div>

</div>

<script>window.addEventListener('load', function () { window.print(); });</script>
</body>
</html>
