EmailCampaignEditor = function( campaignData, options ) {

    let instance = this;

    instance.height = 550;
    instance.readOnly = false;

    instance.cancelButton = null;
    instance.saveButton = null;
    instance.designButton = null;
    instance.executeNowButton = null;
    instance.sendTestEmailButton = null;

    instance.changes = null;
    instance.changeCount = 0;
    instance.intervalId = 0;

    instance.rootElement = $("<div>").addClass( "EmailCampaignEditor");

    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.creatingNewCampaign = false;

    instance.tabPanel = null;

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

        let d = $.Deferred();
        let waiting = false;

        instance.campaignData = {
            campaignId : 0,
            campaignType : campaignData.campaignType,
            emailFrom : Fse.Portal.appConfiguration.STP.userEmailAddress,
            emailFromDisplay : Fse.Portal.appConfiguration.STP.userFullName,
            emailSubject : null,
            useInternalContact : false,
            includeUnsubscribe : false,
            campaignName : null,
            gtmCampaignId : null
        }

        if( campaignData.gtmCampaignId ) {

            instance.campaignData.gtmCampaignId = campaignData.gtmCampaignId;
            instance.campaignData.emailFrom = campaignData.emailFrom;
            instance.campaignData.emailFromDisplay = campaignData.emailFromDisplay;
            instance.campaignData.emailSubject = campaignData.campaignName;
            instance.campaignData.campaignName = campaignData.campaignName;

            instance.getDataForGTMCampaign( campaignData.gtmCampaignId ).done( function( gtmCampaignData ) {

                if( Array.isArray( gtmCampaignData ) && gtmCampaignData.length ) {
                    gtmCampaignData = gtmCampaignData[0];
                }

                instance.campaignData.gtmCampaignName = gtmCampaignData.campaignName,
                instance.campaignData.gtmCampaignDescription = gtmCampaignData.campaignDescription,
                instance.campaignData.gtmCampaignManagerDisplay = gtmCampaignData.campaignManagerDisplay,
                instance.campaignData.gtmSalesManagerDisplay = gtmCampaignData.salesManagerDisplay,
                instance.campaignData.gtmLeadType = gtmCampaignData.leadType,
                instance.campaignData.gtmTargetPartnerType = gtmCampaignData.targetPartnerType,
                instance.campaignData.gtmTerritoryName = gtmCampaignData.territoryName

                d.resolve();
    
            })

            waiting = true;

        }

        if( campaignData.campaignName ) {
            instance.campaignData.campaignName = campaignData.campaignName;
        }

        instance.creatingNewCampaign = true;

        if( ! waiting ) {
            d.resolve();
        }

        d.done( function() {
            instance.createUI( instance.campaignData, instance.options.tabIndex );
            if( instance.creatingNewCampaign ) {
                instance.changes.insert( "newCampaign" );
            }
        })
        
    }

}


EmailCampaignEditor.prototype.gotoTab = function( tabTitle ) {

    let tabIndex = -1;
    let tabItems = this.tabPanel.option( "items" );
    for( let ti = 0; ti < tabItems.length; ti++ ) {
        if( tabItems[ti].title === tabTitle ) {
            tabIndex = ti;
            break;
        }
    }

    if( tabIndex != -1 ) {
        this.tabPanel.option( "selectedIndex", tabIndex );
    }
}

EmailCampaignEditor.prototype.constructor = EmailCampaignEditor;


EmailCampaignEditor.prototype.prepareChanges = function() {
    let d = $.Deferred();




    return d;
}

EmailCampaignEditor.prototype.saveChanges = function() {

    let instance = this;

    let saving = $.Deferred();

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

                        saving.resolve();

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

                        saving.reject();
                    })


                // 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" );
                saving.resolve();
            }

        })

    })

    return saving;

}

EmailCampaignEditor.prototype.getDataForGTMCampaign = function( gtmCampaignId ) {

    // get the campaign data
    let campaignDataStore = Fse.Data.newDataSource( { object : "GTM.campaigns", keyField : "campaignId" }).store();
    return campaignDataStore.byKey( gtmCampaignId );

}

EmailCampaignEditor.prototype.resolveEmailSpoofing = function( data ) {


    let resolveEmailSpoofingURL = Fse.Util.updateURL2( $("link#appDataURL" ).attr( "href" ), { "object" : "GTM.resolveEmailSpoofing" });

    return $.ajax( { 
        url : resolveEmailSpoofingURL,
        method : "get",
        dataType : "json",
        data : {
            "emailFrom" : `${data.emailFromDisplay} <${data.emailFrom}>`,
            "emailSubject" : data.emailSubject
        }
    }).fail( function( x ) {
        console.log( "Fail X" );
        console.log( x )
    })

}

EmailCampaignEditor.prototype.getDataForCampaign = function( campaignId ) {

    let instance = this;
    let data = null;
    let d = $.Deferred();

    let waiting = 0;

    d.progress( function( notifyData ) {

        /*
        console.log( "PROGRESS" );
        console.log( waiting );
        console.log( notifyData );
        */

        if( data ) {

            // secondary data
            waiting--;

            if( notifyData.emailFrom ) {
                console.log( notifyData );

                data.resolvedEmailFrom = notifyData.emailFrom;
                data.resolvedEmailSubject = notifyData.emailSubject;
                data.spoofingResolved = notifyData.status;


            } else {

                // this will be gtm campaign data as data is not null because we already have email campaign data
                if( notifyData.length ) {

                    data.gtmCampaignName = notifyData[0].campaignName,
                    data.gtmCampaignDescription = notifyData[0].campaignDescription,
                    data.gtmCampaignManagerDisplay = notifyData[0].campaignManagerDisplay,
                    data.gtmSalesManagerDisplay = notifyData[0].salesManagerDisplay,
                    data.gtmLeadType = notifyData[0].leadType,
                    data.gtmTargetPartnerType = notifyData[0].targetPartnerType,
                    data.gtmTerritoryName = notifyData[0].territoryName

                }

            }


        } else {

            // main data
            waiting--;
            data = notifyData;

            waiting++;
            instance.resolveEmailSpoofing( data ).done( function( resolveEmailData )  {
                d.notify( resolveEmailData );
            });

            if( data.gtmCampaignId ) {

                // get the campaign data
                waiting++;
                instance.getDataForGTMCampaign( data.gtmCampaignId ).done( function( gtmCampaignData ) {
                    d.notify( gtmCampaignData );
                })

            } 
        }

        if( ! waiting ) {
            console.log( "RESOLVING" );
            console.log( data );
            d.resolve( data );
        }


    })

    waiting++;
    let dataStore = Fse.Data.newDataSource( { object : "GTM.emailCampaigns", keyField : "campaignId", objectParams : { includeMessageContent : true, includeStatColumns : true } } ).store();
    dataStore.byKey( campaignId )
        .done( function( campaignData ) {
            d.notify( campaignData );
        })
        .fail( function( err ) {
            console.log( "FAILING FAILING FAILING" );
            console.log( err );
        })


    return d;
}

EmailCampaignEditor.prototype.refreshEditor = function() {

    let instance = this;

    let d = instance.getDataForCampaign( 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';

        instance.createUI( data, currentTabIndex );

       


    })

    return d;

}

EmailCampaignEditor.prototype.createUI = function( data, tabIndex ) {

    let instance = this;

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

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

    instance.changeCount = 0;
    instance.changes = new DevExpress.data.ArrayStore( { data : [], onInserted : function( item ) {
        instance.changeCount++;

        if( instance.options.onChanged ) {

            instance.options.onChanged( item );

        } else {

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

        
        }});



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

    instance.rootElement.empty();

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


    let items = []

    items.push( 
        { title : "Details", template : function() { return instance.detailsTabTemplate( data ) } }
    );

    if( data.campaignId ) {

        if( data.campaignType == "CRM" ) {
            items.push(                 
                // { title : "Defaults", template : function() { return instance.defaultsTabTemplate( data ) } },
                { title : "Recipients", template : function() { return instance.crmRecipientsTabTemplate( data ) }}
                );
        } else {

            items.push(                 
                { title : "Recipients", template : function() { return instance.standardRecipientsTabTemplate( data ) }}
            );
    
        }

        items.push(                 
            { title : "Email Design", template : function() { return instance.designTabTemplate( data ) }},
            { title : "Hyperlinks", template : function() { return instance.hyperlinksTabTemplate( data ) }},
            { title : "Test", template : function() { return instance.testingTabTemplate( data ) }},
            { title : "Summary", template : function() { return instance.summaryTabTemplate( data ) }}
        );

    }

    instance.tabPanel = $("<div>").dxTabPanel( {
        items : items,
        selectedIndex : tabIndex

    }).dxTabPanel( "instance" ); 

    instance.rootElement.append( instance.tabPanel.element() );

    if( ! instance.options.onChanged ) {

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

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

            instance.saveChanges();

        }}).dxButton( "instance" );

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




}


