@extends('layouts.vendor')

@section('title', 'My Orders')
@section('page-title', 'Orders')

@section('content')
<div class="bg-white rounded-xl shadow-sm p-6">
    <form method="GET" class="flex gap-3 mb-6">
        <select name="status" class="border border-gray-300 rounded-lg px-3 py-2 text-sm">
            <option value="">All Status</option>
            <option value="pending" {{ request('status') == 'pending' ? 'selected' : '' }}>Pending</option>
            <option value="processing" {{ request('status') == 'processing' ? 'selected' : '' }}>Processing</option>
            <option value="shipped" {{ request('status') == 'shipped' ? 'selected' : '' }}>Shipped</option>
            <option value="delivered" {{ request('status') == 'delivered' ? 'selected' : '' }}>Delivered</option>
            <option value="cancelled" {{ request('status') == 'cancelled' ? 'selected' : '' }}>Cancelled</option>
        </select>
        <button type="submit" class="bg-gray-800 text-white px-4 py-2 rounded-lg text-sm">Filter</button>
    </form>

    <table class="w-full text-sm">
        <thead>
            <tr class="text-gray-500 border-b bg-gray-50">
                <th class="text-left p-3">Order</th>
                <th class="text-left p-3">Customer</th>
                <th class="text-left p-3">Product</th>
                <th class="text-left p-3">Qty</th>
                <th class="text-left p-3">Earnings</th>
                <th class="text-left p-3">Status</th>
                <th class="text-left p-3">Actions</th>
            </tr>
        </thead>
        <tbody>
            @foreach($orderItems as $item)
            <tr class="border-b hover:bg-gray-50">
                <td class="p-3">
                    <a href="{{ route('vendor.orders.show', $item->id) }}" class="text-blue-600 hover:text-blue-800 font-medium">#{{ $item->order->order_number }}</a>
                    <p class="text-xs text-gray-400">{{ $item->created_at->format('M d, Y') }}</p>
                </td>
                <td class="p-3 text-gray-600">{{ $item->order->user->name }}</td>
                <td class="p-3 max-w-32 truncate">{{ $item->product->name }}</td>
                <td class="p-3">{{ $item->quantity }}</td>
                <td class="p-3 font-medium text-green-600">${{ number_format($item->vendor_earnings, 2) }}</td>
                <td class="p-3">
                    <span class="px-2 py-0.5 rounded-full text-xs font-medium
                        {{ $item->status === 'delivered' ? 'bg-green-100 text-green-700' :
                           ($item->status === 'shipped' ? 'bg-blue-100 text-blue-700' :
                           ($item->status === 'cancelled' ? 'bg-red-100 text-red-700' : 'bg-yellow-100 text-yellow-700')) }}">
                        {{ ucfirst($item->status) }}
                    </span>
                </td>
                <td class="p-3">
                    <a href="{{ route('vendor.orders.show', $item->id) }}" class="text-xs bg-blue-600 text-white px-2 py-1 rounded hover:bg-blue-700">Manage</a>
                </td>
            </tr>
            @endforeach
        </tbody>
    </table>
    <div class="mt-4">{{ $orderItems->links() }}</div>
</div>
@endsection