{% extends "basic/base_template.html" %}

{% block pageName %}
 Edit Service Information
{% endblock pageName %} {% block content %}
<!--begin::Form Validation-->
<div class="card card-info card-outline mb-4">
  <!--begin::Header-->
  <!--end::Header-->
  <!--begin::Form-->
  <form
    action="{% url 'update_member_service_info' member.id %}"
    method="post"
    class="needs-validation"
    novalidate
  >
    {% csrf_token %}
    <!--begin::Body-->
    <div class="card-body">
      <!--begin::Row-->
      <div class="row g-3">
        <!--begin::Col-->
        <div class="col-md-6">
          <label for="trade" class="form-label fw-bold">Trade</label>
          <select class="form-select" id="trade" name="trade">
              <option selected disabled value="">Choose...</option>
              {% for trade in trades %}
              <option {% if trade.id == service.trade.id %} selected {% endif %} value="{{ trade.id }}">{{ trade.name }}</option>
              {% endfor %}
          </select>
          <div class="invalid-feedback">Please select a Trade.</div>
        </div>
        <!--begin::Col-->
        <!--begin::Col-->
        <div class="col-md-6">
          <label for="core" class="form-label fw-bold">Corps/Regt</label>
          <select class="form-select" id="core" name="core">
              <option selected disabled value="">Choose...</option>
              {% for core in cores %}
              <option {% if core.id == service.core.id %} selected {% endif %} value="{{ core.id }}">{{ core.name }}</option>
              {% endfor %}
          </select>
          <div class="invalid-feedback">Please select a Corps/Regt.</div>
        </div>
        <!--begin::Col-->
        <!--begin::Col-->
        <div class="col-md-6">
          <label for="batch" class="form-label fw-bold">Batch</label>
          <select class="form-select" id="batch" name="batch">
              <option selected disabled value="">Choose...</option>
              {% for batch in batchs %}
              <option {% if batch.id == service.batch.id %} selected {% endif %} value="{{ batch.id }}">{{ batch.text }}</option>
              {% endfor %}
          </select>
          <div class="invalid-feedback">Please select a Batch.</div>
        </div>
        <!--begin::Col-->
        <!--begin::Col-->
        <div class="col-md-6">
          <label for="med_cat" class="form-label fw-bold">Med Cat</label>
          <select class="form-select" id="med_cat" name="med_cat">
            <option selected disabled value="">Choose...</option>
            {% for key, value in med_cats %}
            <option value="{{ key}}" {% if service.med_cat == key %} selected {% endif %}>{{ value }}</option>
            {% endfor %}
          </select>
          <div class="invalid-feedback">Please select a Med Cat.</div>
        </div>
        <!--end::Col-->
        <!--begin::Col-->
        <div class="col-md-6">
          <label for="un_msn" class="form-label fw-bold">UN msn</label>
          <select class="form-select" id="un_msn" name="un_msn">
            <option selected disabled value="">Choose...</option>
            {% for key, value in un_msns %}
            <option value="{{ key}}" {% if service.un_msn == key %} selected {% endif %}>{{ value }}</option>
            {% endfor %}
          </select>
          <div class="invalid-feedback">Please select a UN msn.</div>
        </div>
        <!--end::Col-->
        <!--begin::Col-->
        <div class="col">
          <label for="retirement" class="form-label"
            >Dt of Retirement</label
          >
          <div class="input-group has-validation">
            <input
              type="date"
              class="form-control"
              id="retirement"
              name= "retirement"
              value="{{ service.retirement|date:'Y-m-d' }}"
              aria-describedby="inputGroupPrepend"
            />
            <div class="invalid-feedback">Please provide a valid Dt of Retirement.</div>
          </div>
        </div>
        <!--end::Col-->
        <!--begin::Col-->
        <div class="col">
          <label for="doe" class="form-label"
            >DOE</label
          >
          <div class="input-group has-validation">
            <input
              type="date"
              class="form-control"
              id="doe"
              name= "doe"
              value="{{ service.doe|date:'Y-m-d' }}"
              aria-describedby="inputGroupPrepend"
            />
            <div class="invalid-feedback">Please provide a valid DOE.</div>
          </div>
        </div>
        <!--end::Col-->
      </div>
      <!--end::Row-->
    </div>
    <!--end::Body-->
    <!--begin::Footer-->
    <div class="card-footer">
      <button class="btn btn-primary" type="submit">Submit form</button>
    </div>
    <!--end::Footer-->
  </form>
  <!--end::Form-->
  <!--begin::JavaScript-->
  <script>
    // Example starter JavaScript for disabling form submissions if there are invalid fields
    (() => {
      "use strict";

      // Fetch all the forms we want to apply custom Bootstrap validation styles to
      const forms = document.querySelectorAll(".needs-validation");

      // Loop over them and prevent submission
      Array.from(forms).forEach((form) => {
        form.addEventListener(
          "submit",
          (event) => {
            if (!form.checkValidity()) {
              event.preventDefault();
              event.stopPropagation();
            }

            form.classList.add("was-validated");
          },
          false
        );
      });
    })();
  </script>
  <!--end::JavaScript-->
</div>
<!--end::Form Validation-->
{% endblock content %}