mesa-fab-approval/Fab2ApprovalSystem/Views/Training/ViewTrainingAssignmentsReportView.cshtml

@model IEnumerable<Fab2ApprovalSystem.Models.TrainingAssignment>
@{IEnumerable<Fab2ApprovalSystem.Models.TrainingGroup> trainingGroups = ViewBag.TrainingGroups;}
<h2>View Training Assignments - ECN# @ViewBag.ECNNumber - @ViewBag.ECNTitle</h2>
<div id="buttons">
    <button class="btn btn-default btn-primary" id="BackToTraining">Back To All Training</button>
    @Html.ActionLink("Go to ECN", "ReadOnly", "ECN", new { IssueID = Convert.ToInt32(ViewBag.ECNNumber) }, new { @class = "btn btn-primary" })
    <button class="btn btn-default btn-primary" id="ResetFilters">Reset Filters</button>
</div>
@if (ViewBag.TrainingStatus == true)
{
    <h4 style="color:green">Completed - @ViewBag.PercentComplete</h4>
}
else
{
    <h4 style="color:red">In-Progress - @ViewBag.PercentComplete</h4>
}
<style>

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

    tr:nth-child(odd) {
        background: #FFF
    }
</style>

<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>
            Group Filter
            <br />
            @Html.DropDownList("GroupFilter", new SelectList(trainingGroups, "TrainingGroupID", "TrainingGroupName"), "- Select Group Filter -")
        </th>
        <th>
            @Html.DisplayNameFor(model => model.status)
            <br />
            <select id="StatusFilter">
                <option value="0">- Select an option -</option>
                <option value="1">Complete</option>
                <option value="2">Incomplete</option>
                <option value="3">Cancelled</option>
            </select>
        </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>
        <td></td>

        @if (item.status == true)
        {
            if (item.Deleted == true)
            {
                <td>Cancelled</td>
            }
            else
            {
                <td>Complete</td>
            }
            
        }
        else
        {
            <td>Incomplete</td>
        }

    </tr>

    }

</table>
<script>
    $('#BackToTraining').on('click', function () {
        //var SelectedGroup = document.getElementById('GroupFilter').value;
        var sendInfo;
        var groupFilter = '@ViewBag.GroupFilter';
        if (groupFilter == '') {
            sendInfo = {
                filterType: 0,
                filterValue: ''

            };
        }
        else {
            sendInfo = {
                filterType: 1,
                filterValue: groupFilter

            };
        }

        //alert(SelectedUser);
        $.ajax({
            url: '@Url.Action("TrainingReportsView", "Training")',
            contentType: "application/json; charset=utf-8",
            type: 'POST',
            data: JSON.stringify(sendInfo),
            //dataType: "json",
            success: function(data) {

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

        }
        });

    })
    $('#StatusFilter').on('change', function () {

        var SelectedStatus = document.getElementById('StatusFilter').value;
            if (SelectedStatus != '0') {
                var sendInfo = {
                trainingID: @ViewBag.trainingID,
                statusFilter: SelectedStatus,
                groupFilter: '@ViewBag.GroupFilter'
            };
            $.ajax({
                url: '@Url.Action("ViewTrainingAssignmentsReportView", "Training")',
                contentType: "application/json; charset=utf-8",
                type: 'POST',
                data: JSON.stringify(sendInfo),
                success: function(data) {
                    $("#DataDisplay").html(data);
                }
            });
        }
    })
        $('#GroupFilter').on('change', function () {

            var SelectedGroup = document.getElementById('GroupFilter').value;
            var SelectedStatus = document.getElementById('StatusFilter').value;
            if (SelectedGroup != '0') {
                var sendInfo = {
                trainingID: @ViewBag.trainingID,
                statusFilter: SelectedStatus,
                    groupFilter: SelectedGroup
            };
            $.ajax({
                url: '@Url.Action("ViewTrainingAssignmentsReportView", "Training")',
                contentType: "application/json; charset=utf-8",
                type: 'POST',
                data: JSON.stringify(sendInfo),
                success: function(data) {
                    $("#DataDisplay").html(data);
                }
            });
        }
    })
    $('#ResetFilters').on('click', function () {

        var sendInfo = {
                trainingID: @ViewBag.trainingID,
                statusFilter: ""
            };
        //alert(SelectedUser);
        $.ajax({
            url: '@Url.Action("ViewTrainingAssignmentsReportView", "Training")',
            contentType: "application/json; charset=utf-8",
            type: 'POST',
            data: JSON.stringify(sendInfo),
            //dataType: "json",
            success: function(data) {

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

        }
        });

    })
</script>