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

{% block pageName %}
Update Basic 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_basic_info' member.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="blood" class="form-label fw-bold">Blood Gp</label>
            <select class="form-select" id="blood" name="blood">
              <option selected disabled value="">Choose...</option>
              {% for key, value in blood_groups %}
              <option value="{{ key}}" {% if basic_info.blood == key %} selected {% endif %}>{{ value }}</option>
              {% endfor %}
            </select>
            <div class="invalid-feedback">Please select a Blood Gp.</div>
        </div>
        <!--end::Col-->
        <!--begin::Col-->
        <div class="col-md-6">
          <label for="mobile_no" class="form-label fw-bold">Mob No.</label>
          <input
            type="text"
            class="form-control"
            id="mobile_no"
            name="mobile_no"
            minlength="8"
            title="mobile_no must be at least 8 characters, include an uppercase letter, a lowercase letter, a number, and a special character."
            value="{{member.mobile_no}}"
            required
          />
          <div class="invalid-feedback">Please provide a valid Mob No.</div>
        </div>
        <!--end::Col-->
        <!--begin::Col-->
        <div class="col-md-6">
          <label for="email" class="form-label fw-bold">E-mail</label>
          <input
            type="email"
            class="form-control"
            id="email"
            name="email"
            value="{{basic_info.email|default_if_none:''}}"
          />
          <div class="invalid-feedback">Please provide a valid email.</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="{{basic_info.nid}}"
            />
          <div class="invalid-feedback">Please provide a valid nid.</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="{{basic_info.birth}}"
          />
          <div class="invalid-feedback">Please provide a valid birth.</div>
        </div>
        <!--end::Col-->
        <!--begin::Col-->
        <div class="col-md-6">
          <label for="passport" class="form-label fw-bold">Passport No</label>
          <input
            type="text"
            class="form-control"
            id="passport"
            name="passport"
            value="{{basic_info.passport}}"
          />
          <div class="invalid-feedback">Please provide a valid passport.</div>
        </div>
        <!--end::Col-->
        <!--begin::Col-->
        <div class="col-md-6">
          <label for="bank" class="form-label fw-bold">Bank Acct No</label>
          <input
            type="text"
            class="form-control"
            id="bank"
            name="bank"
            value="{{basic_info.bank}}"
          />
          <div class="invalid-feedback">Please provide a valid Bank Acct No.</div>
        </div>
        <!--end::Col-->
        <!--begin::Col-->
        <div class="col-md-6">
          <label for="father_name" class="form-label fw-bold">Father Name</label>
          <input
            type="text"
            class="form-control"
            id="father_name"
            name="father_name"
            value="{{basic_info.father_name}}"
          />
          <div class="invalid-feedback">Please provide a valid Father Name.</div>
        </div>
        <!--end::Col-->
        <!--begin::Col-->
        <div class="col-md-6">
          <label for="mother_name" class="form-label fw-bold">Mother Name</label>
          <input
            type="text"
            class="form-control"
            id="mother_name"
            name="mother_name"
            value="{{basic_info.mother_name}}"
          />
          <div class="invalid-feedback">Please provide a valid Mother Name.</div>
        </div>
        <!--end::Col-->
        <!--begin::Col-->
        <div class="col-md-6">
          <label for="religion" class="form-label fw-bold">Religion</label>
          <input
            type="text"
            class="form-control"
            id="religion"
            name="religion"
            value="{{basic_info.religion}}"
          />
          <div class="invalid-feedback">Please provide a valid religion.</div>
        </div>
        <!--end::Col-->
        <!--begin::Col-->
        <div class="col-md-6">
          <label for="height" class="form-label fw-bold">Height</label>
          <input
            type="text"
            class="form-control"
            id="height"
            name="height"
            value="{{basic_info.height}}"
            placeholder="5'8''"
          />
          <div class="invalid-feedback">Please provide a valid height.</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"
                aria-describedby="inputGpPrepend"
                value="{{basic_info.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="gender" class="form-label fw-bold">Gender</label>
          <select class="form-select" id="gender" name="gender">
            <option selected disabled value="">Choose...</option>
            {% for key, value in genders %}
            <option value="{{ key}}" {% if basic_info.gender == key %} selected {% endif %}>{{ 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="marital_status" class="form-label fw-bold">Marital Status</label>
          <select class="form-select" id="marital_status" name="marital_status">
            <option selected disabled value="">Choose...</option>
            {% for key, value in marital_statuses %}
            <option value="{{ key}}" {% if basic_info.marital_status == key %} selected {% endif %}>{{ value }}</option>
            {% endfor %}
          </select>
          <div class="invalid-feedback">Please select a marital status.</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-->
        <h4 class="fw-bold border-1 border-dark border-bottom pb-2">Address</h4>
        <!--begin::Col-->
        <div class="col-md-6">
          <label for="district" class="form-label fw-bold">District</label>
          <select
            class="form-select"
            id="district"
            name="district"
          >
            <option selected disabled value="">Choose...</option>
            {% for items in districts %}
            <option value="{{ items.id }}">{{ items.name }}</option>
            {% endfor %}
          </select>
          <div class="invalid-feedback">Please select a District.</div>
        </div>
        <!--end::Col-->
        <!--begin::Col-->
        <div class="col-md-6">
          <label for="upazila" class="form-label fw-bold">Upazila</label>
          <select class="form-select" id="upazila" name="upazila">
            <option selected disabled value="">Choose...</option>
            <option>...</option>
          </select>
          <div class="invalid-feedback">Please select a Upazila.</div>
        </div>
        <!--begin::Col-->
        <h4 class="fw-bold border-1 border-dark border-bottom pb-2">Emg Contact</h4>
        <!--begin::Col-->
        <div class="col-md-6">
          <label for="em_name" class="form-label fw-bold">Name</label>
          <input
            type="text"
            class="form-control"
            id="em_name"
            name="em_name"
            value="{{basic_info.em_name}}"
          />
          <div class="invalid-feedback">Please provide a valid emergency name.</div>
        </div>
        <!--end::Col-->
        <!--begin::Col-->
        <div class="col-md-6">
          <label for="em_mobile_no" class="form-label fw-bold">Mob No</label>
          <input
            type="text"
            class="form-control"
            id="em_mobile_no"
            name="em_mobile_no"
            value="{{basic_info.em_mobile_no}}"
          />
          <div class="invalid-feedback">Please provide a valid emergency mobile no.</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>
  $(document).ready(function () {
    function loadSubordinates(parentId, level, targetSelect) {
      $(targetSelect).html('<option value="">Loading...</option>');
      $.ajax({
        url: "{% url 'get_subordinates' %}",
        data: { parent_id: parentId, level: level },
        success: function (data) {
          $(targetSelect).html('<option value="">Select Upazila</option>');
          $.each(data, function (index, item) {
            let option = $('<option></option>')
              .attr('value', item.id)
              .text(item.name); // ✅ Safe text insertion
            $(targetSelect).append(option);
          });
        },
      });
    }
    $("#district").change(function () {
      let district = $(this).val();
      $("#upazila").html('<option value="">Select</option>');
      if (district) {
        loadSubordinates(district, "upazila", "#upazila");
      }
    });
  });
</script>
  <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 %}