107 lines
3.4 KiB
Cheetah
107 lines
3.4 KiB
Cheetah
{{define "booking.tmpl"}}
|
|
<!doctype html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Book a Service - Decor By Hannahs</title>
|
|
<link rel="stylesheet" href="/static/css/styles.css">
|
|
<script>
|
|
(function() {
|
|
const savedTheme = localStorage.getItem('theme') || 'light';
|
|
document.documentElement.setAttribute('data-theme', savedTheme);
|
|
})();
|
|
</script>
|
|
<script src="/static/js/alpine.js" defer></script>
|
|
<script src="/static/htmx/htmx.min.js" defer></script>
|
|
<script src="/static/js/drawer.js" defer></script>
|
|
</head>
|
|
|
|
<body>
|
|
{{template "header" .}}
|
|
|
|
<main>
|
|
<div style="max-width: 600px; margin: 0 auto;">
|
|
<div style="margin-bottom: 2rem; position: relative;">
|
|
<img src="/assets/party-icons/birthday-cake.png" alt="Birthday cake" style="position: absolute; top: -20px; right: -40px; width: 90px; height: 90px; opacity: 0.85;">
|
|
<h1 style="font-size: 2.5rem; font-weight: 700; margin-bottom: 0.5rem;">Book a Service</h1>
|
|
<p style="color: hsl(var(--muted-foreground)); font-size: 1.125rem;">Fill out the form below to request a booking</p>
|
|
</div>
|
|
|
|
<div class="card">
|
|
<form id="bookingForm">
|
|
<div class="form-group">
|
|
<label class="form-label" for="service_id">Service ID</label>
|
|
<input class="form-input" type="text" id="service_id" name="service_id" placeholder="Enter service ID" required>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label class="form-label" for="event_date">Event Date & Time</label>
|
|
<input class="form-input" type="datetime-local" id="event_date" name="event_date" required>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label class="form-label" for="address">Address</label>
|
|
<input class="form-input" type="text" id="address" name="address" placeholder="Event location">
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label class="form-label" for="notes">Additional Notes</label>
|
|
<textarea class="form-textarea" id="notes" name="notes" placeholder="Any special requests or details..."></textarea>
|
|
</div>
|
|
|
|
<div style="display: flex; gap: 0.5rem; margin-top: 1.5rem;">
|
|
<button type="submit" class="btn btn-primary" style="flex: 1;">Request Booking</button>
|
|
<a href="/catalog" class="btn btn-outline">Back to Catalog</a>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
|
|
{{template "footer"}}
|
|
{{template "theme-script"}}
|
|
<script>
|
|
document.getElementById('bookingForm').addEventListener('submit', async function(e){
|
|
e.preventDefault();
|
|
const f = e.target;
|
|
const submitBtn = f.querySelector('button[type="submit"]');
|
|
const originalText = submitBtn.textContent;
|
|
|
|
submitBtn.disabled = true;
|
|
submitBtn.textContent = 'Submitting...';
|
|
|
|
const body = {
|
|
user_id: "",
|
|
service_id: f.service_id.value,
|
|
event_date: new Date(f.event_date.value).toISOString(),
|
|
address: f.address.value,
|
|
notes: f.notes.value
|
|
};
|
|
|
|
try {
|
|
const res = await fetch('/api/bookings', {
|
|
method: 'POST',
|
|
headers: {'Content-Type':'application/json'},
|
|
body: JSON.stringify(body)
|
|
});
|
|
|
|
if (res.ok) {
|
|
alert('Booking requested successfully! We will contact you soon.');
|
|
f.reset();
|
|
} else {
|
|
const error = await res.text();
|
|
alert('Error creating booking: ' + error);
|
|
}
|
|
} catch (err) {
|
|
alert('Network error. Please try again.');
|
|
} finally {
|
|
submitBtn.disabled = false;
|
|
submitBtn.textContent = originalText;
|
|
}
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|
|
{{end}}
|