@extends('public.layout')

@php
    $money = fn ($v) => $shop->currency.' '.number_format((float) $v, 2);
    $when = fn ($d) => $d?->copy()->timezone($shop->timezone)->format('j M Y, g:i A');
    $cancelled = $order->status === 'cancelled';
    $steps = [
        ['Order placed', $order->created_at, true],
        ['Confirmed by shop', $order->confirmed_at, in_array($order->status, ['confirmed', 'delivered'], true) || $order->confirmed_at],
        ['Delivered · cash paid', $order->delivered_at, $order->status === 'delivered'],
    ];
@endphp

@section('title', 'Order '.$order->order_no.' · '.$shop->name)
@section('meta')<meta name="robots" content="noindex">@endsection

@section('content')
    <div class="space-y-5 rounded-xl bg-white p-6 shadow-sm">
        <div class="text-center">
            @if ($cancelled)
                <div class="mx-auto flex h-12 w-12 items-center justify-center rounded-full bg-red-100 text-2xl text-red-700">✕</div>
                <h1 class="mt-3 text-xl font-bold">Order {{ $order->order_no }} was cancelled</h1>
                <p class="mt-1 text-sm text-gray-600">Please contact {{ $shop->name }}@if ($shop->phone) on <a href="tel:{{ $shop->phone }}" class="font-medium underline">{{ $shop->phone }}</a>@endif if you have questions.</p>
            @elseif ($justPlaced)
                <div class="mx-auto flex h-12 w-12 items-center justify-center rounded-full bg-green-100 text-2xl text-green-700">✓</div>
                <h1 class="mt-3 text-xl font-bold">Thank you, {{ $order->customer_name }}!</h1>
                <p class="mt-1 text-sm text-gray-600">Your order <strong>{{ $order->order_no }}</strong> was received. {{ $shop->name }} will call <strong>{{ $order->phone }}</strong> to confirm. Save your order number to track it later.</p>
            @else
                <h1 class="text-xl font-bold">Order {{ $order->order_no }}</h1>
                <p class="mt-1 text-sm text-gray-600">Placed by {{ $order->customer_name }} with {{ $shop->name }}.</p>
            @endif
        </div>

        {{-- Progress --}}
        <ol class="space-y-0">
            @foreach ($steps as $i => [$label, $at, $done])
                @php $done = $done && ! ($cancelled && $i > 0 && ! $at); @endphp
                <li class="flex gap-3">
                    <div class="flex flex-col items-center">
                        <span class="flex h-6 w-6 items-center justify-center rounded-full text-xs font-bold {{ $done ? 'bg-green-600 text-white' : 'bg-gray-200 text-gray-400' }}">{{ $done ? '✓' : $i + 1 }}</span>
                        @unless ($loop->last)<span class="my-1 h-6 w-0.5 {{ $done ? 'bg-green-300' : 'bg-gray-200' }}"></span>@endunless
                    </div>
                    <div class="pb-2 text-sm">
                        <div class="font-medium {{ $done ? 'text-gray-900' : 'text-gray-400' }}">{{ $label }}</div>
                        @if ($done && $at)<div class="text-xs text-gray-500">{{ $when($at) }}</div>@endif
                    </div>
                </li>
            @endforeach
            @if ($cancelled)
                <li class="flex gap-3 text-sm"><span class="flex h-6 w-6 items-center justify-center rounded-full bg-red-600 text-xs font-bold text-white">✕</span><div><div class="font-medium text-red-700">Cancelled</div><div class="text-xs text-gray-500">{{ $when($order->cancelled_at) }}</div></div></li>
            @endif
        </ol>

        <dl class="divide-y rounded-lg border text-sm">
            @foreach ($order->items as $i)
                <div class="flex justify-between gap-3 p-3">
                    <dt>{{ rtrim(rtrim((string) $i->quantity, '0'), '.') }} × {{ $i->name }}</dt>
                    <dd class="font-medium">{{ $money($i->line_total) }}</dd>
                </div>
            @endforeach
            <div class="flex justify-between gap-3 bg-gray-50 p-3 font-semibold"><dt>{{ $order->status === 'delivered' ? 'Paid in cash on delivery' : 'Total to pay on delivery' }}</dt><dd>{{ $money($order->total) }}</dd></div>
        </dl>

        <div class="rounded-lg bg-gray-50 p-3 text-sm text-gray-600">
            <div class="font-medium text-gray-800">Deliver to</div>
            <div class="whitespace-pre-line">{{ $order->address }}</div>
        </div>

        <p class="text-center text-xs text-gray-400">Keep this page's link, or <a href="{{ route('public.track') }}" class="underline">track an order</a> any time with your order number and phone.</p>
    </div>
@endsection