@php
    use Illuminate\Support\Carbon;

    // Labels come from Job::STATUS_LABELS so the board can never disagree with
    // the model about what a status is called.
    $statusMeta = [
        'pending'              => ['label' => App\Models\Job::statusLabel('pending'),              'color' => 'slate',   'dot' => 'bg-slate-400'],
        'in_production'        => ['label' => App\Models\Job::statusLabel('in_production'),        'color' => 'sky',     'dot' => 'bg-sky-500'],
        'on_hold'              => ['label' => App\Models\Job::statusLabel('on_hold'),              'color' => 'amber',   'dot' => 'bg-amber-500'],
        'completed'            => ['label' => App\Models\Job::statusLabel('completed'),            'color' => 'emerald', 'dot' => 'bg-emerald-500'],
        'ready_for_collection' => ['label' => App\Models\Job::statusLabel('ready_for_collection'), 'color' => 'amber',   'dot' => 'bg-amber-400'],
        'delivered'            => ['label' => App\Models\Job::statusLabel('delivered'),            'color' => 'violet',  'dot' => 'bg-violet-500'],
        'closed'               => ['label' => App\Models\Job::statusLabel('closed'),               'color' => 'slate',   'dot' => 'bg-slate-500'],
        'cancelled'            => ['label' => App\Models\Job::statusLabel('cancelled'),            'color' => 'rose',    'dot' => 'bg-rose-400'],
    ];

    // The counter-facing state: a job sitting here is finished work waiting on
    // the customer, and the board has to say so at a glance.
    $isReady = fn ($job) => $job->status === 'ready_for_collection';

    // Commercial state (spec §2), the funding dimension, separate from status.
    $commercialMeta = [
        'not_funded'   => ['label' => __('Not Funded'),   'color' => 'slate'],
        'deposit_paid' => ['label' => __('Deposit Paid'), 'color' => 'amber'],
        'fully_paid'   => ['label' => __('Fully Paid'),   'color' => 'emerald'],
    ];

    // Categories carry no colour of their own, derive a stable accent so the
    // board reads like the reference (each category keeps one consistent hue).
    $categoryPalette = ['indigo', 'sky', 'violet', 'emerald', 'amber', 'rose'];
    $categoryColor = function ($category) use ($categoryPalette) {
        if (! $category) {
            return 'slate';
        }
        return $categoryPalette[$category->id % count($categoryPalette)];
    };

    // Kanban progress bar takes the column's status colour (solid).
    $kanbanBar = fn ($job) => [
        'pending'              => 'bg-slate-300',
        'in_production'        => 'bg-sky-500',
        'on_hold'              => 'bg-amber-500',
        'completed'            => 'bg-emerald-500',
        'ready_for_collection' => 'bg-amber-400',
        'delivered'            => 'bg-emerald-500',
        'closed'               => 'bg-slate-500',
    ][$job->status] ?? 'bg-slate-300';

    // Relative due-date pill text + colour. Once the work is made the due date
    // stops being a countdown and the cell just states where the job is —
    // except at the counter, where "waiting for the customer" is the point.
    $dueMeta = function ($job) use ($statusMeta) {
        if ($job->status === 'ready_for_collection') {
            return ['label' => $statusMeta[$job->status]['label'], 'cls' => 'text-amber-600 font-medium'];
        }
        if (in_array($job->status, ['completed', 'delivered', 'closed'], true)) {
            return ['label' => $statusMeta[$job->status]['label'], 'cls' => 'text-emerald-600'];
        }
        if (! $job->due_date) {
            return ['label' => '—', 'cls' => 'text-slate-400'];
        }
        $days = (int) Carbon::today()->diffInDays($job->due_date->copy()->startOfDay(), false);
        if ($days < 0) {
            return ['label' => __(':n days overdue', ['n' => abs($days)]), 'cls' => 'text-rose-600 font-medium'];
        }
        if ($days === 0) {
            return ['label' => __('Due today'), 'cls' => 'text-rose-600 font-medium'];
        }
        if ($days === 1) {
            return ['label' => __('1 day left'), 'cls' => 'text-rose-500'];
        }
        if ($days <= 3) {
            return ['label' => __(':n days left', ['n' => $days]), 'cls' => 'text-amber-600'];
        }
        return ['label' => __(':n days left', ['n' => $days]), 'cls' => 'text-slate-400'];
    };

    $progressBar = fn ($job) => in_array($job->status, ['completed', 'delivered', 'closed'], true)
        ? 'bg-emerald-500'
        : ($job->status === 'ready_for_collection'
            ? 'bg-amber-400'
            : 'bg-gradient-to-r from-indigo-500 to-violet-500');

    $sparkStroke = [
        'indigo' => '#124a61', 'sky' => '#0ea5e9', 'amber' => '#f59e0b',
        'emerald' => '#10b981', 'violet' => '#8b5cf6', 'slate' => '#94a3b8',
    ];
