@model Neo.LegitimateLicences.ApplicationRequest.ApplicationRequestDashboardModel
@using Neo.Afx.ComponentModel
@using Neo.Afx.Security
@using Neo.Afx.Mvc
@using Neo.LegitimateLicences.Common;

<script type="text/javascript">
@Html.Raw("function ViewModel" + Model.AjaxRequestTicket + "() { }")

@Html.Raw("$.extend(ViewModel" + Model.AjaxRequestTicket + ".prototype,")
{
    data: ko.mapping.fromJSON('@Html.Raw(Model.Data.ToJson(JsonSerializerOptions.EscapeBackSlash | JsonSerializerOptions.FormatDateTime))'),
    appplicationTags: ko.observable(@Html.Raw(Model.Tags.ToJson(JsonSerializerOptions.FormatDateTime | JsonSerializerOptions.EscapeBackSlash))),
    appplicationTagsRequiringReview: ko.observable(@Html.Raw(Model.TagsRequiringReview.ToJson(JsonSerializerOptions.FormatDateTime | JsonSerializerOptions.EscapeBackSlash))),
    comments: ko.observable(@Html.Raw(Model.Comments.ToJson(JsonSerializerOptions.FormatDateTime | JsonSerializerOptions.EscapeBackSlash))),
    application: ko.mapping.fromJSON('@Html.Raw(Model.ApplicationView.ToJson(JsonSerializerOptions.EscapeBackSlash | JsonSerializerOptions.FormatDateTime))'),
    applicationStatusSummary: @Html.Raw(Model.ApplicationStatusSummary.ToJson(JsonSerializerOptions.None)),
    applicationFailedDocumentChecks: @Html.Raw(Model.ApplicationFailedDocumentChecks.ToJson(JsonSerializerOptions.None)),
    addedTag: ko.observable(),
    wf: @Html.Raw(Model.WorkflowInstance.ToJson(JsonSerializerOptions.None))
});
</script>

<script type="text/javascript">
@Html.Raw("$.extend(ViewModel" + Model.AjaxRequestTicket + ".prototype,")
{
         @if(Model.CanAddTags)
         {
                 <text>
                 SaveTag: function(tagID) {
                     var data = {
                         tagID: tagID
                    };
                     $("#TagCard").addClass("is-loading");
                     app.dataManager.post("ApplicationRequest",
                     'ApplicationTagCreate', data,
                     function(result) {
                     if (result.success)
                     {
                         viewModel.appplicationTags(result.tagList);
                         viewModel.appplicationTagsRequiringReview(result.tagsRequiringReview);
                         $("#TagCard").removeClass("is-loading");

                     }
                 }, null);
                },
        </text>
        }

        @if(Model.ManageTagsIsVisible)
        {
            <text>
            ManageApplicationTags: function() {
                var queryString = 'ApplicationRequest/Console?EntityID=@((short)EntityEnum.ApplicationRequestDetails)&ItemID=@Model.ApplicationView.ApplicationDetailID#Tags';
                document.location.href = app.rootUrl + queryString;

            },
            </text>
        }


        @if(Model.ViewTagsLinkIsVisible)
        {
        <text>
            ViewApplicationTags: function() {
                var queryString = 'ApplicationRequest/Console?EntityID=@((short)EntityEnum.ApplicationRequestDetails)&ItemID=@Model.ApplicationView.ApplicationDetailID#TagsHistory';
                document.location.href = app.rootUrl + queryString;

            },
        </text>
        }
});
</script>

