OperatorPurchasing = function( operatorData, options ) {

    this.rootElement = null;
    this.tabPanel = null;
    this.operatorData = operatorData;

    this._isDirty = false;

    const optionDefaults = {
        showNewCall : true,
        showSaveButton : true,
        gridHeight : "100%" // 550
    }

    this.options = $.extend( true, {}, optionDefaults, options ? options : {} );

    console.log( "OperatorPurchasingOptions", this.options );

    this.confirmedTabEnabled = true; 
    
    this.confirmedTabEnabled = operatorData.cho_id ? true : false;

    // if( ! Fse.Portal.checkPermission( "OperatorAnalyzer" ) ) {
    //     this.confirmedTabEnabled = false;
    // }
 
    this.includeInactiveManufacturers = false;

}

OperatorPurchasing.prototype.constructor = OperatorPurchasing;


OperatorPurchasing.prototype.element = function() {

    let instance = this;

    if( ! instance.rootElement ) {
        instance.rootElement = $("<div>").addClass( "OperatorPurchasing" ).css( { "height" : "100%" });

        if( instance.confirmedTabEnabled ) {

            let tabItems = [
                { title : "Unconfirmed", template : function() {
                    return $("<div>").css( { "padding" : "5px", "height" : "100%" } ).append( instance.unconfirmedTabTemplate( instance.operatorData ));
                }},
                { title : "Confirmed", template : function() {
                    return $("<div>").css( { "padding" : "5px", "height" : "100%" }).append( instance.confirmedTabTemplate( instance.operatorData ) );
                }}
            ]
    
            instance.tabPanel = $("<div>").dxTabPanel ( { 
                height : "100%",
                items : tabItems
            } ).dxTabPanel( "instance" );
    
            instance.rootElement.append( instance.tabPanel.element() )
    
        } else {

            instance.rootElement.append( $("<div>").css( { "padding-top": "5px", "height" : "100%" } ).append( instance.unconfirmedTabTemplate( instance.operatorData ) ))
        }

    }

    return instance.rootElement;

}


OperatorPurchasing.prototype.confirmedTabTemplate = function( data ) {

    let instance = this;

    let operatorAnalyzerOptions = {
        perspectivesEnabled : false,
        helpTopic : "confirmedPurchases",
        container : $("<div>"),
        choId : data.cho_id,
        operatorId : data.operatorId,
        filter : { 
            enabled : true,
            skuIdFilterEnabled : true,
            brandIdFilterEnabled : true,
            prodIdFilterEnabled : true,
            budgetCategoryIdFilterEnabled : true,
            prodline_IdFilterEnabled : true,
            categoryIdFilterEnabled : true,
            classificationIdFilterEnabled : true,
            segmentIdFilterEnabled : true,
            territoryIdFilterEnabled : true,
            agreementOwnerChoIdFilterEnabled : false,
            choIdFilterEnabled : false,
            operatorTypeFilterEnabled : false,
            keywordFilterEnabled : true,
            statesFilterEnabled : true,
            distributorKeyIdFilterEnabled : true,
            businessOwnerUserIdFilterEnabled : true,
            inferredPurchasersFilterEnabled : false,
            agreementOwnersFilterEnabled : false
        }
    };

    instance.operatorAnalyzer = new OperatorAnalyzer( operatorAnalyzerOptions );

    return instance.operatorAnalyzer.element();

}



