@extends('layouts.user')

@section('title', 'My Applications')

@section('sidebar-title')
    <h2 class="text-xs font-semibold uppercase tracking-wide text-slate-400 mb-4">Healthcare Worker Dashboard</h2>
@endsection

@section('sidebar-menu')
    <a href="{{ route('user.dashboard') }}" class="sidebar-link">
        <div class="w-9 h-9 rounded-lg flex items-center justify-center text-slate-400">
            <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2V6zM14 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V6zM4 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2v-2zM14 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z"/>
            </svg>
        </div>
        Dashboard
    </a>
    <a href="{{ route('user.profile.show') }}" class="sidebar-link">
        <div class="w-9 h-9 rounded-lg flex items-center justify-center text-slate-400">
            <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"/>
            </svg>
        </div>
        My Profile
    </a>
    <a href="{{ route('user.applications.index') }}" class="sidebar-link active text-violet-600 border-l-4 border-violet-500">
        <div class="w-9 h-9 rounded-lg flex items-center justify-center bg-violet-500 text-white">
            <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
            </svg>
        </div>
        My Applications
    </a>
    <a href="{{ route('jobs.index') }}" class="sidebar-link">
        <div class="w-9 h-9 rounded-lg flex items-center justify-center text-slate-400">
            <svg 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>
        </div>
        Browse Jobs
    </a>
    <div class="mt-8 pt-6 border-t border-slate-200">
        <a href="{{ route('home') }}" class="sidebar-link">
            <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"/>
            </svg>
            Back to Site
        </a>
    </div>
@endsection

@section('content')
    <div>
        <div class="mb-8">
            <h1 class="text-3xl font-bold text-slate-900">My Applications</h1>
            <p class="text-slate-600 mt-2">Track all your job applications</p>
        </div>

        <div class="admin-card">
            <div class="card-body">
        <form method="GET" class="mb-4 flex flex-wrap items-center gap-3">
            <select name="status" class="rounded-md border-gray-300 text-sm shadow-sm">
                <option value="">All statuses</option>
                @foreach (['applied','shortlisted','interview','offer','hired','rejected'] as $s)
                    <option value="{{ $s }}" {{ $status === $s ? 'selected' : '' }}>{{ ucfirst($s) }}</option>
                @endforeach
            </select>
            <button class="admin-btn admin-btn-primary admin-btn-sm" type="submit">Filter</button>
        </form>

        <div class="space-y-3">
            @forelse ($applications as $application)
                <div class="rounded-xl border border-slate-100 bg-white px-4 py-3 shadow-sm">
                    <div class="flex items-center justify-between">
                        <div>
                            <div class="font-semibold text-slate-900">{{ optional($application->posting)->title }}</div>
                            <div class="text-sm text-slate-500">{{ optional(optional($application->posting)->employer)->name }}</div>
                            <div class="text-xs text-slate-400">Applied: {{ optional($application->applied_at)->format('M j, Y') ?? 'n/a' }}</div>
                        </div>
                        <span class="rounded-full bg-slate-100 px-3 py-1 text-xs font-semibold text-slate-700">{{ $application->status }}</span>
                    </div>
                </div>
            @empty
                <p class="text-sm text-slate-500">No applications found.</p>
            @endforelse
        </div>

        <div class="mt-6">
            {{ $applications->links() }}
        </div>
            </div>
        </div>
    </div>
@endsection