
<!DOCTYPE html>
<html>
<head>
    <title>Aadhar OCR Ready</title>
    <style>
        body { font-family: sans-serif; background: #f4f4f9; display: flex; justify-content: center; padding-top: 50px; }
        .card { background: white; padding: 30px; border-radius: 10px; box-shadow: 0 4px 10px rgba(0,0,0,0.1); width: 100%; max-width: 400px; }
        h2 { text-align: center; color: #333; }
        .form-group { margin-bottom: 15px; }
        input[type="file"] { width: 100%; padding: 10px; border: 1px solid #ddd; border-radius: 5px; }
        button { width: 100%; padding: 12px; background: #007bff; color: white; border: none; border-radius: 5px; font-size: 16px; cursor: pointer; }
        button:disabled { background: #ccc; }
        .result { margin-top: 20px; padding: 15px; background: #eef; border-radius: 5px; display: none; }
        .error { color: red; text-align: center; margin-top: 10px; display: none; }
        .row { display: flex; justify-content: space-between; margin-bottom: 8px; font-size: 14px; }
        .label { font-weight: bold; }
    </style>
</head>
<body>

<div class="card">
    <h2>Aadhar Scanner</h2>
    <div class="error" id="errorBox"></div>
    
    <form id="scanForm">
        <div class="form-group">
            <input type="file" id="file" accept="image/*" required>
        </div>
        <button type="submit" id="btn">Scan Now</button>
    </form>

    <div class="result" id="result">
        <div class="row"><span class="label">Name:</span> <span id="resName">-</span></div>
        <div class="row"><span class="label">Aadhar:</span> <span id="resAadhar">-</span></div>
        <div class="row"><span class="label">DOB:</span> <span id="resDOB">-</span></div>
        <div class="row"><span class="label">Address:</span> <span id="resAddress">-</span></div>
    </div>
</div>

<script>
    document.getElementById('scanForm').addEventListener('submit', async function(e) {
        e.preventDefault();
        
        const btn = document.getElementById('btn');
        const errorBox = document.getElementById('errorBox');
        const fileInput = document.getElementById('file');
        
        if(!fileInput.files.length) { alert('Select file'); return; }

        btn.disabled = true;
        btn.innerText = "Scanning...";
        errorBox.style.display = 'none';
        document.getElementById('result').style.display = 'none';

        const formData = new FormData();
        formData.append('aadhar_file', fileInput.files[0]); // IMP: Name matches PHP

        try {
            const res = await fetch('?action=scan', {
                method: 'POST',
                body: formData
            });
            
            const data = await res.json();
            
            if(data.Errorcode === 100) {
                document.getElementById('resName').innerText = data.data.Name;
                document.getElementById('resAadhar').innerText = data.data.AadharNumber;
                document.getElementById('resDOB').innerText = data.data.DOB;
                document.getElementById('resAddress').innerText = data.data.Address;
                document.getElementById('result').style.display = 'block';
            } else {
                errorBox.innerText = "Error: " + data.Message;
                errorBox.style.display = 'block';
            }

        } catch(err) {
            errorBox.innerText = "System Error: " + err.message;
            errorBox.style.display = 'block';
        } finally {
            btn.disabled = false;
            btn.innerText = "Scan Now";
        }
    });
</script>

</body>
</html>