<?php
$title = 'My Courses - ' . APP_NAME;
ob_start();
?>

<div class="container mx-auto px-4 py-8">
    <div class="max-w-8xl mx-auto">
        <!-- Header -->
        <div class="bg-white rounded-xl shadow-sm p-6 mb-8">
            <div class="flex flex-col md:flex-row md:items-center justify-between gap-4">
                <div>
                    <h1 class="text-2xl font-bold text-gray-900">My Courses</h1>
                    <p class="text-gray-600 mt-1">Manage and organize your training courses</p>
                </div>
                <a href="<?php echo APP_URL; ?>/courses/add" 
                   class="inline-flex items-center px-6 py-3 bg-emerald-600 text-white rounded-xl hover:bg-emerald-700 transition-all duration-300 shadow-sm">
                    <i class="fas fa-plus mr-2"></i> Create New Course
                </a>
            </div>
        </div>

        <!-- Course Grid -->
        <?php if(empty($data['courses'])): ?>
            <div class="text-center py-16 bg-white rounded-xl shadow-sm">
                <div class="mb-6">
                    <div class="w-20 h-20 bg-emerald-50 rounded-full flex items-center justify-center mx-auto">
                        <i class="fas fa-chalkboard-teacher text-3xl text-emerald-600"></i>
                    </div>
                </div>
                <h3 class="text-xl font-semibold text-gray-900 mb-3">No Courses Created Yet</h3>
                <p class="text-gray-600 mb-6 max-w-md mx-auto">Start creating your first course to begin teaching and sharing your knowledge with students</p>
                <a href="<?php echo APP_URL; ?>/courses/add" 
                   class="inline-flex items-center px-6 py-3 bg-emerald-600 text-white rounded-xl hover:bg-emerald-700 transition-all duration-300 shadow-sm">
                    <i class="fas fa-plus mr-2"></i> Create Your First Course
                </a>
            </div>
        <?php else: ?>
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
                <?php foreach($data['courses'] as $course): ?>
                    <div class="bg-white rounded-xl shadow-sm overflow-hidden hover:shadow-md transition-all duration-300">
                        <!-- Course Thumbnail -->
                        <div class="aspect-w-16 aspect-h-9 bg-gray-100 relative group">
                            <img src="<?php echo !empty($course['thumbnail']) ? APP_URL . '/uploads/thumbnails/' . $course['thumbnail'] : APP_URL . '/assets/images/course-default.jpg'; ?>" 
                                 alt="<?php echo htmlspecialchars($course['title']); ?>"
                                 class="w-full h-full object-cover">
                            <div class="absolute inset-0 bg-black bg-opacity-40 opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-center justify-center">
                                <a href="<?php echo APP_URL; ?>/courses/edit/<?php echo $course['id']; ?>" 
                                   class="text-white hover:text-emerald-400 transition-colors">
                                    <i class="fas fa-edit text-xl"></i>
                                </a>
                            </div>
                        </div>
                        
                        <!-- Course Content -->
                        <div class="p-5">
                            <h3 class="font-semibold text-gray-900 mb-2 line-clamp-2"><?php echo htmlspecialchars($course['title']); ?></h3>
                            <p class="text-sm text-gray-600 mb-4 line-clamp-2"><?php echo htmlspecialchars($course['description']); ?></p>
                            
                            <!-- Course Stats -->
                            <div class="flex items-center justify-between text-sm text-gray-500 mb-4">
                                <div class="flex items-center">
                                    <div class="w-8 h-8 rounded-full bg-emerald-50 flex items-center justify-center mr-2">
                                        <i class="fas fa-users text-emerald-600"></i>
                                    </div>
                                    <span>
                                        <?php 
                                            $enrolledCount = isset($course['student_count']) ? (int)$course['student_count'] : 0;
                                            echo $enrolledCount . ' ' . ($enrolledCount === 1 ? 'Student' : 'Students');
                                        ?>
                                    </span>
                                </div>
                                <div class="flex items-center">
                                    <div class="w-8 h-8 rounded-full bg-emerald-50 flex items-center justify-center mr-2">
                                        <i class="fas fa-book text-emerald-600"></i>
                                    </div>
                                    <span>
                                        <?php 
                                            $materialCount = isset($course['material_count']) ? (int)$course['material_count'] : 0;
                                            echo $materialCount . ' ' . ($materialCount === 1 ? 'Material' : 'Materials');
                                        ?>
                                    </span>
                                </div>
                            </div>
                            
                            <!-- Action Buttons -->
                            <div class="flex gap-3">
                                <a href="<?php echo APP_URL; ?>/courses/edit/<?php echo $course['id']; ?>" 
                                   class="flex-1 text-center py-2.5 bg-emerald-50 text-emerald-600 rounded-lg hover:bg-emerald-100 transition-all duration-300">
                                    <i class="fas fa-edit mr-1"></i> Edit
                                </a>
                                <a href="<?php echo APP_URL; ?>/courses/show/<?php echo $course['id']; ?>" 
                                   class="flex-1 text-center py-2.5 bg-emerald-600 text-white rounded-lg hover:bg-emerald-700 transition-all duration-300">
                                    <i class="fas fa-eye mr-1"></i> View
                                </a>
                            </div>
                        </div>
                    </div>
                <?php endforeach; ?>
            </div>
        <?php endif; ?>
    </div>
</div>

<?php
$content = ob_get_clean();
require APP_PATH . '/views/layouts/dashboard1.php';
?>