EmailCampaignEditor.prototype.crmRecipientsTabTemplate = function( data ) {
    let instance = this;

    let template = $("<div>").css( "padding", "10px 10px 10px 10px" );


    let partnerTypes = "OPR,CDR";
    if( data.gtmCampaignId ) {
        partnerTypes = data.gtmTargetPartnerType;
    }

    console.log( data );

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


    /* wait on the feature to add a new list
    let targetListNameTextBox = null;

    let listTypeRadioGroup = $("<div>").dxRadioGroup( {
        items : [
            { text : "Use an existing list", newTargetList : false },
            { text : "Create a new list", newTargetList : true }
        ],
        displayExpr : "text",
        valueExpr : "newTargetList",
        value : data.targetListId ? false : true,
        disabled : instance.readOnly,
        layout : "horizontal",
        onValueChanged : function( e ) {
            if( e.value ) {
                targetListNameTextBox.option( { required : true, disabled : false, visible : true } );
                listSelectBox.option( { required : false, disabled : true, visible : false  } );
            } else {
                targetListNameTextBox.option( { required : false, disabled : true, visible : false } )
                listSelectBox.option( { required : true, disabled : false, visible : true } );
            }
        }
    })
    .css( { "padding-top" : "10px" } )
    .dxRadioGroup( "instance" );

    targetListNameTextBox = $("<div>").dxTextBox( {
        maxLength : 50,
        disabled : true,
        required : false,
        value : null,
        placeholder : "name of new recipient list",
        visible : false
    }).dxTextBox( "instance" );
    */

    template.append( "<h4>Target List</h4>")

    let targetListLayout = $("<div>").css( { "display" : "grid", "grid-template-columns" : "100px auto" })


    let listFields = $("<div>")
            .append( instance.listSelectBox.element() )
            /* wait on the feature to add a new list
            .append( targetListNameTextBox.element() );
            */


    targetListLayout.append( "<label>Target List</label>" );
    targetListLayout.append(  listFields );
        

    /* wait on the feature to create a new list
    targetListLayout.append( "<div></div>" );
    targetListLayout.append( listTypeRadioGroup.element() );
    */

    template.append( targetListLayout );

    template.append( "<h4>Contributors</h4>" );


    // let contributorList = null;

    // need to highlight non-staff in red
    let deleteContributor = function( fspro_userId ) {

        instance.changes.insert( "crmRecipients.contributorList" );

        let contributors = instance.contributorList.getDataSource().items();

        let deleted = false;
        let newContributors = [];
        contributors.forEach( function( c ) {

            if( c.fspro_userId != fspro_userId ) {
                newContributors.push( c );
            } else {
                deleted = true;
            }

        })

        if( deleted ) {
            instance.contributorList.option( "dataSource", {
                store : {
                    type : "array",
                    data : newContributors,
                    key : "fspro_userId"
                }
            })        
        }
    }

    let addContributors = function( contributorsToAdd ) {

        let contributors = instance.contributorList.getDataSource().items();

        let newContributors = [];
        let contributorIds = {};
        contributors.forEach( function( c ) {
            newContributors.push( c );
            contributorIds[c.fspro_userId] = true;
        })

        let added = false;
        contributorsToAdd.forEach( function( a ) {
            if( ! contributorIds[a.fspro_userId] ) {
                newContributors.push( a );
                contributorIds[a.fspro_userId] = true;
                added = true;
            }
        })

        if( added ) {
            instance.contributorList.option( "dataSource", {
                store : {
                    type : "array",
                    data : newContributors,
                    key : "fspro_userId"
                }
            })        
            instance.changes.insert( "crmRecipients.contributorList" );
        }
        

    }

    let contributorPicker = new StaffPicker();

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

        scrolling : {
            mode : "virtual"
        },
        height : 225,
        showBorders : true,
        columns : [
            { name : "fullName", caption : "Full Name", allowSorting : true,
              calculateSortValue : function( rowData ) {
                if( rowData ) {
                    return `${rowData.firstName} ${rowData.lastName}`;
                }
              },
              calculateCellValue : function( rowData ) {
                if( rowData ) {
                    return `${rowData.firstName} ${rowData.lastName}`;
                }
              }
            },
            { dataField : "email", caption : "Email Address" },
            { dataField : "staffMember", caption : "Staff Member",
                lookup : {
                    dataSource : {
                        store : { 
                            type : "array",
                            key : "value",
                            data : [
                                { value : 1, text :'Yes' },
                                { value : 0, text :'No' }
                            ]
                        }
                    },
                    displayExpr : "text",
                    valueExpr : "value"
                }
            },
            { name : "junk", type : "buttons", width : 40,
              buttons : [ 
                { icon : "trash", onClick: function( e ) {

                    if( e.row.rowType == "data" ) {
                        deleteContributor( e.row.data.fspro_userId );
                    }
                 }
                }
               ] 
            }
        ],

        onToolbarPreparing : function( e ) {

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

            e.toolbarOptions.items.push (  { location : "after", widget : "dxButton", options : {
                    text : "Add Contributors",
                    icon : "add",
                    disabled : instance.readOnly,
                    onClick : function( e ) {
                        contributorPicker.show( { onStaffPicked : addContributors } )
                    }
                }
            });

        }

    }).dxDataGrid( "instance" );




    template.append( instance.contributorList.element() );


    let contributorDataStore  = Fse.Data.newDataSource( { object : "GTM.emailCampaignListContributors", keyField : "fspro_userId", objectParams : { campaignId : data.campaignId } } ).store();
    contributorDataStore.load().done( function( contributors ) {

        instance.contributorList.option( "dataSource", {
            store : {
                type : "array",
                data : contributors,
                key : "fspro_userId"
            }
        })

    })


    template.append( "<p><i>Note: All CRM internal contacts for Operators/Distributors in the identified list will be automatically added to the contributor list upon save.</i></p>" );

    instance.sendNotificationCheckBox = null;
    instance.sendNotificationTextArea = null;

    if( ! instance.readOnly ) {

        template.append( "<h4>Notify</h4>" );


        instance.sendNotificationTextArea = $("<div>").dxTextArea( {
            disabled : true,
            onValueChanged : function( e ) {
                instance.changes.insert( "crmRecipients.contributorNotificationText" );
            }
        }).dxTextArea( "instance" );
    
        instance.sendNotificationCheckBox = $("<div>").dxCheckBox( {
            value : false,
            text : "Send Notification",
            onValueChanged : function( e ) {
                if( e.value ) {
                    instance.sendNotificationTextArea.option( { disabled : false, required : true } )
                    instance.sendNotificationTextArea.focus();
                } else {
                    instance.sendNotificationTextArea.option( { disabled : true, required : false, value : null } )
                }
                instance.changes.insert( "crmRecipients.notififyContributors" )
            }
        }).dxCheckBox( "instance" )
    
        template.append( instance.sendNotificationCheckBox.element() );
        template.append( $("<p>").append( $("<i>").text( "When checked, and this page is saved, a notification will be sent to all contributors. The notification will include the details of the campaign and any note entered below." ) ));
        template.append( instance.sendNotificationTextArea.element() );
    
    
    }

  
    


    return template;
}


EmailCampaignEditor.prototype.getCRMRecipientsTabData = function() {

    let instance = this;
    let data = {
        targetListId : instance.listSelectBox.option( "value" ),
        targetListContributors : null
    }

    if( instance.sendNotificationCheckBox ) {
        data.notifyContributors = instance.sendNotificationCheckBox.option( "value" );
        data.contributorNotificationText = instance.sendNotificationTextArea.option( "value" );
    }

    let contributors = instance.contributorList.getDataSource().items();
    contributors.forEach( function( c ) {
        if( ! data.targetListContributors ) {
            data.targetListContributors = [];
        }
        data.targetListContributors.push( c.fspro_userId ); 
    })

    let valid = data.targetListId ? true : false;
    if( instance.sendNotificationCheckBox ) {
        valid = valid && ( ! data.notifyContributors || ( data.notifyContributors && data.contributorNotificationText != "" ));
    }

    if( valid ) {
        return data;
    } else {
        instance.gotoTab( "Recipients" );
        return null;
    }

}

EmailCampaignEditor.prototype.showSystemMessage = function( messageType, message ) {

    let displayTime = 2000;
    if( messageType != "info" ) {
        displayTime = 5000;
    }

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

        displayTime : displayTime,
        type : messageType, // warning, or error, or info
        closeOnClick : true,
        hideOnOutsideClick : true,
        message : message,
        onHidden : function( e ) {
            e.component.element().remove();
            e.component.dispose();
        }

    }).appendTo( "body" ).dxToast( "show" );       

}

EmailCampaignEditor.prototype.standardRecipientsTabTemplate = function( data ) {
    let instance = this;

    let template = $("<div>").css( "padding", "10px 10px 10px 10px" );

    instance.groupCheckBoxes = [];

    

    template.append( "<h1>Custom Groups</h1>" );
    template.append( "<p>Select recipients for the Email Campaign by checking the appropriate Custom Groups from the list below:</p>" );

    let groupSections = $("<div>");
    let groupSectionScroll = $("<div>").append( groupSections ).dxScrollView( {
        height : 400
    });
    template.append( groupSectionScroll );


    let campaignRecipientGroupsStore = Fse.Data.newDataSource( { object : 'GTM.emailCampaignRecipientGroups', objectParams : { campaignId : data.campaignId }, keyField : "groupId" }).store();

    campaignRecipientGroupsStore.load().done( function( recipientGroupsUnsorted ) {


        let recipientGroups = DevExpress.data.query( recipientGroupsUnsorted )
                                .sortBy( "categorySort")
                                .thenBy( "category" )
                                .thenBy( "groupName" )
                                .toArray();



        let currentGroupCategoryId = -1;
        let groupGrid = null;

        recipientGroups.forEach( function( rg ) {
    
            if( ! groupGrid || currentGroupCategoryId != rg.categoryId ) {
                groupSections.append( $("<h2>").text( rg.category  ) );
                groupGrid = $("<div>").css(  { "display" : "grid", "gap" : "10px", "grid-template-columns" : "33% 33% 34%", "grid-auto-rows" : "auto" } );
                groupSections.append( groupGrid );
            }

            currentGroupCategoryId = rg.categoryId;

            let cbStyle = { "color" : rg.recipientGroup ? "blue" : "initial" };

            let cb = $("<div>").css( cbStyle ).dxCheckBox( {
                groupId : rg.groupId,
                value : rg.recipientGroup,
                myInitialValue : rg.recipientGroup,
                text : rg.groupName,
                disabled : instance.readOnly,

                onValueChanged : function( e ) {
                    if( e.value ) {
                        e.component.element().css( "color", "blue" );
                    } else {
                        e.component.element().css( "color", "initial" );
                    }

                    if( e.value != e.component.option( "myInitialValue" )){
                        instance.changes.insert( "stdRecipients.groupIds" );
                    }
                }
            }).dxCheckBox( "instance" );

            if( ! data.readOnly ) {
                // add this to the list of checkboxes used to update the campaign
                instance.groupCheckBoxes.push( cb );
            }
            groupGrid.append( cb.element() );

        })


    })

    return template;
}

