schedule.php

<?php
session_start();
require_once 'db/config.php';

// Check if user is an expert
if (!isset($_SESSION['expert_id']) || $_SESSION['role'] !== 'expert') {
    header('Location: login_signup.php');
    exit();
}

// Handle logout
if (isset($_GET['logout'])) {
    session_destroy();
    header('Location: login_signup.php');
    exit();
}

// Initialize messages
$success_message = '';
$error_message = '';

// Handle schedule creation
if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['action']) && $_POST['action'] === 'add_schedule') {
    $expert_id = $_SESSION['expert_id'];
    $date = trim($_POST['schedule_date'] ?? '');
    $start_time = trim($_POST['start_time'] ?? '');
    $end_time = trim($_POST['end_time'] ?? '');
    $session_type = trim($_POST['session_type'] ?? '');
    $max_appointments = (int)($_POST['max_appointments'] ?? 1);
    $notes = trim($_POST['notes'] ?? '');

    // Validation
    if (empty($date) || empty($start_time) || empty($end_time) || empty($session_type)) {
        $error_message = 'Please fill in all required fields.';
    } elseif (strtotime($date . ' ' . $start_time) >= strtotime($date . ' ' . $end_time)) {
        $error_message = 'End time must be after start time.';
    } elseif (strtotime($date) < strtotime(date('Y-m-d'))) {
        $error_message = 'Schedule date cannot be in the past.';
    } else {
        // Check for conflicting schedules
        $check_sql = "SELECT COUNT(*) as conflicts FROM schedule 
                      WHERE eid = ? AND schedule_date = ? 
                      AND ((start_time <= ? AND end_time > ?) 
                           OR (start_time < ? AND end_time >= ?)
                           OR (start_time >= ? AND end_time <= ?))";
        $check_stmt = $conn->prepare($check_sql);
        $check_stmt->bind_param("isssssss", $expert_id, $date, $start_time, $start_time, $end_time, $end_time, $start_time, $end_time);
        $check_stmt->execute();
        $conflicts = $check_stmt->get_result()->fetch_assoc()['conflicts'];
        $check_stmt->close();

        if ($conflicts > 0) {
            $error_message = 'This time slot conflicts with an existing schedule.';
        } else {
            // Insert new schedule
            $insert_sql = "INSERT INTO schedule (eid, schedule_date, start_time, end_time, session_type, max_appointments, current_appointments, notes, status) 
                          VALUES (?, ?, ?, ?, ?, ?, 0, ?, 'available')";
            $insert_stmt = $conn->prepare($insert_sql);
            $insert_stmt->bind_param("issssis", $expert_id, $date, $start_time, $end_time, $session_type, $max_appointments, $notes);
            
            if ($insert_stmt->execute()) {
                $success_message = 'Schedule added successfully!';
            } else {
                $error_message = 'Failed to add schedule. Please try again.';
            }
            $insert_stmt->close();
        }
    }
}

// Handle schedule deletion
if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['action']) && $_POST['action'] === 'delete_schedule') {
    $schedule_id = (int)($_POST['schedule_id'] ?? 0);
    $expert_id = $_SESSION['expert_id'];
    
    // Delete schedule (only if it belongs to this expert and has no appointments)
    $delete_sql = "DELETE FROM schedule WHERE shid = ? AND eid = ? AND current_appointments = 0";
    $delete_stmt = $conn->prepare($delete_sql);
    $delete_stmt->bind_param("ii", $schedule_id, $expert_id);
    
    if ($delete_stmt->execute() && $delete_stmt->affected_rows > 0) {
        $success_message = 'Schedule deleted successfully!';
    } else {
        $error_message = 'Cannot delete schedule. It may have existing appointments or not belong to you.';
    }
    $delete_stmt->close();
}

