@extends('layouts.app')
@section('title', __('checkout.confirmed_title', ['reference' => $order->reference]))

@section('content')
    <div class="shell max-w-3xl py-stack-lg">
        <x-leaf-rule class="py-0" />

        <h1 class="mt-stack-md text-center text-headline-lg-mobile md:text-headline-lg">
            {{ __('checkout.confirmed_title', ['reference' => $order->reference]) }}
        </h1>
        <p class="mt-stack-sm text-center text-body-lg text-on-surface-variant">
            {{ __('checkout.confirmed_body', ['phone' => $order->phone]) }}
        </p>

        <div class="mt-stack-lg rounded-lg border border-outline-variant/70 p-stack-md">
            <div class="flex flex-wrap items-center justify-between gap-3 border-b border-outline-variant/60 pb-stack-sm">
                <span class="u-label text-secondary">{{ __('checkout.status') }}</span>
                <span class="chip">{{ __("checkout.statuses.{$order->status}") }}</span>
            </div>

            <ul class="divide-y divide-outline-variant/50">
                @foreach ($order->items as $item)
                    <li class="flex justify-between gap-3 py-3 text-body-md">
                        <span>
                            {{ $item->name() }}
                            @if ($label = $item->optionLabel())
                                <span class="block text-label-sm text-on-surface-variant">{{ $label }}</span>
                            @endif
                            <span class="text-label-sm text-outline num">&times;{{ $item->quantity }}</span>
                        </span>
                        <span class="num shrink-0">{{ money($item->line_total, false) }}</span>
                    </li>
                @endforeach
            </ul>

            <dl class="mt-stack-sm space-y-2 border-t border-outline-variant/60 pt-stack-sm text-body-md">
                <div class="flex justify-between">
                    <dt class="text-on-surface-variant">{{ __('cart.subtotal') }}</dt>
                    <dd class="num">{{ money($order->subtotal) }}</dd>
                </div>
                <div class="flex justify-between">
                    <dt class="text-on-surface-variant">{{ __('cart.delivery_fee') }}</dt>
                    <dd class="num">{{ (float) $order->delivery_fee === 0.0 ? __('cart.free') : money($order->delivery_fee) }}</dd>
                </div>
                <div class="flex justify-between border-t border-outline-variant/60 pt-2">
                    <dt class="u-label text-primary">{{ __('cart.grand_total') }}</dt>
                    <dd class="font-label text-label-lg text-secondary num">{{ money($order->total) }}</dd>
                </div>
            </dl>

            <div class="mt-stack-md border-t border-outline-variant/60 pt-stack-sm text-body-md text-on-surface-variant">
                @if ($order->fulfilment === 'pickup' && $order->branch)
                    <p><span class="u-label-sm text-secondary">{{ __('checkout.collect_at') }}</span> — {{ $order->branch->name }}</p>
                    <p>{{ $order->branch->address }}</p>
                @else
                    <p><span class="u-label-sm text-secondary">{{ __('checkout.deliver_to') }}</span></p>
                    <p class="num">
                        {{ is_array($order->governorate) ? ($order->governorate[app()->getLocale()] ?? '') : $order->governorate }} —
                        {{ is_array($order->area) ? ($order->area[app()->getLocale()] ?? '') : $order->area }},
                        {{ __('checkout.block') }} {{ $order->block }},
                        {{ __('checkout.street') }} {{ $order->street }},
                        {{ $order->building }}
                    </p>
                @endif
            </div>
        </div>

        <div class="mt-stack-md text-center">
            <a href="{{ route('catalogue') }}" class="btn-ghost">{{ __('checkout.keep_shopping') }}</a>
        </div>
    </div>
@endsection