<?php
require_once 'config/database.php';
require_once 'config/auth.php';
require_once 'config/currency.php';
require_once 'config/rbac.php';
require_once __DIR__ . '/includes/functions.php';

if (!function_exists('getAllPublishedPosts')) {
    die("Function getAllPublishedPosts is required but not found.");
}

$page_title = 'Home';
$post_search = $_GET['post_search'] ?? null;
$posts = getAllPublishedPosts(6, $post_search);
$categories = getCategories();
$announcements = getActiveAnnouncements();
$slideshow_images = json_decode(getSiteSetting('slideshow_images') ?: '[]', true);

// Get Home Page Section Settings
$knowledgeInsightTitle = getSiteSetting('knowledge_insight_title') ?: 'Knowledge & Insight';
$knowledgeInsightSubtitle = getSiteSetting('knowledge_insight_subtitle') ?: 'Stay informed with our latest news and articles';

// Get filter parameters for courses
$category = $_GET['category'] ?? '';
$level = $_GET['level'] ?? '';
$search = $_GET['search'] ?? '';
$sort = $_GET['sort'] ?? 'newest';

// Get featured courses for home page
$db = getDB();
$query = "SELECT DISTINCT c.id, c.title, c.slug, c.description, c.short_description, c.thumbnail, c.banner_image,
                  c.price, c.currency, c.level, c.duration_hours, c.language, c.max_students, c.prerequisites,
                  c.learning_objectives, c.tags, c.status, c.is_featured, c.is_free, c.created_at, c.updated_at,
                  c.instructor_id, c.category_id,
                  cat.name as category_name, cat.icon as category_icon, cat.color as category_color,
                  u.username as instructor_name, up.first_name, up.last_name,
                  COALESCE(stats.enrollment_count, 0) as enrollment_count,
                  stats.average_rating,
                  COALESCE(stats.review_count, 0) as review_count
           FROM courses c
           LEFT JOIN course_categories cat ON c.category_id = cat.id
           LEFT JOIN users u ON c.instructor_id = u.id
           LEFT JOIN user_profiles up ON u.id = up.user_id
           LEFT JOIN course_lessons cl ON c.id = cl.course_id
           LEFT JOIN (
               SELECT c2.id as course_id,
                      COUNT(DISTINCT ce.id) as enrollment_count,
                      AVG(cr.rating) as average_rating,
                      COUNT(DISTINCT cr.id) as review_count
               FROM courses c2
               LEFT JOIN course_enrollments ce ON c2.id = ce.course_id AND ce.status = 'completed'
               LEFT JOIN course_reviews cr ON c2.id = cr.course_id AND cr.status = 'approved'
               GROUP BY c2.id
           ) stats ON c.id = stats.course_id
           WHERE c.status = 'published' AND (cat.is_active = 1 OR cat.id IS NULL)";

$params = [];

// Add filters
if (!empty($category)) {
    $query .= " AND cat.slug = ?";
    $params[] = $category;
}

if (!empty($level)) {
    $query .= " AND c.level = ?";
    $params[] = $level;
}

if (!empty($search)) {
    $query .= " AND (c.title LIKE ? OR c.description LIKE ? OR c.tags LIKE ? OR cl.content LIKE ?)";
    $searchTerm = "%$search%";
    $params[] = $searchTerm;
    $params[] = $searchTerm;
    $params[] = $searchTerm;
    $params[] = $searchTerm;
}

// Add sorting
switch ($sort) {
    case 'oldest':
        $query .= " ORDER BY c.created_at ASC";
        break;
    case 'popular':
        $query .= " ORDER BY enrollment_count DESC, average_rating DESC";
        break;
    case 'rating':
        $query .= " ORDER BY average_rating DESC, enrollment_count DESC";
        break;
    case 'price_low':
        $query .= " ORDER BY c.price ASC";
        break;
    case 'price_high':
        $query .= " ORDER BY c.price DESC";
        break;
    default: // newest
        $query .= " ORDER BY c.is_featured DESC, c.created_at DESC";
        break;
}

$query .= " LIMIT 12";

$stmt = $db->prepare($query);
$stmt->execute($params);
$courses = $stmt->fetchAll();

// Get enrollment status for logged-in users
$userEnrollments = [];
if (isLoggedIn()) {
    $stmt = $db->prepare("SELECT course_id, status FROM course_enrollments WHERE student_id = ?");
    $stmt->execute([$_SESSION['user_id']]);
    $userEnrollments = $stmt->fetchAll(PDO::FETCH_KEY_PAIR);
}

// Get filter parameters for articles
$articleCategory = $_GET['article_category'] ?? '';
$articleSearch = $_GET['article_search'] ?? '';
$articleSort = $_GET['article_sort'] ?? 'newest';
$articlePage = isset($_GET['article_page']) ? max(1, intval($_GET['article_page'])) : 1;
$articlesPerPage = 6;
$articlesOffset = ($articlePage - 1) * $articlesPerPage;

// Modify posts query to include category filtering, sorting and pagination
$db = getDB();

// First get total count for pagination
$countQuery = "SELECT COUNT(*) as total FROM posts p LEFT JOIN categories c ON p.category_id = c.id WHERE p.status = 'published'";
$countParams = [];

if (!empty($articleCategory)) {
    $countQuery .= " AND c.slug = ?";
    $countParams[] = $articleCategory;
}

if (!empty($articleSearch)) {
    $countQuery .= " AND (p.title LIKE ? OR p.content LIKE ?)";
    $searchTerm = "%$articleSearch%";
    $countParams[] = $searchTerm;
    $countParams[] = $searchTerm;
}

$countStmt = $db->prepare($countQuery);
$countStmt->execute($countParams);
$totalArticles = $countStmt->fetch()['total'];
$totalArticlePages = ceil($totalArticles / $articlesPerPage);

// Main query with sorting and pagination
$postsQuery = "SELECT p.*, c.name as category_name, c.slug as category_slug, COALESCE(u.username, p.manual_author_name) as author_name FROM posts p LEFT JOIN categories c ON p.category_id = c.id LEFT JOIN users u ON p.author_id = u.id WHERE p.status = 'published'";
$postsParams = [];

if (!empty($articleCategory)) {
    $postsQuery .= " AND c.slug = ?";
    $postsParams[] = $articleCategory;
}

if (!empty($articleSearch)) {
    $postsQuery .= " AND (p.title LIKE ? OR p.content LIKE ?)";
    $searchTerm = "%$articleSearch%";
    $postsParams[] = $searchTerm;
    $postsParams[] = $searchTerm;
}

// Add sorting
switch ($articleSort) {
    case 'oldest':
        $postsQuery .= " ORDER BY p.created_at ASC";
        break;
    case 'popular':
        $postsQuery .= " ORDER BY p.view_count DESC, p.created_at DESC";
        break;
    default: // newest
        $postsQuery .= " ORDER BY p.created_at DESC";
        break;
}

$postsQuery .= " LIMIT " . intval($articlesPerPage) . " OFFSET " . intval($articlesOffset);

$stmt = $db->prepare($postsQuery);
$stmt->execute($postsParams);
$articles = $stmt->fetchAll();

// Get current category name for title (use site setting as default, but allow category filter to override)
$currentCategoryName = $knowledgeInsightTitle;
if (!empty($articleCategory)) {
    foreach ($categories as $cat) {
        if ($cat['slug'] === $articleCategory) {
            $currentCategoryName = $cat['name'];
            break;
        }
    }
}

