14 lines
4.0 KiB
PHP
14 lines
4.0 KiB
PHP
<x-layouts.public :business="$business">
|
||
<div class="mx-auto min-h-screen max-w-md bg-stone pb-28 text-ink">
|
||
<header class="flex items-center justify-between px-6 pb-4 pt-10"><a href="{{ route('customer.dashboard') }}" class="flex h-11 w-11 items-center justify-center rounded-full border border-line bg-white"><i class="fa-solid fa-arrow-left text-sm"></i></a><h1 class="text-xl font-bold tracking-tight">Loyalty Rewards</h1><div class="w-11"></div></header>
|
||
<main class="px-5 pt-2">
|
||
@if (! $summary)<div class="rounded-jumbo border border-line bg-white p-6 text-sm text-muted">{{ $business->shortName ?: $business->name }} hasn’t enabled a loyalty programme yet.</div>@else
|
||
@php($threshold = max(1, $summary['threshold']))
|
||
<div class="relative mb-10 aspect-[1.65/1] overflow-hidden rounded-2xl border-[3px] border-amber-500 bg-[#141414] p-4 text-white shadow-2xl"><div class="flex items-center justify-between"><h2 class="text-xl font-black italic tracking-tight">{{ $summary['programme']->cardTitleText ?: 'Loyalty Card' }}</h2><span class="rounded border border-amber-500/30 px-2 py-0.5 text-[8px] font-bold uppercase tracking-widest text-amber-400">Member</span></div><div class="mt-2 h-0.5 w-10 bg-amber-500"></div><div class="mt-4 grid grid-cols-5 gap-2">@for ($i = 1; $i <= $threshold; $i++)<div class="flex aspect-square items-center justify-center rounded-full {{ $i <= $summary['currentStamps'] ? 'bg-white text-ink' : 'border-2 border-dashed border-white/20 bg-[#2a2a2a]' }}">@if ($i <= $summary['currentStamps'])<i class="fa-solid fa-mustache text-xs"></i>@endif</div>@endfor</div><p class="absolute bottom-3 left-0 right-0 text-center text-[7px] font-bold uppercase tracking-[0.18em] text-white/40">{{ $summary['programme']->termsLine ?: 'Earn stamps with every eligible visit' }}</p></div>
|
||
<div class="space-y-5"><div class="rounded-3xl border border-line bg-white p-6 text-center shadow-sm"><h3 class="mb-1 text-lg font-bold">Almost there{{ $customer->firstName ? ', '.$customer->firstName : '' }}!</h3><p class="text-sm text-muted">Complete {{ max(0, $threshold - $summary['currentStamps']) }} more visits to unlock your reward.</p><div class="mt-5 h-2 w-full overflow-hidden rounded-full bg-stone"><div class="h-full rounded-full bg-amber-500" style="width: {{ min(100, ($summary['currentStamps'] / $threshold) * 100) }}%"></div></div><p class="mt-2 text-xs text-muted">{{ $summary['currentStamps'] }} of {{ $threshold }} visits completed</p></div><div class="rounded-3xl border border-line bg-white p-6 shadow-sm"><h4 class="mb-5 text-xs font-bold uppercase tracking-widest text-muted">How it works</h4><div class="space-y-4">@foreach (['Book your appointment through the shop.', 'Show this digital card to your barber after your visit.', 'Your barber adds a stamp to your card instantly.'] as $index => $step)<div class="flex items-start gap-4"><div class="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-stone text-xs font-bold">{{ $index + 1 }}</div><p class="pt-1 text-xs leading-relaxed text-muted">{{ $step }}</p></div>@endforeach</div></div></div>
|
||
@endif
|
||
</main>
|
||
<nav class="fixed bottom-0 left-0 right-0 z-50 mx-auto flex max-w-md items-center justify-between border-t border-line bg-white px-5 py-2"><a href="{{ route('customer.dashboard') }}" class="flex flex-col items-center gap-1 text-muted"><i class="fa-solid fa-house text-xl"></i><span class="text-[10px] font-bold uppercase tracking-widest">Home</span></a><a href="{{ route('customer.appointments') }}" class="flex flex-col items-center gap-1 text-muted"><i class="fa-solid fa-calendar-check text-xl"></i><span class="text-[10px] font-bold uppercase tracking-widest">Bookings</span></a><a href="{{ route('customer.loyalty') }}" class="flex flex-col items-center gap-1 text-ink"><i class="fa-solid fa-user text-xl"></i><span class="text-[10px] font-bold uppercase tracking-widest">Settings</span></a></nav>
|
||
</div>
|
||
</x-layouts.public>
|