SalesCallAudit = function( options ) {

    let instance = this;

    this.interactionId = options.interactionId;
    this.rootElement = null;

	instance.auditFailureReasonsDataSource = Fse.Data.newDataSource( { object : "CRM.auditFailureReasons", keyField : "failureReasonId", paginate : false } );

    instance.rootElement = $("<div>").css( { "height" : "100%" } );

	instance.validationGroup = "SalesCallAudit";

	instance.refresh();

}

SalesCallAudit.prototype.constructor = SalesCallAudit;

SalesCallAudit.prototype.element = function() {

	return this.rootElement;

}

SalesCallAudit.prototype.refresh = function() {

	let instance = this;

	let interactionInfoDataSource = Fse.Data.newDataSource( { object : "BCM.interactionInfo", keyField : "interactionId", paginate : false, objectParams : { interactionId : instance.interactionId } });
	interactionInfoDataSource.load().done( function( data ) {

		instance.interactionInfo = data[0];

		instance.partnerContactsDataSource = Fse.Data.newDataSource( { object : "CRM.partnerContacts", keyField : "fspro_userId", objectParams : { partnerId : instance.interactionInfo.partnerId, partnerType : instance.interactionInfo.partnerType }} )

		instance.partnerContactsDataSource.store().byKey( instance.interactionInfo.contactId ).done( function( interactionContact ) {

			instance.interactionContact = interactionContact;	
			
		}).then( function() {
			instance.createUI();
		})

	})	
}

SalesCallAudit.prototype.save = function() {

	let instance = this;

	let savePromise = $.Deferred();

	let vr = DevExpress.validationEngine.validateGroup( instance.validationGroup );
	if( vr.isValid ) {

		let dataToSave = {

			interactionId : instance.interactionId,
			details : []
		}

		$.extend( dataToSave, instance.headerForm.option( "formData"));

		for( let interactionDetailId in instance.widgets ) {

			let widgets = instance.widgets[interactionDetailId];

			let auditItem = {
				interactionDetailId : parseInt( interactionDetailId )
			}

			auditItem.saleConfirmed = widgets.saleConfirmedRadioGroup.option( "value" );
			$.extend( auditItem, widgets.confirmationForm.option( "formData"));

			dataToSave.details.push( auditItem );

		}


		Fse.Ajax.performAction( {
			object : "BCM.saveSalesCallAudit",
			data : dataToSave
		}).done( function() {
			savePromise.resolve();
			instance.refresh();

			Fse.UI.toast( `Audit Saved`, "success", 1000 );

		})


	} else {
		savePromise.reject();
	}


	return savePromise;

}

SalesCallAudit.prototype.createNewContact = function() {

	let instance = this;

	let pce = new PartnerContactEditor( { partnerId :  instance.interactionInfo.partnerId , partnerType :  instance.interactionInfo.partnerType } );
	pce.show( {  
		data : {} ,
		onSuccess : function() {
			instance.partnerContactsDataSource.load().done( function() {
				// all of the contact data has been reloaded
			})
    	} 
	});
}

