@extends('layouts.app')

@section('content')
<div class="mx-auto max-w-5xl px-4 py-8">
    <div class="flex items-center justify-between">
        <h1 class="text-3xl font-black">{{ $order->order_number }}</h1>
        <form method="POST" action="{{ route('account.orders.reorder', $order) }}">@csrf <button class="btn-secondary">Reorder</button></form>
    </div>
    <div class="mt-6 grid gap-5 lg:grid-cols-[1fr_320px]">
        <div class="panel divide-y">
            @foreach ($order->items as $item)
                <div class="flex justify-between p-4"><span>{{ $item->quantity }} x {{ $item->product_name }}</span><span>R{{ $item->line_total }}</span></div>
            @endforeach
        </div>
        <aside class="panel p-5">
            <h2 class="font-black">Timeline</h2>
            <ol class="mt-3 grid gap-2 text-sm">
                @foreach ($order->history as $event)
                    <li>{{ $event->created_at->format('d M H:i') }} · {{ str($event->status)->headline() }}</li>
                @endforeach
            </ol>
        </aside>
    </div>
</div>
@endsection