AssetBulkEditor = function( assetData, options) {

    let instance = this;
    instance.updating = false;

    instance.intervalId = 0; 

    instance.bulkSelectedAssets = null;
    instance.assetData = null;

    instance.changes = null;

    instance.rootElement = $("<div>").addClass( "AssetBulkEditor");
    instance.cancelButton = null;
    instance.saveButton = null;
    instance.clearSelectionsCheck = null;
    instance.skipButton = null;
    instance.saveLastButton = null;
    instance.clearSelections = true;

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

    instance.assetForms = null;
    instance.contentDomain = "IMG,DOC";

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

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

   // console.log("AssetBulkEditor options");
  //  console.log( instance.options );
   // console.log( assetData );
   // console.log(instance.options.selectionMetaData.selectionCount);
   // console.log(instance.options.selectionMetaData.selectionAssets);
   // instance.assetId = 0;
    if( instance.options.selectionMetaData.selectionCount > 0 ) {
        instance.bulkSelectedAssets = instance.options.selectionMetaData.selectionAssets;
    }

    instance.actionTypeOptionsMultiple = [
                                            {text :" Select Action", value : "" },
                                            { text : "Add to existing values", value : "A" },
                                            { text : "Overwrite & set to selected values", value : "R" },
                                            { text : "Remove selected values from assets", value : "D" },
                                            { text : "Clear every value currently assigned", value : "C" },
                                           // { text : "Sync all asset values", value : "S" }
                                        ];

    instance.actionTypeOptionsSingle = [
                                        {text :" Select Action", value : "" },
                                        { text : "Overwrite & set to selected values", value : "R" },
                                        { text : "Clear every value currently assigned", value : "C" }
                                    ];

   // instance.assetData = null;    


    if( instance.assetId > 0) {
        instance.refreshEditor();
    } 

     
        instance.createUI( instance.options.tabIndex );
    

}


AssetBulkEditor.prototype.constructor = AssetBulkEditor;


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

AssetBulkEditor.prototype.dispose = function() {

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

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

AssetBulkEditor.prototype.loadAsset = function( assetId ) {

    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.fileId);
        if( ready) {
            d.resolve( assetData );
        }
    })

            
}
AssetBulkEditor.prototype.getCurrentTabIndex = function() {

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

AssetBulkEditor.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);

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

AssetBulkEditor.prototype.refreshEditor = function() {

    let instance = this;

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

    d.done( function( data ) {

        let currentTabIndex = instance.getCurrentTabIndex();
    

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

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

    })

    return d;

}

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

