<?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,
IFNULL(i.name, 'Unknown Instructor') as instructor_name,
i.image as instructor_image,
IFNULL(i.bio, 'Information not available') as instructor_bio,
IFNULL(i.expertise, 'Not specified') as instructor_expertise
FROM courses c
LEFT JOIN instructors i ON c.instructor_id = i.id
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,
'Unknown Instructor' as instructor_name,
NULL as instructor_image,
'Information not available' as instructor_bio,
'Not specified' as instructor_expertise
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 curriculum
$curriculum_result = false;
try {
$curriculum_query = "SELECT * FROM course_curriculum WHERE course_id = '$course_id' ORDER BY sort_order ASC";
$curriculum_result = mysqli_query($conn, $curriculum_query);
} catch (mysqli_sql_exception $e) {
error_log("Error fetching curriculum: " . $e->getMessage());
}
// 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 {
$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
FROM courses c
WHERE c.category = '{$course['category']}'
AND 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 if image exists
$course_image_path = 'assets/images/courses/' . $course['id'] . '.jpg';
$banner_image_url = file_exists($course_image_path) ? $course_image_path : 'assets/img/courses/default.jpg';
// Fallback if neither exists
if (!file_exists($banner_image_url)) {
$banner_image_url = 'https://placehold.co/1200x600/4f46e5/ffffff?text=' . urlencode($course['title']);
}
?>
<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">
<span class="badge bg-primary"><?php echo htmlspecialchars($course['category'] ?? 'General'); ?></span>
<?php if (isset($course['level'])): ?>
<span class="badge bg-secondary"><?php echo htmlspecialchars($course['level']); ?></span>
<?php endif; ?>
</div>
<h1 class="course-title"><?php echo htmlspecialchars($course['title']); ?></h1>
<div class="course-meta">
<div class="meta-item">
<i class="fas fa-user-tie"></i>
<span><?php echo htmlspecialchars($course['instructor_name']); ?></span>
</div>
<?php if (isset($course['duration'])): ?>
<div class="meta-item">
<i class="far fa-clock"></i>
<span><?php echo htmlspecialchars($course['duration']); ?></span>
</div>
<?php endif; ?>
<div class="meta-item">
<i class="fas fa-user-graduate"></i>
<span><?php echo intval($course['student_count']); ?> students</span>
</div>
<div class="meta-item">
<div class="course-rating">
<?php
$rating = isset($course['avg_rating']) ? floatval($course['avg_rating']) : 0;
$full_stars = floor($rating);
$half_star = $rating - $full_stars >= 0.5;
$empty_stars = 5 - $full_stars - ($half_star ? 1 : 0);
for ($i = 0; $i < $full_stars; $i++): ?>
<i class="fas fa-star"></i>
<?php endfor;
if ($half_star): ?>
<i class="fas fa-star-half-alt"></i>
<?php endif;
for ($i = 0; $i < $empty_stars; $i++): ?>
<i class="far fa-star"></i>
<?php endfor; ?>
<span class="rating-text"><?php echo number_format($rating, 1); ?></span>
<span class="rating-count">(<?php echo intval($course['review_count']); ?> reviews)</span>
</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['discount_price']) && $course['discount_price'] > 0): ?>
<span class="original-price">$<?php echo number_format($course['price'], 2); ?></span>
<span class="discount-price">$<?php echo number_format($course['discount_price'], 2); ?></span>
<?php elseif (isset($course['price']) && $course['price'] > 0): ?>
<span class="current-price">$<?php echo number_format($course['price'], 2); ?></span>
<?php else: ?>
<span class="free-price">Free</span>
<?php endif; ?>
</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>
<button class="btn btn-outline-primary btn-lg btn-block wishlist-btn">
<i class="far fa-heart me-2"></i> Add to Wishlist
</button>
</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;
}
.course-banner-card .original-price {
text-decoration: line-through;
color: #999;
margin-right: 10px;
font-size: 1.2rem;
}
.course-banner-card .discount-price,
.course-banner-card .current-price {
color: var(--primary-color);
font-size: 2rem;
font-weight: 700;
}
.course-banner-card .free-price {
color: #10b981;
font-size: 2rem;
font-weight: 700;
}
.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;
}
}
/* Redesigned UI Elements Styles */
/* Overview Tab Redesign */
.overview-header {
display: flex;
align-items: center;
margin-bottom: 25px;
position: relative;
}
.overview-badge {
position: absolute;
top: -15px;
left: 0;
}
.badge.bg-primary-soft {
background-color: rgba(79, 70, 229, 0.1);
color: var(--primary-color);
font-weight: 600;
padding: 6px 12px;
border-radius: 20px;
font-size: 0.8rem;
letter-spacing: 0.5px;
}
.course-overview h3 {
margin-top: 15px;
font-size: 1.75rem;
font-weight: 700;
position: relative;
padding-bottom: 15px;
border-bottom: 2px solid #f3f4f6;
width: 100%;
}
.course-overview h3:after {
content: '';
position: absolute;
bottom: -2px;
left: 0;
width: 80px;
height: 2px;
background-color: var(--primary-color);
}
.course-description {
font-size: 1.05rem;
line-height: 1.8;
color: #4b5563;
margin-bottom: 30px;
}
/* Tags Redesign */
.tags-header {
display: flex;
align-items: center;
margin-bottom: 20px;
}
.tags-header i {
font-size: 1.2rem;
color: var(--primary-color);
margin-right: 10px;
}
.tags-header h4 {
font-size: 1.3rem;
font-weight: 600;
margin: 0;
color: #374151;
}
.tags-container {
display: flex;
flex-wrap: wrap;
gap: 12px;
}
.tag-pill {
display: flex;
align-items: center;
padding: 8px 16px;
background-color: #f9fafb;
border: 1px solid #e5e7eb;
border-radius: 30px;
color: #4b5563;
font-size: 0.9rem;
transition: all 0.3s ease;
text-decoration: none;
}
.tag-pill:hover {
background-color: var(--primary-color);
color: white;
transform: translateY(-3px);
box-shadow: 0 4px 12px rgba(79, 70, 229, 0.2);
}
.tag-icon {
display: flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
background-color: rgba(79, 70, 229, 0.1);
border-radius: 50%;
margin-right: 8px;
color: var(--primary-color);
}
.tag-pill:hover .tag-icon {
background-color: rgba(255, 255, 255, 0.2);
color: white;
}
.tag-text {
font-weight: 500;
}
/* Pricing Card Redesign */
.course-pricing-card {
position: relative;
overflow: visible;
border-radius: 16px;
border: 1px solid #e5e7eb;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
transition: all 0.3s ease;
}
.course-pricing-card:hover {
transform: translateY(-10px);
box-shadow: 0 20px 35px rgba(0, 0, 0, 0.1);
}
.pricing-badge {
position: absolute;
top: -12px;
right: 20px;
background: linear-gradient(135deg, #ff4e50, #f9d423);
color: white;
padding: 5px 15px;
font-size: 0.8rem;
font-weight: 700;
border-radius: 20px;
box-shadow: 0 4px 12px rgba(249, 212, 35, 0.3);
z-index: 10;
}
.current-price {
font-size: 2.75rem;
font-weight: 800;
color: #1e3a8a;
letter-spacing: -1px;
}
.access-period {
margin-bottom: 25px;
padding-bottom: 20px;
border-bottom: 1px dashed #e5e7eb;
font-size: 1rem;
color: #4b5563;
}
.access-period i {
color: #10b981;
margin-right: 8px;
}
.pricing-features {
margin: 20px 0;
padding: 15px 0;
border-bottom: 1px dashed #e5e7eb;
}
.pricing-features .feature-item {
display: flex;
align-items: center;
margin-bottom: 12px;
font-size: 0.95rem;
color: #4b5563;
}
.pricing-features .feature-item:last-child {
margin-bottom: 0;
}
.pricing-features .feature-item i {
color: #10b981;
margin-right: 10px;
font-size: 1rem;
}
.btn-primary.enroll-btn {
background: linear-gradient(135deg, #4f46e5, #3730a3);
border: none;
font-weight: 600;
padding: 12px 24px;
box-shadow: 0 8px 15px rgba(79, 70, 229, 0.2);
transition: all 0.3s ease;
}
.btn-primary.enroll-btn:hover {
transform: translateY(-3px);
box-shadow: 0 12px 20px rgba(79, 70, 229, 0.3);
}
.btn-outline-primary.wishlist-btn {
font-weight: 600;
border-width: 2px;
padding: 12px 24px;
transition: all 0.3s ease;
}
.btn-outline-primary.wishlist-btn:hover {
background-color: rgba(79, 70, 229, 0.05);
transform: translateY(-3px);
}
.money-back {
display: flex;
align-items: center;
justify-content: center;
padding: 15px 0 5px;
font-size: 0.95rem;
color: #4b5563;
font-weight: 500;
}
.money-back i {
color: #facc15;
margin-right: 10px;
font-size: 1.1rem;
}
/* Course Stats Card Redesign */
.course-stats-card {
border-radius: 16px;
overflow: hidden;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
border: 1px solid #e5e7eb;
}
.stats-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 0 15px;
border-bottom: 2px solid #f3f4f6;
margin-bottom: 20px;
}
.course-code {
font-size: 0.85rem;
font-weight: 600;
color: #6b7280;
background-color: #f3f4f6;
padding: 4px 10px;
border-radius: 6px;
}
.stats-item {
padding: 15px 0;
border-bottom: 1px solid #f3f4f6;
transition: all 0.3s ease;
}
.stats-item:hover {
background-color: #f9fafb;
}
.stats-item.highlight {
background-color: rgba(79, 70, 229, 0.05);
}
.stats-icon {
width: 46px;
height: 46px;
display: flex;
align-items: center;
justify-content: center;
background-color: #f3f4f6;
border-radius: 12px;
margin-right: 15px;
transition: all 0.3s ease;
}
.stats-item:hover .stats-icon {
background-color: rgba(79, 70, 229, 0.1);
}
.stats-label {
font-size: 0.9rem;
color: #6b7280;
margin-bottom: 5px;
}
.stats-value {
font-size: 1.1rem;
font-weight: 700;
color: #1f2937;
}
/* Course Tags Card Redesign */
.course-tags-card {
border-radius: 16px;
overflow: hidden;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
border: 1px solid #e5e7eb;
}
.course-tag {
display: inline-flex;
align-items: center;
background-color: #f3f4f6;
color: #4b5563;
padding: 8px 16px;
border-radius: 8px;
font-size: 0.9rem;
font-weight: 500;
transition: all 0.3s ease;
text-decoration: none;
margin: 0 8px 8px 0;
}
.course-tag:hover {
background-color: var(--primary-color);
color: white;
transform: translateY(-3px);
box-shadow: 0 4px 12px rgba(79, 70, 229, 0.2);
}
.course-tag i {
font-size: 0.95rem;
color: var(--primary-color);
transition: all 0.3s ease;
}
.course-tag:hover i {
color: white;
}
/* Additional UI Enhancements */
.badge.bg-primary-soft {
background-color: rgba(79, 70, 229, 0.1);
color: var(--primary-color);
font-weight: 600;
padding: 6px 12px;
border-radius: 20px;
}
.tags-header {
display: flex;
align-items: center;
margin-bottom: 20px;
}
.tags-header i {
color: var(--primary-color);
margin-right: 10px;
}
.tag-pill {
display: flex;
align-items: center;
padding: 8px 16px;
background-color: #f9fafb;
border: 1px solid #e5e7eb;
border-radius: 30px;
color: #4b5563;
transition: all 0.3s ease;
text-decoration: none;
}
.tag-pill:hover {
background-color: var(--primary-color);
color: white;
transform: translateY(-3px);
}
.tag-icon {
display: flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
background-color: rgba(79, 70, 229, 0.1);
border-radius: 50%;
margin-right: 8px;
color: var(--primary-color);
}
.pricing-badge {
position: absolute;
top: -12px;
right: 20px;
background: linear-gradient(135deg, #ff4e50, #f9d423);
color: white;
padding: 5px 15px;
font-weight: 700;
border-radius: 20px;
box-shadow: 0 4px 12px rgba(249, 212, 35, 0.3);
z-index: 10;
}
.pricing-features {
margin: 20px 0;
padding: 15px 0;
border-bottom: 1px dashed #e5e7eb;
}
.pricing-features .feature-item {
display: flex;
align-items: center;
margin-bottom: 12px;
}
.pricing-features .feature-item i {
color: #10b981;
margin-right: 10px;
}
.stats-header {
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 2px solid #f3f4f6;
margin-bottom: 20px;
padding-bottom: 15px;
}
.course-code {
font-weight: 600;
color: #6b7280;
background-color: #f3f4f6;
padding: 4px 10px;
border-radius: 6px;
}
.stats-item.highlight {
background-color: rgba(79, 70, 229, 0.05);
}
</style>
<!-- Course Details Section -->
<section class="course-details-section section-padding">
<div class="container">
<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-tabs" id="courseTab" role="tablist">
<li class="nav-item" role="presentation">
<button class="nav-link active" id="overview-tab" data-bs-toggle="tab" data-bs-target="#overview" type="button" role="tab" aria-controls="overview" aria-selected="true">Overview</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="curriculum-tab" data-bs-toggle="tab" data-bs-target="#curriculum" type="button" role="tab" aria-controls="curriculum" aria-selected="false">Curriculum</button>
</li>
<?php if (!empty($course['instructor_name'])): ?>
<li class="nav-item" role="presentation">
<button class="nav-link" id="instructor-tab" data-bs-toggle="tab" data-bs-target="#instructor" type="button" role="tab" aria-controls="instructor" aria-selected="false">Instructor</button>
</li>
<?php endif; ?>
<li class="nav-item" role="presentation">
<button class="nav-link" id="reviews-tab" data-bs-toggle="tab" data-bs-target="#reviews" type="button" role="tab" aria-controls="reviews" aria-selected="false">Reviews</button>
</li>
</ul>
<div class="tab-content" id="courseTabContent">
<!-- Overview Tab -->
<div class="tab-pane fade show active" id="overview" role="tabpanel" aria-labelledby="overview-tab">
<div class="course-overview">
<div class="overview-header">
<div class="overview-badge">
<span class="badge bg-primary-soft">Overview</span>
</div>
<h3>Course Description</h3>
</div>
<div class="course-description">
<?php echo nl2br(htmlspecialchars($course['description'] ?? 'guggj')); ?>
</div>
<?php if (!empty($course['tags']) || true): ?>
<div class="course-tags mt-4">
<div class="tags-header">
<i class="fas fa-tags"></i>
<h4>Course Tags</h4>
</div>
<div class="tags-container">
<a href="courses.php?tag=web+development" class="tag-pill">
<span class="tag-icon"><i class="fas fa-code"></i></span>
<span class="tag-text">web development</span>
</a>
<a href="courses.php?tag=html" class="tag-pill">
<span class="tag-icon"><i class="fab fa-html5"></i></span>
<span class="tag-text">html</span>
</a>
<a href="courses.php?tag=ms+office" class="tag-pill">
<span class="tag-icon"><i class="fas fa-file-word"></i></span>
<span class="tag-text">ms office</span>
</a>
</div>
</div>
<?php endif; ?>
<?php if (!empty($course['what_youll_learn'])): ?>
<div class="course-features mt-4">
<h4>What You'll Learn</h4>
<div class="row">
<?php
$features = explode("\n", $course['what_youll_learn']);
foreach ($features as $feature):
$feature = trim($feature);
if (!empty($feature)):
?>
<div class="col-md-6">
<div class="feature-item">
<i class="fas fa-check-circle"></i>
<span><?php echo htmlspecialchars($feature); ?></span>
</div>
</div>
<?php
endif;
endforeach;
?>
</div>
</div>
<?php endif; ?>
<?php if (!empty($course['requirements'])): ?>
<div class="course-requirements mt-4">
<h4>Requirements</h4>
<ul class="requirements-list">
<?php
$requirements = explode("\n", $course['requirements']);
foreach ($requirements as $requirement):
$requirement = trim($requirement);
if (!empty($requirement)):
?>
<li>
<i class="fas fa-arrow-circle-right"></i>
<span><?php echo htmlspecialchars($requirement); ?></span>
</li>
<?php
endif;
endforeach;
?>
</ul>
</div>
<?php endif; ?>
</div>
</div>
<!-- Curriculum Tab -->
<div class="tab-pane fade" id="curriculum" role="tabpanel" aria-labelledby="curriculum-tab">
<div class="course-curriculum">
<h3>Course Content</h3>
<?php if ($curriculum_result && mysqli_num_rows($curriculum_result) > 0): ?>
<div class="accordion" id="curriculumAccordion">
<?php
$current_section = '';
$section_count = 0;
$lesson_count = 0;
while ($item = mysqli_fetch_assoc($curriculum_result)) {
if ($item['type'] == 'section') {
$section_count++;
// Close previous section if exists
if (!empty($current_section)) {
echo '</div></div></div>';
}
// Start new section
$current_section = $item['title'];
?>
<div class="accordion-item">
<h2 class="accordion-header" id="heading<?php echo $section_count; ?>">
<button class="accordion-button <?php echo ($section_count > 1) ? 'collapsed' : ''; ?>" type="button" data-bs-toggle="collapse" data-bs-target="#collapse<?php echo $section_count; ?>" aria-expanded="<?php echo ($section_count == 1) ? 'true' : 'false'; ?>" aria-controls="collapse<?php echo $section_count; ?>">
<?php echo $item['title']; ?>
</button>
</h2>
<div id="collapse<?php echo $section_count; ?>" class="accordion-collapse collapse <?php echo ($section_count == 1) ? 'show' : ''; ?>" aria-labelledby="heading<?php echo $section_count; ?>" data-bs-parent="#curriculumAccordion">
<div class="accordion-body">
<?php
} else {
$lesson_count++;
?>
<div class="curriculum-lesson">
<div class="lesson-info">
<span class="lesson-icon">
<?php if ($item['content_type'] == 'video'): ?>
<i class="fas fa-play-circle"></i>
<?php elseif ($item['content_type'] == 'document'): ?>
<i class="fas fa-file-alt"></i>
<?php elseif ($item['content_type'] == 'quiz'): ?>
<i class="fas fa-question-circle"></i>
<?php else: ?>
<i class="fas fa-book"></i>
<?php endif; ?>
</span>
<span class="lesson-title"><?php echo $item['title']; ?></span>
</div>
<div class="lesson-meta">
<?php if (!empty($item['duration'])): ?>
<span class="lesson-duration"><i class="fas fa-clock"></i> <?php echo $item['duration']; ?></span>
<?php endif; ?>
<?php if ($item['is_preview'] == 1): ?>
<span class="lesson-preview"><i class="fas fa-eye"></i> Preview</span>
<?php endif; ?>
</div>
</div>
<?php
}
}
// Close last section if exists
if (!empty($current_section)) {
echo '</div></div></div>';
}
?>
</div>
<div class="curriculum-summary">
<div class="row">
<div class="col-md-4">
<div class="summary-item">
<i class="fas fa-book"></i>
<div class="summary-content">
<h4><?php echo $section_count; ?></h4>
<p>Sections</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="summary-item">
<i class="fas fa-list"></i>
<div class="summary-content">
<h4><?php echo $lesson_count; ?></h4>
<p>Lessons</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="summary-item">
<i class="fas fa-clock"></i>
<div class="summary-content">
<h4><?php echo $course['duration']; ?></h4>
<p>Duration</p>
</div>
</div>
</div>
</div>
</div>
<?php else: ?>
<div class="alert alert-info">
<p>Curriculum details will be updated soon.</p>
</div>
<?php endif; ?>
</div>
</div>
<!-- Instructor Tab -->
<?php if (!empty($course['instructor_name'])): ?>
<div class="tab-pane fade" id="instructor" role="tabpanel" aria-labelledby="instructor-tab">
<div class="course-instructor">
<h3>About the Instructor</h3>
<div class="instructor-profile">
<div class="instructor-image">
<img src="<?php echo !empty($course['instructor_image']) ? $course['instructor_image'] : 'assets/img/instructors/default.jpg'; ?>" alt="<?php echo $course['instructor_name']; ?>">
</div>
<div class="instructor-info">
<h4><?php echo $course['instructor_name']; ?></h4>
<p class="instructor-expertise"><?php echo $course['instructor_expertise']; ?></p>
<div class="instructor-bio">
<?php echo nl2br($course['instructor_bio']); ?>
</div>
</div>
</div>
</div>
</div>
<?php endif; ?>
<!-- Reviews Tab -->
<div class="tab-pane fade" id="reviews" role="tabpanel" aria-labelledby="reviews-tab">
<div class="course-reviews">
<h3>Student Reviews</h3>
<div class="reviews-summary">
<div class="row align-items-center">
<div class="col-md-4">
<div class="average-rating">
<div class="rating-value"><?php echo number_format($course['avg_rating'], 1); ?></div>
<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>
<div class="rating-count"><?php echo $course['review_count']; ?> Ratings</div>
</div>
</div>
<div class="col-md-8">
<div class="rating-bars">
<?php
for ($i = 5; $i >= 1; $i--) {
try {
$rating_query = "SELECT COUNT(*) as count FROM course_reviews WHERE course_id = '$course_id' AND rating = $i";
$rating_result = mysqli_query($conn, $rating_query);
$rating_data = mysqli_fetch_assoc($rating_result);
$rating_count = $rating_data['count'];
} catch (mysqli_sql_exception $e) {
error_log("Error fetching rating data: " . $e->getMessage());
$rating_count = 0;
}
$rating_percent = ($course['review_count'] > 0) ? ($rating_count / $course['review_count']) * 100 : 0;
?>
<div class="rating-bar-item">
<div class="rating-label"><?php echo $i; ?> Star</div>
<div class="progress">
<div class="progress-bar" role="progressbar" style="width: <?php echo $rating_percent; ?>%" aria-valuenow="<?php echo $rating_percent; ?>" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="rating-percent"><?php echo round($rating_percent); ?>%</div>
</div>
<?php
}
?>
</div>
</div>
</div>
</div>
<div class="reviews-list">
<?php if ($reviews_result && mysqli_num_rows($reviews_result) > 0): ?>
<?php while ($review = mysqli_fetch_assoc($reviews_result)): ?>
<div class="review-item">
<div class="review-author">
<img src="<?php echo !empty($review['student_image']) ? $review['student_image'] : 'assets/img/students/default.jpg'; ?>" alt="<?php echo $review['student_name']; ?>">
<div class="author-info">
<h5><?php echo $review['student_name']; ?></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 class="review-content">
<p><?php echo nl2br($review['review']); ?></p>
</div>
</div>
<?php endwhile; ?>
<?php if ($course['review_count'] > 5): ?>
<div class="text-center mt-4">
<a href="#" class="btn btn-outline-primary">View All Reviews</a>
</div>
<?php endif; ?>
<?php else: ?>
<div class="alert alert-info">
<p>No reviews yet. Be the first to review this course!</p>
</div>
<?php endif; ?>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-4">
<!-- Course Statistics Sidebar -->
<div class="course-sidebar">
<div class="course-pricing-card">
<div class="pricing-badge">Most Popular</div>
<div class="pricing-header">
<div class="course-price">
<span class="current-price">$7,999.00</span>
</div>
<div class="access-period">
<i class="fas fa-infinity"></i> Full lifetime access
</div>
</div>
<div class="pricing-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>
<button class="btn btn-outline-primary btn-lg btn-block wishlist-btn">
<i class="far fa-heart me-2"></i> Add to Wishlist
</button>
</div>
<div class="pricing-features">
<div class="feature-item">
<i class="fas fa-check-circle"></i>
<span>24/7 Instructor Support</span>
</div>
<div class="feature-item">
<i class="fas fa-check-circle"></i>
<span>Downloadable Resources</span>
</div>
<div class="feature-item">
<i class="fas fa-check-circle"></i>
<span>Access on Mobile & Desktop</span>
</div>
</div>
<div class="money-back">
<i class="fas fa-shield-alt"></i>
<span>30-Day Money-Back Guarantee</span>
</div>
</div>
<div class="course-stats-card">
<div class="stats-header">
<h4 class="sidebar-title">Course Details</h4>
<span class="course-code">ADCA-<?php echo $course['id']; ?></span>
</div>
<ul class="course-stats-list">
<li class="stats-item">
<div class="stats-icon">
<i class="fas fa-users"></i>
</div>
<div class="stats-info">
<span class="stats-label">Students</span>
<span class="stats-value">0</span>
</div>
</li>
<li class="stats-item highlight">
<div class="stats-icon">
<i class="far fa-clock"></i>
</div>
<div class="stats-info">
<span class="stats-label">Duration</span>
<span class="stats-value">12 months</span>
</div>
</li>
<li class="stats-item">
<div class="stats-icon">
<i class="fas fa-book"></i>
</div>
<div class="stats-info">
<span class="stats-label">Lessons</span>
<span class="stats-value">0</span>
</div>
</li>
<li class="stats-item highlight">
<div class="stats-icon">
<i class="fas fa-signal"></i>
</div>
<div class="stats-info">
<span class="stats-label">Level</span>
<span class="stats-value">Advanced</span>
</div>
</li>
<li class="stats-item">
<div class="stats-icon">
<i class="fas fa-globe"></i>
</div>
<div class="stats-info">
<span class="stats-label">Language</span>
<span class="stats-value">English</span>
</div>
</li>
<li class="stats-item highlight">
<div class="stats-icon">
<i class="fas fa-certificate"></i>
</div>
<div class="stats-info">
<span class="stats-label">Certificate</span>
<span class="stats-value">No</span>
</div>
</li>
</ul>
</div>
<div class="course-tags-card">
<div class="tags-header">
<h4 class="sidebar-title">
<i class="fas fa-tags me-2"></i>Course Tags
</h4>
</div>
<div class="tags-cloud">
<a href="courses.php?tag=web+development" class="course-tag">
<i class="fas fa-code me-1"></i>web development
</a>
<a href="courses.php?tag=html" class="course-tag">
<i class="fab fa-html5 me-1"></i>html
</a>
<a href="courses.php?tag=ms+office" class="course-tag">
<i class="fas fa-file-word me-1"></i>ms office
</a>
</div>
</div>
<div class="share-card">
<h4 class="sidebar-title">Share This Course</h4>
<div class="social-share-buttons">
<a href="https://www.facebook.com/sharer/sharer.php?u=<?php echo urlencode("https://$_SERVER[HTTP_HOST]$_SERVER[REQUEST_URI]"); ?>" target="_blank" class="share-btn facebook">
<i class="fab fa-facebook-f"></i>
</a>
<a href="https://twitter.com/intent/tweet?text=<?php echo urlencode("Check out this course: " . $course['title']); ?>&url=<?php echo urlencode("https://$_SERVER[HTTP_HOST]$_SERVER[REQUEST_URI]"); ?>" target="_blank" class="share-btn twitter">
<i class="fab fa-twitter"></i>
</a>
<a href="https://www.linkedin.com/shareArticle?mini=true&url=<?php echo urlencode("https://$_SERVER[HTTP_HOST]$_SERVER[REQUEST_URI]"); ?>&title=<?php echo urlencode($course['title']); ?>" target="_blank" class="share-btn linkedin">
<i class="fab fa-linkedin-in"></i>
</a>
<a href="mailto:?subject=<?php echo urlencode("Check out this course: " . $course['title']); ?>&body=<?php echo urlencode("I thought you might be interested in this course: https://$_SERVER[HTTP_HOST]$_SERVER[REQUEST_URI]"); ?>" class="share-btn email">
<i class="fas fa-envelope"></i>
</a>
</div>
</div>
</div>
</div>
</div>
<!-- Related Courses -->
<?php if ($related_result && mysqli_num_rows($related_result) > 0): ?>
<div class="related-courses">
<h3 class="section-title">Related Courses</h3>
<div class="row">
<?php while ($related = mysqli_fetch_assoc($related_result)): ?>
<div class="col-lg-4 col-md-6">
<div class="course-card">
<div class="course-image">
<img src="<?php echo !empty($related['image']) ? $related['image'] : 'assets/img/courses/default.jpg'; ?>" alt="<?php echo $related['title']; ?>">
<span class="course-category"><?php echo $related['category']; ?></span>
</div>
<div class="course-content">
<h3 class="course-title"><a href="course-details.php?id=<?php echo $related['id']; ?>"><?php echo $related['title']; ?></a></h3>
<div class="course-rating">
<?php
$rating = round($related['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>';
}
}
?>
<span>(<?php echo $related['review_count']; ?> Reviews)</span>
</div>
<div class="course-price">
₹<?php echo number_format($related['price']); ?>
<?php if (!empty($related['original_price']) && $related['original_price'] > $related['price']): ?>
<small>₹<?php echo number_format($related['original_price']); ?></small>
<?php endif; ?>
</div>
<div class="course-footer">
<?php if (!empty($related['instructor_name'])): ?>
<div class="course-instructor">
<div class="instructor-name"><?php echo $related['instructor_name']; ?></div>
</div>
<?php endif; ?>
<a href="course-details.php?id=<?php echo $related['id']; ?>" class="course-btn">Details <i class="fas fa-arrow-right"></i></a>
</div>
</div>
</div>
</div>
<?php endwhile; ?>
</div>
</div>
<?php endif; ?>
</div>
</section>
<!-- End Course Details Section -->
<!-- CTA Section -->
<section class="enhanced-cta-section">
<div class="cta-particles"></div>
<div class="container">
<div class="row justify-content-center">
<div class="col-lg-10">
<div class="enhanced-cta-content">
<h2 class="cta-title">Ready to Start Your Learning Journey?</h2>
<p class="cta-description">Enroll in our courses today and take the first step towards a successful career in the tech industry.</p>
<div class="cta-features">
<div class="feature-item">
<div class="feature-icon">
<i class="fas fa-certificate"></i>
</div>
<div class="feature-text">Industry-recognized certification</div>
</div>
<div class="feature-item">
<div class="feature-icon">
<i class="fas fa-video"></i>
</div>
<div class="feature-text">HD video lessons</div>
</div>
<div class="feature-item">
<div class="feature-icon">
<i class="fas fa-headset"></i>
</div>
<div class="feature-text">24/7 expert support</div>
</div>
</div>
<div class="cta-actions">
<a href="enroll/enroll.php?course_id=<?php echo $course['id']; ?>" class="btn btn-cta-primary">
Enroll Now <i class="fas fa-arrow-right ms-2"></i>
</a>
<a href="contact.php" class="btn btn-cta-secondary">
Have Questions? Contact Us
</a>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- End CTA Section -->
<style>
/* Enhanced CTA Section */
.enhanced-cta-section {
position: relative;
padding: 80px 0;
background: linear-gradient(135deg, #4f46e5 0%, #2d3748 100%);
overflow: hidden;
color: #fff;
margin-top: 80px;
}
.enhanced-cta-section::before {
content: '';
position: absolute;
top: -80px;
right: -80px;
width: 200px;
height: 200px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.1);
z-index: 1;
}
.enhanced-cta-section::after {
content: '';
position: absolute;
bottom: -100px;
left: -100px;
width: 300px;
height: 300px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.05);
z-index: 1;
}
.cta-particles {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
}
.enhanced-cta-content {
position: relative;
z-index: 2;
text-align: center;
padding: 40px;
background-color: rgba(255, 255, 255, 0.05);
backdrop-filter: blur(10px);
border-radius: 20px;
border: 1px solid rgba(255, 255, 255, 0.1);
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
}
.cta-title {
font-size: 2.5rem;
font-weight: 700;
margin-bottom: 20px;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.cta-description {
font-size: 1.25rem;
margin-bottom: 30px;
max-width: 800px;
margin-left: auto;
margin-right: auto;
opacity: 0.9;
}
.cta-features {
display: flex;
justify-content: center;
margin-bottom: 40px;
flex-wrap: wrap;
gap: 20px;
}
.feature-item {
display: flex;
align-items: center;
background-color: rgba(255, 255, 255, 0.1);
padding: 12px 25px;
border-radius: 50px;
border: 1px solid rgba(255, 255, 255, 0.1);
transition: all 0.3s ease;
}
.feature-item:hover {
transform: translateY(-3px);
background-color: rgba(255, 255, 255, 0.15);
}
.feature-icon {
margin-right: 10px;
font-size: 1.1rem;
}
.feature-text {
font-size: 0.95rem;
font-weight: 500;
}
.cta-actions {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 20px;
}
.btn-cta-primary {
padding: 12px 30px;
background-color: #fff;
color: var(--primary-color);
font-weight: 600;
border-radius: 50px;
border: 2px solid #fff;
font-size: 1.1rem;
transition: all 0.3s ease;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
}
.btn-cta-primary:hover {
background-color: transparent;
color: #fff;
transform: translateY(-5px);
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
}
.btn-cta-secondary {
padding: 12px 30px;
background-color: transparent;
color: #fff;
font-weight: 600;
border-radius: 50px;
border: 2px solid rgba(255, 255, 255, 0.3);
font-size: 1.1rem;
transition: all 0.3s ease;
}
.btn-cta-secondary:hover {
background-color: rgba(255, 255, 255, 0.1);
border-color: #fff;
transform: translateY(-5px);
color: #fff;
}
@media (max-width: 768px) {
.enhanced-cta-section {
padding: 60px 0;
}
.cta-title {
font-size: 2rem;
}
.cta-description {
font-size: 1.1rem;
}
.cta-features {
flex-direction: column;
align-items: center;
gap: 15px;
}
.cta-actions {
flex-direction: column;
align-items: center;
}
.btn-cta-primary, .btn-cta-secondary {
width: 100%;
text-align: center;
}
}
</style>
<?php
// Include footer
include 'includes/footer.php';
?>
