@model Neo.Legitimate.Vehicles.Models.StatusModel
@using Pilotfish.Afx.ComponentModel
@using Pilotfish.Afx.Security
@using Pilotfish.Afx.Mvc

@{
    ViewBag.Title = "Status";
    Layout = "~/Views/Shared/_VehiclesLayout.cshtml";
}

<script type="text/javascript">
    $.extend(ViewModel.prototype,
    {
        userID: ko.observable(@Model.UserID),
        userRoles: ko.mapping.fromJSON('@Html.Raw(Model.UserRoles.ToJson(JsonSerializerOptions.None))'),
        lookups: @Html.Raw(Model.Lookups.ToJson(JsonSerializerOptions.EscapeBackSlash | JsonSerializerOptions.FormatDateTime))
    });
</script>

<div class="contentBlock">
    <div class="header"><h2>Vehicle Request Status</h2><a href="#" data-bind="click: expandList" class="dashboard-expand-icon" style="position: absolute; right: 0px; top: 7px;"><img src="@Url.Content("~/Images/expand-icon.png")" alt="" border="0" /></a></div>
    <div>
        <div id="filterRequestList" style="display: none;">
            <div class="gridview-filter" id="dashboardfilter"></div>
        </div>

        <table class="gridview" id="dashboardgrid" cellspacing="0">
            <thead>
                <tr>
                    <th data-sort-field="ReferenceNumber">Ref #</th>
                    <th data-sort-field="WorkflowFriendlyName">Workflow</th>
                    <th data-sort-field="StepNumber">Step</th>
                    <th data-sort-field="AssignedToName">Assigned</th>
                    <th data-sort-field="CreatedDate">Date Created</th>
                </tr>
            </thead>
            <tbody data-role="template">
                <tr>
			        <td><a href="@Url.Content("~/")${WorkflowControllerName}/Console?workflowid=${WorkflowID}&itemid=${ItemID}">${ReferenceNumber}</a></td>
			        <td>${WorkflowFriendlyName}</td>
			        <td>${StepNumber}</td>
			        <td>${AssignedToName}</td>
			        <td>${CreatedDate}</td>
                </tr>
            </tbody>
        </table>
        
    </div>
    </div>
</div>

<script type="text/javascript">
    $.extend(ViewModel.prototype, {
        expandList: function (data, evt) {
            var link = $(evt.currentTarget);
            var iconImg = $(link).find("img");
            var header = $(link).parent().parent();

            $("#filterRequestList").slideToggle("fast", function () {
                if ($(iconImg).attr("src").indexOf("expand-icon") != -1) {
                    $(iconImg).attr("src", '@Url.Content("~/Images/collapse-icon.png")');
                } else {
                    $(iconImg).attr("src", '@Url.Content("~/Images/expand-icon.png")');
                }
            });
        },

        HomeButtonClick: function (url) {
            $("#consoleInitLoader").show();
            document.location.href = url;
        }
    });

    $("#dashboardgrid").gridview({
        canSort: true,
        canFilter: true,
        filter: $("#dashboardfilter"),
        filterByFields: ["StepNumber", "AssignedToName", "WorkflowInstanceState"],
        dataSet: (function () {
            var instances = ko.mapping.fromJSON('@Html.Raw(Model.WorkflowInstancesInProgress.ToJson(JsonSerializerOptions.FormatDateTime))');

            //This is only so that configuring the filters becomes easier
            $(instances()).each(function (i, item) {
                if (item.StepNumber !== undefined) {
                    return true;
                }

                var assignedToName = ko.observable("");
                var stepNumber = ko.observable("");

                if (item.AssignedTo() !== null) {
                    assignedToName(item.AssignedTo().split('_')[1]);
                    stepNumber(item.AssignedTo().split('_')[2]);
                }

                $.extend(item, { StepNumber: stepNumber, AssignedToName: assignedToName });
            });

            return instances();
        })(),
        canExport: true,
        exportColumns: ["ReferenceNumber", "StepNumber", "AssignedToName", "CreatedByName", "WorkflowInstanceState"]
    });
</script>