{{-- Live work order tracking (dashboard). Refreshes every 60 s while the tab is visible. --}}
<div wire:poll.60s.visible>
    <x-ui.card title="Work orders · live tracking" description="Open orders, most urgent deadline first. Updates automatically." icon="arrow-path" :padding="false">
        <x-slot:actions>
            @if ($canFilterMine)
                <div class="inline-flex rounded-lg bg-slate-100 p-0.5 text-xs font-medium" role="group" aria-label="Show work orders">
                    <button type="button" wire:click="$set('mine', false)" @class(['rounded-md px-2.5 py-1', 'bg-white text-slate-900 shadow-sm' => ! $mine, 'text-slate-500 hover:text-slate-800' => $mine]) aria-pressed="{{ $mine ? 'false' : 'true' }}">All open</button>
                    <button type="button" wire:click="$set('mine', true)" @class(['rounded-md px-2.5 py-1', 'bg-white text-slate-900 shadow-sm' => $mine, 'text-slate-500 hover:text-slate-800' => ! $mine]) aria-pressed="{{ $mine ? 'true' : 'false' }}">Assigned to me</button>
                </div>
            @endif
            <x-ui.button variant="ghost" size="sm" :href="route('work-orders.index', ['status' => 'open'])" icon-right="arrow-right">All open</x-ui.button>
        </x-slot:actions>

        <ul class="divide-y divide-slate-100" wire:loading.class="opacity-60" wire:target="mine">
            @forelse ($rows as ['order' => $order, 'steps' => $steps])
                <li class="px-5 py-5" wire:key="track-{{ $order->ulid }}">
                    <div class="flex flex-wrap items-center gap-x-3 gap-y-1">
                        <a href="{{ route('work-orders.show', $order) }}" wire:navigate class="text-base font-semibold text-slate-900 hover:text-brand-700">{{ $order->customer?->displayName() }}</a>
                        <span class="font-mono text-xs text-slate-500">{{ $order->work_order_number }}</span>
                        <x-ui.status-badge :status="$order->status" />
                        <x-ui.deadline-badge :work-order="$order" />
                        <span class="text-xs text-slate-500">
                            Due {{ format_date($order->deadline_date) }} · {{ $order->assignedUser?->name ?? 'Unassigned' }}@if ($multiOrg) · {{ $order->organization?->name }}@endif
                        </span>
                    </div>

                    {{-- Progress: horizontal steps; scrolls sideways on small screens. --}}
                    <div class="-mx-5 mt-4 overflow-x-auto px-5 pb-1">
                        <ol class="flex min-w-[40rem]" aria-label="Progress of {{ $order->work_order_number }}">
                            @foreach ($steps as $step)
                                @php($state = $step['state'])
                                <li class="relative flex flex-1 flex-col items-center text-center" @if ($state === 'current') aria-current="step" @endif>
                                    @unless ($loop->last)
                                        <span @class([
                                            'absolute top-4 left-1/2 w-full border-t-2',
                                            'border-solid border-brand-300' => $state === 'done' || $state === 'skipped',
                                            'border-dotted border-slate-300' => ! in_array($state, ['done', 'skipped'], true),
                                        ]) aria-hidden="true"></span>
                                    @endunless
                                    <span @class([
                                        'relative z-[1] flex size-8 items-center justify-center rounded-full ring-4 ring-white',
                                        'bg-brand-100' => $state === 'done',
                                        'bg-amber-100' => $state === 'current',
                                        'bg-orange-50 outline-2 outline-dashed outline-orange-300' => $state === 'hold',
                                        'bg-slate-100' => in_array($state, ['pending', 'skipped'], true),
                                    ])>
                                        @if ($state === 'done')
                                            <x-icon name="check" class="size-4 text-brand-700" />
                                        @elseif ($state === 'current')
                                            <span class="absolute inline-flex size-8 animate-ping rounded-full bg-amber-300 opacity-40 motion-reduce:hidden"></span>
                                            <span class="relative size-3 rounded-full bg-amber-500"></span>
                                        @elseif ($state === 'hold')
                                            <x-icon name="pause-circle" class="size-4 text-orange-600" />
                                        @else
                                            <span class="size-2 rounded-full bg-slate-300"></span>
                                        @endif
                                    </span>
                                    <p @class(['mt-2 text-sm font-medium', 'text-slate-900' => in_array($state, ['done', 'current', 'hold'], true), 'text-slate-400' => ! in_array($state, ['done', 'current', 'hold'], true)])>{{ $step['label'] }}</p>
                                    @if ($state === 'current')
                                        <p class="text-xs font-semibold text-amber-700">In process</p>
                                    @elseif ($state === 'hold')
                                        <p class="text-xs font-semibold text-orange-700">On hold</p>
                                    @elseif ($state === 'skipped')
                                        <p class="text-xs text-slate-400">Skipped</p>
                                    @endif
                                    @if ($step['at'] && in_array($state, ['done', 'current'], true))
                                        <p class="text-xs text-slate-500">{{ format_datetime($step['at'], false) }}</p>
                                        @if ($step['by'])<p class="text-xs text-slate-500">{{ $step['by'] }}</p>@endif
                                    @endif
                                </li>
                            @endforeach
                        </ol>
                    </div>
                </li>
            @empty
                <li><x-ui.empty-state icon="check-badge" :title="$mine ? 'No open work orders assigned to you' : 'No open work orders'" class="py-10!" /></li>
            @endforelse
        </ul>
    </x-ui.card>
</div>