feat: complete day 17

day17/views/booking-form.ejs

@@ -1,56 +1,97 @@
 <%- include('partials/header') %>
-<div style="padding: 32px; max-width: 700px; margin: 0 auto">
-  <h3>Pick a date and time</h3>
-  <p><b>Duration:</b> 1 hour</p>
-  <p>Your timezone: <%= selectedTimezone %></p>
-  <form action="/book" method="POST" style="margin-top: 32px">
-    <h4>Additional Information</h4>
-    <label>*Full Name</label>
-    <input
-      type="text"
-      name="fullName"
-      required
-      style="width: 100%; margin-bottom: 12px"
-    />
-    <label>*Email</label>
-    <input
-      type="email"
-      name="email"
-      required
-      style="width: 100%; margin-bottom: 12px"
-    />
-    <label>*Company</label>
-    <input
-      type="text"
-      name="company"
-      required
-      style="width: 100%; margin-bottom: 12px"
-    />
-    <label>*Phone</label>
-    <input
-      type="tel"
-      name="phone"
-      required
-      style="width: 100%; margin-bottom: 12px"
-    />
-    <label>*Your Notes</label>
-    <textarea
-      name="notes"
-      required
-      style="width: 100%; margin-bottom: 16px"
-    ></textarea>
-    <button
-      type="submit"
-      style="
-        background: #063970;
-        color: #fff;
-        padding: 8px 24px;
-        border: none;
-        border-radius: 4px;
-      "
-    >
-      Done
-    </button>
-  </form>
+<div class="calendar-container">
+  <div class="calendar-header">Calendar</div>
+  <div class="calendar-content">
+    <div class="calendar-labels">
+      <div class="calendar-label-main">Pick a date and time</div>
+      <div class="calendar-label-duration">Duration: <span>1 hour</span></div>
+      <div class="calendar-label-timezone">
+        Your timezone: <%= selectedTimezone %>
+      </div>
+      <% if (selectedDate && selectedTime) { %>
+      <div class="calendar-label-selected">
+        <strong>Selected:</strong> <%= selectedDate %> at <%= selectedTime %>
+      </div>
+      <% } %>
+    </div>
+    <form class="booking-form" id="bookingForm">
+      <input type="hidden" name="date" value="<%= selectedDate %>" />
+      <input type="hidden" name="time" value="<%= selectedTime %>" />
+      <input type="hidden" name="tz" value="<%= selectedTimezone %>" />
+      <div class="form-group">
+        <label for="fullName">Full Name</label>
+        <input type="text" id="fullName" name="name" required />
+        <div class="form-error" id="error-name"></div>
+      </div>
+      <div class="form-group">
+        <label for="email">Email</label>
+        <input type="email" id="email" name="email" required />
+        <div class="form-error" id="error-email"></div>
+      </div>
+      <div class="form-group">
+        <label for="company">Company</label>
+        <input type="text" id="company" name="company" required />
+        <div class="form-error" id="error-company"></div>
+      </div>
+      <div class="form-group">
+        <label for="phone">Phone</label>
+        <input type="tel" id="phone" name="phone" required />
+        <div class="form-error" id="error-phone"></div>
+      </div>
+      <div class="form-group">
+        <label for="notes">Your Notes</label>
+        <textarea id="notes" name="notes" required></textarea>
+        <div class="form-error" id="error-notes"></div>
+      </div>
+      <button type="submit" class="form-submit-btn">Done</button>
+      <div class="form-error" id="error-date"></div>
+      <div class="form-error" id="error-time"></div>
+      <div class="form-error" id="error-timezone"></div>
+      <div class="form-error" id="error-general"></div>
+    </form>
+  </div>
 </div>
 <%- include('partials/footer') %>
+<script>
+  document.getElementById("bookingForm").onsubmit = async function (e) {
+    e.preventDefault();
+    // Clear previous errors
+    document
+      .querySelectorAll(".form-error")
+      .forEach((el) => (el.textContent = ""));
+    const form = e.target;
+    const data = {
+      name: form.fullName.value,
+      email: form.email.value,
+      company: form.company.value,
+      phone: form.phone.value,
+      notes: form.notes.value,
+      date: form.date.value,
+      time: form.time.value,
+      timezone: form.tz.value,
+    };
+    try {
+      const res = await fetch("/api/bookings", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify(data),
+      });
+      const result = await res.json();
+      if (result.success) {
+        window.location.href = "/success";
+      } else if (result.error) {
+        if (typeof result.error === "object") {
+          for (const key in result.error) {
+            const el = document.getElementById("error-" + key);
+            if (el) el.textContent = result.error[key];
+          }
+        } else {
+          document.getElementById("error-general").textContent = result.error;
+        }
+      }
+    } catch (err) {
+      document.getElementById("error-general").textContent =
+        "An error occurred. Please try again.";
+    }
+  };
+</script>