OperatorPurchasing.prototype.unconfirmedTabTemplate = function( data ) {
    let instance = this;

    instance.productStatusForm = {};

    instance.purchasingStatusDataSource = new DevExpress.data.DataSource( {
        store : { type : "array", data : [
            { text : "Buying", value : "B" },
            { text : "Not Buying", value : "N" },
            { text : "No Application", value : "W" }
        ], key : "value" }
    });
    instance.volumeTimeDataSource = new DevExpress.data.DataSource( {
        store : { type : "array", data : [
            { text : "per Week", value : "W"},
            { text : "per Month", value : "M"},
            { text : "per Year", value : "Y"}
        ], key : "value" }
    });

    instance.sourceTypeDataSource = new DevExpress.data.DataSource( {
        store : { type : "array", data : [
            { value : "?", text : "Unknown" },
            { value : "C", text : "Competitor" },
            { value : "I", text : "Fresh/Scratch" },
            { value : "O", text : "Other"}
        ], key : "value" }
    });


    instance.dataReady = $.Deferred();

    instance.loadPanel = $("<div>").dxLoadPanel( {
        message : "Loading...",
        onHidden : function( e ) {
            e.component.element().remove();
        }
    }).appendTo( "body" ).dxLoadPanel( "instance" );


    /* moved to load
    instance.dataSource = Fse.Data.newDataSource( 
        { object : "OPR.productStatus", keyField : "productStatusId",
        paginate : false, objectParams : { operatorId : data.operatorId } 
        } 
    );
    */

    instance.productStatusList = instance.createGridView();

    let toolbarItems = [];

    let allowNewCall = Fse.Portal.checkPermission( "BCRMCallTracking" ) && instance.options.showNewCall;


    if( allowNewCall ) {

        instance.newCallButton = $("<div>").dxButton(  {
            disabled : true,
            text : "New Call",
            icon : "tel",
            hint : "Start new call from selected entries",
            onClick : function( e  ) {
                instance.manageInteractions( instance.gridView.getSelectedRowsData() );
            }
        }).dxButton( "instance");

    
    }

    instance.deleteSelectedButton = $("<div>").dxButton(  {
        disabled : true,
        text : "Delete",
        icon : "trash",
        hint : "Delete selected entries?",
        onClick : function( e  ) {
            if( confirm( "Delete selected entries?" ) ) {
                instance.deleteProductStatus( instance.gridView.getSelectedRowsData() );
            }
        }
    }).dxButton( "instance");


    let addItemEnabled = Fse.Portal.getConfiguration( "OPR.purchasingProfile.addItemEnabled" ) == "true" ? true : false;
    let addCategoryEnabled = Fse.Portal.getConfiguration( "OPR.purchasingProfile.addCategoryEnabled" ) == "true" ? true : false;


    // addItemEnabled = true;
    // addCategoryEnabled = true;

    if( addCategoryEnabled ) {
        toolbarItems.push( 
            {
                location : "before",
                widget : "dxButton",
                options : {
                    text : "Add Product",
                    onClick : function( e ) {
                        instance.addProductStatus( "PRD" );
                    }
                }
            }
        );
    }

    if( addItemEnabled ) {
        toolbarItems.push( 
             {
                location : "before",
                widget : "dxButton",
                options : {
                    text : "Add SKU",
                    onClick : function( e ) {
                        instance.addProductStatus( "SKU" );
                    }
                }
            }
        );
    }

    
    
    if( allowNewCall ) {
        toolbarItems.push( 
            { 
                location: "before",
                template : function() { return instance.newCallButton.element() }
            }
        );
  
    };

    toolbarItems.push( 
        { 
            location: "before",
            template : function() { return instance.deleteSelectedButton.element() }
        }
    )

    if( Fse.Portal.appConfiguration.STP.ownerType != "MFR" ) {

        toolbarItems.push( 

            {
                location : "after",
                template : function() {
                    return $("<div>")
                        .append( $("<label>").text( "Include Inactive Manufacturers:" ).css( { "padding-right" : "5px" } ) )
                        .append( $("<div>").dxSwitch({

                                value : false,
                                onValueChanged : function( e ) {

                                    instance.includeInactiveManufacturers = e.value;


                                    let loadPanel = $("<div>").dxLoadPanel( {
                                        message : "Loading...",
                                        onHidden : function( e ) {
                                            e.component.element().remove();
                                        }
                                    }).appendTo( "body" ).dxLoadPanel( "instance" );

                                    loadPanel.show();
                                
                                    instance.load().done( function() {
                                        loadPanel.hide();
                                    });

                                }

                            }))
                }
            },


            {
                location : "after",
                template : function() {

                    return $("<div>")
                        .append( $("<label>").text( "Group by Manufacturer:" ).css( { "padding-right" : "5px" } ) )
                        .append( $("<div>").dxSwitch({

                                value : true,
                                onValueChanged : function( e ) {
                                    if( e.value ) {
                                        instance.gridView.columnOption( "mfr_name", "groupIndex", 0 );
                                    } else {
                                        instance.gridView.columnOption( "mfr_name", "groupIndex", null );
                                    }
                                }

                            }))
                }
            }
        )
    }

     toolbarItems.push( 

            { widget: "dxButton", location: "after", options : {
            type : "normal",
            icon :"help",
            hint : "View Help",
            onClick : function( e ) {
                    Fse.Portal.showQuickHelp( "OperatorPurchasingProfile" );
                }
            }}
    );


    instance.toolbar = $("<div>").dxToolbar( {

        items : toolbarItems

    }).css( { "padding-bottom" : "5px" } ).dxToolbar( "instance" ); 


    let template = $("<div>")//.css( { "padding-bottom" : "5px" } );


    let boxItems = [
        { baseSize : 30, template : function() { return instance.toolbar.element() }},
        { ratio : 1, template : function() { return instance.productStatusList.element() }}
    ];


    //template.append( instance.toolbar.element() );
    //template.append( instance.productStatusList.element() );

    if( instance.options.showSaveButton ) {

        let saveButtonElement =  $("<div>").css( {"padding-top" : "5px" } ).dxToolbar( {
            items : [
                { location : "after", 
                template : function() {

                        instance.saveUnconfirmedButton = $("<div>").dxButton( {
                            text : "Save",
                            type : "default",
                            disabled : true,
                            onClick : function(e ) {
                                instance.saveUnconfirmed();
                            }
                        }).dxButton("instance")

                        return instance.saveUnconfirmedButton.element();
                
                }
                }
            ]
        })

        //template.append( saveButtonElement );
        boxItems.push( { baseSize : 30, template : function() { return saveButtonElement }})
    }

    template.dxBox( {
        direction : "col",
        height : "100%",
        items : boxItems
    })

    return template;


}


OperatorPurchasing.prototype.getCompetitorDataSource = function( mfr_id ) {

    let instance = this;
    if( ! instance.competitorPromise ) {
        instance.competitorPromise = {};
    }

    let d = instance.competitorPromise[mfr_id];
    if( ! d ) {
        d = $.Deferred();
        instance.competitorPromise[mfr_id] = d;

        let dataSource = Fse.Data.newDataSource( { object : "CMP.competitorNames", paginate : false } );
        dataSource.filter( [ "mfr_id", "=", mfr_id ] )
        dataSource.load().done( function( data ) {

            let localDataSource = new DevExpress.data.DataSource( { store : { type : "array", data : data , key : "competitorId" } });
            d.resolve( localDataSource );

        })

    }

    return d;

}


OperatorPurchasing.prototype.getNoSaleReasonsDataSource = function( mfr_id ) {

    let instance = this;
    if( ! instance.noSaleReasonsPromise ) {
        instance.noSaleReasonsPromise = {};
    }

    let d = instance.noSaleReasonsPromise[mfr_id];
    if( ! d ) {
        d = $.Deferred();
        instance.noSaleReasonsPromise[mfr_id] = d;

        let dataSource = Fse.Data.newDataSource( { object : "CRM.noSaleReasons", paginate : false } );
        dataSource.filter( [[ "mfr_id", "=", mfr_id ], "or", ["mfr_id", "=", 0 ]] );
        dataSource.load().done( function( data ) {

            let localDataSource = new DevExpress.data.DataSource( { store : { type : "array", data : data , key : "reasonId" } });
            localDataSource.sort( [ "sortRank", "reasonName" ]);
            d.resolve( localDataSource );

        })

    }

    return d;

}


