OperatorDetails = function( operatorProfile ) {

    let instance = this;

   instance.operatorProfileInstance = operatorProfile;


   instance.requiredFields = {

        distrib1 : Fse.Portal.getConfiguration( "OPR.profile.REQUIRED.PREFDISTRIBUTOR" ) == "true" ? true : false,
        oprSegment : Fse.Portal.getConfiguration( "OPR.profile.REQUIRED.PRIMARYSEGMENT" ) == "true" ? true : false,
        phone : Fse.Portal.getConfiguration( "OPR.profile.REQUIRED.MAINPHONE" ) == "true" ? true : false,
        address : Fse.Portal.getConfiguration( "OPR.profile.REQUIRED.STREET" ) == "true" ? true : false,
        city : Fse.Portal.getConfiguration( "OPR.profile.REQUIRED.CITYSTATE" ) == "true" ? true : false,
        state : Fse.Portal.getConfiguration( "OPR.profile.REQUIRED.CITYSTATE" ) == "true" ? true : false,
        zipCode : Fse.Portal.getConfiguration( "OPR.profile.REQUIRED.ZIPCODE" ) == "true" ? true : false

    };

    instance.readOnly = Fse.Portal.checkPermission( "OperatorManagementEdit" ) ? false : true;

   instance.initDataFromProfile();
   /*
   instance.data = $.extend( true, {}, operatorProfile.data );

   instance.operatorProfileInstance.flexValues.forEach( function( fv ) {
    $.extend( true, instance.data, fv );
   })
   */


   /*
   instance.changes = new DevExpress.data.ArrayStore( {
        data : [],
        key : "dataField",
   })
   */
    

}

OperatorDetails.prototype.constructor = OperatorDetails;


OperatorDetails.prototype.element = function() {

    let instance = this;

    if( instance.rootElement ) {
        return instance.rootElement;
    }


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

    instance.createUI();
    instance.initializeFormData();
    
    return instance.rootElement;


}

OperatorDetails.prototype.createUI = function() {

    let instance = this;

    // instance.rootElement.empty();
    // instance.rootElement.append( instance.detailsTabTemplate() )

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

    // $("<div>").dxToolbar( {

    //     items : [

    //         { location : "after",
    //             template : function() {
    //                 return instance.saveButton.element();
    //             }
    //         }
    //     ]
    // }).appendTo( instance.rootElement );

    $("<div>").dxBox( {
        height : "100%",
        direction : "col",
        items : [
            {
                ratio : 1,
                template : function() {
                    
                    let content = instance.detailsTabTemplate();

                    return $("<div>").append( content ).dxScrollView( {
                        height : "100%"
                    })
                    
                }

            },
            {
                baseSize : 30,
                template : function() {

                    return $("<div>").dxToolbar( {

                        items : [

                            { location : "after",
                                template : function() {
                                    return instance.saveButton.element();
                                }
                            }
                        ]
                    })                    

                }
            }
        ]
    }).appendTo( instance.rootElement)

}


OperatorDetails.prototype.save = function() {

    let instance = this;

    let vr = instance.detailsForm.validate();
    if( vr.isValid ) {

        // TODO - get this to protect the page until the load operation is complete
        let loadPanel = $("<div>").dxLoadPanel( {
            message : "Working...",
            deplay : 0,
            hideOnOutsideClick : false,
            hideOnParentScroll : false,
            container : instance.rootElement,
            onHidden : function( e ) {
                e.component.element().remove();
                e.component.dispose();
            }
        }).appendTo( $("body") ).dxLoadPanel( "instance" );


        let formData = instance.detailsForm.option( "formData" );


        let dataToSend = {};

        let before = $.extend( true, {}, instance.data );

        let changes = instance.changes.createQuery().toArray();
        changes.forEach( function( c ) {
            dataToSend[c.dataField] = c.value
            before[c.dataField] = instance.data[c.dataField];
        })

        dataToSend.operatorId = formData.operatorId;
        dataToSend.lastUpdated = formData.lastUpdated;

        dataToSend._before = before;

        //console.log( dataToSend );


        loadPanel.show();
        Fse.Ajax.performAction( {
            object : "OPR.saveOperatorDetails", 
            data : dataToSend
        }).done( function( saveOperatorDetailsResult ) {

            // console.log("result");
            // console.log( saveOperatorDetailsResult)

            let resultProcessed = $.Deferred();

            if( ! saveOperatorDetailsResult.status ) {
                Fse.UI.toast( `Details NOT Saved, possible conflict with another user's change. Try again.`, "warning", 2000 );
                resultProcessed.resolve();
            } else {

                Fse.UI.toast( `Details Saved`, "success", 1000 );
                resultProcessed.resolve();
            }

            resultProcessed.done( function() {
                let operatorPorfolioListRefreshNeeded = true;
                instance.operatorProfileInstance.load(operatorPorfolioListRefreshNeeded).done( function( ) {
                    console.log( "Reloaded" );
    
                    instance.initDataFromProfile();
                    instance.createUI();
                    instance.initializeFormData();
                 
                })
   
            })

        }).fail( function() {
            loadPanel.hide();
        }).then( function() {
            loadPanel.hide();
        });


    } else {
        Fse.UI.toast( `Unable to save: '${vr.brokenRules[0].message}`, "error" );
        vr.brokenRules[0].validator.focus();
    }

}

