@php
    $stageMeta = [
        'pre_production' => ['chip' => 'bg-brand-50 text-brand-700',  'icon' => 'flag',         'bar' => 'bg-brand-500',   'ring' => '#6366f1'],
        'production'     => ['chip' => 'bg-sky-50 text-sky-700',      'icon' => 'cog-6-tooth',  'bar' => 'bg-sky-500',     'ring' => '#0ea5e9'],
        'pre_delivery'   => ['chip' => 'bg-emerald-50 text-emerald-700','icon' => 'shield-check','bar' => 'bg-emerald-500', 'ring' => '#10b981'],
    ];

    $filterMeta = [
        'all'         => ['label' => __('All checks'),   'icon' => 'queue-list'],
        'outstanding' => ['label' => __('Still to do'), 'icon' => 'clock'],
        'required'    => ['label' => __('Required'),    'icon' => 'shield-check'],
        'mine'        => ['label' => __('For me'),      'icon' => 'user'],
    ];

    // Ring geometry for the completion donut.
    $ringRadius = 34;
    $ringCircumference = 2 * M_PI * $ringRadius;
    $ringDash = $ringCircumference * min(100, max(0, $summary['pct'])) / 100;

    $allClear = $summary['required'] > 0 && $summary['outstandingRequired'] === 0;
    // Slate while untouched, navy while in flight, emerald once the required set is clear.
    $ringColor = $summary['done'] === 0 ? '#cbd5e1' : ($allClear ? '#10b981' : '#2a5786');
@endphp