OperatorPurchasing.prototype.createProductStatusForm = function( productStatusItem ) {

    let instance = this;


    let col1Label = "Product (L2,L1)";
    let form = $("<div>").dxForm( {


        validationGroup : "productStatusRecords",

        onContentReady : function( e ) {

            let dxForm = e.component;

            let customFields = dxForm.option( "customFields" );
            if( customFields ) {

                for( let fx in customFields ) {

                    let field = customFields[fx];

                    field.on( "valueChanged", function( e ) {
                        let change = {};
                        change[fx] = e.value;
                        dxForm.updateData( change );
                    })

                }

            }

        },

        onOptionChanged : function( e ) {

            if( e.name == "isDirty2" && e.value ) {

                if( e.component.option( "isReady" )) {
                    instance._isDirty = true;
                    if( instance.saveUnconfirmedButton ) instance.saveUnconfirmedButton.option( { disabled : false } );
                }
                
            }
        },


        items : [
            {
                itemType : "group", colCount : 10,
                items : [

                    { itemType : "group", colSpan : 4, template : function() { return $("<div>").text( col1Label ) }},
                    { itemType : "group", colSpan : 1, template : function() { return $("<div>").text( "Status") }},
                    { itemType : "group", colSpan : 2, template : function() { return $("<div>").text( 'Avg. ' + Fse.Portal.getConfiguration( "CRM.unitOfMeasurePlural" )).css( { "text-transform" : "capitalize" }) }},
                    { itemType : "group", colSpan : 3, template : function() { return $("<div>").text( "Supplier") }}
                    //, { itemType : "group", colSpan : 1, template : function() { return $("<div>").text( "Delete") }}

                ]
            },
            {
                itemType : "group", colCount : 10, 
                items : [


                    { itemType : "group", colSpan : 4,
                        items : [
                            { dataField : "skuFullDisplay" }, 
                            { dataField : "generalComments" },
                            { dataField : "sampleStatusDisplay" },
                            { dataField : "sampleComments" } 
                        ],
                        template : function( options ) {
                            let fieldElement = $("<div>")
                            let dxForm = options.component;
                            // let validationGroup = dxForm.option( "validationGroup" );

                            let customFields = options.component.option( "customFields" );
                            customFields = customFields ? customFields : {};

                            let displayFields = options.component.option( "displayFields" );
                            displayFields = displayFields ? displayFields : {};

                            let skuFullDisplayElement = $("<div>").css( { "overflow-x" : "hidden" } );
                            skuFullDisplayElement.appendTo( fieldElement );
                            displayFields.skuFullDisplay = skuFullDisplayElement;


                            // generalComments
                            let generalCommentsField = $("<div>").dxTextBox( {
                                maxLength : 500,
                                width : 200
                            }).dxTextBox("instance");

                            $("<div>").css( { "margin-top" : "5px", "overflow-x" : "hidden" } )
                                .append( $("<span>").text( "Note:" ).css( { "padding-right" : "10px" } ))
                                .append( generalCommentsField.element().css( { "display" : "inline-block" } ) )
                                .appendTo( fieldElement );

                            customFields.generalComments = generalCommentsField;


                            // sample fields sampleStatusDisplay / sampleComments
                            let sampleElement = $("<div>").css( { "overflow-x" : "hidden" });

                            let sampleStatusDisplayElement = $("<div>").css( { "margin-top" : "5px"}).appendTo( sampleElement );
                            displayFields.sampleStatusDisplay = sampleStatusDisplayElement;
                            let sampleCommentsElement = $("<div>").css( { "margin-top" : "5px" }).appendTo( sampleElement );
                            displayFields.sampleComments = sampleCommentsElement;


                            fieldElement.append( sampleElement );

                            dxForm.option( {
                                "customFields" : customFields,
                                "displayFields" : displayFields
                            });

                            return fieldElement;
    
                        }



                    },
                    
                    {
                        itemType : "group", colSpan : 1,
                        items : [
                            { dataField : "purchasingStatus" }
                        ],
                        template : function( options ) {
                            let fieldElement = $("<div>");
                            let customFields = options.component.option( "customFields" );
                            customFields = customFields ? customFields : {};

                            // purchasingStatus
                            let purchasingStatusField = $("<div>").dxSelectBox( {
                                dataSource : instance.purchasingStatusDataSource,
                                displayExpr : "text",
                                valueExpr : "value",
                                width : 100
                            }).dxSelectBox( "instance" );

                            purchasingStatusField.element() 
                                .css( { "display" : "inline-block" } )
                                .appendTo( fieldElement )
                                .dxValidator( {
                                    validationGroup : options.component.option( "validationGroup"),
                                    validationRules : [ { type : "required" } ]
                                })

                            customFields.purchasingStatus = purchasingStatusField;
                            options.component.option( "customFields", customFields );
                            return fieldElement;


                        }

                    }, 


                    { itemType : "group", colSpan : 2,

                        items : [
                            { dataField : "volumeTime"}, { dataField : "volumeQty" }
                        ],
                        template : function ( options ) {

                            let fieldElement = $("<div>");
                            let customFields = options.component.option( "customFields" );
                            customFields = customFields ? customFields : {};



                            // volumeQty
                            let volumeQtyField = $("<div>").dxNumberBox( {
                                showSpinButtons : false,
                                width : 65,
                                format : "fixedPoint",
                            }).dxNumberBox( "instance")
                            
                            volumeQtyField.element().dxValidator( {
                                validationRules : [ { type : "required" } ],
                                validationGroup : options.component.option( "validationGroup" )
                            })


                            volumeQtyField.element()
                                .css( { "display" : "inline-block", "margin-right" : "5px" })
                                .appendTo( fieldElement )
                                

                            customFields.volumeQty = volumeQtyField;

                            // volumeTime
                            let volumeTimeField = $("<div>").dxSelectBox( {
                                width : 100,
                                dataSource : instance.volumeTimeDataSource,
                                displayExpr : "text",
                                valueExpr : "value"
                            }).dxSelectBox( "instance" )

                            volumeTimeField.element()
                                .css( { "display" : "inline-block" } )
                                .appendTo( fieldElement )
                            
                            customFields.volumeTime = volumeTimeField;

                            options.component.option( "customFields", customFields );
                            return fieldElement;
                        }

                    },

                    {
                        itemType : "group", colSpan : 3,
                        items : [
                            { dataField : "sourceType" }, { dataField : "sourceOther" }, { dataField : "sourceCompetitorId" }, { dataField : "noSaleReasonId" }
                        ],

                        template : function( options ) {

                            let dxForm = options.component;

                            let validationGroup = dxForm.option( "validationGroup" );

                            let fieldElement = $("<div>");
                            let customFields = dxForm.option( "customFields" );
                            customFields = customFields ? customFields : {};

                            // sourceFields
                            let sourceElements = $("<div>" );

                            // sourceType
                            let sourceTypeField = $("<div>").dxSelectBox( {
                                width : 100,
                                dataSource : instance.sourceTypeDataSource,
                                displayExpr : "text",
                                valueExpr : "value",
                                disabled : true
                            }).dxSelectBox( "instance" );

                            sourceTypeField.element()
                                .css( { "display" : "inline-block", "margin-right" : "5px" })
                                .appendTo( sourceElements )
                                .dxValidator( {
                                    validationGroup : validationGroup,
                                    validationRules : [ { type : "required" } ]
                                });

                            customFields.sourceType = sourceTypeField;

                            let sourceCompetitorIdField = $("<div>").dxSelectBox( {
                                displayExpr : "competitorName",
                                valueExpr : "competitorId",
                                disabled : true
                            }).dxSelectBox( "instance" );

                            sourceCompetitorIdField.element()
                                .css( { "display" : "inline-block" })
                                .appendTo( sourceElements )
                                .dxValidator( {
                                    validationGroup : validationGroup,
                                    validationRules : [ { type : "required" } ]
                                });

                            customFields.sourceCompetitorId = sourceCompetitorIdField



                            // sourceOther
                            let sourceOtherField = $("<div>").dxTextBox( {
                                maxLength : 50,
                                disabled : true
                            }).dxTextBox( "instance" );

                            sourceOtherField.element()
                                .appendTo( sourceElements )
                                .css( { "margin-top" : "5px" } )
                                .dxValidator( {
                                    validationGroup : validationGroup,
                                    validationRules : [ { type : "required" } ]
                                });

                            customFields.sourceOther = sourceOtherField;


                            let competitiveProductField = $("<div>").dxTextBox( {
                                maxLength : 100,
                                width : 110,
                                disabled : true
                            }).dxTextBox("instance")

                            $("<div>")
                                .css( { "margin-top" : "5px" })
                                .append( $("<label>").text( "Competitive SKU").css( { "padding-right" : "5px" }) )
                                .append( competitiveProductField.element().css( { "display" : "inline-block" } ) )
                                .appendTo( sourceElements );

                            customFields.competitiveProduct = competitiveProductField;


                            fieldElement.append( sourceElements );


                            // noSaleReasonId
                            let noSaleReasonElement = $("<div>").css( { "margin-top" : "5px" } )

                            noSaleReasonElement.append( $("<label>").text( "Reason:" ).css( { "padding-right" : "5px" }) );

                            let noSaleReasonIdField = $("<div>").dxSelectBox( {
                                displayExpr : "reasonName",
                                valueExpr : "reasonId",
                                disabled : true
                            }).dxSelectBox( "instance");

                            noSaleReasonIdField.element()
                                .css( { "display" : "inline-block" })
                                .appendTo( noSaleReasonElement )
                                .dxValidator( {
                                    validationGroup : validationGroup,
                                    validationRules : [ { type : "required" } ] 
                                });

                            customFields.noSaleReasonId = noSaleReasonIdField;

                            fieldElement.append( noSaleReasonElement );


                            dxForm.option( "customFields", customFields );
                            return fieldElement;

                        }



                    }

                    /*
                    , { 
                        dataField : "delete",
                        label : { visible : false },
                        editorType : "dxCheckBox"
                    }
                    */

                ]

            }
        ],

        onFieldDataChanged : function( e ) {


            // check for display fields
            let displayFields = e.component.option( "displayFields" );
            displayFields = displayFields ? displayFields : {};
            if( displayFields[e.dataField]  ) {

                let displayField = displayFields[e.dataField];
                if( e.value ) {
                    displayField.empty().text( e.value );
                } else {
                    displayField.empty();
                }

                return;

            }

            // check customFields
            let customFields = e.component.option( "customFields" );
            customFields = customFields ? customFields : {};
            if( customFields[e.dataField]  ) {
                let editor = customFields[e.dataField];
                if( e.value ) {
                    editor.option( "value", e.value );
                } else {
                    editor.option( "value", null );
                }
            }

            // editable field value change logic next
            if( e.dataField == "purchasingStatus" ) {

                if( e.value == "N" ) {
                    // enabled sourceType
                    customFields.sourceType.option( { "disabled": false })
                    customFields.noSaleReasonId.option( { "disabled": false })
                } else {
                    customFields.sourceType.option( { "disabled": true })
                    customFields.noSaleReasonId.option( { "disabled": true })
                }
            } 


            if( e.dataField == "sourceType" ) {

                if( e.value == "O" ) {
                    customFields.sourceCompetitorId.option( { "disabled" : true } );
                    customFields.sourceOther.option( { "disabled" : false } );
                } else if( e.value == "C" ) {
                    customFields.sourceCompetitorId.option( { "disabled" : false } );
                    customFields.sourceOther.option( { "disabled" : true } );
                } else {
                    customFields.sourceCompetitorId.option( { "disabled" : true } );
                    customFields.sourceOther.option( { "disabled" : true } );
                }

            }

            if( e.dataField == "mfr_id" ) {

                customFields.sourceCompetitorId.option( "dataSource", null );
                customFields.noSaleReasonId.option( "dataSource", null );


                if( e.value ) {

                    instance.getCompetitorDataSource( e.value ).done( function( competitorDataSource ) {
                        customFields.sourceCompetitorId.option( "dataSource", competitorDataSource );
                    })

                    instance.getNoSaleReasonsDataSource( e.value ).done( function( noSaleReasonsDataSource ) {
                        customFields.noSaleReasonId.option( "dataSource", noSaleReasonsDataSource );
                    })
                }

            }

            if( e.dataField == "delete" ) {

            }

            let vr = e.component.validate();
            /*
            if( ! vr.isValid ) {
                console.log( "Broken Rule");
                console.log( vr.brokenRules );
                vr.brokenRules[0].validator.focus();
            }
            //console.log( "Validation Result" );
            //console.log( vr );
            */
            e.component.option( "isDirty2", true );

        }

    }).dxForm( "instance" );

    form.option( "formData", productStatusItem );
    form.option( "isDirty2", false );
    form.option( "isReady", true );

    /*
    let vr = form.validate();
    if( ! vr.isValid ) {
        if( vr.brokenRules[0].validator.focus ) {
            setTimeout( function() {
                vr.brokenRules[0].validator.focus()
            }, 10 )
        }
    }
    */
    


    return form;

}