include 'includes/header.php';
?>


<section class="hero">
    <div class="container">
        <div class="hero-content">
            <h1><?php echo htmlspecialchars(getSiteSetting('welcome_title') ?: 'Welcome to Mutalex Academy'); ?></h1>
            <p class="hero-description"><?php echo htmlspecialchars(getSiteSetting('welcome_description') ?: 'Your premier destination for the latest news, insightful articles, journals and academic content for various professional courses. Stay informed and inspired with our diverse content.'); ?></p>
            <?php if (!empty($announcements)): ?>
                <div id="hero-announcement" class="hero-announcement">
                    <div class="announcement-content">
                        <i class="fas fa-bullhorn"></i>
                        <span id="announcement-text"><?php echo htmlspecialchars($announcements[0]['title']); ?>: <?php echo htmlspecialchars($announcements[0]['content']); ?></span>
                        <button class="announcement-close" onclick="closeHeroAnnouncement()">&times;</button>
                    </div>
                </div>
            <?php endif; ?>
        </div>
    </div>
</section>

<?php if (!empty($slideshow_images)): ?>
<section class="slideshow">
    <div class="slideshow-container">
        <?php foreach ($slideshow_images as $index => $image): ?>
            <div class="slide <?php echo $index === 0 ? 'active' : ''; ?>" style="background-image: url('<?php echo htmlspecialchars($image['url']); ?>');">
                <?php if (!empty(trim($image['title'] ?? '')) || !empty(trim($image['description'] ?? ''))): ?>
                <div class="slide-content">
                    <h2><?php echo htmlspecialchars($image['title'] ?? ''); ?></h2>
                    <p><?php echo htmlspecialchars($image['description'] ?? ''); ?></p>
                </div>
                <?php endif; ?>
            </div>
        <?php endforeach; ?>
        <button class="prev-btn" onclick="changeSlide(-1)">&#10094;</button>
        <button class="next-btn" onclick="changeSlide(1)">&#10095;</button>
        <div class="dots">
            <?php foreach ($slideshow_images as $index => $image): ?>
                <span class="dot <?php echo $index === 0 ? 'active' : ''; ?>" onclick="currentSlide(<?php echo $index; ?>)"></span>
            <?php endforeach; ?>
        </div>
    </div>
</section>
<?php endif; ?>

<!-- Mobile Filter Toggle & Backdrop -->
<button class="mobile-filter-toggle" onclick="toggleSidebar('course')">
    <i class="fas fa-filter"></i>
</button>
<div class="sidebar-backdrop" onclick="toggleSidebar('')"></div>

<section class="search-section" id="search-section">
    <div class="container">
        <div class="search-container">
            <form method="GET" action="?<?php echo http_build_query(array_diff_key($_GET, ['filter_section' => '', 'post_search' => ''])); ?>" class="search-form" id="search-form">
                <input type="hidden" name="filter_section" value="search-section">
                <input type="text" name="post_search" placeholder="Search posts..." value="<?php echo htmlspecialchars($post_search ?? ''); ?>" class="search-input">
                <button type="submit" class="search-btn">
                    <i class="fas fa-search"></i> Search
                </button>
                <?php if ($post_search): ?>
                    <a href="home.php?filter_section=search-section" class="clear-search">Clear Search</a>
                <?php endif; ?>
            </form>
        </div>
    </div>
</section>

<!-- Available Courses Section -->
<section class="available-courses-section" id="courses-section">
    <div class="container">
        <div class="courses-header">
            <h2 class="courses-title">Available Courses</h2>
            <p class="courses-subtitle">Expand your knowledge with our expertly crafted courses</p>
            <a href="courses/catalog.php" class="view-all-courses">
                View All Courses <i class="fas fa-arrow-right"></i>
            </a>
        </div>

        <!-- Course Filters & Content Layout -->
        <div class="courses-layout-wrapper">
            <!-- Vertical Sidebar Filters -->
            <aside class="filters-sidebar">
                <div class="sidebar-header">
                    <h3><i class="fas fa-filter"></i> Filter Courses</h3>
                    <button class="sidebar-toggle d-lg-none" onclick="toggleSidebar('course')">
                        <i class="fas fa-times"></i>
                    </button>
                </div>
                <form method="GET" class="filters-form" id="courses-filter-form" action="?<?php echo http_build_query(array_diff_key($_GET, ['filter_section' => ''])); ?>">
                    <input type="hidden" name="filter_section" value="courses-section">
                    <div class="filter-group">
                        <label for="search" class="filter-label">Search</label>
                        <input type="text" id="search" name="search" placeholder="Search courses..." value="<?php echo htmlspecialchars($search); ?>" class="filter-input">
                    </div>
                    <div class="filter-group">
                        <label for="category" class="filter-label">Category</label>
                        <select id="category" name="category" class="filter-select">
                            <option value="">All Categories</option>
                            <?php foreach ($categories as $cat): ?>
                                <option value="<?php echo htmlspecialchars($cat['slug']); ?>" <?php echo $category === $cat['slug'] ? 'selected' : ''; ?>>
                                    <?php echo htmlspecialchars($cat['name']); ?>
                                </option>
                            <?php endforeach; ?>
                        </select>
                    </div>
                    <div class="filter-group">
                        <label for="level" class="filter-label">Level</label>
                        <select id="level" name="level" class="filter-select">
                            <option value="">All Levels</option>
                            <option value="beginner" <?php echo $level === 'beginner' ? 'selected' : ''; ?>>Beginner</option>
                            <option value="intermediate" <?php echo $level === 'intermediate' ? 'selected' : ''; ?>>Intermediate</option>
                            <option value="advanced" <?php echo $level === 'advanced' ? 'selected' : ''; ?>>Advanced</option>
                        </select>
                    </div>
                    <div class="filter-group">
                        <label for="sort" class="filter-label">Sort By</label>
                        <select id="sort" name="sort" class="filter-select">
                            <option value="newest" <?php echo $sort === 'newest' ? 'selected' : ''; ?>>Newest First</option>
                            <option value="popular" <?php echo $sort === 'popular' ? 'selected' : ''; ?>>Most Popular</option>
                            <option value="rating" <?php echo $sort === 'rating' ? 'selected' : ''; ?>>Highest Rated</option>
                            <option value="price_low" <?php echo $sort === 'price_low' ? 'selected' : ''; ?>>Price: Low to High</option>
                            <option value="price_high" <?php echo $sort === 'price_high' ? 'selected' : ''; ?>>Price: High to Low</option>
                        </select>
                    </div>
                    <div class="filter-actions">
                        <button type="submit" class="filter-btn-apply">
                            <i class="fas fa-search"></i> Apply Filters
                        </button>
                        <?php if (!empty($category) || !empty($level) || !empty($search) || $sort !== 'newest'): ?>
                            <a href="home.php?filter_section=courses-section" class="filter-btn-clear">
                                <i class="fas fa-times"></i> Clear
                            </a>
                        <?php endif; ?>
                    </div>
                </form>
            </aside>

            <!-- Main Content Area -->
            <div class="courses-main-content">

        <?php if (!empty($courses)): ?>
            <div class="courses-grid">
                <?php foreach ($courses as $index => $course): ?>
                     <div class="course-card" style="--card-index: <?php echo $index; ?>">
                        <div class="course-image-container">
                            <?php if ($course['thumbnail']): ?>
                                <img src="<?php echo htmlspecialchars($course['thumbnail']); ?>" alt="<?php echo htmlspecialchars($course['title']); ?>" class="course-image">
                            <?php else: ?>
                                <div class="course-image-placeholder" style="background: linear-gradient(135deg, <?php echo htmlspecialchars($course['category_color'] ?? '#667eea'); ?> 0%, <?php echo htmlspecialchars($course['category_color'] ?? '#764ba2'); ?> 100%);">
                                    <i class="<?php echo htmlspecialchars($course['category_icon'] ?? 'fas fa-graduation-cap'); ?>"></i>
                                </div>
                            <?php endif; ?>

                            <div class="course-badges">
                                <?php if ($course['is_featured']): ?>
                                    <span class="badge badge-featured">
                                        <i class="fas fa-star"></i> Featured
                                    </span>
                                <?php endif; ?>
                                <?php if ($course['is_free']): ?>
                                    <span class="badge badge-free">Free</span>
                                <?php endif; ?>
                            </div>

                            <div class="course-overlay">
                                <a href="courses/detail.php?id=<?php echo $course['id']; ?>" class="course-link">
                                    <i class="fas fa-eye"></i>
                                    View Course
                                </a>
                            </div>
                        </div>

                        <div class="course-content">
                            <div class="course-category">
                                <i class="<?php echo htmlspecialchars($course['category_icon']); ?>"></i>
                                <?php echo htmlspecialchars($course['category_name']); ?>
                            </div>

                            <h3 class="course-title">
                                <a href="courses/detail.php?id=<?php echo $course['id']; ?>">
                                    <?php echo htmlspecialchars($course['title']); ?>
                                </a>
                            </h3>

                            <p class="course-description">
                                <?php echo htmlspecialchars(substr($course['short_description'] ?? $course['description'], 0, 80)); ?>...
                            </p>



                            <div class="course-footer">
                                <div class="course-price">
                                    <?php if ($course['is_free']): ?>
                                        <span class="price-free">Free</span>
                                    <?php else: ?>
                                        <span class="price-amount"><?php echo formatCurrency($course['price'], $course['currency']); ?></span>
                                    <?php endif; ?>
                                </div>
                            </div>

                            <div class="course-actions">
                                <?php if (isLoggedIn()): ?>
                                    <?php if (isset($userEnrollments[$course['id']]) && $userEnrollments[$course['id']] !== 'dropped' && $userEnrollments[$course['id']] !== 'completed'): ?>
                                        <a href="student/learn.php?id=<?php echo $course['id']; ?>" class="btn btn-success">
                                            <i class="fas fa-play me-2"></i>Continue Learning
                                        </a>
                                    <?php elseif (hasPermission('enroll_course')): ?>
                                        <button class="btn btn-primary" onclick="addToCart(<?php echo $course['id']; ?>, '<?php echo addslashes($course['title']); ?>')">
                                            <i class="fas fa-cart-plus me-2"></i>
                                            <?php echo $course['is_free'] ? 'Add to Cart (Free)' : 'Add to Cart'; ?>
                                        </button>
                                    <?php endif; ?>
                                <?php else: ?>
                                    <a href="login.php?redirect=home.php" class="btn btn-outline-primary">
                                        <i class="fas fa-sign-in-alt me-2"></i>Login to Add to Cart
                                    </a>
                                <?php endif; ?>
                            </div>
                        </div>
                    </div>
                <?php endforeach; ?>
            </div>
        <?php else: ?>
            <div class="empty-courses">
                <div class="empty-courses-content">
                    <i class="fas fa-graduation-cap empty-icon"></i>
                    <h3>No courses available</h3>
                    <p>Courses will be available soon. Check back later!</p>
                </div>
            </div>
        <?php endif; ?>
            </div><!-- End courses-main-content -->
        </div><!-- End courses-layout-wrapper -->
    </div>
