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

{% block pageName %}Create Other Parade State{% endblock pageName %}

{% block content %}
<div class="card card-info card-outline mb-4">
    <form method="POST" action="{% url 'create_list' %}" class="needs-validation" novalidate>
        {% csrf_token %}
        <!-- Card Body -->
        <div class="card-body">
            <!-- Row for inputs -->
            <div class="row g-3">
                <!-- Date -->
                <div class="col-md-6 has-validation">
                    <label for="date" class="form-label">Date</label>
                    <div class="input-group has-validation">
                        <input type="date" class="form-control" id="date" name="date" required>
                        <div class="invalid-feedback">Please provide a valid Date.</div>
                    </div>
                </div>
                <!-- Title -->
                <div class="col-md-6 has-validation">
                    <label for="title" class="form-label">Title</label>
                    <div class="input-group has-validation">
                        <input type="text" class="form-control" id="title" name="title" placeholder="Heading of List" required>
                        <div class="invalid-feedback">Please provide a valid Title.</div>
                    </div>
                </div>
                <!-- Category -->
                <div class="col-md-6 has-validation">
                    <label for="title" class="form-label">Category</label>
                    <div class="input-group has-validation">
                        <select name="category" id="category" class="form-select" required>
                            <option value="">Select Category</option>
                            {% for i in categories %}
                            <option value="{{ i.id }}">{{ i.text }}</option>
                            {% endfor %}
                        </select>
                        <div class="invalid-feedback">Please provide a valid Category.</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 %}