OperatorPurchasing.prototype.showCallHistory = function( prodId, skuId ) {

    let instance = this;

    Fse.Data.newDataSource( {
        object : "OPR.productStatusCallHistory", paginate : false, keyField : "interactionId",
        objectParams : { 
            operatorId : instance.operatorData.operatorId,
            prodId : prodId,
            skuId : skuId ? skuId : 0
        }
    }).load().done( function( callHistoryData ) {

        let interactionDetailIds = [];

        callHistoryData.forEach( function( chd ) {
            interactionDetailIds.push( chd.interactionDetailId );
        })

        if( interactionDetailIds.length ) {

            let interactionDetailIdList = interactionDetailIds.join( "," );

            let oprHandler = $("link#oprHandlerLink").attr( "href" );

            let oOptions = {
                title : "Item Call History",
                width : "450px",
                namedButtons : "close",
                src : oprHandler + "?get=itemCallHistoryDialog&mode=direct"
            };
        
        
            let parameters = {
                interactionDetailId : interactionDetailIdList
            }
        
            if( skuId ) {
                parameters.skuId = skuId;
            } else {
                parameters.prodId = prodId;
            }
                
            oOptions.src = Fse.Util.updateURL( oOptions.src, parameters );
                
            Fse.DialogManager.show( "itemCallHistoryDialog$", oOptions );            


        }
    })    
	

	
};