</section>

<!-- Mobile Filter Toggle for Articles -->
<button class="mobile-filter-toggle article-filter-toggle" onclick="toggleSidebar('article')">
    <i class="fas fa-filter"></i>
</button>

<!-- Available Articles Section -->
<section class="available-articles-section" id="articles-section">
    <div class="container">
        <div class="articles-header">
            <h2 class="articles-title"><?php echo htmlspecialchars($currentCategoryName); ?></h2>
            <p class="articles-subtitle"><?php echo htmlspecialchars($knowledgeInsightSubtitle); ?></p>
            <a href="post.php" class="view-all-articles">
                View All Articles <i class="fas fa-arrow-right"></i>
            </a>
        </div>

        <!-- Articles Filters & Content Layout -->
        <div class="articles-layout-wrapper">
            <!-- Vertical Sidebar Filters -->
            <aside class="filters-sidebar">
                <div class="sidebar-header">
                    <h3><i class="fas fa-filter"></i> Filter Articles</h3>
                    <button class="sidebar-toggle d-lg-none" onclick="toggleSidebar('article')">
                        <i class="fas fa-times"></i>
                    </button>
                </div>
                <form method="GET" class="filters-form" id="articles-filter-form" action="?<?php echo http_build_query(array_diff_key($_GET, ['filter_section' => ''])); ?>">
                    <input type="hidden" name="filter_section" value="articles-section">
                    <div class="filter-group">
                        <label for="article_search" class="filter-label">Search</label>
                        <input type="text" id="article_search" name="article_search" placeholder="Search articles..." value="<?php echo htmlspecialchars($articleSearch); ?>" class="filter-input">
                    </div>
                    <div class="filter-group">
                        <label for="article_category" class="filter-label">Category</label>
                        <select id="article_category" name="article_category" class="filter-select">
                            <option value="">All Categories</option>
                            <?php foreach ($categories as $cat): ?>
                                <option value="<?php echo htmlspecialchars($cat['slug']); ?>" <?php echo $articleCategory === $cat['slug'] ? 'selected' : ''; ?>>
                                    <?php echo htmlspecialchars($cat['name']); ?>
                                </option>
                            <?php endforeach; ?>
                        </select>
                    </div>
                    <div class="filter-group">
                        <label for="article_sort" class="filter-label">Sort By</label>
                        <select id="article_sort" name="article_sort" class="filter-select">
                            <option value="newest" <?php echo $articleSort === 'newest' ? 'selected' : ''; ?>>Newest First</option>
                            <option value="oldest" <?php echo $articleSort === 'oldest' ? 'selected' : ''; ?>>Oldest First</option>
                            <option value="popular" <?php echo $articleSort === 'popular' ? 'selected' : ''; ?>>Most Popular</option>
                        </select>
                    </div>
                    <div class="filter-actions">
                        <button type="submit" class="filter-btn-apply">
                            <i class="fas fa-search"></i> Apply Filters
                        </button>
                        <?php if (!empty($articleCategory) || !empty($articleSearch) || $articleSort !== 'newest'): ?>
                            <a href="home.php?filter_section=articles-section" class="filter-btn-clear">
                                <i class="fas fa-times"></i> Clear
                            </a>
                        <?php endif; ?>
                    </div>
                </form>
            </aside>

            <!-- Main Content Area -->
            <div class="articles-main-content">
        <?php if (!empty($articles)): ?>
            <div class="articles-grid">
                <?php foreach ($articles as $index => $article): ?>
                    <div class="article-card" style="--card-index: <?php echo $index; ?>">
                        <div class="article-content">
                            <?php if ($article['category_name']): ?>
                                <div class="article-category-tag">
                                    <span class="badge badge-category"><?php echo htmlspecialchars($article['category_name']); ?></span>
                                </div>
                            <?php endif; ?>
                            <div class="article-meta">
                                <span class="article-author">
                                    <i class="fas fa-user"></i>
                                    <?php echo htmlspecialchars($article['author_name'] ?? 'Admin'); ?>
                                </span>
                                <span class="article-date">
                                    <i class="fas fa-calendar"></i>
                                    <?php echo date('M d, Y', strtotime($article['created_at'])); ?>
                                </span>
                            </div>

                            <h3 class="article-title">
                                <a href="post.php?slug=<?php echo urlencode($article['slug']); ?>">
                                    <?php echo htmlspecialchars($article['title']); ?>
                                </a>
                            </h3>

                            <p class="article-excerpt">
                                <?php echo htmlspecialchars(substr(strip_tags($article['content'] ?? ''), 0, 100)); ?>...
                            </p>

                            <div class="article-footer">
                                <a href="post.php?slug=<?php echo urlencode($article['slug']); ?>" class="read-more-link">
                                    Read More <i class="fas fa-arrow-right"></i>
                                </a>
                            </div>
                        </div>
                    </div>
                <?php endforeach; ?>
            </div>
            
            <?php if ($totalArticlePages > 1): ?>
            <div class="articles-pagination">
                <?php if ($articlePage > 1): ?>
                    <a href="?<?php echo http_build_query(array_merge($_GET, ['article_page' => $articlePage - 1, 'filter_section' => 'articles-section'])); ?>" class="pagination-btn pagination-prev">
                        <i class="fas fa-chevron-left"></i> Previous
                    </a>
                <?php endif; ?>
                
                <div class="pagination-pages">
                    <?php for ($i = 1; $i <= $totalArticlePages; $i++): ?>
                        <?php if ($i == 1 || $i == $totalArticlePages || ($i >= $articlePage - 1 && $i <= $articlePage + 1)): ?>
                            <a href="?<?php echo http_build_query(array_merge($_GET, ['article_page' => $i, 'filter_section' => 'articles-section'])); ?>" class="pagination-page <?php echo $i === $articlePage ? 'active' : ''; ?>">
                                <?php echo $i; ?>
                            </a>
                        <?php elseif ($i == $articlePage - 2 || $i == $articlePage + 2): ?>
                            <span class="pagination-ellipsis">...</span>
                        <?php endif; ?>
                    <?php endfor; ?>
                </div>
                
                <?php if ($articlePage < $totalArticlePages): ?>
                    <a href="?<?php echo http_build_query(array_merge($_GET, ['article_page' => $articlePage + 1, 'filter_section' => 'articles-section'])); ?>" class="pagination-btn pagination-next">
                        Next <i class="fas fa-chevron-right"></i>
                    </a>
                <?php endif; ?>
            </div>
            <?php endif; ?>
        <?php else: ?>
            <div class="empty-articles">
                <div class="empty-articles-content">
                    <i class="fas fa-newspaper empty-icon"></i>
                    <h3>No articles available</h3>
                    <p>Articles will be available soon. Check back later!</p>
                </div>
            </div>
        <?php endif; ?>
            </div><!-- End articles-main-content -->
        </div><!-- End articles-layout-wrapper -->
    </div>
