@extends('layouts.portal')
@section('title', 'Order ' . $order->order_number)
@section('content')
<div class="space-y-6">
    <div class="flex items-center justify-between">
        <h1 class="text-lg font-semibold text-slate-800">Order {{ $order->order_number }}</h1>
        <span class="rounded-full bg-slate-100 px-3 py-1 text-sm">{{ $order->status }}</span>
    </div>
    <div class="rounded-xl border border-slate-200 bg-white p-6 shadow-sm">
        <p class="text-sm text-slate-600">Branch: {{ $order->branch->name ?? '—' }}</p>
        <p class="text-sm text-slate-600">Order date: {{ $order->order_date->format('d M Y') }}</p>
    </div>
    <div class="rounded-xl border border-slate-200 bg-white p-6 shadow-sm">
        <h2 class="text-sm font-semibold text-slate-800 mb-3">Items</h2>
        <ul class="divide-y divide-slate-200 text-sm">
            @foreach($order->items as $item)
            <li class="py-2">{{ $item->display_name }} · Qty {{ $item->quantity }} · {{ number_format($item->line_total, 2) }}</li>
            @endforeach
        </ul>
        <p class="mt-3 text-sm font-medium">Total: {{ number_format($order->subtotal ?? 0, 2) }}</p>
    </div>
    <div class="flex gap-3">
        <a href="{{ route('portal.orders.index') }}" class="rounded-lg border border-slate-300 bg-white px-4 py-2 text-sm text-slate-700 hover:bg-slate-50">Back to orders</a>
    </div>
</div>
@endsection