@model  Neo.LegitimateLicences.MemberConsole.ApplicationsModel
@using Neo.Afx.ComponentModel
@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,")
{
        MemberDetail: ko.mapping.fromJSON('@Html.Raw(Model.Member.ToJson(JsonSerializerOptions.FormatDateTime | JsonSerializerOptions.EscapeBackSlash))'),
        Applications: @Html.Raw(Model.Applications.ToJson(JsonSerializerOptions.FormatDateTime | JsonSerializerOptions.EscapeBackSlash)),
        entityID: ko.mapping.fromJSON('@Html.Raw(Model.entityID.ToJson(JsonSerializerOptions.None))'),
        itemID: ko.mapping.fromJSON('@Html.Raw(Model.itemID.ToJson(JsonSerializerOptions.None))'),
        documentStoreLocationID: ko.observable(@Model.DocumentStoreLocationID)
});
</script>

<script type="text/javascript">
@Html.Raw("$.extend(ViewModel" + Model.AjaxRequestTicket + ".prototype,")
{
        OpenWorkflow: function (data) {
            var queryString = 'workflowid=1&itemid=' + data.ApplicationDetailID;
            document.location.href = "/ApplicationRequest/Console?" + queryString; // + "#Default?" + queryString;
        }
});
</script>

<div id="@(new HtmlString("koContainer" + Model.AjaxRequestTicket))">
    <div class="page-header flex-lock">
        <h4 class="page-title">Applications</h4>
        <ul class="breadcrumbs">
            <li class="nav-home">
                <a href="/#Members/Default">
                    <i class="flaticon-home"></i>
                </a>
            </li>
            <li class="separator">
                <i class="flaticon-right-arrow"></i>
            </li>
        </ul>
    </div>

    <div class="row">
        <div class="col">
            <div id="TabbedCard" class="card">
                <div class="card-header navbar">
                    <h4 class="card-title" data-bind="text:MemberDetail.FullName"></h4>
                </div>
                <div class="card-body">
                    <div data-bind="visible: Applications.length > 0" id="searchResults"></div>
                    <div class="clearfix"></div>
                    <div data-bind="visible: Applications.length == 0">There are no applications linked to this member.</div>
                </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]);

        $("#searchResults").dxDataGrid(
            {
                dataSource: viewModel.Applications,                
                showColumnLines: false,
                showRowLines: true,
                rowAlternationEnabled: true,
                showBorders: true,
                allowColumnReordering: false,
                allowColumnResizing: true,
                columns: [
                    { dataField: "ApplicationNumber", caption: "Application Number" },
                    { dataField: "ApplicationDescription", caption: "Description" },
                    { dataField: "WorkflowStatus", caption: "Status" }
                ],
                paging: {
                    enabled: false
                },
                selection: {
                    mode: "single"
                },
                onSelectionChanged: function (selectedItems) {
                    var data = selectedItems.selectedRowsData[0];
                    if (data) {
                        var event = { ctrlKey: false };
                        $("#searchResults").addClass("is-loading");
                        viewModel.OpenWorkflow(data);
                    }
                }
            });

    });
</script>