@extends('layouts.app') @section('title','Book an appointment') @section('content')<div class="booking-shell row g-0"><section class="col-lg-5 booking-hero"><div><span class="eyebrow text-light">YOUR TIME. YOUR STYLE.</span><h1>Leave feeling<br><em>extraordinary.</em></h1><p>Choose your service and stylist. We’ll take care of the rest.</p><a href="/login" class="staff-link">Staff sign in →</a></div></section><section class="col-lg-7 bg-white p-4 p-xl-5"><div class="mx-auto form-wrap"><div class="step">01 — YOUR VISIT</div><h2 class="mb-4">Reserve your chair</h2><form method="post" action="{{ route('booking.store') }}" class="row g-3">@csrf<div class="col-md-6"><label class="form-label">Your name</label><input name="name" value="{{ old('name') }}" class="form-control" required></div><div class="col-md-6"><label class="form-label">Mobile number</label><input name="mobile" value="{{ old('mobile') }}" class="form-control" required></div><div class="col-md-6"><label class="form-label">Service or package</label><select id="service" name="service_id" class="form-select" required><option value="">Select service</option>@foreach($services as $s)<option value="{{ $s->id }}">{{ $s->name }} · {{ $s->duration_minutes }} min · LKR {{ number_format($s->price) }}</option>@endforeach</select></div><div class="col-md-6"><label class="form-label">Stylist</label><select id="stylist" name="stylist_id" class="form-select" required><option value="">Select stylist</option>@foreach($stylists as $s)<option value="{{ $s->id }}">{{ $s->name }}</option>@endforeach</select></div><div class="col-md-6"><label class="form-label">Date</label><input id="date" class="form-control" type="date" min="{{ today()->format('Y-m-d') }}" required></div><div class="col-md-6"><label class="form-label">Available time</label><select id="time" class="form-select" disabled required><option>Choose service, stylist & date</option></select><input id="starts_at" type="hidden" name="starts_at"></div><div><label class="form-label">Notes (optional)</label><textarea name="notes" class="form-control" rows="2"></textarea></div><div class="d-flex flex-wrap gap-3 align-items-center"><button class="btn btn-brand btn-lg px-4">Confirm booking</button><label class="form-check"><input class="form-check-input" type="checkbox" name="pay_online" value="1"><span class="form-check-label">Pay securely online</span></label></div></form></div></section></div>@endsection @push('scripts')<script>const ids=['service','stylist','date'], time=document.querySelector('#time'), hidden=document.querySelector('#starts_at');async function slots(){let [s,st,d]=ids.map(x=>document.querySelector('#'+x).value);if(!s||!st||!d)return;time.disabled=true;time.innerHTML='<option>Loading…</option>';let r=await fetch(`/slots?service_id=${s}&stylist_id=${st}&date=${d}`),data=await r.json();time.innerHTML=data.length?'<option value="">Select time</option>'+data.map(x=>`<option value="${x.value}">${x.label}</option>`).join(''):'<option value="">No availability</option>';time.disabled=false}ids.forEach(x=>document.querySelector('#'+x).addEventListener('change',slots));time.addEventListener('change',()=>hidden.value=time.value);</script>@endpush