<div class="space-y-6">

    {{-- ============ QC SUMMARY ============ --}}
    <x-card class="overflow-hidden">
        <div class="flex flex-col gap-3 border-b border-slate-100 bg-slate-50/60 px-5 py-4 sm:flex-row sm:items-center sm:justify-between">
            <div class="flex items-start gap-3">
                <span class="flex h-9 w-9 shrink-0 items-center justify-center rounded-xl bg-white text-brand-700 shadow-sm ring-1 ring-slate-200">
                    <x-icon name="shield-check" class="h-5 w-5" />
                </span>
                <div>
                    <h2 class="text-base font-semibold text-slate-900">{{ __('Quality Control') }}</h2>
                    <p class="mt-0.5 text-xs text-slate-500">{{ __('Tick each check off as the job moves through production. The ones marked required need doing before the job can be completed or delivered.') }}</p>
                </div>
            </div>
            <div class="flex shrink-0 flex-wrap items-center gap-2">
                <a href="{{ route('jobs.certificate', $job) }}?preview=1" target="_blank" rel="noopener">
                    <x-secondary-button type="button">
                        <x-icon name="eye" class="mr-1.5 h-4 w-4" />
                        {{ __('Preview certificate') }}
                    </x-secondary-button>
                </a>
                <a href="{{ route('jobs.certificate', $job) }}">
                    <x-secondary-button type="button">
                        <x-icon name="arrow-down-tray" class="mr-1.5 h-4 w-4" />
                        {{ __('Download') }}
                    </x-secondary-button>
                </a>
                @if ($canManageChecks)
                    <x-button type="button" wire:click="addCustom">
                        <x-icon name="plus" class="-ml-1 mr-1.5 h-4 w-4" />
                        {{ __('Add check') }}
                    </x-button>
                @endif
            </div>
        </div>

        <div class="flex flex-col gap-6 p-5 lg:flex-row lg:items-center">
            {{-- Completion donut --}}
            <div class="relative flex h-20 w-20 shrink-0 items-center justify-center">
                <svg viewBox="0 0 80 80" class="h-20 w-20 -rotate-90">
                    <circle cx="40" cy="40" r="{{ $ringRadius }}" fill="none" stroke="#e2e8f0" stroke-width="8" />
                    <circle cx="40" cy="40" r="{{ $ringRadius }}" fill="none" stroke="{{ $ringColor }}" stroke-width="8"
                            stroke-linecap="round"
                            stroke-dasharray="{{ round($ringDash, 2) }} {{ round($ringCircumference, 2) }}"
                            class="transition-all duration-500" />
                </svg>
                <span class="absolute text-lg font-bold tabular-nums text-slate-900">{{ $summary['pct'] }}%</span>
            </div>

            {{-- Verdict --}}
            <div class="min-w-0 flex-1">
                @if (! $hasChecks)
                    <p class="text-sm font-semibold text-slate-800">{{ __('There are no quality checks on this job yet') }}</p>
                    <p class="mt-1 text-sm text-slate-500">{{ __('You can add a one-off check here, or set up a template under Jobs → Quality Checklists so every job of this kind starts with the same list.') }}</p>
                @elseif ($allClear)
                    <p class="flex items-center gap-2 text-sm font-semibold text-emerald-700">
                        <x-icon name="check-circle" class="h-5 w-5" />
                        {{ __('All done, everything required has been checked') }}
                    </p>
                    <p class="mt-1 text-sm text-slate-500">
                        {{ trans_choice('{1}:done of :total check verified.|[2,*]:done of :total checks verified.', $summary['total'], ['done' => $summary['done'], 'total' => $summary['total']]) }}
                        {{ __('This job is ready for its quality certificate.') }}
                    </p>
                @elseif ($summary['required'] === 0)
                    <p class="flex items-center gap-2 text-sm font-semibold text-slate-800">
                        <x-icon name="information-circle" class="h-5 w-5 text-slate-400" />
                        {{ __('Nothing here is required') }}
                    </p>
                    <p class="mt-1 text-sm text-slate-500">{{ __('These checks are kept for the record, so none of them will hold the job up.') }}</p>
                @else
                    <p class="flex items-center gap-2 text-sm font-semibold text-slate-800">
                        <x-icon name="clock" class="h-5 w-5 text-brand-yellow-600" />
                        {{ trans_choice('{1}:count check still to do|[2,*]:count checks still to do', $summary['outstandingRequired'], ['count' => $summary['outstandingRequired']]) }}
                    </p>
                    <p class="mt-1 text-sm text-slate-500">{{ __('Once these are ticked off, the job is free to move on. An owner can also let it through early if something is urgent, and that decision is kept on record.') }}</p>
                @endif
            </div>

            {{-- Status gates --}}
            @if ($hasChecks)
                <div class="flex shrink-0 flex-wrap gap-2 lg:flex-col">
                    @foreach ($gates as $gate)
                        <div class="flex items-start gap-2 rounded-xl px-3 py-2 text-xs ring-1 ring-inset {{ $gate['ready'] ? 'bg-emerald-50 text-emerald-700 ring-emerald-600/15' : 'bg-slate-50 text-slate-600 ring-slate-200' }}">
                            <x-icon :name="$gate['ready'] ? 'check-circle' : 'clock'" class="mt-0.5 h-4 w-4 shrink-0 {{ $gate['ready'] ? '' : 'text-brand-yellow-600' }}" />
                            <div>
                                <p class="font-semibold">{{ $gate['label'] }}</p>
                                @unless ($gate['ready'])
                                    <p class="text-slate-500">{{ trans_choice('{1}:count check to go|[2,*]:count checks to go', $gate['outstanding'], ['count' => $gate['outstanding']]) }}</p>
                                @endunless
                            </div>
                        </div>
                    @endforeach
                </div>
            @endif
        </div>

        {{-- Compact stat strip --}}
        @if ($hasChecks)
            @php
                $stats = [
                    ['label' => __('Checks done'),   'value' => $summary['done'].' of '.$summary['total'],             'icon' => 'check-circle', 'tone' => 'brand'],
                    ['label' => __('Required done'), 'value' => $summary['requiredDone'].' of '.$summary['required'],  'icon' => 'shield-check', 'tone' => $allClear ? 'emerald' : 'amber'],
                    ['label' => __('Photos & files'), 'value' => $summary['evidence'] > 0 ? $summary['evidence'].' '.trans_choice('{1}file|[2,*]files', $summary['evidence']) : __('None yet'), 'icon' => 'photo', 'tone' => 'cyan'],
                    ['label' => __('Last update'),   'value' => $summary['lastCheckedAt'] ? \Illuminate\Support\Carbon::parse($summary['lastCheckedAt'])->diffForHumans(null, true).' '.__('ago') : __('Not started'), 'icon' => 'clock', 'tone' => 'slate'],
                ];
                $toneChip = [
                    'brand' => 'bg-brand-50 text-brand-700',
                    'emerald' => 'bg-emerald-50 text-emerald-600',
                    'amber' => 'bg-brand-yellow-50 text-brand-yellow-700',
                    'cyan' => 'bg-cyan-50 text-cyan-600',
                    'slate' => 'bg-slate-100 text-slate-500',
                ];
            @endphp
            <div class="grid grid-cols-2 border-t border-slate-100 sm:grid-cols-4 sm:divide-x sm:divide-slate-100">
                @foreach ($stats as $stat)
                    <div class="flex items-center gap-3 px-5 py-4">
                        <span class="flex h-10 w-10 shrink-0 items-center justify-center rounded-xl {{ $toneChip[$stat['tone']] }}">
                            <x-icon :name="$stat['icon']" class="h-5 w-5" />
                        </span>
                        <div class="min-w-0">
                            <p class="text-[10px] font-semibold uppercase tracking-wider text-slate-400">{{ $stat['label'] }}</p>
                            <p class="truncate text-base font-bold tabular-nums text-slate-900">{{ $stat['value'] }}</p>
                        </div>
                    </div>
                @endforeach
            </div>
        @endif
    </x-card>

    {{-- ============ FILTERS ============ --}}
    @if ($hasChecks)
        <div class="flex flex-wrap items-center justify-between gap-3">
            <div class="flex flex-wrap items-center gap-1 rounded-xl border border-slate-200 bg-slate-50 p-1 text-sm font-medium">
                @foreach ($filterMeta as $key => $meta)
                    <button type="button" wire:click="setFilter('{{ $key }}')"
                            class="flex items-center gap-1.5 rounded-lg px-3.5 py-1.5 transition {{ $filter === $key ? 'bg-white text-indigo-600 shadow-sm ring-1 ring-slate-200' : 'text-slate-500 hover:text-slate-700' }}">
                        <x-icon :name="$meta['icon']" class="h-4 w-4" />
                        {{ $meta['label'] }}
                        <span class="rounded-full px-1.5 text-[11px] font-semibold tabular-nums {{ $filter === $key ? 'bg-brand-50 text-brand-700' : 'bg-slate-200/70 text-slate-500' }}">{{ $filterCounts[$key] ?? 0 }}</span>
                    </button>
                @endforeach
            </div>
            <p class="text-xs text-slate-400">{{ __('Every tick records who did it and when, so nobody has to remember later.') }}</p>
        </div>
    @endif

    {{-- ============ CHECKS BY STAGE ============ --}}
    @foreach ($stageOrder as $stage)
        @php
            $items = $grouped[$stage] ?? collect();
            $meta = $stageMeta[$stage] ?? $stageMeta['production'];
            $p = $progress[$stage] ?? ['total' => 0, 'done' => 0, 'required' => 0, 'requiredDone' => 0, 'pct' => 0];
        @endphp
        @if ($items->isNotEmpty())
            <x-card class="overflow-hidden" wire:key="stage-{{ $stage }}">
                {{-- Stage header --}}
                <div class="border-b border-slate-100 bg-slate-50/60 px-4 py-3 sm:px-5">
                    <div class="flex flex-wrap items-center justify-between gap-3">
                        <div class="flex items-center gap-2.5">
                            <span class="flex h-8 w-8 items-center justify-center rounded-lg {{ $meta['chip'] }}">
                                <x-icon :name="$meta['icon']" class="h-4 w-4" />
                            </span>
                            <h3 class="text-sm font-bold text-slate-800">{{ $stageLabels[$stage] ?? $stage }}</h3>
                            @if ($p['required'] > 0)
                                <x-badge :color="$p['requiredDone'] >= $p['required'] ? 'emerald' : 'amber'">
                                    <x-icon name="shield-check" class="h-3 w-3" />
                                    {{ $p['requiredDone'] }}/{{ $p['required'] }} {{ __('required') }}
                                </x-badge>
                            @endif
                        </div>
                        <div class="flex items-center gap-3">
                            <span class="text-xs font-medium tabular-nums text-slate-500">{{ $p['done'] }}/{{ $p['total'] }} {{ __('done') }}</span>
                            @if (($quickTickable[$stage] ?? 0) > 0)
                                <button type="button" wire:click="completeStage('{{ $stage }}')"
                                        wire:confirm="{{ __('Sign off every straightforward check left in this stage?') }}"
                                        class="inline-flex items-center gap-1 rounded-lg px-2 py-1 text-xs font-semibold text-indigo-600 transition hover:bg-white hover:text-indigo-700">
                                    <x-icon name="check" class="h-3.5 w-3.5" />
                                    {{ __('Tick remaining (:count)', ['count' => $quickTickable[$stage]]) }}
                                </button>
                            @endif
                        </div>
                    </div>

                    <div class="mt-3 h-1.5 w-full overflow-hidden rounded-full bg-slate-200/70">
                        <div class="h-full rounded-full {{ $meta['bar'] }} transition-all duration-500" style="width: {{ $p['pct'] }}%"></div>
                    </div>
                </div>

                {{-- Checks --}}
                <ul class="divide-y divide-slate-100">
                    @foreach ($items as $item)
                        @php
                            $canTick = $tickable[$item->id] ?? false;
                            // Thumbnails first, voice notes after: an audio player
                            // takes a full row and would otherwise split the strip.
                            $itemMedia = ($mediaByItem[$item->id] ?? collect())
                                ->sortBy(fn ($m) => $m->is_audio ? 1 : 0)
                                ->values();
                        @endphp
                        <li wire:key="check-{{ $item->id }}"
                            class="group/item flex gap-3 px-4 py-3.5 transition hover:bg-slate-50/70 sm:px-5 {{ $item->is_done ? 'bg-emerald-50/30' : '' }}">

                            {{-- Tick box --}}
                            <button type="button"
                                    @if ($canTick) wire:click="toggle({{ $item->id }})" @else disabled @endif
                                    class="mt-0.5 flex h-6 w-6 shrink-0 items-center justify-center rounded-lg border-2 transition
                                        {{ $item->is_done ? 'border-emerald-500 bg-emerald-500 text-white shadow-sm' : 'border-slate-300 bg-white text-transparent' }}
                                        {{ $canTick ? 'cursor-pointer hover:border-indigo-500 hover:text-indigo-300' : 'cursor-not-allowed opacity-50' }}"
                                    title="{{ $canTick ? ($item->is_done ? __('Un-tick this check') : __('Mark verified')) : __('This check is assigned to another role') }}">
                                <x-icon name="check" class="h-3.5 w-3.5" />
                            </button>

                            {{-- Body --}}
                            <div class="min-w-0 flex-1">
                                <div class="flex flex-wrap items-center gap-x-2 gap-y-1">
                                    <span class="text-sm font-medium {{ $item->is_done ? 'text-slate-500' : 'text-slate-900' }}">{{ $item->label }}</span>

                                    @if ($item->is_required)
                                        <span class="rounded px-1.5 py-0.5 text-[10px] font-bold uppercase tracking-wide {{ $item->is_done ? 'bg-slate-100 text-slate-400' : 'bg-brand-red-50 text-brand-red-700' }}">{{ __('Required') }}</span>
                                    @endif

                                    <x-badge :color="$respMeta[$item->responsible]['color'] ?? 'slate'">
                                        {{ $respMeta[$item->responsible]['label'] ?? ucfirst($item->responsible) }}
                                    </x-badge>

                                    @if ($item->requires_approval)
                                        <span class="inline-flex items-center gap-1 rounded-md bg-slate-100 px-1.5 py-0.5 text-[10px] font-medium text-slate-500" title="{{ __('Needs a named approver') }}">
                                            <x-icon name="shield-check" class="h-3 w-3" />{{ __('approval') }}
                                        </span>
                                    @endif
                                    @if ($item->requires_evidence)
                                        <span class="inline-flex items-center gap-1 rounded-md bg-slate-100 px-1.5 py-0.5 text-[10px] font-medium text-slate-500" title="{{ __('Needs a photo or file as proof') }}">
                                            <x-icon name="paper-clip" class="h-3 w-3" />{{ __('evidence') }}
                                        </span>
                                    @endif
                                    @if (! $canTick)
                                        <span class="inline-flex items-center gap-1 text-[10px] font-medium text-slate-400" title="{{ __('Only the responsible role or a supervisor can sign this off') }}">
                                            <x-icon name="lock-closed" class="h-3 w-3" />{{ __('locked') }}
                                        </span>
                                    @endif
                                </div>

                                @if ($item->description)
                                    <p class="mt-1 text-xs leading-relaxed text-slate-500">{{ $item->description }}</p>
                                @endif

                                {{-- Evidence captured against this check --}}
                                @if ($itemMedia->isNotEmpty())
                                    <div class="mt-2 flex flex-wrap items-center gap-2">
                                        @foreach ($itemMedia as $m)
                                            <x-media-tile wire:key="qc-media-{{ $m->id }}" :file="$m" compact
                                                          :delete-action="$canTick ? 'removeMedia('.$m->id.')' : null"
                                                          :delete-confirm="__('Remove this evidence? The file is deleted too.')" />
                                        @endforeach
                                    </div>
                                @endif

                                {{-- Capture bar, open on the check the camera button was pressed on --}}
                                @if ($canTick && $mediaItemId === $item->id && ! $showSignOff)
                                    <x-media-capture target="media" class="mt-2" wire:key="capture-{{ $item->id }}"
                                                     :max-kb="$uploadMaxKb"
                                                     :hint="__('Photos, clips and voice notes are recorded here on the page — you never leave the job. Up to :size per file.', ['size' => $uploadMaxKb >= 1024 ? round($uploadMaxKb / 1024).' MB' : $uploadMaxKb.' KB'])" />
                                    <x-input-error for="media" class="mt-1" />
                                    <x-input-error for="media.*" class="mt-1" />
                                @endif

                                {{-- Sign-off record --}}
                                @if ($item->is_done)
                                    <div class="mt-2 flex flex-wrap items-start gap-3 rounded-xl bg-white/70 p-2.5 ring-1 ring-emerald-200/60">
                                        <div class="min-w-0 flex-1 space-y-1 text-xs text-slate-500">
                                            <p class="flex flex-wrap items-center gap-x-1.5">
                                                <x-icon name="check-circle" class="h-3.5 w-3.5 shrink-0 text-emerald-600" />
                                                <span class="font-semibold text-emerald-700">{{ __('Verified') }}</span>
                                                @if ($item->checker)<span>{{ __('by :name', ['name' => $item->checker->name]) }}</span>@endif
                                                @if ($item->checked_at)<span class="text-slate-400">· {{ $item->checked_at->format('j M Y, H:i') }}</span>@endif
                                            </p>
                                            @if ($item->approved_by_name)
                                                <p class="flex flex-wrap items-center gap-x-1.5">
                                                    <x-icon name="shield-check" class="h-3.5 w-3.5 shrink-0 text-slate-400" />
                                                    {{ __('Approved by :name', ['name' => $item->approved_by_name]) }}
                                                    @if ($item->approved_on)<span class="text-slate-400">· {{ $item->approved_on->format('j M Y') }}</span>@endif
                                                </p>
                                            @endif
                                            @if ($item->note)
                                                <p class="italic text-slate-600">“{{ $item->note }}”</p>
                                            @endif
                                        </div>
                                    </div>
                                @endif
                            </div>

                            {{-- Row actions --}}
                            @php
                                $canEditSignOff = $canTick && $item->is_done && ($item->requires_approval || $item->requires_evidence);
                                $canDelete = $canManageChecks && $item->template_item_id === null;
                                $canPinComment = $canManage;
                            @endphp
                            {{-- Dimmed rather than hidden: the floor works on touch screens, where
                                 there is no hover to reveal them. --}}
                            <div class="flex shrink-0 items-start gap-1 opacity-60 transition group-hover/item:opacity-100 focus-within:opacity-100">
                                @if ($canTick)
                                    <button type="button" wire:click="captureFor({{ $item->id }})"
                                            class="rounded-lg p-1.5 transition hover:bg-white {{ $mediaItemId === $item->id ? 'bg-white text-indigo-600 ring-1 ring-slate-200' : 'text-slate-400 hover:text-indigo-600' }}"
                                            title="{{ __('Add a photo, clip or voice note') }}">
                                        <x-icon name="photo" class="h-4 w-4" />
                                    </button>
                                @endif
                                @if ($canPinComment)
                                    <button type="button" wire:click="commentOn({{ $item->id }})"
                                            class="rounded-lg p-1.5 text-slate-400 transition hover:bg-white hover:text-indigo-600"
                                            title="{{ __('Comment on this check') }}">
                                        <x-icon name="chat-bubble-left-ellipsis" class="h-4 w-4" />
                                    </button>
                                @endif
                                @if ($canEditSignOff)
                                    <button type="button" wire:click="openSignOff({{ $item->id }})"
                                            class="rounded-lg p-1.5 text-slate-400 transition hover:bg-white hover:text-indigo-600"
                                            title="{{ __('Edit sign-off') }}">
                                        <x-icon name="pencil-square" class="h-4 w-4" />
                                    </button>
                                @endif
                                @if ($canDelete)
                                    <button type="button" wire:click="deleteItem({{ $item->id }})" wire:confirm="{{ __('Remove this check?') }}"
                                            class="rounded-lg p-1.5 text-slate-400 transition hover:bg-white hover:text-rose-600"
                                            title="{{ __('Remove check') }}">
                                        <x-icon name="trash" class="h-4 w-4" />
                                    </button>
                                @endif
                            </div>
                        </li>
                    @endforeach
                </ul>
            </x-card>
        @endif
    @endforeach

    {{-- Nothing to show --}}
    @if ($grouped->isEmpty())
        <x-card class="p-5">
            @if ($hasChecks)
                <x-empty-state
                    icon="funnel"
                    :title="__('No checks match this filter')"
                    :message="__('Every check is either done, or assigned to another role. Switch back to All checks to see the full list.')"
                    class="border-0 bg-transparent py-8"
                >
                    <x-secondary-button type="button" wire:click="setFilter('all')">{{ __('Show all checks') }}</x-secondary-button>
                </x-empty-state>
            @else
                <x-empty-state
                    icon="shield-check"
                    :title="__('No checks for this job')"
                    :message="__('No checklist template matches this job yet. Add a one-off check, or set up templates under Jobs → Checklists.')"
                    class="border-0 bg-transparent py-8"
                >
                    @if ($canManageChecks)
                        <x-button type="button" wire:click="addCustom">
                            <x-icon name="plus" class="-ml-1 mr-1.5 h-4 w-4" />
                            {{ __('Add the first check') }}
                        </x-button>
                    @endif
                </x-empty-state>
            @endif
        </x-card>
    @endif

    {{-- Evidence that arrived through Drive rather than being captured here, so
         it belongs to the job but to no particular check. --}}
    @if ($unpinnedMedia->isNotEmpty())
        <x-card class="overflow-hidden">
            <div class="flex items-center gap-3 border-b border-slate-100 bg-slate-50/60 px-5 py-4">
                <span class="flex h-9 w-9 shrink-0 items-center justify-center rounded-xl bg-white text-brand-700 shadow-sm ring-1 ring-slate-200">
                    <x-icon name="photo" class="h-5 w-5" />
                </span>
                <div>
                    <h3 class="text-base font-semibold text-slate-900">{{ __('Evidence not linked to a check') }}</h3>
                    <p class="mt-0.5 text-xs text-slate-500">{{ __('Found in the job’s Quality Control folder in Drive. It counts as evidence on this job, but nobody said which check it proves.') }}</p>
                </div>
            </div>
            <div class="flex flex-wrap items-center gap-2 p-5">
                @foreach ($unpinnedMedia as $m)
                    <x-media-tile wire:key="loose-media-{{ $m->id }}" :file="$m" compact
                                  :delete-action="$canManageChecks ? 'removeMedia('.$m->id.')' : null"
                                  :delete-confirm="__('Remove this evidence? The file is deleted too.')" />
                @endforeach
            </div>
        </x-card>
    @endif

    {{-- ============ QUALITY NOTES ============ --}}
    <x-card class="overflow-hidden">
        <div class="flex items-center gap-3 border-b border-slate-100 bg-slate-50/60 px-5 py-4">
            <span class="flex h-9 w-9 shrink-0 items-center justify-center rounded-xl bg-white text-brand-700 shadow-sm ring-1 ring-slate-200">
                <x-icon name="chat-bubble-left-right" class="h-5 w-5" />
            </span>
            <div>
                <h3 class="text-base font-semibold text-slate-900">{{ __('Quality notes') }}</h3>
                <p class="mt-0.5 text-xs text-slate-500">{{ __('Raise issues, observations or sign-off remarks about this job’s quality.') }}</p>
            </div>
            @if ($comments->isNotEmpty())
                <span class="ml-auto rounded-full bg-slate-100 px-2.5 py-0.5 text-xs font-semibold tabular-nums text-slate-600">{{ $comments->count() }}</span>
            @endif
        </div>

        <div class="p-5">
            @if ($canManage)
                <div class="rounded-2xl border border-slate-200 bg-slate-50/60 p-3">
                    @if ($commentItemId)
                        @php $pinned = $commentItems->firstWhere('id', $commentItemId); @endphp
                        @if ($pinned)
                            <div class="mb-2 inline-flex items-center gap-1.5 rounded-lg bg-brand-50 px-2 py-1 text-xs font-medium text-brand-700">
                                <x-icon name="paper-clip" class="h-3.5 w-3.5" />
                                {{ \Illuminate\Support\Str::limit($pinned->label, 60) }}
                                <button type="button" wire:click="commentOn(null)" class="text-brand-400 transition hover:text-rose-600" title="{{ __('Unpin') }}">
                                    <x-icon name="x-mark" class="h-3.5 w-3.5" />
                                </button>
                            </div>
                        @endif
                    @endif

                    <textarea rows="2" wire:model="comment"
                              class="block w-full rounded-xl border-slate-300 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500"
                              placeholder="{{ __('Add a quality note or comment…') }}"></textarea>
                    <x-input-error for="comment" class="mt-1" />

                    <div class="mt-2 flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
                        <select wire:model="commentItemId" class="w-full rounded-xl border-slate-300 text-xs shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:w-auto sm:max-w-xs">
                            <option value="">{{ __('General (whole job)') }}</option>
                            @foreach ($commentItems as $ci)
                                <option value="{{ $ci->id }}">{{ \Illuminate\Support\Str::limit($ci->label, 60) }}</option>
                            @endforeach
                        </select>
                        <x-button type="button" wire:click="addComment" wire:loading.attr="disabled" wire:target="addComment">
                            <x-icon name="paper-airplane" class="-ml-1 mr-1.5 h-4 w-4" />
                            {{ __('Post note') }}
                        </x-button>
                    </div>
                </div>
            @endif

            <ul class="mt-4 space-y-3">
                @forelse ($comments as $c)
                    <li wire:key="qc-{{ $c->id }}" class="group/note flex gap-3">
                        <span class="flex h-9 w-9 shrink-0 items-center justify-center rounded-full bg-brand-100 text-xs font-bold text-brand-700 ring-1 ring-brand-200">
                            {{ \Illuminate\Support\Str::of($c->user?->name ?? '?')->trim()->substr(0, 1)->upper() }}
                        </span>
                        <div class="min-w-0 flex-1 rounded-2xl border border-slate-200 bg-white px-3.5 py-2.5">
                            <div class="flex items-start justify-between gap-2">
                                <div class="min-w-0">
                                    <p class="text-sm font-semibold text-slate-900">{{ $c->user?->name ?? __('Unknown') }}</p>
                                    <p class="text-[11px] text-slate-400">{{ $c->created_at?->format('j M Y, H:i') }}</p>
                                </div>
                                @if ($canManage && ($c->user_id === auth()->id() || $canModerate))
                                    <button type="button" wire:click="deleteComment({{ $c->id }})" wire:confirm="{{ __('Delete this note?') }}"
                                            class="rounded-lg p-1 text-slate-300 opacity-70 transition hover:text-rose-600 group-hover/note:opacity-100"
                                            title="{{ __('Delete') }}">
                                        <x-icon name="trash" class="h-3.5 w-3.5" />
                                    </button>
                                @endif
                            </div>
                            @if ($c->checklistItem)
                                <p class="mt-1.5 inline-flex items-center gap-1 rounded-md bg-brand-50 px-1.5 py-0.5 text-[11px] font-medium text-brand-700">
                                    <x-icon name="paper-clip" class="h-3 w-3" />{{ \Illuminate\Support\Str::limit($c->checklistItem->label, 60) }}
                                </p>
                            @endif
                            <p class="mt-1.5 whitespace-pre-line text-sm leading-relaxed text-slate-600">{{ $c->body }}</p>
                        </div>
                    </li>
                @empty
                    <li>
                        <p class="rounded-xl border border-dashed border-slate-200 px-4 py-6 text-center text-sm text-slate-400">
                            {{ __('No quality notes yet.') }}
                        </p>
                    </li>
                @endforelse
            </ul>
        </div>
    </x-card>

    {{-- ============ SIGN-OFF MODAL ============ --}}
    <x-dialog-modal wire:model.live="showSignOff" maxWidth="lg">
        <x-slot name="title">{{ __('Verify check') }}</x-slot>
        <x-slot name="content">
            @php $signItem = $signOffId ? $commentItems->firstWhere('id', $signOffId) : null; @endphp
            @if ($signItem)
                <div class="flex items-start gap-3 rounded-xl border border-slate-200 bg-slate-50 px-3.5 py-3">
                    <span class="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-white text-brand-700 ring-1 ring-slate-200">
                        <x-icon name="shield-check" class="h-4 w-4" />
                    </span>
                    <div class="min-w-0">
                        <p class="text-sm font-semibold text-slate-900">{{ $signItem->label }}</p>
                        <p class="mt-0.5 text-xs text-slate-500">
                            {{ $stageLabels[$signItem->stage] ?? $signItem->stage }}
                            · {{ $respMeta[$signItem->responsible]['label'] ?? ucfirst($signItem->responsible) }}
                            @if ($signItem->requires_approval) · {{ __('needs an approver') }} @endif
                            @if ($signItem->requires_evidence) · {{ __('needs evidence') }} @endif
                        </p>
                    </div>
                </div>
            @endif

            <div class="mt-4 grid grid-cols-1 gap-4 sm:grid-cols-2">
                <div>
                    <x-label for="approvedByName" :value="__('Approved by')" />
                    <x-input id="approvedByName" type="text" wire:model="approvedByName" class="mt-1 block w-full" placeholder="{{ __('Client / manager name') }}" />
                    <x-input-error for="approvedByName" class="mt-2" />
                </div>
                <div>
                    <x-label for="approvedOn" :value="__('Approved on')" />
                    <x-input id="approvedOn" type="date" wire:model="approvedOn" class="mt-1 block w-full" />
                    <x-input-error for="approvedOn" class="mt-2" />
                </div>
                <div class="sm:col-span-2">
                    <x-label for="checkNote" :value="__('Note (optional)')" />
                    <textarea id="checkNote" rows="2" wire:model="note" class="mt-1 block w-full rounded-xl border-slate-300 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500"
                              placeholder="{{ __('What was checked, and what did you find?') }}"></textarea>
                    <x-input-error for="note" class="mt-2" />
                </div>
                <div class="sm:col-span-2">
                    <x-label :value="__('Evidence')" />
                    <p class="mt-0.5 text-xs text-slate-400">
                        {{ __('A photo of the approved sample, a clip of the machine running, a voice note on what you found — anything that stands as the record. Each one is saved as you capture it.') }}
                    </p>

                    @php
                        $signMedia = ($signOffId ? ($mediaByItem[$signOffId] ?? collect()) : collect())
                            ->sortBy(fn ($m) => $m->is_audio ? 1 : 0)
                            ->values();
                    @endphp
                    @if ($signMedia->isNotEmpty())
                        <div class="mt-2 flex flex-wrap items-center gap-2">
                            @foreach ($signMedia as $m)
                                <x-media-tile wire:key="sign-media-{{ $m->id }}" :file="$m" compact
                                              :delete-action="'removeMedia('.$m->id.')'"
                                              :delete-confirm="__('Remove this evidence? The file is deleted too.')" />
                            @endforeach
                        </div>
                    @endif

                    <x-media-capture target="media" class="mt-2" :max-kb="$uploadMaxKb"
                                     :hint="__('Photos, clips and voice notes are recorded here on the page — you never leave the job. Up to :size per file.', ['size' => $uploadMaxKb >= 1024 ? round($uploadMaxKb / 1024).' MB' : $uploadMaxKb.' KB'])" />
                    <x-input-error for="media" class="mt-2" />
                    <x-input-error for="media.*" class="mt-2" />
                </div>
            </div>
        </x-slot>
        <x-slot name="footer">
            <x-secondary-button wire:click="closeSignOff" wire:loading.attr="disabled">{{ __('Cancel') }}</x-secondary-button>
            <x-button class="ms-3" wire:click="saveSignOff" wire:loading.attr="disabled" wire:target="saveSignOff,media">
                <span wire:loading.remove wire:target="saveSignOff,media">{{ __('Verify & mark done') }}</span>
                <span wire:loading wire:target="saveSignOff,media">{{ __('Saving…') }}</span>
            </x-button>
        </x-slot>
    </x-dialog-modal>

    {{-- ============ ADD CHECK MODAL ============ --}}
    <x-dialog-modal wire:model.live="showAddModal" maxWidth="lg">
        <x-slot name="title">{{ __('Add a check') }}</x-slot>
        <x-slot name="content">
            <p class="text-sm text-slate-500">{{ __('A one-off check for this job only. To add it to every job of this type, edit the template under Jobs → Checklists.') }}</p>

            <div class="mt-4 grid grid-cols-1 gap-4">
                <div>
                    <x-label for="newLabel" :value="__('Check')" />
                    <x-input id="newLabel" type="text" wire:model="newLabel" class="mt-1 block w-full" placeholder="{{ __('e.g. Spot-colour matched to Pantone') }}" />
                    <x-input-error for="newLabel" class="mt-2" />
                </div>
                <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
                    <div>
                        <x-label for="newStage" :value="__('Stage')" />
                        <select id="newStage" wire:model="newStage" class="mt-1 block w-full rounded-xl border-slate-300 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
                            @foreach ($stageOrder as $s)
                                <option value="{{ $s }}">{{ $stageLabels[$s] ?? $s }}</option>
                            @endforeach
                        </select>
                        <x-input-error for="newStage" class="mt-2" />
                    </div>
                    <div>
                        <x-label for="newResponsible" :value="__('Responsible')" />
                        <select id="newResponsible" wire:model="newResponsible" class="mt-1 block w-full rounded-xl border-slate-300 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
                            @foreach ($responsibleOptions as $key => $label)
                                <option value="{{ $key }}">{{ $label }}</option>
                            @endforeach
                        </select>
                        <x-input-error for="newResponsible" class="mt-2" />
                    </div>
                </div>
                <label class="flex cursor-pointer items-start gap-3 rounded-xl border border-slate-200 p-3 text-sm transition has-[:checked]:border-indigo-400 has-[:checked]:bg-brand-50/50">
                    <input type="checkbox" wire:model="newRequired" class="mt-0.5 rounded border-slate-300 text-indigo-600 focus:ring-indigo-500" />
                    <span>
                        <span class="block font-medium text-slate-800">{{ __('Required') }}</span>
                        <span class="block text-xs text-slate-500">{{ __('The job cannot move to Completed or Delivered until this is signed off.') }}</span>
                    </span>
                </label>
            </div>
        </x-slot>
        <x-slot name="footer">
            <x-secondary-button wire:click="$set('showAddModal', false)" wire:loading.attr="disabled">{{ __('Cancel') }}</x-secondary-button>
            <x-button class="ms-3" wire:click="saveCustom" wire:loading.attr="disabled" wire:target="saveCustom">
                <span wire:loading.remove wire:target="saveCustom">{{ __('Add check') }}</span>
                <span wire:loading wire:target="saveCustom">{{ __('Adding…') }}</span>
            </x-button>
        </x-slot>
    </x-dialog-modal>
</div>