@extends('layouts.website')

@section('title', 'Order Status')

@section('content')
@if($order)
<div class="page-card" style="max-width:760px;margin:auto;text-align:center;">
    <h1 style="margin-bottom:.3rem;">Order Status</h1>
    <p class="muted" style="margin-top:0;">Track your token and status below.</p>

    <div style="margin:1rem auto 1.2rem;max-width:280px;padding:1rem;border-radius:14px;background:#fff7f2;border:1px solid #ffd5c3;">
        <div class="muted" style="font-size:.9rem;">Token Number</div>
        <div style="font-size:2.6rem;font-weight:800;color:#ff753a;line-height:1.1;">#{{ $order->token_number }}</div>
    </div>

    <div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:.7rem;text-align:left;">
        <div style="background:#f9fafb;border:1px solid #e5e7eb;border-radius:10px;padding:.75rem;"><strong>Status:</strong> {{ ucfirst($order->status) }}</div>
        <div style="background:#f9fafb;border:1px solid #e5e7eb;border-radius:10px;padding:.75rem;"><strong>Order #:</strong> {{ $order->order_number }}</div>
        <div style="background:#f9fafb;border:1px solid #e5e7eb;border-radius:10px;padding:.75rem;"><strong>Total:</strong> Rs {{ number_format($order->total, 0) }}</div>
    </div>

    <p class="muted" style="margin-top:1rem;">Items: {{ $order->items->map(function($i) { return $i->qty . ' x ' . $i->product->name; })->implode(', ') }}</p>
    <p style="margin:.4rem 0 1.2rem;">Show your token at counter when collecting.</p>
    <a href="{{ url('/') }}" class="btn">Order Again</a>
</div>
@else
<div class="page-card" style="max-width:620px;margin:auto;text-align:center;">
    <h1>Order Not Found</h1>
    <p class="muted">No order exists for this token.</p>
    <a href="{{ url('/') }}" class="btn">Back to Home</a>
</div>
@endif
@endsection