{% extends "base.html" %}
{% load static %}

{% block title %}
    Manage Anglers | 
{% endblock title %}

{% block style %}
    <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/select2-bootstrap-5-theme@1.3.0/dist/select2-bootstrap-5-theme.min.css" />
{% endblock style %}

{% block content %}
    <div class="bg-body p-4 d-flex">
        <a href="{% url 'index' %}" class="btn btn-company px-4">Back</a>
        <img class="ms-auto" width="40" src="{% static 'img/logo.webp' %}">
    </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 d-flex">
                <h3 class="mb-3 mb-xl-0">
                    Manage Anglers
                    <div class="border-company border-bottom border-2 w-100 pt-1"></div>
                </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 border-secondary-subtle btn-outline-company" id="addMember" data-bs-toggle="tooltip" data-bs-title="Add Angler">
                        <i class="bi bi-person"></i>
                    </button>
                    <button class="btn border-secondary-subtle btn-outline-company" id="addTeam" data-bs-toggle="tooltip" data-bs-title="Add Team">
                        <i class="bi bi-people"></i>
                    </button>
                    <button class="btn border-secondary-subtle btn-outline-company" id="addSection" data-bs-toggle="tooltip" data-bs-title="Add Section">
                        <i class="bi bi-layers"></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-company border-secondary-subtle">
                        <i class="bi bi-sort-up"></i>
                    </button>
                    <input type="search" class="form-control border-secondary-subtle shadow-none" placeholder="Search Anglers" id="search">
                    <button type="button" class="btn btn-outline-company border-secondary-subtle rounded-end" id="searchButton"><i class="bi bi-search"></i></button>
                    <form id="sortForm">
                        <ul class="dropdown-menu py-3 text-body-secondary bg-body-tertiary border border-light-subtle shadow-sm justify-self-center mt-2" onclick="event.stopPropagation()">
                            <li class="px-4">
                                <h3 class="h6 mb-3">Sort groups by</h3>
                                <div>
                                    <div class="d-inline-block form-check">
                                        <input type="radio" class="form-check-input" checked value="teams" name="sortGroups" id="sortTeamsName">
                                        <label for="sortTeamsName" class="form-check-label">Teams</label>
                                    </div>
                                    <div class="d-inline-block form-check ms-4">
                                        <input type="radio" class="form-check-input" value="sections" name="sortGroups" id="sortTeamsSection">
                                        <label for="sortTeamsSection" class="form-check-label">Sections</label>
                                    </div>
                                </div>
                            </li>
                            <li class="dropdown-divider my-3 mx-4 bg-light-subtle"></li>
                            <li class="px-4">
                                <h3 class="h6 mb-3">Sort anglers 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">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="groupsContainer"></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 Section Modal -->
    <div class="modal fade" id="editSectionModal" tabindex="-1" role="dialog">
        <div class="modal-dialog">
            <div class="modal-content border-0">
                <div class="modal-header border-0">
                    <h3 class="modal-title fs-5" id="editTeamTitle">
                        Section Character Here
                        <div class="border-company border-bottom border-2 w-100 pt-1"></div>
                    </h3>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="close"></button>
                </div>
                <div class="modal-body">
                    <div class="col-md-6 d-flex">
                        <div class="input-group">
                            <span class="input-group-text" data-bs-toggle="tooltip" data-bs-placement="left" data-bs-title="Section Character">
                                <i class="bi bi-layers"></i>
                            </span>
                            <input type="text" name="editSectionName" id="editSectionName" class="form-control" minlength="1" maxlength="3" value="A">
                        </div>
                        <button type="button" id="editSectionNameButton" class="btn btn-outline-company border-secondary-subtle ms-3" data-bs-toggle="tooltip" data-bs-placement="right" data-bs-title="Find next available character">
                            <i class="bi bi-arrow-clockwise"></i>
                        </button>
                    </div>
                    <div class="col-md-6 mt-2 text-danger" id="editSectionNameError" style="display: hidden"></div>
                </div>
                <div class="modal-footer border-0">
                    <button type="button" class="btn btn-company px-4" id="saveEditSectionModal">Save</button>
                </div>
            </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 border-0">
                    <h3 class="modal-title fs-5" id="editTeamTitle">
                        Team Number Here
                        <div class="border-company border-bottom border-2 w-100 pt-1"></div>
                    </h3>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="close"></button>
                </div>
                <div class="modal-body">
                    <div class="col-md-6 d-flex">
                        <div class="input-group">
                            <span class="input-group-text" data-bs-toggle="tooltip" data-bs-placement="left" data-bs-title="Team number">
                                <i class="bi bi-tag"></i>
                            </span>
                            <input type="number" name="editTeamNumber" id="editTeamNumber" class="form-control" min="1" max="9999" value="1">
                        </div>
                        <button type="button" id="editTeamNumberButton" class="btn btn-outline-company border-secondary-subtle ms-3" data-bs-toggle="tooltip" data-bs-placement="right" data-bs-title="Find next available number">
                            <i class="bi bi-arrow-clockwise"></i>
                        </button>
                    </div>
                    <div class="col-md-6 mt-2 text-danger" id="editTeamNumberError" style="display: hidden"></div>
                </div>
                <div class="modal-footer border-0">
                    <button type="button" class="btn btn-company px-4" id="saveEditTeamModal">Save</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 border-0">
                    <h3 class="modal-title fs-5 color" id="editMemberName">
                        Angler Name Here
                        <div class="border-company border-bottom border-2 w-100 pt-1"></div>
                    </h3>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="close"></button>
                </div>
                <div class="modal-body">
                    <form>
                        <div class="row g-3 mb-3">
                            <div class="col-md">
                                <div class="form-floating">
                                    <input class="form-control" type="text" name="editMemberForename" id="editMemberForename" placeholder="Forename" value="First Name">
                                    <label for="editMemberForename">Forename</label>
                                </div>
                            </div>
                            <div class="col-md">
                                <div class="form-floating">
                                    <input class="form-control" type="text" name="editMemberSurname" id="editMemberSurname" placeholder="Surname" value="Last Name">
                                    <label for="editMemberSurname">Surname</label>
                                </div>
                            </div>
                        </div>
                        <div class="input-group mb-3">
                            <span class="input-group-text" data-bs-toggle="tooltip" data-bs-placement="left" data-bs-title="Team">
                                <i class="bi bi-people"></i>
                            </span>
                            <select class="form-select" name="editMemberTeam" id="editMemberTeam">
                                <option value="" class="font-ssp">Team 1</option>
                                <option value="" class="font-ssp">Team 2</option>
                                <option value="" class="font-ssp">Team 3</option>
                                <option value="" class="font-ssp">Team 4</option>
                            </select>
                        </div>
                        <div class="input-group mb-3">
                            <span class="input-group-text" data-bs-toggle="tooltip" data-bs-placement="left" data-bs-title="Section">
                                <i class="bi bi-layers"></i>
                            </span>
                            <select class="form-select" name="editMemberSection" id="editMemberSection">
                                <option value="">Section A</option>
                                <option value="">Section B</option>
                                <option value="">Section C</option>
                                <option value="">Section D</option>
                            </select>
                        </div>
                        <div class="row">
                            <div class="col-md-6 d-flex">
                                <div class="input-group">
                                    <span class="input-group-text" data-bs-toggle="tooltip" data-bs-placement="left" data-bs-title="Peg Number">
                                        <i class="bi bi-tag"></i>
                                    </span>
                                    <input type="number" name="editMemberPeg" id="editMemberPeg" class="form-control" min="1" max="9999" value="1">
                                </div>
                                <button type="button" class="btn btn-outline-company border-secondary-subtle ms-3" data-bs-toggle="tooltip" data-bs-placement="right" data-bs-title="Find next available peg">
                                    <i class="bi bi-arrow-clockwise"></i>
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer border-0">
                    <button type="button" class="btn btn-company px-4" id="saveEditModal">Save</button>
                </div>
            </div>
        </div>
    </div>
{% endblock content %}

{% block scripts %}
    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/select2@4.0.13/dist/js/select2.full.min.js"></script>

    <script type="text/javascript">
        const pageUrl = "{% url 'anglers' %}"
        // const getPageDataUrl = "{% url 'get-angler-data' %}";  DEPRICATED FOR REWRITE
        // const updateMemberUrl = "{% url 'update-member' %}";
        // const updateSectionUrl = "{% url 'update-section' %}"
        // const updateTeamUrl = "{% url 'update-team' %}"
        const getNextIdentifierUrl = "{% url 'get-next-identifier' %}"
        const csrfMiddlewareToken = "{{ csrf_token }}";
    </script>
    <script src="{% static 'js/teams.js' %}"></script>
{% endblock scripts %}