<?php
session_start();
// Set mysqli to throw exceptions
mysqli_report(MYSQLI_REPORT_ERROR | MYSQLI_REPORT_STRICT);
// Check if installation is complete
if (!file_exists('installed.php')) {
header('Location: install.php');
exit;
}
// Include database configuration
require_once 'admin/database/db_config.php';
// Check if course ID is provided
if (!isset($_GET['id']) || empty($_GET['id'])) {
header('Location: courses.php');
exit;
}
$course_id = mysqli_real_escape_string($conn, $_GET['id']);
// Get course details
try {
$course_query = "SELECT c.*,
(SELECT COUNT(*) FROM enrollments WHERE course_id = c.id) as student_count,
(SELECT AVG(rating) FROM course_reviews WHERE course_id = c.id) as avg_rating,
(SELECT COUNT(*) FROM course_reviews WHERE course_id = c.id) as review_count
FROM courses c
WHERE c.id = '$course_id' AND c.status = 'active'";
$course_result = mysqli_query($conn, $course_query);
if (!$course_result || mysqli_num_rows($course_result) == 0) {
header('Location: courses.php');
exit;
}
$course = mysqli_fetch_assoc($course_result);
} catch (mysqli_sql_exception $e) {
// If there's an error, try a simpler query without instructor details
error_log("Error in course query: " . $e->getMessage());
try {
$simple_query = "SELECT c.*,
0 as student_count,
0 as avg_rating,
0 as review_count
FROM courses c
WHERE c.id = '$course_id' AND c.status = 'active'";
$course_result = mysqli_query($conn, $simple_query);
if (!$course_result || mysqli_num_rows($course_result) == 0) {
header('Location: courses.php');
exit;
}
$course = mysqli_fetch_assoc($course_result);
} catch (mysqli_sql_exception $e2) {
// If even the simple query fails, redirect to courses page
error_log("Error in simple course query: " . $e2->getMessage());
header('Location: courses.php?error=1');
exit;
}
}
// Get course reviews
$reviews_result = false;
try {
$reviews_query = "SELECT cr.*, s.name as student_name, s.image as student_image
FROM course_reviews cr
LEFT JOIN students s ON cr.student_id = s.id
WHERE cr.course_id = '$course_id'
ORDER BY cr.created_at DESC
LIMIT 5";
$reviews_result = mysqli_query($conn, $reviews_query);
} catch (mysqli_sql_exception $e) {
error_log("Error fetching reviews: " . $e->getMessage());
}
// Get related courses
$related_result = false;
try {
// Prepare the category condition for the query
$category_condition = "";
if (isset($course['category'])) {
if (strpos($course['category'], ',') !== false) {
// Multiple categories
$categories = explode(',', $course['category']);
$category_conditions = [];
foreach ($categories as $category) {
$category = trim($category);
if (!empty($category)) {
$escaped_category = mysqli_real_escape_string($conn, $category);
$category_conditions[] = "c.category LIKE '%$escaped_category%'";
}
}
if (!empty($category_conditions)) {
$category_condition = "(" . implode(" OR ", $category_conditions) . ")";
}
} else {
// Single category
$escaped_category = mysqli_real_escape_string($conn, $course['category']);
$category_condition = "c.category LIKE '%$escaped_category%'";
}
}
// Construct the query
$related_query = "SELECT c.*,
(SELECT COUNT(*) FROM enrollments WHERE course_id = c.id) as student_count,
(SELECT AVG(rating) FROM course_reviews WHERE course_id = c.id) as avg_rating,
(SELECT COUNT(*) FROM course_reviews WHERE course_id = c.id) as review_count
FROM courses c
WHERE ";
// Add category condition if it exists
if (!empty($category_condition)) {
$related_query .= "$category_condition AND ";
}
$related_query .= "c.id != '$course_id'
AND c.status = 'active'
ORDER BY c.created_at DESC
LIMIT 3";
$related_result = mysqli_query($conn, $related_query);
} catch (mysqli_sql_exception $e) {
error_log("Error fetching related courses: " . $e->getMessage());
}
// Include header
include 'includes/header.php';
?>
<!-- Page Banner -->
<section class="course-banner">
<?php
// Check all possible image paths in order of preference
$image_path_1 = 'assets/img/courses/' . $course['id'] . '.jpg';
$image_path_2 = 'assets/images/courses/' . $course['id'] . '.jpg';
$image_path_3 = $course['image']; // Use the image path stored in the database
$image_path_4 = 'assets/img/courses/default.jpg';
$image_path_5 = 'assets/images/course-placeholder.jpg';
$image_path_6 = 'https://placehold.co/1200x600/4f46e5/ffffff?text=' . urlencode(substr($course['title'], 0, 20));
// Check which image exists
if (file_exists($image_path_1)) {
$banner_image_url = $image_path_1;
} elseif (file_exists($image_path_2)) {
$banner_image_url = $image_path_2;
} elseif (isset($image_path_3) && !empty($image_path_3) && file_exists($image_path_3)) {
$banner_image_url = $image_path_3;
} elseif (file_exists($image_path_4)) {
$banner_image_url = $image_path_4;
} elseif (file_exists($image_path_5)) {
$banner_image_url = $image_path_5;
} else {
$banner_image_url = $image_path_6;
}
?>
<div class="course-banner-bg" style="background-image: url('<?php echo $banner_image_url; ?>')"></div>
<div class="banner-overlay"></div>
<div class="container">
<div class="row">
<div class="col-lg-8">
<div class="course-banner-content">
<div class="course-category">
<?php
// Handle multiple categories if they exist
if (isset($course['category'])) {
if (strpos($course['category'], ',') !== false) {
// Multiple categories separated by commas
$categories = explode(',', $course['category']);
foreach ($categories as $category) {
$category = trim($category);
if (!empty($category)) {
echo '<span class="badge bg-primary me-2">' . htmlspecialchars($category) . '</span>';
}
}
} else {
// Single category
echo '<span class="badge bg-primary">' . htmlspecialchars($course['category']) . '</span>';
}
} else {
echo '<span class="badge bg-primary">General</span>';
}
?>
<?php if (isset($course['level'])): ?>
<span class="badge bg-secondary"><?php echo htmlspecialchars($course['level']); ?></span>
<?php endif; ?>
</div>
<h2 class="course-title"><?php echo htmlspecialchars($course['title']); ?></h2>
<div class="course-meta-bar mb-4">
<div class="row align-items-center">
<div class="col-md-8">
<div class="course-meta">
<?php if (isset($course['instructor_name'])): ?>
<span class="meta-item">
<i class="fas fa-user-tie"></i> <?php echo htmlspecialchars($course['instructor_name']); ?>
</span>
<?php endif; ?>
<?php if (isset($course['category'])): ?>
<span class="meta-item">
<i class="fas fa-folder"></i> <?php echo htmlspecialchars($course['category']); ?>
</span>
<?php endif; ?>
<span class="meta-item">
<i class="fas fa-users"></i> <?php echo number_format($course['student_count']); ?> Students
</span>
<span class="meta-item">
<i class="fas fa-globe"></i> <?php echo isset($course['language']) ? htmlspecialchars($course['language']) : 'English'; ?>
</span>
<?php if (isset($course['certificate']) && $course['certificate']): ?>
<span class="meta-item certificate-badge">
<i class="fas fa-certificate"></i> Certificate Included
</span>
<?php endif; ?>
</div>
</div>
<div class="col-md-4 text-md-end">
<div class="course-rating-compact">
<div class="rating-stars">
<?php
$rating = round($course['avg_rating']);
for ($i = 1; $i <= 5; $i++) {
if ($i <= $rating) {
echo '<i class="fas fa-star"></i>';
} else {
echo '<i class="far fa-star"></i>';
}
}
?>
</div>
<span class="rating-value"><?php echo number_format($course['avg_rating'], 1); ?></span>
<span class="rating-count">(<?php echo $course['review_count']; ?> reviews)</span>
</div>
</div>
</div>
</div>
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="index.php">Home</a></li>
<li class="breadcrumb-item"><a href="courses.php">Courses</a></li>
<li class="breadcrumb-item active"><?php echo htmlspecialchars($course['title']); ?></li>
</ol>
</nav>
</div>
</div>
<div class="col-lg-4">
<div class="course-banner-card">
<div class="card-image">
<img src="<?php echo $banner_image_url; ?>" alt="<?php echo htmlspecialchars($course['title']); ?>" class="img-fluid">
</div>
<div class="card-content">
<div class="course-price">
<?php
if (isset($course['price'])) {
if ($course['price'] <= 0) {
echo '<div class="free-course">Free</div>';
} else {
if (isset($course['discount_price']) && $course['discount_price'] > 0 && $course['discount_price'] < $course['price']) {
// Show discounted price as main price
echo '<div class="price-wrapper">';
echo '<div class="price-amount">₹' . number_format($course['discount_price'], 2) . '</div>';
echo '<div class="original-price">₹' . number_format($course['price'], 2) . '</div>';
echo '</div>';
// Calculate discount percentage
$discount_percentage = round((($course['price'] - $course['discount_price']) / $course['price']) * 100);
echo '<div class="discount-badge">' . $discount_percentage . '% OFF</div>';
} else {
echo '<div class="price-amount">₹' . number_format($course['price'], 2) . '</div>';
}
}
} else {
echo '<div class="free-course">Free</div>';
}
?>
</div>
<div class="card-actions">
<a href="enroll/enroll.php?course_id=<?php echo $course['id']; ?>" class="btn btn-primary btn-lg btn-block enroll-btn">
<i class="fas fa-graduation-cap me-2"></i> Enroll Now
</a>
<?php if (isset($_SESSION['user_id']) && $_SESSION['role'] === 'student'): ?>
<button class="btn btn-outline-primary btn-lg btn-block wishlist-btn" id="wishlistBtn" data-course-id="<?php echo $course['id']; ?>">
<i class="far fa-heart me-2" id="wishlistIcon"></i> <span id="wishlistText">Add to Wishlist</span>
</button>
<?php else: ?>
<a href="login.php?redirect=course-details.php?id=<?php echo $course['id']; ?>" class="btn btn-outline-primary btn-lg btn-block">
<i class="far fa-heart me-2"></i> Add to Wishlist
</a>
<?php endif; ?>
</div>
<!-- <div class="course-includes">
<h4>This Course Includes:</h4>
<ul class="includes-list">
<?php if (isset($course['lessons_count'])): ?>
<li><i class="fas fa-play-circle"></i> <?php echo intval($course['lessons_count']); ?> lessons</li>
<?php else: ?>
<li><i class="fas fa-play-circle"></i> Full lifetime access</li>
<?php endif; ?>
<li><i class="fas fa-file-alt"></i> Downloadable resources</li>
<li><i class="fas fa-trophy"></i> Certificate of completion</li>
<li><i class="fas fa-mobile-alt"></i> Access on mobile and TV</li>
</ul>
</div> -->
<div class="share-course">
<span>Share This Course:</span>
<div class="social-share">
<a href="#" class="facebook"><i class="fab fa-facebook-f"></i></a>
<a href="#" class="twitter"><i class="fab fa-twitter"></i></a>
<a href="#" class="linkedin"><i class="fab fa-linkedin-in"></i></a>
<a href="#" class="pinterest"><i class="fab fa-pinterest-p"></i></a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- End Page Banner -->
<style>
/* Course Banner Styles */
.course-banner {
position: relative;
padding: 80px 0;
color: #fff;
overflow: hidden;
margin-bottom: 50px;
}
.course-banner-bg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-size: cover;
background-position: center;
filter: blur(0);
transition: all 0.5s ease;
z-index: -2;
}
.banner-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(135deg, rgba(79, 70, 229, 0.9) 0%, rgba(45, 55, 72, 0.85) 100%);
z-index: -1;
}
.course-banner-content {
padding: 30px;
border-radius: 16px;
background-color: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.1);
margin-bottom: 30px;
}
.course-banner-content .course-category {
margin-bottom: 20px;
}
.course-banner-content .course-category .badge {
font-size: 0.85rem;
padding: 0.5em 1em;
margin-right: 10px;
border-radius: 30px;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.course-banner-content .course-title {
font-size: 2.5rem;
font-weight: 700;
margin-bottom: 20px;
line-height: 1.3;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.course-banner-content .course-meta {
display: flex;
flex-wrap: wrap;
margin-bottom: 25px;
gap: 20px;
}
.course-banner-content .meta-item {
display: flex;
align-items: center;
font-size: 0.95rem;
margin-right: 25px;
}
.course-banner-content .meta-item i {
margin-right: 8px;
font-size: 1rem;
color: rgba(255, 255, 255, 0.9);
}
.course-banner-content .course-rating {
display: flex;
align-items: center;
color: #ffc107;
font-size: 0.95rem;
}
.course-banner-content .course-rating i {
color: #ffc107;
margin-right: 2px;
}
.course-banner-content .rating-text {
color: #fff;
margin: 0 5px;
font-weight: 600;
}
.course-banner-content .rating-count {
color: rgba(255, 255, 255, 0.8);
font-size: 0.85rem;
}
.course-banner-content .breadcrumb {
background-color: rgba(255, 255, 255, 0.15);
display: inline-flex;
padding: 0.75rem 1rem;
border-radius: 30px;
margin-bottom: 0;
}
.course-banner-content .breadcrumb-item {
color: rgba(255, 255, 255, 0.9);
font-size: 0.9rem;
}
.course-banner-content .breadcrumb-item a {
color: #fff;
text-decoration: none;
}
.course-banner-content .breadcrumb-item.active {
color: rgba(255, 255, 255, 0.7);
}
.course-banner-content .breadcrumb-item+.breadcrumb-item::before {
color: rgba(255, 255, 255, 0.7);
}
/* Course Banner Card */
.course-banner-card {
background-color: #fff;
border-radius: 16px;
overflow: hidden;
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease;
}
.course-banner-card .card-image {
height: 200px;
overflow: hidden;
}
.course-banner-card .card-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.5s ease;
}
.course-banner-card:hover .card-image img {
transform: scale(1.05);
}
.course-banner-card .card-content {
padding: 25px;
}
.course-banner-card .course-price {
margin-bottom: 20px;
text-align: center;
background: linear-gradient(135deg, #4e73df 0%, #224abe 100%);
color: #fff;
padding: 20px;
position: relative;
border-radius: 8px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}
.course-banner-card .price-wrapper {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.course-banner-card .original-price {
text-decoration: line-through;
color: rgba(255, 255, 255, 0.8);
margin-right: 0;
font-size: 18px;
opacity: 0.8;
}
.course-banner-card .price-amount {
color: #fff;
font-size: 32px;
font-weight: 700;
line-height: 1.2;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}
.course-banner-card .free-course {
color: #fff;
font-size: 28px;
font-weight: 700;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}
.course-banner-card .discount-badge {
position: absolute;
top: 10px;
right: 10px;
background: #ff5722;
color: white;
font-weight: 600;
padding: 5px 10px;
border-radius: 5px;
font-size: 14px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
animation: pulse 2s infinite;
}
@keyframes pulse {
0% {
transform: scale(1);
}
50% {
transform: scale(1.05);
}
100% {
transform: scale(1);
}
}
.course-banner-card .card-actions {
margin-bottom: 25px;
}
.course-banner-card .btn {
margin-bottom: 10px;
font-weight: 600;
padding: 0.8rem 1.5rem;
}
.course-banner-card .enroll-btn {
background-color: var(--primary-color);
border-color: var(--primary-color);
width: 100%;
}
.course-banner-card .wishlist-btn {
width: 100%;
}
.course-banner-card .course-includes {
margin-bottom: 25px;
border-top: 1px solid #eee;
padding-top: 20px;
}
.course-banner-card .course-includes h4 {
font-size: 1.1rem;
font-weight: 600;
margin-bottom: 15px;
color: #333;
}
.course-banner-card .includes-list {
list-style: none;
padding: 0;
margin: 0;
}
.course-banner-card .includes-list li {
display: flex;
align-items: center;
margin-bottom: 10px;
color: #555;
font-size: 0.95rem;
}
.course-banner-card .includes-list li i {
margin-right: 10px;
color: var(--primary-color);
font-size: 1rem;
}
.course-banner-card .share-course {
border-top: 1px solid #eee;
padding-top: 20px;
text-align: center;
}
.course-banner-card .share-course span {
display: block;
margin-bottom: 10px;
font-size: 0.95rem;
color: #555;
}
.course-banner-card .social-share {
display: flex;
justify-content: center;
}
.course-banner-card .social-share a {
display: inline-flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
border-radius: 50%;
margin: 0 5px;
color: #fff;
transition: all 0.3s ease;
}
.course-banner-card .social-share a.facebook {
background-color: #3b5998;
}
.course-banner-card .social-share a.twitter {
background-color: #1da1f2;
}
.course-banner-card .social-share a.linkedin {
background-color: #0077b5;
}
.course-banner-card .social-share a.pinterest {
background-color: #bd081c;
}
.course-banner-card .social-share a:hover {
transform: translateY(-3px);
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}
/* Responsive styles */
@media (max-width: 992px) {
.course-banner-content .course-title {
font-size: 2rem;
}
.course-banner-content .meta-item {
margin-right: 15px;
font-size: 0.9rem;
}
}
@media (max-width: 768px) {
.course-banner {
padding: 60px 0;
}
.course-banner-content .course-title {
font-size: 1.75rem;
}
.course-banner-content .meta-item {
margin-right: 10px;
margin-bottom: 10px;
}
.course-banner-card {
margin-top: 30px;
}
}
@media (max-width: 576px) {
.course-banner-content {
padding: 20px;
}
.course-banner-content .course-title {
font-size: 1.5rem;
}
.course-banner-content .course-meta {
flex-direction: column;
gap: 10px;
}
.course-banner-content .meta-item {
margin-right: 0;
}
}
</style>
<!-- Course Details Section -->
<section class="course-details-section section-padding">
<div class="container" style="margin-top: 0px;">
<div class="row">
<div class="col-lg-8">
<!-- Course Main Content -->
<div class="course-main-content">
<div class="course-main-image">
<?php
// Get course image with fallback
$main_image_path = 'assets/images/courses/' . $course['id'] . '-detail.jpg';
$main_image_url = file_exists($main_image_path) ? $main_image_path : $banner_image_url;
?>
<img src="<?php echo $main_image_url; ?>" alt="<?php echo htmlspecialchars($course['title']); ?>" class="img-fluid rounded">
<?php if (isset($course['video_preview']) && !empty($course['video_preview'])): ?>
<a href="<?php echo htmlspecialchars($course['video_preview']); ?>" class="video-play-btn" data-fancybox>
<i class="fas fa-play"></i>
</a>
<?php endif; ?>
</div>
<div class="course-tabs">
<ul class="nav nav-pills" id="pills-tab" role="tablist">
<li class="nav-item" role="presentation">
<button class="nav-link active" id="pills-overview-tab" data-bs-toggle="pill" data-bs-target="#pills-overview" type="button" role="tab" aria-controls="pills-overview" aria-selected="true">Overview</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="pills-reviews-tab" data-bs-toggle="pill" data-bs-target="#pills-reviews" type="button" role="tab" aria-controls="pills-reviews" aria-selected="false">Reviews</button>
</li>
</ul>
<div class="tab-content" id="pills-tabContent">
<!-- Overview Tab -->
<div class="tab-pane fade show active" id="pills-overview" role="tabpanel" aria-labelledby="pills-overview-tab">
<div class="course-overview">
<!-- Description -->
<div class="course-description">
<h4 class="section-title">Course Description</h4>
<?php
// Check if description exists, if not use short_description or a placeholder
if (!empty($course['description'])) {
echo nl2br(htmlspecialchars($course['description']));
} elseif (!empty($course['short_description'])) {
echo nl2br(htmlspecialchars($course['short_description']));
} else {
echo "<p>No description available for this course.</p>";
}
?>
</div>
<!-- What You'll Learn Section -->
<?php if (!empty($course['what_youll_learn'])): ?>
<div class="what-youll-learn mt-4">
<h4 class="section-title">What You'll Learn</h4>
<div class="learn-items">
<div class="row">
<?php
$learn_items = explode("\n", $course['what_youll_learn']);
foreach ($learn_items as $item):
$item = trim($item);
if (empty($item)) continue;
?>
<div class="col-md-6">
<div class="learn-item">
<i class="fas fa-check-circle"></i>
<span><?php echo htmlspecialchars($item); ?></span>
</div>
</div>
<?php endforeach; ?>
</div>
</div>
</div>
<?php endif; ?>
<!-- Requirements Section -->
<?php if (!empty($course['requirements'])): ?>
<div class="requirements mt-4">
<h4 class="section-title">Requirements</h4>
<ul class="requirements-list">
<?php
$req_items = explode("\n", $course['requirements']);
foreach ($req_items as $item):
$item = trim($item);
if (empty($item)) continue;
?>
<li><i class="fas fa-circle"></i> <?php echo htmlspecialchars($item); ?></li>
<?php endforeach; ?>
</ul>
</div>
<?php endif; ?>
</div>
</div>
<!-- Reviews Tab -->
<div class="tab-pane fade" id="pills-reviews" role="tabpanel" aria-labelledby="pills-reviews-tab">
<!-- Reviews Content -->
<div class="course-reviews">
<h4 class="section-title">Student Reviews</h4>
<div class="reviews-summary mb-4">
<div class="row align-items-center">
<div class="col-md-4 text-center">
<div class="review-rating-box">
<div class="average-rating"><?php echo number_format($course['avg_rating'], 1); ?></div>
<div class="stars">
<?php
$avg_rating = floatval($course['avg_rating']);
for ($i = 1; $i <= 5; $i++) {
if ($i <= $avg_rating) {
echo '<i class="fas fa-star"></i>'; // Full star
} elseif ($i - 0.5 <= $avg_rating) {
echo '<i class="fas fa-star-half-alt"></i>'; // Half star
} else {
echo '<i class="far fa-star"></i>'; // Empty star
}
}
?>
</div>
<div class="total-reviews">Based on <?php echo (int)$course['review_count']; ?> reviews</div>
</div>
</div>
<div class="col-md-8">
<div class="rating-bars">
<?php
// Rating distribution (placeholder)
$ratings_distribution = [
5 => 70,
4 => 20,
3 => 5,
2 => 3,
1 => 2
];
for ($i = 5; $i >= 1; $i--):
?>
<div class="rating-bar-item">
<div class="rating-label"><?php echo $i; ?> stars</div>
<div class="progress">
<div class="progress-bar" role="progressbar" style="width: <?php echo $ratings_distribution[$i]; ?>%" aria-valuenow="<?php echo $ratings_distribution[$i]; ?>" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="rating-percent"><?php echo $ratings_distribution[$i]; ?>%</div>
</div>
<?php endfor; ?>
</div>
</div>
</div>
</div>
<!-- Reviews List -->
<div class="reviews-list mt-4">
<?php if (isset($reviews_result) && $reviews_result && mysqli_num_rows($reviews_result) > 0): ?>
<?php while ($review = mysqli_fetch_assoc($reviews_result)): ?>
<div class="review-card">
<div class="review-header">
<div class="reviewer">
<div class="reviewer-avatar">
<?php
$avatar = isset($review['student_image']) && !empty($review['student_image'])
? $review['student_image']
: 'https://ui-avatars.com/api/?name=' . urlencode($review['student_name'] ?? 'Student') . '&background=4e73df&color=fff';
?>
<img src="<?php echo $avatar; ?>" alt="Reviewer">
</div>
<div class="reviewer-info">
<h5 class="reviewer-name"><?php echo htmlspecialchars($review['student_name'] ?? 'Anonymous Student'); ?></h5>
<div class="review-date"><?php echo date('M d, Y', strtotime($review['created_at'])); ?></div>
</div>
</div>
<div class="review-rating">
<?php
for ($i = 1; $i <= 5; $i++) {
if ($i <= $review['rating']) {
echo '<i class="fas fa-star"></i>';
} else {
echo '<i class="far fa-star"></i>';
}
}
?>
</div>
</div>
<div class="review-content">
<?php echo nl2br(htmlspecialchars($review['review'])); ?>
</div>
</div>
<?php endwhile; ?>
<?php else: ?>
<div class="no-reviews">
<div class="no-reviews-icon">
<i class="far fa-comment-dots"></i>
</div>
<h5>No Reviews Yet</h5>
<p>Be the first to review this course!</p>
</div>
<?php endif; ?>
</div>
<!-- Review Form - Show only to enrolled students -->
<?php if (isset($_SESSION['user_id']) && isset($_SESSION['is_enrolled']) && $_SESSION['is_enrolled']): ?>
<div class="review-form-container mt-5">
<h4 class="section-title">Write a Review</h4>
<form action="submit-review.php" method="POST" class="review-form">
<input type="hidden" name="course_id" value="<?php echo $course_id; ?>">
<div class="form-group mb-3">
<label>Your Rating</label>
<div class="rating-select">
<div class="rate">
<input type="radio" id="star5" name="rating" value="5" required />
<label for="star5" title="5 stars">5 stars</label>
<input type="radio" id="star4" name="rating" value="4" />
<label for="star4" title="4 stars">4 stars</label>
<input type="radio" id="star3" name="rating" value="3" />
<label for="star3" title="3 stars">3 stars</label>
<input type="radio" id="star2" name="rating" value="2" />
<label for="star2" title="2 stars">2 stars</label>
<input type="radio" id="star1" name="rating" value="1" />
<label for="star1" title="1 star">1 star</label>
</div>
</div>
</div>
<div class="form-group mb-3">
<label for="review">Your Review</label>
<textarea class="form-control" id="review" name="review" rows="5" placeholder="Share your experience with this course..." required></textarea>
</div>
<button type="submit" class="btn btn-primary">Submit Review</button>
</form>
</div>
<?php endif; ?>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-4">
<!-- Course Sidebar -->
<div class="course-sidebar">
<!-- Course Card -->
<div class="course-card">
<div class="course-price">
<?php
if (isset($course['price'])) {
if ($course['price'] <= 0) {
echo '<div class="free-course">Free</div>';
} else {
if (isset($course['discount_price']) && $course['discount_price'] > 0 && $course['discount_price'] < $course['price']) {
// Show discounted price as main price
echo '<div class="price-wrapper">';
echo '<div class="price-amount">₹' . number_format($course['discount_price'], 2) . '</div>';
echo '<div class="original-price">₹' . number_format($course['price'], 2) . '</div>';
echo '</div>';
// Calculate discount percentage
$discount_percentage = round((($course['price'] - $course['discount_price']) / $course['price']) * 100);
echo '<div class="discount-badge">' . $discount_percentage . '% OFF</div>';
} else {
echo '<div class="price-amount">₹' . number_format($course['price'], 2) . '</div>';
}
}
} else {
echo '<div class="free-course">Free</div>';
}
?>
</div>
<div class="course-info-list">
<div class="info-item">
<div class="info-icon">
<i class="fas fa-user-graduate"></i>
</div>
<div class="info-text">
<span class="info-label">Students</span>
<span class="info-value"><?php echo isset($course['student_count']) ? number_format($course['student_count']) : '0'; ?></span>
</div>
</div>
<div class="info-item">
<div class="info-icon">
<i class="fas fa-clock"></i>
</div>
<div class="info-text">
<span class="info-label">Duration</span>
<span class="info-value"><?php
if (isset($course['duration'])) {
$duration = $course['duration'];
// If duration contains "months" text, extract the number
if (strpos($duration, 'months') !== false) {
$duration = str_replace(' months', '', $duration);
echo $duration . ' months';
} else {
echo htmlspecialchars($duration);
}
} else {
echo 'Self-paced';
}
?></span>
</div>
</div>
<div class="info-item">
<div class="info-icon">
<i class="fas fa-signal"></i>
</div>
<div class="info-text">
<span class="info-label">Level</span>
<span class="info-value"><?php echo isset($course['level']) ? ucfirst(htmlspecialchars($course['level'])) : 'All Levels'; ?></span>
</div>
</div>
<div class="info-item">
<div class="info-icon">
<i class="fas fa-globe"></i>
</div>
<div class="info-text">
<span class="info-label">Language</span>
<span class="info-value"><?php echo isset($course['language']) ? htmlspecialchars($course['language']) : 'English'; ?></span>
</div>
</div>
<div class="info-item">
<div class="info-icon">
<i class="fas fa-book"></i>
</div>
<div class="info-text">
<span class="info-label">Lessons</span>
<span class="info-value"><?php echo isset($course['lessons_count']) && $course['lessons_count'] > 0 ? (int)$course['lessons_count'] : '0'; ?></span>
</div>
</div>
<?php if (isset($course['certificate']) && $course['certificate']): ?>
<div class="info-item">
<div class="info-icon">
<i class="fas fa-certificate"></i>
</div>
<div class="info-text">
<span class="info-label">Certificate</span>
<span class="info-value">Yes</span>
</div>
</div>
<?php else: ?>
<div class="info-item">
<div class="info-icon">
<i class="fas fa-certificate"></i>
</div>
<div class="info-text">
<span class="info-label">Certificate</span>
<span class="info-value">No</span>
</div>
</div>
<?php endif; ?>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- End Course Details Section -->
<!-- CTA Section -->
<section class="cta-section-new">
<div class="container">
<div class="cta-wrapper">
<div class="cta-content-wrapper">
<div class="cta-icon">
<i class="fas fa-rocket"></i>
</div>
<div class="cta-text">
<h2>Ready to Start Your Learning Journey?</h2>
<p>Enroll in our courses today and take the first step towards a successful career in the tech industry.</p>
<div class="cta-offer">
<span class="offer-text">Limited Time Offer!</span>
<div class="countdown" id="offer-countdown">
<div class="countdown-item">
<span class="countdown-number" id="countdown-hours">24</span>
<span class="countdown-label">Hours</span>
</div>
<div class="countdown-item">
<span class="countdown-number" id="countdown-minutes">00</span>
<span class="countdown-label">Minutes</span>
</div>
<div class="countdown-item">
<span class="countdown-number" id="countdown-seconds">00</span>
<span class="countdown-label">Seconds</span>
</div>
</div>
</div>
</div>
<div class="cta-buttons">
<a href="enroll.php?course_id=<?php echo $course['id']; ?>" class="btn btn-primary btn-enroll">
<i class="fas fa-graduation-cap me-2"></i>Enroll Now
</a>
<a href="contact.php" class="btn btn-outline-light btn-contact">
<i class="fas fa-envelope me-2"></i>Contact Us
</a>
</div>
</div>
</div>
</div>
</section>
<!-- Additional CSS for Course Details Section -->
<style>
/* CTA Section Styles */
.cta-section-new {
position: relative;
padding: 60px 0;
margin: 50px 0;
background: linear-gradient(135deg, #4e73df 0%, #224abe 100%);
border-radius: 15px;
overflow: hidden;
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
}
.cta-section-new::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('data:image/svg+xml;charset=utf8,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320"%3E%3Cpath fill="%23ffffff" fill-opacity="0.1" d="M0,192L48,197.3C96,203,192,213,288,202.7C384,192,480,160,576,165.3C672,171,768,213,864,213.3C960,213,1056,171,1152,149.3C1248,128,1344,128,1392,128L1440,128L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z"%3E%3C/path%3E%3C/svg%3E');
background-size: cover;
background-position: center;
opacity: 0.3;
}
.cta-wrapper {
position: relative;
z-index: 1;
padding: 20px;
}
.cta-content-wrapper {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
max-width: 800px;
margin: 0 auto;
}
.cta-icon {
font-size: 48px;
color: #fff;
margin-bottom: 20px;
animation: bounce 2s infinite;
}
@keyframes bounce {
0%, 20%, 50%, 80%, 100% {
transform: translateY(0);
}
40% {
transform: translateY(-20px);
}
60% {
transform: translateY(-10px);
}
}
.cta-text h2 {
font-size: 2.5rem;
font-weight: 700;
color: #fff;
margin-bottom: 15px;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}
.cta-text p {
font-size: 1.2rem;
color: rgba(255, 255, 255, 0.9);
margin-bottom: 30px;
}
.cta-offer {
background-color: rgba(255, 255, 255, 0.15);
padding: 20px 30px;
border-radius: 12px;
margin-bottom: 30px;
backdrop-filter: blur(5px);
border: 1px solid rgba(255, 255, 255, 0.2);
}
.offer-text {
display: block;
font-size: 1.1rem;
font-weight: 600;
color: #fff;
margin-bottom: 10px;
}
.countdown {
display: flex;
justify-content: center;
gap: 15px;
}
.countdown-item {
display: flex;
flex-direction: column;
align-items: center;
}
.countdown-number {
font-size: 1.8rem;
font-weight: 700;
color: #fff;
background-color: rgba(0, 0, 0, 0.2);
border-radius: 8px;
padding: 5px 10px;
min-width: 60px;
text-align: center;
}
.countdown-label {
font-size: 0.85rem;
color: rgba(255, 255, 255, 0.8);
margin-top: 5px;
}
.cta-buttons {
display: flex;
gap: 15px;
margin-top: 10px;
}
.btn-enroll {
background-color: #fff;
color: #4e73df;
font-weight: 600;
padding: 12px 30px;
border-radius: 50px;
transition: all 0.3s ease;
border: 2px solid #fff;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}
.btn-enroll:hover {
background-color: #f8f9fc;
color: #224abe;
transform: translateY(-3px);
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}
.btn-contact {
padding: 12px 30px;
border-radius: 50px;
font-weight: 600;
transition: all 0.3s ease;
border: 2px solid rgba(255, 255, 255, 0.7);
}
.btn-contact:hover {
background-color: rgba(255, 255, 255, 0.1);
border-color: #fff;
transform: translateY(-3px);
}
@media (max-width: 768px) {
.cta-section-new {
padding: 40px 0;
margin: 30px 0;
}
.cta-text h2 {
font-size: 2rem;
}
.cta-text p {
font-size: 1rem;
}
.cta-buttons {
flex-direction: column;
width: 100%;
}
.btn-enroll, .btn-contact {
width: 100%;
}
}
/* Course details section styles */
.course-details-section {
padding: 0 0 80px;
}
.course-main-content {
background-color: #fff;
border-radius: 16px;
overflow: hidden;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
margin-bottom: 30px;
}
.course-main-image {
position: relative;
height: 400px;
overflow: hidden;
}
.course-main-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.5s ease;
}
.video-play-btn {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 80px;
height: 80px;
background-color: rgba(255, 255, 255, 0.9);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: var(--primary-color);
font-size: 2rem;
text-decoration: none;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease;
z-index: 2;
}
.video-play-btn:hover {
background-color: var(--primary-color);
color: #fff;
transform: translate(-50%, -50%) scale(1.1);
}
.course-tabs {
padding: 30px;
}
.nav-tabs {
border-bottom: 2px solid #f1f1f1;
margin-bottom: 25px;
}
.nav-tabs .nav-item {
margin-right: 10px;
}
.nav-tabs .nav-link {
border: none;
color: #666;
font-weight: 600;
padding: 10px 20px;
border-radius: 0;
position: relative;
transition: all 0.3s ease;
}
.nav-tabs .nav-link::after {
content: '';
position: absolute;
bottom: -2px;
left: 0;
width: 0;
height: 2px;
background-color: var(--primary-color);
transition: all 0.3s ease;
}
.nav-tabs .nav-link:hover,
.nav-tabs .nav-link.active {
color: var(--primary-color);
background-color: transparent;
border: none;
}
.nav-tabs .nav-link.active::after {
width: 100%;
}
.tab-content {
padding-top: 10px;
}
.course-overview h3 {
font-size: 1.5rem;
font-weight: 700;
margin-bottom: 20px;
color: #333;
}
.course-overview h4 {
font-size: 1.25rem;
font-weight: 600;
margin-bottom: 15px;
color: #444;
}
.course-description {
font-size: 1rem;
line-height: 1.7;
color: #555;
margin-bottom: 25px;
}
.course-tags {
margin-bottom: 25px;
}
.tags-container {
display: flex;
flex-wrap: wrap;
}
.badge {
font-weight: 500;
font-size: 0.85rem;
}
.course-features {
margin-bottom: 25px;
}
.feature-item {
display: flex;
align-items: flex-start;
margin-bottom: 15px;
}
.feature-item i {
color: var(--success-color);
font-size: 1.1rem;
margin-right: 10px;
margin-top: 3px;
}
.requirements-list {
list-style: none;
padding: 0;
margin: 0;
}
.requirements-list li {
display: flex;
align-items: flex-start;
margin-bottom: 10px;
}
.requirements-list li i {
color: var(--primary-color);
font-size: 1.1rem;
margin-right: 10px;
margin-top: 3px;
}
/* Curriculum styles */
.curriculum-accordion {
margin-bottom: 30px;
}
.curriculum-card {
border: 1px solid #eee;
border-radius: 8px;
margin-bottom: 15px;
overflow: hidden;
}
.curriculum-header {
padding: 15px 20px;
background-color: #f9fafb;
cursor: pointer;
display: flex;
justify-content: space-between;
align-items: center;
}
.curriculum-header h5 {
margin: 0;
font-size: 1.1rem;
font-weight: 600;
color: #333;
}
.curriculum-header span {
color: #666;
font-size: 0.9rem;
}
.curriculum-content {
padding: 0;
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease;
}
.curriculum-content.active {
max-height: 1000px;
padding: 15px 20px;
border-top: 1px solid #eee;
}
.lesson-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 0;
border-bottom: 1px solid #f1f1f1;
}
.lesson-item:last-child {
border-bottom: none;
}
.lesson-title {
display: flex;
align-items: center;
}
.lesson-title i {
margin-right: 10px;
color: var(--primary-color);
font-size: 0.9rem;
}
.lesson-meta {
display: flex;
align-items: center;
font-size: 0.85rem;
color: #666;
}
.lesson-meta span {
margin-left: 15px;
}
.lesson-meta i {
margin-right: 5px;
}
/* Instructor styles */
.instructor-profile {
display: flex;
margin-bottom: 30px;
}
.instructor-image {
width: 120px;
height: 120px;
border-radius: 50%;
overflow: hidden;
margin-right: 30px;
flex-shrink: 0;
}
.instructor-image img {
width: 100%;
height: 100%;
object-fit: cover;
}
.instructor-info h4 {
font-size: 1.5rem;
font-weight: 700;
margin-bottom: 10px;
color: #333;
}
.instructor-expertise {
color: var(--primary-color);
font-weight: 600;
margin-bottom: 15px;
font-size: 1rem;
}
.instructor-bio {
font-size: 1rem;
line-height: 1.7;
color: #555;
margin-bottom: 20px;
}
.instructor-social a {
display: inline-flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
border-radius: 50%;
margin-right: 10px;
color: #fff;
transition: all 0.3s ease;
text-decoration: none;
}
.instructor-social a:hover {
transform: translateY(-3px);
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}
.social-facebook {
background-color: #3b5998;
}
.social-twitter {
background-color: #1da1f2;
}
.social-linkedin {
background-color: #0077b5;
}
.social-youtube {
background-color: #ff0000;
}
/* Reviews styles */
.course-reviews {
margin-bottom: 30px;
}
.review-item {
display: flex;
padding: 20px 0;
border-bottom: 1px solid #eee;
}
.review-item:last-child {
border-bottom: none;
}
.review-author {
width: 60px;
height: 60px;
border-radius: 50%;
overflow: hidden;
margin-right: 20px;
flex-shrink: 0;
}
.review-author img {
width: 100%;
height: 100%;
object-fit: cover;
}
.review-content {
flex-grow: 1;
}
.review-header {
display: flex;
justify-content: space-between;
margin-bottom: 10px;
}
.review-name {
font-weight: 600;
color: #333;
}
.review-date {
font-size: 0.85rem;
color: #999;
}
.review-rating {
margin-bottom: 10px;
}
.review-rating i {
color: #ffc107;
font-size: 0.9rem;
margin-right: 2px;
}
.review-text {
font-size: 0.95rem;
line-height: 1.6;
color: #555;
}
.review-form {
background-color: #f9fafb;
padding: 25px;
border-radius: 8px;
margin-top: 30px;
}
.review-form h4 {
font-size: 1.2rem;
font-weight: 700;
margin-bottom: 20px;
color: #333;
}
.rating-selector {
margin-bottom: 15px;
}
.rating-selector span {
font-size: 1.5rem;
color: #ddd;
cursor: pointer;
transition: color 0.3s ease;
margin-right: 5px;
}
.rating-selector span.active,
.rating-selector span:hover {
color: #ffc107;
}
/* Media queries */
@media (max-width: 992px) {
.course-main-image {
height: 350px;
}
.instructor-profile {
flex-direction: column;
}
.instructor-image {
margin-right: 0;
margin-bottom: 20px;
}
}
@media (max-width: 768px) {
.course-main-image {
height: 300px;
}
.nav-tabs .nav-item {
margin-right: 5px;
}
.nav-tabs .nav-link {
padding: 8px 15px;
font-size: 0.9rem;
}
.video-play-btn {
width: 60px;
height: 60px;
font-size: 1.5rem;
}
}
@media (max-width: 576px) {
.course-main-image {
height: 250px;
}
.course-tabs {
padding: 20px;
}
.nav-tabs {
display: flex;
flex-wrap: nowrap;
overflow-x: auto;
white-space: nowrap;
-webkit-overflow-scrolling: touch;
}
.nav-tabs .nav-link {
padding: 8px 12px;
font-size: 0.85rem;
}
.review-item {
flex-direction: column;
}
.review-author {
margin-right: 0;
margin-bottom: 15px;
}
}
</style>
<style>
/* Updated Course Sidebar Styling */
.course-card {
border-radius: 10px;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
overflow: hidden;
background: #fff;
margin-bottom: 30px;
}
.course-price {
background: linear-gradient(135deg, #4e73df 0%, #224abe 100%);
color: #fff;
padding: 20px;
text-align: center;
position: relative;
}
.price-wrapper {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.price-amount {
font-size: 32px;
font-weight: 700;
margin-bottom: 5px;
line-height: 1.2;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}
.original-price {
font-size: 18px;
text-decoration: line-through;
opacity: 0.8;
margin-bottom: 5px;
color: rgba(255, 255, 255, 0.8);
}
.discount-badge {
position: absolute;
top: 10px;
right: 10px;
background: #ff5722;
color: white;
font-weight: 600;
padding: 5px 10px;
border-radius: 5px;
font-size: 14px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
animation: pulse 2s infinite;
}
@keyframes pulse {
0% {
transform: scale(1);
}
50% {
transform: scale(1.05);
}
100% {
transform: scale(1);
}
}
.free-course {
font-size: 28px;
font-weight: 700;
color: #fff;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}
.course-info-list {
padding: 20px;
}
.course-info-list .info-item {
display: flex;
align-items: center;
margin-bottom: 15px;
padding-bottom: 15px;
border-bottom: 1px solid #eee;
}
.course-info-list .info-item:last-child {
margin-bottom: 0;
padding-bottom: 0;
border-bottom: none;
}
.course-info-list .info-icon {
width: 40px;
height: 40px;
border-radius: 50%;
background: rgba(78, 115, 223, 0.1);
display: flex;
align-items: center;
justify-content: center;
margin-right: 15px;
color: #4e73df;
font-size: 18px;
}
.course-info-list .info-text {
flex: 1;
}
.course-info-list .info-label {
display: block;
font-size: 13px;
color: #6c757d;
margin-bottom: 3px;
}
.course-info-list .info-value {
font-weight: 600;
color: #343a40;
font-size: 16px;
}
/* Make the certificate info stand out */
.course-info-list .info-item:has(.fa-certificate) .info-icon {
background: rgba(16, 185, 129, 0.1);
color: #10b981;
}
.course-info-list .info-item:has(.fa-certificate) .info-value {
color: #10b981;
font-weight: 700;
}
</style>
<style>
/* Course Meta Bar Styles */
.course-meta-bar {
background-color: #f8f9fa;
border-radius: 10px;
padding: 15px;
box-shadow: 0 2px 8px rgba(0,0,0,0.05);
margin-bottom: 30px;
}
.course-meta .meta-item {
display: inline-flex;
align-items: center;
margin-right: 20px;
color: #6c757d;
font-size: 0.95rem;
}
.course-meta .meta-item i {
margin-right: 5px;
color: var(--primary-color);
}
.meta-item.certificate-badge {
background-color: #28a745;
color: white;
padding: 4px 10px;
border-radius: 20px;
font-weight: 600;
font-size: 0.85rem;
}
.meta-item.certificate-badge i {
color: #fff;
margin-right: 4px;
}
.course-rating-compact {
display: flex;
align-items: center;
justify-content: flex-end;
}
.course-rating-compact .rating-stars {
color: #ffc107;
margin-right: 5px;
}
.course-rating-compact .rating-value {
font-weight: 700;
font-size: 1.1rem;
margin-right: 3px;
}
.course-rating-compact .rating-count {
color: #6c757d;
font-size: 0.9rem;
}
@media (max-width: 767.98px) {
.course-meta-bar .col-md-4 {
text-align: left !important;
margin-top: 15px;
}
.course-rating-compact {
justify-content: flex-start;
}
}
</style>
<style>
/* Additional styles for related courses pricing */
.course-card-footer .course-price {
margin-left: auto;
}
.course-card-footer .price-tag {
background-color: #4e73df;
color: white;
padding: 5px 10px;
border-radius: 5px;
font-weight: 600;
font-size: 14px;
display: inline-block;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.course-card-footer .price-tag.discount {
display: flex;
flex-direction: column;
align-items: center;
background-color: #4e73df;
padding: 5px 8px;
}
.course-card-footer .price-tag .current-price {
font-weight: 700;
font-size: 14px;
}
.course-card-footer .price-tag .old-price {
font-size: 12px;
text-decoration: line-through;
opacity: 0.8;
}
.course-card-footer .price-tag.free {
background-color: #10b981;
}
</style>
<?php
// Include footer
include 'includes/footer.php';
?>
<!-- Add this JavaScript at the end of the file before the closing </body> tag -->
<?php if (isset($_SESSION['user_id']) && $_SESSION['role'] === 'student'): ?>
<script>
$(document).ready(function() {
const courseId = <?php echo $course['id']; ?>;
const wishlistBtn = $('#wishlistBtn');
const wishlistIcon = $('#wishlistIcon');
const wishlistText = $('#wishlistText');
// Check if course is in wishlist
$.ajax({
url: 'student/wishlist_process.php',
type: 'POST',
data: {
action: 'check',
course_id: courseId
},
dataType: 'json',
success: function(response) {
if (response.success && response.inWishlist) {
wishlistIcon.removeClass('far').addClass('fas');
wishlistText.text('Remove from Wishlist');
wishlistBtn.data('in-wishlist', true);
} else {
wishlistIcon.removeClass('fas').addClass('far');
wishlistText.text('Add to Wishlist');
wishlistBtn.data('in-wishlist', false);
}
}
});
// Toggle wishlist
wishlistBtn.on('click', function() {
const inWishlist = $(this).data('in-wishlist');
const action = inWishlist ? 'remove' : 'add';
$.ajax({
url: 'student/wishlist_process.php',
type: 'POST',
data: {
action: action,
course_id: courseId
},
dataType: 'json',
success: function(response) {
if (response.success) {
if (response.inWishlist) {
wishlistIcon.removeClass('far').addClass('fas');
wishlistText.text('Remove from Wishlist');
wishlistBtn.data('in-wishlist', true);
} else {
wishlistIcon.removeClass('fas').addClass('far');
wishlistText.text('Add to Wishlist');
wishlistBtn.data('in-wishlist', false);
}
// Show notification
alert(response.message);
} else {
alert('Error: ' + response.message);
}
},
error: function() {
alert('An error occurred. Please try again.');
}
});
});
});
</script>
<?php endif; ?>
<!-- Countdown Timer JavaScript -->
<script>
document.addEventListener('DOMContentLoaded', function() {
// Set the countdown time to 24 hours from now
let countDownDate = new Date();
countDownDate.setHours(countDownDate.getHours() + 24);
// Update the countdown every 1 second
let countdownTimer = setInterval(function() {
// Get current time
let now = new Date().getTime();
// Find the distance between now and the countdown date
let distance = countDownDate - now;
// Time calculations for hours, minutes and seconds
let hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
let minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
let seconds = Math.floor((distance % (1000 * 60)) / 1000);
// Display the result
document.getElementById("countdown-hours").textContent = hours < 10 ? "0" + hours : hours;
document.getElementById("countdown-minutes").textContent = minutes < 10 ? "0" + minutes : minutes;
document.getElementById("countdown-seconds").textContent = seconds < 10 ? "0" + seconds : seconds;
// If the countdown is finished, clear the interval
if (distance < 0) {
clearInterval(countdownTimer);
document.getElementById("offer-countdown").innerHTML = "EXPIRED";
}
}, 1000);
});
</script>
