DistributorConferenceNewDialog = function( options ) {

 
    let instance = this;

    instance.onReturn = null;
    instance.cdr_recordId = options.cdr_recordId;
    
        
    this.dataURL = $("link#appDataURL").attr( "href" );
    

    if( options ) {
        if( options.onReturn ) {
            instance.onReturn = options.onReturn;
        }
    
    }


}

DistributorConferenceNewDialog.prototype.constructor = DistributorConferenceNewDialog;


DistributorConferenceNewDialog.prototype.show = function() {



    let instance = this;

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

        title : "New Distributor Conference",
        width : 700,
        contentTemplate : function() {

            let multiViewItems = [];

            let addDistributorToolbarItems = [];


            addDistributorToolbarItems.push( {
                toolbar : "bottom",
                location : "after",
                widget : "dxButton",
                options : {
                    text : "Add Conference",
                    type : "default",
                    onClick : function( e ) {
                        instance.addEvent();
                    }
                }
            });


            multiViewItems.push( {
                id : "addEventForm",
                template : function() { return  instance.addConferenceTemplate() },
                toolbarItems : addDistributorToolbarItems
            });
            
        
            instance.multiView = $("<div>").dxMultiView( {
        
                swipeEnabled : false,
                selectedIndex : 0,
                deferRendering : false, // this is so that all view are rendered before they are needed, so that one can reference the other
                items : multiViewItems,

                onContentReady : function( e ) {

                    let item = e.component.option( "selectedItem" );
                    instance.popup.option( "toolbarItems", item.toolbarItems );

                },

                onSelectionChanged : function( e ) {

                    let item = e.component.option( "selectedItem" );
                    instance.popup.option( "toolbarItems", item.toolbarItems );
                }
        
        
            }).dxMultiView( "instance" );

            instance.multiView.option( "selectedIndex", 0 );

            return instance.multiView.element();


        },
        hideOnOutsideClick : true,
        onHidden : function( e ) {
            e.component.element().remove();
            e.component.dispose();
        },

        onShown : function( e ) {
            
            let item = instance.multiView.option( "selectedItem" );

        }

    }).dxPopup("instance");


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

}






DistributorConferenceNewDialog.prototype.addConferenceTemplate = function() {

    let instance = this;

    
    let companyItems = [

        
        { 
            dataField : "cdr_recordId", visible : false, isRequired : true, editorType : "dxTextBox", editorOptions : {
                maxLength : 150,
                value : instance.cdr_recordId,
            }
        },


        { 
            dataField : "conferenceName", label : { location : "left", text : "Conference Name" }, isRequired : true, editorType : "dxTextBox", editorOptions : {
                maxLength : 150,
                xwidth : 200,
            }
        },
        
        { 
            dataField : "startDate", label: "Start Date", isRequired : true, editorType : "dxDateBox", type: "date", editorOptions : {
                maxLength : 150,
                xwidth : 200
            }
        },
        { 
            dataField : "endDate", label: "End Date", isRequired : true, editorType : "dxDateBox", type: "date", editorOptions : {
                maxLength : 150,
                xwidth : 200
            }
        },
    
    ]
    
    let booths = [1,2,3,4,5]
    for (const num of booths) {
        
        let eleRequired = num == 1 ? true : false;
        
        companyItems.push(
            { 
                dataField : `booth${num}`,  label : { location : "left", text : `Booth #${num}` }, isRequired : eleRequired, editorType : "dxTextBox", editorOptions : {
                    maxLength : 50,
                    xwidth : 50,
                }
            },
        )
      
      }
      
    
    
      let hoursDatasource = [];
        
      for(i=0;i<23;i++){
          let num = i+1;
          let meridiem = "AM";

          meridiem = num >= 12 ? meridiem = "PM" : meridiem = "AM";
          num = i >= 12 ? num-12 : num;
          
          
          hoursDatasource.push( { text : `${num}:00${meridiem}`, value : `${num}:00${meridiem}` })
      }
        
    
    companyItems.push(
     
        /*
        { editorType : "dxButton", editorOptions : {
            text : "Add Booth",
            type : "default",
            location : "right",
            onClick : function( e ) {
                instance.addBooth( e );
            }
            }
        },
        */
        
        
        { dataField : "startTime", label : { text : "Appointment Start Time", location : "left" },
        editorType : "dxSelectBox", editorOptions : {
            dataSource :hoursDatasource,
            displayExpr : "text",
            valueExpr : "value",
            value : "7:00AM",
            width : 100
        }
     },


        { 
            dataField : "apptDuration", 
            label : { location : "left", text : "Appointment Duration (minutes)" }, 
            isRequired : true, 
            editorType : "dxTextBox", editorOptions : {
                maxLength : 4,
                width : 50,
                value : "15"
            }
        },

        
    ),

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

        validationGroup : "addEventForm",


        items : [
            {
                itemType : "tabbed",
                tabPanelOptions : { deferRendering : false }, // this is so all of the fields are rendered at the start
                tabs : [
                    { title : "Event Detail", 
                      items : [
                        { itemType: "group",
                          items : companyItems
                        },
                      ] 
                    },
                ]
            }
        ],

        onFieldDataChanged : function( e ) {

            let customEditors = e.component.option( "customEditors" );
            if( customEditors && customEditors[e.dataField] ) {
                // push the data into the custom editor
                customEditors[e.dataField].option( "value", e.value );
            } 


            e.component.getEditor( "")


        }

    }).dxForm( "instance" );

    return instance.addEventForm.element();

}




DistributorConferenceNewDialog.prototype.addBooth = function( v ) {

    let instance = this;
    //let x = document.forms
    let x = instance.addEventForm.option( "formData" );
    //let x = instance.addEventForm.items;
    //console.log(x);
    //console.log(v);
    
    
    
}



DistributorConferenceNewDialog.prototype.addEvent = function( dupActionData) {

    let instance = this;

    let vr = DevExpress.validationEngine.validateGroup( "addEventForm" );
    if( vr.isValid ) {

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

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


        loadPanel.show();
        Fse.Ajax.performAction( {
            object : "CDR.eventAdd", 
            data : dataToSend
        }).done( function( addEventResult ) {

            //console.log('instance',instance)
            

            loadPanel.hide();
            //instance.element().remove();
            instance.popup.dispose();
            
            if( instance.onReturn ) {

              
                    instance.onReturn();
              

            }            
            
            
            
        })
    } else {

        let message = vr.brokenRules[0].message;
        if( vr.brokenRules.length > 1 ) {
            message = `'${message}' plus ${vr.brokenRules.length-1} more`;
        }

        DevExpress.ui.notify( message, "warning", 1000 );

        vr.brokenRules[0].validator.focus();
    }

}