@extends('layouts.admin')

@section('title', 'Job applications')

@section('content')
    <form method="GET" class="mb-5 flex flex-wrap items-center gap-3">
        <div class="relative">
            <x-icon name="search" class="pointer-events-none absolute left-3 top-1/2 size-4 -translate-y-1/2 text-text-muted" />
            <input type="search" name="q" value="{{ request('q') }}" placeholder="Search applicants…"
                   class="form-input w-60 pl-9" aria-label="Search applications">
        </div>

        <select name="job" onchange="this.form.submit()" class="form-input w-56" aria-label="Filter by vacancy">
            <option value="">All vacancies</option>
            @foreach ($jobs as $id => $title)
                <option value="{{ $id }}" @selected(request('job') == $id)>{{ $title }}</option>
            @endforeach
        </select>

        <select name="status" onchange="this.form.submit()" class="form-input w-44" aria-label="Filter by status">
            <option value="">All statuses</option>
            @foreach ($statuses as $key => $label)
                <option value="{{ $key }}" @selected(request('status') === $key)>{{ $label }}</option>
            @endforeach
        </select>
    </form>

    <div class="admin-card overflow-hidden">
        @if ($applications->isEmpty())
            <p class="px-6 py-16 text-center text-sm text-text-muted">No applications match these filters.</p>
        @else
            <div class="overflow-x-auto">
                <table class="table-admin">
                    <thead>
                        <tr>
                            <th scope="col">Applicant</th>
                            <th scope="col">Vacancy</th>
                            <th scope="col">Status</th>
                            <th scope="col">Received</th>
                            <th scope="col"><span class="sr-only">Actions</span></th>
                        </tr>
                    </thead>

                    <tbody>
                        @foreach ($applications as $application)
                            <tr>
                                <td>
                                    <a href="{{ route('admin.applications.show', $application) }}" class="font-medium text-text hover:text-text-brand">
                                        {{ $application->name }}
                                    </a>
                                    <p class="text-xs text-text-muted">{{ $application->email }}</p>
                                </td>
                                <td class="text-sm">{{ $application->job?->title }}</td>
                                <td><span class="pill bg-primary-50 text-primary">{{ $statuses[$application->status] ?? $application->status }}</span></td>
                                <td class="text-sm text-text-muted">{{ $application->created_at->format('d M Y') }}</td>
                                <td class="text-right">
                                    <a href="{{ route('admin.applications.cv', $application) }}"
                                       class="rounded p-1.5 text-text-muted hover:bg-surface-muted hover:text-primary" title="Download CV">
                                        <x-icon name="download" class="size-4" />
                                    </a>
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>

            @if ($applications->hasPages())
                <div class="border-t border-border px-5 py-4">{{ $applications->links() }}</div>
            @endif
        @endif
    </div>
@endsection