@model IEnumerable<Fab2ApprovalSystem.Models.TrainingGroup>
    <style>
        tr:nth-child(even) {
            background: #CCC
        }

        tr:nth-child(odd) {
            background: #FFF
        }
    </style>
<p>
    <input type="button" value="Add Training Group" class="btn btn-success btn-xs" id="AddTrainingGroup" />
</p>
<div id="displayTable">
    <table class="table">
        <thead>
            <tr>
                <th class="filterableCol">
                    Group Name:
                </th>
                <th>Actions:</th>
            </tr>
        </thead>
        <tbody>
            @foreach (var item in Model)
            {
                <tr>
                    <td>
                        @Html.DisplayFor(modelItem => item.TrainingGroupName)
                    </td>
                    <td>
                        <a href="~/Admin/ViewTrainingGroup?TrainingGroupID=@item.TrainingGroupID" class="btn btn-default">View/Edit Group</a>
                        @*<input type="button" class="btn btn-default" value="View/Edit Group" />*@
                        <input type="button" class="btn btn-default" value="Delete" onclick="DeleteGroup('@item.TrainingGroupID')" />
                    </td>
                </tr>
            }
        </tbody>

    </table>
</div>
<div class="modal fade" id="AddGroup" 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 Training Group</h3>
            </div>
            <div class="modal-body">

                <p>New Group Name: </p>
                <input type="text" id="GroupName" />
                <input type="button" value="Save" onclick="SaveGroup()" />

            </div>
            <div class="modal-footer" style="background-color: #fce0a3; ">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript">
$('#displayTable').excelTableFilter();
$(document).ready(function () {
    //RefreshGroups();
});
function SaveGroup() {
    groupName = document.getElementById('GroupName').value;
    alert('test');
    $.ajax({
        type: "POST",
        url: "/Admin/AddNewTrainingGroup",
        contentType: "application/json; charset=utf-8",
        data: '{"groupName":"' + groupName + '"}',
        dataType: "json",
        success: function () {
            RefreshGroups();
        },
        error: function (req, status, error) {
            alert(error);
        }
    });
    $("#AddGroup").modal('hide');

}

$('#AddTrainingGroup').on('click', function () {
    $("#AddGroup").modal('show');
    return false;
})
function DeleteGroup(groupID) {
    $.ajax({
        type: "POST",
        url: "/Admin/DeleteTrainingGroup",
        contentType: "application/json; charset=utf-8",
        data: '{"groupID":"' + groupID + '"}',
        dataType: "json",
        success: function () {
            RefreshGroups();
        },
        error: function (req, status, error) {
            alert(error);
        }
    });
}
function RefreshGroups() {
    $.ajax({
    url: '@Url.Action("TrainingGroups", "Admin")',
    type: 'POST',
    success: function(data) {
        if (data) {  // check if data is defined
            $("#GroupsDisplay").html(data);
        }
    }
});
}

</script>