CampaignEditor = function( campaignData, options ) {

    let instance = this;
    instance.updating = false;

    this.intervalId = 0; // what is this used for?

    this.campaignId = 0;
    this.campaignData = null;

    this.changeCount = 0;
    this.changes = null;

    this.rootElement = $("<div>").addClass( "CampaignEditor");
    this.tabPanel = null;
    this.cancelButton = null;
    this.saveButton = null;




    this.popupWidth = 650;
    this.popupHeight = "auto"; //550; // "auto"; // "80vh";
    this.tabHeight = 550; 
    this.tabScrollHeight = 550; "100%";

    this.campaignForms = null;

    // console.log( Fse.Portal.appConfiguration );

    if( ! options ) {
        options = {};
    }
    instance.options = $.extend( true, {}, { tabIndex : 0 }, options );

    instance.campaignId = 0;
    if( campaignData && campaignData.campaignId ) {
        instance.campaignId = campaignData.campaignId;
    }

    instance.campaignData = null;    

    instance.initializeChangeTracking();

    console.log( "instance.campaignId" );
    console.log( instance.campaignId );

    instance.creatingNewCampaign  = false;

    if( instance.campaignId ) {
        instance.refreshEditor();
    } else {

        instance.campaignData = {
            campaignId : 0,
            campaignType : "EMAIL",
            campaignName : null,
            targetPartnerType : "OPR",
            campaignEnabled : "N",
            leadType : "SALES"

        }

        if( Fse.Portal.appConfiguration.STP.staffMember ) {
            instance.campaignData.campaignManagerUserId = Fse.Portal.appConfiguration.STP.userId * 1
        }


        instance.creatingNewCampaign = true;
        instance.createUI( instance.campaignData, instance.options.tabIndex );
    }


}


CampaignEditor.prototype.constructor = CampaignEditor;


CampaignEditor.prototype.element = function() {
    return this.rootElement;
}

CampaignEditor.prototype.dispose = function() {

    if( this.intervalId ) {
        window.clearInterval( this.intervalId );
        this.intervalId = 0;
    }

    if( this.tabPanel ) {
        this.tabPanel.element().remove();
        this.tabPanel.dispose();
        this.tabPanel = null;
    }

    this.rootElement.remove();
    this.rootElement = null
}


CampaignEditor.prototype.getCurrentTabIndex = function() {

    if( this.tabPanel ) {
        return this.tabPanel.option( "selectedIndex" );
    } else {
        return this.options.tabIndex;
    }
}

CampaignEditor.prototype.refreshEditor = function() {

    let instance = this;

    let d = instance.loadCampaign( instance.campaignId );

    d.done( function( data ) {


        let currentTabIndex = instance.getCurrentTabIndex();

        if( data.length ) {
            data = data[0];
        }

        instance.campaignData = data;
        // instance.readOnly = instance.campaignData.statusCd != 'PEN';
        console.log("refresh");
        instance.createUI( data, currentTabIndex );

        // instance.resetChangeTracking();

    })

    return d;

}

CampaignEditor.prototype.initializeChangeTracking = function() {

    let instance = this;

    if( instance.changes ) {
        instance.changes.off( "inserted" );
        instance.changes = null;
    }
    

    instance.changeCount = 0;
    instance.changes = new DevExpress.data.ArrayStore( { data : [], onInserted : function( item ) {
        console.log(item);
        instance.changeCount++;
        instance.saveButton.option( { disabled : false } );
        instance.cancelButton.option( { visible : true, disabled : false } );
        
        }});

    if( instance.saveButton ) {
        instance.saveButton.option( { disabled : true } );
    }
    if( instance.cancelButton ) { 
        instance.cancelButton.option( { visible : false, disabled : true } );
    }
}

CampaignEditor.prototype.createUI = function( data, currentTabIndex, preserveChangeTracking ) {

    console.log( "createUI" );
    console.log( data );

    let instance = this;

    if( ! instance.rootElement ) {
        // already disposed
        return;
    }


    if( instance.intervalId ) {
        window.clearInterval( instance.intervalId );
        instance.intervalId = 0;
    }

    instance.cancelButton = $("<div>").css( { "margin" : "-5px 0 5px 0" } ).dxButton( { text : "Cancel", visible : false, type : "normal", disabled : true, onClick : function( e ) {
        if( confirm( "Discard unsaved changes?" ) ) {
            instance.refreshEditor();
        }
    } }).dxButton( "instance" );

    instance.saveButton = $("<div>").css( { "margin" : "-5px 0 5px 0" } ).dxButton( { text : "Save", type : "default", disabled : true, onClick : function( e ) {

        instance.applyValidation( "saveCampaign" ).complete.then( function( vr ) {
            if( vr.isValid ) {
                instance.saveChanges();
            } else {
                DevExpress.ui.notify("Changes not saved because some fields are invalid or incomplete.  Please make corrections and save again.", "error", 2000);
            }
        })

    }}).dxButton( "instance" );
    
    let tabIndex = 0;

    // remove the old panels if they exist
    if( instance.tabPanel ) {

        tabIndex = instance.tabPanel.option( "selectedIndex" );
        instance.tabPanel.element().remove();
        instance.tabPanel.dispose();
        instance.tabPanel = null;
    }

    console.log( instance.rootElement );
    instance.rootElement.empty();

    if( data.length ) {
        data = data[0];
    }

    let newCampaign = data.campaignId ? false : true;

    let items = [
        { title : "Details", template : function() { return $("<div>").css( { "padding-top" : "5px" } ).append( instance.detailsTabTemplate( data ) ) }, alert : false },
        { title : "Territories", template : function() { return instance.territoriesTabTemplate( data ) }, alert : false, disabled : newCampaign }, 
        { title : "Products", template : function() { return $("<div>").css( { "padding-top" : "5px" } ).append( instance.productsTabTemplate( data )) }, alert : false, disabled : newCampaign },
        { title : "Forms", template : function() { return $("<div>").css( { "padding-top" : "5px" } ).append( instance.formsTabTemplate( data )) }, alert : false, disabled : newCampaign },
    ]    

    if( data.campaignType == "EMAIL" ) {
        items.push( { title : "Emails", template : function() { return $("<div>").css( { "padding-top" : "5px" } ).append(instance.emailTabTemplate( data )) }, disabled : newCampaign, alert : false });
        items.push( { title : "Contact Content", template : function() { return $("<div>").css( { "padding-top" : "5px" } ).append( instance.externalResourcesTabTemplate( data )) }, alert : false, disabled : newCampaign });
    }

    if( ! newCampaign ) {
        items.push( { title : "Files", template : function() { return $("<div>").css( { "padding-top" : "5px" } ).append( instance.filesTabTemplate( data )) }, alert : false } );
    }


    let renderCount = 0;


    let rendered = $.Deferred(); 

    instance.tabPanel = $("<div>").dxTabPanel( {
        items : items,
        deferRendering : false,
        selectedIndex : tabIndex,
        onItemRendered : function( e ) {
            renderCount++;
            if( renderCount == items.length ) {
                rendered.resolve();
            }
        },
        itemTitleTemplate : function( item ) {

            let titleElement = $("<div>").append( item.title )
            item.titleElement = titleElement;

            return item.titleElement;
        }

    }).dxTabPanel( "instance" ); 

    // wait until all tabs have been rendered before we set the data and put the tabs on the page
    rendered.done( function() {


        instance.updating = true;

        // set the data
        instance.setDetailsTabData( data );

        if( data.territoryId ) {
            instance.setTerritoriesTabData( { territoryId : data.territoryId } );
            // instance.territoryForm.updateData( { territoryId : data.territoryId });
        }
    
        if( data.products && data.products.length ) {
            instance.setProductsTabData( data.products );
        }

        if( data.forms && data.forms.length ) {
            instance.setFormsTabData( data.forms )
        }

        if( data.campaignType == "EMAIL" && data.emailCampaigns && data.emailCampaigns.length ) {
            instance.setEmailTabData( data.emailCampaigns );
        }

        if( data.externalResources && data.externalResources.length ) {
            instance.setExternalResourcesTabData( data.externalResources );
        }
    
        instance.updating = false;

        instance.rootElement.append( instance.tabPanel.element() );
        instance.rootElement.append( 
            $("<div>").css( { "padding-top" : "10px", "padding-right" : "10px" } ).dxToolbar( {
                items : [
                    { location : "after", template : function() { return instance.cancelButton.element() } },
                    { location : "after", template : function() { return instance.saveButton.element() } }
                ]
            })
        );
    
        if( ! preserveChangeTracking ) {
            instance.initializeChangeTracking();
        }

        if( instance.campaignId ) {
            // we are taking a brief pause before we apply validation because the devexpress datasource for some of the tabs do not have data yet
            window.setTimeout( function() {
                instance.applyValidation();
            }, 100 );
        }
    
    })


}


