@extends('layouts.app')

@section('title', 'Pesanan Saya - ' . setting('store_name'))

@section('content')
<div class="bg-slate-50 min-h-screen py-12 sm:py-20">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="max-w-4xl mx-auto">
            <div class="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-6 mb-12">
                <div>
                    <h1 class="text-3xl font-extrabold text-slate-900 tracking-tight">Riwayat Pesanan</h1>
                    <p class="mt-2 text-slate-500">Lacak dan kelola semua pesanan Anda di sini.</p>
                </div>
                <a href="{{ url('/shop') }}" class="inline-flex items-center text-sm font-bold text-primary hover:underline">
                    Lanjut Belanja
                    <svg class="ml-1 h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/></svg>
                </a>
            </div>

            <div class="space-y-6">
                @forelse($orders as $order)
                    <div class="bg-white rounded-3xl border border-slate-100 shadow-sm hover:shadow-xl transition-all duration-300 overflow-hidden">
                        <div class="p-6 sm:p-8">
                            <div class="flex flex-col sm:flex-row justify-between gap-4 mb-8">
                                <div class="space-y-1">
                                    <p class="text-[10px] text-slate-400 font-bold uppercase tracking-widest">Nomor Pesanan</p>
                                    <h3 class="text-lg font-bold text-slate-900">{{ $order->order_number }}</h3>
                                    <p class="text-xs text-slate-400">{{ $order->created_at->format('d M Y, H:i') }} WIB</p>
                                </div>
                                <div class="text-left sm:text-right">
                                    <p class="text-[10px] text-slate-400 font-bold uppercase tracking-widest mb-1">Status</p>
                                    @php
                                        $statusClasses = [
                                            'pending_payment' => 'bg-yellow-100 text-yellow-800',
                                            'paid' => 'bg-blue-100 text-blue-800',
                                            'processing' => 'bg-indigo-100 text-indigo-800',
                                            'shipped' => 'bg-purple-100 text-purple-800',
                                            'delivered' => 'bg-green-100 text-green-800',
                                            'cancelled' => 'bg-red-100 text-red-800',
                                            'refunded' => 'bg-slate-100 text-slate-800',
                                        ];
                                        $statusLabels = [
                                            'pending_payment' => 'Menunggu Pembayaran',
                                            'paid' => 'Sudah Dibayar',
                                            'processing' => 'Sedang Diproses',
                                            'shipped' => 'Dikirim',
                                            'delivered' => 'Selesai',
                                            'cancelled' => 'Dibatalkan',
                                            'refunded' => 'Dikembalikan',
                                        ];
                                    @endphp
                                    <span class="inline-flex px-3 py-1 rounded-full text-xs font-bold {{ $statusClasses[$order->status] ?? 'bg-slate-100 text-slate-800' }}">
                                        {{ $statusLabels[$order->status] ?? $order->status }}
                                    </span>
                                </div>
                            </div>

                            <div class="flex flex-col sm:flex-row items-start sm:items-center gap-6 py-6 border-y border-slate-50">
                                <div class="flex -space-x-3">
                                    @foreach($order->items->take(3) as $item)
                                        <div class="w-12 h-12 rounded-full border-2 border-white overflow-hidden bg-slate-50 shadow-sm">
                                            <img src="{{ $item->product->images->first()?->image_path ? asset('storage/' . $item->product->images->first()->image_path) : 'https://placehold.co/100x100?text=P' }}" class="w-full h-full object-cover">
                                        </div>
                                    @endforeach
                                    @if($order->items->count() > 3)
                                        <div class="w-12 h-12 rounded-full border-2 border-white bg-slate-100 flex items-center justify-center text-[10px] font-bold text-slate-500 shadow-sm">
                                            +{{ $order->items->count() - 3 }}
                                        </div>
                                    @endif
                                </div>
                                <div class="flex-grow">
                                    <p class="text-sm font-medium text-slate-600">
                                        {{ $order->items->first()->product_name }}
                                        @if($order->items->count() > 1)
                                            <span class="text-slate-400">dan {{ $order->items->count() - 1 }} produk lainnya</span>
                                        @endif
                                    </p>
                                </div>
                                <div class="w-full sm:w-auto pt-4 sm:pt-0 border-t sm:border-t-0 border-slate-50">
                                    <p class="text-[10px] text-slate-400 font-bold uppercase tracking-widest">Total Tagihan</p>
                                    <p class="text-xl font-black text-primary">Rp {{ number_format($order->total, 0, ',', '.') }}</p>
                                </div>
                            </div>

                            <div class="mt-8 flex justify-end gap-3">
                                <a href="{{ url('/orders/' . $order->id) }}" class="px-6 py-3 border border-slate-200 rounded-xl text-sm font-bold text-slate-600 hover:bg-slate-50 transition-colors">
                                    Detail Pesanan
                                </a>
                                @if($order->status == 'pending_payment')
                                    <a href="{{ url('/orders/' . $order->id) }}" class="px-6 py-3 bg-primary text-white rounded-xl text-sm font-bold shadow-lg shadow-primary/20 hover:scale-105 transition-all">
                                        Bayar Sekarang
                                    </a>
                                @endif
                            </div>
                        </div>
                    </div>
                @empty
                    <div class="bg-white py-20 rounded-3xl border border-slate-100 text-center">
                        <div class="inline-flex items-center justify-center w-20 h-20 bg-slate-100 rounded-full mb-6 text-slate-400">
                            <svg class="h-10 w-10" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 11V7a4 4 0 00-8 0v4M5 11h14l1 12H4L5 11z"/></svg>
                        </div>
                        <h2 class="text-2xl font-bold text-slate-900 mb-2">Belum Ada Pesanan</h2>
                        <p class="text-slate-500 mb-8">Anda belum pernah melakukan pemesanan di toko kami.</p>
                        <a href="{{ url('/shop') }}" class="px-8 py-3 bg-primary text-white font-bold rounded-xl shadow-lg">Mulai Belanja</a>
                    </div>
                @endforelse
            </div>

            <!-- Pagination (if needed) -->
            <div class="mt-12">
                {{ $orders->links() }}
            </div>
        </div>
    </div>
</div>
@endsection