DistributorPortfolio = function() {

    let instance = this;

    this.rootElement = null;
    this.distributorList = null;
    this.listRefreshNeeded = false;

    this.operations = DistributorPortfolio.distributorPortfolioPermissions();
    
    DistributorPortfolio._distributorPortfolioInstance = this;


    Fse.CRM.addViewProfileHandler( { viewProfile : function( profileURL ) {
        
        let urlParams = Fse.Util.getURLParams( profileURL );

        if( ! urlParams.app || urlParams.app != 'CDR.portfolio' ) {
            return false;
        }

        let distributorId = 0;

        if( urlParams.cdr_recordId ) {
            distributorId = urlParams.cdr_recordId
        } else if ( urlParams.partnerId && urlParams.partnerType == "CDR" ) {
            distributorId = urlParams.partnerId;
        } else if ( urlParams.distributorId ) {            
            distributorId = urlParams.distributorId
        } else if ( urlParams.includeMyAccountsOnly && instance.distributorList ) {
            instance.distributorList.search( {
                includeMyAccountsOnly : true
            });
            return true;
        } else {
            return false;
        }

        
        if( distributorId > 0 ) {
            
            let tabId = urlParams.tab;
            if( tabId ) {
                const validTabs = {
                    "detail" : "detail",
                    "contact" : "contact",
                    "purchasing" : "purchasing",
                    "interactions" : "interactions",
                    "units" : "units",
                    "members" : "members",
                    "opportunities" : "opportunities",
                    "objectives" : "objectives",
                    "trade" : "trade",
                    "bids" : "bids",
                    "notes" : "notes",
                    "files" : "files",

                    // legacy tab translations
                    "dtl" : "detail",
                    "cntct" : "contact",
                    "pp" : "purchasing",
                    "inits" : "interactions",
                    "tpm" : "trade",
                    "affiliates" : "members"


                 }
                if( validTabs[tabId] ) {
                    tabId = validTabs[tabId];
                } else {
                    tabId = null; // null to use current tab or detail tab
                }
            }            
            
            

            DistributorPortfolio.getDistributorDetails( distributorId ).done( function( data ) {
                instance.gotoProfile( data );                
            })

            return true;
        }
        return false;
    }})
    

}

DistributorPortfolio.distributorPortfolioPermissions = function(  ){
    
    const DistributorManagementAdd = Fse.Portal.checkPermission( "DistributorManagementAdd" )
    const distributorManagementEdit = Fse.Portal.checkPermission( "DistributorManagementEdit" )
    const distributorClassifcationChange = Fse.Portal.checkPermission( "DistributorAcctClassChange" )
    const distributorAcctPriorityChange = Fse.Portal.checkPermission( "DistributorAcctPriorityChange" )
    const distributorAcctSalesRepChange = Fse.Portal.checkPermission( "DistributorAcctSalesRepChange" )
    const distributorAcctTerritoryChange = Fse.Portal.checkPermission( "DistributorAcctTerritoryChange" )
    
    //convert portal setting to boolean
    const editAddrSettingString = Fse.Portal.appConfiguration["102"].distributorAddressEdit === "true" ? true : false;
    const editCompanyNameSettingString = Fse.Portal.appConfiguration["102"].distributorNameEdit === "true" ? true : false;
        
    let operations = {
    
        allowCreate : DistributorManagementAdd,
        allowDelete : DistributorManagementAdd,                  
        editAccountManagement : distributorManagementEdit,
        editCompanyName : distributorManagementEdit && editCompanyNameSettingString,
        editAddressInformation : distributorManagementEdit && editAddrSettingString, // distributorManagementEdit == false ? false : editAddrSettingString,
        editClassification : distributorClassifcationChange,
        editPriority : distributorAcctPriorityChange,
        editSalesRep : distributorAcctSalesRepChange,
        editSalesTerritory : distributorAcctTerritoryChange,
        editPrimaryContact : distributorManagementEdit,
    
    }
   
    return operations;
    
}

