@extends('layouts.app')

@section('title', 'Orders')
@section('heading', 'Orders')

@section('content')
<div class="space-y-6">
    @if($orders->isEmpty())
        <div class="rounded-xl border border-slate-200 bg-white p-8 text-center text-slate-600">
            <p>No orders yet.</p>
        </div>
    @else
        <div class="overflow-x-auto rounded-xl border border-slate-200 bg-white shadow-sm">
            <table class="min-w-full divide-y divide-slate-200">
                <thead>
                    <tr>
                        <th class="px-4 py-3 text-left text-sm font-medium text-slate-700">Order</th>
                        <th class="px-4 py-3 text-left text-sm font-medium text-slate-700">Customer</th>
                        <th class="px-4 py-3 text-left text-sm font-medium text-slate-700">Total</th>
                        <th class="px-4 py-3 text-left text-sm font-medium text-slate-700">Status</th>
                        <th class="px-4 py-3 text-left text-sm font-medium text-slate-700">Date</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($orders as $order)
                    <tr class="hover:bg-slate-50">
                        <td class="px-4 py-3 text-sm text-slate-900">
                            @can('view', $order)
                                <a href="{{ route('orders.show', $order) }}" class="text-indigo-600 hover:text-indigo-500">{{ $order->order_number }}</a>
                            @else
                                {{ $order->order_number }}
                            @endcan
                        </td>
                        <td class="px-4 py-3 text-sm text-slate-600">{{ $order->user?->email ?? '—' }}</td>
                        <td class="px-4 py-3 text-sm text-slate-900">{{ number_format($order->total, 2) }}</td>
                        <td class="px-4 py-3"><span class="rounded-full px-2 py-0.5 text-xs font-medium {{ $order->status === 'paid' ? 'bg-emerald-100 text-emerald-800' : ($order->status === 'completed' ? 'bg-slate-100 text-slate-800' : 'bg-amber-100 text-amber-800') }}">{{ $order->status }}</span></td>
                        <td class="px-4 py-3 text-sm text-slate-500">{{ $order->created_at->format('M j, Y') }}</td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
        <div class="mt-4">
            {{ $orders->links() }}
        </div>
    @endif
</div>
@endsection