Source: invitee-rightpanel.js


/**
* This object sets default values for popup modal such as increase time of display of message on the screen, position of the popup modal
*/
var toastrOptions = {
    timeOut: 15000,
    closeButton: false,
    positionClass: "toast-bottom-right",
}

/**
* This function shows the success (green) popup message on the screen
* @param {string} message - Success Message
*/
var successToastr = function(message) {
	return;
	toastr.remove()
    toastr.success(message, '', toastrOptions) 
}

/**
* This function shows the info (blue) popup message on the screen
* @param {string} message - Information Message
*/
var infoToastr = function(message) {
	toastr.remove()
    toastr.info(message, '', toastrOptions)
}

/**
* This function shows the error (red) popup message on the screen
* @param {string} message - Success Message
*/
var errorToastr = function(message) {
	toastr.remove()
    toastr.error(message, '', toastrOptions)
}

/**
* This is an object that consists of various functions to handle the staff's responses to be displayed in invite's dashboard.
Forms and Activities gets filtered out and gets displayed on its respective view section. Status of forms are also displayed
*/
var StaffAction = {
	show: "all",
	// number_format : function(number, decimals, dec_point, thousands_point) {

	//     if (number == null || !isFinite(number)) {
	//         throw new TypeError("number is not valid");
	//     }

	//     if (!decimals) {
	//         var len = number.toString().split('.').length;
	//         decimals = len > 1 ? len : 0;
	//     }

	//     if (!dec_point) {
	//         dec_point = '.';
	//     }

	//     if (!thousands_point) {
	//         thousands_point = ',';
	//     }

	//     number = parseFloat(number).toFixed(decimals);

	//     number = number.replace(".", dec_point);

	//     var splitNum = number.split(dec_point);
	//     splitNum[0] = splitNum[0].replace(/\B(?=(\d{3})+(?!\d))/g, thousands_point);
	//     number = splitNum.join(dec_point);

	//     return number;
	// }, 
	addFine: function (type, data) {
		var template;
		console.log('fine data', data)
		// var amount = this.number_format(data.payment_amount, '2', '.', ',');
		var commonTemplate = `
		<div class="staff-response-box-wrap ${data.title}" id="${type}${data.id}">
			<div>
		        <div class="staff-response-box-time">
		            <i class="fa fa-clock-o fa-2x"></i>
		        </div>
		        <p class="sm-font text-center">
					${this.parseTime(data.updated_date)} 
		        </p>
		    </div>
		    <div class="card new-card w-100 h-auto top-left-corner ml-2">
		    	<h6 class="text-capitalize">
					Payment Acknowlegement
		        </h6>
		`;

		if (data.payment_status === 'due') {
			template = `${commonTemplate}			
				        	<p class="text-black-50">
								The ${data.title} has sent you payment request.
					        </p>
						`;
			if(data.action === 'deleted'){
				template = `${template}
							<div class="my-d-flex" style="justify-content: space-between;">
								<p class="alert alert-danger sm-font new-alert-box">
									Deleted by the ${data.title} on ${this.parseTime(data.updated_date)} 
								</p>
							</div>
					    </div>
					</div>
				`;

			}else if(data.action === 'updated') {
				template = `
							${template}
							<div class="my-d-flex" style="justify-content: space-between;">
								<p class="alert alert-info sm-font new-alert-box">
									Edited
								</p>
					        	<button title="Acknowledge payment" type="button" class="btn btn-primary btn-sm js-fine-new-window" data-fine="${data.id}">
						          View Detials
						        </button>
							</div>
						</div>
					</div>
				`;
			}else {
				template = `
							${template}
					        <div class="text-right">
							<button title="Acknowledge payment" type="button" class="btn btn-primary btn-sm js-fine-new-window" data-fine="${data.id}">
							View Detials
						  </button>
				        	</div>
					    </div>
					</div>
				`;
			}
		}else if (data.payment_status === 'disagree') {
			template = `${commonTemplate}			
				        	<p class="text-black-50">
							The ${data.title} has sent you payment request.
					        </p>
						`;
			if(data.action === 'deleted'){
				template = `${template}
							<div class="my-d-flex" style="justify-content: space-between;">
								<p class="alert alert-danger sm-font new-alert-box">
									Deleted by the ${data.title} on ${this.parseTime(data.updated_date)} 
								</p>
							</div>
					    </div>
					</div>
				`;

			}else if(data.action === 'updated') {
				template = `
							${template}
							<div class="my-d-flex" style="justify-content: space-between;">
								<p class="alert alert-info sm-font new-alert-box">
									Disagreed to pay
								</p>
					        	
							</div>
						</div>
					</div>
				`;
			}else {
				template = `
							${template}
					        <div class="text-right">
					        	<button title="Acknowledge payment" type="button" class="btn btn-primary btn-sm js-fine-new-window" data-fine="${data.id}">
						          Acknowledge payment
						        </button>
				        	</div>
					    </div>
					</div>
				`;
			}
		}
		 else {
			template = `${commonTemplate}
			        <p class="text-black-50">
			        	You have agreed to fine on ${this.parseTime(data.updated_date)} 
					</p>
			`;
			if(data.action === 'deleted'){
				template = `
							${template}
							<div class="my-d-flex" style="justify-content: space-between;">
								<p class="alert alert-danger sm-font new-alert-box">
									Deleted by the ${data.title} on ${data.updated_date}
								</p>
							</div>
					    </div>
					</div>
				`;

			}else {
				template = `${template}
							<div class="my-d-flex" style="justify-content: space-between;">
								<p class="alert alert-success sm-font new-alert-box">
									Agreed to pay
								</p>
								<button title="Pay Now" type="button" class="btn btn-primary btn-sm js-fine-new-window" data-fine="${data.id}">
								View Details
							  </button>
							</div>
					    </div>
					</div>
				`;
			}
		}
		this.showUI(template, data.action, '#'+type+ data.id);

		
	},
	addCompliance: function (type, data) {
		var template;
		var commonTemplate = `
		<div class="staff-response-box-wrap ${data.title}" id="${type}${data.id}">
		    <div>
		        <div class="staff-response-box-time">
		            <i class="fa fa-clock-o fa-2x"></i>
		        </div>
		        <p class="sm-font text-center">
					${this.parseTime(data.updated_date)} 
		        </p>
		    </div>
		    <div class="card new-card w-100 h-auto top-left-corner ml-2">
		        <h6 class="text-capitalize">
		            Compliance Form Received
		        </h6>
		        <p class="text-black-50">
		           The ${data.title} has sent you the compliance form. 
		            <br>
		            <b>Note : </b>${data.note} 
		        </p>
		        <div class="my-d-flex" style="justify-content: space-between;">
		            <p class="alert alert-info mr-2 sm-font new-alert-box">Deadline :${this.parseTime(data.deadline)} </p>
		`;

		if (data.status === 'signed') {
			if(data.action === 'deleted'){
				template = `${commonTemplate}
					    </div>
						<div class="mt-3">
							<p class="alert alert-danger sm-font new-alert-box">
								Deleted by the ${data.title} on ${this.parseTime(data.updated_date)} 
							</p>
						</div>
						<div class="mt-3">
							<p class="alert alert-success sm-font new-alert-box">Signed</p>
						</div>
					</div>
				</div>
				`;

			}else {
				template = `${commonTemplate}				        
						</div>
						<div class="my-d-flex mt-3" style="justify-content: space-between;">
							<p class="alert alert-success sm-font new-alert-box">Signed</p>
							<button type="button" class="btn btn-primary btn-sm my-0 js-compliance-window" data-id="${data.id}" title="View Document">
								View Document
							</button>
						</div>
					</div>
				</div>`
			};
		} else {
			if(data.action === 'deleted'){
				template = `${commonTemplate}
					    </div>
						<div class="my-d-flex mt-3" style="justify-content: space-between;">
							<p class="alert alert-danger sm-font new-alert-box">
								Deleted by the ${data.title} on ${this.parseTime(data.updated_date)} 
							</p>
						</div>
					</div>
				</div>
				`;

			}else if(data.action === 'updated') {
				template = `
							${commonTemplate}
						</div>
							<div class="my-d-flex mt-3" style="justify-content: space-between;">
								<p class="alert alert-info sm-font new-alert-box">
									Edited
								</p>
								<button type="button" class="btn btn-primary btn-sm my-0 js-compliance-window" data-id="${data.id}" title="Sign Compliance Form">
									View Details
								</button>
							</div>
						</div>
					</div>
				`;
			}else {
				template = `
							${commonTemplate}
					        	<button type="button" class="btn btn-primary btn-sm my-0 js-compliance-window" data-id="${data.id}" title="Sign Compliance Form">
								View Details
					        	</button>
				        	</div>
					    </div>
					</div>
				`;
			}
		}

		this.showUI(template, data.action, '#'+type+ data.id);

		// if (update === '') {
		// 	$('#offender-action-message').prepend(template)
		// } else {
		// 	$('#add_compliance' + data.id).removeAttr('class').empty().append(template)
		// }
	},
	addProbation: function (type, data) {

		console.log(data);
		var template;
		var commonTemplate = `
		<div class="staff-response-box-wrap ${data.slug}" id="${type}${data.id}">
		    <div>
		        <div class="staff-response-box-time">
		            <i class="fa fa-clock-o fa-2x"></i>
		        </div>
		        <p class="sm-font text-center">
				${this.parseTime(data.updated_date)} 
		        </p>
		    </div>
		    <div class="card new-card w-100 h-auto top-left-corner ml-2">
		        <h6 class="text-capitalize">
		            Probation Form Received
		        </h6>
		        <p class="text-black-50">
		           The ${data.title} has sent you the probation form.
		        </p>
		`;

		if (data.status === 'incomplete') {
			if(data.action === 'deleted'){
				template = `${commonTemplate}
						<div class="my-d-flex" style="justify-content: space-between;">
							<p class="alert alert-danger sm-font new-alert-box">
								Deleted by the ${data.title} on ${this.parseTime(data.updated_date)} 
							</p>
						</div>
					</div>
				</div>
				`;

			}else if(data.action === 'updated') {
				template = `
							${commonTemplate}
							<div class="my-d-flex" style="justify-content: space-between;">
								<p class="alert alert-info sm-font new-alert-box">
									Edited
								</p>
			                    <button type="button" class="btn btn-primary btn-sm js-probation-window" data-id="${data.id}" title="View Details">
			                    	View Details
			                    </button>
							</div>
						</div>
					</div>
				`;
			}else {
				template = `
							${commonTemplate}
							<div class="text-right">
			                    <button type="button" class="btn btn-primary btn-sm js-probation-window" data-id="${data.id}" title="View Details">
			                    	View Details
			                    </button>
			                </div>
					    </div>
					</div>
				`;
			}
		} else {
			if(data.action === 'deleted'){
				template = `${commonTemplate}
						<div class="">
							<p class="alert alert-danger sm-font new-alert-box">
								Deleted by the ${data.title} on ${this.parseTime(data.updated_date)} 
							</p>
						</div>
						<div class="mt-3">
							<p class="alert alert-success new-alert-box sm-font text-capitalize">${data.status}</p>
						</div>
					</div>
				</div>
				`;

			}else {
				template = `${commonTemplate}
						<div class="my-d-flex mt-3" style="justify-content: space-between;">
							<p class="alert alert-success new-alert-box sm-font text-capitalize">${data.status}</p>
							<button type="button" class="btn btn-primary btn-sm my-0 js-probation-window" data-id="${data.id}" title="View Document">
								View Document
							</button>
						</div>
					</div>
				</div>`
			};
		}
		this.showUI(template, data.action, '#'+type+ data.id);
		// if (update === '') {
		// 	$(template).prependTo('#offender-action-message').hide().slideDown(5000,'easeInQuad');
		// 	//$('#offender-action-message').prepend(template);
		// } else {
		// 	$('#add_probation' + data.id).removeAttr('class').empty().append(template)
		// }
	},

	addFBProbation: function (type, data) {

		console.log(data);
		var template;
		var commonTemplate = `
		<div class="staff-response-box-wrap ${data.slug}" id="${type}${data.id}">
		    <div>
		        <div class="staff-response-box-time">
		            <i class="fa fa-clock-o fa-2x"></i>
		        </div>
		        <p class="sm-font text-center">
				${this.parseTime(data.updated_date)} 
		        </p>
		    </div>
		    <div class="card new-card w-100 h-auto top-left-corner ml-2">
		        <h6 class="text-capitalize">
		            Probation Form Received
		        </h6>
		        <p class="text-black-50">
		           The ${data.title} has sent you the probation form.
		        </p>
		`;

		if (data.status === 'incomplete') {
			if(data.action === 'deleted'){
				template = `${commonTemplate}
						<div class="my-d-flex" style="justify-content: space-between;">
							<p class="alert alert-danger sm-font new-alert-box">
								Deleted by the ${data.title} on ${this.parseTime(data.updated_date)} 
							</p>
						</div>
					</div>
				</div>
				`;

			}else if(data.action === 'updated') {
				template = `
							${commonTemplate}
							<div class="my-d-flex" style="justify-content: space-between;">
								<p class="alert alert-info sm-font new-alert-box">
									Edited
								</p>
			                    <button type="button" class="btn btn-primary btn-sm js-fb-probation-window" data-id="${data.id}" title="View Document">
								View Document
			                    </button>
							</div>
						</div>
					</div>
				`;
			}else {
				template = `
							${commonTemplate}
							<div class="text-right">
			                    <button type="button" class="btn btn-primary btn-sm js-fb-probation-window" data-id="${data.id}" title="View Document">
								View Document
			                    </button>
			                </div>
					    </div>
					</div>
				`;
			}
		} else {
			if(data.action === 'deleted'){
				template = `${commonTemplate}
						<div class="">
							<p class="alert alert-danger sm-font new-alert-box">
								Deleted by the ${data.title} on ${this.parseTime(data.updated_date)} 
							</p>
						</div>
						<div class="mt-3">
							<p class="alert alert-success new-alert-box sm-font text-capitalize">${data.status}</p>
						</div>
					</div>
				</div>
				`;

			}else {
				template = `${commonTemplate}
						<div class="my-d-flex mt-3" style="justify-content: space-between;">
							<p class="alert alert-success new-alert-box sm-font text-capitalize">${data.status}</p>
							<button type="button" class="btn btn-primary btn-sm my-0 js-fb-probation-window" data-id="${data.id}" title="View Document">
								View Document
							</button>
						</div>
					</div>
				</div>`
			};
		}
		this.showUI(template, data.action, '#'+type+ data.id);
		// if (update === '') {
		// 	$(template).prependTo('#offender-action-message').hide().slideDown(5000,'easeInQuad');
		// 	//$('#offender-action-message').prepend(template);
		// } else {
		// 	$('#add_probation' + data.id).removeAttr('class').empty().append(template)
		// }
	},



	addProIntake: function (type, data) {

		console.log(data);
		var template;
		var commonTemplate = `
		<div class="staff-response-box-wrap ${data.slug}" id="${type}${data.id}">
		    <div>
		        <div class="staff-response-box-time">
		            <i class="fa fa-clock-o fa-2x"></i>
		        </div>
		        <p class="sm-font text-center">
				${this.parseTime(data.updated_date)} 
		        </p>
		    </div>
		    <div class="card new-card w-100 h-auto top-left-corner ml-2">
		        <h6 class="text-capitalize">
		            Intake Form Received
		        </h6>
		        <p class="text-black-50">
		           The ${data.title} has sent you the intake form.
		        </p>
		`;

		if (data.status === 'incomplete') {
			if(data.action === 'deleted'){
				template = `${commonTemplate}
						<div class="my-d-flex" style="justify-content: space-between;">
							<p class="alert alert-danger sm-font new-alert-box">
								Deleted by the ${data.title} on ${this.parseTime(data.updated_date)} 
							</p>
						</div>
					</div>
				</div>
				`;

			}else if(data.action === 'updated') {
				template = `
							${commonTemplate}
							<div class="my-d-flex" style="justify-content: space-between;">
								<p class="alert alert-info sm-font new-alert-box">
									Edited
								</p>
			                    <button type="button" class="btn btn-primary btn-sm js-pro-intake-window" data-id="${data.id}" title="View Document">
			                    	View Document
			                    </button>
							</div>
						</div>
					</div>
				`;
			}else {
				template = `
							${commonTemplate}
							<div class="text-right">
			                    <button type="button" class="btn btn-primary btn-sm js-pro-intake-window" data-id="${data.id}" title="View Document">
									View Document
			                    </button>
			                </div>
					    </div>
					</div>
				`;
			}
		} else {
			if(data.action === 'deleted'){
				template = `${commonTemplate}
						<div class="">
							<p class="alert alert-danger sm-font new-alert-box">
								Deleted by the ${data.title} on ${this.parseTime(data.updated_date)} 
							</p>
						</div>
						<div class="mt-3">
							<p class="alert alert-success new-alert-box sm-font text-capitalize">${data.status}</p>
						</div>
					</div>
				</div>
				`;

			}else {
				template = `${commonTemplate}
						<div class="my-d-flex mt-3" style="justify-content: space-between;">
							<p class="alert alert-success new-alert-box sm-font text-capitalize">${data.status}</p>
							<button type="button" class="btn btn-primary btn-sm my-0 js-pro-intake-window" data-id="${data.id}" title="View Document">
								View Document
							</button>
						</div>
					</div>
				</div>`
			};
		}
		this.showUI(template, data.action, '#'+type+ data.id);
	},
	addFairIntake: function (type, data) {

		console.log(data);
		var template;
		var commonTemplate = `
		<div class="staff-response-box-wrap ${data.slug}" id="${type}${data.id}">
		    <div>
		        <div class="staff-response-box-time">
		            <i class="fa fa-clock-o fa-2x"></i>
		        </div>
		        <p class="sm-font text-center">
				${this.parseTime(data.updated_date)} 
		        </p>
		    </div>
		    <div class="card new-card w-100 h-auto top-left-corner ml-2">
		        <h6 class="text-capitalize">
		            Fairburn Intake Form Received
		        </h6>
		        <p class="text-black-50">
		           The ${data.title} has sent you the fairburn intake form.
		        </p>
		`;

		if (data.status === 'incomplete') {
			if(data.action === 'deleted'){
				template = `${commonTemplate}
						<div class="my-d-flex" style="justify-content: space-between;">
							<p class="alert alert-danger sm-font new-alert-box">
								Deleted by the ${data.title} on ${this.parseTime(data.updated_date)} 
							</p>
						</div>
					</div>
				</div>
				`;

			}else if(data.action === 'updated') {
				template = `
							${commonTemplate}
							<div class="my-d-flex" style="justify-content: space-between;">
								<p class="alert alert-info sm-font new-alert-box">
									Edited
								</p>
			                    <button type="button" class="btn btn-primary btn-sm js-fair-intake-window" data-id="${data.id}" title="View Document">
			                    	View Document
			                    </button>
							</div>
						</div>
					</div>
				`;
			}else {
				template = `
							${commonTemplate}
							<div class="text-right">
			                    <button type="button" class="btn btn-primary btn-sm js-fair-intake-window" data-id="${data.id}" title="View Document">
									View Document
			                    </button>
			                </div>
					    </div>
					</div>
				`;
			}
		} else {
			if(data.action === 'deleted'){
				template = `${commonTemplate}
						<div class="">
							<p class="alert alert-danger sm-font new-alert-box">
								Deleted by the ${data.title} on ${this.parseTime(data.updated_date)} 
							</p>
						</div>
						<div class="mt-3">
							<p class="alert alert-success new-alert-box sm-font text-capitalize">${data.status}</p>
						</div>
					</div>
				</div>
				`;

			}else {
				template = `${commonTemplate}
						<div class="my-d-flex mt-3" style="justify-content: space-between;">
							<p class="alert alert-success new-alert-box sm-font text-capitalize">${data.status}</p>
							<button type="button" class="btn btn-primary btn-sm my-0 js-fair-intake-window" data-id="${data.id}" title="View Document">
								View Document
							</button>
						</div>
					</div>
				</div>`
			};
		}
		this.showUI(template, data.action, '#'+type+ data.id);
	},

addEIntake: function (type, data) {

		console.log(data);
		var template;
		var commonTemplate = `
		<div class="staff-response-box-wrap ${data.slug}" id="${type}${data.id}">
		    <div>
		        <div class="staff-response-box-time">
		            <i class="fa fa-clock-o fa-2x"></i>
		        </div>
		        <p class="sm-font text-center">
				${this.parseTime(data.updated_date)} 
		        </p>
		    </div>
		    <div class="card new-card w-100 h-auto top-left-corner ml-2">
		        <h6 class="text-capitalize">
		            First Appointment Form Received
		        </h6>
		        <p class="text-black-50">
		           The ${data.title} has sent you the First Appointment form.
		        </p>
		`;

		if (data.status === 'incomplete') {
			if(data.action === 'deleted'){
				template = `${commonTemplate}
						<div class="my-d-flex" style="justify-content: space-between;">
							<p class="alert alert-danger sm-font new-alert-box">
								Deleted by the ${data.title} on ${this.parseTime(data.updated_date)} 
							</p>
						</div>
					</div>
				</div>
				`;

			}else if(data.action === 'updated') {
				template = `
							${commonTemplate}
							<div class="my-d-flex" style="justify-content: space-between;">
								<p class="alert alert-info sm-font new-alert-box">
									Edited
								</p>
			                    <button type="button" class="btn btn-primary btn-sm js-e-intake-window" data-id="${data.id}" title="View Document">
			                    	View Document
			                    </button>
							</div>
						</div>
					</div>
				`;
			}else {
				template = `
							${commonTemplate}
							<div class="text-right">
			                    <button type="button" class="btn btn-primary btn-sm js-e-intake-window" data-id="${data.id}" title="View Document">
									View Document
			                    </button>
			                </div>
					    </div>
					</div>
				`;
			}
		} else {
			if(data.action === 'deleted'){
				template = `${commonTemplate}
						<div class="">
							<p class="alert alert-danger sm-font new-alert-box">
								Deleted by the ${data.title} on ${this.parseTime(data.updated_date)} 
							</p>
						</div>
						<div class="mt-3">
							<p class="alert alert-success new-alert-box sm-font text-capitalize">${data.status}</p>
						</div>
					</div>
				</div>
				`;

			}else {
				template = `${commonTemplate}
						<div class="my-d-flex mt-3" style="justify-content: space-between;">
							<p class="alert alert-success new-alert-box sm-font text-capitalize">${data.status}</p>
							<button type="button" class="btn btn-primary btn-sm my-0 js-e-intake-window" data-id="${data.id}" title="View Document">
								View Document
							</button>
						</div>
					</div>
				</div>`
			};
		}
		this.showUI(template, data.action, '#'+type+ data.id);
	},
	addRecommendation: function (type, data) {

		console.log(data);
		var template;
		var commonTemplate = `
		<div class="staff-response-box-wrap ${data.slug}" id="${type}${data.id}">
		    <div>
		        <div class="staff-response-box-time">
		            <i class="fa fa-clock-o fa-2x"></i>
		        </div>
		        <p class="sm-font text-center">
				${this.parseTime(data.updated_date)} 
		        </p>
		    </div>
		    <div class="card new-card w-100 h-auto top-left-corner ml-2">
		        <h6 class="text-capitalize">
				DUI Form Received
		        </h6>
		        <p class="text-black-50">
		           The ${data.title} has sent you the DUI form.
		        </p>
		`;

		if (data.status === 'incomplete') {
			if(data.action === 'deleted'){
				template = `${commonTemplate}
						<div class="my-d-flex" style="justify-content: space-between;">
							<p class="alert alert-danger sm-font new-alert-box">
								Deleted by the ${data.title} on ${this.parseTime(data.updated_date)} 
							</p>
						</div>
					</div>
				</div>
				`;

			}else if(data.action === 'updated') {
				template = `
							${commonTemplate}
							<div class="my-d-flex" style="justify-content: space-between;">
								<p class="alert alert-info sm-font new-alert-box">
									Edited
								</p>
			                    <button type="button" class="btn btn-primary btn-sm js-recommendation-window" data-id="${data.id}" title="View Details">
			                    	View Details
			                    </button>
							</div>
						</div>
					</div>
				`;
			}else {
				template = `
							${commonTemplate}
							<div class="text-right">
			                    <button type="button" class="btn btn-primary btn-sm js-recommendation-window" data-id="${data.id}" title="View Details">
			                    	View Details
			                    </button>
			                </div>
					    </div>
					</div>
				`;
			}
		} else {
			if(data.action === 'deleted'){
				template = `${commonTemplate}
						<div class="">
							<p class="alert alert-danger sm-font new-alert-box">
								Deleted by the ${data.title} on ${this.parseTime(data.updated_date)} 
							</p>
						</div>
						<div class="mt-3">
							<p class="alert alert-success new-alert-box sm-font text-capitalize">${data.status}</p>
						</div>
					</div>
				</div>
				`;

			}else {
				template = `${commonTemplate}
						<div class="my-d-flex mt-3" style="justify-content: space-between;">
							<p class="alert alert-success new-alert-box sm-font text-capitalize">${data.status}</p>
							<button type="button" class="btn btn-primary btn-sm my-0 js-recommendation-window" data-id="${data.id}" title="View Document">
								View Document
							</button>
						</div>
					</div>
				</div>`
			};
		}
		this.showUI(template, data.action, '#'+type+ data.id);
		// if (update === '') {
		// 	$(template).prependTo('#offender-action-message').hide().slideDown(5000,'easeInQuad');
		// 	//$('#offender-action-message').prepend(template);
		// } else {
		// 	$('#add_probation' + data.id).removeAttr('class').empty().append(template)
		// }
	},
addRecklessDriving: function (type, data) {

		console.log(data);
		var template;
		var commonTemplate = `
		<div class="staff-response-box-wrap ${data.slug}" id="${type}${data.id}">
		    <div>
		        <div class="staff-response-box-time">
		            <i class="fa fa-clock-o fa-2x"></i>
		        </div>
		        <p class="sm-font text-center">
				${this.parseTime(data.updated_date)} 
		        </p>
		    </div>
		    <div class="card new-card w-100 h-auto top-left-corner ml-2">
		        <h6 class="text-capitalize">
				Reckless Driving Form Received
		        </h6>
		        <p class="text-black-50">
		           The ${data.title} has sent you the Reckless Driving form.
		        </p>
		`;

		if (data.status === 'incomplete') {
			if(data.action === 'deleted'){
				template = `${commonTemplate}
						<div class="my-d-flex" style="justify-content: space-between;">
							<p class="alert alert-danger sm-font new-alert-box">
								Deleted by the ${data.title} on ${this.parseTime(data.updated_date)} 
							</p>
						</div>
					</div>
				</div>
				`;

			}else if(data.action === 'updated') {
				template = `
							${commonTemplate}
							<div class="my-d-flex" style="justify-content: space-between;">
								<p class="alert alert-info sm-font new-alert-box">
									Edited
								</p>
			                    <button type="button" class="btn btn-primary btn-sm js-reckless-window" data-id="${data.id}" title="View Details">
									View Details
			                    </button>
							</div>
						</div>
					</div>
				`;
			}else {
				template = `
							${commonTemplate}
							<div class="text-right">
			                    <button type="button" class="btn btn-primary btn-sm js-reckless-window" data-id="${data.id}" title="View Details">
									View Details
			                    </button>
			                </div>
					    </div>
					</div>
				`;
			}
		} else {
			if(data.action === 'deleted'){
				template = `${commonTemplate}
						<div class="">
							<p class="alert alert-danger sm-font new-alert-box">
								Deleted by the ${data.title} on ${this.parseTime(data.updated_date)} 
							</p>
						</div>
						<div class="mt-3">
							<p class="alert alert-success new-alert-box sm-font text-capitalize">${data.status}</p>
						</div>
					</div>
				</div>
				`;

			}else {
				template = `${commonTemplate}
						<div class="my-d-flex mt-3" style="justify-content: space-between;">
							<p class="alert alert-success new-alert-box sm-font text-capitalize">${data.status}</p>
							<button type="button" class="btn btn-primary btn-sm my-0 js-reckless-window" data-id="${data.id}" title="View Document">
								View Document
							</button>
						</div>
					</div>
				</div>`
			};
		}
		this.showUI(template, data.action, '#'+type+ data.id);
		// if (update === '') {
		// 	$(template).prependTo('#offender-action-message').hide().slideDown(5000,'easeInQuad');
		// 	//$('#offender-action-message').prepend(template);
		// } else {
		// 	$('#add_probation' + data.id).removeAttr('class').empty().append(template)
		// }
	},
addCriminalCase: function (type, data) {

		console.log(data);
		var template;
		var commonTemplate = `
		<div class="staff-response-box-wrap ${data.slug}" id="${type}${data.id}">
		    <div>
		        <div class="staff-response-box-time">
		            <i class="fa fa-clock-o fa-2x"></i>
		        </div>
		        <p class="sm-font text-center">
				${this.parseTime(data.updated_date)} 
		        </p>
		    </div>
		    <div class="card new-card w-100 h-auto top-left-corner ml-2">
		        <h6 class="text-capitalize">
				Criminal Case Form Received
		        </h6>
		        <p class="text-black-50">
		           The ${data.title} has sent the Criminal Case form.
		        </p>
		`;

		if (data.status === 'incomplete') {
			if(data.action === 'deleted'){
				template = `${commonTemplate}
						<div class="my-d-flex" style="justify-content: space-between;">
							<p class="alert alert-danger sm-font new-alert-box">
								Deleted by the ${data.title} on ${this.parseTime(data.updated_date)} 
							</p>
						</div>
					</div>
				</div>
				`;

			}else if(data.action === 'updated') {
				template = `
							${commonTemplate}
							<div class="my-d-flex" style="justify-content: space-between;">
								<p class="alert alert-info sm-font new-alert-box">
									Edited
								</p>
			                    <button type="button" class="btn btn-primary btn-sm js-criminal-case-window" data-id="${data.id}" title="View Details">
			                    	View Details
			                    </button>
							</div>
						</div>
					</div>
				`;
			}else {
				template = `
							${commonTemplate}
							<div class="text-right">
			                    <button type="button" class="btn btn-primary btn-sm js-criminal-case-window" data-id="${data.id}" title="View Details">
			                    	View Details
			                    </button>
			                </div>
					    </div>
					</div>
				`;
			}
		} else {
			if(data.action === 'deleted'){
				template = `${commonTemplate}
						<div class="">
							<p class="alert alert-danger sm-font new-alert-box">
								Deleted by the ${data.title} on ${this.parseTime(data.updated_date)} 
							</p>
						</div>
						<div class="mt-3">
							<p class="alert alert-success new-alert-box sm-font text-capitalize">${data.status}</p>
						</div>
					</div>
				</div>
				`;

			}else {
				template = `${commonTemplate}
						<div class="my-d-flex mt-3" style="justify-content: space-between;">
							<p class="alert alert-success new-alert-box sm-font text-capitalize">${data.status}</p>
							<button type="button" class="btn btn-primary btn-sm my-0 js-criminal-case-window" data-id="${data.id}" title="View Document">
								View Document
							</button>
						</div>
					</div>
				</div>`
			};
		}
		this.showUI(template, data.action, '#'+type+ data.id);
		// if (update === '') {
		// 	$(template).prependTo('#offender-action-message').hide().slideDown(5000,'easeInQuad');
		// 	//$('#offender-action-message').prepend(template);
		// } else {
		// 	$('#add_probation' + data.id).removeAttr('class').empty().append(template)
		// }
	},
addCaseBindover: function (type, data) {

		console.log(data);
		var template;
		var commonTemplate = `
		<div class="staff-response-box-wrap ${data.slug}" id="${type}${data.id}">
		    <div>
		        <div class="staff-response-box-time">
		            <i class="fa fa-clock-o fa-2x"></i>
		        </div>
		        <p class="sm-font text-center">
				${this.parseTime(data.updated_date)} 
		        </p>
		    </div>
		    <div class="card new-card w-100 h-auto top-left-corner ml-2">
		        <h6 class="text-capitalize">
				Case Bindover Form Received
		        </h6>
		        <p class="text-black-50">
		           The ${data.title} has sent you the Case Bindover form.
		        </p>
		`;

		if (data.status === 'incomplete') {
			if(data.action === 'deleted'){
				template = `${commonTemplate}
						<div class="my-d-flex" style="justify-content: space-between;">
							<p class="alert alert-danger sm-font new-alert-box">
								Deleted by the ${data.title} on ${this.parseTime(data.updated_date)} 
							</p>
						</div>
					</div>
				</div>
				`;

			}else if(data.action === 'updated') {
				template = `
							${commonTemplate}
							<div class="my-d-flex" style="justify-content: space-between;">
								<p class="alert alert-info sm-font new-alert-box">
									Edited
								</p>
			                    <button type="button" class="btn btn-primary btn-sm js-bindover-case-window" data-id="${data.id}" title="View Details">
			                    	View Details
			                    </button>
							</div>
						</div>
					</div>
				`;
			}else {
				template = `
							${commonTemplate}
							<div class="text-right">
			                    <button type="button" class="btn btn-primary btn-sm js-bindover-case-window" data-id="${data.id}" title="View Details">
			                    	View Details
			                    </button>
			                </div>
					    </div>
					</div>
				`;
			}
		} else {
			if(data.action === 'deleted'){
				template = `${commonTemplate}
						<div class="">
							<p class="alert alert-danger sm-font new-alert-box">
								Deleted by the ${data.title} on ${this.parseTime(data.updated_date)} 
							</p>
						</div>
						<div class="mt-3">
							<p class="alert alert-success new-alert-box sm-font text-capitalize">${data.status}</p>
						</div>
					</div>
				</div>
				`;

			}else {
				template = `${commonTemplate}
						<div class="my-d-flex mt-3" style="justify-content: space-between;">
							<p class="alert alert-success new-alert-box sm-font text-capitalize">${data.status}</p>
							<button type="button" class="btn btn-primary btn-sm my-0 js-bindover-case-window" data-id="${data.id}" title="View Document">
								View Document
							</button>
						</div>
					</div>
				</div>`
			};
		}
		this.showUI(template, data.action, '#'+type+ data.id);
		// if (update === '') {
		// 	$(template).prependTo('#offender-action-message').hide().slideDown(5000,'easeInQuad');
		// 	//$('#offender-action-message').prepend(template);
		// } else {
		// 	$('#add_probation' + data.id).removeAttr('class').empty().append(template)
		// }
	},
	addPlea: function (type, data) {
		console.log(data.id);
		var template = `
		<div class="staff-response-box-wrap ${data.slug}" id="${type}${data.id}">
		    <div>
		        <div class="staff-response-box-time">
		            <i class="fa fa-clock-o fa-2x"></i>
		        </div>
		        <p class="sm-font text-center">
		            ${this.parseTime(data.updated_date)} 
		        </p>
		    </div>
		    <div class="card new-card w-100 h-auto top-left-corner ml-2">
		        <h6 class="text-capitalize">
		            Plea Received
		        </h6>
		        <p class="text-black-50 text-capitalize">
		        	${data.slug}'s decision: ${this.parsePleaAction(data.pd_choose)}.
		        </p>
	        </div>
	    </div>
		`;

		
		this.showUI(template, data.action, '#'+type+ data.id);
		// if (update === '') {
		// 	//$('#offender-action-message').prepend(template);
		// 	$(template).prependTo('#offender-action-message').slideDown(5000,'easeInQuad');
		// 	alert('');
		// } else {
		// 	$('#add_fine' + data.id).removeAttr('class').empty().append(template)
		// }
	},
	addTransfer: function (type, data) {
		var template = `
		<div class="staff-response-box-wrap ${data.slug}" id="${type}${data.id}">
		    <div>
		        <div class="staff-response-box-time">
		            <i class="fa fa-clock-o fa-2x"></i>
		        </div>
		        <p class="sm-font text-center">
		            ${this.parseTime(data.updated_date)} 
		        </p>
		    </div>
		    <div class="card new-card w-100 h-auto top-left-corner ml-2">
		        <h6 class="text-capitalize">
		            Transferred to the ${data.title}
		        </h6>
	        </div>
	    </div>
		`;

		$('#join_stop_video').hide()
		
		$('#current-video-session').html("<div class='js-video-icon-toggle'><i class='fa fa-video-camera mr-2'></i> "+data.title+"</div>")
		var isForm = false;
		this.showUI(template, "new", '#'+type+data.id, isForm);
	
	},
	addVideoStarted: function (type, data) {
		console.log('vide '+data.id);
	console.log(type);
		var template = `
		<div class="staff-response-box-wrap ${data.slug}" id="${type}${data.id}">
		    <div>
		        <div class="staff-response-box-time">
		            <i class="fa fa-clock-o fa-2x"></i>
		        </div>
		        <p class="sm-font text-center">
		            ${this.parseTime(data.updated_date)} 
		        </p>
		    </div>
		    <div class="card new-card w-100 h-auto top-left-corner ml-2">
				<h6 class="text-capitalize">
				${data.message} 
		        </h6>
		       
	        </div>
	    </div>
		`;

		// $('.new_join_video').show()
		//session_info.video_started = true;
		//$('.new_join_video').trigger('click')
		var isForm = false;
		this.showUI(template, "added", '#'+type+data.id, isForm);
	
	},
	addVideoStop: function (type, data) {
		var template = `
		<div class="staff-response-box-wrap ${data.slug}" id="${type}${data.id}">
		    <div>
		        <div class="staff-response-box-time">
		            <i class="fa fa-clock-o fa-2x"></i>
		        </div>
		        <p class="sm-font text-center">
		            ${this.parseTime(data.updated_date)} 
		        </p>
		    </div>
		    <div class="card new-card w-100 h-auto top-left-corner ml-2">
				<h6 class="text-capitalize">
				${data.message} 
		        </h6>
		       
	        </div>
	    </div>
		`;

		$('.new_stop_video').hide()
		$('.new_join_video').show()

		//session_info.video_started = false;

		
		var isForm = false;
		this.showUI(template, "added", '#'+type+data.id, isForm);
	
	},
	addcloseCase: function (type, data) {
		var template = `
		<div class="staff-response-box-wrap ${data.slug}" id="${type}${data.id}">
		    <div>
		        <div class="staff-response-box-time">
		            <i class="fa fa-clock-o fa-2x"></i>
		        </div>
		        <p class="sm-font text-center">
		            ${this.parseTime(data.updated_date)} 
		        </p>
		    </div>
		    <div class="card new-card w-100 h-auto top-left-corner ml-2">
				<h6 class="text-capitalize">
				${data.message} 
		        </h6>
		       
	        </div>
	    </div>
		`;

		$("#offender_content").remove();
		$(".new_stop_video").remove();
		$(".new_join_video").remove();
		$('.nd-session-time-staff').remove();
		$('#current-video-session').remove();
		var isForm = false;
		this.showUI(template, "added", '#'+type+data.id, isForm);
	
	},
	addSessionStart: function (type, data) {
		console.log(data.id);
	console.log(type);
		var template = `
		<div class="staff-response-box-wrap ${data.slug}" id="${type}${data.id}">
		    <div>
		        <div class="staff-response-box-time">
		            <i class="fa fa-clock-o fa-2x"></i>
		        </div>
		        <p class="sm-font text-center">
		            ${this.parseTime(data.updated_date)} 
		        </p>
		    </div>
		    <div class="card new-card w-100 h-auto top-left-corner ml-2">
				<h6 class="text-capitalize">
				${data.message} 
		        </h6>
		       
	        </div>
	    </div>
		`;
		// session_info.video_started = true;
		var isForm = false;

		this.showUI(template, "added", '#'+type+data.id, isForm);
	
	},	
	addCaseOnHold: function (type, data) {
		var template = `
		<div class="staff-response-box-wrap ${data.slug}" id="${type}${data.id}">
		    <div>
		        <div class="staff-response-box-time">
		            <i class="fa fa-clock-o fa-2x"></i>
		        </div>
		        <p class="sm-font text-center">
		            ${this.parseTime(data.updated_date)} 
		        </p>
		    </div>
		    <div class="card new-card w-100 h-auto top-left-corner ml-2">
				<h6 class="text-capitalize">
				${data.message} 
		        </h6>
		       
	        </div>
	    </div>
		`;

		this.showUI(template, "added", '#'+type+data.id);
	
	},	
	addCaseOffHold: function (type, data) {
		var template = `
		<div class="staff-response-box-wrap ${data.slug}" id="${type}${data.id}">
		    <div>
		        <div class="staff-response-box-time">
		            <i class="fa fa-clock-o fa-2x"></i>
		        </div>
		        <p class="sm-font text-center">
		            ${this.parseTime(data.updated_date)} 
		        </p>
		    </div>
		    <div class="card new-card w-100 h-auto top-left-corner ml-2">
				<h6 class="text-capitalize">
				${data.message} 
		        </h6>
				••••••••••••
	        </div>
	    </div>
		`;

		this.showUI(template, "added", '#'+type+data.id);
	
	},	


	addNewSession: function (type, data) {

		console.log(data);
		var template;
		var commonTemplate = `
		<div class="staff-response-box-wrap ${data.slug}" id="${type}${data.id}">
		    <div>
		        <div class="staff-response-box-time">
		            <i class="fa fa-clock-o fa-2x"></i>
		        </div>
		        <p class="sm-font text-center">
				${this.parseTime(data.updated_date)} 
		        </p>
		    </div>
		    <div class="card new-card w-100 h-auto top-left-corner ml-2">
				<h6 class="text-capitalize">
				${data.message} 
				</h6>
		`;

		if (data.offender_auth === null) {
			if(data.action === 'deleted'){
				template = `${commonTemplate}
						<div class="my-d-flex" style="justify-content: space-between;">
							<p class="alert alert-danger sm-font new-alert-box">
								Deleted by the ${data.title} on ${data.updated_date}
							</p>
						</div>
					</div>
				</div>
				`;

			}else if(data.action === 'updated') {
				template = `
							${commonTemplate}
							<div class="my-d-flex" style="justify-content: space-between;">
								<p class="alert alert-info sm-font new-alert-box">
									Edited
								</p>
			                    <button type="button" class="btn btn-primary btn-sm js-new-session-window" data-id="${data.id}" title="View Details">
			                    	View Details
			                    </button>
							</div>
						</div>
					</div>
				`;
			}else {
				template = `
							${commonTemplate}
							<div class="text-right">
			                    <button type="button" class="btn btn-primary btn-sm js-new-session-window" data-id="${data.id}" title="View Details">
			                    	View Details
			                    </button>
			                </div>
					    </div>
					</div>
				`;
			}
		} else {
			if(data.action === 'deleted'){
				template = `${commonTemplate}
						<div class="">
							<p class="alert alert-danger sm-font new-alert-box">
								Deleted by the ${data.title} on ${data.updated_date}
							</p>
						</div>
						<div class="mt-3">
							<p class="alert alert-success new-alert-box sm-font text-capitalize">Acknowledged</p>
						</div>
					</div>
				</div>
				`;

			}else {
				template = `${commonTemplate}
						<div class="my-d-flex" style="justify-content: space-between;">
							<p class="alert alert-success new-alert-box sm-font text-capitalize">Acknowledged</p>
		                    <button type="button" class="btn btn-primary btn-sm js-new-session-window" data-id="${data.id}" title="View Document">
		                    	View Document
		                    </button>
						</div>
					</div>
				</div>`
			};
		}
		this.showUI(template, data.action, '#'+type+ data.id);
	
	},
addEndSession: function (type, data) {
		var template = `
		<div class="staff-response-box-wrap ${data.slug}" id="${type}${data.id}">
		    <div>
		        <div class="staff-response-box-time">
		            <i class="fa fa-clock-o fa-2x"></i>
		        </div>
		        <p class="sm-font text-center">
		            ${this.parseTime(data.updated_date)} 
		        </p>
		    </div>
		    <div class="card new-card w-100 h-auto top-left-corner ml-2">
				<h6 class="text-capitalize">
				${data.message} 
		        </h6>
		       
	        </div>
	    </div>
		`;

		this.showUI(template, "added", '#'+type+data.id);
	
	},
	addCallStart: function (type, data) {
		console.log(data.id);
		console.log(type);
		var template = `
			<div class="staff-response-box-wrap ${data.slug}" id="${type}${data.id}">
				<div>
					<div class="staff-response-box-time">
						<i class="fa fa-clock-o fa-2x"></i>
					</div>
					<p class="sm-font text-center">
						${this.parseTime(data.updated_date)} 
					</p>
				</div>
				<div class="card new-card w-100 h-auto top-left-corner ml-2">
					<h6>
					${data.message} 
					</h6>
				   
				</div>
			</div>
			`;
		var isForm = false;
		this.showUI(template, "added", '#' + type + data.id, isForm);
	  },
	addPreTrail: function (type, data) {

		console.log(data);
		var template;
		var commonTemplate = `
		<div class="staff-response-box-wrap ${data.slug}" id="${type}${data.id}">
		    <div>
		        <div class="staff-response-box-time">
		            <i class="fa fa-clock-o fa-2x"></i>
		        </div>
		        <p class="sm-font text-center">
				${this.parseTime(data.updated_date)} 
		        </p>
		    </div>
		    <div class="card new-card w-100 h-auto top-left-corner ml-2">
		        <h6 class="text-capitalize">
		            Pre Trial Form Received
		        </h6>
		        <p class="text-black-50">
		           The ${data.title} has sent you the Pre Trial form.
		        </p>
		`;

		if (data.status === 'incomplete') {
			if(data.action === 'deleted'){
				template = `${commonTemplate}
						<div class="my-d-flex" style="justify-content: space-between;">
							<p class="alert alert-danger sm-font new-alert-box">
								Deleted by the ${data.title} on ${this.parseTime(data.updated_date)} 
							</p>
						</div>
					</div>
				</div>
				`;

			}else if(data.action === 'updated') {
				template = `
							${commonTemplate}
							<div class="my-d-flex" style="justify-content: space-between;">
								<p class="alert alert-info sm-font new-alert-box">
									Edited
								</p>
			                    <button type="button" class="btn btn-primary btn-sm js-pre-trial-window" data-id="${data.id}" title="View Details">
			                    	View Details
			                    </button>
							</div>
						</div>
					</div>
				`;
			}else {
				template = `
							${commonTemplate}
							<div class="text-right">
			                    <button type="button" class="btn btn-primary btn-sm js-pre-trial-window" data-id="${data.id}" title="View Details">
			                    	View Details
			                    </button>
			                </div>
					    </div>
					</div>
				`;
			}
		} else {
			if(data.action === 'deleted'){
				template = `${commonTemplate}
						<div class="">
							<p class="alert alert-danger sm-font new-alert-box">
								Deleted by the ${data.title} on ${this.parseTime(data.updated_date)} 
							</p>
						</div>
						<div class="mt-3">
							<p class="alert alert-success new-alert-box sm-font text-capitalize">${data.status}</p>
						</div>
					</div>
				</div>
				`;

			}else {
				template = `${commonTemplate}
						<div class="my-d-flex mt-3" style="justify-content: space-between;">
							<p class="alert alert-success new-alert-box sm-font text-capitalize">${data.status}</p>
							<button type="button" class="btn btn-primary btn-sm my-0 js-pre-trial-window" data-id="${data.id}" title="View Document">
								View Document
							</button>
						</div>
					</div>
				</div>`
			};
		}
		this.showUI(template, data.action, '#'+type+ data.id);
		// if (update === '') {
		// 	$(template).prependTo('#offender-action-message').hide().slideDown(5000,'easeInQuad');
		// 	//$('#offender-action-message').prepend(template);
		// } else {
		// 	$('#add_probation' + data.id).removeAttr('class').empty().append(template)
		// }
	},
	parseTime: function(datetime){
		console.log("data"+datetime);
		
		var date = new Date(datetime+" UTC");	
		// var formatted_date= date.toLocaleTimeString(navigator.language, { 
		// 	timeZone: "America/New_York"  
		// },{hour: '2-digit', minute:'2-digit'}).replace(/:\d{2}\s/,' ');
		var formatted_date = moment.utc(datetime).tz('America/New_York').format('hh:mm A');
		console.log("result"+formatted_date);
		return formatted_date;
	},
	parsePleaAction: function (slug){
		switch(slug){
			case "plea_not_guilty":
				return "plea not guilty";	
			break;
			case "plea_guilty":
				return "plea guilty";
			break;
			case "plea_nolo":
				return "plea no-lo";
			break;
			case "reset_for_compliance":
				return "reset for compliance";
			break;
			case "reset_for_trial":
				return "reset for trial";
			break;
			default:
				return "unknown";
			break;
		}

	},
	updateDOM: function (activities, display) { // value of show = all or new
		this.show = display;
		$('.card').css("border","1px solid #efefef");
		console.log('===================================================');
		console.log(activities);
		console.log('===================================================');
		var count = Object.keys(activities).length;
		console.log("******************* length"+count);

		// if(count > 0){
		// 	this.addNoActivities()
		// 	$('#no-activity').remove()
		// }
		$counter = 0;
		for (var key in activities) {			
			var elem = activities[key];
			console.log(key+ "----------------------------------------action:" + elem.type);

			switch (elem.type) {
				case 'fine':
					//this.addFine(elem.type, elem.activity, update = true)
					this.addFine(elem.type, elem.activity)
          			$('#no-form').remove();
					break;
				case 'compliance':
					this.addCompliance(elem.type, elem.activity)
          			$('#no-form').remove();
					break;
				case 'preTrial':
					this.addPreTrail(elem.type, elem.activity)
          			$('#no-form').remove();
					break;
				case 'probation':
					this.addProbation(elem.type, elem.activity)
          			$('#no-form').remove();
					break;
				case 'fb_probation':
					this.addFBProbation(elem.type, elem.activity)
          			$('#no-form').remove();
					break;
				case 'pro_intake':
					this.addProIntake(elem.type, elem.activity)
          			$('#no-form').remove();
					break;
				case 'fairburn_intake':
					this.addFairIntake(elem.type, elem.activity)
          			$('#no-form').remove();
					break;
				case 'e_intake':
					this.addEIntake(elem.type, elem.activity)
          			$('#no-form').remove();
					break;
				case 'recommendation':
					this.addRecommendation(elem.type, elem.activity)
          			$('#no-form').remove();
					break;
				case 'reckless_driving':
					this.addRecklessDriving(elem.type, elem.activity)
          			$('#no-form').remove();
					break;
				case 'criminal_case':
					this.addCriminalCase(elem.type, elem.activity)
          			$('#no-form').remove();
					break;
				case 'case_bindover':
					this.addCaseBindover(elem.type, elem.activity)
          			$('#no-form').remove();
					break;
				case 'plea':
					console.log(elem.activity);
					this.addPlea(elem.type, elem.activity);
					//alert('');
          			$('#no-form').remove();
					break;
				case 'conferenceCall':
					this.addCallStart(elem.type, elem.activity);
          			$('#no-activity').remove();
					break;
				case 'transfer':
					this.addTransfer(elem.type, elem.activity);
					if($counter ==0){
						localStorage.removeItem('LS_offender_staff_sessions_id')
						localStorage.removeItem('LS_registration_info')
						localStorage.removeItem('LS_staff_id')
						//alert('transferred');
						updateInvitee();
					}
					
          			$('#no-activity').remove();
					break;
				case 'videoStart':
					this.addVideoStarted(elem.type, elem.activity)
          			$('#no-activity').remove();
					break;
				case 'videoStop':
					this.addVideoStop(elem.type, elem.activity)
					// if($counter ==0){
					// 	localStorage.removeItem('LS_offender_staff_sessions_id')
					// 	localStorage.removeItem('LS_registration_info')
					// 	localStorage.removeItem('LS_staff_id')
					// }
          			$('#no-activity').remove();
					break;
				case 'closeCase':
					this.addcloseCase(elem.type, elem.activity)
          			$('#no-activity').remove();
					break;
				case 'sessionStart':
					this.addSessionStart(elem.type, elem.activity)
          			$('#no-activity').remove();
					break;
				case 'caseHold':
					this.addCaseOnHold(elem.type, elem.activity)
          			$('#no-activity').remove();
					break;
				case 'caseOffHold':
					this.addCaseOffHold(elem.type, elem.activity)
          			$('#no-activity').remove();
					break;
				case 'newSession':
					this.addNewSession(elem.type, elem.activity)
          			$('#no-form').remove();
					break;
				case 'caseEndSession':
					this.addEndSession(elem.type, elem.activity)
          			$('#no-activity').remove();
					break;
				case 'joinSession':
					break;
				case 'leftSession':
						break;
				case 'pickup':
					break;
				default:

					console.log('caught by default' + elem.type);

					break;
			}

			$counter++;
		}
	},
	showUI: function(template, action, container, isForm = true){
		//alert(this.show);

		if(this.show === "all"){
			if(isForm === true) {
				$(template).prependTo('#offender-action-message');
			}
			else {
				$(template).prependTo('#offender-activity-msg');
			}

		}else if(this.show === "new"){
			switch(action){
				case "updated":
					$(container).removeAttr('class').empty().append(template);
					// $(container).removeAttr('class').empty().append(template).hide().slideDown(500,'easeInQuad');
					$(container+' .card').css("border","2px solid green");
					//ashesh needs to work on this
					break;
				case "added":
					//new-card
					console.log('container '+ container);
					if(isForm === true) {
						$(template).prependTo('#offender-action-message').hide().slideDown(1000, 'easeInQuad');
					  }
					  else {
						  $(template).prependTo('#offender-activity-msg').hide().slideDown(1000, 'easeInQuad');
							// $(template).prependTo('#offender-activity-msg');
					  }
					$(container+' .card').css("border","2px solid green");
					//alert('asdfadsf');
					break;
				case "deleted":
					$(container).removeAttr('class').empty().append(template);
					// $(container).removeAttr('class').empty().append(template).hide().slideDown(500,'easeInQuad');
					$(container+' .card').css("border","2px solid red")
					break;
				default:
					if(isForm === true) {
						$(template).prependTo('#offender-action-message').hide().slideDown(1000, 'easeInQuad');
					  }
					  else {
						  $(template).prependTo('#offender-activity-msg').hide().slideDown(1000, 'easeInQuad');
							// $(template).prependTo('#offender-activity-msg');
					  }
					$(container+' .card').css("border","2px solid green");
				break;
			}
		}

		
		// if (update === '') {
		// 	//$('#offender-action-message').prepend(template)

		// 	$(template).prependTo('#offender-action-message').css("border", "1px solid green").hide().slideDown(1000,'easeInQuad');
		// } else {
			
			
		// 	$(container).removeAttr('class').empty().append(template);

		// 	//'#add_fine' + data.id
		// }

	}
}
//updateDOM();










