30 lines
2.4 KiB
PHP
30 lines
2.4 KiB
PHP
<x-layouts.public :business="$business">
|
|
<main class="mx-auto min-h-screen max-w-3xl px-5 pb-16 pt-8 lg:px-10">
|
|
<a href="{{ route('public.home') }}" class="text-xs font-bold uppercase tracking-widest text-muted">← {{ $business->shortName ?: $business->name }}</a>
|
|
<div class="mt-10 flex items-end justify-between gap-4">
|
|
<div><p class="text-[10px] font-bold uppercase tracking-widest text-muted">Step 1 of 4</p><h1 class="mt-2 text-3xl font-black tracking-tight">Choose your service</h1></div>
|
|
<span class="text-xs text-muted">{{ $categories->sum(fn ($category) => $category->services->count()) }} available</span>
|
|
</div>
|
|
@if ($errors->any()) <div class="mt-5 rounded-md border border-danger/20 bg-red-50 p-4 text-sm text-red-800">{{ $errors->first() }}</div> @endif
|
|
<form method="POST" action="{{ route('booking.services.store') }}" class="mt-8 space-y-6">
|
|
@csrf
|
|
@forelse ($categories as $category)
|
|
<section>
|
|
<h2 class="mb-3 text-[10px] font-bold uppercase tracking-widest text-muted">{{ $category->name }}</h2>
|
|
<div class="space-y-3">
|
|
@foreach ($category->services as $service)
|
|
<label class="flex cursor-pointer items-center justify-between gap-4 rounded-md border border-line bg-white p-5 shadow-sm transition has-checked:border-ink has-checked:ring-1 has-checked:ring-ink">
|
|
<span class="flex items-center gap-4"><input type="checkbox" name="serviceIds[]" value="{{ $service->id }}" class="h-5 w-5 accent-ink"><span><strong class="block text-sm">{{ $service->name }}</strong><span class="mt-1 block text-xs text-muted">{{ $service->durationMinutes }} minutes</span></span></span>
|
|
<span class="text-sm font-bold">{{ $business->currency === 'GBP' ? '£' : $business->currency }}{{ number_format((float) $service->price, 2) }}</span>
|
|
</label>
|
|
@endforeach
|
|
</div>
|
|
</section>
|
|
@empty
|
|
<div class="rounded-md border border-line bg-white p-6 text-sm text-muted">No services are currently available to book.</div>
|
|
@endforelse
|
|
<div class="sticky bottom-4 pt-3"><x-ui.button class="w-full" type="submit">Continue to barber & time</x-ui.button></div>
|
|
</form>
|
|
</main>
|
|
</x-layouts.public>
|