OperatorPurchasing.prototype.createGridView = function() {

    let instance = this;

    let columns = [];

    if( Fse.Portal.appConfiguration.STP.ownerType != "MFR" ) {
        columns.push( { 
            dataField : "mfr_name", 
            caption : "Manufacturer", 
            groupIndex : 0,
            groupCellTemplate : function( container, options ) {
                container.append( options.text );
            },
            xgroupCellTemplate : function( container, options ) {

                 $("<div>").dxToolbar( {
                    items : [
                        { location: "before", template : function() { return $("<span>" ).text( options.data.key ) } },
                        { location : "after", widget : "dxButton", options : { text : "test" }}
                    ]
                }).appendTo( container );
                // container.append( options.data.key + 'XXX' );
            }
    
        });
    }

    columns.push( 

        { dataField : "shortDesc", caption : "Product" },
        { dataField : "skuFullDisplay", caption : "SKU",
          xcalculateCellValue : function( item ) {
            return item.skuFullDisplay ? item.skuFullDisplay : item.productFullDisplay
          }
        },
        { dataField : "purchasingStatus", caption : "Status", width : 90,
            lookup : {
                dataSource : [ { value : "B", text : "Buying" },{ value : "N", text : "Not Buying" },{ value : "W", text : "No Application" }],
                valueExpr : "value",
                displayExpr : "text"
            }
        },
        { dataField : "volumeQty", caption : "Avg.", dataType : "number", format : "fixedPoint", width : 70 },
        { dataField : "volumeUOM", caption : "UOM", width : 60 },
        { 
            dataField : "volumeTime", caption : "per", width : 55,
            lookup : {
                dataSource : [ { value : "W", text : "Week" },{ value : "M", text : "Month" },{ value : "Y", text : "Year" }],
                valueExpr : "value",
                displayExpr : "text"
            }
        },

        { dataField : "unconfirmedAnnualVolumeQty", caption : "Annual Buying", dataType : "number", format : "fixedPoint", width : 150 },

        { name : "stageDisplay", caption : "Opp. Stage",

            cellTemplate : function( container, options ) {
                
                if( options.data.opportunityId ) {
                    let estOrderDateFormatted =  DevExpress.localization.formatDate( new Date( options.data.estOrderDate ), 'shortdate' )
                    let percentageFormatted = DevExpress.localization.formatNumber( options.data.likelihoodPercent, "percent" );

                    let allowEdit = Fse.Portal.checkPermission( "SalesPipelineWrite" );

                    if( allowEdit ) {
                        $("<a>")
                            .text( percentageFormatted )
                            .attr( { "title" : `Est. Order Date = ${estOrderDateFormatted}`})
                            .appendTo( container )
                            .on( "click", function( ce ) {
                                Fse.SPL.showEditOpportunityDialog( options.data.opportunityId, options.data.opportunityIdTk );
                            });
                    } else {
                        $("<span>")
                            .text( percentageFormatted )
                            .attr( { "title" : `Est. Order Date = ${estOrderDateFormatted}`})
                            .appendTo( container );                        
                    }
                    
                }
                
            }
    
         },
        { dataField : "reasonDisplay", caption : "Reason" },
        { dataField : "sourceDisplay", caption : "Competitor" },
        { dataField : "competitiveProduct", caption : "Comp. SKU" },
        { dataField : "callCount", caption : "Calls",  width : 50,
           cellTemplate : function( container, options ) {

                if( options.data.callCount ) {
                    $("<a>")
                        .text( options.displayValue )
                        .attr( { "title" : "view call history..." } )
                        .appendTo( container )
                        .on( "click", function( ce ) {

                            instance.showCallHistory( options.data.prodId, options.data.skuId );

                        });
                }
           }
        },
        { dataField : "updateTimeStamp", dataType : "date", caption : "Last Upd.", format : { type : "shortDate" }, width : 85,
            cellTemplate : function( container, options ) {
                if( options.data.updateTimeStamp ) {
                    let updateTimeStamp = new Date( options.data.updateTimeStamp );
                    let displayValue = DevExpress.localization.formatDate( updateTimeStamp, options.column.format );
                    if( options.data.updateByName ) {
                        let formattedDate = DevExpress.localization.formatDate( updateTimeStamp, "shortDateShortTime" );
                        container.append( $("<span>").text( displayValue ).attr( { "title" : `Last Updated by ${options.data.updateByName} on ${formattedDate}` } ) )
                    } else  {
                        container.append( displayValue );
                    }
                }
            }
        }
    );


    instance.gridView = $("<div>").dxDataGrid( {

        height : instance.options.gridHeight,
        scrolling : { mode : "virtual" },
        filterRow : { visible : true },
        showBorders : true,
        selection : {
            mode : "multiple",
            allowSelectAll : false,
            deferred : false,
            showCheckBoxesMode : "always"
        },
        onSelectionChanged : function( e ) {
            if( e.selectedRowsData.length ) {
                if( instance.newCallButton ) instance.newCallButton.option( "disabled", false );
                instance.deleteSelectedButton.option( "disabled", false );
            } else {
                if( instance.newCallButton ) instance.newCallButton.option( "disabled", true );
                instance.deleteSelectedButton.option( "disabled", true );
            }
        },
        columns : columns,
        summary : {
            groupItems : [
                {
                    column : "unconfirmedAnnualVolumeQty",
                    summaryType : "sum",
                    valueFormat : "fixedPoint",
                    displayFormat : "Ann. Buying: {0}",
                    showInGroupFooter : true
                }
            ],
            totalItems : [
                {
                    column : "unconfirmedAnnualVolumeQty",
                    summaryType : "sum",
                    valueFormat : "fixedPoint",
                    displayFormat : "Tot. Ann. Buying: {0}"
                }
            ]
        },
        keyExpr : "productStatusId",
        noDataText : "",
        loadPanel : { enabled : false },
        onRowDblClick : function( e ) {
            if( e.rowType != "data" || e.isExpanded ) {
                return;
            }

            e.component.expandRow( e.key );

        },
        masterDetail : {
            autoExpandAll : false,
            enabled : true,
            template : function( container, options) {

                let item = options.data;
                let form = instance.createProductStatusForm( item );
                instance.productStatusForm[item.productStatusId] = form;
    
                container.append( form.element() );

            }
        },

        onRowExpanded : function( e ) {

            if( e.key && instance.productStatusForm[e.key]) {
                let form = instance.productStatusForm[e.key];
                let vr = form.validate();
                if( ! vr.isValid ) {
                    // vr.brokenRules[0].validator.focus();
                }
            }

        }


    }).dxDataGrid( "instance" );

    instance.load()
    /*
    instance.dataReady.done( function() {
        // we are using raw data so that we can update with refresh( true ) after a save
        instance.gridView.option( { "dataSource" : instance.data, "noDataText" : null } );
    })
    */

    return instance.gridView;
    

}

