OperatorPortfolio = function() {

    let instance = this;

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

    
    OperatorPortfolio._operatorPortfolioInstance = this;


    Fse.CRM.addViewProfileHandler( { viewProfile : function( profileURL ) {



        let urlParams = Fse.Util.getURLParams( profileURL );
        console.log( "urlParams" );
        console.log( urlParams );
        if( ! urlParams.app || urlParams.app != 'OPR.portfolio' ) {
            return false;
        }

        let operatorId = 0;

        if( urlParams.operatorId ) {
            operatorId = urlParams.operatorId
        } else if ( urlParams.partnerId && urlParams.partnerType == "OPR" ) {
            operatorId = urlParams.partnerId;
        } else if ( instance.operatorList ) {

            let listSearch = {};

            let listSearchPromise = $.Deferred();

            if( urlParams.includeMyAccountsOnly ) {
                listSearch.includeMyAccountsOnly = true;
            }

            if( urlParams.operatorListId ) {
                listSearch.operatorListId = parseInt( urlParams.operatorListId );

                let listStore = Fse.Data.newDataSource( { object : "LST.lists", keyField : "listId", paginate : false } ).store();
                listStore.byKey( listSearch.operatorListId ).done( function( listItem ) {
                    if( listItem && listItem.listId == listSearch.operatorListId ) {
                        listSearchPromise.resolve();
                    } else {
                        listSearchPromise.reject();
                    }
                })

            } else {
                listSearchPromise.resolve();
            }


            listSearchPromise.done( function() {

                if( Object.keys(listSearch).length !== 0 ) {

                    // make sure the portfolio is on the list view
                    instance.multiView.option( "selectedIndex", 0 );
                                    
                    // if( urlParams.perspective ) {
                    //     instance.operatorList.showPerspective( urlParams.perspective );
                    // } 


                    instance.operatorList.showPerspective( "operator" );
                    instance.operatorList.search( listSearch );
                    return true;
        
                }
    
            }).fail( function() {
                console.log( "listSearch rejected" );
            })

             

        } else {
            return false;
        }


        console.log( `Handling: ${profileURL}`)



        if( operatorId ) {

            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"

                    // legacy tabs that do not need a translations
                    // "opportunities" : "opportunities",
                    // "units" : "units",
                    // "objectives" : "objectives",
                    // "bids" : "bids",
                    // "notes" : "notes",
                    // "files" : "files"

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

            OperatorPortfolio.getOperatorDetails( operatorId ).done( function( data ) {
                instance.currentOperator = data;
                console.log( instance.currentOperator );
                instance.gotoProfile( data, tabId, true ); // fullData = true
            })

            return true;
        }
        return false;
    }})

}

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

OperatorPortfolio.openOperatorSummaryPDF = function( operatorId ){

    let pdfURL = Fse.Util.updateURL2( OperatorPortfolio.getHandler(), {
        operatorId : operatorId,
        view : "operatorSummaryPDF",
        mode : "direct"
    })
    
    window.open( pdfURL, "_blank", "noopener noreferrer" );
    
    
}


OperatorPortfolio.showOperatorProfileDialog = function( nOperatorId ) {

    let sURL = Fse.Util.updateURL( OperatorPortfolio.getHandler() + "?get=operatorProfileDialog&mode=direct", { operatorId : nOperatorId } );
	
	let oOptions = {
			title : "Operator Profile Quick View",
			width : "500px",
			src : sURL
		};
		
	Fse.DialogManager.show( "operatorProfileDialog$", oOptions );

}

