<?php
/**
 * Course Detail Page — Gmind Institute
 *
 * Single course detail with image, description, syllabus,
 * enroll CTA, related courses, and breadcrumb.
 *
 * Expected PHP variables:
 *   $course          — single course record array
 *   $relatedCourses  — array of related course records
 *   $csrfToken       — CSRF token string
 *   $currentPage     — string 'courses'
 *   $title           — page title
 */

$course         = $course         ?? [];
$relatedCourses = $relatedCourses ?? [];

$courseName   = $course['name']        ?? 'Course Not Found';
$courseCat    = $course['category']    ?? 'computer';
$courseDur    = $course['duration']    ?? 'N/A';
$courseFee    = (float) ($course['fee'] ?? 0);
$courseImg    = $course['image']       ?? '/images/course-default.jpg';
$courseDesc   = $course['description'] ?? '';
$courseSyllabus = $course['syllabus']  ?? '';
?>

<?php include __DIR__ . '/../layouts/header.php'; ?>

<!-- ============================================================
     Breadcrumb
     ============================================================ -->
<nav class="breadcrumb-bar" aria-label="Breadcrumb">
    <div class="container">
        <ol class="breadcrumb-list">
            <li><a href="<?= url('/') ?>">Home</a></li>
            <li><a href="<?= url('/courses') ?>">Courses</a></li>
            <li aria-current="page"><?= htmlspecialchars($courseName, ENT_QUOTES, 'UTF-8') ?></li>
        </ol>
    </div>
</nav>

<!-- ============================================================
     Course Detail Section
     ============================================================ -->
<section class="course-detail-section section-white" aria-label="Course details">
    <div class="container">
        <div class="course-detail-layout">
            <!-- Main Content -->
            <div class="course-detail-main">
                <div class="course-detail-image">
                    <img
                        src="<?= htmlspecialchars($courseImg, ENT_QUOTES, 'UTF-8') ?>"
                        alt="<?= htmlspecialchars($courseName, ENT_QUOTES, 'UTF-8') ?>"
                        loading="lazy"
                    >
                </div>

                <div class="course-detail-header">
                    <span class="course-card-badge badge-<?= htmlspecialchars($courseCat, ENT_QUOTES, 'UTF-8') ?>">
                        <?= htmlspecialchars(ucfirst($courseCat), ENT_QUOTES, 'UTF-8') ?>
                    </span>
                    <h1><?= htmlspecialchars($courseName, ENT_QUOTES, 'UTF-8') ?></h1>
                    <div class="course-detail-meta">
                        <span>
                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
                            Duration: <?= htmlspecialchars($courseDur, ENT_QUOTES, 'UTF-8') ?>
                        </span>
                        <span class="fee">
                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><line x1="12" y1="1" x2="12" y2="23"/><path d="M17 5H9.5a3.5 3.5 0 000 7h5a3.5 3.5 0 010 7H6"/></svg>
                            Fee: <?= $courseFee > 0 ? '₹' . number_format($courseFee, 0) : 'Contact Us' ?>
                        </span>
                    </div>
                </div>

                <!-- Description -->
                <?php if (!empty($courseDesc)): ?>
                <div class="course-detail-block">
                    <h2>Course Description</h2>
                    <div class="course-detail-content">
                        <?= $courseDesc // Description may contain HTML from admin ?>
                    </div>
                </div>
                <?php endif; ?>

                <!-- Syllabus -->
                <?php if (!empty($courseSyllabus)): ?>
                <div class="course-detail-block">
                    <h2>Syllabus</h2>
                    <div class="course-syllabus">
                        <?= $courseSyllabus // Syllabus may contain HTML from admin ?>
                    </div>
                </div>
                <?php endif; ?>
            </div>

            <!-- Sidebar -->
            <aside class="course-detail-sidebar">
                <div class="course-sidebar-card">
                    <h3>Course Highlights</h3>
                    <ul class="course-highlights">
                        <li>
                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="20 6 9 17 4 12"/></svg>
                            <?= htmlspecialchars($courseDur, ENT_QUOTES, 'UTF-8') ?> Duration
                        </li>
                        <li>
                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="20 6 9 17 4 12"/></svg>
                            Industry-Recognised Certification
                        </li>
                        <li>
                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="20 6 9 17 4 12"/></svg>
                            Expert Faculty
                        </li>
                        <li>
                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="20 6 9 17 4 12"/></svg>
                            Job Placement Assistance
                        </li>
                        <li>
                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="20 6 9 17 4 12"/></svg>
                            Online Exam Preparation
                        </li>
                    </ul>
                    <div class="course-sidebar-fee">
                        <span class="fee-label">Course Fee</span>
                        <span class="fee-amount"><?= $courseFee > 0 ? '₹' . number_format($courseFee, 0) : 'Contact Us' ?></span>
                    </div>
                    <a href="<?= url('/admission') ?>" class="btn-enroll btn-enroll-scarlet">Enroll Now</a>
                    <p class="course-sidebar-note">Installment facility available. Contact us for details.</p>
                </div>
            </aside>
        </div>
    </div>
</section>

<!-- ============================================================
     Related Courses Section
     ============================================================ -->
<?php if (!empty($relatedCourses)): ?>
<section class="related-courses-section section-offwhite" aria-label="Related courses">
    <div class="container">
        <div class="section-heading">
            <h2>Related Courses</h2>
            <p>You may also be interested in these courses</p>
        </div>

        <div class="courses-grid courses-grid-3">
            <?php foreach ($relatedCourses as $rc): ?>
            <div class="course-card">
                <div class="course-card-image">
                    <img
                        src="<?= htmlspecialchars($rc['image'] ?? '/images/course-default.jpg', ENT_QUOTES, 'UTF-8') ?>"
                        alt="<?= htmlspecialchars($rc['name'] ?? 'Course', ENT_QUOTES, 'UTF-8') ?>"
                        loading="lazy"
                    >
                    <span class="course-card-badge badge-<?= htmlspecialchars($rc['category'] ?? 'computer', ENT_QUOTES, 'UTF-8') ?>">
                        <?= htmlspecialchars(ucfirst($rc['category'] ?? 'Course'), ENT_QUOTES, 'UTF-8') ?>
                    </span>
                </div>
                <div class="course-card-body">
                    <h3 class="course-card-title"><?= htmlspecialchars($rc['name'] ?? 'Course', ENT_QUOTES, 'UTF-8') ?></h3>
                    <div class="course-card-meta">
                        <span>
                            <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
                            <?= htmlspecialchars($rc['duration'] ?? 'N/A', ENT_QUOTES, 'UTF-8') ?>
                        </span>
                        <span class="fee">
                            <?php
                                $rFee = (float) ($rc['fee'] ?? 0);
                                echo $rFee > 0 ? '₹' . number_format($rFee, 0) : 'Contact Us';
                            ?>
                        </span>
                    </div>
                    <a href="<?= url('/courses/' . $rc['id'] ?? $rc['slug'] ?? '#') ?>" class="btn-enroll">View Details</a>
                </div>
            </div>
            <?php endforeach; ?>
        </div>
    </div>
</section>
<?php endif; ?>

<?php include __DIR__ . '/../layouts/footer.php'; ?>
