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

{% block pageName %}Select Multiple Ex Performance{% endblock pageName %}

{% block content %}
<div class="card card-info card-outline mb-4">
    <form method="POST" action="{% url 'select_multiple_ex_perf' %}" class="needs-validation" novalidate>
        {% csrf_token %}
        <!-- Card Body -->
        <div class="card-body">
            <!-- Row for inputs -->
            <div class="row g-3">
                <!-- Date From -->
                <div class="col-md-6 has-validation">
                    <label for="date_from" class="form-label">Date From</label>
                    <div class="input-group has-validation">
                        <input type="date" class="form-control" id="date_from" name="date_from" required>
                        <div class="invalid-feedback">Please provide a valid Date From.</div>
                    </div>
                </div>
                <!-- Date To -->
                <div class="col-md-6 has-validation">
                    <label for="date_to" class="form-label">Date To</label>
                    <div class="input-group has-validation">
                        <input type="date" class="form-control" id="date_to" name="date_to" required>
                        <div class="invalid-feedback">Please provide a valid Date To.</div>
                    </div>
                </div>
                <!-- Ex Performance Name -->
                <div class="col-md-6">
                    <label for="auth" class="form-label">Ex Performance Name</label>
                    <div class="input-group has-validation">
                        <select name="ex_perf_name" class="form-select" id="" required>
                            <option value="" selected disabled >Choose...</option>
                            {% for i in ex_perf_names %}
                            <option value={{ i.id }}>{{ i.text }}</option>
                            {% endfor %}
                        </select>
                        <div class="invalid-feedback">Please provide a valid Ex Performance Name.</div>
                    </div>
                </div>
            </div>
            <!-- End of Row -->

            <!-- Table of members -->
            <div class="table-responsive text-nowrap mt-3">
                <table class="table table-bordered table-hover table-striped">
                    <thead>
                        <tr>
                            <th>Select</th>
                            <th>Army No</th>
                            <th>Rk</th>
                            <th>Name</th>
                            <th>Unit</th>
                            <th>Sub Unit</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for i in members %}
                        <tr onclick="toggleCheckbox({{ i.id }}, event)" class="cursor-pointer">
                            <td>
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox" value="{{ i.id }}" id="member_{{ i.id }}" name="members">
                                </div>
                            </td>
                            <td>{{ i.army_no }}</td>
                            <td>{{ i.rank.name }}</td>
                            <td>{{ i.name }}</td>
                            <td>{{ i.company.battalion.name }}</td>
                            <td>{{ i.company.name }}</td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>

            <!-- Submit Button -->
            <div class="mt-3">
                <button type="submit" class="btn btn-primary">Submit</button>
            </div>

        </div>
        <!-- End of Card Body -->
    </form>
</div>

<!-- 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>
<script>
function toggleCheckbox(id, event) {
    // Prevent toggling twice if the checkbox itself is clicked
    if(event.target.type !== 'checkbox') {
        const checkbox = document.getElementById(`member_${id}`);
        checkbox.checked = !checkbox.checked;
    }
}
</script>

{% endblock content %}