{{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}}