OperatorPurchasing.prototype.saveUnconfirmed = function() {

    let instance = this;

    let savePromise = $.Deferred();

    let okayToSave = false;
    for( let notUsed in instance.productStatusForm ) {
        okayToSave = true;
        break;
    }

    if( ! okayToSave ) {
        alert( "Nothing to save" )
        savePromise.reject();
        return savePromise;
    }

    let vr = DevExpress.validationEngine.validateGroup( "productStatusRecords" );
    if( vr.isValid ) {

        let dataToSend = {
            operatorId : instance.operatorData.operatorId,
            productStatusUpdates : []
        };

        for( let productStatusId in instance.productStatusForm ) {


            let form = instance.productStatusForm[productStatusId]
            let isDirty = form.option( "isDirty2" );

            if( isDirty ) {
                dataToSend.productStatusUpdates.push( form.option( "formData" ) );
            }

        }

        // console.log( dataToSend );


        if( dataToSend.productStatusUpdates.length ) {

            Fse.Ajax.performAction( {
                object : "OPR.saveProductStatus", 
                data : dataToSend
            }).done( function( result ) {
    

                for( let productStatusId in instance.productStatusForm ) {


                    let form = instance.productStatusForm[productStatusId]
                    form.option( "isDirty2", false );
        
                }

                instance._isDirty = false;
                if( instance.saveUnconfirmedButton ) instance.saveUnconfirmedButton.option( { disabled : true } );


                let changes = [];
                let refreshPromise = $.Deferred();
                let refreshWaits = result.productStatus.length;

                refreshPromise.progress( function( change ) {

                    refreshWaits--;

                    if( change ) {
                        changes.push( change );
                    }

                    if( ! refreshWaits ) {
                        // we are done
                        refreshPromise.resolve( changes );
                    }

                })


                let productStatusStore = instance.dataSource.store();
                result.productStatus.forEach( function( ps ) {

                    productStatusStore.byKey( ps.productStatusId ).done( function( productStatus ) {

                        let change = null;
                        if( productStatus.length ) {
                            change = {
                                type : "update",
                                data : productStatus[0],
                                key : productStatus[0].productStatusId
                            }
                        }

                        refreshPromise.notify( change );
                    })

                })

                refreshPromise.done( function( changes ) {

                    if( changes.length ) {

                        DevExpress.data.applyChanges(instance.data, changes, { keyExpr: "productStatusId" });
    
                        instance.gridView.option( {
                            editing : {
                                changes : changes
                            }
                        })
    
                        instance.gridView.refresh( true );
    
                    }
    
                })

                Fse.UI.toast( `Purchasing Saved`, "success", 1000 );

                savePromise.resolve();

    
            });

        } else {
            savePromise.reject();
        }


    } else {

        vr.brokenRules[0].validator.focus();
        //console.log( vr );

        savePromise.reject();

    }

    return savePromise;
    
}



