@php
    use App\Enums\JobStatus;
@endphp

<x-app-layout title="My jobs">
    <x-slot name="header">
        <h1 class="text-xl font-semibold text-gray-900">My jobs</h1>
        <p class="text-sm text-gray-500">Jobs assigned to you that are not finished yet.</p>
    </x-slot>

    <div class="max-w-4xl mx-auto px-4 py-6 sm:px-6 lg:px-8 space-y-6">
        <x-flash />

        <div class="grid grid-cols-3 gap-3">
            <div class="rounded-xl bg-white p-4 text-center shadow-sm">
                <p class="text-3xl font-semibold tabular-nums text-gray-900" data-total>{{ $total }}</p>
                <p class="text-sm text-gray-600">Open jobs</p>
            </div>
            <div @class(['rounded-xl p-4 text-center shadow-sm', 'bg-red-600 text-white' => $urgent, 'bg-white' => ! $urgent])>
                <p class="text-3xl font-semibold tabular-nums">{{ $urgent }}</p>
                <p @class(['text-sm', 'text-red-100' => $urgent, 'text-gray-600' => ! $urgent])>Urgent</p>
            </div>
            <div @class(['rounded-xl p-4 text-center shadow-sm', 'bg-amber-500 text-white' => $overdue, 'bg-white' => ! $overdue])>
                <p class="text-3xl font-semibold tabular-nums">{{ $overdue }}</p>
                <p @class(['text-sm', 'text-amber-50' => $overdue, 'text-gray-600' => ! $overdue])>Late</p>
            </div>
        </div>

        @forelse ($groups as $status => $jobs)
            <section>
                <div class="mb-2 flex items-center gap-2">
                    <x-status-badge :status="JobStatus::from($status)" size="lg" />
                    <span class="text-sm text-gray-500">{{ $jobs->count() }}</span>
                </div>
                <ul class="divide-y divide-gray-100 overflow-hidden rounded-xl bg-white shadow-sm" data-group="{{ $status }}">
                    {{-- Long lists stay fast on a phone: the 10 most urgent here, the rest in the job list. --}}
                    @foreach ($jobs->take(10) as $job)
                        <li @class(['border-l-4', 'border-red-600' => $job->priority === \App\Enums\JobPriority::Urgent, 'border-amber-500' => $job->priority !== \App\Enums\JobPriority::Urgent && $job->isOverdue(), 'border-transparent' => $job->priority !== \App\Enums\JobPriority::Urgent && ! $job->isOverdue()])
                            data-job="{{ $job->job_no }}">
                            @include('jobs.partials.row')
                        </li>
                    @endforeach
                </ul>
                @if ($jobs->count() > 10)
                    <a href="{{ route('jobs.index', ['status' => $status]) }}" class="mt-2 block text-center text-sm font-medium text-brand-700 underline">
                        See all {{ $jobs->count() }} "{{ JobStatus::from($status)->label() }}" jobs
                    </a>
                @endif
            </section>
        @empty
            <div class="rounded-xl bg-white p-8 text-center shadow-sm">
                <p class="text-lg font-medium text-gray-900">No open jobs</p>
                <p class="mt-1 text-gray-500">When the front desk assigns a job to you, it will show here.</p>
            </div>
        @endforelse

        <p class="text-center text-sm">
            <a href="{{ route('jobs.index') }}" class="font-medium text-indigo-700 underline">See all my jobs, including finished ones</a>
        </p>
    </div>
</x-app-layout>