{% extends 'admin-layout.html' %}

{% block head %}
{{super()}}
    <script src="http://www.kryogenix.org/code/browser/sorttable/sorttable.js"></script>
    <script src="https://cdn.pubnub.com/sdk/javascript/pubnub.4.4.3.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.min.css">
    <script src="//cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="{{url_for('static', filename='js/admin.js')}}"></script>
{% endblock %}

{% block app_content %}
<div class="card text-center">
    <div class="card-body">

        <div style="display:flex;flex-wrap:nowrap;align-items:center;">
            <div class="dropdown">
                <a href="#" class="btn btn-primary dropdown-toggle"
                            data-bs-toggle="dropdown">Search<span
                            class="caret"></span></a>
                <ul class="dropdown-menu">
                    <input style="padding:5px;margin-left:10px;margin-right:10px;" type="text" id="searchbox" name="searchbox-text" placeholder="Search By Email" onkeyup="filterHackers()"/>
                </ul>
            </div>

            <!-- TODO: get "Registered Users" properly centered -->
            <h1 style="flex-grow:1;justify-content:center;" class="h3 mb-3 fw-normal">Registered Users</h1>
        </div>

        <table id="hackers" class="table table-striped sortable">
            <thead>
                <tr>
                    <th>Options</th>
                    <th>Checked In?</th>
                    <th>Waitlisted?</th>
                    <th>Admin</th>
                    <th>User ID</th>
                    <th>Registration Time</th>
                    <th>Email</th>
                    <th>Name</th>
                    <th>Phone</th>
                    <th>Shirt</th>
                    <th>Special</th>
                    <th>School</th>
                </tr>
            </thead>
            <tbody>
                {% for hacker in hackers %}
                <tr id="{{hacker.id}}-row">
                    <td>
                        <div class="dropdown">
                            <a href="#" class="btn btn-primary dropdown-toggle"
                                        data-bs-toggle="dropdown"><span
                                        class="caret"></span></a>
                            <ul class="dropdown-menu">
                                {% if not hacker.checked_in %}
                                <li><a class="dropdown-item check_in" id="{{
                                                            hacker.id}}-check_in"
                                                            href="#">Check
                                                            In</a></li>
                                {% endif %}
                                {% if hacker.waitlisted and not
                                hacker.checked_in %}
                                <li><a class="dropdown-item
                                              promote_from_waitlist" id="{{
                                              hacker.id}}-promote_from_waitlist"
                                                       href="#">Promote From
                                                       Waitlist</a></li>
                                {% endif %}
                                <li><hr class="dropdown-divider"></li>
                                {% if not hacker.checked_in %}
                                <li><a class="dropdown-item drop"
                                       id="{{hacker.id}}-drop"
                                       href="#">Drop Registration</a></li>
                                {% endif %}
                                {% if hacker.is_admin %}
                                <li><a class="dropdown-item demote_admin"
                                              id="{{hacker.id}}-demote_admin"
                                              href="#">Demote Admin</a></li>
                                {% else %}
                                <li><a class="dropdown-item promote_admin"
                                              id="{{hacker.id}}-promote_admin"
                                              href="#">Promote Admin</a></li>
                                {% endif %}
                            </ul>
                        </div>
                    </td>
                    <td id="{{hacker.id}}-checked_in">{{ hacker.checked_in }}</td>
                    <td id="{{hacker.id}}-waitlisted">{{ hacker.waitlisted }}</td>
                    <td>{{ hacker.is_admin }}</td>
                    <td>{{ hacker.id }}</td>
                    <td>{{ hacker.last_login }}</td>
                    <td>{{ hacker.email }}</td>
                    <td>
                        <div style="display: flex; justify-content: flex-start;">
                            <input style="padding:5px; margin-left:10px; margin-right:10px;width:fit-content;max-width:100px;" type="text" id="{{hacker.id}}-namebox-first" placeholder="first_name" value="{{hacker.first_name}}" onchange="updateHacker(this.id, 'first_name', this.value)"/>
                            <input style="padding:5px; margin-left:10px; margin-right:10px;width:fit-content;max-width:100px;" type="text" id="{{hacker.id}}-namebox-last" placeholder="last_name" value="{{hacker.last_name}}" onchange="updateHacker(this.id, 'last_name', this.value)"/>
                        </div>
                    </td>
                    <td>
                        <input style="padding:5px; margin-left:10px; margin-right:10px;width:fit-content;max-width:100px;" type="text" id="{{hacker.id}}-phonebox" placeholder="phone" value="{{hacker.phone}}" onchange="updateHacker(this.id, 'phone', this.value)"/>
                    </td>
                    <td>{{ hacker.shirt_size }}</td>
                    <td>{{ hacker.accomodations }}</td>
                    <td>
                        <input style="padding:5px; margin-left:10px; margin-right:10px;width:fit-content;max-width:75px;" type="text" id="{{hacker.id}}-schoolbox" placeholder="school" value="{{hacker.school}}" onchange="updateHacker(this.id, 'school', this.value)"/>
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
</div>

<script type="text/javascript">
    function filterHackers() {
        //get hacker table and searchbox info
        const input = document.getElementById("searchbox").value.toLowerCase();
        const hackertable = document.getElementById("hackers");
        let rows = hackertable.getElementsByTagName("tr");

        //iterate over all rows
        for(let i = 1; i < rows.length; i++) {
            //get the email
            const cells = rows[i].getElementsByTagName("td");
            const emailCell = cells[6];

            //if there is an email, display or dont display based on searchbox
            if(emailCell) {
                const emailText = emailCell.textContent.toLowerCase();
                if(!emailText.includes(input)) {
                    rows[i].style.display = "none";
                }
                else {
                    rows[i].style.display = "";
                }
            }
        }
    }

    function updateHacker(id, change_field, new_val) {
        //tell backend to update a specific field for a hacker
        const headers = [
            ["Content-Type", "application/json"],
        ];

        let body = {
            "hacker_id": id.substr(0, id.indexOf('-')),
            "change_field": change_field,
            "new_val": new_val,
        }

        //send the post request, and report the error if there is one
        fetch('/admin/updateHacker', {method: 'POST', body: JSON.stringify(body), headers: headers}).catch((err) => {
            window.alert("Error updating user - see console for details");
            console.log(err);
        })
    }
</script>
{% endblock %}