@model  Neo.LegitimateLicences.Applications.CashupModel
@using Neo.Afx.ComponentModel
@using Neo.Afx.Security
@using Neo.Afx.Mvc
@using Neo.LegitimateLicences.Common;


@{
    var userSecurables = (Profile != null && ((Neo.Afx.Security.UserProfile)Profile).Securables != null) ? ((Neo.Afx.Security.UserProfile)Profile).Securables.ToList() : null;
}

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

@Html.Raw("$.extend(ViewModel" + Model.AjaxRequestTicket + ".prototype,")
    {
        CashupUsers: ko.mapping.fromJSON('@Html.Raw(Model.CashupUsers.ToJson(JsonSerializerOptions.FormatDateTime | JsonSerializerOptions.EscapeBackSlash))')
    });
</script>

<script type="text/javascript">
@Html.Raw("$.extend(ViewModel" + Model.AjaxRequestTicket + ".prototype,")
{

        OpenCashupUser: function (data) {

            var queryString = 'userID=' + data.UserID();

            viewModel.loadConsole("Applications", "CashupUserPage", queryString, true);
        }

    });
</script>


@*<object id="appReceiptPrintControl" name="appReceiptPrintControl" classid="clsid:44290006-0D62-4454-9E9C-B5623D7D921A" style="display:none;"></object>*@

@if (SecurityHelper.UserHasAccessToSecurable(userSecurables, SecurableEnum.CashupModule))
{  
<div id="@(new HtmlString("koContainer" + Model.AjaxRequestTicket))">
    <div class="page-header flex-lock">
        <h4 class="page-title">Receipts</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">
                Cashups
            </li>
        </ul>
    </div>

    <div class="row" style="width:1200px;">
        <div class="col">
            <div id="TabbedCard" class="card">
                <div class="card-header navbar">
                    <h4 class="card-title">Outstanding Cashups</h4>
                </div>
                <div class="card-body">
                    <div data-bind="visible: CashupUsers().length > 0" id="outstandingCashups"></div>
                    <div data-bind="visible: CashupUsers().length == 0">No outstanding cash ups</div>
                    <div class="clearfix"></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]);

        $("#outstandingCashups").dxDataGrid(
            {
                dataSource: viewModel.CashupUsers,
                showColumnLines: false,
                showRowLines: true,
                rowAlternationEnabled: true,
                showBorders: true,
                allowColumnReordering: false,
                allowColumnResizing: true,
                filterRow: { visible: false },
                columns: [
                    //{ dataField: "KnownAs", caption: "Known As"},
                    //{ dataField: "OutstandingCashupAmount", caption: "Amount" },
                    {
                        dataField: "KnownAs",
                        caption: "Known As",
                        cellTemplate: function (container, options) {
                            var rowData = options.row.data;
                            var linkText = rowData.KnownAs();
                            $('<div>' + linkText + '</div>').appendTo(container);
                        }
                    },

                    {
                        caption: "Amount", alignment: "right", dataType: "number",dataField: "OutstandingCashupAmount",
                        format:"R #,##0.00"
                        //cellTemplate: function (container, options) {
                        //    var rowData = options.row.data;
                        //    var linkText = rowData.OutstandingCashupAmount().toFixed(2);
                        //    $('<div>R ' + linkText + '</div>').appendTo(container);
                        //}
                    }
                ],
                summary: {
                        totalItems: [{
                            column: "OutstandingCashupAmount",
                            summaryType: "sum", valueFormat: "R #,##0.##",
                        }
                        ]
                    },
                paging: {
                    enabled: false
                },
                selection: {
                    mode: "single"
                },
                onSelectionChanged: function (selectedItems) {
                    var data = selectedItems.selectedRowsData[0];
                    if (data) {
                        var event = { ctrlKey: false };
                        $("#TabbedCard").addClass("is-loading");
                        document.location.href = '/#Applications/CashupUserPage?userID=' + data.UserID();
                    }
                }
            });
    });

</script>

@*<script>
        $(document).ready(function () {

            $(".Cost").autoNumeric({ aSep: ' ', aDec: '.', aSign: 'R', mDec: '2' }).css("text-align", "right");
        });
    </script>*@