@model IEnumerable<Fab2ApprovalSystem.Models.Training>

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

<h2>View Trainings</h2>
<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>
<button id="ShowManualExecutionForm">Manually Execute an ECN Training</button>
<table class="table">
    <tr>
        <th>
            @Html.DisplayNameFor(model => model.ECN)
        </th>
        <th>
            ECN Title
        </th>
        <th>
            @Html.DisplayNameFor(model => model.StartedDate)
        </th>

        <th>
            @Html.DisplayNameFor(model => model.CompletedDate)
        </th>
        <th>
            Assigned Groups
        </th>
        <th>
            @Html.DisplayNameFor(model => model.Status)
        </th>
        <th>

        </th>
    </tr>

    @foreach (var item in Model)
    {
        if (item.Deleted != true)
        {
            <tr>
                <td>
                    @Html.DisplayFor(modelItem => item.ECN)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.Title)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.StartedDate)
                </td>

                <td>
                    @Html.DisplayFor(modelItem => item.CompletedDate)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.ECNTrainingGroups)
                </td>
                @if (item.Status == true)
                {
                    <td>Complete</td>
                }
                else
                {
                    <td>In Progress</td>
                }
                <td>
                    @Html.ActionLink("View", "ViewTrainingAssignments", new { trainingID = item.TrainingID }, new { @class = "btn btn-primary" })
                </td>
                @if ((bool)Session[GlobalVars.IS_ADMIN] == true)
                {
                    <td>
                        @Html.ActionLink("Delete", "DeleteTrainingByID", new { trainingId = item.TrainingID }, new { @class = "btn btn-primary" })
                    </td>
                }
            </tr>
        }
    }

</table>

<div class="modal fade" id="ManualECNTrainingExecuteForm" 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 Execute a Training - Use Sparingly as this will delete any existing training and start a new one.</h4>
            </div>
            <div class="modal-body" id="CAFindingsAttachmentContainer" style="background-color: #75adc6; font-size: 12px;">
                <input type="text" id="ecnNumberToExecute" />
            </div>
            <div class="modal-footer" style="background-color: #e4daa1; font-size: 15px;">
                <button type="button" class="btn btn-default" id="ExecuteManualTraining">Execute</button>
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>
<script>
    $("#ShowManualExecutionForm").on('click', function (e) {

        ClearECNTrainingExecuteForm();
        $("#ManualECNTrainingExecuteForm").modal("show");
    })
    
    $("#ExecuteManualTraining").on('click', function () {
        $('#cover-spin').show(0);
        var ecnId = $("#ecnNumberToExecute").val();

        if (ecnId != '' || ecnId != null) {
            if (confirm("Are you sure you want to execute this training?")) {
                $.ajax({
                    url: "/Training/ManuallyExecuteECNTraining",
                    type: "POST",
                    datatype: "json",
                    data: {
                        ecnId: ecnId
                    },
                    success: function (data) {
                        alert('success');
                        $("#ManualECNTrainingExecuteForm").modal("hide");
                        $('#cover-spin').hide(0);
                    },
                    error: function (result) {
                        alert("Failed " + result);
                        $('#cover-spin').hide(0);
                    }
                });
            }
        }
        else {
            alert('No ECN ID entered');
            $('#cover-spin').hide(0);
        }
    })

    function ClearECNTrainingExecuteForm() {
        $("#ecnNumberToExecute").val('');
    }
</script>