@php
    $statusColors = [
        \App\Models\Application::STATUS_APPLIED => 'border-sky-200 bg-sky-50 text-sky-800',
        \App\Models\Application::STATUS_INTERVIEW => 'border-indigo-200 bg-indigo-50 text-indigo-800',
        \App\Models\Application::STATUS_FOLLOW_UP_NEEDED => 'border-amber-200 bg-amber-50 text-amber-800',
        \App\Models\Application::STATUS_OFFER => 'border-emerald-200 bg-emerald-50 text-emerald-800',
        \App\Models\Application::STATUS_REJECTED => 'border-rose-200 bg-rose-50 text-rose-800',
    ];
@endphp

<x-app-shell title="Application Pipeline" max="max-w-7xl">
    <section class="surface p-5 sm:p-7">
        <div class="flex flex-col gap-3 sm:flex-row sm:items-end sm:justify-between">
            <div>
                <p class="eyebrow">Application pipeline</p>
                <h1 class="page-title mt-2">Track every job you applied to.</h1>
                <p class="body-copy mt-3 max-w-2xl">Move applications through statuses, keep private notes, and schedule follow-up reminders.</p>
            </div>
            <a class="btn-secondary shrink-0" href="{{ route('jobs.index') }}">Browse jobs</a>
        </div>
    </section>

    @if (session('status'))
        <div class="alert-success mt-5">{{ session('status') }}</div>
    @endif

    <section class="mt-5 grid gap-4 xl:grid-cols-5">
        @foreach ($statuses as $status => $label)
            <div class="surface-tight min-h-80 p-4">
                <div class="mb-4 flex items-center justify-between gap-3">
                    <span class="chip {{ $statusColors[$status] ?? '' }}">{{ $label }}</span>
                    <span class="text-sm font-black text-slate-400">{{ ($applications[$status] ?? collect())->count() }}</span>
                </div>

                <div class="grid gap-3">
                    @forelse (($applications[$status] ?? collect()) as $application)
                        <article class="rounded-2xl border border-slate-200 bg-white p-4 shadow-sm shadow-slate-900/5">
                            <h2 class="text-sm font-black leading-6 text-slate-950">{{ $application->importedJob?->title ?? 'Imported job' }}</h2>
                            <p class="muted-copy mt-1">{{ $application->importedJob?->company ?: $application->source_attribution }}</p>
                            @if ($application->follow_up_at)
                                <p class="mt-3 inline-flex rounded-full bg-amber-50 px-3 py-1 text-xs font-black text-amber-800">Follow up {{ $application->follow_up_at->format('M j') }}</p>
                            @endif
                            @if ($application->notes)
                                <p class="mt-3 rounded-2xl bg-slate-50 p-3 text-sm leading-6 text-slate-600">{{ $application->notes }}</p>
                            @endif

                            <form method="POST" action="{{ route('applications.update', $application) }}" class="mt-4 grid gap-2">
                                @csrf
                                @method('PATCH')
                                <select class="field-input mt-0 text-sm" name="status">
                                    @foreach ($statuses as $value => $optionLabel)
                                        <option value="{{ $value }}" @selected($application->status === $value)>{{ $optionLabel }}</option>
                                    @endforeach
                                </select>
                                <input class="field-input mt-0 text-sm" type="date" name="follow_up_at" value="{{ $application->follow_up_at?->format('Y-m-d') }}">
                                <textarea class="field-textarea mt-0 min-h-20 text-sm" name="notes" placeholder="Private notes">{{ $application->notes }}</textarea>
                                <button class="btn-secondary min-h-10 px-4 text-sm" type="submit">Update</button>
                            </form>
                        </article>
                    @empty
                        <div class="rounded-2xl border border-dashed border-slate-300 bg-slate-50 p-4 text-center">
                            <p class="muted-copy">No applications here yet.</p>
                        </div>
                    @endforelse
                </div>
            </div>
        @endforeach
    </section>
</x-app-shell>