DistributorDetails = function( distributorProfile ) {


   let instance = this;

   instance.distributorProfileInstance = distributorProfile;

   instance.initDataFromProfile();
   instance.permissions = DistributorPortfolio.distributorPortfolioPermissions();

   
   instance.primaryContactDisabled = instance.permissions.editPrimaryContact == false ? true : false;
   instance.companyNameFieldDisabled = instance.permissions.editCompanyName == false ? true : false;
   instance.addressFieldsDisabled = instance.permissions.editAddressInformation == false ? true : false;
   instance.classificationDisabled = instance.permissions.editClassification == false ? true : false;
   instance.priorityDisabled = instance.permissions.editPriority == false ? true : false;
   instance.salesRepDisabled = instance.permissions.editSalesRep == false ? true : false;
   instance.salesTerritoryDisabled = instance.permissions.editSalesTerritory == false ? true : false;
   instance.commentsFieldDisabled = instance.permissions.editAccountManagement == false ? true : false;
   
  
   
}

DistributorDetails.prototype.constructor = DistributorDetails;


DistributorDetails.prototype.element = function() {

    let instance = this;

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


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

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


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

    // let toolbar = $("<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)    

    instance.initializeFormData();

    
    return instance.rootElement;


}


DistributorDetails.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.distributorId = formData.distributorId;
        dataToSend.lastUpdated = formData.lastUpdated;

        dataToSend._before = before;

        


        loadPanel.show();
        Fse.Ajax.performAction( {
            object : "CDR.saveDistributorDetails", 
            data : dataToSend
        }).done( function( saveDistributorDetailsResult ) {


            let resultProcessed = $.Deferred();

            if( ! saveDistributorDetailsResult.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 distributorPorfolioListRefreshNeeded = true;
                instance.distributorProfileInstance.load( distributorPorfolioListRefreshNeeded ).done( function( ) {
                    instance.initDataFromProfile();
                    instance.initializeFormData();
                 
                })
   
            })

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


    } else {

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

}

