PartnerContactEditor = function( options ) {

    this.data = options;
    this.partnerId = options.partnerId;
    this.partnerType = options.partnerType;
    this.rootElement = null;
   // console.log("options/ this.data === ");
    //console.log(options);

   this.salutationsList = [
    { "dispValue": "Mr." },
    { "dispValue": "Miss" },
    { "dispValue": "Mrs."},
    { "dispValue": "Dr."}
];

this.prefCommList = [
  { "dispValue": "Text" , "value": "T"},
  { "dispValue": "Email" ,"value": "E"},
  { "dispValue": "Phone", "value": "P"},
  { "dispValue": "Cell", "value": "C"},
  { "dispValue": "--No preference--", "value": ""}
];

let countryId = 0;
let countryVisible = false;
let countryIds = Fse.Portal.appConfiguration.CRM.countryIdList;
var countryIdList = countryIds.split(',');
if(countryIdList.length > 1)
 { 
  countryId = parseInt(countryIdList[0]);
  countryVisible = true;
 }
if(countryId==0) 
  countryId = 27; //default is USA

this.countryId = countryId;
this.countryVisible = countryVisible;

    this.flexFields = [];
    this.flexTabs = [];
    this.flexValues = [];


}

PartnerContactEditor.prototype.constructor = PartnerContactEditor;

PartnerContactEditor.prototype.element = function() {

    let instance = this;

    if( instance.rootElement ) {
        return instance.rootElement;
    }

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

    instance.load().done( function() {
       // console.log( instance.data );
        instance.createUI();
    });



    return instance.rootElement;

}

PartnerContactEditor.prototype.load = function() {
    let instance = this;



    let d = $.Deferred();

    let waitingFor = {
      flexFields : true,
      flexTabs : true,
      flexValues : instance.data.fspro_userId ? true  : false,
      contactData : instance.data.fspro_userId ? true : false
    }


    d.progress( function( notify ) {

      console.log( "proress", notify );
      waitingFor[notify.id] = false;
      console.log( waitingFor );


      if( ! ( waitingFor.contactData || waitingFor.flexFields || waitingFor.flexTabs || waitingFor.flexValues )) {
        let fieldsByCategory = DevExpress.data.query( instance.flexFields ).groupBy( "category" ).sortBy( "sortRank" ).thenBy( "label" ).toArray();
        instance.fieldCategoryStore = new DevExpress.data.ArrayStore( { data : fieldsByCategory, key : "key" } );

        instance.flexTabs.forEach( function( flexTab ) {

                flexTab.hasFields = false;

                flexTab.categories.forEach( function( category ) {

                    if( ! category.fields ) {
                        category.hasFields = false;
                        instance.fieldCategoryStore.byKey( category.name ).done( function( data ) {
                            category.fields = data.items;
                            category.hasFields = true;
                            flexTab.hasFields = true;
                        })
                        if( ! category.fields ) {
                            category.fields = [];
                        }
                    }

                });

            })

        d.resolve();
      }

    })

    let domain = instance.partnerType;

    if( waitingFor.flexFields ) {
          
        let dataSource = Fse.Data.newDataSource( { object : `${domain}.flexFields`, paginate : false, key : "fieldId", objectParams : { type : "CONTACT" } });
        dataSource.load().done( function( data ) {
            instance.flexFields = data;
            d.notify( { id : "flexFields" } )
        } )
    }

    if( waitingFor.flexTabs ) {

        let objectParams = {
          type : "CONTACT"
        }

        if( instance.data.fspro_userId ) {
          objectParams.contactId = instance.data.fspro_userId;
        } else {
          if( domain == "OPR" ) {
            objectParams.operatorId = instance.partnerId;
          } else if( domain == "CDR" ) {
            objectParams.cdr_recordId = instance.partnerId;
          }
          
        }

        

        let dataSource = Fse.Data.newDataSource( { object : `${domain}.flexTabs`, paginate : false, key : "displayName", objectParams : objectParams } );
        dataSource.load().done( function( data ) {
            instance.flexTabs = data;
            console.log( "flexTabs", instance.flexTabs );
            d.notify( { id : "flexTabs" } )
        })
    }
    
    if( waitingFor.flexValues ) {
        let flexDataSource = Fse.Data.newDataSource( { object : `${domain}.flexValues`, paginate : false, objectParams : { contactId : instance.data.fspro_userId, type : "CONTACT" } });
        flexDataSource.load().done( function( data ) {
            instance.flexValues = data;
            d.notify( { id : "flexValues" } )
        })         
    }


    if( waitingFor.contactData ) {
      let dataStore = Fse.Data.newDataSource( { object : "CRM.partnerContacts", paginate : false, key : "fspro_userId", objectParams : { partnerId : instance.data.partnerId, partnerType : instance.data.partnerType } }).store();
      dataStore.byKey( instance.data.fspro_userId ).done( function( data ) {
          instance.data = data; 
          d.notify( { id : "contactData" } );
      });
    }



    return d;

}


// PartnerContactEditor.prototype.createUI = function() {

//     let instance = this;

//     instance.rootElement.empty();
//     instance.rootElement.append( $("<div>").css( "padding", "10px" ).append( instance.createForm() ) );


// }