OperatorPurchasing.prototype.deleteProductStatus = function( productStatus ) {

    let instance = this;

    if( ! productStatus ) {
        return;
    }

    let dataToSend = {
        operatorId : instance.operatorData.operatorId,
        productStatusToDelete : productStatus
    }

    if( ! Array.isArray( dataToSend.productStatusToDelete ) ) {
        dataToSend.productStatusToDelete = [dataToSend.productStatusToDelete];
    }

    if( dataToSend.productStatusToDelete.length == 0 ) {
        return;
    }

    Fse.Ajax.performAction( {
        object : "OPR.deleteProductStatus",
        data : dataToSend
    }).done( function( deleteResult ) {

        instance.load();
        

    })


}

OperatorPurchasing.prototype.load = function() {

    instance = this;

    let d = $.Deferred();

    instance.dataSource = Fse.Data.newDataSource( 
        { object : "OPR.productStatus", keyField : "productStatusId",
        paginate : false, objectParams : { operatorId : instance.operatorData.operatorId, includeInactiveManufacturers : instance.includeInactiveManufacturers } 
        } 
    );


    instance.loadPanel.show();
    instance.dataSource.load().done( function( data ) {

        instance.data = data;

        instance.gridView.option( {
            dataSource : instance.data,
            // editing : { changes : [] },
            "noDataText" : null
        })
        instance.gridView.refresh();

        instance.loadPanel.hide();

        d.resolve( instance.data );

    });

    return d;

}

OperatorPurchasing.prototype.addProductStatus = function( catalogType ) {
    this.addProductStatusNew( catalogType )
}

OperatorPurchasing.prototype.addProductStatusNew = function( catalogType  ) {

    let instance = this;

    let productPickerOptions = {
        partnerId : instance.operatorData.operatorId,
        partnerType : 'OPR',
        autoFocusScope : "false",
        pick : catalogType == "SKU" ? catalogType : catalogType == "PRD" ? catalogType : "SKU",
        selectMode : catalogType == "SKU" ? "multiple" : "single",
        territoryId : instance.operatorData.territoryId
    }

    let territoryDS = Fse.Data.newDataSource( { object : 'TER.salesTerritories', keyField : "territoryId", paginate : false  });
    territoryDS.filter( [ "territoryPath", "startswith", instance.operatorData.territoryPath ])

    let territoryIdPromise = territoryDS.load().done( function( territories ) {

        let territoryIds = [];
        territories.forEach( function( territory ) {
            territoryIds.push( territory.TerritoryID )
        })

        productPickerOptions.territoryId = territoryIds.join( "," ); 

    });





    if( productPickerOptions.pick == "SKU" ) {
        productPickerOptions.operatorId = instance.operatorData.operatorId;
        productPickerOptions.scope = "global,favorites";

        productPickerOptions.title = "Add SKUs";
        if( false && nMfrId ) {
            productPickerOptions.scope = `mfr:${nMfrId},global,favorites`;
        }

    } else {
        productPickerOptions.title = "Add Product";
    }

    // handle current selections - these are disabled in the picker
    let currentSelections = [];

    instance.data.forEach( function( item ) {
        if( item.skuId ) {
            currentSelections.push( {
                catalogType : "SKU", catalogId : item.skuId 
            })
        } else if ( item.prodId ) {
            currentSelections.push( {
                catalogType : "PRD", catalogId : item.prodId 
            })
        }
    })

    if( currentSelections.length ) {
        productPickerOptions.currentSelections = currentSelections;
    }

    productPickerOptions.onProductsPicked = function( productsPickedEvent ) {

        let toAdd = productsPickedEvent.selectedItems;

        if( ! toAdd || toAdd.length == 0 ) return;

        Fse.Ajax.performAction( {
            object : "OPR.addProductStatus",
            data : {
                operatorId : instance.operatorData.operatorId,
                productStatusToAdd : toAdd
            }
        }).done( function( addResult ) {

            if( addResult.length ) {

                let loadPanel = $("<div>").dxLoadPanel( {

                    message : "Loading...",
                    hideOnOutsideClick : false,
    
                    onHidden : function( e ) {
                        e.component.element().remove();
                        e.component.dispose();
                    }
                }).appendTo( $("body") ).dxLoadPanel( "instance" );
    
                loadPanel.show();
    

                instance.load().done( function() {

                    let firstKey = null;
                    addResult.forEach( function( productStatus ) {
                        if( ! firstKey ) {
                            firstKey = productStatus.productStatusId;
                        }
                        instance.gridView.expandRow( productStatus.productStatusId );
                    } )

                    if( firstKey ) {
                        instance.gridView.navigateToRow( firstKey );
                    }

                    instance._isDirty = true;
                    if( instance.saveUnconfirmedButton ) instance.saveUnconfirmedButton.option( { disabled : false } );

                    loadPanel.hide();


                })
            }

        })

    }


    territoryIdPromise.done( function() {
        let productPicker = new ProductPicker( productPickerOptions );
        productPicker.show();
    })

	
};

