@extends('layouts.app')
@section('title', 'My Dashboard — CareerPath')

@push('styles')
<style>


.dash-hero{background:linear-gradient(135deg,rgba(108,63,232,.2) 0%,rgba(255,107,53,.08) 100%),var(--dark-2);border-bottom:1px solid var(--border);padding:40px 5% 36px}
.hero-inner{max-width:1280px;margin:0 auto;display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.user-avatar{width:60px;height:60px;border-radius:50%;background:var(--gradient);display:flex;align-items:center;justify-content:center;font-size:1.5rem;font-weight:800;color:white;flex-shrink:0;border:3px solid rgba(108,63,232,.4);box-shadow:0 0 20px rgba(108,63,232,.3)}
.hero-actions{margin-left:auto;display:flex;gap:10px;flex-wrap:wrap}

.dash-body{max-width:1280px;margin:0 auto;padding:32px 5%}

/* STATS */
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:32px}
.scard{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:22px;display:flex;align-items:center;gap:16px;transition:all .3s;position:relative;overflow:hidden}
.scard::after{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:var(--gradient)}
.scard:hover{transform:translateY(-3px);box-shadow:0 12px 30px rgba(108,63,232,.15)}
.scard-icon{width:48px;height:48px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:1.3rem;flex-shrink:0}
.scard-num{font-family:'Outfit',sans-serif;font-size:1.7rem;font-weight:800;line-height:1}
.scard-lbl{font-size:.75rem;color:var(--text-muted);margin-top:3px}

/* MAIN GRID */
.main-grid{display:grid;grid-template-columns:1fr 300px;gap:24px;align-items:start}

/* BOOKING ITEMS */
.bitem{display:flex;align-items:center;gap:14px;padding:14px 16px;background:var(--dark-3);border-radius:12px;margin-bottom:10px;transition:all .2s}
.bitem:last-child{margin-bottom:0}
.bitem:hover{background:rgba(108,63,232,.08)}
.bitem-icon{width:42px;height:42px;border-radius:10px;background:rgba(108,63,232,.15);display:flex;align-items:center;justify-content:center;font-size:1.1rem;flex-shrink:0}

/* CAREER LINKS */
.clink{display:flex;align-items:center;gap:12px;padding:12px 14px;background:var(--dark-3);border-radius:10px;text-decoration:none;margin-bottom:8px;transition:all .2s}
.clink:last-child{margin-bottom:0}
.clink:hover{background:rgba(108,63,232,.1);transform:translateX(3px)}

/* CARD BASE */
.dcard{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:22px;margin-bottom:20px}
.dcard:last-child{margin-bottom:0}
.dcard-title{font-weight:700;font-size:.95rem;margin-bottom:16px;display:flex;align-items:center;gap:8px}

