<?php
/**
 * Career Guide Detail View
 * Shows a single career roadmap with education path, skills, salary, and related mentors.
 */
?>
<div class="container py-4">
    <!-- Breadcrumb -->
    <nav aria-label="breadcrumb" class="mb-4">
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="<?= APP_URL ?>/careers" class="text-decoration-none text-primary">Careers</a></li>
            <li class="breadcrumb-item active text-muted"><?= htmlspecialchars($guide['title']) ?></li>
        </ol>
    </nav>

    <!-- Hero Banner -->
    <div class="card border-0 shadow-sm mb-5 overflow-hidden">
        <div class="card-body p-5" style="background: linear-gradient(135deg, #0d6efd15, #6610f215);">
            <div class="row align-items-center g-4">
                <div class="col-md-8">
                    <span class="badge bg-warning-subtle text-warning rounded-pill px-3 font-outfit fw-bold text-xs mb-2 text-uppercase"><?= htmlspecialchars($guide['category']) ?></span>
                    <h1 class="fw-bold font-outfit display-6 text-dark"><?= htmlspecialchars($guide['title']) ?></h1>
                    <p class="text-muted lead"><?= htmlspecialchars($guide['overview']) ?></p>
                    <div class="d-flex flex-wrap gap-3 mt-3">
                        <?php if (!empty($guide['avg_salary'])): ?>
                        <div class="stat-pill bg-success-subtle text-success rounded-pill px-3 py-1">
                            <i class="fa-solid fa-money-bill-wave me-1"></i><span class="fw-bold font-outfit"><?= htmlspecialchars($guide['avg_salary']) ?></span>
                        </div>
                        <?php endif; ?>
                        <?php if (!empty($guide['job_outlook'])): ?>
                        <div class="stat-pill bg-info-subtle text-info rounded-pill px-3 py-1">
                            <i class="fa-solid fa-chart-line me-1"></i><span class="fw-bold font-outfit"><?= htmlspecialchars($guide['job_outlook']) ?></span>
                        </div>
                        <?php endif; ?>
                        <div class="stat-pill bg-primary-subtle text-primary rounded-pill px-3 py-1">
                            <i class="fa-solid fa-graduation-cap me-1"></i><span class="fw-bold font-outfit"><?= htmlspecialchars($guide['education_required'] ?? 'Bachelor\'s Degree') ?></span>
                        </div>
                    </div>
                </div>
                <div class="col-md-4 text-center">
                    <div class="career-hero-icon">
                        <i class="fa-solid fa-briefcase text-primary" style="font-size: 6rem; opacity: 0.15;"></i>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="row g-4">
        <!-- Left Column: Main Content -->
        <div class="col-lg-8">

            <!-- Education Pathway -->
            <?php if (!empty($guide['education_pathway'])): ?>
            <div class="card border-0 shadow-sm mb-4">
                <div class="card-body p-4">
                    <h5 class="fw-bold font-outfit text-dark mb-4"><i class="fa-solid fa-road text-primary me-2"></i>Education Pathway</h5>
                    <div class="timeline-steps">
                        <?php foreach (json_decode($guide['education_pathway'], true) ?? [] as $step): ?>
                            <div class="timeline-step d-flex gap-3 mb-4">
                                <div class="timeline-icon bg-primary-subtle text-primary rounded-circle d-flex align-items-center justify-content-center flex-shrink-0" style="width:42px;height:42px;">
                                    <i class="fa-solid fa-circle-check fs-6"></i>
                                </div>
                                <div class="flex-grow-1">
                                    <h6 class="fw-bold font-outfit text-dark mb-1"><?= htmlspecialchars($step['stage'] ?? '') ?></h6>
                                    <p class="text-muted text-sm mb-0"><?= htmlspecialchars($step['description'] ?? '') ?></p>
                                </div>
                            </div>
                        <?php endforeach; ?>
                    </div>
                </div>
            </div>
            <?php endif; ?>

            <!-- Key Skills -->
            <?php if (!empty($guide['key_skills'])): ?>
            <div class="card border-0 shadow-sm mb-4">
                <div class="card-body p-4">
                    <h5 class="fw-bold font-outfit text-dark mb-3"><i class="fa-solid fa-wrench text-warning me-2"></i>Key Skills Required</h5>
                    <div class="d-flex flex-wrap gap-2">
                        <?php foreach (json_decode($guide['key_skills'], true) ?? explode(',', $guide['key_skills']) as $skill): ?>
                            <span class="badge bg-primary-subtle text-primary rounded-pill px-3 py-2 font-outfit fw-bold text-sm"><?= htmlspecialchars(trim($skill)) ?></span>
                        <?php endforeach; ?>
                    </div>
                </div>
            </div>
            <?php endif; ?>

            <!-- Career Description / Full Details -->
            <?php if (!empty($guide['description'])): ?>
            <div class="card border-0 shadow-sm mb-4">
                <div class="card-body p-4">
                    <h5 class="fw-bold font-outfit text-dark mb-3"><i class="fa-solid fa-circle-info text-info me-2"></i>About This Career</h5>
                    <div class="text-muted lh-lg"><?= nl2br(htmlspecialchars($guide['description'])) ?></div>
                </div>
            </div>
            <?php endif; ?>

            <!-- University Programs -->
            <?php if (!empty($relatedPrograms)): ?>
            <div class="card border-0 shadow-sm mb-4">
                <div class="card-body p-4">
                    <h5 class="fw-bold font-outfit text-dark mb-4"><i class="fa-solid fa-university text-success me-2"></i>Related University Programs</h5>
                    <div class="row g-3">
                        <?php foreach ($relatedPrograms as $prog): ?>
                            <div class="col-md-6">
                                <a href="<?= APP_URL ?>/universities/<?= urlencode($prog['university_slug']) ?>" class="text-decoration-none">
                                    <div class="border rounded-3 p-3 hover-lift h-100">
                                        <h6 class="fw-bold font-outfit text-dark mb-1"><?= htmlspecialchars($prog['name']) ?></h6>
                                        <p class="text-muted text-xs mb-0"><i class="fa-solid fa-building-columns me-1"></i><?= htmlspecialchars($prog['university_name']) ?></p>
                                    </div>
                                </a>
                            </div>
                        <?php endforeach; ?>
                    </div>
                </div>
            </div>
            <?php endif; ?>
        </div>

        <!-- Right Column: Sidebar -->
        <div class="col-lg-4">

            <!-- Quick Facts -->
            <div class="card border-0 shadow-sm mb-4">
                <div class="card-body p-4">
                    <h6 class="fw-bold font-outfit text-dark mb-3"><i class="fa-solid fa-info-circle text-info me-2"></i>Quick Facts</h6>
                    <ul class="list-unstyled mb-0">
                        <li class="d-flex justify-content-between border-bottom pb-2 mb-2">
                            <span class="text-muted text-sm">Category</span>
                            <span class="fw-bold text-sm text-dark"><?= htmlspecialchars($guide['category']) ?></span>
                        </li>
                        <?php if (!empty($guide['work_environment'])): ?>
                        <li class="d-flex justify-content-between border-bottom pb-2 mb-2">
                            <span class="text-muted text-sm">Work Environment</span>
                            <span class="fw-bold text-sm text-dark"><?= htmlspecialchars($guide['work_environment']) ?></span>
                        </li>
                        <?php endif; ?>
                        <?php if (!empty($guide['avg_salary'])): ?>
                        <li class="d-flex justify-content-between border-bottom pb-2 mb-2">
                            <span class="text-muted text-sm">Avg. Salary</span>
                            <span class="fw-bold text-sm text-success"><?= htmlspecialchars($guide['avg_salary']) ?></span>
                        </li>
                        <?php endif; ?>
                        <?php if (!empty($guide['job_outlook'])): ?>
                        <li class="d-flex justify-content-between">
                            <span class="text-muted text-sm">Job Outlook</span>
                            <span class="fw-bold text-sm text-info"><?= htmlspecialchars($guide['job_outlook']) ?></span>
                        </li>
                        <?php endif; ?>
                    </ul>
                </div>
            </div>

            <!-- CTA: Career Assessment -->
            <div class="card border-0 shadow bg-gradient-primary text-white mb-4">
                <div class="card-body p-4 text-center">
                    <i class="fa-solid fa-brain fa-3x mb-3 opacity-75"></i>
                    <h6 class="fw-bold font-outfit mb-2">Not sure this is right for you?</h6>
                    <p class="text-sm opacity-75 mb-3">Take our AI-powered career assessment to get personalised recommendations.</p>
                    <a href="<?= APP_URL ?>/career-assessment" class="btn btn-light text-primary fw-bold rounded-pill w-100">
                        <i class="fa-solid fa-wand-magic-sparkles me-2"></i>Take Assessment
                    </a>
                </div>
            </div>

            <!-- Related Mentors -->
            <?php if (!empty($relatedMentors)): ?>
            <div class="card border-0 shadow-sm mb-4">
                <div class="card-body p-4">
                    <h6 class="fw-bold font-outfit text-dark mb-3"><i class="fa-solid fa-user-tie text-primary me-2"></i>Mentors in this Field</h6>
                    <?php foreach ($relatedMentors as $mentor): ?>
                        <div class="d-flex align-items-center gap-3 mb-3">
                            <img src="<?= $mentor['profile_picture'] ?? APP_URL . '/public/assets/img/default-avatar.png' ?>" alt="<?= htmlspecialchars($mentor['full_name']) ?>" class="rounded-circle" width="44" height="44" style="object-fit:cover;">
                            <div class="flex-grow-1 min-w-0">
                                <h6 class="fw-bold font-outfit text-dark mb-0 text-truncate"><?= htmlspecialchars($mentor['full_name']) ?></h6>
                                <small class="text-muted text-xs text-truncate d-block"><?= htmlspecialchars($mentor['expertise'] ?? 'Career Mentor') ?></small>
                            </div>
                            <a href="<?= APP_URL ?>/mentors/<?= $mentor['id'] ?>" class="btn btn-primary btn-sm rounded-pill px-3">View</a>
                        </div>
                    <?php endforeach; ?>
                </div>
            </div>
            <?php endif; ?>
        </div>
    </div>
</div>