OperatorPurchasing.prototype.addProductStatusOld = function( catalogType  ) {

    let instance = this;

    let productPickerOptions = {
        partnerId : instance.operatorData.operatorId,
        partnerType : 'OPR',
        autoFocusScope : "false",
        pickLevel : catalogType == "PRD" ? 2 : 1,
        selectMode : "single",
        territoryId : instance.operatorData.territoryId
    }



    if( productPickerOptions.pickLevel == 1 ) {
        productPickerOptions.operatorId = instance.operatorData.operatorId;
        productPickerOptions.scope = "global,favorites";
        productPickerOptions.selectMode = "multiple";

        if( false && nMfrId ) {
            productPickerOptions.scope = `mfr:${nMfrId},global,favorites`;
        }
    }

    let currentIds = [];
    instance.data.forEach( function( item ) {
        if( productPickerOptions.pickLevel == 2 ) {
            currentIds.push( item.prodId );
        } else if ( item.skuId ) {
            currentIds.push( item.skuId );
        }
    })
    productPickerOptions.disabledIdList = currentIds.join( "," );
    productPickerOptions.disabledIdList = "";

    productPickerOptions.onSuccess = function( r ) {

        console.log( r );
        if( r.status == 200 ) {
            let result = JSON.parse( r.responseText );


            let toAdd = [];

            let catalogIds = null;
            let catalogType = null;

            if( result.SKUID ) {
                catalogIds = result.SKUID.split( "," );
                catalogType = "SKU";
            } else if ( result.PRODID ) {
                catalogIds = result.PRODID.split( "," );
                catalogType = "PRD"
            }

            if( catalogIds && catalogType ) {
                catalogIds.forEach( function( catalogId ) {

                    toAdd.push( {
                        catalogId : Number.parseInt( catalogId ),
                        catalogType : catalogType
                    })

                })
            }


            if( toAdd.length ) {


                Fse.Ajax.performAction( {
                    object : "OPR.addProductStatus",
                    data : {
                        operatorId : instance.operatorData.operatorId,
                        productStatusToAdd : toAdd
                    }
                }).done( function( addResult ) {

                    if( addResult.length ) {

                        let loadPanel = $("<div>").dxLoadPanel( {

                            message : "Loading...",
                            hideOnOutsideClick : false,
            
                            onHidden : function( e ) {
                                e.component.element().remove();
                                e.component.dispose();
                            }
                        }).appendTo( $("body") ).dxLoadPanel( "instance" );
            
                        loadPanel.show();
            
        
                        instance.load().done( function() {

                            let firstKey = null;
                            addResult.forEach( function( productStatus ) {
                                if( ! firstKey ) {
                                    firstKey = productStatus.productStatusId;
                                }
                                instance.gridView.expandRow( productStatus.productStatusId );
                            } )

                            if( firstKey ) {
                                instance.gridView.navigateToRow( firstKey );
                            }

                            instance._isDirty = true;
                            if( instance.saveUnconfirmedButton ) instance.saveUnconfirmedButton.option( { disabled : false } );

                            loadPanel.hide();


                        })
                    }

                })

            }
            console.log( result );
        }
    }

    Fse.FND.showProductLookup( productPickerOptions );

   
	
};

OperatorPurchasing.prototype.isDirty = function() {

    return instance._isDirty;
    // return instance.saveUnconfirmedButton.option( "disabled" ) ? false : true;
}

OperatorPurchasing.prototype.manageInteractions = function( productStatus ) {

    let instance = this;

    // in order to do this, the purchasing profile must be saved first
    if( instance.isDirty() ) {
        alert( "Please save changes first." );
        returnl
    }


    let skuIds = [];
    let prodIds = [];

    productStatus.forEach( function( ps ) {
        if( ps.skuId ) {
            skuIds.push( ps.skuId );
        } else {
            prodIds.push( ps.prodId );
        }
    })
	
    let postUpdate = function() {
        instance.load();
    }
	
	// once the products have been picked, open the call dialog to use the standard logic and allow for all edits
	let processJSONResponse = function( oRequest ) {

		let _response = YAHOO.lang.JSON.parse( oRequest.responseText );
		
		if (!_response.SALESCALLUNIFIEDPLATFORM) { _response.SALESCALLUNIFIEDPLATFORM = "FALSE"; }
		
		if( _response.INTERACTIONID > 0 ) {
			//if( _response.OWNERTYPE == "BRO" ) {
			if( _response.OWNERTYPE == "BRO" || _response.SALESCALLUNIFIEDPLATFORM == "TRUE" ) {
				Fse.CLOS.openInteractionDialog( _response.INTERACTIONID, postUpdate );
			} else {
				// Fse.OPR.showInteractionDialog( _response.INTERACTIONID, _response.INTERACTIONTK, null, _fnPostUpdate );
				// scrum 15038 JM - verify this is correct with MG, but the previous popup was throwing JS errors. the
				// function call below is the one used in sales call listing section.
				Fse.CRM.showInteractionDialog(_response.INTERACTIONID, _response.INTERACTIONTK,null, postUpdate);
			}
		} else {
			// do nothing 
		}

		
	};
	
	
		
    let oOptions = {
        title : "Add Items to Sales Call",
        width : "650px",
        onSuccess : processJSONResponse
    };
    
    
    oOptions.src = $("link#oprHandlerLink").attr( "href" ) + "?get=manageInteractionsDialog&mode=direct";
    oOptions.src = Fse.Util.updateURL( oOptions.src, { operatorId : instance.operatorData.operatorId });
    oOptions.src = Fse.Util.updateURL( oOptions.src, { selectAll : false } );
    
    if( skuIds.length ) {
        oOptions.src = Fse.Util.updateURL( oOptions.src, { skuId : skuIds.join( "," ) } )
        oOptions.src = Fse.Util.updateURL( oOptions.src, { selectAll : false } );
    }
    if( prodIds.length ) {
        oOptions.src = Fse.Util.updateURL( oOptions.src, { prodId : prodIds.join( "," ) } )
        oOptions.src = Fse.Util.updateURL( oOptions.src, { selectAll : false } );
    }
    

    Fse.DialogManager.show( "manageInteractionsDialog$", oOptions );
		
	    
}