<?php 
require_once 'db_connect.php'; 

// Fetch all active courses with Teacher Name and Total Enrollments
$courses = [];
try {
    $stmt = $pdo->query("
        SELECT c.*, t.name as teacher_name, 
               (SELECT COUNT(*) FROM enrollments e WHERE e.course_id = c.id AND e.status='active') as total_students 
        FROM courses c 
        LEFT JOIN teachers t ON c.teacher_id = t.id 
        WHERE c.status = 'active' 
        ORDER BY c.id ASC
    ");
    $courses = $stmt->fetchAll(PDO::FETCH_ASSOC);
} catch (PDOException $e) {}

// Fetch CMS Settings for global texts and hero background
$settings = [];
try {
    $stmt = $pdo->query("SELECT setting_key, setting_value FROM settings");
    while ($row = $stmt->fetch(PDO::FETCH_ASSOC)) { 
        $settings[$row['setting_key']] = $row['setting_value']; 
    }
} catch (PDOException $e) {}

include 'header.php'; 
?>

<style>
    /* --- Themes Variables --- */
    :root {
        --primary: #064e3b;        
        --primary-light: #059669;  
        --primary-dark: #022c22;   
        --accent: #d4af37;         
        --white: #ffffff;          
        --bg-soft: #f8fafc;        
    }

    body { background-color: var(--bg-soft); font-family: 'Outfit', sans-serif; overflow-x: hidden; }

    /* --- Page Hero Section --- */
    .page-hero {
        background: linear-gradient(135deg, rgba(2, 44, 34, 0.95), rgba(6, 78, 59, 0.95)),
                    url('<?= htmlspecialchars($settings['hero1_image'] ?? 'assets/images/hero1.jpg'); ?>') center/cover;
        padding: 100px 0 80px;
        color: var(--white);
        text-align: center;
        border-bottom: 5px solid var(--accent);
    }
    
    .course-card { background: var(--white); border-radius: 15px; overflow: hidden; border: 1px solid #e2e8f0; transition: 0.3s; height: 100%; display: flex; flex-direction: column; }
    .course-card:hover { transform: translateY(-8px); box-shadow: 0 15px 30px rgba(0,0,0,0.08); border-color: var(--primary); }
    .course-thumb-custom { height: 200px; background: linear-gradient(135deg, var(--primary-dark), var(--primary)); border-bottom: 3px solid var(--accent); display: flex; align-items: center; justify-content: center; transition: 0.4s ease; overflow: hidden; }
    .course-thumb-custom img { max-height: 100px; filter: drop-shadow(0 4px 6px rgba(0,0,0,0.3)); transition: transform 0.4s ease; }
    .course-card:hover .course-thumb-custom img { transform: scale(1.08); }
    
    .course-head { background: var(--bg-soft); padding: 25px; border-bottom: 1px solid #e2e8f0; text-align: center; position: relative; }
    .course-head h3 { font-weight: 800; color: var(--primary); font-size: 22px; margin-top: 10px; line-height: 1.4; transition: 0.3s; }
    .course-head h3:hover { color: var(--accent); }
    .course-body { padding: 25px; display: flex; flex-direction: column; flex-grow: 1; }

    .btn-enroll { background: var(--primary-dark); color: var(--accent); padding: 12px; border-radius: 8px; transition: 0.3s; font-weight: bold; text-align: center; display: block; text-decoration: none; }
    .btn-enroll:hover { background: var(--accent); color: var(--primary-dark); }
</style>

<section class="page-hero">
    <div class="container">
        <h1 class="display-4 fw-bold mb-3">Explore Our Courses</h1>
        <p class="fs-5 text-white-50">Find the perfect path to master Islamic knowledge</p>
    </div>
</section>

<section class="py-5 bg-white">
    <div class="container py-5">
        <?php if(!empty($courses)): ?>
            <div class="row g-4">
                <?php foreach($courses as $c): 
                    $img_url = !empty($c['image_url']) ? $c['image_url'] : 'assets/images/logo.png';
                ?>
                <div class="col-lg-4 col-md-6">
                    <div class="course-card">
                        <a href="course_details.php?id=<?= $c['id']; ?>" class="text-decoration-none">
                            <div class="course-thumb-custom">
                                <img src="<?= htmlspecialchars($img_url); ?>" alt="<?= htmlspecialchars($c['title']); ?>">
                            </div>
                        </a>
                        <div class="course-head">
                            <span class="badge mb-2 px-3 py-2 rounded-pill" style="background: rgba(212, 175, 55, 0.15); color: var(--primary-dark); border: 1px solid var(--accent);">
                                <i class="far fa-clock me-1"></i> Duration: <?= htmlspecialchars($c['duration'] ?? 'Flexible'); ?>
                            </span>
                            <a href="course_details.php?id=<?= $c['id']; ?>" class="text-decoration-none"><h3><?= htmlspecialchars($c['title']); ?></h3></a>
                            
                            <div class="mt-2 text-muted small fw-bold">
                                <i class="fas fa-chalkboard-teacher text-warning me-1"></i> 
                                <?= htmlspecialchars($c['teacher_name'] ?? 'TBA') ?>
                            </div>
                        </div>
                        <div class="course-body">
                            <div class="text-center mb-3 pb-3 border-bottom">
                                <span class="text-muted d-block fw-bold text-uppercase mb-1" style="font-size: 13px; letter-spacing: 1px;">Course Fee</span>
                                <h2 class="fw-black m-0" style="color: var(--primary); font-weight: 900;">$<?= number_format($c['fee'], 2); ?></h2>
                            </div>
                            
                            <div class="d-flex justify-content-center gap-3 mb-4 fw-bold small text-muted">
                                <div><i class="fas fa-users text-warning me-1"></i> <?= $c['total_students']; ?> Enrolled</div>
                                <div><i class="fas fa-certificate text-warning me-1"></i> Certificate</div>
                            </div>

                            <a href="course_details.php?id=<?= $c['id']; ?>" class="btn-enroll mt-auto">
                                View Details <i class="fas fa-arrow-right ms-2"></i>
                            </a>
                        </div>
                    </div>
                </div>
                <?php endforeach; ?>
            </div>
        <?php else: ?>
            <div class="col-12 text-center p-5 bg-white rounded-4 shadow-sm border border-light" style="margin-top: 40px;">
                <i class="fas fa-folder-open fa-4x mb-4" style="color: #cbd5e1;"></i>
                <h4 style="color: var(--primary-dark); font-weight: 700;">No Courses Available</h4>
                <p class="text-muted mb-0 fs-5">We are currently updating our curriculum. Please check back later.</p>
            </div>
        <?php endif; ?>
    </div>
</section>

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