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

{% block pageName %}
 Add Member
{% 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 'create_member_company' %}"
    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="army_no" class="form-label fw-bold font-Oswald">BA No</label>
          <div class="input-group has-validation">
            <input
              type="text"
              class="form-control"
              id="army_no"
              name="army_no"
              aria-describedby="inputGroupPrepend"
              placeholder="Ex: BA-98333"
              required
            />
            <div class="invalid-feedback">Please provide a valid BA No.</div>
          </div>
        </div>
        <!--end::Col-->
        <!--begin::Col-->
        <div class="col-md-6">
          <label for="member_status" class="form-label fw-bold">Status</label>
          <select
            class="form-select"
            id="member_status"
            name="member_status"
            required
          >
            <option selected disabled value="">Choose...</option>
            {% for items in member_statuses %}
            <option value="{{ items.id }}">{{ items.name }}</option>
            {% endfor %}
          </select>
          <div class="invalid-feedback">Please select a Status.</div>
        </div>
        <!--end::Col-->
        <!--begin::Col-->
        <div class="col-md-6">
          <label for="rank" class="form-label fw-bold">Rk</label>
          <select class="form-select" id="rank" name="rank" required>
            <option selected disabled value="">Choose...</option>
            <option>...</option>
          </select>
          <div class="invalid-feedback">Please select a Rk.</div>
        </div>
        <!--begin::Col-->
        <div class="col-md-6">
          <label for="name" class="form-label fw-bold">Full Name</label>
          <input
            type="text"
            class="form-control"
            id="name"
            name="name"
            placeholder="Ex: Abdul Rehman Korim"
            required
          />
          <div class="invalid-feedback">Please provide a valid name.</div>
        </div>
        <!--end::Col-->
        <!--begin::Col-->
        <div class="col-md-6">
          <label for="shot_name" class="form-label fw-bold">Short Name</label>
          <input
            type="text"
            class="form-control"
            id="short_name"
            name="short_name"
            placeholder="Ex: Korim"
            required
          />
        </div>
        <!--end::Col-->
        <!--begin::Col-->
        <div class="col-md-6">
          <label for="apartment" class="form-label fw-bold">Appt</label>
          <select class="form-select" id="apartment" name="apartment" required>
            <option selected disabled value="">Choose...</option>
            {% for apartment in apartments %}
            <option value="{{ apartment.id }}">{{ apartment.name }}</option>
            {% endfor %}
          </select>
          <div class="invalid-feedback">Please select a Appt.</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="11"
            maxlength="11"
            title="Mob number must be exactly 11 digits and start with 01"
            inputmode="numeric"
            placeholder="Ex: 01712345678"
            required
          />
          <div class="invalid-feedback">Mob number must be exactly 11 digits and start with 01.</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">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</option>');

          $.each(data, function (index, item) {
            // ✅ Safe DOM insertion
            const option = $('<option></option>')
              .attr('value', item.id)
              .text(item.name);
            $(targetSelect).append(option);
          });
        },
        error: function () {
          $(targetSelect).html('<option value="">Error loading data</option>');
        },
      });
    }

    // When Battalion is selected
    $("#battalion").change(function () {
      const battalionId = $(this).val();
      $("#company, #member").html('<option value="">Select</option>');

      if (battalionId) {
        loadSubordinates(battalionId, "company", "#company");
      }
    });

    // When Member Status is selected
    $("#member_status").change(function () {
      const memberStatus = $(this).val();
      $("#rank").html('<option value="">Select</option>');

      if (memberStatus) {
        loadSubordinates(memberStatus, "rank", "#rank");
      }
    });
  });
</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 %}