File: /var/www/html/obaasimaghana/app/views/dashboard/trainer.php
<?php
$title = 'Trainer Dashboard';
ob_start();
?>
<div class="container mx-auto px-4 py-4 sm:py-8">
<!-- Dashboard Header -->
<div class="bg-gradient-to-r from-emerald-50 to-teal-50 rounded-2xl p-6 sm:p-8 mb-6 sm:mb-8">
<div class="flex flex-col sm:flex-row sm:items-center justify-between gap-4 mb-6">
<div class="flex items-center gap-4">
<div class="w-16 h-16 bg-white rounded-xl shadow-sm overflow-hidden">
<!-- Trainer avatar or initials -->
<div class="w-full h-full flex items-center justify-center bg-gradient-to-br from-emerald-500 to-teal-600 text-white text-2xl font-bold">
<?php echo substr($_SESSION['user_name'], 0, 1); ?>
</div>
</div>
<div>
<h1 class="text-lg sm:text-xl font-bold text-gray-800">Welcome, <?php echo $_SESSION['user_name']; ?></h1>
<p class="text-xs sm:text-sm text-gray-600 mt-1">Course Management Dashboard</p>
</div>
</div>
<a href="<?php echo APP_URL; ?>/courses/add"
class="inline-flex items-center px-6 py-3 bg-gradient-to-r from-emerald-500 to-teal-600 text-white rounded-xl hover:from-emerald-600 hover:to-teal-700 transition-all duration-300 shadow-sm">
<i class="fas fa-plus mr-2"></i> Create New Course
</a>
</div>
<!-- Navigation Tabs -->
<div class="flex gap-6 sm:gap-8 border-b border-gray-200 overflow-x-auto">
<a href="#courses" id="courses-tab" class="tab-link px-1 py-4 border-b-2 border-emerald-600 text-emerald-600 font-medium whitespace-nowrap" data-tab="courses-content">
<i class="fas fa-book-open mr-2"></i> Your Courses
</a>
<a href="#students" id="students-tab" class="tab-link px-1 py-4 text-gray-500 hover:text-gray-700 whitespace-nowrap" data-tab="students-content">
<i class="fas fa-users mr-2"></i> Students
<span class="ml-2 inline-flex items-center justify-center w-6 h-6 text-xs bg-emerald-100 text-emerald-600 rounded-full">
<?php echo isset($data['total_students']) ? $data['total_students'] : 0; ?>
</span>
</a>
<a href="#analytics" id="analytics-tab" class="tab-link px-1 py-4 text-gray-500 hover:text-gray-700 whitespace-nowrap" data-tab="analytics-content">
<i class="fas fa-chart-line mr-2"></i> Analytics
</a>
</div>
</div>
<!-- Stats Overview -->
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 mb-8">
<div class="bg-white rounded-xl shadow-sm p-6 hover:shadow-md transition-all duration-300">
<div class="flex items-center justify-between mb-4">
<h3 class="text-lg font-semibold text-gray-900">Total Courses</h3>
<div class="w-12 h-12 bg-emerald-50 rounded-xl flex items-center justify-center">
<i class="fas fa-book-open text-xl text-emerald-600"></i>
</div>
</div>
<p class="text-3xl font-bold text-gray-800 mb-2"><?php echo isset($data['total_courses']) ? $data['total_courses'] : 0; ?></p>
<p class="text-sm text-gray-500">Active courses you're teaching</p>
</div>
<div class="bg-white rounded-xl shadow-sm p-6 hover:shadow-md transition-all duration-300">
<div class="flex items-center justify-between mb-4">
<h3 class="text-lg font-semibold text-gray-900">Total Students</h3>
<div class="w-12 h-12 bg-emerald-50 rounded-xl flex items-center justify-center">
<i class="fas fa-users text-xl text-emerald-600"></i>
</div>
</div>
<p class="text-3xl font-bold text-gray-800 mb-2"><?php echo isset($data['total_students']) ? $data['total_students'] : 0; ?></p>
<p class="text-sm text-gray-500">Students enrolled in your courses</p>
</div>
<div class="bg-white rounded-xl shadow-sm p-6 hover:shadow-md transition-all duration-300">
<div class="flex items-center justify-between mb-4">
<h3 class="text-lg font-semibold text-gray-900">Total Materials</h3>
<div class="w-12 h-12 bg-emerald-50 rounded-xl flex items-center justify-center">
<i class="fas fa-file-alt text-xl text-emerald-600"></i>
</div>
</div>
<p class="text-3xl font-bold text-gray-800 mb-2"><?php echo isset($data['total_materials']) ? $data['total_materials'] : 0; ?></p>
<p class="text-sm text-gray-500">Learning materials uploaded</p>
</div>
</div>
<!-- Tab Content -->
<div id="courses-content" class="tab-content">
<!-- Courses Section -->
<div class="mb-8">
<div class="flex flex-col sm:flex-row sm:items-center justify-between gap-4 mb-6">
<h2 class="text-xl font-bold text-gray-800">Your Courses</h2>
<div class="flex items-center gap-3">
<div class="relative">
<button id="sortButton" class="inline-flex items-center px-4 py-2 bg-white text-gray-700 rounded-lg hover:bg-gray-50 transition-colors border border-gray-200">
<i class="fas fa-sort-amount-down mr-2"></i> Sort
</button>
<div id="sortDropdown" class="hidden absolute right-0 mt-2 w-56 bg-white rounded-xl shadow-lg z-10 border border-gray-100">
<div class="py-2">
<a href="#" class="sort-option block px-4 py-2.5 text-sm text-gray-700 hover:bg-emerald-50 hover:text-emerald-600" data-sort="title" data-order="ASC">
<i class="fas fa-sort-alpha-down mr-2"></i> Title (A-Z)
</a>
<a href="#" class="sort-option block px-4 py-2.5 text-sm text-gray-700 hover:bg-emerald-50 hover:text-emerald-600" data-sort="title" data-order="DESC">
<i class="fas fa-sort-alpha-up mr-2"></i> Title (Z-A)
</a>
<a href="#" class="sort-option block px-4 py-2.5 text-sm text-gray-700 hover:bg-emerald-50 hover:text-emerald-600" data-sort="created_at" data-order="DESC">
<i class="fas fa-clock mr-2"></i> Newest First
</a>
<a href="#" class="sort-option block px-4 py-2.5 text-sm text-gray-700 hover:bg-emerald-50 hover:text-emerald-600" data-sort="created_at" data-order="ASC">
<i class="fas fa-history mr-2"></i> Oldest First
</a>
<a href="#" class="sort-option block px-4 py-2.5 text-sm text-gray-700 hover:bg-emerald-50 hover:text-emerald-600" data-sort="student_count" data-order="DESC">
<i class="fas fa-users mr-2"></i> Most Students
</a>
<a href="#" class="sort-option block px-4 py-2.5 text-sm text-gray-700 hover:bg-emerald-50 hover:text-emerald-600" data-sort="material_count" data-order="DESC">
<i class="fas fa-book mr-2"></i> Most Materials
</a>
</div>
</div>
</div>
<div class="relative">
<button id="filterButton" class="inline-flex items-center px-4 py-2 bg-white text-gray-700 rounded-lg hover:bg-gray-50 transition-colors border border-gray-200">
<i class="fas fa-filter mr-2"></i> Filter
</button>
<div id="filterDropdown" class="hidden absolute right-0 mt-2 w-56 bg-white rounded-xl shadow-lg z-10 border border-gray-100">
<div class="py-2">
<a href="#" class="filter-option block px-4 py-2.5 text-sm text-gray-700 hover:bg-emerald-50 hover:text-emerald-600" data-filter="all">
<i class="fas fa-th-large mr-2"></i> All Courses
</a>
<a href="#" class="filter-option block px-4 py-2.5 text-sm text-gray-700 hover:bg-emerald-50 hover:text-emerald-600" data-filter="with_students">
<i class="fas fa-user-check mr-2"></i> With Students
</a>
<a href="#" class="filter-option block px-4 py-2.5 text-sm text-gray-700 hover:bg-emerald-50 hover:text-emerald-600" data-filter="no_students">
<i class="fas fa-user-times mr-2"></i> No Students
</a>
<a href="#" class="filter-option block px-4 py-2.5 text-sm text-gray-700 hover:bg-emerald-50 hover:text-emerald-600" data-filter="with_materials">
<i class="fas fa-file-alt mr-2"></i> With Materials
</a>
<a href="#" class="filter-option block px-4 py-2.5 text-sm text-gray-700 hover:bg-emerald-50 hover:text-emerald-600" data-filter="no_materials">
<i class="fas fa-file mr-2"></i> No Materials
</a>
</div>
</div>
</div>
</div>
</div>
<?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-gradient-to-r from-emerald-500 to-teal-600 text-white rounded-xl hover:from-emerald-600 hover:to-teal-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 sm: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-gradient-to-r from-emerald-500 to-teal-600 text-white rounded-lg hover:from-emerald-600 hover:to-teal-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>
<div id="students-content" class="tab-content hidden">
<!-- Students Section -->
<div class="mb-8">
<div class="flex flex-col sm:flex-row sm:items-center justify-between gap-4 mb-6">
<h2 class="text-lg sm:text-xl font-bold text-gray-800">Your Students</h2>
<div class="flex items-center gap-2 sm:gap-4">
<div class="relative">
<button id="studentFilterButton" class="text-sm sm:text-base text-gray-600 hover:text-emerald-600">
<i class="fas fa-filter"></i> Filter
</button>
<div id="studentFilterDropdown" class="hidden absolute right-0 mt-2 w-48 bg-white rounded-md shadow-lg z-10">
<div class="py-1">
<a href="#" class="student-filter-option block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100" data-filter="all">All Students</a>
<a href="#" class="student-filter-option block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100" data-filter="completed">Completed</a>
<a href="#" class="student-filter-option block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100" data-filter="in_progress">In Progress</a>
<a href="#" class="student-filter-option block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100" data-filter="not_started">Not Started</a>
</div>
</div>
</div>
</div>
</div>
<?php if(empty($data['students'])): ?>
<div class="bg-white rounded-lg shadow overflow-hidden">
<div class="p-6">
<div class="text-center py-8">
<div class="mb-4">
<i class="fas fa-users text-4xl text-gray-400"></i>
</div>
<h3 class="text-lg font-medium text-gray-900 mb-2">No Students Yet</h3>
<p class="text-gray-600 mb-4">Students will appear here once they enroll in your courses.</p>
</div>
</div>
</div>
<?php else: ?>
<div class="bg-white rounded-lg shadow overflow-hidden">
<div class="overflow-x-auto">
<table class="min-w-full divide-y divide-gray-200">
<thead class="bg-gray-50">
<tr>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Student</th>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Course</th>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Progress</th>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Enrolled</th>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Last Activity</th>
</tr>
</thead>
<tbody class="bg-white divide-y divide-gray-200">
<?php foreach($data['students'] as $student): ?>
<tr class="student-row hover:bg-gray-50"
data-status="<?php echo $student['progress'] == 100 ? 'completed' : ($student['progress'] > 0 ? 'in_progress' : 'not_started'); ?>">
<td class="px-6 py-4 whitespace-nowrap">
<div class="flex items-center">
<div class="flex-shrink-0 h-10 w-10">
<div class="h-10 w-10 rounded-full bg-emerald-100 flex items-center justify-center">
<span class="text-emerald-600 font-medium"><?php echo substr($student['name'], 0, 1); ?></span>
</div>
</div>
<div class="ml-4">
<div class="text-sm font-medium text-gray-900"><?php echo $student['name']; ?></div>
<div class="text-sm text-gray-500"><?php echo $student['email']; ?></div>
</div>
</div>
</td>
<td class="px-6 py-4 whitespace-nowrap">
<div class="text-sm text-gray-900"><?php echo $student['course_title']; ?></div>
</td>
<td class="px-6 py-4 whitespace-nowrap">
<div class="flex items-center">
<div class="w-full bg-gray-200 rounded-full h-2.5 mr-2">
<div class="bg-emerald-600 h-2.5 rounded-full" style="width: <?php echo $student['progress']; ?>%"></div>
</div>
<span class="text-sm text-gray-600"><?php echo $student['progress']; ?>%</span>
</div>
</td>
<td class="px-6 py-4 whitespace-nowrap">
<?php if($student['progress'] == 100): ?>
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">Completed</span>
<?php elseif($student['progress'] > 0): ?>
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-blue-100 text-blue-800">In Progress</span>
<?php else: ?>
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-gray-100 text-gray-800">Not Started</span>
<?php endif; ?>
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
<?php echo date('M d, Y', strtotime($student['enrolled_at'])); ?>
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
<?php echo $student['last_updated'] ? date('M d, Y', strtotime($student['last_updated'])) : 'Never'; ?>
</td>
</tr>
<?php endforeach; ?>
</tbody>
</table>
</div>
</div>
<?php endif; ?>
</div>
</div>
<div id="analytics-content" class="tab-content hidden">
<!-- Analytics Section -->
<div class="mb-8">
<div class="flex flex-col sm:flex-row sm:items-center justify-between gap-4 mb-6">
<h2 class="text-lg sm:text-xl font-bold text-gray-800">Course Analytics</h2>
</div>
<!-- Analytics Overview -->
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
<div class="bg-white rounded-lg shadow p-6">
<div class="flex items-center justify-between mb-4">
<h3 class="text-lg font-medium text-gray-900">Total Students</h3>
<span class="text-emerald-600">
<i class="fas fa-users"></i>
</span>
</div>
<p class="text-3xl font-bold text-gray-800"><?php echo $data['total_students']; ?></p>
<p class="text-sm text-gray-500 mt-2">Students enrolled in your courses</p>
</div>
<div class="bg-white rounded-lg shadow p-6">
<div class="flex items-center justify-between mb-4">
<h3 class="text-lg font-medium text-gray-900">Average Progress</h3>
<span class="text-emerald-600">
<i class="fas fa-chart-line"></i>
</span>
</div>
<p class="text-3xl font-bold text-gray-800"><?php echo $data['average_progress']; ?>%</p>
<p class="text-sm text-gray-500 mt-2">Overall course completion rate</p>
</div>
<div class="bg-white rounded-lg shadow p-6">
<div class="flex items-center justify-between mb-4">
<h3 class="text-lg font-medium text-gray-900">Course Reviews</h3>
<span class="text-emerald-600">
<i class="fas fa-star"></i>
</span>
</div>
<p class="text-3xl font-bold text-gray-800"><?php echo $data['total_reviews']; ?></p>
<p class="text-sm text-gray-500 mt-2">Total reviews received</p>
</div>
<div class="bg-white rounded-lg shadow p-6">
<div class="flex items-center justify-between mb-4">
<h3 class="text-lg font-medium text-gray-900">Average Rating</h3>
<span class="text-emerald-600">
<i class="fas fa-thumbs-up"></i>
</span>
</div>
<p class="text-3xl font-bold text-gray-800"><?php echo $data['average_rating']; ?>/5</p>
<p class="text-sm text-gray-500 mt-2">Overall course rating</p>
</div>
</div>
<!-- Progress Distribution -->
<div class="grid grid-cols-1 sm:grid-cols-2 gap-6 mb-8">
<div class="bg-white rounded-lg shadow p-6">
<h3 class="text-lg font-medium text-gray-900 mb-4">Student Progress Distribution</h3>
<div class="space-y-4">
<div>
<div class="flex justify-between mb-1">
<span class="text-sm font-medium text-gray-700">Completed</span>
<span class="text-sm text-gray-500"><?php echo $data['total_completed']; ?> students</span>
</div>
<div class="w-full bg-gray-200 rounded-full h-2.5">
<div class="bg-emerald-600 h-2.5 rounded-full" style="width: <?php echo ($data['total_students'] > 0 ? ($data['total_completed'] / $data['total_students'] * 100) : 0); ?>%"></div>
</div>
</div>
<div>
<div class="flex justify-between mb-1">
<span class="text-sm font-medium text-gray-700">In Progress</span>
<span class="text-sm text-gray-500"><?php echo $data['total_in_progress']; ?> students</span>
</div>
<div class="w-full bg-gray-200 rounded-full h-2.5">
<div class="bg-blue-600 h-2.5 rounded-full" style="width: <?php echo ($data['total_students'] > 0 ? ($data['total_in_progress'] / $data['total_students'] * 100) : 0); ?>%"></div>
</div>
</div>
<div>
<div class="flex justify-between mb-1">
<span class="text-sm font-medium text-gray-700">Not Started</span>
<span class="text-sm text-gray-500"><?php echo $data['total_not_started']; ?> students</span>
</div>
<div class="w-full bg-gray-200 rounded-full h-2.5">
<div class="bg-gray-600 h-2.5 rounded-full" style="width: <?php echo ($data['total_students'] > 0 ? ($data['total_not_started'] / $data['total_students'] * 100) : 0); ?>%"></div>
</div>
</div>
</div>
</div>
<div class="bg-white rounded-lg shadow p-6">
<h3 class="text-lg font-medium text-gray-900 mb-4">Course Engagement</h3>
<div class="space-y-4">
<div class="flex items-center justify-between">
<div class="flex items-center">
<div class="w-8 h-8 bg-emerald-100 rounded-full flex items-center justify-center mr-3">
<i class="fas fa-book-open text-emerald-600"></i>
</div>
<span class="text-sm font-medium text-gray-700">Total Courses</span>
</div>
<span class="text-sm font-medium text-gray-900"><?php echo $data['total_courses']; ?></span>
</div>
<div class="flex items-center justify-between">
<div class="flex items-center">
<div class="w-8 h-8 bg-blue-100 rounded-full flex items-center justify-center mr-3">
<i class="fas fa-file-alt text-blue-600"></i>
</div>
<span class="text-sm font-medium text-gray-700">Total Materials</span>
</div>
<span class="text-sm font-medium text-gray-900"><?php echo $data['total_materials']; ?></span>
</div>
<div class="flex items-center justify-between">
<div class="flex items-center">
<div class="w-8 h-8 bg-purple-100 rounded-full flex items-center justify-center mr-3">
<i class="fas fa-star text-purple-600"></i>
</div>
<span class="text-sm font-medium text-gray-700">Average Rating</span>
</div>
<span class="text-sm font-medium text-gray-900"><?php echo $data['average_rating']; ?>/5</span>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Quick Tips -->
<div class="bg-gradient-to-r from-emerald-50 to-teal-50 rounded-2xl p-6 sm:p-8">
<div class="flex flex-col sm:flex-row items-center gap-6">
<div class="flex-shrink-0">
<div class="w-12 h-12 bg-white rounded-xl shadow-sm flex items-center justify-center">
<i class="fas fa-lightbulb text-xl text-emerald-600"></i>
</div>
</div>
<div class="flex-1 text-center sm:text-left">
<h3 class="font-semibold text-gray-900 mb-2">Quick Tips for Course Creation</h3>
<p class="text-gray-600">Make your course more engaging by adding various types of content like videos, quizzes, and assignments.</p>
</div>
<div class="flex-shrink-0">
<a href="<?php echo APP_URL; ?>/courses/add"
class="inline-flex items-center px-4 py-2 text-emerald-600 hover:text-emerald-700 font-medium">
Learn More <i class="fas fa-arrow-right ml-2"></i>
</a>
</div>
</div>
</div>
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
// Tab functionality
const tabLinks = document.querySelectorAll('.tab-link');
const tabContents = document.querySelectorAll('.tab-content');
// Function to switch tabs
function switchTab(tabId) {
// Hide all tab contents
tabContents.forEach(content => {
content.classList.add('hidden');
});
// Remove active class from all tabs
tabLinks.forEach(tab => {
tab.classList.remove('border-emerald-500', 'text-emerald-600', 'border-b-2');
tab.classList.add('text-gray-500');
});
// Show the selected tab content
document.getElementById(tabId + '-content').classList.remove('hidden');
// Add active class to the selected tab
document.getElementById(tabId + '-tab').classList.remove('text-gray-500');
document.getElementById(tabId + '-tab').classList.add('border-emerald-500', 'text-emerald-600', 'border-b-2');
// Update URL hash without scrolling
history.pushState(null, null, '#' + tabId);
}
// Check if there's a hash in the URL
const hash = window.location.hash.substring(1);
if (hash && ['courses', 'students', 'analytics'].includes(hash)) {
switchTab(hash);
} else {
// Default to courses tab
switchTab('courses');
}
// Add click event listeners to tabs
tabLinks.forEach(tab => {
tab.addEventListener('click', function(e) {
e.preventDefault();
const tabId = this.getAttribute('data-tab').replace('-content', '');
switchTab(tabId);
});
});
// Get current sort and filter parameters
const urlParams = new URLSearchParams(window.location.search);
const currentSortBy = urlParams.get('sort_by') || 'created_at';
const currentSortOrder = urlParams.get('sort_order') || 'DESC';
const currentFilterBy = urlParams.get('filter_by') || 'all';
// Toggle dropdowns
const sortButton = document.getElementById('sortButton');
const sortDropdown = document.getElementById('sortDropdown');
const filterButton = document.getElementById('filterButton');
const filterDropdown = document.getElementById('filterDropdown');
const studentFilterButton = document.getElementById('studentFilterButton');
const studentFilterDropdown = document.getElementById('studentFilterDropdown');
sortButton.addEventListener('click', function() {
sortDropdown.classList.toggle('hidden');
filterDropdown.classList.add('hidden');
studentFilterDropdown.classList.add('hidden');
});
filterButton.addEventListener('click', function() {
filterDropdown.classList.toggle('hidden');
sortDropdown.classList.add('hidden');
studentFilterDropdown.classList.add('hidden');
});
studentFilterButton.addEventListener('click', function() {
studentFilterDropdown.classList.toggle('hidden');
sortDropdown.classList.add('hidden');
filterDropdown.classList.add('hidden');
});
// Close dropdowns when clicking outside
document.addEventListener('click', function(event) {
if (!sortButton.contains(event.target) && !sortDropdown.contains(event.target)) {
sortDropdown.classList.add('hidden');
}
if (!filterButton.contains(event.target) && !filterDropdown.contains(event.target)) {
filterDropdown.classList.add('hidden');
}
if (!studentFilterButton.contains(event.target) && !studentFilterDropdown.contains(event.target)) {
studentFilterDropdown.classList.add('hidden');
}
});
// Handle sort options
document.querySelectorAll('.sort-option').forEach(option => {
option.addEventListener('click', function(e) {
e.preventDefault();
const sortBy = this.getAttribute('data-sort');
const sortOrder = this.getAttribute('data-order');
// Build URL with current parameters
const url = new URL(window.location.href);
url.searchParams.set('sort_by', sortBy);
url.searchParams.set('sort_order', sortOrder);
// Keep filter parameter if it exists
if (currentFilterBy && currentFilterBy !== 'all') {
url.searchParams.set('filter_by', currentFilterBy);
}
window.location.href = url.toString();
});
});
// Handle filter options
document.querySelectorAll('.filter-option').forEach(option => {
option.addEventListener('click', function(e) {
e.preventDefault();
const filterBy = this.getAttribute('data-filter');
// Build URL with current parameters
const url = new URL(window.location.href);
// Keep sort parameters
url.searchParams.set('sort_by', currentSortBy);
url.searchParams.set('sort_order', currentSortOrder);
// Set filter parameter
if (filterBy === 'all') {
url.searchParams.delete('filter_by');
} else {
url.searchParams.set('filter_by', filterBy);
}
window.location.href = url.toString();
});
});
// Handle student filter options
const studentRows = document.querySelectorAll('.student-row');
const filterOptions = document.querySelectorAll('.student-filter-option');
studentFilterButton.addEventListener('click', () => {
studentFilterDropdown.classList.toggle('hidden');
});
filterOptions.forEach(option => {
option.addEventListener('click', (e) => {
e.preventDefault();
const filter = option.dataset.filter;
studentRows.forEach(row => {
if (filter === 'all' || row.dataset.status === filter) {
row.style.display = '';
} else {
row.style.display = 'none';
}
});
studentFilterDropdown.classList.add('hidden');
});
});
// Close dropdown when clicking outside
document.addEventListener('click', (e) => {
if (!studentFilterButton.contains(e.target) && !studentFilterDropdown.contains(e.target)) {
studentFilterDropdown.classList.add('hidden');
}
});
// Highlight current sort and filter options
document.querySelectorAll('.sort-option').forEach(option => {
const sortBy = option.getAttribute('data-sort');
const sortOrder = option.getAttribute('data-order');
if (sortBy === currentSortBy && sortOrder === currentSortOrder) {
option.classList.add('bg-gray-100');
}
});
document.querySelectorAll('.filter-option').forEach(option => {
const filterBy = option.getAttribute('data-filter');
if ((filterBy === 'all' && !currentFilterBy) || filterBy === currentFilterBy) {
option.classList.add('bg-gray-100');
}
});
});
</script>
<?php
$content = ob_get_clean();
require APP_PATH . '/views/layouts/dashboard1.php';
?>