{% extends '../template.html' %}
{% block content %}
    <div class="card mt-4">
        <div class="card-header">
            <h1>Connect Request for Change Customers</h1>
            {{ rfc_results.rfc_title }}
        </div>
        <div class="card-body">
            <form method="POST" class="assigned_rfc_connection_add" id="assigned_rfc_connection_add" enctype="multipart/form-data">
                {% csrf_token %}
                <div class="form-group">
                    <label for="filter_tables">Filter Customers</label>
                    <input id="filter_tables" type="text" placeholder="Filter..." onkeyup="apply_filters()" style="width: 100%;">
                </div>
                <div class="alert-primary">
                    Select one or more customers below. You can utilise the filter about to filter. Once done, click on the "Connect Customer(s)" button to connect the stakeholders to the request for change.
                </div>

                <div class="form-group">
                    {{ connect_form.customers }}
                </div>

                <div class="form-row">
                    <input class="btn btn-primary col-md-6" type="submit" value="Connect Customer(s)">
                    <a href="{% url 'request_for_change_information' rfc_id %}" class="btn btn-secondary col-md-6">Cancel</a>
                </div>
            </form>
        </div>
    </div>
    <script>
        function apply_filters() {
            //Varibales used in the function
            var input,
                filter,
                tr,
                i;

            //Get the value from the search box
            input = document.getElementById("filter_tables");

            //We want to compare apples with apples, make all uppercase
            filter = input.value.toUpperCase();

            //Get all table rows
            tr = document.getElementsByTagName("tr");

            for (i = 0; i < tr.length; i++) {
                //If the <tr> contains any values of the filter OR has class header, we want to show
                if (tr[i].innerHTML.toUpperCase().indexOf(filter) > -1 || tr[i].className=="header") {
                    tr[i].style.display = "";
                } else {
                    tr[i].style.display = "none";
                }
            }
        }
    </script>
{% endblock %}