<?php
/**
 * Career Guides Index View
 * Lists all career guides and offers personal career assessment CTA.
 */
?>
<div class="container py-4">
    <div class="text-center mb-5">
        <span class="badge bg-warning-subtle text-warning rounded-pill px-3 py-2 mb-2 fw-semibold font-outfit text-uppercase">EXPLORE CAREER PATHWAYS</span>
        <h2 class="fw-bold font-outfit text-dark display-6">Career Discovery Center</h2>
        <p class="text-muted mx-auto" style="max-width: 540px;">Discover detailed roadmaps for hundreds of career paths — from engineering to education — and find out what it takes to succeed.</p>
        <a href="<?= APP_URL ?>/career-assessment" class="btn btn-warning rounded-pill px-4 py-2 fw-bold shadow-sm font-outfit mt-3">
            <i class="fa-solid fa-brain me-2"></i>Take Career Assessment
        </a>
    </div>

    <!-- Search Bar -->
    <div class="card border-0 shadow-sm mb-5 p-4 bg-glass">
        <form action="<?= APP_URL ?>/careers" method="GET">
            <div class="row justify-content-center">
                <div class="col-md-8 col-lg-6">
                    <label class="form-label text-xs fw-semibold text-muted">SEARCH CAREERS</label>
                    <div class="input-group">
                        <span class="input-group-text bg-light border-end-0"><i class="fa-solid fa-magnifying-glass text-muted"></i></span>
                        <input type="text" name="search" class="form-control bg-light border-start-0 ps-0" placeholder="e.g. Doctor, Engineer, Lawyer..." value="<?= htmlspecialchars($search ?? '') ?>">
                        <button class="btn btn-primary px-4 font-outfit fw-bold shadow-sm" type="submit">Search</button>
                    </div>
                </div>
            </div>
        </form>
    </div>

    <!-- Category Tabs -->
    <?php if (!empty($categories)): ?>
    <div class="d-flex flex-wrap gap-2 justify-content-center mb-4">
        <a href="<?= APP_URL ?>/careers" class="btn btn-<?= empty($selectedCategory) ? 'primary' : 'outline-secondary' ?> rounded-pill btn-sm px-3 font-outfit fw-bold">All</a>
        <?php foreach ($categories as $cat): ?>
            <a href="<?= APP_URL ?>/careers?category=<?= urlencode($cat) ?>" class="btn btn-<?= ($selectedCategory ?? '') === $cat ? 'primary' : 'outline-secondary' ?> rounded-pill btn-sm px-3 font-outfit fw-bold">
                <?= htmlspecialchars($cat) ?>
            </a>
        <?php endforeach; ?>
    </div>
    <?php endif; ?>

    <!-- Career Cards Grid -->
    <?php if (empty($guides)): ?>
        <div class="text-center py-5">
            <div class="text-6xl mb-3">🔍</div>
            <p class="text-muted">No career guides found. Try a different search or category.</p>
        </div>
    <?php else: ?>
        <div class="row g-4">
            <?php foreach ($guides as $guide): ?>
                <div class="col-md-4 col-sm-6">
                    <a href="<?= APP_URL ?>/careers/<?= urlencode($guide['slug']) ?>" class="card-link text-decoration-none">
                        <div class="card border-0 shadow-sm career-card h-100 card-hover-effect">
                            <div class="card-body p-4">
                                <div class="d-flex align-items-center justify-content-between mb-3">
                                    <div class="badge-icon-box bg-primary-subtle text-primary rounded-circle">
                                        <i class="fa-solid fa-briefcase fs-5"></i>
                                    </div>
                                    <span class="badge bg-warning-subtle text-warning rounded-pill text-xs font-outfit px-3 py-2 text-uppercase fw-semibold"><?= htmlspecialchars($guide['category']) ?></span>
                                </div>
                                <h5 class="fw-bold font-outfit text-dark mb-2"><?= htmlspecialchars($guide['title']) ?></h5>
                                <p class="text-muted text-sm mb-4 line-clamp-2"><?= htmlspecialchars($guide['overview']) ?></p>
                                
                                <div class="d-flex flex-wrap gap-2 text-xs text-muted border-top pt-3">
                                    <div class="d-flex align-items-center me-3">
                                        <i class="fa-solid fa-graduation-cap me-2 text-primary fs-6"></i>
                                        <span><?= htmlspecialchars($guide['education_required'] ?? 'Varies') ?></span>
                                    </div>
                                    <?php if (!empty($guide['avg_salary'])): ?>
                                        <div class="d-flex align-items-center">
                                            <i class="fa-solid fa-money-bill-wave me-2 text-success fs-6"></i>
                                            <span><?= htmlspecialchars($guide['avg_salary']) ?></span>
                                        </div>
                                    <?php endif; ?>
                                </div>
                            </div>
                            <div class="card-footer bg-light border-0 py-3 px-4 d-flex justify-content-between align-items-center">
                                <span class="text-primary font-outfit fw-bold text-sm">View Career Roadmap</span>
                                <i class="fa-solid fa-arrow-right text-primary"></i>
                            </div>
                        </div>
                    </a>
                </div>
            <?php endforeach; ?>
        </div>

        <!-- Pagination -->
        <?php if (($totalPages ?? 1) > 1): ?>
            <nav class="mt-5 d-flex justify-content-center">
                <ul class="pagination pagination-sm gap-1">
                    <?php for ($p = 1; $p <= $totalPages; $p++): ?>
                        <li class="page-item <?= $p == ($currentPage ?? 1) ? 'active' : '' ?>">
                            <a class="page-link rounded-circle border-0 shadow-sm" href="<?= APP_URL ?>/careers?page=<?= $p ?>&search=<?= urlencode($search ?? '') ?>&category=<?= urlencode($selectedCategory ?? '') ?>"><?= $p ?></a>
                        </li>
                    <?php endfor; ?>
                </ul>
            </nav>
        <?php endif; ?>
    <?php endif; ?>
</div>
