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}

Services

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

{service.service_name || '—'}

{#if service.service_description}

{service.service_description}

{/if}

{service.override_duration_minutes ?? service.duration_minutes} min £{(service.override_price ?? service.price ?? 0).toFixed(2)}

{/each}

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}

Subtotal (Services) £{selectedBooking.total_amount.toFixed(2)}

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

{#each selectedBooking.discounts as d}

{#if d.discount_source === 'loyalty'} Loyalty Stamp Card (10% Off) {:else if d.campaign_name} {d.campaign_name} ({d.discount_percent}% Off) {:else} Promo Campaign ({d.discount_percent}% Off) {/if} -£{d.discount_amount.toFixed(2)}

{/each}

Net Total £{(selectedBooking.total_amount - selectedBooking.discounts.reduce((sum, d) => sum + d.discount_amount, 0)).toFixed(2)}

{/if}

Amount Paid (Card/Cash) £{(selectedBooking.payments ?? []).filter(p => p.payment_method !== 'discount' && p.status === 'completed').reduce((sum, p) => sum + p.amount, 0).toFixed(2)}

{#if Math.max(0, selectedBooking.total_amount - (selectedBooking.discounts ?? []).reduce((sum, d) => sum + d.discount_amount, 0) - (selectedBooking.payments ?? []).filter(p => p.payment_method !== 'discount' && p.status === 'completed').reduce((sum, p) => sum + p.amount, 0)) > 0.01}

{isFutureBooking ? 'Estimated Subtotal' : 'Amount Due'} £{Math.max(0, selectedBooking.total_amount - (selectedBooking.discounts ?? []).reduce((sum, d) => sum + d.discount_amount, 0) - (selectedBooking.payments ?? []).filter(p => p.payment_method !== 'discount' && p.status === 'completed').reduce((sum, p) => sum + p.amount, 0)).toFixed(2)}

{/if}

Payment History

{#each selectedBooking.payments as payment, index (index)}

{getPaymentName(payment, index, selectedBooking.payments, selectedBooking.discounts)} {payment.status}

{#if payment.payment_method === 'discount'} Applied automatically on completion {:else} {payment.payment_type.charAt(0).toUpperCase() + payment.payment_type.slice(1)} payment {#if payment.card_last4} , Card ending in {payment.card_last4} {/if} {/if}

{#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.payment_method === 'discount' ? '-' : ''}£{payment.amount.toFixed(2)}

{/each}