EmailCampaignEditor.prototype.getStandardRecipientsTabData = function() {
    let instance = this;

    let groupIds = [];
    instance.groupCheckBoxes.forEach( function( cb ) {
        let cbo = cb.option();

        if( cbo.value ) {
            groupIds.push( cbo.groupId );
        }
    } );

    if( groupIds.length ) {
        return { groupIds : groupIds };
    } else {
        instance.gotoTab( "Recipients" );
        return null;
    }

}

EmailCampaignEditor.prototype.designTabTemplate = function( data ) {
    let instance = this;

    let template = $("<div>").css( "padding", "10px 10px 10px 10px" );


    let frameHeight = instance.height - 25;

    instance.designButton = $("<div>").dxButton( {
        icon : "edit",
        text : "Design",
        disabled : instance.readOnly,
        onClick : function( e ) {

            if( instance.changeCount ) {
                instance.alertSaveChanges()
                return;
            }

            let designer = new EmailCampaignDesigner();
            designer.show( { 
                campaignId : data.campaignId, 
                campaignTk : data.campaignTk, 
                onSave : function() {
                    instance.refreshEditor();
                } 
            });

        }
    }).dxButton( "instance" );

    $("<div>").dxToolbar( {
        items : [
            { location : "after",
                template : function() {
                    return $("<div>").text( "Preview below, Click Design to Edit" );
                }
            },
            { location : "after", template : function() { return instance.designButton.element() }}
        ]
    }).appendTo( template );


    let emailMessageViewer = $("<iframe>").css( {  "height" : `${frameHeight}px`, "width" : "100%" } ).attr( {
        src : $("link#PortalDocRootURL").attr( "href") + "/index.cfm?app=GTM.emailManager&operation=getMessageText&campaignId=" + data.campaignId
    })


    template.append( emailMessageViewer );


    return template;
}



EmailCampaignEditor.prototype.hyperlinksTabTemplate = function( data ) {
    let instance = this;

    let emailMessageParsed = $("<div>");
    if( data.emailMessage != "" ) {
        // emailMessageParsed = $.parseHTML( data.emailMessage );
        emailMessageParsed = $(data.emailMessage);
    }



    let template = $("<div>").css( "padding", "10px 10px 10px 10px" )


    template.append( "<h4>Click Activity</h4>")

    template.append( this.createToplineStatsElement( data ) );


   
    let clicksByType = this.createClicksByTypeChart( data ).element();
    let clicksByDay = this.createClicksByDayChart( data ).element();

    let chartsBox = $("<div>").dxBox( {
        direction : "row",
        items : [
            { baseSize : 200, template : function() { 

                return $("<div>")
                        .append( "<h3>Clicks by Type</h3>" )  
                        .append( clicksByType )
                
            }},
            { baseSize : 500, template : function() { 
                return $("<div>")
                    .append(  "<h3>Clicks by Day</h3>" )   
                    .append( clicksByDay )

            }}
        ]
    })    

    template.append( $("<hr>" ));
    template.append( chartsBox );


    instance.hyperlinkGrid = $("<div>").css( "max-height", "500px" ).dxDataGrid( {
        showBorders : true,
        dataSource : Fse.Data.newDataSource( { object : "GTM.emailCampaignHyperlinks", objectParams : { campaignId : data.campaignId } } ),
        editing : {
            allowUpdating : !instance.readOnly && Fse.Portal.appConfiguration.STP.ownerType === "BRO",
            mode : "batch",
            startEditAction : "click"
        },
        scrolling : { mode : "virtual" },
        //height : 500,
        columns : [
            { name : "linkText", caption : "Link", width : "auto",
                calculateCellValue : function( rowData ) {


                    if( ! rowData.hyperlink ) {
                        return null;
                    }

                    let hyperlink = null;
                    
                    if( rowData.formId ) {
                        hyperlink = `AUTOFILL_FORMLINK_${rowData.formId}`;
                    } else {
                        hyperlink = rowData.hyperlink.replace( /&fsetk=\d+$/, "" );
                    }


                    let x = emailMessageParsed.find( `a[href='${hyperlink}']`);
                    if( x.length == 0 ) {
                        x = emailMessageParsed.find( `a[href='${hyperlink}/']`);
                    }
                    if( x.length ) {
                        let img = x.find( "img" );
                        if( img.length ) {
                            return `<img src=${img.attr('src')} style="max-width:100px">`;
                        } else {
                            return x.text();
                        }
                    } else {
                        return null;
                    }
                },
                cellTemplate: function( container, options ) {
                    container.append( options.displayValue );
                }
            },
            { dataField : "hyperlink", allowEditing :false,  caption : "URL", cellTemplate : function( container, options ) {
                    if( options.rowType === "data" ) {
                        $("<a>").attr( { "href" : options.value, "target" : "_blank", "rel" : "noopener noreferrer" } ).text(  options.value ).appendTo( container );
                    }
                  }
            },
            { dataField : "mfr_id", allowEditing : true, caption : "Manufacturer", width : 250,
            cellTemplate : function( container, options ) {
              if ( options.displayValue ) {
                container.append( options.displayValue );
              } else {
                container.append( $("<span>").text( "not applicable" ) );
              }
            },
            visible : Fse.Portal.appConfiguration.STP.ownerType === "BRO",
            lookup : { 
                dataSource: [],
                displayExpr: "mfr_name",
                valueExpr : "mfr_id"
              }
        },
            { dataField : "clickCount", allowEditing : false, caption: "Clicks", width : 80, dataType : "number", format : { type : "fixedPoint", precision : 0 } }
        ],
        onToolbarPreparing : function( e ) {

            // remove any editing icons
            if( e.toolbarOptions.items ) {

                let newItems = [];
                e.toolbarOptions.items.forEach( function( tbi ) {
                    if( !( tbi.name === "saveButton" || tbi.name === "revertButton" )) {
                        newItems.push( tbi );
                    }
                })
                e.toolbarOptions.items = newItems;
            }
        },
        onOptionChanged : function( e ) {
            if( e.fullName === "editing.changes" ) {
                instance.changes.insert( "hyperlinks.mfr_id" );
            }
        }
    }).dxDataGrid( "instance" );


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

        let manufacturerDataSource = Fse.Data.newDataSource( { paginate : false, object : "BPL.principals", keyField : "mfr_id", objectParams : { activeOnly : false, limitVisibility : false } });
        manufacturerDataSource.load().done( function( mfrs ) {

            let mfrStore = new DevExpress.data.ArrayStore( {
                data : mfrs,
                key : "mfr_id"
            })

            instance.hyperlinkGrid.columnOption( "mfr_id", "lookup", { 
                allowClearing : true,
                dataSource : mfrStore,
                displayExpr : "mfr_name",
                valueExpr : "mfr_id"
            })

        })
    }


    template.append( "<h3>Click Details</h3>" );
    template.append( instance.hyperlinkGrid.element() );


    return template;
}

EmailCampaignEditor.prototype.getHyperlinksTabData = function() {

    let instance = this;

    let changes = instance.hyperlinkGrid.option( "editing.changes" );

    if( changes.length == 0 ) {
        return null;
    }

    let data = [];
    changes.forEach( function( c ) {
        data.push( {
            hyperlink : c.key.hyperlink,
            mfr_id : c.data.mfr_id
        })
    })

    return { hyperlinks : data };  

}

