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

{% block pageName %} 
Announce Notice 
{% 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_notice' %}" method="post" class="needs-validation" novalidate>
    {% csrf_token %}
    <!--begin::Body-->
    <div class="card-body">
      <!--begin::Row-->
      <div class="row g-3">
        {% if 'create_notice_admin' in module_names %}
        <!--begin::Col-->
        <div class="col-md-6">
            <label for="battalion" class="form-label">Unit</label>
            <select class="form-select" name="battalion" id="battalion">
                <option value="">Select Unit</option>
                {% for battalion in battalions %}
                    <option value="{{ battalion.id }}">{{ battalion.name }}</option>
                {% endfor %}
            </select>
            <div class="invalid-feedback">Please provide a valid Unit.</div>
        </div>
        <!--end::Col-->
        <!--begin::Col-->
        <div class="col-md-6">
            <label for="company" class="form-label">Sub Unit</label>
            <select class="form-select" name="company" id="company">
                <option value="">Select Sub Unit</option>
                {% for company in companies %}
                    <option value="{{ company.id }}">{{ company.name }}</option>
                {% endfor %}
            </select>
            <div class="invalid-feedback">Please provide a valid Sub Unit.</div>
        </div>
        <!--end::Col-->
        {% endif %}
        {% if 'create_notice_battalion' in module_names %}
        <!--begin::Col-->
        <div class="col-md-6">
            <label for="company" class="form-label">Sub Unit</label>
            <select class="form-select" name="company" id="company">
                <option value="">Select Sub Unit</option>
                {% for company in companies %}
                    <option value="{{ company.id }}">{{ company.name }}</option>
                {% endfor %}
            </select>
            <div class="invalid-feedback">Please provide a valid Sub Unit.</div>
        </div>
        <!--end::Col-->
        {% endif %}
        <!--begin::Col-->
        <div class="col-md-6">
        <label for="army_no" class="form-label">BA No</label>
        <div class="input-group has-validation">
            <input
            list="datalistOptions"
            type="text"
            class="form-control"
            id="army_no"
            name= "army_no"
            aria-describedby="inputGroupPrepend"
            placeholder="Ex: BA-1234"
            />
            <datalist id="datalistOptions">
            {% for items in members %}
            <option value="{{ items.army_no }}"></option>
            {% endfor %}
            </datalist>
            <div class="invalid-feedback">Please provide a valid BA No.</div>
        </div>
        </div>
        <!--end::Col-->
        <!--begin::Col-->
        <div class="col-12">
          <label for="remarks" class="form-label">Notice</label>
            <textarea class="form-control" id="remarks" name="remarks" rows="9" placeholder="Enter your notice here..."></textarea>
          <div class="invalid-feedback">Please provide a valid Notice.</div>
        </div>

      </div>
      <!--end::Row-->
    <div class="mt-4">
        <button class="btn btn-primary" type="submit">Submit</button>
    </div>
    <!--end::Body-->
  </form>

  <!--end::Form-->
 <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>

  <!--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 %}