@extends('storefront.layout')

@section('title', 'Order History — ' . ($settings->company_name ?? 'Shop'))

@section('content')

    <div class="max-w-3xl mx-auto">

        {{-- Nav tabs --}}
        <div class="flex gap-6 border-b mb-8">
            <a href="{{ route('account.profile') }}"
               class="pb-3 text-sm font-medium text-gray-500 hover:text-gray-700">
                Profile
            </a>
            <a href="{{ route('account.orders') }}"
               class="pb-3 text-sm font-medium border-b-2 border-blue-600 text-blue-600">
                Order History
            </a>
            <a href="{{ route('wishlist.index') }}"
               class="pb-3 text-sm font-medium text-gray-500 hover:text-gray-700">
                Wishlist
            </a>
        </div>

        @if($orders->isEmpty())
            <div class="bg-white rounded-xl shadow-sm p-12 text-center">
                <svg class="w-12 h-12 text-gray-300 mx-auto mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
                          d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"/>
                </svg>
                <p class="text-gray-500 text-sm mb-4">You haven't placed any orders yet.</p>
                <a href="{{ route('storefront.index') }}"
                   class="inline-block bg-blue-600 text-white px-5 py-2 rounded-lg text-sm font-semibold hover:bg-blue-700 transition">
                    Start Shopping
                </a>
            </div>
        @else
            <div class="space-y-5">
                @foreach($orders as $order)
                    <div class="bg-white rounded-xl border border-gray-200 shadow-sm overflow-hidden">

                        {{-- Order header --}}
                        <div class="bg-gray-100 border-b px-5 py-4 flex flex-wrap items-center justify-between gap-3">
                            <div class="flex flex-wrap items-center gap-x-4 gap-y-1 text-xs text-gray-500">
                                <span class="font-semibold text-gray-800 text-sm">Order #{{ $order->id }}</span>
                                <span>Placed {{ $order->ordered_at?->format('M j, Y') ?? '—' }}</span>
                                @if($order->shipped_date)
                                    <span class="text-green-700 font-medium">
                                        Shipped {{ $order->shipped_date->format('M j, Y') }}
                                    </span>
                                @endif
                            </div>
                            <span class="inline-block px-2.5 py-1 rounded-full text-xs font-semibold
                                @switch($order->status)
                                    @case('pending')    bg-yellow-100 text-yellow-700 @break
                                    @case('processing') bg-blue-100   text-blue-700   @break
                                    @case('shipped')    bg-green-100  text-green-700  @break
                                    @case('cancelled')  bg-red-100    text-red-700    @break
                                    @case('refunded')   bg-gray-100   text-gray-600   @break
                                    @default            bg-gray-100   text-gray-600
                                @endswitch">
                                {{ ucfirst($order->status) }}
                            </span>
                        </div>

                        {{-- Line items --}}
                        @if($order->items->isNotEmpty())
                            <div class="px-5 py-4 space-y-3">
                                @foreach($order->items as $item)
                                    <div class="flex items-start justify-between gap-4">
                                        <div class="flex-1 min-w-0">
                                            <p class="text-sm font-medium text-gray-900">{{ $item->product_name }}</p>
                                            @if($item->variant_label)
                                                <p class="text-xs text-gray-500 mt-0.5">{{ $item->variant_label }}</p>
                                            @endif
                                        </div>
                                        <div class="text-right shrink-0">
                                            <p class="text-xs text-gray-400">Qty {{ $item->quantity }}</p>
                                            <p class="text-sm text-gray-900">
                                                {{ $settings->currency_symbol ?? '$' }}{{ number_format($item->unit_price * $item->quantity, 2) }}
                                            </p>
                                        </div>
                                    </div>
                                @endforeach
                            </div>
                        @endif

                        {{-- Note to buyer --}}
                        @if($order->note_to_buyer)
                            <div class="px-5 pb-4">
                                <p class="text-xs bg-blue-50 text-blue-700 rounded-lg px-3 py-2 leading-relaxed">
                                    <span class="font-semibold">Note from seller:</span> {{ $order->note_to_buyer }}
                                </p>
                            </div>
                        @endif

                        {{-- Totals --}}
                        <div class="border-t bg-gray-100 px-5 py-4 space-y-2">
                            <div class="flex justify-between text-xs text-gray-500">
                                <span>Subtotal</span>
                                <span>{{ $settings->currency_symbol ?? '$' }}{{ number_format($order->subtotal, 2) }}</span>
                            </div>
                            @if($order->freight > 0)
                                <div class="flex justify-between text-xs text-gray-500">
                                    <span>Shipping</span>
                                    <span>{{ $settings->currency_symbol ?? '$' }}{{ number_format($order->freight, 2) }}</span>
                                </div>
                            @endif
                            @if((float) $order->discount_amount > 0)
                                <div class="flex justify-between text-xs text-green-700">
                                    <span>Discount{{ $order->coupon_code ? ' (' . $order->coupon_code . ')' : '' }}</span>
                                    <span>−{{ $settings->currency_symbol ?? '$' }}{{ number_format((float) $order->discount_amount, 2) }}</span>
                                </div>
                            @endif
                            @if($order->tax_charged > 0)
                                <div class="flex justify-between text-xs text-gray-500">
                                    <span>Tax</span>
                                    <span>{{ $settings->currency_symbol ?? '$' }}{{ number_format($order->tax_charged, 2) }}</span>
                                </div>
                            @endif
                            <div class="flex justify-between text-sm font-semibold text-gray-900 pt-2 border-t border-gray-200">
                                <span>Total</span>
                                <span>{{ $settings->currency_symbol ?? '$' }}{{ number_format($order->total, 2) }}</span>
                            </div>
                        </div>

                    </div>
                @endforeach
            </div>

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

@endsection