@extends('layouts.app')
@section('title', 'Pesanan Saya')
@section('content')
<div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
    <h1 class="text-2xl font-bold text-gray-900 mb-6">Pesanan Saya</h1>

    @if($payments->isEmpty())
        <div class="text-center py-20 bg-white rounded-2xl border border-gray-100">
            <svg class="w-16 h-16 text-gray-200 mx-auto mb-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1" d="M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z"/></svg>
            <p class="text-gray-500 mb-2">Belum ada pesanan.</p>
            <a href="{{ route('products.index') }}" class="text-teal-600 text-sm hover:underline">Mulai belanja →</a>
        </div>
    @else
        <div class="space-y-6">
            @foreach($payments as $payment)
            <div class="bg-white rounded-2xl border border-gray-100 overflow-hidden">
                {{-- Payment Header --}}
                <div class="flex items-center justify-between px-6 py-4 border-b border-gray-100 bg-gray-50/50">
                    <div>
                        <p class="text-sm font-semibold text-gray-800">{{ $payment->payment_code }}</p>
                        <p class="text-xs text-gray-400">{{ $payment->created_at->format('d M Y, H:i') }} · {{ $payment->orders->count() }} toko</p>
                    </div>
                    <span class="px-3 py-1 text-xs font-medium rounded-full
                        @switch($payment->status)
                            @case('pending') bg-amber-100 text-amber-700 @break
                            @case('reviewing') bg-blue-100 text-blue-700 @break
                            @case('paid') bg-green-100 text-green-700 @break
                            @case('failed') bg-red-100 text-red-600 @break
                            @case('expired') bg-gray-100 text-gray-500 @break
                            @case('refunded') bg-purple-100 text-purple-700 @break
                            @default bg-gray-100 text-gray-600
                        @endswitch
                    ">
                        @switch($payment->status)
                            @case('pending') Menunggu Pembayaran @break
                            @case('reviewing') Menunggu Verifikasi @break
                            @case('paid') Lunas @break
                            @case('failed') Gagal @break
                            @case('expired') Kadaluarsa @break
                            @case('refunded') Dikembalikan @break
                            @default {{ $payment->status }}
                        @endswitch
                    </span>
                </div>

                {{-- Orders per Store --}}
                <div class="divide-y divide-gray-50">
                    @foreach($payment->orders as $order)
                    <div class="px-6 py-4">
                        <div class="flex items-center justify-between mb-3">
                            <div>
                                <p class="text-xs font-semibold text-gray-700">{{ $order->order_number }}</p>
                                <span class="inline-block mt-0.5 px-2 py-0.5 text-xs rounded-full
                                    @switch($order->status)
                                        @case('pending') bg-gray-100 text-gray-600 @break
                                        @case('awaiting_payment') bg-amber-100 text-amber-700 @break
                                        @case('reviewing') bg-blue-100 text-blue-700 @break
                                        @case('paid') bg-blue-100 text-blue-700 @break
                                        @case('processing') bg-teal-100 text-teal-700 @break
                                        @case('shipped') bg-cyan-100 text-cyan-700 @break
                                        @case('delivered') bg-teal-100 text-teal-700 @break
                                        @case('completed') bg-green-100 text-green-700 @break
                                        @case('cancelled') bg-red-100 text-red-600 @break
                                        @default bg-gray-100 text-gray-600
                                    @endswitch
                                ">
                                    @switch($order->status)
                                        @case('pending') Menunggu @break
                                        @case('awaiting_payment') Menunggu Pembayaran @break
                                        @case('reviewing') Menunggu Verifikasi @break
                                        @case('paid') Dibayar @break
                                        @case('processing') Diproses @break
                                        @case('shipped') Dikirim @break
                                        @case('delivered') Terkirim @break
                                        @case('completed') Selesai @break
                                        @case('cancelled') Dibatalkan @break
                                        @default {{ $order->status }}
                                    @endswitch
                                </span>
                            </div>
                            <a href="{{ route('buyer.orders.show', $order) }}" class="text-xs text-teal-600 hover:underline">
                                Lihat Detail →
                            </a>
                        </div>

                        @foreach($order->items->take(2) as $item)
                        <div class="flex items-center gap-3 {{ !$loop->last ? 'mb-2' : '' }}">
                            <div class="w-10 h-10 rounded-lg bg-gray-100 overflow-hidden shrink-0">
                                @if($item->product_thumbnail)
                                    <img src="{{ Storage::url($item->product_thumbnail) }}" class="w-full h-full object-cover">
                                @endif
                            </div>
                            <div class="flex-1 min-w-0">
                                <p class="text-sm font-medium text-gray-800 truncate">{{ $item->product_name }}</p>
                                @if($item->variant_name)
                                    <p class="text-xs text-gray-400">{{ $item->variant_name }}</p>
                                @endif
                                <p class="text-xs text-gray-400">{{ $item->quantity }}x · Rp {{ number_format($item->price, 0, ',', '.') }}</p>
                            </div>
                        </div>
                        @endforeach
                        @if($order->items->count() > 2)
                            <p class="text-xs text-gray-400 mt-1">+{{ $order->items->count() - 2 }} produk lainnya</p>
                        @endif
                    </div>
                    @endforeach
                </div>

                {{-- Payment Footer --}}
                <div class="flex items-center justify-between px-6 py-4 bg-gray-50/50 border-t border-gray-100">
                    <div>
                        <p class="text-xs text-gray-400">Total Pembayaran</p>
                        <p class="font-semibold text-gray-800">Rp {{ number_format($payment->amount, 0, ',', '.') }}</p>
                    </div>
                    @if(in_array($payment->status, ['pending', 'reviewing']))
                        <a href="{{ route('payment.show', $payment) }}" class="px-4 py-2 text-sm font-medium
                            {{ $payment->status === 'reviewing' ? 'text-blue-600 border border-blue-200 hover:bg-blue-50' : 'text-white bg-teal-600 hover:bg-teal-700' }}
                            rounded-xl transition">
                            {{ $payment->status === 'reviewing' ? 'Lihat Status' : 'Bayar Sekarang' }}
                        </a>
                    @endif
                </div>
            </div>
            @endforeach
        </div>

        @if($payments->hasPages())
            <div class="mt-6">{{ $payments->links() }}</div>
        @endif
    @endif
</div>
@endsection