{#if loadingOverlaps}

Checking for overlapping bookings...

{:else if overlappingBookings.length > 0} {@const oldest = findOldestBooking()}

⚠️ Overlapping Bookings ({overlappingBookings.length})

{#if oldest?.isCurrent}

★ This booking was created first - it has priority

{/if}

{#each overlappingBookings as ob (ob.id)}

{#if oldest?.id === ob.id} ★ {/if} {ob.user?.full_name || 'Unknown'}

{new SvelteDate(ob.start_time).toLocaleDateString('en-GB', { weekday: 'short', day: 'numeric', month: 'short', hour: 'numeric', minute: '2-digit', hour12: true })} ({ob.duration_minutes} min)

{#if ob.services && ob.services.length > 0}

{ob.services.join(', ')}

{/if}

{ob.status}

{new SvelteDate(ob.created_at).toLocaleDateString('en-GB', { day: 'numeric', month: 'short', hour: 'numeric', minute: '2-digit', hour12: true })}

{/each}

{/if}

Customer Contact

Name

{booking.user?.full_name || '—'}

Phone

{booking.user?.phone || '—'}

{booking.user?.email || '—'}

Booking Date & Time

{getBookingDateTime()}

Booking Notes

<CharCounter text={notes} />
				{#if notes.trim() !== (booking.notes || '')}
					<div class="mt-1 text-xs text-emerald-600">
						✓ Notes will be saved (different from original)
					</div>
				{:else if booking.notes}
					<div class="mt-1 text-xs text-gray-500">Notes unchanged from original</div>
				{/if}
			</div>

<div>
				<h3 class="mb-3 text-sm font-semibold tracking-wide text-gray-600 uppercase">
					Services & Pricing
				</h3>
				<div class="space-y-3">
					{#each booking.services ?? [] as service, i (i)}
						{#if service && serviceOverrides[service.service_id]}
							<div class="rounded-lg border border-gray-200 bg-white p-4">
								<div class="font-medium">{service.service_name || 'Unknown Service'}</div>
								<div class="grid gap-3 md:grid-cols-2">
									<div>
										<label for="price-{service.service_id}" class="mb-1 block text-xs text-gray-600"
											>Price Override</label
										>
										<div class="relative">
											<div
												class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3"
											>
												<span class="text-gray-500">£</span>
											</div>
											
											<Input
												id="price-{service.service_id}"
												type="text"
												inputmode="decimal"
												value={serviceOverrides[service.service_id].price}
												oninput={(e) => handlePriceInput(service.service_id, e.target.value)}
												onblur={() => {
													// Format to 2 decimal places on blur if needed
													const val = serviceOverrides[service.service_id].price;
													if (val) {
														// If there's no decimal point, add .00
														if (!val.includes('.')) {
															const num = parseFloat(val);
															if (!isNaN(num)) {
																serviceOverrides[service.service_id].price = num.toFixed(2);
																serviceOverrides = serviceOverrides;
															}
														}
														// If there's a decimal point with less than 2 decimal places, pad with zeros
														else if (val.includes('.')) {
															const parts = val.split('.');
															if (parts[1].length === 0) {
																serviceOverrides[service.service_id].price = parts[0] + '.00';
																serviceOverrides = serviceOverrides;
															} else if (parts[1].length === 1) {
																serviceOverrides[service.service_id].price =
																	parts[0] + '.' + parts[1] + '0';
																serviceOverrides = serviceOverrides;
															}
														}
													}
												}}
												class="no-spin w-full pl-7"
												placeholder={service.price?.toFixed(2) || '0.00'}
											/>
										</div>
										<div class="mt-1 flex items-center justify-between">
											<div class="text-xs text-gray-500">
												Default: £{service.price?.toFixed(2) || '0.00'}
											</div>
											{#if hasPriceChanged(service.service_id)}
												<div class="text-xs font-medium text-emerald-600">✓ Changed</div>
											{/if}
										</div>
									</div>
									<div>
										<label
											for="duration-{service.service_id}"
											class="mb-1 block text-xs text-gray-600">Duration Override (min)</label
										>
										<div class="relative">
											<Input
												id="duration-{service.service_id}"
												type="number"
												min="1"
												step="1"
												value={serviceOverrides[service.service_id].duration}
												oninput={(e) => handleDurationInput(service.service_id, e.target.value)}
												class="no-spin w-full"
												placeholder={service.duration_minutes?.toString() || '60'}
											/>
										</div>
										<div class="mt-1 flex items-center justify-between">
											<div class="text-xs text-gray-500">
												Default: {service.duration_minutes || 60} min
											</div>
											{#if hasDurationChanged(service.service_id)}
												<div class="text-xs font-medium text-emerald-600">✓ Changed</div>
											{/if}
										</div>
									</div>
								</div>
							</div>
						{/if}
					{/each}
				</div>
			</div>
		</div>

<Modal.Footer class="flex items-center justify-between gap-2">
			<div class="flex items-center gap-4 text-sm text-gray-600">
				<span class="font-medium">Total: £{getTotalCost().toFixed(2)}</span>
				<span class="text-gray-400">|</span>
				<span>{getTotalDuration()} min</span>
			</div>
			<div class="flex items-center gap-2">
				<Button
					variant="destructive"
					onclick={() => (showDeclineConfirm = true)}
					disabled={submitting}
				>
					Decline Booking
				</Button>
				<Button
					onclick={handleApprove}
					disabled={submitting}
					class="bg-emerald-600 hover:bg-emerald-700"
				>
					{submitting ? 'Confirming...' : 'Confirm Booking'}
				</Button>
			</div>
		</Modal.Footer>
	</Modal.Content>
</Modal.Root>

<AlertDialog.Root bind:open={showDeclineConfirm}>
	<AlertDialog.Content class="z-60">
		<AlertDialog.Header>
			<AlertDialog.Title>Decline this booking?</AlertDialog.Title>
			<AlertDialog.Description>
				This will cancel the booking and notify the customer. This action cannot be undone.
			</AlertDialog.Description>
		</AlertDialog.Header>
		<AlertDialog.Footer>
			<AlertDialog.Cancel>Cancel</AlertDialog.Cancel>
			<AlertDialog.Action onclick={handleDecline} class="bg-red-600 hover:bg-red-700">
				Decline Booking
			</AlertDialog.Action>
		</AlertDialog.Footer>
	</AlertDialog.Content>
</AlertDialog.Root>

:global(input[type='number']::-webkit-outer-spin-button),
	:global(input[type='number']::-webkit-inner-spin-button) {
		-webkit-appearance: none;
		margin: 0;
	}
</style>