14 lines
5.8 KiB
PHP
14 lines
5.8 KiB
PHP
<x-layouts.public :business="$business">
|
|
@php($upcoming = $appointments->filter(fn ($appointment) => $appointment->startAt->isFuture() && ! in_array($appointment->status->value, ['CANCELLED', 'COMPLETED']))->values())
|
|
@php($past = $appointments->reject(fn ($appointment) => $upcoming->contains('id', $appointment->id))->values())
|
|
<div class="mx-auto min-h-screen max-w-md bg-stone pb-28 text-ink">
|
|
<header class="sticky top-0 z-40 border-b border-line bg-white px-6 py-6"><h1 class="mb-5 text-2xl font-bold tracking-tight">Appointments</h1><div class="flex gap-2 rounded-full bg-stone p-1"><button id="tab-upcoming" onclick="switchTab('upcoming')" class="flex-1 rounded-full bg-ink py-2.5 text-xs font-bold uppercase tracking-widest text-white">Upcoming</button><button id="tab-past" onclick="switchTab('past')" class="flex-1 rounded-full py-2.5 text-xs font-bold uppercase tracking-widest text-muted">Past</button></div></header>
|
|
<main class="mt-6 space-y-4 px-6">
|
|
<div id="content-upcoming" class="space-y-4">@forelse ($upcoming as $appointment)<article class="rounded-jumbo border border-line bg-white p-5 shadow-sm"><div class="mb-4 flex items-start justify-between"><span class="rounded-full bg-accent/10 px-3 py-1 text-[10px] font-bold uppercase tracking-widest text-accent">{{ str_replace('_', ' ', strtolower($appointment->status->value)) }}</span><div class="text-right"><p class="text-sm font-bold">{{ $appointment->startAt->setTimezone($business->timezone)->format('D, M j') }}</p><p class="text-xs text-muted">{{ $appointment->startAt->setTimezone($business->timezone)->format('g:i A') }}</p></div></div><div class="mb-4 flex items-center gap-3"><div class="flex h-10 w-10 items-center justify-center rounded-full bg-stone"><i class="fa-solid fa-scissors"></i></div><div><h3 class="text-sm font-bold">{{ $appointment->services->pluck('service.name')->join(', ') }}</h3><p class="text-xs text-muted">with {{ $appointment->staff->user?->name ?: 'your barber' }}</p></div></div><div class="flex gap-2 border-t border-line pt-4"><a href="{{ route('customer.appointments.show', $appointment->id) }}" class="flex-1 rounded-lg bg-stone py-2.5 text-center text-xs font-bold uppercase tracking-widest">Details</a>@if (in_array($appointment->status->value, ['PENDING', 'CONFIRMED']))<form class="flex-1" method="POST" action="{{ route('customer.appointments.cancel', $appointment->id) }}">@csrf<button class="w-full rounded-lg border border-red-200 py-2.5 text-xs font-bold uppercase tracking-widest text-red-500">Cancel</button></form>@endif</div></article>@empty<div class="flex flex-col items-center px-6 py-16 text-center"><div class="mb-5 flex h-16 w-16 items-center justify-center rounded-full border border-line bg-white text-2xl text-muted"><i class="fa-regular fa-calendar"></i></div><h3 class="mb-1 text-base font-bold">No upcoming appointments</h3><p class="mb-6 text-sm text-muted">Book your next visit in a few taps.</p><a href="{{ route('booking.services') }}" class="rounded-full bg-ink px-8 py-3.5 text-xs font-bold uppercase tracking-widest text-white">Book now</a></div>@endforelse</div>
|
|
<div id="content-past" class="hidden space-y-4">@forelse ($past as $appointment)<article class="flex rounded-jumbo border border-line bg-white p-4"><div class="flex-1 pr-4"><span class="mb-3 inline-block rounded-full bg-stone px-3 py-1 text-[10px] font-bold uppercase tracking-widest text-muted">{{ str_replace('_', ' ', strtolower($appointment->status->value)) }}</span><h3 class="mb-1 text-sm font-bold">{{ $appointment->services->pluck('service.name')->join(', ') }}</h3><p class="mb-3 text-xs text-muted">{{ $appointment->startAt->setTimezone($business->timezone)->format('D, M j · g:i A') }}</p><a href="{{ route('booking.services') }}" class="inline-block rounded-lg bg-ink px-5 py-2.5 text-xs font-bold uppercase tracking-widest text-white">Book again</a></div><div class="flex w-16 flex-col items-center justify-center border-l border-line pl-4 text-center"><span class="text-[10px] uppercase text-muted">{{ $appointment->startAt->setTimezone($business->timezone)->format('M') }}</span><span class="text-2xl font-light">{{ $appointment->startAt->setTimezone($business->timezone)->format('j') }}</span></div></article>@empty<p class="py-16 text-center text-sm text-muted">No past appointments yet.</p>@endforelse</div>
|
|
</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-ink"><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.profile') }}" class="flex flex-col items-center gap-1 text-muted"><i class="fa-solid fa-user text-xl"></i><span class="text-[10px] font-bold uppercase tracking-widest">Settings</span></a></nav>
|
|
</div>
|
|
<script>function switchTab(tab){const upcoming=document.getElementById('content-upcoming'),past=document.getElementById('content-past'),upBtn=document.getElementById('tab-upcoming'),pastBtn=document.getElementById('tab-past');const isUpcoming=tab==='upcoming';upcoming.classList.toggle('hidden',!isUpcoming);past.classList.toggle('hidden',isUpcoming);upBtn.classList.toggle('bg-ink',isUpcoming);upBtn.classList.toggle('text-white',isUpcoming);upBtn.classList.toggle('text-muted',!isUpcoming);pastBtn.classList.toggle('bg-ink',!isUpcoming);pastBtn.classList.toggle('text-white',!isUpcoming);pastBtn.classList.toggle('text-muted',isUpcoming)}</script>
|
|
</x-layouts.public>
|