@php
    use App\Enums\JobStatus;
    use App\Http\Requests\JobIndexRequest;

    $input = 'block w-full min-h-11 border-gray-300 focus:border-indigo-500 focus:ring-indigo-500 rounded-lg shadow-sm';
    $activeFilters = collect($filters)->except('search')->filter(fn ($v) => filled($v))->count();
@endphp

<x-app-layout title="Job cards">
    <x-slot name="header">
        <div class="flex items-center justify-between gap-3">
            <h1 class="text-xl font-semibold text-gray-900">
                {{ auth()->user()->isTechnician() ? 'My jobs' : 'Job cards' }}
            </h1>
            @can('create', App\Models\RepairJob::class)
                <a href="{{ route('jobs.create') }}"
                   class="inline-flex min-h-11 items-center gap-2 rounded-lg bg-indigo-600 px-4 text-sm font-semibold text-white hover:bg-indigo-500">
                    <span class="text-lg leading-none">+</span> New job card
                </a>
            @endcan
        </div>
    </x-slot>

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

        <form method="GET" action="{{ route('jobs.index') }}" x-data="{ open: {{ $activeFilters ? 'true' : 'false' }} }" class="mb-4 space-y-3">
            <div class="flex gap-2">
                <input type="search" name="search" value="{{ $filters['search'] ?? '' }}"
                       placeholder="Job no, phone, name or IMEI"
                       class="{{ $input }} min-h-12 text-lg">
                <button type="submit" class="min-h-12 shrink-0 rounded-lg bg-gray-800 px-5 font-semibold text-white hover:bg-gray-700">Search</button>
            </div>

            <button type="button" @click="open = !open" class="inline-flex min-h-10 items-center gap-2 rounded-lg px-1 text-sm font-semibold text-indigo-700">
                <span x-text="open ? 'Hide filters' : 'Filters'">Filters</span>
                @if ($activeFilters)
                    <span class="rounded-full bg-indigo-600 px-2 py-0.5 text-xs text-white">{{ $activeFilters }}</span>
                @endif
            </button>

            <div x-show="open" x-cloak class="grid gap-3 rounded-xl bg-white p-4 shadow-sm sm:grid-cols-2 lg:grid-cols-3">
                <div>
                    <x-input-label for="status" value="Status" />
                    <select id="status" name="status" class="{{ $input }} mt-1">
                        <option value="">All statuses</option>
                        <option value="{{ JobIndexRequest::OPEN }}" @selected(($filters['status'] ?? '') === JobIndexRequest::OPEN)>Not finished</option>
                        @foreach (JobStatus::cases() as $status)
                            <option value="{{ $status->value }}" @selected(($filters['status'] ?? '') === $status->value)>{{ $status->label() }}</option>
                        @endforeach
                    </select>
                </div>

                @if ($technicians->isNotEmpty())
                    <div>
                        <x-input-label for="technician" value="Technician" />
                        <select id="technician" name="technician" class="{{ $input }} mt-1">
                            <option value="">All technicians</option>
                            <option value="none" @selected(($filters['technician'] ?? '') === 'none')>Not assigned</option>
                            @foreach ($technicians as $tech)
                                <option value="{{ $tech->id }}" @selected((string) ($filters['technician'] ?? '') === (string) $tech->id)>
                                    {{ $tech->name }}{{ $tech->is_active ? '' : ' (inactive)' }}
                                </option>
                            @endforeach
                        </select>
                    </div>
                @endif

                <div>
                    <x-input-label for="device_type" value="Device type" />
                    <select id="device_type" name="device_type" class="{{ $input }} mt-1">
                        <option value="">All types</option>
                        @foreach ($types as $type)
                            <option value="{{ $type->id }}" @selected((string) ($filters['device_type'] ?? '') === (string) $type->id)>{{ $type->name }}</option>
                        @endforeach
                    </select>
                </div>

                <div>
                    <x-input-label for="from" value="Received from" />
                    <input id="from" name="from" type="date" class="{{ $input }} mt-1" value="{{ $filters['from'] ?? '' }}">
                </div>
                <div>
                    <x-input-label for="to" value="Received to" />
                    <input id="to" name="to" type="date" class="{{ $input }} mt-1" value="{{ $filters['to'] ?? '' }}">
                    <x-input-error :messages="$errors->get('to')" class="mt-2" />
                </div>

                <label class="flex min-h-11 items-center gap-3 self-end">
                    <input type="checkbox" name="urgent" value="1" @checked($filters['urgent'] ?? false)
                           class="h-5 w-5 rounded border-gray-300 text-red-600 focus:ring-red-500">
                    <span class="font-medium text-gray-800">Urgent only</span>
                </label>

                <label class="flex min-h-11 items-center gap-3 self-end">
                    <input type="checkbox" name="overdue" value="1" @checked($filters['overdue'] ?? false)
                           class="h-5 w-5 rounded border-gray-300 text-red-600 focus:ring-red-500">
                    <span class="font-medium text-gray-800">Overdue only <span class="font-normal text-gray-500">(past expected date)</span></span>
                </label>

                <div class="flex gap-2 sm:col-span-2 lg:col-span-3">
                    <button type="submit" class="min-h-11 flex-1 rounded-lg bg-indigo-600 px-5 font-semibold text-white hover:bg-indigo-500 sm:flex-none">Apply filters</button>
                    <a href="{{ route('jobs.index') }}" class="inline-flex min-h-11 items-center rounded-lg border border-gray-300 bg-white px-5 font-semibold text-gray-700 hover:bg-gray-50">Clear</a>
                </div>
            </div>
        </form>

        <p class="mb-2 text-sm text-gray-500">{{ $jobs->total() }} {{ Str::plural('job', $jobs->total()) }}</p>

        @if ($jobs->isEmpty())
            <div class="rounded-xl bg-white p-8 text-center text-gray-500 shadow-sm">
                {{ auth()->user()->isTechnician() ? 'No jobs are assigned to you yet.' : 'No jobs found.' }}
            </div>
        @else
            <ul class="divide-y divide-gray-100 overflow-hidden rounded-xl bg-white shadow-sm">
                @foreach ($jobs as $job)
                    <li>@include('jobs.partials.row')</li>
                @endforeach
            </ul>

            <div class="mt-4">{{ $jobs->links() }}</div>
        @endif
    </div>
</x-app-layout>