// PartnerContactEditor.prototype.createForm = function() {
//     let instance = this;

//     let contactDetails = $("<div>");



//     instance.partnerContactFields = $("<div>").dxForm( {
//         formData : instance.data,
//         readOnly : true,
//         items : [
//             "firstName", "lastName", "title", "email"
//         ]
//     }).dxForm("instance");

//     instance.partnerContactFields = $("<div>").dxForm( {
//         formData : instance.data,
//         readOnly : true,
//                 items : [
//                         { dataField : "firstName", label : { text : "First Name" }},
//                     { dataField : "lastName", label : { text : "Last Name" }},
//                     { dataField : "title", label : { text : "Title" }},
//                     { dataField : "email", label : { text : "Email" }}, 
//                     { dataField : "phone", label : { text : "Phone" }},
//                     { itemType : "button", buttonOptions : {
//                         text : "View Email",
//                         onClick : function( e ) {

//                             let partnerData = instance.data;

//                             let partnerContactsDataStore = Fse.Data.newDataSource( { object : "CRM.partnerContacts", paginate : false, keyField : "fspro_userId", objectParams : { partnerId : instance.partnerId, partnerType : instance.partnerType } }).store();

//                             partnerContactsDataStore.byKey( partnerData.fspro_userId ).done( function( contactData ) {
//                                // console.log(contactData);
//                                /* if( recipientData && recipientData.length ) {
//                                    // EmailCampaignManager.showRecipientMessage( recipientData[0] );
//                                 }*/
                                
//                             });

//                         }
//                     }, horizontalAlignment : "left" }

                   
//                 ]
//     }).dxForm( "instance" );

// }


PartnerContactEditor.prototype.internetFields = function() {

  let instance = this;
  let items = [];


  let validURLPattern = Fse.CRM.socialMediaPlatforms.other.urlRegEx;

  let internetFields = [

      { 
          dataField : "facebook", name: "facebook",
          label : "Facebook", placeholder : "Facebook URL or ID", width : 300,
          type : "url", 
          //value : fbValue,
          socialMediaPlatform : "facebook"
      },
      { 
          dataField : "instagram",  name : "instagram", 
          label : "Instagram",  placeholder : "Instagram URL or ID", width : 300,
          type : "url", 
         // value : insValue,
          socialMediaPlatform : "instagram"
      },
      { 
          dataField : "twitter", name: "twitter", 
          label : "\"X\"", placeholder : "\"X\" URL or ID (1-15 char)", width : 300,
          type : "url", 
          //value : twValue,
          socialMediaPlatform : "twitter"
      },
      { 
          dataField : "tiktok", name :"tiktok", 
          label : "TikTok",placeholder : "TikTok URL or ID", width : 300, 
          type : "url",  
         // value : ttValue,
          socialMediaPlatform : "tiktok",
      },
      { 
          dataField : "youtube", name : "youtube",
          label : "YouTube", placeholder : "YouTube URL or ID (10 char)", width : 300,
          type : "url", 
          //value : ytValue,
          socialMediaPlatform : "youtube"
      },
      { 
          dataField : "linkedin", 
          label : "LinkedIn", placeholder : "LinkedIn URL", maxLength : 150, width : 300, 
          type : "url", 
         // value : instance.options.data.linkedin,
          socialMediaPlatform : "linkedin"
      }
  ];

  internetFields.forEach( function( il ) {

      let item = {
          dataField : il.dataField,
          label : { text : il.label },
          
          template : function( options, itemElement ) {

              let customFields = options.component.option( "customFields" );
              if( ! customFields ) {
                  customFields = {};
              }

              let val = "";

              if (null != instance.options.data && typeof instance.options.data[il.dataField] !== 'undefined')
                val  = instance.options.data[il.dataField];


              let textBoxConfig = {

                  maxLength : il.maxLength ? il.maxLength : null,
                  placeholder : il.placeholder ? il.placeholder : null,
                  width : il.width ? il.width : null,
                  value : val,
                  name : il.name,
                  onValueChanged : function( e ) {
                      options.component.updateData( options.dataField, e.value );
                  },
                  readOnly : instance.readOnly
              };


              if( il.type == "url" ) {

                  textBoxConfig.onOptionChanged = function( e ) {
                      if( e.name == "validationErrors" ) {

                          let validationErrors = e.value;

                          if( validationErrors ) {
                              let errorHandled = false;
                              validationErrors.forEach( function( ve ) {

                                  if( errorHandled ) return;

                                  if( ve.type == "pattern" ) {

                                      if( ve.socialMediaPlatform ) {

                                          let value = ve.value;

                                          if( ! value.match( validURLPattern ) ) {

                                              value = ve.urlTransform( value );

                                              if( value.match( validURLPattern ) && value.match( ve.pattern ) ) {
                                                  errorHandled = true;
                                                  setTimeout( function() {
                                                      e.component.option( "value", value )
                                                  }, 10 );
                                              }
  
                                          }


                                      } else {

                                          let value = ve.value;

                                          if( ! value.match( /^https+:\/\//i) ) {

                                              value = value.replace( /^.*:/i, '' ).replace( /^\/\//, '' );
                                              value = `https://${value}`
                                              errorHandled = true;
                                              setTimeout( function() {
                                                  e.component.option( "value", value )
                                              }, 10 );
                                          }

                                      }

                                  }
                              })
                          }

                      }
                  }
                  
              }

              let textBox = $("<div>").dxTextBox( textBoxConfig ).dxTextBox( "instance" );

              let validationRules = il.validationRules ? il.validationRules : null;
              if( ! validationRules && il.type == "url" ) {

                  validationRules = [];
                  let message = "Invalid URL";

                  if(  il.socialMediaPlatform && Fse.CRM.socialMediaPlatforms[il.socialMediaPlatform] ) {
                      let pattern = Fse.CRM.socialMediaPlatforms[il.socialMediaPlatform].urlRegEx;
                      let urlTransform = Fse.CRM.socialMediaPlatforms[il.socialMediaPlatform].urlTransform;
                      urlTransform ? urlTransform : function( v ) { return v };
                      message = `Invalid ${il.placeholder}`;
                      validationRules.push(
                          { type : "pattern", socialMediaPlatform : il.socialMediaPlatform, message : message, pattern : pattern, urlTransform : urlTransform }
                      )
                  }
                  validationRules.push( 
                  { type : "pattern", message : message, pattern : validURLPattern }
                  );

              }

              textBox.element().dxValidator( {
                  validationGroup : options.component.option( "validationGroup" ),
                  validationRules : validationRules
              })

    

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

              editorContainer.append( textBox.element() );

              itemElement.append( editorContainer );

              customFields[il.dataField] = { editor : textBox };
              options.component.option( "customFields", customFields );

          }

      }

      items.push( item );

      

  });

  return items;



}


PartnerContactEditor.prototype.show = function( editorOptions ) {

  let instance = this;

  editorOptions = editorOptions ? editorOptions : {};
  editorOptions.data = editorOptions.data ? editorOptions.data : {};

  instance.data = editorOptions.data;

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

    editorOptions.data = instance.data;
    instance._show( editorOptions );

  })

}


