{% 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 %}
<header>
  <div class="jumbotron jumbotron-fluid">
    <div class="container">
      <h1 class="display-4">Appointments ({{ apt_id }})</h1>
      <p class="lead">Modifying details about appointment {{ apt_id }}. Hit the "Submit" button when finished.</p>
    </div>
  </div>
  <hr class="my-4">
</header>

<body>
  <form class="form needs-validation" method="post" novalidate>
    <div class="row">
      <div class="col">
        <div class="btn-group" role="group" aria-label="Basic example">
          <button type="submit" class="btn btn-warning">
            <i class="fa fa-pen"></i>&nbsp;&nbsp;Submit
          </button>
        </div>
      </div>
    </div>
    <div class="card card-input">
      <h5 class="card-header">Appointment information</h5>
      <div class="card-body">
        <div class="col">
          <input type="hidden" class="form-group" name="inputId" value="{{ ppt_id }}" readonly>
          <input type="hidden" class="form-group" name="inputAptId" value="{{ apt_id }}" readonly>
          <label for="inputStudy" class="form-label">
            Study&nbsp;&nbsp;<i class="fa  fa-flask"></i>
          </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 {% if data["study"]==v %}selected{% endif %} value="{{ k }}">{{ v }}</option>
            value="{{ k }}">{{ v }}
            {% endfor %}
          </select>
          <label for="inputStatus" class="form-label">
            Appointment status&nbsp;&nbsp;<i class="fa  fa-check"></i>
          </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 {% if data["status"]==v %}selected{% endif %} value="{{ k }}">{{ v }}</option>
            {% endfor %}
          </select>
        </div>
        <div class="form-group">
          <label class="form-label" for="inputDate">
            Appointment date&nbsp;&nbsp;<i class="fa  fa-calendar"></i>
          </label>
          <input type="datetime-local" name="inputDate" placeholder="{{ data['date'] }}" value="{{ data['date'] }}"
            required>
        </div>
        <label for="inputTaxiAddress" class="form-label">
          Taxi address&nbsp;&nbsp;<i class="fa fa-car"></i>
        </label>
        <input type="text" class="form-control" name="inputTaxiAddress" rows="1"
          placeholder="{{ data['taxi_address'] }}" value="{{ data['taxi_address'] }}">
        <div class="form-check form-check-inline">
          <input class="form-check-input" type="checkbox" name="inputTaxiIsbooked" id="inputTaxiIsbooked" {% if
            data['taxi_isbooked']=='1' %}checked{% endif %}>
          <label class="form-check-label" for="inputTaxiIsbooked">Taxi booked</label>
        </div>
        <div class="form-group">
          <label for="inputComments" class="form-label">
            Comments&nbsp;&nbsp;<i class="fa  fa-comment"></i>
          </label>
          <textarea class="form-control" name="inputComments" rows="3" placeholder="{{ data['comments'] }}"
            value="{{ data['comments'] }}"></textarea>
        </div>
      </div>
    </div>
  </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 %}