@extends('layouts.admin')

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

@section('content')
<div class="bg-white rounded-xl shadow-sm p-6">
    <form method="GET" class="flex gap-3 mb-6 flex-wrap">
        <input type="text" name="search" value="{{ request('search') }}" placeholder="Search order number..." class="border border-gray-300 rounded-lg px-3 py-2 text-sm w-56">
        <select name="status" class="border border-gray-300 rounded-lg px-3 py-2 text-sm">
            <option value="">All Status</option>
            @foreach(['pending','processing','shipped','delivered','cancelled','refunded'] as $s)
            <option value="{{ $s }}" {{ request('status') == $s ? 'selected' : '' }}>{{ ucfirst($s) }}</option>
            @endforeach
        </select>
        <button type="submit" class="bg-gray-800 text-white px-4 py-2 rounded-lg text-sm">Filter</button>
    </form>

    <div class="overflow-x-auto">
        <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">Items</th>
                    <th class="text-left p-3">Total</th>
                    <th class="text-left p-3">Payment</th>
                    <th class="text-left p-3">Status</th>
                    <th class="text-left p-3">Date</th>
                    <th class="text-left p-3">Actions</th>
                </tr>
            </thead>
            <tbody>
                @foreach($orders as $order)
                <tr class="border-b hover:bg-gray-50">
                    <td class="p-3 font-medium">{{ $order->order_number }}</td>
                    <td class="p-3">
                        <p>{{ $order->user->name }}</p>
                        <p class="text-xs text-gray-400">{{ $order->user->email }}</p>
                    </td>
                    <td class="p-3">{{ $order->items->count() }}</td>
                    <td class="p-3 font-bold">{{ format_currency($order->total) }}</td>
                    <td class="p-3">
                        <span class="px-2 py-0.5 rounded-full text-xs {{ $order->payment_status === 'paid' ? 'bg-green-100 text-green-700' : 'bg-yellow-100 text-yellow-700' }}">
                            {{ ucfirst($order->payment_status) }}
                        </span>
                    </td>
                    <td class="p-3">
                        <span class="px-2 py-0.5 rounded-full text-xs 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>
                    </td>
                    <td class="p-3 text-gray-500 text-xs">{{ $order->created_at->format('M d, Y') }}</td>
                    <td class="p-3">
                        <a href="{{ route('admin.orders.show', $order->id) }}" class="text-xs bg-blue-600 text-white px-2 py-1 rounded hover:bg-blue-700">View</a>
                    </td>
                </tr>
                @endforeach
            </tbody>
        </table>
    </div>
    <div class="mt-4">{{ $orders->links() }}</div>
</div>
@endsection
