the rest

2025-10-28 12:36:37 +11:00
parent 186d6768fb
commit dad3ec655f
31 changed files with 2256 additions and 0 deletions
--- a/internal/tmpl/booking.tmpl
+++ b/internal/tmpl/booking.tmpl
@@ -0,0 +1,106 @@
+{{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}}