AssetEditor = function( assetData, options ) {

    let instance = this;

    console.log("AssetEditor constructor called");
    console.log(assetData);
    instance.updating = false;

    instance.intervalId = 0; 

    instance.assetSelectionKey = "";
    instance.assetData = null;

    instance.changes = null;

    instance.rootElement = $("<div>").addClass( "AssetEditor");
    instance.cancelButton = null;
    instance.saveButton = null;
    instance.saveAnotherButton = null;
    instance.skipButton = null;
    instance.saveLastButton = null;

    instance.popupWidth = 650;
    instance.popupHeight = "auto"; 
    instance.tabHeight = "100%"; 
    instance.tabScrollHeight = "100%";

    instance.assetForms = null;

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

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

    console.log("options in AssetEditor");
    console.log( instance.options );

   // instance.assetId = 0;
    if( assetData && assetData.assetSelectionKey ) {
        instance.assetSelectionKey = assetData.assetSelectionKey;
    }

   // instance.assetData = null;    

    instance.creatingNewAsset  = false;

    if( instance.assetSelectionKey != "") {
        instance.refreshEditor();
    } else {

        instance.assetData = {
            assetSelectionKey : "",
            contentDomain : "DOC"

        }

        instance.creatingNewAsset = true;
        instance.createUI( instance.assetData, instance.options.tabIndex );
    }

}


AssetEditor.prototype.constructor = AssetEditor;


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

AssetEditor.prototype.dispose = function() {

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

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

AssetEditor.prototype.loadAsset = function( assetSelectionKey ) {

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

    let assetData = {};

    let d = new $.Deferred();
   // console.log("loadAsset called");
  //  console.log( assetId );

    d.progress( function( data ) {
        $.extend( assetData, data );
        let ready = ( assetData.assetSelectionKey != null && assetData.assetSelectionKey != "" );
        if( ready) {
            d.resolve( assetData );
        }
    })

    let assetDataStore = "";

    let assetDataSource = null;

    if( assetSelectionKey ) {
       // assetDataSource = Fse.Data.createDataSource( { customStore : { dataURL : dataURL, paginate : true, pageSize : 50, object : "CMA.assets", key : "fileId" , objectParams : { categories : "Y"}}} );
       assetDataSource = Fse.Data.newDataSource( { object : "CMA.assets", paginate : true, pageSize : 50, keyField : [ "assetSelectionKey" ] ,  objectParams : { categories : "Y", assetSelectionKey: assetSelectionKey}} );
    } else {
       // assetDataSource = Fse.Data.createDataSource( { customStore : { dataURL : dataURL, paginate : true, pageSize : 50, object : "CMA.assets", key : "fileId" }} );
     assetDataSource = Fse.Data.newDataSource( { object : "CMA.assets", paginate : true, pageSize : 50, keyField : [ "assetSelectionKey" ] } );
    }

    assetDataStore = assetDataSource.store();

    

    assetDataStore.byKey( assetSelectionKey ).done( function( data ) {
      
       if( data ) d.notify( data );
    })

    return d;

            
}
AssetEditor.prototype.getCurrentTabIndex = function() {

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

AssetEditor.prototype.moveToNextTab = function() {

    console.log("in moveToNextTab" );

    let instance = this;
    instance.refreshEditor();

    console.log("refresh in move to next tab");


    let currentTabIndex = instance.getCurrentTabIndex();
    console.log("currentTabIndex");
    console.log(currentTabIndex);

    let tabIndex = currentTabIndex + 1;

   // instance.createUI( instance.assetData, currentTabIndex );

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

    */

    

   // const tabPanel = $("#tabPanel").dxTabPanel("instance");
    const items = this.tabPanel.option("items");
   // console.log("is it invoked here?");

    // Enable next tab
    items[tabIndex].disabled = false;
    this.tabPanel.option("items", items);

    console.log("tabPanel");
   
   // console.log(this.options.tabIndex);



    if( this.tabPanel ) {
         this.tabPanel.option("selectedIndex", tabIndex);
         console.log("index updated");
         console.log(this.tabPanel);
        // instance.refreshEditor();
         return tabIndex;
        //tabPanel.option("selectedIndex", index + 1);
    } else {
        return this.options.tabIndex;
    }
}

AssetEditor.prototype.refreshEditor = function() {

    let instance = this;

    console.log("in refreshEditor" );
    console.log( instance );

    let d = instance.loadAsset( instance.assetSelectionKey );

    d.done( function( data ) {

        let currentTabIndex = instance.getCurrentTabIndex();
        console.log("currentTabIndex");
        console.log(currentTabIndex);

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

        instance.assetData = data;
      
        instance.createUI( data, currentTabIndex );

    })

    return d;

}

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

AssetEditor.prototype.createUI = function( data, currentTabIndex ) {

    console.log("is createUI called" +currentTabIndex);

    let instance = this;

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

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

    console.log(data);

    let newAsset = data.assetSelectionKey ? false : true;

  //  console.log("newAsset" + newAsset);
   // console.log(data);

    let saveButtonText = "Save";

    if(newAsset)
    {
        saveButtonText = "Next Step";     
    }

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


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

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

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

    }}).dxButton( "instance" );

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

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

    }}).dxButton( "instance" );
    
   /* instance.skipButton = $("<div>").css( { "margin" : "-5px 0 5px 0" } ).dxButton( { text : "Skip", type : "normal", disabled : false, visible :false, onClick : function( e ) {

        instance.moveToNextTab();
       // instance.refreshEditor();
        },
        }).dxButton( "instance" );*/
    

    instance.saveAnotherButton = $("<div>").css( { "margin" : "-5px 0 5px 0" } ).dxButton( { text : "Add Another", type : "normal", disabled : false, onClick : function( e ) {

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

        })

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

     if(newAsset)
    {
          instance.saveButton.option( "disabled", true );
          instance.saveAnotherButton.option( "disabled", true );
    }
    else{
          instance.saveButton.option( "disabled", false );
    }

    

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

        tabIndex = instance.tabPanel.option( "selectedIndex" );
        console.log("existing editor tab index: " + tabIndex );
        instance.tabPanel.element().remove();
        instance.tabPanel.dispose();
        instance.tabPanel = null;
    }

    instance.rootElement.empty();



    let items = [

        { title : "Details",
            showButton: true,
            template : function() { return $("<div>").css( { "padding-top" : "5px" } ).append( instance.detailsTabTemplate( data ) ) }, alert : false },
    ]

    if(data.contentDomain == "DOC" || data.contentDomain == "IMG" )
    {
        items.push({ title : "Permissions", showButton: true, template : function() {return $("<div>").css( { "padding-top" : "5px" } ).append( instance.permissionsTabTemplate( data )) }, alert : false, disabled : newAsset} );
    }

    if(data.contentDomain == "DOC" || data.contentDomain == "IMG" )
    {
      items.push( { title : "Customers", showButton: false , template : function() { return $("<div>").css( { "padding-top" : "5px" } ).append( instance.customersTabTemplate( data )) }, alert : false, disabled : newAsset });
    }
    if(data.contentDomain == "DOC" || data.contentDomain == "IMG" )
    {
        items.push( { title : "Products", showButton: false, template : function() { return $("<div>").css( { "padding-top" : "5px" } ).append( instance.productsTabTemplate( data )) }, alert : false, disabled : newAsset });
    }

    let renderCount = 0;


    let rendered = $.Deferred(); 
   

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

    
        onSelectionChanged: function(e) {

            console.log("is this being changed?");
           console.log(e);

            if(e.addedItems[0].title == "Customers" )
            {
                instance.saveButton.option( "visible", false );
                instance.saveAnotherButton.option( "visible", false );
                instance.cancelButton.option( "visible", false );
               // instance.skipButton.option( "visible", true );

            }
            else if( e.addedItems[0].title == "Products")
            {
                instance.saveButton.option( "visible", false );
                instance.saveAnotherButton.option( "visible", false );
                instance.cancelButton.option( "visible", false );
               // instance.skipButton.option( "visible", false );
                //instance.saveLastButton.option( "visible", true );
            }
            else if(e.addedItems[0].title == "Permissions")
            {

                console.log("coming here in permissions tab selection");
                instance.saveButton.option( "visible", true );
                instance.saveAnotherButton.option( "visible", false );
                instance.cancelButton.option( "visible", false );
                //instance.skipButton.option( "visible", false );
            }
            else
            {
                instance.saveButton.option( "visible", true );
               // instance.saveButton.option( "disabled", true );
               instance.saveAnotherButton.option( "visible", true );
                instance.cancelButton.option( "visible", true );
               // instance.skipButton.option( "visible", false );
                //instance.saveLastButton.option( "visible", false );
            }
          
        },
    
        itemTitleTemplate : function( item ) {

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

            return item.titleElement;
        }

    }).dxTabPanel( "instance" ); 
    

    

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

        console.log("all tabs rendered" );

        instance.updating = true;

        instance.setDetailsTabData( data );

        instance.updating = false;

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

        let footToolbarItems =  [{ location : "after", template : function() { return instance.cancelButton.element() } },
        ];

        if( instance.creatingNewAsset ) {
            footToolbarItems.push( { location : "after", template : function() { return instance.saveAnotherButton.element() } } );
        }

        console.log(instance.tabPanel.option("selectedItems")[0].title);
      
       // footToolbarItems.push( { location : "after", template : function() { return instance.skipButton.element() } } );
        

        footToolbarItems.push({ location : "after", template : function() { return instance.saveButton.element() } });

        instance.rootElement.append( 
            $("<div>").css( { "padding-top" : "10px", "padding-right" : "10px" } ).dxToolbar( {
                items : footToolbarItems
            })
        );

       
      

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

     let currIndex = instance.tabPanel.option( "selectedIndex" );
    instance.tabPanel.option( "selectedIndex", currIndex+1 );
    instance.tabPanel.option( "selectedIndex", currIndex );
    
    })

   // let currIndex = instance.tabPanel.option( "selectedIndex" );
   // instance.tabPanel.option( "selectedIndex", currIndex );

    console.log("end of createUI" );


}