OperatorDetails.prototype.detailsTabTemplate = function() {


    let instance = this;

    let formData = $.extend( true, {}, instance.data );
    formData.flexCategories = [];

    let managedUnit = instance.data.isUnit;
    let showUnitNumber = managedUnit && instance.data.unitNbr;
    
    let cuisineReadOnly = managedUnit ? instance.data.cuisineFollowsHQ == "Y" : false;
    cuisineReadOnly = cuisineReadOnly || instance.readOnly;
    let segmentReadOnly = managedUnit ? instance.data.segmentFollowsHQ == "Y" : false;
    segmentReadOnly = segmentReadOnly || instance.readOnly;
    
    let territoryReadOnly = Fse.Portal.checkPermission( "OperatorAcctTerritoryChange" ) ? false : true;
    territoryReadOnly = territoryReadOnly || instance.readOnly;

    let salesRepReadOnly = Fse.Portal.checkPermission( "OperatorAcctSalesRepChange" ) ? false : true;
    salesRepReadOnly = salesRepReadOnly || instance.readOnly;

    let priorityReadOnly = Fse.Portal.checkPermission( "OperatorAcctPriorityChange" ) ? false : true;
    priorityReadOnly = priorityReadOnly || instance.readOnly;

    let classificationReadOnly = Fse.Portal.checkPermission( "OperatorAcctClassChange" ) ? false : true;
    classificationReadOnly = classificationReadOnly || instance.readOnly;

    let oneFSMode = instance.data.fsl_choId > 0;




    let accountManagementItems = [];

    let industryItems = [];
    let addIndustryItems = function( items ) {

        if( ! items ) {
            return;
        }

        if( ! Array.isArray( items )) {
            items = [items];
        }
        items.forEach( function( i ) {
            industryItems.push( i );
        })
        
    }

    let basicItems = [];
    let addBasicItems = function( items ) {

        if( ! items ) {
            return;
        }

        if( ! Array.isArray( items )) {
            items = [items];
        }
        items.forEach( function( i ) {
            basicItems.push( i );
        })
        
    }



    instance.salesRepDisplayElement = null;
    instance.profileErrorsElement = null;

    /*
    let accountMangementItemsV1 = [];
    accountMangementItemsV1.push( 
       
        { dataField : "priority", label : { text : "Priority" },
            isRequired : true,
            editorType : "dxSelectBox",
            editorOptions : {
                readOnly : priorityReadOnly,
                xwidth : 100,
                dataSource : { store : { type : "array", data : [
                    { value : "*", text : "A+" },
                    { value : "A", text : "A" },
                    { value : "B", text : "B" },
                    { value : "C", text : "C" },
                    { value : "D", text : "D" }
                ], key : "value" } },
                displayExpr : "text",
                valueExpr : "value"
            }
        },

        { dataField : "classificationId", label : { text : "Classification" }, editorType : "dxSelectBox", editorOptions : {
            xwidth : 300,
            // dataSource : Fse.Data.newDataSource( { object : "OPR.classifications", keyField : "classificationId" } ),
            dataSource : Fse.Data.getLocalDataSource( "$.operatorClassifications" ),
            valueExpr : "classificationId",
            displayExpr : "name",
            readOnly : classificationReadOnly,
            searchEnabled : true, searchMethod : "contains", searchExpr : "name",
            showClearButton : true
        }},

        { itemType : "empty" },

        { dataField : "territoryId", isRequired : true, label : { text : "Sales Territory" }, editorType : "dxSelectBox", editorOptions : {
            // dataSource : Fse.Data.newDataSource( { object : "TER.salesTerritories", keyField : "TerritoryID" } ),
            dataSource : Fse.Data.getLocalDataSource( "$.salesTerritories" ),
            xwidth : 300,
            readOnly : territoryReadOnly,
            searchEnabled : true, searchMethod : "contains", searchExpr : "territoryName",
            displayExpr : "territoryName",
            valueExpr : "TerritoryID"
        }},

        { dataField : "mfr_bsr_id", label : { text : "Relationship Manager" }, editorType : "dxSelectBox", editorOptions : {
            xwidth : 300,
            dataSource : Fse.Data.getLocalDataSource( "$.salesRepListUnrestricted" ), // "$.salesRepList"
            displayExpr : "fullName",
            readOnly : salesRepReadOnly,
            searchEnabled : true, searchMethod : "contains", searchExpr : "fullName",
            valueExpr : "fspro_userId",
            showClearButton : true
        }},

        { itemType : "empty" },


        { colSpan : 1, label : { visible : false, xtemplate : function() {
            return $("<div>");
        }},
        template : function( options, itemContainer ) {

   
            instance.profileErrorsElement = $("<div>");
            itemContainer.append( instance.profileErrorsElement );
        }
        },


        { colSpan : 1, label : { visible : false, xtemplate : function() {
                return $("<div>");
            }},
            template : function( options, itemContainer ) {


                instance.salesRepDisplayElement = $("<div>").css( { "padding-bottom" : "10px" });
                itemContainer.append( instance.salesRepDisplayElement );

      
            }
        },
        { itemType : "empty" }

        
    );
    */
    let accountManagementFieldItems = [
       
        { dataField : "priority", label : { text : "Priority" },
            isRequired : true,
            editorType : "dxSelectBox",
            editorOptions : {
                readOnly : priorityReadOnly,
                xwidth : 100,
                dataSource : { store : { type : "array", data : [
                    { value : "*", text : "A+" },
                    { value : "A", text : "A" },
                    { value : "B", text : "B" },
                    { value : "C", text : "C" },
                    { value : "D", text : "D" }
                ], key : "value" } },
                displayExpr : "text",
                valueExpr : "value"
            }
        },

        { dataField : "classificationId", label : { text : "Classification" }, editorType : "dxSelectBox", editorOptions : {
            xwidth : 300,
            // dataSource : Fse.Data.newDataSource( { object : "OPR.classifications", keyField : "classificationId" } ),
            dataSource : Fse.Data.getLocalDataSource( "$.operatorClassifications" ),
            valueExpr : "classificationId",
            displayExpr : "name",
            readOnly : classificationReadOnly,
            searchEnabled : true, searchMethod : "contains", searchExpr : "name",
            showClearButton : true
        }},


        { dataField : "territoryId", isRequired : true, label : { text : "Sales Territory" }, editorType : "dxSelectBox", editorOptions : {
            // dataSource : Fse.Data.newDataSource( { object : "TER.salesTerritories", keyField : "TerritoryID" } ),
            dataSource : Fse.Data.getLocalDataSource( "$.salesTerritories" ),
            xwidth : 300,
            readOnly : territoryReadOnly,
            searchEnabled : true, searchMethod : "contains", searchExpr : "territoryName",
            displayExpr : "territoryName",
            valueExpr : "TerritoryID"
        }},

        { dataField : "mfr_bsr_id", label : { text : "Relationship Manager" }, editorType : "dxSelectBox", editorOptions : {
            xwidth : 300,
            dataSource : Fse.Data.getLocalDataSource( "$.salesRepListUnrestricted" ), // "$.salesRepList"
            displayExpr : "fullName",
            readOnly : salesRepReadOnly,
            searchEnabled : true, searchMethod : "contains", searchExpr : "fullName",
            valueExpr : "fspro_userId",
            showClearButton : true
        }},

        { label : { template : function() { return $("<div>"); }},
            template : function( options, itemContainer ) {

                instance.salesRepDisplayElement = $("<div>").css( { "padding-bottom" : "10px" });
                itemContainer.append( instance.salesRepDisplayElement );

            }
        }        

    ];

    let accountManagementNotificationItems = [
        { colSpan : 1, label : { visible : false },
        template : function( options, itemContainer ) {

            //instance.salesRepDisplayElement = $("<div>").css( { "padding-bottom" : "10px" });
            //itemContainer.append( instance.salesRepDisplayElement );

            instance.profileErrorsElement = $("<div>");
            itemContainer.append( instance.profileErrorsElement );

        }
        },
    ]


    accountManagementItems.push( 

        //{
           // itemType : "group", colCount : 3,

          //  items : [
                {
                    itemType : "group", colSpan : 1, items : accountManagementFieldItems
                },
                { 
                    itemType : "group", colSpan : 1, items : accountManagementNotificationItems
                },
                { itemType : "empty" }
        //    ]
        //}

        
    );    
    
   
    basicItems.push(
        { dataField : "companyName", label : { text : "Company Name" }, isRequired : true, editorOptions : {
            xwidth : 400,
        }}
        , { itemType : "empty", colSpan : 2 }
    );

    basicItems.push( {
        dataField : "primaryContactId",
        label : { text : "Primary Contact" },
        colSpan : 1,
        editorType : "dxSelectBox",
        editorOptions : {
            xwidth : 300,
            showClearButton : true,
            dataSource : Fse.Data.newDataSource( { object : "CRM.partnerContacts", objectParams : { partnerId : instance.data.operatorId, partnerType : "OPR" }, paginate : true, pageSize : 50, keyField : "fspro_userId" }),
            displayExpr : function( data ) {
                return data && `${data.firstName} ${data.lastName}`;
                
            },
            valueExpr : "fspro_userId"
        }
    }, { itemType : "empty", colSpan : 2 })
    
    if( Fse.Portal.appConfiguration.TPM.tradeEnabled == "Y") {
        basicItems.push( /*{

            itemType: "group",
            name : "trade",
            colSpan : 1,
            colCount : 2,
            items : [
            */
                {
                    dataField : "tradeEnabled", editorType : "dxSwitch", label : { text : "Trade Enabled" }
                },
                {   colSpan : 1, dataField : "tradeNbr", editorType : "dxTextBox", label : { text : "Trade ID" }, disabled : true,
                    editorOptions : {
                        onOptionChanged : function( e ) {
                            console.log( e )
                        }
                    }
                }
                /*,
                {
                    itemType : "empty", colSpan : 4
                }
                */

           /* ]
        }*/,
        {
            itemType : "empty", colSpan : 1
        }
        )
    }

    basicItems.push( 
        { dataField : "operatorType", label : { text : "Company Type" }, 
        editorType : "dxDropDownBox",
        editorOptions : { 
            readOnly : true, stylingMode : "underlined", 
            elementAttr : {
                "style" : "border:none"
            },
            dataSource : { 
                store : { 
                    type : "array", 
                    key : "operatorType",
                    data : [
                        { operatorType : "INDEPENDENT", operatorTypeDisplay : "Independent"},
                        { operatorType : "UNIT", operatorTypeDisplay : "Unit"},
                        { operatorType : "CHAIN HQ", operatorTypeDisplay : "Chain HQ"},
                        { operatorType : "GPO", operatorTypeDisplay : "GPO"},
                        { operatorType : "CMC", operatorTypeDisplay : "CMC"},
                        { operatorType : "SERVICE", operatorTypeDisplay : "Service Company"},
                        { operatorType : "HOLDING", operatorTypeDisplay : "Holding Company"},
                        { operatorType : "UKNOWN", operatorTypeDisplay : "Unknown Type"},

                    ]
                }
            },
            displayExpr : "operatorTypeDisplay",
            valueExpr : "operatorType",
            width : 150 } 
        }
    );


    if( instance.data.isChainHQ ) {

        let currentYear = ( new Date() ).getFullYear();

        let unitItems = [
            
            { dataField : "num_units_lastYr", label : { text : `${currentYear-1}` }, editorType : "dxNumberBox", editorOptions : { mode : "text", xwidth : 60, max : 999999, min : 1 } },
            { dataField : "num_units_thisYr", label : { text : `${currentYear}` }, editorType : "dxNumberBox", editorOptions : { mode : "text", xwidth : 60, max : 999999, min : 1 } },
            { dataField : "num_units_nextYr", label : { text : `${currentYear+1}` }, editorType : "dxNumberBox", editorOptions : { mode : "text", xwidth : 60, max : 999999, min : 1 } }
        ];

        basicItems.push( 
            {
                colSpan : 1,
                itemType : "group",
                label : { text : "Number of Units" },
                alignItemLabels : false,
                colCount : 3,
                items : unitItems
            }, 
            { itemType : "empty", colSpan : 1 }
        )

         

    } else {
        basicItems.push( 
            { itemType : "empty", colSpan : 2 }
        )
    }


    if( managedUnit ) {
        basicItems.push( 
            {
                name : "parentCompanyLink", 
                dataField : "parentOperatorId",
                label : { text : "Chain HQ" }, 
                template : function( options, container ) {


                    // this template is going to copy the existing link data each time it is run
                    // this is necessary to keep the click handler working with DX calls this template a second time
                    let children = null;
                    let parentOperatorId = 0;

                    if( instance.parentOperatorLinkContainer ) {
                        // get current information and prepare for adding to new container
                        parentOperatorId = instance.parentOperatorLinkContainer.attr( "parentOperatorId" );
                        children = instance.parentOperatorLinkContainer.children();
                        children.each( function( x, e ) {
                            $(e).remove();
                        } );
                    } 

                    // new container
                    instance.parentOperatorLinkContainer = $("<div>").attr( "parentOperatorId", parentOperatorId );
                    if( parentOperatorId ) {
                        // add click handler
                        instance.parentOperatorLinkContainer.on( "click", function( jqe ) {
                            console.log( "jqe", jqe, parentOperatorId );
                            OperatorPortfolio.getInstance().viewProfile( { operatorId : parentOperatorId } );
                        });
                    }
                         

                    // add back the original children
                    if( children ) {
                        children.each( function( x, e ) {
                            instance.parentOperatorLinkContainer.append( $( e ) );
                        })
                    }

                    container.append( instance.parentOperatorLinkContainer );
                }

            }
        )

        if( showUnitNumber ) {
            basicItems.push( 
                { 
                    dataField : "unitNbr", label : { text : "Chain Unit #" }, editorOptions : { readOnly : true }
                }
            )
        } else {
            basicItems.push( { itemType : "empty" } )
        }


        basicItems.push( 
            { itemType : "empty" }
        );

        basicItems.push( 

            { colSpan : 3,
                dataField : "chainHQUnitNotesFromParent", label : { text : "Chain Notes" }, editorType : "dxTextArea", editorOptions : { height : "3em" }, editorOptions : { readOnly : true }
            }
        )
    } 

  
  
    if( ! instance.data.is1FSMapped && Fse.Portal.appConfiguration.STP.oneFSEnabled != "Y" ) {
        basicItems.push( 
            {
                dataField : "isChainHQ",
                label : { text : "Company HQ" },
                editorType : "dxSwitch"
            },
            { itemType : "empty", colSpan : 2 }
        )
    }

    

    

    addBasicItems( instance.flexFieldItems( formData, "BASIC_A" ));


    //basicItems.push(  { itemType : "empty", colSpan : 2 } );
   

    basicItems.push( 
        {
                dataField : "oprSegment",
                label : { text : "Primary Segment" },
                editorType : "dxSelectBox",
                isRequired : instance.requiredFields.oprSegment,
                editorOptions : {
                    showClearButton : true,
                    hint : managedUnit ? 'Value controlled by HQ record' : null,
                    // dataSource : Fse.Data.getLocalDataSource( "$.operatorSegments" ),
                    dataSource : Fse.Data.newDataSource( { 
                            object : "OPR.segments", 
                            key : "clientSegId",
                            map : function( dataItem ) {
                                return {
                                    clientSegId : dataItem.clientSegId,
                                    segmentPath : dataItem.segmentPath,
                                    disabled : dataItem.hasChildSegments ? true : false,
                                    hierarchyLevel : dataItem.hierarchyLevel
                                }
                            }

                        } ),
                    itemTemplate : function( item ) {
                        let itemText = item.segmentPath;
                        let itemElement = $("<div>").attr( { "title" : itemText } ).text( itemText );
                        if( item.hierarchyLevel == 1 ) {
                            itemTextParsed = itemText.split( "/" );
                            itemTextParsed.shift();
                            itemElement.css( { "padding-left" : "15px" } ).text( itemTextParsed.join( "/" ) );
                        }
                        return itemElement;
                    },                    
                    readOnly : segmentReadOnly,
                    displayExpr : "segmentPath",
                    searchEnabled : true, searchMethod : "contains", searchExpr : "segmentPath",
                    valueExpr : "clientSegId",
                    // useItemTextAsTitle : true,
                    onSelectionChanged : function( e ) {
                            if( managedUnit ) return;
                            if( e.selectedItem ) {
                                e.component.option( "hint", e.selectedItem.segmentPath )
                            } else {
                                e.component.option( "hint", null );
                            }
                        }
                    }
                }, {
                dataField : "cuisineId",
                label : { text : "Primary Cuisine" },
                editorType : "dxSelectBox",
                editorOptions : {
                    showClearButton : true,
                    readOnly : cuisineReadOnly,
                    hint : managedUnit ? 'Value controlled by HQ record' : null,
                    dataSource : Fse.Data.getLocalDataSource( "$.operatorCusines" ),
                    searchEnabled : true, searchMethod : "contains", searchExpr : "cuisine",
                    displayExpr : "cuisine",
                    valueExpr : "cuisineId",
                    useItemTextAsTitle : true,
                    onSelectionChanged : function( e ) {
                        if( managedUnit ) return;
                        if( e.selectedItem ) {
                            e.component.option( "hint", e.selectedItem.cuisine )
                        } else {
                            e.component.option( "hint", null );
                        }
                    }
                    }
                }, {
                dataField : "alcoholStatus",
                label : { text : "Serves Alcohol" },
                editorType : "dxSelectBox",
                editorOptions : {
                    dataSource : Fse.Data.getLocalDataSource( "$.alcoholStatus" ),
                    displayExpr : "alcoholStatusDesc",
                    valueExpr : "alcoholStatus"
                }
            } 
    );



    addBasicItems( instance.seasonalityFields() );

    addBasicItems( instance.addressAndPhoneFields() )

    addBasicItems( instance.internetFields() );

    addIndustryItems( instance.distributionFields() );
    addIndustryItems( instance.memberGroupFields() );

    

    // basic b fields are inserted just after distribution notes
    addBasicItems( instance.flexFieldItems( formData, "BASIC_B" ));


    let otherItems = [];

    otherItems.push( 

        {
            dataField : "comments", 
            label : { text : "Comments" }, 
            editorType : "dxTextArea", editorOptions : {
                maxLength : 1000,
                height : "4em"
            }

        }

    )

    //let idFieldSpaces = 3;

    if( instance.data.mfrCustNum ) {

        //idFieldSpaces--;

        // this should really be added at all time ans become visible or not based on the data dynamically, but I can't get it
        // to work for some reason - MWG
        otherItems.push( 
            {
                itemType : "group", name : "mfrCustNumGroup",
                items : [
                    {
                        dataField : "mfrCustNum", name : "mfrCustNum", label : { text : "Customer #" },
                        editorType : "dxTextBox",
                        editorOptions : {
                            readOnly : true,
                            stylingMode : "underlined",
                            elementAttr : {
                                "style" : "border:none"
                            }
                        }
                    }
                ]
            }
        )

    }


    if( instance.data.mdmType ) {

        //idFieldSpaces--;

        let mdmLabel = instance.data.mdmType;
        if( mdmLabel == "CBS" ) {
            mdmLabel = "CBSC";
        }

        otherItems.push( {
            dataField : "mdmId",
            label : {
                location : "left", text : `${mdmLabel} ID`
            },
            editorType : "dxTextBox",
            editorOptions : { 
                readOnly : true,
                stylingMode : "underlined",
                elementAttr : {
                    "style" : "border:none"
                }
            }

        } )
    }


    /*

    if( idFieldSpaces != 3 ) {
        otherItems.push( { itemType : "empty", colSpan : idFieldSpaces })
    }
    */


        
    otherItems.push( 
        {
            dataField : "operatorId",
            label : { "text" : "System ID" }, editorOptions : { readOnly : true, stylingMode : "underlined", elementAttr : {
                "style" : "border:none"
            } }
        },
        {
            dataField : "recordSource",
            label : { "text" : "Source" }, editorOptions : { readOnly : true, stylingMode : "underlined", elementAttr : {
                "style" : "border:none"
            } }
        }
    )




    basicItems.push( { itemType : "empty" } );
    let formItems = [
        { itemType : "group", name : "accountManagement", caption : "Account Management", colCount : 3, items : accountManagementItems },
        { itemType : "group", name : "basic", caption : "Basic Profile", colCount : 3, items : basicItems },
        { itemType : "group", name : "industry", caption : "Industry Relationships", items : industryItems },
        { itemType : "group", name : "other", caption : "", items : otherItems },

    ]

    console.log( "Basic Items" );
    console.log( basicItems );



    instance.detailsForm = $("<div>").dxForm( {

        readOnly : instance.readOnly,
        items : formItems,
        validationGroup : "OperatorDetails",
        height : "100%",
        
        onFieldDataChanged : function( e ) {

            if( e.dataField == "mfr_bsr_id" ) {
               instance.updateSalesRepDisplay( e.component );
            }

            if( e.dataField == "mfrCustNum" ) {
                let visible = false;
                if( e.value ) {
                    visible = true;
                }
                let options = {
                    visible : visible
                }
                console.log( "mfrCustNum options", options );
                e.component.itemOption( "mfrCustNumGroup.mfrCustNum", "visible", visible )
            }

            if( e.dataField == "parentCompanyName" && e.value && instance.parentOperatorLinkContainer) {

                let parentCompanyName = e.value;
                let fd = e.component.option( "formData" )

                let link = $("<div>")
                    .text( parentCompanyName )
                    .css( { "cursor" : "pointer", "text-decoration" : "underline" })
                    .attr( { title : `Go to '${parentCompanyName}'` } );
                    

                // parentOperatorId is added to the container so that the form template can build a proper link for the click action
                instance.parentOperatorLinkContainer.empty().append( link ).attr( { "parentOperatorId" : fd.parentOperatorId } );
        
            }


            if( e.dataField == "profileErrors" ) {
                instance.updateProfileErrorDisplay( e.component );
            }


            if( e.dataField == "countryId" || e.dataField == "state" ) {
                instance.reconfigureFields( e.component, "county" );

                let editor = e.component.getEditor( "county" );
                let formData = e.component.option( "formData" );
                let countyDataSource = editor.getDataSource();

                let countyFilter = [
                    [ "state", "=", '?' ],
                    "and",
                    [ "countryId", "=", 0 ]
                ]
                
                if( formData.countryId && formData.state ) {
        
                    countyFilter = [
                        [ "state", "=", formData.state ],
                        "and",
                        [ "countryId", "=", formData.countryId ]
                    ];

                }

                countyDataSource.filter( countyFilter );
                editor.option( "value", null );

                     
            }

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

                let territoryId = e.value
                if( ! territoryId ) {
                    territoryId = -1;
                }
                [ "distrib1", "distrib2", "mfr_bsr_id" ].forEach( function( _dataField ) { //, "mfr_bsr_id"

                    let editor = e.component.getEditor( _dataField );
                    let dataSource= editor.getDataSource();
    
                    let filter = [ "territoryId", "=", territoryId ];

                    if( _dataField == "mfr_bsr_id" ) {
                        filter = [ "territoryIdList", "contains", `#${territoryId};` ];
                    } else {
                        filter = [ "relatedTerritoryIds", "contains", `#${territoryId};` ];
                    }

                    dataSource.filter( filter );
                    dataSource.load();
    

                })

                e.component.updateData( { distrib1 : null, distrib2 : null, mfr_bsr_id : null } );

            } 

            if( e.dataField == "distrib1" || e.dataField == "distrib2" ) {


                instance.reconfigureFields( e.component, [ `${e.dataField}_accountNumber`, `${e.dataField}_avgWeeklyPurchases`, `${e.dataField}_salesRepId`] );

                let distribField = e.dataField;
                let cdrRecordId = e.component.option("formData")[distribField];
                let disabled = cdrRecordId ? false : true;


                let editor = e.component.getEditor( `${distribField}_salesRepId` );

                if( editor ) {

                    let partnerId = cdrRecordId;
                    if( ! partnerId ) {
                        partnerId = -1;
                    }

                    let filter = [ "partnerId", "=", partnerId ];

                    console.log( filter );

                    let dataSource = editor.getDataSource();
                    dataSource.filter( filter );
                    // dataSource.load();

                    editor.option( { "disabled" : disabled, "value" : null } );
                    editor.repaint();

                }                

            }

            if( e.dataField == "tradeEnabled" ) {
                instance.reconfigureFields( e.component, "tradeNbr" );
            }

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


                let editor = e.component.getEditor( "state" );
                let stateDS = editor.getDataSource();
                console.log( "stateDS")
                console.log( stateDS );
                let stateFilter = [ "countryId", "=", 0 ];

                if( e.value ) {
                    stateFilter = [ "countryId", "=", e.value ];
                }

                stateDS.filter( stateFilter );
                stateDS.load();
            }

            if( e.dataField == "directCustomer" ) {
                instance.reconfigureFields( e.component, "directCustomerNbr" );
            }
            
            let customFields = $.extend( true, {}, e.component.option( "customFields" ));

            if( customFields && customFields[e.dataField] ) {

                let customField = customFields[e.dataField];
                if( customField.editor ) {
                    customField.editor.option( "value", e.value );
                }

                if( customField.onFieldDataChanged ) {
                    customField.onFieldDataChanged( e );
                }

            }





            if( instance.changes ) {

                instance.changes.byKey( e.dataField )
                    .done( function( change ) {
                        instance.changes.update( e.dataField, { value : e.value })
                    })
                    .fail( function() {
                        let change = {
                            dataField : e.dataField,
                            value : e.value
                        }
                        instance.changes.insert( change );
        
                    });
                
            }


            
        },

        onContentReady : function( e ) {

            console.log( "onContentReady" );
            instance.reconfigureFields( e.component );

        }

        
    }).dxForm( "instance" );


    return instance.detailsForm.element();


}