PartnerContactEditor.prototype.flexFieldItems = function( formData, fieldCategory ) {

    let items = [];

    let instance = this;
    if( ! instance.fieldCategoryStore ) return items;

    // basic a fields are inserted just before primary contact
    instance.fieldCategoryStore.byKey( fieldCategory ).done( function( data ) {

        if( data && data.items.length ) {
            FlexFields.buildFormItems( data.items, items, 3 );
            formData.flexCategories.push( fieldCategory );
            if( instance.flexValues.length && instance.flexValues[0][fieldCategory] ) {
                let values = {};  values[fieldCategory] = instance.flexValues[0][fieldCategory];
                $.extend( true, formData, values );
            }
    
        }

    })

    
    return items;
}

PartnerContactEditor.prototype.flexTabTemplate = function( flexTab, data ) {

    let instance = this;
    if( flexTab.form ) {
        flexTab.form.element().remove();
        flexTab.form.dispose();
        flexTab.form = null;
    }

    let formData = {
        categories : []
    };



    let formItems = [];

    flexTab.categories.forEach( function( category ) {

        if( ! category.hasFields ) {
            return;
        }

        formData.categories.push( category.name );

        if( instance.flexValues.length && instance.flexValues[0][category.name] ) {
            let values = {};  values[category.name] = instance.flexValues[0][category.name];
            $.extend( true, formData, values );
        }


        let categoryItem = {
            itemType : "group", caption : category.title, items : []
        }

        FlexFields.buildFormItems( category.fields, categoryItem.items, 1 );

        formItems.push(  categoryItem );

    })



    flexTab.form = $("<div>").dxForm( {
        height : "100%",
        items : formItems,
        formData : formData,
        validationGroup : "savePartnerContactForm"
    }).dxForm( "instance" );

    // let toolbar = $("<div>").dxToolbar( {
    //     items : [
    //         { location : "after",
    //           widget : "dxButton",
    //           options : {
    //             text : "Save",
    //             type : "default",
    //             onClick : function( e ) {

    //                 let vr = flexTab.form.validate();
    //                 if( ! vr.isValid ) {
    //                     return;
    //                 }
                    
    //                 let dataToSend = { 
    //                     operatorId : data.operatorId,
    //                     flexValues : flexTab.form.option( "formData" )
    //                 }

    //                 Fse.Ajax.performAction( {
    //                     object : "OPR.saveFlexValues", 
    //                     data : dataToSend
    //                 }).done( function( result ) {

    //                     Fse.UI.toast( `${flexTab.displayName} Saved`, "success", 1000 );
            
    //                 });

    //             }
    //           }
    //         }
    //     ]
    // })


    // let template = $("<div>").css( { "xmargin": "10px" }).dxBox( {
    //     height : "100%",
    //     direction : "col",
    //     items : [
    //         {
    //             ratio : 1,
    //             template : function() {
                    
    //                 return $("<div>").append( flexTab.form.element() ).dxScrollView( {
    //                     height : "100%"
    //                 })
                    
    //             }

    //         },
    //         {
    //             baseSize : 30,
    //             template : function() {
    //                 return toolbar;                 
    //             }
    //         }
    //     ]
    // })    

    // return template;

  return $("<div>").css( { "padding-right" : "8px" } ).append( flexTab.form.element() ).dxScrollView( {
    height : "100%"
  })    

}