DistributorDetails.prototype.detailsTabTemplate = function() {


    let instance = this;

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

    let managedUnit = instance.data.isUnit;
    
    let cdr_dstcode = instance.data.cdr_dstcode;
    cdr_dstcode ??= '';
    let parentCdrDstName = instance.data.parentCdrDstName;
    parentCdrDstName ??= '';
    
    
    let buyGrpFieldReadOnly = cdr_dstcode != '' || parentCdrDstName != '' ? true : false;

    /*
    if (Fse.Portal.appConfiguration.STP.ownerType == "BRO"){
        //cannot edit FM data
        let fmId = parseFloat(formData.fmId);
        instance.addressFieldsDisabled = !isNaN(fmId) && fmId > 0 ? "true" : instance.addressFieldsDisabled;
        console.log('fmid',fmId)
    }
    */

    let accountManagementItems = [];
    let basicItems = [];   
    let industryItems = [];
    let otherItems = [];

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

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

    accountManagementItems.push( 
    
        { dataField : Fse.Portal.appConfiguration.STP.userOwnerType, caption : "userOwnerType", visible : false, allowHeaderFiltering : false },
        { dataField : Fse.Portal.appConfiguration.STP.userOwnerId, caption : "userOwnerId", visible : false, allowHeaderFiltering : false },
        { itemType : "empty", visible : false },
    
    
        { dataField : "cdr_priority", label : { text : "Priority" },
            isRequired : true,
            editorType : "dxSelectBox",
            editorOptions : {
                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",
                readOnly : instance.priorityDisabled,
            }
        },
        { itemType : "empty", colSpan : 2 },

        { dataField : "classificationId", label : { text : "Classification" }, editorType : "dxSelectBox", editorOptions : {
            xwidth : 300,
            dataSource : Fse.Data.newDataSource( { object : "CDR.classifications", keyField : "classificationId" } ),
            //dataSource : Fse.Data.getLocalDataSource( "$.distributorClassifications" ),
            valueExpr : "classificationId",
            displayExpr : "classificationName",
            searchEnabled : true, searchMethod : "contains", searchExpr : "name",
            showClearButton : true,
            readOnly : instance.classificationDisabled
        }},
        { itemType : "empty", colSpan : 2 },
        
        { dataField : "cdr_territoryid", isRequired : true, label : { text : "Sales Territory" }, editorType : "dxSelectBox", editorOptions : {
            dataSource : Fse.Data.getLocalDataSource( "$.salesTerritories" ),
            xwidth : 300,
            //searchEnabled : true, searchMethod : "contains", searchExpr : "territoryName",
            displayExpr : "territoryName",
            valueExpr : "TerritoryID",
            readOnly : instance.salesTerritoryDisabled,
        }},
        { itemType : "empty", colSpan : 2 },
                    //dataSource : Fse.Data.newDataSource( { object : "TER.salesTerritories", keyField : "TerritoryID" } ),
                    
        { dataField : "mfr_bsr_id", label : { text : "Relationship Manager" }, editorType : "dxSelectBox", editorOptions : {
            xwidth : 300,
            dataSource : Fse.Data.getLocalDataSource( "$.salesRepListUnrestricted" ), // "$.salesRepList"
            displayExpr : "fullName",
            searchEnabled : true, 
            searchMethod : "contains", 
            searchExpr : "fullName",
            valueExpr : "fspro_userId",
            showClearButton : true,
            readOnly : instance.salesRepDisabled,
        }},
        { itemType : "empty", colSpan : 2 },

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


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

                instance.profileErrorsElement = $("<div>");
                itemContainer.append( instance.profileErrorsElement );
            }
        },
        { itemType : "empty", colSpan : 2 }
        
    );
    

    let addBasicItems = function( items ) {

        if( ! items ) {
            return;
        }

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

    basicItems.push( 
       
        { dataField : "companyName", label : { text : "Company Name" }, isRequired : true, editorOptions : {
                xwidth : 300,
                readOnly : instance.companyNameFieldDisabled,
            }
        }
        ,
        { itemType : "empty", colSpan : 2 }
    
    )
    
    addBasicItems( instance.flexFieldItems( formData, "BASIC_A" ));
    
    basicItems.push( 
       
    {
        dataField : "primaryContactId", 
        label : { text : "Primary Contact" },
        editorType : "dxSelectBox",
        editorOptions : {
            xwidth : 300,
            readOnly : instance.primaryContactDisabled,
            showClearButton : true,
            dataSource : Fse.Data.newDataSource( { object : "CRM.partnerContacts", objectParams : { partnerId : instance.data.distributorId, partnerType : "CDR" }, paginate : true, pageSize : 50, keyField : "fspro_userId" }),
            displayExpr : function( data ) {
                return data && `${data.firstName} ${data.lastName}`;
                
            },
            placeholder : "",
            valueExpr : "fspro_userId"
        }
     },

     { itemType : "empty", colSpan : 2 },
     
     {
        dataField : "cdr_dstcode", 
        label : { text : "MFR Cust. Number" },
        editorOptions : {
            xwidth : 300,
            showClearButton : false,
            valueExpr : "cdr_dstCode",
            readOnly : true,
            stylingMode : "underlined", 
            elementAttr : {
                "style" : "border:none"
            }
            }
        },

        { itemType : "empty", colSpan : 2 }
     

     
     )

    

    addBasicItems( instance.addressAndPhoneFields() )
    
    /* addBasicItems( instance.internetFields() ); */

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


    basicItems.push( 

        /*
        {
            dataField : "gs1_gln", 
            disabled : instance.addressFieldsDisabled,
            label : { text : "Gs1 GLN" },
            editorType : "dxTextBox",
            editorOptions : {
                width : 300,
                showClearButton : false,
                disabled : true,
                valueExpr : "gs1_gln"
            }},
        */


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

    instance.data.parentCdrDstName = instance.data.parentCdrDstName == null ? "Independent" : instance.data.parentCdrDstName;

    if( instance.data.parentCdrDstName ) {

        industryItems.push( 
            {
                dataField : "parentCdrDstName",
                label : { text : "Parent" },
                editorOptions : {
                    width : 400,
                    showClearButton : false,
                    readOnly : true,
                    stylingMode : "underlined",
                    elementAttr : {
                        "style" : "border:none"
                    }
                }
            }
                        
        );
    }
    
    
    
    industryItems.push( 
        { dataField : "bgName", isRequired : false, readOnly : true, label : { text : "Buying Group/GPO" }, editorOptions : {
            width : 400,
            displayExpr : "bgName",
            readOnly : buyGrpFieldReadOnly,
            stylingMode : "underlined",
            elementAttr : {
                "style" : "border:none"                
            },
        }},
        

    )
    
    
    let commentStyle = instance.commentsFieldDisabled == true ? "border:none" : "";
    
    otherItems.push(
    
        {
            dataField : "comments",  
            label : { text : "Comments" }, 
            editorType : "dxTextArea", editorOptions : {
                maxLength : 250,
                height : "4em",
                disabled : instance.commentsFieldDisabled,
                elementAttr : {
                    "style" : commentStyle,
                }
            }

        },
        
        {
            dataField : "cdr_recordId",
            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"
            } }
        },



    
    )


    instance.detailsForm = $("<div>").dxForm( {
        items : formItems,
        validationGroup : "DistributorDetails",
        
        onFieldDataChanged : function( e ) {

            //console.log( e );

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

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

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

                $("<a>")
                    .append( parentCompanyName )
                    .css( { "cursor" : "pointer", "text-decoration" : "underline" })
                    .attr( { title : `Go to '${parentCompanyName}'` })
                    .appendTo( instance.parentDistributorLinkContainer )
                    .on( "click", function( jqe) {
                        DistributorPortfolio.getInstance().gotoProfile( { distributorId : fd.parentDistributorId } );
                    })
        
            }


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

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


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

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

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

            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( e.dataField == "state" ) {


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

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

                stateDS.filter( stateFilter );
                stateDS.load();
            }
            
            if( e.dataField == "cdr_territoryid" ) {

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

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

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

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

                })

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


            }             
            /*

            if( customFields[e.dataField] && customFields[e.dataField].onFieldDataChanged ) {
                customFields[e.dataField].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 ) {

            instance.reconfigureFields( e.component );

        }

        
    }).dxForm( "instance" );


    return instance.detailsForm.element();


}


DistributorDetails.prototype.initDataFromProfile = function() {

    let instance = this;

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

}

DistributorDetails.prototype.initializeFormData = function() {

    let instance = this;

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

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

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

    // these are set specifically after the all of the fields 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,
    } );

    instance.detailsForm.endUpdate();

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

}

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

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


    
    
    let dataFields = dataField;
    let instance = this;

    if( ! dataFields ) {
        // do all the fields
        dataFields = [ 
            "mfr_bsr_id", "profileErrors"
        ];

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

    if( ! Array.isArray( dataFields )) {
        dataFields = [ 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.trade.tradeNbr", { disabled : false })
                } else {
                    form.itemOption( "basic.trade.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;

        }

    })



    

}


DistributorDetails.prototype.distributionFields = function() {


    let items = [];


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

    distributorDataFieldPrefixes.forEach( function( dataFieldPrefix ) {

        let labelText = "Preferred Distributor";
        if( dataFieldPrefix == "distrib2" ) {
            labelText = "Secondary Distributor";
        }

        let distribDataSource = Fse.Data.newDataSource( { object : "CDR.distributors2", 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 ])

        items.push( {

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

                {
                    label : { text : labelText },
                    dataField : `${dataFieldPrefix}`,
                    editorType : "dxSelectBox",
                    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 : "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 : 4,
            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 : 2 }

            ]


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

    return items;

}

DistributorDetails.prototype.memberGroupFields = function() {

    let instance = this;
    let items = [];


    // these should be readonly if the client is oneFSEnabled
    let memberGroupsReadOnly = true;

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

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

        memberGroups.push ( 
            {
                label : "Food Mgmt Co.",
                placeholder : "Self Operated",
                dataFields : ["cmcID_1,cmcPartnerAffiliateNbr_1,cmcAffiliationDate_1"],
                // dataSource : Fse.Data.newDataSource( { object : "CDR.memberGroups", keyField : "distributorId", objectParams : { "oprCompanyType" : "C" } } )
                dataSourceOptions :  { object : "CDR.memberGroups", keyField : "distributorId", objectParams : { "oprCompanyType" : "C" } },
                challengeType : "CMC"

            },
            {
                label : "Buying Group/GPO",
                placeholder : "None",
                dataFields : ["gpoID_1,gpoPartnerAffiliateNbr_1,gpoAffiliationDate_1", "gpoID_2,gpoPartnerAffiliateNbr_2,gpoAffiliationDate_3", "gpoID_3,gpoPartnerAffiliateNbr_3,gpoAffiliationDate_3"],
                dataSourceOptions : { object : "CDR.memberGroups", keyField : "distributorId", objectParams : { "oprCompanyType" : "G" } },
                challengeType : "GPO"
                
            }
        )
            
    }

    memberGroups.forEach( function( mg ) {


        let fields = [];
        mg.dataFields.forEach( function( df ) {


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


            fields.push( 

                { 
                    label : { visible : false  },
                    dataField : dataFields[0],
                    editorType : "dxSelectBox",
                    editorOptions : { 
                        readOnly : memberGroupsReadOnly,
                        placeholder : mg.placeholder, 
                        showClearButton : true,
                        dataSource : Fse.Data.newDataSource( mg.dataSourceOptions ),
                        searchExpr : "companyName",
                        searchMode : "contains",
                        searchEnabled : true,
                        displayExpr : "companyName",
                        valueExpr : "distributorId",
                        keyExpr : "distributorId",
                    }
                },
                { label : { text : "ID" },
                    dataField : dataFields[1],
                    editorType : "dxTextBox",
                    editorOptions : {
                        readOnly : memberGroupsReadOnly,
                        maxLength : 50
                    }
                },
                { label : { text : "Since" },
                    dataField : dataFields[2],
                    editorType : "dxDateBox",
                    editorOptions : {
                        readOnly : memberGroupsReadOnly
                    }
                }

            ) 

            if( memberGroupsReadOnly ) {
                fields.push ( 
                    { 
                        template : function( options, container ) {
                            
                            $("<div>").dxButton( {
                                icon : $("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( { distributorId  : instance.data.distributorId, relationshipField : dataFields[0], challengeType : mg.challengeType, challenging : challenging })
                                    }
                                }
                            }).appendTo( container );
                        }
                    }
                )
            } else {
                fields.push( {
                    itemType : "empty"
                })
            }

        })

        items.push( {

            itemType : "group",
            colCount : 8,
            alignItemLabels : false,
            items : [

                { 
                    label : { text : mg.label },
                    template : function( options, container ) {
                        container.append( $("<div>" ) )
                    }
                },
                {
                    itemType : "group",
                    colSpan : 7,
                    colCount : 4,
                    alignItemLabels : false,
                    items : fields
                }

            ]

        });        

    })


    return items;

}

DistributorDetails.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 
    ])
    */

    
    /* convert (555)555-5555 to 555-555-5555 */
    let cleanPhone = instance.data.phone;
    cleanPhone ??= '';
    if ( cleanPhone.length > 0 ){
        cleanPhone = cleanPhone.replace(/[{(}]/g, '');
        instance.data.phone = cleanPhone.replace(/[{)}]/g, '-');
    }   
    


    items.push(

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

        {
            dataField : "address2", label : { text : "Street 2" }, editorOptions : { maxLength : 75, xwidth : 400, readOnly : instance.addressFieldsDisabled }
        },
        { itemType : "empty", colSpan : 2 }

    )

    // 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;
    })

    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",
                readOnly : instance.addressFieldsDisabled,
                width : 80,
                }, 
            }, { itemType : "empty", colSpan : 2 }
            
        );
    }
    
    items.push( 
        
        
                { dataField : "city", label : { text : "City" }, editorOptions : { maxLength : 75, readOnly : instance.addressFieldsDisabled} },

                { dataField : "state", label : { text : "State" }, 
                    editorType : "dxSelectBox", editorOptions : {
                    width : 150,
                    dataSource : stateDS,
                    placeholder : "state",
                    displayExpr : "state",
                    valueExpr : "state",
                    searchEnabled : true,
                    searchExpr : "state",
                    searchMethod : "startswith",
                    showClearButton : true,
                    readOnly : instance.addressFieldsDisabled
                }},
                { dataField : "zipCode", label : { text : "Zip" }, 
                    editorOptions : { maxLength : 10, readOnly : instance.addressFieldsDisabled, width : 100 } 
                },
            
            
                { dataField : "phone", 
                    label : { text : "Main Phone" },
                    editorOptions : { 
                        maxLength : 30, 
                        width : 150, 
                        /*
                        mask: '000-000-0000', 
                        maskChar : ' ', 
                        maskInvalidMessage: 'The phone must have a correct phone format',
                        useMaskedValue : true,
                        */
                        inputAttr: {
                            name: "cdr_dstPhone"
                        },
                        /*
                        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
                                    } )
                                }
                            }
                        }                       
                    }, 
                    /*disabled : instance.addressFieldsDisabled,*/
                    validationRules : [
                        {
                            type: 'pattern',
                            pattern: /^\d{3}-\d{3}-\d{4}$/,
                            message: 'The phone must have a correct phone format',
                            ignoreEmptyValue : true,
                        }
                    ]
                },
        { itemType : "empty", colSpan : 2 }
             
    );

    return items;

}


