@php
    $columns = [
        'new'       => ['New',            'var(--accent)',  'preparing', 'Start cooking',  'var(--ink)'],
        'preparing' => ['Preparing',      '#B45309',        'ready',     'Mark as ready',  'var(--green)'],
        'ready'     => ['Ready to serve', 'var(--green)',   'served',    'Served',         'var(--ink)'],
    ];
@endphp
<input type="hidden" id="openTotal" value="{{ $orders->flatten()->count() }}">

<div class="cols">
    @foreach ($columns as $status => [$label, $color, $next, $action, $btn])
        <div class="col" data-status="{{ $status }}">
            <h3><span class="dot" style="background:{{ $color }}"></span>{{ $label }}</h3>

            <div class="list">
                @foreach ($orders->get($status, collect()) as $order)
                    <div class="ticket {{ $status === 'new' ? 'fresh' : '' }}"
                         data-id="{{ $order->id }}"
                         data-status="{{ $status }}"
                         data-sig="{{ $order->status }}|{{ $order->updated_at->timestamp }}">
                        <div class="top">
                            <strong>{{ $order->table->name }}</strong>
                            <span class="muted" style="font-size:13px;font-weight:700">
                                #{{ $order->id }} &middot; <span class="age">{{ $order->created_at->diffForHumans(short: true) }}</span>
                            </span>
                        </div>

                        <div style="display:flex;flex-direction:column;gap:8px">
    @foreach ($order->items as $line)
        <div style="display:flex;align-items:center;gap:10px">
            @if (!empty($line->image))
                <img src="{{ $line->image }}" alt="{{ $line->name }}" loading="lazy"
                     style="width:52px;height:52px;border-radius:10px;object-fit:cover;flex-shrink:0">
            @else
                <div style="width:52px;height:52px;border-radius:10px;background:#eee;flex-shrink:0"></div>
            @endif
            <span style="line-height:1.3">
                <strong>{{ $line->quantity }} &times;</strong> {{ $line->name }}
                @if ($line->options)
                    <br><span style="display:inline-block;margin-top:2px;padding:2px 8px;border-radius:8px;background:#E3F0E9;color:#1F5C45;font-size:13px;font-weight:700">{{ $line->options }}</span>
                @endif
            </span>
        </div>
    @endforeach
</div>

                        @if ($order->note)
                            <div class="note">Note: {{ $order->note }}</div>
                        @endif

                        <div class="muted" style="font-size:13px">
                            {{ $order->payment_method === 'counter' ? 'Pays at the counter' : 'Paying on phone' }}
                            &middot; ${{ number_format($order->total, 2) }}
                        </div>

                        <form method="POST" action="{{ route('kitchen.update', $order) }}">
                            @csrf @method('PATCH')
                            <input type="hidden" name="status" value="{{ $next }}">
                            <button type="submit" class="go" style="background:{{ $btn }}">{{ $action }}</button>
                        </form>
                    </div>
                @endforeach
            </div>

            <p class="empty muted" style="font-size:14px">Nothing here.</p>
        </div>
    @endforeach
</div>