CampaignEditor.prototype.saveChanges = function() {

    let instance = this;


    instance.changes.load().done( function( data ) {
        console.log( data );

        let changesReady = $.Deferred();
        /*
        let saveEmail = false;

        data.forEach( function( c ) {

            if( c.split(".")[0] === "email" ) {
                saveEmail = true;
            }
        })
        */


        

        let campaignData = $.extend( true, {}, instance.getDetailsTabData() );

        $.extend( campaignData, instance.getTerritoriesTabData() );
        $.extend( campaignData, { products : instance.getProductsTabData() } );
        $.extend( campaignData, { forms : instance.getFormsTabData() } );

        if( instance.emailCampaignEditor ) {
            $.extend( campaignData, { emailCampaignId : instance.emailCampaignEditor.campaignId } );
        }

        console.log( "SAVING DATA" );
        console.log( campaignData );

        changesReady.resolve( campaignData );

        let saving = $.Deferred();

        let campaignDataSaved = false;
        /*
        let emailDataSaved = true;

        if( saveEmail ) {
            emailDataSaved = false;
        }
        */

        saving.progress( function( notify ) {

            if( notify === "campaignData" ) {
                campaignDataSaved = true;
            }

            /*
            if( notify === "emailData" ) {
                emailDataSaved = true;
            }
            */

            if( campaignDataSaved ) {
                saving.resolve();
            }

        })


        changesReady.done( function( campaignDataToSave ) {

            // do the save
            let saveURL = Fse.Util.updateURL2( $("link#appActionURL").attr( "href" ), { object : "GTM.saveCampaign" } );
            $.ajax( { 
                url : saveURL,
                method : "post",
                data : { campaign : JSON.stringify( campaignDataToSave ) }
            })
            .done( function( returnData ) {

                console.log( "returnData" );
                console.log( returnData );
                if( instance.options.onSuccess ) {
                    instance.options.onSuccess( returnData ); 
                }

                if( instance.creatingNewCampaign ) {
                    instance.campaignId = returnData.campaignId;
                }

                saving.notify( "campaignData" );
            })
            .fail( function() {
                console.log( "failed");
            })

            /*
            if( saveEmail ) {
                instance.emailCampaignEditor.saveChanges().done( function() {
                    saving.notify( "emailData" );
                })
            }
            */

        } );

        saving.done( function()  {
            console.log( "saving.done" );
            instance.refreshEditor();

            if( instance.creatingNewCampaign ) {
                // notify the campaign manager
                instance.options.campaignManager.onCampaignCreated( campaignData );
                instance.creatingNewCampaign = false;
            }
        } );


    } );

    return;

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

    
        let changedTabs = {};


        data.forEach( function( c ) {
            changedTabs[c.split(".")[0]] = true; 
        })

        let campaignData = {
            campaignId : instance.campaignData.campaignId,
            campaignType : instance.campaignData.campaignType,
            lastUpdatedDate : instance.campaignData.lastUpdatedDate
        };

        let performSave = true;
        let partsToSave = [];
        let showSavingMessage = false;

        let changesReady = $.Deferred();
        changesReady.progress(  function( notify ) {
            changedTabs[notify.tab] = true;

            if( ! notify.data ) {
                performSave = false;
            } else {
                $.extend( campaignData, notify.data );
            }

            let allTabsReady = true;
            for( let t in changedTabs ) {
                if( ! changedTabs[t] ) {
                    allTabsReady = false;
                    break;
                }
            }
            if( allTabsReady ) {
                changesReady.resolve( changedTabs );
            }
        });

        for( let t in changedTabs ) {

            let data = null;

            partsToSave.push( t );

            switch ( t ) {

                case "details" :
                    instance.getDetailsTabData().done( function( data ) {
                        changesReady.notify( { tab : t, data : data } );
                    });
                    break;

                case "crmRecipients" :
                    showSavingMessage = true;
                    data = instance.getCRMRecipientsTabData();
                    changesReady.notify( { tab : t, data : data } );
                    break;

                case "stdRecipients" :
                    data = instance.getStandardRecipientsTabData();
                    changesReady.notify( { tab : t, data : data } );
                    break;

                case "hyperlinks" :
                    data = instance.getHyperlinksTabData();
                    changesReady.notify( { tab : t, data : data } );
                    break;

                case "defaults" :
                    data = instance.getDefaultsTabData();
                    changesReady.notify( { tab : t, data : data } );
                    break;

            }

        }

        changesReady.done( function() {

            if( performSave ) {

                // show the wait box
                let savePanel = null;
                if( showSavingMessage ) {
                    savePanel = $("<div>").dxLoadPanel( {
                        message : "Saving...",
                        shading : true,
                        container : "body",
                        onHidden : function( e ) {
                            e.component.element().remove();
                            e.component.dispose();
                        }
                    }).appendTo( $("body") ).dxLoadPanel("instance");

                    savePanel.show();
                }

                let d = $.Deferred()
                    .done( function( response ) {

                        // close the wait box
                        if( savePanel ) {
                            savePanel.hide();
                        }

                        if( ! response.success ) {
                            instance.showSystemMessage( "warning", "Changes not saved.  Probably due to a concurrent modification by another user or process.  The Email campaign has been reloaded with fresh data." );
                        }

                        instance.refreshEditor().done( function( refreshData ) {

                            let campaignData = refreshData;
                            if( campaignData.length ) {
                                campaignData = campaignData[0];
                            }

                            if( instance.options.campaignManager ) {

                                if( instance.creatingNewCampaign ) {
                                    instance.creatingNewCampaign = false;
                                    instance.options.campaignManager.onCampaignCreated( campaignData );
                                } else {
                                    instance.options.campaignManager.onCampaignUpdated( campaignData );
                                }
                            }
                    
                        });


                    })
                    .fail( function() {
                        if( savePanel ) {
                            savePanel.hide();
                        }
                        instance.refreshEditor();
                        instance.showSystemMessage( "error", "An Error Occurred, Changes may not have saved.  Please review and try again." );
                    })


                // do the save
                let saveURL = Fse.Util.updateURL2( $("link#appActionURL").attr( "href" ), { object : "GTM.saveEmailCampaign" } );
                $.ajax( { 
                    url : saveURL,
                    method : "post",
                    data : { campaign : JSON.stringify( campaignData ), partsToSave : partsToSave.join( "," ) }
                })
                .done( function( returnData ) {
                    instance.campaignId = returnData.campaignId;
                    d.resolve( returnData );
                })
                .fail( function() {
                    d.reject();
                })

            } else {
                console.log( "Not Saving" );
            }

        })

    })


}

CampaignEditor.prototype.applyValidation = function( origin ) {

    let instance = this;

    let validationResult = DevExpress.validationEngine.validateGroup( "CampaignEditor" );
    console.log( validationResult );


    processResult = function( vr ){

        let tabPanel = instance.tabPanel;
        // let tabItems = $.extend( true, {}, { items : tabPanel.option( "items" )} ).items;
        let tabItems = tabPanel.option( "items" );
        console.log("tabItems");
        console.log(tabItems);

        tabItems.forEach( function( ti ) {
            ti.titleElement.css( { "color" : "inherit" } );
            ti.alert = false;
        });

        vr.brokenRules.forEach( function( br ) {

            let tabItem = null;
            if( br.tabIndex ) {
                tabItem = tabItems[br.tabIndex];
            } else {
                tabItem = tabItems[0];
            }

            tabItem.alert = true;
            tabItem.titleElement.css( { "color" : "red" } );

        })

        if( origin == "saveCampaign" ) {
            for( let x = 0; x < tabItems.length; x++ ) {
                if( tabItems[x].alert ) {
                    tabPanel.option( "selectedIndex", x );
                    break;
                }
            }
        }

    }

    if( validationResult.status == "pending") {
        validationResult.complete.then( function( vr ) {
            processResult( vr );
    
        })
    } else {
        processResult( validationResult );
        let d = $.Deferred();
        d.resolve( validationResult );
        validationResult.complete = d;
    }

    return validationResult;

}

CampaignEditor.prototype.setProductsTabData = function( data ) {
    this.productList.option( "dataSource", { store : { type : "array", data : data, key : [ "catalogType", "catalogId" ] } } );
}

CampaignEditor.prototype.getProductsTabData = function() {

    let returnItems = [];

    let ds = this.productList.getDataSource();
    if( ds ) {
        ds.load();
        returnItems = ds.items();
    }

    console.log( returnItems );
    return returnItems;
}


CampaignEditor.prototype.getDetailsTabData = function() {
    return this.campaignForm.option( "formData" );
}

CampaignEditor.prototype.setDetailsTabData = function( data ) {
    console.log( data );
    this.campaignForm.option( "formData", data );
}

CampaignEditor.prototype.getTerritoriesTabData = function() {
    return this.territoryForm.option( "formData" );
}

CampaignEditor.prototype.setTerritoriesTabData = function( data ) {
    this.territoryForm.option( "formData", data );
}

CampaignEditor.prototype.getFormsTabData = function() {

    return this.campaignForms.getData();
    /*
    let ds = this.campaignFormsGrid.getDataSource();
    if( ds ) {
        ds.load();
        return ds.items();
    } else {
        return [];
    }
    */
}

CampaignEditor.prototype.setFormsTabData = function( data ) {

    this.campaignForms.setData( data );
    /*
    let dataSource = new DevExpress.data.DataSource( {
        store : { type : "array", data : data, key : "formId" }
    })

    this.campaignFormsGrid.option( "dataSource", dataSource );
    */
}

CampaignEditor.prototype.setExternalResourcesTabData = function( data ) {

    let dataSource = new DevExpress.data.DataSource( {
        store : { type : "array", data : data, key : "resourceId" }
    })

    this.externalResourceList.option( "dataSource", dataSource );
}


CampaignEditor.prototype.setEmailTabData = function( data ) {

    let dataSource = new DevExpress.data.DataSource( {
        store : { type : "array", data : data, key : "campaignId" }
    })

    this.emailCampaignsDataGrid.option( "dataSource", dataSource );
}

CampaignEditor.prototype.getEmailTabData = function() {
    let ds = this.emailCampaignsDataGrid.getDataSource();
    if( ds ) {
        ds.load();
        return ds.items();
    } else {
        return [];
    }
}

