CampaignEditorPopup = function() {

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

    console.log( Fse.Portal.appConfiguration );

}


CampaignEditorPopup.prototype.constructor = CampaignEditorPopup;

CampaignEditorPopup.prototype.show = function( editorOptions ) {

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

    let campaignDefaults = {
        campaignEnabled : "N"
    };

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

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

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

    let formItems = [];

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

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

    );

    let tabs = null;
    let panels = null;

    let campaignForm = null;
    let territoryForm = null;

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

    let applyValidation = function( origin ) {


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

        validationResult.complete.then( function( vr ) {


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

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

            vr.brokenRules.forEach( function( br ) {

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

            })



            tabs.option( { items : tabItems });

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

        })

        return validationResult;

    }

    let setProductListData = null;
    let getProductListData = null;

    let setCampaignFormsData = null;
    let getCampaignFormsData = null;

    let updateTerritoryTab = function() {

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

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

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

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

        if( territoryDataSource ) {

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

    }

    let enableProducts = function() {

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

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

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

        tabItems[2].disabled = productsTabDisabled;

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

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


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

        return ! productsTabDisabled;

    }

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

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

                updateTerritory = true;

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

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

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

            if( updateTerritory ) {
                updateTerritoryTab();
            }

            enableProducts();

            applyValidation( "onFieldDataChanged" );
                

        }
    }).dxForm( "instance" );

   

    let productListColumns = [];

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

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

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

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

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

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

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

               }

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

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

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

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

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


    }).dxDataGrid( "instance" );

    setProductListData = function( data ) {

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

    }

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

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

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

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

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

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


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


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

        adapter: {
            getValue: function() {

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

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

                return value;

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

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

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


    } 
    */

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


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

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

                    selectedItems.forEach( function( si ) {

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

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

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

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


    let productListToolbarItems = [];

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

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


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


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

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

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

    } ).dxList( "instance" );

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


                        let objectParams = {
                            topLevelTerritoryId : params.value
                        }

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

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


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

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

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

    

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


    let campaignFormAddButton = null;

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

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

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


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

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

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

            }

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

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

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

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

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

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

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

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

    }).dxDataGrid( "instance" );

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

    setCampaignFormsData = function( data ) {

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

        // dataSource.load();

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

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


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

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

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



    let scrollView = null;

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

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

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

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

       }
    }
];

    let assetGrid = null;

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

        } );
    }

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

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


        } 

    }).dxMultiView( "instance" );


    let saveCampaign = function() {


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

            if( vr.isValid ) {

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

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

            }


        } );

       

    }

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

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

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

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

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

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

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

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

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

                campaignForm.option( "disabled", true );

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


                let campaignData = {};

                let d = new $.Deferred();

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

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

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


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

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

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

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

                    if( campaignData.objectiveId ) {

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

                        // if the campaign is enabled then 

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


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

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

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

                    }


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


                })

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

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

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


    }).dxPopup( "instance" ); 

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

    popup.show();

}