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

{% block pageName %}
Create User
{% 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_user_admin' %}" 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"
              >BA No</label
            >
            <div class="input-group has-validation">
              <input
                type="text"
                class="form-control"
                id="army_no"
                name= "army_no"
                aria-describedby="inputGroupPrepend"
                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="name" class="form-label fw-bold"
              >Name</label
            >
            <div class="input-group has-validation">
              <input
                type="text"
                class="form-control"
                id="name"
                name= "name"
                aria-describedby="inputGroupPrepend"
                required
              />
              <div class="invalid-feedback">Please provide a valid Name.</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-->
          <!--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="email" class="form-label fw-bold"
              >Email</label
            >
            <div class="input-group has-validation">
              <input
                type="email"
                class="form-control"
                id="email"
                name= "email"
                aria-describedby="inputGroupPrepend"
                required
              />
              <div class="invalid-feedback">Please provide a valid email.</div>
            </div>
          </div>
          <!--end::Col-->
          <!--begin::Col-->
          <div class="col-md-6">
            <label for="role" class="form-label fw-bold">Role</label>
            <select class="form-select" id="role" name="role" required>
              <option selected disabled value="">Choose...</option>
              {% for i in roles %}
              <option value="{{ i.id}}">{{ i.name }}</option>
              {% endfor %}
            </select>
            <div class="invalid-feedback">Please select a Role.</div>
          </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">
              <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="battalion" class="form-label fw-bold">Unit</label>
            <select class="form-select" id="battalion" name="battalion" required>
              <option selected disabled value="">Choose...</option>
              {% for battalion in battalions %}
              <option value="{{ battalion.id }}">{{ battalion.name }}</option>
              {% endfor %}
            </select>
            <div class="invalid-feedback">Please select a Unit.</div>
          </div>
          <div class="col-md-6">
            <label for="company" class="form-label fw-bold">Sub Unit</label>
            <select class="form-select" id="company" name="company" required>
              <option selected disabled value="">Choose...</option>
              <option>...</option>
            </select>
            <div class="invalid-feedback">Please select a Sub Unit state.</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>
        <button type="button" class="btn btn-secondary ms-2" data-bs-dismiss="modal">Close</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-->
    <!--begin::JavaScript-->

  </div>
  <!--end::Form Validation-->

{% endblock content %}