@model IEnumerable<Fab2ApprovalSystem.Models.TrainingAssignment>

@{
    ViewBag.Title = "ViewTrainingAssignments";
    Layout = "~/Views/Admin/_AdminLayout.cshtml";
}

<h2>View Training Assignments - ECN# @ViewBag.ECNNumber - @ViewBag.ECNTitle</h2>
@if (ViewBag.TrainingStatus == true)
{
    <h4 style="color:green">Completed</h4>
}
else
{
    <h4 style="color:red">In-Progress</h4>
}
<style>

    tr:nth-child(even) {
        background: #CCC
    }

    tr:nth-child(odd) {
        background: #FFF
    }

    #cover-spin {
        position: fixed;
        width: 100%;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        background-color: rgba(255,255,255,0.7);
        z-index: 9999;
        display: none;
    }

    @@-webkit-keyframes spin {
        from {
            -webkit-transform: rotate(0deg);
        }

        to {
            -webkit-transform: rotate(360deg);
        }
    }

    @@keyframes spin {
        from {
            transform: rotate(0deg);
        }

        to {
            transform: rotate(360deg);
        }
    }

    #cover-spin::after {
        content: '';
        display: block;
        position: absolute;
        left: 48%;
        top: 40%;
        width: 40px;
        height: 40px;
        border-style: solid;
        border-color: black;
        border-top-color: transparent;
        border-width: 4px;
        border-radius: 50%;
        -webkit-animation: spin .8s linear infinite;
        animation: spin .8s linear infinite;
    }
</style>
<div id="cover-spin"></div>
@if (Session[GlobalVars.IS_ADMIN] != null)
{
    <a href="/Training/ViewTrainings" class="btn btn-primary">Back To Trainings</a>
}
@Html.ActionLink("Go to ECN", "ReadOnly", "ECN", new { IssueID = Convert.ToInt32(ViewBag.ECNNumber) }, new { @class = "btn btn-primary" })
@if (Session[GlobalVars.IS_ADMIN] != null)
{
    <button class="btn btn-primary" id="openAddUserBtn">Add User</button>
    <button class="btn btn-primary" id="openAddGroupBtn">Add Group</button>
}
<table class="table">
    <tr>
        <th>
            @Html.DisplayNameFor(model => model.FullName)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.DateAssigned)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.DateCompleted)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.status)
        </th>
        @if (Session[GlobalVars.IS_ADMIN] != null)
        {
            <th>

            </th>
            <th>

            </th>
        }
    </tr>

    @foreach (var item in Model)
    {
        <tr>
            <td>
                @Html.DisplayFor(modelItem => item.FullName)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.DateAssigned)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.DateCompleted)
            </td>
            @if (item.status == true)
            {
                <td>Complete</td>
            }
            else
            {
                <td>Incomplete</td>
            }
            <td>
                @if (Session[GlobalVars.IS_ADMIN] != null && item.status != true)
                {

                    <button class="btn btn-primary" onclick="DeleteAssignment(@item.ID)">Delete</button>

                }
            </td>
            <td>
                @if (Session[GlobalVars.IS_ADMIN] != null && item.status != true)
                {

                    <button id="ReminderButton" class="btn btn-primary" onclick="SendReminder(@item.UserID, @item.ID, @Convert.ToInt32(ViewBag.ECNNumber))">Remind</button>

                }
            </td>
        </tr>

    }

