source: views/client/book-appointment.ejs

<%- include('../partials/header', { title: 'Book Appointment' }) %>

<h1>Book Viewing Appointment</h1>

<div class="list-item">
  <h2>Unit Details</h2>
  <p><strong>Unit:</strong> <%= unit.unit_number %> - <%= unit.building_name %></p>
  <p><strong>Floor:</strong> <%= unit.floor_number %></p>
  <p><strong>Rooms:</strong> <%= unit.room_number %> | <strong>Area:</strong> <%= unit.floor_area %> m²</p>
  <p><strong>Price:</strong> €<%= unit.price.toLocaleString() %></p>
</div>

<form action="/units/<%= unit.unit_id %>/book" method="POST">
  <h2>Your Information</h2>
  
  <div>
    <label for="client_name">Full Name:</label>
    <input type="text" id="client_name" name="client_name" required placeholder="Enter your name">
  </div>

  <div>
    <label for="client_email">Email:</label>
    <input type="email" id="client_email" name="client_email" required placeholder="Enter your email">
  </div>

  <div>
    <label for="client_phone">Phone Number:</label>
    <input type="tel" id="client_phone" name="client_phone" required placeholder="Enter your phone number">
  </div>

  <h2>Select Agent & Time</h2>
  
  <% if (agents && agents.length > 0) { %>
    <div>
      <label for="timeslot_id">Available Time Slots *</label>
      <select id="timeslot_id" name="timeslot_id" required>
        <option value="">-- Select a time slot --</option>
        <% agents.forEach(agent => { %>
          <optgroup label="<%= agent.name %> (<%= agent.email %>)">
            <% agent.timeslots.forEach(slot => { %>
              <option value="<%= slot.id %>">
                <%= new Date(slot.date).toLocaleDateString('en-GB') %> 
                at <%= slot.time_start. substring(0, 5) %> - <%= slot.time_end.substring(0, 5) %>
              </option>
            <% }); %>
          </optgroup>
        <% }); %>
      </select>
    </div>
  <% } else { %>
    <p>No available time slots at the moment.  Please check back later.</p>
  <% } %>

  <div>
    <% if (agents && agents.length > 0) { %>
      <button type="submit" class="book-btn">Confirm Appointment</button>
    <% } %>
    <a href="/units/<%= unit.unit_id %>">Cancel</a>
  </div>
</form>