var updateAttorneyVariable = function(){
	$.get(base_url+ "attorney-update-session", function(data){
       

           
    },"json");
}

/**
* This function gets the overall staff's response and calls the StaffAction.updateDOM() function to render it's corresponding UI
*/
var getInviteStaffSessionActivities = function(){
    //alert(atob(data.message));
     
     $.get(base_url+ "invitee-allStaffActivities", function(data){
         
         console.log("data.status="+data.status);
         //showToastr('Getting response from staff')
         switch(data.status){
             case "success":
                $('#offender_content').html('<div class="js-staff-res-block"></div>')
                //$(".js-staff-res-block").html();
                StaffAction.updateDOM(data.activities, "all");

                //var te = atob(data.message);

                //console.log(te);
                //$(".js-staff-res-block").html(te);

                //$(te).prependTo('.js-list-view-block').fadeIn(2000,'swing');
                 
             break;
             case "fail":
                 
             break;
         }
         // $("#offender_content").html(atob(data.message));
         
         
         var roadMapHt = $('#my-roadmap').height()
         var roadMapAvailableHt = roadMapHt - 170
         $('.new-scrolling-table-wrap').css('max-height', roadMapAvailableHt+'px')
     },"json");
 }
  
/**
* This function gets new/latest staff's response and calls the StaffAction.updateDOM() function to render it's corresponding UI.
* This function also shows the unread form counter number in mobile device 
*/
 var getInviteStaffSessionActivitiesUpdate = function(){
    
     $.get(base_url+ "invitee-newStaffActivities", function(data){
         //alert(atob(data.status));
         console.log("data.status="+data.status);
         //infoToastr('Getting response from staff')
         switch(data.status){
             case "success":
                StaffAction.updateDOM(data.activities,"new");

               
             break;
             case "fail":
                 
             break;
         }
         // $("#offender_content").html(atob(data.message));

		 var old_count = 0;

		 if (typeof $('#ax_count').html() != "undefined") {
		   old_count = parseInt($('#ax_count').html());
		 }
	 
		 var count = 0;
		 for (var key in data.activities) {
		   var elem = data.activities[key];
		   switch (elem.type) {
			 case 'videoStart':
			   break;
			 case 'videoStop':
			   break;
			 case 'sessionStart':
				 break;
			 case 'transfer':
				 break;
			 case 'joinSession':
			   break;
			 case 'leftSession':
			   break;
			case 'conferenceCall':
				break;
			case 'pickup':
				break;
			 default: 
			 count = Object.keys(data.activities).length + old_count;
		   }
		 } 
	 
		 if (!$('.js-foot-documents').hasClass('active') && count !== 0) {
		   $('.activity_counter').html('<span class="badge badge-danger badge-pill position-absolute" style="top: -7px; font-size: 60% !important;"> <span id="ax_count" class="">' + count + '</span></span>');
		   var roadMapHt = $('#my-roadmap').height();
		 }
         
         var roadMapHt = $('#my-roadmap').height()
         var roadMapAvailableHt = roadMapHt - 170
         $('.new-scrolling-table-wrap').css('max-height', roadMapAvailableHt+'px')
     },"json");
 }


