<?php
/**
 * Courses Listing Page — Gmind Institute
 *
 * Full courses listing with search, category filters,
 * course cards grid, and pagination.
 *
 * Expected PHP variables:
 *   $courses       — array of course records
 *   $categories    — array of distinct categories
 *   $currentCat    — string current category filter (optional)
 *   $searchQuery   — string search query (optional)
 *   $pagination    — array with 'current', 'total', 'last', 'prev', 'next' keys
 *   $csrfToken     — CSRF token string
 *   $currentPage   — string 'courses'
 *   $title         — page title
 */

$courses     = $courses     ?? [];
$categories  = $categories  ?? ['computer', 'accounting', 'programming', 'design'];
$currentCat  = $currentCat  ?? 'all';
$searchQuery = $searchQuery ?? '';
$pagination  = $pagination  ?? ['current' => 1, 'total' => 1, 'last' => 1, 'prev' => null, 'next' => null];
?>

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

<!-- ============================================================
     Page Banner
     ============================================================ -->
<section class="page-banner" aria-label="Page heading">
    <div class="container">
        <h1>Our Courses</h1>
        <p>Explore our wide range of industry-recognised computer courses designed to boost your career</p>
        <nav class="breadcrumb" aria-label="Breadcrumb">
            <a href="<?= url('/') ?>">Home</a>
            <span aria-hidden="true">/</span>
            <span>Courses</span>
        </nav>
    </div>
</section>

<!-- ============================================================
     Courses Listing Section
     ============================================================ -->
