<?php
session_start();
require_once '../config.php';

if (!isset($_SESSION['role']) || $_SESSION['role'] !== 'kader') {
    header("Location: ../login.php");
    exit;
}

$id_posyandu = $_SESSION['posyandu'];

$stmt = $pdo->prepare("SELECT id_balita,nama_balita FROM balita WHERE id_posyandu=? ORDER BY nama_balita ASC");
$stmt->execute([$id_posyandu]);
$data = $stmt->fetchAll();
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Cetak QR Balita</title>

<script src="https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js"></script>

<style>
@page { size:A4; margin:10mm; }

body{
    font-family:Arial;
}

.container{
    display:grid;
    grid-template-columns: repeat(5, 1fr);
    gap:5mm;
}

.label{
    width:100%;
    height:40mm;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
    border:1px dashed #bbb;
    padding:3mm;
    box-sizing:border-box;
}

.nama{
    font-size:10px;
    font-weight:bold;
    margin-bottom:2mm;
}

.qr{
    width:70px;
    height:70px;
}

.print{
    position:fixed;
    top:10px;
    right:10px;
}

@media print{
.print{display:none;}
.label{border:all;}
}
</style>
</head>

<body>

<button class="print" onclick="window.print()">🖨️ Print</button>

<div class="container">
<?php foreach($data as $i=>$b): ?>
<div class="label">
    <div class="nama"><?= strtoupper(htmlspecialchars($b['nama_balita'])) ?></div>
    <div id="qr<?= $i ?>" class="qr"></div>
</div>

<script>
new QRCode(document.getElementById("qr<?= $i ?>"), {
    text: "<?= $b['id_balita'] ?>",
    width:70,
    height:70,
    correctLevel:QRCode.CorrectLevel.H
});
</script>

<?php endforeach; ?>
</div>

</body>
</html>