@endphp

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

        <x-page-header :title="__('Jobs')" :subtitle="__('Track production jobs from intake through delivery.')">
            {{-- On a phone the toggle keeps only its icons and "New Job" takes the
                 rest of the row, so the toolbar never widens the page. --}}
            <div class="flex w-full flex-wrap items-center gap-2 sm:w-auto sm:gap-3">
                <!-- View toggle -->
                <div class="inline-flex shrink-0 rounded-xl border border-slate-200 bg-slate-50 p-1">
                    <button
                        type="button"
                        wire:click="setView('list')"
                        title="{{ __('List View') }}"
                        aria-label="{{ __('List View') }}"
                        class="inline-flex items-center gap-1.5 rounded-lg px-2.5 py-1.5 text-sm font-medium transition sm:px-3 {{ $viewMode === 'list' ? 'bg-white text-indigo-600 shadow-sm ring-1 ring-slate-200' : 'text-slate-500 hover:text-slate-700' }}"
                    >
                        <x-icon name="bars-3" class="h-4 w-4" />
                        <span class="hidden lg:inline">{{ __('List View') }}</span>
                    </button>
                    <button
                        type="button"
                        wire:click="setView('kanban')"
                        title="{{ __('Kanban View') }}"
                        aria-label="{{ __('Kanban View') }}"
                        class="inline-flex items-center gap-1.5 rounded-lg px-2.5 py-1.5 text-sm font-medium transition sm:px-3 {{ $viewMode === 'kanban' ? 'bg-white text-indigo-600 shadow-sm ring-1 ring-slate-200' : 'text-slate-500 hover:text-slate-700' }}"
                    >
                        <x-icon name="squares-2x2" class="h-4 w-4" />
                        <span class="hidden lg:inline">{{ __('Kanban View') }}</span>
                    </button>
                </div>

                @if ($canManage)
                    <x-secondary-button wire:click="create" type="button" title="{{ __('Link a job to an existing invoice') }}" class="shrink-0">
                        <x-icon name="link" class="-ms-1 me-1.5 h-4 w-4" />
                        <span class="hidden sm:inline">{{ __('From invoice') }}</span>
                        <span class="sm:hidden">{{ __('Invoice') }}</span>
                    </x-secondary-button>
                    <a href="{{ route('jobs.create') }}" wire:navigate class="ms-auto shrink-0 sm:ms-0">
                        <x-button type="button">
                            <x-icon name="plus" class="-ms-1 me-1.5 h-4 w-4" />
                            {{ __('New Job') }}
                        </x-button>
                    </a>
                @endif
            </div>
        </x-page-header>

        <!-- Summary scorecards -->
        <div class="grid grid-cols-2 gap-4 sm:grid-cols-3 xl:grid-cols-5">
            @foreach ($stats as $stat)
                @php
                    $pts = $stat['spark'];
                    $max = max($pts) ?: 1;
                    $w = 88; $h = 30; $n = count($pts);
                    $step = $n > 1 ? $w / ($n - 1) : 0;
                    $coords = [];
                    foreach ($pts as $i => $v) {
                        $x = round($i * $step, 1);
                        $y = round($h - ($v / $max) * ($h - 4) - 2, 1);
                        $coords[] = "{$x},{$y}";
                    }
                    $line = implode(' ', $coords);
                    $area = "0,{$h} " . $line . " {$w},{$h}";
                    $stroke = $sparkStroke[$stat['color']] ?? $sparkStroke['slate'];
                    $iconBg = [
                        'indigo' => 'bg-indigo-50 text-indigo-600', 'sky' => 'bg-sky-50 text-sky-600',
                        'amber' => 'bg-amber-50 text-amber-600', 'emerald' => 'bg-emerald-50 text-emerald-600',
                        'violet' => 'bg-violet-50 text-violet-600',
                    ][$stat['color']] ?? 'bg-slate-100 text-slate-600';
                    $gid = 'spark-' . $loop->index;
                @endphp
                <div wire:key="stat-{{ $loop->index }}" class="rounded-2xl bg-white p-4 ring-1 ring-slate-200 shadow-sm transition hover:shadow-md">
                    <div class="flex items-center gap-2">
                        <span class="flex h-9 w-9 shrink-0 items-center justify-center rounded-xl {{ $iconBg }}">
                            <x-icon :name="$stat['icon']" class="h-5 w-5" />
                        </span>
                        <p class="truncate text-xs font-medium text-slate-500">{{ $stat['label'] }}</p>
                    </div>
                    <div class="mt-3 flex items-end justify-between gap-2">
                        <div class="min-w-0">
                            <p class="text-2xl font-bold tracking-tight text-slate-900">{{ $stat['count'] }}</p>
                            <p class="mt-0.5 truncate text-[11px] text-slate-400">{{ $stat['caption'] }}</p>
                        </div>
                        <svg viewBox="0 0 {{ $w }} {{ $h }}" class="h-8 w-20 shrink-0" preserveAspectRatio="none" aria-hidden="true">
                            <defs>
                                <linearGradient id="{{ $gid }}" x1="0" y1="0" x2="0" y2="1">
                                    <stop offset="0%" stop-color="{{ $stroke }}" stop-opacity="0.18" />
                                    <stop offset="100%" stop-color="{{ $stroke }}" stop-opacity="0" />
                                </linearGradient>
                            </defs>
                            <polygon points="{{ $area }}" fill="url(#{{ $gid }})" />
                            <polyline points="{{ $line }}" fill="none" stroke="{{ $stroke }}" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
                        </svg>
                    </div>
                </div>
            @endforeach
        </div>

        <!-- Production performance (§12, shared S8 metrics, current month) -->
        @php
            $prodChip = [
                'indigo' => 'bg-indigo-50 text-indigo-600', 'sky' => 'bg-sky-50 text-sky-600',
                'amber' => 'bg-amber-50 text-amber-600', 'emerald' => 'bg-emerald-50 text-emerald-600',
                'rose' => 'bg-rose-50 text-rose-600', 'violet' => 'bg-violet-50 text-violet-600',
                'slate' => 'bg-slate-100 text-slate-600',
            ];
            $onTime = (float) $production['on_time_pct'];
            $onTimeOk = $onTime >= (float) $production['on_time_target_pct'];
            $reworkHigh = (bool) $production['high_rework'];
            $prodTiles = [
                ['label' => __('On-Time Delivery'), 'value' => number_format($onTime, 1) . '%', 'icon' => 'check-circle', 'color' => $onTimeOk ? 'emerald' : 'amber', 'note' => __('target :t%', ['t' => number_format((float) $production['on_time_target_pct'], 0)])],
                ['label' => __('Rework Rate'), 'value' => number_format((float) $production['rework_pct'], 1) . '%', 'icon' => 'arrow-path', 'color' => $reworkHigh ? 'rose' : ((float) $production['rework_pct'] > 0 ? 'amber' : 'emerald'), 'note' => __(':n reworked', ['n' => $production['rework_jobs']])],
                ['label' => __('Avg Turnaround'), 'value' => number_format((float) $production['avg_turnaround_days'], 1) . ' ' . __('days'), 'icon' => 'clock', 'color' => 'sky', 'note' => __('start → done')],
                ['label' => __('Overdue'), 'value' => (string) $production['overdue'], 'icon' => 'exclamation-triangle', 'color' => $production['overdue'] > 0 ? 'rose' : 'emerald', 'note' => __('open & past due')],
                ['label' => __('Billable Hours'), 'value' => number_format((float) $production['billable_hours'], 1), 'icon' => 'clock', 'color' => 'amber', 'note' => __(':p% of :t hrs', ['p' => number_format((float) $production['billable_pct'], 0), 't' => number_format((float) $production['job_hours'], 1)])],
            ];
            // Cost-vs-estimate is a money variance, hidden from Production users.
            if ($canViewCostVariance) {
                $prodTiles[] = ['label' => __('Cost vs Estimate'), 'value' => ($production['cost_variance'] > 0 ? '+' : '') . $production['base_currency'] . ' ' . number_format((float) $production['cost_variance'], 2), 'icon' => 'calculator', 'color' => $production['cost_variance'] > 0 ? 'rose' : 'emerald', 'note' => __(':n with estimate', ['n' => $production['jobs_with_estimate']])];
            }
        @endphp
        <x-card class="p-5">
            <div class="flex items-center justify-between">
                <div>
                    <h2 class="text-sm font-bold uppercase tracking-wider text-slate-700">{{ __('Production Performance') }}</h2>
                    <p class="text-xs text-slate-400">{{ $productionPeriodLabel }} · {{ $production['jobs_completed'] }} {{ __('completed') }}</p>
                </div>
                @if ($reworkHigh)
                    <span class="rounded-full bg-rose-50 px-2.5 py-0.5 text-[11px] font-semibold text-rose-700 ring-1 ring-rose-600/20">{{ __('High rework') }}</span>
                @endif
            </div>
            <div class="mt-4 grid grid-cols-2 gap-4 sm:grid-cols-3 xl:grid-cols-6">
                @foreach ($prodTiles as $tile)
                    <div class="rounded-2xl bg-white p-4 ring-1 ring-slate-200/70">
                        <span class="flex h-9 w-9 items-center justify-center rounded-xl {{ $prodChip[$tile['color']] ?? $prodChip['slate'] }}">
                            <x-icon :name="$tile['icon']" class="h-5 w-5" />
                        </span>
                        <p class="mt-3 text-[11px] font-medium uppercase tracking-wider text-slate-500">{{ $tile['label'] }}</p>
                        <p class="mt-1 text-xl font-bold tracking-tight text-slate-900">{{ $tile['value'] }}</p>
                        <p class="mt-0.5 truncate text-[10px] text-slate-400">{{ $tile['note'] }}</p>
                    </div>
                @endforeach
            </div>
        </x-card>

        <!-- Filters -->
        @php
            // How many of the non-search filters are actually set. On a phone the
            // filter bank is folded away, so this count is the only signal that
            // the list you are looking at is a filtered one.
            $activeFilterCount = collect([$statusFilter, $categoryFilter, $customerFilter, $startDate, $endDate])
                ->filter(fn ($v) => filled($v))->count();
        @endphp
        <x-card x-data="{ filters: false }">
            {{-- Phone: search stays out, the filter bank folds behind a button so
                 the list starts near the top of the screen instead of five
                 full-width selects down. From lg the bank is always open and the
                 whole thing is the old single row. --}}
            <div class="flex items-center gap-2 p-4 pb-0 lg:hidden">
                <div class="relative min-w-0 flex-1">
                    <span class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3 text-slate-400">
                        <x-icon name="magnifying-glass" class="h-5 w-5" />
                    </span>
                    <input
                        type="search"
                        wire:model.live.debounce.300ms="search"
                        placeholder="{{ __('Search jobs…') }}"
                        class="block w-full rounded-xl border-slate-300 pl-10 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500"
                    />
                </div>
                <button
                    type="button"
                    @click="filters = ! filters"
                    :aria-expanded="filters"
                    class="relative inline-flex h-10 shrink-0 items-center gap-1.5 rounded-xl border border-slate-300 bg-white px-3 text-sm font-medium text-slate-600 shadow-sm transition active:bg-slate-50"
                >
                    <x-icon name="funnel" class="h-4 w-4" />
                    {{ __('Filters') }}
                    @if ($activeFilterCount > 0)
                        <span class="absolute -right-1.5 -top-1.5 flex h-5 min-w-[1.25rem] items-center justify-center rounded-full bg-indigo-600 px-1 text-[10px] font-bold text-white ring-2 ring-white">{{ $activeFilterCount }}</span>
                    @endif
                </button>
            </div>

            {{-- One filter bank, not two: `hidden`/`flex` is bound so the phone can
                 fold it, and `lg:flex` (a later rule than `hidden`) forces it back
                 open on a laptop whatever Alpine put there. Duplicating the markup
                 instead would ship the whole customer list twice. --}}
            <div
                :class="filters ? 'flex' : 'hidden'"
                class="hidden flex-col gap-3 p-4 lg:flex lg:flex-row lg:flex-wrap lg:items-center"
            >
                <div class="relative hidden min-w-0 flex-1 lg:block lg:max-w-xs">
                    <span class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3 text-slate-400">
                        <x-icon name="magnifying-glass" class="h-5 w-5" />
                    </span>
                    <input
                        type="text"
                        wire:model.live.debounce.300ms="search"
                        placeholder="{{ __('Search by job number, title or customer...') }}"
                        class="block w-full rounded-xl border-slate-300 pl-10 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500"
                    />
                </div>

                <select wire:model.live="statusFilter" class="w-full rounded-xl border-slate-300 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500 lg:w-40">
                    <option value="">{{ __('All statuses') }}</option>
                    @foreach ($statuses as $s)
                        <option value="{{ $s }}">{{ $statusMeta[$s]['label'] ?? $s }}</option>
                    @endforeach
                </select>

                <select wire:model.live="categoryFilter" class="w-full rounded-xl border-slate-300 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500 lg:w-44">
                    <option value="">{{ __('All job categories') }}</option>
                    @foreach ($categories as $category)
                        <option value="{{ $category->id }}">{{ $category->name }}</option>
                    @endforeach
                </select>

                <select wire:model.live="customerFilter" class="w-full rounded-xl border-slate-300 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500 lg:w-44">
                    <option value="">{{ __('All customers') }}</option>
                    @foreach ($customers as $customer)
                        <option value="{{ $customer->id }}">{{ $customer->name }}</option>
                    @endforeach
                </select>

                <div class="flex min-w-0 items-center gap-2">
                    <input type="date" wire:model.live="startDate" class="w-full min-w-0 rounded-xl border-slate-300 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500 lg:w-36" />
                    <span class="shrink-0 text-slate-400">&ndash;</span>
                    <input type="date" wire:model.live="endDate" class="w-full min-w-0 rounded-xl border-slate-300 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500 lg:w-36" />
                </div>

                @if ($hasActiveFilters)
                    <button type="button" wire:click="clearFilters" class="inline-flex items-center justify-center gap-1.5 rounded-xl px-3 py-2 text-sm font-medium text-slate-500 ring-1 ring-slate-200 transition hover:bg-slate-50 hover:text-slate-700">
                        <x-icon name="x-mark" class="h-4 w-4" />
                        {{ __('Clear') }}
                    </button>
                @endif
            </div>
        </x-card>

        @if ($viewMode === 'kanban')
            <!-- Kanban board -->
            <div
                x-data="{ dragId: null, over: null }"
                {{-- Eight workflow columns, laid out four-up so the board reads as
                     two tidy rows: work in progress, then hand-over and archive. --}}
                class="grid grid-cols-1 gap-4 md:grid-cols-2 xl:grid-cols-4"
            >
                @foreach ($statuses as $col)
                    @php $cards = $board[$col] ?? collect(); @endphp
                    <div
                        wire:key="col-{{ $col }}"
                        class="flex flex-col rounded-2xl bg-slate-100/70 p-3 transition"
                        :class="over === '{{ $col }}' && dragId ? 'ring-2 ring-indigo-400 ring-inset bg-indigo-50/60' : ''"
                        @dragover.prevent="over = '{{ $col }}'"
                        @dragleave="if (over === '{{ $col }}') over = null"
                        @drop.prevent="if (dragId) { $wire.moveTo(dragId, '{{ $col }}'); dragId = null } over = null"
                    >
                        <div class="mb-3 flex items-center justify-between px-1">
                            <span class="inline-flex items-center gap-2 text-sm font-semibold text-slate-700">
                                <span class="h-2.5 w-2.5 rounded-full {{ $statusMeta[$col]['dot'] }}"></span>
                                {{ $statusMeta[$col]['label'] }}
                                <span class="rounded-full bg-white px-1.5 text-xs font-medium text-slate-400 ring-1 ring-slate-200">{{ $cards->count() }}</span>
                            </span>
                            @if ($canManage)
                                <button type="button" wire:click="create('{{ $col }}')" class="flex h-6 w-6 items-center justify-center rounded-lg text-slate-400 transition hover:bg-white hover:text-indigo-600" title="{{ __('Add job') }}">
                                    <x-icon name="plus" class="h-4 w-4" />
                                </button>
                            @endif
                        </div>

                        <div class="space-y-3">
                            @forelse ($cards as $job)
                                @php $p = (int) $job->progress; $showCurrency = $job->currency_code && $job->currency_code !== $baseCurrency; @endphp
                                <div
                                    wire:key="card-{{ $job->id }}"
                                    @if ($canManage)
                                        draggable="true"
                                        @dragstart="dragId = {{ $job->id }}"
                                        @dragend="dragId = null"
                                    @endif
                                    class="group rounded-xl border border-slate-200 bg-white p-4 shadow-sm transition hover:-translate-y-0.5 hover:border-indigo-200 hover:shadow-md {{ $canManage ? 'cursor-grab active:cursor-grabbing' : '' }}"
                                    :class="dragId === {{ $job->id }} ? 'opacity-50 rotate-1' : ''"
                                >
                                    <div class="flex items-start justify-between gap-2">
                                        <a href="{{ route('jobs.show', $job) }}" class="min-w-0 flex-1 truncate text-sm font-semibold text-slate-900 hover:text-indigo-600">{{ $job->title }}</a>
                                        <x-notes-button :for="$job" size="sm" class="-mr-0.5 shrink-0" />
                                        @if ($canManage)
                                            <x-dropdown align="right" width="48">
                                                <x-slot name="trigger">
                                                    <button type="button" class="-mr-1 flex h-7 w-7 shrink-0 items-center justify-center rounded-lg text-slate-300 transition hover:bg-slate-50 hover:text-slate-600">
                                                        <x-icon name="ellipsis-horizontal" class="h-5 w-5" />
                                                    </button>
                                                </x-slot>
                                                <x-slot name="content">
                                                    <a href="{{ route('jobs.show', $job) }}" class="block px-4 py-2 text-sm text-slate-700 hover:bg-slate-50">{{ __('View') }}</a>
                                                    <button type="button" wire:click="edit({{ $job->id }})" class="block w-full px-4 py-2 text-left text-sm text-slate-700 hover:bg-slate-50">{{ __('Edit') }}</button>
                                                    <div class="my-1 border-t border-slate-100"></div>
                                                    {{-- Only the moves the FRS §3 workflow allows from here, so the
                                                         menu never offers a jump the gate would just refuse. --}}
                                                    <p class="px-4 pb-1 pt-1 text-[10px] font-semibold uppercase tracking-wider text-slate-400">{{ __('Move to') }}</p>
                                                    @forelse ($job->allowedTransitions() as $target)
                                                        <button type="button" wire:click="moveTo({{ $job->id }}, '{{ $target }}')" class="block w-full px-4 py-2 text-left text-sm text-slate-700 hover:bg-slate-50">{{ $statusMeta[$target]['label'] ?? $target }}</button>
                                                    @empty
                                                        <p class="px-4 py-2 text-sm text-slate-400">{{ __('This job is finished.') }}</p>
                                                    @endforelse
                                                    @if ($canDelete)
                                                        <div class="my-1 border-t border-slate-100"></div>
                                                        <button type="button" wire:click="delete({{ $job->id }})" wire:confirm="{{ __('Are you sure you want to delete this job?') }}" class="block w-full px-4 py-2 text-left text-sm text-rose-600 hover:bg-rose-50">{{ __('Delete') }}</button>
                                                    @endif
                                                </x-slot>
                                            </x-dropdown>
                                        @endif
                                    </div>

                                    <a href="{{ route('jobs.show', $job) }}" class="mt-0.5 block text-xs font-medium text-indigo-500 hover:text-indigo-600">{{ $job->job_number }}</a>
                                    <p class="mt-1 truncate text-xs text-slate-500">{{ $job->customer?->name ?: __('No customer') }}</p>

                                    @if ($job->due_date)
                                        <p class="mt-2 inline-flex items-center gap-1 text-xs text-slate-400">
                                            <x-icon name="calendar" class="h-3.5 w-3.5" />
                                            {{ $job->due_date->format('Y-m-d') }}
                                        </p>
                                    @endif

                                    @if ($job->category || $showCurrency)
                                        <div class="mt-2 flex flex-wrap items-center gap-1.5">
                                            @if ($showCurrency)
                                                <x-badge color="rose">{{ $job->currency_code }}</x-badge>
                                            @endif
                                            @if ($job->category)
                                                <x-badge :color="$categoryColor($job->category)">{{ $job->category->name }}</x-badge>
                                            @endif
                                        </div>
                                    @endif

                                    @if ($isReady($job))
                                        <div class="mt-2 flex items-start gap-1.5 rounded-lg bg-amber-50 px-2 py-1.5 text-xs font-medium text-amber-700">
                                            <x-icon name="bell" class="mt-0.5 h-3.5 w-3.5 shrink-0" />
                                            <span>{{ $job->completed_at ? __('Waiting since :date', ['date' => $job->completed_at->format('d M')]) : __('Waiting for the customer') }}</span>
                                        </div>
                                    @endif

                                    @if ($col === 'on_hold' && $job->description)
                                        <div class="mt-2 flex items-start gap-1.5 rounded-lg bg-amber-50 px-2 py-1.5 text-xs text-amber-700">
                                            <x-icon name="exclamation-triangle" class="mt-0.5 h-3.5 w-3.5 shrink-0" />
                                            <span class="line-clamp-2">{{ $job->description }}</span>
                                        </div>
                                    @endif

                                    <div class="mt-3">
                                        <div class="flex items-center justify-between gap-2">
                                            <span class="text-sm font-semibold text-slate-800">
                                                @if ($job->value !== null)
                                                    {{ $job->value_currency }} {{ number_format($job->value, 2) }}
                                                    @if ((float) ($job->invoice?->refunded_total ?? 0) > 0)
                                                        <span class="block text-[11px] font-medium text-rose-500">− {{ $job->value_currency }} {{ number_format($job->invoice->refunded_total, 2) }} {{ __('refunded') }}</span>
                                                    @endif
                                                @else
                                                    <span class="text-slate-300">—</span>
                                                @endif
                                            </span>
                                            <span class="text-xs font-medium text-slate-400">{{ $p }}%</span>
                                        </div>
                                        <div class="mt-2 h-1.5 w-full overflow-hidden rounded-full bg-slate-100">
                                            <div class="h-full rounded-full {{ $kanbanBar($job) }} transition-all" style="width: {{ $p }}%"></div>
                                        </div>
                                    </div>
                                </div>
                            @empty
                                <p class="px-1 py-6 text-center text-xs text-slate-400">{{ __('No jobs') }}</p>
                            @endforelse
                        </div>

                        @if ($canManage)
                            <button type="button" wire:click="create('{{ $col }}')" class="mt-3 flex w-full items-center justify-center gap-1.5 rounded-xl border border-dashed border-slate-300 py-2 text-xs font-medium text-slate-400 transition hover:border-indigo-300 hover:text-indigo-600">
                                <x-icon name="plus" class="h-4 w-4" />
                                {{ __('Add Job') }}
                            </button>
                        @endif
                    </div>
                @endforeach
            </div>

            <!-- Legend -->
            <div class="mt-5 flex flex-wrap items-center justify-center gap-4 text-xs text-slate-500">
                @foreach ($statuses as $s)
                    <span class="inline-flex items-center gap-1.5">
                        <span class="h-2 w-2 rounded-full {{ $statusMeta[$s]['dot'] }}"></span>
                        {{ $statusMeta[$s]['label'] }}
                    </span>
                @endforeach
            </div>
        @else
            <!-- List view -->
            @php
                $sortIcon = fn ($field) => $sortField === $field
                    ? ($sortDirection === 'asc' ? '▲' : '▼')
                    : '';
            @endphp

            <x-card>
                @if (count($selected) > 0)
                    <div class="flex items-center justify-between gap-3 border-b border-slate-100 bg-indigo-50/60 px-6 py-3">
                        <p class="text-sm font-medium text-indigo-700">{{ __(':count selected', ['count' => count($selected)]) }}</p>
                        <div class="flex items-center gap-3">
                            <button type="button" wire:click="$set('selected', [])" class="text-sm font-medium text-slate-500 hover:text-slate-700">{{ __('Clear') }}</button>
                            @if ($canDelete)
                                <button type="button" wire:click="deleteSelected" wire:confirm="{{ __('Delete the selected jobs?') }}" class="inline-flex items-center gap-1.5 rounded-lg bg-rose-600 px-3 py-1.5 text-sm font-medium text-white transition hover:bg-rose-700">
                                    <x-icon name="trash" class="h-4 w-4" />
                                    {{ __('Delete selected') }}
                                </button>
                            @endif
                        </div>
                    </div>
                @endif

                <div class="hidden overflow-x-auto sm:block">
                    <table class="min-w-full divide-y divide-slate-100">
                        <thead>
                            <tr class="bg-slate-50/80">
                                <th class="w-10 px-3 lg:px-4 py-3.5">
                                    <input type="checkbox"
                                        @change="$wire.set('selected', $event.target.checked ? @js($jobs->pluck('id')->values()) : [])"
                                        @checked(count($selected) > 0 && count($selected) >= $jobs->count())
                                        class="rounded border-slate-300 text-indigo-600 focus:ring-indigo-500" />
                                </th>
                                <th class="px-3 lg:px-4 py-3.5 text-left">
                                    <button type="button" wire:click="sortBy('job_number')" class="inline-flex items-center gap-1 text-xs font-semibold uppercase tracking-wider text-slate-500 hover:text-slate-700">
                                        {{ __('Job No.') }} <span class="text-indigo-500">{{ $sortIcon('job_number') }}</span>
                                    </button>
                                </th>
                                <th class="px-3 lg:px-4 py-3.5 text-left text-xs font-semibold uppercase tracking-wider text-slate-500">{{ __('Title / Customer') }}</th>
                                <th class="px-3 lg:px-4 py-3.5 text-left">
                                    <button type="button" wire:click="sortBy('status')" class="inline-flex items-center gap-1 text-xs font-semibold uppercase tracking-wider text-slate-500 hover:text-slate-700">
                                        {{ __('Status') }} <span class="text-indigo-500">{{ $sortIcon('status') }}</span>
                                    </button>
                                </th>
                                <th class="px-3 lg:px-4 py-3.5 text-left text-xs font-semibold uppercase tracking-wider text-slate-500">{{ __('Category') }}</th>
                                <th class="px-3 lg:px-4 py-3.5 text-left">
                                    <button type="button" wire:click="sortBy('due_date')" class="inline-flex items-center gap-1 text-xs font-semibold uppercase tracking-wider text-slate-500 hover:text-slate-700">
                                        {{ __('Due Date') }} <span class="text-indigo-500">{{ $sortIcon('due_date') }}</span>
                                    </button>
                                </th>
                                <th class="px-3 lg:px-4 py-3.5 text-right text-xs font-semibold uppercase tracking-wider text-slate-500">{{ __('Value') }}</th>
                                <th class="px-3 lg:px-4 py-3.5 text-left">
                                    <button type="button" wire:click="sortBy('progress')" class="inline-flex items-center gap-1 text-xs font-semibold uppercase tracking-wider text-slate-500 hover:text-slate-700">
                                        {{ __('Progress') }} <span class="text-indigo-500">{{ $sortIcon('progress') }}</span>
                                    </button>
                                </th>
                                <th class="px-3 lg:px-4 py-3.5 text-right text-xs font-semibold uppercase tracking-wider text-slate-500">{{ __('Actions') }}</th>
                            </tr>
                        </thead>
                        <tbody class="divide-y divide-slate-100">
                            @forelse ($jobs as $job)
                                @php $due = $dueMeta($job); $p = (int) $job->progress; @endphp
                                <tr wire:key="job-{{ $job->id }}" class="transition-colors hover:bg-slate-50/70">
                                    <td class="px-3 lg:px-4 py-4">
                                        <input type="checkbox" value="{{ $job->id }}" wire:model.live="selected" class="rounded border-slate-300 text-indigo-600 focus:ring-indigo-500" />
                                    </td>
                                    <td class="whitespace-nowrap px-3 lg:px-4 py-4">
                                        <a href="{{ route('jobs.show', $job) }}" class="text-sm font-semibold text-indigo-600 hover:text-indigo-700">{{ $job->job_number }}</a>
                                        <p class="text-xs text-slate-400">#{{ $job->id }}</p>
                                    </td>
                                    <td class="px-3 lg:px-4 py-4">
                                        <p class="text-sm font-medium text-slate-800">{{ $job->title }}</p>
                                        <p class="text-xs text-slate-400">{{ $job->customer?->name ?: __('No customer') }}</p>
                                    </td>
                                    <td class="whitespace-nowrap px-3 lg:px-4 py-4">
                                        <div class="flex flex-col items-start gap-1">
                                            <x-badge :color="$statusMeta[$job->status]['color'] ?? 'slate'">
                                                <span class="h-1.5 w-1.5 rounded-full {{ $statusMeta[$job->status]['dot'] ?? 'bg-slate-400' }}"></span>
                                                {{ $statusMeta[$job->status]['label'] ?? $job->status }}
                                            </x-badge>
                                            <x-badge :color="$commercialMeta[$job->commercial_state]['color'] ?? 'slate'">
                                                {{ $commercialMeta[$job->commercial_state]['label'] ?? __('Not Funded') }}
                                            </x-badge>
                                        </div>
                                    </td>
                                    <td class="whitespace-nowrap px-3 lg:px-4 py-4">
                                        @if ($job->category)
                                            <x-badge :color="$categoryColor($job->category)">{{ $job->category->name }}</x-badge>
                                        @else
                                            <span class="text-sm text-slate-300">—</span>
                                        @endif
                                    </td>
                                    <td class="whitespace-nowrap px-3 lg:px-4 py-4">
                                        <p class="text-sm text-slate-600">{{ $job->due_date?->format('Y-m-d') ?: '—' }}</p>
                                        <p class="text-xs {{ $due['cls'] }}">{{ $due['label'] }}</p>
                                    </td>
                                    <td class="whitespace-nowrap px-3 lg:px-4 py-4 text-right text-sm font-medium tabular-nums text-slate-700">
                                        @if ($job->value !== null)
                                            {{ $job->value_currency }} {{ number_format($job->value, 2) }}
                                            @if ((float) ($job->invoice?->refunded_total ?? 0) > 0)
                                                <span class="block text-[11px] font-medium text-rose-500">− {{ $job->value_currency }} {{ number_format($job->invoice->refunded_total, 2) }} {{ __('refunded') }}</span>
                                            @endif
                                        @else
                                            <span class="text-slate-300">—</span>
                                        @endif
                                    </td>
                                    <td class="whitespace-nowrap px-3 lg:px-4 py-4">
                                        <div class="flex items-center gap-2">
                                            <div class="h-1.5 w-24 overflow-hidden rounded-full bg-slate-100">
                                                <div class="h-full rounded-full {{ $progressBar($job) }}" style="width: {{ $p }}%"></div>
                                            </div>
                                            <span class="w-8 text-xs font-medium text-slate-500">{{ $p }}%</span>
                                        </div>
                                    </td>
                                    <td class="whitespace-nowrap px-3 lg:px-4 py-4 text-right">
                                        <div class="flex items-center justify-end gap-1">
                                            <x-notes-button :for="$job" />
                                            @if ($canManage)
                                                <button type="button" wire:click="edit({{ $job->id }})" class="flex h-8 w-8 items-center justify-center rounded-lg text-slate-400 transition hover:bg-indigo-50 hover:text-indigo-600" title="{{ __('Edit') }}">
                                                    <x-icon name="pencil-square" class="h-4 w-4" />
                                                </button>
                                            @endif
                                            @if ($canDelete)
                                                <button type="button" wire:click="delete({{ $job->id }})" wire:confirm="{{ __('Are you sure you want to delete this job?') }}" class="flex h-8 w-8 items-center justify-center rounded-lg text-slate-400 transition hover:bg-rose-50 hover:text-rose-600" title="{{ __('Delete') }}">
                                                    <x-icon name="trash" class="h-4 w-4" />
                                                </button>
                                            @endif
                                        </div>
                                    </td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="9" class="px-3 lg:px-4 py-12">
                                        <x-empty-state
                                            icon="briefcase"
                                            :title="__('No jobs found')"
                                            :message="__('Try adjusting your search or filters, or create a new job to get started.')"
                                            class="border-0"
                                        >
                                            @if ($canManage)
                                                <x-button wire:click="create" type="button">
                                                    <x-icon name="plus" class="-ms-1 me-1.5 h-4 w-4" />
                                                    {{ __('New Job') }}
                                                </x-button>
                                            @endif
                                        </x-empty-state>
                                    </td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>

                <!-- Cards (mobile) -->
                <div class="divide-y divide-slate-100 sm:hidden">
                    @forelse ($jobs as $job)
                        @php $due = $dueMeta($job); $p = (int) $job->progress; @endphp
                        <div wire:key="job-mobile-{{ $job->id }}" class="p-4">
                            <div class="flex items-start justify-between gap-4">
                                <div class="min-w-0">
                                    <a href="{{ route('jobs.show', $job) }}" class="text-sm font-semibold text-slate-900">{{ $job->title }}</a>
                                    <a href="{{ route('jobs.show', $job) }}" class="block text-xs font-medium text-indigo-500 hover:text-indigo-600">{{ $job->job_number }}</a>
                                    <p class="truncate text-sm text-slate-500">{{ $job->customer?->name ?: '—' }}</p>
                                    <p class="mt-1.5 flex flex-wrap items-center gap-1.5">
                                        <x-badge :color="$statusMeta[$job->status]['color'] ?? 'slate'">
                                            <span class="h-1.5 w-1.5 rounded-full {{ $statusMeta[$job->status]['dot'] ?? 'bg-slate-400' }}"></span>
                                            {{ $statusMeta[$job->status]['label'] ?? $job->status }}
                                        </x-badge>
                                        @if ($job->category)
                                            <x-badge :color="$categoryColor($job->category)">{{ $job->category->name }}</x-badge>
                                        @endif
                                    </p>
                                    <div class="mt-2 flex items-center gap-2">
                                        <div class="h-1.5 w-24 overflow-hidden rounded-full bg-slate-100">
                                            <div class="h-full rounded-full {{ $progressBar($job) }}" style="width: {{ $p }}%"></div>
                                        </div>
                                        <span class="text-xs font-medium text-slate-500">{{ $p }}%</span>
                                    </div>
                                    <p class="mt-1 text-xs {{ $due['cls'] }}">{{ $due['label'] }}</p>
                                </div>
                                <div class="flex shrink-0 flex-col items-end gap-2 text-sm font-medium">
                                    @if ($job->value !== null)
                                        <div class="text-right">
                                            <span class="text-sm font-semibold text-slate-800">{{ $job->value_currency }} {{ number_format($job->value, 2) }}</span>
                                            @if ((float) ($job->invoice?->refunded_total ?? 0) > 0)
                                                <span class="block text-[11px] font-medium text-rose-500">− {{ $job->value_currency }} {{ number_format($job->invoice->refunded_total, 2) }} {{ __('refunded') }}</span>
                                            @endif
                                        </div>
                                    @endif
                                    <div class="flex items-center gap-1">
                                        <x-notes-button :for="$job" />
                                        @if ($canManage)
                                            <button type="button" wire:click="edit({{ $job->id }})" class="flex h-8 w-8 items-center justify-center rounded-lg text-slate-400 transition hover:bg-indigo-50 hover:text-indigo-600" title="{{ __('Edit') }}">
                                                <x-icon name="pencil-square" class="h-4 w-4" />
                                            </button>
                                        @endif
                                        @if ($canDelete)
                                            <button type="button" wire:click="delete({{ $job->id }})" wire:confirm="{{ __('Are you sure you want to delete this job?') }}" class="flex h-8 w-8 items-center justify-center rounded-lg text-slate-400 transition hover:bg-rose-50 hover:text-rose-600" title="{{ __('Delete') }}">
                                                <x-icon name="trash" class="h-4 w-4" />
                                            </button>
                                        @endif
                                    </div>
                                </div>
                            </div>
                        </div>
                    @empty
                        <div class="p-6">
                            <x-empty-state
                                icon="briefcase"
                                :title="__('No jobs found')"
                                :message="__('Try adjusting your search or filters, or create a new job to get started.')"
                                class="border-0"
                            >
                                @if ($canManage)
                                    <x-button wire:click="create" type="button">
                                        <x-icon name="plus" class="-ms-1 me-1.5 h-4 w-4" />
                                        {{ __('New Job') }}
                                    </x-button>
                                @endif
                            </x-empty-state>
                        </div>
                    @endforelse
                </div>

                @if ($jobs && $jobs->total() > 0)
                    <div class="flex flex-col gap-3 border-t border-slate-100 px-4 py-3 sm:flex-row sm:items-center sm:justify-between sm:px-6">
                        <div class="flex items-center gap-3 text-sm text-slate-500">
                            <span>{{ __('Showing :from to :to of :total jobs', ['from' => $jobs->firstItem(), 'to' => $jobs->lastItem(), 'total' => $jobs->total()]) }}</span>
                            <span class="hidden items-center gap-2 sm:inline-flex">
                                <span class="text-slate-400">{{ __('Rows per page') }}</span>
                                <select wire:model.live="perPage" class="rounded-lg border-slate-300 py-1 text-xs shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
                                    @foreach ([10, 25, 50, 100] as $size)
                                        <option value="{{ $size }}">{{ $size }}</option>
                                    @endforeach
                                </select>
                            </span>
                        </div>
                        <div>
                            {{ $jobs->onEachSide(1)->links() }}
                        </div>
                    </div>
                @endif
            </x-card>
        @endif
    </div>

    <!-- Create / Edit Modal -->
    <x-dialog-modal wire:model.live="showModal" maxWidth="2xl">
        <x-slot name="title">
            {{ $editingId ? __('Edit Job') : __('New Job') }}
        </x-slot>

        <x-slot name="content">
            <div class="grid grid-cols-1 gap-4">
                {{-- A job must originate from a sale: choose the invoice, then the product(s) it fulfils. --}}
                <div>
                    <x-label for="invoice_id" value="{{ __('Invoice') }}" />
                    <select id="invoice_id" wire:model.live="invoice_id" class="mt-1 block w-full rounded-xl border-slate-300 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
                        <option value="">{{ __('Select an invoice…') }}</option>
                        @foreach ($invoices as $invoice)
                            <option value="{{ $invoice->id }}">{{ $invoice->invoice_number }}@if ($invoice->customer), {{ $invoice->customer->name }}@endif</option>
                        @endforeach
                    </select>
                    <p class="mt-1 text-xs text-slate-400">{{ __('A job is created from a sale, pick the invoice it fulfils.') }}</p>
                    <x-input-error for="invoice_id" class="mt-2" />
                </div>

                @if ($invoice_id)
                    <div>
                        <x-label value="{{ __('Products on this invoice') }}" />
                        @if ($invoiceLineItems->isEmpty())
                            <p class="mt-1 rounded-xl border border-amber-200 bg-amber-50 px-3 py-2 text-sm text-amber-700">{{ __('This invoice has no line items to build a job from.') }}</p>
                        @else
                            <div class="mt-1 space-y-1 rounded-xl border border-slate-200 p-2">
                                @foreach ($invoiceLineItems as $item)
                                    <label class="flex cursor-pointer items-start gap-3 rounded-lg px-2 py-1.5 hover:bg-slate-50">
                                        <input type="checkbox" value="{{ $item->id }}" wire:model.live="selectedLineItems" class="mt-0.5 rounded border-slate-300 text-indigo-600 focus:ring-indigo-500" />
                                        <span class="text-sm leading-tight">
                                            <span class="font-medium text-slate-700">{{ $item->product?->name ?? $item->name }}</span>
                                            <span class="block text-xs text-slate-400">{{ rtrim(rtrim(number_format((float) $item->qty, 2), '0'), '.') }} &times; {{ number_format((float) $item->unit_price, 2) }}</span>
                                        </span>
                                    </label>
                                @endforeach
                            </div>
                        @endif
                        <p class="mt-1 text-xs text-slate-400">{{ __('Tick which product(s) this job is for.') }}</p>
                        <x-input-error for="selectedLineItems" class="mt-2" />
                    </div>
                @endif

                <div>
                    <x-label for="title" value="{{ __('Title') }}" />
                    <x-input id="title" type="text" class="mt-1 block w-full" wire:model="title" />
                    <x-input-error for="title" class="mt-2" />
                </div>

                <div>
                    <x-label for="description" value="{{ __('Description') }}" />
                    <textarea id="description" rows="2" wire:model="description" class="mt-1 block w-full rounded-xl border-slate-300 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500"></textarea>
                    <x-input-error for="description" class="mt-2" />
                </div>

                <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
                    <div>
                        <x-label value="{{ __('Customer') }}" />
                        <div class="mt-1 block w-full rounded-xl border border-slate-200 bg-slate-50 px-3 py-2 text-sm text-slate-600">
                            {{ $selectedInvoice?->customer?->name ?? __('— set from the invoice —') }}
                        </div>
                    </div>

                    <div>
                        <x-label for="job_category_id" value="{{ __('Category') }}" />
                        <select id="job_category_id" wire:model="job_category_id" class="mt-1 block w-full rounded-xl border-slate-300 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
                            <option value="">{{ __('Uncategorised') }}</option>
                            @foreach ($categories as $category)
                                <option value="{{ $category->id }}">{{ $category->name }}</option>
                            @endforeach
                        </select>
                        <x-input-error for="job_category_id" class="mt-2" />
                    </div>
                </div>

                <div class="grid grid-cols-1 gap-4 sm:grid-cols-3">
                    <div>
                        <x-label for="status" value="{{ __('Status') }}" />
                        <select id="status" wire:model="status" class="mt-1 block w-full rounded-xl border-slate-300 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
                            @foreach ($statuses as $s)
                                <option value="{{ $s }}">{{ $statusMeta[$s]['label'] ?? $s }}</option>
                            @endforeach
                        </select>
                        <x-input-error for="status" class="mt-2" />
                    </div>
                    <div>
                        <x-label for="priority" value="{{ __('Priority') }}" />
                        <select id="priority" wire:model="priority" class="mt-1 block w-full rounded-xl border-slate-300 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
                            @foreach ($priorities as $p)
                                <option value="{{ $p }}">{{ ucfirst($p) }}</option>
                            @endforeach
                        </select>
                        <x-input-error for="priority" class="mt-2" />
                    </div>
                    <div>
                        <x-label for="currency_code" value="{{ __('Currency') }}" />
                        <select id="currency_code" wire:model="currency_code" class="mt-1 block w-full rounded-xl border-slate-300 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
                            <option value="">{{ __('Select...') }}</option>
                            @foreach ($currencies as $currency)
                                <option value="{{ $currency->code }}">{{ $currency->code }}</option>
                            @endforeach
                        </select>
                        <x-input-error for="currency_code" class="mt-2" />
                    </div>
                </div>

                <div>
                    <x-label for="progress" value="{{ __('Progress') }}" />
                    <div class="mt-2 flex items-center gap-3">
                        <input id="progress" type="range" min="0" max="100" step="5" wire:model.live="progress" class="h-2 w-full cursor-pointer accent-indigo-600" />
                        <span class="w-12 shrink-0 text-right text-sm font-semibold text-slate-700">{{ $progress }}%</span>
                    </div>
                    <p class="mt-1 text-xs text-slate-400">{{ __('Completed and delivered jobs are always shown at 100%.') }}</p>
                    <x-input-error for="progress" class="mt-2" />
                </div>

                <div>
                    <x-label for="fulfilment" value="{{ __('Fulfilment') }}" />
                    <select id="fulfilment" wire:model.live="fulfilment" class="mt-1 block w-full rounded-xl border-slate-300 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
                        <option value="internal">{{ __('Internal, we do it all in-house') }}</option>
                        <option value="outsourced">{{ __('Outsourced, another company does it') }}</option>
                        <option value="hybrid">{{ __('Hybrid, partly in-house, partly outsourced') }}</option>
                    </select>
                    <p class="mt-1 text-xs text-slate-400">{{ __('Record the outsourced portion as a cost line linked to a supplier.') }}</p>
                    <x-input-error for="fulfilment" class="mt-2" />

                    {{-- A hybrid job does not name one partner: each product says
                         whether it is made in-house or sent out, and to whom. --}}
                    @if ($fulfilment === 'hybrid')
                        <p class="mt-3 rounded-xl bg-violet-50 px-3 py-2 text-xs text-violet-700">
                            {{ __('Once the job is saved, open its Products tab to mark which products go out and to which partner.') }}
                        </p>
                    @endif

                    @if ($fulfilment === 'outsourced')
                        <div class="mt-3">
                            <x-label for="partner_id" value="{{ __('Outsourcing partner') }}" />
                            <select id="partner_id" wire:model="partner_id" class="mt-1 block w-full rounded-xl border-slate-300 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
                                <option value="">{{ __('Select a partner...') }}</option>
                                @foreach ($partners as $partner)
                                    <option value="{{ $partner->id }}">{{ $partner->name }}@if ($partner->industry), {{ $partner->industry }}@endif</option>
                                @endforeach
                            </select>
                            @if ($partners->isEmpty())
                                <p class="mt-1 text-xs text-amber-600">{{ __('No partners yet.') }} <a href="{{ route('partners.index') }}" class="font-medium underline">{{ __('Add one') }}</a>.</p>
                            @else
                                <p class="mt-1 text-xs text-slate-400">{{ __('The company this job is outsourced to.') }}</p>
                            @endif
                            <x-input-error for="partner_id" class="mt-2" />
                        </div>
                    @endif
                </div>

                <div>
                    <x-label for="due_date" value="{{ __('Due Date') }}" />
                    <x-input id="due_date" type="date" class="mt-1 block w-full" wire:model="due_date" />
                    <x-input-error for="due_date" class="mt-2" />
                </div>
            </div>
        </x-slot>

        <x-slot name="footer">
            <x-secondary-button wire:click="closeModal" wire:loading.attr="disabled">
                {{ __('Cancel') }}
            </x-secondary-button>

            <x-button class="ms-3" wire:click="save" wire:loading.attr="disabled">
                {{ __('Save') }}
            </x-button>
        </x-slot>
    </x-dialog-modal>
</div>