@extends('layouts.app')

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

@section('content')

<!-- Header Breadcrumb & Title -->
<div class="mb-8">
    <div class="flex items-center gap-2 text-xs text-slate-400 mb-2">
        <a href="{{ route('home') }}" class="hover:text-brand-light">Home</a>
        <span>/</span>
        <span class="text-slate-200 font-semibold">My Account</span>
        <span>/</span>
        <span class="text-brand-light font-bold">Orders</span>
    </div>
    <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
        <div>
            <h1 class="font-display font-black text-2xl sm:text-3xl text-white">My Order History</h1>
            <p class="text-xs text-slate-400 mt-1">Track current shipments and view previous footwear purchases.</p>
        </div>
        <a href="{{ route('products.index') }}" class="bg-brand hover:bg-brand-hover text-white text-xs font-bold px-5 py-2.5 rounded-full shadow-glow transition w-fit">
            Shop New Drops &rarr;
        </a>
    </div>
</div>

@if($orders->isEmpty())
    <div class="bg-ink-card rounded-3xl border border-white/10 p-12 text-center max-w-lg mx-auto shadow-2xl">
        <div class="w-16 h-16 rounded-full bg-brand/10 text-brand-light flex items-center justify-center text-3xl mx-auto mb-4">
            📦
        </div>
        <h2 class="font-display font-bold text-lg text-white mb-2">No Orders Found</h2>
        <p class="text-xs text-slate-400 mb-6">You haven't placed any footwear orders yet. Start building your sneaker rotation!</p>
        <a href="{{ route('products.index') }}" class="inline-block bg-gradient-to-r from-brand to-brand-light text-ink font-black text-xs px-6 py-3 rounded-full shadow-glow transition">
            Explore All Footwear
        </a>
    </div>
@else
    <div class="space-y-6">
        @foreach($orders as $order)
            <div class="bg-ink-card rounded-3xl border border-white/10 p-6 hover:border-brand-light/30 transition shadow-xl space-y-4">
                
                <!-- Order Card Top Bar -->
                <div class="flex flex-wrap items-center justify-between gap-3 border-b border-white/10 pb-4 text-xs">
                    <div class="flex items-center gap-3">
                        <span class="font-mono font-bold text-white text-sm">{{ $order->order_number }}</span>
                        <span class="text-slate-500">&middot;</span>
                        <span class="text-slate-400">{{ $order->created_at->format('d M Y, h:i A') }}</span>
                    </div>

                    <div class="flex items-center gap-2">
                        <span class="px-3 py-1 rounded-full text-[11px] font-bold uppercase {{ $order->status_badge_classes }}">
                            {{ $order->status_label }}
                        </span>
                        <span class="px-2.5 py-1 rounded-full text-[10px] font-bold uppercase {{ $order->payment_badge_classes }}">
                            {{ $order->payment_status }}
                        </span>
                    </div>
                </div>

                <!-- Order Items Grid -->
                <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4">
                    @foreach($order->items as $item)
                        @php($img = $item->product?->primaryImage())
                        <div class="flex items-center gap-3 p-2 rounded-2xl bg-ink border border-white/5">
                            <div class="w-14 h-14 rounded-xl bg-slate-900 overflow-hidden shrink-0 border border-white/10">
                                @if($img)
                                    <img src="{{ $img->url }}" class="w-full h-full object-cover">
                                @else
                                    <div class="w-full h-full flex items-center justify-center text-sm">👟</div>
                                @endif
                            </div>
                            <div class="min-w-0 flex-1 text-xs">
                                <p class="font-bold text-white truncate">{{ $item->product_name }}</p>
                                <p class="text-[11px] text-slate-400">
                                    @if($item->size) Size: {{ $item->size }} @endif
                                    @if($item->color) &middot; {{ $item->color }} @endif
                                </p>
                                <p class="text-[11px] text-brand-light font-semibold mt-0.5">₹{{ number_format($item->unit_price, 2) }} × {{ $item->quantity }}</p>
                            </div>
                        </div>
                    @endforeach
                </div>

                <!-- Order Card Footer & Actions -->
                <div class="flex flex-wrap items-center justify-between gap-4 border-t border-white/10 pt-4 text-xs">
                    <div>
                        <span class="text-slate-400">Total Paid: </span>
                        <span class="font-heading font-black text-sm text-brand-light">₹{{ number_format($order->grand_total, 2) }}</span>
                        @if($order->tracking_number)
                            <span class="ml-2 text-slate-500 font-mono">({{ $order->courier_name ?? 'Courier' }}: {{ $order->tracking_number }})</span>
                        @endif
                    </div>

                    <div class="flex items-center gap-2">
                        <a href="{{ route('orders.show', $order) }}" class="bg-brand/20 hover:bg-brand/30 text-brand-light border border-brand/30 px-4 py-2 rounded-full font-bold transition">
                            Track Shipment & Details &rarr;
                        </a>
                        <a href="{{ route('orders.receipt.download', $order) }}" class="bg-white/5 hover:bg-white/10 text-slate-300 border border-white/10 px-3 py-2 rounded-full font-semibold transition" title="Download Invoice">
                            📥 PDF Invoice
                        </a>
                    </div>
                </div>

            </div>
        @endforeach

        <div class="mt-8">
            {{ $orders->links() }}
        </div>
    </div>
@endif

@endsection