DistributorPortfolio.getHandler = function() {
	var oLink = document.getElementById( "cdrHandlerLink" );
	return oLink.getAttribute( "href" );
	
};


DistributorPortfolio.openDistributorSummaryPDF = function( currentDistributor ){
    let ownerType = Fse.Portal.appConfiguration.STP.ownerType;
    let reportCode = ownerType == "MFR" ? "distributorBusinessReview" : "stockingReport";

    let distributorId = currentDistributor.cdr_recordId;
    let territoryId = currentDistributor.cdr_territoryid;    

    if ( ownerType == "MFR"){
        
            Fse.Portal.showReportCenter( {
                applicationCode : "102",
                reportCode : reportCode,
                params : {
                    rpt_ter_opt : territoryId,
                    rpt_cdr_opt : distributorId
                }
            })
    
    }
    
        
    if ( ownerType == "BRO"){
    
        let pdfURL = Fse.Util.updateURL2( DistributorPortfolio.getHandler(), {
            cdr_recordid : distributorId,
            ajax : "reportCenter",
            rc_report : reportCode,
            rc_format : "PDF"
        })

        Fse.Portal.showReportCenter(pdfURL ) ;
    
    
        
    }
}


DistributorPortfolio.showDistributorProfileDialog = function( nDistributorId ) {

    let sURL = Fse.Util.updateURL( DistributorPortfolio.getHandler() + "?get=distributorProfileDialog&mode=direct", { distributorId : nDistributorId } );
	
	let oOptions = {
			title : "Distributor Profile Quick View",
			width : "500px",
			src : sURL
		};
		
	Fse.DialogManager.show( "distributorProfileDialog$", oOptions );

}

DistributorPortfolio.getDistributorDetails = function( distributorId ) {

    let d = $.Deferred();

    let distributorDataStore = Fse.Data.newDataSource( { object : "CDR.distributorDetails", paginate : false, keyField : "cdr_recordId", objectParams : { cdr_recordId : distributorId }  }).store();
    distributorDataStore.byKey( distributorId ).done( function( data ) {

        if( data ) {
            d.resolve( data )
        } else {
            d.resolve( null );
        }
    })

    return d;


}