/**
* open new window for probation form
*/
 $(document).on('click', '.js-probation-window', function() {
	var Id = $(this).data('id')
	var pageURL = base_url+"offender/get-probation/"+Id ;
    var pageTitle = "iCourtApp::Fine";        
    popUpHandler.open(pageURL, pageTitle) 
// popUpHandler.open(pageURL, pageTitle) 
// var myWindow = newWindow.createPopupWin(pageURL, pageTitle, 'auto', 'auto');
	// var myWindow = window.open(base_url+"offender/get-probation/"+Id, "", "width='100%',height='100%',directories=0,titlebar=0,toolbar=0,location=0,status=0,menubar=0");
})

/**
* open new window for payment acknowledgement
*/
$(document).on('click', '.js-fine-new-window', function() {
	var Id = $(this).data('fine')

	var pageURL = base_url+"offender/get-fine/"+Id ;
    var pageTitle = "iCourtApp::Fine";        
    popUpHandler.open(pageURL, pageTitle) 
// popUpHandler.open(pageURL, pageTitle) 
// var myWindow = newWindow.createPopupWin(pageURL, pageTitle, 'auto', 'auto');
	// var myWindow = window.open(base_url+"offender/get-compliance/"+Id, "", "width=600,height=500,directories=0,titlebar=0,toolbar=0,location=0,status=0,menubar=0");
})

