@{IEnumerable<Fab2ApprovalSystem.Models.LoginModel> allUsers = ViewBag.AllUsers;}
@{IEnumerable<Fab2ApprovalSystem.Models.LoginModel> TrainingReportUsers = ViewBag.CurrentReportUsers;}
<style>
    #viewContainer {
        height: 600px;
        width: 100%;
    }

    #TECNNotificationControls {
        background-color: white;
        z-index: 1000;
        width: inherit;
    }

    #TECNNoticationTable {
        overflow-y: scroll;
        position: relative;
        height: 500px;
    }
</style>
<div id="viewContainer">
    <div id="TECNNotificationControls">
        <h4>TECN Expiration Notifications</h4>
        Add New User: @Html.DropDownList("TECNExpirationUserID", new SelectList(allUsers, "UserID", "FullName"))<input type="button" value="Add" id="TECNNotificationAddBtn" />
    </div>
    <div id="TECNNoticationTable">
        <table class="table" id="TECNExpirationConfigTable">
            <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="DeleteFromTECNExpirationGroup" onclick="DeleteFromTECNExpirationGroup('@item.UserID')">Delete</button></td>
                </tr>
            }
        </table>
    </div>
</div>
    
    <script type="text/javascript">
    $('#TECNNotificationAddBtn').on('click', function () {
        var SelectedUser = document.getElementById('TECNExpirationUserID').value;
        var sendInfo = {
            userId: SelectedUser,
        };
        //alert(SelectedUser);
        $.ajax({
            type: "POST",
            url: "/Admin/AddToTECNNotification",
            contentType: "application/json; charset=utf-8",
            data: JSON.stringify(sendInfo),
            dataType: "html",
            success: function (r) {

                alert(r);
                RefreshTECNExpirationData();
            }
        });


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

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

        //alert(SelectedGroup);
        var sendInfo = {

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

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

        }
    });
    }
    </script>