@php
    use Illuminate\Support\Carbon;
    use Illuminate\Support\Str;

    // Labels come from Job::STATUS_LABELS; only the colours live here.
    $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'],
    ];
    // 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'],
    ];
    $priorityColor = ['low' => 'slate', 'normal' => 'sky', 'high' => 'amber', 'urgent' => 'rose'];
    $fulfilmentMeta = [
        'internal'   => ['label' => __('Internal'),   'color' => 'slate'],
        'outsourced' => ['label' => __('Outsourced'), 'color' => 'rose'],
        'hybrid'     => ['label' => __('Hybrid'),     'color' => 'violet'],
    ];

    $initials = function (?string $name): string {
        $words = preg_split('/\s+/', trim((string) $name)) ?: [];
        return strtoupper(Str::substr($words[0] ?? '?', 0, 1) . (isset($words[1]) ? Str::substr($words[1], 0, 1) : '')) ?: '?';
    };

    $dueLabel = null;
    // Once the work is made the countdown stops being the story.
    if ($job->due_date && ! in_array($job->status, ['completed', 'ready_for_collection', 'delivered', 'closed'], true)) {
        $d = (int) Carbon::today()->diffInDays($job->due_date->copy()->startOfDay(), false);
        if ($d < 0)       $dueLabel = ['t' => __(':n days overdue', ['n' => abs($d)]), 'c' => 'text-rose-500'];
        elseif ($d === 0) $dueLabel = ['t' => __('Due today'),                          'c' => 'text-rose-500'];
        elseif ($d <= 3)  $dueLabel = ['t' => __(':n days left', ['n' => $d]),           'c' => 'text-amber-600'];
        else              $dueLabel = ['t' => __(':n days left', ['n' => $d]),           'c' => 'text-slate-400'];
    }

    $tabs = [
        'overview'   => ['label' => __('Overview'),      'icon' => 'squares-2x2'],
        'details'    => ['label' => __('Details'),        'icon' => 'identification'],
        'products'   => ['label' => __('Products'),       'icon' => 'cube'],
        'financials' => ['label' => __('Costs & Materials'), 'icon' => 'currency-dollar'],
        'production' => ['label' => __('Workflow'),       'icon' => 'cog-6-tooth'],
        'checklist'  => ['label' => __('Quality'),        'icon' => 'shield-check'],
        'time'       => ['label' => __('Time Tracking'), 'icon' => 'clock'],
        'files'      => ['label' => __('Files'),          'icon' => 'document-text'],
        'activity'   => ['label' => __('Activity'),       'icon' => 'chart-bar'],
        'notes'      => ['label' => __('Notes'),          'icon' => 'pencil-square'],
    ];

    // Literal class strings (Tailwind scans these in source, never interpolate fragments).
    $tlChip = [
        'indigo'  => 'bg-indigo-50 text-indigo-600',
        'sky'     => 'bg-sky-50 text-sky-600',
        'violet'  => 'bg-violet-50 text-violet-600',
        'emerald' => 'bg-emerald-50 text-emerald-600',
        'amber'   => 'bg-amber-50 text-amber-600',
        'rose'    => 'bg-rose-50 text-rose-600',
        'slate'   => 'bg-slate-100 text-slate-500',
    ];
    $ratingText = [
        'emerald' => 'text-emerald-600', 'sky' => 'text-sky-600', 'amber' => 'text-amber-600',
        'rose' => 'text-rose-600', 'slate' => 'text-slate-500',
    ];
@endphp

