SalesCallLinkedObjectives = function( options ) {

    let instance = this;
    instance.interactionId = options.interactionId;
    instance.stfId = options.stfId ? options.stfId : 0;
    instance.rootElement = null;
    instance.dataGrid = null;

}

SalesCallLinkedObjectives.prototype.constructor = SalesCallLinkedObjectives;


SalesCallLinkedObjectives.prototype.element = function() {
    let instance = this;
    if( instance.rootElement ) return rootElement;
    instance.rootElement = $("<div>").css( { "height" : "100%" } );

    instance.createUI().element().appendTo( instance.rootElement );

    return instance.rootElement;
}

SalesCallLinkedObjectives.prototype.createUI = function() {

    let instance = this;

    instance.dataGrid = $("<div>").dxDataGrid( {

		width : "100%",
        height : "100%",
        scrolling : {
            mode : "virtual"
        },
        noDataText : "No Linked Objectives",
		dataSource : Fse.Data.newDataSource( { object : "CRM.linkedObjectives", keyField : "objectiveId", objectParams : { interactionId : instance.interactionId, stfId : instance.stfId }} ),
		columns : [
			{
				name : "objectiveHeading",
				cellTemplate : function( container, options, containerx ) {
					let objective = options.data;
					container.append( $("<strong>").text( objective.objName ) );

					let noCreditLabel = "";
					if( objective.noCreditText != "" ) {
						noCreditLabel = ` - no credit for ${objective.noCreditText}`;
					}
					container.append( $("<span>").text( ` [${objective.quotaTypeDesc}${noCreditLabel}]` ) );
				}
			}
		],
		masterDetail : {
			enabled : true,
			autoExpandAll : true,
			template : function( container, options ) {

				let objective = options.data;

				let lineCSS = {
					"margin-bottom" : "5px"
				};

				let leftSide = $("<div>").css( { "width" : "100%", "padding-left" : "16px" } );



				leftSide.append( 

					$("<div>").css( lineCSS )
						.append( $("<strong>").text( "Due Date: " ) )
						.append( $("<span>").text( DevExpress.localization.formatDate( new Date( objective.dueDate ), "MM/dd/yyyy" )) )

				)

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

				rightSide.append( 

					$("<div>").css( { "white-space" : "normal", "padding-right" : "30px" } ).css( lineCSS )
						.append( $("<strong>").text( "Description: " ) )
						.append( $( "<span>" ).text( objective.objDescription ) )
				)

				rightSide.append( 

					$("<div>").css( lineCSS )
						.append( $("<strong>").text( "Total Quota: " ) )
						.append( $( "<span>" ).text( `${objective.totalQuota} ${objective.quotaTypeDesc}` ) )

				)

				// let staffAchievedPct = 0.0;
				// if( objective.staffQuota != 0 ) {
				// 	staffAchievedPct = objective.staffQuotaAchieved / objective.staffQuota;
				// }
				// rightSide.append( 

				// 	$("<div>").css( lineCSS )
				// 		.append( $("<strong>").text( `${objective.staffLastName} Quota: ` ) )
				// 		.append( $( "<span>" ).text( `${objective.staffQuota} ${objective.quotaTypeDesc}, ` ) )
				// 		.append( $( "<strong>" ).text( "Quota Achieved: " ) )
				// 		.append( $( "<span>" ).text( 
				// 			`${objective.staffQuotaAchieved} (${DevExpress.localization.formatNumber( staffAchievedPct, "percent" )})` 
				// 			))
						
				// )

				rightSide.append( 

					$("<div>").css( lineCSS )
						.append( $("<strong>").text( "Target Type: " ) )
						.append( $( "<span>" ).text( objective.targetTypeDesc ) )

				)

				if( objective.files.length ) {

					let attachmentDiv = $("<div>").css( lineCSS )

					attachmentDiv.append( $("<strong>" ).css( { "display" : "block" } ).text( "Attachments:" ) );
					objective.files.forEach( function( file ) {
						attachmentDiv.append( 
							$("<a>").css( {"display" : "block" }).text( file.docTitle ).attr( { "href" : file.docPath } )
						)
					})

					rightSide.append( attachmentDiv )
				}

				if( objective.qualifyingProducts.length ) {

					let productsDiv = $("<div>").css( lineCSS )

					productsDiv.append( $("<strong>" ).css( { "display" : "block" } ).text( "Qualifying Items/Categories:" ) );
					objective.qualifyingProducts.forEach( function( product ) {

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

						productDiv.append( $("<span>" ).text( product.mfr_name ) );
						if( product.skuId ) {
							productDiv.append( $("<strong>" ).text( ` ${product.sku}` ) );
							productDiv.append( $("<span>" ).text( ` ${product.linkDesc} ${product.packSize}` ) );
						} else {
							productDiv.append( $("<span>" ).text( ` Category ${product.linkDesc}` ) );
						}

						productsDiv.append( productDiv )
					})

					rightSide.append( productsDiv )
				}


				$("<div>").dxBox( {

					width : "100%",
					items : [
						{
							baseSize : 200,
							ratio : 0,
							template : function() {
								return leftSide
							}
						},
						{
							ratio : 1,
							template : function() {
								return rightSide;
							}
						}
					]
				}).appendTo( container );


			}
		}



	}).dxDataGrid( "instance" );

    return instance.dataGrid;



}