$(function(){
	
	  var container = $("<div />")
      .addClass("popup-property-details")
      .appendTo($("#popup"));
	  
	  
	 var form =  $("#form").dxForm({
        colCount: 1,
        formData: formData,
        items: [{
            dataField: "Buying Group/GPO",
            editorOptions: {
            	width: '40%', 
                buttons: [{
                    name: "trash",
                    location: "after",
                    options: {
                    	stylingMode: "text",
                        icon: "images/ico-challenge.png",
                        onClick: function() {
                        	var s = "BG";
                        	var popup = container.dxPopup(popupOptions).dxPopup("instance");
                          	 popup.option({
                                 contentTemplate: () => popupContentTemplate(s)
                                 
                             });
                             popup.show();
                        }
                    }
                }]
            }
        },
        {
            dataField: "Food Mgmt Co.",
            editorOptions: {
            	width: '40%', 
                buttons: [{
                    name: "trash",
                    location: "after",
                    options: {
                    	stylingMode: "text",
                        icon: "images/ico-challenge.png",
                        onClick: function() {
                        	var s = "food";
                        	var popup = container.dxPopup(popupOptions).dxPopup("instance");
                          	 popup.option({
                                 contentTemplate: () => popupContentTemplate(s)
                                 
                             });
                             popup.show();
                        }
                    }
                }]
            }
        },
        {
            dataField: "Chain Account Name", 
            editorOptions: {
            	width: '40%', 
                buttons: [{
                    name: "trash",
                    location: "after",
                   
                    options: {
                    	stylingMode: "text",
                        icon: "images/ico-challenge.png",
                        onClick: function() {
                        	var s = "chain";
                        	var popup = container.dxPopup(popupOptions).dxPopup("instance");
                          	 popup.option({
                                 contentTemplate: () => popupContentTemplate(s)
                                 
                             });
                             popup.show();
                        }
                    }
                }]
            }
        }
        ]
    }).dxForm("instance");
    
	  
    
    const popupContentTemplate = function(s) {
    	
    	var id = 0;
    	var update_text = "Please pick the value you believe needs to be added/changed to this profile from the dropdown below :";
    	var getListLink = "getUpdatesList.cfm";
    	getListLink = getListLink +"?type=";
    	var type = "G";
    	
    	   if(s === "chain") {
              id = 2;
              update_text = "Please pick the value to which you believe this this unit to be aligned?";
              type = "P";
           } else if(s === "food") {
              id = 1;
              type = "C";
           }
    	   
    	   getListLink = getListLink+type;

    	        var output = $('<div />');
    	       
				let challenge_inner_div = $('<div />');
				challenge_inner_div.dxSelectBox({
					dataSource: new DevExpress.data.ArrayStore({
						data: challengeTypes,
						key: "ID"
					}),
					displayExpr: "Name",
					valueExpr: "ID",
					value: challengeTypes[id].ID,
					readOnly: true
				});//might cause memory leak/buildup from old ones piling up
				
				document.getElementById("type").value = challengeTypes[id].Name;
				document.getElementById("typeCode").value = type;
				
				//form.updateData("type", challengeTypes[id].Name);
				output.append(challenge_inner_div);
				
				
				let lower_div_heading = $('<div class="dx-field">'+ update_text+'</div>');
				let lower_div = $('<div id="lookup" />');
				
				//console.log( $.getJSON("getUpdatesList.cfm"));
				lower_div.dxLookup({
			        dropDownOptions: {
			            showTitle: false
			        },
			        
			        placeholder: "Select an option...",
					displayExpr:"name",
					valueExpr: "id" ,
					dataSource: new DevExpress.data.CustomStore({//Very important - make sure this is a one-shot dataSource; is raw&cacheRawData
			            loadMode: "raw",
			            cacheRawData: true,
			            key: "ID",
			            load: function() {
			                return $.getJSON(getListLink).done(function(oprData){
			                	//DevExpress Warning W1011 - The "keyExpr" option is not applied when dataSource is not an array.
			                	for (var _i=0; _i<oprData.length; _i++){				                		
			                		//Convert numerical fields 'opportunityrecordcount', etc, from strings->ints
			                		
			                		oprData[_i]["ID"] = parseInt(oprData[_i]["id"]);
			                	}
			                });
			            }
			        }),
			        onValueChanged: function(e) {
			            $(".selected").show();
			            document.getElementById("one1fsOPR").value = e.value;
			           
			        }
			        
			     
					/*dataSource: new DevExpress.data.CustomStore({
						loadMode: "raw",
			            cacheRawData: true,
			            key: "ID",
			            displayExpr: function(data){return data.name},
			            load: function() {
			                return $.getJSON("getUpdatesList.cfm").done(function(oprData){
			                  	for (var _i=0; _i<oprData.length; _i++){				                		
			                		//Convert numerical fields 'opportunityrecordcount', etc, from strings->ints
			                  		oprData[_i]["ID"] = parseInt(oprData[_i]["id"]);
			                		
			                	}
			                  	//console.log(oprData);
			                });
			                }
			            
					})*/
			        
			        //items: updateList,
			       // value: updateList[0]
			   });
				
				
				let lower_div_notes = $('<div id="notes" />');
				lower_div_notes.dxTextArea({
					  dataField: "notesText",
			        placeholder: "Notes (Optional) ..",
			        height: 90,
			        valueChangeEvent: "change",
			        onValueChanged: function(data) {
			        	 document.getElementById("notes").value = data.value;
			        }
			    });
			  
			    
			
				
				output.append(lower_div_heading);
	            output.append(lower_div);
	            output.append(lower_div_notes);
    	        return output;
    };
  
      

    
   
    
  var popupOptions = {
		  contentTemplate: popupContentTemplate,
		  width: 600,
		  height: 350,
		  container: ".listContainer",
		  showTitle: true,
		  title: "Information",
		  visible: false,
		  dragEnabled: false,
		  closeOnOutsideClick: true,
		  showCloseButton: false,
		  position: {
		    at: "bottom",
		    my: "center",
		  },
		  toolbarItems: [{
		    widget: "dxButton",
		    toolbar: "bottom",
		    location: "before",
		   
		    options: {
		      icon: "todo",
		      text: "Submit",
		      type: "success",
		      useSubmitBehavior: true
		     
		    }
		  }, {
		    widget: "dxButton",
		    toolbar: "bottom",
		    location: "after",
		    options: {
		      text: "Close",
		      onClick: function(e) {
		    	  container.dxPopup(popupOptions).hide();
		      }
		    }
		  }]
        }; 
      

  
  $("#form-container").on("submit", function(e) {
	  //alert("here");
	  const message = `Thank you for your submission.  A message has been sent to a 1FS Data Analyst to review.  A message will be sent to you when this request has been brought to a resolution`;
      DevExpress.ui.notify({
        message: message,
        position: {
          my: "center top",
          at: "center top"
        }
      }, "success", 3000);
      
    // e.preventDefault();
  }); 
});