@model IEnumerable<Fab2ApprovalSystem.Models.Training>

@{
    ViewBag.Title = "View Trainings";
    Layout = "~/Views/Admin/_AdminLayout.cshtml";
}
<script src="~/Scripts/excel-bootstrap-table-filter-bundle.js"></script>
<script src="~/Scripts/moment.js"></script>
<link rel="stylesheet" href="~/Content/excel-bootstrap-table-filter-style.css" />
<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>
<div id="cover-spin">

</div>
<button id="ShowManualExecutionForm">Manually Execute an ECN Training</button>
<div id="displayTable">
    <table class="table">
        <thead>
            <tr>
                <th class="filterableCol">
                    ECN#
                </th>
                <th class="filterableCol">
                    ECN Title
                </th>
                <th class="filterableCol" dateFormat="M/D/YYYY hh:mm:ss" isType="date">
                    Started Date
                </th>

                <th class="filterableCol" dateFormat="M/D/YYYY hh:mm:ss" isType="date">
                    Completed Date
                </th>
                <th>
                    Assigned Groups
                    <br />
                    @Html.DropDownList("GroupFilter", new SelectList(ViewBag.TrainingGroups, "TrainingGroupID", "TrainingGroupName"), "- Select Group Filter -")
                </th>
                <th class="filterableCol">
                    Status
                </th>
                <th>

                </th>
                <th>

                </th>
            </tr>
        </thead>
        <tbody>
            @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 (GlobalVars.IsAdmin(Session))
                        {
                            <td>
                                @Html.ActionLink("Delete", "DeleteTrainingByID", new { trainingId = item.TrainingID }, new { @class = "btn btn-primary" })
                            </td>
                        }
                    </tr>
                }
            }
        </tbody>
    </table>
</div>


<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;">
                <label for="ecnNumberToExecute">ECN#: </label>
                <input type="text" id="ecnNumberToExecute" />
                <button type="button" class="btn btn-default" id="CheckECN">Check ECN</button>
                <label for="CheckECN" id="ECNCheckMessage"></label>
                <div id="TrainingGroupOptions" >
                    @(Html.Kendo().MultiSelect()
                    .Name("TrainingGroupIDs")
                    .BindTo(new SelectList(ViewBag.AllGroups, "TrainingGroupID", "TrainingGroupName"))
                    .HtmlAttributes(new { style = "font-size:10px" })
                    .Value(ViewBag.Nothing)
                    )
                </div>
            </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>
    $('#displayTable').excelTableFilter();
    $('#GroupFilter').on('change', function () {
        $('#cover-spin').show(0);
        var SelectedGroup = $('#GroupFilter').val();

        var url = '@Html.Raw(Url.Action("ViewTrainings", "Training", new { filterType = 1, filterValue = "Group" }))';
            url = url.replace('Group', SelectedGroup);
        window.location.href = url;
        $('#cover-spin').hide(0);
    })
    $("#ShowManualExecutionForm").on('click', function (e) {

        ClearECNTrainingExecuteForm();
        $("#ManualECNTrainingExecuteForm").modal("show");
    })
    
    $("#ExecuteManualTraining").on('click', function () {
        $('#cover-spin').show(0);
        var ecnId = $("#ecnNumberToExecute").val();
        var trainingGroupIds = $("#TrainingGroupIDs").data("kendoMultiSelect").value();
        trainingGroupIds = trainingGroupIds;
        console.log(trainingGroupIds);
        //trainingGroupIds = trainingGroupIds.join();
        if (trainingGroupIds == '') {
            $('#ECNCheckMessage').text("Please select training groups to assign to.");
            $('#ECNCheckMessage').css("color", "red");
            return;
        }
        //alert(trainingGroupIds);

        if (ecnId != '' || ecnId != null) {
            if (confirm("Are you sure you want to execute this training?")) {

                var sendData = {
                    ecnId: ecnId,
                    trainingGroupsIn: trainingGroupIds
                }
                $.ajax({
                    url: "/Training/ManuallyExecuteECNTraining",
                    type: "POST",
                    datatype: "json",
                    contentType: 'application/json; charset=utf-8',
                    data: JSON.stringify(sendData),
                    success: function (data) {
                        alert(data);
                        $("#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);
        }
    })
    $("#CheckECN").on('click', function () {
        $('#ECNCheckMessage').text("");
        var ecnId = $("#ecnNumberToExecute").val();

        if (ecnId != '') {
            $.ajax({
                url: "/Training/CheckECN",
                type: "POST",
                datatype: "json",
                data: {
                    ecnId: ecnId
                },
                success: function (result) {
                    $(result).each(function (i, val) {
                        console.log(val);
                        
                    });
                    $("#TrainingGroupIDs").data("kendoMultiSelect").value(result)
                    $('#ECNCheckMessage').text("ECN Found.");
                    $('#ECNCheckMessage').css("color", "green");
                    if (result.indexOf("ECN not yet approved.") > 0) {
                        $('#ECNCheckMessage').text("ECN found, but not yet approved. Please approve before continuing.");
                        $('#ECNCheckMessage').css("color", "red");
                    }
                },
                error: function (result) {
                    $('#ECNCheckMessage').text("Error Getting ECN");
                    $('#ECNCheckMessage').css("color", "red");
                }
            });
        }
        else {
            $('#ECNCheckMessage').text("Please enter an ECN number...");
            $('#ECNCheckMessage').css("color", "red");
        }
    })

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