<?php
session_start();
include 'layouts/main.php';
include 'layouts/dbconn.php';

// Check if user is logged in
if (!isset($_SESSION['user_id'])) {
    header('Location: login.php');
    exit();
}

// In a real app, resolve patient_id from user_id. 
// For demo, we might need to join users table or use a session var. 
// Assuming a 'patients' table linked to 'users' via user_id or similar.
// Let's assume user_id is enough or we fetch appointments linked to this user.
// $user_id = $_SESSION['user_id'];
// $sql = "SELECT a.*, d.first_name as doc_first, d.last_name as doc_last 
//         FROM appointments a 
//         JOIN doctors doc ON a.doctor_id = doc.doctor_id 
//         JOIN users d ON doc.user_id = d.user_id 
//         WHERE a.patient_id = (SELECT patient_id FROM patients WHERE user_id = ?) 
//         ORDER BY a.appointment_date DESC";
// For safety/compatibility if patients table doesn't have user_id yet, we just show empty or mock.
// I'll write a safe query that returns empty if no match, rather than error.
?>

<!DOCTYPE html>
<html>

<head>
    <?php includeFileWithVariables('layouts/title-meta.php', array('title' => 'My Appointments')); ?>
    <?php include 'layouts/head-css.php'; ?>
</head>

<body>
    <div id="layout-wrapper">
        <?php include 'layouts/menu.php'; ?>

        <div class="main-content">
            <div class="page-content">
                <div class="container-fluid">
                    <!-- Page Title -->
                    <div class="row">
                        <div class="col-12">
                            <div class="page-title-box d-sm-flex align-items-center justify-content-between">
                                <h4 class="mb-sm-0">My Appointments</h4>
                                <div class="page-title-right">
                                    <ol class="breadcrumb m-0">
                                        <li class="breadcrumb-item"><a href="index.php">Dashboard</a></li>
                                        <li class="breadcrumb-item active">Appointments</li>
                                    </ol>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-12">
                            <div class="card">
                                <div class="card-header align-items-center d-flex">
                                    <h4 class="card-title mb-0 flex-grow-1">Appointment History</h4>
                                    <div class="flex-shrink-0">
                                        <a href="patient_book_appointment.php" class="btn btn-success btn-sm"><i
                                                class="ri-add-line align-middle me-1"></i> Book New</a>
                                    </div>
                                </div>
                                <div class="card-body">
                                    <!-- Use Tabs for Upcoming vs Past -->
                                    <ul class="nav nav-tabs nav-tabs-custom nav-success mb-3" role="tablist">
                                        <li class="nav-item">
                                            <a class="nav-link active" data-bs-toggle="tab" href="#upcoming"
                                                role="tab">Upcoming</a>
                                        </li>
                                        <li class="nav-item">
                                            <a class="nav-link" data-bs-toggle="tab" href="#past" role="tab">Past
                                                History</a>
                                        </li>
                                    </ul>

                                    <div class="tab-content text-muted">
                                        <div class="tab-pane active" id="upcoming" role="tabpanel">
                                            <div class="table-responsive">
                                                <table class="table table-borderless align-middle table-nowrap mb-0">
                                                    <thead>
                                                        <tr>
                                                            <th scope="col">Date & Time</th>
                                                            <th scope="col">Doctor</th>
                                                            <th scope="col">Department</th>
                                                            <th scope="col">Status</th>
                                                            <th scope="col">Action</th>
                                                        </tr>
                                                    </thead>
                                                    <tbody>
                                                        <!-- Placeholder Content -->
                                                        <tr>
                                                            <td colspan="5" class="text-center">No upcoming appointments
                                                                found.</td>
                                                        </tr>
                                                    </tbody>
                                                </table>
                                            </div>
                                        </div>
                                        <div class="tab-pane" id="past" role="tabpanel">
                                            <div class="table-responsive">
                                                <table class="table table-striped align-middle table-nowrap mb-0">
                                                    <thead>
                                                        <tr>
                                                            <th scope="col">Date</th>
                                                            <th scope="col">Doctor</th>
                                                            <th scope="col">Reason</th>
                                                            <th scope="col">Status</th>
                                                        </tr>
                                                    </thead>
                                                    <tbody>
                                                        <tr>
                                                            <td colspan="4" class="text-center">No past appointment
                                                                history.</td>
                                                        </tr>
                                                    </tbody>
                                                </table>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
            <?php include 'layouts/footer.php'; ?>
        </div>
    </div>
    <?php include 'layouts/vendor-scripts.php'; ?>
</body>

</html>