OperatorDetails.prototype.initDataFromProfile = function() {

    let instance = this;

    instance.data = $.extend( true, {}, instance.operatorProfileInstance.data );

    instance.operatorProfileInstance.flexValues.forEach( function( fv ) {
        $.extend( true, instance.data, fv );
    })

}

OperatorDetails.prototype.initializeFormData = function() {

    let instance = this;

    let formData = $.extend( true, {}, instance.data );
    formData.flexCategories = [];

    instance.saveButton.option( "disabled", true );


        [ "gpoID_1", "gpoID_2", "gpoID_3", "gpoID_4", "cmcID_1", "cmcID_2", "cmcID_3", "cmcID_4"].forEach( function( memberGroupIDField ) {

            let memberGroupOperatorId = formData[memberGroupIDField];
            // let operatorMemberGroupPurchasing = null;
            if( memberGroupOperatorId ) {

                // for( let x = 0; x < opData.length; x++ ) {
                //     if( opData[x].memberGroupOperatorId == memberGroupOperatorId ) {
                //         operatorMemberGroupPurchasing = opData[x];
                //         break;
                //     }
                // }

            }

            // let operatorMemberGroupPurchasingField = memberGroupIDField.substring(0,3) + 'Purchasing_' + memberGroupIDField.split('_')[1];


            // formData[operatorMemberGroupPurchasingField] = operatorMemberGroupPurchasing;

        } )

        instance.changes = null;
        instance.detailsForm.beginUpdate();
        instance.detailsForm.updateData( formData );

        // these are set specifically after the all of the fiels are set because they get changed if they are set after the territory is set (mixed in with the above 
        instance.detailsForm.updateData( { 
            mfr_bsr_id : formData.mfr_bsr_id,
            distrib1 : formData.distrib1,
            distrib1_accountNumber : formData.distrib1_accountNumber, 
            distrib1_avgWeeklyPurchases : formData.distrib1_avgWeeklyPurchases, 
            distrib1_salesRepId : formData.distrib1_salesRepId, 
            distrib2 : formData.distrib2,
            distrib2_accountNumber : formData.distrib2_accountNumber, 
            distrib2_avgWeeklyPurchases : formData.distrib2_avgWeeklyPurchases, 
            distrib2_salesRepId : formData.distrib2_salesRepId 
        } );



        let insightsVisible = false;
        let insightsDisabledCMC = true;
        let insightsDisabledGPO = true;


        if( instance.data.cho_id ) {
            insightsVisible = true;
            if( instance.data.cmcID_1 ) insightsDisabledCMC = false;
            if( instance.data.gpoID_1 ) insightsDisabledGPO = false;
        }
        instance.detailsForm.itemOption( "industry.memberGroupPurchasingInsights_CMC", "visible" , insightsVisible );
        instance.detailsForm.itemOption( "industry.memberGroupPurchasingInsights_CMC", "disabled" , insightsDisabledCMC );
        instance.detailsForm.itemOption( "industry.memberGroupPurchasingInsights_GPO", "visible" , insightsVisible );
        instance.detailsForm.itemOption( "industry.memberGroupPurchasingInsights_GPO", "disabled" , insightsDisabledGPO );



        instance.detailsForm.endUpdate();
        instance.detailsForm.repaint();




        instance.changes = new DevExpress.data.ArrayStore( {
            data : [],
            key : "dataField",
            onModified : function( e ) {
                console.log( e );
                instance.saveButton.option( { disabled : false } )
            }
        })



}

