@model Neo.LegitimateLicences.Stationery.UpsertStationeryBatchModel
@using Neo.Afx.ComponentModel
@using Neo.Afx.Mvc

@{
    Layout = "~/Views/Shared/_LayoutBlank.cshtml";
    var issuingOfficerID = (short)Neo.LegitimateLicences.Common.RoleEnum.IssuingOfficer;
}
<script type="text/javascript" src="@Model.AfxCdnPath/js/plugin/digitalpersona/es6-shim.js"></script>
<script type="text/javascript" src="@Model.AfxCdnPath/js/plugin/digitalpersona/websdk.client.bundle.min.js"></script>
<script type="text/javascript" src="@Model.AfxCdnPath/js/plugin/digitalpersona/fingerprint.sdk.min.js"></script>
<script type="text/javascript" src="@Model.AfxCdnPath/js/plugin/digitalpersona/DigitalPersonaHelpers.js"></script>

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

    @Html.Raw("$.extend(dialogViewModel" + Model.AjaxRequestTicket + ".prototype,")
    {
        fromNumber: ko.observable('@Model.Stationery.StationeryNumber'),
        numberOfPagesIssued: ko.observable(),
        issueToID: ko.observable(0),
        assignUserRoles: ko.observableArray(["RoleIDs:" + @issuingOfficerID]),
        isEnabled: ko.observable(true),
        assignedToDisenabled: ko.observable(false),
        showAssign: ko.observable(false),
        stationery: ko.observableArray([]),
        fingerprint: ko.observable("")
    });

    @Html.Raw("$.extend(dialogViewModel" + Model.AjaxRequestTicket + ".prototype,")
    {
        GetLookupValues: function (listName) {
            var s = this;
            var lookups = s.lookups;

            for (var l = 0; l < lookups.length; l++) {
                if (lookups[l].ListName == listName) {
                    return app.utils.cleanIntegrationLookup(lookups[l].List);
                }
            }
        },

        AssignPrecheckStationery: function() {
            var s = this;
            if (this.Validate()) {
                $(".modal-dialog.modal-lg").addClass("is-loading");
               

                if (s.fromNumber().toUpperCase().startsWith("BC")) {
                    prefix = "BC";
                }

                if (s.fromNumber().toUpperCase().startsWith("Y")) {
                    prefix = "Y";
                }

                var data = {
                    fromNumber: s.fromNumber().toUpperCase(),
                    numberOfPagesIssued: s.numberOfPagesIssued()
                }

                app.dataManager.post("Stationery",
                    'AssignPrecheckStationery', data,
                    function (result) {
                        if (result != null) {
                            if (result.errorMessage == "") {
                                $(".modal-dialog.modal-lg").removeClass("is-loading");
                                s.isEnabled(false);
                                s.showAssign(true);
                                s.assignedToDisenabled(true);
                                s.stationery(result.stationery);
                                $('#stationeryResults').dxDataGrid('instance').option('dataSource', s.stationery());
                            }
                            else {
                                $(".modal-dialog.modal-lg").removeClass("is-loading");
                                app.dialogs.showError.fire({ title: 'Error', html: result.errorMessage });
                            }
                        }
                    }, null);
            }
        },

        IssueStationery: function() {
            var s = this;
            if (this.Validate()) {
                $(".modal-dialog.modal-lg").addClass("is-loading");
                
                var data = {
                    issueToID: s.issueToID(),
                    fromNumber: s.fromNumber(),
                    numberOfPagesIssued: s.numberOfPagesIssued(),
                    fingerprint: s.fingerprint()
                }

                app.dataManager.post("Stationery",
                    'IssueStationery', data,
                    function (result) {
                        if (result != null) {
                            if (result.errorMessage == "") {
                                $(".modal-dialog.modal-lg").removeClass("is-loading");
                                $("#searchResults").trigger("AvailableStationeryUpdate", self);
                                $(".close").click()
                            }
                            else {
                                $(".modal-dialog.modal-lg").removeClass("is-loading");
                                app.dialogs.showError.fire({ title: 'Error', html: result.errorMessage });
                            }
                        }
                    }, null);
            }
        },

        Validate: function () {
            var s = this;
            var e = [];
            var _v = app.utils.validator;

            app.utils.validator.autoColorElement(true);

            _v.isModelFieldEmpty("dialogViewModel.fromNumber", "From Number", e);
            _v.isModelFieldEmpty("dialogViewModel.toNumber", "To Number", e);
            _v.isModelFieldEmpty("dialogViewModel.issueToID", "Issue Stationery To", e);

            return (e.length == 0)
        }

        
    });    
</script>

