<!-- wp:html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Patient Appointment Lookup</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
            padding: 20px;
            background-color: #f4f4f4;
        }
        h1 {
            color: #333;
        }
        form {
            margin-bottom: 20px;
        }
        input[type="number"] {
            padding: 10px;
            width: 200px;
            border: 1px solid #ccc;
            border-radius: 4px;
            margin-right: 10px;
        }
        button {
            padding: 10px 15px;
            background-color: #5cb85c;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }
        button:hover {
            background-color: #4cae4c;
        }
        #appointmentDetails {
            background-color: white;
            border: 1px solid #ccc;
            border-radius: 4px;
            padding: 20px;
            margin-top: 20px;
        }
        #appointmentDetails h2 {
            margin-top: 0;
            color: #5cb85c;
        }
        p {
            margin: 5px 0;
        }
    </style>
</head>
<body>
    <h1>Appointment Details Lookup</h1>
    <form id="patientForm">
        <label for="patientId">Enter your Patient ID:</label>
        <input type="number" id="patientId" name="patientId" required>
        <button type="submit">Submit</button>
    </form>

    <div id="appointmentDetails" style="display: none;">
        <h2>Your Appointment Details</h2>
        <p id="name" style="font-weight: bold;"></p>
        <p id="date"></p>
        <p id="time"></p>
        <p id="details"></p>
    </div>

    <script>
        // CSV file URL
        const csvUrl = 'https://docs.google.com/spreadsheets/d/e/2PACX-1vQhTvUnI6Kq0DrShf2OxjIwmrP_F93Gur-tloNN9wkH6wVrcEUevqlkT_041_0V7gCGWJGcKXs2aRkx/pub?gid=0&single=true&output=csv';

        // Function to parse CSV data into an array of arrays
        function parseCSV(text) {
            const rows = text.split('\n').map(row => row.split(','));
            return rows;
        }

        // Function to handle fetching and displaying appointment details
        function fetchAppointmentDetails(patientId) {
            // Fetch the CSV data
            fetch(csvUrl)
                .then(response => response.text())
                .then(data => {
                    const appointments = parseCSV(data);
                    
                    // Adjust the index to fetch the next row (+1)
                    const rowIndex = patientId + 1; // Adding 1 to the patientId to get the next row
                    if (rowIndex > 0 && rowIndex < appointments.length) {
                        const appointmentRow = appointments[rowIndex]; // Access the next row

                        // Assuming columns: [name, date, time, details]
                        document.getElementById('name').textContent = `Patient Name: ${appointmentRow[0]}`;
                        document.getElementById('date').textContent = `Appointment Date: ${appointmentRow[1]}`;
                        document.getElementById('time').textContent = `Appointment Time: ${appointmentRow[2]}`;
                        document.getElementById('details').textContent = `Details: ${appointmentRow[3]}`;

                        document.getElementById('appointmentDetails').style.display = 'block';
                    } else {
                        alert('Invalid Patient ID');
                    }
                })
                .catch(error => console.error('Error fetching CSV data:', error));
        }

        // Check if there is a patient-id parameter in the URL
        const urlParams = new URLSearchParams(window.location.search);
        const patientIdFromUrl = urlParams.get('patient-id');

        if (patientIdFromUrl) {
            // If patient-id is provided in the URL, fetch details directly
            fetchAppointmentDetails(parseInt(patientIdFromUrl, 10));
        }

        // Handle form submission
        document.getElementById('patientForm').addEventListener('submit', function (event) {
            event.preventDefault();
            const patientId = parseInt(document.getElementById('patientId').value, 10);
            fetchAppointmentDetails(patientId);
        });
    </script>
</body>
</html>

<!-- /wp:html -->

<!-- wp:html -->
https://wa.me/8801307978439?text=I'd%20like%20to%20make%20an%20appointment

<!-- /wp:html -->