{% extends "base.html" %}
{% block header %}
  <div class="jumbotron-fluid">
    <h1 class="display-4">Appointments</h1>
  </div>
  <br>
  <br>
  <br>
  <hr class="my-4">
{% endblock header %}
{% block content %}
  <body>
    <h3>
      <b>New appointment for participant <a href="{{ url_for('record_id', ppt_id = ppt_id) }}">{{ ppt_id }}</a></b>
    </h3>
    <form class=" form needs-validation" method="post" novalidate>
      <div class="card">
        <h5 class="card-header">Appointment information</h5>
        <div class="card-body">
          <div class="col">
            <label for="inputStudy" class="form-label">Study</label>
            <select class="form-select" name="inputStudy" required>
              <option disabled selected value>-- Select one --</option>
              {% for k, v in data_dict["appointment_study"].items() %}<option value="{{ k }}">{{ v }}</option>{% endfor %}
            </select>
            <div class="valid-feedback">Looks good!</div>
            <label for="inputStatus" class="form-label">Appointment status</label>
            <select class="form-select" name="inputStatus" required>
              <option disabled selected value>-- Select one --</option>
              {% for k, v in data_dict["appointment_status"].items() %}
                <option value="{{ k }}" {% if v=="Scheduled" %}selected{% endif %}>{{ v }}</option>
              {% endfor %}
            </select>
          </div>
          <div class="form-group">
            <label class="form-label" for="inputDate">Appointment date</label>
            <input type="datetime-local" name="inputDate" required>
          </div>
          <label for="inputTaxiAddress" class="form-label">Taxi address</label>
          <textarea class="form-control" name="inputTaxiAddress" rows="1"></textarea>
          <div class="form-check form-check-inline">
            <input class="form-check-input"
                   type="checkbox"
                   name="inputTaxiIsbooked"
                   id="inputTaxiIsbooked"
                   value="1">
            <label class="form-check-label" for="inputTaxiIsbooked">Is the taxi booked</label>
          </div>
          <label for="inputComments" class="form-label">Comments</label>
          <textarea class="form-control" name="inputComments" rows="3"></textarea>
        </div>
      </div>
      <button type="submit" class="btn btn-primary">Submit</button>
    </form>
    <script>
        // Example starter JavaScript for disabling form submissions if there are invalid fields
        (function () {
            'use strict';
            window.addEventListener('load', function () {
                // Fetch all the forms we want to apply custom Bootstrap validation styles to
                var forms = document.getElementsByClassName('needs-validation');
                // Loop over them and prevent submission
                var validation = Array.prototype.filter.call(forms, function (form) {
                    form.addEventListener('submit', function (event) {
                        if (form.checkValidity() === false) {
                            event.preventDefault();
                            event.stopPropagation();
                        }
                        form.classList.add('was-validated');
                    }, false);
                });
            }, false);
        })();
    </script>
  </body>
{% endblock content %}
