{% extends "base.html" %}

{% block title %}
    Teams & Members | 
{% endblock title %}

{% block content %}
    <div class="bg-body-secondary p-4">
        <a href="{% url 'index' %}" class="btn btn-primary px-4">Back</a>
    </div>

    <div class="container my-4 p-4 bg-body-secondary rounded">
        <div class="row">
            <div class="col-md-6 col-xl-8">
                <h3 class="mb-4">Teams & their Members</h3>
            </div>
            <div class="col-md-6 col-xl-4">
                <div class="input-group mb-4 mb-md-0">
                    <input type="search" class="form-control" placeholder="Search" id="search">
                    <button type="button" class="btn border"><i class="bi bi-search"></i></button>
                </div>
            </div>
        </div>

        <div class="row" id="teamsContainer"></div>
    </div>

    <!-- Edit Modal -->
    <div class="modal fade" id="editMemberModal" tabindex="-1">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h3 class="modal-title fs-5" id="editMemberName">Member Name Here</h3>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="close"></button>
                </div>
                <div class="modal-body">
                    <form>
                        <label for="editMemberFirstName" class="form-label">Forename</label>
                        <input type="text" name="editMemberFirstName" id="editMemberFirstName" class="form-control mb-2">
    
                        <label for="editMemberLastName" class="form-label">Surname</label>
                        <input type="text" name="editMemberLastName" id="editMemberLastName" class="form-control mb-2">
    
                        <label for="editMemberTeam" class="form-label">Team</label>
                        <select name="editMemberTeam" id="editMemberTeam" class="form-select" style="max-height: 300px;">
                            {% for team in teams %}
                                <option value="{{ team.identifier }}">{{ team.identifier }}</option>
                            {% endfor %}
                        </select>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary">Save Changes</button>
                </div>
            </div>
        </div>
    </div>
{% endblock content %}

{% block scripts %}
    <script type="text/javascript">
        $(document).ready(() => {
            loadTeams();

            var searchTimeout = null;

            $("#search").keyup(() => {
                clearTimeout(searchTimeout);

                searchTimeout = setTimeout(() => {
                    loadTeams($("#search").val());
                }, 500)
            })
        })

        function loadTeams(search="") {
            $.ajax({
                url: "{% url 'get-teams' %}",
                type: "post",
                data: {
                    "csrfmiddlewaretoken": "{{ csrf_token }}",
                    "search": search
                },
                success: (results) => {
                    $("#teamsContainer").html("");

                    for (var i = 0; i < results.teams.length; i++) {
                        var team = results.teams[i];
                        $("#teamsContainer").append(
                            "<div class='col-12 col-md-6 col-xl-4 mb-4'>" +
                                "<div class='p-4 bg-body-tertiary rounded h-100'>" +
                                    `<h4>${team.identifier}</h4>` +
                                    "<ul class='list-unstyled ul-cols-2 team-members'>" +
                                    "</ul>" +
                                "</div>" +
                            "</div>"
                        );
                        for (var j = 0; j < team.members.length; j++) {
                            var member = team.members[j];
                            $("#teamsContainer").find(".team-members").last().append(
                                "<li>" + 
                                    `<span type='button' class='team-member' onclick='javascript:openEditModal("${member.name}");'>${member.name}</span>` +
                                "</li>"
                            );
                        }
                    }
                },
                error: (xhr, textStatus, errorThrown) => {
                    alert(errorThrown);
                }
            });
        }

        function openEditModal(name) {

            var [first, last] = name.split(" ");
            var teamIdentifier = $(`.team-member:contains('${name}')`).parent().parent().parent().find("h4").text();

            $("#editMemberName").text(name);
            $("#editMemberFirstName").val(first);
            $("#editMemberLastName").val(last);
            $("#editMemberTeam").val(teamIdentifier)

            $("#editMemberModal").modal("show");
        }
    </script>
{% endblock scripts %}