</table>
<div class="modal fade" id="AddUserForm" tabindex="0" role="dialog" aria-hidden="true" data-backdrop="static">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header" style="background-color: #e4daa1; font-size: 15px;">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="myModalLabel">Manually add a user to an existing training</h4>
            </div>
            <input type="hidden" value="@ViewBag.TrainingId" id="txtTrainingId" />
            <input type="hidden" value="@ViewBag.ECNNumber" id="txtEcnId" />
            <div class="modal-body" style="background-color: #75adc6; font-size: 12px;">
                Add New User: @Html.DropDownList("NewUserToAdd", new SelectList(ViewBag.AllUsers, "UserID", "FullName"))
                </div>
                <div class="modal-footer" style="background-color: #e4daa1; font-size: 15px;">
                    <button type="button" class="btn btn-default" id="SaveAddUser">Add User</button>
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
</div>
<div class="modal fade" id="AddGroupForm" tabindex="0" role="dialog" aria-hidden="true" data-backdrop="static">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header" style="background-color: #e4daa1; font-size: 15px;">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="myModalLabel">Manually add a group to an existing training</h4>
            </div>
            <input type="hidden" value="@ViewBag.TrainingId" id="txtTrainingId" />
            <input type="hidden" value="@ViewBag.ECNNumber" id="txtEcnId" />
            <div class="modal-body" style="background-color: #75adc6; font-size: 12px;">
                Add New Group: @Html.DropDownList("NewGroupToAdd", new SelectList(ViewBag.AllGroups, "TrainingGroupID", "TrainingGroupName"))
            </div>
            <div class="modal-footer" style="background-color: #e4daa1; font-size: 15px;">
                <button type="button" class="btn btn-default" id="SaveAddGroup">Add Group</button>
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>
<script>
    function DeleteAssignment(assignmentId) {
        var sendInfo = {
            assignmentID: assignmentId

        };
        $('#cover-spin').show(0);


        $.ajax({
            type: "POST",
            url: "/Training/DeleteAssignment",
            contentType: "application/json; charset=utf-8",
            data: JSON.stringify(sendInfo),
            dataType: "json",
            success: function (r) {
                window.location.reload();
            },
            error: function (req, status, error) {
                alert(error);
                $('#cover-spin').hide(0);
            }
        });
    }
    function SendReminder(userId, assignmentId, ecnId) {
        
        var sendInfo = {
            userId: userId,
            assignmentId: assignmentId,
            ecnId: ecnId

        };
        $.ajax({
            type: "POST",
            url: "/Training/NotifyTrainee",
            contentType: "application/json; charset=utf-8",
            data: JSON.stringify(sendInfo),
            dataType: "json",
            success: function (r) {

            }

        });
        alert('Reminder Sent...');
    }
    
    $("#openAddUserBtn").on('click', function (e) {

        ClearAddUserForm();
        $("#AddUserForm").modal("show");
    })
    $("#openAddGroupBtn").on('click', function (e) {

        ClearAddGroupForm();
        $("#AddGroupForm").modal("show");
    })
    $('#SaveAddUser').on('click', function () {
        $('#cover-spin').show(0);
        var SelectedUser = document.getElementById('NewUserToAdd').value;
        var ecnId = document.getElementById('txtEcnId').value;
        var trainingId = document.getElementById('txtTrainingId').value;
        if (SelectedUser != '') {
            $.ajax({
                url: "/Training/AddUserToTrainingAdHoc",
                type: "POST",
                datatype: "json",
                data: {
                    trainingId: trainingId,
                    traineeId: SelectedUser,
                    ecnId: ecnId,
                },
                success: function (result) {
                    alert(result);
                    window.location.reload();
                    $("#AddUserForm").modal("hide");
                    $('#cover-spin').hide(0);
                },
                error: function (result) {
                    alert("Failed " + result);
                    $('#cover-spin').hide(0);
                }
            });
        }



    })
    $('#SaveAddGroup').on('click', function () {
        $('#cover-spin').show(0);
        var SelectedGroup = document.getElementById('NewGroupToAdd').value;
        var ecnId = document.getElementById('txtEcnId').value;
        var trainingId = document.getElementById('txtTrainingId').value;
        if (SelectedGroup != '') {
            $.ajax({
                url: "/Training/AddGroupToTrainingAdHoc",
                type: "POST",
                datatype: "json",
                data: {
                    trainingId: trainingId,
                    groupId: SelectedGroup,
                    ecnId: ecnId,
                },
                success: function (result) {
                    alert(result);
                    window.location.reload();
                    $("#AddGroupForm").modal("hide");
                    $('#cover-spin').hide(0);
                },
                error: function (result) {
                    alert("Failed " + result);
                    $('#cover-spin').hide(0);
                }
            });
        }



    })
    function ClearAddUserForm() {
        document.getElementById('NewUserToAdd').value = '';
    }
    function ClearAddGroupForm() {
        document.getElementById('NewGroupToAdd').value = '';
    }
</script>