/* QUICK LINKS */
.qlink{display:flex;align-items:center;gap:10px;padding:11px 14px;border-radius:10px;text-decoration:none;font-size:.875rem;font-weight:500;color:var(--text);background:var(--dark-3);margin-bottom:8px;transition:all .2s;border:1px solid transparent}
.qlink:hover{background:rgba(108,63,232,.1);border-color:rgba(108,63,232,.2);color:#A78BFA}
.qlink:last-child{margin-bottom:0}
.qlink i{width:16px;text-align:center;color:var(--text-muted)}

/* BADGE */
.badge{padding:4px 10px;border-radius:6px;font-size:.72rem;font-weight:700;display:inline-flex;align-items:center;gap:4px}
.badge-success{background:rgba(0,212,161,.15);color:#00D4A1;border:1px solid rgba(0,212,161,.3)}
.badge-warning{background:rgba(255,107,53,.15);color:#FF6B35;border:1px solid rgba(255,107,53,.3)}
.badge-danger{background:rgba(229,62,62,.15);color:#FC8181;border:1px solid rgba(229,62,62,.3)}

@media(max-width:1024px){
    .stats-grid{grid-template-columns:repeat(2,1fr)}
    .main-grid{grid-template-columns:1fr}
}
@media(max-width:600px){
    .stats-grid{grid-template-columns:repeat(2,1fr)}
    .hero-actions{width:100%}
    .dash-body{padding:24px 4%}
}
</style>
@endpush

@section('content')

{{-- HERO --}}
<div class="dash-hero">
    <div class="hero-inner">
        <div class="user-avatar">{{ substr($user->name,0,1) }}</div>
        <div>
            <h1 style="font-family:'Outfit',sans-serif;font-size:1.5rem;font-weight:800;margin-bottom:2px">
                Welcome back, {{ $user->name }}! 👋
            </h1>
            <p style="color:var(--text-muted);font-size:.85rem">{{ $user->email }} &nbsp;·&nbsp; {{ ucfirst($user->education_level ?? 'Student') }}</p>
        </div>
        <div class="hero-actions">
            <a href="{{ route('quiz.index') }}" class="btn btn-primary btn-sm">
                <i class="fas fa-wand-magic-sparkles"></i> Take Quiz
            </a>
            <a href="{{ route('careers.index') }}" class="btn btn-outline btn-sm">
                <i class="fas fa-compass"></i> Explore Careers
            </a>
            <form action="{{ route('logout') }}" method="POST" style="display:inline">
                @csrf
                <button type="submit" class="btn btn-sm" style="background:rgba(229,62,62,.12);color:#FC8181;border:1px solid rgba(229,62,62,.25)">
                    <i class="fas fa-right-from-bracket"></i> Logout
                </button>
            </form>
        </div>
    </div>
</div>

<div class="dash-body">

    {{-- STATS --}}
    <div class="stats-grid">
        <div class="scard">
            <div class="scard-icon" style="background:rgba(108,63,232,.15)">🧠</div>
            <div>
                <div class="scard-num" style="color:#A78BFA">{{ $stats['quiz_taken'] }}</div>
                <div class="scard-lbl">Quizzes Taken</div>
            </div>
        </div>
        <div class="scard">
            <div class="scard-icon" style="background:rgba(0,212,161,.12)">📅</div>
            <div>
                <div class="scard-num" style="color:#00D4A1">{{ $stats['bookings'] }}</div>
                <div class="scard-lbl">Sessions Booked</div>
            </div>
        </div>
        <div class="scard">
            <div class="scard-icon" style="background:rgba(255,107,53,.12)">🔖</div>
            <div>
                <div class="scard-num" style="color:#FF6B35">{{ $stats['saved'] }}</div>
                <div class="scard-lbl">Saved Careers</div>
            </div>
        </div>
        <div class="scard">
            <div class="scard-icon" style="background:rgba(251,191,36,.12)">🎓</div>
            <div>
                <div class="scard-num" style="font-size:1rem;color:#FBBF24;margin-top:4px">{{ ucfirst($user->education_level ?? 'N/A') }}</div>
                <div class="scard-lbl">Education Level</div>
            </div>
        </div>
    </div>

    {{-- MAIN --}}
    <div class="main-grid">

        {{-- LEFT --}}
        <div>

            {{-- BOOKINGS --}}
            <div class="dcard">
                <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:16px">
                    <div class="dcard-title" style="margin:0">
                        <i class="fas fa-calendar-check" style="color:var(--primary)"></i> My Bookings
                    </div>
                    <a href="{{ route('dashboard.bookings') }}" style="font-size:.8rem;color:#A78BFA;text-decoration:none">View all →</a>
                </div>
                @forelse($recentBookings as $b)
                <div class="bitem">
                    <div class="bitem-icon">🧑‍💼</div>
                    <div style="flex:1;min-width:0">
                        <div style="font-weight:600;font-size:.875rem">{{ $b->counselor->user->name ?? 'Counselor' }}</div>
                        <div style="font-size:.75rem;color:var(--text-muted);margin-top:2px">
                            {{ optional($b->booking_date)->format('d M Y') }} &nbsp;·&nbsp; {{ $b->booking_time }}
                            &nbsp;·&nbsp; {{ ucfirst($b->meeting_type ?? 'online') }}
                        </div>
                    </div>
                    <span class="badge {{ $b->status=='confirmed'?'badge-success':($b->status=='pending'?'badge-warning':'badge-danger') }}">
                        {{ ucfirst($b->status) }}
                    </span>
                </div>
                @empty
                <div style="text-align:center;padding:36px 20px">
                    <div style="font-size:3rem;margin-bottom:12px">📅</div>
                    <p style="color:var(--text-muted);font-size:.875rem;margin-bottom:16px">No sessions booked yet</p>
                    <a href="{{ route('counselors.index') }}" class="btn btn-primary btn-sm">
                        <i class="fas fa-user-tie"></i> Find a Counselor
                    </a>
                </div>
                @endforelse
            </div>

            {{-- RECOMMENDED CAREERS --}}
            <div class="dcard">
                <div class="dcard-title">
                    <i class="fas fa-star" style="color:#FBBF24"></i>
                    {{ $latestQuizResult ? 'Your Quiz Recommendations' : 'Suggested Careers' }}
                </div>
                @forelse($recommendedCareers as $c)
                <a href="{{ route('careers.show', $c->slug) }}" class="clink">
                    <span style="font-size:1.6rem">{{ $c->icon ?? '💼' }}</span>
                    <div style="flex:1">
                        <div style="font-weight:600;font-size:.875rem;color:var(--text)">{{ $c->name }}</div>
                        <div style="font-size:.75rem;color:var(--text-muted)">{{ $c->category }} &nbsp;·&nbsp; PKR {{ $c->min_salary_pkr ?? '50k' }}–{{ $c->max_salary_pkr ?? '150k' }}/mo</div>
                    </div>
                    <i class="fas fa-chevron-right fa-sm" style="color:var(--text-muted)"></i>
                </a>
                @empty
                <p style="color:var(--text-muted);font-size:.85rem;text-align:center;padding:16px">
                    Take the quiz to get personalized recommendations!
                </p>
                @endforelse
                @if(!$latestQuizResult)
                <a href="{{ route('quiz.index') }}" class="btn btn-outline btn-sm btn-block" style="margin-top:12px">
                    <i class="fas fa-wand-magic-sparkles"></i> Take Quiz for Better Matches
                </a>
                @endif
            </div>

        </div>

        {{-- RIGHT SIDEBAR --}}
        <div>

            {{-- QUIZ RESULT --}}
            @if($latestQuizResult)
            <div class="dcard" style="background:linear-gradient(135deg,rgba(108,63,232,.18),rgba(0,212,161,.06));border-color:rgba(108,63,232,.3)">
                <div class="dcard-title"><i class="fas fa-brain" style="color:#A78BFA"></i> Latest Quiz Result</div>
                <p style="font-size:.82rem;color:var(--text-muted);line-height:1.65;margin-bottom:14px">
                    {{ Str::limit($latestQuizResult->analysis, 110) }}
                </p>
                <a href="{{ route('quiz.result', $latestQuizResult->id) }}" class="btn btn-primary btn-sm btn-block">
                    View Full Results
                </a>
            </div>
            @else
            <div class="dcard" style="text-align:center">
                <div style="font-size:3rem;margin-bottom:10px">🎯</div>
                <div style="font-weight:700;margin-bottom:6px">Discover Your Career</div>
                <p style="font-size:.82rem;color:var(--text-muted);margin-bottom:14px">Take the quiz and get AI-powered career recommendations</p>
                <a href="{{ route('quiz.index') }}" class="btn btn-primary btn-sm btn-block">
                    <i class="fas fa-wand-magic-sparkles"></i> Start Quiz Now
                </a>
            </div>
            @endif

            {{-- SAVED CAREERS --}}
            <div class="dcard">
                <div class="dcard-title"><i class="fas fa-bookmark" style="color:var(--secondary)"></i> Saved Careers</div>
                @forelse($savedCareers as $sc)
                <a href="{{ route('careers.show', $sc->slug) }}" class="clink">
                    <span style="font-size:1.3rem">{{ $sc->icon ?? '💼' }}</span>
                    <div style="flex:1">
                        <div style="font-weight:600;font-size:.83rem;color:var(--text)">{{ $sc->name }}</div>
                        <div style="font-size:.72rem;color:var(--text-muted)">{{ $sc->category }}</div>
                    </div>
                </a>
                @empty
                <p style="font-size:.8rem;color:var(--text-muted);text-align:center;padding:10px 0">No saved careers yet.<br>Explore and save ones you like!</p>
                @endforelse
            </div>

            {{-- QUICK LINKS --}}
            <div class="dcard">
                <div class="dcard-title"><i class="fas fa-bolt" style="color:#FBBF24"></i> Quick Links</div>
                <a href="{{ route('careers.index') }}" class="qlink"><i class="fas fa-briefcase"></i> Browse All Careers</a>
                <a href="{{ route('counselors.index') }}" class="qlink"><i class="fas fa-user-tie"></i> Find Counselors</a>
                <a href="{{ route('careers.compare') }}" class="qlink"><i class="fas fa-code-compare"></i> Compare Careers</a>
                <a href="{{ route('quiz.index') }}" class="qlink"><i class="fas fa-clipboard-question"></i> Career Quiz</a>
                <a href="{{ route('dashboard.progress') }}" class="qlink"><i class="fas fa-chart-line"></i> My Progress</a>
                <a href="{{ route('dashboard.saved-careers') }}" class="qlink"><i class="fas fa-bookmark"></i> Saved Careers</a>
                <form action="{{ route('logout') }}" method="POST" style="margin-top:4px">
                    @csrf
                    <button type="submit" class="qlink" style="width:100%;cursor:pointer;border:none;font-family:inherit;background:rgba(229,62,62,.08);color:#FC8181;border:1px solid rgba(229,62,62,.15)">
                        <i class="fas fa-right-from-bracket" style="color:#FC8181"></i> Logout
                    </button>
                </form>
            </div>

        </div>
    </div>
</div>
@endsection