EmailCampaignEditor.prototype.testingTabTemplate = function( data ) {
    let instance = this;

    let template = $("<div>").css( "padding", "10px 10px 10px 10px" )


    let items = [
        { template : function() {
                    return $("<p>").append( "Enter a valid email address in the space provided to send a test of this Email Campaign definition. ")
                }
        },{
                dataField : "emailAddress", label : { text: "Email Address" }, isRequired : "true", editorOptions : { mode : "email",  value : Fse.Portal.appConfiguration.STP.userEmailAddress }
               
        }
    ]


    let sourceItems = [ {
                template : function() {
                    return $("<p>").append( "The following fields are optional and can be used to simulate the insertion of member recipient information in the test email." );
                }
            }, {
                dataField : "AUTOFILL_FIRSTNAME", label : { text : "First Name" }, editorOptions : { placeholder : "AUTOFILL_FIRSTNAME", hint : "AUTOFILL_FIRSTNAME" }
            }, {
                dataField : "AUTOFILL_LASTNAME", label : { text : "Last Name" }, editorOptions : { placeholder : "AUTOFILL_LASTNAME", hint : "AUTOFILL_LASTNAME" }
            }, {
                dataField : "AUTOFILL_TITLE", label : { text : "Title" }, editorOptions : { placeholder : "AUTOFILL_TITLE", hint : "AUTOFILL_TITLE" }
            }, {
                dataField : "AUTOFILL_EMAIL", label : { text : "Email" }, editorType : "dxTextBox", editorOptions : { mode : "email", placeholder : "AUTOFILL_EMAIL", hint : "AUTOFILL_EMAIL" }
            }, {
                dataField : "AUTOFILL_COMPANY", label : { text : "Company" }, editorOptions : { placeholder : "AUTOFILL_COMPANY", hint : "AUTOFILL_COMPANY" }
            }, {
                dataField : "AUTOFILL_COMMENTS", label : { text : "Comments" }, editorOptions : { placeholder : "AUTOFILL_COMMENTS", hint : "AUTOFILL_COMMENTS" }
            }            
        ];

    if( data.useInternalContact ) {
        sourceItems.push( {
                dataField : "AUTOFILL_SENDERFIRSTNAME", label : { text : "Sender First Name" }, editorOptions : { placeholder : "AUTOFILL_SENDERFIRSTNAME", hint : "AUTOFILL_SENDERFIRSTNAME" }
            },{
                dataField : "AUTOFILL_SENDERLASTNAME", label : { text : "Sender Last Name" }, editorOptions : { placeholder : "AUTOFILL_SENDERLASTNAME", hint : "AUTOFILL_SENDERLASTNAME" }
            },{
                dataField : "AUTOFILL_SENDERFULLNAME", label : { text : "Sender FullLast Name" }, editorOptions : { placeholder : "AUTOFILL_SENDERFULLNAME", hint : "AUTOFILL_SENDERFULLNAME" }
            },{
                dataField : "AUTOFILL_SENDERTITLE", label : { text : "Sender Title" }, editorOptions : { placeholder : "AUTOFILL_SENDERTITLE", hint : "AUTOFILL_SENDERTITLE" }
            },{
                dataField : "AUTOFILL_SENDEREMAIL", label : { text : "Sender Email" }, editorType : "dxTextBox", editorOptions : { mode : "email", placeholder : "AUTOFILL_SENDEREMAIL", hint : "AUTOFILL_SENDEREMAIL" }
            },{
                dataField : "AUTOFILL_SENDERPHONE", label : { text : "Sender Phone" }, editorOptions : { placeholder : "AUTOFILL_SENDERPHONE", hint : "AUTOFILL_SENDERPHONE" }
            }
        )
    }

    sourceItems.push({

            dataField : "AUTOFILL_CUSTOM1", label : { text : "Custom Field 1" }, editorOptions : { placeholder : "AUTOFILL_CUSTOM1", hint : "AUTOFILL_CUSTOM1" }
        }, {
            dataField : "AUTOFILL_CUSTOM2", label : { text : "Custom Field 2" }, editorOptions : { placeholder : "AUTOFILL_CUSTOM2", hint : "AUTOFILL_CUSTOM2" }
        }, {
            dataField : "AUTOFILL_CUSTOM3", label : { text : "Custom Field 3" }, editorOptions : { placeholder : "AUTOFILL_CUSTOM3", hint : "AUTOFILL_CUSTOM3" }
        }, {
            dataField : "AUTOFILL_CUSTOM4", label : { text : "Custom Field 4" }, editorOptions : { placeholder : "AUTOFILL_CUSTOM4", hint : "AUTOFILL_CUSTOM4" }
        }, {
            dataField : "AUTOFILL_CUSTOM5", label : { text : "Custom Field 5" }, editorOptions : { placeholder : "AUTOFILL_CUSTOM5", hint : "AUTOFILL_CUSTOM5" }
        }, {
            dataField : "AUTOFILL_CUSTOM6", label : { text : "Custom Field 6" }, editorOptions : { placeholder : "AUTOFILL_CUSTOM6", hint : "AUTOFILL_CUSTOM6" }
        }
    )

    sourceItems.push(
        {
            dataField : "AUTOFILL_EXTERNALRESOURCELINK1", label : { text : "External Resource Link 1" }, editorOptions : { placeholder : "AUTOFILL_EXTERNALRESOURCELINK1", hint : "AUTOFILL_EXTERNALRESOURCELINK1" }
        }, 
        {
            dataField : "AUTOFILL_EXTERNALRESOURCELINK2", label : { text : "External Resource Link 2" }, editorOptions : { placeholder : "AUTOFILL_EXTERNALRESOURCELINK2", hint : "AUTOFILL_EXTERNALRESOURCELINK2" }
        }, 
        {
            dataField : "AUTOFILL_EXTERNALRESOURCELINK3", label : { text : "External Resource Link 3" }, editorOptions : { placeholder : "AUTOFILL_EXTERNALRESOURCELINK3", hint : "AUTOFILL_EXTERNALRESOURCELINK3" }
        }
    );

    let autoFillItems = [];
    sourceItems.forEach( function( item ) {

        if( item.dataField && item.dataField.split( "_" )[0] == "AUTOFILL" ){
            // look for data field in messageText, if found add it, otherwise skip
            let regEx = new RegExp( item.dataField , "i" ); // remove + '*' from the pattern on 2/26/2024
            if( regEx.test( data.emailMessage ) ) {
                item.isRequired = true;
                autoFillItems.push( item )
            }
        }
        
    })

    if( autoFillItems.length ) {
        items.push( {
            template : function() {
                return $("<p>").append( "The following AUTOFILL fields are required for this campaign.  Please provide values for each in order to simulate campaign execution." );
            }
        })
        autoFillItems.forEach( function( item ) {
            items.push( item );
        })
    } else {
        items.push( {
            template : function() {
                return $("<p>").append( "This email campaign does not have any AUTOFILL fields." );
            }
        })
    }

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

        items : items

    }).dxForm( "instance" );


    instance.sendTestEmailButton = $("<div>").dxButton( {
        text : "Send Test Email",
        // disabled : instance.changeCount,
        type : "success",
        onClick : function( be ){

            if( instance.changeCount ) {
                instance.alertSaveChanges()
                return;
            }

            if( instance.testForm.validate().isValid ) {
                instance.sendTestEmail();
            }
        }
    }).dxButton( "instance" );

    let toolbar = $("<div>").dxToolbar( {
        items : [
            { location : "after", template : function() { return instance.sendTestEmailButton.element() }}
            
        ]
    });

    template.append( "<h4>Email Test</h4>" );

    let sv = $("<div>").append( instance.testForm.element() ).dxScrollView( { height : instance.height } );

    template.append( sv );
    template.append( toolbar );

    return template;

}

EmailCampaignEditor.prototype.alertSaveChanges = function() {
    alert( "You must save changes first." );
}