DistributorDetails.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, width : 300, 
            type : "url"
        },

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

        { 
            dataField : "facebookURL", 
            label : "Facebook", placeholder : "Facebook URL or ID", width : 300,
            type : "url", 
            socialMediaPlatform : "facebook"
        },
        { 
            dataField : "instagramURL",  
            label : "Instagram",  placeholder : "Instagram URL or ID", width : 300,
            type : "url", 
            socialMediaPlatform : "instagram"
        },
        { 
            dataField : "twitterURL", 
            label : "\"X\"", placeholder : "\"X\" URL or ID (1-15 char)", width : 300,
            type : "url", 
            socialMediaPlatform : "twitter"
        },
        { 
            dataField : "tiktokURL", 
            label : "TikTok",placeholder : "TikTok URL or ID", width : 300, 
            type : "url",  
            socialMediaPlatform : "tiktok",
        },
        { 
            dataField : "youtubeURL", 
            label : "YouTube", placeholder : "YouTube URL or ID (10 char)", width : 300,
            type : "url", 
            socialMediaPlatform : "youtube"
        },
        { 
            dataField : "linkedInURL", 
            label : "LinkedIn", placeholder : "LinkedIn URL", maxLength : 150, width : 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 ) {
                        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 textBox = $("<div>").dxTextBox( textBoxConfig ).dxTextBox( "instance" );

                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;



}

