@extends('layouts.vendor')

@section('title', 'Order Details')
@section('page-title', 'Order Details')

@section('content')
<div class="max-w-3xl">
    <div class="bg-white rounded-xl shadow-sm p-6 mb-6">
        <div class="flex justify-between items-start mb-6">
            <div>
                <h2 class="text-lg font-bold">Order #{{ $orderItem->order->order_number }}</h2>
                <p class="text-sm text-gray-500">{{ $orderItem->created_at->format('M d, Y H:i') }}</p>
            </div>
            <span class="px-3 py-1 rounded-full text-sm font-medium
                {{ $orderItem->status === 'delivered' ? 'bg-green-100 text-green-700' :
                   ($orderItem->status === 'shipped' ? 'bg-blue-100 text-blue-700' :
                   ($orderItem->status === 'cancelled' ? 'bg-red-100 text-red-700' : 'bg-yellow-100 text-yellow-700')) }}">
                {{ ucfirst($orderItem->status) }}
            </span>
        </div>

        {{-- Product Info --}}
        <div class="flex gap-4 p-4 bg-gray-50 rounded-lg mb-6">
            <img src="{{ $orderItem->product->thumbnail_url }}" class="w-16 h-16 object-cover rounded-lg">
            <div>
                <p class="font-medium">{{ $orderItem->product_name }}</p>
                <p class="text-sm text-gray-500">SKU: {{ $orderItem->product_sku ?? 'N/A' }}</p>
                <p class="text-sm">Qty: {{ $orderItem->quantity }} × ${{ number_format($orderItem->price, 2) }}</p>
                <p class="font-bold text-green-600">Your earnings: ${{ number_format($orderItem->vendor_earnings, 2) }}</p>
            </div>
        </div>

        {{-- Customer Info --}}
        <div class="grid grid-cols-2 gap-4 mb-6">
            <div>
                <h3 class="font-semibold text-gray-700 mb-2">Customer</h3>
                <p class="text-sm">{{ $orderItem->order->user->name }}</p>
                <p class="text-sm text-gray-500">{{ $orderItem->order->user->email }}</p>
            </div>
            <div>
                <h3 class="font-semibold text-gray-700 mb-2">Shipping Address</h3>
                <p class="text-sm">{{ $orderItem->order->shipping_name }}</p>
                <p class="text-sm text-gray-500">{{ $orderItem->order->shipping_address }}</p>
                <p class="text-sm text-gray-500">{{ $orderItem->order->shipping_city }}, {{ $orderItem->order->shipping_country }}</p>
            </div>
        </div>

        {{-- Update Status --}}
        @if(!in_array($orderItem->status, ['delivered', 'cancelled']))
        <div class="border-t pt-6">
            <h3 class="font-semibold text-gray-700 mb-4">Update Order Status</h3>
            <form action="{{ route('vendor.orders.update-status', $orderItem->id) }}" method="POST" class="flex gap-3 items-end">
                @csrf @method('PATCH')
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">Status</label>
                    <select name="status" class="border border-gray-300 rounded-lg px-3 py-2">
                        <option value="processing" {{ $orderItem->status == 'processing' ? 'selected' : '' }}>Processing</option>
                        <option value="shipped" {{ $orderItem->status == 'shipped' ? 'selected' : '' }}>Shipped</option>
                        <option value="delivered" {{ $orderItem->status == 'delivered' ? 'selected' : '' }}>Delivered</option>
                        <option value="cancelled" {{ $orderItem->status == 'cancelled' ? 'selected' : '' }}>Cancelled</option>
                    </select>
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">Tracking Number</label>
                    <input type="text" name="tracking_number" value="{{ $orderItem->tracking_number }}" placeholder="Optional" class="border border-gray-300 rounded-lg px-3 py-2">
                </div>
                <button type="submit" class="bg-blue-600 text-white px-6 py-2 rounded-lg hover:bg-blue-700">Update</button>
            </form>
        </div>
        @endif
    </div>
</div>
@endsection