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

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

<script type="text/javascript">
    $.extend(ViewModel.prototype,
    {
        userID: ko.observable(@Model.UserID),
        userRoles: ko.mapping.fromJSON('@Html.Raw(Model.UserRoles.ToJson(JsonSerializerOptions.None))'),
        instances: ko.observableArray(@Html.Raw(Model.WorkflowInstancesInProgress.ToJson(JsonSerializerOptions.FormatDateTime))),
        filteredData: ko.observableArray([])
    });
</script>

<div class="contentBlock">
    <div class="header"><h2>Operating Licence 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="ApplicationType">Type</th>
                    <th data-sort-field="StepNumber">Step</th>
                    <th data-sort-field="AssignedToName">Assigned</th>
                    <th data-sort-field="CreatedDate">Date Created</th>
                    <th data-sort-field="Age">Days since Date Created</th>
                </tr>
            </thead>
            <tbody data-role="template">
                <tr>
			        <td><a href="@Url.Content("~/")LicenceIssueRequest/Console?workflowid=5&itemid=${ItemID}" target="_blank">${ReferenceNumber}</a></td>
                    <td>${ApplicationType}</td>
			        <td>${StepNumber}</td>
			        <td>${AssignedToName}</td>
			        <td>${CreatedDate}</td>
                    <td>${Age}</td>
                </tr>
            </tbody>
        </table>
        <div class="buttonDock">
            <button class="ui-button" onclick='$("#dashboardgrid").gridview("exportToExcel")'>Export To Excel</button>
        </div>
        <div class="buttonDock" id="dashboardPager"></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;
        }
    });

    $(document).ready(function () {
        $("#dashboardgrid").gridview({
            canSort: true,
            canFilter: true,
            filter: $("#dashboardfilter"),
            filterByFields: ["ApplicationType", "StepNumber", "AssignedToName"],
            dataSet: (function () {
                var instances = viewModel.instances;

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

                    var assignedToName = "";
                    var stepNumber = "";

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

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

                return instances();
            })(),
            canExport: true,
            exportColumns: ["ReferenceNumber", "ApplicationType", "StepNumber", "AssignedToName"],
            pageSize: 50,
            showPager: true,
            pager: $("#dashboardPager")
        });
    });
</script>