{% extends "basic/base_template.html" %}
{% block pageName %}
Lve
{% endblock pageName %}

{% block content %}
<div>
    <h1 class="text-center">Apply for Lve</h1>
    <div class="card card-info card-outline mb-4">
        <!--begin::Header-->
        <!--end::Header-->
        <!--begin::Form-->
        <form action="{% url 'leave_apply_member' %}" method="post" 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="leave_type" class="form-label fw-bold">Lve Type</label>
                  <select
                  class="form-select"
                  id="leave_type"
                  name="leave_type"
                  required
                  >
                  <option selected disabled value="">Choose...</option>
                  {% for items in leaveTypes %}
                  <option value="{{ items.id }}">{{ items.showName }}</option>
                  {% endfor %}
                  </select>
                  <div class="invalid-feedback">Please select a Lve Type.</div>
              </div>
              <!--end::Col-->
              <!--begin::Col-->
              <div class="col-md-6">
                <label for="reason" class="form-label"
                  >Reason</label
                >
                <div class="input-group has-validation">
                    <select class="form-select" name="reason" id="reason">
                        <option selected value="" >Choose...</option>
                        {% for i in reasons %}
                        <option value={{ i.id}}>{{ i.text }}</option>
                        {% endfor %}
                    </select>
                  <div class="invalid-feedback">Please provide a valid Reason.</div>
                </div>
              </div>
              <!--end::Col-->
            <!--begin::Col-->
            <div class="col-md-6">
              <label for="reason_des" class="form-label"
                >Reason Des</label
              >
              <div class="input-group has-validation">
                  <select class="form-select" name="reason_des" id="reason_des">
                      <option selected value="" >Choose...</option>
                  </select>
                <div class="invalid-feedback">Please provide a valid Reason Des.</div>
              </div>
            </div>
            <!--end::Col-->
              <!--begin::Col-->
            <div class="col-md-6">
                <label for="start_date" class="form-label"
                  >Start Date</label
                >
                <div class="input-group has-validation">
                  <input
                    type="date"
                    class="form-control"
                    id="start_date"
                    name= "start_date"
                    aria-describedby="inputGroupPrepend"
                    required
                  />
                  <div class="invalid-feedback">Please provide a valid start date.</div>
                </div>
              </div>
              <!--end::Col-->
              <!--begin::Col-->
            <div class="col-md-6">
                <label for="end_date" class="form-label"
                  >End Date</label
                >
                <div class="input-group has-validation">
                  <input
                    type="date"
                    class="form-control"
                    id="end_date"
                    name= "end_date"
                    aria-describedby="inputGroupPrepend"
                    required
                  />
                  <div class="invalid-feedback">Please provide a valid end date.</div>
                </div>
              </div>
              <!--end::Col-->
              <!--begin::Col-->
              <!--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-->
    </div>
      <!--end::Form Validation-->
    <div>
        <h1 class="text-center">Lve History</h1>
        <div class="table-responsive">
            <table class="table table-striped table-bordered">
                <tr>
                    <th>Apply Date</th>
                    <th>Lve Type</th>
                    <th>Start Date</th>
                    <th>End Date</th>
                    <th>Days</th>
                    <th>Apply By</th>
                    <th>Status</th>
                    <th>Reason</th>

                </tr>
                {% for items in leaveHistory %}
                <!-- Modal -->
        <div class="modal fade" id="exampleModal-{{items.id}}" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
          <div class="modal-dialog modal-fullscreen">
          <div class="modal-content">
              <div class="modal-header">
              <h5 class="modal-title" id="exampleModalLabel">INFO</h5>
              <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
              </div>
              <div class="modal-body">
                  <div class="d-flex justify-content-around bg-secondary text-white p-2">
                      <div><span class="fw-bold">Army No</span> :{{ items.member.army_no}}</div>
                      <div><span class="fw-bold">Name</span> :{{items.member.name}}</div>
                      <div><span class="fw-bold">Rank</span> :{{ items.member.rank}}</div>
                      <div><span class="fw-bold">Start Date</span> :{{ items.start_date}}</div>
                      <div><span class="fw-bold">End Date</span> :{{ items.end_date}}</div>
                      <div><span class="fw-bold">Apply By</span> :{{ items.apply_by}}</div>
                      <div><span class="fw-bold">Days</span> :{{ items.days}}</div>
                      <div><span class="fw-bold">Lve Type</span> :{{ items.leave_type.showName}}</div>
                  </div>
                  <h2 class="text-center mt-3 text-decoration-underline">Reason</h2>
                    <p><b>{{item.reason.text}}</b></p>
                    <p>{{item.reason_des.text}}</p>
              </div>
              <div class="d-flex justify-content-end p-2">
                  <button type="button" class="btn btn-secondary" data-bs-dismiss="modal" aria-label="Close">Close</button>
              </div>
          </div>
          </div>
      </div>
                <tr>
                    <td>{{ items.created_at }}</td>
                    <td>{{ items.leave_type.showName }}</td>
                    <td>{{ items.start_date }}</td>
                    <td>{{ items.end_date }}</td>
                    <td>{{ items.days }}</td>
                    <td>{{ items.apply_by }}</td>
                    <td class="text-white {% if items.status == 'pending' %}bg-primary{% elif items.status == 'approved' %}bg-success{% elif items.status == 'rejected' %}bg-danger{% else %}{% endif %}">{{ items.status }}</td>
                    <td><a type="button" data-bs-toggle="modal" data-bs-target="#exampleModal-{{items.id}}" class="btn btn-info  mx-1"><i class="bi bi-info-circle"></i></a></td>
                </tr>
                {% endfor %}
            </table>
        </div>
        {% include "components/pagination.html" with page_obj=leaveHistory %}
    </div>
</div>


<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 approach — avoids DOM XSS
            const option = $('<option></option>')
              .attr('value', item.id)
              .text(item.text); // text() escapes HTML
            $(targetSelect).append(option);
          });
        },
        error: function () {
          $(targetSelect).html('<option value="">Error loading data</option>');
        },
      });
    }

    // When reason is selected
    $("#reason").change(function () {
      const reason = $(this).val();
      $("#reason_des").html('<option value="">Select</option>');

      if (reason) {
        loadSubordinates(reason, "reason_des", "#reason_des");
      }
    });
  });
</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-->
{% endblock content %}