<?php
// Hospital-facing card verification page
// Hospitals can scan QR codes to verify patient identity
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Verify Patient Card - UHD</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://unpkg.com/html5-qrcode@2.3.8/html5-qrcode.min.js"></script>
    <style>
        body { background: #0a3d2f; font-family: 'Segoe UI', sans-serif; }
        .verification-card { background: white; border-radius: 20px; padding: 30px; max-width: 500px; margin: 50px auto; }
        #qr-reader { width: 100%; }
    </style>
</head>
<body>
<div class="container">
    <div class="verification-card">
        <div class="text-center">
            <img src="https://od.lk/s/MzdfODgyMDMwNTZf/IMG-20260414-WA0014%20%281%29.jpg" alt="UHD Logo" style="height: 60px;">
            <h4 class="mt-2">Patient Card Verification</h4>
            <p>Scan patient's UHD card QR code</p>
        </div>
        
        <div id="qr-reader"></div>
        
        <div id="result" class="mt-3" style="display: none;">
            <div class="alert alert-success">
                <h5><i class="fas fa-check-circle"></i> Patient Verified!</h5>
                <div id="patient-details"></div>
            </div>
        </div>
        
        <div class="text-center mt-3">
            <small class="text-muted">Official UHD Card Verification System</small>
        </div>
    </div>
</div>

<script>
const html5QrCode = new Html5Qrcode("qr-reader");
const qrConfig = { fps: 10, qrbox: { width: 250, height: 250 } };

html5QrCode.start({ facingMode: "environment" }, qrConfig, (decodedText) => {
    html5QrCode.stop();
    const data = JSON.parse(decodedText);
    
    // Send to server for verification
    fetch('ajax_verify_card.php', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ card_number: data.card_number })
    })
    .then(response => response.json())
    .then(result => {
        document.getElementById('result').style.display = 'block';
        document.getElementById('patient-details').innerHTML = `
            <p><strong>Patient Name:</strong> ${result.name}</p>
            <p><strong>Card Number:</strong> ${result.card_number}</p>
            <p><strong>Valid Until:</strong> ${result.expiry}</p>
            <p><strong>Hospital:</strong> ${result.hospital}</p>
        `;
    });
});
</script>
</body>
</html>