@{IEnumerable<Fab2ApprovalSystem.Models.LoginModel> allUsers = ViewBag.AllUsers;}
@{IEnumerable<Fab2ApprovalSystem.Models.LoginModel> TrainingReportUsers = ViewBag.CurrentReportUsers;}
@*<div class="titlebar col-sm-3" id="trainingNotificationTitle">
    <div class="col-sm-1">
        
    </div>
    <div class="col-sm-1">
       
    </div>
    
</div>*@
<style>
    #viewContainer {
        height:600px;
        width:100%;
    }
    #TrainingReportControls{
        background-color:white;
        z-index:1000;
        width:inherit;
    }
    #TrainingReportNotificationTable{
        overflow-y:scroll;
        position:relative;
        height:500px;
    }
</style>
<div id="viewContainer">
    <div id="TrainingReportControls">

        <h4>Training Report Notification</h4>

        Add New User: @Html.DropDownList("TrainingReportUserID", new SelectList(allUsers, "UserID", "FullName"))<input type="button" value="Add" id="TrainingReportAddBtn" />


    </div>
    <div id="TrainingReportNotificationTable">
        <table class="table">

            <tr>
                <th>Name</th>
                <th>Actions</th>
            </tr>

            @foreach (var item in TrainingReportUsers)
            {
                <tr>
                    <td>@item.FullName</td>
                    <td><button type="button" class="btn btn-default" id="DeleteFromTrainingReportGroup" onclick="DeleteFromTrainingReportGroup('@item.UserID')">Delete</button></td>
                </tr>
            }
        </table>
    </div>
    
</div>

<script type="text/javascript">
    $('#TrainingReportAddBtn').on('click', function () {
        var SelectedUser = document.getElementById('TrainingReportUserID').value;
        var sendInfo = {
            userId: SelectedUser,
        };
        //alert(SelectedUser);
        $.ajax({
            type: "POST",
            url: "/Admin/AddToTrainingReport",
            contentType: "application/json; charset=utf-8",
            data: JSON.stringify(sendInfo),
            dataType: "html",
            success: function (r) {

                alert(r);
                RefreshTrainingReportData();
            }
        });


    })
    function DeleteFromTrainingReportGroup(userId) {
        var sendInfo = {
            userId: userId,
        };
        //alert(SelectedUser);
        $.ajax({
            type: "POST",
            url: "/Admin/DeleteFromTrainingReport",
            contentType: "application/json; charset=utf-8",
            data: JSON.stringify(sendInfo),
            dataType: "html",
            success: function (r) {

                alert(r);
                RefreshTrainingReportData();
            }
        });
    }
    function RefreshTrainingReportData() {

        //alert(SelectedGroup);
        var sendInfo = {

        };
        //alert("we get here")
        $.ajax({
            url: '@Url.Action("TrainingReportConfig", "Admin")',

            contentType: "application/json; charset=utf-8",
            type: 'POST',
            data: JSON.stringify(sendInfo),
            //dataType: "html",
            success: function(data) {

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

        }
    });
    }
</script>