@php
    $color = $order?->status?->color() ?? 'gray';
@endphp
<div class="rounded-2xl border border-{{ $color }}-200 bg-{{ $color }}-50/60 text-xs text-gray-500 dark:border-{{ $color }}-800 dark:bg-{{ $color }}-900/40 dark:text-gray-400 select-none"
    wire:key="order-card-{{ $statusKey }}-{{ $order?->id ?? 'unknown' }}" draggable="true"
    @dragstart="$event.dataTransfer.effectAllowed = 'move'; draggingId = {{ $order?->id ?? 'null' }}; $dispatch('kanban-drag', { id: {{ $order?->id ?? 'null' }} })"
    @dragend="draggingId = null"
    :class="draggingId === {{ $order?->id ?? 'null' }} ?
        'shadow-lg ring-2 ring-offset-2 ring-{{ $color }}-300/80 dark:ring-{{ $color }}-700/70 dark:ring-offset-gray-950 scale-[0.99] transition' :
        'cursor-grab active:cursor-grabbing transition'">
    <div
        class="flex items-center justify-between gap-3 bg-white dark:bg-gray-900 p-3 rounded-t-2xl border-b border-gray-200 dark:border-gray-800">
        <div class="space-y-1">
            <p class="text-sm font-semibold text-gray-900 dark:text-white">
                {{ __('dashboard.kitchen_tickets.order_number', ['id' => $order?->id ?? '?']) }}
            </p>
            <p class="text-xs text-gray-500 dark:text-gray-400">
                {{ $order?->branch?->name ?? __('dashboard.kitchen_tickets.no_branch') }}
                @if ($order?->table?->name)
                    -
                    {{ __('dashboard.kitchen_tickets.table_name', ['name' => $order->table->name]) }}
                @endif
            </p>
        </div>
        <div class="flex flex-col items-end gap-2 text-right">
            <p class="text-[11px] text-gray-400 dark:text-gray-500">
                {{ __('dashboard.kitchen_tickets.added_at', ['time' => $order?->created_at?->diffForHumans()]) }}
            </p>
        </div>
    </div>

    <div class="mt-3 flex flex-col divide-y divide-gray-100 dark:divide-gray-800 p-3">
        @foreach ($items as $item)
            <div class="flex items-start justify-between gap-3 px-1 py-3 first:pt-0">
                <div class="flex flex-1 items-start gap-3">
                    <div
                        class="flex h-10 w-10 items-center justify-center rounded-xl bg-gray-100 text-sm font-bold text-gray-800 dark:bg-white/10 dark:text-white">
                        {{ $item->qty }}x
                    </div>
                    <div class="flex-1 space-y-1">
                        <div class="flex items-center gap-2">
                            <p class="text-sm font-semibold text-gray-900 dark:text-white">
                                {{ $item->name }}</p>
                            @if (!$currentKitchen)
                                <span
                                    class="rounded-full bg-gray-100 px-2 py-1 text-[11px] font-semibold text-gray-700 ring-1 ring-gray-200 dark:bg-white/10 dark:text-gray-200 dark:ring-gray-700">
                                    {{ $item->kitchen?->name ?? __('dashboard.kitchen_tickets.global_kitchen') }}
                                </span>
                            @endif
                        </div>
                        @if ($item->options->count())
                            <p class="text-xs text-gray-600 dark:text-gray-400">
                                {{ $item->options->pluck('name')->implode(', ') }}
                            </p>
                        @endif
                        <p class="text-xs text-gray-500 dark:text-gray-400">
                            {{ __('dashboard.kitchen_tickets.notes', ['notes' => $item->notes ?: __('dashboard.kitchen_tickets.no_notes')]) }}
                        </p>
                    </div>
                </div>
                <div class="flex flex-col items-end gap-2">
                    <div class="flex flex-wrap justify-end gap-2">
                        @if ($item->status === \App\Models\OrderItem::STATUS_PENDING)
                            <button
                                class="rounded-lg border border-indigo-200 bg-indigo-50 px-3 py-1.5 text-xs font-medium text-indigo-700 transition hover:bg-indigo-100 dark:border-indigo-600/40 dark:bg-indigo-500/10 dark:text-indigo-200 dark:hover:bg-indigo-500/20"
                                wire:click="startPreparing({{ $item->id }})">
                                {{ __('dashboard.kitchen_tickets.start_preparing_item') }}
                            </button>
                        @endif
                        @if ($item->status === \App\Models\OrderItem::STATUS_PREPARING)
                            <button
                                class="rounded-lg border border-emerald-200 bg-emerald-50 px-3 py-1.5 text-xs font-medium text-emerald-700 transition hover:bg-emerald-100 dark:border-emerald-600/40 dark:bg-emerald-500/10 dark:text-emerald-200 dark:hover:bg-emerald-500/20"
                                wire:click="markReady({{ $item->id }})">
                                {{ __('dashboard.kitchen_tickets.mark_ready') }}
                            </button>
                        @endif
                    </div>
                </div>
            </div>
        @endforeach
    </div>

    <div
        class="flex justify-between gap-2 bg-white dark:bg-gray-900 p-3 rounded-b-2xl border-t border-gray-200 dark:border-gray-800">
        @php
            $hasPending = $items->contains(fn($i) => $i->status === \App\Models\OrderItem::STATUS_PENDING);
            $allReady = $items->every(fn($i) => $i->status === \App\Models\OrderItem::STATUS_READY);
        @endphp
        <button type="button"
            class="rounded-lg border border-gray-200 bg-white px-3 py-1.5 text-xs font-medium text-gray-700 transition hover:bg-gray-50 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-200 dark:hover:bg-gray-700"
            onclick="event.stopPropagation(); window.open('{{ route('orders.print', $order) }}', '_blank')">
            {{ __('dashboard.print') }}
        </button>
        <div class="flex gap-2">
            @if ($hasPending)
                <button
                    class="rounded-lg border border-indigo-200 bg-indigo-50 px-3 py-1.5 text-xs font-medium text-indigo-700 transition hover:bg-indigo-100 dark:border-indigo-600/40 dark:bg-indigo-500/10 dark:text-indigo-200 dark:hover:bg-indigo-500/20"
                    wire:click="startOrder({{ $order?->id }})">
                    {{ __('dashboard.kitchen_tickets.start_order') }}
                </button>
            @endif
            @if (!$allReady)
                <button
                    class="rounded-lg border border-emerald-200 bg-emerald-50 px-3 py-1.5 text-xs font-medium text-emerald-700 transition hover:bg-emerald-100 dark:border-emerald-600/40 dark:bg-emerald-500/10 dark:text-emerald-200 dark:hover:bg-emerald-500/20"
                    wire:click="markOrderReady({{ $order?->id }})">
                    {{ __('dashboard.kitchen_tickets.mark_order_ready') }}
                </button>
            @endif
        </div>
    </div>
</div>