/**
* open new window for probation form
*/
$(document).on('click', '.js-fb-probation-window', function() {
	var Id = $(this).data('id')
	var pageURL = base_url+"offender/get-fb-probation/"+Id ;
    var pageTitle = "iCourtApp::Fine";        
    popUpHandler.open(pageURL, pageTitle) 
// popUpHandler.open(pageURL, pageTitle) 
// var myWindow = newWindow.createPopupWin(pageURL, pageTitle, 'auto', 'auto');
	// var myWindow = window.open(base_url+"offender/get-probation/"+Id, "", "width='100%',height='100%',directories=0,titlebar=0,toolbar=0,location=0,status=0,menubar=0");
})

/**
* open new window for pro-intake form
*/
$(document).on('click', '.js-pro-intake-window', function() {
	var Id = $(this).data('id')
	var pageURL = base_url+"offender/get-pro-intake/"+Id ;
    var pageTitle = "iCourtApp::Fine";        
    popUpHandler.open(pageURL, pageTitle) 
// popUpHandler.open(pageURL, pageTitle) 
// var myWindow = newWindow.createPopupWin(pageURL, pageTitle, 'auto', 'auto');
	// var myWindow = window.open(base_url+"offender/get-probation/"+Id, "", "width='100%',height='100%',directories=0,titlebar=0,toolbar=0,location=0,status=0,menubar=0");
})