</section>

<style>
/* Available Courses Section */
.available-courses-section {
    padding: 5rem 0;
    background: #ffffff;
    position: relative;
}

.available-courses-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #10b981, #059669, #6366f1);
}

.courses-header {
    text-align: center;
    margin-bottom: 3rem;
    padding: 2rem 0;
}

.courses-title {
    font-size: 2.8rem;
    font-weight: 900;
    color: #1f2937;
    margin-bottom: 1rem;
    letter-spacing: -0.02em;
    line-height: 1.2;
    position: relative;
    display: inline-block;
}

.courses-title::after {
    content: '';
    display: block;
    width: 60px;
    height: 4px;
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    margin: 1rem auto 0;
    border-radius: 2px;
}

.courses-subtitle {
    color: #6b7280;
    font-size: 1.15rem;
    margin-bottom: 2rem;
    max-width: 650px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.6;
}

.view-all-courses {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: #10b981;
    text-decoration: none;
    font-weight: 600;
    font-size: 1rem;
    transition: all 0.3s ease;
    padding: 0.75rem 1.5rem;
    border-radius: 50px;
    background: rgba(16, 185, 129, 0.1);
}

.view-all-courses:hover {
    color: #059669;
    background: rgba(16, 185, 129, 0.2);
    transform: translateX(5px);
}

/* Course Grid */
.courses-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1.5rem;
    margin-bottom: 3rem;
}

.course-card {
    background: white;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid #e1e5e9;
    animation: cardFadeIn 0.6s ease-out both;
    animation-delay: calc(var(--card-index, 0) * 0.1s);
}

.course-card:hover {
    transform: translateY(-12px) scale(1.02);
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15);
    border-color: #e5e7eb;
}

