@extends('store.layouts.app')

@section('title', 'Orders')
@section('meta_description', 'Your orders – ' . ($store_name ?? config('app.name')))

@section('content')
<div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
    <h1 class="text-3xl font-black text-gray-900 mb-8">Order History</h1>

    @if($orders->isEmpty())
    <div class="card p-12 sm:p-16 text-center">
        <div class="w-24 h-24 mx-auto mb-6 rounded-full bg-gray-100 flex items-center justify-center">
            <i class="fas fa-box-open text-4xl text-gray-300"></i>
        </div>
        <h2 class="text-2xl font-black text-gray-800 mb-2">No orders yet</h2>
        <p class="text-gray-600 mb-6">Start shopping to see your orders here.</p>
        <a href="{{ route('products.index') }}" class="btn-primary inline-block">
            <i class="fas fa-shopping-bag mr-2"></i> Shop Now
        </a>
    </div>
    @else
    <div class="space-y-4">
        @foreach($orders as $order)
        <a href="{{ route('orders.show', $order) }}" class="card p-5 sm:p-6 block hover:shadow-card-hover transition-all group">
            <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
                <div class="flex-1">
                    <div class="flex items-center gap-3 mb-2">
                        <p class="font-black text-gray-900 text-lg">#{{ $order->order_number }}</p>
                        <span class="inline-block px-3 py-1 rounded-full text-xs font-bold
                            @if($order->status === 'pending') bg-amber-100 text-amber-800
                            @elseif($order->status === 'paid') bg-blue-100 text-blue-800
                            @elseif($order->status === 'shipped') bg-indigo-100 text-indigo-800
                            @elseif($order->status === 'delivered') bg-green-100 text-green-800
                            @elseif($order->status === 'cancelled') bg-red-100 text-red-800
                            @else bg-gray-100 text-gray-800 @endif">
                            {{ ucfirst($order->status) }}
                        </span>
                    </div>
                    <p class="text-sm text-gray-500 mb-2">
                        <i class="far fa-calendar mr-1"></i>{{ $order->created_at->format('M j, Y g:i A') }}
                    </p>
                    <p class="text-sm text-gray-600">
                        <i class="fas fa-shopping-bag mr-1"></i>{{ $order->items->count() }} item(s) · {{ $order->items->sum('quantity') }} total qty
                    </p>
                </div>
                <div class="text-left sm:text-right">
                    <p class="font-black text-blinkit-green text-2xl mb-1">{{ $currency_symbol }}{{ number_format($order->total, 0) }}</p>
                    <p class="text-xs text-gray-500">View Details <i class="fas fa-arrow-right ml-1 group-hover:translate-x-1 transition-transform inline-block"></i></p>
                </div>
            </div>
        </a>
        @endforeach
    </div>
    <div class="mt-8">
        {{ $orders->links() }}
    </div>
    @endif
</div>
@endsection