@model Neo.LegitimateLicences.AccreditationIssueRequest.AccreditationIssueRequestDashboardModel
@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,")
{
    accreditationIssue: ko.mapping.fromJSON('@Html.Raw(Model.AccreditationIssueView.ToJson(JsonSerializerOptions.EscapeBackSlash | JsonSerializerOptions.FormatDateTime))'),
    comments: ko.observable(@Html.Raw(Model.Comments.ToJson(JsonSerializerOptions.FormatDateTime | JsonSerializerOptions.EscapeBackSlash))),
    wf: @Html.Raw(Model.WorkflowInstance.ToJson(JsonSerializerOptions.None)),
    accreditationIssuingStatusSummary: @Html.Raw(Model.AccreditationIssuingStatusSummary.ToJson(JsonSerializerOptions.None)),
    data: ko.mapping.fromJSON('@Html.Raw(Model.Data.ToJson(JsonSerializerOptions.EscapeBackSlash | JsonSerializerOptions.FormatDateTime))')
});
</script>

<script type="text/javascript">
@Html.Raw("$.extend(ViewModel" + Model.AjaxRequestTicket + ".prototype,")
{
    RecalculateExceptions: function() {
        var s = viewModel;
        var pushData = {
            accreditationID: s.accreditationIssue.VerifiedAccreditationID()
        };
        $("#RecalculateExceptions").addClass("is-loading");

        app.dataManager.post("AccreditationIssueRequest", 'RecalculateExceptions', pushData,
            function (result) {
                if (result != null) {
                    $("#RecalculateExceptions").removeClass("is-loading");
                    if (result.Success) {
                        app.reload();
                    }
                    else {
                        app.dialogs.showError.fire({ title: 'Error', html: result.Error });
                    }
                }
            }, function (errorObj, errorStatus, errorText) {
                app.dialogs.showError.fire({ title: 'Error', html: errorText });
            });
    }
});
</script>

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

    <div class="row">
        <div class="col">
            <div 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:accreditationIssuingStatusSummary">
                        <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>
                    <div class="card-body">

                            <div class="card-title">Exceptions</div>
                            <div class="card-content">
                                <span data-bind="visible: data.Exceptions().length == 0">There are no exceptions on this accreditation.</span>
                                <ul data-bind="foreach: data.Exceptions(), visible: data.Exceptions().length > 0">
                                    <li data-bind="text:Exception()"></li>
                                </ul>
                            </div>
                            <div class="card-footer">
                                <button data-bind="click: RecalculateExceptions, visible: data.Exceptions().length > 0" class="btn btn-primary pull-right">Recalculate Exceptions</button>
                            </div>

                    </div>
                </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>
    </div>
</div>


@*<div class="row">
            <div class="col">
                <div class="card">
                    <div class="card-header navbar">
                        <h4 class="card-title">New operating licence (from source) for licence LKN123123</h4>

                        <ul class="navbar-nav topbar-nav ml-md-auto align-items-center" style="display:flex; flex-direction:row">
                            <li class="nav-item">
                                <a href="#" class="nav-link quick-sidebar-toggler"><i class="fas fa-list-alt"></i></a>
                            </li>
                        </ul>
                    </div>
                    <div class="row card-body">
    <pre>
        snazzy application dashboard with....
            date created (+days since then)
            green/red/yellow flag based on age
            current process status (graphical?)
            lastest comments
    </pre>
                    </div>
                </div>
            </div>
        </div>
    </div>*@

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

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