<!DOCTYPE html>
<html lang="id">
<head>
    <link rel="icon" type="image/png" href="{{ asset('img/Capture__1_-removebg-preview.png') }}">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Generate QR Code - SMKN 1 Prajekan</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css">
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap" rel="stylesheet">
    <!-- QR Code Generator Library -->
    <script src="https://cdn.jsdelivr.net/npm/qrcodejs@1.0.0/qrcode.min.js"></script>
    <style>
        body {
            font-family: 'Poppins', sans-serif;
            background-color: #f4f6f9;
            min-height: 100vh;
        }

        .scan-header {
            background-color: #304058;
            color: #ffffff;
            padding: 20px;
            text-align: center;
        }

        .scan-header img {
            width: 60px;
            margin-bottom: 10px;
        }

        .gen-container {
            max-width: 450px;
            margin: 30px auto;
            padding: 0 15px;
        }

        .gen-card {
            background-color: #ffffff;
            border: 1px solid #e0e0e0;
            border-radius: 12px;
            padding: 25px;
            margin-bottom: 20px;
        }

        .form-control-flat {
            background-color: #f8f9fa;
            border: 1px solid #e0e0e0;
            border-radius: 8px;
            padding: 12px;
            font-size: 14px;
        }

        .form-control-flat:focus {
            border-color: #76c4ef;
            box-shadow: 0 0 0 0.2rem rgba(118, 196, 239, 0.25);
        }

        .btn-primary-flat {
            background-color: #76c4ef;
            color: #fff;
            border: none;
            border-radius: 8px;
            padding: 14px 20px;
            font-weight: 600;
            width: 100%;
            font-size: 16px;
        }

        .btn-primary-flat:hover {
            background-color: #5bb2e3;
            color: #fff;
        }

        .btn-secondary-flat {
            background-color: #304058;
            color: #ffffff;
            border: none;
            border-radius: 8px;
            padding: 14px 20px;
            font-weight: 600;
            width: 100%;
            font-size: 16px;
        }

        .btn-secondary-flat:hover {
            background-color: #3d5070;
            color: #ffffff;
        }

        #qrResult {
            text-align: center;
            padding: 20px;
        }

        #qrResult canvas {
            border: 3px solid #e0e0e0;
            border-radius: 8px;
            padding: 10px;
            background: #fff;
        }
    </style>
</head>
<body>

    <!-- Header -->
    <div class="scan-header">
        <img src="{{ asset('img/Capture__1_-removebg-preview.png') }}" alt="Logo">
        <h5 class="mb-0 fw-bold">SMKN 1 PRAJEKAN</h5>
        <small>Generate QR Code Siswa</small>
    </div>

    <div class="gen-container">

        @if (session('error'))
            <div class="alert alert-danger" style="border-radius: 8px;">
                <i class="bi bi-exclamation-circle me-2"></i>{{ session('error') }}
            </div>
        @endif

        <!-- Form Generate -->
        <div class="gen-card">
            <h6 class="fw-bold mb-3"><i class="bi bi-qr-code me-2"></i>Generate QR Code</h6>
            <form method="POST" action="{{ route('scan.download_qr') }}">
                @csrf
                <div class="mb-3">
                    <label for="id_siswa" class="form-label fw-bold" style="font-size: 13px;">ID Siswa:</label>
                    <input type="text" class="form-control form-control-flat" id="id_siswa" name="id_siswa" placeholder="Masukkan ID Siswa..." required>
                </div>
                <button type="submit" class="btn btn-primary-flat">
                    <i class="bi bi-download me-2"></i>Generate & Tampilkan QR
                </button>
            </form>
        </div>

        <!-- QR Code Result -->
        @if (session('qr_data'))
        <div class="gen-card">
            <h6 class="fw-bold mb-3 text-center">QR Code untuk: {{ session('nama_siswa') }}</h6>
            <div id="qrResult"></div>
            <p class="text-muted text-center mt-2" style="font-size: 13px;">ID: {{ session('qr_data') }}</p>
            <button class="btn btn-primary-flat mt-2" onclick="downloadQR()">
                <i class="bi bi-download me-2"></i>Download QR
            </button>
        </div>
        @endif

        <!-- Navigation -->
        <div class="d-flex gap-2">
            <a href="{{ route('scan.index') }}" class="btn btn-secondary-flat flex-fill">
                <i class="bi bi-camera me-2"></i>Scan Absen
            </a>
            <a href="{{ url('/') }}" class="btn btn-primary-flat flex-fill">
                <i class="bi bi-house me-2"></i>Kembali
            </a>
        </div>
    </div>

    @if (session('qr_data'))
    <script>
        // Generate QR Code on page
        const qrCode = new QRCode(document.getElementById("qrResult"), {
            text: "{{ session('qr_data') }}",
            width: 250,
            height: 250,
            colorDark : "#304058",
            colorLight : "#ffffff",
            correctLevel : QRCode.CorrectLevel.H
        });

        function downloadQR() {
            const canvas = document.querySelector('#qrResult canvas');
            if (canvas) {
                const link = document.createElement('a');
                link.download = 'qr_{{ session("qr_data") }}.png';
                link.href = canvas.toDataURL();
                link.click();
            }
        }
    </script>
    @endif

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
