@extends('layouts.app')
@section('content')
<div class="max-w-[560px] mx-auto px-4 py-10">
<p class="pulso-label">Book</p><h1 class="text-3xl font-display mt-1">Appointment</h1>
<form method="POST" action="{{ route('portal.appointments.store') }}" class="mt-6 bg-white border border-stone-200 p-6 space-y-4">@csrf
<select name="doctor_id" required class="w-full border border-stone-200 px-3 py-3 text-sm focus:border-ink-900 focus:outline-none"><option value="">Select Doctor</option>@foreach($doctors as $d)<option value="{{ $d->id }}">{{ $d->full_name }}</option>@endforeach</select>
<select name="service_id" class="w-full border border-stone-200 px-3 py-3 text-sm focus:border-ink-900 focus:outline-none"><option value="">Service (optional)</option>@foreach($services as $s)<option value="{{ $s->id }}">{{ $s->name }}</option>@endforeach</select>
<input type="date" name="appointment_date" required class="w-full border border-stone-200 px-3 py-3 text-sm focus:border-ink-900 focus:outline-none">
<input type="time" name="start_time" required class="w-full border border-stone-200 px-3 py-3 text-sm focus:border-ink-900 focus:outline-none">
<textarea name="reason" placeholder="Reason for visit" rows="3" class="w-full border border-stone-200 px-3 py-3 text-sm focus:border-ink-900 focus:outline-none"></textarea>
<button class="w-full bg-ink-900 text-white py-3 text-[12px] tracking-[0.14em] uppercase hover:bg-black">Confirm booking</button>
</form>
</div>
@endsection