@extends('admin.layout')

@section('title', 'Orders')

@section('admin-content')
<div class="mb-8">
    <h1 class="text-3xl font-bold text-gray-900">Orders</h1>
    <p class="text-gray-500 mt-1">Manage all customer orders</p>
</div>

<div class="bg-white rounded-2xl shadow-card overflow-hidden">
    <table class="w-full">
        <thead class="bg-gray-50">
            <tr>
                <th class="px-6 py-4 text-left text-sm font-semibold text-gray-600">Order #</th>
                <th class="px-6 py-4 text-left text-sm font-semibold text-gray-600">Customer</th>
                <th class="px-6 py-4 text-left text-sm font-semibold text-gray-600">Total</th>
                <th class="px-6 py-4 text-left text-sm font-semibold text-gray-600">Payment</th>
                <th class="px-6 py-4 text-left text-sm font-semibold text-gray-600">Status</th>
                <th class="px-6 py-4 text-left text-sm font-semibold text-gray-600">Date</th>
                <th class="px-6 py-4 text-left text-sm font-semibold text-gray-600">Action</th>
            </tr>
        </thead>
        <tbody class="divide-y divide-gray-100">
            @foreach($orders as $order)
            <tr class="hover:bg-gray-50 transition-all">
                <td class="px-6 py-4">
                    <span class="font-medium text-gray-900">{{ $order->order_number }}</span>
                </td>
                <td class="px-6 py-4">
                    <div class="flex items-center">
                        <div class="w-8 h-8 bg-primary-100 rounded-full flex items-center justify-center text-primary-600 text-sm font-bold">
                            {{ strtoupper(substr($order->user->name, 0, 1)) }}
                        </div>
                        <span class="ml-2 text-gray-600">{{ $order->user->name }}</span>
                    </div>
                </td>
                <td class="px-6 py-4 font-bold text-gray-900">₦{{ number_format($order->total, 0) }}</td>
                <td class="px-6 py-4">
                    <span class="px-3 py-1 rounded-full text-xs font-medium 
                        @if($order->payment_status === 'paid') bg-green-100 text-green-600
                        @elseif($order->payment_status === 'partial') bg-yellow-100 text-yellow-600
                        @else bg-red-100 text-red-600 @endif">
                        {{ ucfirst($order->payment_status) }}
                    </span>
                </td>
                <td class="px-6 py-4">
                    <span class="px-3 py-1 rounded-full text-xs font-medium 
                        @if($order->order_status === 'delivered') bg-green-100 text-green-600
                        @elseif($order->order_status === 'shipped') bg-blue-100 text-blue-600
                        @else bg-gray-100 text-gray-600 @endif">
                        {{ ucfirst($order->order_status) }}
                    </span>
                </td>
                <td class="px-6 py-4 text-gray-500 text-sm">{{ $order->created_at->format('M d, Y') }}</td>
                <td class="px-6 py-4">
                    <a href="{{ route('admin.orders.show', $order) }}" class="text-primary-600 hover:text-primary-700 font-medium">View</a>
                </td>
            </tr>
            @endforeach
        </tbody>
    </table>
</div>

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