{% extends "base.html" %}

{% block main %}
<main class="container mt-5">
  <div class="row justify-content-center my-5" style="width: 100%;">
    <div class="col-md-6 mx-auto">

<!-- Flash messages for feedback -->
{% with messages = get_flashed_messages(with_categories=true) %} 
{% if messages %}
<div class="alert alert-dismissible fade show" role="alert">
  {% for category, message in messages %}
  <div class="alert alert-{{ category }} alert-dismissible fade show" role="alert">
    {{ message }}
    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
  </div>
  {% endfor %}
</div>
{% endif %} 
{% endwith %}
    <h2>Get in Touch with Us</h2>
    
    <form method="POST" action="{{ url_for('contact_form') }}" enctype="multipart/form-data">
      <div class="mb-3">
        <label for="name" class="form-label">Name:</label>
        <input
          type="text"
          class="form-control"
          id="name"
          name="name"
          placeholder="Enter your full name"
          required
        />
      </div>
  
      <div class="mb-3">
        <label for="email" class="form-label">Email:</label>
        <input
          type="email"
          class="form-control"
          id="email"
          name="email"
          placeholder="Enter your email address"
          required
        />
      </div>
  
      <div class="mb-3">
        <label for="phone" class="form-label">Phone Number:</label>
        <input
          type="tel"
          class="form-control"
          id="phone"
          name="phone"
          placeholder="Enter your phone number"
        />
      </div>
  
      <div class="mb-3">
        <label for="category" class="form-label">Category:</label>
        <select id="category" name="category" class="form-select">
          <option value="general">General Inquiry</option>
          <option value="service">Service Request</option>
          <option value="feedback">Feedback</option>
          <option value="support">Technical Support</option>
        </select>
      </div>
  
      <div class="mb-3">
        <label for="appointment" class="form-label">Preferred Appointment Date and Time:</label>
        <input type="datetime-local" class="form-control" id="appointment" name="appointment" />
      </div>
  
      <div class="mb-3">
        <label for="file" class="form-label">Upload a File (if applicable):</label>
        <input type="file" class="form-control" id="file" name="file" />
      </div>
  
      <div class="mb-3">
        <label for="message" class="form-label">Message:</label>
        <textarea
          id="message"
          class="form-control"
          name="message"
          rows="4"
          placeholder="Write your message here"
          required
        ></textarea>
      </div>
  
      <div class="mb-3">
        <input type="submit" class="btn btn-primary" value="Submit" />
      </div>
    </form>

  </div>
</div>
</div>
</main>
{% endblock main %}

