<?php
include 'config.php';
?>
<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Generate QR Code - Aplikasi Kehadiran Ujian</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js"></script>
</head>
<body>
    <nav class="navbar navbar-expand-lg navbar-dark bg-primary">
        <div class="container">
            <a class="navbar-brand" href="index.php">
                <i class="fas fa-qrcode me-2"></i>Kehadiran Ujian
            </a>
            <div class="collapse navbar-collapse">
                <ul class="navbar-nav ms-auto">
                    <li class="nav-item">
                        <a class="nav-link" href="index.php">Scan QR</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="data_kehadiran.php">Data Kehadiran</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="kelola_siswa.php">Kelola Siswa</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link active" href="generate_qr.php">Generate QR</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>

    <div class="container mt-4">
        <h2 class="mb-4"><i class="fas fa-qrcode me-2"></i>Generate QR Code Siswa</h2>
        
        <div class="row">
            <div class="col-md-4">
                <div class="card">
                    <div class="card-header bg-primary text-white">
                        <h5 class="mb-0"><i class="fas fa-cog me-2"></i>Pilihan Generate</h5>
                    </div>
                    <div class="card-body">
                        <div class="mb-3">
                            <label class="form-label">Pilih Siswa</label>
                            <select class="form-select" id="siswa-select">
                                <option value="">-- Pilih Siswa --</option>
                                <?php
                                $sql = "SELECT * FROM siswa ORDER BY nama";
                                $result = $conn->query($sql);
                                while($row = $result->fetch_assoc()) {
                                    echo "<option value='{$row['nis']}:{$row['nama']}:{$row['kelas']}'>{$row['nama']} - {$row['kelas']}</option>";
                                }
                                ?>
                            </select>
                        </div>
                        <button id="generate-single" class="btn btn-primary w-100 mb-3">
                            <i class="fas fa-user me-2"></i>Generate Per Siswa
                        </button>
                        <button id="generate-all" class="btn btn-success w-100">
                            <i class="fas fa-users me-2"></i>Generate Semua Siswa
                        </button>
                    </div>
                </div>
            </div>
            
            <div class="col-md-8">
                <div class="card">
                    <div class="card-header bg-success text-white">
                        <h5 class="mb-0"><i class="fas fa-qrcode me-2"></i>QR Code</h5>
                    </div>
                    <div class="card-body text-center" id="qr-container">
                        <p class="text-muted">Pilih siswa untuk menampilkan QR Code</p>
                    </div>
                </div>
                
                <div id="all-qr-codes" class="mt-4" style="display: none;">
                    <!-- QR Code semua siswa akan ditampilkan di sini -->
                </div>
            </div>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <script>
        document.getElementById('generate-single').addEventListener('click', function() {
            const siswaData = document.getElementById('siswa-select').value;
            if (!siswaData) {
                alert('Pilih siswa terlebih dahulu!');
                return;
            }
            
            const qrContainer = document.getElementById('qr-container');
            qrContainer.innerHTML = '';
            
            // Buat QR Code
            new QRCode(qrContainer, {
                text: siswaData,
                width: 200,
                height: 200,
                colorDark: "#000000",
                colorLight: "#ffffff",
                correctLevel: QRCode.CorrectLevel.H
            });
            
            // Tampilkan info siswa
            const dataParts = siswaData.split(':');
            const infoDiv = document.createElement('div');
            infoDiv.className = 'mt-3';
            infoDiv.innerHTML = `
                <p><strong>NIS:</strong> ${dataParts[0]}</p>
                <p><strong>Nama:</strong> ${dataParts[1]}</p>
                <p><strong>Kelas:</strong> ${dataParts[2]}</p>
                <button class="btn btn-sm btn-outline-primary mt-2" onclick="printQRCode()">
                    <i class="fas fa-print me-1"></i>Cetak QR Code
                </button>
            `;
            qrContainer.appendChild(infoDiv);
            
            // Sembunyikan QR Code semua siswa
            document.getElementById('all-qr-codes').style.display = 'none';
        });
        
        document.getElementById('generate-all').addEventListener('click', function() {
            const allQrContainer = document.getElementById('all-qr-codes');
            allQrContainer.innerHTML = '<h4 class="mb-3">QR Code Semua Siswa</h4><div class="row" id="qr-grid"></div>';
            
            const siswaOptions = document.getElementById('siswa-select').options;
            const qrGrid = document.getElementById('qr-grid');
            
            for (let i = 1; i < siswaOptions.length; i++) {
                const siswaData = siswaOptions[i].value;
                const dataParts = siswaData.split(':');
                
                const colDiv = document.createElement('div');
                colDiv.className = 'col-md-3 mb-4 text-center';
                
                const qrDiv = document.createElement('div');
                qrDiv.id = `qr-${dataParts[0]}`;
                
                colDiv.innerHTML = `
                    <div class="card">
                        <div class="card-body">
                            <div id="qr-${dataParts[0]}"></div>
                            <p class="mt-2 mb-1"><small><strong>${dataParts[1]}</strong></small></p>
                            <p class="mb-1"><small>${dataParts[0]}</small></p>
                            <p class="mb-0"><small>${dataParts[2]}</small></p>
                        </div>
                    </div>
                `;
                
                qrGrid.appendChild(colDiv);
                
                // Generate QR Code untuk setiap siswa
                new QRCode(`qr-${dataParts[0]}`, {
                    text: siswaData,
                    width: 120,
                    height: 120,
                    colorDark: "#000000",
                    colorLight: "#ffffff",
                    correctLevel: QRCode.CorrectLevel.H
                });
            }
            
            allQrContainer.style.display = 'block';
            
            // Tambahkan tombol cetak
            const printBtn = document.createElement('button');
            printBtn.className = 'btn btn-primary mt-3';
            printBtn.innerHTML = '<i class="fas fa-print me-2"></i>Cetak Semua QR Code';
            printBtn.onclick = function() { window.print(); };
            allQrContainer.appendChild(printBtn);
        });
        
        function printQRCode() {
            window.print();
        }
    </script>
</body>
</html>
<?php $conn->close(); ?>