PartnerContactEditor.prototype._show = function( editorOptions ) {

    let instance = this;

     instance.partnerContactForm = null;

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


    let editorTitle = instance.options.contactId ? "Edit Contact" : "Add New Contact";
    instance.options.editorTitle = editorTitle;
    console.log("options now = ");
   console.log(instance.options);

    let isPrimaryContact = false;
    let currprimaryContactId = 0;

    let salutation  = "";
    let firstName = "";
    let lastName = "";
    let preferredCommunication = "";
    let preferredLanguage = "EN";
    let email = "";
    let lastUpdated = "";
    let countryId = instance.countryId;
 
    let state = "";
    let city = "";
    let comments = "";
    let fbValue = "";
    let insValue = "";
    let twValue = "";
    let ttValue = "";
    let ytValue = "";
    let phoneValue = "";
    let phoneExtValue = "";
    let contactDecisionValue = false;
    let officeAddrSameValue = "";
    let emailYesNoValue = false;

    if(null != instance.options.data )
    {
      // console.log("initial data");
      console.log(instance.options.data);
    

      if ( typeof instance.options.data.firstName !== 'undefined')
      firstName  = instance.options.data.firstName;

      if ( typeof instance.options.data.lastName !== 'undefined')
      lastName  = instance.options.data.lastName;

      if ( typeof instance.options.data.prefCommCode !== 'undefined')
      preferredCommunication  = instance.options.data.prefCommCode;

      if ( typeof instance.options.data.preferredLanguage !== 'undefined')
      preferredLanguage  = instance.options.data.preferredLanguage;

      if ( typeof instance.options.data.email !== 'undefined')
      email  = instance.options.data.email;

      if ( typeof instance.options.data.lastUpdated !== 'undefined')
      lastUpdated  = instance.options.data.lastUpdated;

      if ( typeof instance.options.data.countryId !== 'undefined')
      countryId  = instance.options.data.countryId;

      if ( typeof instance.options.data.state !== 'undefined')
      state  = instance.options.data.state;

      if ( typeof instance.options.data.city !== 'undefined')
      city  = instance.options.data.city;

      instance.options.data.countryId = instance.countryId

      if ( typeof instance.options.data.comments !== 'undefined')
      comments  = instance.options.data.comments;

      if ( typeof instance.options.data.facebook !== 'undefined')
      fbValue  = instance.options.data.facebook;
      if ( typeof instance.options.data.instagram !== 'undefined')
      insValue  = instance.options.data.instagram;
      if ( typeof instance.options.data.twitter !== 'undefined')
      twValue  = instance.options.data.twitter;
      if ( typeof instance.options.data.tiktok !== 'undefined')
      ttValue  = instance.options.data.tiktok;
      if ( typeof instance.options.data.youtube !== 'undefined')
      ytValue  = instance.options.data.youtube;
      if ( typeof instance.options.data.phone !== 'undefined')
      phoneValue  = instance.options.data.phone;
      if ( typeof instance.options.data.phoneExt !== 'undefined')
      phoneExtValue  = instance.options.data.phoneExt;

      if ( typeof instance.options.data.currPrimaryContactId !== 'undefined')
      currprimaryContactId  = instance.options.data.currPrimaryContactId;

      if (instance.options.data.primaryContactId == 'Yes')
      isPrimaryContact = true;

      if ( typeof instance.options.data.contactDecisionMaker !== 'undefined')
      {
        
        if (instance.options.data.contactDecisionMaker =='Yes')
          contactDecisionValue = true;
        else
          contactDecisionValue = false;
      }

      if ( typeof instance.options.data.officeAddrSame !== 'undefined')
      {
          
        if (instance.options.data.officeAddrSame == 'Yes' || instance.options.data.officeAddrSame == 1)
          officeAddrSameValue = true;
        else
          officeAddrSameValue = false;

      }


      
      if ( typeof instance.options.data.emailYesNo !== 'undefined')
      {
        
        if (instance.options.data.emailYesNo == 'Yes')
        emailYesNoValue = false;
        else
        emailYesNoValue = true;

      }
           
    }

    let formData = instance.options.data;
    formData.partnerId = instance.partnerId;
    formData.partnerType = instance.partnerType;
    formData.flexCategories = [];

    let jobFunctionVisibility = false;
   
    if(typeof instance.data.partnerType != 'undefined')
      {
        jobFunctionVisibility = Fse.Portal.getConfiguration( `CRM.${instance.data.partnerType}.hasJobFunctions` );
      } 
    else if(typeof instance.partnerType != 'undefined')
      {
        jobFunctionVisibility = Fse.Portal.getConfiguration( `CRM.${instance.partnerType}.hasJobFunctions` );
      }
 
    let internetItems = instance.internetFields();

   
    let internetLocations = [

        { dataField : "facebook", name : "facebook", label : "Facebook", prefix : "facebook.com/" , value  : fbValue},
        { dataField : "instagram", name :"instagram",  label : "Instagram", prefix : "instagram.com/" , value  : insValue},
        { dataField : "twitter", name: "twitter", label : "Twitter (X)", prefix : "twitter.com/" , value  : twValue},
        { dataField : "tiktok", name: "tiktok", label : "TikTok", prefix : "tiktok.com/@" , value  : ttValue },
        { dataField : "youtube", name: "youtube", label : "YouTube", prefix : "youtube.com/@" , value  : ytValue },

    ];

    

    let generalItems = [];

    let addGeneralItems = function( items ) {

        if( ! items ) {
            return;
        }

        if( ! Array.isArray( items )) {
            items = [items];
        }
        items.forEach( function( i ) {
            generalItems.push( i );
        })
        
    }

    generalItems.push(
                 {
        
                  label : { location : "left", text : "Contact Name", visible: true  },
                  name : "operatorContact",
                  
                  template : function( options, itemElement ) {
        
                     
        
                      let firstNameTextBox = $("<div>").dxTextBox( {
                          width : 150,
                          value : firstName,
                          name : "firstName",
                          labelMode: 'hidden',
                          placeholder : "first name",
                          hoverStateEnabled : true,
                          //validationGroup : options.component.option( "validationGroup" ),
                          onValueChanged : function( e ) {
                            options.component.updateData( "firstName", e.value );

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

                      firstNameTextBox.dxValidator( {
                        validationGroup : options.component.option( "validationGroup" ),
                        validationRules : [ { type : "required", message : "First Name is required" } ]
                    })

                    
        
                      let lastNameTextBox = $("<div>").dxTextBox( {
                        width : 150,
                        value : lastName,
                        name : "lastName",
                        labelMode: 'hidden',
                        placeholder : "last name",
                        onValueChanged : function( e ) {
                          options.component.updateData( "lastName", e.value );
                      }
                    }).css( { "display" : "inline-block", "margin-left" : "8px"  } ); 

                   


                    let primaryContactCheckBox = $("<div>").dxCheckBox( {
                      text: "Check here to make this the primary contact",
                      value: isPrimaryContact,
                      name: "primaryContactId",
                      onValueChanged: function (e) {
                     

                        options.component.updateData( "primaryContactId", e.value );
                       
                    }
                    }).css( { "display" : "block", "margin-left" : "8px"  } ); 
        
                    let decisionMakerContactCheckBox = $("<div>").dxCheckBox( {
                      text: "Check here if this contact has decision making authority",
                      value: contactDecisionValue,
                      name: "contactDecisionMaker",
                      dataField : "contactDecisionMaker",
                      onValueChanged: function (e) {
                        
                        options.component.updateData( "contactDecisionMaker", e.value );
                       
                    }
                    }).css( { "display" : "block", "margin-left" : "8px"  } ); 
        
        
                      itemElement.append( firstNameTextBox ).append( lastNameTextBox )
                      .append(primaryContactCheckBox).append(decisionMakerContactCheckBox);

                    
        
                  }
        
              });


    addGeneralItems( instance.flexFieldItems( formData, "BASIC_A" ));

    

    generalItems.push(
                {
                  dataField : "caRelationshipRank",
                  label : { text : "Relationship Rank" },
                  editorType : "dxSelectBox",
                  editorOptions : {
                      dataSource : Fse.Data.newDataSource( { object : "CRM.contactRelationshipRanks", keyField : "caRelationshipRank" } ),
                      displayExpr : "caRelationshipRankText",
                      valueExpr : "caRelationshipRank",
                      searchEnabled : true,
                      searchExpr : "caRelationshipRankText",
                      searchMethod : "startswith",
                      showClearButton : true,
                      width : 150
                  }
              },
                {
                  dataField : "jobFunctionId",
                  label : { text : "Primary Job Function" },
                  visible : jobFunctionVisibility,
                  editorType : "dxSelectBox",
                  editorOptions : {
                      dataSource : Fse.Data.newDataSource( { object : "CRM.contactJobFunctions", keyField : "caJobFunction", objectParams : { partnerTypes : instance.data.partnerType } } ),
                      displayExpr : "caJobFunctionText",
                      valueExpr : "caJobFunction",
                      searchEnabled : true,
                      searchExpr : "caJobFunctionText",
                      searchMethod : "startswith",
                      showClearButton : true,
                      width : 150
                  },
                  validationRules : [ 
                      { type : "required",
                      message: 'Job Function is required',
                      
                      }
                  ]
              },
               
               
                { dataField : "title", label : { text : "Contact Title" }, 
                editorOptions : { placeholder : "not provided" }
               },

               {
                label : { location : "left", text : "Email Address", visible: true  },
                template : function( options, itemElement ) {

                  let emailTextBox = $("<div>").dxTextBox( {
                    value : email,
                    name : "email",
                    labelMode: 'hidden',
                    placeholder : "email",
                    maxLength : 75,
                    //width : 200,
                    onValueChanged : function( e ) {
                      options.component.updateData( "email", e.value );
                    }
                }).css( { "display" : "block"  } ); 

                emailTextBox.dxValidator( {
                  validationGroup : options.component.option( "validationGroup" ),
                  validationRules : [ 
                  {
                    type: 'email',
                    message: 'Email is invalid',
                  } ]
              })

                  let suppressMktCheckBox = $("<div>").dxCheckBox( {
                    text: "Check here to suppress Marketing Emails",
                    value: emailYesNoValue,
                    name: "emailYesNo",
                    onValueChanged: function (e) {
                      let newValue = e.value;
                      newValue = !newValue;

                    
                      options.component.updateData( "emailYesNo", newValue );
                     
                  }
                  }).css( { "display" : "block", "margin-left" : "8px"  } ); 
                   itemElement.append( emailTextBox ).append( suppressMktCheckBox );

                }
              },
                
              { label : { text : "Phone" },

                template : function( options, itemElement ) {
                let phoneTextBox = $("<div>").dxTextBox( {
                  name : "phone",
                  width : 100,
                  maxLength : 30,
                  value : phoneValue,
                  onValueChanged : function( e ) {
                    if( e.component.option( "fseReformatted") ) {
                        e.component.option( "fseReformatted", false );
                    } else {
                        let formatted = Fse.UI.reformatPhone( e.value );
                        if( formatted != e.value ) {
                            e.component.option( {
                                "fseReformatted" : true,
                                value : formatted
                            } )
                        }
                      }  
                      options.component.updateData( "phone", e.value );              
                    }
              }).css( { "display" : "inline-block" } ).dxTextBox( "instance" );

              itemElement.append( phoneTextBox.element() )

              let phoneExtTextBox = $("<div>").dxTextBox( {
                  name : "phoneExt",
                  width : 50,
                  maxLength : 10,
                  value : phoneExtValue,
                  onValueChanged : function( e ) {
                      options.component.updateData( "phoneExt", e.value );
                  }
              }).css( { "display" : "inline-block" } ).dxTextBox( "instance" );

             

              itemElement
              .append( $("<span>").text( "Ext." ).css( { "padding-left" : "8px", "padding-right" : "8px" }) )
              .append( phoneExtTextBox.element() );
            }},
            
                
                { dataField : "cell", label : { text : "Cell" }, 
                editorOptions : { 
                  width : 100,
                  placeholder : "not provided", 
                  maxLength : 30,
                  // mask: "000-000-0000",
                  onValueChanged : function( e ) {
                    if( e.component.option( "fseReformatted") ) {
                        e.component.option( "fseReformatted", false );
                    } else {
                        console.log( "formatting" );
        
                        let formatted = Fse.UI.reformatPhone( e.value );
                        if( formatted != e.value ) {
                            e.component.option( {
                                "fseReformatted" : true,
                                value : formatted
                            } )
                        }
                    }  
                  }

                }
                /*  validationRules : [
                  {type: 'pattern',
                  pattern: '^[0-9]+$'}
                ] */
                },
               
                { itemType : "group",
                  name : "socialMedia",
                            items : internetItems
                        
                },
                /*{ dataField : "fax", label : { text : "Fax" },
                 editorOptions : { 
                  placeholder : "not provided",
                  mask: "000-000-0000",
                  maskChar: "‒" }
                },*/
        
                { dataField : "prefCommCode",
                 
                 label : { text : "Preferred Communication" }, 
                 editorType: 'dxSelectBox',
                 editorOptions: {
                  
                  dataSource: instance.prefCommList,
                  displayExpr: "dispValue",
                  valueExpr : "value",
                  placeholder : "--No Preference--",
                   searchEnabled: true,
                  // value: preferredCommunication,
                   onValueChanged : function( e ) {
                   // options.component.updateData( "preferredCommunication", e.value );
                     }
                 }        
                },
                { dataField : "preferredLanguage", 
                  
                 
                label : { text : "Preferred Language" },
                 editorType: 'dxSelectBox',
                 editorOptions: {
                  
                  dataSource : Fse.Data.newDataSource( { object : "CRM.languages", keyField : "languageCode" } ),
                  displayExpr : "languageName",
                  valueExpr : "languageCode",
                  searchEnabled : true,
                  searchExpr : "languageName",
                  searchMethod : "startswith",
                  showClearButton : true,
                  //value: preferredLanguage,
                  onInitialized : function(e) {
                    //alert("on ini");
                    //alert(preferredLanguage);
                    var s = e.component;  
                    s.getDataSource().load().done(function (items) {  
                      

                      if(typeof preferredLanguage == 'undefined')
                      {
                        preferredLanguage = "EN";
                      }

                     // alert(preferredLanguage);
                        s.option("value", preferredLanguage);  
                    })
                  }
                 } 
                
                });

      addGeneralItems( instance.flexFieldItems( formData, "BASIC_B" ));

      generalItems.push( 
        
                // check box to use company address
                {
                  dataField : "officeAddrSame", label : { text : "Use company address" },
                  editorType : 'dxCheckBox',
                  value: officeAddrSameValue,
                  editorOptions : {
                   
                    onValueChanged: function (e) {
                      const previousValue = e.previousValue;
                      const newValue = e.value;
                     
                      //console.log(newValue);
                      //disable the the following address fields
                     // options.component.updateData( "officeAddrSame", e.value );
                      instance.partnerContactForm.itemOption('general.HomeAddress', 'visible', previousValue);
                      instance.partnerContactForm.itemOption('general.HomeAddress.countryId', 'value', instance.countryId);
                      //instance.partnerContactForm.getEditor('address1').option('readOnly', newValue);
                      
                  }
                  }
                },
               {
                  itemType: 'group',
                  name: 'HomeAddress',
                  visible : !officeAddrSameValue,
                  caption : '',
                  items: [
                    { dataField : "address1", label : { text : "Street 1" }, editorOptions : { placeholder : "not provided" }},
                    { dataField : "address2", label : { text : "Street 2" }, editorOptions : { placeholder : "not provided" }},

                
                    {
                      dataField : "countryId", label : { text : "Country" },   visible :instance.countryVisible,
                      editorType : "dxSelectBox", editorOptions : {
                          dataSource : Fse.Data.newDataSource( { object : "UT.countries", keyField : "countryId" } ),
                          value : countryId, 
                          displayExpr : "countryAbbrev",
                          valueExpr : "countryId",
                          width : 80,

                          onInitialized: function (e) {
                            //console.log("coming to country")
                            var c = e.component;  
                            c.getDataSource().load().done(function (items) {  
                                 c.option("value",  instance.countryId);
                            })
                                                      
                        }

                      },
                     // validationGroup : "savePartnerContactForm", 
                     validationRules: [{
                      type: 'required',
                      message: 'Country is required',
                    }],
                  },

               
                   
                  {
            
                    label : { location : "left", text : "City/State/Prov" },
                    name : "cityState",
                    template : function( options, itemElement ) {
            
                        let cityTextBox = $("<div>").dxTextBox( {
                            name : "city",
                            width : 150,
                            placeholder : "city",
                            value : city,
                            onValueChanged : function( e ) {
                                options.component.updateData( "city", e.value );
                            }
                            , onEnterKey : function( e ) {
                                //instance.search1FS();
                            }
            
                        }).css( { "display" : "inline-block" } );
          
            
                        let stateSelectBox = $("<div>").dxSelectBox( {
                            name : "state",
                            width : 80,
                            dataSource : Fse.Data.newDataSource( { object : "UT.states", paginate : false, keyField : "state" }),
                            placeholder : "state",
                            displayExpr : "state",
                            valueExpr : "state",
                            searchEnabled : true,
                            searchExpr : "state",
                            value : state,
                            searchMethod : "startswith",
                            showClearButton : true,
                            validationGroup : options.component.option( "validationGroup" ),
                            onValueChanged : function( e ) {
                                options.component.updateData( "state", e.value );
                            },

                            onOpened : function(e)
                            {
                            
                             let dataSource = e.component.getDataSource();
                              dataSource.filter(['countryId', '=', instance.countryId]);
                              dataSource.load();
                              
                            }
                            , onEnterKey : function( e ) {
                               // instance.search1FS();
                            }
                        }).css( { "display" : "inline-block", "margin-left" : "8px" } );
            
                        itemElement.append( cityTextBox ).append( "," ).append( stateSelectBox ); //.append( zipCodeTextBox )
            
                    }
                  },
                    { name : "zipcode",
                    dataField : "zipcode",
                    label : { text : "Zip Code" }, editorType: 'dxTextBox',
                  
                    editorOptions :{
                      width : 80,
                      placeholder : "zipcode",
                      
                            onValueChanged : function( e ) {
                               // options.component.updateData( "zipcode", e.value );
                            }
                            , onEnterKey : function( e ) {
                               // instance.search1FS();
                            }
                    }
                  }
                ]},
        
              {  label : { text : "Internal Comments"},  
              dataField : "comments",
              editorType : "dxTextArea", 
        
              editorOptions :{
                  colSpan: 2,
                  width : 300, 
                  height: 90,
                  maxLength: 500,
                  placeholder : "Comments"
                }
             
            },
        
                { 
                label : { text : "Last Updated" },
                template : function( options, itemElement ) {
        
                  const lastUpdatedText = $("<div>").dxDateBox( {
                    readOnly: true,
                    name : "lastUpdated",
                    useMaskBehavior: true,
                    displayFormat: 'MMM d, yyyy hh:mm a',
                    value: lastUpdated,
                    hoverStateEnabled: false,
                    onValueChanged : function( e ) {
                      options.component.updateData( "lastUpdated", e.value );
                  }
                }).css( { "display" : "block", "border" : "none" } );

                itemElement.append( lastUpdatedText );
                
              }
               
            
            });

  let allItems = [
            { itemType : "group", 
            name : "general",
            // caption : "General",
             items : generalItems
          }];

     
  instance.partnerContactForm = $("<div>").dxForm( {
        formData : formData,
        readOnly : false,
        height : "100%",
        validationGroup : "savePartnerContactForm",
        showValidationSummary : true,
        items : allItems,

          onFieldDataChanged: function(e) {
            var newFormData = e.component.option("formData");
            var updatedField = e.dataField;

           if( updatedField == "countryId" ) {

           }
            // re-assigning form data values to template items
            if(newFormData.firstName !== '')
            {
              firstName  = newFormData.firstName;
            }
            if(newFormData.lastName !== '')
            {
              lastName  = newFormData.lastName;
            }

            if(typeof newFormData.primaryContactId !== 'undefined')
            {
              isPrimaryContact  = newFormData.primaryContactId;
            }

            if(typeof newFormData.contactDecisionMaker !== 'undefined')
            {
              contactDecisionValue  = newFormData.contactDecisionMaker;
            }

            if(newFormData.email !== '')
            {
              email  = newFormData.email;
            }
            if(typeof newFormData.emailYesNo !== 'undefined' )
            {
              emailYesNoValue  = !newFormData.emailYesNo;
            }
            if(newFormData.phone !== '')
            {
              phoneValue  = newFormData.phone;
            }
            if(newFormData.phoneExt !== '')
            {
              phoneExtValue  = newFormData.phoneExt;
            }
            if(newFormData.city !== '')
            {
              city  = newFormData.city;
            }
          
            if(newFormData.countryId !== '')
              {
                countryId  = newFormData.countryId;
                instance.countryId = countryId;
               
              }
        
            if(newFormData.state !== '')
            {
              state  = newFormData.state;
            }
            if(newFormData.lastUpdated !== '')
            {
              lastUpdated  = newFormData.lastUpdated;
            }

            if(newFormData.prefCommCode !== '')
            {
              preferredCommunication  = newFormData.prefCommCode;
            }

            if(newFormData.preferredLanguage !== '')
            {
              preferredLanguage  = newFormData.preferredLanguage;
              
              if( null != instance.partnerContactForm)
              {             
              instance.partnerContactForm.getEditor('preferredLanguage').option('value', preferredLanguage);
               
              }
            }

            if( null != instance.partnerContactForm)
              {

                internetLocations.forEach( function( il ) {
                  
                    il.value = newFormData[il.dataField];
                });
              }
            

        }
           
        }).dxForm( "instance" );

    let submitButton = $("<div>").dxButton( {
      text : "Save",
      type : "default",
      onClick : function( be ) {

        let isValid = DevExpress.validationEngine.validateGroup( "savePartnerContactForm" ).isValid;

        // let isValid = true;
        // instance.flexTabs.forEach( function( ft ) {
        //   if( ft.form ) {
        //     let vr = ft.form.validate();
        //     console.log( "VR", ft, vr );
        //     if( ! vr.isValid ) isValid = false;
        //   }
        // })


        // let result = instance.partnerContactForm.validate();
        // if (! result.isValid) isValid = false;
        

        if ( isValid ) 
        {
          savePartnerContact();
        }
        
      }
  }).dxButton( "instance" );

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



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

        title : instance.options.editorTitle,
        height : "80vh",
        width: "50vw",
        hideOnOutsideClick : true,
        toolbarItems : popupToolbarItems,

        contentTemplate : function() {


          let useTabs = false;

          if( instance.flexTabs.length ) {
            useTabs = true;
          }






          if( useTabs ) {

            let tabs = [
              { title : "General", 
                  template : function() {
                    return $("<div>").css( { "height" : "100%",  "padding" : "5px", "padding-right" : "8px" } ).append( instance.partnerContactForm.element() ).dxScrollView( { "height" : "100%" });
                  }
                }
            ];


            instance.flexTabs.forEach( function( flexTab ) {
              if( flexTab.hasFields ) {
                tabs.push( {
                    id : flexTab.displayName, title : flexTab.displayName,
                    template : function() {
                        return $("<div>").css( { "height" : "100%", "padding" : "5px" } ).append( instance.flexTabTemplate( flexTab, instance.data ));
                    }
                  })
              }
            })


            let tabPanel = $("<div>").dxTabPanel( {
              height : "100%",
              items : tabs,
              deferRendering : false
            })

            return tabPanel;

          } else {
            return $("<div>").css( { "height" : "100%", "padding" : "5px" } ).append( instance.partnerContactForm.element() );
          }


        },

        onShown: function (e) {
      },

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

   
    instance.popup.element().appendTo( "body" );
    instance.popup.show();



    let savePartnerContact= function() {

      //console.log("in save");
      //console.log(instance);

      let dataToSend = $.extend( true, {}, instance.partnerContactForm.option( "formData" ) );

      instance.flexTabs.forEach( function( flexTab ) {
        if( flexTab.form ) {
          let flexData = flexTab.form.option( "formData" );

          dataToSend.flex = dataToSend.flex ? dataToSend.flex : [];
          dataToSend.flex.push( flexData );

        }
      })

      // TODO - get this to protect the page until the load operation is complete
      let loadPanel = $("<div>").dxLoadPanel( {
        message : "Working...",
        deplay : 0,
        hideOnOutsideClick : false,
        hideOnParentScroll : false,
        container : instance.popup.element(),
        onHidden : function( e ) {
            e.component.element().remove();
            e.component.dispose();
        }
    }).appendTo( $("body") ).dxLoadPanel( "instance" );

      // if any of the contact fields have been added, then we are going to add a contact
      dataToSend.addContact = true;
      
      if(typeof dataToSend.fspro_userId !== 'undefined')
      {
        dataToSend.addContact = false;
        
      }

      loadPanel.show();
      Fse.Ajax.performAction( {
          object : "CRM.savePartnerContact", 
          data : dataToSend
      }).done( function( addpartnerResult ) {
       // console.log("output = ");
       // console.log(addpartnerResult);
        
        instance.options.onSuccess(addpartnerResult);

      }).then( function() {
          loadPanel.hide();
         instance.popup.hide();
         Fse.UI.toast( `Contact Saved`, "success", 1000 );
      });

    
  
 
}
}