@model Neo.LegitimateLicences.Web.Models.Afx.AfxTasksModel
@using Neo.Afx.ComponentModel
@using Neo.Afx.Mvc

@{
    Layout = "~/Views/Shared/_LayoutBlank.cshtml";
}

<script type="text/javascript">
    function TaskViewModel() { }

    $.extend(TaskViewModel.prototype,
        {
            userID: ko.observable(@Model.UserID),
            userRoles: ko.mapping.fromJSON('@Html.Raw(Model.UserRoles.ToJson(JsonSerializerOptions.None))'),

            UserIsAdministrator: ko.observable(@Model.UserIsAdministrator.ToString().ToLower()),

            entityID: ko.observable(@Model.EntityID),
            itemID: ko.observable(@Model.ItemID),

            workflowInstance: ko.mapping.fromJSON('@Html.Raw(Model.WorkflowInstance.ToJson(JsonSerializerOptions.EscapeBackSlash | JsonSerializerOptions.FormatDateTime))'),
            workflowInstanceRoute: ko.mapping.fromJSON('@Html.Raw(Model.WorkflowInstanceRoute.ToJson(JsonSerializerOptions.EscapeBackSlash | JsonSerializerOptions.FormatDateTime))'),

            taskReassignTaskInstanceID: ko.observable(0),
            taskReassignToUserID: ko.observable(0),
            taskReassignUserRoles: ko.observableArray([]),
            taskReassignComments: ko.observable(""),

            CanReassign: function (taskInstance) {
                @if (Model.CanReassign)
                {                    
                    <text>
                        return (true && taskInstance.WorkflowInstanceTaskStatusID() === 1);
                    </text>
                }
                else
                {
                    <text>
                        return false;
                    </text>
                }

            },
            ReassignTaskToSelf: function (workflowInstanceTaskID) {
                var self = this;
                $('.quick-sidebar-overlay').remove();
                app.dialogs.showConfirm.fire({
                    title: "Are you sure you want to reassign this task to yourself?",
                    showCancelButton: true,                    
                }).then(
                    function(dialogResult) {
                        if (dialogResult.value) {
                            $('#formTasks').addClass("is-loading");

                            var url = app.serviceUrl + "WorkflowService.svc/ReAssignWorkflowInstanceTask";
                            var data = {
                                workflowInstanceTaskID: workflowInstanceTaskID,
                                reassignedToID: @Model.UserID,
                                comments: 'Re-assigned to self.'
                            };

                            app.dataManager.postUrl(url, data, function (results) {
                                app.reload();
                            },
                            function (errorObj, errorStatus, errorText) {
                                app.dialogs.showError.fire({ title: "Reassign Error", html: errorText });
                            });
                        };
                    }
                );

            }
        });
</script>

<div id="formTasks">
    <h4>@ViewBag.Title</h4>
    <ul class="sidebarTimeline" data-bind="foreach: workflowInstance.WorkflowInstanceTasks">
        <li>
            <div class="header">
                <span data-bind="html: Description"></span>                
            </div>
            <div class="content" style="margin-left:5px;">
                <span data-bind="html: 'assigned on <i>' + CreatedDate() + '</i>'" style="display:block;"></span>
                <span data-bind="html: 'to <i>' + AssignedTo.KnownAs() + '</i>'" style="display:block;margin-left:15px;"></span>
                <!-- ko if: $data.DateCompleted() != null -->
                <span data-bind="html:WorkflowInstanceTaskStatus.Description().toLowerCase() + ' on <i>' + DateCompleted() + '</i>'" style="display:block;"></span>
                <span data-bind="html:'by <i>' + CompletedBy.KnownAs() + '</i>'" style="display:block;margin-left:15px;"></span>
                <!-- /ko -->
                <!-- ko if: $data.DateCompleted() == null -->
                <span style="display:block;">and is still outstanding</span>
                <span style="display:block; margin-bottom:30px;">
                    <button style="margin-bottom:5px;" id="reassignTask" class="btn btn-primary float-right" data-bind="enable: $parent.CanReassign($data), click: function () { OpenSidepane('/Afx/ReassignTask?entityID=@Model.EntityID&itemID=@Model.ItemID&taskID='+$data.WorkflowInstanceTaskID()) }, visible: $parent.CanReassign($data)">Re-assign task</button>
                </span><br/>
                <span style="display:block; margin-bottom:30px;">
                    <button id="reassignTaskToMe" class="btn btn-primary float-right" data-bind="enable: $data.canReAssignToSelf, click: function () { $parent.ReassignTaskToSelf($data.WorkflowInstanceTaskID()) }, visible: $data.canReAssignToSelf">Assign to me</button>
                </span>
                <!-- /ko -->
            </div>
            @*<div class="footer float-right"></div>*@
        </li>
    </ul>

</div>

<script type="text/javascript">
    var taskViewModel = new TaskViewModel();

    $().ready(function () {
        var mainDiv = $("#formTasks");
        ko.cleanNode(mainDiv[0]);
        ko.applyBindings(taskViewModel, mainDiv[0]);

    });
</script>