<!-- 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>
// Function to fetch 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(","));
      const rowIndex = parseInt(patientId, 10) - 1; // Convert patient ID to row number (0-based index)
      
      let appointmentDetails = '';

      // Check if the row exists in the CSV data
      if (rowIndex >= 0 && rowIndex < rows.length) {
        const row = rows[rowIndex]; // Get the row corresponding to the patient ID

        // Display appointment details for the row
        appointmentDetails = `
          <h3>Appointment Details</h3>
          <p><strong>Patient Name:</strong> ${row[0]}</p> <!-- Column 1 -->
          <p><strong>Appointment Date:</strong> ${row[1]}</p> <!-- Column 2 -->
          <p><strong>Appointment Time:</strong> ${row[2]}</p> <!-- Column 3 -->
          <p><strong>Details:

<!-- /wp:html -->