@model Neo.LegitimateLicences.InterDepartment.ReleaseDataModel
@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,")
{
        PendingApplications: ko.observable(@Html.Raw(Model.PendingApplications.ToJson(JsonSerializerOptions.FormatDateTime | JsonSerializerOptions.EscapeBackSlash)))
});
</script>

<script type="text/javascript">
@Html.Raw("$.extend(ViewModel" + Model.AjaxRequestTicket + ".prototype,")
{
        OpenApplicationRequestConsole: function (applicationDetailID) {
            var queryString = 'EntityID=1000&ItemID=' + applicationDetailID + '#Form';
            var url = window.location.origin + app.rootUrl + 'ApplicationRequest/Console?' + queryString;

            var win = window.open(url, '_blank');
            win.focus();
        },

        ReleaseApplicationRequestData: function (applicationDetailID, referenceNumber) {
            var s = this;
            app.dialogs.showConfirm.fire({
                title: "Are you sure you want to release application's " + referenceNumber + " data?",
                input: 'text',
                showCancelButton: true,
                inputValidator: function (value) {
                    if (value) {
                        return value.length < 10 && 'Please enter at least 10 characters'
                    }
                    else {
                        return !value && 'Please enter a comment'
                    }
                }
            }).then(
                function(dialogResult) {
                    if (dialogResult.value) {
                        var data = {
                            applicationDetailID: applicationDetailID,
                            comments: dialogResult.value
                        };
                        $("#searchResults").addClass("is-loading");
                        app.dataManager.post("InterDepartment",
                            'ReleaseTATApplicationsPendingData', data,
                            function (result) {
                                if (result != null) {
                                    $("#searchResults").removeClass("is-loading");
                                    if (result.ErrorMessage == "") {
                                        s.PendingApplications(result.Result);
                                        $('#searchResults').dxDataGrid('instance').option('dataSource', viewModel.PendingApplications());
                                    }
                                    else {
                                        $("#searchResults").removeClass("is-loading");
                                        app.dialogs.showError.fire({ html: result.ErrorMessage });
                                    }
                                }
                            }, null);
                    };
                }
            );
        }
});
</script>

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

    <div class="row" id="#searchConsole">
        <div class="col">
            <div id="TabbedCard" class="card">
                <div class="card-body" data-bind="visible: PendingApplications().length > 0 ">
                    <div id="searchResults"></div>
                    <div class="clearfix"></div>
                </div>

                <div data-bind="visible: PendingApplications().length == 0"> 
                    <div class="card-body" >
                        There are no applications awaiting data release.
                    </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.PendingApplications,
                showColumnLines: false,
                showRowLines: true,
                rowAlternationEnabled: true,
                showBorders: true,
                allowColumnReordering: false,
                allowColumnResizing: true,
                columns: [
                    { dataField: "ApplicationNumber", caption: "TAT Application Number" },
                    { dataField: "OriginalApplicationNumber", caption: "Application Number" },
                    {
                        caption: "",
                        cellTemplate: function (container, options) {
                            var rowData = options.row.data;
                            var button = "";
                            button = '<button href="#" style="width" class="btn btn-primary btn-sm mr-1" style="float: right;" onclick="viewModel.OpenApplicationRequestConsole(' + rowData.CopiedFromApplicationDetailID + ')">' + 'View Application' + '</button>';
                            $(button).appendTo(container);
                        }
                    },
                    {
                        caption: "",
                        cellTemplate: function (container, options) {
                            var rowData = options.row.data;
                            var button = "";
                            button = '<button href="#" style="width" class="btn btn-primary btn-sm mr-1" style="float: right;" onclick="viewModel.ReleaseApplicationRequestData(' + rowData.ApplicationDetailID + ',\'' + rowData.OriginalApplicationNumber + '\''+ ')">' + 'Release Data' + '</button>';
                            $(button).appendTo(container);
                        }
                    }
                ],
                paging: {
                    enabled: true,
                    pageSize: 20
                },
                filterRow: { visible: true },
                selection: {
                    mode: "single"
                },
                onSelectionChanged: function (selectedItems) {                    
                }
            });
    });

</script>