CampaignEditor.prototype.detailsTabTemplate = function( data ) {

    let instance = this;
    let targetListValue = 0;

    let formItems = [];
    console.log("details");
    console.log(instance.campaignData);

    if( typeof instance.campaignData.targetList !== 'undefined' )
    {
        targetListValue = instance.campaignData.targetList;
    }

    formItems.push( 
        {
            dataField : "campaignType", label : { text : "Type" }, editorType : "dxSelectBox", isRequired : true, editorOptions : {
                readOnly : instance.creatingNewCampaign ? false : true, 
                dataSource : Fse.Data.newDataSource( { object : "GTM.allCampaignTypes", keyField : "campaignType", paginate : false } ),
                searchEnabled : true, searchMode : "startswith",
                displayExpr : "campaignTypeDisplay",
                valueExpr : "campaignType"
            }
        } );


    /*
    if( data.emailCampaignId && window.gotoEmailCampaign ) {
        formItems.push( {
            dataField : "emailCampaignId", label : { text : "Email" },
            template : function( options, container ) {
                let a = $("<a>").text( data.emailCampaignName ).css( "cursor", "pointer" ).on( "click", function() {
                    window.gotoEmailCampaign( options.editorOptions.value );
                } )
                a.appendTo( container )
            }
        })
    }
    */

    formItems.push( {
            dataField : "campaignGroupId", label : { text : "Group" }, editorType : "dxSelectBox", isRequired : true, editorOptions : {
                searchEnabled : true, searchMode : "startswith",
                dataSource : Fse.Data.newDataSource( { object : "GTM.allCampaignGroups", keyField : "campaignGroupId", paginate : false } ),
                displayExpr : "campaignGroup",
                valueExpr : "campaignGroupId"
            }
        },{
            dataField : "campaignName", label : { text : "Name" }, editorType : "dxTextBox", isRequired : true, editorOptions : {
            maxLength : 50
            }
        },{
        dataField : "campaignDescription", label : { text : "Description" }, editorType : "dxTextArea", editorOptions : {
            maxLength : 500
            }
        },{
            dataField : "businessOwnerRefNum", label : { text : "Ref #" }, editorType : "dxTextBox", editorOptions : {
                maxLength : 50
                }
        },{
                dataField : "startDate", label : { text : "Start" }, editorType : "dxDateBox", editorOptions: { onFocusIn : function( e ) {
                    let v = e.component.option( "value" ) 
                    if( ! v || v == null ) {
                        e.component.open();
                    }
                } }, isRequired : true
        },{
            dataField : "endDate", label : { text : "End" }, editorType : "dxDateBox", editorOptions: { onFocusIn : function( e ) {
                let v = e.component.option( "value" ) 
                if( ! v || v == null ) {
                    e.component.open();
                }
            } }, isRequired : true
        },{
            dataField : "campaignManagerUserId", label : { text : "Campaign Manager" }, isRequired : true, editorType : "dxSelectBox", editorOptions : {
                dataSource : Fse.Data.newDataSource( { object : "CRM.salesRepList", keyField : "fspro_userId", paginate : true, objectParams : { staffOnly : true } } ),
                valueExpr : "fspro_userId",
                displayExpr : "fullName",
                searchEnabled : true,
                searchExpr : "fullName",
                searchMode : "contains"
            }
        });

        if( Fse.Portal.appConfiguration.STP.ownerType === "BRO" ) {
            formItems.push( {
                    dataField : "businessOwnerType", label : { text : "Owner Type" }, isRequired : true, editorType : "dxSelectBox", editorOptions : {
                        searchEnabled : true, searchMode : "startswith",
                        dataSource : { store : { type : "array", key : "partnerType", data : [
                            { businessOwnerType : "INT", businessOwnerTypeDisplay : "Internal" },
                            { businessOwnerType : "MFR", businessOwnerTypeDisplay : "Manufacturer" }
                        ]}},
                        valueExpr : "businessOwnerType",
                        displayExpr : "businessOwnerTypeDisplay"
                    }
                },{
                    dataField : "businessOwnerId", label : { text : "Manufacturer" }, isRequired : false, visible : false, editorType : "dxSelectBox", editorOptions : {
                        searchEnabled : true, searchMode : "startswith",
                        dataSource : Fse.Data.newDataSource( { object : "BPL.principals", keyField : "mfr_id", paginate : true } ),
                        searchEnabled : true,
                        searchExpr : "mfr_name",
                        valueExpr : "mfr_id",
                        displayExpr : "mfr_name"
                    }
                } );
        } 
        
        
        
        
        formItems.push( {
            dataField : "leadType", label : { text : "Lead Routing" }, isRequired : true, editorType : "dxSelectBox", editorOptions : {
                searchEnabled : true, searchMode : "startswith",
                dataSource : { store : { type : "array", key : "leadType", data : [
                    { leadType : "SALES"},
                    //{ leadType : "TASK"},
                ]}},
                displayExpr : "leadType",
                valueExpr : "leadType",
               // value : "SALES" //,
               /*showClearButton : true,
               onInitialized : function (e){
            
                var s = e.component;  
                s.getDataSource().load().done(function (items) {  
                      console.log(items[0].leadType);
                      e.component.option("value", "SALES");  
                      alert("done");
                      console.log(s.option("value"));
                      //applyValidation( "onInitialized" );
                  }); 
            }*/
            }
        },{
            dataField : "salesManagerUserId", label : { text : "Sales Mgr." }, isRequired : true, editorType : "dxSelectBox", editorOptions : {
                dataSource : Fse.Data.newDataSource( { object : "CRM.salesRepList", keyField : "fspro_userId", paginate : true, objectParams : { staffOnly : true } } ),
                valueExpr : "fspro_userId",
                displayExpr : "fullName",
                searchEnabled : true,
                searchExpr : "fullName",
                searchMode : "contains"
            }
        } );


    formItems.push( {
            dataField : "targetPartnerType", label : { text : "Target" }, isRequired : true, editorType : "dxSelectBox", editorOptions : {
                // searchEnabled : true, searchMode : "startswith",
                dataSource : { store : { type : "array", key : "partnerType", data : [
                    { partnerType : "OPR", partnerTypeDisplay : "Operators" },
                    { partnerType : "CDR", partnerTypeDisplay : "Distributors" },
                ]}},
                displayExpr : "partnerTypeDisplay",
                valueExpr : "partnerType"
            }
        },

        {
            dataField : "targetPartnerList", label : { text : "Target List" }, isRequired : true, editorType : "dxSelectBox", editorOptions : {
                // searchEnabled : true, searchMode : "startswith",
                dataSource : Fse.Data.newDataSource( { object : "LST.lists", keyField : "listId", objectParams : { includeStats : true, detailLists : true, listUses : "EMAIL" } }),
                displayExpr : function( rowData ) {
                    if( ! rowData ) return;
                    let listSizeText = DevExpress.localization.formatNumber( rowData.listSize, { type : "fixedPoint", precision : 0 } );
                    return `${rowData.listName} - (${listSizeText} contacts)`;
                },
               // value : targetListValue,
                searchEnabled : true,
                searchExpr : "listName",
                valueExpr : "listId",
                placeholder : "select target list"
            }
        }


        /*instance.listSelectBox = $("<div>").dxSelectBox( {
            dataSource : Fse.Data.newDataSource( { object : "LST.lists", keyField : "listId", objectParams : { includeStats : true, detailLists : true, partnerTypes : partnerTypes, listUses : "EMAIL" } }),
            displayExpr : function( rowData ) {
                if( ! rowData ) return;
                let listSizeText = DevExpress.localization.formatNumber( rowData.listSize, { type : "fixedPoint", precision : 0 } );
                return `${rowData.listName} - (${listSizeText} contacts)`;
            },
            searchEnabled : true,
            searchExpr : "listName",
            valueExpr : "listId",
            placeholder : "select recipient list",
            value : data.targetListId,            
            disabled : instance.readOnly,
            required : true,
            onSelectionChanged : function( e ) {  
                let value = e.selectedItem ? e.selectedItem.listId : null;
                if( value != data.targetListId ) {
                    instance.changes.insert( "crmRecipients.targetListId" ); 
                }
            } 
    
        }).dxSelectBox( "instance" ); */
        /* moved to a separate tab
        ,{ 
            dataField : "formId", label : { location : "left", text : "Form(s)" }, isRequired : false, editorType : "dxDropDownBox", 
            editorOptions : Fse.UI.multiSelectDropDownBoxEditorOptions( {
                    dataSource : Fse.Data.newDataSource( { object : "WRK.forms", keyField : "formId" } ),
                    searchExpr : "formName",
                    searchMode : "contains",
                    displayExpr : "formName",
                    multipleSelectedDisplay : "Multiple Forms Selected",
                    keyExpr : "formId",
                    title : "Select Form(s)"
            })
		}*/
        ,{
            dataField : "campaignEnabled", label : { text : "Enabled" }, isRequired : true, editorType : "dxRadioGroup", editorOptions : {
                layout : "horizontal",
                valueExpr : "value",
                items : [
                    { text : "Yes", value : "Y" },
                    { text : "No", value : "N" }
                ]
            }
        }

    );


    let campaignDefaults = {
        campaignEnabled : "N"
    };

    instance.campaignForm = $("<div>").dxForm( {
        items : formItems,
        formData : campaignDefaults,
        validationGroup : "CampaignEditor",
        onFieldDataChanged : function( e ) {

            //console.log("here2");
            // let territoryDataSource = null;
            let updateTerritory = false;
            if( e.dataField === "businessOwnerType" ) {
                if( e.value === "MFR" ) {
                    e.component.itemOption( "businessOwnerId", { visible : true, isRequired : true } );
                } else {
                    e.component.itemOption( "businessOwnerId", { visible : false, isRequired : false } );
                }

                updateTerritory = true;

                if( ! instance.updating ) {
                    instance.setProductsTabData( [] );
                }
            } else if ( e.dataField === "businessOwnerId" ) {

                if( ! instance.updating ) {
                 instance.setProductsTabData( [] );
                }

                 if( Fse.Portal.appConfiguration.STP.ownerType === "BRO" ) {
                    instance.productList.columnOption( "mfr_name", { visible : e.value ? false : true });

                    let salesMgrDataSource = Fse.Data.newDataSource( { object : "BPL.principals", keyField : "mfr_id", paginate : false });
                    salesMgrDataSource.filter( [ "mfr_id", "=", e.value ] );

                    salesMgrDataSource.load().done( function( data )  {
                        instance.campaignForm.getEditor('salesManagerUserId').option('value', data[0].customerManagerUserId);
                    });
                    updateTerritory = true;
                 }

            } else if ( e.dataField === "productSpecific" ) {
            }
            else if(e.dataField === "targetPartnerType")
            {

                //console.log(e.value);
                let targetListDataSource = Fse.Data.newDataSource( { object : "LST.lists", keyField : "listId", objectParams : { includeStats : true, detailLists : true, listUses : "EMAIL" }});
                targetListDataSource.filter( [ "partnerType", "=", e.value ] );

                targetListDataSource.load().done( function( data )  {
                    instance.campaignForm.getEditor('targetPartnerList').option('dataSource', data);
                  });


              
               //var dataSource = instance.campaignForm.getEditor('targetPartnerList').option('value', preferredLanguage); ("getDataSource");
              // console.log(dataSource);
            }
            else if(e.dataField === "campaignType")
            {
                if(e.value == 'WEBSITE'){
                     instance.campaignForm.getEditor('campaignEnabled').option('value', 'Y');
                     //hide the targetList
                    // e.component.itemOption( "targetPartnerList", { visible : false} );
                     //instance.campaignForm.getEditor('targetPartnerList').option('visible', false);
                     instance.campaignForm.itemOption('targetPartnerList', 'visible', false);

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

                        instance.campaignForm.getEditor('businessOwnerType').option('value', 'INT');

                        let calDateRange =  Fse.CRM.dateRanges.rangeByKey( "N,TY" );
                        instance.campaignForm.getEditor('startDate').option('value', calDateRange.startDate);
                        instance.campaignForm.getEditor('endDate').option('value', calDateRange.endDate);
                     }

                     if( Fse.Portal.appConfiguration.STP.ownerType === "MFR") {
                        let interactionDateRange =  Fse.CRM.dateRanges.rangeByKey( "F,TY" );
                        
                        instance.campaignForm.getEditor('startDate').option('value', interactionDateRange.startDate);
                        instance.campaignForm.getEditor('endDate').option('value', interactionDateRange.endDate);
                    }
                }
                else{
                    instance.campaignForm.getEditor('campaignEnabled').option('value', 'N');
                    instance.campaignForm.getEditor('startDate').option('value', '');
                    instance.campaignForm.getEditor('endDate').option('value', '');
                    //show the targetList
                    //e.component.itemOption( "targetPartnerList", { visible : true} );
                    //instance.campaignForm.getEditor('targetPartnerList').option('visible', false);
                    instance.campaignForm.itemOption('targetPartnerList', 'visible', true);

                }
            }

            if( updateTerritory ) {
                // updateTerritoryTab();
            }

            // enableProducts();
            console.log("here3");
            if( ! instance.updating ) {
                console.log("here4");
               instance.applyValidation( "onFieldDataChanged" );
              // alert("done");
            }

            if( ! instance.updating ) {
                console.log("here5");
                instance.changes.insert( "details" );
            }
                

        }
    }).dxForm( "instance" );



    return instance.campaignForm.element().css( "padding", "10px");
}

