@extends('layouts.app')
@section('title', 'Saved Careers — CareerPath')

@push('styles')
<style>
    .page-hero { padding: 60px 5%; background: var(--dark-2); border-bottom: 1px solid var(--border); }
    .page-title { font-family: 'Outfit', sans-serif; font-size: 2rem; font-weight: 800; margin-bottom: 10px; }
    .page-subtitle { color: var(--text-muted); font-size: 0.95rem; }

    .careers-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 24px; padding: 40px 5%; max-width: 1280px; margin: 0 auto; min-height: 50vh; align-content: start; }
    
    .ccard { background: var(--card); border: 1px solid var(--border); border-radius: 16px; padding: 24px; transition: all 0.3s; position: relative; overflow: hidden; display: flex; flex-direction: column; }
    .ccard::after { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--gradient); }
    .ccard:hover { transform: translateY(-5px); box-shadow: var(--shadow); }
    
    .ccard-icon { width: 48px; height: 48px; border-radius: 12px; background: rgba(99,102,241,0.15); display: flex; align-items: center; justify-content: center; font-size: 1.5rem; margin-bottom: 16px; color: #A855F7; }
    .ccard-title { font-family: 'Outfit', sans-serif; font-size: 1.2rem; font-weight: 700; margin-bottom: 6px; }
    .ccard-cat { font-size: 0.8rem; color: var(--primary); font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 12px; }
    
    .ccard-actions { margin-top: auto; padding-top: 20px; display: flex; gap: 10px; }
</style>
@endpush

@section('content')
<div class="page-hero">
    <div style="max-width: 1280px; margin: 0 auto;">
        <h1 class="page-title"><i class="fas fa-bookmark" style="color: var(--secondary)"></i> Saved Careers</h1>
        <p class="page-subtitle">Your personalized list of bookmarked career paths to explore.</p>
    </div>
</div>

<div class="careers-grid">
    @php 
        $savedCareers = auth()->user()->savedCareers()->latest()->get() ?? [];
    @endphp

    @forelse($savedCareers as $career)
    <div class="ccard">
        <div class="ccard-icon">{{ $career->icon ?? '💼' }}</div>
        <h3 class="ccard-title">{{ $career->name }}</h3>
        <div class="ccard-cat">{{ $career->category }}</div>
        <div class="ccard-actions">
            <a href="{{ route('careers.show', $career->slug) }}" class="btn btn-primary btn-sm" style="flex:1; text-align:center;">View Details</a>
            <form action="{{ route('student.careers.unsave', $career->id ?? 0) }}" method="POST" style="display:inline;">
                @csrf
                <button type="submit" class="btn btn-sm" style="background:rgba(229,62,62,0.15);color:#FC8181;border:1px solid rgba(229,62,62,0.3);padding:10px 14px;">
                    <i class="fas fa-trash"></i>
                </button>
            </form>
        </div>
    </div>
    @empty
    <div style="grid-column: 1 / -1; text-align: center; padding: 60px 20px; background: var(--card); border: 1px dashed var(--border); border-radius: 16px;">
        <div style="font-size: 4rem; margin-bottom: 16px; opacity: 0.5;">🔖</div>
        <h3 style="font-family:'Outfit',sans-serif; font-size: 1.4rem; margin-bottom: 8px;">No careers saved yet</h3>
        <p style="color: var(--text-muted); margin-bottom: 24px;">Explore our career database and bookmark the ones that interest you!</p>
        <a href="{{ route('careers.index') }}" class="btn btn-primary"><i class="fas fa-compass"></i> Explore Careers</a>
    </div>
    @endforelse
</div>
@endsection