<?php
/**
 * Career Assessment View
 * Multi-step questionnaire to help students identify suitable career paths.
 */
?>
<div class="container py-4">
    <div class="text-center mb-5">
        <span class="badge bg-warning-subtle text-warning rounded-pill px-3 py-1 font-outfit fw-bold mb-2 text-uppercase" style="letter-spacing:1px;font-size:11px;"><i class="fa-solid fa-brain me-1"></i> AI Career Assessment</span>
        <h2 class="fw-bold font-outfit text-dark">Discover Your Ideal Career</h2>
        <p class="text-muted col-md-6 mx-auto">Answer a few questions and our intelligent system will match you with the most suitable career pathways based on your interests, strengths, and goals.</p>
    </div>

    <!-- Progress Steps -->
    <div class="row justify-content-center mb-5">
        <div class="col-md-8">
            <div class="d-flex justify-content-between align-items-center position-relative">
                <div class="progress position-absolute w-100" style="height: 3px; top: 21px; z-index:0;">
                    <div class="progress-bar bg-primary" id="step-progress-bar" style="width: 0%;"></div>
                </div>
                <?php for ($s = 1; $s <= 4; $s++): ?>
                    <div class="step-indicator text-center" style="z-index:1;">
                        <div class="step-circle rounded-circle d-flex align-items-center justify-content-center fw-bold font-outfit mx-auto <?= $s === 1 ? 'bg-primary text-white' : 'bg-light text-muted border' ?>" 
                             id="step-circle-<?= $s ?>" style="width:42px;height:42px;"><?= $s ?></div>
                        <small class="text-muted text-xs mt-1 d-block font-outfit">
                            <?= ['Interests', 'Strengths', 'Goals', 'Values'][$s-1] ?>
                        </small>
                    </div>
                <?php endfor; ?>
            </div>
        </div>
    </div>

    <!-- Assessment Form -->
    <div class="row justify-content-center">
        <div class="col-md-8">
            <div class="card border-0 shadow-sm">
                <div class="card-body p-5">
                    <form action="<?= APP_URL ?>/careers/assessment" method="POST" id="assessment-form">
                        <?= csrf_field() ?>

                        <!-- Step 1: Interests -->
                        <div class="assessment-step active" id="step-1">
                            <h5 class="fw-bold font-outfit text-dark mb-1">What are your interests?</h5>
                            <p class="text-muted text-sm mb-4">Select all areas that genuinely excite you.</p>
                            <div class="row g-3">
                                <?php
                                $interests = [
                                    ['icon' => 'fa-flask', 'label' => 'Science & Research'],
                                    ['icon' => 'fa-calculator', 'label' => 'Mathematics'],
                                    ['icon' => 'fa-paintbrush', 'label' => 'Arts & Design'],
                                    ['icon' => 'fa-laptop-code', 'label' => 'Technology & Computing'],
                                    ['icon' => 'fa-heart-pulse', 'label' => 'Health & Medicine'],
                                    ['icon' => 'fa-scale-balanced', 'label' => 'Law & Justice'],
                                    ['icon' => 'fa-building-columns', 'label' => 'Business & Finance'],
                                    ['icon' => 'fa-book', 'label' => 'Education & Teaching'],
                                    ['icon' => 'fa-seedling', 'label' => 'Agriculture & Environment'],
                                    ['icon' => 'fa-clapperboard', 'label' => 'Media & Entertainment'],
                                    ['icon' => 'fa-wrench', 'label' => 'Engineering & Construction'],
                                    ['icon' => 'fa-globe', 'label' => 'Social Sciences'],
                                ];
                                foreach ($interests as $interest):
                                ?>
                                    <div class="col-md-4 col-6">
                                        <label class="interest-option d-flex align-items-center gap-2 border rounded-3 p-3 cursor-pointer hover-lift" style="cursor:pointer;">
                                            <input type="checkbox" name="interests[]" value="<?= htmlspecialchars($interest['label']) ?>" class="d-none interest-checkbox">
                                            <div class="interest-icon-box bg-primary-subtle text-primary rounded-circle flex-shrink-0 d-flex align-items-center justify-content-center" style="width:36px;height:36px;">
                                                <i class="fa-solid <?= $interest['icon'] ?> text-sm"></i>
                                            </div>
                                            <span class="font-outfit fw-bold text-sm text-dark"><?= htmlspecialchars($interest['label']) ?></span>
                                        </label>
                                    </div>
                                <?php endforeach; ?>
                            </div>
                        </div>

                        <!-- Step 2: Strengths -->
                        <div class="assessment-step d-none" id="step-2">
                            <h5 class="fw-bold font-outfit text-dark mb-1">What are your strengths?</h5>
                            <p class="text-muted text-sm mb-4">Choose the skills and strengths you naturally possess.</p>
                            <div class="row g-3">
                                <?php
                                $strengths = [
                                    'Critical Thinking', 'Communication', 'Creativity & Innovation', 'Problem Solving',
                                    'Leadership', 'Technical/Analytical Skills', 'Empathy & Compassion', 'Attention to Detail',
                                    'Organisation & Planning', 'Research & Investigation', 'Physical Stamina', 'Teamwork',
                                ];
                                foreach ($strengths as $strength):
                                ?>
                                    <div class="col-md-4 col-6">
                                        <label class="strength-option border rounded-3 p-3 d-block text-center hover-lift" style="cursor:pointer;">
                                            <input type="checkbox" name="strengths[]" value="<?= htmlspecialchars($strength) ?>" class="d-none strength-checkbox">
                                            <span class="font-outfit fw-bold text-sm text-dark"><?= htmlspecialchars($strength) ?></span>
                                        </label>
                                    </div>
                                <?php endforeach; ?>
                            </div>
                        </div>

                        <!-- Step 3: Goals -->
                        <div class="assessment-step d-none" id="step-3">
                            <h5 class="fw-bold font-outfit text-dark mb-1">What are your career goals?</h5>
                            <p class="text-muted text-sm mb-4">Rate the importance of each goal to you (1 = Not Important, 5 = Very Important).</p>
                            <?php
                            $goals = [
                                'goals_high_income'   => 'High income / financial security',
                                'goals_social_impact' => 'Making a social impact',
                                'goals_creativity'    => 'Creative freedom & expression',
                                'goals_prestige'      => 'Prestige & recognition',
                                'goals_worklife'      => 'Work-life balance',
                                'goals_helping'       => 'Helping others directly',
                                'goals_innovation'    => 'Working on cutting-edge innovation',
                                'goals_independence'  => 'Independence & entrepreneurship',
                            ];
                            foreach ($goals as $key => $label):
                            ?>
                                <div class="mb-4">
                                    <label class="fw-bold font-outfit text-sm text-dark mb-2 d-block"><?= htmlspecialchars($label) ?></label>
                                    <div class="d-flex gap-2">
                                        <?php for ($r = 1; $r <= 5; $r++): ?>
                                            <label class="goal-rating-btn border rounded-3 py-2 px-3 text-center fw-bold font-outfit text-muted" style="cursor:pointer;min-width:44px;">
                                                <input type="radio" name="<?= $key ?>" value="<?= $r ?>" class="d-none"><?= $r ?>
                                            </label>
                                        <?php endfor; ?>
                                    </div>
                                </div>
                            <?php endforeach; ?>
                        </div>

                        <!-- Step 4: Values & Background -->
                        <div class="assessment-step d-none" id="step-4">
                            <h5 class="fw-bold font-outfit text-dark mb-1">A little more about you</h5>
                            <p class="text-muted text-sm mb-4">Help us personalise your results further.</p>
                            <div class="mb-4">
                                <label class="form-label fw-bold font-outfit text-sm">Your SHS Programme / Track</label>
                                <select name="shs_programme" class="form-select">
                                    <option value="">Select your SHS programme</option>
                                    <option value="General Science">General Science</option>
                                    <option value="General Arts">General Arts</option>
                                    <option value="Business">Business</option>
                                    <option value="Visual Arts">Visual Arts</option>
                                    <option value="Technical/Vocational">Technical/Vocational</option>
                                    <option value="Home Economics">Home Economics</option>
                                    <option value="Agriculture">Agriculture</option>
                                </select>
                            </div>
                            <div class="mb-4">
                                <label class="form-label fw-bold font-outfit text-sm">Preferred Work Environment</label>
                                <div class="d-flex flex-wrap gap-3">
                                    <?php foreach (['Office/Corporate', 'Hospital/Clinic', 'Field/Outdoor', 'Remote/Home', 'Lab/Research', 'Creative Studio'] as $env): ?>
                                        <label class="env-option border rounded-3 p-3 text-center hover-lift" style="cursor:pointer;min-width:110px;">
                                            <input type="radio" name="work_environment" value="<?= $env ?>" class="d-none">
                                            <span class="font-outfit fw-bold text-sm text-dark"><?= $env ?></span>
                                        </label>
                                    <?php endforeach; ?>
                                </div>
                            </div>
                            <div class="mb-4">
                                <label class="form-label fw-bold font-outfit text-sm">Any specific career you are already considering? (Optional)</label>
                                <input type="text" name="career_consideration" class="form-control" placeholder="e.g. Medical Doctor, Software Engineer, Lawyer...">
                            </div>
                        </div>

                        <!-- Navigation Buttons -->
                        <div class="d-flex justify-content-between mt-5 pt-3 border-top">
                            <button type="button" class="btn btn-outline-secondary rounded-pill px-4" id="btn-prev" style="display:none!important;">
                                <i class="fa-solid fa-arrow-left me-2"></i>Back
                            </button>
                            <div class="ms-auto">
                                <button type="button" class="btn btn-primary rounded-pill px-5 fw-bold font-outfit" id="btn-next">
                                    Next <i class="fa-solid fa-arrow-right ms-2"></i>
                                </button>
                                <button type="submit" class="btn btn-warning rounded-pill px-5 fw-bold font-outfit d-none" id="btn-submit">
                                    <i class="fa-solid fa-wand-magic-sparkles me-2"></i>Get My Career Matches
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
.interest-option.selected, .strength-option.selected { border-color: var(--bs-primary) !important; background: var(--bs-primary-bg-subtle); }
.interest-option.selected .interest-icon-box { background: var(--bs-primary) !important; color: #fff !important; }
.goal-rating-btn.selected { background: var(--bs-primary); color: #fff; border-color: var(--bs-primary) !important; }
.env-option.selected { border-color: var(--bs-warning) !important; background: var(--bs-warning-bg-subtle); }
</style>

<script>
document.addEventListener('DOMContentLoaded', function () {
    let currentStep = 1;
    const totalSteps = 4;

    function goToStep(step) {
        document.querySelectorAll('.assessment-step').forEach(s => s.classList.add('d-none'));
        document.getElementById('step-' + step).classList.remove('d-none');
        // Update circles
        for (let i = 1; i <= totalSteps; i++) {
            const c = document.getElementById('step-circle-' + i);
            c.classList.remove('bg-primary', 'text-white', 'bg-light', 'text-muted', 'border');
            if (i < step) { c.classList.add('bg-primary', 'text-white'); c.innerHTML = '<i class="fa-solid fa-check"></i>'; }
            else if (i === step) { c.classList.add('bg-primary', 'text-white'); c.textContent = i; }
            else { c.classList.add('bg-light', 'text-muted', 'border'); c.textContent = i; }
        }
        document.getElementById('step-progress-bar').style.width = (((step - 1) / (totalSteps - 1)) * 100) + '%';
        const prevBtn = document.getElementById('btn-prev');
        const nextBtn = document.getElementById('btn-next');
        const submitBtn = document.getElementById('btn-submit');
        prevBtn.style.display = step > 1 ? '' : 'none!important';
        if (step === totalSteps) { nextBtn.classList.add('d-none'); submitBtn.classList.remove('d-none'); }
        else { nextBtn.classList.remove('d-none'); submitBtn.classList.add('d-none'); }
        currentStep = step;
    }

    document.getElementById('btn-next').addEventListener('click', () => { if (currentStep < totalSteps) goToStep(currentStep + 1); });
    document.getElementById('btn-prev').addEventListener('click', () => { if (currentStep > 1) goToStep(currentStep - 1); });

    // Interest toggles
    document.querySelectorAll('.interest-option').forEach(opt => {
        opt.addEventListener('click', function () {
            const cb = this.querySelector('.interest-checkbox');
            cb.checked = !cb.checked;
            this.classList.toggle('selected', cb.checked);
        });
    });
    // Strength toggles
    document.querySelectorAll('.strength-option').forEach(opt => {
        opt.addEventListener('click', function () {
            const cb = this.querySelector('.strength-checkbox');
            cb.checked = !cb.checked;
            this.classList.toggle('selected', cb.checked);
        });
    });
    // Goal rating
    document.querySelectorAll('.goal-rating-btn').forEach(btn => {
        btn.addEventListener('click', function () {
            const input = this.querySelector('input[type=radio]');
            const name = input.name;
            document.querySelectorAll(`input[name="${name}"]`).forEach(i => {
                i.closest('.goal-rating-btn').classList.remove('selected');
            });
            input.checked = true;
            this.classList.add('selected');
        });
    });
    // Env options
    document.querySelectorAll('.env-option').forEach(opt => {
        opt.addEventListener('click', function () {
            document.querySelectorAll('.env-option').forEach(e => e.classList.remove('selected'));
            this.classList.add('selected');
        });
    });

    goToStep(1);
});
</script>