EmailCampaignEditor.prototype.summaryTabTemplate = function( data ) {
    let instance = this;

    let template = $("<div>").css( "padding", "10px 10px 10px 10px" );



    let synopsis = $("<div>").css( { "display" : "grid", "gap" : "10px", "grid-template-columns" : "126px auto", "grid-auto-rows" : "auto" } )

    synopsis.append( $("<div>").text( "Campaign Name:" ));
    synopsis.append( $("<div>").text( data.campaignName ));
    synopsis.append( $("<div>").text( "Preview Message:" ));

    let previewLink = $("<a>").text( "preview message" )
        .css( { "text-decoration" : "underline", "cursor" : "pointer"} )
        .on( "click", function() {
            instance.gotoTab( "Email Design" );
        });
    synopsis.append( $("<div>").append( previewLink ));

    synopsis.append( $("<div>").text( "To:" ));
    let toValueElement = $("<div>")
        .append( $("<a>").attr( "href", "#recipientList" ).text( "view recipients" ));
    synopsis.append( toValueElement );

    
    synopsis.append( $("<div>").text( "From:" ));
    let fromValueText = `${data.emailFrom}`;
    if( data.emailFromDisplay !== "" ) {
        fromValueText = `${data.emailFromDisplay} <${data.emailFrom}>`;
    }
    let fromValueElement = $("<div>" );
    fromValueElement.append( $("<span>").text( fromValueText ) );
    if( data.useInternalContact ) {
        fromValueElement.append( $("<br>") ).append( $("<span>").text( "(or internally assigned contact if applicable)" ))
    }
    synopsis.append( fromValueElement );

    synopsis.append( $("<div>").text( "Subject:" ));
    synopsis.append( $("<div>").text( data.emailSubject ));

    synopsis.append( $("<div>").text( "Unsubscribe Link:" ));
  
    if( data.containsUnsubscribe ) {
        synopsis.append( $("<div>").text( 'This email campaign contains an unsubscribe link.' ));
    } else {
        synopsis.append( $("<div>").text( 'This email campaign does not contain an unsubscribe link.  You can add one from the "Special Links" option in the editor.' ));
    }

    template.append( "<h4>Details</h4>" );
    template.append( synopsis );

    template.append( "<h4>Status</h4>" );

    let status = $("<div>").css( { "display" : "grid", "gap" : "10px", "grid-template-columns" : "200px auto", "grid-auto-rows" : "auto" } )



    status.append( "<div>Execute Campaign</div>" );


   

    let alreadyRun = false;
    if( data.runDate ) {

        let runDate = new Date( Date.parse( data.runDate ) );
        let now = new Date();

        alreadyRun = (  now.getTime() > runDate.getTime() );
    }


    let scheduleFormItems = [];
    let scheduleFormData = null;

    let scheduleForm = null;
    let saveScheduleButton = null;

    if( ! alreadyRun ) {

        scheduleFormData = {
            campaignId : data.campaignId,
            campaignName : data.campaignName,
            lastUpdatedDate : data.lastUpdatedDate,
            scheduled : data.runDate ? true : false,
            runDate : data.runDate
        };

        scheduleFormItems.push( {
                dataField : "scheduled", label : { text : "Schedule Execution" }, editorType : "dxCheckBox"
            },{ 
                dataField : "runDate", isRequired : true, label : { text : "Campaign Run Date" },
                editorType : "dxDateBox", editorOptions : {
                    width : 175,
                    disabled : true,
                    type : "datetime",  showClearButton  : true, openOnFieldClick : true,
                }
            },
            { 
                label : { template : function() { return $("<div>") } },
                template : function( options, itemElement ) {

                    saveScheduleButton = $("<div>").dxButton( {
                        width : 175,
                        text : "Save Schedule",
                        type : "default",
                        disabled : scheduleFormData.scheduled ? false : true,
                        onClick : function( e ) {


                            if( instance.changeCount ) {
                                instance.alertSaveChanges()
                                return;
                            }

                            let d = $.Deferred();


                            if( data.campaignType == "CRM" ) {

                                if( ! data.targetListId ) {
                                    alert( "Please set a Target List or Group via the Recipients tab" );
                                   
                                } 

                                if( ! data.containsUnsubscribe ) {
                                    alert( "To continue, please add an unsubscribe link to your email" );
                                   
                                } 

                                if(! data.targetListId ||  ! data.containsUnsubscribe)
                                {
                                    return;
                                }

                                d.resolve();
    
                            } else {

                                let campaignRecipientGroupsDataStore = Fse.Data.newDataSource( { object : 'GTM.emailCampaignRecipientGroups', paginate : false, objectParams : { campaignId : data.campaignId }, keyField : "groupId" });

                                campaignRecipientGroupsDataStore.load().done( function( groups ) {

                                    let okayToSchedule = false;

                                    groups.forEach( function( g ) {
                                        if( g.recipientGroup ) {
                                            okayToSchedule = true;
                                        }
                                    })
    
                                    if( okayToSchedule ) {
                                        d.resolve();
                                    } else {
                                        alert( "Please set a Target List or Group via the Recipients tab" );
                                    }
    
                                })
                           
                            }



                            d.done( function() { 
                                let vr = scheduleForm.validate();
                                if( vr.isValid ) {
    
                                    let dataToSend = scheduleForm.option( "formData" );
                                    Fse.Ajax.performAction( {
                                        object : "GTM.saveEmailCampaignSchedule", 
                                        data : dataToSend,
                                        name : "campaign"
                                    }).done( function( result ) {
                
                                        Fse.UI.toast( `Schedule Updated`, "success", 1000 );
                                        instance.refreshEditor();
                            
                                    });
                                }
                            })
                        }
                    }).appendTo( itemElement ).dxButton( "instance" );

                }
            }
        );
    } else {

        scheduleFormItems.push( {
            label : { text : "Execute Campaign" },
            template : function( option, itemElement ){
                let runDate = new Date( Date.parse( data.runDate ) );
                let formattedRunDate = DevExpress.localization.formatDate( runDate, "longDateLongTime" );
                itemElement.append( $("<div>").text( `Executed on: "${formattedRunDate}"` ));
                }
            }, {
                label : { text : "Campaign Run Date" },
                template : function( option, itemElement ){
                    let runDate = new Date( Date.parse( data.runDate ) );
                    let formattedRunDate = DevExpress.localization.formatDate( runDate, "longDateLongTime" );
                    itemElement.append( $("<div>").text( formattedRunDate ));
              }
            }
        )



    }

    scheduleFormItems.push ( {
        label : { text : "Status" },
        template : function( options, itemElement ) {

            if( data.eai_batchId > 0 ) {

                let batchInfoParams = {
                    bId : data.eai_batchId,
                    bTk : data.eai_batchTk
                }
        
                let batchInfoURL = Fse.Util.updateURL2( $("link#PortalDocRootURL").attr( "href" ) + "/batchInfo.cfm", batchInfoParams );


                let batchStatus = data.batchStatus;

                let statusMessage = data.statusLong;
                let refreshStatus = true;

                if( batchStatus ) {

                    batchStatus = JSON.parse( batchStatus );
                    if( batchStatus.status == "ERROR" ) {
                        statusMessage = batchStatus.message;
                        refreshStatus = false;
                    }
                }
        
                let batchInfoElement = $("<a>").attr( { "target" : "_blank", "href" : batchInfoURL, "rel" : "noopener noreferrer" } ).append( statusMessage );
        
                let batchStatusElement = $("<div>");
        
                itemElement.append( batchStatusElement.append( batchInfoElement ));
        
                if( ( data.statusCd === 'PEN' || data.statusCd === 'RUN' ) && refreshStatus ) {
        
                    let refreshCount = 0;
        
                    if( instance.intervalId ) {
                        window.clearInterval( instance.intervalId );
                        instance.intervalId = 0;
                    }
        
                    let refreshStatus = function( refreshData ) {
        
                        if( refreshData.length ) {
                            refreshData = refreshData[0];
                        }
                        refreshCount++;
        
                        let refreshedStatusLong = `${refreshData.statusLong}${'.'.repeat( refreshCount )}`;
        
                        batchStatusElement
                            .empty()
                            .append( $("<a>").attr( { "target" : "_blank", "href" : batchInfoURL, "rel" : "noopener noreferrer" } ).append( refreshedStatusLong ) );
        
                        if( refreshData.statusCd !== 'PEN' && refreshData.statusCd !== 'RUN' ) {
                            // stop refreshing
                            window.clearInterval( instance.intervalId );
                            instance.intervalId = 0;
                        }
        
                    }
        
                    instance.intervalId = window.setInterval( function() {
                        instance.getDataForCampaign( data.campaignId ).done( refreshStatus )
                    }, 60000 );
        
                }

            } else {
                itemElement.append( data.statusLong ) 
            }
        }

    })

    if( ! alreadyRun ) {
        scheduleFormItems.push( {
            label : { template : function() {

                return $("<div>");

            }},
            template : function( options, itemElement ) {

                instance.executeNowButton = $("<div>").dxButton( {
                    width : 175,
                    text : "Execute Now",
                    type : "success",
                    onClick : function( e ) {

                        if( instance.changeCount ) {
                            instance.alertSaveChanges()
                            return;
                        }

                        let d = $.Deferred();


                        if( data.campaignType == "CRM" ) {

                            if( ! data.targetListId ) {
                                alert( "Please set a Target List or Group via the Recipients tab" );
                               
                            } 

                            if( ! data.containsUnsubscribe ) {
                                alert( "To continue, please add an unsubscribe link to your email" );
                               
                            } 

                            if(! data.targetListId ||  ! data.containsUnsubscribe)
                            {
                                return;
                            }

                            d.resolve();

                        } else {

                            let campaignRecipientGroupsDataStore = Fse.Data.newDataSource( { object : 'GTM.emailCampaignRecipientGroups', paginate : false, objectParams : { campaignId : data.campaignId }, keyField : "groupId" });

                            campaignRecipientGroupsDataStore.load().done( function( groups ) {

                                let okayToExecute = false;

                                groups.forEach( function( g ) {
                                    if( g.recipientGroup ) {
                                        okayToExecute = true;
                                    }
                                })

                                if( okayToExecute ) {
                                    d.resolve();
                                } else {
                                    alert( "Please set a Target List or Group via the Recipients tab" );
                                }

                            })
                       
                        }

                        d.done( function() {

                            if( confirm( `Execute \"${data.campaignName}\" now?` )) {
                                instance.executeCampaign();
                            }
    
                        })
            
                    }
                }).dxButton( "instance" );

                itemElement.append( instance.executeNowButton.element() );

            }

        })
    }

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

        items : scheduleFormItems,
        onFieldDataChanged : function( e ) {
            if( e.dataField == "scheduled" ) {

                let runDateEditor = e.component.getEditor( "runDate" );

                let runDateOptions = {
                    disabled : true
                }

                if( e.value ) {
                    runDateOptions.disabled = false;
                }

                runDateEditor.option( runDateOptions );

                if( e.value && saveScheduleButton ) {
                    saveScheduleButton.option( "disabled", false );
                }
            }
        }

    }).dxForm( "instance" );

    if( scheduleFormData ) {
        scheduleForm.updateData( scheduleFormData );
    }

    template.append( scheduleForm.element() );



    template.append( "<h4>Click Activity</h4>" );

    template.append( $("<hr>") );
    template.append( this.createToplineStatsElement( data ) );


    let clicksByType = this.createClicksByTypeChart( data ).element();
    let clicksByDay = this.createClicksByDayChart( data ).element();

    let chartsBox = $("<div>").dxBox( {
        direction : "row",
        items : [
            { baseSize : 200, template : function() { 

                return $("<div>")
                        .append( "<h3>Clicks by Type</h3>" )  
                        .append( clicksByType )
                
            }},
            { baseSize : 500, template : function() { 
                return $("<div>")
                    .append( "<h3>Clicks by Day</h3>" )  
                    .append( clicksByDay )

            }}
        ]
    })    

    template.append( chartsBox );


    let hyperlinkGrid = $("<div>").dxDataGrid( {
        showBorders : true,
        dataSource : Fse.Data.newDataSource( { object : "GTM.emailCampaignHyperlinks", filter : [ "formLink", "=", "N" ], objectParams : { campaignId : data.campaignId } } ),
        columns : [
            { dataField : "hyperlink", caption : "Hyperlink", cellTemplate : function( container, options ) {

                if( options.rowType === "data" ) {
                    $("<a>").attr( { "href" : options.value, "target" : "_blank", "rel" : "noopener noreferrer" } ).text( options.value ).appendTo( container );
                }
            } },
            { dataField : "clickCount", caption : "Clicks", width : "80", dataType : "number", format : { type : "fixedPoint", precision : 0 } }
        ],
        masterDetail : {
            enabled : true,
            template : function( container, options ) {

                let detailGrid = $("<div>").dxDataGrid( {
                    height : 200,
                    dataSource : Fse.Data.newDataSource( { object : "GTM.emailCampaignHyperlinkDetails", objectParams : { campaignId : data.campaignId, hyperlink : options.data.hyperlink  } } ),
                    columns : [
                        { dataField : "fullName" },
                        { dataField : "organization" },
                        { dataField : "clicks", type : "number", format : { type : "fixedPoint", precision : 0 } }
                    ],
                    scrolling : { mode : "virtual" },
                    summary : {
                        totalItems : [
                            {  column : "clicks", summaryType : "sum", valueFormat : { type : "fixedPoint", precision : 0 }, displayFormat : "Total Clicks: {0}" },
                            {  column : "fullName", summaryType : "count", valueFormat : { type : "fixedPoint", precision: 0 }, displayFormat : "Recipients: {0}" }
                        ]
                    }
                })

                container.append( detailGrid ).css( "padding", "5px 3px 5px 30px" );

                // return detailGrid;
            }
        }
    })

   

    template.append( "<h3>Click Details</h3>" );
    template.append( hyperlinkGrid );


    //tse-317
    template.append( "<h4>Form Activity</h4>" );
    let formActivity = $("<div>").css( { "display" : "grid", "gap" : "10px", "grid-template-columns" : "200px auto", "grid-auto-rows" : "auto" } )
    formActivity.append( "<div>Execute Campaign</div>" );

    template.append( $("<hr>") );
    //template.append( this.createToplineStatsElement( data ) );

    let formlinkGrid = $("<div>").dxDataGrid( {
        showBorders : true,
        dataSource : Fse.Data.newDataSource( { object : "GTM.emailCampaignHyperlinks", filter : [ "formLink", "=", "Y" ],   objectParams : { campaignId : data.campaignId } } ),
        columns : [
            { dataField : "hyperlink", caption : "Form Link", cellTemplate : function( container, options ) {

                if( options.rowType === "data" ) {
                    $("<a>").attr( { "href" : options.value, "target" : "_blank", "rel" : "noopener noreferrer" } ).text( options.value ).appendTo( container );
                }
            } },
            { dataField : "formCount", caption : "Count", width : "50", dataType : "number", format : { type : "fixedPoint", precision : 0 } },
            { name : "recpientCount", caption : "Recipients", calculateCellValue : function() {
                return data.recipientCount;
            }},
            { dataField : "clickCount", caption : "Clicks", width : "150", dataType : "number", format : { type : "fixedPoint", precision : 0 } },
            { dataField : "responseCount", caption : "Responses", width : "150", dataType : "number", format : { type : "fixedPoint", precision : 0 } },
            { name : "responseRate", caption : "Response Rate", width : "150", dataType : "number", format : "percent",
                calculateCellValue : function( rowData ) { return rowData.responseCount / data.recipientCount; }
            }
        ],
        /**/
        masterDetail : {
            enabled : true,
            template : function( container, options ) {

                let detailGrid = $("<div>").dxDataGrid( {
                    height : 200,
                    dataSource : Fse.Data.newDataSource( { object : "GTM.emailCampaignHyperlinkDetails", objectParams : { campaignId : data.campaignId, hyperlink : options.data.hyperlink  } } ),
                    columns : [
                        { dataField : "fullName" },
                        { dataField : "organization" },
                        { dataField : "clicks", type : "number", width : 110, format : { type : "fixedPoint", precision : 0 } },
                        { name : "response", caption : "Response", width : 80, type : "number", format : { type : "fixedPoint", precision : 0 }, 
                            calculateCellValue : function( rowData ) {
                                return rowData.submissionId > 0 ? 'Y' : 'N'
                            },
                            cellTemplate : function( container, options) {
                                if( options.data.submissionId > 0 ) {
                                    let aTag = $("<a>").text( "Y" ).attr( { title : "view response" } );
                                    container.append( aTag );

                                    aTag.on( "click", function( jqe ) {
                                        WorkflowFormSubmissions.viewDetails( { formId : options.data.formId, submissionId : options.data.submissionId } );
                                    })
                                } else {
                                    container.append( "N" );
                                }
                            }
                        }
                    ],
                    scrolling : { mode : "virtual" },
                    summary : {
                        totalItems : [
                            {  column : "clicks", summaryType : "sum", valueFormat : { type : "fixedPoint", precision : 0 }, displayFormat : "Total Clicks: {0}" },
                            {  column : "fullName", summaryType : "count", valueFormat : { type : "fixedPoint", precision: 0 }, displayFormat : "Recipients: {0}" }
                        ]
                    }
                })


                container.append( detailGrid ).css( "padding", "5px 3px 5px 30px" );

            }
        }
            
    })

    template.append( "<h3>Form Click Details</h3>" );
    template.append( formlinkGrid );
     //end

    let recipientsDataGridElement = this.createRecipientsDataGrid( data ).element();

    template.append( $("<a>").attr( "name", "recipientList" ) ); // this is an anchor for the link at the top

    if( data.statusCd == "PEN" ) {
        template.append( $("<h4>Tentative Recipients</h4>"));
    } else {
        template.append( $("<h4>Recipients</h4>"));
    }
    
    template.append( recipientsDataGridElement );

    template.append( $("<h4>History</h4>"));

    template.append( ( new LibraryActivityTrack( { recordKey : data.campaignId, recordTableCd : 'EMLC' } )).element() );

    return template;
}


