@extends('layouts.app')

@section('title', 'My Orders')

@section('content')
<div class="max-w-5xl mx-auto px-4 py-8">
    <h1 class="text-2xl font-bold text-gray-800 mb-6">My Orders</h1>

    @if($orders->count() > 0)
    <div class="space-y-4">
        @foreach($orders as $order)
        <div class="bg-white rounded-xl shadow-sm p-5">
            <div class="flex flex-wrap justify-between items-start gap-4 mb-4">
                <div>
                    <p class="font-bold text-gray-800">Order #{{ $order->order_number }}</p>
                    <p class="text-sm text-gray-500">{{ $order->created_at->format('M d, Y') }}</p>
                </div>
                <div class="text-right">
                    <span class="inline-block px-3 py-1 rounded-full text-xs font-medium
                        {{ $order->status === 'delivered' ? 'bg-green-100 text-green-700' :
                           ($order->status === 'cancelled' ? 'bg-red-100 text-red-700' :
                           ($order->status === 'shipped' ? 'bg-blue-100 text-blue-700' : 'bg-yellow-100 text-yellow-700')) }}">
                        {{ ucfirst($order->status) }}
                    </span>
                    <p class="font-bold text-red-600 mt-1">${{ number_format($order->total, 2) }}</p>
                </div>
            </div>
            <div class="flex gap-3 overflow-x-auto mb-4">
                @foreach($order->items->take(4) as $item)
                <div class="flex-shrink-0 text-center">
                    <div class="w-14 h-14 bg-gray-100 rounded-lg flex items-center justify-center text-xs text-gray-500">
                        {{ substr($item->product_name, 0, 8) }}...
                    </div>
                </div>
                @endforeach
                @if($order->items->count() > 4)
                <div class="flex-shrink-0 w-14 h-14 bg-gray-100 rounded-lg flex items-center justify-center text-sm text-gray-500">
                    +{{ $order->items->count() - 4 }}
                </div>
                @endif
            </div>
            <a href="{{ route('orders.show', $order->order_number) }}" class="text-red-600 text-sm font-medium hover:text-red-800">
                View Details →
            </a>
        </div>
        @endforeach
    </div>
    <div class="mt-6">{{ $orders->links() }}</div>
    @else
    <div class="text-center py-16 bg-white rounded-xl shadow-sm">
        <svg class="w-16 h-16 mx-auto mb-4 text-gray-300" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" 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>
        <p class="text-xl font-medium text-gray-600">No orders yet</p>
        <a href="{{ route('shop.index') }}" class="mt-4 inline-block bg-red-600 text-white px-6 py-2 rounded-lg hover:bg-red-700">Start Shopping</a>
    </div>
    @endif
</div>
@endsection