{% extends "base.html" %}

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

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

    <div class="container my-4 p-4 pb-0 bg-body rounded">
        <div class="row mb-4">
            <div class="col-12 col-xl-4">
                <h3 class="mb-3 mb-xl-0">Teams &amp; Members</h3>
            </div>
            <div class="col-sm-3 col-md-6 col-xl-4 mb-3 mb-sm-0">
                <div class="input-group justify-content-xl-end">
                    <button class="btn btn-outline-secondary border-secondary-subtle">
                        <i class="bi bi-person" data-bs-toggle="tooltip" data-bs-title="Add Member"></i>
                    </button>
                    <button class="btn btn-outline-secondary border-secondary-subtle">
                        <i class="bi bi-people" data-bs-toggle="tooltip" data-bs-title="Add Team"></i>
                    </button>
                </div>
            </div>
            <div class="col-sm-9 col-md-6 col-xl-4">
                <div class="input-group dropdown">
                    <button type="button" data-bs-toggle="dropdown" class="btn btn-outline-secondary border-secondary-subtle">
                        <i class="bi bi-sort-up"></i>
                    </button>
                    <input type="search" class="form-control border-secondary-subtle shadow-none" placeholder="Search Members" id="search">
                    <button type="button" class="btn btn-outline-secondary border-secondary-subtle rounded-end" id="searchButton"><i class="bi bi-search"></i></button>
                    <form id="sortForm">
                        <ul class="dropdown-menu w-100 py-3 text-body-secondary" onclick="event.stopPropagation()">
                            <li class="px-4">
                                <h3 class="h6 mb-3">Sort teams by</h3>
                                <div>
                                    <div class="d-inline-block form-check">
                                        <input type="radio" class="form-check-input" checked value="team_number" name="sortTeams" id="sortTeamsName">
                                        <label for="sortTeamsName" class="form-check-label">Team Number</label>
                                    </div>
                                    <div class="d-inline-block form-check ms-4">
                                        <input type="radio" class="form-check-input" value="section_letter" name="sortTeams" id="sortTeamsSection">
                                        <label for="sortTeamsSection" class="form-check-label">Section Letter</label>
                                    </div>
                                </div>
                            </li>
                            <li class="dropdown-divider my-3"></li>
                            <li class="px-4">
                                <h3 class="h6 mb-3">Sort members by</h3>
                                <div>
                                    <div class="d-inline-block form-check">
                                        <input type="radio" class="form-check-input" value="first_name" name="sortMembers" id="sortMembersName">
                                        <label for="sortMembersName" class="form-check-label">Member Name</label>
                                    </div>
                                    <div class="d-inline-block form-check ms-4">
                                        <input type="radio" class="form-check-input" checked value="peg_number" name="sortMembers" id="sortMembersPeg">
                                        <label for="sortMembersPeg" class="form-check-label">Peg Number</label>
                                    </div>
                                </div>
                            </li>
                        </ul>
                    </form>
                </div>
            </div>
        </div>

        <div class="row" id="teamsContainer"></div>
        <div class="col-12 text-center pb-4" id="teamsLoadingSpinner">
            <div class="spinner-border spinner-border-lg" role="status">
                <span class="visually-hidden">Loading...</span>
            </div>
        </div>
        <div class="pb-4" id="teamsNotFound">
            <div class="alert alert-danger m-0" role="alert">
                No teams found under that search
            </div>
        </div>
          
    </div>

    <!-- Edit Team Modal -->
    <div class="modal fade" id="editTeamModal" tabindex="-1" role="dialog">
        <div class="modal-dialog">
            <div class="modal-content border-0">
                <div class="modal-header">
                    <h3 class="modal-title fs-5" id="editTeamTitle">Team Number Here</h3>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="close"></button>
                </div>
                <div class="modal-body">
                    <form id="editTeamForm">
                        <div class="row">
                            <div class="col-md-6 mb-3 mb-md-0">
                                <label for="editTeamNumber" class="form-label">Team Number</label>
                                <input type="number" name="editTeamNumber" class="form-control" id="editTeamNumber">
                            </div>
                            <div class="col-md-6">
                                <label for="editTeamSection" class="form-label">Section Letter</label>
                                <input type="text" name="editTeamSection" class="form-control" id="editTeamSection">
                            </div>
                        </div>
                    </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" id="saveEditTeamModal">Save Changes</button>
                </div>
            </div>
        </div>
    </div>

    <!-- Edit Member Modal -->
    <div class="modal fade" id="editMemberModal" tabindex="-1" role="dialog">
        <div class="modal-dialog">
            <div class="modal-content border-0">
                <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 id="editMemberForm">
                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <label for="editMemberFirstName" class="form-label">Forename</label>
                                <input type="text" name="editMemberFirstName" id="editMemberFirstName" class="form-control" required minlength="1" maxlength="30">
                            </div>
                            <div class="col-md-6 mb-3">
                                <label for="editMemberLastName" class="form-label">Surname</label>
                                <input type="text" name="editMemberLastName" id="editMemberLastName" class="form-control" required minlength="1" maxlength="30">
                            </div>
                            <div class="col-md-6">
                                <label for="editMemberTeam" class="form-label">Team</label>
                                <select name="editMemberTeam" id="editMemberTeam" class="form-select" required></select>
                            </div>
                            <div class="col-md-6">
                                <label for="editMemberPeg" class="form-label">Peg Number</label>
                                <input type="number" name="editMemberPeg" id="editMemberPeg" class="form-control" min="1" max="9999">
                            </div>
                        </div>
                    </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" id="saveEditModal">Save Changes</button>
                </div>
            </div>
        </div>
    </div>
{% endblock content %}

{% load static %}
{% block scripts %}
    <script type="text/javascript">
        const getTeamsUrl = "{% url 'get-teams' %}";
        const updateMemberUrl = "{% url 'update-member' %}";
        const csrfMiddlewareToken = "{{ csrf_token }}";
    </script>
    <script src="{% static 'js/teams.js' %}"></script>
{% endblock scripts %}