<div class="p-6 text-white">
    <h2 class="text-xl font-semibold mb-4">Daftar Pesanan untuk Dimasak</h2>

    <div class="overflow-x-auto rounded-lg bg-[#1f1f1f]">
        <table class="min-w-full text-sm text-white">
            <thead class="bg-[#2c2c2c] text-gray-300 uppercase text-xs">
                <tr>
                    <th class="px-4 py-3 text-left">Menu Pesanan</th>
                    <th class="px-4 py-3 text-left">Nama Item</th>
                    <th class="px-4 py-3 text-left">Meja</th>
                    <th class="px-4 py-3 text-left">Customer</th>
                    <th class="px-4 py-3 text-left">Waktu Pesan</th>
                    <th class="px-4 py-3 text-left">Status</th>
                    <th class="px-4 py-3 text-left">Aksi</th>
                </tr>
            </thead>
            <tbody>
                @forelse ($kitchenItems as $orderId => $items)
                    <tr class="border-t border-gray-700 hover:bg-[#2a2a2a] transition">
                        <td class="px-4 py-2 font-semibold">{{ $orderId }}</td>

                        <td class="px-4 py-2">
                            <ul class="list-disc list-inside">
                                @foreach ($items as $item)
                                    <li>{{ $item['name'] }} (x{{ $item['quantity'] }})</li>
                                @endforeach
                            </ul>
                        </td>

                        <td class="px-4 py-2">{{ $items[0]['table_id'] }}</td>
                        <td class="px-4 py-2">{{ $items[0]['customer_name'] }}</td>
                        <td class="px-4 py-2">{{ \Carbon\Carbon::parse($item['updated_at'])->diffForHumans() }}</td>
                        <td class="px-4 py-2">
                            @php
                                $allCooked = collect($items)->every(fn($i) => $i['cooked']);
                            @endphp
                            @if ($allCooked)
                                <span class="text-green-400 font-medium">Done</span>
                            @else
                                <span class="text-orange-400 font-medium">Process</span>
                            @endif
                        </td>
                        <td class="px-4 py-2">
                            @if (!$allCooked)
                                <button wire:click="markAllAsCooked({{ $orderId }})"
                                    class="bg-blue-600 hover:bg-blue-700 text-white text-xs px-3 py-1 rounded shadow">
                                    Sudah Dimasak
                                </button>
                            @else
                                <span class="text-green-500 text-xs">✔ Semua sudah dimasak</span>
                            @endif
                        </td>
                    </tr>
                @empty
                    <tr>
                        <td colspan="6" class="px-4 py-6 text-center text-gray-400">Tidak ada pesanan yang perlu
                            dimasak.</td>
                    </tr>
                @endforelse
            </tbody>
        </table>
    </div>
</div>