DistributorPortfolio.showDeleteDistributorDialog = function ( distributorId, distributorTk, onSuccess ) {


    let checkDeleteDataSource = Fse.Data.newDataSource( { object : "CDR.checkDistributorDelete", paginate : false, keyField : "distributorId", objectParams : { cdr_recordId : distributorId }  });
    checkDeleteDataSource.load().done( function( checkDelete ) {


        if( Array.isArray( checkDelete ) ) {
            checkDelete = checkDelete[0];
        }


        DistributorPortfolio.getDistributorDetails( distributorId ).done( function( distributorData ) {


            let actionButton = null;
            let popup = null;
            let deleteForm = null;
            
            if( checkDelete.allowDelete ) {
                actionButton = $("<div>").dxButton( {
                    text : "Submit",
                    type : "default",
                    onClick : function( e ) {

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

                            let dataToSend = deleteForm.option( "formData" );
                            Fse.Ajax.performAction( {
                                object : "CDR.deleteDistributor", 
                                data : dataToSend
                            }).done( function( deleteDistributorResult ) {

                                popup.hide();

                                if( deleteDistributorResult.success && onSuccess ) {
                                    onSuccess();
                                }

                            });

                        }

                    }
                }).dxButton( "instance" );
            } else {
                actionButton = $("<div>").dxButton( {
                    text : "Cancel",
                    onClick : function( e ) {
                        popup.hide();
                    }
                }).dxButton( "instance" );
            }




            popup = $("<div>").dxPopup( {

                title : `Delete ${getText( 'DISTRIBUTOR' )}`,
                width : 600,
                height : "auto",
                hideOnOutsideClick : true,
                contentTemplate : function( ) {

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

                    content.append( $("<p>").html( `You are about to <strong>DELETE</strong> the following ${getText( 'DISTRIBUTOR' ).toLowerCase()} from the ${getText( 'DISTRIBUTOR' )} Portfolio:` ));


                    let distributorElement = $("<div>" ).css( { "padding-left" :"10px", "padding-top" : "10px", height : "100px" } );

                    distributorElement.append( $("<div>").text( distributorData.companyName ).css( { "font-weight" : "bold" } ));
                    distributorElement.append( $("<div>").text( distributorData.address ) );
                    if( distributorData.address2 ) {
                        distributorElement.append( $("<div>").text( distributorData.address2 ) );
                    }
                    distributorElement.append( $("<div>").text( `${distributorData.city}, ${distributorData.state} ${distributorData.zipCode}` ));

                    distributorElement.append( $("<div>").text( `Source: ${distributorData.recordSource}` ) );

                    content.append( distributorElement );

                    if( checkDelete.allowDelete ) {

                        deleteForm = $("<div>").dxForm( {

                            formData : {
                                distributorId : distributorId, 
                                distributorTk : distributorTk,
                                deletedBy : Fse.Portal.appConfiguration.STP.userFullName,
                            },

                            items : [

                                { template : function( options, itemElement ) {
                                        let html = `To confirm the delete of this ${getText( 'DISTRIBUTOR' ).toLowerCase()}, select the most appropriate reason for the deletion, provide any additional details, and then click the <em>Submit</em> button.`;
                                        itemElement.append( $("<p>").html( html ));
                                    }
                                },

                                { label : { text : "Deleted By" }, dataField : "deletedBy", editorOptions : { readOnly : true } },

                                { label : { text : "Reason" }, dataField : "deleteReason", isRequired : true, editorType : "dxSelectBox", editorOptions : {
                                    items : [ "Duplicate", "No longer in business", "Low volume", "Not my Account", "Not within market range", "Other" ]
                                    } 
                                },
                                { label : { text : "Details" }, dataField : "deleteDetails", isRequired : true, editorType : "dxTextArea", editorOptions : {
                                    maxLength : 200
                                    }
                                }

                            ]

                        }).dxForm( "instance" );

                        content.append( deleteForm.element() );

                    } else {

                        if( checkDelete.dependencies.length ) {

                            content.append( $("<p>" ).html( `This ${getText( 'DISTRIBUTOR' )} cannot be deleted because it has the following dependents:` ).css( { "font-weight" : "bold" } ) );

                            $("<div>").dxDataGrid( {

                                dataSource : checkDelete.dependencies,
                                columns : [
                                    { dataField : "type", caption : "Type", width : 125 },
                                    { dataField : "data", caption : "Detail" }
                                ],
                                height : 150,
                                showBorders : true,
                                scrolling : { mode : "virtual" }

                            }).appendTo( content );


                        } else {

                            let restrictionsElement = $("<p>").addClass( "fse-alert" );

                            restrictionsElement.append( "You can not delete this distributor because there are " );

                            for( x = 0; x < checkDelete.restrictions.length; x++ ) {

                                if( x > 0 ) {
                                    if( x == checkDelete.restrictions.length - 1 ) {
                                        restrictionsElement.append( " and ")
                                    } else {
                                        restrictionsElement.append( ", " );
                                    }
                                }

                                restrictionsElement.append( checkDelete.restrictions[x] )

                            }

                            restrictionsElement.append( "." );
                            restrictionsElement.append( $("<br>") );
                            restrictionsElement.append( "Click the Cancel button to close this dialog box.")

                            content.append( restrictionsElement );

                        }

                    }

                    return content;

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


            }).appendTo( "body" ).dxPopup("instance");


            popup.show();


        })

        })



}

DistributorPortfolio.prototype.constructor = DistributorPortfolio;