CampaignEditor.prototype.territoriesTabTemplate = function( data ) {

    let instance = this;

    let territoryList = $("<div>").dxList( {

        displayExpr : function( data ) {
          if( data ) {
            return `${data.internalSalesID} - ${data.territoryName}`;
          }  
        },
        height : instance.tabHeight - 50,
        scrollingEnabled : true,
        scrollByThumb : true

    } ).dxList( "instance" );


    let territoryDataSource = Fse.Data.newDataSource( { object : "TER.salesTerritories", keyField : "TerritoryID", paginate : true  });

    
            
    
    instance.territoryForm = $("<div>").dxForm( {
        validationGroup : instance.creatingNewCampaign ? "CampaignEditorNew" : "CampaignEditor",
        items : [
            { dataField: "territoryId", label : { text : "Top Level Territory" }, isRequired : true, editorType : "dxSelectBox", editorOptions : {
                dataSource : territoryDataSource,
                valueExpr : "TerritoryID",
                displayExpr : "territoryPath",
                searchEnabled : true,
                searchExpr : "territoryPath",
                searchMode : "contains",
                placeholder : "Select Top Level Territory",
                },
                validationRules : [{ 
                    tabIndex : 1,
                    type: "async", 
                    reevaluate : true,
                    message : "Territory selection must cover local markets for the Business Owner",
                    validationCallback: function(params) {
                        const d = $.Deferred();


                        let objectParams = {
                            topLevelTerritoryId : params.value
                        }

                        let fd = instance.campaignForm.option( "formData" );
                        if( fd.businessOwnerId ) {
                            objectParams.mfr_id = fd.businessOwnerId;
                            console.log("here coming..");
                        }
        

                        let dataSource = Fse.Data.newDataSource( { object : "GTM.targetMarkets", keyField : "territoryId", paginate : false,  objectParams : objectParams });


                        dataSource.load().done( function( data )  {
                            territoryList.option( { "items" : data } );

                            if( data.length ) {
                                d.resolve();
                            } else {
                                d.reject( "Territory Selection Must Cover Local Markets for Business Owner Selection" );
                            }

                        } );
                                        
                        return d.promise();
                    }
                }]
            }
        ],

        onFieldDataChanged : function( e ) {
            instance.changes.insert( "territories" );
        }
        
    }).dxForm( "instance" );

    

    let territoriesElement = $("<div>" )
    .css( { "padding" : "10px" } )
    .append( instance.territoryForm.element() )
    .append( $("<div>").append( "Included Local Markets" ).css( { "padding-top" : "8px" }) )
    .append( territoryList.element().css( { "padding-top" : "4px"} ) );


    return territoriesElement;

}

CampaignEditor.prototype.externalResourcesTabTemplate = function( data ) {

    let instance = this;

    instance.externalResourceList = $("<div>").dxDataGrid( {
        columns : [
            { dataField : "targetPartnerDescription", caption : "Company" },
            { dataField : "targetContactDescription", caption : "Contact" },
            {
                caption : "Links",

                cellTemplate : function( container, options ) {
                    if( options.rowType != "data" ) {
                        return;
                    }

                    //using an ordered list so that the numbers are aligned with the field positions

                    let content = $("<ol>")
                        // we should always have 1 linke
                        .append( $("<li>").text( options.data.externalResourceLink_1 ).attr( { "title" : options.data.externalResourceLink_1 }) );

                    if( options.data.externalResourceLink_2 ) {
                        // sometimes we have 2
                        content.append( $("<li>").text( options.data.externalResourceLink_2 ).attr( { "title" : options.data.externalResourceLink_2 }));

                        // if we have two check for a third
                        if( options.data.externalResourceLink_3 ) {
                            content.append( $("<li>").text( options.data.externalResourceLink_3 ).attr( { "title" : options.data.externalResourceLink_3 }));
                        }
                    }

                    container.append( content );
                }
            }
        ]
    }).dxDataGrid( "instance" );

    return instance.externalResourceList.element();

}

CampaignEditor.prototype.productsTabTemplate = function( data ) {

    let instance = this;
    
    let productListColumns = [];

    productListColumns.push( { dataField : "mfr_name", caption : "Manufacturer", visible : Fse.Portal.appConfiguration.STP.ownerType === "BRO" } );

    productListColumns.push( 
        { 
           name : "category", 
           caption : "Category",
           allowSorting : true,
           calculateCellValue : function( item ) {
            
                if( ! item ) return;

                let parts = item.productHierarchyPath.split( "/" );
                parts.shift(); parts.shift();

                if( parts.length ) {
                    return parts[0];
                }

               },
            calculateSortValue : function( item ) {
            
                if( ! item ) return;

                let parts = item.productHierarchyPath.split( "/" );
                parts.shift(); parts.shift();

                if( parts.length ) {
                    return parts[0];
                }

               }

            
        }, {
            name : "sku",
            caption : "Item",
            dataField : "productHierarchyPath", 
            calculateDisplayValue : function( item ) {
                    if( ! item ) return;

                    let parts = item.productHierarchyPath.split( "/" );
                    parts.shift(); parts.shift(); parts.shift();

                    if( parts.length ) {
                        return parts.join( "/" );
                    }
                }
        });

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

        columns : productListColumns,
        dataSource : { store : { type : "array", data : [], key : [ "catalogType", "catalogId" ] } },
        noDataText : "At least one product (L2/L1) is required",
        showBorders : true,
        xkeyExpr : [ "catalogType", "catalogId" ],
        onRowRemoved : function( e ) {
            instance.changes.insert( "products" ); 
        },
        editing : {
            allowDeleting : true,
            useIcons : true,
            confirmDelete : false
        },
        onOptionChanged : function( e ) {
            console.log( e );
        }


    }).dxDataGrid( "instance" );


    let addProductsButton = $("<div>").dxButton( {
        text : "Add Products", icon : "add", onClick : function( te ) {


            let productPickerOptions = {
                pick : "SKU,PRD",
                selectMode : "multiple",
                buttons : "add,continue",
                onProductsPicked : function( productsPickedEvent ) {

                    let selectedItems = productsPickedEvent.selectedItems;

                    let newItems = [];
                    instance.getProductsTabData().forEach( function( pli ) {
                        newItems.push( pli );
                    })

                    selectedItems.forEach( function( si ) {

                        let existingItem = null;
                        newItems.forEach( function( ni ) {
                            if( ni.catalogId === si.catalogId && ni.catalogType === si.catalogType ) {
                                existingItem = ni;
                            }
                        })
                        if( ! existingItem ) {
                            newItems.push( si );
                            instance.changes.insert( "products" ); 
                        }
                    })

                    // productList.option( "items", newItems );
                    instance.setProductsTabData( newItems );

                },
                currentSelections : instance.getProductsTabData()
            }
            if( Fse.Portal.appConfiguration.STP.ownerType === "BRO" ) {
                let fd = instance.campaignForm.option( "formData" );
                productPickerOptions.mfr_id = -1;
                if( fd.businessOwnerType === "MFR" && fd.businessOwnerId ) {
                    productPickerOptions.mfr_id = fd.businessOwnerId
                    console.log("-----");
                }
            }

            let productPicker = new ProductPicker(productPickerOptions);

            productPicker.show();
        }
    }).dxButton("instance");



    instance.productList.element().dxValidator( { 
        validationGroup : instance.creatingNewCampaign ? "CampaignEditorNew" : "CampaignEditor", 
        validationRules : [
            { tabIndex : 2, 
              type : "custom", validationCallback : function( e ) {

                let fd = instance.campaignForm.option( "formData" );
                if( fd.leadType !== "SALES" ) {
                    return true;
                }

                if( ! e.value.items || ! e.value.items.length ) {
                    return false;
                } else {
                    return true;
                }


            }, message : "At least one product (L2/L1) is required" }
        ],

        adapter: {
            getValue: function() {

                let value = {
                    items : instance.getProductsTabData()
                };

                return value;

            },
            applyValidationResults: function(e) {
                if( ! e.isValid ) {
                    // tabs.option( "selectedIndex", 2 );
                }
                
            }
        }
    } ).dxValidator( "instance" );

    let productListToolbarItems = [];

    /* remove allProducts
    if( allProductsCheckBox ){
        productListToolbarItems.push( { location : "before", template : function() { return allProductsCheckBox.element()  } });
    }
    */

    productListToolbarItems.push({ location : "after", template : function() { return addProductsButton.element () }} );


    let productListToolbar = $("<div>").css( { "padding-bottom" : "10px" } ).dxToolbar( {
        items : productListToolbarItems
    }).dxToolbar( "instance" );


    let productsElement = $("<div>")
        .append( productListToolbar.element() )
        .append( instance.productList.element() );


    return productsElement;

}

CampaignEditor.prototype.formsTabTemplate = function( data ) {

    let instance = this;
    instance.campaignForms = new CampaignForms( {
        campaignEditor : instance,
        campaign : data
    } ) 


    return instance.campaignForms.element();

}
/*
CampaignEditor.prototype.xformsTabTemplate = function( data ) {

    let instance = this;

    let campaignFormAddButton = null;

    let availableFormsDataSource = Fse.Data.newDataSource( { object : "WRK.forms", keyField : "formId" } );
    availableFormsDataSource.filter( [ "ready", "=", "Y" ] );

    let workflowFormSelectBox = $("<div>").dxSelectBox( {
        placeholder : "Select a form and click Add",
        width : 300,
        dataSource : availableFormsDataSource,
        displayExpr : "formName",
        valueExpr : "formId",
        searchEnabled : true,
        searchExpr : "formName",
        onValueChanged : function( e ) {
            if( e.value ) {
                campaignFormAddButton.option( "disabled", false )
            } else {
                campaignFormAddButton.option( "disabled", true )
            }
        }
    }).dxSelectBox( "instance" );

    campaignFormAddButton = $("<div>").dxButton( {
        text : "Add",
        onClick : function( e ) {


            let workflowFormToAdd = workflowFormSelectBox.option( "selectedItem" );
            if( workflowFormToAdd ) {

                let addIt = true;
                let newData = [];
                instance.getFormsTabData().forEach( function( wfi ) {
                    newData.push( wfi );
                    if( wfi.formId === workflowFormToAdd.formId ) {
                        addIt = false;
                    }
                })

                if( addIt ) {
                    newData.push( workflowFormToAdd );
                    instance.setFormsTabData( newData );
                    instance.changes.insert( "forms" ); 

                }

            }

            workflowFormSelectBox.option( "value", null );
        },
        disabled : true,
    }).dxButton( "instance" );


    let portalDocRootURL = $("link#PortalDocRootURL").attr( "href" ); 

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

        dataSource : [], 
        columns : [
            { dataField : "formName", caption : "Form" },
            { visible : data.campaignType == "EMAIL" ? false : true, caption : "Submission Link", placeholder : "na for newly added forms", calculateCellValue : function( rowData ) {

                let submissionLink = null;
                if( rowData.token ) {
                    submissionLink = Fse.Util.updateURL2( `${portalDocRootURL}/public/form.cfm`, { formId : rowData.formId, linkId : rowData.linkId, linkType : rowData.linkType, token : rowData.token } );
                }
                return submissionLink

            }, cellTemplate : function( container, options) {
                if( options.rowType === "data" ) {
                    if( options.value ) {
                        container.append( $("<a>").attr( { "href" : options.value, "target" : "_blank", "rel" : "noopener noreferrer" } ).append( "link" ) );
                        if( ! options.data.parseEntity ){
                            container.append( $("<span>").css( { "color" : "#f53611", "padding-left"  : "1em" } ).append( "No contact field mapping!" ) );
                        }
                        console.log( options.data );
                    } else {
                        container.append( $("<em>").append( "na for newly added form" ));
                    }
                }
            } },
        ],
        showBorders : true,
        editing : {
            allowDeleting : true,
            useIcons : true,
            confirmDelete : false
        },
        onRowRemoved : function( e ) {
            console.log( "Removed" );
            instance.changes.insert( "forms" ); 
        },
        onToolbarPreparing : function( e ) {
            if( ! e.toolbarOptions.items ) {
                e.toolbarOptions.items = [];
            }

            e.toolbarOptions.items.push(
                { location : "after",
                  template : function() {
                    return workflowFormSelectBox.element();
                  }
                },{
                    location : "after",
                    template : function() {
                        return campaignFormAddButton.element();
                    }
                }
            )
        }

    }).dxDataGrid( "instance" );


    return instance.campaignFormsGrid.element();
}
*/
CampaignEditor.prototype.filesTabTemplate = function( data ) {

    let assetGrid = new AssetGrid( { 
        contentDomain : "GTM", 
        containerType : "GTM", 
        containerId : data.campaignId,
        visibleColumns : [ "docTitle", "docDescription", "buttons" ]
     });

     return assetGrid.element();
}