<div id="@(new HtmlString("koContainer" + Model.AjaxRequestTicket))">
    @Html.Partial("Console.PageHeader")

    <div class="row">
        <div class="col">
            <div id="MainCard" class="card">
                <div class="card-header navbar">
                    <h4 class="card-title" data-bind="text:wf.Description"></h4>
                </div>
                <div class="card-body">
                    <div class="row" data-bind="foreach:applicationStatusSummary">
                        <div class="item col-sm-12 col-lg-4">
                            <div class="card card-round card-clickable d-flex" style="/*height:75px;*/ text-align:center;"
                                 data-bind="css: { statusComplete: (Status=='Complete'), statusInProgress: (Status=='In Progress'), statusNotRequired:(Status=='Not Required'), statusNotStarted:(Status=='Not Started') }">
                                <div class="card-body align-items-center d-flex justify-content-center">
                                    <h4 data-bind="text:Title + '(' + Status + ')'"></h4>
                                </div>
                            </div>
                        </div>
                    </div>
                    @if (Model.ApplicationFailedDocumentChecks.Count() > 0)
                    {
                        <text>
                            <hr />
                            <div class="row">
                                <div class="item col-sm-9 col-lg-9">
                                    <h4 class="card-title">Failed Document Checks</h4>
                                    <div id="failedDocumentChecks" />
                                </div>
                            </div>
                        </text>
                    }
                </div>
            </div>
        </div>
    </div>

    

    <div class="row">
        <div class="col-sm-3 col-lg-3" data-bind="visible: comments().length > 0">
            <div id="MainCard" class="card">
                <div class="card-header navbar">
                    <h4 class="card-title">
                        Latest Comments
                    </h4>
                </div>
                <div class="card-body">
                    <div data-bind="foreach: comments">
                        <div style="padding-bottom:15px;" class="row">
                            <div class="item col-sm-12 col-lg-12">
                                <div>
                                    <label class="bmd-label-floating" data-bind="text:Comments"></label><br />
                                    <span style="font-weight:bold;" data-bind="text:UserCreatedBy.FullName + ' @@ ' + CreatedDate"></span>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </div>

        @if (Model.TagsRequiringReviewIsVisible)
        {
            <div class="col-sm-6 col-lg-6">
                <div id="MainCard" class="card">
                    <div class="card-header navbar">
                        <h4 class="card-title">
                            @if (Model.ViewTagsLinkIsVisible)
                            {
                                <text>
                                    Tag History
                                </text>
                            }
                            else
                            {

                                <text>
                                    Tags Requiring Review
                                </text>
                            }
                        </h4>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="item col-sm-12 col-lg-12">
                                @if (Model.ViewTagsLinkIsVisible)
                                {
                                    <span class="leading"><a style="cursor:pointer;color:#0000EE;" data-bind="click: ViewApplicationTags">Click here</a> to view all the tags that have been reviewed for this application.</span><br />
                                }
                                else
                                {
                                    if (Model.ManageTagsIsVisible)
                                    {
                                        @Html.Raw("This application has been escalated to you and the following tags will have to be reviewed before the application is returned to the originator:");
                                    }
                                    else
                                    {
                                        @Html.Raw("The application will have to be escalated as the following tags require review before it can be processed further:");
                                    }
                                }

                            </div>
                        </div>
                        <br />
                        <div class="row" data-bind="foreach: appplicationTagsRequiringReview">
                            <div class="item col-sm-4 col-lg-4">
                                <div>
                                    <div class="card card-round card d-flex statusNotRequired" style="text-align:center;">
                                        <div class="card-body align-items-center d-flex justify-content-center">
                                            <h5 data-bind="text: $data.Title"></h5>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="item col-sm-12 col-lg-12">
                                @if (Model.ManageTagsIsVisible)
                                {
                                    <span class="leading"><a style="cursor:pointer;color:#0000EE;" data-bind="click: ManageApplicationTags">Click here</a> to update the tags requiring review.</span>
                                }
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        }

        @if (Model.TagEditorIsVisible)
        {

            <div class="col-sm-6 col-lg-6">
                <div id="MainCard" class="card">
                    <div class="card-header navbar">
                        <h4 class="card-title">
                            Application Tags
                        </h4>
                    </div>
                    <div class="card-body">
                        <div class="row" data-bind="foreach: appplicationTags">
                            <div class="item col-sm-4 col-lg-4">
                                <div>
                                    <div class="card card-round card d-flex statusNotRequired" style="text-align:center;">
                                        <div class="card-body align-items-center d-flex justify-content-center">
                                            <h5 data-bind="text: $data.IsTagCleared == true  ? $data.Title + ' (Cleared)': $data.Title"></h5>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        @if (Model.CanAddTags)
                        {
                            <div class="row">
                                <div class="item col-sm-6 col-lg-6">
                                    <div class="form-group bmd-form-group">
                                        <label class="bmd-label-floating">Add a tag:</label>
                                        <span id="addedTag" class="addedTag" data-picker-bind="modelID: addedTag, template: TagPicker, viewModelName: viewModel"></span>
                                    </div>
                                </div>
                            </div>
                        }

                    </div>
                </div>
            </div>

        }

        @if (Model.HasParentApplication)
        {

            <div class="col-sm-6 col-lg-6">
                <div id="MainCard" class="card">
                    <div class="card-header navbar">
                        <h4 class="card-title">
                            Parent Application
                        </h4>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="item col-sm-12 col-lg-12">
                                <div>
                                    <span>Application created from <a href="~/ApplicationRequest/Console?EntityID=1000&ItemID=@Model.ParentApplicationView.ApplicationDetailID">@Model.ParentApplicationView.ApplicationNumber</a></span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        }


    </div>
    

    <script type="text/javascript">
    @Html.Raw("var viewModel = new ViewModel" + Model.AjaxRequestTicket + "();")

        var pickerTemplates = {
            TagPicker :
            {
                source: 'Tags',
                primaryKey: 'TagID',
                param: 'SearchText',
                top: 20
            }
        };

    $().ready(function () {
        var mainDiv = $("#@(new HtmlString("koContainer" + Model.AjaxRequestTicket))");
        ko.cleanNode(mainDiv[0]);
        ko.applyBindings(viewModel, mainDiv[0]);

        widgets.applyPickerBindingsElement($('#addedTag'), pickerTemplates);

        viewModel.addedTag.subscribe(function (value) {
            if (value) {
                viewModel.SaveTag(value);
            }
        });

        @if (Model.ApplicationFailedDocumentChecks.Count() > 0)
        {
        <text>
            $("#failedDocumentChecks").dxDataGrid(
                {
                    dataSource: viewModel.applicationFailedDocumentChecks,
                    showColumnLines: false,
                    showRowLines: true,
                    rowAlternationEnabled: true,
                    showBorders: true,
                    allowColumnReordering: false,
                    allowColumnResizing: true,
                    wordWrapEnabled: true,
                    columns: [
                        { dataField: "Documentype", caption: "Document" },
                        { dataField: "Question", caption: "Question" },
                        { dataField: "QuestionDocument", caption: "Verifier Comment" }
                    ],
                    paging: {
                        enabled: false
                    }
                });
         </text>
         }
    });
    </script>