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

{% block pageName %}
{% if deactivate %}
Nominal Roll Of Deactivate Pers
{% elif editMember %}
{% else %}
Nominal Roll
{% endif %}
{% endblock pageName %}

{% block content %}
    <!-- Search Form -->
    <div class="d-flex justify-content-end">
        <form method="GET" class="d-flex mb-3 input-group">
            <select class="form-select" name="battalion_query" id="battalion">
                <option value="">Unit</option>
                {% for i in battalions %}
                <option {% if i.id == battalion_query %} selected {% endif %} value="{{ i.id }}">{{ i.name }}</option>
                {% endfor %}
            </select>
            <select class="form-select" name="company_query" id="company">
                <option value="">Sub Unit</option>
                {% for i in companies %}
                <option {% if i.id == company_query %} selected {% endif %} value="{{ i.id }}">{{ i.name }}</option>
                {% endfor %}
            </select>
            <select class="form-select" name="member_status_query" id="member_status">
                <option value="">Status</option>
                {% for i in member_statuses %}
                <option {% if i.id == member_status_query %} selected {% endif %} value="{{ i.id }}">{{ i.name }}</option>
                {% endfor %}
            </select>
            <select class="form-select" name="rank_query" id="rank">
                <option value="">Rk</option>
                {% for i in ranks %}
                <option {% if i.id == rank_query %} selected {% endif %} value="{{ i.id }}">{{ i.name }}</option>
                {% endfor %}
            </select>
            
            <input type="text" name="search" class="form-control " placeholder="Army or Name or Mobile"
            value="{{ search_query }}">  
            <button type="submit" class="btn btn-primary">Search</button>
            <a class=" btn btn-success" target="_blank" href="{% url "read_member_pdf" member_type %}?search={{ search_query }}&battalion_query={{ battalion_query }}&company_query={{ company_query }}&member_status_query={{ member_status_query }}&rank_query={{ rank_query }}"><i class="bi bi-printer"></i> PDF</a>
        </form>
    </div>
{% if memberTable %}
<div class="container-fluid">
    <div class="row">
        <div class="col-md-offset-1 col-md-12">
            <div class="panel">
                <div class="panel-heading">
                </div>
                <div class=" table-responsive">
                    <table class="table table-bordered" id="memberTable">
                        <thead>
                            <tr>
                                <th>Action</th>
                                <th>Ser</th>
                                <th>BA No</th>
                                <th>Rk</th>
                                <th>Name</th>
                                <th>Mobile No</th>
                                <th>Unit</th>
                                <th>Sub Unit</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for item in memberTable %}
                            <!-- Modal -->
                            <div class="modal fade" id="exampleModal-{{item.id}}" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
                                <div class="modal-dialog modal-dialog-centered">
                                <div class="modal-content">
                                    <div class="modal-header">
                                    <h5 class="modal-title" id="exampleModalLabel">Warning! Delete Pers</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-between">
                                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal" aria-label="Close">Close</button>
                                        <a href="{% url "delete_member" item.id %}" class="btn btn-danger">Delete</a>
                                    </div>
                                    </div>
                                </div>
                                </div>
                            </div>

                            <!--Reset Modal -->
                            <div class="modal fade" id="exampleModal-reset-{{item.id}}" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
                                <div class="modal-dialog modal-dialog-centered">
                                <div class="modal-content">
                                    <div class="modal-header">
                                    <h5 class="modal-title" id="exampleModalLabel">Warning! Reset Member Password to Mobile No</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-between">
                                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal" aria-label="Close">Close</button>
                                        <a href="{% url "reset_password_member" item.id %}" class="btn btn-warning">Reset</a>
                                    </div>
                                    </div>
                                </div>
                                </div>
                            </div>
                            
                            <!--deactivate Modal -->
                            <div class="modal fade" id="exampleModal-deactivate-{{item.id}}" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
                                <div class="modal-dialog modal-dialog-centered modal-lg">
                                <div class="modal-content">
                                    <div class="modal-header">
                                    {% if item.is_active %}
                                        <h5 class="modal-title" id="exampleModalLabel">Warning! Deactivate Member</h5>
                                    {% else %}
                                        <h5 class="modal-title" id="exampleModalLabel">Warning! Activate Member</h5>
                                    {% endif %}
                                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                                    </div>
                                    <div class="modal-body">
                                        {% include "admin/deactivate_member_form.html" %}
                                    </div>
                                </div>
                                </div>
                            </div>
                            
                            
                            <tr>
                                <td class="d-flex">
                                    {% for module in user_modules %}
                                    {% if module.name == 'update_member_admin' %}
                                    <a href="{% url "update_member_admin" item.id %}" class="btn btn-sm btn-primary mx-1"><i class="bi bi-pencil-square"></i></a>
                                    {% elif module.name == 'update_member_company' or module.name == 'update_member_battalion' %}
                                    <a href="{% url "update_member_company" item.id %}" class="btn btn-sm btn-primary mx-1"><i class="bi bi-pencil-square"></i></a>
                                    {% elif module.name == 'delete_member_admin' or module.name == 'delete_member_company' or module.name == 'delete_member_battalion' %}
                                    <a type="button" data-bs-toggle="modal" data-bs-target="#exampleModal-{{item.id}}" class="btn btn-sm  btn-danger mx-1"><i class="bi bi-trash3"></i></a>
                                    {% elif module.name == 'reset_password_member_admin' or module.name == 'reset_password_member_company' or module.name == 'reset_password_member_battalion' %}
                                    <a type="button" data-bs-toggle="modal" data-bs-target="#exampleModal-reset-{{item.id}}" class="btn btn-sm  btn-warning mx-1"><i class="bi bi-arrow-repeat"></i></a>
                                    {% elif module.name == 'deactivate_member_admin' or module.name == 'deactivate_member_battalion' or module.name == 'deactivate_member_company' %}
                                        {% if item.active %}
                                            <a type="button" data-bs-toggle="modal" data-bs-target="#exampleModal-deactivate-{{item.id}}" class="btn btn-sm  btn-secondary mx-1"><i class="bi bi-ban"></i></a>
                                        {% else %}
                                            <a type="button" data-bs-toggle="modal" data-bs-target="#exampleModal-deactivate-{{item.id}}" class="btn btn-sm  btn-secondary mx-1"><i class="bi bi-check-circle"></i></a>
                                        {% endif %}
                                    {% endif %}
                                    {% endfor %}
                                    <a href="{% url "member_profile" item.id %}" class="btn btn-sm btn-info mx-1"><i class="bi bi-person-circle"></i></a>
                                </td>
                                <td>{{forloop.counter}}</td>
                                <td>{{item.army_no}}</td>
                                <td>{{item.rank.name}}</td>
                                <td>{{item.name}}</td>
                                <td>{{item.mobile_no}}</td>
                                <td>{{item.company.battalion}}</td>
                                <td>{{item.company}}</td>
                            </tr>
                            {% endfor %}
                            
                        </tbody>
                    </table>
                </div>

                <!-- Pagination -->
                {% include "components/pagination.html" with page_obj=memberTable %}
            </div>
        </div>
    </div>
</div>
{% else %}
<div class="row">
    <div class="col-md-12">
        <div class="panel">
            <div class="panel-heading">
                <div class="row">
                    <div class="col-sm-12 col-xs-12 d-flex justify-content-between">
                        <h3 class="panel-title text-white">No Member Found</h3>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endif %}
<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>
    $(document).ready(function () {
        $('#memberTable').DataTable({
            paging: false,     // ❌ Disable pagination
            searching: false,  // ❌ Disable search
            info: false        // ✅ Hide "Showing X of X entries"
        });
    });
</script>



{% endblock content %}