{% extends "layout.html" %}
{% load staticfiles %}

{% block content %}
<div class="container">
    <div class="row">
        {% include "account/sub_nav.html" %}
        <div class="span12">
            {% include "admin/sub_nav.html" %}

            Username: <br>

            <input type="text" id="username" list="users" placeholder="Enter Username">
            <datalist id="users"></datalist>

            <br><br>

            <select id="mid">
                {% for mid in mid_count %}
                <option id = "{{ mid.2 }}">
                    {{ mid.0 }}-{{mid.1}}
                </option>
                {% endfor %}
            </select>
            <br>
            <button id="update-btn" class="btn btn-primary" onclick="updateMID()"> Update MID </button>
        </div>
    </div>

    <script type="text/javascript">
        
    function updateMID() {
        $("#update-btn").prop('disabled',true);
var BASE_URL = window.location.origin + "/sbhs-rpi";
        var username = $("#username").val();
        var board_id = $("#mid").children(":selected").attr("id");

        if(username == "")
        {
            alert("Username field must not be empty");
            return;
        }

        var request = $.ajax({
            url:BASE_URL + "/admin/updatemid",
            method : "POST",
            data : {
                "username" : username,
                "board_id" : board_id
            }
        });

        request.done(function(data){
            if(data.status_code == 200) {
                alert(data.message);
                $("#update-btn").prop('disabled',false);
                location.reload();
            }
            else {
                alert(data.message);
                $("#update-btn").prop('disabled',false);
            }                
        });
    }

    // for live search of usernames
    if (sessionStorage.getItem("fetchedUsers") == null) {
var BASE_URL = window.location.origin + "/sbhs-rpi";
        var request = $.ajax({
            url: BASE_URL + '/admin/getusers',
            method: 'POST'
        });

        request.done(function(data){
            if (data.status_code == 200) {
                sessionStorage.setItem("fetchedUsers", true);
                populateUsers(data.message);
                appendUsers();
            }
            else {
                console.log("Sorry. Unable to implement live search");
            }
        });
    }

    function populateUsers(data) {
        for (username of data) {
            sessionStorage.setItem("sbhsuser"+username, username);
        } 
    }

    function appendUsers() {   
        if (sessionStorage.getItem("fetchedUsers")) {
            var i, matchedUsers = [];
            query = "sbhsuser";
            for (i in sessionStorage) {
              if (sessionStorage.hasOwnProperty(i)) {
                if (i.match(query)) {
                  value = sessionStorage.getItem(i);
                  matchedUsers.push(value);
                }
              }
            }
            options = "";
            for (matchedUser of matchedUsers) {
                options += "<option>" + matchedUser + "</option>";
            }
            if (options.length != 0) {
                document.getElementById("users").innerHTML = options;
            }    
        }
    }

    appendUsers();
    </script>
</div>
{% endblock %}