<div id="@(new HtmlString("koContainer" + Model.AjaxRequestTicket))" class="modal-dialog modal-lg" role="document" style="max-width:1200px;">
    <div class="modal-content">
        <div class="modal-header">
            <h4 class="modal-title">Issue Stationery</h4>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
            </button>
        </div>
        <div class="modal-body">
            <div class="row">
                <div class="col-md-4">
                    <div class="form-group bmd-form-group">
                        <label class="bmd-label-floating">From Number *:</label><br />
                        <input id="FromNumber" name="FromNumber" class="form-control" maxlength="9" minlength="8" data-bind="value: fromNumber" disabled type="text" />
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="form-group bmd-form-group">
                        <label class="bmd-label-floating">Number of pages to be issued *:</label><br />
                        <input id="ToNumber" name="ToNumber" class="form-control" data-bind="value: numberOfPagesIssued, enable: isEnabled" type="number" />
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="form-group bmd-form-group">
                        <label class="bmd-label-floating">Issue Stationery To *:</label><br />
                        <span id="issueToID" class="issueToID" data-picker-bind="modelID: issueToID, staticParams: assignUserRoles, template: UserPicker, viewModelName: dialogViewModel, disabled: assignedToDisenabled"></span>
                    </div>
                </div>
            </div>

            <div class="row" data-bind="visible: showAssign()">
                <div class="col-md-12">
                    <h3 class="text-center">Biometric Authentication</h3>
                    <div style="display:none;">
                        <script type="text/javascript">
                    if (document.images) {
                        img1 = new Image();
                        img2 = new Image();
                        img3 = new Image();

                        img1.src = "@Model.AfxCdnPath/img/icons/finger_red.png";
                        img2.src = "@Model.AfxCdnPath/img/icons/finger_orange.png";
                        img3.src = "@Model.AfxCdnPath/img/icons/finger_green.png";
                    }
                        </script>
                    </div>

                    <div id="fingerprintControl" style="padding:15px;">
                        <input id="_fingerprint" type="hidden" data-bind="value: fingerprint" />
                        <img id="fingerIcon" src="@Model.AfxCdnPath/img/icons/finger_gray.png" width="96" height="96" style="display: block; margin-left: auto; margin-right: auto; " />
                        <div id="readerStatus" style="display: block; margin-left: auto; margin-right: auto; text-align:center; margin-top:30px; " />
                    </div>
                </div>
            </div>


        </div>

        <div class="modal-body" data-bind="visible: showAssign()">
            <div id="stationeryResults"></div>
            <div class="clearfix"></div>
        </div>

        <div class="modal-footer">
            <button id="Check" data-bind="visible: !showAssign(),click: function() { dialogViewModel.AssignPrecheckStationery() } " class="btn btn-primary">Check</button>
        </div>
    </div>
</div>

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

    function showMessageCallback(message) {
    switch (message)
    {
            case "onDeviceConnected":
                $('#fingerIcon').attr('src', '@Model.AfxCdnPath/img/icons/finger_gray.png');
                $("#readerStatus")[0].innerHTML = "Scan your finger to authenticate the transaction";
                break;
            case "onDeviceDisconnected":
                $('#fingerIcon').attr('src', '@Model.AfxCdnPath/img/icons/finger_red.png');
                $("#readerStatus")[0].innerHTML = "No fingerprint reader found.";
                break;
            case "onSamplesAcquired":
                $('#fingerIcon').attr('src', '@Model.AfxCdnPath/img/icons/finger_orange.png');
                $("#readerStatus")[0].innerHTML = "Checking fingerprint...";
                break;
        }
    }

    function sampleAcquiredCallback(format, s) {
        if (format != Fingerprint.SampleFormat.Intermediate) {
            alert("Invalid format received. The format must be Intermediate. Please contact your system administrator.");
            return;
        }

        var samples = JSON.parse(s.samples);
        dialogViewModel.fingerprint(Fingerprint.b64UrlTo64(samples[0].Data));
        dialogViewModel.IssueStationery();

    }

    var pickerTemplates = {
        UserPicker:
        {
            source: 'Users',
            primaryKey: 'UserID',
            param: 'SearchText',
            top: 20
        }
    };

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

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

        $("#stationeryResults").dxDataGrid(
        {
            dataSource: dialogViewModel.stationery,
            showColumnLines: false,
            showRowLines: true,
            rowAlternationEnabled: true,
            showBorders: true,
            allowColumnReordering: false,
            allowColumnResizing: true,
            height: "300px",
            columns: [
                { dataField: "StationeryNumber", caption: "Stationery Number" }
            ],
            paging: {
                enabled: false
            },
            selection: {
                mode: "single"
            },
            onSelectionChanged: function (selectedItems) {
                var data = selectedItems.selectedRowsData[0];
                if (data) {
                    var event = { ctrlKey: false };                    
                }
            }
        });
        
        setTimeout(
            function () { 
                dpDeviceHelper = new FingerprintSdkHelper(Fingerprint.SampleFormat.Intermediate, showMessageCallback, sampleAcquiredCallback);
                var allReaders = dpDeviceHelper.getInfo();
                allReaders.then(function (readers) {
                    dpDeviceHelper.startCapture(
                        readers[0],
                        function () {
                            console.log('busy..');
                        },
                        function (error) {
                            console.log(error);
                        }
                    );
                });
            
            },
            1000
        )
        
    });
</script>