DistributorPortfolio.prototype.element = function() {

    let instance = this;
    if( instance.multiView ) { 
        return instance.multiView.element();
    }

    instance.multiView = $("<div>").dxMultiView( {

        swipeEnabled : false,
        selectedIndex : 0,
        height : "100%",
        items : [
            { template : function() {
                instance.distributorList = new DistributorList( { 
                    stateKey : "DistributorPortfolio.DistributorList",
                    manager : {

                        onSelectionChanged : function( distributorData ) {

                            if( distributorData && distributorData.distributorId ) {

                                instance.currentDistributor = $.extend( true, {}, distributorData );

                            } else {
                                instance.currentDistributor = null;
                            }

                            if( instance.multiView.option( "selectedIndex" ) == 1 ) {
                                instance.createDistributorProfile();
                            }
                        },

                        viewProfile : function( distributorData ) {
                            instance.viewProfile( distributorData );
                        }

                    }
                });
                return instance.distributorList.element();
                }
            },
            { template : function() {
                instance.distributorProfileHome = $("<div>").css( { "height" : "100%" });

                instance.distributorProfileHeading = $("<div>").css( { "width" : "100%" } )
                    .append( instance.createProfileHeading() );

                let topSection = $("<div>").css( { "display" : "flex", "align-items" : "center", "padding-bottom" : "5px" } )
                    .append( instance.distributorProfileHeading )
                    .append( instance.createNavigation().element() );

                let profileBox = $("<div>").dxBox( {
                    direction : "col",
                    height : "100%",
                    items : [
                        {
                            baseSize : 50,
                            template : function() {
                                return topSection;
                            }
                        },
                        {
                            ratio : 1,
                            template : function() {
                                return instance.distributorProfileHome
                            }
                        }
                    ]
                }).dxBox( "instance" );
                return profileBox.element();                                    

                // return $("<div>")
                //     .append( topSection )
                //     .append( instance.distributorProfileHome );

                }

            }
        ],
        onSelectionChanged : function( e ) {
            
            let selectedIndex = e.component.option( "selectedIndex" );
        
            // distributor profile
            if( selectedIndex == 1 ) {
                instance.createDistributorProfile();
            }
            // distributor list
            if( selectedIndex == 0 ) {
                if( instance.listRefreshNeeded ) {
                    instance.listRefreshNeeded = false;
                    instance.distributorList.refresh();
                }
            }
        }


    }).dxMultiView( "instance" );

    instance.multiView.element().addClass( "DistributorPortfolio" );

    return instance.multiView.element();

    
}

DistributorPortfolio.prototype.createProfileHeading = function() {

    let instance = this;

    let distributor = instance.currentDistributor;
    
    //console.log('distributor',distributor);
         
    let content = $("<div>").css( { "font-size" : "18px", "height" : "50px",  "padding-left" : "8px" } ) 
    content.append( $("<div>").css( { "padding-bottom" : "5px" } ));

    content.append( $("<span>").text( distributor.companyName ) )
    if( distributor.cdr_priority && distributor.cdr_priority == "*" ) {
        content.append( $("<span>").addClass( [ "ico", "a-plus-indicator" ] ));
    }
    

    let accountOwnerElement = null;
    if( distributor.accountOwnerFullName ) {

        if( distributor.accountOwnerEmail ) {

            accountOwnerElement = $("<a>")
            .text( `[${distributor.accountOwnerFullName}]` )
            .attr( { "href" : `mailto:${distributor.accountOwnerEmail}` })
            .on( "click", function() {
                Fse.Portal.showEmailDialog( accountOwnerElement[0] )
                return false;
            })

        } else {
            accountOwnerElement = $("<span>").text( `[${distributor.accountOwnerFullName}]` )
        }

    } else {

        let unassignedLabel = Fse.Portal.appConfiguration["102"].unassignedLabel;
        
        accountOwnerElement = $("<span>").text( `[${unassignedLabel}]` );
        if( distributor.territoryManagerEmail) {

            accountOwnerElement = $("<a>")
            .text( `[${unassignedLabel}]` )
            .attr( { "href" : `mailto:${distributor.territoryManagerEmail}` })
            .on( "click", function() {
                Fse.Portal.showEmailDialog( accountOwnerElement[0] )
                return false;
            })

        }
    }

    accountOwnerElement.css( { "font-size" : "14px", "padding-left" : ".5em" } )
    content.append( accountOwnerElement )

    if( distributor.address ) {
        content.append( $("<div>").text( `${distributor.address} ${distributor.city}, ${distributor.state} ${distributor.zipCode}` ).css( { "font-size" : "12px" } ) );
    }
    return content;
    
    

}

