<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
    <meta name="theme-color" content="#0d9488">
    <title>Vaccination Card · {{ $pet['name'] ?? 'Unknown' }}</title>
    <style>
        :root {
            --c-brand-500: 13 148 136;
            --c-brand-700: 15 118 110;
            --c-surface: 255 255 255;
            --c-surface-muted: 248 250 252;
            --c-ink: 15 23 42;
            --c-ink-muted: 71 85 105;
            --c-ink-subtle: 148 163 184;
        }
        * { box-sizing: border-box; }
        html, body {
            margin: 0; font-family: -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
            background: rgb(241 245 249); color: rgb(var(--c-ink));
            -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
            min-height: 100dvh;
        }
        .wrap { max-width: 480px; margin: 0 auto; padding: 24px 16px 80px; }
        .verified-banner {
            display: flex; align-items: center; gap: 10px;
            padding: 14px 16px; border-radius: 14px; margin-bottom: 16px;
            font-weight: 700; font-size: 14px;
        }
        .verified-banner.ok    { background: rgb(236 253 245); color: rgb(6 95 70);  border: 1px solid rgb(167 243 208); }
        .verified-banner.bad   { background: rgb(254 242 242); color: rgb(153 27 27); border: 1px solid rgb(252 165 165); }
        .verified-banner .ico  { width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 16px; flex-shrink: 0; }
        .verified-banner.ok  .ico { background: rgb(16 185 129); color: white; }
        .verified-banner.bad .ico { background: rgb(220 38 38); color: white; }
        .card {
            border-radius: 18px; overflow: hidden;
            box-shadow: 0 1px 2px rgb(15 23 42 / 0.04), 0 12px 32px rgb(15 23 42 / 0.08);
            background: rgb(var(--c-surface));
        }
        .card-header {
            background: linear-gradient(135deg, rgb(var(--c-brand-500)), rgb(var(--c-brand-700)));
            color: white; padding: 24px 20px; position: relative; overflow: hidden;
        }
        .card-header::before, .card-header::after {
            content: ''; position: absolute; border-radius: 50%; background: rgba(255,255,255,.1); pointer-events: none;
        }
        .card-header::before { width: 140px; height: 140px; top: -50px; right: -40px; }
        .card-header::after  { width: 90px;  height: 90px;  bottom: -40px; right: 80px; background: rgba(255,255,255,.06); }
        .header-top { display: flex; gap: 14px; position: relative; }
        .pet-icon {
            width: 56px; height: 56px; border-radius: 14px; background: rgba(255,255,255,.18);
            display: flex; align-items: center; justify-content: center; font-size: 30px;
            flex-shrink: 0; border: 1px solid rgba(255,255,255,.3);
        }
        .pet-icon-text { flex: 1; min-width: 0; }
        .stamp { font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; opacity: .82; }
        .pet-name { font-size: 24px; font-weight: 800; line-height: 1.1; margin: 4px 0 2px; }
        .clinic    { font-size: 13px; opacity: .9; }
        .meta-row  { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 14px; font-size: 13px; opacity: .92; position: relative; }
        .meta-row .label { opacity: .75; }
        .card-body { padding: 20px; }
        .section-title {
            font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em;
            color: rgb(var(--c-ink-subtle)); margin-bottom: 10px;
        }
        .vax-row {
            display: flex; align-items: center; gap: 12px; padding: 12px 0;
            border-top: 1px solid rgb(241 245 249);
        }
        .vax-row:first-of-type { border-top: 0; }
        .vax-row .dot {
            width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0;
        }
        .vax-row .dot.ok       { background: rgb(16 185 129); }
        .vax-row .dot.due_soon { background: rgb(245 158 11); }
        .vax-row .dot.overdue  { background: rgb(239 68 68); }
        .vax-row .name { flex: 1; min-width: 0; }
        .vax-row .name strong { display: block; font-size: 14px; }
        .vax-row .name span   { display: block; font-size: 12px; color: rgb(var(--c-ink-muted)); margin-top: 2px; }
        .vax-row .next        { font-size: 11px; color: rgb(var(--c-ink-subtle)); font-weight: 700; text-align: right; white-space: nowrap; }
        .footer {
            padding: 14px 20px; background: rgb(var(--c-surface-muted));
            display: flex; justify-content: space-between;
            font-size: 11px; color: rgb(var(--c-ink-muted));
        }
        .not-found {
            background: rgb(var(--c-surface)); border-radius: 18px; padding: 40px 20px; text-align: center;
            box-shadow: 0 1px 2px rgb(15 23 42 / 0.04), 0 12px 32px rgb(15 23 42 / 0.08);
        }
        .not-found .big { font-size: 56px; opacity: .4; margin-bottom: 12px; }
        .disclaimer { margin-top: 20px; font-size: 11px; color: rgb(var(--c-ink-subtle)); text-align: center; line-height: 1.5; }
        @media print {
            body { background: white; }
            .verified-banner, .disclaimer { display: none; }
            .card { box-shadow: none; border: 1px solid rgb(226 232 240); }
        }
    </style>
