@extends('layouts.user')

@section('content')
<div class="min-h-screen bg-slate-50">
    <!-- Header -->
    <div class="bg-white border-b border-slate-200 py-8">
        <div class="max-w-6xl mx-auto px-4 sm:px-6">
            <h1 class="text-3xl font-bold text-slate-900">My Saved Jobs</h1>
            <p class="mt-2 text-slate-600">{{ $savedJobs->total() }} job{{ $savedJobs->total() !== 1 ? 's' : '' }} saved</p>
        </div>
    </div>

    <!-- Content -->
    <div class="max-w-6xl mx-auto px-4 sm:px-6 py-8">
        @if($savedJobs->isEmpty())
            <div class="rounded-2xl border-2 border-dashed border-slate-300 bg-white p-16 text-center">
                <svg class="mx-auto h-16 w-16 text-slate-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M5 5a2 2 0 012-2h6a2 2 0 012 2v12a2 2 0 01-2 2H7a2 2 0 01-2-2V5z"/>
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9 5v0m0 7v0"/>
                </svg>
                <h3 class="mt-4 text-lg font-semibold text-slate-900">No saved jobs yet</h3>
                <p class="mt-2 text-slate-600">Start exploring jobs and save your favorites for later</p>
                <a href="{{ route('jobs.index') }}" class="mt-6 inline-flex items-center gap-2 rounded-lg bg-blue-600 text-white px-6 py-3 font-semibold hover:bg-blue-700 transition">
                    <svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/>
                    </svg>
                    Browse Jobs
                </a>
            </div>
        @else
            <div class="space-y-4">
                @foreach($savedJobs as $saved)
                    <div class="rounded-2xl border border-slate-200 bg-white p-6 shadow-sm hover:shadow-md transition">
                        <div class="flex items-start justify-between gap-4">
                            <div class="flex-1">
                                <!-- Employer & Title -->
                                <p class="text-sm font-semibold text-blue-600 uppercase tracking-wide">
                                    {{ $saved->jobPosting->employer->company_name ?? 'Company' }}
                                </p>
                                <h3 class="mt-1 text-xl font-bold text-slate-900">{{ $saved->jobPosting->title }}</h3>

                                <!-- Location & Details -->
                                <div class="mt-3 flex flex-wrap gap-4 text-sm">
                                    <div class="flex items-center gap-2 text-slate-600">
                                        <svg class="h-4 w-4 text-slate-400" fill="currentColor" viewBox="0 0 20 20">
                                            <path fill-rule="evenodd" d="M5.05 4.05a7 7 0 119.9 9.9L9.9 13.95a.75.75 0 11-1.06-1.06L13.95 9.05a7 7 0 00-9.9-9.9zM9 11a2 2 0 100-4 2 2 0 000 4z" clip-rule="evenodd"/>
                                        </svg>
                                        <span>{{ $saved->jobPosting->location_city }}, {{ $saved->jobPosting->location_state }}</span>
                                    </div>
                                    <div class="flex items-center gap-2 text-slate-600">
                                        <svg class="h-4 w-4 text-slate-400" fill="currentColor" viewBox="0 0 20 20">
                                            <path fill-rule="evenodd" d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z" clip-rule="evenodd"/>
                                        </svg>
                                        <span>Saved {{ $saved->created_at->diffForHumans() }}</span>
                                    </div>
                                </div>

                                <!-- Notes if any -->
                                @if($saved->notes)
                                    <div class="mt-4 p-3 bg-slate-50 rounded-lg border border-slate-200">
                                        <p class="text-sm text-slate-700"><strong>Your notes:</strong> {{ $saved->notes }}</p>
                                    </div>
                                @endif
                            </div>

                            <!-- Actions -->
                            <div class="flex gap-2">
                                <a href="{{ route('jobs.show', $saved->jobPosting) }}" class="inline-flex items-center gap-2 rounded-lg bg-blue-50 text-blue-600 px-4 py-2 text-sm font-semibold hover:bg-blue-100 transition">
                                    <svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4m-4-6l6-6m0 0l-6 6m6-6v6"/>
                                    </svg>
                                    View
                                </a>
                                
                                <form method="POST" action="{{ route('saved-jobs.destroy', $saved) }}" class="inline">
                                    @csrf
                                    @method('DELETE')
                                    <button type="submit" class="inline-flex items-center gap-2 rounded-lg bg-red-50 text-red-600 px-4 py-2 text-sm font-semibold hover:bg-red-100 transition" onclick="return confirm('Remove this saved job?')">
                                        <svg class="h-4 w-4" fill="currentColor" viewBox="0 0 20 20">
                                            <path fill-rule="evenodd" d="M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 100-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm5-1a1 1 0 00-1 1v6a1 1 0 102 0V8a1 1 0 00-1-1z" clip-rule="evenodd"/>
                                        </svg>
                                        Remove
                                    </button>
                                </form>
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>

            <!-- Pagination -->
            <div class="mt-8">
                {{ $savedJobs->links() }}
            </div>
        @endif
    </div>
</div>

<style>
    [data-pagination] {
        display: flex;
        gap: 0.5rem;
        justify-content: center;
        margin-top: 2rem;
    }

    [data-pagination] a,
    [data-pagination] span {
        padding: 0.5rem 0.75rem;
        border: 1px solid #e2e8f0;
        border-radius: 0.375rem;
        font-size: 0.875rem;
        text-decoration: none;
        transition: all 0.2s;
    }

    [data-pagination] a:hover {
        background-color: #f1f5f9;
        color: #0c63e4;
    }

    [data-pagination] a.active,
    [data-pagination] span.active {
        background-color: #0c63e4;
        color: white;
        border-color: #0c63e4;
    }

    [data-pagination] span.disabled {
        color: #cbd5e1;
        cursor: not-allowed;
    }
</style>
@endsection