DistributorPortfolio.prototype.createNavigation = function() {
      let instance = this;

    if( instance.navigation ) {
        instance.navigation.dispose();
        instance.navigation = null;
    }


    let toolbarItems = []
    
    if (instance.operations.allowCreate == true){
        toolbarItems.push( {
            location : "after",
            widget : "dxButton",
            options : { 
                icon : "plus",
                hint : `Add new ${getText( 'DISTRIBUTOR' )}`,
                onClick : function( e ) {
                    
                    let newDistributorProfileDialog = new NewDistributorProfileDialog( {
    
                        onReturn : function( distributorData ) {
    
                            if( distributorData ) {
                                instance.viewProfile( distributorData );
                            }
    
                        }
    
                    });
                    
                    newDistributorProfileDialog.show();
                }
            }
        });
    }
    
    if (instance.operations.allowDelete == true){
        toolbarItems.push( {
            location : "after",
            widget : "dxButton",
            options : { 
                icon : "trash",
                hint : `Delete this ${getText( 'DISTRIBUTOR' )}?`,
                onClick : function( e ) {
    
                    DistributorPortfolio.showDeleteDistributorDialog( instance.currentDistributor.cdr_recordId, instance.currentDistributor.cdr_recordIdTk, function() {
                        instance.distributorList.selectPrevious();
                    } );
    
                }
            }
        });
    }
    
    
    let ownerType = Fse.Portal.appConfiguration.STP.ownerType;
    let reportTitle = ownerType == "MFR" ? "Business Review Summary" : "Stocking Report";
    let distributorReportPermission = false;
    
    if(ownerType == "MFR"){
        let DistributorManagement = Fse.Portal.checkPermission( "ManagementReporting" );
        let CRMReportCenter = Fse.Portal.checkPermission( "CRMReportCenter" );
        distributorReportPermission = DistributorManagement || CRMReportCenter ? true : false;
    }else if (ownerType == "BRO"){
        let DistributorManagement = Fse.Portal.checkPermission( "DistributorManagement" );
        let OrderMgmtReports = Fse.Portal.checkPermission( "OrderMgmtReports" );
        distributorReportPermission = DistributorManagement || OrderMgmtReports ? true : false;
    }
    
    
    
    if( distributorReportPermission ){
    
        toolbarItems.push( {
            location : "after",
            widget : "dxButton",
            options : {
                icon : "pdffile",
                hint : reportTitle,
                onClick : function( e ) {
                    DistributorPortfolio.openDistributorSummaryPDF( instance.currentDistributor );
                }
            }
        })
        
    }
    
    toolbarItems.push( {
        location : "after",
        widget : "dxButton",
        options : {
            icon : "refresh",
            hint : `Refresh ${getText( 'DISTRIBUTOR' )} Profile`,
            onClick : function( e ) {
                instance.createDistributorProfile();
                // call refresh on the current profile
            }
        }
    })


    toolbarItems.push( {
        location : "after",
        widget : "dxButton",
        options : {
            icon : "detailslayout",
            hint : "List Manager",
            onClick : function( e ) {

                selections = [ instance.currentDistributor.distributorId ];

                ListManager.show( { 
                            
                    selections : selections,
                    selectionMetaData : "CRM.distributorListSelectionInfo", 
                    onSuccess : function( result ) {
                    },
                    xafterItems : [ 
                        { text : "view list", value : "viewList" },
                        { text : "reset", value : "reset" }
                    ]

                } )

            }
        }
    })

    toolbarItems.push( {
        location : "after",
        template : function() {

            instance.favoriteIcon = $("<i>")
                .addClass( [ "dx-icon-favorites", "tac-grey-100" ] )
                .css( { "font-size" : "18px", "font-weight" : "bold" } )
                .attr( { "title" : "Add to my favorites" } )

            Fse.CRM.getPartnerFlag( {
                partnerId : instance.currentDistributor.distributorId,
                partnerType : "CDR"
            }).done( function( flagStatus ) {
    
                let icon = instance.favoriteIcon;
    
                if( flagStatus.flagged ) {
                    icon.addClass( [ "tac-yellow", "flagged" ] )
                    icon.removeClass( [ "tac-grey-100" ]);
                } else {
                    icon.removeClass( [ "tac-yellow", "flagged" ] )
                    icon.addClass( [ "tac-grey-100" ]);
                }
        
            })
        

            return instance.favoriteIcon
                    .on( "click", function( e ) { 


                        let flagOptions = {
                            partnerId : instance.currentDistributor.distributorId, 
                            partnerType : "CDR" 
                        }

                        let icon = $( e.target );

                        if( icon.hasClass( "flagged" ) ) {
                            flagOptions.flagged = false
                        } else {
                            flagOptions.flagged = true;
                        }


                        if( flagOptions.flagged ) {
                            icon.addClass( [ "tac-yellow", "flagged" ] )
                            icon.removeClass( [ "tac-grey-100" ]);
                        } else {
                            icon.removeClass( [ "tac-yellow", "flagged" ] )
                            icon.addClass( [ "tac-grey-100" ]);
                        }

                        Fse.CRM.setPartnerFlag( flagOptions ).done( function( r ) {
                        })
                        
                    } )
        }
    })   

    toolbarItems.push(
    
        {
            location : "after", widget : "dxButton", options : {
                icon : "filter",
                onClick : function( e ) {
                    instance.showFilters();
                }
            }
        },

        {
            location : "after", widget : "dxButton", options : {
                type : "normal",
		  		icon :"help",
		  		hint : "View Help",
		  		onClick : function( e ) {
		  			Fse.Portal.showQuickHelp( "DistributorProfile" );
		  		}
            }
        },
        
    
        { location : "after", widget : "dxButton", options : { 
                icon : "spinprev", 
                onClick : function( e ) {
                    instance.distributorList.selectPrevious();
                }
            }
        },
        { location : "after", widget : "dxButton", options : { 
                text : `${getText( 'DISTRIBUTOR' )} List`, 
                onClick : function( e ) {
                    instance.multiView.option( "selectedIndex", 0 );
                }       
            }
        },
        { location : "after", widget : "dxButton", options : { 
            icon : "spinnext",
            onClick : function( e ) {
                    instance.distributorList.selectNext();
                }
            }
        }
    )

  

    instance.navigation = $("<div>").dxToolbar( {
        items : toolbarItems
    }).dxToolbar( "instance" );    

    return instance.navigation;

}

