<?php
if(!isset($_GET['id'])){
    die("Event tidak ditemukan");
}

$event_id = (int) $_GET['id'];

// 🔥 LINK CHECK-IN
$url = "https://hitasumut.org/membership/event-checkin?event_id=" . $event_id;

// 🔥 LINK QR IMAGE (UNTUK DOWNLOAD)
$qrImage = "https://api.qrserver.com/v1/create-qr-code/?size=400x400&data=" . urlencode($url);
?>

<!DOCTYPE html>
<html>
<head>
    <title>QR Event</title>

    <style>
        body{
            background: linear-gradient(135deg,#0f172a,#1e3a8a);
            display:flex;
            justify-content:center;
            align-items:center;
            height:100vh;
            flex-direction:column;
            color:white;
            font-family:sans-serif;
        }

        h2{
            margin-bottom:15px;
        }

        .box{
            background:white;
            padding:30px;
            border-radius:20px;
            text-align:center;
            box-shadow:0 10px 25px rgba(0,0,0,0.2);
        }

        .box img{
            width:250px;
            height:250px;
        }

        .btn{
            margin-top:15px;
            display:inline-block;
            padding:10px 15px;
            background:#3b82f6;
            color:white;
            border-radius:8px;
            text-decoration:none;
            font-size:14px;
        }

        .btn:hover{
            background:#2563eb;
        }

        p{
            margin-top:10px;
            font-size:13px;
            color:#cbd5f5;
        }
    </style>
</head>
<body>

<h2>Scan QR untuk Check-in</h2>

<div class="box">

    <!-- QR -->
    <img src="<?= $qrImage ?>" id="qrImage">

    <!-- DOWNLOAD -->
    <br>
    <button onclick="downloadQR()" class="btn-download">
    Download PNG
    </button>
    
    <img id="qrImage"
         src="https://api.qrserver.com/v1/create-qr-code/?size=400x400&data=https://hitasumut.org/membership/event-checkin?event_id=3"
         style="display:none;">

</div>

<p>Scan menggunakan kamera atau Google Lens</p>
<script>
function downloadQR() {
    const url = document.getElementById('qrImage').src;

    fetch(url)
    .then(res => res.blob())
    .then(blob => {
        const a = document.createElement('a');
        a.href = URL.createObjectURL(blob);
        a.download = 'qr-event.png';
        document.body.appendChild(a);
        a.click();
        document.body.removeChild(a);
    })
    .catch(() => {
        alert('Gagal download QR');
    });
}
</script>
</body>
</html>