@extends('layouts.app')

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

@section('content')
<div class="max-w-6xl mx-auto space-y-6">
    <div class="rounded-3xl bg-white p-8 shadow-sm">
        <h1 class="text-3xl font-semibold">My Orders</h1>
        <p class="text-slate-600">View and track all your orders</p>
    </div>

    @if($orders->isEmpty())
        <div class="rounded-3xl bg-white p-12 text-center shadow-sm">
            <p class="text-slate-600 mb-4">No orders yet</p>
            <a href="{{ route('home') }}" class="rounded-full bg-slate-900 px-6 py-3 text-white hover:bg-slate-800">Start Shopping</a>
        </div>
    @else
        <div class="space-y-4">
            @foreach($orders as $order)
                <div class="rounded-3xl bg-white p-6 shadow-sm">
                    <div class="grid md:grid-cols-4 gap-4 items-center">
                        <div>
                            <p class="text-sm text-slate-600">Order ID</p>
                            <p class="font-semibold">{{ $order->order_number }}</p>
                        </div>
                        <div>
                            <p class="text-sm text-slate-600">Order Date</p>
                            <p class="font-semibold">{{ $order->created_at->format('M d, Y') }}</p>
                        </div>
                        <div>
                            <p class="text-sm text-slate-600">Total</p>
                            <p class="font-semibold text-lg">₹{{ number_format($order->total, 2) }}</p>
                        </div>
                        <div class="flex gap-2">
                            <span class="rounded-full px-3 py-1 text-sm font-semibold
                                @if($order->status === 'Pending') bg-yellow-100 text-yellow-700
                                @elseif($order->status === 'Processing') bg-blue-100 text-blue-700
                                @elseif($order->status === 'Shipped') bg-purple-100 text-purple-700
                                @elseif($order->status === 'Delivered') bg-green-100 text-green-700
                                @elseif($order->status === 'Cancelled') bg-red-100 text-red-700
                                @endif">
                                {{ $order->status }}
                            </span>
                            <a href="{{ route('orders.show', $order) }}" class="rounded-full bg-slate-900 px-4 py-1 text-sm text-white hover:bg-slate-800">
                                View
                            </a>
                        </div>
                    </div>
                </div>
            @endforeach
        </div>

        {{ $orders->links() }}
    @endif
</div>
@endsection