</head>
<body>
<main class="wrap">
    @if (! $pet)
        <div class="not-found">
            <div class="big">🐾</div>
            <h1 style="margin:0;font-size:20px;">Card not found</h1>
            <p style="margin:8px 0 0;color:rgb(var(--c-ink-muted));font-size:13px;">
                This vaccination card link is invalid or has been revoked.
            </p>
        </div>
    @else
        @if ($valid)
            <div class="verified-banner ok">
                <span class="ico">✓</span>
                <div>
                    <div>Verified card</div>
                    <div style="font-weight:500;font-size:12px;opacity:.85;">Signature matches issuing clinic</div>
                </div>
            </div>
        @else
            <div class="verified-banner bad">
                <span class="ico">!</span>
                <div>
                    <div>Unverified card</div>
                    <div style="font-weight:500;font-size:12px;opacity:.85;">
                        Signature missing or invalid. Show this to clinic staff for confirmation.
                    </div>
                </div>
            </div>
        @endif

        <article class="card">
            <div class="card-header">
                <div class="header-top">
                    <div class="pet-icon">
                        @php
                            $icon = [
                                'dog' => '🐕', 'cat' => '🐈', 'rabbit' => '🐇',
                                'bird' => '🦜', 'fish' => '🐟',
                            ][$pet['species']] ?? '🐾';
                        @endphp
                        {{ $icon }}
                    </div>
                    <div class="pet-icon-text">
                        <div class="stamp">Pet Passport</div>
                        <div class="pet-name">{{ $pet['name'] }}</div>
                        <div class="clinic">{{ $clinic }}</div>
                    </div>
                </div>
                <div class="meta-row">
                    <div><span class="label">Species:</span> <strong>{{ ucfirst($pet['species']) }}</strong></div>
                    @if(! empty($pet['breed']))
                        <div><span class="label">Breed:</span> <strong>{{ $pet['breed'] }}</strong></div>
                    @endif
                    @if(! empty($pet['microchip_no']))
                        <div><span class="label">Chip:</span> <strong>{{ $pet['microchip_no'] }}</strong></div>
                    @endif
                    @if(! empty($pet['dob_label']))
                        <div><span class="label">DOB:</span> <strong>{{ $pet['dob_label'] }}</strong></div>
                    @endif
                </div>
            </div>

            <div class="card-body">
                <div class="section-title">Vaccinations · {{ count($pet['vaccinations']) }} records</div>
                @foreach ($pet['vaccinations'] as $v)
                    <div class="vax-row">
                        <span class="dot {{ $v['status'] }}"></span>
                        <div class="name">
                            <strong>{{ $v['vaccine_name'] }}</strong>
                            <span>Given {{ $v['given_label'] }} · {{ $v['doctor_name'] }}</span>
                        </div>
                        @if (! empty($v['next_due_label']))
                            <div class="next">Next: {{ $v['next_due_label'] }}</div>
                        @endif
                    </div>
                @endforeach
            </div>

            <div class="footer">
                <span>Verified at {{ $verifyAt->format('M j, Y · H:i') }}</span>
                <span>{{ $clinic }}</span>
            </div>
        </article>

        <p class="disclaimer">
            This is a verified read-only view of vaccination records.<br>
            For the editable owner version, sign in to the clinic's pet portal.
        </p>
    @endif
</main>
</body>
</html>