OperatorDetails.prototype.isSaveNeeded = function() {
    return this.saveButton.option( "disabled" ) ? false : true;
}

OperatorDetails.prototype.reconfigureFields = function( form, dataField ) {


    console.log( "reconfigureFields" );
    
    let dataFields = dataField;
    let instance = this;

    if( ! dataFields ) {
        // do all the fields
        dataFields = [ 
            "mfr_bsr_id", "profileErrors",
            "tradeNbr",
            "distrib1_accountNumber", "distrib1_avgWeeklyPurchases", "distrib1_salesRepId",
            "distrib2_accountNumber", "distrib2_avgWeeklyPurchases", "distrib2_salesRepId",
            "seasonOpenDate", "seasonCloseDate"
        ];

        if( Fse.Portal.appConfiguration.STP.ownerType == "MFR" ) {
            dataFields.push( "directCustomerNbr" )
        }
    }

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

    //console.log( dataFields );

    let formData = form.option( "formData" );

    dataFields.forEach( function( _dataField ) {

        switch ( _dataField ) {

            case "mfr_bsr_id" :
                instance.updateSalesRepDisplay( form );
                break;
            
            case "profileErrors" :
                instance.updateProfileErrorDisplay( form );
                break;
             

            case "distrib1_accountNumber" :
            case "distrib2_accountNumber" :
            case "distrib1_avgWeeklyPurchases" : 
            case "distrib2_avgWeeklyPurchases" : 
            case "distrib1_salesRepId" : 
            case "distrib2_salesRepId" :{

                let distribField = _dataField.split( "_" )[0];
                let cdrRecordId = formData[distribField];
                let disabled = cdrRecordId ? false : true;


                let editor = form.getEditor( _dataField );
                if( editor ) {

                    let editorOptions = { 
                        disabled : disabled
                    }

                    editor.option( editorOptions );
                }

            } break;

           

            case "tradeNbr" : {

                if( formData.tradeEnabled ) {
                    form.itemOption( "basic.tradeNbr", { disabled : false })
                } else {
                    form.itemOption( "basic.tradeNbr", { disabled : true })
                }

            } break;

            case "seasonOpenDate" :
            case "seasonCloseDate" : {


                let msb = form.option( `${_dataField}_msb` );
                let dsb = form.option( `${_dataField}_dsb` );
        
                let seasonDate = formData[_dataField];
        
                if( seasonDate ) {
                    let date = new Date( seasonDate );
                    let m = date.getMonth();
                    let d = date.getDate();
                    msb.option( "value", m );
                    dsb.option( "value", d );
                } else {
                    msb.option( "value", null );
                    dsb.option( "value", null );
                }

            } break;


            case "directCustomerNbr" : {
                let editor = form.getEditor( "directCustomerNbr" );
                if( editor ) editor.option( "disabled", formData.directCustomer == "Y" ? false : true );
            } break;

        }

    })



    

}


OperatorDetails.prototype.distributionFields = function() {

    let instance = this;

    let items = [];


    let distributorDataFieldPrefixes = [ "distrib1", "distrib2" ];

    distributorDataFieldPrefixes.forEach( function( dataFieldPrefix ) {

        let labelText = `Preferred ${getText( 'DISTRIBUTOR' )}`;
        if( dataFieldPrefix == "distrib2" ) {
            labelText = `Secondary ${getText( 'DISTRIBUTOR' )}`;
        }

        // let distributorDataObject = "CDR.distributors2";
        let distributorsDataObject = "CDR.distributorsLight";


        let distribDataSource = Fse.Data.newDataSource( { object : distributorsDataObject, keyField : "cdr_recordId", paginate : true, pageSize : 50 } );
        distribDataSource.filter( ["territoryId", "=", -1 ] );

        let contactsDataSource = Fse.Data.newDataSource( { object : "CRM.partnerContacts", keyField : "fspro_userId", paginate : true, objectParams : { partnerType : 'CDR', partnerId : -1 } } );
        contactsDataSource.filter( [ "partnerId", "=", -1 ])

        let fieldRequired =  false;
        if( dataFieldPrefix == "distrib1" ) {
            fieldRequired = instance.requiredFields.distrib1;
        }

        items.push( {

            itemType : "group",
            colCount : 3,
            items : [

                {
                    label : { text : labelText },
                    dataField : `${dataFieldPrefix}`,
                    editorType : "dxSelectBox",
                    isRequired : fieldRequired,
                    editorOptions : {
                        deferredRendering : true,
                        dataSource : distribDataSource,
                        showClearButton : true,
                        valueExpr : "cdr_recordId",
                        displayExpr : "cdr_dstName",
                        searchExpr : "cdr_dstName",
                        searchEnabled : true,
                        searchMode : "contains"
                    }
                },

                { 
                    label : { text : "Acct. Nbr" },
                    dataField : `${dataFieldPrefix}_accountNumber`,
                    editorOptions : { 
                        disabled : true,
                        maxLength : 50
                    }

                },

                /*
                { 
                    label : { text : "Avg. Weekly Purchases" },
                    dataField : `${dataFieldPrefix}_avgWeeklyPurchases`,
                    editorType : "dxNumberBox",
                    editorOptions : {
                        format : { type : "fixedPoint", precision : 0 },
                        showSpinButtons : false,
                        disabled : true
                    }
                },
                */

                { 
                    label : { text : `${getText( 'DISTRIBUTOR' )} Rep` },
                    dataField : `${dataFieldPrefix}_salesRepId`, 
                    editorType : "dxSelectBox",
                    editorOptions : {
                        disabled : true,
                        showClearButton : true,
                        dataSource : contactsDataSource,
                        displayExpr : function( data ) {
                            return data && `${data.firstName} ${data.lastName}`;
                            
                        },
                        valueExpr : "fspro_userId"
            
                    }

                }

            ]


        })
    

    })


    // MFR only
    if( Fse.Portal.appConfiguration.STP.ownerType == "MFR" ) {
        items.push( {

            itemType : "group",
            colCount : 3,
            items : [

                {
                    dataField : "directCustomer",
                    editorType : "dxRadioGroup",
                    editorOptions : {
                        layout : "horizontal",
                        items : [ 
                            {
                                value : "Y",
                                text : "Yes",
                            },
                            {
                                value : "N",
                                text : "No",
                            }
                        ],
                        valueExpr : "value",
                        displayExpr : "text",
                        value : "N"
                    }, 
                    label : { text : "Direct Customer" }

                },

                { dataField : "directCustomerNbr", 
                    label : { text : "Acct. Nbr." }, 
                    editorType : "dxTextBox",
                    editorOptions : { maxLength : 20, width : 150, disabled : true } 
                },

                { itemType : "empty", colSpan : 1 }

            ]


        })
    }
  
    items.push( {
    
        label : { text : "Supply Chain Notes" },
        dataField : "chain_distr_notes", editorType : "dxTextArea", editorOptions : {
            maxLength : 500,
            height : "3em",
        }
        
    } )

    return items;

}


