@extends('layouts.account')
@section('title', $order->order_number)
@section('account')
@php
$m = $shop->money; $a = $order->address;
$steps = ['pending', 'confirmed', 'processing', 'shipped', 'delivered'];
$cancelled = $order->status === 'cancelled';
$at = max(0, array_search($order->status === 'completed' ? 'delivered' : ($order->status === 'packed' ? 'processing' : $order->status), $steps, true) ?: 0);
@endphp
<a href="{{ route('account.orders') }}" class="text-sm font-bold text-primary hover:underline">← {{ __('All orders') }}</a>
<div class="mb-6 mt-2 flex flex-wrap items-center justify-between gap-3"><h1 class="text-2xl font-extrabold text-primary">{{ $order->order_number }}</h1><x-status :value="$order->status"/></div>

@unless ($cancelled)
<ol class="mb-6 grid grid-cols-5 gap-2" aria-label="{{ __('Order progress') }}">
    @foreach ($steps as $i => $s)
        <li class="text-center"><div class="h-2 rounded-full {{ $i <= $at ? 'bg-primary' : 'bg-surface-variant' }}"></div><p class="mt-2 text-xs font-bold {{ $i <= $at ? 'text-primary' : 'text-outline' }}">{{ __(ucfirst($s)) }}</p></li>
    @endforeach
</ol>
@endunless

<section class="rounded-[32px] border border-surface-variant bg-white p-6">
    <ul class="divide-y divide-surface-variant">
        @foreach ($order->items as $i)
            <li class="flex gap-3 py-3">@include('partials.line-thumb', ['image' => $i->image_url])
                <div class="min-w-0 flex-1 text-sm"><p class="font-bold text-primary">{{ $i->product_name }}</p><p class="text-on-surface-variant">{{ collect([$i->color_label, $i->size_label])->filter()->implode(' · ') }} × {{ $i->quantity }}</p></div>
                <p class="text-sm font-bold">{{ $m->format((float) $i->line_total) }}</p></li>
        @endforeach
    </ul>
    <dl class="mt-4 space-y-2 border-t border-surface-variant pt-4 text-sm">
        <div class="flex justify-between"><dt>{{ __('Subtotal') }}</dt><dd>{{ $m->format((float) $order->subtotal) }}</dd></div>
        @if ((float) $order->discount_total > 0)<div class="flex justify-between"><dt>{{ __('Discount') }} @if ($order->coupon_code)({{ $order->coupon_code }})@endif</dt><dd>−{{ $m->format((float) $order->discount_total) }}</dd></div>@endif
        <div class="flex justify-between"><dt>{{ __('Delivery') }} ({{ $order->shipping_method_name }})</dt><dd>{{ (float) $order->shipping_fee > 0 ? $m->format((float) $order->shipping_fee) : __('Free') }}</dd></div>
        <div class="flex justify-between text-base font-extrabold text-primary"><dt>{{ __('Total') }}</dt><dd>{{ $m->format((float) $order->grand_total) }}</dd></div>
    </dl>
</section>

<div class="mt-4 grid gap-4 sm:grid-cols-2">
    <section class="rounded-[32px] bg-surface-mid p-6"><h2 class="font-extrabold text-primary">{{ __('Delivering to') }}</h2>
        @if ($a)<p class="mt-2 text-sm text-on-surface-variant">{{ $a->recipient_name }} · {{ $a->phone }}<br>{{ $a->address_line1 }}@if ($a->address_line2), {{ $a->address_line2 }}@endif<br>{{ $a->province }}</p>@endif</section>
    <section class="rounded-[32px] bg-surface-mid p-6"><h2 class="font-extrabold text-primary">{{ __('Payment') }}</h2>
        <p class="mt-2 text-sm text-on-surface-variant">{{ $order->payment ? __($order->payment->name) : '' }} · {{ __(ucfirst($order->payment_status)) }}</p></section>
</div>
@endsection