CampaignEditor.prototype.emailTabTemplate = function( data ) {

    let instance = this;

    let editEmailCampaign = function( emailCampaignData ) {

        let title = 'New Email';

        if( emailCampaignData.campaignId ) {
            title = `Edit Email - ${emailCampaignData.campaignName}`;
        }

        let emailEditorData = {
            campaignId : emailCampaignData.campaignId, 
            gtmCampaignId : data.campaignId,
            gtmTargetPartnerType : data.targetPartnerType,
            campaignName : data.campaignName,
            campaignType : 'CRM',
            emailFrom : data.campaignManagerEmail,
            emailFromDisplay : data.campaignManagerDisplay,
            emailSubject : data.campaignName
        }

        console.log( "***********" );
        console.log( data );
        console.log( emailEditorData );


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

            title : title,
            contentTemplate : function() {
                let emailCampaignEditor = new EmailCampaignEditor( emailEditorData );
                return emailCampaignEditor.element();
            },
            onHidden : function( e ) {
                e.component.element().remove();
                e.component.dispose();

                // get the email campaign data and update the list
                let emailCampaignsDataStore = Fse.Data.newDataSource( { object : "GTM.emailCampaigns", keyField : "campaignId", paginate : false  } );
                emailCampaignsDataStore.filter( [ "gtmCampaignId", "=", data.campaignId ] );
                emailCampaignsDataStore.load().done( function( emailCampaigns) {
                    instance.setEmailTabData( emailCampaigns );
                    // d.notify( { emailCampaigns : emailCampaigns } )
                })
            


            }

        }).appendTo( $("body") ).dxPopup("show")

    }

    let columns = [];

    columns.push( 
        { dataField : "campaignName", visible : true, caption : "Email Campaign Name" },

        { dataField : "runDate", visible : true, dataType : "datetime" }, 
        { dataField : "statusCd", caption : "Status", visible : true,
            calculateCellValue : function( rowData ) {
                if( ! rowData ) {
                    return;
                }
                if( rowData.statusCd == "PEN" && rowData.runDate ) {
                    return "SCH"
                } else {
                    return rowData.statusCd;
                }
            },
           
         lookup : {
            dataSource : {
                store : { type : "array",
                data : [
                    { value : "PEN", text : "Pending" },
                    { value : "SUC", text : "Successful" },
                    { value : "SCH", text : "Scheduled" }
                ],
                key : "value" }
            },
            displayExpr : "text",
            valueExpr : "value"
         }
        }, 

        { dataField : "emailSubject", visible : true }, 
        { dataField : "emailFromDisplay", visible : true }, 
        { dataField : "emailFrom", visible : true }, 

        { dataField : "scheduled", visible : true },


        {
            type: "buttons",
            width : 25,
            buttons: ["edit", "delete", {
                text: "My Command",
                icon: "overflow",
                hint: "My Command",
                onClick: function (e) {

                    let campaignData = e.row.data;


                    let menuItems = [
                        { text : "Edit Email...", closeMenuOnClick : true, name : "edit"  },
                        { text : "Copy Email...", closeMenuOnClick : true, name : "copy"  }
                    ];

                    if( campaignData.statusCd == "PEN" ) {
                        menuItems.push( { text : "Delete Email", closeMenuOnClick : true, name : "delete"  } );
                    }


                    $("<div>").dxContextMenu( {
                        target : e.event.currentTarget,
                        items : menuItems, 
                        onHidden : function( cme ) {
                            cme.component.element().remove();
                            cme.component.dispose();
                        },
                        onItemClick : function( cme ) {

                            switch( cme.itemData.name ) {
                                case "edit":
                                   editEmailCampaign( campaignData );
                                    break;
                                case "delete" :
                                    if( confirm( `Delete '${campaignData.campaignName}'?` ) ) { 
                                        EmailCampaignManager.deleteCampaign( campaignData ).done( function() {
                                            // get the email campaign data and update the list
                                            let emailCampaignsDataStore = Fse.Data.newDataSource( { object : "GTM.emailCampaigns", keyField : "campaignId", paginate : false  } );
                                            emailCampaignsDataStore.filter( [ "gtmCampaignId", "=", data.campaignId ] );
                                            emailCampaignsDataStore.load().done( function( emailCampaigns) {
                                                instance.setEmailTabData( emailCampaigns );
                                            })
                                        })
                                    }
                                    break;
                                case "copy" :
                                    EmailCampaignManager.copyCampaign( campaignData ).done( function( returnData ) {
                                        // get the email campaign data and update the list
                                        let emailCampaignsDataStore = Fse.Data.newDataSource( { object : "GTM.emailCampaigns", keyField : "campaignId", paginate : false  } );
                                        emailCampaignsDataStore.filter( [ "gtmCampaignId", "=", data.campaignId ] );
                                        emailCampaignsDataStore.load().done( function( emailCampaigns) {
                                            instance.setEmailTabData( emailCampaigns );
                                            emailCampaignsDataStore.store().byKey( returnData.campaignId ).done( function( emailCampaignResult ) {
                                                let emailCampaignData = emailCampaignResult;
                                                if( Array.isArray( emailCampaignData )) {
                                                    emailCampaignData = emailCampaignData[0];
                                                }
                                                editEmailCampaign( emailCampaignData );
                                            })
                                            
                                        })
                                    })
                                    break;
                                                    
                            }                        
                        }
                    }).insertAfter( e.component.element() ).dxContextMenu( "show" );

                }
            }]
        }
    )

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

        dataSource : [],
        columns : columns,
        keyExpr : "campaignId",

        onToolbarPreparing : function( e ) {
            if( ! e.toolbarOptions.items ) {
                e.toolbarOptions.items = [];
            }

            e.toolbarOptions.items.push(
                { location : "after",
                  widget : "dxButton",
                  options : {
                    text : "New Email",
                    onClick : function( te ) {
                        editEmailCampaign( { campaignId : 0 } );
                    }
                  }
                }
            )

        },

        onRowDblClick : function( e ) {
            if( e.rowType != "data" ) {
                return;
            }

            editEmailCampaign( e.data );
        }


    }).dxDataGrid( "instance" );

    instance.emailCampaignsDataGrid.element().dxValidator( { 
        validationGroup : instance.creatingNewCampaign ? "CampaignEditorNew" : "CampaignEditor", 
        validationRules : [
            { tabIndex : 4, 
              type : "custom", validationCallback : function( e ) {

                let fd = instance.campaignForm.option( "formData" );

                /*if( fd.campaignType !== "EMAIL" ) {
                    return true;
                }*/

                if( ! e.value.items || ! e.value.items.length ) {
                    return false;
                } else {
                    return true;
                }


            }, message : "At least one Email is required" }
        ],

        adapter: {
            getValue: function() {

                let value = {
                    items : instance.getEmailTabData()
                };

                return value;

            },
            applyValidationResults: function(e) {
                if( ! e.isValid ) {
                    // tabs.option( "selectedIndex", 2 );
                }
                
            }
        }
    } ).dxValidator( "instance" );

    return instance.emailCampaignsDataGrid.element();

}

CampaignEditor.prototype.emailTabTemplate_obsolete = function( data ) {

    let instance = this;

    instance.emailCampaignEditor = new EmailCampaignEditor( { campaignId : data.emailCampaignId }, {
        onChanged : function( item ) {
            instance.changes.insert( `email.${item}` );
        }
    } );

    
    instance.emailCampaignEditor.element().dxValidator( { 
        validationGroup : instance.creatingNewCampaign ? "CampaignEditorNew" : "CampaignEditor", 
        validationRules : [
            { tabIndex : 4, type : "async", validationCallback : function( e ) {


                const d = $.Deferred();

                let validationResult = instance.emailCampaignEditor.detailsForm.validate();

                if( validationResult.status === "pending" ) {
                    validationResult.complete.then( function( r ) {
                        d.resolve( r );
                    })
                } else {
                    d.resolve( validationResult );
                }

                return d.promise();


            }, message : "Email is Incomplete" }
        ],

        adapter: {
            getValue: function() {

                return 1;
        
            },
            applyValidationResults: function(e) {
                if( ! e.isValid ) {
                    // tabs.option( "selectedIndex", 2 );
                }
                
            }
        }
    } ).dxValidator( "instance" );

    return $("<div>").css( { "padding-top" : "10px", "padding-bottom" : "10px" } ).append( this.emailCampaignEditor.element() );

}



CampaignEditor.prototype.loadCampaign = function( campaignId ) {

    let dataURL = $("link#appDataURL").attr( "href" );

    let campaignData = {};

    let d = new $.Deferred();

    d.progress( function( data ) {
        $.extend( campaignData, data );
        let ready = ( campaignData.campaignId && campaignData.formId && campaignData.products && campaignData.emailCampaigns && campaignData.externalResources );
        if( ready) {
            d.resolve( campaignData );
        }
    })

    // get the campaign
    let campaignDataStore = Fse.Data.createDataSource( { customStore : { dataURL : dataURL, object : "GTM.campaigns", key : "campaignId" }} ).store();
    campaignDataStore.byKey( campaignId ).done( function( data ) {
        /*
        if( data && data.length ) {
            d.notify( data[0] );
        }
        */
       if( data ) d.notify( data );
    })

    // get the forms
    let campaignFormsStore = Fse.Data.createDataSource( { customStore : { dataURL : dataURL, object : "GTM.campaignForms", key : "formId", objectParams : { campaignId : campaignId }  }} ).store();
    campaignFormsStore.load().done( function( data ) {
        let formId = [];
        data.forEach( function( fe ) {
            formId.push( fe.formId );
        })
        d.notify( { formId : formId, forms : data });
    })

    // get the products
    let campaignProductsStore = Fse.Data.createDataSource( { customStore : { dataURL : dataURL, object : "GTM.campaignProducts", key : [ "catalogType", "catalogId" ], objectParams : { campaignId : campaignId }  }} ).store();
    campaignProductsStore.load().done( function( data ) {
        let products = [];
        data.forEach( function( p ) {
            products.push( p );
        })
        d.notify( { products : products });
    })

    // get the email campaigns
    let emailCampaignsDatasource = Fse.Data.newDataSource( { object : "GTM.emailCampaigns", keyField : "campaignId", paginate : false  } );
    emailCampaignsDatasource.filter( [ "gtmCampaignId", "=", campaignId ] );
    emailCampaignsDatasource.load().done( function( emailCampaigns) {
        d.notify( { emailCampaigns : emailCampaigns } )
    })

    // get the external resources
    let externalResourcesDatasource = Fse.Data.newDataSource( { object : "GTM.campaignExternalResources", keyField : "resourceId", paginate : false ,  objectParams : { "campaignId" : campaignId  }} );
    externalResourcesDatasource.load().done( function( data) {
        d.notify( { externalResources : data } )
    })


    return d;
        
}

