generated from boboko/starter
68 lines
3.3 KiB
PHP
68 lines
3.3 KiB
PHP
@extends('layouts.account')
|
|
|
|
@section('title', __('storefront.account.nav_orders'))
|
|
|
|
@section('account')
|
|
|
|
<div class="flex max-w-4xl flex-col gap-12">
|
|
|
|
<h1 class="font-display text-h3 font-black tracking-tight sm:text-h2">
|
|
{{ __('storefront.account.nav_orders') }}
|
|
</h1>
|
|
|
|
@if ($orders->isEmpty())
|
|
<div class="flex flex-col items-start gap-8">
|
|
<p>{{ __('storefront.orders.empty') }}</p>
|
|
<x-ui.button :href="route('products')" size="md">{{ __('storefront.orders.shop_now') }}</x-ui.button>
|
|
</div>
|
|
@else
|
|
{{-- A list, not a table, so each order can stack on mobile. The column
|
|
headings are visual only; each cell carries its own sr-only label. --}}
|
|
<div>
|
|
<div class="hidden grid-cols-[1fr_1fr_1.5fr_1fr_auto] gap-6 border-b border-black pb-3 text-sm uppercase font-display font-extrabold sm:grid" aria-hidden="true">
|
|
<span>{{ __('storefront.orders.date') }}</span>
|
|
<span>{{ __('storefront.orders.number') }}</span>
|
|
<span>{{ __('storefront.orders.status') }}</span>
|
|
<span>{{ __('storefront.orders.total') }}</span>
|
|
<span class="w-24"></span>
|
|
</div>
|
|
|
|
<ul>
|
|
@foreach ($orders as $order)
|
|
<li class="grid grid-cols-2 gap-x-6 gap-y-2 border-b border-black py-5 sm:grid-cols-[1fr_1fr_1.5fr_1fr_auto] sm:items-center">
|
|
<span>
|
|
<span class="sr-only">{{ __('storefront.orders.date') }}:</span>
|
|
{{ $order->placed_at->format('d/m/Y') }}
|
|
</span>
|
|
<span class="text-right font-bold sm:text-left">
|
|
<span class="sr-only">{{ __('storefront.orders.number') }}:</span>
|
|
#{{ $order->reference }}
|
|
</span>
|
|
<span>
|
|
<span class="sr-only">{{ __('storefront.orders.status') }}:</span>
|
|
<x-order-status :status="$order->status" />
|
|
</span>
|
|
<span class="text-right sm:text-left">
|
|
<span class="sr-only">{{ __('storefront.orders.total') }}:</span>
|
|
{{ $order->total?->formatted() }}
|
|
</span>
|
|
<a
|
|
href="{{ route('account.orders.show', ['orderId' => $order->id]) }}"
|
|
class="col-span-2 mt-2 inline-flex w-24 items-center gap-2 font-bold underline hover:no-underline sm:col-span-1 sm:mt-0"
|
|
aria-label="{{ __('storefront.orders.view_order', ['number' => $order->reference]) }}"
|
|
>
|
|
{{ __('storefront.orders.view') }}
|
|
<x-ui.icon name="arrow-right" :size="16" />
|
|
</a>
|
|
</li>
|
|
@endforeach
|
|
</ul>
|
|
</div>
|
|
|
|
<x-ui.pagination :paginator="$orders" />
|
|
@endif
|
|
|
|
</div>
|
|
|
|
@endsection
|