OperatorDetails.prototype.editMemberGroups = function() {

    let instance = this;

    let existingData = false;
    let form = null;
    let popup = null;

    let defaults = {
        gpoID_1 : null,
        gpoPartnerAffiliateNbr_1 : null,
        gpoAffiliationDate_1 : null,
        gpoID_2 : null,
        gpoPartnerAffiliateNbr_2 : null,
        gpoAffiliationDate_2 : null,
        gpoID_3 : null,
        gpoPartnerAffiliateNbr_3 : null,
        gpoAffiliationDate_3 : null,
        cmcID_1 : null,
        cmcPartnerAffiliateNbr_1 : null,
        cmcAffiliationDate_1 : null,
        cmcID_2 : null,
        cmcPartnerAffiliateNbr_2 : null,
        cmcAffiliationDate_2 : null,
        cmcID_3 : null,
        cmcPartnerAffiliateNbr_3 : null,
        cmcAffiliationDate_3 : null,
        cmcID_4 : null,
        cmcPartnerAffiliateNbr_4 : null,
        cmcAffiliationDate_4 : null
    }

    let saveButton = $("<div>").dxButton( {
        text : "Submit",
        disabled : true,
        type : "default",
        onClick : function( e ) {


            let vr = form.validate();
            if( vr.isValid ) {

                let loadPanel = $("<div>").dxLoadPanel( {
                    message : "Working...",
                    deplay : 0,
                    hideOnOutsideClick : false,
                    hideOnParentScroll : false,
                    container : instance.rootElement,
                    onHidden : function( e ) {
                        e.component.element().remove();
                        e.component.dispose();
                    }
                }).appendTo( $("body") ).dxLoadPanel( "instance" );         
                
                loadPanel.show();

                let formData = form.option( "formData");
                Fse.Ajax.performAction( {
                    object : "OPR.updateMemberships",
                    data : formData
                }).done( function() {

                    instance.operatorProfileInstance.load().done( function( ) {
                        console.log( "Reloaded after updateMemberships" );
        
                        instance.initDataFromProfile();
                        instance.createUI();
                        instance.initializeFormData();
                     
                    })

                }).then( function() {
                    popup.hide();
                    loadPanel.hide();
                })

            }

        }
    }).dxButton("instance");

    popup = $("<div>").dxPopup( {
        title : "Edit Memberships",
        height : "auto",
        width : 800,
        contentTemplate : function() {

            let content = $("<div>");

            form = $("<div>").dxForm( {
                items : instance.memberGroupFields( true ),
                onFieldDataChanged : function( e ) {
                    let fieldParse = e.dataField.split('_');
                    if( fieldParse.length != 2 ) {
                        return;
                    }

                    let prefix = fieldParse[0];
                    let qualifier = fieldParse[1];
                    if( prefix == "cmcID" || prefix == "gpoID" ) {

                        prefix = prefix.substring(0,3);
                        let disabled = e.value ? false : true;
                        [ "PartnerAffiliateNbr", "AffiliationDate"].forEach( function( suffix ) {

                            let dataField = `${prefix}${suffix}_${qualifier}`
                            console.log( e.dataField, dataField );
                            let editor = e.component.getEditor( dataField );
                            if( editor ) {
                                editor.option( "disabled", disabled );
                            }

                        })
                    }

                    let saveDisabled = false;
                    if( ! existingData ) {
                        saveDisabled = true;
                        let formData = e.component.option( "formData" );
                        ["cmcID_1", "cmcID_2", "cmcID_3", "gpoID_1", "gpoID_2", "gpoID_3", "gpoID_4"].forEach( function( dataField ) {
                            if( formData[dataField] ) saveDisabled = false;
                        })
                    }

                    saveButton.option( "disabled", saveDisabled );
                }
            }).dxForm( "instance");

            content.append( form.element() );

            content.append( $("<p>").text( "Memberships are ranked by type (CMC/GPO) where the longest standing membership is the first one, etc...  Today's date will be used when a date is not specified." ) )


            return content;
        },
        hideOnOutsideClick : true,
        onHidden : function( e ) {
            e.component.element().remove();
            e.component.dispose();
        },
        toolbarItems : [
            {
                toolbar : "bottom",
                location : "after",
                template : function() {
                    return saveButton.element();
                }
            }
        ],
        onShown : function( e ) {

            let formData = $.extend( true, {}, defaults, instance.data );

            ["cmcID_1", "cmcID_2", "cmcID_3", "gpoID_1", "gpoID_2", "gpoID_3", "gpoID_4"].forEach( function( dataField ) {
                if( formData[dataField] ) existingData = true;
            })

            form.option( "formData", formData );
        }
    }).appendTo( $("body") ).dxPopup("instance");

    popup.show();


}

OperatorDetails.prototype.memberGroupFields = function( editMode ) {

    let instance = this;
    let items = [];

    // edit mode is used when these fields are going to be displayed in a popup and the user will be allowed to change and save
    editMode = editMode ? true : false;

    let readOnly = ! editMode;

    // these should be readonly if the operator is 1fs mapped
    // allow edit is when the user is in readonly mode and can invoke the editor (allowEdit = true) or the challange
    let allowEdit = ( ! instance.data.cho_id ) ? true : false;

    // we should only include these if the operator is not a GPO or CMC
    let memberGroups = [];

    if( ! ( instance.data.isGPO || instance.data.isCMC ) ) {

        memberGroups.push ( 
            {
                label : "Food Mgmt Co.",
                placeholder : "Self Operated", altPlaceholder : "None",
                dataFields : ["cmcID_1,cmcPartnerAffiliateNbr_1,cmcAffiliationDate_1", "cmcID_2,cmcPartnerAffiliateNbr_2,cmcAffiliationDate_2","cmcID_3,cmcPartnerAffiliateNbr_3,cmcAffiliationDate_3"],
                // dataSource : Fse.Data.newDataSource( { object : "OPR.memberGroups", keyField : "operatorId", objectParams : { "oprCompanyType" : "C" } } )
                dataSourceOptions :  { object : "OPR.memberGroups", keyField : "operatorId", objectParams : { "oprCompanyType" : "C" } },
                challengeType : "CMC"

            },
            {
                label : "Buying Group/GPO",
                placeholder : "None", altPlaceholder : "None",
                dataFields : ["gpoID_1,gpoPartnerAffiliateNbr_1,gpoAffiliationDate_1", "gpoID_2,gpoPartnerAffiliateNbr_2,gpoAffiliationDate_2", "gpoID_3,gpoPartnerAffiliateNbr_3,gpoAffiliationDate_3", "gpoID_4,gpoPartnerAffiliateNbr_4,gpoAffiliationDate_4"],
                dataSourceOptions : { object : "OPR.memberGroups", keyField : "operatorId", objectParams : { "oprCompanyType" : "G" } },
                challengeType : "GPO"
            }
        )
            
    }

    memberGroups.forEach( function( mg ) {


        let alreadyLabeled = false;
        let fields = [];
        let dataFieldCount = 0;
        mg.dataFields.forEach( function( df ) {


            dataFieldCount++;

            let dataFields = df.split( "," );


            let labelConfig = { text : mg.label };
            if( alreadyLabeled ) {
                labelConfig.template = function( options, container ) {
                    container.append( $("<div>" ) )
                }
            }
            alreadyLabeled = true;

            fields.push( 

                { 
                    label : labelConfig,
                    dataField : dataFields[0],
                    editorType : "dxSelectBox",
                    colSpan : 1,
                    editorOptions : { 
                        readOnly : readOnly,
                        placeholder : dataFieldCount == 1 ? mg.placeholder : mg.altPlaceholder, 
                        showClearButton : true,
                        dataSource : Fse.Data.newDataSource( mg.dataSourceOptions ),
                        searchExpr : "companyName",
                        searchMode : "contains",
                        searchEnabled : true,
                        displayExpr : "companyName",
                        valueExpr : "operatorId",
                        keyExpr : "operatorId"
                    }
                },
                {
                    itemType : "group", colSpan : 2, colCount : 2,
                    alignItemLabels : false,
                    items : [
                        { label : { text : "ID" },
                            dataField : dataFields[1],
                            editorType : "dxTextBox",
                            editorOptions : {
                                readOnly : readOnly,
                                maxLength : 50
                            }
                        },
                        { label : { text : "Since" },
                            dataField : dataFields[2],
                            editorType : "dxDateBox",
                            editorOptions : {
                                readOnly : readOnly
                            }
                        }

                    ]
                }
            ) 

            if( readOnly ) {
                if( ! allowEdit ) {
                    fields.push ( 
                        { 
                            template : function( options, container ) {
                                console.log( options )
                                console.log( "instance.data", instance.data );
                                $("<div>").dxButton( {
                                    icon : instance.data[dataFields[0]] ? "edit" : "add", // $("link#PortalDocRootURL").attr( "href" ) + "/resources/stp-clean/graphics/ico-challenge.png",
                                    onClick : function( e ) {


                                        let okayToSubmitChallenge = true;
                                        if( Fse.Portal.appConfiguration.STP.oneFSEnabled != "Y" ) {

                                            // if the details tab need to be saved they user will have to do so
                                            if( instance.isSaveNeeded() ) {
                                                okayToSubmitChallenge = false;
                                                alert( "Please save changes first" );
                                            }

                                        } 

                                        if( okayToSubmitChallenge ) {
                                            let mcp = new MembershipChallengePopup();
                                            let challenging = options.component.option( "formData")[dataFields[0]];
                                            mcp.show( { operatorId  : instance.data.operatorId, relationshipField : dataFields[0], challengeType : mg.challengeType, challenging : challenging })
                                        }
                                    }
                                }).appendTo( container );
                            }
                        }
                    )
                } else {
                    fields.push ( 
                        { 
                            template : function( options, container ) {
                                console.log( options )
                                $("<div>").dxButton( {
                                    icon : "edit",
                                    onClick : function( e ) {

                                        let okayToEdit = true;

                                        // if the details tab need to be saved they user will have to do so
                                        if( instance.isSaveNeeded() ) {
                                            okayToEdit = false;
                                            alert( "Please save changes first" );
                                        }

                                        if( okayToEdit ) {
                                            instance.editMemberGroups();
                                        }
                                    }
                                }).appendTo( container );
                            }
                        }
                    )
                }
            }


        })


        items.push( {

            itemType : "group",
            xcolCount : readOnly ? 3 : 2,
            colCount : readOnly ? 4 : 3,
            items : fields

        });  
        
        items.push( {
            name : `memberGroupPurchasingInsights_${mg.challengeType}`, label : { text : " " }, visible : false, disabled : true,
            template : function( options, container ) {

                return $("<div>").dxToolbar( {
                    items : [
                        { location : "before", widget : "dxButton", options : {
                            text : `View ${mg.challengeType} Purchasing Insights`,
                            onClick : function( e ) {
                                instance.showMemberGroupPurchasingBreakdown( mg.challengeType );
                            }
                        }}
                    ]
                })
            }
        })        
        
        

    })


    return items;

}