<section class="courses-listing-section section-offwhite" aria-label="All courses">
    <div class="container">
        <!-- Search Bar -->
        <div class="courses-search-bar">
            <form method="GET" action="<?= url('/courses') ?>" role="search" aria-label="Search courses">
                <div class="search-input-wrapper">
                    <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
                    <input type="text" name="q" placeholder="Search courses..." value="<?= htmlspecialchars($searchQuery, ENT_QUOTES, 'UTF-8') ?>" aria-label="Search courses">
                </div>
                <button type="submit" class="btn-primary">Search</button>
            </form>
        </div>

        <div class="courses-layout">
            <!-- Filter Sidebar -->
            <aside class="courses-sidebar" aria-label="Course filters">
                <h3>Categories</h3>
                <ul class="courses-filter-list">
                    <li>
                        <a href="<?= url('/courses') ?>" class="<?= $currentCat === 'all' ? 'active' : '' ?>">
                            All Courses
                        </a>
                    </li>
                    <?php foreach ($categories as $cat): ?>
                    <li>
                        <a href="<?= url('/courses') ?>?category=<?= htmlspecialchars($cat, ENT_QUOTES, 'UTF-8') ?>" class="<?= $currentCat === $cat ? 'active' : '' ?>">
                            <?= htmlspecialchars(ucfirst($cat), ENT_QUOTES, 'UTF-8') ?>
                        </a>
                    </li>
                    <?php endforeach; ?>
                </ul>
            </aside>

            <!-- Course Cards Grid -->
            <div class="courses-main">
                <!-- Filter Tabs (visible on mobile) -->
                <div class="course-filters" role="tablist" aria-label="Filter courses by category">
                    <a href="<?= url('/courses') ?>" class="course-filter-btn<?= $currentCat === 'all' ? ' active' : '' ?>" role="tab" aria-selected="<?= $currentCat === 'all' ? 'true' : 'false' ?>">All</a>
                    <?php foreach ($categories as $cat): ?>
                    <a href="<?= url('/courses') ?>?category=<?= htmlspecialchars($cat, ENT_QUOTES, 'UTF-8') ?>" class="course-filter-btn<?= $currentCat === $cat ? ' active' : '' ?>" role="tab" aria-selected="<?= $currentCat === $cat ? 'true' : 'false' ?>"><?= htmlspecialchars(ucfirst($cat), ENT_QUOTES, 'UTF-8') ?></a>
                    <?php endforeach; ?>
                </div>

                <?php if (!empty($courses)): ?>
                <div class="courses-grid courses-grid-3">
                    <?php foreach ($courses as $course): ?>
                    <div class="course-card" data-category="<?= htmlspecialchars($course['category'] ?? 'computer', ENT_QUOTES, 'UTF-8') ?>">
                        <div class="course-card-image">
                            <img
                                src="<?= htmlspecialchars($course['image'] ?? '/images/course-default.jpg', ENT_QUOTES, 'UTF-8') ?>"
                                alt="<?= htmlspecialchars($course['name'] ?? 'Course', ENT_QUOTES, 'UTF-8') ?>"
                                loading="lazy"
                            >
                            <span class="course-card-badge badge-<?= htmlspecialchars($course['category'] ?? 'computer', ENT_QUOTES, 'UTF-8') ?>">
                                <?= htmlspecialchars(ucfirst($course['category'] ?? 'Course'), ENT_QUOTES, 'UTF-8') ?>
                            </span>
                        </div>
                        <div class="course-card-body">
                            <h3 class="course-card-title"><?= htmlspecialchars($course['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($course['duration'] ?? 'N/A', ENT_QUOTES, 'UTF-8') ?>
                                </span>
                                <span class="fee">
                                    <?php
                                        $fee = (float) ($course['fee'] ?? 0);
                                        echo $fee > 0 ? '₹' . number_format($fee, 0) : 'Contact Us';
                                    ?>
                                </span>
                            </div>
                            <?php if (!empty($course['description'])): ?>
                            <p class="course-card-excerpt">
                                <?= htmlspecialchars(mb_substr(strip_tags($course['description']), 0, 120), ENT_QUOTES, 'UTF-8') ?><?= mb_strlen(strip_tags($course['description'])) > 120 ? '...' : '' ?>
                            </p>
                            <?php endif; ?>
                            <a href="<?= url('/courses/' . $course['id'] ?? $course['slug'] ?? '#') ?>" class="btn-enroll">View Details</a>
                        </div>
                    </div>
                    <?php endforeach; ?>
                </div>

                <!-- Pagination -->
                <?php if (($pagination['last'] ?? 1) > 1): ?>
                <nav class="pagination" aria-label="Course listing pagination">
                    <?php if ($pagination['prev'] ?? null): ?>
                    <a href="<?= url('/courses') ?>?page=<?= (int) $pagination['prev'] ?><?= $currentCat !== 'all' ? '&category=' . htmlspecialchars($currentCat, ENT_QUOTES, 'UTF-8') : '' ?><?= $searchQuery ? '&q=' . htmlspecialchars($searchQuery, ENT_QUOTES, 'UTF-8') : '' ?>" class="pagination-btn" aria-label="Previous page">
                        <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="15 18 9 12 15 6"/></svg>
                        Prev
                    </a>
                    <?php endif; ?>

                    <?php for ($i = 1; $i <= $pagination['last']; $i++): ?>
                    <?php if ($i === (int) $pagination['current']): ?>
                    <span class="pagination-btn active" aria-current="page"><?= $i ?></span>
                    <?php else: ?>
                    <a href="<?= url('/courses') ?>?page=<?= $i ?><?= $currentCat !== 'all' ? '&category=' . htmlspecialchars($currentCat, ENT_QUOTES, 'UTF-8') : '' ?><?= $searchQuery ? '&q=' . htmlspecialchars($searchQuery, ENT_QUOTES, 'UTF-8') : '' ?>" class="pagination-btn"><?= $i ?></a>
                    <?php endif; ?>
                    <?php endfor; ?>

                    <?php if ($pagination['next'] ?? null): ?>
                    <a href="<?= url('/courses') ?>?page=<?= (int) $pagination['next'] ?><?= $currentCat !== 'all' ? '&category=' . htmlspecialchars($currentCat, ENT_QUOTES, 'UTF-8') : '' ?><?= $searchQuery ? '&q=' . htmlspecialchars($searchQuery, ENT_QUOTES, 'UTF-8') : '' ?>" class="pagination-btn" aria-label="Next page">
                        Next
                        <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="9 18 15 12 9 6"/></svg>
                    </a>
                    <?php endif; ?>
                </nav>
                <?php endif; ?>

                <?php else: ?>
                <div class="empty-state">
                    <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 19.5A2.5 2.5 0 016.5 17H20"/><path d="M6.5 2H20v20H6.5A2.5 2.5 0 014 19.5v-15A2.5 2.5 0 016.5 2z"/></svg>
                    <h3>No Courses Found</h3>
                    <p>Try adjusting your search or filter criteria.</p>
                    <a href="<?= url('/courses') ?>" class="btn-primary">View All Courses</a>
                </div>
                <?php endif; ?>
            </div>
        </div>
    </div>
</section>

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