<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>PromptPay QR Code Generator</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <h1>สร้าง QR Code สำหรับพร้อมเพย์</h1>
    <form id="qrcode-form">
        <label for="promptpay_id">PromptPay ID (เบอร์โทร/เลขประจำตัวประชาชน):</label>
        <input type="text" id="promptpay_id" name="promptpay_id" required><br>

        <label for="amount">จำนวนเงิน (บาท):</label>
        <input type="number" step="0.01" id="amount" name="amount" required><br>

        <button type="submit">สร้าง QR Code</button>
    </form>

    <div id="result">
        <h2>QR Code:</h2>
        <img id="qr-image" src="" alt="QR Code จะปรากฏที่นี่">
    </div>

    <script>
        $(document).on('submit', '#qrcode-form', function (e) {
            e.preventDefault();

            $.ajax({
                url: '/qrcontroller/generate',
                method: 'POST',
                data: $(this).serialize(),
                success: function (response) {
                    if (response.qr_image) {
                        $('#qr-image').attr('src', 'data:image/png;base64,' + response.qr_image);
                    } else {
                        alert('เกิดข้อผิดพลาด: ' + response.error);
                    }
                }
            });
        });
    </script>
</body>
</html>
