<div class="px-4 pt-3">

    {{-- Filter Tab Status --}}
    <div class="flex gap-2 overflow-x-auto pb-1 -mx-4 px-4 scrollbar-hide mb-4">
        @foreach ($statusTabs as $value => $label)
            <x-store.filter-chip
                :active="$filterStatus === $value"
                wire:click="$set('filterStatus', '{{ $value }}')">
                {{ $label }}
            </x-store.filter-chip>
        @endforeach
    </div>

    {{-- Loading --}}
    <div wire:loading.flex wire:target="filterStatus"
         class="items-center justify-center gap-2 py-8 text-slate-400">
        <svg class="animate-spin w-5 h-5 text-orange-400" fill="none" viewBox="0 0 24 24">
            <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"/>
            <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"/>
        </svg>
    </div>

    <div wire:loading.remove wire:target="filterStatus">

        @if ($orders->isEmpty())
            <div class="py-16 flex flex-col items-center text-center">
                <div class="w-16 h-16 bg-slate-100 rounded-full flex items-center justify-center mb-3">
                    <svg class="w-8 h-8 text-slate-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
                              d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"/>
                    </svg>
                </div>
                <p class="font-semibold text-slate-600 text-sm">Belum ada pesanan</p>
                <p class="text-xs text-slate-400 mt-1 mb-5">
                    {{ $filterStatus ? 'Tidak ada pesanan dengan status ini.' : 'Yuk mulai belanja!' }}
                </p>
                <a href="{{ route('store.products') }}"
                   class="h-11 px-6 inline-flex items-center justify-center bg-orange-500 hover:bg-orange-600
                          text-white text-sm font-semibold rounded-xl shadow-sm shadow-orange-200
                          active:scale-95 transition-all">
                    Mulai Belanja
                </a>
            </div>

        @else
            <div class="space-y-3">
                @foreach ($orders as $order)
                    @php
                        // Status Pesanan — warna biru/slate (bukan orange agar beda dengan payment)
                        $statusColors = [
                            'pending'    => 'bg-slate-50 text-slate-600 border-slate-200',
                            'paid'       => 'bg-blue-50 text-blue-700 border-blue-200',
                            'processing' => 'bg-indigo-50 text-indigo-700 border-indigo-200',
                            'delivering' => 'bg-cyan-50 text-cyan-700 border-cyan-200',
                            'completed'  => 'bg-teal-50 text-teal-700 border-teal-200',
                            'cancelled'  => 'bg-slate-100 text-slate-500 border-slate-200',
                        ];
                        $statusClass = $statusColors[$order->status->value] ?? 'bg-slate-50 text-slate-600 border-slate-200';

                        // Status Pembayaran — hijau/merah/kuning (jelas menunjukkan kondisi uang)
                        $paymentColors = [
                            'pending'  => 'text-amber-600',
                            'verified' => 'text-green-600',
                            'rejected' => 'text-red-600',
                        ];
                        $paymentClass = $paymentColors[$order->payment?->status->value ?? 'pending'] ?? 'text-slate-400';
                    @endphp

                    <a href="{{ route('store.orders.show', $order->order_number) }}"
                       class="block bg-white rounded-xl border border-slate-100 shadow-sm p-4
                              hover:border-orange-200 hover:shadow-md active:scale-[0.99]
                              transition-all duration-200">

                        {{-- Baris 1: nomor + tanggal --}}
                        <div class="flex items-start justify-between gap-2 mb-2">
                            <div>
                                <p class="text-sm font-bold text-slate-800">{{ $order->order_number }}</p>
                                <p class="text-xs text-slate-400 mt-0.5">
                                    {{ $order->created_at->translatedFormat('d M Y, H:i') }}
                                </p>
                            </div>
                            <span class="shrink-0 text-[11px] font-semibold px-2 py-0.5 rounded-full border {{ $statusClass }}">
                                {{ $order->status->label() }}
                            </span>
                        </div>

                        {{-- Baris 2: jumlah item + total --}}
                        <div class="flex items-center justify-between">
                            <p class="text-xs text-slate-500">
                                {{ $order->items_count }} produk
                                @if ($order->payment)
                                    · Pembayaran:
                                    <span class="{{ $paymentClass }} font-medium">
                                        {{ $order->payment->status->label() }}
                                    </span>
                                @endif
                            </p>
                            <p class="text-sm font-bold text-orange-500">
                                Rp {{ number_format($order->grand_total, 0, ',', '.') }}
                            </p>
                        </div>
                    </a>
                @endforeach
            </div>
        @endif

    </div>
</div>