/**
* open new window for fair-intake form
*/
$(document).on('click', '.js-fair-intake-window', function() {
	var Id = $(this).data('id')
	var pageURL = base_url+"offender/get-fair-intake/"+Id ;
    var pageTitle = "iCourtApp::Fine";        
    popUpHandler.open(pageURL, pageTitle) 
// popUpHandler.open(pageURL, pageTitle) 
// var myWindow = newWindow.createPopupWin(pageURL, pageTitle, 'auto', 'auto');
	// var myWindow = window.open(base_url+"offender/get-probation/"+Id, "", "width='100%',height='100%',directories=0,titlebar=0,toolbar=0,location=0,status=0,menubar=0");
})

/**
* open new window for e-intake form
*/
$(document).on('click', '.js-e-intake-window', function() {
	var Id = $(this).data('id')
	var pageURL = base_url+"offender/get-e-intake/"+Id ;
    var pageTitle = "iCourtApp::Fine";        
    popUpHandler.open(pageURL, pageTitle) 
// popUpHandler.open(pageURL, pageTitle) 
// var myWindow = newWindow.createPopupWin(pageURL, pageTitle, 'auto', 'auto');
	// var myWindow = window.open(base_url+"offender/get-probation/"+Id, "", "width='100%',height='100%',directories=0,titlebar=0,toolbar=0,location=0,status=0,menubar=0");
})