EmailCampaignEditor.prototype.detailsTabTemplate = function( data ) {

    let instance = this;

    let template = $("<div>").css( "padding", "10px 10px 10px 10px" );

    let items = [];


    if( data.gtmCampaignId ) {
        items.push( 

            { 
                // campaign definition fields
                template : function() { return $("<h1>").append( "Campaign Definition" ) } 
            }
        );

        items.push( 
            { 
                dataField : "gtmCampaignName", editorOptions : { readOnly : true }, label : { text : "Name" }
            }
        );

        items.push( 

            { 
                dataField : "gtmCampaignDescription", editorOptions : { readOnly : true }, label : { text : "Description" }
            },

            { 
                dataField : "gtmCampaignManagerDisplay", editorOptions : { readOnly : true }, label : { text : "Campaign Manager" }
            },
            { 
                dataField : "gtmSalesManagerDisplay", editorOptions : { readOnly : true }, label : { text : "Sales Manager" }
            },
            { 
                dataField : "gtmLeadType", editorOptions : { readOnly : true }, label : { text : "Lead Type" }
            },
            { 
                dataField : "gtmTargetPartnerType", label : { text : "Target" },
                editorType : "dxSelectBox",
                editorOptions : { 
                    readOnly : true,
                    dataSource : { store : 
                        { type : "array", 
                            key : "partnerType", 
                            data : [
                                { partnerType : "OPR", partnerTypeDisplay : "Operators" },
                                { partnerType : "CDR", partnerTypeDisplay : "Distributors" }
                            ]
                        } 
                    },
                    valueExpr : "partnerType",
                    displayExpr : "partnerTypeDisplay"
                } 
            },
            { 
                dataField : "gtmTerritoryName", editorOptions : { readOnly : true }, label : { text : "Territory" }
            }

        )
    };

    items.push( 
        { 
            // email definition fields
            template : function() { return $("<h4>").append( "Email Definition" ) } 
        },
        {
            dataField : "campaignName", isRequired : true, label : { text : "Email Name" }, editorOptions : { maxLength : 75 }
        }
    );
    
    /* moved to summary tab
    if( data.campaignId ) {
        items.push( {
                dataField : "scheduled", label : { text : "Schedule" }, editorType : "dxCheckBox"
            },{ 
                dataField : "runDate", label : { text : "Run On" }, disabled : ! data.scheduled,
                editorType : "dxDateBox", editorOptions : {
                    type : "datetime",  showClearButton  : true, openOnFieldClick : true,
                }
            }
        );
    }
    */
    
    

    let emailFromField =  {
        dataField : "emailFrom", isRequired : true, label : { text : "Email From" }, editorOptions : { placeholder : "i.e. JDoe@domain.com", maxLength : 50 },
        validationRules : [ { type : "required", message : "Email From is required" }, { type : "email", message : "Invalid email format" } ]
    };
        
    
     if( data.campaignType === "CRM" ) {

       /* emailFromField.validationRules.push( {
            type : "async",
            message : "Must be an email address of an active user",
            validationCallback : function( params ) {
                if( ! instance.fsproMembersDataStore ) {
                    instance.fsproMembersDataStore = Fse.Data.newDataSource( { object : "FSPRO.members", keyField : "email", objectParams : { staffMembersOnly : true, loginEnabledOnly : true } }).store();
                }
                let d = $.Deferred();

                if( ! params.value ) {
                    d.reject( false );
                } else {
                    instance.fsproMembersDataStore.byKey( params.value )
                    .done( function( data ) {
                        if( data  ) { // && data.length === 1
                            d.resolve( true );
                        } else {
                            d.reject( false );
                        }

                    })
                    .fail( function( ) {
                        d.reject( false );
                    })

                }

                return d;
            }

        })*/

        /* this didn't work very well because the existing data was already invalid
        emailFromField.editorType = "dxLookup";
        emailFromField.editorOptions = {
            placeholder : "staff directory email address",
            dataSource: Fse.Data.newDataSource( { object : "FSPRO.members", keyField : "email", objectParams : { staffMembersOnly : false, loginEnabledOnly : false } }),
              dropDownOptions: {
                hideOnOutsideClick: true,
                showTitle: false,
              },
              displayExpr: "email",
              valueExpr : "email"
        }
        */

     }
     items.push( emailFromField );
        
     items.push( {
            dataField : "emailFromDisplay", isRequired : false, label : { text : "Email From Name" }, editorOptions : { placeholder : "i.e. John Doe", maxLength : 75 }
        },{
            dataField : "emailSubject", isRequired : true, label : { text : "Email Subject" }, editorOptions : { maxLength : 100 }
        });

    if( data.campaignType === "CRM" ) {
        items.push( {
            dataField : "useInternalContact", label : { text : "Use Relationship Manager" }, editorType : "dxCheckBox",
            helpText : "Select to have email come from the account's assigned relationship manager. If a relationship manager is not assigned, the email will default to the value entered in the \"Email From\" field."
        });
    }
    
   



    let trackChanges = false;
    instance.detailsForm = $("<div>").dxForm( {
        items : items,
        readOnly : instance.readOnly,
        trackChanges : false,
        onFieldDataChanged : function( e ) {

            /*
            if( e.dataField == "scheduled" ) {

                let itemOptions = e.component.itemOption( "runDate" );

                itemOptions.disabled = ! e.value;
                itemOptions.isRequired = ! itemOptions.disabled;


                e.component.updateData( { runDate : null } )
                e.component.itemOption(  "runDate", itemOptions );

            }
            */

            if( trackChanges ) { 
                instance.changes.insert( `details.${e.dataField}` );
            }

        }
    }).dxForm( "instance" );

    let fieldsToGet = [ "campaignName",  "emailFrom", "emailFromDisplay", "emailSubject", "useInternalContact", "includeUnsubscribe" ]; // removed "scheduled", "runDate",

    if( data.gtmCampaignId ) {

        fieldsToGet.push( "gtmCampaignId", "gtmCampaignName", "gtmCampaignDescription", "gtmCampaignManagerDisplay", "gtmSalesManagerDisplay", "gtmLeadType", "gtmTargetPartnerType", "gtmTerritoryName" );

    }

    let dataToUse = instance.getData( data, fieldsToGet )
    console.log( "DataToUse");
    console.log( dataToUse );

    instance.detailsForm.updateData( dataToUse );

    trackChanges = true;


    let sv = $("<div>").append( instance.detailsForm.element() ).dxScrollView( { height : instance.height } );

    template.append( sv );


    if( data.campaignId ) {


        if( data.spoofingResolved ) {

            $("<p>").css( { "font-style" : "italic" } )
                .append( "Note: Email From address will be " )
                .append( $("<span>" ).append( data.resolvedEmailFrom ).css( { color : "blue" } ) )
                .append( " and Email Subject will be " )
                .append(  $("<span>").append( data.resolvedEmailSubject ).css( { color : "blue" } ) )
                .appendTo( template );
        }

        let unsubscribeNote = $("<p>")

        if( data.containsUnsubscribe ) {
            unsubscribeNote.text( "This email campaign contains an unsubscribe link." );
        } else {
            unsubscribeNote.text( "This email campaign does not contain an unsubscribe link.  You can add one from the \"Special Links\" option in the editor." );
            unsubscribeNote.css( { color : "#FFB600" } );
        }

        template.append( unsubscribeNote );

        if( data.campaignType === "CRM" && ! data.gtmCampaignId ) {

            let leadWarning = $("<p>")
            leadWarning.text( "The responses to this email will not be routed to your lead dashboard.  To route to your lead dashboard, please generate this email via the Campaigns tab." );
            leadWarning.css( { color : "#FFB600" } );

            template.append( leadWarning );

        }

    }


    return template;

}

