<?php
/**
 * IBVTE - All Courses Display (Our Courses Section)
 */

require_once 'config.php';
require_once 'includes/db.php';

$db = DB();
$filter = $_GET['category'] ?? '';
$search = $_GET['search'] ?? '';

// Fetch all active categories
$categoriesList = $db->fetchAll("SELECT * FROM course_categories WHERE is_active = 1 ORDER BY display_order, name");

// If a category is selected, fetch courses (Now fetching sub-items directly as per 2-level structure)
$courses = [];
if ($filter) {
    $query = "SELECT s.*, s.sub_name as course_name, c.image, c.category, c.short_name, c.eligibility, c.mode
              FROM course_sub_items s
              JOIN courses c ON s.course_id = c.id
              WHERE s.is_active = 1 AND c.is_active = 1 AND c.category = ?";
    $params = [$filter];
    
    if ($search) {
        $query .= " AND (s.sub_name LIKE ? OR c.short_name LIKE ?)";
        $params[] = "%$search%";
        $params[] = "%$search%";
    }
    
    $query .= " ORDER BY c.display_order, c.course_name, s.duration_value";
    $courses = $db->fetchAll($query, $params);
}

// Categories already fetched above


// Add some visual metadata to each course
$colors = ['primary', 'info', 'success', 'warning', 'secondary', 'danger', 'dark'];
$icons  = ['fa-car', 'fa-laptop-code', 'fa-plane', 'fa-mortar-pestle', 'fa-building', 'fa-chart-line', 'fa-graduation-cap'];

foreach ($courses as $index => &$c) {
    $c['color'] = $colors[$index % count($colors)];
    $c['icon']  = $icons[$index % count($icons)];
    // Fallback image if needed
    $c['image'] = 'https://images.unsplash.com/photo-1523240795612-9a054b0db644?w=800'; 
    if (stripos($c['category'], 'Computer') !== false) $c['image'] = 'https://images.unsplash.com/photo-1517694712202-14dd9538aa97?w=800';
    if (stripos($c['category'], 'Automobile') !== false) $c['image'] = 'https://images.unsplash.com/photo-1492144534655-ae79c964c9d7?w=800';
    if (stripos($c['category'], 'Aviation') !== false) $c['image'] = 'https://images.unsplash.com/photo-1436491865332-7a61a109cc05?w=800';
    if (stripos($c['category'], 'Medical') !== false || stripos($c['category'], 'Ayurveda') !== false) $c['image'] = 'https://images.unsplash.com/photo-1512069772995-ec65ed45afd6?w=800';
    if (stripos($c['category'], 'Civil') !== false) $c['image'] = 'https://images.unsplash.com/photo-1503387762-592deb58ef4e?w=800';
}

include 'includes/header.php';
?>

<section class="py-5" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);">
    <div class="container">
        <div class="text-center text-white">
            <h1 class="fw-bold mb-3 display-5"><i class="fas fa-graduation-cap me-2"></i>Our Courses</h1>
            <p class="lead mb-0">Industry-relevant diploma programs for your bright future</p>
        </div>
    </div>
</section>

