@extends('layouts.app')
@section('title', __('Order placed'))
@section('content')
@php
    $m = $shop->money;
    $a = $order->address;
    $unpaidAba = $order->payment && $order->payment->code === 'aba_payway' && $order->payment_status !== 'paid' && $order->status !== 'cancelled';
@endphp
<div class="mx-auto max-w-3xl">
    @if ($unpaidAba)
        <div class="rounded-[40px] bg-accent-container px-8 py-12 text-center text-on-accent-container">
            <h1 class="text-3xl font-extrabold sm:text-4xl">{{ __('Payment not completed yet') }}</h1>
            <p class="mt-2">{{ __('Order :n is saved, but we have not received your payment.', ['n' => $order->order_number]) }}</p>
            <div class="mt-6"><x-btn :href="route('pay.aba', $order->order_number)">{{ __('Pay now with ABA PayWay') }}</x-btn></div>
        </div>
    @else
        <div class="rounded-[40px] bg-tertiary px-8 py-12 text-center text-on-tertiary">
            <span class="mx-auto flex h-14 w-14 items-center justify-center rounded-full bg-primary text-white"><x-icon name="check" class="w-7 h-7"/></span>
            <h1 class="mt-5 text-3xl font-extrabold sm:text-4xl">{{ __('Thank you!') }}</h1>
            <p class="mt-2 text-on-tertiary-container">{{ __('Order :n has been placed.', ['n' => $order->order_number]) }}</p>
        </div>
    @endif

    <div class="mt-6 grid gap-4 sm:grid-cols-2">
        <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) : '' }}</p>
            <p class="mt-1 text-sm font-bold text-primary">{{ $order->payment && $order->payment->type === 'cod' ? __('Pay when your order arrives.') : ($order->payment_status === 'paid' ? __('Paid') : __('Awaiting payment')) }}</p>
        </section>
        <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 }}<br>{{ $a->address_line1 }}@if ($a->address_line2), {{ $a->address_line2 }}@endif<br>{{ $a->province }}</p>@endif
        </section>
    </div>

    <section class="mt-4 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') }}</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-8 flex flex-wrap justify-center gap-3">
        <x-btn :href="route('shop')">{{ __('Continue shopping') }}</x-btn>
        @auth<x-btn :href="route('account.orders')" variant="ghost">{{ __('View my orders') }}</x-btn>@endauth
    </div>
</div>
@endsection