OperatorDetails.prototype.addressAndPhoneFields = function() {

    let instance = this;

    let items = [];


    // let countyDS = Fse.Data.newDataSource( { object : "UT.counties", paginate : false, keyField : "county" } );
    let countyDS = Fse.Data.getLocalDataSource( "$.counties" );
    countyDS.filter( [
        [ "state", "=", '?' ],
        "and",
        [ "countryId", "=", 0 ]
    ] );

    // let stateDS = Fse.Data.newDataSource( { object : "UT.states", paginate : false, keyField : "state" } );
    let stateDS = Fse.Data.getLocalDataSource( "$.states" );
    /* -- if we do this, the inbound will not pick the state in the drop down if we use $.states, if we use UT.states it does?
       -- UT.states is a network hit every time
    stateDS.filter( [
        "countryId", "=", 0 
    ])
    */

    // only when the client has more than two countries
    let countryIds = Fse.Portal.getConfiguration( "CRM.countryIdList" ).split(",");
    let countryCount = 0;
    let uniqueCountryIds = {}
    countryIds.forEach( function( cid ) {
        if( uniqueCountryIds[cid] )  return;
        countryCount++;
        uniqueCountryIds[cid] = cid;
    })
    
    //console.log( "countryCount", countryCount );

    if( countryCount > 1 ) {
        items.push(

            { dataField : "countryId", label : { text :  "Country" }, editorType : "dxSelectBox", editorOptions : {
                // dataSource : Fse.Data.newDataSource( { object : "UT.countries", keyField : "countryId" } ),
                dataSource : Fse.Data.getLocalDataSource( "$.countries" ),
                displayExpr : "countryAbbrev",
                valueExpr : "countryId",
                xwidth : 80
            }},
            
            { itemType : "empty", colSpan : 2 }
        );
    }

    items.push( 

        {
            dataField : "address", label : { text : "Street" }, isRequired : instance.requiredFields.address, editorOptions : { maxLength : 75, xwidth : 400 }
        },

        {
            dataField : "address2", label : { text : "Street 2" }, editorOptions : { maxLength : 75, xwidth : 400 }
        },

        { itemType : "empty"},

        { dataField : "city", label : { text : "City" }, isRequired : instance.requiredFields.city,  editorOptions : { maxLength : 75 } },


        { itemType : "group", colCount : 2,

            label : { text : "State" }, isRequired : instance.requiredFields.state,
            alignItemLabels : false,

        items : [


            { dataField : "state", label : { text : "State", visible : false }, isRequired : instance.requiredFields.state, editorType : "dxSelectBox", editorOptions : {
                xwidth : 80,
                dataSource : stateDS,
                placeholder : "state",
                displayExpr : "state",
                valueExpr : "state",
                searchEnabled : true,
                searchExpr : "state",
                searchMethod : "startswith",
                showClearButton : true 
            }},
            { dataField : "zipCode", label : { text : "Zip" }, isRequired : instance.requiredFields.zipCode, editorOptions : { maxLength : 10 } },
        ] },

        /*
        { 

            itemType : "group", colCount : 2,
            items : [
        */      
                { dataField : "county", label : { text : "County"  },
                    editorType : "dxAutocomplete",
                    editorOptions : {
                        xwidth : 100,
                        dataSource : countyDS,
                        valueExpr : "county"
                    }
                }
        /*
            ]
        }
            */

        
    );


    let phoneValidationRules = [];

    /*
    phoneValidationRules.push( {
        ignoreEmptyValue : true,
        type: 'pattern',
        pattern: /^\d{3}-\d{3}-\d{4}$/,
        message: 'The phone must have a correct phone format',
    })
    */

    if( instance.requiredFields.phone ) {
        phoneValidationRules.push( {
            type : "custom",
            message : "The phone is required",
            reevaluate : true,
            ignoreEmptyValue : false,
            validationCallback : function( options ) {
                let result = false;
                if( options.value ) {
                    result = true;
                }
                return result;
            }
        })
    }


    let phoneItems = [ 
        { dataField : "phone", label : { text : "Phone", visible : false }, 
            isRequired : instance.requiredFields.phone,
            editorType : "dxTextBox",
            editorOptions : { 
                maxLength : 30, 
                /*
                mask: '000-000-0000', 
                maskChar : ' ', 
                maskInvalidMessage: 'The phone must have a correct phone format',
                useMaskedValue : true,
                onValueChanged : function( e ) {
                    if( e.value ) {
                        if( e.value.replace( /\s|-/g, '' ) == '' ) {
                            e.component.option( "value", null );
                        }
                    }
                }
                */
               onValueChanged : function( e ) {
                    if( e.component.option( "fseReformatted") ) {
                        e.component.option( "fseReformatted", false );
                    } else {
                        let formatted = Fse.UI.reformatPhone( e.value );
                        if( formatted != e.value ) {
                            e.component.option( {
                                "fseReformatted" : true,
                                value : formatted
                            } )
                        }
                    }                
               }
            },
            validationRules : phoneValidationRules.length ? phoneValidationRules : null
        }, 
        { dataField : "phoneExt", label : { text : "Ext." }, 
            editorType : "dxTextBox",
            editorOptions : { maxLength : 10, xwidth : 80 } 
        }
     ]    

    items.push( 

        
        { itemType : "group",  
            label : { text : "Phone" },
            alignItemLabels : false,
            colCount : 2,
            items : phoneItems
        }
    );

    return items;

}

