<!DOCTYPE html>
<html>
<head>
<title>PlumbAlert Booking</title>
</head>
<body>
<h2>Book a Plumber</h2>
<form id="bookingForm">
<label>Name</label><br>
<input type="text" id="name" required><br><br>
<label>Phone</label><br>
<input type="text" id="phone" required><br><br>
<button type="submit">Book Appointment</button>
</form>
<script>
document.getElementById("bookingForm").addEventListener("submit", async function(e){
e.preventDefault();
const name = document.getElementById("name").value;
const phone = document.getElementById("phone").value;
const response = await fetch("https://qigarodglxwsvjhzpphw.supabase.co/rest/v1/bookings", {
method: "POST",
headers: {
"Content-Type": "application/json",
"apikey": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6InFpZ2Fyb2RnbHh3c3ZqaHpwcGh3Iiwicm9sZSI6ImFub24iLCJpYXQiOjE3NzMwNDc1MjIsImV4cCI6MjA4ODYyMzUyMn0.mc55qjcRzC78o7C1iDNkvH-G3eyLb5GtRWJZPKxmbw4",
"Authorization": "Bearer YOUR_ANON_KEY"
},
body: JSON.stringify({
name: name,
phone: phone
})
});
if(response.ok){
alert("Booking submitted!");
} else {
alert("Error submitting booking");
}
});
</script>
</body>
</html>