document.addEventListener("DOMContentLoaded", function() {
    // Load appointments from localStorage
    const appointments = JSON.parse(localStorage.getItem("appointments")) || [];

    // Get current date for comparison
    const now = new Date();

    // Helper function to convert date string to Date object
    function getDateFromString(dateStr) {
        return new Date(dateStr);
    }

    // Split appointments into upcoming and past, then sort by date
    const upcoming = appointments
        .filter(app => getDateFromString(app.date) >= now)
        .sort((a, b) => getDateFromString(b.date) - getDateFromString(a.date));

    const past = appointments
        .filter(app => getDateFromString(app.date) < now)
        .sort((a, b) => getDateFromString(b.date) - getDateFromString(a.date));

    // Display upcoming appointments
    const upcomingContainer = document.getElementById("upcoming-appointments");
    if (upcoming.length > 0) {
        upcoming.forEach(app => {
            upcomingContainer.innerHTML += `
                <div class="appointment-card">
                    <div class="appointment-info">
                        <h3>${app.type}</h3>
                        <div class="appointment-details">
                            ${app.date} at ${app.time}<br>
                            ${app.doctor} - ${app.location}
                        </div>
                    </div>
                    <span class="appointment-status status-scheduled">Scheduled</span>
                </div>
            `;
        });
    } else {
        upcomingContainer.innerHTML = "<p>No upcoming appointments</p>";
    }

    // Display past appointments
    const pastContainer = document.getElementById("past-appointments");
    if (past.length > 0) {
        past.forEach(app => {
            pastContainer.innerHTML += `
                <tr>
                    <td>${app.date}</td>
                    <td>${app.time}</td>
                    <td>${app.doctor}</td>
                    <td>${app.type}</td>
                    <td><span class="appointment-status status-completed">Completed</span></td>
                </tr>
            `;
        });
    } else {
        pastContainer.innerHTML = "<tr><td colspan='5'>No past appointments</td></tr>";
    }
});