@extends('layouts.account')

@section('title', __('storefront.orders.order_title', ['number' => $order->reference]))

@php
    $productLines = $order->lines->where('type', '!=', 'shipping');
    $shippingLine = $order->lines->firstWhere('type', 'shipping');
@endphp

@section('account')

    <div class="flex max-w-4xl flex-col gap-12">

        <div class="flex flex-col gap-6">
            <a href="{{ route('account.orders') }}" class="inline-flex items-center gap-2 self-start text-sm underline hover:no-underline">
                <x-ui.icon name="arrow-left" :size="16" />
                {{ __('storefront.orders.back') }}
            </a>

            <h1 class="font-display text-h3 font-black tracking-tight sm:text-h2">
                {{ __('storefront.orders.order_title', ['number' => $order->reference]) }}
            </h1>
        </div>

        {{-- Summary --}}
        <dl class="grid grid-cols-1 gap-6 border-y border-black py-6 sm:grid-cols-2 lg:grid-cols-4">
            <div class="flex flex-col gap-1">
                <dt class="text-sm text-neutral-500">{{ __('storefront.orders.date') }}</dt>
                <dd>{{ $order->placed_at->format('d/m/Y') }}</dd>
            </div>

            <div class="flex flex-col gap-1">
                <dt class="text-sm text-neutral-500">{{ __('storefront.orders.status') }}</dt>
                <dd class="font-bold"><x-order-status :status="$order->status" /></dd>
            </div>

            @if ($paymentMethodName)
                <div class="flex flex-col gap-1">
                    <dt class="text-sm text-neutral-500">{{ __('storefront.orders.payment') }}</dt>
                    <dd>{{ $paymentMethodName }}</dd>
                </div>
            @endif

            @if ($shippingLine)
                <div class="flex flex-col gap-1">
                    <dt class="text-sm text-neutral-500">{{ __('storefront.orders.shipping_method') }}</dt>
                    <dd>{{ $shippingLine->description }}</dd>
                </div>
            @endif

            @foreach ($shipments as $shipment)
                <div class="flex flex-col gap-1">
                    <dt class="text-sm text-neutral-500">{{ __('storefront.orders.tracking') }}</dt>
                    <dd class="break-all">{{ $shipment->tracking_reference }}</dd>
                </div>
            @endforeach
        </dl>

        {{-- Items + totals --}}
        <section class="flex flex-col gap-6" aria-labelledby="order-items-heading">
            <h2 id="order-items-heading" class="font-display text-h4 font-extrabold">{{ __('storefront.orders.items') }}</h2>

            <ul>
                @foreach ($productLines as $line)
                    <li class="flex gap-4 border-b border-black py-5 sm:gap-6">
                        <div class="size-18 shrink-0 bg-neutral-300 sm:size-24">
                            @if ($thumb = $line->purchasable?->getThumbnailImage())
                                <img src="{{ $thumb }}" alt="" aria-hidden="true" width="96" height="96" loading="lazy" class="size-full object-cover">
                            @endif
                        </div>

                        <div class="flex min-w-0 flex-1 flex-col gap-1">
                            <p class="font-bold">
                                {{ $line->description }}
                                <span class="font-normal">&times; {{ $line->quantity }}</span>
                            </p>

                            @if ($line->option)
                                <p class="text-sm text-neutral-500">{{ $line->option }}</p>
                            @endif

                            @include('checkout::partials.line-custom-fields', ['line' => $line])
                        </div>

                        <p class="shrink-0 font-bold">{{ $line->sub_total?->formatted() }}</p>
                    </li>
                @endforeach
            </ul>

            <dl class="ml-auto flex w-full max-w-sm flex-col gap-2">
                <div class="flex justify-between gap-6">
                    <dt>{{ __('storefront.orders.subtotal') }}</dt>
                    <dd>{{ $order->sub_total?->formatted() }}</dd>
                </div>

                @if ($order->discount_total?->value > 0)
                    <div class="flex justify-between gap-6">
                        <dt>{{ __('storefront.orders.discount') }}</dt>
                        <dd>&minus;{{ $order->discount_total->formatted() }}</dd>
                    </div>
                @endif

                <div class="flex justify-between gap-6">
                    <dt>{{ __('storefront.orders.shipping') }}</dt>
                    <dd>{{ $order->shipping_total?->formatted() }}</dd>
                </div>

                @if ($order->tax_total?->value > 0)
                    <div class="flex justify-between gap-6 text-sm text-neutral-500">
                        <dt>{{ __('storefront.orders.tax') }}</dt>
                        <dd>{{ $order->tax_total->formatted() }}</dd>
                    </div>
                @endif

                <div class="flex justify-between gap-6 border-t border-black pt-3 font-display text-h4 font-extrabold">
                    <dt>{{ __('storefront.orders.total') }}</dt>
                    <dd>{{ $order->total?->formatted() }}</dd>
                </div>
            </dl>
        </section>

        {{-- Addresses --}}
        <div class="grid grid-cols-1 gap-12 sm:grid-cols-2">
            @foreach ([
                'shipping_to' => $order->shippingAddress,
                'billing' => $order->billingAddress,
            ] as $heading => $address)
                @if ($address)
                    <section class="flex flex-col gap-4" aria-labelledby="order-{{ $heading }}-heading">
                        <h2 id="order-{{ $heading }}-heading" class="font-display text-h4 font-extrabold">{{ __("storefront.orders.{$heading}") }}</h2>

                        <address class="flex flex-col not-italic">
                            <span>{{ trim($address->first_name.' '.$address->last_name) }}</span>
                            @if ($address->company_name)<span>{{ $address->company_name }}</span>@endif
                            @if ($address->tax_identifier)<span>{{ __('storefront.account.tax_identifier') }}: {{ $address->tax_identifier }}</span>@endif
                            <span>{{ $address->line_one }}</span>
                            @if ($address->line_two)<span>{{ $address->line_two }}</span>@endif
                            <span>{{ trim($address->postcode.' '.$address->city) }}</span>
                            @if ($address->state)
                                <span>{{ Lang::has("core::states.{$address->state}") ? __("core::states.{$address->state}") : $address->state }}</span>
                            @endif
                            @if ($address->contact_phone)<span>{{ $address->contact_phone }}</span>@endif
                        </address>
                    </section>
                @endif
            @endforeach
        </div>

    </div>

@endsection