<?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 consultations for this patient
$consultations = $conn->query("
    SELECT c.*, d.name as doctor_name, d.specialization 
    FROM consultations c
    LEFT JOIN doctors d ON c.doctor_id = d.doctor_id
    WHERE c.patient_id = '$user_id'
    ORDER BY c.scheduled_time DESC
");

$page_title = 'My Consultations | 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 Consultations - 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; }
        
        .consultation-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);
        }
        
        .consultation-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-ongoing { background: #dc3545; color: white; animation: pulse 1.5s infinite; }
        .status-completed { background: #28a745; color: white; }
        .status-cancelled { background: #6c757d; color: white; }
        
        @keyframes pulse {
            0% { opacity: 1; }
            50% { opacity: 0.7; }
            100% { opacity: 1; }
        }
        
        .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-consult {
            background: #d4a017;
            color: #0a3d2f;
            border: none;
            border-radius: 40px;
            padding: 10px 25px;
            font-weight: 600;
            text-decoration: none;
        }
        
        .btn-consult: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) {
            .consultation-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-video me-2" style="color: #d4a017;"></i> My Consultations</h2>
                <p class="mb-0 opacity-75">View all your video consultations, past and upcoming.</p>
            </div>
            <div class="col-md-4 text-center mt-3 mt-md-0">
                <a href="join_consultation.php" class="btn-consult me-2"><i class="fas fa-video me-2"></i> New Consultation</a>
                <a href="index.php" class="back-btn"><i class="fas fa-arrow-left me-2"></i> Back</a>
            </div>
        </div>
    </div>

    <!-- Consultations List -->
    <?php if ($consultations && $consultations->num_rows > 0): ?>
        <div class="row">
            <?php while($c = $consultations->fetch_assoc()): 
                $status_class = '';
                $status_text = '';
                if($c['status'] == 'scheduled') {
                    $status_class = 'status-scheduled';
                    $status_text = 'Scheduled';
                } elseif($c['status'] == 'ongoing') {
                    $status_class = 'status-ongoing';
                    $status_text = 'Ongoing';
                } elseif($c['status'] == 'completed') {
                    $status_class = 'status-completed';
                    $status_text = 'Completed';
                } else {
                    $status_class = 'status-cancelled';
                    $status_text = 'Cancelled';
                }
            ?>
                <div class="col-md-6">
                    <div class="consultation-card" onclick="location.href='consultation_detail.php?id=<?= $c['id'] ?>'">
                        <div class="d-flex justify-content-between align-items-start">
                            <div>
                                <div class="doctor-name">Dr. <?= htmlspecialchars($c['doctor_name'] ?? 'Doctor') ?></div>
                                <small class="text-muted"><?= htmlspecialchars($c['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($c['scheduled_time'])) ?></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($c['scheduled_time'])) ?></div>
                                </div>
                            </div>
                        </div>
                        
                        <?php if(!empty($c['reason'])): ?>
                            <div class="mt-2">
                                <small class="text-muted"><i class="fas fa-stethoscope me-1"></i> Reason</small>
                                <div class="small"><?= htmlspecialchars(substr($c['reason'], 0, 80)) ?>...</div>
                            </div>
                        <?php endif; ?>
                        
                        <?php if($c['status'] == 'ongoing' && !empty($c['meeting_link'])): ?>
                            <div class="mt-3">
                                <a href="<?= $c['meeting_link'] ?>" target="_blank" class="btn btn-danger btn-sm rounded-pill w-100">
                                    <i class="fas fa-video me-2"></i> Join Now
                                </a>
                            </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> Secure consultations | 
                <i class="fas fa-clock ms-2 me-1"></i> 24/7 Access to your records
            </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-video-slash fa-4x mb-3" style="color: #d4a017;"></i>
            <h4 class="text-white mb-2">No Consultations Yet</h4>
            <p class="text-white-50 mb-3">You haven't had any video consultations yet.</p>
            <a href="join_consultation.php" class="btn-consult"><i class="fas fa-video me-2"></i> Start Your First Consultation</a>
        </div>
    <?php endif; ?>
</div>

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