@extends('layouts.app')

@section('title', 'My Orders - ' . ($shopSettings['shop_name'] ?? 'Orange Groceries'))
@section('meta_robots', 'noindex, nofollow')
@section('canonical', route('orders.index'))

@section('content')
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
    
    <div class="flex items-center justify-between mb-8">
        <div>
            <h1 class="text-2xl sm:text-3xl font-extrabold text-slate-900 tracking-tight">Order History</h1>
            <p class="text-xs text-slate-500 font-medium">Track live status & download invoices for past orders</p>
        </div>
    </div>

    @if($orders->count() > 0)
        <div class="space-y-6">
            @foreach($orders as $order)
                <div class="bg-white rounded-3xl p-6 border border-slate-200/80 shadow-sm space-y-4">
                    
                    <div class="flex flex-wrap items-center justify-between border-b border-slate-100 pb-4 gap-3 text-xs">
                        <div>
                            <span class="text-slate-400 font-medium">Order Number:</span>
                            <span class="font-extrabold text-slate-900 font-mono ml-1">#{{ $order->order_number }}</span>
                        </div>
                        <div>
                            <span class="text-slate-400 font-medium">Placed On:</span>
                            <span class="font-bold text-slate-700 ml-1">{{ $order->created_at->format('d M Y, h:i A') }}</span>
                        </div>
                        <div>
                            <span class="text-slate-400 font-medium">Payment Mode:</span>
                            <span class="font-extrabold uppercase text-brand-700 ml-1">{{ $order->payment_method }}</span>
                        </div>
                        <div>
                            <span class="text-slate-400 font-medium">Status:</span>
                            @php
                                $statusColors = [
                                    'pending' => 'bg-amber-100 text-amber-800',
                                    'accepted' => 'bg-blue-100 text-blue-800',
                                    'packed' => 'bg-indigo-100 text-indigo-800',
                                    'out_for_delivery' => 'bg-purple-100 text-purple-800',
                                    'delivered' => 'bg-emerald-100 text-emerald-800',
                                    'cancelled' => 'bg-rose-100 text-rose-800',
                                ];
                            @endphp
                            <span class="px-3 py-1 rounded-full font-black text-[11px] uppercase tracking-wider {{ $statusColors[$order->order_status] ?? 'bg-slate-100' }}">
                                {{ str_replace('_', ' ', $order->order_status) }}
                            </span>
                        </div>
                    </div>

                    <div class="flex flex-col sm:flex-row items-center justify-between gap-4">
                        <div class="flex items-center gap-3">
                            <div class="flex -space-x-3 overflow-hidden">
                                @foreach($order->items->take(3) as $item)
                                    <img src="{{ $item->product->image ?? 'https://images.unsplash.com/photo-1542838132-92c53300491e?auto=format&fit=crop&w=100&q=80' }}" class="inline-block h-12 w-12 rounded-xl object-cover ring-2 ring-white">
                                @endforeach
                            </div>
                            <div class="text-xs font-semibold text-slate-600">
                                {{ $order->items->first()->product_name ?? 'Item' }}
                                @if($order->items->count() > 1)
                                    <span class="text-slate-400">and {{ $order->items->count() - 1 }} more items</span>
                                @endif
                            </div>
                        </div>

                        <div class="flex items-center gap-4 w-full sm:w-auto justify-between sm:justify-end">
                            <div class="text-right">
                                <div class="text-xs text-slate-400">Total Paid</div>
                                <div class="text-lg font-black text-slate-900">₹{{ number_format($order->total_amount, 2) }}</div>
                            </div>

                            <a href="{{ route('orders.track', $order->order_number) }}" class="px-5 py-2.5 bg-brand-600 hover:bg-brand-700 text-white font-extrabold text-xs rounded-xl shadow transition">
                                Live Status
                            </a>
                            <a href="{{ route('orders.invoice', $order->order_number) }}" target="_blank" class="px-4 py-2.5 bg-slate-100 hover:bg-slate-200 text-slate-700 font-bold text-xs rounded-xl transition">
                                <i class="fa-solid fa-print"></i> Invoice
                            </a>
                        </div>
                    </div>
                </div>
            @endforeach

            {{ $orders->links() }}
        </div>
    @else
        <div class="bg-white rounded-3xl p-16 text-center border border-slate-200 shadow-sm max-w-md mx-auto">
            <div class="w-16 h-16 bg-slate-100 text-slate-400 rounded-full flex items-center justify-center mx-auto mb-4">
                <i class="fa-solid fa-box-open text-2xl"></i>
            </div>
            <h2 class="text-lg font-extrabold text-slate-900">No Orders Yet</h2>
            <p class="text-xs text-slate-500 mt-1 mb-6">You haven't placed any grocery orders yet.</p>
            <a href="{{ route('products.index') }}" class="px-6 py-3 bg-brand-600 text-white font-bold text-xs rounded-xl shadow">Explore Store</a>
        </div>
    @endif
</div>
@endsection