@model IEnumerable<Fab2ApprovalSystem.Models.TrainingGroupMember>
@{IEnumerable<Fab2ApprovalSystem.Models.LoginModel> test = ViewBag.AllUsers;}
@*<script src="~/Scripts/jquery.min.js"></script>*@
<style>
    tr:nth-child(even) {
        background: #CCC
    }

    tr:nth-child(odd) {
        background: #FFF
    }
</style>
<p>
    <input type="button" value="Add To Training Group" class="btn btn-success btn-xs" id="AddToGroupBtn" />
</p>
<div id="displayTable">
    <table class="table">
        <thead>
            <tr>
                <th class="filterableCol">
                    Name:
                </th>
                <th></th>
            </tr>
        </thead>
        <tbody>
            @foreach (var item in Model)
            {
                <tr>
                    <td>
                        @Html.DisplayFor(modelItem => item.FullName)
                    </td>

                    <td>
                        <input type="button" class="btn btn-default" value="Delete" onclick="DeleteFromGroup('@item.UserID')" />
                    </td>
                </tr>
            }
        </tbody>
    </table>
</div>
<div class="modal fade" id="AddToGroup" tabindex="0" role="dialog" aria-hidden="true" data-backdrop="static">
    <div class="modal-dialog modal-lg" style="width:500px;">
        <div class="modal-content">
            <div class="modal-header" style="background-color: #fce0a3;">
                <h3 class="modal-title">Add To Training Group</h3>
            </div>
            <div class="modal-body">

                <p>New Group Name: </p>
                @Html.DropDownList("UserID", new SelectList(test, "UserID", "FullName"))
            </div>
            <div class="modal-footer" style="background-color: #fce0a3; ">
                <button type="button" class="btn btn-default" data-dismiss="modal" id="CloseAddToGroup">Save</button>
                <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript">
    $('#displayTable').excelTableFilter();
    $('#CloseAddToGroup').on('click', function () {
        var SelectedUser = document.getElementById('UserID').value;
        var SelectedGroup = @ViewBag.TrainingGroupId;
        var sendInfo = {
            userId: SelectedUser,
            groupId: SelectedGroup

        };
        //alert(SelectedUser);
        $.ajax({
            type: "POST",
            url: "/Admin/AddToGroup",
            contentType: "application/json; charset=utf-8",
            data: JSON.stringify(sendInfo),
            dataType: "json",
            success: function (r) {
                //var json = $.parseJSON(r);
                alert('Success');
                RefreshData();
            },
            error: function (req, status, error) {
                alert(error);
            }
        });
        $("#AddToGroup").modal('hide');

    })

    $('#AddToGroupBtn').on('click', function () {
        $("#AddToGroup").modal('show');
        return false;
    })
    function DeleteFromGroup(userId) {
        var SelectedGroup = @ViewBag.TrainingGroupId;
        var sendInfo = {
            userId: userId,
            groupId: SelectedGroup
        };

        $.ajax({
            url: '@Url.Action("DeleteFromGroup", "Admin")',
            contentType: "application/json; charset=utf-8",
            type: 'POST',
            data: JSON.stringify(sendInfo),
            dataType: "json",
            success: function() {

            }

        });
        RefreshData();
    }
    function RefreshData() {
        var SelectedGroup = @ViewBag.TrainingGroupId;
        //alert(SelectedGroup);
        var sendInfo = {
            TrainingGroupID: SelectedGroup
        };

        $.ajax({
            url: '@Url.Action("TrainingGroupPartial", "Admin")',
            contentType: "application/json; charset=utf-8",
            type: 'POST',
            data: JSON.stringify(sendInfo),
            //dataType: "json",
            success: function(data) {

                    //alert('add success');
                    $("#DataDisplay").html(data);

        }
    });
    }
</script>