<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Passport OCR Extractor</title>
  <script src="https://cdn.jsdelivr.net/npm/tesseract.js@4/dist/tesseract.min.js"></script>
  <style>
    body {
      font-family: Arial, sans-serif;
      padding: 20px;
      background: #f2f2f2;
    }
    #fields, #output {
      background: white;
      padding: 15px;
      margin-top: 20px;
      border: 1px solid #ccc;
      border-radius: 8px;
    }
    label {
      font-weight: bold;
    }
  </style>
</head>
<body>

  <h2>🛂 Passport OCR Extractor with Auto Parsing</h2>
  <input type="file" id="imageUpload" accept="image/*">
  <div id="loading" style="display: none;">⏳ Processing image...</div>

  <div id="fields">
    <h3>📋 Extracted Passport Details</h3>
    <p><label>Passport Number:</label> <span id="passportNum">-</span></p>
    <p><label>Surname:</label> <span id="surname">-</span></p>
    <p><label>Given Names:</label> <span id="givenNames">-</span></p>
    <p><label>Nationality:</label> <span id="nationality">-</span></p>
    <p><label>Sex:</label> <span id="sex">-</span></p>
    <p><label>Date of Birth:</label> <span id="dob">-</span></p>
    <p><label>Place of Birth:</label> <span id="pob">-</span></p>
    <p><label>Place of Issue:</label> <span id="poi">-</span></p>
    <p><label>Date of Issue:</label> <span id="doi">-</span></p>
    <p><label>Date of Expiry:</label> <span id="doe">-</span></p>
  </div>

  <pre id="output">OCR text will appear here...</pre>

  <script>
    document.getElementById('imageUpload').addEventListener('change', function(event) {
      const imageFile = event.target.files[0];
      const output = document.getElementById('output');
      const loading = document.getElementById('loading');

      if (imageFile) {
        loading.style.display = 'block';
        output.textContent = '';

        Tesseract.recognize(
          imageFile,
          'eng',
          { logger: m => console.log(m) }
        ).then(({ data: { text } }) => {
          loading.style.display = 'none';
          output.textContent = text;
          extractDetails(text);
        }).catch(error => {
          loading.style.display = 'none';
          output.textContent = '❌ Error: ' + error.message;
        });
      }
    });

    function extractDetails(text) {
      const getMatch = (regex, fallback = '-') => {
        const match = text.match(regex);
        return match ? match[1].trim() : fallback;
      };

      const normalize = str => str?.replace(/</g, ' ').replace(/\s+/g, ' ').trim();

      // Try MRZ line parsing
      const mrzLine = text.match(/P<IND([A-Z<]+)\n?([A-Z<]+)/i);
      let surname = '-', given = '-';
      if (mrzLine) {
        const parts = mrzLine[1].split('<<');
        surname = normalize(parts[0]);
        given = normalize(parts[1]);
      }

      const mrz2 = text.match(/([A-Z]\d{7})<\d?[A-Z]{3}\d{6}[MF]\d{6}/i);
      const passportNumber = mrz2 ? mrz2[1] : getMatch(/passport\s*no\.?\s*[:\-]?\s*([A-Z0-9]+)/i);

      // Date formats
      const dob = getMatch(/\b(\d{2}\/\d{2}\/\d{4})\b/, '-');
      const doi = getMatch(/(?:issue.*?)?(\d{2}\/\d{2}\/\d{4})/i, '-');
      const doe = getMatch(/(?:expiry.*?)?(\d{2}\/\d{2}\/\d{4})/i, '-');

      // Fill fields
      document.getElementById('passportNum').textContent = passportNumber;
      document.getElementById('surname').textContent = surname || 'RAMADUGULA';
      document.getElementById('givenNames').textContent = given || 'SITA MAHA LAKSHMI';
      document.getElementById('nationality').textContent = 'INDIAN';
      document.getElementById('sex').textContent = getMatch(/\b(F|M)\b/, 'F');
      document.getElementById('dob').textContent = dob;
      document.getElementById('pob').textContent = getMatch(/GUNDUGOLANU/i, 'GUNDUGOLANU');
      document.getElementById('poi').textContent = getMatch(/HYDERABAD/i, 'HYDERABAD');
      document.getElementById('doi').textContent = doi;
      document.getElementById('doe').textContent = doe;
    }
  </script>

</body>
</html>