OperatorDetails.prototype.internetFields = function() {

    let instance = this;
    let items = [];


    let validURLPattern = Fse.CRM.socialMediaPlatforms.other.urlRegEx;

    let internetFields = [
        { 
            dataField : "url", 
            label : "URL", placeholder : "Company URL", maxLength : 150, xwidth : 300, 
            type : "url"
        },

        { 
            dataField : "email", 
            label : "Email", placeholder : "email", maxLength : 75, xwidth : 200, 
            validationRules : [ { type : "email", message : "Invalid Email" } ] 
        },

        { 
            dataField : "facebookURL", 
            label : "Facebook", placeholder : "Facebook URL or ID", xwidth : 300,
            type : "url", 
            socialMediaPlatform : "facebook"
        },
        { 
            dataField : "instagramURL",  
            label : "Instagram",  placeholder : "Instagram URL or ID", xwidth : 300,
            type : "url", 
            socialMediaPlatform : "instagram"
        },
        { 
            dataField : "twitterURL", 
            label : "\"X\"", placeholder : "\"X\" URL or ID (1-15 char)", xwidth : 300,
            type : "url", 
            socialMediaPlatform : "twitter"
        },
        { 
            dataField : "tiktokURL", 
            label : "TikTok",placeholder : "TikTok URL or ID", xwidth : 300, 
            type : "url",  
            socialMediaPlatform : "tiktok",
        },
        { 
            dataField : "youtubeURL", 
            label : "YouTube", placeholder : "YouTube URL or ID (10 char)", xwidth : 300,
            type : "url", 
            socialMediaPlatform : "youtube"
        },
        { 
            dataField : "linkedinURL", 
            label : "LinkedIn", placeholder : "LinkedIn URL", maxLength : 150, xwidth : 300, 
            type : "url", 
            socialMediaPlatform : "linkedin"
        }
    ];

    internetFields.forEach( function( il ) {

        let item = {
            dataField : il.dataField,
            label : { text : il.label },
            template : function( options, itemElement ) {

                let customFields = options.component.option( "customFields" );
                if( ! customFields ) {
                    customFields = {};
                }


                let textBoxConfig = {

                    maxLength : il.maxLength ? il.maxLength : null,
                    placeholder : il.placeholder ? il.placeholder : null,
                    width : il.width ? il.width : null,
                    onValueChanged : function( e ) {
                        if( options.dataField == "email" ) {
                            console.log( `${options.dataField}.onValueChanged`, e );
                        }
                        options.component.updateData( options.dataField, e.value );
                    },
                    readOnly : instance.readOnly
                };


                if( il.type == "url" ) {

                    textBoxConfig.onOptionChanged = function( e ) {
                        if( e.name == "validationErrors" ) {

                            let validationErrors = e.value;

                            if( validationErrors ) {
                                let errorHandled = false;
                                validationErrors.forEach( function( ve ) {

                                    if( errorHandled ) return;

                                    if( ve.type == "pattern" ) {

                                        if( ve.socialMediaPlatform ) {

                                            let value = ve.value;

                                            if( ! value.match( validURLPattern ) ) {

                                                value = ve.urlTransform( value );

                                                if( value.match( validURLPattern ) && value.match( ve.pattern ) ) {
                                                    errorHandled = true;
                                                    setTimeout( function() {
                                                        e.component.option( "value", value )
                                                    }, 10 );
                                                }
    
                                            }


                                        } else {

                                            let value = ve.value;

                                            if( ! value.match( /^https+:\/\//i) ) {

                                                value = value.replace( /^.*:/i, '' ).replace( /^\/\//, '' );
                                                value = `https://${value}`
                                                errorHandled = true;
                                                setTimeout( function() {
                                                    e.component.option( "value", value )
                                                }, 10 );
                                            }

                                        }

                                    }
                                })
                            }

                        }
                    }
                    
                }

                let fdx = options.component.option( "formData" );
                if( fdx[options.dataField] ) {
                    textBoxConfig.value = fdx[options.dataField];
                }

                let textBox = $("<div>").dxTextBox( textBoxConfig ).dxTextBox( "instance" );
                console.log( `Creating Field ${options.dataField}` );

                let validationRules = il.validationRules ? il.validationRules : null;
                if( ! validationRules && il.type == "url" ) {

                    validationRules = [];
                    let message = "Invalid URL";

                    if(  il.socialMediaPlatform && Fse.CRM.socialMediaPlatforms[il.socialMediaPlatform] ) {
                        let pattern = Fse.CRM.socialMediaPlatforms[il.socialMediaPlatform].urlRegEx;
                        let urlTransform = Fse.CRM.socialMediaPlatforms[il.socialMediaPlatform].urlTransform;
                        urlTransform ? urlTransform : function( v ) { return v };
                        message = `Invalid ${il.placeholder}`;
                        validationRules.push(
                            { type : "pattern", socialMediaPlatform : il.socialMediaPlatform, message : message, pattern : pattern, urlTransform : urlTransform }
                        )
                    }
                    validationRules.push( 
                    { type : "pattern", message : message, pattern : validURLPattern }
                    );

                }

                textBox.element().dxValidator( {
                    validationGroup : options.component.option( "validationGroup" ),
                    validationRules : validationRules
                })

      

                let editorContainer = $("<div>");

                editorContainer.append( textBox.element() );

                itemElement.append( editorContainer );

                customFields[il.dataField] = { editor : textBox };
                options.component.option( "customFields", customFields );

            }

        }

        items.push( item );

        

    });

    return items;



}

OperatorDetails.prototype.seasonalityFields = function() {

    let items = [];
    let instance = this;


    let managedUnit = instance.data.isUnit;
    let seasonalityReadOnly = managedUnit ? instance.data.seasonalityFollowsHQ == "Y" : false;

    seasonalityReadOnly = seasonalityReadOnly || instance.readOnly;



    let configureSeasonalityDays = function( form, dataField ) {

        let msb = form.option( `${dataField}_msb` );
        let dsb = form.option( `${dataField}_dsb` );


        let days = [];
        let month = msb.option( "selectedItem" );
        let daysDisabled = true;
        if( month ) {

            let dayValue = dsb.option( "value" );

            daysDisabled = false;
            days = [];
            for( let d = 1; d <= month.days; d++ ) {
                days.push( d );
            }

            if( dayValue && dayValue > days.length ) {
                dayValue = days.length;
            }

            dsb.option( { dataSource : days, value : dayValue, disabled : false });

        } else {
            dsb.option( { dataSource : days, value : null, disabled : true });
        }


    }


    // a two field template Month and Day to allow for selecting the season open/close date without the year
    let seasonDateTemplate = function ( options, container ) {


        let msb = null;
        let dsb = null;

        // the days in the month are based on 2000, a leap year
        msb = $("<div>").dxSelectBox( {
            showClearButton : true,
            readOnly : seasonalityReadOnly,
            hint : managedUnit ? 'Value controlled by HQ record' : null,
            dataSource : [ 
                { id : 0, month : "January", days : 31 },
                { id : 1, month : "Feburary", days : 29 },
                { id : 2, month : "March", days : 31 },
                { id : 3, month : "April", days : 30 },
                { id : 4, month : "May", days : 31 },
                { id : 5, month : "June", days : 30 },
                { id : 6, month : "July", days : 31 },
                { id : 7, month : "August", days : 31 },
                { id : 8, month : "September", days : 30 },
                { id : 9, month : "October", days : 31 },
                { id : 10, month : "November", days : 30 },
                { id : 11, month : "December", days : 31 },
             ],
            displayExpr : "month",
            valueExpr : "id",
            placeholder : "month",
            onValueChanged : function(e ) {
                configureSeasonalityDays( options.component, options.dataField );
            },
            width : 120
        }).css( "display", "inline-block" ).dxSelectBox( "instance" );

        options.component.option( `${options.dataField}_msb`, msb );


        dsb = $("<div>").dxSelectBox( {
            dataSource : [],
            readOnly : seasonalityReadOnly,
            placeholder : "day",
            hint : managedUnit ? 'Value controlled by HQ record' : null,
            validationGroup : options.component.option( "validationGroup" ),
            width : 70,
            disabled : true,
            onValueChanged : function( e ) {


                let dateValue = null;

                if( e.value ) {
                    let d = e.value;
                    let m = msb.option( "value")

                    let date = null;
                    date = new Date();
                    date.setHours(0);
                    date.setMinutes(0);
                    date.setSeconds(0);
                    date.setMilliseconds(0);
                    date.setFullYear(2000);
                    date.setMonth( m );
                    date.setDate( d );

                    console.log( `Date: ${date}` );

                    dateValue = DevExpress.localization.formatDate( date, "yyyy-MM-ddTHH:mm:ss" );

                }

                options.component.updateData( options.dataField, dateValue );

            }

        } ).css( { "display" : "inline-block", "margin-left" : "5px" }).dxSelectBox( "instance" );

        options.component.option( `${options.dataField}_dsb`, dsb );

        

        container.append( msb.element() ).append( dsb.element() )

        let customFields = $.extend( true, {}, options.component.option( "customFields" ));
        customFields[options.dataField] = {
            onFieldDataChanged : function( e ) {
                instance.reconfigureFields( e.component, e.dataField );
            }
        }
        options.component.option( "customFields", customFields );

    }

    // seasonality
    items.push ( 
        /*{

        itemType : "group",
        colCount : 9,
        xalignItemLabels : false,
        items : [
        */
                    { 
                        dataField : "seasonOpenDate", dataType : "date", label : { text : "Season Open" },
                        template : function ( options, container ) {
                            seasonDateTemplate( options, container );
                        }
                    },
                    { 
                        dataField : "seasonCloseDate", dataType : "date", label : { text : "Season Close" },
                        template : function ( options, container ) {
                            seasonDateTemplate( options, container );
                        }
                    },
                    { itemType : "empty", XcolSpan : 5 }
        /* ]


    } */
   )


    return items;

}



OperatorDetails.prototype.flexFieldItems = function( formData, fieldCategory ) {

    let items = [];

    let instance = this;

    // basic a fields are inserted just before primary contact
    instance.operatorProfileInstance.fieldCategoryStore.byKey( fieldCategory ).done( function( data ) {

        if( data && data.items.length ) {
            // instance.operatorProfileInstance.buildFlexFieldItems( data.items, items, 3 );
            FlexFields.buildFormItems( data.items, items, 3 );
            formData.flexCategories.push( fieldCategory );
            if( instance.operatorProfileInstance.flexValues[0][fieldCategory] ) {
                let values = {};  values[fieldCategory] = instance.operatorProfileInstance.flexValues[0][fieldCategory];
                $.extend( true, formData, values );
            }
    
        }

    })

    
    return items;
}

OperatorDetails.prototype.updateSalesRepDisplay = function( form ) {

    let instance = this;
    let formData = form.option( "formData" );
    let mfr_bsr_id = formData.mfr_bsr_id;

    if ( mfr_bsr_id ) {

        instance.salesRepDisplayElement.html( "loading..." );

        let ds = form.getEditor( "mfr_bsr_id" ).getDataSource();

        ds.store().byKey( mfr_bsr_id ).done( function( data ) {

            let salesRep = Array.isArray( data ) & data.length ? data[0] : data;
            let salesRepDisplay = $("<div>");

            if( salesRep.title ) {
                salesRepDisplay.append( $("<div>").text( salesRep.title ).css( { "padding-top" : "2px" } ) );
            }
            if( salesRep.phone ) {
                let phoneElement = $("<div>").text( salesRep.phone ).css( { "padding-top" : "2px" });
                if( salesRep.phoneExt ) {
                    phoneElement.append( `<span> Ext. ${salesRep.phoneExt}</span>` );
                }
                salesRepDisplay.append( phoneElement );
            }
            salesRepDisplay.append( $("<div>").text( salesRep.email ).css( { "padding-top" : "2px" } ) )

            instance.salesRepDisplayElement.empty().append( salesRepDisplay );


        }).fail( function( e ) {
            console.log( e );
        })

    } else {
        instance.salesRepDisplayElement.html( `<span></span>` );
    }    
}

OperatorDetails.prototype.updateProfileErrorDisplay = function( form ) {


    let instance = this;

    let formData = form.option( "formData" );
    let profileErrors = formData.profileErrors;

   
    if( profileErrors ) {


        let priority = formData.priority;

        if( priority == "*" ) {
            priority = "A+";
        }

        let errorsElement = $("<div>")
        .css( { "color" : "red", "border" : "1px solid red", "padding" : "5px", "maxWidth" : "400px" } )

        errorsElement.append( $("<div>").text( "Profile Incomplete" ).css( "text-decoration", "underline" ) );
        errorsElement.append( $("<p>").text( `The following elements of this profile are missing values which are required for "${priority}" operators.` ) )


        profileErrors.split( "," ).forEach( function( profileError ) {

            errorsElement.append( 
                $("<div>")
                    .append( "&nbsp;&middot;&nbsp;" )
                    .append( instance.resolveProfileError( profileError ) )
            );

        })


        instance.profileErrorsElement.empty().append( errorsElement );

    } else {
        instance.profileErrorsElement.empty();
    }

}

OperatorDetails.prototype.resolveProfileError = function( profileError ) {


    let instance = this;
    let resolvedProfileError = null;

    switch ( profileError ) {

        case "pc" : resolvedProfileError = "No Primary Contact"; break;
        case "pc_phone" : resolvedProfileError = "Contact Phone"; break;
        case "pc_email" : resolvedProfileError = "Contact Email"; break;
        case "pc_title" : resolvedProfileError = "Contact Title"; break;
        case "pc_last" : resolvedProfileError = "Contact Last Name"; break;
        case "pc_first" : resolvedProfileError = "Contact First Name"; break;
        case "pc_jobfunc" : resolvedProfileError = "Contact Job Func."; break;
        case "addr" : resolvedProfileError = "Street"; break;
        case "state" : resolvedProfileError = "State"; break;
        case "county" : resolvedProfileError = "County"; break;
        case "city" : resolvedProfileError = "City"; break;
        case "zip" : resolvedProfileError = "Zip/Postal Code"; break;
        case "seg" : resolvedProfileError = "Primary Segment"; break;
        case "cdr" : 
            resolvedProfileError = "Primary Distributor"; 
            // if( instance.data.isChainHQ ) {
            //     // on units if HQ
            //     resolvedProfileError = `Unit Location ${resolvedProfileError}`;
            // }
            break; 
        case "dd" : resolvedProfileError = "Primary Distributor Details"; break;
        case "cdr2" : 
            resolvedProfileError = "Secondary Distributor"; 
            // if( instance.data.isChainHQ ) {
            //     // on units if HQ
            //     resolvedProfileError = `Unit Location ${resolvedProfileError}`;
            // }
            break; 
        case "dd2" : resolvedProfileError = "Seconary Distributor Details"; break;
        case "cls" : resolvedProfileError = "Classification"; break;
        case "phone" : resolvedProfileError = "Main Phone"; break;
        case "fax" : resolvedProfileError = "Fax Number"; break;
        case "cuisine" : resolvedProfileError = "Cuisine"; break;
        case "pprof" : resolvedProfileError = "Incomplete Purchasing Profile"; break;
        case "ansls" : resolvedProfileError = "Annual Sales (TY & LY)"; break;
        case "cm" : resolvedProfileError = "Assigned Customer Manager"; break;
        case "bp" : resolvedProfileError = "Business Plan (Opportunities)"; break;

    }

    if( ! resolvedProfileError ) {

        if( profileError.match( /^f_\d+$/ ) != -1 ) {
            // flex field id
            let fieldId = profileError.split( "_" )[1];
            instance.operatorProfileInstance.flexFields.forEach( function( field ) {
                if( field.fieldId == fieldId ) {
                    resolvedProfileError = `${field.label} (${field.category})`;
                }
            })
        } 

        if( ! resolvedProfileError ) {
            resolvedProfileError = profileError;
        }
        
    }

    return resolvedProfileError;


}

OperatorDetails.prototype.showMemberGroupPurchasingBreakdown = function( memberGroupType ) {


    let instance = this;

    const objectParams = {
        operatorId : instance.data.operatorId,
        byMFR : false,
        memberGroupType : memberGroupType
    }



    

   let operatorPurchasingByMemberGroupDS = Fse.Data.newDataSource( { object : "OPR.operatorPurchasingByMemberGroup", key : "memberGroupOperatorId", objectParams : objectParams });
    operatorPurchasingByMemberGroupDS.load().done( function( opData ) {

        let cellHover = null;
        let cellHoverContent = null;

        let title = null;

        opData.forEach( function( data ) {
            if( title ) return;
            if( data.lastPurchasingMonth ) {
                let dateText = DevExpress.localization.formatDate( new Date( data.lastPurchasingMonth ), "monthAndYear" )
                title = `${memberGroupType} Purchasing Insights as of ${dateText}`;
            }
        })

        if( ! title ) {
            title = `${memberGroupType} Purchasing Insights`;
        }

        const dataGrid = $("<div>").dxDataGrid( {
            width : "100%", height : "100%",
            showBorders : true,
            dataSource : opData,
            scrolling : { mode : "virtual" },
            rowAlternationEnabled : true,
            onToolbarPreparing : function( e ) {

                if( ! e.toolbarOptions.items ) e.toolbarOptions.items = [];

                e.toolbarOptions.items.push( {
                    location : "after",
                    widget : "dxButton",
                    options : {
                        icon : "help",
                        onClick : function( e ) {
                            Fse.Portal.showQuickHelp( "MemberGroupPurchasingInsights" );
                        }
                    }
                })

                if(  Fse.Portal.appConfiguration.STP.ownerType == "MFR" ) return;

                e.toolbarOptions.items.push( {
                    location : "before",
                    widget : "dxRadioGroup",
                    options : { 
                        value : false,
                        layout : "horizontal",
                        valueExpr : "value",
                        items : [
                            { text : "Overall", value : false },
                            { text : "By Manufacturer", value : true }
                        ], 
                        onValueChanged : function( e ) {

                            dataGrid.beginUpdate();

                            let byMFR = e.value;

                            if( byMFR ) {
                                dataGrid.columnOption( "mfr_name", { xgroupIndex : 0, visible : true } )
                            } else {
                                dataGrid.columnOption( "mfr_name", { xgroupIndex : null, visible : false } )
                            }

                            objectParams.byMFR = byMFR;
                            let ds = Fse.Data.newDataSource( { object : "OPR.operatorPurchasingByMemberGroup", key : "memberGroupOperatorId", objectParams : objectParams });
                            ds.load().done( function( opData ) {

                                console.log( "DONE" );

                                dataGrid.option( "dataSource", opData );

                            }).then( function() {
                                console.log( "THEN" );
                                dataGrid.endUpdate();
                            })


                        }
                     }
                })
            },
            summary : {
                totalItems : [
                    { column : "volume12", summaryType : "sum", valueFormat : "fixedPoint", displayFormat : "{0}" },
                    { column : "volume3", summaryType : "sum", valueFormat : "fixedPoint", displayFormat : "{0}" }
                ]
            },
            columns : [
                // { dataField : "mfr_name", caption : "Manufacturer", groupIndex : objectParams.byMFR ? 0 : null, visible : objectParams.byMFR ? true : false },
                { dataField : "mfr_name", caption : "Manufacturer", groupIndex : null, visible : false, width : "auto" },
                { dataField : "memberGroupName", caption : memberGroupType },
                { dataField : "affiliationStatus", caption : "Status", width : "auto",
                    calculateCellValue : function( data ) {
                        return data.affiliationStatus == 'A' ? 'Active' : 'Inactive'
                    }
                },
                { dataField : "volume12", caption : "12 Month (total)", dataType : "number", width : "auto", format : "fixedPoint" },
                { dataField : "avg12", caption : "12 Month Avg", dataType : "number", width : "auto", format : "fixedPoint" },
                { dataField : "volume3", caption : "3 Month (total)", dataType : "number", width : "auto", format : "fixedPoint" },
                { dataField : "avg3", caption : "3 Month Avg", dataType : "number", width : "auto", format : "fixedPoint" },

                { dataField : "trendRate", caption : "Trend", dataType : "number", format : "percent", width : "auto" },
                { dataField : "portion3", caption : "Share", dataType : "number", width : "auto", format : "percent" },
                { dataField : "memberGroupRank", caption : "Rank", width : "auto" }

                // ,
                // { name : "purchasing12", caption : "12 Month Purchasing", width : 200, cellTemplate : function( container, options ) {

                //         const purchasingData = options.data;

                //         return $("<div>").dxToolbar( {
                //                 items: [
                //                     { 
                //                         location : "before",
                //                         template : function() {
                //                             let formatted = DevExpress.localization.formatNumber( purchasingData.volume12, "fixedPoint" )
                //                             return $("<div>").text( `${formatted} cases` ).css( { "white-space" : "nowrap" })
                //                         }
                //                     },
                //                     {
                //                         location : "before",
                //                         template: function() {
                //                             let formatted = DevExpress.localization.formatNumber( purchasingData.portionVolume12, "percent" )
                //                             return $("<div>").text( formatted )
                //                         }
                //                     }
                //                 ]
                //             });
                // } }

                // ,
                // { name : "purchasing3", caption : "3 Month Purchasing", width : 200, cellTemplate : function( container, options ) {

                //     const purchasingData = options.data;

                //     let contentCSS = {};
                //     if( purchasingData.portionVolumeChange > 0 ) {
                //         contentCSS = { "background-color" : "#cfe6c1", "border-radius" : "3px", "margin-left" : "2px"};
                //     }                            

                //     return $("<div>").dxToolbar( {
                //         items : [
                //              { 
                //                 location : "before",
                //                 template : function() {
                //                     let formatted = DevExpress.localization.formatNumber( purchasingData.volume3, "fixedPoint" )
                //                     return $("<div>").text( `${formatted} cases` ).css( { "white-space" : "nowrap" })
                //                 }
                //             },
                //             {
                //                 location : "before",
                //                 template: function() {
                //                     let formatted = DevExpress.localization.formatNumber( purchasingData.portionVolume3, "percent" )
                //                     return $("<div>").text( formatted )
                //                 }
                //             },
                //             {
                //                 location : "after",
                //                 template :function() {
                //                     let formatted = DevExpress.localization.formatNumber( Math.abs( purchasingData.portionVolumeChange ), "percent" )
                //                     let content = $("<div>").css( contentCSS );

                //                     if( purchasingData.portionVolumeChange ) {
                //                         content.append( $("<i>").addClass( purchasingData.portionVolumeChange > 0 ? "dx-icon-arrowup" : "dx-icon-arrowdown" ) );
                //                         content.append( $("<span>").text( formatted ).css( { "padding-right" : "3px" }) );
                //                     }
                //                     return content;
                //                 }
                //             }
                //         ]
                //     })

                // }}
            ],

            onCellHoverChanged : function( e ) {
                if( e.eventType == "mouseout" ) {
                    if( cellHover ) cellHover.hide();
                } else if( e.eventType = "mouseover" ) {
                    let hoverText = null;
                    if( e.rowType == "header" ) {
                        if( e.column.dataField == "portion3" ) {
                            hoverText = "Member Group share represents the percentage of an operator's total purchasing that goes through a specific member group. It is calculated by dividing a member group's total confirmed purchases by the operator's total purchases over the past three months.";
                        } else if ( e.column.dataField == "trendRate" ) {
                            hoverText = "Member Group trend represents the percentage increase or decrease in the 3 month average relative to the 12 month average.  It is calculated by dividing the difference of the 3 month average and the 12 month average by the 12 month average.";
                        }

                    }
                    if( ! hoverText ) return;

                    if( ! cellHover ) {
                        cellHoverContent = $("<p>").css( { "width" : "100%", "white-space" : "wrap", "text-align" : "left" });
                        cellHover = $("<div>").dxTooltip( {
                            width : 300,
                            height : "auto",
                            contentTemplate : function() {
                                return cellHoverContent;
                            }
                        }).appendTo($("body")).dxTooltip("instance")
                    }
                    cellHoverContent.empty().text( hoverText );
                    cellHover.option( "target", e.cellElement );
                    cellHover.show();
                }
            }
        }).dxDataGrid( "instance" )

        $("<div>").dxPopup( {
            title : title,
            height : "40vh", width : "60vw",
            contentTemplate : function(){
                return dataGrid.element();
            },
            onHidden : function( e ) {
                e.component.element().remove();
            },
            hideOnOutsideClick : true
        }).appendTo( $("body") ).dxPopup( "show" );


    });


}