<div class="px-4 py-8 sm:px-6 lg:px-8" x-data="{ tab: 'overview' }">
    <div class="mx-auto max-w-7xl space-y-6">

        <!-- Breadcrumb -->
        <nav class="flex flex-wrap items-center gap-x-2 gap-y-1 text-sm text-slate-400">
            <span>{{ __('Operations') }}</span>
            <span class="text-slate-300">/</span>
            <a href="{{ route('jobs.index') }}" class="transition hover:text-slate-600">{{ __('Jobs') }}</a>
            <span class="text-slate-300">/</span>
            <span class="font-medium text-slate-500">{{ $job->job_number }}</span>
        </nav>

        {{-- Counter banner: the job is made and waiting for the customer. The
             one question the front desk is asked all day, answered at the top
             of the page with the hand-over action right beside it. --}}
        @if ($job->isReadyForCollection())
            <div class="flex flex-col gap-3 rounded-2xl border border-amber-200 bg-amber-50 p-4 sm:flex-row sm:items-center sm:justify-between">
                <div class="flex items-start gap-3">
                    <span class="mt-0.5 flex h-9 w-9 shrink-0 items-center justify-center rounded-xl bg-amber-100 text-amber-700">
                        <x-icon name="bell" class="h-5 w-5" />
                    </span>
                    <div>
                        <p class="text-sm font-semibold text-amber-900">{{ __('Ready for collection') }}</p>
                        <p class="mt-0.5 text-sm text-amber-700">
                            @if ($awaitingCollectionSince)
                                {{ __('Finished on :date and waiting at the counter for :customer.', ['date' => $awaitingCollectionSince->format('d M Y'), 'customer' => $job->customer?->name ?: __('the customer')]) }}
                            @else
                                {{ __('Waiting at the counter for :customer.', ['customer' => $job->customer?->name ?: __('the customer')]) }}
                            @endif
                        </p>
                    </div>
                </div>
                @if ($canUpdate)
                    <div class="flex flex-wrap items-center gap-2 sm:shrink-0">
                        <button type="button" wire:click="markHandedOver"
                                class="inline-flex items-center gap-1.5 rounded-xl bg-amber-600 px-3.5 py-2 text-sm font-semibold text-white shadow-sm transition hover:bg-amber-700">
                            <x-icon name="truck" class="h-4 w-4" />{{ __('Mark handed over') }}
                        </button>
                        <a href="{{ route('delivery-notes.index', ['job' => $job->id]) }}"
                           class="inline-flex items-center gap-1.5 rounded-xl bg-white px-3.5 py-2 text-sm font-medium text-amber-800 ring-1 ring-amber-200 transition hover:bg-amber-100">
                            {{ __('Delivery note') }}
                        </a>
                    </div>
                @endif
            </div>
        @endif

        {{-- Safety net: finished but no materials were ever recorded. --}}
        @if ($needsMaterialsAttention)
            <div class="flex flex-col gap-3 rounded-2xl border border-amber-200 bg-amber-50 p-4 sm:flex-row sm:items-center sm:justify-between">
                <div class="flex items-start gap-3">
                    <span class="mt-0.5 flex h-9 w-9 shrink-0 items-center justify-center rounded-xl bg-amber-100 text-amber-700">
                        <x-icon name="exclamation-triangle" class="h-5 w-5" />
                    </span>
                    <div>
                        <p class="text-sm font-semibold text-amber-900">{{ __('This job is finished but no materials were recorded') }}</p>
                        <p class="mt-0.5 text-sm text-amber-700">{{ __('No stock was deducted and no material cost was logged. Did you use any stock? Add it under Production, or confirm none were needed.') }}</p>
                    </div>
                </div>
                @if ($canUpdate)
                    <div class="flex flex-wrap items-center gap-2 sm:shrink-0">
                        <button type="button" @click="tab='financials'"
                                class="inline-flex items-center gap-1.5 rounded-xl bg-amber-600 px-3.5 py-2 text-sm font-semibold text-white shadow-sm transition hover:bg-amber-700">
                            <x-icon name="cube" class="h-4 w-4" />{{ __('Add materials') }}
                        </button>
                        <button type="button" wire:click="confirmNoMaterials"
                                class="inline-flex items-center gap-1.5 rounded-xl bg-white px-3.5 py-2 text-sm font-medium text-amber-800 ring-1 ring-amber-200 transition hover:bg-amber-100">
                            {{ __('No materials needed') }}
                        </button>
                    </div>
                @endif
            </div>
        @endif

        <!-- Header -->
        <div class="flex flex-col gap-4 lg:flex-row lg:items-start lg:justify-between">
            <div class="flex min-w-0 items-start gap-4">
                <span class="flex h-12 w-12 shrink-0 items-center justify-center rounded-2xl bg-gradient-to-br from-indigo-500 to-violet-600 text-white shadow-sm">
                    <x-icon name="briefcase" class="h-6 w-6" />
                </span>
                <div class="min-w-0">
                    <h1 class="text-2xl font-bold tracking-tight text-slate-900">
                        {{ $job->title }}@if ($job->customer) <span class="text-slate-400">—</span> {{ $job->customer->name }}@endif
                    </h1>
                    <div class="mt-2 flex flex-wrap items-center gap-2">
                        <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'" title="{{ __('Commercial state, derived from invoice payments') }}">
                            <x-icon name="banknotes" class="h-3 w-3" />
                            {{ $commercialMeta[$job->commercial_state]['label'] ?? __('Not Funded') }}
                        </x-badge>
                        <x-badge :color="$priorityColor[$job->priority] ?? 'slate'">{{ ucfirst($job->priority) }} {{ __('Priority') }}</x-badge>
                        @php
                            // A hybrid job says which of its products go out, so the
                            // badge says how many rather than just "hybrid".
                            $outsourcedProducts = $job->fulfilment === 'hybrid'
                                ? $job->lineItems->filter(fn ($line) => $line->pivot->fulfilment === 'outsourced')->count()
                                : 0;
                        @endphp
                        <x-badge :color="$fulfilmentMeta[$job->fulfilment]['color'] ?? 'slate'"
                                 title="{{ $job->fulfilment === 'hybrid' ? __('Which products go out is set on the Products tab') : '' }}">
                            {{ $fulfilmentMeta[$job->fulfilment]['label'] ?? ucfirst($job->fulfilment ?? 'internal') }}
                            @if ($job->fulfilment === 'hybrid')
                                · {{ __(':n of :total outsourced', ['n' => $outsourcedProducts, 'total' => $job->lineItems->count()]) }}
                            @elseif ($job->partner)
                                · {{ $job->partner->name }}
                            @endif
                        </x-badge>
                        @if ($job->category)
                            <x-badge color="indigo">{{ $job->category->name }}</x-badge>
                        @endif
                        {{-- A multi-product sale is still one job; the Products tab is
                             where its products are managed apart. --}}
                        @if ($job->lineItems->count() > 1)
                            <button type="button" @click="tab = 'products'">
                                <x-badge color="violet" title="{{ __('Manage each product of this job on its own') }}">
                                    <x-icon name="cube" class="h-3 w-3" />
                                    {{ trans_choice('[2,*] :count products', $job->lineItems->count(), ['count' => $job->lineItems->count()]) }}
                                </x-badge>
                            </button>
                        @endif
                    </div>
                </div>
            </div>

            {{-- Header actions. On a phone the status picker takes the width it
                 needs and the buttons wrap under it; nothing is allowed to hold
                 the row wider than the screen. --}}
            <div class="flex w-full flex-wrap items-center gap-2 lg:w-auto lg:shrink-0 lg:flex-nowrap">
                @if ($canUpdate)
                    {{-- Status changer (relocated from the old info strip). --}}
                    <div class="relative min-w-0 flex-1 sm:flex-none">
                        <select wire:model="status" wire:change="updateStatus"
                                class="w-full appearance-none rounded-xl border-0 bg-white py-2 pl-3.5 pr-9 text-sm font-semibold text-slate-700 shadow-sm ring-1 ring-slate-200 transition hover:bg-slate-50 focus:ring-indigo-500">
                            {{-- Only the moves the FRS §3 workflow allows from here. --}}
                            @foreach ($selectableStatuses as $s)
                                <option value="{{ $s }}">{{ $statusMeta[$s]['label'] ?? $s }}</option>
                            @endforeach
                        </select>
                        <x-icon name="chevron-down" class="pointer-events-none absolute right-3 top-1/2 h-4 w-4 -translate-y-1/2 text-slate-400" />
                        <span wire:loading wire:target="updateStatus" class="pointer-events-none absolute -bottom-4 right-1 text-[10px] font-medium text-indigo-500">{{ __('Saving…') }}</span>
                    </div>
                    <button type="button" wire:click="editJob" class="inline-flex items-center gap-1.5 rounded-xl bg-white px-3.5 py-2 text-sm font-medium text-slate-700 ring-1 ring-slate-200 transition hover:bg-slate-50">
                        <x-icon name="pencil-square" class="h-4 w-4" />
                        {{ __('Edit Job') }}
                    </button>
                @endif
                <x-notes-button variant="button" :for="$job" :count="$job->notes->count()" />
                <x-dropdown align="right" width="48">
                    <x-slot name="trigger">
                        <button type="button" class="inline-flex items-center gap-1.5 rounded-xl bg-indigo-600 px-3.5 py-2 text-sm font-semibold text-white shadow-sm transition hover:bg-indigo-700">
                            {{ __('Actions') }}
                            <x-icon name="chevron-down" class="h-4 w-4" />
                        </button>
                    </x-slot>
                    <x-slot name="content">
                        @if ($canUpdate)
                            <button type="button" wire:click="editJob" class="block w-full px-4 py-2 text-left text-sm text-slate-700 hover:bg-slate-50">{{ __('Edit details') }}</button>
                            @if ($job->lineItems->count() > 1)
                                <button type="button" @click="tab = 'products'" class="block w-full px-4 py-2 text-left text-sm text-slate-700 hover:bg-slate-50">{{ __('Manage products separately') }}</button>
                            @endif
                        @endif
                        @if ($job->invoice)
                            <a href="{{ route('invoices.preview', $job->invoice_id) }}" wire:navigate class="block px-4 py-2 text-sm text-slate-700 hover:bg-slate-50">{{ __('View linked invoice') }}</a>
                        @endif
                        @if ($job->quote)
                            <a href="{{ route('quotes.preview', $job->quote_id) }}" wire:navigate class="block px-4 py-2 text-sm text-slate-700 hover:bg-slate-50">{{ __('View linked quote') }}</a>
                        @endif
                        <a href="{{ route('jobs.certificate', $job) }}" target="_blank" rel="noopener" class="block px-4 py-2 text-sm text-slate-700 hover:bg-slate-50">{{ __('Download QC certificate') }}</a>
                        <a href="{{ route('delivery-notes.index', ['job' => $job->id]) }}" wire:navigate class="block px-4 py-2 text-sm text-slate-700 hover:bg-slate-50">{{ __('Create delivery note') }}</a>
                        @if ($portalUrl)
                            <a href="{{ $portalUrl }}" target="_blank" rel="noopener" class="block px-4 py-2 text-sm text-slate-700 hover:bg-slate-50">{{ __('Open client portal') }}</a>
                        @endif
                        @if ($canDelete)
                            <div class="my-1 border-t border-slate-100"></div>
                            <button type="button" wire:click="deleteJob" wire:confirm="{{ __('Delete this job? This cannot be undone.') }}" class="block w-full px-4 py-2 text-left text-sm text-rose-600 hover:bg-rose-50">{{ __('Delete job') }}</button>
                        @endif
                    </x-slot>
                </x-dropdown>
            </div>
        </div>

        <!-- Summary stat cards -->
        @php
            $timeEntryCount = $job->timeEntries->count();
            $reworkCount = (int) $job->rework_count;

            $pillTone = [
                'emerald' => 'bg-emerald-50 text-emerald-700', 'rose' => 'bg-rose-50 text-rose-700',
                'sky' => 'bg-sky-50 text-sky-700', 'amber' => 'bg-amber-50 text-amber-700',
                'violet' => 'bg-violet-50 text-violet-700', 'slate' => 'bg-slate-100 text-slate-600',
            ];

            $statTiles = [
                ['label' => __('Reworks'),        'value' => $reworkCount.' '.trans_choice('{1}reprint|[0,2,*]reprints', $reworkCount), 'fa' => 'fa-arrows-rotate', 'color' => $reworkCount > 0 ? 'amber' : 'slate', 'valueColor' => $reworkCount > 0 ? 'text-amber-600' : 'text-slate-900', 'action' => $canUpdate ? ['method' => 'logRework', 'confirm' => __('Log a rework/reprint for this job?'), 'label' => __('Log rework')] : null],
                ['label' => __('Linked Invoice'), 'value' => $job->invoice?->invoice_number ?: __('None'),    'fa' => 'fa-file-invoice-dollar', 'color' => 'indigo',  'href' => $job->invoice ? route('invoices.preview', $job->invoice_id) : null, 'caption' => $job->invoice ? __('View invoice') : __('Not linked to a sale')],
                ['label' => __('Rating'),         'value' => $rating['label'],                                'fa' => 'fa-scale-balanced',      'color' => $rating['color'], 'valueColor' => $ratingText[$rating['color']] ?? 'text-slate-500', 'pill' => $revenue > 0 ? number_format($margin, 1).'% '.__('margin') : __('No revenue'), 'pillColor' => $rating['color']],
                ['label' => __('Progress'),       'value' => $job->progress.'%',                              'fa' => 'fa-chart-column',        'color' => 'indigo',  'bar' => (int) $job->progress, 'caption' => $statusMeta[$job->status]['label'] ?? $job->status],
                ['label' => __('Time Logged'),    'value' => number_format($hours, 2).' h',                   'fa' => 'fa-clock',               'color' => 'violet',  'caption' => trans_choice('{0} No entries|{1} :count entry|[2,*] :count entries', $timeEntryCount, ['count' => $timeEntryCount])],
            ];
        @endphp
        <div class="grid grid-cols-2 gap-3 sm:grid-cols-3 xl:grid-cols-5">
            @foreach ($statTiles as $tile)
                @php
                    $chip = $tlChip[$tile['color']] ?? $tlChip['slate'];
                @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">
                    <span class="flex h-9 w-9 items-center justify-center rounded-xl {{ $chip }}">
                        <i class="fa-solid {{ $tile['fa'] }} text-sm"></i>
                    </span>
                    <p class="mt-2.5 truncate text-[11px] font-semibold uppercase tracking-wider text-slate-400">{{ $tile['label'] }}</p>
                    <p class="mt-1 truncate text-base font-bold tabular-nums {{ $tile['valueColor'] ?? 'text-slate-900' }}">
                        @if (! empty($tile['href']))
                            <a href="{{ $tile['href'] }}" wire:navigate class="inline-flex max-w-full items-center gap-1 text-indigo-600 transition hover:text-indigo-700"><span class="truncate">{{ $tile['value'] }}</span><i class="fa-solid fa-arrow-up-right-from-square shrink-0 text-[10px] opacity-60"></i></a>
                        @else
                            {{ $tile['value'] }}
                        @endif
                    </p>
                    @if (! empty($tile['pill']))
                        <span class="mt-1.5 inline-flex items-center whitespace-nowrap rounded-full px-2 py-0.5 text-[10px] font-medium {{ $pillTone[$tile['pillColor']] ?? $pillTone['slate'] }}">{{ $tile['pill'] }}</span>
                    @endif
                    @if (isset($tile['bar']))
                        <div class="mt-2 h-1.5 w-full overflow-hidden rounded-full bg-slate-100">
                            <div class="h-full rounded-full bg-gradient-to-r from-indigo-500 to-violet-500" style="width: {{ $tile['bar'] }}%"></div>
                        </div>
                    @endif
                    @if (! empty($tile['caption']))
                        <p class="mt-1 truncate text-[10px] text-slate-400">{{ $tile['caption'] }}</p>
                    @endif
                    @if (! empty($tile['action']))
                        <button type="button" wire:click="{{ $tile['action']['method'] }}" wire:confirm="{{ $tile['action']['confirm'] }}"
                                class="mt-2.5 inline-flex items-center gap-1 whitespace-nowrap rounded-lg border border-amber-200 bg-amber-50 px-2.5 py-1 text-[10px] font-semibold text-amber-700 transition hover:bg-amber-100">
                            <i class="fa-solid fa-plus text-[10px]"></i>{{ $tile['action']['label'] }}
                        </button>
                    @endif
                </div>
            @endforeach
        </div>

        <!-- Tabs (modern segmented pill buttons) -->
        <nav class="no-scrollbar flex flex-nowrap items-center gap-1 overflow-x-auto rounded-xl border border-slate-200 bg-slate-50 p-1 text-sm font-medium">
            @foreach ($tabs as $key => $meta)
                <button
                    type="button"
                    @click="tab = '{{ $key }}'"
                    :class="tab === '{{ $key }}' ? 'bg-white text-indigo-600 shadow-sm ring-1 ring-slate-200' : 'text-slate-500 hover:text-slate-700'"
                    class="inline-flex shrink-0 items-center gap-1.5 whitespace-nowrap rounded-lg px-3.5 py-1.5 transition"
                >
                    <x-icon :name="$meta['icon']" class="h-4 w-4" />
                    {{ $meta['label'] }}
                </button>
            @endforeach
        </nav>

        <!-- ============ OVERVIEW ============ -->
        <div x-show="tab === 'overview'" x-cloak class="space-y-6">
            <div class="grid grid-cols-1 gap-6 lg:grid-cols-3">
                <!-- Financial Overview chart -->
                <x-card class="p-6 lg:col-span-2">
                    <div class="flex items-center justify-between">
                        <h2 class="text-base font-semibold text-slate-900">{{ __('Financial Overview') }}</h2>
                        <span class="text-xs text-slate-400">{{ __('All values in :code', ['code' => $baseCurrency]) }}</span>
                    </div>
                    <div wire:ignore class="mt-2" x-data="jobProfitChart(@js($chart))">
                        <div x-ref="chart"></div>
                    </div>
                </x-card>

                <!-- Job Timeline -->
                <x-card class="p-6">
                    <h2 class="text-base font-semibold text-slate-900">{{ __('Job Timeline') }}</h2>
                    <ol class="mt-4 space-y-5">
                        @forelse ($timeline->reverse()->take(5)->reverse() as $event)
                            <li class="flex gap-3">
                                <span class="flex h-8 w-8 shrink-0 items-center justify-center rounded-full {{ $tlChip[$event['color']] ?? $tlChip['slate'] }}">
                                    <x-icon :name="$event['icon']" class="h-4 w-4" />
                                </span>
                                <div class="min-w-0 flex-1">
                                    <p class="text-sm font-medium text-slate-800">{{ $event['title'] }}</p>
                                    @if ($event['by'])
                                        <p class="text-xs text-slate-400">{{ __('by :name', ['name' => $event['by']]) }}</p>
                                    @endif
                                </div>
                                <span class="shrink-0 text-xs text-slate-400">{{ $event['at']?->format('Y-m-d H:i') }}</span>
                            </li>
                        @empty
                            <li class="text-sm text-slate-400">{{ __('No activity yet.') }}</li>
                        @endforelse
                    </ol>
                    <button type="button" @click="tab = 'activity'" class="mt-5 w-full rounded-xl border border-slate-200 py-2 text-sm font-medium text-indigo-600 transition hover:bg-slate-50">{{ __('View full timeline') }}</button>
                </x-card>
            </div>

            {{-- Client feedback, management only --}}
            @if ($canViewFeedback)
                <x-card class="p-6">
                    <div class="flex items-center justify-between gap-3">
                        <div>
                            <h2 class="text-base font-semibold text-slate-900">{{ __('Client Feedback') }}</h2>
                            <p class="mt-0.5 text-xs text-slate-500">{{ __('Visible to management only.') }}</p>
                        </div>
                        @if ($portalUrl)
                            <a href="{{ $portalUrl }}" target="_blank" rel="noopener" class="inline-flex items-center gap-1.5 text-sm font-medium text-indigo-600 hover:text-indigo-700">
                                <x-icon name="arrow-up-right" class="h-4 w-4" />{{ __('Client portal') }}
                            </a>
                        @endif
                    </div>

                    @if ($feedback && $feedback->submitted_at)
                        @php
                            $dims = ['rating_quality' => __('Quality'), 'rating_turnaround' => __('Turnaround'), 'rating_service' => __('Service')];
                        @endphp
                        <div class="mt-4 grid grid-cols-1 gap-4 sm:grid-cols-3">
                            @foreach ($dims as $field => $label)
                                <div class="rounded-xl border border-slate-100 bg-slate-50/60 p-3">
                                    <p class="text-xs text-slate-400">{{ $label }}</p>
                                    <div class="mt-1 flex items-center gap-0.5 text-amber-400">
                                        @for ($n = 1; $n <= 5; $n++)
                                            <span class="{{ ($feedback->$field ?? 0) >= $n ? 'text-amber-400' : 'text-slate-200' }}">&#9733;</span>
                                        @endfor
                                        <span class="ml-1 text-xs text-slate-500">{{ $feedback->$field ? $feedback->$field.'/5' : '—' }}</span>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                        @if ($feedback->comment)
                            <blockquote class="mt-4 border-l-2 border-indigo-200 pl-3 text-sm italic text-slate-600">“{{ $feedback->comment }}”</blockquote>
                        @endif
                        <div class="mt-3 flex flex-wrap items-center gap-3 text-xs text-slate-400">
                            <span>{{ __('Submitted :date', ['date' => $feedback->submitted_at->format('Y-m-d H:i')]) }}</span>
                            @if ($feedback->allow_testimonial)
                                <x-badge color="emerald">{{ __('Testimonial consent given') }}</x-badge>
                            @endif
                        </div>
                    @else
                        <p class="mt-4 rounded-xl border border-dashed border-slate-200 py-6 text-center text-sm text-slate-400">
                            @if ($job->client_portal_sent_at)
                                {{ __('Review invite sent :date, awaiting the client’s feedback.', ['date' => $job->client_portal_sent_at->format('Y-m-d')]) }}
                            @else
                                {{ __('No feedback yet. The client is invited automatically when the job is marked Delivered.') }}
                            @endif
                        </p>

                        {{-- The review chase applies from the moment the customer has the
                             goods, whether that was a delivery or a counter collection. --}}
                        @if (in_array($job->status, App\Models\Job::HANDED_OVER_STATUSES, true))
                            @php
                                $waMessage = __(':company, your order :job is ready! View it and leave us a quick review here: :url', [
                                    'company' => $job->team?->name,
                                    'job' => $job->job_number,
                                    'url' => $portalUrl,
                                ]);
                                $waLink = \App\Support\WhatsApp::link($job->customer?->phone, $waMessage);
                            @endphp
                            <div class="mt-3 flex flex-wrap items-center gap-2">
                                <button type="button"
                                    wire:click="resendReviewInvite"
                                    wire:confirm="{{ __('Email a feedback reminder to :name?', ['name' => $job->customer?->name ?: __('the client')]) }}"
                                    class="inline-flex items-center gap-1.5 rounded-lg border border-slate-300 bg-white px-3 py-1.5 text-xs font-medium text-slate-700 shadow-sm transition hover:bg-slate-50">
                                    <x-icon name="bell" class="h-4 w-4" />{{ __('Resend reminder (email)') }}
                                </button>

                                @if ($waLink)
                                    <a href="{{ $waLink }}" target="_blank" rel="noopener"
                                        class="inline-flex items-center gap-1.5 rounded-lg border border-emerald-300 bg-emerald-50 px-3 py-1.5 text-xs font-medium text-emerald-700 shadow-sm transition hover:bg-emerald-100">
                                        <x-icon name="whatsapp" class="h-4 w-4" />{{ __('Send via WhatsApp') }}
                                    </a>
                                @else
                                    <span class="text-xs text-slate-400">{{ __('Add a client phone number to enable WhatsApp.') }}</span>
                                @endif
                            </div>
                        @endif
                    @endif
                </x-card>
            @endif

            @include('livewire.jobs.partials.stepper')
        </div>

        <!-- ============ DETAILS ============ -->
        <div x-show="tab === 'details'" x-cloak class="space-y-6">
            @php
                $productCount = $job->lineItems->count();
                $qtyTotal = $job->lineItems->sum(fn ($l) => (float) $l->qty);
                $reworkCount = (int) $job->rework_count;

                // Tinted icon-chip themes (literal classes so Tailwind scans them).
                $chipTone = [
                    'indigo'  => 'bg-indigo-50 text-indigo-600',
                    'sky'     => 'bg-sky-50 text-sky-600',
                    'violet'  => 'bg-violet-50 text-violet-600',
                    'emerald' => 'bg-emerald-50 text-emerald-600',
                    'amber'   => 'bg-amber-50 text-amber-600',
                    'rose'    => 'bg-rose-50 text-rose-600',
                    'slate'   => 'bg-slate-100 text-slate-500',
                ];

                // Grouped into sections for a clean, scannable layout.
                $detailSections = [
                    [
                        'title' => __('Overview'),
                        'rows'  => [
                            ['fa' => 'fa-hashtag',            'color' => 'indigo',  'label' => __('Job Number'),       'value' => $job->job_number],
                            ['fa' => 'fa-user',               'color' => 'sky',     'label' => __('Customer'),         'value' => $job->customer?->name ?: '—'],
                            ['fa' => 'fa-layer-group',        'color' => 'violet',  'label' => __('Category'),         'value' => $job->category?->name ?: '—'],
                            ['fa' => 'fa-box',                'color' => 'sky',     'label' => __('Products'),         'value' => trans_choice('{0} None|{1} :count item|[2,*] :count items', $productCount, ['count' => $productCount])],
                            ['fa' => 'fa-list-ol',            'color' => 'slate',   'label' => __('Quantity'),         'value' => rtrim(rtrim(number_format($qtyTotal, 2), '0'), '.') . ' ' . __('units')],
                            ['fa' => 'fa-user-pen',           'color' => 'violet',  'label' => __('Created By'),       'value' => $job->creator?->name ?: '—'],
                        ],
                    ],
                    [
                        'title' => __('Commercial'),
                        'rows'  => [
                            ['fa' => 'fa-circle-check',       'color' => 'emerald', 'label' => __('Status'),           'value' => $statusMeta[$job->status]['label'] ?? $job->status],
                            ['fa' => 'fa-money-bill-wave',    'color' => 'emerald', 'label' => __('Commercial State'), 'value' => $commercialMeta[$job->commercial_state]['label'] ?? __('Not Funded')],
                            ['fa' => 'fa-flag',               'color' => 'amber',   'label' => __('Priority'),         'value' => ucfirst($job->priority) . ' ' . __('Priority')],
                            ['fa' => 'fa-truck-fast',         'color' => 'violet',  'label' => __('Fulfilment'),       'value' => ($fulfilmentMeta[$job->fulfilment]['label'] ?? ucfirst($job->fulfilment ?? 'internal'))
                                . ($job->fulfilment === 'hybrid'
                                    ? ' · '.__(':n of :total products outsourced', ['n' => $outsourcedProducts, 'total' => $job->lineItems->count()])
                                    : ($job->partner ? ' · '.$job->partner->name : ''))],
                            ['fa' => 'fa-coins',              'color' => 'amber',   'label' => __('Currency'),         'value' => $job->currency_code ?: '—'],
                            ['fa' => 'fa-rotate',             'color' => $reworkCount > 0 ? 'rose' : 'slate', 'label' => __('Reworks'), 'value' => $reworkCount . ' ' . trans_choice('{1}reprint|[0,2,*]reprints', $reworkCount)],
                            ['fa' => 'fa-file-invoice-dollar','color' => 'indigo',  'label' => __('Linked Invoice'),   'value' => $job->invoice?->invoice_number ?: '—', 'href' => $job->invoice ? route('invoices.preview', $job->invoice_id) : null],
                            ['fa' => 'fa-file-lines',         'color' => 'sky',     'label' => __('Linked Quote'),     'value' => $job->quote?->quote_number ?: '—', 'href' => $job->quote ? route('quotes.preview', $job->quote_id) : null],
                        ],
                    ],
                    [
                        'title' => __('Timeline'),
                        'rows'  => [
                            ['fa' => 'fa-calendar-day',       'color' => 'rose',    'label' => __('Due Date'),         'value' => $job->due_date?->format('M j, Y') ?: '—'],
                            ['fa' => 'fa-play',               'color' => 'emerald', 'label' => __('Started'),          'value' => optional($job->started_at)->format('M j, Y') ?: __('Not started')],
                            ['fa' => 'fa-flag-checkered',     'color' => 'emerald', 'label' => __('Completed'),        'value' => optional($job->completed_at)->format('M j, Y') ?: '—'],
                            ['fa' => 'fa-calendar-plus',      'color' => 'slate',   'label' => __('Created'),          'value' => $job->created_at?->format('M j, Y · H:i')],
                            ['fa' => 'fa-clock-rotate-left',  'color' => 'slate',   'label' => __('Last Updated'),     'value' => $job->updated_at?->format('M j, Y · H:i')],
                        ],
                    ],
                ];
            @endphp

            <x-card class="overflow-hidden p-0">
                <div class="flex items-center gap-3 border-b border-slate-100 bg-gradient-to-r from-slate-50 to-white px-6 py-5">
                    <span class="flex h-11 w-11 shrink-0 items-center justify-center rounded-2xl bg-gradient-to-br from-indigo-500 to-violet-600 text-white shadow-sm">
                        <i class="fa-regular fa-id-card text-lg"></i>
                    </span>
                    <div>
                        <h2 class="text-lg font-semibold text-slate-900">{{ __('Job Details') }}</h2>
                        <p class="mt-0.5 text-sm text-slate-500">{{ __('Everything on record for this job.') }}</p>
                    </div>
                </div>

                <div class="divide-y divide-slate-100 bg-slate-50/40">
                    @foreach ($detailSections as $section)
                        <div class="px-5 py-5 sm:px-6">
                            <h3 class="mb-3 text-[11px] font-semibold uppercase tracking-wider text-slate-400">{{ $section['title'] }}</h3>
                            <dl class="grid grid-cols-1 gap-2.5 sm:grid-cols-2">
                                @foreach ($section['rows'] as $i => $row)
                                    {{-- Zebra by visual row (two per row on desktop) for a clean even effect. --}}
                                    @php $tint = intdiv($i, 2) % 2 === 0 ? 'bg-white' : 'bg-slate-50'; @endphp
                                    <div class="group flex items-center justify-between gap-4 rounded-xl {{ $tint }} px-3.5 py-2.5 ring-1 ring-slate-200/70 shadow-sm transition hover:-translate-y-0.5 hover:shadow-md hover:ring-slate-300">
                                        <dt class="flex min-w-0 items-center gap-3">
                                            <span class="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg shadow-sm {{ $chipTone[$row['color']] ?? $chipTone['slate'] }}">
                                                <i class="fa-solid {{ $row['fa'] }} text-sm"></i>
                                            </span>
                                            <span class="truncate text-sm text-slate-500">{{ $row['label'] }}</span>
                                        </dt>
                                        <dd class="shrink-0 text-right text-sm font-semibold text-slate-800">
                                            @if (! empty($row['href']))
                                                <a href="{{ $row['href'] }}" wire:navigate class="inline-flex items-center gap-1 text-indigo-600 transition hover:text-indigo-700">{{ $row['value'] }}<i class="fa-solid fa-arrow-up-right-from-square text-[10px] opacity-60"></i></a>
                                            @else
                                                {{ $row['value'] }}
                                            @endif
                                        </dd>
                                    </div>
                                @endforeach
                            </dl>
                        </div>
                    @endforeach

                    @if ($job->description)
                        <div class="px-5 py-5 sm:px-6">
                            <h3 class="mb-2 flex items-center gap-2 text-[11px] font-semibold uppercase tracking-wider text-slate-400">
                                <i class="fa-solid fa-align-left text-slate-400"></i>{{ __('Description') }}
                            </h3>
                            <div class="rounded-xl bg-white px-4 py-3 ring-1 ring-slate-200/70 shadow-sm">
                                <p class="text-sm leading-relaxed text-slate-700">{{ $job->description }}</p>
                            </div>
                        </div>
                    @endif
                </div>
            </x-card>
        </div>

        <!-- ============ PRODUCTS ============ -->
        {{-- One invoice is one job, so a multi-product sale is not several jobs.
             This is where its products are arranged into units of work and managed
             apart: own state, dates, owner, notes and margin. --}}
        <div x-show="tab === 'products'" x-cloak class="space-y-6">
            <livewire:jobs.products-panel :job="$job" :key="'products-'.$job->id" />
        </div>

        <!-- ============ COSTS & MATERIALS ============ -->
        {{-- Profitability totals already live in the job header cards above, so this
             tab shows no duplicate strip, just the working ledger, split into three
             mini sub-tabs (Production Costs / Production History / Job Funding). --}}
        <div x-show="tab === 'financials'" x-cloak class="space-y-4" x-data="{ costsTab: 'costs' }">
            @if ($invoiceNative && $invoiceNative['code'] !== $baseCurrency)
                <p class="rounded-lg bg-slate-50 px-3 py-2 text-xs text-slate-500">{{ __('Invoice billed in :code :total', ['code' => $invoiceNative['code'], 'total' => number_format($invoiceNative['total'], 2)]) }}</p>
            @endif

            {{-- Per-product P&L. Shown whenever the sale has more than one product,
                 because that is exactly when one blended margin hides a loss-maker. --}}
            @if ($productProfit && count($productProfit['rows']) > 1)
                @include('livewire.jobs.partials.product-profit')
            @endif

            {{-- Sub-tab nav --}}
            <div class="flex flex-wrap items-center justify-between gap-3">
                <div class="inline-flex items-center gap-1 rounded-xl border border-slate-200 bg-slate-50 p-1 text-sm font-medium">
                    <button type="button" @click="costsTab = 'costs'"
                            :class="costsTab === 'costs' ? 'bg-white text-indigo-600 shadow-sm ring-1 ring-slate-200' : 'text-slate-500 hover:text-slate-700'"
                            class="inline-flex items-center gap-1.5 rounded-lg px-3.5 py-1.5 transition">
                        <x-icon name="banknotes" class="h-4 w-4" />{{ __('Production Costs') }}
                    </button>
                    <button type="button" @click="costsTab = 'history'"
                            :class="costsTab === 'history' ? 'bg-white text-indigo-600 shadow-sm ring-1 ring-slate-200' : 'text-slate-500 hover:text-slate-700'"
                            class="inline-flex items-center gap-1.5 rounded-lg px-3.5 py-1.5 transition">
                        <x-icon name="cube" class="h-4 w-4" />{{ __('Production History') }}
                    </button>
                    @if ($canManageFinance)
                        <button type="button" @click="costsTab = 'funding'"
                                :class="costsTab === 'funding' ? 'bg-white text-indigo-600 shadow-sm ring-1 ring-slate-200' : 'text-slate-500 hover:text-slate-700'"
                                class="inline-flex items-center gap-1.5 rounded-lg px-3.5 py-1.5 transition">
                            <x-icon name="banknotes" class="h-4 w-4" />{{ __('Job Funding') }}
                        </button>
                    @endif
                </div>

                {{-- Reopen the post-completion review to log costs that landed late and
                     optionally recharge the client. --}}
                @if ($canUpdate && $canCostJob && in_array($job->status, ['completed', 'ready_for_collection', 'delivered', 'closed'], true))
                    <button type="button" @click="$dispatch('open-completion-costs')"
                            class="inline-flex items-center gap-1.5 rounded-xl border border-slate-200 bg-white px-3.5 py-2 text-sm font-medium text-slate-700 shadow-sm transition hover:bg-slate-50">
                        <x-icon name="plus" class="h-4 w-4" />{{ __('Add extra costs / recharge client') }}
                    </button>
                @endif
            </div>

            <div x-show="costsTab === 'costs'" x-cloak>
                <livewire:jobs.cost-panel :job="$job" :key="'cost-'.$job->id" />
            </div>
            <div x-show="costsTab === 'history'" x-cloak>
                <livewire:jobs.produce-panel :job="$job" :key="'produce-'.$job->id" />
            </div>
            @if ($canManageFinance)
                <div x-show="costsTab === 'funding'" x-cloak>
                    <livewire:jobs.funding-panel :job="$job" :key="'funding-'.$job->id" />
                </div>
            @endif
        </div>

        <!-- ============ WORKFLOW (status & details) ============ -->
        <div x-show="tab === 'production'" x-cloak class="space-y-6">
            @include('livewire.jobs.partials.stepper')

            <x-card class="p-6">
                <div class="flex items-center justify-between gap-3">
                    <h2 class="text-base font-semibold text-slate-900">{{ __('Production Details') }}</h2>
                    <a href="#" @click.prevent="tab = 'financials'" class="inline-flex items-center gap-1 text-xs font-medium text-indigo-600 transition hover:text-indigo-700">
                        <x-icon name="cube" class="h-3.5 w-3.5" />{{ __('Materials & consumption →') }}
                    </a>
                </div>
                <dl class="mt-4 grid grid-cols-2 gap-x-8 gap-y-4 text-sm sm:grid-cols-3 lg:grid-cols-4">
                    <div><dt class="text-xs text-slate-400">{{ __('Status') }}</dt><dd class="mt-0.5 font-medium text-slate-700">{{ $statusMeta[$job->status]['label'] ?? $job->status }}</dd></div>
                    <div><dt class="text-xs text-slate-400">{{ __('Priority') }}</dt><dd class="mt-0.5 font-medium text-slate-700">{{ ucfirst($job->priority) }}</dd></div>
                    <div><dt class="text-xs text-slate-400">{{ __('Fulfilment') }}</dt><dd class="mt-0.5 font-medium text-slate-700">{{ $fulfilmentMeta[$job->fulfilment]['label'] ?? ucfirst($job->fulfilment ?? 'internal') }}</dd></div>
                    <div><dt class="text-xs text-slate-400">{{ __('Category') }}</dt><dd class="mt-0.5 font-medium text-slate-700">{{ $job->category?->name ?: '—' }}</dd></div>
                    <div>
                        <dt class="text-xs text-slate-400">{{ __('Sales Rep') }}</dt>
                        <dd class="mt-0.5 font-medium text-slate-700">
                            {{ $job->salesRep?->name ?: ($job->invoice?->creator?->name ?: ($job->creator?->name ?: '—')) }}
                        </dd>
                    </div>
                    <div><dt class="text-xs text-slate-400">{{ __('Started') }}</dt><dd class="mt-0.5 font-medium text-slate-700">{{ optional($job->started_at)->format('Y-m-d') ?: '—' }}</dd></div>
                    <div><dt class="text-xs text-slate-400">{{ __('Completed') }}</dt><dd class="mt-0.5 font-medium text-slate-700">{{ optional($job->completed_at)->format('Y-m-d') ?: '—' }}</dd></div>
                    {{-- The hand-over moment, which §12 on-time delivery measures to. --}}
                    <div><dt class="text-xs text-slate-400">{{ __('Handed Over') }}</dt><dd class="mt-0.5 font-medium text-slate-700">{{ optional($job->delivered_at)->format('Y-m-d') ?: '—' }}</dd></div>
                    <div><dt class="text-xs text-slate-400">{{ __('Due Date') }}</dt><dd class="mt-0.5 font-medium text-slate-700">{{ $job->due_date?->format('Y-m-d') ?: '—' }}</dd></div>
                    <div><dt class="text-xs text-slate-400">{{ __('Progress') }}</dt><dd class="mt-0.5 font-medium text-slate-700">{{ $job->progress }}%</dd></div>
                </dl>

                {{-- Delivery-note interplay: the paper trail behind the hand-over.
                     Notes are raised against the job, so a delivered job with none
                     is a gap somebody should see. --}}
                <div class="mt-5 border-t border-slate-100 pt-4">
                    <dt class="text-xs text-slate-400">{{ __('Delivery Notes') }}</dt>
                    @if ($deliveryNotes->isNotEmpty())
                        <dd class="mt-1.5 flex flex-wrap items-center gap-2">
                            @foreach ($deliveryNotes as $note)
                                <a href="{{ route('delivery-notes.preview', $note->id) }}" target="_blank"
                                   class="inline-flex items-center gap-1.5 rounded-lg bg-slate-50 px-2.5 py-1 text-xs font-medium text-slate-700 ring-1 ring-slate-200 transition hover:bg-slate-100">
                                    <x-icon name="truck" class="h-3.5 w-3.5 text-slate-400" />
                                    {{ $note->delivery_number }}
                                    <span class="text-slate-400">{{ ucfirst($note->status) }}</span>
                                </a>
                            @endforeach
                        </dd>
                    @else
                        <dd class="mt-1 text-sm text-slate-500">
                            {{ in_array($job->status, App\Models\Job::HANDED_OVER_STATUSES, true)
                                ? __('Handed over with no delivery note on file.')
                                : __('None raised yet.') }}
                        </dd>
                    @endif
                </div>
                @if ($job->description)
                    <div class="mt-5 border-t border-slate-100 pt-4">
                        <dt class="text-xs text-slate-400">{{ __('Description') }}</dt>
                        <dd class="mt-1 text-sm text-slate-600">{{ $job->description }}</dd>
                    </div>
                @endif
            </x-card>
        </div>

        <!-- ============ QUALITY / CHECKLIST ============ -->
        <div x-show="tab === 'checklist'" x-cloak class="space-y-6">
            <livewire:jobs.checklist-panel :job="$job" :key="'checklist-'.$job->id" />
        </div>

        <!-- ============ TIME TRACKING ============ -->
        <div x-show="tab === 'time'" x-cloak class="space-y-6">
            <div class="grid grid-cols-1 gap-6 lg:grid-cols-3">
                <div class="lg:col-span-2">
                    <livewire:jobs.time-panel :job="$job" :key="'time-'.$job->id" />
                </div>
                <x-card class="h-fit p-6">
                    <h2 class="text-base font-semibold text-slate-900">{{ __('Team Members') }}</h2>
                    <ul class="mt-4 space-y-4">
                        @forelse ($members as $member)
                            @php $u = $member['user']; $mh = round($member['seconds'] / 3600, 2); @endphp
                            <li class="flex items-center gap-3">
                                @if ($u->profile_photo_url)
                                    <img src="{{ $u->profile_photo_url }}" alt="{{ $u->name }}" class="h-9 w-9 shrink-0 rounded-full object-cover" />
                                @else
                                    <span class="flex h-9 w-9 shrink-0 items-center justify-center rounded-full bg-indigo-100 text-xs font-semibold text-indigo-700">{{ $initials($u->name) }}</span>
                                @endif
                                <div class="min-w-0 flex-1">
                                    <p class="truncate text-sm font-medium text-slate-800">{{ $u->name }}</p>
                                    <p class="truncate text-xs text-slate-400">{{ $u->email }}</p>
                                </div>
                                <div class="shrink-0 text-right">
                                    @if ($member['lead'])
                                        <x-badge color="indigo">{{ __('Lead') }}</x-badge>
                                    @endif
                                    @if ($mh > 0)
                                        <p class="mt-1 text-xs text-slate-400">{{ number_format($mh, 2) }} h</p>
                                    @endif
                                </div>
                            </li>
                        @empty
                            <li class="text-sm text-slate-400">{{ __('No one has logged time yet.') }}</li>
                        @endforelse
                    </ul>
                </x-card>
            </div>
        </div>

        <!-- ============ FILES ============ -->
        <div x-show="tab === 'files'" x-cloak class="space-y-6">
            @include('livewire.jobs.partials.files')
            <livewire:jobs.showcase-panel :job="$job" :key="'showcase-'.$job->id" />
        </div>

        <!-- ============ ACTIVITY ============ -->
        <div x-show="tab === 'activity'" x-cloak>
            <x-card class="p-6">
                <h2 class="text-base font-semibold text-slate-900">{{ __('Activity Feed') }}</h2>
                <ol class="mt-5 space-y-5">
                    @forelse ($timeline->reverse() as $event)
                        <li class="flex gap-3">
                            <span class="flex h-8 w-8 shrink-0 items-center justify-center rounded-full {{ $tlChip[$event['color']] ?? $tlChip['slate'] }}">
                                <x-icon :name="$event['icon']" class="h-4 w-4" />
                            </span>
                            <div class="min-w-0 flex-1">
                                <p class="text-sm font-medium text-slate-800">{{ $event['title'] }}</p>
                                @if ($event['by'])
                                    <p class="text-xs text-slate-400">{{ __('by :name', ['name' => $event['by']]) }}</p>
                                @endif
                            </div>
                            <span class="shrink-0 text-xs text-slate-400">{{ $event['at']?->format('Y-m-d H:i') }}</span>
                        </li>
                    @empty
                        <li class="text-sm text-slate-400">{{ __('No activity recorded yet.') }}</li>
                    @endforelse
                </ol>
            </x-card>
        </div>

        <!-- ============ NOTES ============ -->
        <div x-show="tab === 'notes'" x-cloak>
            @include('livewire.jobs.partials.notes')
        </div>
    </div>

    {{-- Post-completion prompt: capture extra costs + optionally bill the client
         for the difference. Persistent (outside the tabs) so it can open on any
         status change. Management only, the review stays pending (and prompts
         them) when a production user is the one who finishes the job. --}}
    @if ($canCostJob)
        <livewire:jobs.completion-costs :job="$job" :key="'completion-'.$job->id" />
    @endif

    <!-- Edit Job modal -->
    <x-dialog-modal wire:model.live="showEditModal" maxWidth="2xl">
        <x-slot name="title">{{ __('Edit Job') }}</x-slot>
        <x-slot name="content">
            <div class="grid grid-cols-1 gap-4">
                <div>
                    <x-label for="edit_title" value="{{ __('Title') }}" />
                    <x-input id="edit_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="edit_description" value="{{ __('Description') }}" />
                    <textarea id="edit_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 ?? $job->customer?->name ?? __('— set from the invoice —') }}
                        </div>
                    </div>
                    <div>
                        <x-label for="edit_category" value="{{ __('Category') }}" />
                        <select id="edit_category" 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="edit_priority" value="{{ __('Priority') }}" />
                        <select id="edit_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="edit_currency" value="{{ __('Currency') }}" />
                        <select id="edit_currency" 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>
                        <x-label for="edit_due" value="{{ __('Due Date') }}" />
                        <x-input id="edit_due" type="date" class="mt-1 block w-full" wire:model="due_date" />
                        <x-input-error for="due_date" class="mt-2" />
                    </div>
                </div>
                <div>
                    <x-label for="edit_sales_rep" value="{{ __('Sales Rep') }}" />
                    <select id="edit_sales_rep" wire:model="sales_rep_id" class="mt-1 block w-full rounded-xl border-slate-300 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
                        @foreach ($salesReps as $rep)
                            <option value="{{ $rep->id }}">{{ $rep->name }}</option>
                        @endforeach
                    </select>
                    <p class="mt-1 text-xs text-slate-400">{{ __('Who sold this job. Commission follows the rep, not whoever raised the invoice.') }}</p>
                    <x-input-error for="sales_rep_id" class="mt-2" />
                </div>
                <div>
                    <x-label for="edit_progress" value="{{ __('Progress') }}" />
                    <div class="mt-2 flex items-center gap-3">
                        <input id="edit_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>
                    <x-input-error for="progress" class="mt-2" />
                </div>
                <div>
                    <x-label for="edit_fulfilment" value="{{ __('Fulfilment') }}" />
                    <select id="edit_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>
                    @if ($fulfilment === 'hybrid')
                        <p class="mt-1 text-xs text-violet-600">{{ __('Mark which products go out, and to which partner, on the Products tab.') }}</p>
                    @endif
                    <x-input-error for="fulfilment" class="mt-2" />
                </div>
                <div>
                    <x-label for="edit_invoice" value="{{ __('Invoice') }}" />
                    <select id="edit_invoice" 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-slot>
        <x-slot name="footer">
            <x-secondary-button wire:click="closeEditModal" wire:loading.attr="disabled">{{ __('Cancel') }}</x-secondary-button>
            <x-button class="ms-3" wire:click="saveJob" wire:loading.attr="disabled">{{ __('Save') }}</x-button>
        </x-slot>
    </x-dialog-modal>

    <!-- Status gate modal (quality + deposit + closure) -->
    <x-dialog-modal wire:model.live="showGateModal" maxWidth="lg">
        <x-slot name="title">
            @switch ($gateKind)
                @case('deposit') {{ __('Deposit required before production') }} @break
                @case('closure') {{ __('This job has not been invoiced') }} @break
                @default {{ __('Required checks not complete') }}
            @endswitch
        </x-slot>
        <x-slot name="content">
            @if ($gateKind === 'closure')
                <p class="text-sm text-slate-600">
                    {{ __('A job can only be closed once it has been billed. Closing an unbilled job writes off work nobody will ever chase.') }}
                </p>
                <div class="mt-3 rounded-xl border border-amber-200 bg-amber-50 p-3 text-sm text-amber-800">
                    <span class="flex items-start gap-2">
                        <x-icon name="document-text" class="mt-0.5 h-4 w-4 shrink-0" />
                        <span>{{ __('Link an invoice to this job, then close it. An unpaid invoice is fine — the balance stays on the aged receivables report.') }}</span>
                    </span>
                </div>
            @elseif ($gateKind === 'deposit')
                <p class="text-sm text-slate-600">
                    {{ __('Production can\'t start on ":status" because this job\'s invoice has no payment yet. Record a deposit on the invoice, or override to start anyway.', ['status' => $statusMeta[$gateTarget]['label'] ?? $gateTarget]) }}
                </p>
                <div class="mt-3 rounded-xl border border-amber-200 bg-amber-50 p-3 text-sm text-amber-800">
                    <span class="flex items-start gap-2">
                        <x-icon name="banknotes" class="mt-0.5 h-4 w-4 shrink-0" />
                        <span>{{ __('A job is "won" once its invoice receives a deposit or payment.') }}</span>
                    </span>
                </div>
            @else
                <p class="text-sm text-slate-600">
                    {{ __('Before this job can move to ":status", these required quality checks must be signed off:', ['status' => $statusMeta[$gateTarget]['label'] ?? $gateTarget]) }}
                </p>
                <ul class="mt-3 space-y-1.5 rounded-xl border border-amber-200 bg-amber-50 p-3 text-sm text-amber-800">
                    @foreach ($gateOutstanding as $label)
                        <li class="flex items-start gap-2">
                            <x-icon name="exclamation-triangle" class="mt-0.5 h-4 w-4 shrink-0" />
                            <span>{{ $label }}</span>
                        </li>
                    @endforeach
                </ul>
                <p class="mt-4 text-sm text-slate-500">
                    {{ __('Open the Quality tab to complete them.') }}
                </p>
            @endif

            @if ($canOverride)
                <div class="mt-4 border-t border-slate-100 pt-4">
                    <x-label for="overrideReason" :value="__('Or override (logged against this job)')" />
                    <textarea id="overrideReason" rows="2" wire:model="overrideReason"
                              class="mt-1 block w-full rounded-xl border-slate-300 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500"
                              placeholder="{{ match ($gateKind) {
                                  'deposit' => __('Reason for starting production before a deposit…'),
                                  'closure' => __('Reason for closing this job without an invoice…'),
                                  default => __('Reason for bypassing the checks…'),
                              } }}"></textarea>
                    <x-input-error for="overrideReason" class="mt-1" />
                </div>
            @else
                <p class="mt-4 rounded-lg bg-slate-50 px-3 py-2 text-xs text-slate-500">{{ __('Only an owner or admin can override this gate.') }}</p>
            @endif
        </x-slot>
        <x-slot name="footer">
            <x-secondary-button wire:click="closeGate" wire:loading.attr="disabled">{{ __('Close') }}</x-secondary-button>
            @if ($gateKind === 'closure')
                <a href="{{ route('invoices.index') }}"
                   class="ms-3 inline-flex items-center gap-1.5 rounded-xl bg-white px-3.5 py-2 text-sm font-medium text-indigo-600 ring-1 ring-indigo-200 transition hover:bg-indigo-50">
                    <x-icon name="document-text" class="h-4 w-4" />{{ __('Raise an invoice') }}
                </a>
            @elseif ($gateKind === 'deposit')
                <a href="{{ $job->invoice ? route('invoices.index') : '#' }}"
                   class="ms-3 inline-flex items-center gap-1.5 rounded-xl bg-white px-3.5 py-2 text-sm font-medium text-indigo-600 ring-1 ring-indigo-200 transition hover:bg-indigo-50">
                    <x-icon name="banknotes" class="h-4 w-4" />{{ __('Go to invoice') }}
                </a>
            @else
                <button type="button" @click="tab = 'checklist'" wire:click="closeGate"
                        class="ms-3 inline-flex items-center gap-1.5 rounded-xl bg-white px-3.5 py-2 text-sm font-medium text-indigo-600 ring-1 ring-indigo-200 transition hover:bg-indigo-50">
                    <x-icon name="shield-check" class="h-4 w-4" />{{ __('Go to checklist') }}
                </button>
            @endif
            @if ($canOverride)
                <x-button class="ms-3" wire:click="confirmOverride" wire:loading.attr="disabled">{{ __('Override & change status') }}</x-button>
            @endif
        </x-slot>
    </x-dialog-modal>
</div>