/**
* open new window for recommendation form
*/
$(document).on('click', '.js-recommendation-window', function() {
	var Id = $(this).data('id')
	var pageURL = base_url+"offender/get-recommendation/"+Id ;
    var pageTitle = "iCourtApp::Fine";        
    popUpHandler.open(pageURL, pageTitle) 
// var myWindow = newWindow.createPopupWin(pageURL, pageTitle, 'auto', 'auto');
	// var myWindow = window.open(base_url+"offender/get-probation/"+Id, "", "width='100%',height='100%',directories=0,titlebar=0,toolbar=0,location=0,status=0,menubar=0");
})

/**
* open new window for reckless driving form
*/
$(document).on('click', '.js-reckless-window', function() {
	var Id = $(this).data('id')
	var pageURL = base_url+"offender/get-reckless-driving/"+Id ;
    var pageTitle = "iCourtApp::Fine";        
    popUpHandler.open(pageURL, pageTitle) 
// var myWindow = newWindow.createPopupWin(pageURL, pageTitle, 'auto', 'auto');
	// var myWindow = window.open(base_url+"offender/get-probation/"+Id, "", "width='100%',height='100%',directories=0,titlebar=0,toolbar=0,location=0,status=0,menubar=0");
})

/**
* open new window for criminal case form
*/
$(document).on('click', '.js-criminal-case-window', function() {
	var Id = $(this).data('id')
	var pageURL = base_url+"offender/get-criminal-case/"+Id ;
    var pageTitle = "iCourtApp::Fine";        
    popUpHandler.open(pageURL, pageTitle) 
// var myWindow = newWindow.createPopupWin(pageURL, pageTitle, 'auto', 'auto');
	// var myWindow = window.open(base_url+"offender/get-probation/"+Id, "", "width='100%',height='100%',directories=0,titlebar=0,toolbar=0,location=0,status=0,menubar=0");
})

