@extends('layouts.app')

@section('title', 'Order #' . $order->order_number)

@section('content')
<div class="max-w-4xl mx-auto px-4 py-8">
    <div class="flex items-center gap-4 mb-6">
        <a href="{{ route('orders.index') }}" class="text-gray-500 hover:text-red-600">← My Orders</a>
        <h1 class="text-2xl font-bold text-gray-800">Order #{{ $order->order_number }}</h1>
    </div>

    <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-6">
        <div class="bg-white rounded-xl shadow-sm p-5">
            <h3 class="font-semibold text-gray-700 mb-3">Order Status</h3>
            <span class="inline-block px-3 py-1 rounded-full text-sm font-medium
                {{ $order->status === 'delivered' ? 'bg-green-100 text-green-700' :
                   ($order->status === 'cancelled' ? 'bg-red-100 text-red-700' :
                   ($order->status === 'shipped' ? 'bg-blue-100 text-blue-700' : 'bg-yellow-100 text-yellow-700')) }}">
                {{ ucfirst($order->status) }}
            </span>
            <p class="text-sm text-gray-500 mt-2">Placed on {{ $order->created_at->format('M d, Y H:i') }}</p>
        </div>
        <div class="bg-white rounded-xl shadow-sm p-5">
            <h3 class="font-semibold text-gray-700 mb-3">Payment</h3>
            <p class="text-sm"><span class="text-gray-500">Method:</span> {{ ucfirst($order->payment_method) }}</p>
            <p class="text-sm mt-1">
                <span class="text-gray-500">Status:</span>
                <span class="{{ $order->payment_status === 'paid' ? 'text-green-600' : 'text-yellow-600' }} font-medium">
                    {{ ucfirst($order->payment_status) }}
                </span>
            </p>
        </div>
        <div class="bg-white rounded-xl shadow-sm p-5">
            <h3 class="font-semibold text-gray-700 mb-3">Shipping To</h3>
            <p class="text-sm font-medium">{{ $order->shipping_name }}</p>
            <p class="text-sm text-gray-500">{{ $order->shipping_address }}</p>
            <p class="text-sm text-gray-500">{{ $order->shipping_city }}, {{ $order->shipping_state }} {{ $order->shipping_zip }}</p>
            <p class="text-sm text-gray-500">{{ $order->shipping_country }}</p>
        </div>
    </div>

    {{-- Order Items --}}
    <div class="bg-white rounded-xl shadow-sm p-6 mb-6">
        <h2 class="font-bold text-gray-800 mb-4">Order Items</h2>
        <div class="space-y-4">
            @foreach($order->items as $item)
            <div class="flex gap-4 pb-4 border-b last:border-0">
                <div class="flex-1">
                    <p class="font-medium text-gray-800">{{ $item->product_name }}</p>
                    <p class="text-sm text-gray-500">
                        Sold by: {{ $item->vendor->shop_name ?? 'N/A' }} |
                        SKU: {{ $item->product_sku ?? 'N/A' }}
                    </p>
                    <div class="mt-2">
                        <span class="inline-block px-2 py-0.5 rounded text-xs font-medium
                            {{ $item->status === 'delivered' ? 'bg-green-100 text-green-700' :
                               ($item->status === 'shipped' ? 'bg-blue-100 text-blue-700' : 'bg-yellow-100 text-yellow-700') }}">
                            {{ ucfirst($item->status) }}
                        </span>
                        @if($item->tracking_number)
                            <span class="text-xs text-gray-500 ml-2">Tracking: {{ $item->tracking_number }}</span>
                        @endif
                    </div>
                </div>
                <div class="text-right">
                    <p class="text-sm text-gray-500">{{ $item->quantity }} × ${{ number_format($item->price, 2) }}</p>
                    <p class="font-bold text-gray-800">${{ number_format($item->subtotal, 2) }}</p>
                </div>
            </div>
            @endforeach
        </div>
    </div>

    {{-- Order Total --}}
    <div class="bg-white rounded-xl shadow-sm p-6">
        <div class="max-w-sm ml-auto space-y-2 text-sm">
            <div class="flex justify-between"><span class="text-gray-600">Subtotal</span><span>${{ number_format($order->subtotal, 2) }}</span></div>
            @if($order->discount > 0)
            <div class="flex justify-between text-green-600"><span>Discount</span><span>-${{ number_format($order->discount, 2) }}</span></div>
            @endif
            <div class="flex justify-between"><span class="text-gray-600">Shipping</span><span>${{ number_format($order->shipping_cost, 2) }}</span></div>
            <div class="flex justify-between"><span class="text-gray-600">Tax</span><span>${{ number_format($order->tax, 2) }}</span></div>
            <div class="border-t pt-2 flex justify-between font-bold text-base">
                <span>Total</span>
                <span class="text-red-600">${{ number_format($order->total, 2) }}</span>
            </div>
        </div>
    </div>
</div>
@endsection