DistributorPortfolio.prototype.showFilters = function() {

    /*
    let instance = this;

    if( !instance.searchCenter ) {
        instance.searchCenter = new DistributorSearch( { applySearch : function( searchParams ) {
            instance.multiView.option( "selectedIndex", 0 );
            instance.distributorList.search( searchParams );
        }});
    }
    instance.searchCenter.show( instance.searchParams, instance.filterPreferences ); 
    */
    
    let instance = this;

    if( instance.distributorList ) {
        let applyPromise = instance.distributorList.showFilters();
        applyPromise.done( function() {
            instance.multiView.option( "selectedIndex", 0 );
        });
    }     


}


DistributorPortfolio.prototype.createDistributorProfile = function( targetTabId ) {

    let instance = this;

    let tabId = null;

    if( instance.distributorProfile ) {
        tabId = instance.distributorProfile.getCurrentTabId();
        instance.distributorProfile.element().remove();
    }

    tabId = tabId ? tabId : "detail";
    
    if( targetTabId ) {
        tabId = targetTabId;
    }    

    if( instance.currentDistributor ) {


        instance.distributorProfile = new DistributorProfile( { distributorId : instance.currentDistributor.distributorId }, { initialTabId : tabId, portfolio : instance } );
        
        /*
        instance.distributorProfile.ready().done( function( data ) {
            instance.currentDistributor = $.extend( true, {}, data );
            instance.navigation.repaint();
        })
        */
        
        instance.distributorProfile.ready().done( function( data ) {
            instance.currentOperator = $.extend( true, {}, data );
            instance.repaintHeading();
        })
        
        instance.distributorProfileHome.append( instance.distributorProfile.element() );



    }


}