<section class="py-5 bg-light">
    <div class="container">
        <?php if (!$filter): ?>
            <!-- Category Selection View -->
            <div class="text-center mb-5">
                <h2 class="fw-bold h1">Select a Category</h2>
                <p class="text-muted">Choose a field of study to explore related diploma programs</p>
            </div>
            
            <div class="row g-4 justify-content-center">
                <?php foreach ($categoriesList as $index => $cat): ?>
                    <?php 
                        $colors = ['primary', 'info', 'success', 'warning', 'secondary', 'danger', 'dark'];
                        $color = $colors[$index % count($colors)];
                    ?>
                    <div class="col-lg-3 col-md-4 col-sm-6">
                        <a href="?category=<?= urlencode($cat['name']) ?>" class="text-decoration-none">
                            <div class="card h-100 border-0 shadow-sm hover-card rounded-4 overflow-hidden">
                                <div class="ratio ratio-16x9">
                                    <img src="<?= $cat['image'] ?? 'https://images.unsplash.com/photo-1513258496099-48168024adb0?w=400' ?>" class="card-img-top object-fit-cover" alt="<?= htmlspecialchars($cat['name']) ?>">
                                </div>
                                <div class="card-body p-3 text-center">
                                    <h5 class="fw-bold text-dark mb-1"><?= htmlspecialchars($cat['name']) ?></h5>
                                    <p class="small text-muted mb-0">Explore Programs <i class="fas fa-chevron-right ms-1 small"></i></p>
                                </div>
                            </div>
                        </a>
                    </div>
                <?php endforeach; ?>
            </div>

        <?php else: ?>
            <!-- Search & Filter Bar (Only shown when category is selected) -->
            <div class="d-flex justify-content-between align-items-center mb-5 flex-wrap gap-3">
                <div class="d-flex align-items-center">
                    <a href="all-courses.php" class="btn btn-outline-secondary btn-sm rounded-pill me-3">
                        <i class="fas fa-arrow-left me-1"></i> Back
                    </a>
                    <h2 class="fw-bold mb-0"><?= htmlspecialchars($filter) ?></h2>
                </div>
                
                <form method="GET" class="d-flex gap-2" style="max-width: 400px; width: 100%;">
                    <input type="hidden" name="category" value="<?= htmlspecialchars($filter) ?>">
                    <div class="input-group shadow-sm">
                        <input type="text" name="search" class="form-control" placeholder="Search in this category..." value="<?= htmlspecialchars($search) ?>">
                        <button type="submit" class="btn btn-primary"><i class="fas fa-search"></i></button>
                    </div>
                </form>
            </div>
            
            <div class="row g-4">
                <?php if (empty($courses)): ?>
                    <div class="col-12 text-center py-5">
                        <div class="card p-5 border-0 shadow-sm rounded-4">
                            <i class="fas fa-search fa-3x text-muted mb-3"></i>
                            <h4 class="text-muted">No courses found in this category.</h4>
                            <a href="?category=<?= urlencode($filter) ?>" class="btn btn-primary mt-3 px-5 py-2 rounded-pill">View All</a>
                        </div>
                    </div>
                <?php else: ?>
                    <?php foreach ($courses as $course): ?>
                        <div class="col-lg-4 col-md-6">
                            <div class="card course-card h-100 border-0 shadow-sm overflow-hidden rounded-4">
                                <div class="position-relative" style="height: 220px; overflow: hidden;">
                                    <img src="<?= $course['image'] ?>" class="course-image" alt="<?= htmlspecialchars($course['course_name']) ?>">
                                    <div class="position-absolute bottom-0 start-0 end-0 p-3 bg-gradient-dark">
                                        <div class="d-flex justify-content-between align-items-end">
                                            <h5 class="text-white mb-0 fw-bold"><?= htmlspecialchars($course['short_name'] ?: 'Course') ?></h5>
                                            <span class="text-white small"><i class="fas fa-clock me-1"></i><?= $course['duration_label'] ?></span>
                                        </div>
                                    </div>
                                </div>
                                <div class="card-body p-4">
                                    <h5 class="card-title fw-bold mb-3 h-50-px d-flex align-items-center"><?= htmlspecialchars($course['course_name']) ?></h5>
                                    <div class="row g-2 mb-4">
                                        <div class="col-6">
                                            <div class="p-2 bg-light rounded text-center h-100">
                                                <small class="text-muted d-block small">Duration</small>
                                                <span class="fw-bold"><?= $course['duration_label'] ?></span>
                                            </div>
                                        </div>
                                        <div class="col-6">
                                            <div class="p-2 bg-light rounded text-center h-100">
                                                <small class="text-muted d-block small">Total Fee</small>
                                                <span class="fw-bold text-success">₹<?= number_format($course['total_fee'], 0) ?></span>
                                            </div>
                                        </div>
                                    </div>
                                    
                                    <div class="pt-3 border-top mt-auto text-center">
                                        <a href="course-detail.php?id=<?= $course['course_id'] ?>&sub_id=<?= $course['id'] ?>" class="btn btn-primary w-100 rounded-pill py-2 fw-bold">
                                            View Details <i class="fas fa-arrow-right ms-2 small"></i>
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    <?php endforeach; ?>
                <?php endif; ?>
            </div>
        <?php endif; ?>
    </div>
</section>

<style>
    .icon-box {
        width: 60px;
        height: 60px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 15px;
    }
    .bg-primary-light { background-color: rgba(13, 110, 253, 0.1); }
    .bg-info-light { background-color: rgba(13, 202, 240, 0.1); }
    .bg-success-light { background-color: rgba(25, 135, 84, 0.1); }
    .bg-warning-light { background-color: rgba(255, 193, 7, 0.1); }
    .bg-secondary-light { background-color: rgba(108, 117, 125, 0.1); }
    .bg-danger-light { background-color: rgba(220, 53, 69, 0.1); }
    .bg-dark-light { background-color: rgba(33, 37, 41, 0.1); }
    
    .course-card {
        transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    }
    .course-card:hover {
        transform: translateY(-10px);
        box-shadow: 0 25px 50px rgba(0,0,0,0.15) !important;
    }
    .course-image {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.6s ease;
    }
    .course-card:hover .course-image {
        transform: scale(1.15);
    }
    .bg-gradient-dark {
        background: linear-gradient(to top, rgba(0,0,0,0.85), transparent);
    }
    .hover-card {
        transition: all 0.3s ease;
    }
    .hover-card:hover {
        background-color: #fff;
        transform: translateY(-10px);
        box-shadow: 0 15px 30px rgba(0,0,0,0.1) !important;
    }
    .h-50-px { min-height: 50px; }
</style>

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