<!-- wp:paragraph -->
<p></p>
<!-- /wp:paragraph -->

<!-- wp:html -->
<form id="appointment-form">
  <label for="patient-id">Enter Your Patient ID:</label><br>
  <input type="text" id="patient-id" name="patient-id" required><br><br>
  <input type="submit" value="View Appointment">
</form>

<div id="appointment-details"></div>

<script>
// This function fetches the Google Sheet data in CSV format
function fetchGoogleSheet(patientId) {
  // URL of the published Google Sheet in CSV format (replace with your own Google Sheet URL)
  const googleSheetUrl = 'https://docs.google.com/spreadsheets/d/e/2PACX-1vQhTvUnI6Kq0DrShf2OxjIwmrP_F93Gur-tloNN9wkH6wVrcEUevqlkT_041_0V7gCGWJGcKXs2aRkx/pub?output=csv';

  fetch(googleSheetUrl)
    .then(response => response.text())
    .then(data => {
      const rows = data.split("\n").map(row => row.split(","));
      let appointmentDetails = '';

      rows.forEach((row, index) => {
        // Match the patient ID to the first column (assuming Patient ID is in column A)
        if (row[0].trim() === patientId) {
          appointmentDetails = `
            <h3>Appointment Details</h3>
            <p><strong>Patient Name:</strong> ${row[1]}</p>
            <p><strong>Appointment Date:</strong> ${row[2]}</p>
            <p><strong>Appointment Time:</strong> ${row[3]}</p>
            <p><strong>Details:</strong> ${row[4]}</p>
          `;
        }
      });

      // Display the appointment details on the page
      document.getElementById('appointment-details').innerHTML = appointmentDetails || '<p>No appointment found for this ID.</p>';
    })
    .catch(error => {
      console.error('Error fetching data:', error);
    });
}

// Event listener for form submission
document.getElementById('appointment-form').addEventListener('submit', function(e) {
  e.preventDefault();
  const patientId = document.getElementById('patient-id').value.trim();
  fetchGoogleSheet(patientId);
});
</script>

<!-- /wp:html -->