/**
* open new window for bindover case form
*/
$(document).on('click', '.js-bindover-case-window', function() {
	var Id = $(this).data('id')
	var pageURL = base_url+"offender/get-bindover-case/"+Id ;
    var pageTitle = "iCourtApp::Fine";        
    popUpHandler.open(pageURL, pageTitle) 
// var myWindow = newWindow.createPopupWin(pageURL, pageTitle, 'auto', 'auto');
	// var myWindow = window.open(base_url+"offender/get-probation/"+Id, "", "width='100%',height='100%',directories=0,titlebar=0,toolbar=0,location=0,status=0,menubar=0");
})

/**
* open new window for pre-trial form
*/
$(document).on('click', '.js-pre-trial-window', function() {
	var Id = $(this).data('id')
	var pageURL = base_url+"offender/get-pre-trial/"+Id ;
    var pageTitle = "iCourtApp::PreTrial";        
    popUpHandler.open(pageURL, pageTitle) 
// var myWindow = newWindow.createPopupWin(pageURL, pageTitle, 'auto', 'auto');
	// var myWindow = window.open(base_url+"offender/get-probation/"+Id, "", "width='100%',height='100%',directories=0,titlebar=0,toolbar=0,location=0,status=0,menubar=0");
})

/**
* open new window for compliance form
*/
$(document).on('click', '.js-compliance-window', function() {
	var Id = $(this).data('id')

	var pageURL = base_url+"offender/get-compliance/"+Id ;
    var pageTitle = "iCourtApp::Fine";        
    popUpHandler.open(pageURL, pageTitle) 
// var myWindow = newWindow.createPopupWin(pageURL, pageTitle, 'auto', 'auto');
	// var myWindow = window.open(base_url+"offender/get-compliance/"+Id, "", "width=600,height=500,directories=0,titlebar=0,toolbar=0,location=0,status=0,menubar=0");
})