DistributorPortfolio.prototype.repaintHeading = function() {

    let instance = this;
    instance.distributorProfileHeading.empty().append( instance.createProfileHeading() )
    instance.navigation.repaint();

}


DistributorPortfolio.getInstance = function() {
    return DistributorPortfolio._distributorPortfolioInstance;
}



DistributorPortfolio.prototype.gotoProfile = function( data ) {

    let instance = this;

    if( data.distributorId ) {

        if( instance.currentDistributor && instance.currentDistributor.distributorId == data.distributorId ) {
            instance.multiView.option( "selectedIndex", 1 );
        } else {
            instance.currentDistributor = data;
            instance.multiView.option( "selectedIndex", 1 );
        }

        instance.createDistributorProfile();

    }

}

DistributorPortfolio.prototype.viewProfile = function( data, targetTabId ) {

    if( data.tab){
        targetTabId = data.tab;
    }
    

    let instance = this;

    let currentIndex = instance.multiView.option( "selectedIndex" );
    let newProfileNeeded = currentIndex == 1 ? true : false;

    if( targetTabId ) {
        newProfileNeeded = true;
    }
    
    if( instance.currentDistributor && instance.currentDistributor.distributorId == data.distributorId ) {
        instance.multiView.option( "selectedIndex", 1 );
    } else {
        instance.currentDistributor = data;
        instance.multiView.option( "selectedIndex", 1 );
    }

    if( newProfileNeeded ) {
        instance.createDistributorProfile( targetTabId );
    }

}



DistributorPortfolio.pickDistributor = function( callOptions ) {

    let dataGrid = null;

    let pickButton = null;

    let distributorDataSource = Fse.Data.newDataSource( { object : "CRM.distributorList", keyField : "distributorId", paginate : true, pageSize : 25 } );
    if( callOptions.filter ) {
        distributorDataSource.filter( callOptions.filter );
    }

    let popup = $("<div>").dxPopup( {
        title : "Pick Distributor",
        height : "auto",
        width : 725,
        contentTemplate : function() {

            let content = $("<div>")

            if( callOptions.message ) {
                $("<p>").text( callOptions.message ).appendTo( content );
            }

            dataGrid = $("<div>").dxDataGrid( {
                dataSource : distributorDataSource,
                filterRow : { visible : true },
                columns : [
                    "territoryName", "companyName", "address", "city", { dataField : "state", width : 70 }, { dataField : "zipCode", width : 80 }
                ],
                height : 450,
                width : 700,
                scrolling : {
                    mode : "virtual"
                },
                remoteOperations : {
                    paging : true,
                    filtering : true,
                    sorting : true
                },
                showBorders : true,
                selection : { allowSelectAll : false, mode : "single", showCheckBoxesMode : "always" },
                onSelectionChanged : function( e ) {

                    if( e.selectedRowsData && e.selectedRowsData.length ) {
                        pickButton.option( "disabled", false );
                    } else {
                        pickButton.option( "disabled", true );
                    }

                }
            }).dxDataGrid( "instance" );
            
            dataGrid.element().appendTo( content );

            return content;

        },
        toolbarItems : [
            {
                toolbar : "bottom",
                location : "after",
                template : function() {

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

                            callOptions.onSuccess( dataGrid.getSelectedRowsData() )
                            popup.hide();
                        }   
                    }).dxButton( "instance" );

                    return pickButton.element();

                }
    
            }
        ],
        hideOnOutsideClick : true,
        onHidden : function( e ) {
            e.component.element().remove();
            e.component.dispose();
        }
    }).dxPopup("instance");

    popup.element().appendTo( $("body" ));
    popup.show();


}