20 lines
10 KiB
PHP
20 lines
10 KiB
PHP
<x-layouts.public :business="$business">
|
|
@php($location = $business?->locations?->first())
|
|
@php($hero = $business?->coverImageUrl ?: 'https://storage.googleapis.com/uxpilot-auth.appspot.com/gen_6f41884203_51631d7a07f0b3a6.png')
|
|
<div class="bg-stone text-ink overflow-x-hidden pb-32">
|
|
<section class="relative"><div class="h-72 w-full overflow-hidden bg-ink"><img src="{{ $hero }}" alt="{{ $business?->name }}" class="w-full h-full object-cover"></div><div class="absolute bottom-6 right-6"><button class="bg-white/90 backdrop-blur-sm px-4 py-2 rounded-lg text-[10px] font-bold uppercase tracking-widest shadow-sm"><i class="fa-solid fa-images mr-2"></i>Show all photos</button></div></section>
|
|
<div class="flex gap-1 overflow-x-auto py-1 bg-stone no-scrollbar">@forelse ($business?->galleryImages ?? [] as $image)<img src="{{ $image->imageUrl }}" alt="{{ $image->caption ?: 'Shop gallery' }}" class="w-24 h-20 object-cover shrink-0">@empty<div class="w-full h-20 flex items-center justify-center text-xs text-muted">{{ $business?->name ?: 'NextChair' }}</div>@endforelse</div>
|
|
<main class="bg-white">
|
|
<section class="px-6 py-6"><div class="flex items-start justify-between gap-4"><div><h1 class="text-2xl font-bold tracking-tight mb-1">{{ $business?->name ?: 'Book your next appointment' }}</h1><p class="text-xs text-muted mb-3">{{ $location ? $location->addressLine1.', '.$location->postalCode.', '.$location->city : 'Appointments, services and details in one place.' }}</p></div><a href="{{ route('auth.signin') }}" class="w-10 h-10 rounded-full bg-stone flex items-center justify-center text-ink"><i class="fa-solid fa-user"></i></a></div><div class="flex items-center gap-3 text-sm mb-4"><div class="flex items-center gap-1 text-amber-500"><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i></div><span class="font-bold">{{ $business?->googleRating ?: ($business?->reviews?->avg('rating') ?: '5.0') }}</span><a href="#reviews" class="text-blue-600 underline">{{ $business?->googleRatingCount ?: ($business?->reviews?->count() ?: 0) }} reviews</a></div><p class="text-[10px] font-bold uppercase tracking-widest text-muted">{{ $business?->shortName ?: 'Entrepreneur' }}</p></section>
|
|
<section class="px-6 py-4 border-t border-line"><button class="w-full flex items-center justify-between group"><div class="flex items-center gap-3"><div class="w-8 h-8 rounded-lg bg-green-50 flex items-center justify-center text-green-600"><i class="fa-solid fa-shield-halved"></i></div><span class="text-sm font-medium">Review policies and safety</span></div><i class="fa-solid fa-chevron-right text-muted"></i></button></section>
|
|
<section class="sticky top-0 z-40 bg-white border-b border-line overflow-x-auto no-scrollbar"><div class="flex px-6"><button onclick="switchTab('services')" id="tab-services" class="tab-btn px-4 py-4 text-[10px] font-bold uppercase tracking-[0.15em] border-b-2 border-ink whitespace-nowrap">Services</button><button onclick="switchTab('portfolio')" id="tab-portfolio" class="tab-btn px-4 py-4 text-[10px] font-bold uppercase tracking-[0.15em] border-b-2 border-transparent text-muted whitespace-nowrap">Portfolio</button><button onclick="switchTab('details')" id="tab-details" class="tab-btn px-4 py-4 text-[10px] font-bold uppercase tracking-[0.15em] border-b-2 border-transparent text-muted whitespace-nowrap">Details</button><button onclick="switchTab('reviews')" id="tab-reviews" class="tab-btn px-4 py-4 text-[10px] font-bold uppercase tracking-[0.15em] border-b-2 border-transparent text-muted whitespace-nowrap">Reviews</button></div></section>
|
|
<div id="content-services" class="tab-content block"><div class="px-6 py-4"><div class="relative"><i class="fa-solid fa-magnifying-glass absolute left-4 top-1/2 -translate-y-1/2 text-muted"></i><input type="text" placeholder="Search for service" class="w-full bg-stone/50 border border-line rounded-xl pl-12 pr-4 py-4 focus:ring-2 focus:ring-ink outline-none text-sm"></div></div><div class="px-6 flex gap-2 overflow-x-auto no-scrollbar mb-6">@foreach ($categories as $category)<button class="px-4 py-2 rounded-full border {{ $loop->first ? 'border-ink bg-ink text-white' : 'border-line bg-stone text-ink' }} text-[10px] font-bold whitespace-nowrap">{{ $category->name }}</button>@endforeach</div><div class="px-6 space-y-6 pb-12">@forelse ($categories as $category)<div><h3 class="text-sm font-bold mb-4 flex items-center gap-2"><i class="fa-solid fa-thumbs-up text-accent"></i>{{ $category->name }}</h3><div class="space-y-6">@foreach ($category->services as $service)<div class="flex justify-between items-start gap-4 {{ $loop->index ? 'pt-6 border-t border-stone' : '' }}"><div class="flex-1"><h4 class="text-sm font-medium mb-1">{{ $service->name }}</h4><p class="text-xs text-muted">{{ $service->durationMinutes }}m</p></div><div class="text-right"><p class="font-bold mb-2">{{ $business?->currency === 'GBP' ? '£' : $business?->currency }}{{ number_format((float) $service->price, 2) }}</p><a href="{{ route('booking.services') }}" class="inline-block bg-blue-500 text-white px-6 py-2 rounded-lg text-xs font-bold uppercase tracking-widest hover:bg-blue-600">Book</a></div></div>@endforeach</div></div>@empty<p class="text-sm text-muted">Services will appear here once this business is configured.</p>@endforelse</div></div>
|
|
<div id="content-portfolio" class="tab-content hidden"><div class="px-6 py-4 flex gap-2 overflow-x-auto no-scrollbar"><button class="px-4 py-2 rounded-full bg-ink text-white text-[10px] font-bold">All</button><button class="px-4 py-2 rounded-full bg-stone text-ink text-[10px] font-bold">Fades</button><button class="px-4 py-2 rounded-full bg-stone text-ink text-[10px] font-bold">Beards</button></div><div class="grid grid-cols-2 gap-1 bg-stone p-1">@forelse (($business?->galleryImages ?? collect())->where('placement.value', 'PORTFOLIO') as $image)<img src="{{ $image->imageUrl }}" alt="{{ $image->caption ?: 'Portfolio' }}" class="w-full aspect-square object-cover">@empty<p class="col-span-2 p-8 text-sm text-muted">Portfolio images will appear here soon.</p>@endforelse</div></div>
|
|
<div id="content-details" class="tab-content hidden"><section class="px-6 py-8"><h3 class="text-[10px] font-bold uppercase tracking-widest text-muted mb-4">About Us</h3><p class="text-sm leading-relaxed text-gray-700">{{ $business?->description ?: 'A welcoming space for precise grooming and excellent service.' }}</p></section><section class="px-6 pb-8"><h3 class="text-[10px] font-bold uppercase tracking-widest text-muted mb-6">Staffers</h3><div class="flex gap-6 overflow-x-auto no-scrollbar">@forelse ($business?->staff?->where('status.value', 'ACTIVE') ?? [] as $member)<div class="w-20 shrink-0 text-center"><div class="w-20 h-20 rounded-full bg-stone flex items-center justify-center text-xl font-bold mb-2 border border-line">{{ strtoupper(substr($member->user?->name ?: 'S', 0, 1)) }}</div><p class="text-xs font-medium truncate">{{ $member->user?->name ?: 'Staff member' }}</p></div>@empty<p class="text-sm text-muted">Our team will appear here soon.</p>@endforelse</div></section><section class="px-6 pb-8"><h3 class="text-[10px] font-bold uppercase tracking-widest text-muted mb-6">Contact & Business Hours</h3><div class="space-y-4">@foreach ($business?->hours?->sortBy('id') ?? [] as $hours)<div class="flex justify-between items-center text-sm"><span class="text-gray-600">{{ ucfirst(strtolower($hours->dayOfWeek)) }}</span><span class="font-bold">{{ $hours->isClosed ? 'Closed' : sprintf('%02d:%02d - %02d:%02d', intdiv($hours->opensAtMinutes, 60), $hours->opensAtMinutes % 60, intdiv($hours->closesAtMinutes, 60), $hours->closesAtMinutes % 60) }}</span></div>@endforeach</div></section><section class="px-6 pb-12"><h3 class="text-[10px] font-bold uppercase tracking-widest text-muted mb-4">Venue Amenities</h3><div class="grid grid-cols-2 gap-4"><div class="flex items-center gap-3 text-sm"><i class="fa-solid fa-car text-muted"></i><span>Free Parking</span></div><div class="flex items-center gap-3 text-sm"><i class="fa-solid fa-wifi text-muted"></i><span>Guest WiFi</span></div></div></section></div>
|
|
<div id="content-reviews" class="tab-content hidden p-6" id="reviews"><h3 class="text-lg font-bold mb-4">Reviews</h3>@forelse ($business?->reviews ?? [] as $review)<article class="border-b border-line py-4"><p class="text-sm font-bold">{{ $review->authorName }} <span class="text-amber-500">{{ str_repeat('★', $review->rating) }}</span></p><p class="mt-2 text-sm text-muted">{{ $review->text ?: 'Rating only' }}</p></article>@empty<p class="text-sm text-muted">Reviews will appear after the shop connects Google.</p>@endforelse</div>
|
|
</main>
|
|
<nav class="fixed bottom-0 left-0 right-0 z-50 bg-white border-t border-line py-4 px-10 flex justify-between items-center"><a href="{{ route('public.home') }}" class="flex flex-col items-center gap-1 text-ink"><i class="fa-solid fa-house text-xl"></i><span class="text-[10px] font-bold uppercase tracking-widest">Home</span></a><a href="{{ auth()->check() ? route('customer.appointments') : route('auth.signin') }}" class="flex flex-col items-center gap-1 text-muted hover: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="{{ auth()->check() ? route('customer.dashboard') : route('auth.signin') }}" class="flex flex-col items-center gap-1 text-muted hover:text-ink"><i class="fa-solid fa-user text-xl"></i><span class="text-[10px] font-bold uppercase tracking-widest">{{ auth()->check() ? 'Account' : 'Sign in' }}</span></a></nav>
|
|
</div>
|
|
<script>function switchTab(tabId){document.querySelectorAll('.tab-content').forEach(c=>{c.classList.add('hidden');c.classList.remove('block')});const content=document.getElementById('content-'+tabId);if(content){content.classList.remove('hidden');content.classList.add('block')}document.querySelectorAll('.tab-btn').forEach(b=>{b.classList.remove('border-ink');b.classList.add('border-transparent','text-muted')});const tab=document.getElementById('tab-'+tabId);if(tab){tab.classList.add('border-ink');tab.classList.remove('border-transparent','text-muted')}}</script>
|
|
</x-layouts.public>
|