EmailCampaignEditor.prototype.getDetailsTabData = function() {
    let instance = this;

    let d = $.Deferred();


    let validationResult = instance.detailsForm.validate();

    if( validationResult.status === "pending" ) {
        validationResult.complete.then( function( r ) {
            if( r.status === "valid" ) {
                d.resolve( instance.detailsForm.option( "formData" ) );
            } else {
                d.resolve( null );
            }
        })
    } else {
        if( validationResult.isValid ) {
            d.resolve( instance.detailsForm.option( "formData" ) );
        } else {
            d.resolve( null );
        }
    }

    return d;


}

EmailCampaignEditor.prototype.defaultsTabTemplate = function( data ) {

    let instance = this;

    let template = $("<div>").css( "padding", "10px 10px 10px 10px" );

    let items = [];
    items.push( {
            dataField : "message1Default", label : { text : "Message 1 Default" }, editorType : "dxTextArea", editorOptions : { height: "5em", maxLength : 1000 }
        },{
            dataField : "message2Default", label : { text : "Message 2 Default" }, editorType : "dxTextArea", editorOptions : { height : "5em", maxLength : 1000 } 
        }
    )


    let trackChanges = true;
    instance.defaultsForm = $("<div>").dxForm( {
        formData : instance.getData( data, [ "message1Default", "message2Default" ] ),
        items : items,
        readOnly : instance.readOnly,
        onFieldDataChanged : function( e ) {
            if( trackChanges ) {
                instance.changes.insert( `defaults.${e.dataField}` );
            }
        }
    }).dxForm( "instance" );


    

    let sv = $("<div>").append( instance.defaultsForm.element() ).dxScrollView( { height : instance.height } );

    template.append( "<h1>Message Defaults</h1>" );
    template.append( sv );
    

    return template;        



}

EmailCampaignEditor.prototype.getDefaultsTabData = function() {
    let instance = this;
    if( instance.defaultsForm.validate().isValid ) {
        return instance.defaultsForm.option( "formData" );
    } else {
        instance.gotoTab( "Defaults" );
        return null;
    }
}

EmailCampaignEditor.prototype.getData = function( source, fieldsToGet ) {

    let copyCampaignData = $.extend( true, {}, source );

    let returnData = {};
    fieldsToGet.forEach( function( f ) {
        returnData[f] = copyCampaignData[f];
    })

    return returnData;


}

EmailCampaignEditor.prototype.executeCampaign = function() {

    let instance = this;
    let campaignData  = instance.campaignData;

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

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

        instance.refreshEditor();


    })
    .fail( function() {
        instance.refreshEditor();
        instance.showSystemMessage( "error", "An Error Occurred. The operation may not have been successful.  Please review and try again." );
    })


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


EmailCampaignEditor.prototype.sendTestEmail = function() {

    let instance = this;

    let data = $.extend( true, {}, instance.testForm.option( "formData" ));
    data.campaignId = instance.campaignData.campaignId;


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

        let toastType = "info";
        let toastMessage = "The test email has been sent.";

        if( ! returnData.success ) {

            toastType = "error";
            toastMessage = "Unable to send the test email.";

        } 

        instance.showSystemMessage( toastType, toastMessage );

    });

}


EmailCampaignEditor.prototype.createClicksByDayChart = function( data ) {
    let clicksByDayStyle = {
                "width":"500px",
                "height":"150px",
                "margin-left":"10px",
                "background-color":"white",
                "xbox-shadow": "3px 3px 3px #b3b3b3",
                "padding": "5px"
            }

    let clicksByDayChart = $("<div>")
        .css( clicksByDayStyle )
        .dxChart({
            dataSource : Fse.Data.newDataSource( { object : 'GTM.clicksByDay', objectParams : { campaignId : data.campaignId }, keyField : "daynum" } ),
            legend: { visible: false },
            tooltip: { enabled: true },
            height : 150,
            series: {
                minBarSize : 2,
                argumentField: 'day',
                valueField: 'clicks',
                name: 'Click History',
                type: 'bar',
                color: '#b3d9ff',
            },
        });

    return clicksByDayChart.dxChart( "instance" ); 

}

EmailCampaignEditor.prototype.createClicksByTypeChart = function( data ) {

    let clicksByTypeStyle = {
        "width":"200px",
        "height":"150px",
        "background-color":"white",
        "xbox-shadow": "3px 3px 3px #b3b3b3",
        "padding": "5px 0px 0px 0px"
    }

    let clicksByTypeChart = $("<div>")
        .css( clicksByTypeStyle )
        .dxPieChart({
            dataSource : Fse.Data.newDataSource( { object : 'GTM.clicksByRecipientType', objectParams : { campaignId : data.campaignId }, keyField : "type" } ),
            palette: ['#b3d9ff', '#ffd480', '#b3b3ff', '#d98cb3', '#ff9999'],
            tooltip: { enabled: true },
            legend: {
                visible: true,
                verticalAlignment: 'bottom',
                horizontalAlignment: 'center',
                itemTextPosition: 'right',
                rowCount: 1,
            },
            series: [
                {
                    argumentField: 'type',
                    valueField: 'clicks',
                }
            ]
        });

    return clicksByTypeChart.dxPieChart( "instance" );

}

EmailCampaignEditor.prototype.createToplineStatsElement = function( data ) {

    let topLineStats = $("<div>").dxBox( {
        direction : "row",
        items : [
            { 
                template : function() {
                        let element = $("<div>")
                            .append( $("<span>").text( "Total Recipients:" ) )
                            .append( $("<span>").text( DevExpress.localization.formatNumber( data.recipientCount, { type : "fixedPoint", precision : 0 } ) ) );
                        return element;
                    }, 
                ratio : 1
            },
            { 
                template : function() {
                        let element = $("<div>")
                            .append( $("<span>").text( "Total Opens:" ) )
                            .append( $("<span>").text( DevExpress.localization.formatNumber( data.opens, { type : "fixedPoint", precision : 0 } ) ) );
                        return element;
                    }, 
                ratio : 1
            },
            { 
                template : function() {
                        let element = $("<div>")
                            .append( $("<span>").text( "Total Clicks:" ) )
                            .append( $("<span>").text( DevExpress.localization.formatNumber( data.clicks, { type : "fixedPoint", precision : 0 } ) ) );
                        return element;
                    }, 
                ratio : 1
            },
            { 
                template : function() {
                        let element = $("<div>")
                            .append( $("<span>").text( "Total Unsubscribes:" ) )
                            .append( $("<span>").text( DevExpress.localization.formatNumber( data.unsubscribes, { type : "fixedPoint", precision : 0 } ) ) );
                        return element;
                    }, 
                ratio : 1
            }


        ]

    });        

    return topLineStats;

}

