@extends('layouts.app')

@section('content')
<div class="mx-auto max-w-7xl px-4 py-8">
    <h1 class="text-3xl font-black">My Orders</h1>
    <div class="panel mt-6 overflow-hidden">
        <table class="w-full text-left text-sm">
            <thead class="bg-green-50"><tr><th class="p-3">Order</th><th>Date</th><th>Total</th><th>Payment</th><th>Status</th><th></th></tr></thead>
            <tbody class="divide-y">
            @foreach ($orders as $order)
                <tr>
                    <td class="p-3 font-bold">{{ $order->order_number }}</td>
                    <td>{{ $order->created_at->format('d M Y') }}</td>
                    <td>R{{ $order->grand_total }}</td>
                    <td>{{ str($order->payment_status->value)->headline() }}</td>
                    <td>{{ str($order->order_status->value)->headline() }}</td>
                    <td><a class="font-bold text-pantry-leaf" href="{{ route('account.orders.show', $order) }}">View</a></td>
                </tr>
            @endforeach
            </tbody>
        </table>
    </div>
    <div class="mt-5">{{ $orders->links() }}</div>
</div>
@endsection