<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Visitor Pass {{ $visitor->pass_number }}</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <style>
        body { background:#f4f6fb; }
        .pass { max-width: 360px; margin: 24px auto; border:2px solid #4f46e5; border-radius:14px; overflow:hidden; background:#fff; }
        .pass .hd { background:#4f46e5; color:#fff; padding:14px 18px; }
        .pass .bd { padding:18px; }
        @media print { .no-print{display:none} body{background:#fff} }
    </style>
</head>
<body>
    <div class="text-center no-print mt-3">
        <button onclick="window.print()" class="btn btn-primary btn-sm">Print Pass</button>
        <a href="{{ route('visitors.index') }}" class="btn btn-light border btn-sm">Back</a>
    </div>
    <div class="pass">
        <div class="hd d-flex justify-content-between align-items-center">
            <div><div class="fw-bold">VISITOR PASS</div><small>{{ config('app.name') }}</small></div>
            <div class="text-end"><div class="fw-bold fs-5">{{ $visitor->pass_number }}</div></div>
        </div>
        <div class="bd">
            <table class="table table-sm mb-2">
                <tr><th width="40%">Name</th><td>{{ $visitor->name }}</td></tr>
                <tr><th>CNIC</th><td>{{ $visitor->cnic ?: '—' }}</td></tr>
                <tr><th>Phone</th><td>{{ $visitor->phone ?: '—' }}</td></tr>
                <tr><th>To Meet</th><td>{{ $visitor->whom_to_meet ?: '—' }}</td></tr>
                <tr><th>Purpose</th><td>{{ $visitor->purpose ?: '—' }}</td></tr>
                <tr><th>Persons</th><td>{{ $visitor->party_size }}</td></tr>
                <tr><th>Date</th><td>{{ $visitor->visit_date->format('d M Y') }}</td></tr>
                <tr><th>Check-in</th><td>{{ optional($visitor->check_in)->format('h:i A') }}</td></tr>
            </table>
            <div class="text-center small text-muted">Please return this pass at the gate when leaving.</div>
        </div>
    </div>
</body>
</html>
