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

@push('styles')
<style>
    .roadmap-hero{padding:60px 5% 50px;background:linear-gradient(180deg,rgba(108,63,232,.18) 0%,transparent 100%);border-bottom:1px solid var(--border)}
    .roadmap-body{padding:60px 5%;max-width:900px;margin:0 auto}
    .progress-ring{position:relative;display:inline-flex;align-items:center;justify-content:center}
    .progress-ring svg{transform:rotate(-90deg)}
    .progress-ring .ring-text{position:absolute;text-align:center}
    .timeline{position:relative;padding-left:60px}
    .timeline::before{content:'';position:absolute;left:22px;top:0;bottom:0;width:2px;background:linear-gradient(180deg,var(--primary),rgba(108,63,232,.1))}
    .roadmap-step{position:relative;margin-bottom:32px;animation:fadeInUp .5s ease both}
    .step-dot{position:absolute;left:-46px;top:0;width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:.9rem;border:3px solid var(--dark);z-index:1;transition:all .3s}
    .step-dot.done{background:var(--accent);color:white;box-shadow:0 0 20px rgba(0,212,161,.4)}
    .step-dot.active{background:var(--gradient);color:white;box-shadow:0 0 20px rgba(108,63,232,.5);animation:pulse-glow 2s infinite}
    .step-dot.todo{background:var(--card-2);border-color:var(--border);color:var(--text-muted)}
    @keyframes pulse-glow{0%,100%{box-shadow:0 0 15px rgba(108,63,232,.4)}50%{box-shadow:0 0 30px rgba(108,63,232,.7)}}
    .step-card{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:22px;margin-left:8px;transition:all .3s;cursor:pointer}
    .step-card:hover{border-color:rgba(108,63,232,.3);box-shadow:0 10px 30px rgba(108,63,232,.1)}
    .step-card.done-card{border-color:rgba(0,212,161,.25);background:rgba(0,212,161,.04)}
    .step-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
    .step-title{font-weight:700;font-size:.95rem}
    .step-duration{font-size:.75rem;color:var(--text-muted);background:var(--dark-3);padding:4px 10px;border-radius:50px}
    .step-desc{font-size:.84rem;color:var(--text-muted);line-height:1.7}
    .step-resources{margin-top:12px;display:flex;gap:8px;flex-wrap:wrap}
    .resource-tag{font-size:.75rem;padding:4px 10px;background:rgba(108,63,232,.1);border:1px solid rgba(108,63,232,.2);border-radius:50px;color:#A78BFA}
    @keyframes fadeInUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
    .mark-btn{font-size:.78rem;padding:5px 12px;background:rgba(0,212,161,.12);border:1px solid rgba(0,212,161,.25);border-radius:6px;color:#00D4A1;cursor:pointer;font-family:inherit;transition:all .2s}
    .mark-btn:hover{background:rgba(0,212,161,.2)}
</style>
@endpush

@section('content')
<div class="roadmap-hero">
    <div class="container">
        <div style="display:flex;gap:6px;font-size:.82rem;color:var(--text-muted);margin-bottom:20px;align-items:center">
            <a href="{{ route('careers.index') }}" style="color:var(--text-muted);text-decoration:none">Careers</a>
            <i class="fas fa-chevron-right fa-xs"></i>
            <a href="{{ route('careers.show',$career->slug) }}" style="color:var(--text-muted);text-decoration:none">{{ $career->name }}</a>
            <i class="fas fa-chevron-right fa-xs"></i>
            <span style="color:var(--primary)">Roadmap</span>
        </div>
        <div style="display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:24px">
            <div>
                <div style="font-size:3rem;margin-bottom:10px">{{ $career->icon ?? '🗺️' }}</div>
                <h1 style="font-family:'Outfit',sans-serif;font-size:1.8rem;font-weight:800;margin-bottom:8px">{{ $career->name }} Roadmap</h1>
                <p style="color:var(--text-muted);font-size:.9rem">{{ $steps->count() }} steps to master this career path</p>
            </div>
            <!-- PROGRESS RING -->
            @auth
            <div style="text-align:center">
                <div class="progress-ring">
                    <svg width="100" height="100" viewBox="0 0 100 100">
                        <circle cx="50" cy="50" r="42" fill="none" stroke="rgba(255,255,255,0.06)" stroke-width="8"/>
                        <circle cx="50" cy="50" r="42" fill="none" stroke="url(#grad)" stroke-width="8"
                            stroke-dasharray="{{ round(2*3.14159*42) }}"
                            stroke-dashoffset="{{ round(2*3.14159*42 * (1 - $percent/100)) }}"
                            stroke-linecap="round"/>
                        <defs><linearGradient id="grad" x1="0%" y1="0%" x2="100%" y2="0%"><stop offset="0%" style="stop-color:#6C3FE8"/><stop offset="100%" style="stop-color:#00D4A1"/></linearGradient></defs>
                    </svg>
                    <div class="ring-text">
                        <div style="font-family:'Outfit',sans-serif;font-size:1.3rem;font-weight:800">{{ $percent }}%</div>
                        <div style="font-size:.68rem;color:var(--text-muted)">Complete</div>
                    </div>
                </div>
                <div style="font-size:.82rem;color:var(--text-muted);margin-top:6px">{{ count($userProgress) }}/{{ $steps->count() }} steps done</div>
            </div>
            @endauth
        </div>
        <div style="display:flex;gap:10px;margin-top:24px;flex-wrap:wrap">
            @auth
            @if(!$isFollowing)
            <form action="{{ url('/student/careers/'.$career->id.'/follow') }}" method="POST">
                @csrf<button type="submit" class="btn btn-primary"><i class="fas fa-star"></i> Follow Roadmap</button>
            </form>
            @else
            <span class="badge badge-success" style="padding:8px 16px"><i class="fas fa-star"></i> Following</span>
            @endif
            @endauth
            <a href="{{ route('careers.show',$career->slug) }}" class="btn btn-outline"><i class="fas fa-arrow-left"></i> Career Details</a>
        </div>
    </div>
</div>

<div class="roadmap-body">
    @if($steps->count())
    <div class="timeline">
        @foreach($steps as $i => $step)
        @php
            $isDone   = in_array($step->id, $userProgress);
            $isActive = !$isDone && ($i === count($userProgress));
            $dotClass = $isDone ? 'done' : ($isActive ? 'active' : 'todo');
        @endphp
        <div class="roadmap-step" style="animation-delay:{{ $i*0.08 }}s">
            <div class="step-dot {{ $dotClass }}">
                @if($isDone) <i class="fas fa-check"></i>
                @elseif($isActive) {{ $i+1 }}
                @else {{ $i+1 }}
                @endif
            </div>
            <div class="step-card {{ $isDone ? 'done-card' : '' }}">
                <div class="step-header">
                    <div class="step-title">{{ $step->title }}</div>
                    <div style="display:flex;align-items:center;gap:8px">
                        @if($step->estimated_duration)
                        <span class="step-duration"><i class="fas fa-clock fa-xs"></i> {{ $step->estimated_duration }}</span>
                        @endif
                        @if($isDone)
                        <span style="font-size:.75rem;color:#00D4A1;font-weight:600">✓ Done</span>
                        @endif
                    </div>
                </div>
                <p class="step-desc">{{ $step->description }}</p>
                @if($step->resources)
                <div class="step-resources">
                    @foreach((array)$step->resources as $res)
                    <span class="resource-tag"><i class="fas fa-link fa-xs"></i> {{ is_array($res) ? ($res['name'] ?? $res) : $res }}</span>
                    @endforeach
                </div>
                @endif
                @auth
                <div style="margin-top:12px">
                    <form action="{{ url('/student/progress/'.$step->id.'/toggle') }}" method="POST" style="display:inline">
                        @csrf
                        <button type="submit" class="mark-btn">
                            {{ $isDone ? '↩ Mark Incomplete' : '✓ Mark Complete' }}
                        </button>
                    </form>
                </div>
                @endauth
            </div>
        </div>
        @endforeach
    </div>
    @else
    <div style="text-align:center;padding:60px;color:var(--text-muted)">
        <div style="font-size:4rem;margin-bottom:16px">🗺️</div>
        <h3 style="font-size:1.1rem;font-weight:700;color:var(--text);margin-bottom:8px">Roadmap Coming Soon</h3>
        <p>Steps for this career are being prepared by our team.</p>
    </div>
    @endif

    <div style="margin-top:50px;text-align:center;padding:36px;background:var(--card);border:1px solid var(--border);border-radius:20px">
        <h3 style="font-family:'Outfit',sans-serif;font-size:1.2rem;font-weight:800;margin-bottom:10px">Need Expert Guidance? 🧑‍💼</h3>
        <p style="color:var(--text-muted);font-size:.875rem;margin-bottom:20px">Book a session with a career counselor specialized in {{ $career->category }}</p>
        <a href="{{ route('counselors.index') }}" class="btn btn-primary"><i class="fas fa-user-tie"></i> Find a Counselor</a>
    </div>
</div>
@endsection