@extends('layouts.app')
@section('title', $career->name . ' — CareerPath Pakistan')

@push('styles')
<style>
    .career-hero { padding:60px 5%;background:linear-gradient(180deg,rgba(108,63,232,.15) 0%,transparent 100%);border-bottom:1px solid var(--border) }
    .career-content { padding:60px 5% }
    .career-layout { display:grid;grid-template-columns:1fr 340px;gap:32px;align-items:start }
    .info-block { margin-bottom:32px }
    .info-block h3 { font-family:'Outfit',sans-serif;font-size:1.1rem;font-weight:800;margin-bottom:16px;display:flex;align-items:center;gap:8px }
    .skill-tag { display:inline-block;padding:6px 14px;background:rgba(108,63,232,.12);border:1px solid rgba(108,63,232,.25);border-radius:50px;font-size:.8rem;font-weight:600;color:#A78BFA;margin:4px }
    .roadmap-step { display:flex;gap:16px;margin-bottom:20px }
    .step-num { width:36px;height:36px;border-radius:50%;background:var(--gradient);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.85rem;flex-shrink:0;color:white }
    .step-body { flex:1 }
    .step-title { font-weight:700;font-size:.9rem;margin-bottom:4px }
    .step-desc { font-size:.82rem;color:var(--text-muted);line-height:1.6 }
    .sidebar-card { background:var(--card);border:1px solid var(--border);border-radius:18px;padding:24px;margin-bottom:20px }
    .sidebar-card h3 { font-weight:700;font-size:1rem;margin-bottom:16px }
    .info-row { display:flex;justify-content:space-between;align-items:center;padding:10px 0;border-bottom:1px solid var(--border);font-size:.875rem }
    .info-row:last-child { border-bottom:none }
    .info-row .label { color:var(--text-muted) }
    .info-row .value { font-weight:600 }
    .related-card { display:flex;gap:12px;align-items:center;padding:12px;background:var(--dark-3);border-radius:10px;text-decoration:none;transition:all .2s;margin-bottom:8px }
    .related-card:hover { background:rgba(108,63,232,.1) }
    @media(max-width:1024px){.career-layout{grid-template-columns:1fr}.sidebar-card{max-width:600px}}
    @media(max-width:640px){.career-hero{padding:40px 5%}}
</style>
@endpush

@section('content')
<div class="career-hero">
    <div class="container">
        <div style="display:flex;gap:6px;align-items:center;font-size:.82rem;color:var(--text-muted);margin-bottom:20px">
            <a href="{{ route('careers.index') }}" style="color:var(--text-muted);text-decoration:none">Careers</a>
            <i class="fas fa-chevron-right fa-xs"></i>
            <span style="color:var(--primary)">{{ $career->name }}</span>
        </div>
        <div style="display:flex;align-items:flex-start;gap:20px;flex-wrap:wrap">
            <span style="font-size:4rem">{{ $career->icon ?? '💼' }}</span>
            <div style="flex:1">
                <span class="badge badge-primary" style="margin-bottom:10px">{{ $career->category }}</span>
                <h1 style="font-family:'Outfit',sans-serif;font-size:2rem;font-weight:800;margin-bottom:10px">{{ $career->name }}</h1>
                <p style="color:var(--text-muted);line-height:1.7;max-width:650px">{{ $career->description }}</p>
                <div style="display:flex;gap:10px;margin-top:20px;flex-wrap:wrap">
                    <a href="{{ route('careers.roadmap', $career->slug) }}" class="btn btn-primary">
                        <i class="fas fa-map"></i> View Roadmap
                    </a>
                    @auth
                    <form action="{{ url('/student/careers/'.$career->id.'/save') }}" method="POST" style="display:inline">
                        @csrf
                        <button type="submit" class="btn btn-outline">
                            <i class="fas fa-{{ $isSaved ? 'bookmark' : 'bookmark' }}"></i>
                            {{ $isSaved ? 'Saved' : 'Save Career' }}
                        </button>
                    </form>
                    @endauth
                    <a href="{{ route('careers.compare') }}?career1={{ $career->id }}" class="btn btn-ghost">
                        <i class="fas fa-code-compare"></i> Compare
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="career-content">
    <div class="container">
        <div class="career-layout">
            <!-- MAIN CONTENT -->
            <div>
                @if($career->key_skills)
                <div class="info-block">
                    <h3><i class="fas fa-wrench" style="color:var(--primary)"></i> Key Skills Required</h3>
                    <div>
                        @php $skills = is_array($career->key_skills) ? $career->key_skills : json_decode($career->key_skills, true) ?? []; @endphp
                        @foreach($skills as $skill)
                        <span class="skill-tag">{{ $skill }}</span>
                        @endforeach
                        @if(empty($skills))
                        <p style="color:var(--text-muted);font-size:.875rem">Skills information being updated.</p>
                        @endif
                    </div>
                </div>
                @endif

                @if($career->job_titles)
                <div class="info-block">
                    <h3><i class="fas fa-briefcase" style="color:var(--secondary)"></i> Job Titles in This Field</h3>
                    @php $titles = is_array($career->job_titles) ? $career->job_titles : json_decode($career->job_titles, true) ?? []; @endphp
                    <div style="display:grid;grid-template-columns:repeat(2,1fr);gap:8px">
                        @foreach($titles as $title)
                        <div style="padding:10px 14px;background:var(--dark-3);border:1px solid var(--border);border-radius:8px;font-size:.875rem">
                            <i class="fas fa-angle-right" style="color:var(--primary);margin-right:8px;font-size:.8rem"></i>{{ $title }}
                        </div>
                        @endforeach
                    </div>
                </div>
                @endif

                <!-- ROADMAP PREVIEW -->
                @if($steps->count())
                <div class="info-block">
                    <h3><i class="fas fa-road" style="color:var(--accent)"></i> Career Roadmap Preview</h3>
                    @foreach($steps->take(4) as $i => $step)
                    <div class="roadmap-step">
                        <div class="step-num" style="{{ in_array($step->id, $userProgress) ? 'background:var(--accent)' : '' }}">
                            {{ in_array($step->id, $userProgress) ? '✓' : ($i + 1) }}
                        </div>
                        <div class="step-body">
                            <div class="step-title">{{ $step->title }}</div>
                            <div class="step-desc">{{ Str::limit($step->description, 120) }}</div>
                        </div>
                    </div>
                    @endforeach
                    @if($steps->count() > 4)
                    <a href="{{ route('careers.roadmap', $career->slug) }}" class="btn btn-outline btn-sm">
                        View Full Roadmap ({{ $steps->count() }} steps) <i class="fas fa-arrow-right"></i>
                    </a>
                    @endif
                </div>
                @endif

                @if($career->pros || $career->cons)
                <div class="grid-2">
                    @if($career->pros)
                    <div class="info-block">
                        <h3 style="color:#00D4A1"><i class="fas fa-thumbs-up"></i> Pros</h3>
                        @php $pros = is_array($career->pros) ? $career->pros : json_decode($career->pros, true) ?? []; @endphp
                        @foreach($pros as $pro)
                        <div style="display:flex;gap:8px;margin-bottom:8px;font-size:.875rem">
                            <i class="fas fa-check" style="color:#00D4A1;margin-top:3px;flex-shrink:0"></i> {{ $pro }}
                        </div>
                        @endforeach
                    </div>
                    @endif
                    @if($career->cons)
                    <div class="info-block">
                        <h3 style="color:#FC8181"><i class="fas fa-thumbs-down"></i> Cons</h3>
                        @php $cons = is_array($career->cons) ? $career->cons : json_decode($career->cons, true) ?? []; @endphp
                        @foreach($cons as $con)
                        <div style="display:flex;gap:8px;margin-bottom:8px;font-size:.875rem">
                            <i class="fas fa-xmark" style="color:#FC8181;margin-top:3px;flex-shrink:0"></i> {{ $con }}
                        </div>
                        @endforeach
                    </div>
                    @endif
                </div>
                @endif
            </div>

            <!-- SIDEBAR -->
            <div>
                <div class="sidebar-card">
                    <h3>📊 Career Overview</h3>
                    <div class="info-row">
                        <span class="label">Salary Range</span>
                        <span class="value" style="color:var(--accent)">PKR {{ $career->min_salary_pkr ?? '50k' }}–{{ $career->max_salary_pkr ?? '150k' }}/mo</span>
                    </div>
                    <div class="info-row">
                        <span class="label">Difficulty</span>
                        <span class="badge {{ $career->difficulty=='easy'?'badge-success':($career->difficulty=='hard'?'badge-danger':'badge-warning') }}">{{ ucfirst($career->difficulty ?? 'Moderate') }}</span>
                    </div>
                    <div class="info-row">
                        <span class="label">Duration</span>
                        <span class="value">{{ $career->years_to_complete ?? 4 }} years</span>
                    </div>
                    <div class="info-row">
                        <span class="label">Category</span>
                        <span class="value">{{ $career->category }}</span>
                    </div>
                    <div class="info-row">
                        <span class="label">Popularity</span>
                        <span class="value">{{ $career->popularity_score ?? 0 }} views</span>
                    </div>
                </div>

                <div class="sidebar-card">
                    <h3>🧑‍💼 Book a Counselor</h3>
                    <p style="font-size:.83rem;color:var(--text-muted);margin-bottom:16px">Get expert guidance from a professional in {{ $career->category }}</p>
                    <a href="{{ route('counselors.index') }}" class="btn btn-primary btn-block"><i class="fas fa-user-tie"></i> Find Counselors</a>
                </div>

                @if($related->count())
                <div class="sidebar-card">
                    <h3>🔗 Related Careers</h3>
                    @foreach($related as $rel)
                    <a href="{{ route('careers.show', $rel->slug) }}" class="related-card">
                        <span style="font-size:1.5rem">{{ $rel->icon ?? '💼' }}</span>
                        <div>
                            <div style="font-weight:600;font-size:.875rem">{{ $rel->name }}</div>
                            <div style="font-size:.75rem;color:var(--text-muted)">{{ $rel->category }}</div>
                        </div>
                    </a>
                    @endforeach
                </div>
                @endif
            </div>
        </div>
    </div>
</div>
@endsection