OperatorPortfolio.getOperatorDetails = function( operatorId ) {

    let d = $.Deferred();

    let operatorDataStore = Fse.Data.newDataSource( { object : "OPR.operatorDetails", paginate : false, keyField : "operatorId", objectParams : { operatorId : operatorId }  }).store();
    operatorDataStore.byKey( operatorId ).done( function( data ) {

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

    return d;


}

OperatorPortfolio.showDeleteOperatorDialog = function ( operatorId, operatorTk, onSuccess ) {


    let checkDeleteDataSource = Fse.Data.newDataSource( { object : "OPR.checkOperatorDelete", paginate : false, keyField : "operatorId", objectParams : { operatorId : operatorId }  });
    checkDeleteDataSource.load().done( function( checkDelete ) {


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


        OperatorPortfolio.getOperatorDetails( operatorId ).done( function( operatorData ) {


            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 : "OPR.deleteOperator", 
                                data : dataToSend
                            }).done( function( deleteOperatorResult ) {

                                popup.hide();

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

                            });

                        }

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




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

                title : "Delete Operator",
                width : 600,
                height : "auto",
                hideOnOutsideClick : true,
                contentTemplate : function( ) {

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

                    content.append( $("<p>").html( "You are about to <strong>DELETE</strong> the following operator from the Operator Porfolio:" ));


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

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

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

                    content.append( operatorElement );

                    if( checkDelete.allowDelete ) {

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

                            formData : {
                                operatorId : operatorId, 
                                operatorTk : operatorTk,
                                deletedBy : Fse.Portal.appConfiguration.STP.userFullName,
                            },

                            items : [

                                { template : function( options, itemElement ) {
                                        let html = "To confirm the delete of this operator, 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>" ).text( "This Operator 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 ${getText( 'OPERATOR' )} 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();


        })

        })



}

OperatorPortfolio.prototype.constructor = OperatorPortfolio;

OperatorPortfolio.prototype.element = function() {

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

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

        swipeEnabled : false,
        selectedIndex : 0,
        deferRendering : false,
        height : "100%",
        items : [
            { template : function() {
                instance.operatorList = new OperatorList( { 
                    stateKey : "OperatorPortfolio.OperatorList",
                    manager : {

                        onSelectionChanged : function( operatorData ) {

                            if( operatorData && operatorData.operatorId ) {

                                console.log( "OnSelectionChanged!");
                                console.log( "operatorData", operatorData );
                                console.log( "currentOperator", instance.currentOperator );

                                if( ! instance.currentOperator || operatorData.operatorId != instance.currentOperator.operatorId ) {
                                    instance.currentOperator = $.extend( true, {}, operatorData );
                                }

                            } else {
                                instance.currentOperator = null;
                            }

                            if( instance.multiView.option( "selectedIndex" ) == 1 ) {

                                instance.viewOperatorProfile();

                            }
                        },

                        viewProfile : function( operatorData, initialTabId  ) {
                            instance.viewProfile( operatorData, initialTabId );
                        }

                    },
                    portfolio : instance

                });
                return instance.operatorList.element();
                }
            },
            // { template : function() {
            //     instance.operatorProfileHome = $("<div>");

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

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

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

            {
                template : function() {

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

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

                    let topSection = $("<div>").css( { "display" : "flex", "align-items" : "center", "padding-bottom" : "5px" } )
                        .append( instance.operatorProfileHeading )
                        .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.operatorProfileHome
                                }
                            }
                        ]
                    }).dxBox( "instance" );
                    return profileBox.element();

                }
            }
          
        ],
        onSelectionChanged : function( e ) {

            let selectedIndex = e.component.option( "selectedIndex" );

            // opeator profile
            if(  selectedIndex == 1 ) {

                instance.viewOperatorProfile();

            }

            // operator list
            if( selectedIndex == 0 ) {
                if( instance.listRefreshNeeded ) {
                    instance.listRefreshNeeded = false;
                    instance.operatorList.refresh();
                }
            }
        }


    }).dxMultiView( "instance" );

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

    return instance.multiView.element();

    
}

