@extends("front/layout.master")
@section('title', __('staticwords.MyOrders') . ' | ')

@section('body')

<div class="max-w-[1400px] mx-auto px-4 lg:px-6 pt-5">
    <nav class="breadcrumb-row text-[12px] text-slate-500 flex items-center gap-1.5 leading-none">
        <a href="{{ url('/') }}" class="hover:text-brand-600">{{ __('Home') }}</a>
        <span class="text-slate-300">›</span>
        <a href="{{ url('profile') }}" class="hover:text-brand-600">{{ __('My Account') }}</a>
        <span class="text-slate-300">›</span>
        <span class="text-deep font-medium">{{ __('staticwords.MyOrders') }}</span>
    </nav>
</div>

<section class="max-w-[1400px] mx-auto px-4 lg:px-6 mt-5 grid lg:grid-cols-[300px_1fr] gap-5 pb-12">

    <aside class="lg:sticky lg:top-28 lg:self-start">
        @include('user.sidebar')
    </aside>

    <div>
        <div class="flex items-end justify-between mb-5 flex-wrap gap-3">
            <div>
                <h1 class="font-display font-extrabold text-2xl lg:text-3xl">{{ __('staticwords.MyOrders') }}</h1>
                <p class="text-slate-500 text-[14px] mt-1">{{ count($orders) }} {{ __('orders') }}</p>
            </div>
        </div>

        @if(count($orders) > 0)
            <div class="space-y-4">
                @foreach($orders as $order)
                    @php
                        $statusColors = [
                            'Placed' => 'bg-blue-100 text-blue-700',
                            'Pending' => 'bg-amber-100 text-amber-700',
                            'Confirmed' => 'bg-emerald-100 text-emerald-700',
                            'Shipped' => 'bg-fuchsia-100 text-fuchsia-700',
                            'Delivered' => 'bg-emerald-100 text-emerald-700',
                            'Cancelled' => 'bg-rose-100 text-rose-700',
                        ];
                        $itemCount = count($order->invoices ?? []);
                    @endphp
                    <article class="bg-white rounded-2xl shadow-card overflow-hidden">
                        <div class="bg-slate-50 p-4 lg:p-5 flex items-center justify-between gap-4 flex-wrap border-b border-slate-100">
                            <div class="flex items-center gap-4 flex-wrap">
                                <div>
                                    <div class="text-[11px] text-slate-500 uppercase tracking-wider">{{ __('Order') }}</div>
                                    <div class="font-display font-bold text-[15px] text-deep">{{ $ord_postfix }}{{ $order->order_id }}</div>
                                </div>
                                <div>
                                    <div class="text-[11px] text-slate-500 uppercase tracking-wider">{{ __('Date') }}</div>
                                    <div class="font-semibold text-[13px]">{{ $order->created_at ? $order->created_at->format('M d, Y') : '' }}</div>
                                </div>
                                <div>
                                    <div class="text-[11px] text-slate-500 uppercase tracking-wider">{{ __('Total') }}</div>
                                    <div class="font-display font-bold text-[15px] tabular text-deep">{!! price_format(((float) $order->order_total) + ((float) ($order->handlingcharge ?? 0))) !!}</div>
                                </div>
                                @if($order->payment_method)
                                <div>
                                    <div class="text-[11px] text-slate-500 uppercase tracking-wider">{{ __('Payment') }}</div>
                                    <div class="font-semibold text-[13px] capitalize">{{ $order->payment_method }}</div>
                                </div>
                                @endif
                            </div>
                            <div class="flex items-center gap-2">
                                @php $st = $order->order_status ?? 'Placed'; $cls = $statusColors[$st] ?? 'bg-slate-100 text-slate-700'; @endphp
                                <span class="{{ $cls }} text-[11px] font-bold uppercase tracking-wider px-3 py-1 rounded-full">{{ $st }}</span>
                                <a href="{{ route('user.view.order', $order->order_id) }}" class="bg-deep hover:bg-slate-700 text-white text-[12px] font-bold px-4 py-1.5 rounded-full">{{ __('View') }}</a>
                            </div>
                        </div>

                        <div class="p-4 lg:p-5">
                            <div class="grid sm:grid-cols-2 lg:grid-cols-3 gap-3">
                                @foreach(array_slice($order->invoices ? $order->invoices->all() : [], 0, 3) as $inv)
                                    @php
                                        $proName = '';
                                        $img = url('images/no-image.png');
                                        if (isset($inv->variant) && $inv->variant) {
                                            $proName = $inv->variant->products->name ?? '';
                                            if ($inv->variant->variantimages) $img = url('variantimages/thumbnails/' . $inv->variant->variantimages->main_image);
                                        } elseif (isset($inv->simple_product) && $inv->simple_product) {
                                            $proName = $inv->simple_product->product_name ?? '';
                                            if ($inv->simple_product->thumbnail) $img = url('images/simple_products/' . $inv->simple_product->thumbnail);
                                        }
                                    @endphp
                                    <div class="grid grid-cols-[60px_1fr] gap-3 items-center">
                                        <div class="aspect-square bg-slate-50 rounded-lg overflow-hidden"><img src="{{ $img }}" alt="" class="w-full h-full object-cover"></div>
                                        <div class="min-w-0">
                                            <div class="text-[12px] font-semibold line-clamp-2">{{ $proName }}</div>
                                            <div class="text-[11px] text-slate-500">{{ __('Qty') }}: {{ $inv->qty ?? 1 }}</div>
                                        </div>
                                    </div>
                                @endforeach
                            </div>
                            @if($itemCount > 3)
                                <div class="text-center text-[12px] text-slate-500 mt-3">+ {{ $itemCount - 3 }} {{ __('more items') }}</div>
                            @endif
                        </div>
                    </article>
                @endforeach
            </div>
        @else
            <div class="bg-white rounded-2xl shadow-card p-12 text-center">
                <svg width="80" height="80" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.4" class="mx-auto text-slate-300"><path d="M5 8h14l-1.2 11.2a2 2 0 0 1-2 1.8H8.2a2 2 0 0 1-2-1.8L5 8Z"/><path d="M9 8V6a3 3 0 0 1 6 0v2"/></svg>
                <h2 class="font-display font-extrabold text-2xl mt-5">{{ __('No orders yet') }}</h2>
                <p class="text-slate-500 mt-2">{{ __('When you place an order, it will show up here.') }}</p>
                <a href="{{ url('shop') }}" class="inline-flex items-center gap-2 mt-6 bg-brand-500 hover:bg-brand-600 text-white px-6 py-3 rounded-full font-semibold transition-colors">
                    {{ __('Start Shopping') }}
                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M5 12h14M13 6l6 6-6 6"/></svg>
                </a>
            </div>
        @endif
    </div>
</section>

@endsection