@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;
    var internalTransfer = (short)Neo.LegitimateLicences.Common.StationeryBatchTypeEnum.InternalTransfer;
    var externalTransfer = (short)Neo.LegitimateLicences.Common.StationeryBatchTypeEnum.ExternalTransfer;
}
<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(),       
        isEnabled: ko.observable(true),
        assignedToDisenabled: ko.observable(false),
        showTransfer: ko.observable(false),
        stationery: ko.observableArray([]),
        stationeryBatchTypeID: ko.observable(),
        officeLocationID : ko.observable(),
        externalPartyDescription: ko.observable(),
        externalPartyContactName: ko.observable(),
        externalPartyContactEmail: ko.observable(),
        lookups: @Html.Raw(Model.Lookups.ToJson(JsonSerializerOptions.EscapeBackSlash | JsonSerializerOptions.FormatDateTime))
    });

    @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.showTransfer(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);
            }
        },

        TransferStationery: function() {
            var s = this;
            if (this.Validate()) {


                app.dialogs.showConfirm.fire({
                    title: "Are you sure you want to transfer the stationery"
                }).then(
                    function(dialogResult) {

                        if (dialogResult.value) {
                            $(".modal-dialog.modal-lg").addClass("is-loading");
                            var stationeryIDs = "";

                            $.each(dialogViewModel.stationery(), function (index, item) {
                                stationeryIDs = stationeryIDs + item.StationeryID + ",";
                            });

                            var data = {
                                fromNumber: s.fromNumber(),
                                numberOfPagesIssued: s.numberOfPagesIssued(),
                                stationeryBatchTypeID: s.stationeryBatchTypeID(),
                                officeLocationID: s.officeLocationID(),
                                externalPartyDescription: s.externalPartyDescription(),
                                externalPartyContactName: s.externalPartyContactName(),
                                externalPartyContactEmail: s.externalPartyContactEmail(),
                                stationeryIDs: stationeryIDs
                            }

                            app.dataManager.post("Stationery",
                                'TransferStationery', 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.numberOfPagesIssued", "To Number", e);
            _v.isModelFieldEmpty("dialogViewModel.stationeryBatchTypeID", "To Number", e);

            if (s.stationeryBatchTypeID() == @internalTransfer) {
                _v.isModelFieldEmpty("dialogViewModel.officeLocationID", "Office Location", e);
            }
            else if (s.stationeryBatchTypeID() == @externalTransfer) {
                _v.isModelFieldEmpty("dialogViewModel.externalPartyDescription", "Transfer Description", e);
                _v.isModelFieldEmpty("dialogViewModel.externalPartyContactName", "Contact Name", e);
                _v.isModelFieldEmpty("dialogViewModel.externalPartyContactEmail", "Contact Email", e);
                app.utils.validator.isModelFieldEmailValid("dialogViewModel.externalPartyContactEmail", "Email", 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">Transfer type *:</label><br />
                        <select id="StationeryBatchTypeID" data-bind="options: GetLookupValues('StationeryBatchTypes'), optionsCaption: 'Please select transfer type', optionsText: 'Title', optionsValue: 'Key', value: stationeryBatchTypeID, enable: isEnabled" class="form-control"></select>
                    </div>
                </div>
            </div>

            <div class="row" data-bind="visible: stationeryBatchTypeID()==@internalTransfer">
                <div class="col-md-4">
                    <div class="form-group bmd-form-group">
                        <label class="bmd-label-floating">Office Location *:</label><br />
                        <select id="OfficeLocationID" data-bind="options: GetLookupValues('OfficeLocations'), optionsCaption: 'Please select office location', optionsText: 'Title', optionsValue: 'Key', value: officeLocationID, enable: isEnabled" class="form-control"></select>
                    </div>
                </div>
            </div>

            <div class="row" data-bind="visible: stationeryBatchTypeID()==@externalTransfer">
                <div class="col-md-4">
                    <div class="form-group bmd-form-group">
                        <label class="bmd-label-floating">Description of where stationery is being transfered to *:</label><br />
                        <input id="externalPartyDescription" name="externalPartyDescription" class="form-control" data-bind="value: externalPartyDescription, enable: isEnabled" />
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="form-group bmd-form-group">
                        <label class="bmd-label-floating">Contact name *:</label><br />
                        <input id="externalPartyContactName" name="externalPartyContactName" class="form-control" data-bind="value: externalPartyContactName, enable: isEnabled" />
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="form-group bmd-form-group">
                        <label class="bmd-label-floating">Contact email *:</label><br />
                        <input id="externalPartyContactEmail" name="externalPartyContactEmail" class="form-control" data-bind="value: externalPartyContactEmail, enable: isEnabled" />
                    </div>
                </div>
            </div>

        </div>

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

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

<script type="text/javascript">
    delete dialogViewModel
    @Html.Raw("var dialogViewModel = new dialogViewModel" + Model.AjaxRequestTicket + "();")
    
    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 };                    
                }
            }
        });                
        
    });
</script>