// Fetch expert's schedules
$expert_id = $_SESSION['expert_id'];
$schedules_sql = "SELECT * FROM schedule WHERE eid = ? ORDER BY schedule_date ASC, start_time ASC";
$schedules_stmt = $conn->prepare($schedules_sql);
$schedules_stmt->bind_param("i", $expert_id);
$schedules_stmt->execute();
$schedules = $schedules_stmt->get_result();
?>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Schedule - Soullift</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: {
                            50: '#f0fdfc',
                            100: '#ccfbf1',
                            200: '#99f6e4',
                            300: '#5eead4',
                            400: '#2dd4bf',
                            500: '#14b8a6',
                            600: '#0d9488',
                            700: '#0f766e',
                            800: '#115e59',
                            900: '#134e4a',
                        },
                        secondary: {
                            50: '#fdf4ff',
                            100: '#fae8ff',
                            200: '#f5d0fe',
                            300: '#f0abfc',
                            400: '#e879f9',
                            500: '#dc4cff',
                            600: '#c026d3',
                            700: '#a21caf',
                            800: '#86198f',
                            900: '#701a75',
                        },
                        accent: {
                            50: '#fff7ed',
                            100: '#ffedd5',
                            200: '#fed7aa',
                            300: '#fdba74',
                            400: '#fb923c',
                            500: '#f97316',
                            600: '#ea580c',
                            700: '#c2410c',
                            800: '#9a3412',
                            900: '#7c2d12',
                        }
                    },
                    fontFamily: {
                        'heading': ['Poppins', 'sans-serif'],
                        'body': ['Inter', 'sans-serif'],
                    },
                    animation: {
                        'float': 'float 6s ease-in-out infinite',
                        'fade-in': 'fadeIn 0.5s ease-in',
                        'slide-up': 'slideUp 0.5s ease-out',
                        'bounce-in': 'bounceIn 0.5s ease-out',
                    },
                    backdropBlur: {
                        xs: '2px',
                    }
                }
            }
        }
    </script>
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Poppins:wght@400;500;600;700;800&display=swap');
        
        .glass-effect {
            background: rgba(255, 255, 255, 0.25);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.18);
        }
        
        .glass-card {
            background: rgba(255, 255, 255, 0.8);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.2);
        }
        
        .btn-primary {
            background: linear-gradient(135deg, #14b8a6 0%, #0f766e 100%);
        }
        
        .btn-secondary {
            background: linear-gradient(135deg, #dc4cff 0%, #a21caf 100%);
        }
        
        .gradient-text {
            background: linear-gradient(135deg, #14b8a6 0%, #dc4cff 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }
        
        @keyframes float {
            0%, 100% { transform: translateY(0px); }
            50% { transform: translateY(-20px); }
        }
        
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(20px); }
            to { opacity: 1; transform: translateY(0); }
        }
        
        @keyframes slideUp {
            from { opacity: 0; transform: translateY(30px); }
            to { opacity: 1; transform: translateY(0); }
        }
        
        @keyframes bounceIn {
            0% { opacity: 0; transform: scale(0.3); }
            50% { opacity: 1; transform: scale(1.05); }
            70% { transform: scale(0.9); }
            100% { opacity: 1; transform: scale(1); }
        }
        
        .animate-fade-in { animation: fadeIn 0.5s ease-in; }
        .animate-slide-up { animation: slideUp 0.5s ease-out; }
        .animate-bounce-in { animation: bounceIn 0.5s ease-out; }
        
        /* Mobile menu toggle function */
        function toggleMobileMenu() {
            const menu = document.getElementById('mobile-menu');
            menu.classList.toggle('hidden');
        }
    </style>
</head>
<body class="min-h-screen bg-gradient-to-br from-primary-50 via-white to-secondary-50 font-body">
    
    <!-- Floating Elements -->
    <div class="fixed inset-0 overflow-hidden pointer-events-none">
        <div class="absolute top-20 left-10 w-20 h-20 bg-primary-200 rounded-full opacity-20 animate-float"></div>
        <div class="absolute top-40 right-20 w-16 h-16 bg-secondary-200 rounded-full opacity-20 animate-float" style="animation-delay: 2s;"></div>
        <div class="absolute bottom-40 left-20 w-12 h-12 bg-accent-200 rounded-full opacity-20 animate-float" style="animation-delay: 4s;"></div>
        <div class="absolute bottom-20 right-10 w-24 h-24 bg-primary-200 rounded-full opacity-20 animate-float" style="animation-delay: 1s;"></div>
    </div>
    <!-- Header -->
    <header class="glass-effect sticky top-0 z-50 border-b border-white/20">
        <div class="container mx-auto px-6">
            <nav class="flex justify-between items-center py-4">
                <!-- Logo -->
                <a href="Homepage.php" class="flex items-center space-x-3 group">
                    <div class="relative">
                        <img src="resources/soullift-logo.svg" alt="SoulLift Logo" class="h-10 w-auto group-hover:scale-105 transition-transform duration-300">
                    </div>
                </a>
                
                <!-- Desktop Navigation -->
                <ul class="hidden lg:flex items-center space-x-8">
                    <li><a href="Homepage.php?page=home" class="text-gray-700 hover:text-primary-600 transition-colors font-medium px-4 py-2 rounded-xl hover:bg-white/50">Home</a></li>
                    <li><a href="user_profile.php" class="text-gray-700 hover:text-primary-600 transition-colors font-medium px-4 py-2 rounded-xl hover:bg-white/50">My Profile</a></li>
                    <li><a href="blog.php" class="text-gray-700 hover:text-primary-600 transition-colors font-medium px-4 py-2 rounded-xl hover:bg-white/50">Blog</a></li>
                    <?php
                        // choose appointments page based on role
                        $appointmentsPage = (isset($_SESSION['role']) && $_SESSION['role'] === 'expert') ? 'expert_appointments.php' : 'user_appointments.php';
                    ?>
                    <?php if (isset($_SESSION['role']) && $_SESSION['role'] === 'user'): ?>
                        <li><a href="experts.php" class="text-gray-700 hover:text-primary-600 transition-colors font-medium px-4 py-2 rounded-xl hover:bg-white/50">Experts</a></li>
                        <li><a href="courses.php" class="text-gray-700 hover:text-primary-600 transition-colors font-medium px-4 py-2 rounded-xl hover:bg-white/50">Courses</a></li>
                        <li><a href="services.php" class="text-gray-700 hover:text-primary-600 transition-colors font-medium px-4 py-2 rounded-xl hover:bg-white/50">Services</a></li>
                        <li><a href="<?php echo $appointmentsPage; ?>" class="text-gray-700 hover:text-primary-600 transition-colors font-medium px-4 py-2 rounded-xl hover:bg-white/50">Appointments</a></li>
                    <?php elseif (isset($_SESSION['role']) && $_SESSION['role'] === 'expert'): ?>
                        <li><a href="courses.php" class="text-gray-700 hover:text-primary-600 transition-colors font-medium px-4 py-2 rounded-xl hover:bg-white/50">Courses</a></li>
                        <li><a href="schedule.php" class="text-primary-600 font-semibold px-4 py-2 rounded-xl bg-primary-50/50 backdrop-blur-sm">Schedule</a></li>
                        <li><a href="<?php echo $appointmentsPage; ?>" class="text-gray-700 hover:text-primary-600 transition-colors font-medium px-4 py-2 rounded-xl hover:bg-white/50">Appointments</a></li>
                    <?php else: ?>
                        <li><a href="courses.php" class="text-gray-700 hover:text-primary-600 transition-colors font-medium px-4 py-2 rounded-xl hover:bg-white/50">Courses</a></li>
                    <?php endif; ?>
                    <li><a href="about.php" class="text-gray-700 hover:text-primary-600 transition-colors font-medium px-4 py-2 rounded-xl hover:bg-white/50">About Us</a></li>
                </ul>

                <!-- Right side buttons -->
                <div class="flex items-center space-x-4">
                    <!-- Notification Button -->
                    <a href="notifications.php" class="relative glass-effect text-primary-600 px-4 py-2 rounded-xl hover:bg-white/50 transition-all duration-300 group">
                        <i class="fas fa-bell mr-2 group-hover:animate-pulse"></i>
                        <span class="hidden sm:inline">Notifications</span>
                    </a>
                    
                    <?php if (isset($_SESSION['role'])): ?>
                        <a href="Homepage.php?logout=1" class="btn-secondary text-white px-6 py-2 rounded-xl font-semibold shadow-lg hover:shadow-xl transition-all duration-300">
                            <i class="fas fa-sign-out-alt mr-2"></i>
                            Log Out
                        </a>
                    <?php else: ?>
                        <a href="login_signup.php" class="btn-primary text-white px-6 py-2 rounded-xl font-semibold shadow-lg hover:shadow-xl transition-all duration-300">
                            <i class="fas fa-rocket mr-2"></i>
                            Get Started
                        </a>
                    <?php endif; ?>
                </div>
                
                <!-- Mobile Menu Button -->
                <button class="lg:hidden text-gray-700 hover:text-primary-600 transition-colors p-2" onclick="toggleMobileMenu()">
                    <i class="fas fa-bars text-xl"></i>
                </button>
            </nav>
            
            <!-- Mobile Navigation -->
            <div id="mobile-menu" class="lg:hidden hidden pb-4">
                <div class="glass-card rounded-2xl p-4 mt-4">
                    <ul class="space-y-2">
                        <li><a href="Homepage.php?page=home" class="block text-gray-700 hover:text-primary-600 transition-colors px-4 py-3 rounded-xl hover:bg-white/50">Home</a></li>
                        <li><a href="user_profile.php" class="block text-gray-700 hover:text-primary-600 transition-colors px-4 py-3 rounded-xl hover:bg-white/50">My Profile</a></li>
                        <li><a href="blog.php" class="block text-gray-700 hover:text-primary-600 transition-colors px-4 py-3 rounded-xl hover:bg-white/50">Blog</a></li>
                        <?php if (isset($_SESSION['role']) && $_SESSION['role'] === 'user'): ?>
                            <li><a href="experts.php" class="block text-gray-700 hover:text-primary-600 transition-colors px-4 py-3 rounded-xl hover:bg-white/50">Experts</a></li>
                            <li><a href="courses.php" class="block text-gray-700 hover:text-primary-600 transition-colors px-4 py-3 rounded-xl hover:bg-white/50">Courses</a></li>
                            <li><a href="services.php" class="block text-gray-700 hover:text-primary-600 transition-colors px-4 py-3 rounded-xl hover:bg-white/50">Services</a></li>
                            <li><a href="<?php echo $appointmentsPage; ?>" class="block text-gray-700 hover:text-primary-600 transition-colors px-4 py-3 rounded-xl hover:bg-white/50">Appointments</a></li>
                        <?php elseif (isset($_SESSION['role']) && $_SESSION['role'] === 'expert'): ?>
                            <li><a href="courses.php" class="block text-gray-700 hover:text-primary-600 transition-colors px-4 py-3 rounded-xl hover:bg-white/50">Courses</a></li>
                            <li><a href="schedule.php" class="block text-primary-600 font-semibold px-4 py-3 rounded-xl bg-primary-50/50">Schedule</a></li>
                            <li><a href="<?php echo $appointmentsPage; ?>" class="block text-gray-700 hover:text-primary-600 transition-colors px-4 py-3 rounded-xl hover:bg-white/50">Appointments</a></li>
                        <?php else: ?>
                            <li><a href="courses.php" class="block text-gray-700 hover:text-primary-600 transition-colors px-4 py-3 rounded-xl hover:bg-white/50">Courses</a></li>
                        <?php endif; ?>
                        <li><a href="about.php" class="block text-gray-700 hover:text-primary-600 transition-colors px-4 py-3 rounded-xl hover:bg-white/50">About Us</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </header>

    <!-- Hero Section -->
    <section class="relative py-20 px-6 overflow-hidden">
        <div class="container mx-auto">
            <div class="text-center max-w-4xl mx-auto">
                <div class="inline-flex items-center space-x-2 glass-effect px-6 py-3 rounded-full text-primary-600 font-medium mb-8 animate-fade-in">
                    <i class="fas fa-calendar-alt"></i>
                    <span>Expert Schedule Management</span>
                </div>
                
                <h1 class="text-5xl lg:text-6xl font-heading font-bold mb-6 animate-slide-up">
                    Manage Your 
                    <span class="gradient-text">Schedule</span>
                </h1>
                
                <p class="text-xl text-gray-600 mb-8 max-w-3xl mx-auto leading-relaxed animate-fade-in" style="animation-delay: 0.2s;">
                    Set your availability and organize consultation time slots to help students on their mental wellness journey
                </p>
                
                <div class="grid grid-cols-1 md:grid-cols-3 gap-6 max-w-3xl mx-auto animate-fade-in" style="animation-delay: 0.4s;">
                    <div class="glass-card rounded-2xl p-6 text-center">
                        <div class="w-12 h-12 bg-primary-100 rounded-xl flex items-center justify-center mx-auto mb-4">
                            <i class="fas fa-clock text-primary-600 text-xl"></i>
                        </div>
                        <h3 class="font-semibold text-gray-800 mb-2">Flexible Hours</h3>
                        <p class="text-gray-600 text-sm">Set your preferred times</p>
                    </div>
                    
                    <div class="glass-card rounded-2xl p-6 text-center">
                        <div class="w-12 h-12 bg-secondary-100 rounded-xl flex items-center justify-center mx-auto mb-4">
                            <i class="fas fa-users text-secondary-600 text-xl"></i>
                        </div>
                        <h3 class="font-semibold text-gray-800 mb-2">Student Bookings</h3>
                        <p class="text-gray-600 text-sm">Manage appointments</p>
                    </div>
                    
                    <div class="glass-card rounded-2xl p-6 text-center">
                        <div class="w-12 h-12 bg-accent-100 rounded-xl flex items-center justify-center mx-auto mb-4">
                            <i class="fas fa-heart text-accent-600 text-xl"></i>
                        </div>
                        <h3 class="font-semibold text-gray-800 mb-2">Mental Wellness</h3>
                        <p class="text-gray-600 text-sm">Support student growth</p>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Main Content -->
    <div class="container mx-auto px-4 pb-16">
        <!-- Messages -->
        <?php if (!empty($success_message)): ?>
            <div class="bg-green-50 border border-green-200 text-green-800 px-6 py-4 rounded-xl mb-8 flex items-center space-x-3">
                <i class="fas fa-check-circle text-green-600 text-xl"></i>
                <div><?= htmlspecialchars($success_message) ?></div>
            </div>
        <?php endif; ?>

        <?php if (!empty($error_message)): ?>
            <div class="bg-red-50 border border-red-200 text-red-800 px-6 py-4 rounded-xl mb-8 flex items-center space-x-3">
                <i class="fas fa-exclamation-circle text-red-600 text-xl"></i>
                <div><?= htmlspecialchars($error_message) ?></div>
            </div>
        <?php endif; ?>

        <!-- Add Schedule Form -->
        <div class="glass-card rounded-3xl shadow-2xl p-8 mb-12 animate-slide-up">
            <div class="flex items-center mb-8">
                <div class="w-16 h-16 bg-gradient-to-br from-primary-500 to-primary-600 rounded-2xl flex items-center justify-center mr-6 shadow-lg">
                    <i class="fas fa-calendar-plus text-white text-2xl"></i>
                </div>
                <div>
                    <h2 class="text-3xl font-heading font-bold text-gray-800">Add New Schedule</h2>
                    <p class="text-gray-600">Create new availability slots for your students</p>
                </div>
            </div>

            <form method="POST" class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <input type="hidden" name="action" value="add_schedule">
                
                <div class="space-y-2">
                    <label class="block text-sm font-semibold text-gray-700">Date</label>
                    <input type="date" name="schedule_date" required min="<?= date('Y-m-d') ?>"
                           class="w-full border-2 border-gray-200 rounded-2xl px-6 py-4 focus:outline-none focus:border-primary-500 focus:ring-4 focus:ring-primary-100 transition-all duration-300">
                </div>

                <div class="space-y-2">
                    <label class="block text-sm font-semibold text-gray-700">Session Type</label>
                    <select name="session_type" required
                            class="w-full border-2 border-gray-200 rounded-2xl px-6 py-4 focus:outline-none focus:border-primary-500 focus:ring-4 focus:ring-primary-100 transition-all duration-300">
                        <option value="">Select session type</option>
                        <option value="consultation">Consultation</option>
                        <option value="therapy">Therapy Session</option>
                        <option value="group">Group Session</option>
                        <option value="online">Online Session</option>
                        <option value="workshop">Workshop</option>
                    </select>
                </div>

                <div class="space-y-2">
                    <label class="block text-sm font-semibold text-gray-700">Start Time</label>
                    <input type="time" name="start_time" required
                           class="w-full border-2 border-gray-200 rounded-2xl px-6 py-4 focus:outline-none focus:border-primary-500 focus:ring-4 focus:ring-primary-100 transition-all duration-300">
                </div>

                <div class="space-y-2">
                    <label class="block text-sm font-semibold text-gray-700">End Time</label>
                    <input type="time" name="end_time" required
                           class="w-full border-2 border-gray-200 rounded-2xl px-6 py-4 focus:outline-none focus:border-primary-500 focus:ring-4 focus:ring-primary-100 transition-all duration-300">
                </div>

                <div class="space-y-2">
                    <label class="block text-sm font-semibold text-gray-700">Max Appointments</label>
                    <input type="number" name="max_appointments" required min="1" max="10" value="1"
                           class="w-full border-2 border-gray-200 rounded-2xl px-6 py-4 focus:outline-none focus:border-primary-500 focus:ring-4 focus:ring-primary-100 transition-all duration-300">
                </div>

                <div class="space-y-2">
                    <label class="block text-sm font-semibold text-gray-700">Notes (Optional)</label>
                    <input type="text" name="notes" placeholder="Special instructions or notes"
                           class="w-full border-2 border-gray-200 rounded-2xl px-6 py-4 focus:outline-none focus:border-primary-500 focus:ring-4 focus:ring-primary-100 transition-all duration-300">
                </div>

                <div class="md:col-span-2">
                    <button type="submit" class="w-full btn-primary text-white py-4 rounded-2xl font-heading font-semibold text-lg shadow-xl hover:shadow-2xl hover:scale-105 transition-all duration-300 group">
                        <i class="fas fa-plus mr-3 group-hover:rotate-90 transition-transform duration-300"></i>
                        Add Schedule
                    </button>
                </div>
            </form>
        </div>

        <!-- Current Schedules -->
        <div class="glass-card rounded-2xl shadow-xl p-8 border border-white/30 animate-fade-in">
            <div class="flex items-center space-x-4 mb-8">
                <div class="w-12 h-12 bg-gradient-to-br from-secondary-400 to-accent-400 rounded-2xl flex items-center justify-center shadow-lg">
                    <i class="fas fa-calendar-alt text-white text-xl"></i>
                </div>
                <div>
                    <h2 class="text-3xl font-heading font-bold gradient-text">My Schedules</h2>
                    <p class="text-slate-600 mt-1">Manage your availability and appointments</p>
                </div>
            </div>

            <?php if ($schedules->num_rows > 0): ?>
                <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
                    <?php 
                    $colorIndex = 0;
                    while ($schedule = $schedules->fetch_assoc()): 
                        $cardColor = ['primary', 'secondary', 'accent'][$colorIndex % 3];
                        $colorIndex++;
                    ?>
                        <div class="group relative">
                            <div class="absolute -inset-1 bg-gradient-to-r from-<?= $cardColor ?>-400 to-<?= $cardColor ?>-600 rounded-2xl blur opacity-25 group-hover:opacity-40 transition duration-1000"></div>
                            <div class="relative glass-card rounded-2xl p-6 shadow-xl border border-white/30 hover:border-<?= $cardColor ?>-300 transition-all duration-300">
                                <div class="flex justify-between items-start mb-6">
                                    <div class="flex items-start space-x-4">
                                        <div class="w-14 h-14 bg-gradient-to-br from-<?= $cardColor ?>-400 to-<?= $cardColor ?>-600 rounded-xl flex items-center justify-center shadow-lg group-hover:shadow-xl group-hover:scale-105 transition-all duration-300">
                                            <i class="fas fa-<?= $schedule['session_type'] === 'consultation' ? 'user-md' : ($schedule['session_type'] === 'therapy' ? 'heart' : 'comments') ?> text-white text-lg"></i>
                                        </div>
                                        <div>
                                            <h3 class="text-xl font-heading font-bold text-slate-900 mb-1">
                                                <?= htmlspecialchars(ucfirst($schedule['session_type'])) ?>
                                            </h3>
                                            <p class="text-slate-600 flex items-center">
                                                <i class="fas fa-calendar mr-2 text-<?= $cardColor ?>-500"></i>
                                                <?= date('F j, Y', strtotime($schedule['schedule_date'])) ?>
                                            </p>
                                        </div>
                                    </div>
                                    <span class="px-4 py-2 rounded-full text-sm font-medium shadow-sm
                                        <?= $schedule['status'] === 'available' ? 'bg-gradient-to-r from-green-100 to-green-200 text-green-800 border border-green-300' : 'bg-gradient-to-r from-slate-100 to-slate-200 text-slate-800 border border-slate-300' ?>">
                                        <i class="fas fa-circle text-xs mr-1"></i>
                                        <?= htmlspecialchars(ucfirst($schedule['status'])) ?>
                                    </span>
                                </div>

                                <div class="space-y-4 mb-6">
                                    <div class="bg-gradient-to-r from-<?= $cardColor ?>-50/50 to-white rounded-lg p-4 border border-<?= $cardColor ?>-200">
                                        <div class="grid grid-cols-2 gap-4 text-sm">
                                            <div class="flex items-center space-x-3">
                                                <div class="w-8 h-8 bg-<?= $cardColor ?>-100 rounded-lg flex items-center justify-center">
                                                    <i class="fas fa-clock text-<?= $cardColor ?>-600"></i>
                                                </div>
                                                <div>
                                                    <div class="text-slate-500 text-xs">Duration</div>
                                                    <div class="font-medium text-slate-900"><?= htmlspecialchars($schedule['start_time']) ?> - <?= htmlspecialchars($schedule['end_time']) ?></div>
                                                </div>
                                            </div>
                                            <div class="flex items-center space-x-3">
                                                <div class="w-8 h-8 bg-<?= $cardColor ?>-100 rounded-lg flex items-center justify-center">
                                                    <i class="fas fa-users text-<?= $cardColor ?>-600"></i>
                                                </div>
                                                <div>
                                                    <div class="text-slate-500 text-xs">Appointments</div>
                                                    <div class="font-medium text-slate-900"><?= $schedule['current_appointments'] ?>/<?= $schedule['max_appointments'] ?></div>
                                                </div>
                                            </div>
                                        </div>
                                        
                                        <?php if (!empty($schedule['notes'])): ?>
                                            <div class="mt-4 pt-4 border-t border-<?= $cardColor ?>-200">
                                                <div class="flex items-start space-x-2">
                                                    <i class="fas fa-sticky-note text-<?= $cardColor ?>-500 mt-1 text-sm"></i>
                                                    <div>
                                                        <div class="text-slate-500 text-xs mb-1">Notes</div>
                                                        <p class="text-slate-700 text-sm leading-relaxed"><?= htmlspecialchars($schedule['notes']) ?></p>
                                                    </div>
                                                </div>
                                            </div>
                                        <?php endif; ?>
                                    </div>
                                </div>

                                <?php if ($schedule['current_appointments'] == 0): ?>
                                    <form method="POST" class="flex justify-end" onsubmit="return confirm('Are you sure you want to delete this schedule?')">
                                        <input type="hidden" name="action" value="delete_schedule">
                                        <input type="hidden" name="schedule_id" value="<?= $schedule['shid'] ?>">
                                        <button type="submit" class="flex items-center space-x-2 px-4 py-2 bg-gradient-to-r from-red-500 to-red-600 text-white rounded-lg hover:from-red-600 hover:to-red-700 transition-all duration-300 transform hover:scale-105 shadow-md">
                                            <i class="fas fa-trash text-sm"></i>
                                            <span class="text-sm font-medium">Delete Schedule</span>
                                        </button>
                                    </form>
                                <?php else: ?>
                                    <div class="flex items-center justify-center py-3 px-4 bg-gradient-to-r from-slate-100 to-slate-200 rounded-lg border border-slate-300">
                                        <i class="fas fa-info-circle text-slate-500 mr-2"></i>
                                        <span class="text-sm text-slate-600 font-medium">Cannot delete - has existing appointments</span>
                                    </div>
                                <?php endif; ?>
                            </div>
                        </div>
                    <?php endwhile; ?>
                </div>
            <?php else: ?>
                <div class="text-center py-16">
                    <div class="relative mx-auto w-32 h-32 mb-8">
                        <div class="absolute inset-0 bg-gradient-to-br from-primary-200 to-secondary-200 rounded-3xl transform rotate-6 opacity-50"></div>
                        <div class="absolute inset-0 bg-gradient-to-br from-secondary-200 to-accent-200 rounded-3xl transform -rotate-6 opacity-50"></div>
                        <div class="relative bg-gradient-to-br from-primary-100 to-secondary-100 rounded-3xl w-full h-full flex items-center justify-center shadow-lg">
                            <i class="fas fa-calendar-times text-primary-600 text-4xl"></i>
                        </div>
                    </div>
                    <h3 class="text-2xl font-heading font-bold gradient-text mb-3">No Schedules Yet</h3>
                    <p class="text-slate-600 mb-6 max-w-md mx-auto">Start managing your availability by creating your first schedule using the form above.</p>
                    <div class="flex items-center justify-center space-x-2 text-sm text-slate-500">
                        <i class="fas fa-lightbulb text-accent-500"></i>
                        <span>Tip: Set regular schedules to help patients book appointments</span>
                    </div>
                </div>
            <?php endif; ?>
        </div>
    </div>

    <!-- Footer -->
    <footer class="bg-gray-900 text-white">
        <div class="max-w-7xl mx-auto px-4 py-16">
            <div class="grid md:grid-cols-4 gap-8">
                <div class="space-y-6">
                    <div class="flex items-center space-x-3">
                        <img src="resources/soullift-logo.svg" alt="Soullift Logo" class="w-10 h-10">
                        <span class="text-2xl font-heading font-bold bg-gradient-to-r from-primary-400 to-secondary-400 bg-clip-text text-transparent">
                            Soullift
                        </span>
                    </div>
                    <p class="text-gray-400 leading-relaxed">
                        Providing compassionate mental health support and counseling services to help you live a more fulfilling life.
                    </p>
                    <div class="flex space-x-4">
                        <a href="#" class="w-10 h-10 bg-primary-600 rounded-full flex items-center justify-center hover:bg-primary-700 transition-colors">
                            <i class="fab fa-facebook text-white"></i>
                        </a>
                        <a href="#" class="w-10 h-10 bg-secondary-600 rounded-full flex items-center justify-center hover:bg-secondary-700 transition-colors">
                            <i class="fab fa-instagram text-white"></i>
                        </a>
                        <a href="#" class="w-10 h-10 bg-primary-600 rounded-full flex items-center justify-center hover:bg-primary-700 transition-colors">
                            <i class="fab fa-twitter text-white"></i>
                        </a>
                        <a href="#" class="w-10 h-10 bg-accent-600 rounded-full flex items-center justify-center hover:bg-accent-700 transition-colors">
                            <i class="fab fa-linkedin text-white"></i>
                        </a>
                    </div>
                </div>
                
                <div>
                    <h3 class="font-heading text-lg font-semibold mb-6 text-white">Quick Links</h3>
                    <ul class="space-y-3 text-gray-400">
                        <li><a href="Homepage.php" class="hover:text-primary-400 transition-colors">Home</a></li>
                        <li><a href="services.php" class="hover:text-primary-400 transition-colors">Services</a></li>
                        <li><a href="experts.php" class="hover:text-primary-400 transition-colors">Therapists</a></li>
                        <li><a href="courses.php" class="hover:text-primary-400 transition-colors">Resources</a></li>
                        <li><a href="blog.php" class="hover:text-primary-400 transition-colors">Blog</a></li>
                    </ul>
                </div>
                
                <div>
                    <h3 class="font-heading text-lg font-semibold mb-6 text-white">Support</h3>
                    <ul class="space-y-3 text-gray-400">
                        <li><a href="mailto:info@soullift.com" class="hover:text-primary-400 transition-colors">Email Support</a></li>
                        <li><a href="tel:+15551234567" class="hover:text-primary-400 transition-colors">Emergency Hotline</a></li>
                        <li><span class="text-gray-500">Crisis Support: 24/7</span></li>
                        <li><a href="#" class="hover:text-primary-400 transition-colors">FAQs</a></li>
                    </ul>
                </div>
                
                <div>
                    <h3 class="font-heading text-lg font-semibold mb-6 text-white">Newsletter</h3>
                    <p class="text-gray-400 mb-4">Subscribe for mental health tips and updates.</p>
                    <div class="space-y-3">
                        <input type="email" placeholder="Your email address" class="w-full px-4 py-3 bg-gray-800 border border-gray-700 rounded-lg text-white placeholder-gray-400 focus:ring-2 focus:ring-primary-500 focus:border-transparent">
                        <button class="w-full bg-gradient-to-r from-primary-600 to-secondary-600 text-white py-3 rounded-lg font-semibold hover:shadow-lg transition-all duration-300 transform hover:scale-105">
                            Subscribe
                        </button>
                    </div>
                </div>
            </div>
            
            <div class="border-t border-gray-800 mt-12 pt-8">
                <div class="flex flex-col md:flex-row justify-between items-center space-y-4 md:space-y-0">
                    <p class="text-gray-400 text-center md:text-left">
                        &copy; <?php echo date("Y"); ?> Soullift. All rights reserved. | Mental wellness for everyone
                    </p>
                    <div class="flex space-x-6 text-sm text-gray-400">
                        <a href="#" class="hover:text-primary-400 transition-colors">Privacy Policy</a>
                        <a href="#" class="hover:text-primary-400 transition-colors">Terms of Service</a>
                        <a href="#" class="hover:text-primary-400 transition-colors">Cookie Policy</a>
                    </div>
                </div>
            </div>
        </div>
    </footer>
    
    <script>
        // Mobile menu toggle function
        function toggleMobileMenu() {
            const mobileMenu = document.getElementById('mobile-menu');
            if (mobileMenu) {
                mobileMenu.classList.toggle('hidden');
            }
        }
    </script>
</body>
</html>