{% extends 'base/base.html' %}

{% block title %} {{ object.name }} {% endblock %}

{% load static %}

{% block script %}
    <!-- Latest compiled and minified JavaScript -->
{% endblock %}

{% block body %}
    {% include 'base/nav-bar.html' %}
        <div id="wrap">
            <div id="main">
            <!-- content goes here -->

                <div class="container">
                    <div class="row">

                        <div class="col-md-8">
                            <h3>Club Responsibility</h3>
                            <div class="card mb-3">
                              <img class="card-img-top" src="{% static 'clubManagement/image/great_power_great_responsibility.jpg' %}">
                              <div class="card-block">
                                <h4 class="card-title">{{ object.name }}</h4>
                                <p class="card-text">{{ object.description }}</p>
                                <p class="card-text">
                                    <small class="text-muted">
                                       Added by : {{ object.created_by.first_name }} {{ object.created_by.last_name }}
                                    </small>
                                </p>
                                  {% if edit_permission %}
                                <a href="{% url 'responsibility_update' object.id %}">
                                    <button type="submit" class="btn btn-primary add-btn">Update</button>
                                </a>
                                <a href="{% url 'responsibility_delete' object.id %}">
                                    <button type="submit" class="btn btn-danger add-btn">Delete</button>
                                </a>
                                  {% endif %}
                              </div>
                            </div>

                            <div class="card student-form" id="student-form" style="display: none">
                              <div class="card-block">
                                <form class="form-group col-md-6" action="" method="post">
                                    {% csrf_token %}
                                    <label for="exampleInputEmail1"><h4>Add Student</h4></label>
                                    <div class="dropdown">
                                        <input id="search" onkeyup="myFunction()" class="form-control" data-toggle="dropdown" placeholder="Search..." autocomplete="off">
                                        <input type="hidden" id="search-id" name="user_id">
                                        <div class="dropdown-menu" id="search-results">
                                            {% for user in all_users %}
                                                <p onclick="addText({{ user.id }}, '{{ user.first_name }} {{ user.last_name }}')" class="dropdown-item">{{ user.first_name }} {{ user.last_name }}</p>
                                            {% endfor %}
                                        </div>
                                    </div>
                                    <small id="emailHelp" class="form-text text-muted">Search for a student above.</small>
                                    <button type="submit" class="btn btn-secondary add-btn">Add</button>
                                  </form>
                              </div>
                            </div>
                        </div>

                        <ul class="list-group col-md-4">
                            <div class="margin-20"></div>
                            <li class="list-group-item justify-content-between">
                                <h5>Student's responsible</h5>
                                <span class="badge badge-default badge-pill">{{ user_count }}</span>
                              </li>
                            {% for resp in responsibility_list %}
                              <li class="list-group-item justify-content-between">
                                {{ resp.user.first_name }}  {{ resp.user.last_name }}
                                <form method="post" action="{% url "student_responsibility_delete" resp.id %}">
                                       {% csrf_token %}
                                      <button type="submit" class="close">×</button>
                                  </form>
                              </li>
                            {% endfor %}
                            {% if edit_permission %}
                            <div onclick="showForm()" class="col-md-6 offset-md-3">
                                <button class="btn btn-secondary add-btn">
                                    Add student
                                </button>
                            </div>
                            {% endif %}
                        </ul>

                    </div>
                </div>

            </div>
        </div>
    {% include 'base/footer.html' %}

    <style>
        .container {
            margin-top: 50px;
        }
        .add-btn {
            margin-top: 20px;
        }
        .margin-20 {
            margin: 24px;
        }
    </style>

    <script>
        function showForm() {
            var form = document.getElementById('student-form');
            if(form.style.display === 'none') {
                form.style.display = 'block';
            }
            else {
                form.style.display = 'none';
            }
        }

        function myFunction() {
            // Declare variables
            var input, filter, items, i;
            input = document.getElementById('search');
            filter = input.value.toUpperCase();
            items = document.getElementsByClassName('dropdown-item');

            // Loop through all list items, and hide those who don't match the search query
            for (i = 0; i < items.length; i++) {
                if (items[i].innerHTML.toUpperCase().indexOf(filter) > -1) {
                    items[i].style.display = "";
                } else {
                    items[i].style.display = "none";
                }
            }
        }

        function addText(id, name) {
            var inp1 = document.getElementById('search');
            var inp2 = document.getElementById('search-id');
            inp1.value = name;
            inp2.value = id;
        }
    </script>
{% endblock %}