<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Badge</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js"></script>
<style>
body{font-family:Almarai,Tahoma,Arial,sans-serif;background:#f5f7fb;padding:25px}
.badge-card{max-width:700px;margin:auto;background:#fff;border:8px solid #1d4ed8;border-radius:24px;padding:30px;text-align:center}
.name{font-size:34px;font-weight:800}
.role{font-size:20px;color:#1d4ed8;font-weight:700}
.aff{font-size:18px;color:#555}
.conf{font-size:22px;font-weight:700;margin-bottom:20px}
.qr-wrap{margin-top:18px;display:flex;justify-content:center}
</style>
</head>
<body onload="window.print()">
<div class="badge-card">
    <div class="conf"><?= htmlspecialchars((string) (($conference['title_en'] ?? '') ?: ($conference['title_ar'] ?? ''))) ?></div>
    <div class="name"><?= htmlspecialchars((string) (($badge['person_name_en'] ?? '') ?: ($badge['person_name_ar'] ?? ''))) ?></div>
    <div class="role"><?= htmlspecialchars((string) $badge['badge_role']) ?></div>
    <div class="aff"><?= htmlspecialchars((string) (($badge['affiliation_en'] ?? '') ?: ($badge['affiliation_ar'] ?? ''))) ?></div>
    <div class="qr-wrap"><div id="qrcode"></div></div>
</div>

<script>
new QRCode(document.getElementById("qrcode"), {
    text: <?= json_encode((string) (($badge['qr_text'] ?? '') ?: ('BADGE-' . ($badge['id'] ?? '')))) ?>,
    width: 110,
    height: 110
});
</script>
</body>
</html>