SalesCallAudit.prototype.createUI = function() {


    let instance = this;

	instance.rootElement.empty();

	if( instance.interactionInfo.disposition == "?" ) {
		instance.rootElement.append( $("<h2>").text( "Sales Call not finalized. Auditing not allowed." ) );
		return;
	}


	instance.widgets = {};



	let configureFields = function( interactionDetailId ) {

		let saleConfirmedRadioGroup = instance.widgets[interactionDetailId].saleConfirmedRadioGroup;
		let confirmationForm = instance.widgets[interactionDetailId].confirmationForm;

		let saleConfirmed = saleConfirmedRadioGroup.option( "value" );

		let saleConfirmedDateDisabled = false;
		let saleConfirmedFailureReasonIdDisabled = false;
		if( saleConfirmed == "Y" ) {
			saleConfirmedDateDisabled = false;
			saleConfirmedFailureReasonIdDisabled = true;
		} else if ( saleConfirmed == 'N' ) {
			saleConfirmedDateDisabled = false;
			saleConfirmedFailureReasonIdDisabled = false;
		} else {
			saleConfirmedDateDisabled = true;
			saleConfirmedFailureReasonIdDisabled = true;
		}

		if( saleConfirmedDateDisabled ) {
			confirmationForm.getEditor( "saleConfirmedDate" ).option( { disabled : true, value : null } );
		} else {
			let today = new Date();
			today.setHours( 0 );
			today.setMinutes( 0 );
			today.setSeconds( 0 );
			today.setMilliseconds( 0 );
			confirmationForm.getEditor( "saleConfirmedDate" ).option( { disabled : false, value : today } );
		}
		if( saleConfirmedFailureReasonIdDisabled ) {
			confirmationForm.getEditor( "saleConfirmedFailureReasonId" ).option( { disabled : true, value : null } );
		} else {
			confirmationForm.getEditor( "saleConfirmedFailureReasonId" ).option( { disabled : false } );
		}

		let enableNotification = false;
		for( let ii in instance.widgets ) {

			let saleConfirmedRadioGroup = instance.widgets[ii].saleConfirmedRadioGroup;
			let saleConfirmed = saleConfirmedRadioGroup.option( "value" );
			if( saleConfirmed == 'N') {
				enableNotification = true;
				break;
			}

		}

		instance.headerForm.getEditor( "sendAuditFailureNotification" ).option( "disabled", ! enableNotification );
		if( enableNotification ) {
			instance.headerForm.updateData( { "sendAuditFailureNotification" : true } )
		} else {
			instance.headerForm.updateData( { "sendAuditFailureNotification" : false } )
		}

	}

    let dataSource = Fse.Data.newDataSource( { object : "BCM.salesCallAudit", keyField : "interactionDetailId", paginate : false, objectParams : { interactionId : instance.interactionId } } );

	dataSource.load().done( function( auditData ) {

		if( ! auditData || auditData.length == 0 ) {
			instance.rootElement.append( $("<h2>").text( "No sold items on this Sales Call." ) );
			return;
		}

		let heading = $("<div>").css( { "padding" : "5px" } ).dxBox( {
			direction : "row",
			items : [

				{ // partner info
					baseSize : 300,
					template : function() {
						let content = $("<div>");
						content.append( $("<div>").css( { "font-weight" : "bold" } ).text( instance.interactionInfo.partnerName ) );
						content.append( $("<div>").text( instance.interactionInfo.address ) );
						content.append( $("<div>").text( `${instance.interactionInfo.city}, ${instance.interactionInfo.state} ${instance.interactionInfo.zipCode}` ) );
						content.append( $("<div>").text( instance.interactionInfo.phone ) );
						return content;
					}
				},

				{ // partner contact info
					baseSize : 300,
					template : function() {
						let content = $("<div>");
						$("<div>").dxBox( {
							direction : "row",
							items : [
								{ 
									baseSize : 125,
									text : "Phone:"
								},
								{ 
									ratio : 1,
									template : function() {
										return $("<div>").text( instance.interactionContact.phone )
									}
								}
							]
						}).appendTo( content );
						$("<div>").dxBox( {
							direction : "row",
							items : [
								{ 
									baseSize : 125,
									text : "Sales Call Contact:"
								},
								{ 
									ratio : 1,
									template : function() {
										return $("<div>").text( `${instance.interactionContact.firstName} ${instance.interactionContact.lastName}` )
									}
								}
							]
						}).appendTo( content );
						$("<div>").dxBox( {
							direction : "row",
							items : [
								{ 
									baseSize : 125,
									text : ""
								},
								{ 
									ratio : 1,
									template : function() {
										let aTag = $("<a>").css( { "text-decoration" : "underline", "cursor" : "pointer" } ).text( 'Add New Contact' );
										aTag.on( "click", function() { instance.createNewContact() } )
										return aTag;
									}
								}
							]
						}).appendTo( content );
						return content;
					}
				},

				{ // interaction level audit fields
					ratio : 1,
					template : function() {
						instance.headerForm = $("<div>").dxForm( {
							formData : {
								sendAuditFailureNotification : false,
								saleConfirmedNotifyNote : null
							},
							validationGroup : instance.validationGroup,
							items : [
								{ dataField : "sendAuditFailureNotification", label : { text : "Notify Sales Person" },
									editorType : "dxCheckBox",
									editorOptions : { disabled : true }
								},
								{
									dataField : "saleConfirmedNotifyNote", 
									label : { "text" : "Additional Email Comments" },
									editorType : "dxTextArea", 
									editorOptions : { maxLength : 1000, height : "4em", disabled : true }
								}
							],
							onFieldDataChanged : function( e ) {
								if( e.dataField == "sendAuditFailureNotification" ) {
									let editorOptions = {
										disabled : e.value ? false : true
									}
									if( editorOptions.disabled ) {
										editorOptions.value = null;
									}
									e.component.getEditor( "saleConfirmedNotifyNote" ).option( editorOptions );
								}
							}
						}).dxForm( "instance" );
						return instance.headerForm.element();

					}
				}
				
			]
		});


		// list heading
		let listHeadingCSS = {
			"padding-left" : "5px",
			"padding-right" : "5px",
			"padding-top": "8px",
			"padding-bottom" : "2px"
		}
		let listHeading = $("<div>").addClass( "dx-theme-border-color-as-background-color" ).css( { "margin-top" : "10px", "xmargin-left" : "5px", "xmargin-right" : "5px" } ).dxBox( {
			direction : "row",
			items : [
				{
					baseSize : 100,
					template : function() {
						return $("<div>").css( listHeadingCSS ).text( "Item" )
					}

				},
				{
					baseSize : 300,
					ratio : 1,
					template : function() {
						return $("<div>").css( listHeadingCSS ).text( "Description" )
					}
				},
				{
					baseSize : 130,
					template : function() {
						return $("<div>").css( listHeadingCSS ).text( "Ship Status" )
					}
				},
				{
					baseSize : 500,
					ratio : 2,
					template : function() {
						return $("<div>").css( listHeadingCSS ).text( "Confirmation Details" )
					}
				}
			]
		})


		instance.list = $("<div>").css( { "height" : "100%", "border-left-width" : "1px", "border-left-style" : "solid","border-right-width" : "1px", "border-right-style" : "solid", "border-bottom-width" : "1px", "border-bottom-style" : "solid"  } ).addClass( "dx-theme-border-color" ).dxList( {

			dataSource : dataSource,
			itemTemplate : function( itemData ) {

				const interactionDetailId = itemData.interactionDetailId;

				let widgets = {};
				instance.widgets[interactionDetailId] = widgets;

				
				let box = $("<div>").css( { "padding-bottom" : "5px", "padding-top" : "5px" } ).dxBox( {
					direction : "row",
					items : [
						{
							baseSize : 100,
							template : function() {
								let content = $("<div>");
								content.append( $("<div>").text( itemData.sku ) )
								return content;
							}

						},
						{
							baseSize : 300,
							ratio : 1,
							template : function() {
								let content = $("<div>");
								content.append( $("<div>").css( { "font-weight" : "bold" } ).text( itemData.mfr_name ) );
								content.append( $("<div>").css( { "white-space" : "pre-wrap" } ).text( `${itemData.skuDesc} ${itemData.packSizeDesc }` ) );

								let dispositionDisplay = itemData.disposition;
								if( itemData.disposition == "FU" ) {
									dispositionDisplay = "Follow Up"
								} else if( itemData.disposition == "STD" ) {
									dispositionDisplay = "Sale"
								} else if( itemData.disposition == "1T" ) {
									dispositionDisplay = "Sale"
								} else if( itemData.disposition == "NS" ) {
									dispositionDisplay = "No Sale"
								}
								content.append( $('<div>').css( { "font-weight" : "bold" } ).text( `${dispositionDisplay} - ${itemData.saleQty} ${itemData.saleUOM } per ${itemData.saleDurationUnit}` ));

								if( itemData.auditRequired == 'Y' ) {
									content.append( $('<div>').css( { "color" : "#f53611" } ).text( "Audit required by manufacturer!" ));
								}

								if( itemData.comment ) {
									content.append( $('<div>').css( { "white-space" : "pre-wrap" } ).text( `Note: ${itemData.comment}` ));
								}

								return content;
							}
						},
						{
							baseSize : 130,
							template : function() {
								let content = $("<div>");
								widgets.saleConfirmedRadioGroup = $("<div>").dxRadioGroup( {
									layout : "vertical",
									items : [
										{ text : "Unknown", value : "?" },
										{ text : "Shipped", value : "Y" },
										{ text : "Not Shipped", value : "N" }
									],
									valueExpr : "value",
									displayExpr : "text",
									value : itemData.saleConfirmed,
									onValueChanged : function( e ) {
										configureFields( interactionDetailId );
									}
								}).dxRadioGroup( "instance" )
								content.append( widgets.saleConfirmedRadioGroup.element() )
								return content;
							}
						},
						{
							baseSize : 500,
							ratio : 2,
							template : function() {
								let content = $("<div>");

								widgets.confirmationForm = $("<div>").dxForm( {

									validationGroup : instance.validationGroup,
									formData : {
										saleConfirmedContactId : itemData.saleConfirmedContactId,
										saleConfirmedDate : itemData.saleConfirmedDate,
										saleConfirmedFailureReasonId : itemData.saleConfirmedFailureReasonId,
										saleConfirmedNotes : itemData.saleConfirmedNotes,
										auditRequired : itemData.auditRequired == "Y" ? true : false
									},

									items : [
										{
											dataField : "saleConfirmedContactId",
											label : { text : "Customer Contact" },
											editorType : "dxSelectBox",
											editorOptions : {
												placeholder : "Select Contact",
												dataSource : instance.partnerContactsDataSource,
												showClearButton : true,
												valueExpr : "fspro_userId",
												displayExpr : function( itemData ) {
													if( itemData ) {
														return `${itemData.firstName} ${itemData.lastName}`;
													} else {
														return null;
													}
												}
											}
										},
										{
											dataField : "saleConfirmedDate",
											label : { text : "Confirmation Date" },
											isRequired : true,
											editorType : "dxDateBox",
											editorOptions : {
												disabled : true,
												openOnFieldClick : true
											}
										},
										{
											dataField : "saleConfirmedFailureReasonId",
											label : { text : "No Ship Reason" },
											isRequired : true,
											editorType : "dxSelectBox",
											editorOptions : {
												placeholder : "Select Reason",
												dataSource : instance.auditFailureReasonsDataSource,
												displayExpr : "failureReason",
												valueExpr : "failureReasonId",
												disabled : true
											}
										},
										{
											dataField : "saleConfirmedNotes",
											label : { visible : false },
											editorType : "dxTextArea",
											editorOptions : {
												maxLength : 500
											}
										}
									]

								}).dxForm( "instance" )

								content.append( widgets.confirmationForm.element() )

								return content;
							}
						}
					]
				})

				return box;


			},

			onItemRendered : function( e ) {
				if( e.itemElement ) {
					e.itemElement.css( { "border-bottom-width" : "1px", "border-bottom-style" : "solid" }).addClass( "dx-theme-border-color" ).addClass( "dx-theme-background-color" )
				}
			}


		}).dxList( "instance" );

		$("<div>").dxBox( {
			height : "100%",
			direction : "col",
			items : [
				{
					baseSize : 100,
					template : function() {
						return heading;
					}
				},
				{
					baseSize : 38,
					template : function() {
						return listHeading;
					}
				},
				{
					ratio : 1,
					template : function() {
						return instance.list.element();
					}
				}
			]
		}).appendTo( instance.rootElement );

		// instance.rootElement.append( instance.list.element() );
	})

}