AssetBulkEditor.prototype.createUI = function( currentTabIndex ) {

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

    let instance = this;

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

    let saveButtonText = "Save";

    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.cancelChanges();
            instance.options.assetManager.onAssetCancelled( true );
        }
    } }).dxButton( "instance" );

    instance.clearAllMessage =  $("<div>").dxTextBox( {
                    value : "By selecting the clear action, ALL permission values in Groups & Staff/Broker section will be cleared from your selected asset!",
                    name : "clearAllMessage",
                    labelMode: 'hidden',
                    readOnly: true,
                     inputAttr: {
                                    style: "color:#ff6b00;font-size:10.5px;"
                            },
                    width : "650", visible : false,
    }).css( { "margin" : "0 2px 0 4px", "border" : "none"} ).dxTextBox( "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.clearSelectionsCheck = $("<div>").css( { "margin" : "-5px 0 5px 0" } ).dxCheckBox(
         { text : "Clear Selections",
            value :  instance.clearSelections,
             disabled : false, 
           
              onValueChanged : function( e ) {
                instance.clearSelections = e.value;
       
        }

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

    if( instance.tabPanel ) {

        tabIndex = instance.tabPanel.option( "selectedIndex" );
        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( ) ) }, alert : false },
    ]


      items.push({ title : "Permissions", showButton: true, template : function() {return $("<div>").css( { "padding-top" : "5px" } ).append( instance.permissionsTabTemplate( )) }, alert : false, disabled : false} );
   
      items.push( { title : "Customers", showButton: false , template : function() { return $("<div>").css( { "padding-top" : "5px" } ).append( instance.customersTabTemplate( )) }, alert : false, disabled : false });
    
      items.push( { title : "Products", showButton: false, template : function() { return $("<div>").css( { "padding-top" : "5px" } ).append( instance.productsTabTemplate( )) }, alert : false, disabled : false });
    
      items.push({ title : "Selected Assets", showButton: true, template : function() {return $("<div>").css( { "padding-top" : "5px" } ).append( instance.selectedAssetsTabTemplate( )) }, alert : false, disabled : false} ); 
      
     let renderCount = 0;


    let rendered = $.Deferred(); 
   

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

    
        onSelectionChanged: function(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")
            {
                instance.saveButton.option( "visible", true );
                //instance.saveAnotherButton.option( "visible", true );
                instance.cancelButton.option( "visible", true );
                //instance.skipButton.option( "visible", false );
            }
            else
            {
                instance.saveButton.option( "visible", true );
                instance.saveButton.option( "disabled", false );
                //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( );

        instance.updating = false;

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

        let footToolbarItems =  [
            { location : "before", template : function() { return instance.clearSelectionsCheck.element() } },
            { location : "before", template : function() { return instance.clearAllMessage.element() } },
            { 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" );


}


AssetBulkEditor.prototype.saveChanges = function(saveType) {

    let instance = this;

    instance.formDataToSend = new FormData();

    //console.log("in saveChanges" );
    //console.log(instance.bulkSelectedAssets );

    let currentTabIndex = instance.getCurrentTabIndex();

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

            //assetData = instance.assetData;
            

            assetData =  $.extend( true, {}, instance.getDetailsTabData() );
            assetData =  $.extend( true, assetData, instance.getPermissionsTabData() );

            //console.log( "SAVING DATA" );
            //console.log( assetData );
            assetData['selectedAssets'] = instance.bulkSelectedAssets;
    
           instance.formData = instance.assetForm.option( "formData" );
    
            /*console.log("formData vanilla");
            console.log( instance.formData );*/

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

                let permformData = instance.permissionForm.option( "formData" );
            
                instance.formData = $.extend( true, instance.formData, permformData );
               
                instance.formDataToSend.append( "asset", JSON.stringify( assetData ));
       
      
        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.saveBulkAssets" } );
            $.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 ); 
                }
                saving.notify( "assetData" );
            })
            .fail( function() {
                console.log( "failed");
            })

        
        } );

        saving.done( function()  {
         // console.log( "saving.done" );
          //instance.options.assetManager.selectionPopup.hide();
                     // let assetData = instance.assetData;
               //instance.refreshEditor();
              // console.log(instance.bulkSelectedAssets );
                instance.options.assetManager.onAssetsBulkUpdated(instance.bulkSelectedAssets , instance.clearSelections);
                //instance.moveToNextTab();

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

AssetBulkEditor.prototype.applyValidation = function( origin ) {

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

    let validationResult = DevExpress.validationEngine.validateGroup( "AssetBulkEditor" );
  
    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;

}


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

AssetBulkEditor.prototype.setDetailsTabData = function( ) {
    //console.log( data );
    //this.assetForm.option( "formData", );
}
 
 AssetBulkEditor.prototype._prepareDetailFormData = function( data ) {
 
     let formDataPromise = $.Deferred();
 
        // console.log( "assetDefaults", assetDefaults );
 
         formDataPromise.resolve( assetDefaults );
 
 
     return formDataPromise;
 
 }


AssetBulkEditor.prototype.detailsTabTemplate = function( ) {

    let instance = this;
   
    let formItems = [];
    let categoryItems = [];  

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

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

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

  
    let _categoryId = 0;
    let _categoryList = "";
    let _companyAbbrevName = Fse.Portal.getConfiguration( "STP.clientNameAbbr" );
    instance.saveButton.option( "disabled", false );

   categoryItems.push(
        {
            label : { location : "left", text : "Industry Category", visible: true  },
            dataField : "categoryId",
                 
                  
                  template : function( options, itemElement ) {
      
                      let categoryDropdownBox = $("<div>").dxSelectBox( {
                           dataSource : Fse.Data.newDataSource( { object : "PRD.repCategories", keyField : "categoryId" }),
                            valueExpr : "categoryId",
                            value : _categoryId,
                            displayExpr : "categoryDescription",
                            searchEnabled : true,
                            disabled : true,
                            name : "categoryId",
                            searchExpr : "categoryDescription",
                            searchMode : "contains",
                            showClearButton : true,
                            placeholder : "Select a Category",
                            width : "45%",
                            onValueChanged : function(e)
                        {

                            instance.assetForm.updateData("categoryId", e.value);
                        }
 
                      }).css( { "display" : "inline-block", "margin-left" : "2px", "margin-top" : "8px" } ); 


                     let actionCategorySelectBox = $("<div>").dxSelectBox( {
                           dataSource :  instance.actionTypeOptionsSingle,
                            valueExpr : "value",
                            displayExpr : "text",
                            name : "actionTypeCategory",
                            value: instance.actionTypeOptionsSingle[0].value,
                            placeholder : "Select Action",
                            width : "28%",
                            onValueChanged : function(e)
                                {
                                    instance.assetForm.updateData("categoryId",  categoryDropdownBox.dxSelectBox("instance").option("value"));
                                    instance.assetForm.updateData("actionTypeCategory", e.value);
                                    if(e.value == "" || e.value == "C")
                                    {
                                        categoryDropdownBox.dxSelectBox("instance").option("value", null);
                                        categoryDropdownBox.dxSelectBox("instance").option("disabled", true);
                                    }
                                    else{
                                        categoryDropdownBox.dxSelectBox("instance").option("disabled",e.value ? false : true);
                                    }
                                }
                    }).css( { "display" : "inline-block", "margin-right" : "8px"  } ); 
                    

                     itemElement.append( actionCategorySelectBox ).append( categoryDropdownBox );
                }
    });
    
    
  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` },
                         
                  template : function( options, itemElement ) {
      
                      let companyCategoryDropdownBox = $("<div>").dxDropDownBox( {
                        placeholder : "Select Category",
                        width : "45%",
                        disabled : true,
                        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); 
                },

                 onValueChanged : function(e)
                        {

                            instance.assetForm.updateData("catIds", e.value);
                        }
 

                      }).css( { "display" : "inline-block", "margin-left" : "2px" } );

                    
                     let actionStaffCategorySelectBox = $("<div>").dxSelectBox( {
                           dataSource : instance.actionTypeOptionsMultiple,
                            valueExpr : "value",
                            displayExpr : "text",
                            value:instance.actionTypeOptionsMultiple[0].value,
                            name : "actionTypeStaffCategory",
                            placeholder : "Select Action",
                            width : "28%",
                            onValueChanged : function(e)
                                {

                                    instance.assetForm.updateData("actionTypeStaffCategory", e.value);
                                    instance.assetForm.updateData("catIds",  companyCategoryDropdownBox.dxDropDownBox("instance").option("value"));

                                     if(e.value == "" || e.value == "C")
                                    {
                                        companyCategoryDropdownBox.dxDropDownBox("instance").option("value", null);
                                        companyCategoryDropdownBox.dxDropDownBox("instance").option("disabled", true);
                                    }
                                    else{
                                        companyCategoryDropdownBox.dxDropDownBox("instance").option("disabled",e.value ? false : true);
                                    }

                                }
                    }).css( { "display" : "inline-block", "margin-right" : "8px"  } ); 

                     itemElement.append( actionStaffCategorySelectBox ).append( companyCategoryDropdownBox );
                }
    });

    categoryItems.push(
{
            label : { text : "Tags" }, dataField : "keyWords",
                  
                  template : function( options, itemElement ) {
      
                      let keywordTextBox = $("<div>").dxTextBox( {
                            width : "60%",
                            disabled : true,
                            maxLength: 500,

                          onValueChanged : function(e)
                        {

                            instance.assetForm.updateData("keyWords", e.value);
                        }
                      }).css( { "display" : "inline-block", "margin-left" : "2px" } );

                      let actionTagsSelectBox = $("<div>").dxSelectBox( {
                           dataSource : instance.actionTypeOptionsMultiple,
                            valueExpr : "value",
                            displayExpr : "text",
                            value:instance.actionTypeOptionsMultiple[0].value,
                            name : "actionTypeTags",
                            placeholder : "Select Action",
                            width : "28%",
                            onValueChanged : function(e)
                                {

                                    instance.assetForm.updateData("actionTypeTags", e.value);
                                   // instance.assetForm.updateData("keyWords",  keywordTextBox.dxTextBox("instance").option("value"));

                                     if(e.value == "" || e.value == "C")
                                    {
                                        keywordTextBox.dxTextBox("instance").option("value", null);
                                        keywordTextBox.dxTextBox("instance").option("disabled", true);
                                    }
                                    else{
                                        keywordTextBox.dxTextBox("instance").option("disabled",e.value ? false : true);
                                    }

                                }
                    }).css( { "display" : "inline-block", "margin-right" : "8px"  } ); 
                    

                     itemElement.append( actionTagsSelectBox ).append( keywordTextBox );
                }
            }
    );
    }).then(function() {
        instance.assetForm.repaint();
     }); 



       let assetSectionItems = [];
       // assetSectionItems.push(fileRowItems);
       // assetSectionItems.push(thnRowItems);

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

        
        let publishItems = [];

        publishItems.push(
             {
               dataField : "publishDate", label : { text : "Publish Date" },
                  
                  template : function( options, itemElement ) {
      
                      let startDateBox = $("<div>").dxDateBox( {
                             type: 'date',
                             value: publishDate,
                             width : 120,    
                             disabled : true,
                        onValueChanged : function(e)
                        {

                            instance.assetForm.updateData("publishDate", e.value);
                        }

                      }).css( { "display" : "inline-block", "margin-left" : "2px" } );

                      let enableStartDateCheckBox = $("<div>").dxCheckBox( {
                      text: "",
                      value: false,
                      name: "enableStartDate",
                      onValueChanged: function (e) {
                     //console.log("checkbox value changed");

                     startDateBox.dxDateBox("instance").option("disabled",e.value ? false : true);
                     instance.assetForm.updateData("publishDate", startDateBox.dxDateBox("instance").option("value"));
                       
                    }
                    }).css( { "display" : "inline-block", "margin-right" : "8px"  } ); 
                    

                     itemElement.append( enableStartDateCheckBox ).append( startDateBox );
                }            
        },

        {
            dataField : "unpublishDate", label : { text : "Unpublish Date" }, 
                  
                  template : function( options, itemElement ) {
      
                      let endDateBox = $("<div>").dxDateBox( {
                             type: 'date',
                             value: unpublishDate,
                             width : 120,    
                             disabled : true,

                     onValueChanged : function(e)
                        {

                            instance.assetForm.updateData("unpublishDate", e.value);
                        }
                      }).css( { "display" : "inline-block", "margin-left" : "2px" } );

                      let enableEndDateCheckBox = $("<div>").dxCheckBox( {
                      text: "",
                      value: false,
                      name: "enableEndDate",
                      onValueChanged: function (e) {
                     //console.log("checkbox value changed");

                     endDateBox.dxDateBox("instance").option("disabled",e.value ? false : true);
                      instance.assetForm.updateData("unpublishDate", endDateBox.dxDateBox("instance").option("value"));
                       
                    }
                    }).css( { "display" : "inline-block", "margin-right" : "8px"  } ); 
                    

                     itemElement.append( enableEndDateCheckBox ).append( endDateBox );
                }            
        },

        
        {
            dataField : "internalOnly", label : { text : "Internal Only" }, 
                  
                  template : function( options, itemElement ) {

      
                      let internalOnlySwitchBox = $("<div>").dxSwitch( {
                           value: false,
                            name : "internalOnly",
                            disabled: true ,
                            onValueChanged: function (e) {
                                instance.assetForm.updateData("internalOnly", e.value);
                            }
                      
                      }).css( { "display" : "inline-block", "margin-left" : "2px" } );

                      let enableInternalOnlyCheckBox = $("<div>").dxCheckBox( {
                      text: "",
                      value: false,
                      name: "enableInternalOnly",
                      onValueChanged: function (e) {
                     //console.log("checkbox value changed");

                     internalOnlySwitchBox.dxSwitch("instance").option("disabled",e.value ? false : true);
                      instance.assetForm.updateData("internalOnly", internalOnlySwitchBox.dxSwitch("instance").option("value"));
                       
                    }
                    }).css( { "display" : "inline-block", "margin-right" : "8px"  } ); 
                    

                     itemElement.append( enableInternalOnlyCheckBox ).append( internalOnlySwitchBox );
                }            
        }
         );


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

        let settingSubSectionItems = [];
        settingSubSectionItems.push(publishRowItems);

        //settingSubSectionItems.push();

         settingSubSectionItems.push(
            
         {
            label : { text : "Sort Rank" }, dataField : "sortRank",
                  
                  template : function( options, itemElement ) {
      
                      let sortRankNumberBox = $("<div>").dxNumberBox( {
                            min: 1,
                            max: 99,
                            showSpinButtons: true,
                            width : 70,
                            disabled : true,
                          onValueChanged : function(e)
                        {

                            instance.assetForm.updateData("sortRank", e.value);
                        }
                      }).css( { "display" : "inline-block", "margin-left" : "2px" } );

                      let enableSortRankCheckBox = $("<div>").dxCheckBox( {
                      text: "",
                      value: false,
                      name: "enableSortRank",
                      onValueChanged: function (e) {
                     //console.log("checkbox value changed");

                     sortRankNumberBox.dxNumberBox("instance").option("disabled",e.value ? false : true);
                       
                    }
                    }).css( { "display" : "inline-block", "margin-right" : "8px"  } ); 
                    

                     itemElement.append( enableSortRankCheckBox ).append( sortRankNumberBox );
                }
            });
 
        

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

   
        formItems.push({     
                
                template: function(itemData, itemElement) {

                    $("<span>").text(function() {
                        return "Click on the checkboxes/dropdowns to enable editing for the fields."
                      }
                    ).css( { "display" : "inline" }).appendTo(itemElement);
                }
            },
        
        );
        formItems.push(categorySectionItems);
       // formItems.push(dateSectionItems);
        formItems.push(settingSectionItems);
        

   
    let assetDefaults = {
        assetEnabled : "N"
    };

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

        }).dxForm( "instance" );

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


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

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

AssetBulkEditor.prototype._createPermissionItems = function() {
   // console.log(this);
   let instance = 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 ) {


          permissionItems.push(
                { 
                dataField : "groupItemsAction", 
                editorType : "dxSelectBox", 
                editorOptions : {
                 dataSource : instance.actionTypeOptionsMultiple,
                            valueExpr : "value",
                            displayExpr : "text",
                            //value: instance.actionTypeOptionsMultiple[0].value,
                            name : "groupItemsAction",
                            placeholder : "Select Action",
                            width : "30%",
                            onValueChanged : function(e)
                                {
                                    
                                   //console.log("groupItemsAction changed");
                                    //groupItemsActionSelectBox.dxSelectBox("instance").option("value", e.value);
                                    //instance.assetForm.updateData("catIds",  companyCategoryDropdownBox.dxDropDownBox("instance").option("value"));

                                     if(e.value == "" || e.value == "C")
                                    {

                                         instance.permissionForm.itemOption('generalSection.permissionSection2', 'disabled', true);
                                        instance.permissionForm.itemOption('generalSection.permissionStaffSection', 'disabled', true);
                                        instance.saveButton.option( "disabled", true );
                                        

                                        //companyCategoryDropdownBox.dxDropDownBox("instance").option("value", null);
                                       // companyCategoryDropdownBox.dxDropDownBox("instance").option("disabled", true);
                                    }
                                    else{
                                      instance.permissionForm.itemOption('generalSection.permissionSection2', 'disabled', false);
                                        instance.permissionForm.itemOption('generalSection.permissionStaffSection', 'disabled', false);
                                        
                                    }

                                      e.component.option("value", e.value);
                                   instance.permissionForm.updateData("groupItemsAction", e.value);

                                     //instance.permissionForm.updateData("groupItemsAction", e.value);

                                
                    }
                }} );

        categories.forEach( function( fe ) {

            
            let catId = 0;
            let fieldName = "";

            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 ] , "and", [ "groupName", "notcontains", "Dev Team"] );

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

                       
                    }
                }
            });
        
          
        })  



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

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

        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 : "brokerItemsAction", 
                editorType : "dxSelectBox", 
                editorOptions : {
                 dataSource : instance.actionTypeOptionsMultiple,
                            valueExpr : "value",
                            displayExpr : "text",
                            //value: instance.actionTypeOptionsMultiple[0].value,
                            name : "brokerItemsAction",
                            placeholder : "Select Action",
                            width : "30%",
                            onValueChanged : function(e)
                                {
                                   
                                    //brokerItemsActionSelectBox.dxSelectBox("instance").option("value", e.value);
                                    //instance.assetForm.updateData("catIds",  companyCategoryDropdownBox.dxDropDownBox("instance").option("value"));
                                        //console.log("brokerItemsAction changed");
                                     if(e.value == "" || e.value == "C")
                                    {

                                        instance.permissionForm.itemOption('generalSection.brokerCompanySection2', 'disabled', true);
                                        instance.permissionForm.itemOption('generalSection.brokerSection', 'disabled', true);
                                         instance.saveButton.option( "disabled", true );

                                    }
                                    else{
                                      instance.permissionForm.itemOption('generalSection.brokerCompanySection2', 'disabled', false);
                                      instance.permissionForm.itemOption('generalSection.brokerSection', 'disabled', false);
                                    }

                                     e.component.option("value", e.value);
                                    instance.permissionForm.updateData("brokerItemsAction", e.value);
                    }
                }} );


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

                

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

                })

            }
            permissionItemsPromise.notify();

        })
    });



    return permissionItemsPromise;
}

AssetBulkEditor.prototype._prepareFormData = function() {

    let formDataPromise = $.Deferred();

    let _assetId = 0;
    let _assetType = "DOC"

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

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

        const assetDefaults = {
            privateYesNo : null,
            assetEnabled : "Y",
            brokerStaff :"",
            staff : [],
            nonStaff : [],
            brokerUsers : [],
            staffUserGrp : [],
            permGrp : [],
            onefsGrp : [],
            overrideGrp : [],
            workTeamGrp : [],
            sysGroupMPR : [],
            sysGroupMRR : [],
            sysGroupSME : [],
            brokerIds : [],
            crmStaffRolePermGrp : [],
            crmLocMktGrp : [],
            webTeamGrp : [],
            presentSiteGrp : [],
            corpGrp : [],
            emailRecipientsGrp : [],
            brokerItemsAction : "", 
            groupItemsAction : ""
        };            

      //  assetDefaults.brokerIds = DevExpress.data.query( assetPermissions ).filter( [ "resourceType", "=", "BRO" ] ).select( "resourceId" ).toArray().map( function( i ) { return i.resourceId } );
       // 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 : "Work Teams", fieldName : "workTeamGrp" }
        ];

        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;

}

AssetBulkEditor.prototype.permissionsTabTemplate = function(  ) {

    let instance = this;

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

    instance.permissionForm = null;
    instance.restrictSwitchBoxValue = false;
    instance.privateYesNo = null; // this will hold the value for the Restrict Visibility switch. It can be true, false or null. Null indicates that there is no data to determine whether it's private or not, and in this case the switch will be disabled.
    instance.saveButton.option( "disabled", true );

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


    generalItems.push( 

        {
                
            dataField : "privateYesNo", label : { text : "Restrict Visibility" }, 
                  
                  template : function( options, itemElement ) {

                    console.log("privateYesNo template");
                    console.log(instance.privateYesNo);

                      let restrictSwitchBox = $("<div>").dxSwitch( {
                            value: instance.privateYesNo,
                            name : "privateYesNo",
                            disabled: instance.privateYesNo === null ? true : false, // disable the switch if there is no data to indicate whether it's private or not
                            onValueChanged: function (e) {              
                   
                                e.component.option("value", e.value);
                                instance.privateYesNo = e.value;
                                instance.permissionForm.updateData("privateYesNo", e.value);

                                  const permissionFields = [
                          "staffUserGrp","permGrp","onefsGrp","overrideGrp","workTeamGrp",
                          "crmStaffRolePermGrp","crmLocMktGrp","webTeamGrp","presentSiteGrp",
                          "corpGrp","emailRecipientsGrp","sysGroupMPR","sysGroupMRR","sysGroupSME",
                          "staff","brokerIds"
                      ];

                                if ( e.value ) {
                                    // switch turned ON — show sections, keep disabled until action selected
                                    instance.permissionForm.itemOption('generalSection.permissionSection', 'visible', true);
                                    instance.permissionForm.itemOption('generalSection.permissionSection2', 'visible', true);
                                    instance.permissionForm.itemOption('generalSection.permissionStaffSection', 'visible', true);
                                    instance.permissionForm.itemOption('generalSection.brokerSection', 'visible', true);
                                    instance.permissionForm.itemOption('generalSection.brokerCompanySection', 'visible', true);
                                    instance.permissionForm.itemOption('generalSection.brokerCompanySection2', 'visible', true);
                                    instance.permissionForm.itemOption('generalSection.permissionSection2', 'disabled', true);
                                    instance.permissionForm.itemOption('generalSection.permissionStaffSection', 'disabled', true);
                                    instance.permissionForm.itemOption('generalSection.brokerSection', 'disabled', true);
                                    instance.permissionForm.itemOption('generalSection.brokerCompanySection2', 'disabled', true);
                                    // enable save only if something is already selected
                                    const anySelected = permissionFields.some( function( f ) {
                                        const editor = instance.permissionForm.getEditor( f );
                                          if( editor ) 
                                          {
                                        const v = editor.option( "value" );
                                        return Array.isArray( v ) ? v.length > 0 : !!v;
                                          }
                                    });
                                    instance.saveButton.option( "disabled", !anySelected );
                                } else {
                                    // switch turned OFF — reset editors BEFORE hiding so getEditor() still works
                                    permissionFields.forEach( function( f ) {
                                        const editor = instance.permissionForm.getEditor( f );
                                        if( editor ) { editor.option( "value", [] ); }
                                        instance.permissionForm.updateData( f, [] );
                                    });
                                    // reset action dropdowns
                                    ["groupItemsAction", "brokerItemsAction"].forEach( function( f ) {
                                        const editor = instance.permissionForm.getEditor( f );
                                        if( editor ) { editor.option( "value", "" ); }
                                        instance.permissionForm.updateData( f, "" );
                                    });
                                    // reset dynamic bro### broker staff 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.permissionForm.updateData( f, [] );
                                        }
                                    });
                                    // now hide sections
                                    instance.permissionForm.itemOption('generalSection.permissionSection', 'visible', false);
                                    instance.permissionForm.itemOption('generalSection.permissionSection2', 'visible', false);
                                    instance.permissionForm.itemOption('generalSection.permissionStaffSection', 'visible', false);
                                    instance.permissionForm.itemOption('generalSection.brokerSection', 'visible', false);
                                    instance.permissionForm.itemOption('generalSection.brokerCompanySection', 'visible', false);
                                    instance.permissionForm.itemOption('generalSection.brokerCompanySection2', 'visible', false);
                                    instance.saveButton.option( "disabled", false );
                                }
                 
                        }
                           
                      }).css( { "display" : "inline-block", "margin-left" : "2px" } );

                      let enableRestrictCheckBox = $("<div>").dxCheckBox( {
                      text: "",    
                      value: instance.restrictSwitchBoxValue,    
                              
                      name: "enableRestrictSwitch",
                      onValueChanged: function (e) {
                     //console.log("checkbox value changed");
                      //  console.log(e.value);
                     restrictSwitchBox.dxSwitch("instance").option("disabled",e.value ? false : true);
                     instance.saveButton.option( "disabled", false );
                     instance.restrictSwitchBoxValue = e.value;
                    
                     if(e.value){
                        instance.privateYesNo = false;
                        } else {
                            instance.privateYesNo = null;
                        }

                     instance.permissionForm.updateData("privateYesNo",instance.privateYesNo);
                     instance.permissionForm.updateData("enableRestrictSwitch", e.value);
                    }
                    }).css( { "display" : "inline-block", "margin-right" : "8px"  } ); 
                    

                     itemElement.append( enableRestrictCheckBox ).append( restrictSwitchBox );
                }         
        } 
    );


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

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


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

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

            const brokerItems = permissionItems.filter(item =>
                item.dataField.startsWith("bro") 
                &&
                item.dataField != "brokerItemsAction"
                &&
                !(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")
                   &&
                !(typeof item.dataField === "string" && item.dataField == "groupItemsAction")
              );

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

             // console.log("permissionItems");
              //console.log(permissionItems);

               const groupActionItems = permissionItems.filter(item =>
                item.dataField == "groupItemsAction"
              ); 

              const brokerActionItems = permissionItems.filter(item => 
                item.dataField == "brokerItemsAction"
                );

            //  staffItems.push(...groupActionItems);
              // console.log("groupItemsActionItems");
              //console.log(groupActionItems);

             // console.log("groupItems");
             // console.log(groupItems);
//groupActionItems.push(...groupItems);



/*let group = items.find(i => i.name === "permissionSection");

// Reorder its items
let g = group.items;

// Example: swap positions
[g[0], g[1]] = [g[1], g[0]];

form.option("items", items);*/



              let permissionSectionItems ={ 
                itemType : "group", 
                name : "permissionSection",
                caption : "Groups & Staff",
                colCount : 1,
                width : 250,
                visible : instance.privateYesNo? true : false,
                items : groupActionItems
            };

            let permissionSectionItems2 ={ 
                itemType : "group", 
                name : "permissionSection2",
                caption : "",
                colCount : 2,
                width : 500,
                visible : instance.privateYesNo? true : false,
                items : groupItems
            };



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

         


            generalItems.push(permissionSectionItems);
            generalItems.push(permissionSectionItems2);
           
           generalItems.push(permissionStaffSectionItems);
           // generalItems.push(groupActionSectionItems);


             let brokerCompanySectionItems ={ 
                itemType : "group", 
                name : "brokerCompanySection",
                caption : "Brokers",
                colCount : 1,
                width : 250,
                visible : instance.privateYesNo? true : false,
                items : brokerActionItems
            };

           let brokerCompanySectionItems2 ={ 
            itemType : "group", 
            name : "brokerCompanySection2",
            caption : "",
            colCount : 1,
            visible : instance.privateYesNo? true : false,
            items : brokerCompanyItems
        };

         generalItems.push(brokerCompanySectionItems);
        generalItems.push(brokerCompanySectionItems2);

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

            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 : "AssetBulkEditor",
                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("brokerItemsAction") !== undefined)
                        e.component.option("formData").brokerItemsAction = e.component.getEditor("brokerItemsAction").option("value");
                   
                    if(e.component.getEditor("groupItemsAction") !== undefined)
                        e.component.option("formData").groupItemsAction = e.component.getEditor("groupItemsAction").option("value");

                  if(e.component.option("formData").brokerItemsAction == "C" || e.component.option("formData").groupItemsAction == "C" ){
                       // console.log("here3"); 
                        instance.clearAllMessage.option( "visible", true );
                        
                  }
                  else
                  { instance.clearAllMessage.option( "visible", false );
                  }


                  // if switch is ON, enable save as soon as any permission field has a selection
                  if( instance.privateYesNo ) {
                       const permissionFields = [
                          "staffUserGrp","permGrp","onefsGrp","overrideGrp","workTeamGrp",
                          "crmStaffRolePermGrp","crmLocMktGrp","webTeamGrp","presentSiteGrp",
                          "corpGrp","emailRecipientsGrp","sysGroupMPR","sysGroupMRR","sysGroupSME",
                          "staff","brokerIds"
                      ];
                      const fd = e.component.option("formData");
                      const anySelected = permissionFields.some( function( f ) {
                          const v = fd[f];
                          return Array.isArray( v ) ? v.length > 0 : !!v;
                      });
                      // also check dynamic bro### fields
                      const broSelected = Object.keys( fd ).some( function( f ) {
                          return /^bro\d+$/.test( f ) && Array.isArray( fd[f] ) && fd[f].length > 0;
                      });

                      if( Fse.Portal.appConfiguration.STP.ownerType == "MFR" ) {
                      instance.saveButton.option( "disabled", !anySelected && !broSelected );
                      }
                        else{

                             instance.saveButton.option( "disabled", !anySelected);
                        }

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

                }
            }).dxForm( "instance" );

        });



    })

    return permissionFormElement;

    

}


AssetBulkEditor.prototype.customersTabTemplate = function(  ) {

    console.log("inside customer's tab");
    //console.log(data);
    //assetData['selectedAssets'] = instance.bulkSelectedAssets;

   //console.log(instance.bulkSelectedAssets);
    let instance = this;
   // console.log(instance.bulkSelectedAssets);

    let _fileIdList = [];
    if(instance.bulkSelectedAssets.length >= 1){
    instance.bulkSelectedAssets.forEach( function( asset ) {
        if( asset.contentDomain == "DOC" ) {
            _fileIdList.push( asset.fileId );
        }
    })

    }

    _fileIdList = _fileIdList.join(",");

    //console.log("file id list");
   // console.log(_fileIdList);

    let template = $("<div>").css( "padding", "10px 10px 10px 10px" );
    template.append( "<i>These selections represent a collective list of Operators/Distributors already assigned to these assets</i>" );
    template.append( "<br><br>" );
    template.append( "<h4>Linked Operators</h4>" );

    let operatorLinks = new LinkManager( { height : "100%", subjectType : "DOC", subjectId : _fileIdList, partnerType : "OPR", label : "" } );
	let distributorLinks = new LinkManager( { height : "100%", subjectType : "DOC", subjectId : _fileIdList, 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 );

}

AssetBulkEditor.prototype.productsTabTemplate = function( ) {

    let instance = this;
    //console.log(instance.bulkSelectedAssets);

    let _fileIdList = [];
    
    if(instance.bulkSelectedAssets.length >= 1){
    instance.bulkSelectedAssets.forEach( function( asset ) {
        if( asset.contentDomain == "DOC" ) {
            _fileIdList.push( asset.fileId );
        }
    })

    }

    _fileIdList = _fileIdList.join(",");

    //console.log(_fileIdList);

    let template = $("<div>").css( "padding", "10px 10px 10px 10px" );
    template.append( "<i>These selections represent a collective list of Operators/Distributors already assigned to these assets</i>" );
    template.append( "<br><br>" );
    template.append( "<h4>Linked SKUs</h4>" );

    let skuLinks = new LinkManager( { height : "100%", subjectType : "DOC", subjectId : _fileIdList, catalogType : "SKU", label : "" } );
	let prdLinks = new LinkManager( { height : "100%", subjectType : "DOC", subjectId : _fileIdList, 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 );
}

AssetBulkEditor.prototype.removeAssetSelection = function( removeKey ) {


    let instance = this;

   // console.log( "removeSelection : for assetSelectionKey " + removeKey  );

    
    let key =  removeKey;
    let selections = {
        selectOperation :  "deselectByKey",
        key : key
    }

     Fse.Ajax.performAction( {
        object : "CMA.updateAssetSelections",
        data : selections
    }).then(function (result) {
    	// success
      
       // instance.selectedAssetsDataGrid.refresh();
      instance.updateFilter();

    });
}

AssetBulkEditor.prototype.updateFilter = function( ) {

    let instance = this;

     let selectedDataSource = Fse.Data.newDataSource( { object : "cma.assetListSelectionInfo", paginate : false, pageSize : 50, keyField : "selectionKey" , objectParams : { contentDomain : this.contentDomain} } );

        selectedDataSource.load().done (function( items ) 
        {

            instance.options.selectionMetaData = items[0];          
            instance.selectedAssetsDataGrid.option( "dataSource", instance.options.selectionMetaData.selectionAssets );

            if( instance.options.selectionMetaData.selectionCount > 0 ) {
                instance.bulkSelectedAssets = instance.options.selectionMetaData.selectionAssets;
            }

        instance.updateSummary(instance.options.selectionMetaData.selectionAssets);

            
        });



}


AssetBulkEditor.prototype.selectedAssetsTabTemplate = function( ) {

    let instance = this;
     instance.createSelectedAssetsDataGrid();

    let template = $("<div>");
    $("<div id='summaryBar'></div>").css( "padding", "10px 10px 10px 10px" ).appendTo(template);

   
   // let gridDiv = $("<div id='selectedAssetsGrid'></div>");
    template.append(instance.selectedAssetsDataGrid.element());

    instance.updateFilter();
 
    //template = template.append($("<div id='selectedAssetsGrid'></div>")).append( instance.selectedAssetsDataGrid.element() );

    return template;
}


AssetBulkEditor.prototype.deleteRow = function (options){

    let instance  = this;
    const key = options.key;
    instance.removeAssetSelection( key.assetSelectionKey );
}


AssetBulkEditor.prototype.createSelectedAssetsDataGrid = function ()
{
    let instance = this;

    let columns = [];
    columns.push( {dataField : "title", caption : "Title" ,  allowHeaderFiltering : false,
             allowSearch: false} );
    columns.push( 
         { dataField : "fileExt", caption: 'Type', 
			width : 60,
			alignment : 'center',
            allowHeaderFiltering : false,
            lookup : {
                dataSource : { store : { type : "array", data : [
                    { value : "docx", text : "docx" },
                    { value : "doc", text : "doc" },
                    { value : "pdf", text : "pdf" } ,
                    { value : "gif", text : "gif" },
                    { value : "bmp", text : "bmp" },
                    { value : "png", text : "png" },
                    { value : "jpg", text : "jpg" },
                    { value : "html", text : "html" },
                    { value : "xls", text : "xls" },
                    { value : "xlsx", text : "xlsx" },
                    { value : "csv", text : "csv" },
                    { value : "xlsm", text : "xlsm" },
                    { value : "ppt", text : "ppt" },
                    { value : "pptx", text : "pptx" },
                    { value : "pptm", text : "pptm" },
                    { value : "txt", text : "txt" },
                    { value : "dat", text : "dat" },  
                    { value : "mp3", text : "mp3" },
                    { value : "mp4", text : "mp4" },
                    { value : "mov", text : "mov" },
                    { value : "avi", text : "avi" },
                    { value : "wmv", text : "wmv" },
                    { value : "flv", text : "flv" },
                    { value : "mkv", text : "mkv" },
                    { value : "vob", text : "vob" },
                    { value : "3gp", text : "3gp" },
                    { value : "mpeg", text : "mpeg" },
                    { value : "mpg", text : "mpg" },
                    { value : "zip", text : "zip" },
                    { value : "rar", text : "rar" },
                    { value : "7z", text : "7z" },
                    { value : "tar", text : "tar" },
                    { value : "gz", text : "gz" },
                    { value : "eml", text : "eml" },
                    { value : "msg", text : "msg" },
                    { value : "psd", text : "psd" },
                    { value : "ai", text : "ai" },
                    { value : "indd", text : "indd" },
                    { value : "eps", text : "eps" },
                    { value : "css", text : "css" },
                    { value : "tiff", text : "tiff" },
                    { value : "tif", text : "tif" },
                    { value : "svg", text : "svg" },
                    { value : "jfif", text : "jfif" },
                    { value : "ico", text : "ico" },           
                    { value : "log", text : "log" },
                    { value : "potx", text : "potx" },
                    { value : "potm", text : "potm" },
                    { value : "ppsx", text : "ppsx" },
                    { value : "ppsm", text : "ppsm" },
                    { value : "dotx", text : "dotx" },
                    { value : "dot", text : "dot" },
                    { value : "docm", text : "docm" },
                    { value : "xml", text :"xml" },
                    { value : "xltx", text :"xltx" },
                    { value :"mpeg", text :"mpeg"},
                    { value : "wpl", text : "wpl" },                   
                    { value : "oft", text : "oft" },
                    { value : "fhprj", text : "fhprj" },
                    { value : "php", text : "php" },
                    { value : "pub", text : "pub" },
                    { value : "webarc", text : "webarc" },
                    { value : "xps", text : "xps" },
                    { value : "vsd", text : "vsd" },
                    { value : "xltm", text : "xltm" },
                    { value : "ipa", text : "ipa" },
                    { value : "ics", text : "ics" },
                    { value : "pps", text : "pps" },
                    { value : "m4v", text : "m4v" },
                    { value : "msi", text : "msi" },
                    { value : "css", text : "css" },
                    { value : "wbk", text : "wbk" },
                    { value : "htm", text : "htm" },
                    { value : "ttf", text : "ttf" },
                    { value : "msg", text : "msg" },
                    { value : "mdi", text : "mdi" },
                    { value : "mid", text : "mid" },
                    { value : "mht", text : "mht" },
                    { value : "tmp", text : "tmp" },
                    { value : "xltx", text : "xltx" },
                    { value : "jpeg", text : "jpeg" },
                    { value : "swf", text : "swf" },
                    { value : "xlsb", text : "xlsb" },
                    { value : "rwz", text : "rwz" },
                    { value : "zip", text : "zip" }
   
                ], key : "value" }},
                valueExpr : "value",
                displayExpr : "text"
            },

			cellTemplate(container, options) {

                let fileExt = options.value.toLowerCase().trim();
                let icon = instance.iconForFileExt( fileExt );
                container.addClass('chart-cell');
                if( icon ) {
                    
                    container.append( $("<i>").addClass( "dx-icon-" + icon ).attr( "title", fileExt ));
                } else {
                    container.append( fileExt );
                }
            }
			  
        } );

        columns.push( {
                caption: "Delete",
                width: 60,
                alignment: "center",
                cellTemplate: function(container, options) {
                    $("<a>")
                        .text("X")                 
                        .addClass("delete-link")     
                        .css("cursor", "pointer")
                        .on("click", function() {
                            instance.deleteRow(options);
                        })
                        .appendTo(container);
                }
            });


           // console.log(instance.options.selectionMetaData.selectionAssets);

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


    instance.selectedAssetsDataGrid = gridContainer.dxDataGrid( {
        height : "100%",
        columns : columns,
		showBorders : true,
		allowColumnResizing : true,
		allowColumnReordering : true,
       // allowSearch : false,
		filterRow : { visible : true },
        headerFilter: {
            visible: true,
          },      
    
          
         // searchPanel: { visible: false },
          columnResizeMode : "nextColumn",
        columnChooser : {  enabled : false },
        rowAlternationEnabled : true,
		scrolling : { mode : "virtual" },

        selection : {
            mode : "single"
        }
       
    }).dxDataGrid( "instance" );

}


AssetBulkEditor.prototype.iconForFileExt = function( fileExt ) {

    if( ! fileExt ) { return null };

    fileExt = fileExt.toUpperCase().replace( /^\s+|\s+$/, "" );

    let icon = null;
    switch ( fileExt ) {

        case 'PPTX' :
            icon = "pptxfile";
            break;

        case 'PPT' : 
            icon = "pptfile";
            break;

        case 'CSV' : 
            icon = "textdocument";
            break;

        case 'DOCX' :
            icon = "docxfile";
            break;

        case 'DOC' :
            icon = "docfile";
            break;

        case 'PDF' :
            icon = "pdffile";
            break;

        case 'XLS' :
            icon = "xlsfile";
            break;
            
        case 'XLSX' :
            icon = "xlsxfile";
            break;

        case 'JPG' :
        case 'TIF' :
        case 'PNG' :
            icon = "photo";
            break;

        case 'MP4' :
            icon = "video";
            break;
        case 'RTF' :
            icon = "rtffile";
            break;
                
        case 'TXT' :
            icon = "txtfile";
            break;

        default :
            icon = "file";
            break;
                
    }

    return icon;

}


AssetBulkEditor.prototype.updateSummary = function( d1 ) {

    const total = d1.length;

    // Count by file type
    const counts = d1.reduce((acc, row) => {
        let type = row.fileExt;   // <-- change to your field name

       // console.log("file ext" +type + "---");
        switch (type.toLowerCase().trim()) {
            case 'docx': 
            case 'doc': type = 'Word Document'; break;
            case 'pdf': type = 'PDF Document'; break;
            case 'xls':
            case 'xlsx': type = 'Excel Spreadsheet'; break;
            case 'ppt':
            case 'pptx': type = 'PowerPoint Presentation'; break;
            case 'csv': type = 'CSV File'; break;
            case 'txt': type = 'Text File'; break;
            case 'html': type = 'HTML Document'; break;
            case 'png':
            case 'jpg':
            case 'jpeg': 
            case 'tif':
            case 'tiff': type = 'Image File'; break;
            case 'zip': type = 'Zip File'; break;
            case 'mp4': type = 'Video File'; break;
            case 'rtf': type = 'Rich Text Format'; break;
            default:
                type = 'Other';
        }
        acc[type] = (acc[type] || 0) + 1;
        return acc;
    }, {});

            let summaryHtml = `<table width="100%" style="background: #f0f0f0;">
                                <tr>
                                    <td width ="50%"><b>Total Assets:</b> ${total}</td>
                                    <td width ="50%"><b>Types:</b>
                                    ${Object.keys(counts)
                                        .map(type => `${counts[type]} ${type}`)
                                        .join(" — ")}
                                    </td>
                                </tr>
                                </table> `;

        $("#summaryBar").html(summaryHtml);


}