@keyframes cardFadeIn {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.course-image-container {
    position: relative;
    height: 160px;
    overflow: hidden;
}

.course-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.course-card:hover .course-image {
    transform: scale(1.05);
}

.course-image-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 3rem;
    background: linear-gradient(135deg, #1e40af 0%, #3b82f6 100%);
}

.course-badges {
    position: absolute;
    top: 12px;
    left: 12px;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.badge {
    padding: 0.375rem 0.75rem;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.badge-featured {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    color: white;
}

.badge-free {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: white;
}

.course-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(59, 130, 246, 0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.course-card:hover .course-overlay {
    opacity: 1;
}

.course-link {
    color: white;
    text-decoration: none;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    backdrop-filter: blur(10px);
    transition: background 0.3s ease;
}

.course-link:hover {
    background: rgba(255, 255, 255, 0.3);
}

/* Course Content */
.course-content {
    padding: 1rem;
    overflow: hidden;
}

.course-category {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: #f3f4f6;
    color: #6b7280;
    padding: 0.25rem 0.75rem;
    border-radius: 12px;
    font-size: 0.8rem;
    font-weight: 500;
    margin-bottom: 1rem;
}

.course-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: #1f2937;
    margin-bottom: 0.5rem;
    line-height: 1.2;
    letter-spacing: -0.01em;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
}

.course-title a {
    color: inherit;
    text-decoration: none;
}

.course-title a:hover {
    color: #3b82f6;
}

.course-description {
    color: #6b7280;
    font-size: 0.85rem;
    line-height: 1.4;
    margin-bottom: 1rem;
    font-weight: 400;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
}



/* Course Footer */
.course-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}



.course-price .price-free {
    font-size: 1.5rem;
    font-weight: 700;
    color: #10b981;
}

.course-price .price-amount {
    font-size: 1.5rem;
    font-weight: 700;
    color: #1e40af;
}

/* Course Actions */
.course-actions {
    margin-top: 0.75rem;
}

.course-actions .btn {
    width: 100%;
    padding: 0.4rem 0.6rem;
    border-radius: 8px;
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: none;
    transition: all 0.3s ease;
}

.course-actions .btn-primary {
    background: linear-gradient(135deg, #1e40af 0%, #3b82f6 100%);
    border: none;
}

.course-actions .btn-success {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    border: none;
}

.course-actions .btn-outline-primary {
    border: 2px solid #3b82f6;
    color: #3b82f6;
}

.course-actions .btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

/* Empty State */
.empty-courses {
    text-align: center;
    padding: 5rem 2rem;
    animation: fadeInUp 0.6s ease-out;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.empty-courses-content {
    max-width: 450px;
    margin: 0 auto;
}

.empty-icon {
    font-size: 4.5rem;
    color: #d1d5db;
    margin-bottom: 1.5rem;
    opacity: 0.7;
}

.empty-courses h3 {
    font-size: 1.6rem;
    font-weight: 700;
    color: #1f2937;
    margin-bottom: 0.75rem;
    letter-spacing: -0.01em;
}

.empty-courses p {
    color: #6b7280;
    margin-bottom: 2.5rem;
    font-size: 1.1rem;
    line-height: 1.6;
}

/* Responsive Design */
@media (max-width: 1024px) {
    .courses-grid {
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
        gap: 1.75rem;
    }
}

@media (max-width: 768px) {
    .available-courses-section {
        padding: 3rem 0;
    }

    .courses-title {
        font-size: 2.3rem;
    }

    .courses-grid {
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
        gap: 1.5rem;
    }

    .course-card {
        border-radius: 12px;
    }

    .course-image-container {
        height: 220px;
    }

    .course-content {
        padding: 1.5rem;
    }

    .course-footer {
        flex-direction: column;
        gap: 1rem;
        align-items: flex-start;
        margin-bottom: 1rem;
    }

    .course-stats {
        flex-wrap: wrap;
        width: 100%;
    }

    .course-actions {
        width: 100%;
    }

    .course-actions .btn {
        width: 100%;
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .available-courses-section {
        padding: 2rem 0;
    }

    .courses-title {
        font-size: 2rem;
    }

    .course-image-container {
        height: 200px;
    }

    .course-title {
        font-size: 1.2rem;
    }

    .course-description {
        font-size: 0.9rem;
    }
}

/* Available Exams Section */
.available-exams-section {
    padding: 5rem 0;
    background: linear-gradient(180deg, #faf5ff 0%, #ffffff 100%);
    position: relative;
}

.available-exams-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #6366f1, #8b5cf6, #a855f7);
}

.exams-header {
    text-align: center;
    margin-bottom: 3rem;
    padding: 2rem 0;
}

.exams-title {
    font-size: 2.8rem;
    font-weight: 900;
    color: #1f2937;
    margin-bottom: 1rem;
    letter-spacing: -0.02em;
    line-height: 1.2;
    position: relative;
    display: inline-block;
}

.exams-title::after {
    content: '';
    display: block;
    width: 60px;
    height: 4px;
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
    margin: 1rem auto 0;
    border-radius: 2px;
}

.exams-subtitle {
    color: #6b7280;
    font-size: 1.15rem;
    margin-bottom: 2rem;
    max-width: 650px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.6;
}

.view-all-exams {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: #6366f1;
    text-decoration: none;
    font-weight: 600;
    font-size: 1rem;
    transition: all 0.3s ease;
    padding: 0.75rem 1.5rem;
    border-radius: 50px;
    background: rgba(99, 102, 241, 0.1);
}

.view-all-exams:hover {
    color: #4f46e5;
    background: rgba(99, 102, 241, 0.2);
    transform: translateX(5px);
}

/* Exam Grid */
.exams-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1.5rem;
    margin-bottom: 3rem;
}

.exam-card {
    background: white;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid #e1e5e9;
    animation: examCardFadeIn 0.6s ease-out both;
    animation-delay: calc(var(--card-index, 0) * 0.1s);
}

.exam-card:hover {
    transform: translateY(-12px) scale(1.02);
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15);
    border-color: #e5e7eb;
}

@keyframes examCardFadeIn {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.exam-image-container {
    position: relative;
    height: 160px;
    overflow: hidden;
}

.exam-image-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 3rem;
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
}

.exam-badges {
    position: absolute;
    top: 12px;
    left: 12px;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.badge-type {
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
    color: white;
}

.exam-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(16, 185, 129, 0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.exam-card:hover .exam-overlay {
    opacity: 1;
}

.exam-link {
    color: white;
    text-decoration: none;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    backdrop-filter: blur(10px);
    transition: background 0.3s ease;
}

.exam-link:hover {
    background: rgba(255, 255, 255, 0.3);
}

/* Exam Content */
.exam-content {
    padding: 1rem;
    overflow: hidden;
}

.exam-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
}

.exam-duration,
.exam-passing {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    color: #6b7280;
    font-size: 0.8rem;
    font-weight: 500;
}

.exam-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: #1f2937;
    margin-bottom: 0.5rem;
    line-height: 1.2;
    letter-spacing: -0.01em;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
}

.exam-title a {
    color: inherit;
    text-decoration: none;
}

.exam-title a:hover {
    color: #10b981;
}

.exam-description {
    color: #6b7280;
    font-size: 0.85rem;
    line-height: 1.4;
    margin-bottom: 0.75rem;
    font-weight: 400;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
}

.exam-course {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    background: #f3f4f6;
    color: #6b7280;
    padding: 0.25rem 0.75rem;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 500;
    margin-bottom: 1rem;
}

/* Exam Footer */
.exam-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
}

.exam-price .price-free {
    font-size: 1.5rem;
    font-weight: 700;
    color: #10b981;
}

.exam-price .price-amount {
    font-size: 1.5rem;
    font-weight: 700;
    color: #059669;
}

/* Exam Actions */
.exam-actions {
    margin-top: 0.75rem;
}

.exam-actions .btn {
    width: 100%;
    padding: 0.4rem 0.6rem;
    border-radius: 8px;
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: none;
    transition: all 0.3s ease;
}

.exam-actions .btn-primary {
    background: linear-gradient(135deg, #059669 0%, #10b981 100%);
    border: none;
}

.exam-actions .btn-success {
    background: linear-gradient(135deg, #059669 0%, #10b981 100%);
    border: none;
}

.exam-actions .btn-outline-primary {
    border: 2px solid #10b981;
    color: #10b981;
}

.exam-actions .btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

/* Empty State */
.empty-exams {
    text-align: center;
    padding: 5rem 2rem;
    animation: fadeInUp 0.6s ease-out;
}

.empty-exams-content {
    max-width: 450px;
    margin: 0 auto;
}

.empty-exams .empty-icon {
    font-size: 4.5rem;
    color: #d1d5db;
    margin-bottom: 1.5rem;
    opacity: 0.7;
}

.empty-exams h3 {
    font-size: 1.6rem;
    font-weight: 700;
    color: #1f2937;
    margin-bottom: 0.75rem;
    letter-spacing: -0.01em;
}

.empty-exams p {
    color: #6b7280;
    margin-bottom: 2.5rem;
    font-size: 1.1rem;
    line-height: 1.6;
}

/* Exam Responsive Design */
@media (max-width: 1024px) {
    .exams-grid {
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
        gap: 1.75rem;
    }
}

@media (max-width: 768px) {
    .available-exams-section {
        padding: 3rem 0;
    }

    .exams-title {
        font-size: 2.3rem;
    }

    .exams-grid {
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
        gap: 1.5rem;
    }

    .exam-card {
        border-radius: 12px;
    }

    .exam-image-container {
        height: 220px;
    }

    .exam-content {
        padding: 1rem;
    }

    .exam-footer {
        flex-direction: column;
        gap: 1rem;
        align-items: flex-start;
        margin-bottom: 1rem;
    }

    .exam-actions {
        width: 100%;
    }

    .exam-actions .btn {
        width: 100%;
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .available-exams-section {
        padding: 2rem 0;
    }

    .exams-title {
        font-size: 2rem;
    }

    .exam-image-container {
        height: 200px;
    }

    .exam-title {
        font-size: 1.2rem;
    }

    .exam-description {
        font-size: 0.9rem;
    }
}

/* Shared badge styles */
.badge {
    padding: 0.375rem 0.75rem;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.badge-free {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: white;
}

/* Shared button styles */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 1rem;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
}

.btn-primary {
    background: linear-gradient(135deg, #1e40af 0%, #3b82f6 100%);
    color: white;
    border: none;
}

.btn-success {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: white;
    border: none;
}

.btn-outline-primary {
    background: transparent;
    border: 2px solid #3b82f6;
    color: #3b82f6;
}

.btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

.me-2 {
    margin-right: 0.5rem;
}

/* Shared container style */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1rem;
}

/* ============================================
   VERTICAL SIDEBAR FILTER LAYOUT
   ============================================ */

/* Layout Wrapper */
.courses-layout-wrapper,
.exams-layout-wrapper {
    display: flex;
    gap: 2rem;
    margin-top: 2rem;
}

/* Sidebar Styles */
.filters-sidebar {
    width: 280px;
    flex-shrink: 0;
    background: white;
    border-radius: 16px;
    padding: 1.5rem;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
    border: 1px solid #e1e5e9;
    height: fit-content;
    position: sticky;
    top: 100px;
}

.sidebar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid #f3f4f6;
}

.sidebar-header h3 {
    font-size: 1.25rem;
    font-weight: 700;
    color: #1f2937;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.sidebar-header h3 i {
    color: #3b82f6;
}

.sidebar-toggle {
    display: none;
    background: none;
    border: none;
    font-size: 1.25rem;
    color: #6b7280;
    cursor: pointer;
    padding: 0.25rem;
}

/* Filter Form */
.filters-form {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.filter-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.filter-label {
    font-size: 0.875rem;
    font-weight: 600;
    color: #374151;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.filter-input,
.filter-select {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 1px solid #d1d5db;
    border-radius: 10px;
    font-size: 0.9rem;
    color: #1f2937;
    background: #f9fafb;
    transition: all 0.3s ease;
}

.filter-input:focus,
.filter-select:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
    background: white;
}

.filter-select {
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%236b7280' viewBox='0 0 16 16'%3E%3Cpath d='M8 11L3 6h10l-5 5z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    padding-right: 2.5rem;
}

.filter-actions {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-top: 0.5rem;
}

.filter-btn-apply {
    width: 100%;
    padding: 0.875rem 1.5rem;
    background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
    color: white;
    border: none;
    border-radius: 10px;
    font-weight: 600;
    font-size: 0.95rem;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.filter-btn-apply:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(59, 130, 246, 0.3);
}

.filter-btn-clear {
    width: 100%;
    padding: 0.875rem 1.5rem;
    background: #f3f4f6;
    color: #6b7280;
    text-decoration: none;
    border-radius: 10px;
    font-weight: 600;
    font-size: 0.95rem;
    text-align: center;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.filter-btn-clear:hover {
    background: #e5e7eb;
    color: #374151;
}

/* Main Content Area */
.courses-main-content,
.exams-main-content {
    flex: 1;
    min-width: 0;
}

/* Mobile Filter Toggle Button */
.mobile-filter-toggle {
    display: none;
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
    color: white;
    border: none;
    box-shadow: 0 10px 25px rgba(59, 130, 246, 0.4);
    cursor: pointer;
    z-index: 1000;
    transition: all 0.3s ease;
}

.mobile-filter-toggle.exam-filter-toggle {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    box-shadow: 0 10px 25px rgba(16, 185, 129, 0.4);
}

.mobile-filter-toggle:hover {
    transform: scale(1.1);
}

.mobile-filter-toggle:hover {
    transform: scale(1.1);
}

.mobile-filter-toggle i {
    font-size: 1.5rem;
}

/* Responsive Styles */
@media (max-width: 1024px) {
    .filters-sidebar {
        width: 250px;
    }
}

@media (max-width: 992px) {
    .courses-layout-wrapper,
    .exams-layout-wrapper {
        flex-direction: column;
    }
    
    .filters-sidebar {
        width: 100%;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 9999;
        border-radius: 0;
        transform: translateX(-100%);
        transition: transform 0.3s ease;
        overflow-y: auto;
        padding-top: 2rem;
    }
    
    .filters-sidebar.active {
        transform: translateX(0);
    }
    
    .sidebar-toggle {
        display: block;
    }
    
    .mobile-filter-toggle {
        display: flex;
        align-items: center;
        justify-content: center;
    }
}

@media (max-width: 768px) {
    .courses-grid,
    .exams-grid {
        grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
        gap: 1.25rem;
    }
    
    .filter-input,
    .filter-select {
        padding: 0.625rem 0.875rem;
    }
}

@media (max-width: 480px) {
    .courses-grid,
    .exams-grid {
        grid-template-columns: 1fr;
    }
}

/* Sidebar backdrop for mobile */
.sidebar-backdrop {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 9998;
}

.sidebar-backdrop.active {
    display: block;
}

/* Utility class for hiding on desktop */
.d-lg-none {
    display: none;
}

@media (max-width: 992px) {
    .d-lg-none {
        display: block;
    }
}

/* ============================================
   EXAM SIDEBAR SPECIFIC STYLES
   ============================================ */

.exams-layout-wrapper .filters-sidebar .sidebar-header h3 i {
    color: #10b981;
}

.exams-layout-wrapper .filter-btn-apply {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
}

.exams-layout-wrapper .filter-btn-apply:hover {
    box-shadow: 0 8px 20px rgba(16, 185, 129, 0.3);
}

/* ============================================
   ARTICLES SECTION STYLES
   ============================================ */

/* Articles Layout Wrapper */
.articles-layout-wrapper {
    display: flex;
    gap: 2rem;
    margin-top: 2rem;
}

/* Articles Section */
.available-articles-section {
    padding: 4rem 0;
    background: #ffffff;
}

.articles-header {
    text-align: center;
    margin-bottom: 3rem;
}

.articles-title {
    font-size: 2.8rem;
    font-weight: 800;
    color: #1f2937;
    margin-bottom: 1rem;
    letter-spacing: -0.02em;
    line-height: 1.2;
}

.articles-subtitle {
    color: #6b7280;
    font-size: 1.1rem;
    margin-bottom: 2rem;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.view-all-articles {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: #6366f1;
    text-decoration: none;
    font-weight: 600;
    font-size: 1rem;
    transition: color 0.3s ease;
}

.view-all-articles:hover {
    color: #4f46e5;
}

/* Articles Filter Bar */
.articles-filter-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 2rem;
    padding: 1rem 1.5rem;
    background: #f8fafc;
    border-radius: 12px;
    border: 1px solid #e1e5e9;
}

/* Category Tabs */
.category-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.category-tab {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.6rem 1rem;
    background: #ffffff;
    color: #4b5563;
    text-decoration: none;
    font-weight: 500;
    font-size: 0.9rem;
    border-radius: 8px;
    border: 1px solid #e1e5e9;
    transition: all 0.3s ease;
}

.category-tab:hover {
    background: #f3f4f6;
    border-color: #6366f1;
    color: #6366f1;
}

.category-tab.active {
    background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
    color: #ffffff;
    border-color: #6366f1;
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
}

.category-tab i {
    font-size: 0.85rem;
}

/* Articles Sort */
.articles-sort {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.sort-label {
    color: #6b7280;
    font-size: 0.9rem;
    font-weight: 500;
}

.sort-select {
    padding: 0.5rem 2rem 0.5rem 0.75rem;
    background: #ffffff;
    border: 1px solid #e1e5e9;
    border-radius: 8px;
    color: #1f2937;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236b7280' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.sort-select:focus {
    outline: none;
    border-color: #6366f1;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

/* Articles Pagination */
.articles-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid #e1e5e9;
}

.pagination-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.6rem 1rem;
    background: #ffffff;
    color: #4b5563;
    text-decoration: none;
    font-weight: 500;
    font-size: 0.9rem;
    border-radius: 8px;
    border: 1px solid #e1e5e9;
    transition: all 0.3s ease;
}

.pagination-btn:hover {
    background: #f3f4f6;
    border-color: #6366f1;
    color: #6366f1;
}

.pagination-pages {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.pagination-page {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0 0.5rem;
    background: #ffffff;
    color: #4b5563;
    text-decoration: none;
    font-weight: 500;
    font-size: 0.9rem;
    border-radius: 8px;
    border: 1px solid #e1e5e9;
    transition: all 0.3s ease;
}

.pagination-page:hover {
    border-color: #6366f1;
    color: #6366f1;
}

.pagination-page.active {
    background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
    color: #ffffff;
    border-color: #6366f1;
}

.pagination-ellipsis {
    color: #9ca3af;
    padding: 0 0.25rem;
}

/* Articles Grid */
.articles-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.5rem;
    margin-bottom: 3rem;
}

.article-card {
    background: white;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid #e1e5e9;
    animation: articleCardFadeIn 0.6s ease-out both;
    animation-delay: calc(var(--card-index, 0) * 0.1s);
}

.article-card:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15);
    border-color: #e5e7eb;
}

@keyframes articleCardFadeIn {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.article-image-container {
    position: relative;
    height: 200px;
    overflow: hidden;
}

.article-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.article-card:hover .article-image {
    transform: scale(1.05);
}

.article-image-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 3rem;
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
}

.article-category-badge {
    position: absolute;
    top: 12px;
    left: 12px;
}

.badge-category {
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
    color: white;
    padding: 0.375rem 0.75rem;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.article-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(99, 102, 241, 0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.article-card:hover .article-overlay {
    opacity: 1;
}

.article-link {
    color: white;
    text-decoration: none;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    backdrop-filter: blur(10px);
    transition: background 0.3s ease;
}

.article-link:hover {
    background: rgba(255, 255, 255, 0.3);
}

/* Article Content */
.article-content {
    padding: 1.25rem;
}

.article-category-tag {
    margin-bottom: 0.75rem;
}

.article-category-tag .badge-category {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
    color: white;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.article-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
    font-size: 0.8rem;
    color: #6b7280;
}

.article-author,
.article-date {
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

.article-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: #1f2937;
    margin-bottom: 0.5rem;
    line-height: 1.3;
    letter-spacing: -0.01em;
}

.article-title a {
    color: inherit;
    text-decoration: none;
}

.article-title a:hover {
    color: #6366f1;
}

.article-excerpt {
    color: #6b7280;
    font-size: 0.9rem;
    line-height: 1.5;
    margin-bottom: 1rem;
    font-weight: 400;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
}

.article-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.read-more-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: #6366f1;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.9rem;
    transition: all 0.3s ease;
}

.read-more-link:hover {
    color: #4f46e5;
    gap: 0.75rem;
}

/* Empty State */
.empty-articles {
    text-align: center;
    padding: 5rem 2rem;
    animation: fadeInUp 0.6s ease-out;
}

.empty-articles-content {
    max-width: 450px;
    margin: 0 auto;
}

.empty-articles .empty-icon {
    font-size: 4.5rem;
    color: #d1d5db;
    margin-bottom: 1.5rem;
    opacity: 0.7;
}

.empty-articles h3 {
    font-size: 1.6rem;
    font-weight: 700;
    color: #1f2937;
    margin-bottom: 0.75rem;
    letter-spacing: -0.01em;
}

.empty-articles p {
    color: #6b7280;
    margin-bottom: 2.5rem;
    font-size: 1.1rem;
    line-height: 1.6;
}

/* Articles Sidebar Specific Styles */
.articles-layout-wrapper .filters-sidebar .sidebar-header h3 i {
    color: #6366f1;
}

.articles-layout-wrapper .filter-btn-apply {
    background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
}

.articles-layout-wrapper .filter-btn-apply:hover {
    box-shadow: 0 8px 20px rgba(99, 102, 241, 0.3);
}

/* Articles Responsive */
@media (max-width: 992px) {
    .articles-layout-wrapper {
        flex-direction: column;
    }
    
    .articles-grid {
        grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    }
}

@media (max-width: 768px) {
    .available-articles-section {
        padding: 3rem 0;
    }

    .articles-title {
        font-size: 2.3rem;
    }

    .articles-grid {
        grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
        gap: 1.25rem;
    }

    .article-card {
        border-radius: 12px;
    }
    
    .articles-filter-bar {
        flex-direction: column;
        align-items: stretch;
    }
    
    .category-tabs {
        justify-content: center;
    }
    
    .articles-sort {
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .available-articles-section {
        padding: 2rem 0;
    }

    .articles-title {
        font-size: 2rem;
    }

    .articles-grid {
        grid-template-columns: 1fr;
    }

    .article-image-container {
        height: 180px;
    }
    
    .category-tabs {
        gap: 0.35rem;
    }
    
    .category-tab {
        padding: 0.5rem 0.75rem;
        font-size: 0.8rem;
    }
    
    .articles-pagination {
        flex-wrap: wrap;
    }
    
    .pagination-pages {
        order: -1;
        width: 100%;
        justify-content: center;
        margin-bottom: 0.5rem;
    }
}

/* Articles Mobile Filter Toggle */
.mobile-filter-toggle.article-filter-toggle {
    background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
    box-shadow: 0 10px 25px rgba(99, 102, 241, 0.4);
    bottom: 14rem;
}

/* JavaScript for toggle */
<script>
// Scroll Position Preservation for Filter Forms
(function() {
    // Immediately check URL params on page load
    function checkAndScrollToSection() {
        const urlParams = new URLSearchParams(window.location.search);
        const filterSection = urlParams.get('filter_section');
        
        if (filterSection) {
            const targetSection = document.getElementById(filterSection);
            
            if (targetSection) {
                // Get header height dynamically
                const header = document.querySelector('.header');
                const headerOffset = header ? header.offsetHeight : 70;
                
                // Get element position
                const elementPosition = targetSection.getBoundingClientRect().top;
                const offsetPosition = elementPosition + window.pageYOffset - headerOffset;
                
                // Scroll to the section immediately (instant, not smooth)
                window.scrollTo(0, Math.max(0, offsetPosition));
            }
        }
    }
    
    // Run on DOM ready
    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', checkAndScrollToSection);
    } else {
        // DOM already loaded, run after a small delay to ensure everything is rendered
        setTimeout(checkAndScrollToSection, 100);
    }
})();
</script>

<script>
function toggleSidebar(type) {
    const sidebar = document.querySelector(`.${type}s-layout-wrapper .filters-sidebar`);
    const backdrop = document.querySelector('.sidebar-backdrop');
    
    if (sidebar) {
        sidebar.classList.toggle('active');
    }
    if (backdrop) {
        backdrop.classList.toggle('active');
    }
}

// Close sidebar when clicking backdrop
document.addEventListener('click', function(e) {
    if (e.target.classList.contains('sidebar-backdrop')) {
        const sidebars = document.querySelectorAll('.filters-sidebar');
        const backdrop = document.querySelector('.sidebar-backdrop');
        sidebars.forEach(s => s.classList.remove('active'));
        backdrop.classList.remove('active');
    }
});

function updateQueryStringParameter(uri, key, value) {
    var re = new RegExp("([?&]" + key + ")=([^&]*)", "g");
    if (re.test(uri)) {
        uri = uri.replace(re, '$1=' + value);
    } else {
        var match = uri.match(/\?/);
        var separator = match ? '&' : '?';
        uri = uri + separator + key + '=' + value;
    }
    return uri;
}
</script>

<section class="categories-section">
    <div class="container">
        <h2 class="section-title">Explore Categories</h2>
        <div class="categories-grid">
            <?php foreach ($categories as $category): ?>
                <div class="category-card">
                    <div class="category-thumbnail">
                        <?php if (!empty($category['thumbnail'])): ?>
                            <img src="<?php echo htmlspecialchars($category['thumbnail']); ?>" alt="<?php echo htmlspecialchars($category['name']); ?>" class="category-image">
                        <?php else: ?>
                            <div class="category-icon">
                                <?php
                                $icons = ['news' => 'fas fa-newspaper', 'articles' => 'fas fa-file-alt', 'journals' => 'fas fa-book'];
                                echo '<i class="' . ($icons[$category['slug']] ?? 'fas fa-folder') . '"></i>';
                                ?>
                            </div>
                        <?php endif; ?>
                    </div>
                    <h3><?php echo htmlspecialchars($category['name']); ?></h3>
                    <p><?php echo htmlspecialchars($category['description']); ?></p>
                    <a href="category.php?cat=<?php echo urlencode($category['slug']); ?>" class="category-link">
                        Explore <?php echo htmlspecialchars($category['name']); ?>
                        <i class="fas fa-arrow-right"></i>
                    </a>
                </div>
            <?php endforeach; ?>
        </div>
    </div>
</section>

<section class="featured-posts">
    <div class="container">
        <h2 class="section-title">
            <?php echo $post_search ? 'Search Results for "' . htmlspecialchars($post_search) . '"' : 'Latest Posts'; ?>
        </h2>
        
        <?php if ($posts): ?>
            <div class="posts-grid">
                <?php foreach ($posts as $post): ?>
                    <article class="post-card">
                        <div class="post-header">
                            <span class="post-category"><?php echo htmlspecialchars($post['category_name']); ?></span>
                            <time class="post-date"><?php echo formatDate($post['created_at']); ?></time>
                        </div>
                        <h3 class="post-title">
                            <a href="post.php?slug=<?php echo urlencode($post['slug']); ?>">
                                <?php echo htmlspecialchars($post['title']); ?>
                            </a>
                        </h3>
                        <p class="post-excerpt">
                            <?php echo htmlspecialchars(truncateText(strip_tags($post['content']))); ?>
                        </p>
                        <div class="post-footer">
                            <span class="post-author">By <?php echo htmlspecialchars($post['author_name']); ?></span>
                            <a href="post.php?slug=<?php echo urlencode($post['slug']); ?>" class="read-more">
                                Read More <i class="fas fa-arrow-right"></i>
                            </a>
                        </div>
                    </article>
                <?php endforeach; ?>
            </div>
        <?php else: ?>
            <div class="no-posts">
                <i class="fas fa-newspaper"></i>
                <p>
                    <?php if ($post_search): ?>
                        No posts found matching "<?php echo htmlspecialchars($post_search); ?>". Try different keywords.
                    <?php else: ?>
                        No posts available at the moment. Check back soon!
                    <?php endif; ?>
                </p>
            </div>
        <?php endif; ?>
    </div>
</section>

<script>
<?php if (!empty($announcements)): ?>
const announcements = <?php echo json_encode($announcements); ?>;
let currentAnnouncementIndex = 0;

function showAnnouncement(index) {
    if (index < announcements.length) {
        const announcement = announcements[index];
        document.getElementById('announcement-text').textContent = announcement.title + ': ' + announcement.content;
    }
}

function closeHeroAnnouncement() {
    document.getElementById('hero-announcement').style.display = 'none';
}

// Cycle through announcements every 10 seconds
setInterval(() => {
    currentAnnouncementIndex = (currentAnnouncementIndex + 1) % announcements.length;
    showAnnouncement(currentAnnouncementIndex);
}, 10000);
<?php endif; ?>

<?php if (!empty($slideshow_images)): ?>
let slideIndex = 0;
const slides = document.getElementsByClassName("slide");
const dots = document.getElementsByClassName("dot");

function showSlides(n) {
    if (n >= slides.length) { slideIndex = 0; }
    if (n < 0) { slideIndex = slides.length - 1; }

    // Hide all slides
    for (let i = 0; i < slides.length; i++) {
        slides[i].classList.remove("active");
        slides[i].style.opacity = "0";
    }

    // Remove active class from all dots
    for (let i = 0; i < dots.length; i++) {
        dots[i].classList.remove("active");
    }

    // Show current slide
    slides[slideIndex].classList.add("active");
    slides[slideIndex].style.opacity = "1";

    // Activate corresponding dot
    if (dots[slideIndex]) {
        dots[slideIndex].classList.add("active");
    }

}

function changeSlide(n) {
    showSlides(slideIndex += n);
}

function currentSlide(n) {
    showSlides(slideIndex = n);
}

// Auto slide every 5 seconds
setInterval(() => {
    changeSlide(1);
}, 5000);

// Initialize first slide
showSlides(0);
<?php endif; ?>

function addToCart(courseId, courseTitle) {
    fetch('api/cart.php', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
        },
        body: JSON.stringify({ course_id: courseId })
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            // Show success message and redirect to cart
            alert(courseTitle + ' has been added to your cart!');
            window.location.href = 'student/dashboard.php';
        } else {
            alert('Error: ' + data.error);
        }
    })
    .catch(error => {
        console.error('Error:', error);
        alert('An error occurred. Please try again.');
    });
}

function addExamToCart(examId, examTitle) {
    console.log('addExamToCart called with:', examId, examTitle);
    
    fetch('api/cart.php', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
        },
        body: JSON.stringify({ item_id: examId, item_type: 'exam' })
    })
    .then(response => {
        console.log('Response status:', response.status);
        return response.json();
    })
    .then(data => {
        console.log('Response data:', data);
        if (data.success) {
            // Show success message and redirect to cart
            alert(examTitle + ' has been added to your cart!');
            window.location.href = 'student/dashboard.php';
        } else {
            alert('Error: ' + data.error);
        }
    })
    .catch(error => {
        console.error('Error:', error);
        alert('An error occurred. Please try again.');
    });
    
    // Prevent default form behavior
    return false;
}

function updateCartCount() {
    // This function could update a cart count badge in the header
    fetch('api/cart.php')
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            const cart = data.cart;
            // Update cart count display if it exists
            const cartBadge = document.getElementById('cartCount');
            if (cartBadge) {
                cartBadge.textContent = cart.item_count || 0;
            }
        }
    })
    .catch(error => {
        console.error('Error updating cart count:', error);
    });
}

// Update cart count on page load
document.addEventListener('DOMContentLoaded', function() {
    updateCartCount();
});

</script>

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