DistributorDetails.prototype.seasonalityFields = function() {

    let items = [];
    let instance = this;


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



    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,
            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",
            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 );

                    

                    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 : 8,
        alignItemLabels : false,
        items : [
            {
                label : { text : "Seasonality Dates" },
                template : function( options, container ) {
                    container.append( $("<div>" ));
                }
            },
            {
                colSpan : 7,
                colCount : 8,
                itemType : "group",
                items : [
                    {   colSpan : 3,
                        dataField : "seasonOpenDate", dataType : "date", label : { text : "Opens On" },
                        template : function ( options, container ) {
                            seasonDateTemplate( options, container );
                        }
                    },
                    { colSpan : 3,
                        dataField : "seasonCloseDate", dataType : "date", label : { text : "Closes On" },
                        template : function ( options, container ) {
                            seasonDateTemplate( options, container );
                        }
                    },
                    { itemType : "empty", colSpan : 2 }
                ]

            }


        ],


    })


    return items;

}

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

    let items = [];

    let instance = this;

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

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

    })
    
    return items;
}

DistributorDetails.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 ) {
            
            instance.salesRepDisplayElement.html( "" );
        })

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

DistributorDetails.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}" distributors.` ) )


        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();
    }

}

DistributorDetails.prototype.resolveProfileError = function( profileError ) {

    let resolvedProfileError
    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"; break; // on units if HQ
        case "dd" : resolvedProfileError = "Primary Distributor Details"; break;
        case "cdr2" : resolvedProfileError = "Secondary Distributor"; break; // on units if HQ
        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.distributorProfileInstance.flexFields.forEach( function( field ) {
                if( field.fieldId == fieldId ) {
                    resolvedProfileError = `${field.label} (${field.category})`;
                }
            })
        } 

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

    return resolvedProfileError;


}