/**
* open new window for new date form
*/
$(document).on('click', '.js-new-session-window', function() {
	var _this = $(this)
	var fineId = _this.data('id')

	var pageURL = base_url+"offender/get-new-date/"+fineId ;
    var pageTitle = "iCourtApp::New Date";        
    popUpHandler.open(pageURL, pageTitle) 
// var myWindow = newWindow.createPopupWin(pageURL, pageTitle, 'auto', 'auto');
	// var myWindow = window.open(base_url+"offender/get-fine/"+fineId, "", "width=600,height=500,directories=0,titlebar=0,toolbar=0,location=0,status=0,menubar=0");
})

var windowWidth = $(window).width();

window.addEventListener("resize", function(){
	windowWidth = $(window).width();
});

/**
* This function handles the css of iframe
*/
var iframeControls = function iframeControls() {
	var windowHt = $(window).height();
	// var roadmapHt = $('.nd-body-right').height();
	var headerHt = $('.nd-header-wrap').outerHeight()
	if(windowWidth > 991) {
		var bodyHt = $('.nd-body-wrap').outerHeight()
		$('.js-iframe').css('height', bodyHt)
		$('.js-iframe-wrap').css('top', headerHt)
		$('#iframe_mbl_link').trigger('click')
	}
	else {
		$('.js-iframe').css('height', windowHt - 37);
	}
};

/**
* This is an object which consists of two functions namely closeIframe and open.
* closeIframe is a function that closes the form view in offender's dashboard
* open is a function that opens the forms in iframe in offender's dashboard
*/
var popUpHandler = {	
    closeIframe: function() {
        $('#mbl_iframe', window.parent.document).hide().removeClass('active');
        $('#new_iframe', window.parent.document).attr('src','').empty();
    },
    open: function(pageURL, pageTitle='') {
    	//if(windowWidth > 991) {
		// if(windowWidth > 991) {
    	// 	var myWindow = newWindow.createPopupWin(pageURL, pageTitle, 'auto', 'auto');	
    	// }
    	// else {
    		$('.js-iframe-wrap').show().addClass('active')
    		// $('.js-iframe-wrap.active').css('bottom', $('.nd-body-right').height())  
    		$('.js-iframe').attr('src', pageURL)
    		iframeControls()
    	// }
    }
}