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

{% block pageName %}
Update family Member 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_family_info' family.id %}"
    method="post"
    enctype="multipart/form-data"
    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="name" class="form-label fw-bold font-Oswald">Name</label>
          <div class="input-group has-validation">
            <input
              type="text"
              class="form-control"
              id="name"
              name="name"
              aria-describedby="inputGroupPrepend"
              value="{{family.name}}"
              required
            />
            <div class="invalid-feedback">Please provide a valid  Name.</div>
          </div>
        </div>
        <!--end::Col-->
        <!--begin::Col-->
        <div class="col-md-6">
            <label for="relationship" class="form-label fw-bold">Relation</label>
            <select class="form-select" id="relationship" name="relationship" required>
              <option selected disabled value="">Choose...</option>
              {% for key, value in relations %}
              <option {% if family.relationship == key %}selected{% endif %} value="{{ key}}">{{ value }}</option>
              {% endfor %}
            </select>
            <div class="invalid-feedback">Please select a Relation.</div>
        </div>
        <!--end::Col-->
        <!--begin::Col-->
        <div class="col-md-6">
          <label for="birth" class="form-label fw-bold">Birth Cert No</label>
          <input
            type="text"
            class="form-control"
            id="birth"
            name="birth"
            value="{{family.birth}}"
          />
          <div class="invalid-feedback">Please provide a valid birth.</div>
        </div>
        <!--end::Col-->
        <!--begin::Col-->
        <div class="col-md-6">
            <label for="date_of_birth" class="form-label fw-bold"
              >DOB</label
            >
            <div class="input-group has-validation">
              <input
                type="date"
                class="form-control"
                id="date_of_birth"
                name= "date_of_birth"
                value="{{family.date_of_birth|date:'Y-m-d'}}"
              />
              <div class="invalid-feedback">Please provide a valid DOB.</div>
            </div>
        </div>
        <!--end::Col-->
        <!--begin::Col-->
        <div class="col-md-6">
            <label for="nid" class="form-label fw-bold">NID No</label>
            <input
              type="text"
              class="form-control"
              id="nid"
              name="nid"
              value="{{family.nid}}"
              />
            <div class="invalid-feedback">Please provide a valid nid.</div>
        </div>
        <!--end::Col-->
        <!--begin::Col-->
        <div class="col-md-6">
            <label for="gender" class="form-label fw-bold">Gender</label>
            <select class="form-select" id="gender" name="gender" required>
              <option selected disabled value="">Choose...</option>
              {% for key, value in genders %}
              <option {% if family.gender == key %}selected{% endif %} value="{{ key}}">{{ value }}</option>
              {% endfor %}
            </select>
            <div class="invalid-feedback">Please select a Gender.</div>
        </div>
        <!--end::Col-->
        <!--begin::Col-->
        <div class="col-md-6">
          <label for="occupation" class="form-label fw-bold">Occupation</label>
          <input
            type="text"
            class="form-control"
            id="occupation"
            name="occupation"
            value="{{family.occupation}}"
          />
          <div class="invalid-feedback">Please provide a valid Occupation.</div>
        </div>
        <!--end::Col-->
        <!--begin::Col-->
        <div class="col-md-6">
            <label for="mobile_no" class="form-label fw-bold font-Oswald">Mob No</label>
            <div class="input-group has-validation">
              <input
                type="text"
                class="form-control"
                id="mobile_no"
                name="mobile_no"
                value="{{family.mobile_no}}"
                aria-describedby="inputGroupPrepend"
              />
              <div class="invalid-feedback">Please provide a valid Mob No.</div>
            </div>
        </div>
        <!--end::Col-->
        <!--begin::Col-->
        <div class="col-md-6">
            <label for="picture" style="font-family: Oswald" class="form-label fw-bold">Picture</label>
            <input type="file" class="form-control" id="picture" name="picture"/>
            <div class="invalid-feedback">Please provide a valid Picture.</div>
        </div>
        <!--end::Col-->
      </div>
      <!--end::Row-->
    </div>
    <!--end::Body-->
    <!--begin::Footer-->
    <div class="card-footer">
      <button class="btn btn-primary" type="submit">Update Family Member</button>
    </div>
    <!--end::Footer-->
  </form>
</div>
<!--end::Form-->

  <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-->
<!--end::Form Validation-->
{% endblock content %}