AssetEditor.prototype.saveChanges = function(saveType) {

    let instance = this;

    instance.formDataToSend = new FormData();

    let currentTabIndex = instance.getCurrentTabIndex();

        let changesReady = $.Deferred();
    
        let assetData = null;
        

        if(currentTabIndex ==0)
        {
            assetData =  $.extend( true, {}, instance.getDetailsTabData() );

            console.log( "SAVING DATA" );
            console.log( assetData );
            assetData['privateYesNo'] = "";

            const keysToRemove = ['uploadFile', 'thumbnailFile'];
            keysToRemove.forEach(key => delete assetData[key]);
    
            instance.formData = instance.assetForm.option( "formData" );
    
            console.log("formData vanilla");
            console.log( instance.formData );
    
           let uploadFile1 = instance.formData.uploadFile; 
            if( uploadFile1 ) {
               // console.log( "uploadFile1" );
                uploadFile1.forEach( function( fe ) {
                  //  console.log( "fe in upload" );
                  //  console.log( fe );
                  instance.formDataToSend.append( "uploadFile", fe );
                })
            }
    
            if(assetData.contentDomain == "DOC" || assetData.contentDomain == "IMG" )
                {
                    let thnFile1 = instance.formData.thumbnailFile; 
                    if( thnFile1 ) {
                      
                       thnFile1.forEach( function( fe ) {
                           // console.log( "fe in thm" );
                          //  console.log( fe );
                          instance.formDataToSend.append( "thumbnailFile", fe);
                        })
                    }
    
    
    
                 /*  const fileUploader = $("#fileIds").dxFileUploader("instance");
                 //const files = fileUploader.option("value");
                 console.log(fileUploader);
      
                  if (files.length > 0) {
                      formDataToSend.append("uploadFile", files[0]); // Append the file
                  }*/
      
                  console.log("formDataToSend from thumbnailDiv");
    
                }


                let assetFormData = JSON.stringify( assetData );
                console.log("assetFormData");
                console.log(assetFormData);
      
                instance.formDataToSend.append( "asset", assetFormData);

            console.log("formDataToSend from details tab");
            console.log(instance.formDataToSend);

    
        }

        else if(currentTabIndex ==1)
        {
            assetData = instance.assetData;
            assetData =  $.extend( true, assetData, instance.getPermissionsTabData() );

            console.log( "SAVING DATA from permissions tab" );
            console.log( assetData );

            if(assetData.contentDomain == "DOC" || assetData.contentDomain == "IMG" )
                {
                      //let formDataToSend = new FormData();
                      assetData.assetId = instance.assetId;

                      assetData['assetId'] = instance.assetId;

                let permformData = instance.permissionForm.option( "formData" );
                console.log("permformData vanilla");
                console.log( permformData );

                instance.formData = $.extend( true, instance.formData, permformData );

                }

                console.log("assetData from permissions tab");
                console.log(assetData);

                instance.formDataToSend.append( "asset", JSON.stringify( assetData ));
                console.log("formDataToSend from permissions tab");
                console.log(instance.formDataToSend);
        }
        
    
      
        changesReady.resolve( instance.formDataToSend );

            let saving = $.Deferred();
            let assetDataSaved = false;
            saving.progress( function( notify ) {

                if( notify === "assetData" ) {
                    assetDataSaved = true;
                }

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

        })

       

        changesReady.done( function( formDataToSend ) {

          /*  console.log( "formDataToSend just before url");
            for (let [key, value] of formDataToSend.entries()) {
                  console.log(`${key}: ${value}`);
                }
*/
                  
            let saveURL = Fse.Util.updateURL2( $("link#appActionURL").attr( "href" ), { object : "CMA.saveAsset" } );
            $.ajax( { 
                url : saveURL,
                method : "post",
                data : formDataToSend,
                processData : false,
            contentType : false,
            enctype : "multipart/form-data"
            }).always( function() {
           // instance.addPopup.hide();
            //instance.dataGrid.refresh();
        })
            .done( function( returnData ) {

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

                if( instance.creatingNewAsset ) {
                    instance.assetId = returnData.assetId;
                    instance.assetSelectionKey = returnData.assetSelectionKey;
                    assetData.assetId = instance.assetId;
                    assetData.assetSelectionKey = instance.assetSelectionKey;
                }

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

        
        } );

        saving.done( function()  {
          console.log( "saving.done" );
            console.log(saveType);
            console.log("the flag is ===");
            console.log(instance.creatingNewAsset);
          // instance.refreshEditor();

            if( instance.creatingNewAsset && saveType == "save" ) {
                // notify the asset manager
             //   console.log("before oncreated is invoked");
              //  console.log( assetData );
             //   //instance.refreshEditor();
                instance.options.assetManager.onAssetCreated( assetData );
                instance.creatingNewAsset = true;
                instance.moveToNextTab();
              //  console.log("after oncreated is invoked");
                
               
            }
            else if( instance.creatingNewAsset && saveType == "saveAnother" ) {
                // notify the asset manager
              //  console.log("before oncreated is invoked");
              //  console.log( assetData );
                assetData.saveAnother = true;
                instance.options.assetManager.onAssetCreated( assetData );
                instance.creatingNewAsset = true;
            }

            else{
                console.log("before onupdated is invoked- UPDATED");
               // console.log( assetData );
               //instance.refreshEditor();
                instance.options.assetManager.onAssetUpdated( assetData );
                //instance.moveToNextTab();
            }


           // formData = instance.formData;
            //console.log(" data from ---------------form");
           // console.log(formData);
           // instance.createUI( instance.assetData, instance.getCurrentTabIndex() );
           // instance.refreshEditor();

            DevExpress.ui.notify("Changes saved successfully", "success", 2000);


            $("<div>").dxToast( {
                message : "Changes saved successfully",
                type : "success",
                position : "bottom center",
                displayTime : 1000,
                closeOnClick : true,
                onHidden : function( e ) {
                    e.component.element().remove();
                    e.component.dispose();
                }
            }).appendTo( $("body") ).dxToast( "show" );
        } );


 //} );

    return;
}

AssetEditor.prototype.applyValidation = function( origin ) {

    let instance = this;
    console.log("in applyValidation" );

    let validationResult = DevExpress.validationEngine.validateGroup( "AssetEditor" );
  
    processResult = function( vr ){

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

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

        vr.brokenRules.forEach( function( br ) {

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

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

        })

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

    }

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

    return validationResult;

}


AssetEditor.prototype.getDetailsTabData = function() {
    return this.assetForm.option( "formData" );
}

AssetEditor.prototype.setDetailsTabData = function( data ) {
    //console.log( data );
    let formData = $.extend( true, {}, data );
    formData.internalOnly = data.internalOnly === 'Y' || data.internalOnly === true;
    this.assetForm.option( "formData", formData );
}
 
 AssetEditor.prototype._prepareDetailFormData = function( data ) {
 
     let formDataPromise = $.Deferred();
 
         console.log( "assetDefaults", assetDefaults );
 
         formDataPromise.resolve( assetDefaults );
 
 
     return formDataPromise;
 
 }


AssetEditor.prototype.detailsTabTemplate = function( data ) {

    let instance = this;
    let assetId = data.fileId;
    let formItems = [];
    let assetItems = [];
    let categoryItems = [];  
    let docDateItems = [];

   // console.log("details");
   // console.log(data);

    const defaultUnpublishDate = new Date(new Date().setFullYear(new Date().getFullYear() + 10));

    let publishDate = new Date();
    let unpublishDate = defaultUnpublishDate;
    let defaultSortRank = 99;
    let docTitle = "";

    if(assetId > 0)
    {
        console.log("coming here in assetId > 0");
        console.log(data);
        publishDate = data.publishDate;
        unpublishDate = data.unpublishDate;
        defaultSortRank = data.sortRank;
        docTitle  = data.docTitle;
        instance.saveButton.option( "disabled", false );
        instance.saveAnotherButton.option( "disabled", false );

    }

    let unpublishToDoOptions = [
        { text : "Delete", value : "D" },
        { text : "Replace", value : "R" }
      ];


  
    let _categoryId = data.categoryId;
    let _categoryList = data.linked_catIds;
    let _companyAbbrevName = Fse.Portal.getConfiguration( "STP.clientNameAbbr" );

   categoryItems.push(
        {
            dataField : "categoryId", label : { text : "Industry Category" }, editorType : "dxSelectBox",
        editorOptions : {
        dataSource : Fse.Data.newDataSource( { object : "PRD.repCategories", keyField : "categoryId" }),
        valueExpr : "categoryId",
        value : _categoryId,
        displayExpr : "categoryDescription",
        searchEnabled : true,
        searchExpr : "categoryDescription",
        searchMode : "contains",
        placeholder : "Select a Category",
        showClearButton : true,
        width : "45%",
        }
    });
    
    
  let categoriesListDataSource = Fse.Data.newDataSource( { object : "DOC.categories", keyField : "categoryId", paginate : false});
  
    categoriesListDataSource.load().done( function( cats ) {

        var containedValues = [];
        if(_categoryList !=null)
        {

        var catArray = _categoryList.split(",");
      
         containedValues = catArray.filter(function(value) {
             return cats.some(function(item) {
                 return item.categoryId === parseInt(value); // Check if the value exists in the dataSource
             });
         });
         containedValues = containedValues.map( str => parseInt(str, 10)); //parse the arrays of strs to int
        }

        categoryItems.push(


            { dataField : "catIds", label : { location : "left", text : `${_companyAbbrevName} Category` }, 
            editorType : "dxDropDownBox", 
            editorOptions : {
                placeholder : "Select Category",
                width : "45%",
                dataSource : categoriesListDataSource,
                valueExpr : "categoryId", displayExpr : "categoryName",
                contentTemplate : function( e ) {
                    const v = e.component.option( "value" );
                    const $list = $("<div>").dxList( {
                        dataSource : e.component.getDataSource(),
                        displayExpr : "categoryName",
                        selectionMode: "all",
                        showSelectionControls : true,
                        selectedItemKeys : v,
                        onSelectionChanged : function( sce ) {
                            const keys = sce.component.option( "selectedItemKeys" );

                            e.component.option( "value", keys );
                        }
                    })
                    
                    list = $list.dxList('instance');

                    e.component.on('valueChanged', (args) => {
                    const { value } = args;
                    list.option( "selectedItemKeys", value );
                    });

                    return $list;
                },

                onContentReady: function(e) {
                
                    e.component.option("value", containedValues); 
                }
            }
        }
        );

    }).then(function() {
        instance.assetForm.repaint();
     }); 


  let fileRowItems = {
    itemType: "group",
    caption: "",
    colCount: 2,
    cssClass: "tight-group",
    items: assetItems
  };

     assetItems.push(

            { label : { text : "File" , location : "left", visible : true},
            dataField : "uploadFile",
            template : function( data, itemElement ) {
            let fileUploader = $("<div>").dxFileUploader( {
            //name : "uploadFiler",
            selectButtonText: 'Select File',
            showFileList : true,
            accept: '*',
            uploadMode: 'useForm',
            onFilesUploaded: function(e) {
              
                let sFileId = e.request.responseText;
               
                let currentValue = $( '#fileIds' ).val();
                if( currentValue ) {
                    $( '#fileIds' ).val( currentValue + ',' + sFileId );
                } else {
                    $( '#fileIds' ).val( sFileId );
                }

             
                },
                onValueChanged: function(e) {
                    console.log("on value changed");
                    console.log(e.value);
                    const file = e.value[0];
                    let str = "";
                    if (file) {
                        str = file.name;
                    }

                    let cleanFileName = str.substring(0, str.lastIndexOf("."));
                    cleanFileName = cleanFileName.replace(/[^0-9A-Za-z ]/g, " ");

                    data.component.updateData("uploadFile", e.value);  
                    console.log(instance);
                    if(instance.assetSelectionKey == "")                  
                    { 
                        instance.assetForm.updateData("docTitle", cleanFileName);
                    }

                       instance.saveButton.option( "disabled", false );
                       instance.saveAnotherButton.option( "disabled", false );
                 
                }
             }).css( {  "display": "inline-block", "vertical-align": "middle" , "padding-top"    : "-10px"    
             } ).appendTo(itemElement);
           
         }});

        if(data.contentDomain == "DOC" || data.contentDomain == "IMG" )
            {
                assetItems.push(
                    { label : { text : "Thumbnail" , location : "left", visible : true},
                    dataField : "thumbnailFile",
                        template : function( data, itemElement ) {
                        let thumbnailFileUploader = $("<div>").dxFileUploader( {
                       // name : "thumbnailFile",
                        selectButtonText: 'Select File',
                        showFileList : true,
                        accept: ".png,.jpg,.jpeg",
                        allowedFileExtensions: [".png", ".jpg", ".jpeg"],                       
                        uploadMode: 'useForm',
                        onFilesUploaded: function(e) {
                        
                            let sFileId = e.request.responseText;
                            let currentValue = $( '#thumbnailIds' ).val();
                            if( currentValue ) {
                                $( '#thumbnailIds' ).val( currentValue + ',' + sFileId );
                            } else {
                                $( '#thumbnailIds' ).val( sFileId );
                            }
                            },
                            onValueChanged: function(e) {
                                data.component.updateData("thumbnailFile", e.value);
            
                            }
                        }).css( {  "display": "inline-block", "vertical-align": "middle" ,"padding-top"    : "-10px"  
                        } ).appendTo(itemElement);

                       // .append( $("<span>").text( "Ext." ).css( { "padding-left" : "8px", "padding-right" : "8px" }) )

                        $("<span>").text("If a PDF or Image, a thumbnail will be auto-generated upon save")
                             .css( {"display": "inline-block", "vertical-align": "middle", "padding-left" : "8px",
                                 "font-style" : "italic", "font-size" : "9px" })
                            .appendTo(itemElement);
                        
                        //.css( { "display" : "inline" } ).dxFileUploader( "instance" );
                      // itemElement.append( fileUploader.element().css( {  "display": "inline-block", "vertical-align": "middle"        
                        //  } ) );
                }});

                        /*{
                            template: function(itemData, itemElement) {
                
                              $("<span>").append(
                
                                $('<a>', {
                                    href: instance.assetData.thumbnailURL,
                                    text: "View Thumbnail",
                                    target: "_blank"
                                }).css( { "padding-right" : "8px" }) )
                                .appendTo(itemElement);
                            }
                        }*/
        
                   // );
            }
        
          
       let assetSectionItems = [];
        assetSectionItems.push(fileRowItems);
       // assetSectionItems.push(thnRowItems);
        assetSectionItems.push(

            {
                dataField : "docTitle", label : { text : "Title" }, 
                editorType : "dxTextBox", 
                editorOptions : {
                    width : "80%",

                    onValueChanged: function(e) {
                     console.log("inside docTitle onValueChanged");
                     console.log(e.value);
                       
                    }
                },
                
            },

            {
                dataField : "docDescription", label : { text : "Description" }, editorType : "dxTextArea", 
                editorOptions : {
                    width : "80%",
                    height: 40,
                    maxLength: 500
                }
            },
    
            {
                dataField : "keyWords", label : { text : "Tags" }, editorType : "dxTextBox",  
                editorOptions : {
                    width : "80%",
                    maxLength: 500
                }
            });


            docDateItems.push( 
            {
                label : { text : "Last Updated" },
                template: function(itemData, itemElement) {

                    let updatedBy = "unknown";
                    let updatedOn = "";
    
                    if(instance.assetData.lastUpdatedByFullName) {
    
                        updatedBy = instance.assetData.lastUpdatedByFullName;
                    }

                    if(instance.assetData.updateDate) {
                        const date = new Date(instance.assetData.updateDate);
                        const day = date.getDate();
                        const month = date.toLocaleString('default', { month: 'long' });
                        const year = date.getFullYear();
    
                        // Function to get ordinal suffix
                        function getOrdinal(n) {
                            const s = ["th", "st", "nd", "rd"];
                            const v = n % 100;
                            return s[(v - 20) % 10] || s[v] || s[0];
                        }
                        updatedOn =  ` on ${month} ${day}${getOrdinal(day)}, ${year}`;
    
                    }
    
                    $("<span>").text(function() {
                        return updatedBy + "" + updatedOn
                      }
                    ).css( { "display" : "inline" }).appendTo(itemElement);
                }
            },
        

            {
                label : { text : "Created" },
                template: function(itemData, itemElement) {

                    let createdBy = "unknown";
                    let createdOn = "";
    
                    if(instance.assetData.uploadedByFullName) {
    
                        createdBy = instance.assetData.uploadedByFullName;
                    }

                    if(instance.assetData.uploadDate) {
                        const date = new Date(instance.assetData.uploadDate);
                        const day = date.getDate();
                        const month = date.toLocaleString('default', { month: 'long' });
                        const year = date.getFullYear();
    
                        // Function to get ordinal suffix
                        function getOrdinal(n) {
                            const s = ["th", "st", "nd", "rd"];
                            const v = n % 100;
                            return s[(v - 20) % 10] || s[v] || s[0];
                        }
                        createdOn =  ` on ${month} ${day}${getOrdinal(day)}, ${year}`;
    
                        }
    
                        $("<span>").text(function() {
                            return createdBy + "" + createdOn
                          }
                        ).css( { "display" : "inline" }).appendTo(itemElement);
                        }
                    },
                    { label : { text : "Actions" },
              
                    template : function( options, itemElement ) {
                  
                        itemElement.empty();
                        itemElement
                        .append(
                        
                            $('<a>', {
                                href: instance.assetData.contentURL,
                                text: "View File",
                                target: "_blank"
                            }).css( { "padding-right" : "8px" , "display" : "inline"}) );
    
                            itemElement
                        .append($("<span>").append(
                        
                            $('<a>', {
                                href: instance.assetData.thumbnailURL,
                                text: "View Thumbnail",
                                target: "_blank"
                            }).css( { "padding-left" : "8px", "padding-right" : "8px", "display" : "inline" }) ));
    
                            itemElement
                            .append($("<span>").append(
                            
                                $('<a>', {
                                    href: instance.assetData.contentURL,
                                    text: "Copy URL",
                                    target: "_blank"
                                }).css( { "padding-left" : "8px", "padding-right" : "8px", "display" : "inline" }) ));
                        }
                }
                );


        let docUploadSectionItems =
        { itemType : "group", 
        name : "docUploadSection",
        caption : "Asset",
         items : assetSectionItems
        };

        let categorySectionItems =
        { itemType : "group",
        name : "categorySection",
        caption : "",
        items : categoryItems,
        cssClass: "tight-group"
        };

        let dateSectionItems =
        { itemType : "group",
        name : "dateSection",
        caption : "",
        items : docDateItems,
        cssClass: "tight-group"
        };

        let publishItems = [];

        publishItems.push(

            {
                dataField : "publishDate", label : { text : "Publish Date" }, editorType : "dxDateBox", isRequired : true, 
                
                editorOptions : {
                    type: 'date',
                    value: publishDate,
    
                    width : 120
              
                }
            },
    
            {
                dataField : "unpublishDate", label : { text : "Unpublish Date" }, editorType : "dxDateBox", isRequired : true, 
                editorOptions : {
                   // type: 'date',
                    //pickerType: 'calendar',
                    value: unpublishDate,
                    //value: defaultUnpublishDate,
                    width : 120
               
                }
            },

            { dataField : "internalOnly", label : { text : "Internal Only", location : "left" }, editorType : "dxSwitch"}  
         );


        let publishRowItems = {
            itemType: "group",
            caption: "",
            colCount: 2,
            items: publishItems,
            cssClass: "tight-group"
          };
        

        let settingSubSectionItems = [];
        settingSubSectionItems.push(publishRowItems);
        settingSubSectionItems.push(
           /* {
                dataField : "unpublishToDo", label : { text : "Expiration Action" }, 
                editorType : "dxSelectBox",
                editorOptions : {
                dataSource : unpublishToDoOptions,
                valueExpr : "value",
                placeholder : "",
                displayExpr : "text",
                searchEnabled : true,
                searchExpr : "text",
                searchMode : "contains",
                width : "45%",
            }
            
        },*/

        

        {
            dataField : "internalNotes", label : { text : "Internal Notes" }, editorType : "dxTextArea",  
            editorOptions : {
                colSpan: 2,
                width : "100%",
                height: 70,
                maxLength: 500,
               
            }
        },
        {
            dataField : "sortRank", label : { text : "Sort Rank" }, editorType : "dxNumberBox",  editorOptions : {
                min: 1,
                max: 99,
                value :defaultSortRank,
                showSpinButtons: true,
                width : 70
            }
        }

        );
 
        

        let settingSectionItems =
        { itemType : "group", 
        name : "settingSection",
        caption : "Settings",
         items : settingSubSectionItems
        };

   
        formItems.push(docUploadSectionItems);
        formItems.push(categorySectionItems);
        formItems.push(dateSectionItems);
        formItems.push(settingSectionItems);
        

   
    let assetDefaults = {
        assetEnabled : "N"
    };

    instance.assetForm = $("<div>").dxForm( {
        items : formItems,
        formData : assetDefaults,
        validationGroup : "AssetEditor"

        }).dxForm( "instance" );

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


AssetEditor.prototype.getPermissionsTabData = function() {
    return this.permissionForm.option( "formData" );
}

AssetEditor.prototype.setPermissionsTabData = function( data ) {
    console.log( data );
    this.permissionForm.option( "formData", data );
}

AssetEditor.prototype._createPermissionItems = function() {
   // console.log(this);
    let permissionItems = [

        /*{ itemType : "group", name : "passwordSection", caption : "", items : [

            {
                dataField : "PswrdProtect", label : { text : "Password Protect" }, editorType : "dxCheckBox", 
                editorOptions : {
                   
                    onValueChanged: function (e) {
                    
                      //instance.permissionForm.itemOption('generalSection.permissionSection', 'visible', e.value);
                                    
                      //options.component.updateData( "privateYesNo", newValue );
                }}
            } ,
    
            {
                dataField : "DocPassword", label : { text : "Password:" }, editorType : "dxTextBox",  editorOptions : {
                maxLength : 100,
                mode: 'password',
                showClearButton: true
                }
            }            
        ]} */ //removed the functionality after discssuing with Matt

    ];

    let _companyAbbrevName = Fse.Portal.getConfiguration( "STP.clientNameAbbr" );

    let permissionItemsPromise = $.Deferred();

    let waitingCount = 0;
    permissionItemsPromise.progress( function() {
        waitingCount--;
        if( ! waitingCount ) {
            permissionItemsPromise.resolve( permissionItems );
        }
    })


    let categoriesDataStore = Fse.Data.newDataSource( { object : "SEC.categories", keyField : "categoryId"});
    categoriesDataStore.filter( [ "groupModVisibility", "contains", "#CM;" ] );
    categoriesDataStore.load().done( function( categories ) {


        categories.forEach( function( fe ) {

            
            let catId = 0;
            let fieldName = "";

            console.log( "fe in categories" );
            console.log( fe );

            switch (fe.category) {

                case 'Staff User Groups': 
                    fieldName = "staffUserGrp";
                    catId = fe.categoryId ;
                    break; 
                case 'Permission Groups': 
                    fieldName = "permGrp";
                    catId = fe.categoryId ;
                    break; 
                case '1FS Groups': 
                    fieldName = "onefsGrp";
                    catId = fe.categoryId ;
                    break; 

                case 'Override Group': 
                case 'CRM - Override-Groups' :
                    fieldName = "overrideGrp";
                    catId = fe.categoryId ;
                    break; 

                case 'Work Teams': 
                case 'CRM - Work Teams' :
                    fieldName = "workTeamGrp";
                    catId = fe.categoryId ;
                    break; 

                case 'CRM - Staff-Roles/Permissions': 
                    fieldName = "crmStaffRolePermGrp";
                    catId = fe.categoryId ;
                    break; 

                case 'CRM - Local-Markets': 
                    fieldName = "crmLocMktGrp";
                    catId = fe.categoryId ;
                    break; 

                case 'Website Team Divisions': 
                    fieldName = "webTeamGrp";
                    catId = fe.categoryId ;
                    break; 


                case 'AG Presentation Site': 
                    fieldName = "presentSiteGrp";
                    catId = fe.categoryId ;
                    break; 


                case 'AG_Corporate': 
                    fieldName = "corpGrp";
                    catId = fe.categoryId ;
                    break; 

                 case 'Email Recipients': 
                    fieldName = "emailRecipientsGrp";
                    catId = fe.categoryId ;
                    break; 
               
                default:
                    fieldName = "staffUserGrp123";
                    catId = fe.categoryId ;
            }


            let grpCategoriesDatasource = Fse.Data.newDataSource( { object : "SEC.groups", keyField : "groupId" });
            grpCategoriesDatasource.filter( [ "categoryId", "=", catId ] );

            /*permissionItems.push({ 
                dataField : fieldName, label : { location : "left", text : fe.category }, 
                editorType : "dxDropDownBox", 
                editorOptions : {
                    placeholder : "Select User Group(s)",
                    dataSource : grpCategoriesDatasource,
                    // value : containedValues,
                    valueExpr : "groupId", displayExpr : "groupName",
                    contentTemplate : function( e ) {
                        const v = e.component.option( "value" );
                        const list = $("<div>").dxList( {
                                dataSource : e.component.getDataSource(),
                                displayExpr : "groupName",
                                selectionMode: "all",
                                showSelectionControls : true,
                                selectedItemKeys : v,
                                onSelectionChanged : function( sce ) {
                                    const keys = sce.component.option( "selectedItemKeys" );
                                    e.component.option( "value", keys );
                                }
                            }).dxList( "instance" )
                    
                        // list = $list.dxList('instance');

                        return list.element();

                       
                    }
                }
            });*/


            permissionItems.push(
            { 
                dataField : fieldName, label : { location : "left", text : fe.category }, editorType : "dxDropDownBox", 
			
                editorOptions : Fse.UI.multiSelectDropDownBoxEditorOptions( {
                    placeholder : "Select User Group(s)",
                    dataSource : grpCategoriesDatasource,
                    searchExpr : "groupName",
                    searchMode : "contains",
                    displayExpr : "groupName",
                    multipleSelectedDisplay : "Multiple User Groups Selected",
                    keyExpr : "groupId",
                    title : "Select User Groups"
			    })
		    });

        
          
        })  



        let allSystemGroupsDataSource = Fse.Data.newDataSource( { object : "SEC.groups", keyField : "groupId",  paginate : false, objectParams : { includeSystemGroups : true } });

        let systemGroupsFilter = [
            [
                [ "groupTypeCd", "=", "MPR" ], "or", [ "groupTypeCd", "=", "MRR" ], "or", [ "groupTypeCd", "=", "SME" ]
            ], "and", [ "modVisibility", "contains", "#CM;" ]
        ]
        allSystemGroupsDataSource.filter( systemGroupsFilter );   

        waitingCount++;
        allSystemGroupsDataSource.load().done( function( systemGroups ) {

            let systemGroupsByCategory = DevExpress.data.query( systemGroups ).groupBy( "category" ).toArray();

            permissionItemsPromise.notify();

            systemGroupsByCategory.forEach( function( systemGroupCategory ) {


                let groups = systemGroupCategory.items;
                let category = systemGroupCategory.key;
                let systemGroupsDataSource = new DevExpress.data.DataSource( { store : { type : "array", data : groups, key : "groupId" }} );
                let sysGroupFieldName = "sysGroup"+groups[0].groupTypeCd;

                let systemGroupField = { 
                    dataField : sysGroupFieldName, label : { location : "left", text : category }, 
                    editorType : "dxDropDownBox", 
                    editorOptions : {
                        placeholder : "Select Group(s)",
                        dataSource : systemGroupsDataSource,
                        valueExpr : "groupId", 
                        displayExpr : "groupName",
                        contentTemplate : function( e ) {
                            const v = e.component.option( "value" );
                            const list = $("<div>").dxList( {
                                dataSource : e.component.getDataSource(),
                                displayExpr : "groupName",
                                selectionMode: "all",
                                showSelectionControls : true,
                                selectedItemKeys : v,
                                onSelectionChanged : function( sce ) {
                                    const keys = sce.component.option( "selectedItemKeys" );
                                    e.component.option( "value", keys );
                                }
                            }).dxList( "instance")
                            
                            return list.element();
                        }
                  
                    }
                }            

                permissionItems.push({ 
                dataField : sysGroupFieldName, label : { location : "left", text : category  }, editorType : "dxDropDownBox", 
			
                editorOptions : Fse.UI.multiSelectDropDownBoxEditorOptions( {
                    placeholder : "Select Group(s)",
                    dataSource : systemGroupsDataSource,
                    searchExpr : "groupName",
                    searchMode : "contains",
                    displayExpr : "groupName",
                    multipleSelectedDisplay : "Multiple System Groups Selected",
                    keyExpr : "groupId",
                    title : "Select System Groups"
			    })
		    });
            })

            permissionItemsPromise.notify();
           
        })


        let staffDataSource = Fse.Data.newDataSource( { object : "SEC.users", keyField : "fspro_userId",  filter : [ "userType", "=", "staff" ], objectParams : { includeBrokerStaff : false } });
        /*permissionItems.push({ 
            dataField : "staff", label : { location : "left", text : `${_companyAbbrevName} Staff Members` }, 
            editorType : "dxDropDownBox", 
            editorOptions : {
                placeholder : "Select User",
                dataSource : staffDataSource,
                valueExpr : "fspro_userId", displayExpr : "fullName",
                contentTemplate : function( e ) {
                    const v = e.component.option( "value" );
                    const list = $("<div>").dxList( {
                        dataSource : e.component.getDataSource(),
                        displayExpr : "fullName",
                        selectionMode: "all",
                        showSelectionControls : true,
                        selectedItemKeys : v,
                        onSelectionChanged : function( sce ) {
                            const keys = sce.component.option( "selectedItemKeys" );

                            e.component.option( "value", keys );
                        }
                    }).dxList( "instance" );
                    

                    return list.element();
                },
            }
        });  */      


            permissionItems.push({ 
                dataField : "staff", label : { location : "left", text :  `${_companyAbbrevName} Staff Members`  }, editorType : "dxDropDownBox", 
			
                editorOptions : Fse.UI.multiSelectDropDownBoxEditorOptions( {
                    placeholder : "Select User",
                    dataSource : staffDataSource,
                    searchExpr : "fullName",
                    searchMode : "contains",
                    displayExpr : "fullName",
                    multipleSelectedDisplay : "Multiple Users Selected",
                    keyExpr : "fspro_userId",
                    title : "Select Users"
			    })
		    });

        waitingCount++;
        let brokerListDataSource = Fse.Data.newDataSource( { object : "MFR.activeBrokers", keyField : "brokerId", paginate : false});
        brokerListDataSource.load().done( function( brokers ) {
            permissionItemsPromise.notify();

            console.log( "Brokers", brokers );

            if( brokers.length ) {


                /*permissionItems.push( { dataField : "brokerIds", label : { location : "left", text : "Brokers" }, 
                    editorType : "dxDropDownBox", 
                    editorOptions : {
                        placeholder : "Select Broker",
                        dataSource : { store : { type : "array", data : brokers, key : "brokerId" }},
                        valueExpr : "brokerId", displayExpr : "brokerName",
                        contentTemplate : function( e ) {
                            const v = e.component.option( "value" );
                            const list = $("<div>").dxList( {
                                dataSource : e.component.getDataSource(),
                                displayExpr : "brokerName",
                                selectionMode: "all",
                                showSelectionControls : true,
                                selectedItemKeys : v,
                                onSelectionChanged : function( sce ) {
                                    const keys = sce.component.option( "selectedItemKeys" );
    
                                    //console.log("keys");
                                    //console.log(keys);
                                    e.component.option( "value", keys );
                                }
                            }).dxList( "instance" );
                     
    
                        return list.element();
                        },
    
                    }
                });*/


                permissionItems.push({ 
                dataField : "brokerIds", label : { location : "left", text :  "Brokers"  }, editorType : "dxDropDownBox", 
			
                editorOptions : Fse.UI.multiSelectDropDownBoxEditorOptions( {
                    placeholder : "Select Broker",
                    dataSource : new DevExpress.data.DataSource( { store : { type : "array", data : brokers, key : "brokerId" }}),
                    searchExpr : "brokerName",
                    searchMode : "contains",
                    displayExpr : "brokerName",
                    multipleSelectedDisplay : "Multiple Brokers Selected",
                    keyExpr : "brokerId",
                    title : "Select Brokers"
			    })
		    });

                

                brokers.forEach( function( broker ) {

                    let brokerStaffDataSource = Fse.Data.newDataSource( { object : "SEC.users", keyField : "fspro_userId",  filter : [[ "userType", "=", "brokerStaff" ], "and", [ "userOwnerId", "=", broker.brokerId ]], objectParams : { includeBrokerStaff : true } });


                    /*permissionItems.push({ 
                        dataField : `bro${broker.brokerId}`, label : { location : "left", text : broker.brokerName }, 
                        editorType : "dxDropDownBox", 
                        editorOptions : {
                            placeholder : "Select User",
                            dataSource : brokerStaffDataSource,
                            valueExpr : "fspro_userId", displayExpr : "fullName",
                            contentTemplate : function( e ) {
                                const v = e.component.option( "value" );
                                const list = $("<div>").dxList( {
                                    dataSource : e.component.getDataSource(),
                                    displayExpr : "fullName",
                                    selectionMode: "all",
                                    showSelectionControls : true,
                                    selectedItemKeys : v,
                                    onSelectionChanged : function( sce ) {
                                        const keys = sce.component.option( "selectedItemKeys" );
                                        console.log("keys here");
                                        console.log(keys);
                                        e.component.option( "value", keys );
                                    }
                                }).dxList( "instance" );
                             
                                return list.element();
                            },
            
                        }
                    });    */   
                    
                    
              permissionItems.push({ 
                dataField : `bro${broker.brokerId}`, label : { location : "left", text :  broker.brokerName  }, editorType : "dxDropDownBox", 
			
                editorOptions : Fse.UI.multiSelectDropDownBoxEditorOptions( {
                    placeholder : "Select User",
                    dataSource : brokerStaffDataSource,
                    searchExpr : "fullName",
                    searchMode : "contains",
                    displayExpr : "fullName",
                    multipleSelectedDisplay : "Multiple Users Selected",
                    keyExpr : "fspro_userId",
                    title : "Select Users"
			    })
		    });

                })

            }
            permissionItemsPromise.notify();

        })
    });



    return permissionItemsPromise;
}

AssetEditor.prototype._prepareFormData = function( data ) {

    let formDataPromise = $.Deferred();

    let assetPermissionDataSource = Fse.Data.newDataSource( { object : "CMA.assetPermissions", paginate : false, objectParams : { assetId : data.fileId, assetType : data.contentDomain} });
    assetPermissionDataSource.load().done( function( assetPermissions ) {

      //  console.log( "assetPermissions", assetPermissions );

        const assetDefaults = {
            privateYesNo : data.privateYesNo == 'Y' ? true : false,
            assetEnabled : "Y",
            brokerStaff :"",
            staff : [],
            nonStaff : [],
            brokerUsers : [],
            staffUserGrp : [],
            permGrp : [],
            onefsGrp : [],
            crmStaffRolePermGrp : [],
            crmLocMktGrp : [],
            webTeamGrp : [],
            presentSiteGrp : [],
            corpGrp : [],
            emailRecipientsGrp : [],
            overrideGrp : [],
            workTeamGrp : [],
            sysGroupMPR : [],
            sysGroupMRR : [],
            sysGroupSME : [],
            brokerIds : []
        };            

        assetDefaults.brokerIds = DevExpress.data.query( assetPermissions ).filter( [ "resourceType", "=", "BRO" ] ).select( "resourceId" ).toArray().map( function( i ) { return i.resourceId } );
        console.log( "assetDefaults.brokerIds from assetPermissions", assetDefaults.brokerIds );
        assetDefaults.staff = DevExpress.data.query( assetPermissions ).filter( [[ "resourceType", "=", "USR" ], "and", [ "resourceOwnerType", "=", Fse.Portal.appConfiguration.STP.ownerType ], "and", [ "resourceOwnerId", "=", Fse.Portal.appConfiguration.STP.ownerId ] ]).select( "resourceId" ).toArray().map( function( i ) { return i.resourceId } );

        let userGroups = [
            {  groupCategory : "Staff User Groups", fieldName : "staffUserGrp" },
            {  groupCategory : "Permission Groups", fieldName : "permGrp" },
            {  groupCategory : "1FS Groups", fieldName : "onefsGrp" },
            {  groupCategory : "Override Group", fieldName : "overrideGrp" },
            {  groupCategory : "CRM - Override-Groups", fieldName : "overrideGrp" },
            {  groupCategory : "Work Teams", fieldName : "workTeamGrp" },
            {  groupCategory : "CRM - Work Teams", fieldName : "workTeamGrp" },
            {  groupCategory : "CRM - Staff-Roles/Permissions", fieldName : "crmStaffRolePermGrp" },
            {  groupCategory : "CRM - Local-Markets", fieldName : "crmLocMktGrp" },
            {  groupCategory : "Website Team Divisions", fieldName : "webTeamGrp" },
            {  groupCategory : "AG Presentation Site", fieldName : "presentSiteGrp" },
            {  groupCategory : "AG_Corporate", fieldName : "corpGrp" },
            {  groupCategory : "Email Recipients", fieldName : "emailRecipientsGrp" }
        ];

        userGroups.forEach( function( ug ) {
            let permissionFilter = [
                [ "resourceType", "=", "GRP" ], "and", [ "resourceCategory", "=", ug.groupCategory ]
            ]

            assetDefaults[ug.fieldName] = DevExpress.data.query( assetPermissions ).filter( permissionFilter ).select( "resourceId" ).toArray().map( function( i ) { return i.resourceId } );
        })

        let groupTypeCodes = [ "MPR", "MRR", "SME" ];
        groupTypeCodes.forEach( function( groupTypeCode ) {
            let fieldName = `sysGroup${groupTypeCode}`;
            let permissionFilter = [
                [ "resourceType", "=", "GRP" ], "and", [ "resourceSubType", "=", groupTypeCode ]
            ]
            assetDefaults[fieldName] = DevExpress.data.query( assetPermissions ).filter( permissionFilter ).select( "resourceId" ).toArray().map( function( i ) { return i.resourceId } );
        })


        // broNNN fields
        if( Fse.Portal.appConfiguration.STP.ownerType == "MFR" ) {
            assetPermissions.forEach( function( resource ) {

                if( resource.resourceType != "USR" ) return;
                if( resource.resourceOwnerType != "BRO" ) return;

                let fieldName = `bro${resource.resourceOwnerId}`;
                if( ! assetDefaults[fieldName] ) assetDefaults[fieldName] = [];
                assetDefaults[fieldName].push( resource.resourceId );
       
            })
        }

      //  console.log( "assetDefaults", assetDefaults );

        formDataPromise.resolve( assetDefaults );
    })

    return formDataPromise;

}

AssetEditor.prototype.permissionsTabTemplate = function( data ) {

    let instance = this;

    //console.log("permissions tab template");
    //console.log(data);
    let generalItems = [];

    instance.permissionForm = null;


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


    generalItems.push( 

        {
            dataField : "privateYesNo", label : { text : "Restrict Visibility" }, editorType : "dxSwitch",
            
            editorOptions : {
              
                onValueChanged: function (e) {              
                   
                    e.component.option("value", e.value);
                    data.privateYesNo = e.value;
                  instance.permissionForm.itemOption('generalSection.permissionSection', 'visible', e.value);
                  instance.permissionForm.itemOption('generalSection.permissionStaffSection', 'visible', e.value);    
                  instance.permissionForm.itemOption('generalSection.brokerSection', 'visible', e.value);
                  instance.permissionForm.itemOption('generalSection.brokerCompanySection', 'visible', e.value);

                  if(  e.value ) {

                    // check if any selection field already has a value — if so, save is already valid
                    const permissionFields = [
                        "staffUserGrp","permGrp","onefsGrp","overrideGrp","workTeamGrp",
                        "crmStaffRolePermGrp","crmLocMktGrp","webTeamGrp","presentSiteGrp",
                        "corpGrp","emailRecipientsGrp","sysGroupMPR","sysGroupMRR","sysGroupSME",
                        "staff","brokerIds"
                    ];
                    const anySelected = permissionFields.some( function( f ) {
                        const editor = instance.permissionForm.getEditor( f );
                        if( !editor ) return false;
                        const v = editor.option( "value" );
                        return Array.isArray( v ) ? v.length > 0 : !!v;
                    });
                    instance.saveButton.option( "disabled", !anySelected );
                    instance.saveAnotherButton.option( "disabled", true );

                  } else {

                    // reset all permission dropdown selections
                    const permissionFields = [
                        "staffUserGrp","permGrp","onefsGrp","overrideGrp","workTeamGrp",
                        "crmStaffRolePermGrp","crmLocMktGrp","webTeamGrp","presentSiteGrp",
                        "corpGrp","emailRecipientsGrp","sysGroupMPR","sysGroupMRR","sysGroupSME",
                        "staff","brokerIds"
                    ];
                    permissionFields.forEach( function( f ) {
                        const editor = instance.permissionForm.getEditor( f );
                        if( editor ) { editor.option( "value", [] ); }
                    });
                    // also reset any broker staff fields (bro### dynamic fields)
                    const formData = instance.permissionForm.option( "formData" );
                    Object.keys( formData ).forEach( function( f ) {
                        if( /^bro\d+$/.test( f ) ) {
                            const editor = instance.permissionForm.getEditor( f );
                            if( editor ) { editor.option( "value", [] ); }
                        }
                    });
                    instance.saveButton.option( "disabled", false );    
                    instance.saveAnotherButton.option( "disabled", false );
                  }
                  
                 
            }
        }
        } 
    );


    
    instance._createPermissionItems().done( function( permissionItems ) {

        instance._prepareFormData( data ).done( function( assetDefaults ) {


            //console.log( "assetDefaults", assetDefaults );

            //console.log( "PermissionItems", permissionItems );
            //console.log(data);

            const brokerItems = permissionItems.filter(item =>
                item.dataField.startsWith("bro") 
                &&
                !(typeof item.dataField === "string" && item.dataField == "brokerIds")
              );

              const brokerCompanyItems = permissionItems.filter(item =>
                item.dataField == "brokerIds"
              ); 
           
              const groupItems = permissionItems.filter(item =>
                !(typeof item.dataField === "string" && item.dataField.startsWith("bro"))
                        &&
                !(typeof item.dataField === "string" && item.dataField == "staff")
              );

              const staffItems = permissionItems.filter(item =>
                item.dataField == "staff"
              );

              let permissionSectionItems ={ 
                itemType : "group", 
                name : "permissionSection",
                caption : "Groups & Staff",
                colCount : 2,
                visible : data.privateYesNo == 'Y'? true : false,
                items : groupItems
            };


            let permissionStaffSectionItems ={ 
                itemType : "group", 
                name : "permissionStaffSection",
                caption : "",
                colCount : 1,
                width : 250,
                visible : data.privateYesNo == 'Y'? true : false,
                items : staffItems
            };

            

            generalItems.push(permissionSectionItems);
           generalItems.push(permissionStaffSectionItems);

           let brokerCompanySectionItems ={ 
            itemType : "group", 
            name : "brokerCompanySection",
            caption : "Brokers",
            colCount : 1,
            visible : data.privateYesNo == 'Y'? true : false,
            items : brokerCompanyItems
        };

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

                generalItems.push(brokerCompanySectionItems);
         }

              
              let brokerSectionItems ={ 
                itemType : "group", 
                name : "brokerSection",
               // caption : "Brokers",
                colCount : 2,
                visible : data.privateYesNo == 'Y'? true : false,
                items : brokerItems
            };

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

                generalItems.push(brokerSectionItems);
            }

            let generalSectionItems = { 
                itemType : "group", 
                name : "generalSection",
                 caption : " Restriction Settings",
                items : generalItems
            };

            let formItems = [];
            
            
            formItems.push(generalSectionItems);

            instance.permissionForm = permissionFormElement.dxForm( {
                items : formItems,
                formData : assetDefaults,
                //  validationGroup : "AssetEditor",
                onFieldDataChanged : function( e ) {

                    if(e.component.getEditor("staffUserGrp") !== undefined)
                        e.component.option("formData").staffUserGrp = e.component.getEditor("staffUserGrp").option("value");
                    if(e.component.getEditor("permGrp") !== undefined)
                        e.component.option("formData").permGrp = e.component.getEditor("permGrp").option("value");
                    if(e.component.getEditor("workTeamGrp") !== undefined)
                        e.component.option("formData").workTeamGrp = e.component.getEditor("workTeamGrp").option("value");
                    if(e.component.getEditor("onefsGrp") !== undefined)
                        e.component.option("formData").onefsGrp = e.component.getEditor("onefsGrp").option("value");
                    if(e.component.getEditor("overrideGrp") !== undefined)
                        e.component.option("formData").overrideGrp = e.component.getEditor("overrideGrp").option("value");
                     if(e.component.getEditor("crmStaffRolePermGrp") !== undefined)
                        e.component.option("formData").crmStaffRolePermGrp = e.component.getEditor("crmStaffRolePermGrp").option("value");
                     if(e.component.getEditor("crmLocMktGrp") !== undefined)
                        e.component.option("formData").crmLocMktGrp = e.component.getEditor("crmLocMktGrp").option("value");
                     if(e.component.getEditor("webTeamGrp") !== undefined)
                        e.component.option("formData").webTeamGrp = e.component.getEditor("webTeamGrp").option("value");
                     if(e.component.getEditor("presentSiteGrp") !== undefined)
                        e.component.option("formData").presentSiteGrp = e.component.getEditor("presentSiteGrp").option("value");
                     if(e.component.getEditor("corpGrp") !== undefined)
                        e.component.option("formData").corpGrp = e.component.getEditor("corpGrp").option("value");
                     if(e.component.getEditor("emailRecipientsGrp") !== undefined)
                        e.component.option("formData").emailRecipientsGrp = e.component.getEditor("emailRecipientsGrp").option("value");
                    if(e.component.getEditor("sysGroupMPR") !== undefined)
                        e.component.option("formData").sysGroupMPR = e.component.getEditor("sysGroupMPR").option("value");
                    if(e.component.getEditor("sysGroupMRR") !== undefined)
                        e.component.option("formData").sysGroupMRR = e.component.getEditor("sysGroupMRR").option("value");
                    if(e.component.getEditor("sysGroupSME") !== undefined)
                        e.component.option("formData").sysGroupSME = e.component.getEditor("sysGroupSME").option("value");
                    if(e.component.getEditor("brokerStaff") !== undefined)
                        e.component.option("formData").brokerStaff = e.component.getEditor("brokerStaff").option("value");
                    if(e.component.getEditor("staff") !== undefined)
                        e.component.option("formData").staff = e.component.getEditor("staff").option("value");
                    if(e.component.getEditor("nonStaff") !== undefined)
                        e.component.option("formData").nonStaff = e.component.getEditor("nonStaff").option("value");
                    if(e.component.getEditor("brokerUsers") !== undefined)
                        e.component.option("formData").brokerUsers = e.component.getEditor("brokerUsers").option("value");
                    if(e.component.getEditor("brokerIds") !== undefined)
                        e.component.option("formData").brokerIds = e.component.getEditor("brokerIds").option("value");

                    // if(e.component.getEditor("privateYesNo") !== undefined)
                    //         e.component.option("formData").privateYesNo = e.component.getEditor("privateYesNo").option("value");
                    
                    //  instance.permissionForm.option( "formData", {
                    //         privateYesNo : data.privateYesNo ? true : false
                    //     })

                    if((null == e.component.option("formData").staffUserGrp || e.component.option("formData").staffUserGrp.length == 0)
                        && (null == e.component.option("formData").permGrp || e.component.option("formData").permGrp.length == 0)   
                        && (null == e.component.option("formData").workTeamGrp || e.component.option("formData").workTeamGrp.length == 0)
                        && (null == e.component.option("formData").onefsGrp || e.component.option("formData").onefsGrp.length == 0)
                         && (null == e.component.option("formData").staff || e.component.option("formData").staff.length == 0)
                        && (null == e.component.option("formData").overrideGrp || e.component.option("formData").overrideGrp.length == 0)
                        && (null == e.component.option("formData").sysGroupMPR || e.component.option("formData").sysGroupMPR.length == 0)
                        && (null == e.component.option("formData").sysGroupMRR || e.component.option("formData").sysGroupMRR.length == 0)
                        && (null == e.component.option("formData").sysGroupSME || e.component.option("formData").sysGroupSME.length == 0) 
                        // for AG
                        && (null == e.component.option("formData").crmStaffRolePermGrp || e.component.option("formData").crmStaffRolePermGrp.length == 0)
                        && (null == e.component.option("formData").crmLocMktGrp || e.component.option("formData").crmLocMktGrp.length == 0)
                        && (null == e.component.option("formData").webTeamGrp || e.component.option("formData").webTeamGrp.length == 0)
                        && (null == e.component.option("formData").presentSiteGrp || e.component.option("formData").presentSiteGrp.length == 0) 
                        && (null == e.component.option("formData").corpGrp || e.component.option("formData").corpGrp.length == 0) 
                        && (null == e.component.option("formData").emailRecipientsGrp || e.component.option("formData").emailRecipientsGrp.length == 0)              
                       ) {
                    
                        instance.saveButton.option( "disabled", true );
                        }
                        else {
                            instance.saveButton.option( "disabled", false );
                        }
                
                    if( ! instance.updating ) {
                           // console.log("here4");
                        instance.applyValidation( "onFieldDataChanged" );
                        //alert("done");
                    }

                }
            }).dxForm( "instance" );

        });



    })

    return permissionFormElement;

    

}


AssetEditor.prototype.customersTabTemplate = function( data ) {

   // console.log("inside customer's tab");
   // console.log(data);

    let instance = this;
    let fileId = data.fileId;

   // console.log("data in customer's tab");
    if (typeof instance.assetId !== 'undefined' && instance.assetId !== null) {
        fileId = instance.assetId;
    }
    

    let template = $("<div>").css( "padding", "10px 10px 10px 10px" );
    template.append( "<h4>Linked Operators</h4>" );

    let operatorLinks = new LinkManager( { height : "100%", subjectType : data.contentDomain, subjectId : fileId, partnerType : "OPR", label : "" } );
	let distributorLinks = new LinkManager( { height : "100%", subjectType : data.contentDomain, subjectId : fileId, partnerType : "CDR", label : "" } );
 //   let manufacturerLinks = new LinkManager( { height : "100%", subjectType : data.contentDomain, subjectId : data.fileId, partnerType : "MFR", label : "" } );

    let oprSection =  $("<div>").css( { "height" : "100%", "display" : "flex", "flex-direction" : "column" } )
        .append( $("<div>").css( { "flex" : "1 1 auto", "margin-bottom" : "5px" } ).append(  operatorLinks.element() ));
    
    template.append( oprSection ).append( "<h4>Linked Distributors</h4>" );
    let distSection = $("<div>").css( { "height" : "100%", "display" : "flex", "flex-direction" : "column" } )
        .append( $("<div>").css( { "flex" : "1 1 auto" } ).append(  distributorLinks.element() ));

  /*  template.append( distSection ).append( "<h4>Linked Manufacturers</h4>" );
    let mfrSection = $("<div>").css( { "height" : "100%", "display" : "flex", "flex-direction" : "column" } )
        .append( $("<div>").css( { "flex" : "1 1 auto", "border" : "1px solid lime" } ).append(  manufacturerLinks.element() ));
      
    */
        return template.append( distSection );

}

AssetEditor.prototype.productsTabTemplate = function( data ) {

    let instance = this;

    let fileId = data.fileId;

    // console.log("data in customer's tab");
     if (typeof instance.assetId !== 'undefined' && instance.assetId !== null) {
         fileId = instance.assetId;
     }

    let template = $("<div>").css( "padding", "10px 10px 10px 10px" );
    template.append( "<h4>Linked SKUs</h4>" );

    let skuLinks = new LinkManager( { height : "100%", subjectType : data.contentDomain, subjectId : fileId, catalogType : "SKU", label : "" } );
	let prdLinks = new LinkManager( { height : "100%", subjectType : data.contentDomain, subjectId : fileId, catalogType : "PRD", label : "" } );
   // console.log("sku links");
   // console.log(skuLinks);    
    let skuSection =  $("<div>").css( { "height" : "100%", "display" : "flex", "flex-direction" : "column" } )
        .append( $("<div>").css( { "flex" : "1 1 auto", "margin-bottom" : "5px" } ).append(  skuLinks.element() ));
    
    template.append( skuSection ).append( "<h4>Linked Products</h4>" );
    let prdSection = $("<div>").css( { "height" : "100%", "display" : "flex", "flex-direction" : "column" } )
        .append( $("<div>").css( { "flex" : "1 1 auto" } ).append(  prdLinks.element() ));

    return template.append( prdSection );
}