<?php
session_start();
error_reporting(E_ALL);
ini_set('display_errors', 1);

if (!isset($_SESSION['patient_id'])) {
    header("Location: ../login.php");
    exit();
}
include '../../include/config.php';

$user_id = $_SESSION['patient_id'];
$user_name = $_SESSION['patient_name'];

// Get all appointments for this patient
$appointments = $conn->query("
    SELECT a.*, d.name as doctor_name, d.specialization 
    FROM appointments a
    LEFT JOIN doctors d ON a.doctor_id = d.doctor_id
    WHERE a.patient_id = '$user_id'
    ORDER BY a.appointment_date DESC
");

$page_title = 'My Appointments | UHD';
include '../../include/header.php';
?>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Appointments - UHD</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css">
    <style>
        body { background: linear-gradient(135deg, #0a3d2f, #064e3b); font-family: 'Segoe UI', sans-serif; }
        
        .appointment-card {
            background: white;
            border-radius: 20px;
            padding: 20px;
            margin-bottom: 20px;
            transition: all 0.3s ease;
            border-left: 4px solid #d4a017;
            cursor: pointer;
            box-shadow: 0 2px 8px rgba(0,0,0,0.05);
        }
        
        .appointment-card:hover {
            transform: translateX(5px);
            box-shadow: 0 10px 25px rgba(0,0,0,0.15);
        }
        
        .doctor-name {
            font-size: 1.1rem;
            font-weight: 700;
            color: #0a3d2f;
            margin-bottom: 5px;
        }
        
        .status-badge {
            padding: 4px 12px;
            border-radius: 20px;
            font-size: 0.7rem;
            font-weight: 600;
            display: inline-block;
        }
        
        .status-scheduled { background: #ffc107; color: #856404; }
        .status-confirmed { background: #28a745; color: white; }
        .status-completed { background: #17a2b8; color: white; }
        .status-cancelled { background: #6c757d; color: white; }
        
        .header-section {
            background: rgba(255,255,255,0.08);
            backdrop-filter: blur(10px);
            border-radius: 24px;
            padding: 25px;
            margin-bottom: 30px;
            border: 1px solid rgba(255,255,255,0.1);
        }
        
        .btn-appointment {
            background: #d4a017;
            color: #0a3d2f;
            border: none;
            border-radius: 40px;
            padding: 10px 25px;
            font-weight: 600;
            text-decoration: none;
        }
        
        .btn-appointment:hover {
            background: #b8860b;
            color: white;
        }
        
        .back-btn {
            background: rgba(255,255,255,0.15);
            border: 1px solid rgba(255,255,255,0.2);
            color: white;
            border-radius: 40px;
            padding: 8px 20px;
            text-decoration: none;
        }
        
        .back-btn:hover {
            background: #d4a017;
            color: #0a3d2f;
        }
        
        @media (max-width: 768px) {
            .appointment-card { padding: 15px; }
            .doctor-name { font-size: 1rem; }
        }
    </style>
</head>
<body>

<div class="container mt-4">
    <!-- Header Section -->
    <div class="header-section text-white">
        <div class="row align-items-center">
            <div class="col-md-8">
                <h2 class="fw-bold mb-2"><i class="fas fa-calendar-alt me-2" style="color: #d4a017;"></i> My Appointments</h2>
                <p class="mb-0 opacity-75">View and manage all your scheduled appointments with doctors.</p>
            </div>
            <div class="col-md-4 text-center mt-3 mt-md-0">
                <a href="add_appointment.php" class="btn-appointment me-2"><i class="fas fa-plus me-2"></i> Book Appointment</a>
                <a href="index.php" class="back-btn"><i class="fas fa-arrow-left me-2"></i> Back</a>
            </div>
        </div>
    </div>

    <!-- Appointments List -->
    <?php if ($appointments && $appointments->num_rows > 0): ?>
        <div class="row">
            <?php while($a = $appointments->fetch_assoc()): 
                $status_class = '';
                $status_text = '';
                $status = $a['status'] ?? 'scheduled';
                
                if($status == 'scheduled') {
                    $status_class = 'status-scheduled';
                    $status_text = 'Scheduled';
                } elseif($status == 'confirmed') {
                    $status_class = 'status-confirmed';
                    $status_text = 'Confirmed';
                } elseif($status == 'completed') {
                    $status_class = 'status-completed';
                    $status_text = 'Completed';
                } else {
                    $status_class = 'status-cancelled';
                    $status_text = 'Cancelled';
                }
            ?>
                <div class="col-md-6">
                    <div class="appointment-card" onclick="alert('Appointment details coming soon')">
                        <div class="d-flex justify-content-between align-items-start">
                            <div>
                                <div class="doctor-name">Dr. <?= htmlspecialchars($a['doctor_name'] ?? 'Doctor') ?></div>
                                <small class="text-muted"><?= htmlspecialchars($a['specialization'] ?? 'General Medicine') ?></small>
                            </div>
                            <span class="status-badge <?= $status_class ?>"><?= $status_text ?></span>
                        </div>
                        
                        <div class="mt-3">
                            <div class="row">
                                <div class="col-6">
                                    <small class="text-muted"><i class="far fa-calendar-alt me-1"></i> Date</small>
                                    <div class="fw-semibold"><?= date('M d, Y', strtotime($a['appointment_date'])) ?></div>
                                </div>
                                <div class="col-6">
                                    <small class="text-muted"><i class="far fa-clock me-1"></i> Time</small>
                                    <div class="fw-semibold"><?= date('h:i A', strtotime($a['appointment_time'])) ?></div>
                                </div>
                            </div>
                        </div>
                        
                        <?php if(!empty($a['reason'])): ?>
                            <div class="mt-2">
                                <small class="text-muted"><i class="fas fa-stethoscope me-1"></i> Reason</small>
                                <div class="small"><?= htmlspecialchars(substr($a['reason'], 0, 80)) ?>...</div>
                            </div>
                        <?php endif; ?>
                        
                        <?php if($status == 'scheduled' || $status == 'confirmed'): ?>
                            <div class="mt-3">
                                <button class="btn btn-sm btn-outline-danger rounded-pill me-2" onclick="event.stopPropagation(); cancelAppointment(<?= $a['appointment_id'] ?>)">
                                    <i class="fas fa-times me-1"></i> Cancel
                                </button>
                                <button class="btn btn-sm btn-outline-primary rounded-pill" onclick="event.stopPropagation(); rescheduleAppointment(<?= $a['appointment_id'] ?>)">
                                    <i class="fas fa-calendar-alt me-1"></i> Reschedule
                                </button>
                            </div>
                        <?php endif; ?>
                    </div>
                </div>
            <?php endwhile; ?>
        </div>
        
        <!-- Info Footer -->
        <div class="text-center mt-4">
            <small class="text-white-50">
                <i class="fas fa-shield-alt me-1"></i> Your appointments are secure | 
                <i class="fas fa-bell ms-2 me-1"></i> Reminders sent via email/SMS
            </small>
        </div>
        
    <?php else: ?>
        <!-- Empty State -->
        <div class="alert alert-info text-center py-5" style="background: rgba(255,255,255,0.1); border: none; backdrop-filter: blur(5px);">
            <i class="fas fa-calendar-times fa-4x mb-3" style="color: #d4a017;"></i>
            <h4 class="text-white mb-2">No Appointments Yet</h4>
            <p class="text-white-50 mb-3">You haven't scheduled any appointments yet.</p>
            <a href="add_appointment.php" class="btn-appointment"><i class="fas fa-plus me-2"></i> Book Your First Appointment</a>
        </div>
    <?php endif; ?>
</div>

<script>
function cancelAppointment(id) {
    if(confirm('Are you sure you want to cancel this appointment?')) {
        alert('Appointment cancellation requested. You will be notified.');
        // Here you would make an AJAX call to cancel
    }
}

function rescheduleAppointment(id) {
    alert('Reschedule feature coming soon. Please contact support.');
}
</script>

<?php include '../../include/footer.php'; ?>