Appointment Details

Scheduled Date & Time

{(() => { const date = new SvelteDate(selectedBooking.start_time); const dateStr = date.toLocaleDateString('en-US', { weekday: 'long', day: 'numeric', month: 'short' }); const timeStr = date.toLocaleTimeString('en-US', { hour: 'numeric', minute: '2-digit', hour12: true }); return `${dateStr} at ${timeStr}`; })()}

Duration

{totalDuration} minutes

{#if selectedBooking.notes}

Notes

{selectedBooking.notes}

{/if}

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

Services

{#each selectedBooking.services as service, index (index)}

{service.service_name || '—'}

{#if service.service_description}

{service.service_description}

{/if}

{service.duration_minutes} min £{service.price?.toFixed(2) || '0.00'}

{/each}

{/if}

Financial Summary

{#if ['confirmed', 'in_progress', 'completed'].includes(selectedBooking.status) && selectedBooking.deposit_required}

Deposit Required

£{selectedBooking.deposit_amount?.toFixed(2) || '0.00'}

{selectedBooking.deposit_paid ? 'Paid' : 'Outstanding'} {#if !selectedBooking.deposit_paid && selectedBooking.deposit_deadline} • Due: {new SvelteDate(selectedBooking.deposit_deadline).toLocaleDateString('en-GB', { weekday: 'short', day: 'numeric', month: 'short', year: 'numeric' })} at {new SvelteDate(selectedBooking.deposit_deadline).toLocaleTimeString('en-GB', { hour: 'numeric', minute: '2-digit', hour12: true })} {/if}

{/if}

Total Amount £{selectedBooking.total_amount.toFixed(2)}

Amount Paid £{selectedBooking.amount_paid.toFixed(2)}

{isFutureBooking ? 'Estimated Subtotal' : 'Amount Due'} £{selectedBooking.amount_due.toFixed(2)}

{#if selectedBooking.payments && selectedBooking.payments.length > 0}

Payment History

{#each selectedBooking.payments as payment (payment.id)}

{payment.payment_method.replace('_', ' ')} {payment.status}

{payment.payment_type.charAt(0).toUpperCase() + payment.payment_type.slice(1)}

{#if payment.is_vat_applicable}

Net: £{payment.net_amount?.toFixed(2) || '0.00'}

{#if payment.vat_amount}

VAT ({(payment.vat_rate || 0) * 100}%): £{payment.vat_amount.toFixed( 2 )}

{/if}

{new SvelteDate(payment.created_at).toLocaleString()}

£{payment.amount.toFixed(2)}

{/each}

{/if} {#if showRescheduleForm}

Request Reschedule

{#if loadingRescheduleHours}

Loading available dates...

{:else}

{ rescheduleDate = d; rescheduleTime = ''; }} onPlaceholderChange={(p) => { reschedulePlaceholder = p; if (!rescheduleWorkingHours) fetchRescheduleHours(p); }} />

{/if} {#if rescheduleDate} {#if loadingRescheduleHours}

Loading times...

{:else}

{rescheduleDate.toDate(getLocalTimeZone()).toLocaleDateString('en-GB', { weekday: 'long', day: 'numeric', month: 'short' })}

{#if rescheduleWorkingHours && !rescheduleWorkingHours[rescheduleDate.toString()]?.isOpen}

We're closed on this day

{:else} {@const grouped = generateGroupedTimeSlots(totalDuration, rescheduleDate)} {#if grouped.length > 0}

{#each grouped as slot (slot.startTime + slot.endTime)} {#if slot.type === 'available'} {:else} {/if} {/each}

{:else}

No available slots

{/if} {/if}

Reason (optional)

{/if}