@{
    ViewBag.Title = "Application";
    Layout = "../Shared/_Layout.cshtml";
}

@section scripts
{
    <script type="text/javascript">
        var _users;
        $(document).ready(function() {
            $("#select-user").change(UpdateUserData);
            PupulateSelectUsers();
            UpdateUserData();


        });

        function AddNewUser() {
            var phoneNumber = $("#phoneNumber").val();
            var name = $("#name").val();

            $.post("api/users", { 'Name': name, 'PhoneNumber': phoneNumber });
        }

        function PupulateSelectUsers() {
            var selectUser = $("#select-user");
            selectUser.empty();
            $.getJSON("api/users", function(data) {
                _users = data.Users;
                for (var i = 0; i < _users.length; i++) {
                    selectUser.append($("<option></option>").attr("value", _users[i].Id).text(_users[i].Name));
                }
                UpdateUserData();
            });
        }

        function AddTask() {
            var taskName = $("#taskName").val();
            var userId = $("#select-user").val();
            $.post("api/users/" + userId, { "Task": taskName }, function(data) {

            }, "json");
        }
        function UpdateUserData() {
            var index = $("select-user")[0].selectedIndex;
            if (index < 0) return;
            $("#user-name").text(_users[index].Name);
            $("#user-task").text(_users[index].Task);
        }


    </script>
}

<h2>Kibista Application</h2>
<div>
    <label for="select-user"></label>
    <select id="select-user"></select>
</div>
<hr/>
<div>
    <h2>Add new user</h2>
    <label for="name">Name</label>
    <input id="name" type="text"/><br/>
    <label for="phoneNumber">Phone number</label>
    <input id="phoneNumber" type="text"/><br/>
    <input id="add-new-user-button" type="button" value="Add" onclick=" AddNewUser() "/>
</div>
<div>
    <h2>Add task</h2>
    <label for="taskName">Name</label>
    <input id="taskName" type="text"/><br/>
    <input id="add-button" type="button" value="Add" onclick=" AddTask() "/>
</div>
<div>
    <p>User name: <span id="user-name"></span></p>
    <p>Task: <span id="user-task"> test</span></p>
</div>