// legacy below

CampaignEditor.prototype.show = function( editorOptions ) {

    let portalDocRootURL = $("link#PortalDocRootURL").attr( "href" );

    let campaignDefaults = {
        campaignEnabled : "N"
    };

    let instance = this;
    let options = $.extend( true, {}, editorOptions );

    let editorTitle = options.campaignId ? "Edit Campaign" : "New Campaign";

    if( options.copyCampaign ) {
        editorTitle = "New Campaign";
    }

    let formItems = [];

    formItems.push( 
        {
            dataField : "campaignTypeId", label : { text : "Type" }, editorType : "dxSelectBox", isRequired : true, editorOptions : {
                dataSource : Fse.Data.newDataSource( { object : "GTM.allCampaignTypes", keyField : "campaignTypeId", paginate : false } ),
                searchEnabled : true, searchMode : "startswith",
                displayExpr : "campaignType",
                valueExpr : "campaignTypeId"
            }
        },{
            dataField : "campaignGroupId", label : { text : "Group" }, editorType : "dxSelectBox", isRequired : true, editorOptions : {
                searchEnabled : true, searchMode : "startswith",
                dataSource : Fse.Data.newDataSource( { object : "GTM.allCampaignGroups", keyField : "campaignGroupId", paginate : false } ),
                displayExpr : "campaignGroup",
                valueExpr : "campaignGroupId"
            }
        },{
            dataField : "campaignName", label : { text : "Name" }, editorType : "dxTextBox", isRequired : true, editorOptions : {
            maxLength : 50
            }
        },{
        dataField : "campaignDescription", label : { text : "Description" }, editorType : "dxTextArea", editorOptions : {
            maxLength : 500
            }
        },{
            dataField : "businessOwnerRefNum", label : { text : "Ref #" }, editorType : "dxTextBox", editorOptions : {
                maxLength : 50
                }
        },{
                dataField : "startDate", label : { text : "Start" }, editorType : "dxDateBox", editorOptions: { onFocusIn : function( e ) {
                    let v = e.component.option( "value" ) 
                    if( ! v || v == null ) {
                        e.component.open();
                    }
                } }, isRequired : true
        },{
            dataField : "endDate", label : { text : "End" }, editorType : "dxDateBox", editorOptions: { onFocusIn : function( e ) {
                let v = e.component.option( "value" ) 
                if( ! v || v == null ) {
                    e.component.open();
                }
            } }, isRequired : true
        },{
            dataField : "campaignManagerUserId", label : { text : "Campaign Manager" }, isRequired : true, editorType : "dxSelectBox", editorOptions : {
                dataSource : Fse.Data.newDataSource( { object : "CRM.salesRepList", keyField : "fspro_userId", paginate : true, objectParams : { staffOnly : true } } ),
                valueExpr : "fspro_userId",
                displayExpr : "fullName",
                searchEnabled : true,
                searchExpr : "fullName",
                searchMode : "contains"
            }
        },{
            dataField : "leadType", label : { text : "Lead Routing" }, isRequired : true, editorType : "dxSelectBox", editorOptions : {
                searchEnabled : true, searchMode : "startswith",
                dataSource : { store : { type : "array", key : "leadType", data : [
                    { leadType : "SALES"},
                    //{ leadType : "TASK"},
                ]}},
                displayExpr : "leadType",
                valueExpr : "leadType"
            }
        },{
            dataField : "salesManagerUserId", label : { text : "Sales Mgr." }, isRequired : true, editorType : "dxSelectBox", editorOptions : {
                dataSource : Fse.Data.newDataSource( { object : "CRM.salesRepList", keyField : "fspro_userId", paginate : true, objectParams : { staffOnly : true } } ),
                valueExpr : "fspro_userId",
                displayExpr : "fullName",
                searchEnabled : true,
                searchExpr : "fullName",
                searchMode : "contains"
            }
        } );

    if( Fse.Portal.appConfiguration.STP.ownerType === "BRO" ) {
        formItems.push( {
                dataField : "businessOwnerType", label : { text : "Owner Type" }, isRequired : true, editorType : "dxSelectBox", editorOptions : {
                    searchEnabled : true, searchMode : "startswith",
                    dataSource : { store : { type : "array", key : "partnerType", data : [
                        { businessOwnerType : "INT", businessOwnerTypeDisplay : "Internal" },
                        { businessOwnerType : "MFR", businessOwnerTypeDisplay : "Manufacturer" }
                    ]}},
                    valueExpr : "businessOwnerType",
                    displayExpr : "businessOwnerTypeDisplay"
                }
            },{
                dataField : "businessOwnerId", label : { text : "Manufacturer" }, isRequired : false, visible : false, editorType : "dxSelectBox", editorOptions : {
                    searchEnabled : true, searchMode : "startswith",
                    dataSource : Fse.Data.newDataSource( { object : "BPL.principals", keyField : "mfr_id", paginate : true } ),
                    searchEnabled : true,
                    searchExpr : "mfr_name",
                    valueExpr : "mfr_id",
                    displayExpr : "mfr_name"
                }
            } );
    } 
    formItems.push( {
            dataField : "targetPartnerType", label : { text : "Target" }, isRequired : true, editorType : "dxSelectBox", editorOptions : {
                searchEnabled : true, searchMode : "startswith",
                dataSource : { store : { type : "array", key : "partnerType", data : [
                    { partnerType : "OPR", partnerTypeDisplay : "Operators" },
                    { partnerType : "CDR", partnerTypeDisplay : "Distributors" },
                ]}},
                displayExpr : "partnerTypeDisplay",
                valueExpr : "partnerType"
            }
        }
        /* moved to a separate tab
        ,{ 
            dataField : "formId", label : { location : "left", text : "Form(s)" }, isRequired : false, editorType : "dxDropDownBox", 
            editorOptions : Fse.UI.multiSelectDropDownBoxEditorOptions( {
                    dataSource : Fse.Data.newDataSource( { object : "WRK.forms", keyField : "formId" } ),
                    searchExpr : "formName",
                    searchMode : "contains",
                    displayExpr : "formName",
                    multipleSelectedDisplay : "Multiple Forms Selected",
                    keyExpr : "formId",
                    title : "Select Form(s)"
            })
		}*/
        ,{
            dataField : "campaignEnabled", label : { text : "Enabled" }, isRequired : true, editorType : "dxRadioGroup", editorOptions : {
                layout : "horizontal",
                valueExpr : "value",
                items : [
                    { text : "Yes", value : "Y" },
                    { text : "No", value : "N" }
                ]
            }
        }

    );

    let tabs = null;
    let panels = null;

    let campaignForm = null;
    let territoryForm = null;

    let addProductsButton = null;
    // remove allProducts - let allProductsCheckBox = null;
    
    let productsElement = null;
    let productList = null;

    let applyValidation = function( origin ) {


        let validationResult = DevExpress.validationEngine.validateGroup( "CampaignEditor" );
        console.log("here -apply");
        console.log( validationResult );

        validationResult.complete.then( function( vr ) {


            let tabItems = $.extend( true, {}, { items : tabs.option( "items" )} ).items;

            tabItems.forEach( function( ti ) {
                ti.alert = false;
            });

            vr.brokenRules.forEach( function( br ) {

                if( br.tabIndex ) {
                    tabItems[br.tabIndex].alert = true;
                } else {
                    tabItems[0].alert = true;
                }

            })



            tabs.option( { items : tabItems });

            if( origin == "saveCampaign" ) {
                for( let x = 0; x < tabItems.length; x++ ) {
                    if( tabItems[x].alert ) {
                        tabs.option( "selectedIndex", x );
                        break;
                    }
                }
            }

        })

        return validationResult;

    }

    let setProductsTabData = null;
    let getProductsTabData = null;

    let setCampaignFormsData = null;
    let getCampaignFormsData = null;

    let updateTerritoryTab = function() {
        alert("update territory");

        let campaignFormData = campaignForm.option( "formData" );
        let businessOwnerType = campaignFormData.businessOwnerType;
        let businessOwnerId = campaignFormData.businessOwnerId;

        if ( Fse.Portal.appConfiguration.STP.ownerType !== "BRO" ) {
            return;
        }

        let territoryDataSource = null;
        /*
        if( businessOwnerType === "MFR" ) {
            if( businessOwnerId ) {
                territoryDataSource = Fse.Data.newDataSource( { object : "TER.salesTerritories", keyField : "TerritoryID", paginate : true, objectParams : { mfr_id : businessOwnerId } });
            } else {
                territoryDataSource = [];
            }

        } else {
            territoryDataSource = Fse.Data.newDataSource( { object : "TER.salesTerritories", keyField : "TerritoryID", paginate : true  });
        }
        */
        // allow for the selection of top level territories regardless of business owner scoping
        territoryDataSource = Fse.Data.newDataSource( { object : "TER.salesTerritories", keyField : "TerritoryID", paginate : true  });

        if( territoryDataSource ) {

            territoryForm.itemOption( "territoryId", { value : null,  editorOptions : {
                dataSource : territoryDataSource,
                valueExpr : "TerritoryID",
                displayExpr : "territoryPath",
                searchEnabled : true,
                searchExpr : "territoryPath",
                searchMode : "contains",
                placeholder : "Select Top Level Territory"
                } });
            
        }

    }

    let enableProducts = function() {

        let productsTabDisabled = true;
        let fd = campaignForm.option( "formData" );

        if( fd.leadType === "SALES" ) {
            productsTabDisabled = false;
        }

        let tabItems = $.extend( true, {}, { items : tabs.option( "items" )} ).items;

        tabItems[2].disabled = productsTabDisabled;

        tabs.option( { "items" : tabItems, selectedIndex : 0 } );

        if( Fse.Portal.appConfiguration.STP.ownerType === "BRO" ) {
            
            productList.columnOption( "mfr_name", { visible : fd.businessOwnerId ? false : true });
         }


        /* remove allProducts
        if( fd.businessOwnerId ) {
            allProductsCheckBox.option( "value", fd.allProducts ? true : false );
        } else {
            allProductsCheckBox.option( { value : false, visible : false  } );
        }
        */

        return ! productsTabDisabled;

    }

    campaignForm = $("<div>").dxForm( {
        items : formItems,
        formData : campaignDefaults,
        validationGroup : "CampaignEditor",
        onFieldDataChanged : function( e ) {
            console.log("here1");

            // let territoryDataSource = null;
            let updateTerritory = false;
            if( e.dataField === "businessOwnerType" ) {
                if( e.value === "MFR" ) {
                    e.component.itemOption( "businessOwnerId", { visible : true, isRequired : true } );
                } else {
                    e.component.itemOption( "businessOwnerId", { visible : false, isRequired : false } );
                }

                console.log("er por");

                updateTerritory = true;

                setProductsTabData( [] );
               
            } else if ( e.dataField === "businessOwnerId" ) {
                 setProductsTabData( [] );

                 if( Fse.Portal.appConfiguration.STP.ownerType === "BRO" ) {
                    productList.columnOption( "mfr_name", { visible : e.value ? false : true }); 
                    updateTerritory = true;
                 }

            } else if ( e.dataField === "productSpecific" ) {
            }

            if( updateTerritory ) {
                updateTerritoryTab();
                //console.log("coming here ever");
            }

            enableProducts();

            applyValidation( "onFieldDataChanged" );
                

        }
    }).dxForm( "instance" );

   

    let productListColumns = [];

    productListColumns.push( { dataField : "mfr_name", caption : "Manufacturer", visible : Fse.Portal.appConfiguration.STP.ownerType === "BRO" } );

    productListColumns.push( 
        { 
           name : "category", 
           caption : "Category",
           allowSorting : true,
           calculateCellValue : function( item ) {
            
                if( ! item ) return;

                let parts = item.productHierarchyPath.split( "/" );
                parts.shift(); parts.shift();

                if( parts.length ) {
                    return parts[0];
                }

               },
            calculateSortValue : function( item ) {
            
                if( ! item ) return;

                let parts = item.productHierarchyPath.split( "/" );
                parts.shift(); parts.shift();

                if( parts.length ) {
                    return parts[0];
                }

               }

            
        }, {
            name : "sku",
            caption : "Item",
            dataField : "productHierarchyPath", 
            calculateDisplayValue : function( item ) {
                    if( ! item ) return;

                    let parts = item.productHierarchyPath.split( "/" );
                    parts.shift(); parts.shift(); parts.shift();

                    if( parts.length ) {
                        return parts.join( "/" );
                    }
                }
        });

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

        columns : productListColumns,
        dataSource : { store : { type : "array", data : [], key : [ "catalogType", "catalogId" ] } },
        noDataText : "At least one product (L2/L1) is required",
        showBorders : true,
        xkeyExpr : [ "catalogType", "catalogId" ],
        editing : {
            allowDeleting : true,
            useIcons : true,
            confirmDelete : false
        }


    }).dxDataGrid( "instance" );

    setProductsTabData = function( data ) {

        productList.option( "dataSource", {
            store : { type : "array", data : data, key : [ "catalogType", "catalogId" ] }
        });

    }

    getProductsTabData = function() {
        let ds = productList.getDataSource();
        if( ds ) {
            ds.load();
            return ds.items();
        } else {
            return [];
        }
    }

    let listValidator = productList.element().dxValidator( { 
        validationGroup : "CampaignEditor", 
        validationRules : [
            { tabIndex : 2, 
              type : "custom", validationCallback : function( e ) {

                let fd = campaignForm.option( "formData" );
                if( fd.leadType !== "SALES" ) {
                    return true;
                }

                /*
                if( Fse.Portal.appConfiguration.STP.ownerType === "BRO" ) {
                    let fd = campaignForm.option( "formData" );
                    // brokers
                    if( fd.businessOwnerType !== "MFR" ) {
                        return true;
                    } 
                }
                */

                /* remove allProducts
                if( e.value.allProducts ) {
                    return true;
                } else {

                    if( ! e.value.items || ! e.value.items.length ) {
                        return false;
                    } else {
                        return true;
                    }
    
                }
                */


                if( ! e.value.items || ! e.value.items.length ) {
                    return false;
                } else {
                    return true;
                }


            }, message : "At least one product (L2/L1) is required" }
        ],

        adapter: {
            getValue: function() {

                /* remove allProducts
                let allProducts = false;
                if( allProductsCheckBox ) {
                    allProducts = allProductsCheckBox.option( "value" );
                }
                */

                let value = {
                    items : getProductsTabData()
                    /* remove allProducts - allProducts : allProducts */
                };

                return value;

            },
            applyValidationResults: function(e) {
                if( ! e.isValid ) {
                    // tabs.option( "selectedIndex", 2 );
                }
                
            }
        }
    } ).dxValidator( "instance" );

    /* remove allProducts
    if( Fse.Portal.appConfiguration.STP.ownerType === "BRO" ) {

        allProductsCheckBox = $( "<div>" ).dxCheckBox(
            { 
                text : "All Products",
                value : false,
                onValueChanged : function( e ) {
                    if( e.value ) {
                        addProductsButton.option( "disabled", true );
                        productList.option( { "disabled" : true, "visible" : false });
                    } else {
                        addProductsButton.option( "disabled", false );
                        productList.option( { "disabled" : false, visible : true } );
                    }
                }
            }
        ).dxCheckBox("instance");


    } 
    */

    addProductsButton = $("<div>").dxButton( {
        text : "Add Products", icon : "add", onClick : function( te ) {

            let productPickerOptions = {
                pick : "SKU,PRD",
                selectMode : "multiple",
                buttons : "add,continue",
                onProductsPicked : function( productsPickedEvent ) {

                    let selectedItems = productsPickedEvent.selectedItems;

                    let newItems = [];
                    getProductsTabData().forEach( function( pli ) {
                        newItems.push( pli );
                    })

                    selectedItems.forEach( function( si ) {

                        let existingItem = null;
                        newItems.forEach( function( ni ) {
                            if( ni.catalogId === si.catalogId && ni.catalogType === si.catalogType ) {
                                existingItem = ni;
                            }
                        })
                        if( ! existingItem ) {
                            newItems.push( si );
                        }
                    })

                    // productList.option( "items", newItems );
                    setProductsTabData( newItems );

                },
                currentSelections : getProductsTabData()
            }
            if( Fse.Portal.appConfiguration.STP.ownerType === "BRO" ) {
                let fd = campaignForm.option( "formData" );
                productPickerOptions.mfr_id = -1;
                if( fd.businessOwnerType === "MFR" && fd.businessOwnerId ) {
                    productPickerOptions.mfr_id = fd.businessOwnerId
                }
            }

            let productPicker = new ProductPicker(productPickerOptions);
            productPicker.show();
        }
    }).dxButton("instance");


    let productListToolbarItems = [];

    /* remove allProducts
    if( allProductsCheckBox ){
        productListToolbarItems.push( { location : "before", template : function() { return allProductsCheckBox.element()  } });
    }
    */

    productListToolbarItems.push({ location : "after", template : function() { return addProductsButton.element () }} );


    let productListToolbar = $("<div>").css( { "padding-bottom" : "10px" } ).dxToolbar( {
        items : productListToolbarItems
    }).dxToolbar( "instance" );


    productsElement = $("<div>")
        .append( productListToolbar.element() )
        .append( productList.element() );

    let territoryList = $("<div>").dxList( {

        displayExpr : function( data ) {
          if( data ) {
            return `${data.internalSalesID} - ${data.territoryName}`;
          }  
        },
        height : instance.tabHeight - 50,
        scrollingEnabled : true,
        scrollByThumb : true

    } ).dxList( "instance" );

    
    territoryForm = $("<div>").dxForm( {
        validationGroup : "CampaignEditor",
        items : [
            { dataField: "territoryId", label : { text : "Top Level Territory" }, isRequired : true, editorType : "dxSelectBox", editorOptions : {
                dataSource : Fse.Data.newDataSource( { object : "TER.salesTerritories", keyField : "TerritoryID", paginate : true }),
                valueExpr : "TerritoryID",
                displayExpr : "territoryPath",
                searchEnabled : true,
                searchExpr : "territoryPath",
                searchMode : "contains",
                placeholder : "Select Top Level Territory",
                },
                validationRules : [{ 
                    tabIndex : 1,
                    type: "async", 
                    reevaluate : true,
                    message : "Territory selection must cover local markets for the Business Owner",
                    validationCallback: function(params) {
                        const d = $.Deferred();


                        let objectParams = {
                            topLevelTerritoryId : params.value
                        }

                        let fd = campaignForm.option( "formData" );
                        if( fd.businessOwnerId ) {
                            objectParams.mfr_id = fd.businessOwnerId;
                            console.log("mfr set");
                        }
        

                        let dataSource = Fse.Data.newDataSource( { object : "GTM.targetMarkets", keyField : "territoryId", paginate : false,  objectParams : objectParams });


                        dataSource.load().done( function( data )  {
                            territoryList.option( { "items" : data } );

                            if( data.length ) {
                                d.resolve();
                            } else {
                                d.reject( "Territory Selection Must Cover Local Markets for Business Owner Selection" );
                            }

                        } );
                                        
                        return d.promise();
                    }
                }]
            }
        ]
        
    }).dxForm( "instance" );

    

    let territoriesElement = $("<div>" )
    .append( territoryForm.element() )
    .append( $("<div>").append( "Included Local Markets" ) )
    .append( territoryList.element() );


    let campaignFormAddButton = null;

    let availableFormsDataSource = Fse.Data.newDataSource( { object : "WRK.forms", keyField : "formId" } );
    availableFormsDataSource.filter( [ "ready", "=", "Y" ] );

    let workflowFormSelectBox = $("<div>").dxSelectBox( {
        placeholder : "Select a form and click Add",
        width : 300,
        dataSource : availableFormsDataSource,
        displayExpr : "formName",
        valueExpr : "formId",
        searchEnabled : true,
        searchExpr : "formName",
        onValueChanged : function( e ) {
            if( e.value ) {
                campaignFormAddButton.option( "disabled", false )
            } else {
                campaignFormAddButton.option( "disabled", true )
            }
        }
    }).dxSelectBox( "instance" );

    campaignFormAddButton = $("<div>").dxButton( {
        text : "Add",
        onClick : function( e ) {


            let workflowFormToAdd = workflowFormSelectBox.option( "selectedItem" );
            if( workflowFormToAdd ) {

                let addIt = true;
                let newData = [];
                getCampaignFormsData().forEach( function( wfi ) {
                    newData.push( wfi );
                    if( wfi.formId === workflowFormToAdd.formId ) {
                        addIt = false;
                    }
                })

                if( addIt ) {
                    newData.push( workflowFormToAdd );
                    setCampaignFormsData( newData );
                }

            }

            workflowFormSelectBox.option( "value", null );
        },
        disabled : true,
    }).dxButton( "instance" );

    /*
    let campaignFormsToolbar = $("<div>").dxToolbar( {

        items : [
            { location : "after",
              template : function() {
                return workflowFormSelectBox.element();
              }
            },{
                location : "after",
                template : function() {
                    return campaignFormAddButton.element();
                }
            }
        ]
    }).dxToolbar( "instance" );
    */

    let campaignFormsGrid = $("<div>").dxDataGrid( {

        dataSource : [], // Fse.Data.newDataSource( { object : "GTM.campaignForms", key : "formId", objectParams : { campaignId : editorOptions.campaignId ? editorOptions.campaignId : -1 }  } ),
        columns : [
            { dataField : "formName", caption : "Form" },
            { caption : "Submission Link", placeholder : "na for newly added forms", calculateCellValue : function( rowData ) {

                let submissionLink = null;
                if( rowData.token ) {
                    submissionLink = Fse.Util.updateURL2( `${portalDocRootURL}/public/form.cfm`, { formId : rowData.formId, linkId : rowData.linkId, linkType : rowData.linkType, token : rowData.token } );
                }
                return submissionLink

            }, cellTemplate : function( container, options) {
                if( options.rowType === "data" ) {
                    if( options.value ) {
                        container.append( $("<a>").attr( { "href" : options.value, "target" : "_blank", "rel" : "noopener noreferrer" } ).append( "link" ) );
                    } else {
                        container.append( $("<em>").append( "na for newly added form" ));
                    }
                }
            } },
        ],
        showBorders : true,
        editing : {
            allowDeleting : true,
            useIcons : true,
            confirmDelete : false
        },
        onToolbarPreparing : function( e ) {
            if( ! e.toolbarOptions.items ) {
                e.toolbarOptions.items = [];
            }

            e.toolbarOptions.items.push(
                { location : "after",
                  template : function() {
                    return workflowFormSelectBox.element();
                  }
                },{
                    location : "after",
                    template : function() {
                        return campaignFormAddButton.element();
                    }
                }
            )
        },
        xtoolbar : {
            visible : true,
            items : [
                { location : "after",
                  template : function() {
                    return workflowFormSelectBox.element();
                  }
                },{
                    location : "after",
                    template : function() {
                        return campaignFormAddButton.element();
                    }
                }
            ]
        }

    }).dxDataGrid( "instance" );

    getCampaignFormsData = function() {
        let ds = campaignFormsGrid.getDataSource();
        if( ds ) {
            ds.load();
            return ds.items();
        } else {
            return [];
        }
    }

    setCampaignFormsData = function( data ) {

        let dataSource = new DevExpress.data.DataSource( {
            store : { type : "array", data : data, key : "formId" }
        })

        // dataSource.load();

        campaignFormsGrid.option( "dataSource", dataSource );
    }

    let campaignFormsElement = $("<div>")
        // .append( campaignFormsToolbar.element() )
        .append( campaignFormsGrid.element() )


    let tabItems = [
        { text : "Details", alert : false },
        { text : "Territories", alert : false }, 
        { text : "Products", alert : false },
        { text : "Forms", alert : false },
        { text : "Files", disabled : editorOptions.campaignId ? false : true, alert : false }
    ]

    tabs = $( "<div>" ).dxTabs( {

        itemTemplate : function( item, index, element ) {
            element.append( item.text ); 
            if( item.alert ) {
                element.css( { "color" : "red" });
            }
        },
        items : tabItems,
        selectedIndex : 0,
        onSelectionChanged : function( e ) {
            panels.option( "selectedIndex", e.component.option( "selectedIndex" ));
        }
    }).dxTabs( "instance" );



    let scrollView = null;

    let panelItems = [
        { template : function( data, index, element ) {
                scrollView = $("<div>").append( 
                    $("<div>").css( { "padding" : "10px" } ).append( campaignForm.element() )
                ).dxScrollView( { height : instance.tabScrollHeight })
                 .dxScrollView( "instance" );
                element.append( $("<div>").append( scrollView.element() ));
            } 
        },
        {   template : function( data, index, element ) {
                let container = $("<div>").css( { "padding" : "10px" } )
                    .append( territoriesElement )
                element.append( container );
            }
        },
        { template : function( item, index, element ) {

                element.append( $("<div>").css( { "padding" : "10px" }).append( productsElement ))

           }
        },
        { template : function( item, index, element ) {

            element.append( $("<div>").css( { "padding" : "10px" }).append( campaignFormsElement ))

       }
    }
];

    let assetGrid = null;

    if( editorOptions.campaignId ) {
        panelItems.push( { 
            template : function( item, index, element ) {
                assetGrid = new AssetGrid( { 
                    contentDomain : "GTM", 
                    containerType : "GTM", 
                    containerId : editorOptions.campaignId,
                    visibleColumns : [ "docTitle", "docDescription", "buttons" ]
                 });
                element.append( assetGrid.element() );
            }

        } );
    }

    panels = $( "<div>" ).dxMultiView( {

        height : instance.tabHeight,
        swipeEnabled : false,
        animationEnabled : true,
        focusStateEnabled : false,
        items : panelItems,
        selectedIndex : 0,
        deferRendering : false,
        onSelectionChanged : function( e ) {


        } 

    }).dxMultiView( "instance" );


    let saveCampaign = function() {


        let validationResult = applyValidation( "saveCampaign" );
        validationResult.complete.then( function( vr )  {

            if( vr.isValid ) {

                let campaignData = campaignForm.option( "formData" );
                let territoryData = territoryForm.option( "formData" );
                campaignData.territoryId = territoryData.territoryId;
        
                /* remove allProducts
                if( campaignData.businessOwnerId ) {
                    campaignData.allProducts = allProductsCheckBox.option( "value" ) ? 1 : 0;
                } else {
                    campaignData.allProducts = 0;
                }
                */
        
                if( Fse.Portal.appConfiguration.STP.ownerType === "MFR" ) {
                    campaignData.businessOwnerType = "INT";
                    campaignData.businessOwnerId = 0;
                }
        
                if( campaignData.leadType === "SALES" ) {
                    campaignData.products = getProductsTabData(); // productList.option( "items" );
                }

                campaignData.forms = getCampaignFormsData();
        
        
                // do the save
                let saveURL = Fse.Util.updateURL2( $("link#appActionURL").attr( "href" ), { object : "GTM.saveCampaign" } );
                $.ajax( { 
                    url : saveURL,
                    method : "post",
                    data : { campaign : JSON.stringify( campaignData ) }
                })
                .done( function( returnData ) {
                    popup.hide();
                    if( options.onSuccess ) {
                        options.onSuccess( returnData ); 
                    }
                })
                .fail( function() {
                    console.log( "failed");
                })
        

            }


        } );

       

    }

    let submitButton = $("<div>").dxButton( {
        text : "Submit",
        type : "default",
        disabled : options.campaignId ? true : false,
        onClick : function( be ) {
            saveCampaign();
        }
    }).dxButton( "instance" );

    let popupToolbarItems = [
        { toolbar : "bottom", location : "after", widget : "dxButton", 
            options : {
                text : "Cancel", 
                type : "normal", 
                onClick : function( be ) {
                    if( confirm( "Are you sure?" )) {
                        popup.hide();      
                    }
                }
            }
        },
        { toolbar : "bottom", location : "after", template : function() { 
                return submitButton.element();
            }
        }
    ];

    if( options.campaignId && ! options.copyCampaign ) {
        popupToolbarItems.unshift( {
            toolbar : "bottom", location : "before",
            template : $("<div>").css( { "color" : "lightgray" } ).append( `id: ${options.campaignId}` )
        })
    }

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

        width : instance.popupWidth,
        height : instance.popupHeight,
        title : editorTitle,
        toolbarItems : popupToolbarItems,

        contentTemplate : function( e ) {
            return $("<div>").append( tabs.element() ).append( panels.element() );
        },

        onHidden : function( e ) {
            popup.element().remove();
            popup.dispose();
            campaignForm.dispose();
        },

        onShown : function( e ) {
            enableProducts();
            // scrollView.update();
        },

        onShowing : function( e ) {
            if( options.campaignId ) {

                campaignForm.option( "disabled", true );

                let dataURL = $("link#appDataURL").attr( "href" );


                let campaignData = {};

                let d = new $.Deferred();

                d.progress( function( data ) {
                    $.extend( campaignData, data );
                    let ready = ( campaignData.campaignId && campaignData.formId && campaignData.products );
                    if( ready) {

                        if( options.copyCampaign ) {
                            delete campaignData.campaignId;
                            delete campaignData.campaignName;
                        }

                        d.resolve( campaignData );
                    }
                })
                
                d.done( function( data ) {


                    campaignForm.option( "formData", data );
                    if( data.businessOwnerType === "MFR" ) {
                        campaignForm.itemOption( "businessOwnerId", { isRequired : true, visible : true } )
                    }

                    territoryForm.option( "formData", { territoryId : data.territoryId } );

                    if( data.products.length ) {
                        setProductsTabData( data.products );
                    } else {
                        setProductsTabData( [] );
                    }
                    
                    setCampaignFormsData( data.forms );

                    enableProducts();
                   
                    campaignForm.option( "disabled", false );
                    submitButton.option( "disabled", false );

                    if( campaignData.objectiveId ) {

                        // start with the immutable fields
                        let lockedFields = [ "leadType", "territoryId", "businessOwnerType", "targetPartnerType", "businessOwnerId" ];

                        // if the campaign is enabled then 

                        if( campaignData.campaignEnabled === "Y" ) {
                            // lock additional fields when the campaign is enabled
                            lockedFields.push( "startDate", "endDate", "salesManagerUserId", "businessOwnerRefNum" );
                        }


                        lockedFields.forEach( function( rof ) {
                            let editor = campaignForm.getEditor( rof );

                            if( ! editor ) {
                                // see if it is a territory field 
                                editor = territoryForm.getEditor( rof );
                            }

                            if( editor ) {
                                editor.option( { "readOnly" : true, "hint" : "Objective Read Only Field" } );
                            } else {
                                // an editor may not be found if it is not visible  
                            }
                        });

                    }


                    setTimeout( function() { applyValidation( "onShowing" ) }, 50 );
                    // applyValidation();
                    


                })

                // get the campaign
                let campaignDataStore = Fse.Data.createDataSource( { customStore : { dataURL : dataURL, object : "GTM.campaigns", key : "campaignId" }} ).store();
                campaignDataStore.byKey( options.campaignId ).done( function( data ) {
                    /*
                    if( data && data.length ) {
                        d.notify( data[0] );
                    }
                    */
                   if( data ) d.notify( data );
                })

                // get the forms
                let campaignFormsStore = Fse.Data.createDataSource( { customStore : { dataURL : dataURL, object : "GTM.campaignForms", key : "formId", objectParams : { campaignId : options.campaignId }  }} ).store();
                campaignFormsStore.load().done( function( data ) {
                    let formId = [];
                    data.forEach( function( fe ) {
                        formId.push( fe.formId );
                    })
                    d.notify( { formId : formId, forms : data });
                })

                // get the products
                let campaignProductsStore = Fse.Data.createDataSource( { customStore : { dataURL : dataURL, object : "GTM.campaignProducts", key : [ "catalogType", "catalogId" ], objectParams : { campaignId : options.campaignId }  }} ).store();
                campaignProductsStore.load().done( function( data ) {
                    let products = [];
                    data.forEach( function( p ) {
                        products.push( p );
                    })
                    d.notify( { products : products });
                })
                
            }
        }


    }).dxPopup( "instance" ); 

    $("body").append( popup.element() );

    popup.show();

}