EmailCampaignEditor.prototype.createRecipientsDataGrid = function( data ) {

    let instance = this;

    let recipientsDataGridConfig = null;
    if( data.statusCd == "PEN" ) {
        recipientsDataGridConfig = {
            height : 400,
            dataSource: Fse.Data.newDataSource( { object : 'GTM.emailCampaignTargetRecipients', objectParams : { campaignId : data.campaignId }, keyField : "fspro_userId" } ),
            columns: [
                {
                    caption: "Name",
                    name : "name",
                    calculateCellValue: function(rowData) {
                        return rowData.firstName + " " + rowData.lastName;
                    },
                    allowFiltering: true
                },
                {
                    caption: "Email",
                    dataField:"emailAddress",
                    width: 230,
                    allowFiltering: true,
                    cellTemplate: function(container, options) {
                        if ("Private Address" == options.data.emailAddress) {
                            container.append( $("<i>").text( options.data.emailAddress ));
                        } else {
                            container.append(options.data.emailAddress);
                        }
                    }
                },
                {
                    caption: "Organization",
                    dataField:"organizationName",
                    allowFiltering: true
                },
                { // tse-535
                    caption: "Invalid Email",
                    dataField:"knownBadEmail",
                    cellTemplate: function(container, options) {
    
                        let template = $("<div>").text( options.displayValue );
                        if( options.value == 'Yes' ) {
                            template.css( { "color" : "red" })
                        }
                        container.append( template );
                    },
                    width: 100,
                },
                {
                    caption: "Opened",
                    name:"isOpened",
                    lookup : {
                        dataSource : {
                            store : { 
                                type : "array",
                                key : "value",
                                data : [
                                    { value : 1, text :'Yes' },
                                    { value : 0, text :'No' }
                                ]
                            }
                        },
                        displayExpr : "text",
                        valueExpr : "value"
                    },
                    cellTemplate: function(container, options) {
    
                        let template = $("<div>").text( options.displayValue );
                        if( options.value == 0 ) {
                            template.css( { "color" : "red" })
                        } else if (options.value == 1 ) {
                            template.css( { "color" : "green" })
                        }
    
                        container.append( template );
                    },
                    width: 90
                },
                {
                    caption: "Unsubscribed",
                    name:"isUnsubscribed",
                    lookup : {
                        dataSource : {
                            store : { 
                                type : "array",
                                key : "value",
                                data : [
                                    { value : 1, text :'Yes' },
                                    { value : 0, text :'No' }
                                ]
                            }
                        },
                        displayExpr : "text",
                        valueExpr : "value"
                    },
                    cellTemplate: function(container, options) {
    
                        let template = $("<div>").text( options.displayValue );
                        if( options.value == 0 ) {
                            template.css( { "color" : "red" })
                        } else if (options.value == 1 ) {
                            template.css( { "color" : "green" })
                        }
    
                        container.append( template );
                    },
                    width: 110
                }
               
            ],
            scrolling : {
                mode : "virtual"
            },
            summary: {
                totalItems: [
                    { column: "fspro_userId", showInColumn : "name", summaryType: "count", displayFormat : "Tentative Recipients : {0}", valueFormat : { type : "fixedPoint", precision : 0 }  }
                ]
            },
            showColumnHeaders: true,
            filterRow: {
                visible: true
            },
            // export: { enabled: true },
            onToolbarPreparing : function( e ) {
    
                if( ! e.toolbarOptions.items ) {
                    e.toolbarOptions.items = [];
                }
    
                let toolbarItems = e.toolbarOptions.items;
    
                toolbarItems.push( {
                    location : "after",
                    widget : "dxButton",
                    options : {
                        icon : "exportxlsx",
                        onClick : function( ee ) {
                            Fse.UI.DataGridHelper.exportDataGrid( { dataGrid : e.component, fileName : "recipients.xlsx" }); 	
                        }
                    }
                })
            },
    
            onRowDblClick : function( e ) {
                if( e.rowType != "data" ) {
                    return;
                }
    
                if( e.data.emailId ) {
                    EmailCampaignManager.showRecipientMessage( e.data );
                }
    
            }
        };

    } else {
        recipientsDataGridConfig = {
            height : 400,
            dataSource: Fse.Data.newDataSource( { object : 'GTM.emailCampaignRecipients', objectParams : { campaignId : data.campaignId }, keyField : "recipientId" } ),
            columns: [
                {
                    caption: "Name",
                    name : "name",
                    calculateCellValue: function(rowData) {
                        return rowData.firstName + " " + rowData.lastName;
                    },
                    allowFiltering: true
                },
                {
                    caption: "Email",
                    dataField:"emailAddress",
                    width: 230,
                    allowFiltering: true,
                    cellTemplate: function(container, options) {
                        if ("Private Address" == options.data.emailAddress) {
                            container.append( $("<i>").text( options.data.emailAddress ));
                        } else {
                            container.append(options.data.emailAddress);
                        }
                    }
                },
                {
                    caption: "Organization",
                    dataField:"organizationName",
                    allowFiltering: true
                },
                {
                    caption: "Opened",
                    dataField:"isOpened",
                    lookup : {
                        dataSource : {
                            store : { 
                                type : "array",
                                key : "value",
                                data : [
                                    { value : 1, text :'Yes' },
                                    { value : 0, text :'No' }
                                ]
                            }
                        },
                        displayExpr : "text",
                        valueExpr : "value"
                    },
                    cellTemplate: function(container, options) {
    
                        let template = $("<div>").text( options.displayValue );
                        if( options.value == 0 ) {
                            template.css( { "color" : "red" })
                        } else if (options.value == 1 ) {
                            template.css( { "color" : "green" })
                        }
    
                        container.append( template );
                    },
                    width: 90
                },
                {
                    caption: "Unsubscribed",
                    dataField:"isUnsubscribed",
                    lookup : {
                        dataSource : {
                            store : { 
                                type : "array",
                                key : "value",
                                data : [
                                    { value : 1, text :'Yes' },
                                    { value : 0, text :'No' }
                                ]
                            }
                        },
                        displayExpr : "text",
                        valueExpr : "value"
                    },
                    cellTemplate: function(container, options) {
    
                        let template = $("<div>").text( options.displayValue );
                        if( options.value == 0 ) {
                            template.css( { "color" : "red" })
                        } else if (options.value == 1 ) {
                            template.css( { "color" : "green" })
                        }
    
                        container.append( template );
                    },
                    width: 110
                }
               
            ],
            scrolling : {
                mode : "virtual"
            },
            summary: {
                totalItems: [
                    { column: "recipientId", showInColumn : "name", summaryType: "count", displayFormat : "Total Recipients : {0}", valueFormat : { type : "fixedPoint", precision : 0 }  },
                    { column: "isOpened", summaryType: "sum", displayFormat: "Opened: {0}", valueFormat : { type : "fixedPoint", precision : 0 } },
                    { column: "isUnsubscribed", summaryType: "sum", displayFormat: "Unsubscribed: {0}", valueFormat : { type : "fixedPoint", precision : 0 } }
                ]
            },
            showColumnHeaders: true,
            filterRow: {
                visible: true
            },
            // export: { enabled: true },
            onToolbarPreparing : function( e ) {
    
                if( ! e.toolbarOptions.items ) {
                    e.toolbarOptions.items = [];
                }
    
                let toolbarItems = e.toolbarOptions.items;
    
                toolbarItems.push( {
                    location : "after",
                    widget : "dxButton",
                    options : {
                        icon : "exportxlsx",
                        onClick : function( ee ) {
                            Fse.UI.DataGridHelper.exportDataGrid( { dataGrid : e.component, fileName : "recipients.xlsx" }); 	
                        }
                    }
                })
            },
    
            onRowDblClick : function( e ) {
                if( e.rowType != "data" ) {
                    return;
                }
    
                if( e.data.emailId ) {
                    EmailCampaignManager.showRecipientMessage( e.data );
                }
    
            }
        };

    }

    let recipientsDataGrid = $("<div>").dxDataGrid( recipientsDataGridConfig );

    if( data.statusCd == "PEN" ) {
        recipientsDataGrid.append( $("<p>* Invalid email indicates if previous emails to this address were undeliverable. Invalid emails will be skipped in this campaign. Visit the contact record to modify the email address.</p>")
        .css({"font-style" : "bold" , "font-style" : "italic"}) );
    }

    return recipientsDataGrid.dxDataGrid( "instance" );

}

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

EmailCampaignEditor.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;
    }

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

EmailCampaignEditor.prototype.getCurrentTabIndex = function() {

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

/*
EmailCampaignEditor.prototype.showRecipientMessage = function( data ) {



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

        title : data.emailSubject,
        height : 640,

        hideOnOutsideClick : true,

        contentTemplate : function() {

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

            // email header
            let emailHeader = $("<div>").css( { "display" : "grid", "grid-template-columns" : "70px auto", "margin-bottom" : "18px" } );

            emailHeader
                .append( "<div>TO:</div>")
                .append( $("<div>").text( data.emailTo ))
                .append( "<div>FROM:</div>" )
                .append( $("<div>").text( data.emailFrom ))
                .append( "<div>SENT:</div>")
                .append( $("<div>").text( DevExpress.localization.formatDate( new Date( Date.parse( data.emailDate )), "longDateLongTime" ) ));

            content.append( emailHeader );

            // actual email
            let emailBodyURL = Fse.Util.updateURL2( $("link#PortalDocRootURL").attr( "href") + "/index.cfm?app=GTM.emailManager", 
                { operation : "getEmailBody", campaignId : data.campaignId, recipientId : data.recipientId, emailId : data.emailId } 
            );
    
            let emailMessageViewer = $("<iframe>").css( {  "height" : "500px", "width" : "100%" } ).attr( {
                src : emailBodyURL
            })
        
            content.append( emailMessageViewer );

            return content;
        },

        onHidden : function( e ) {
            e.component.element().remove();
            e.component.dispose();
        }
    }).appendTo( "body" ).dxPopup("show");

    
}
*/