OperatorPortfolio.prototype.createProfileHeading = function() {

    let instance = this;

    if( ! instance.currentOperator ) {
        return $("<div>");
    }

    let operator = instance.currentOperator;

    console.log( "createProfileHeading -> operator", operator );

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

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

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

        if( operator.accountOwnerEmail ) {

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

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

    } else {


        let unassignedLabel = "unassigned";
        
        if( Fse.Portal.appConfiguration.OPR.unassignedLabel ) {
            unassignedLabel = Fse.Portal.appConfiguration.OPR.unassignedLabel;
        }

        let unassignedDisplayText = `[${unassignedLabel}]`;

        accountOwnerElement = $("<span>").text( unassignedDisplayText );
        if( operator.territoryManagerEmail) {

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

        }
    }

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

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

OperatorPortfolio.prototype.allowAdd = function() {
    let allowAddEnabled = Fse.Portal.checkPermission( "OperatorManagementAdd");
    return allowAddEnabled;
}

OperatorPortfolio.prototype.allowDelete = function() {
    // this uses the same permission as adding
    let allowDeleteEnabled = Fse.Portal.checkPermission( "OperatorManagementAdd");
    return allowDeleteEnabled;
}

OperatorPortfolio.prototype.createNavigation = function() {

    let instance = this;

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

    let toolbarItems = []

    /*
    toolbarItems.push( {
            location : "before",
            template : function() {
                return instance.createProfileHeading();
            }
    })
    */


    if( instance.allowAdd() ) {
        toolbarItems.push( {
            location : "after",
            widget : "dxButton",
            options : { 
                icon : "plus",
                hint : `Add new ${getText( 'OPERATOR' ).toLowerCase()}`,
                onClick : function( e ) {
                    let newOperatorProfileDialog = new NewOperatorProfileDialog( {

                        onReturn : function( operatorData ) {

                            if( operatorData ) {
                                instance.viewProfile( operatorData );
                            }

                        }

                    });
                    newOperatorProfileDialog.show();
                }
            }
        });
    }

    if( instance.allowDelete() ) {
        toolbarItems.push( {
            location : "after",
            widget : "dxButton",
            options : { 
                icon : "trash",
                hint : `Delete this ${getText( 'OPERATOR' ).toLowerCase()}?`,
                onClick : function( e ) {

                    if( ! instance.currentOperator ) return;

                    OperatorPortfolio.showDeleteOperatorDialog( instance.currentOperator.operatorId, instance.currentOperator.operatorTk, function() {
                        instance.operatorList.selectPrevious();
                    } );

                }
            }
        });
    }


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

                if( ! instance.currentOperator ) return;

                selections = [ instance.currentOperator.operatorId ];

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

                } )

            }
        }
    })

   // from the original heading
   toolbarItems.push( {
        location : "after",
        widget : "dxButton",
        options : {
            icon : "pdffile",
            hint : `${getText( 'OPERATOR' )} Profile Summary PDF`,
            onClick : function( e ) {
                if( ! instance.currentOperator ) return;
                OperatorPortfolio.openOperatorSummaryPDF( instance.currentOperator.operatorId );
            }
        }
    })

   // from the original heading
   toolbarItems.push( {
        location : "after",
        widget : "dxButton",
        options : {
            icon : "refresh",
            hint : `Refresh ${getText( 'OPERATOR' )} Profile`,
            onClick : function( e ) {
                if( ! instance.currentOperator ) return;
                instance.createOperatorProfile();
                // call refresh on the current profile
            }
        }
    })

   // from the original heading
   toolbarItems.push( {
        location : "after",
        template : function() {

            if( ! instance.currentOperator ) return $("<div>");

            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.currentOperator.operatorId,
                partnerType : "OPR"
            }).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.currentOperator.operatorId, 
                            partnerType : "OPR" 
                        }

                        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 ) {
                            // console.log( "finished" );
                            // console.log( 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( "OperatorProfile" );
		  		}
            }
        },
        { location : "after", widget : "dxButton", options : { 
                icon : "spinprev", 
                onClick : function( e ) {
                    instance.operatorList.selectPrevious();
                }
            }
        },
        { location : "after", widget : "dxButton", options : { 
                text : `${getText( 'OPERATOR' )} List`, 
                onClick : function( e ) {
                    instance.multiView.option( "selectedIndex", 0 );
                }       
            }
        },
        { location : "after", widget : "dxButton", options : { 
            icon : "spinnext",
            onClick : function( e ) {
                    instance.operatorList.selectNext();
                }
            }
        }
    )



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

    return instance.navigation;

}

OperatorPortfolio.prototype.showFilters = function() {

    let instance = this;

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

}


OperatorPortfolio.prototype.viewOperatorProfile = function() {

    let instance = this;

    console.log( "viewOperatorProfile" );

    if( ! instance.operatorProfile || instance.currentOperator.operatorId != instance.operatorProfile.operatorId ) {
        instance.createOperatorProfile();
    } else {
        instance.repaintHeading();
    }
}

OperatorPortfolio.prototype.createOperatorProfile = function( targetTabId, fullData ) {

    let instance = this;

    let tabId = null;

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

    tabId = tabId ? tabId : "detail";

    if( targetTabId ) {
        tabId = targetTabId;
    }

    if( instance.currentOperator ) {


        instance.operatorProfile = new OperatorProfile( instance.currentOperator, { initialTabId : tabId, portfolio : instance, initialDataReady : fullData ? fullData : false } );


        instance.operatorProfile.ready().done( function( data ) {
            instance.currentOperator = $.extend( true, {}, data );
            instance.repaintHeading();
        })

        instance.operatorProfileHome.append( instance.operatorProfile.element() );

    

    }


}

OperatorPortfolio.prototype.repaintHeading = function() {


    console.log( "repaintHeading" ); 

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

}

OperatorPortfolio.getInstance = function() {
    return OperatorPortfolio._operatorPortfolioInstance;
}


OperatorPortfolio.prototype.gotoProfile = function( data, tabId, fullData ) {

    let instance = this;

    if( data.operatorId ) {


        instance.currentOperator = data;

        instance.createOperatorProfile( tabId, fullData );

        if( !fullData && instance.currentOperator && instance.currentOperator.operatorId == data.operatorId ) {
            instance.multiView.option( "selectedIndex", 1 );
        } else {
            instance.currentOperator = data;
            instance.multiView.option( "selectedIndex", 1 );
        }


    }

}

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

    let instance = this;

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

    if( targetTabId ) {
        newProfileNeeded = true;
    }

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

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

}


OperatorPortfolio.pickOperator = function( callOptions ) {

    let dataGrid = null;

    let pickButton = null;

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

    let popup = $("<div>").dxPopup( {
        title : `Pick ${getText( 'OPERATOR' )}`,
        height : "auto",
        width : 725,
        contentTemplate : function() {

            let content = $("<div>")

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

            dataGrid = $("<div>").dxDataGrid( {
                dataSource : operatorDataSource,
                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();


}