@extends('layouts.seeker')
@section('title', 'Applied Jobs — JOBES')

@section('seeker_content')
<div class="card-seeker-panel animate__animated animate__fadeIn">
    <h5 class="fw-800 text-dark mb-4" style="font-size:1.1rem; border-left:3px solid #0d9488; padding-left:10px;">Applied Jobs</h5>
    
    @if($applications->count())
    <div class="table-responsive">
        <table class="table align-middle mb-0" style="border-collapse:separate; border-spacing:0 8px;">
            <thead>
                <tr style="background:#f1f5f9; color:#0f172a;">
                    <th class="py-3 px-3 text-dark border-0" style="border-top-left-radius:10px; border-bottom-left-radius:10px; font-weight:700;">Job Title</th>
                    <th class="py-3 px-3 text-dark border-0" style="font-weight:700;">Company</th>
                    <th class="py-3 px-3 text-dark border-0" style="font-weight:700;">Location</th>
                    <th class="py-3 px-3 text-dark border-0" style="font-weight:700;">Status</th>
                    <th class="py-3 px-3 text-dark border-0" style="border-top-right-radius:10px; border-bottom-right-radius:10px; font-weight:700;">Applied On</th>
                </tr>
            </thead>
            <tbody>
                @foreach($applications as $app)
                <tr class="bg-light hover-shadow-xs transition-all-200" style="border-radius:10px;">
                    <td class="py-3 px-3 border-0 text-start" style="border-top-left-radius:10px; border-bottom-left-radius:10px;">
                        <a href="{{ route('jobs.show', $app->jobListing->slug ?? '#') }}" class="fw-800 text-dark text-decoration-none hover-teal" style="font-size:0.95rem;">
                            {{ $app->jobListing->title ?? 'N/A' }}
                        </a>
                        <div class="text-muted small fw-600 mt-1">
                            <i class="fas fa-money-bill-wave me-1 text-teal-accent"></i>{{ $app->jobListing->salary_range ?? 'N/A' }}
                        </div>
                    </td>
                    <td class="py-3 px-3 border-0 text-start">
                        <span class="text-muted small fw-700">{{ $app->jobListing->company->name ?? '—' }}</span>
                    </td>
                    <td class="py-3 px-3 border-0 text-start">
                        <span class="text-muted small fw-600"><i class="fas fa-map-marker-alt me-1 text-teal-accent"></i>{{ $app->jobListing->location->city ?? $app->jobListing->city ?? 'Remote' }}</span>
                    </td>
                    <td class="py-3 px-3 border-0 text-start">
                        @php
                            $statusLabel = match($app->status) {
                                'shortlisted','offered','hired' => 'interview',
                                'rejected' => 'canceled',
                                'reviewed' => 'viewed',
                                default => 'viewed'
                            };
                            $statusColor = match($statusLabel) {
                                'viewed' => 'background:#a855f7; color:#fff;',
                                'interview' => 'background:#f59e0b; color:#fff;',
                                'canceled' => 'background:#ef4444; color:#fff;',
                                default => 'background:#cbd5e1; color:#475569;'
                            };
                            if ($app->status === 'pending') {
                                $statusLabel = 'pending';
                                $statusColor = 'background:#64748b; color:#fff;';
                            }
                        @endphp
                        <span class="badge px-3 py-2 text-uppercase fw-800" style="{{ $statusColor }} border-radius:30px; font-size:0.75rem; letter-spacing:0.5px;">
                            {{ $statusLabel }}
                        </span>
                    </td>
                    <td class="py-3 px-3 border-0 text-muted small fw-700" style="border-top-right-radius:10px; border-bottom-right-radius:10px;">
                        {{ $app->created_at->format('d M Y') }}
                    </td>
                </tr>
                @endforeach
            </tbody>
        </table>
    </div>
    
    <div class="mt-4 d-flex justify-content-center">
        {{ $applications->links() }}
    </div>
    @else
    <div class="text-center py-5">
        <div style="font-size:4rem; filter: grayscale(10%) contrast(90%);">📋</div>
        <h5 class="text-dark fw-800 mt-3">No Applications Yet</h5>
        <p class="text-muted small mb-4">Start applying to your dream jobs today!</p>
        <a href="{{ route('jobs.index') }}" class="btn btn-teal-gradient px-5 py-2.5">Browse Jobs</a>
    </div>
    @endif
</div>
@endsection