/*
 * @Author: Jino Lacson
 * @Date: 2018-11-02 16:15:41
 * @Last Modified by: jlacson@wylog.com
 * @Last Modified time: 2018-11-07 16:22:35
 */
$('#hide-menu').click(function(){
	if($('#hide-menu').data('id')==0){
			$('.side-nav').hide();
			$('#hide-menu').data('id','1');
			$("#wrapper").removeAttr('style');
	}else{
			$('.side-nav').show();
			$('#hide-menu').data('id','0');
			$("#wrapper").css("padding-left", "253px");
	}
});
var walk_in_form = $("#noshow_walk_in_form"),
base_url = app.get_vars().baseurl,
form_inputs = $('#' + walk_in_form.attr('id') + ' input').toArray(),
row_id, row_attendance, row_event_type,
is_start_date_passed = 0;

function initEventListeners() {
// noshow status
$('input[name=noshow_status]').on('change', function(event) {
	event.preventDefault();
	/* Act on the event */
	if (authorize(PAGE_CODE['noshow'], PRIVS[PAGE_CODE['noshow']]['toggle'])) {
		if (!$(this).prop("checked")) {
			app.modal.confirm_box({
				"title": "Demande de confirmation",
				"message": '<p style="text-align: justify">Etes-vous sûr de vouloir désactiver la comptabilisation des "No-Show"?<br> Pour information cette option permet de prendre en compte les absences dans le système de modération pour chaque abonné.</p>',
				"_continue": function() {
					$(this).prop("checked", false);
					Attendance.toggleNoshowStatus(($(this).prop("checked")) ? 1 : 0);
				},
				"_close": function() {
					$('input[name=noshow_status]').prop("checked", true);
				},
				"id": "noshow_status_conf_modal",
				"className": "noshow_status_conf_modal"
			});
		} else {
			Attendance.toggleNoshowStatus(($(this).prop("checked")) ? 1 : 0);

			$('input.n-present').trigger('focusout');
		}
	} else {
		app._notify('error', 'Action non autorisée, les modifications n\'ont pas été enregistrées.')
	}
});

$('.n-present').on('focusout change', function(event) {
	event.preventDefault();
			
			/* Validate max and min values*/
			max = parseInt($(this).attr('max'));
			min = parseInt($(this).attr('min'));
			if (this.value < min) {
					this.value = 0;
			}
			if (this.value > max) {
					this.value = max;
			}
			
	/* Act on the event */
	var row_data = $('#no_show_list').DataTable().row($(this).attr('data-td-index')).data();
	// console.log($($('#no_show_list').DataTable().row($(this).attr('data-td-index')).node()).addClass('asd'));
	// console.log(identify_row_class(row_data[9], $(this).val()));
	$($('#no_show_list').DataTable().row($(this).attr('data-td-index')).node()).removeClass(
		'no_present_row partial_present_row full_present_row'
	)

	var attendance = (($(this).val()) ? parseInt($(this).val()) : 0);
	$($('#no_show_list').DataTable().row($(this).attr('data-td-index')).node()).addClass(
		identify_row_class(row_data[9], attendance)
	)

	var noshow_data = {
		'event_schedule_id': eventScheduleId,
		'event_id': eventId,
		'user_id': row_data[0],
		'registration_id': row_data[1],
		'civility': row_data[2],
		'email_address': row_data[3],
		'comment': row_data[4],
		'last_name': row_data[6],
		'first_name': row_data[7],
		'type': row_data[8],
		'no_of_place': row_data[9],
		'attendance': attendance,
	}

	update_row = true;
	if (row_id) {
		if (row_id == row_data[1] && row_attendance != attendance) {
			update_row = true;
			// console.log("updated");
		} else if (row_id != row_data[1]) {
			update_row = true;
		} else {
			update_row = false;
			// console.log("not updated");
		}
	}
	if (update_row) {
		// app.btn_loader('.btn_no_show');
		$.ajax({
				url: base_url + 'save_noshow_data/',
				type: 'POST',
				// dataType: 'default: Intelligent Guess (Other values: xml, json, script, or html)',
				data: noshow_data
			})
			.done(function($data) {
				// to be used in checking if data is
				// already updated by a different type of listener
				row_id = row_data[1];
				row_attendance = attendance;
				row_event_type = event.type;
				Attendance.reloadHeaderValues(eventScheduleId);
				$('.page-loader').remove();
				// app.rmbtn_loader('.btn_no_show');

			})
			.fail(function() {
				// console.log("error");
			})
			.always(function() {
				// console.log("complete");
			});
	}

});

$("#noshow_walk_in_form input:not('.civility')").on('click input focusout', function(event) {
	event.preventDefault();
	/* Act on the event */
	inputIsValid($(this));
});
}

function trigger_validation(form_id) {
$(`${form_id} input:not('.civility')`).trigger('click');
}

function init_plugins() {
	function wcqib_refresh_quantity_increments() {
			jQuery("div.quantity:not(.buttons_added), td.quantity:not(.buttons_added)").each(function(a, b) {
					var c = jQuery(b);
					c.addClass("buttons_added"), c.children().first().before('<input type="button" value="-" class="minus" />'), c.children().last().after('<input type="button" value="+" class="plus" />')
			})
	}
	String.prototype.getDecimals || (String.prototype.getDecimals = function() {
			var a = this,
					b = ("" + a).match(/(?:\.(\d+))?(?:[eE]([+-]?\d+))?$/);
			return b ? Math.max(0, (b[1] ? b[1].length : 0) - (b[2] ? +b[2] : 0)) : 0
	}), jQuery(document).ready(function() {
			wcqib_refresh_quantity_increments()
	}), jQuery(document).on("updated_wc_div", function() {
			wcqib_refresh_quantity_increments()
	}), jQuery(document).on("click", ".plus, .minus", function() {
			var a = jQuery(this).closest(".quantity").find(".qty"),
					b = parseFloat(a.val()),
					c = parseFloat(a.attr("max")),
					d = parseFloat(a.attr("min")),
					e = a.attr("step");
			b && "" !== b && "NaN" !== b || (b = 0), "" !== c && "NaN" !== c || (c = ""), "" !== d && "NaN" !== d || (d = 0), "any" !== e && "" !== e && void 0 !== e && "NaN" !== parseFloat(e) || (e = 1), jQuery(this).is(".plus") ? c && b >= c ? a.val(c) : a.val((b + parseFloat(e)).toFixed(e.getDecimals())) : d && b <= d ? a.val(d) : b > 0 && a.val((b - parseFloat(e)).toFixed(e.getDecimals())), a.trigger("change")
	});
}

function identify_row_class(no_of_place, attendance) {
var row_class;
if (no_of_place == attendance) {
	row_class = 'full_present_row';
} else {
	if (attendance == 0) {
		row_class = 'no_present_row';
	} else if (attendance < no_of_place) {
		row_class = 'partial_present_row';
	} else {
		row_class = 'full_present_row';
	}

	if (no_of_place == 'n/a') {
		row_class = 'full_present_row';
	}
}
return row_class;
}

function inputIsValid(input) {
if (!input[0].checkValidity()) {
	input.parent().addClass('has-error');
	if (!input.val()) {
		input.parent().children('.help-block').html('Ce champ est obligatoire.');
	} else {
		input.parent().children('.help-block').html('');
	}
} else {
	input.parent().removeClass('has-error');
	input.parent().children('.help-block').html('');
}
}

function resetFields(input) {
input.parent().removeClass('has-error');
input.parent().children('.help-block').html('');
}

function allInputsAreValid() {
if ($('.has-error').html()) {
	return false;
}
return true;
}
/**
* Generate message validation for email if email exist or not, but no blocking
*
* @param  {string} post = email string
* @return {void}      [description]
*/
function checkIfEmailExist(post) {

/**
 * Let's cache the span icon
 * @type {[type]}
 */
var _emailSpanIcon = $("span#sucessEmailValidation");

post.on("focusout", function() {

	/**
	 *  Check if email is empty then remove check icon first
	 */
	if ($(this).val() == '')
		_emailSpanIcon.addClass('hidden');

	/**
	 * Main email subscriber validations
	 * - Font Color
	 * - Validation messages
	 * - Add check Icon for unregistered/registered email subscribers
	 * @type {[type]}
	 */
	$.ajax({
		url: app.get_vars().baseurl + 'validateExtraPeopleIfEmailsExists',
		type: 'POST',
		data: 'email_address=' + $(this).val()
	}).done(function(response) {
		$email = $("#email_address");
		if (response.commandValidate) {

			/**
			 * Add error class to higlight field
			 * @param  {[type]} response [description]
			 * @return {[type]}          [description]
			 */
			if (response.highlightError)
				$email.parent().addClass('has-error');


			/**
			 * Add check/Remove check icon for registered/unregistered email subscriber's
			 */
			if (response.sucessEmailValidation)
				_emailSpanIcon.removeClass('hidden');

			if (!response.sucessEmailValidation)
				_emailSpanIcon.addClass('hidden');

			//Add div message blocks and font Color validation email
			$email.parent().children('.help-block').html(response.message).css({
				"color": response.color
			});
		}
	});
})
}

Attendance = {

/**
 * toggle noshow status
 * @param {*} e
 */
initNoshowStatus: function(status) {
	$.ajax({
			url: base_url + 'getNoshowStatus/' + eventScheduleId,
			type: 'GET'
		})
		.done(function(result) {
			if (result.noshow_stat) {
				if (parseInt(result.is_passed_start_date) == 0) {
					$('input[name=noshow_status]').prop('checked', false);
					$('input[name=noshow_status]').attr('disabled', 'disabled');
					// turn noshow off
					Attendance.toggleNoshowStatus(0);
					app._notify("info", "Vous pouvez uniquement activer le statut noshow après le début de l'événement.");
				} else {
					$('input[name=noshow_status]').prop('checked',
						parseInt(result.noshow_stat) ? true : false);
				}
			}
		});
},
/**
 * toggle noshow status
 * @param {*} e
 */
toggleNoshowStatus: function(status) {
	$.ajax({
			url: base_url + 'toggleNoshowStatus/' + eventScheduleId,
			type: 'POST',
			data: {
				'no_show_stat': status
			}
		})
		.done(function(result) {
			if (!$('input[name=noshow_status]').attr("disabled")) {
				app._notify(result.mtype, result.message);
			}
		});
},
/**
 * Display modal attendance prepare for uploading
 * @param {*} e
 */
Import_modal: function(e) {
	//Call upload attendance modal
	var UploadModalAttendance = $("#UploadModalAttendance");

	//Show modal for import selection
	UploadModalAttendance.modal("show");

	//Call Import function
	$("#buttonImportAttendance").off("click").on("click", function() {
					UploadModalAttendance.modal("hide");
		Attendance.Import();
	})
},

/**
 * Import file globally
 */
Import: function() {
	if (typeof FormData !== 'undefined') {
		var eventfiles = document.getElementById("AttendanceUpload");
		if (eventfiles.files.length > 0) {
			var file = (eventfiles.files[0].name).split(".");
			if (file[file.length - 1] != "" && (file[file.length - 1] == "xlsx" || file[file.length - 1] == "xls")) {
				app.modal.confirm_box({
					"message": "Êtes-vous sûr de vouloir importer ce fichier?<br/><br><span class='label label-danger' style='font-size: 12px;'>" + app.get_vars()._app.cma_msg.note + "</span>",
					"_continue": function() {
													$('.loader-container').prepend(app.get_loader2('Importing...'));                
													setTimeout(function(){
															var formData = new FormData($("#formAttendance")[0]);
															$.ajax({
									url: app.get_vars().baseurl + "attendance/upload",
									type: "post",
									data: formData,
									async: false,
									cache: false,
									contentType: false,
									processData: false,
									success: function(result, textStatus, jQxhr) {

										//Hide confirm upload message
										$(".subscriberConfirmBox").modal('hide');

										//Import success then reset modal and input values
										if (result.mtype == 'success') {
											$("#AttendanceUpload").val('');
											$("#UploadModalAttendance").modal('hide');
											app._notify(result.mtype, result.message);
										}

										//If error with subscriber's
										if (result.subscriber) {

											//Show modal warning for error input present and display list of failed by emails
											$("#SubscriberModalWarning").modal("show");

											//loop subscriber emails
											$.each(result.subscriber, function(i, subscribers) {
												$(".subscribersFailed").append("<ul><li>" + subscribers.Email + "</li><ul>")
											})

											//Empty existing html elements
											$("#SubscriberModalWarning").on('hidden.bs.modal', function() {
												$(".subscribersFailed").empty()
											});
										}
										Attendance.populate_data_table(eventScheduleId);
										initEventListeners();
																			app.remove_loader();
									},
									error: function(jqXhr, textStatus, errorThrown) {
										// console.log(errorThrown);
									}
								});
													}, 500);
					},
					"id": "subscriberConfirmBox",
					"className": "subscriberConfirmBox"
				});
			} else {
				app._notify("warning", "Invalid file format!");
			}
		} else {
			app._notify("warning", "Merci de sélectionner un fichier Excel valide pour l'import.");
		}
	}
},

/**
 * Export excel attendance file
 * @param {*} EventId
 * @param {*} EventScheduleId
 */
Export_message: function(EventId, EventScheduleId) {
	app.modal.confirm_box({
		"title": "Demande de confirmation",
		"message": "L'événement est toujours ouvert à la réservation, êtes vous sûr de vouloir exporter la liste des participants ?",
		"_continue": function() {
			$('#no_show_list').prepend(app.get_loader2('Exporting...'));
			Attendance.Export(EventId, EventScheduleId);
							setTimeout(app.remove_loader, 1000);
		},
		"id": "save_confirm_box",
		"className": "save_confirm_box"
	});
},

/**
 * Export excel attendance file
 * @param {*} EventId
 * @param {*} EventScheduleId
 */
add_walk_in: function(eventId, eventScheduleId) {
	// app.modal.focusout_solution("on");
	// console.log(walk_in_form);
	walk_in_form.trigger("reset");
	var dialog = bootbox.dialog({
			"title": "Ajout non-inscrit",
			"className": "my-modal-with-xmedium",
			"message": walk_in_form,
			"backdrop": 'static',
			"animate": true,
			"show": false,
			"buttons": [{
				"label": app.get_vars()._app.btn._close,
				"class": "btn btn-default",
				"callback": function() {}
			}, {
				"label": "Sauvegarder",
				"className": "btn btn-primary w-mb save_walk_in_btn",
				"callback": function() {
					trigger_validation('#noshow_walk_in_form');
					app.btn_loader('.save_walk_in_btn');
					// var form = $('#noshow_walk_in_form')
					var post_url = base_url + 'save_walk_in/';
					var request_method = $(walk_in_form).attr("method"); //get form GET/POST method

					$('<input />').attr('type', 'hidden')
						.attr('name', "event_id")
						.attr('value', eventId)
						.appendTo(walk_in_form);
					$('<input />').attr('type', 'hidden')
						.attr('name', "event_schedule_id")
						.attr('value', eventScheduleId)
						.appendTo(walk_in_form);

					var form_data = $(walk_in_form).serialize(); //Encode form elements for submission
					if (form_data['event_id']) {
						form_data['event_id'] = eventId;
						form_data['event_schedule_id'] = (eventScheduleId);
					}

					// console.log(allInputsAreValid()+'inputsvalid');
					if (!allInputsAreValid()) {
						app._notify("error", "Tous les champs doivent être remplis correctement.");
						app.rmbtn_loader('.save_walk_in_btn');
						return false;
					} else {
						try {
							$.ajax({
								url: post_url,
								type: request_method,
								data: form_data
							}).done(function(response) {
																	$('#no_show_list').prepend(app.get_loader2('Loading...'));
																	
								Attendance.populate_data_table(eventScheduleId);
								app._notify("success", "Participant supplémentaire ajouté.");
								$(walk_in_form)[0].reset();
								app.rmbtn_loader('.save_walk_in_btn');
								initEventListeners();
																	app.remove_loader();
							});
						} catch (e) {}
						return false;
					}
					// repopulate datatable
				}
			}]
		})
		.on('shown.bs.modal', function() {
			initEventListeners();
			for (var i = 0; i < form_inputs.length; i++) {
				// console.log(form_inputs[i].id);
				inputIsValid($('#' + form_inputs[i].id));
			}
			/**
			 * Create details message for email address
			 * - Non blocking
			 */
			checkIfEmailExist($("input#email_address"));

		}).on('hide.bs.modal', function(e) {
			for (var i = 0; i < form_inputs.length; i++) {
				// console.log(form_inputs[i].id);
				resetFields($('#' + form_inputs[i].id));
			}
		})
		.modal('show') // show before init
		.init(function() {});
},

/**
 * Export file
 */
Export: function($eventId, $eventScheduleId) {
	window.location.href = app.get_vars().baseurl + "export/" + $eventId + "/" + $eventScheduleId;
},

/**
 *
 */
setFP: function(input_id, no_of_places) {
	$(input_id).val(no_of_places);
	// console.log(input_id);
	$(input_id).trigger('focusout');
},
/**
 *
 */
reloadHeaderValues: function(event_schedule_id) {
	$.ajax({
			type: 'GET',
			url: base_url + 'getSeatInfo/' + eventScheduleId + '/' + eventId,
			async: false,
			dataType: 'json',
		})
		.done(function(data) {
			abonnes_attendus = parseInt($('.abonnes_attendus').html());
			invites_attendus = parseInt($('.invites_attendus').html());
			abonnes_presents = parseInt((data.abonnes_presents) ? data.abonnes_presents : 0);
			invites_presents = parseInt((data.invites_presents) ? data.invites_presents : 0);
			// complet_nshow_total = parseInt((data.complet_nshow_total)?data.complet_nshow_total:0);
			complet_nshow_total = 0;
			partiel_nshow_total = parseInt((data.partiel_nshow_total) ? data.partiel_nshow_total : 0);

			$('.offertes_total').html(data.offertes_total);
			$('.restantes_total').html(data.restantes_total?data.restantes_total:0);

			$('.abonnes_presents').html(abonnes_presents);
			$('.invites_presents').html(invites_presents);
			$('.personnes_presents').html(abonnes_presents + invites_presents);

			$('.abonnes_absents').html(abonnes_attendus - abonnes_presents);
			$('.invites_absents').html(invites_attendus - invites_presents);
			$('.personnes_absents').html(
				(abonnes_attendus - abonnes_presents) +
				(invites_attendus - invites_presents)
			);

			complet_nshowt = $('input.n-present.input_res').toArray();

			for (var i = 0; i < complet_nshowt.length; i++) {
				if (complet_nshowt[i].value == 0) {
					complet_nshow_total++;
				}
			}

			$('.complet_nshow_total').html(complet_nshow_total);
			$('.partiel_nshow_total').html(partiel_nshow_total);
		})
		.fail(function() {
			console.log("error");
		})
		.always(function() {
			console.log("complete");
		});

},

/**
 * populate tables with data
 */
populate_data_table: function(eventScheduleId) {
	$.ajax({
			type: 'GET',
			// url: base_url+'get_dashboard_table_data/'+tbl_data['data_name']+'/'+start+'/2017-11-01',
			url: base_url + 'get_noshow_data/' + eventScheduleId + '/' + 3 + '/',
			async: false,
			dataType: 'json',
		})
		.done(function(data) {
			var i = 1,
				tdi = 0,
				total_fp = 0,
				total_np = 0,
				reservation_type = 'Annulé',

				abonnes_attendus = 0,
				invites_attendus = 0,
				personnes_attendus = 0

			abonnes_waiting = 0,
				invites_waiting = 0,
				personnes_waiting = 0

			abonnes_absents = 0,
				invites_absents = 0,
				personnes_absents = 0

			complet_nshow_total = 0;

			var noshow_;
			if (data.length == 0) {
				$('#no_show_list').DataTable().rows().remove().draw();
			}
			$('#no_show_list').DataTable().clear();
			data.forEach(function(row, value) {
				attendance = (row.attendance ? row.attendance : 0);
				input_class = "input_res";
				switch (row.type) {
					case 'Booking':
						input_class = "input_res";
						if (attendance == 0) {
							complet_nshow_total++;
						}
						reservation_type = 'Réservation';
						abonnes_attendus++;
						invites_attendus += (row.no_of_place - 1);
						break;
					case 'Waiting':
						input_class = "input_wait";
						reservation_type = 'Attente';
						abonnes_waiting++;
						invites_waiting += (row.no_of_place - 1)
						break;
					case 'Walk in':
					case 'Extra':
						input_class = "input_extra";
						reservation_type = 'Extra';
						break;
					default:

				}
				if (row.no_of_place == attendance) {
					// console.log(row.user_id+'::'+row.attendance);
					// console.log('attendance:'+attendance);
					// console.log('before:'+total_fp);
					total_fp += parseInt(attendance);
					// console.log('after:'+total_fp);
				} else {
					// console.log(row.no_of_place);
					if (row.no_of_place != 'n/a' && row.no_of_place != 0) {
						total_np += parseInt(row.no_of_place - attendance);
					}
				}

				row_class = identify_row_class(row.no_of_place, attendance);
				noshow_ = attendance;
				if (row.type != 'Walk in') {
					if (authorize(PAGE_CODE['noshow'], PRIVS[PAGE_CODE['noshow']]['mod_attendance'])) {
						noshow_ = `<div class="container-fluid"><div class="row"><div class=""><div class="">`
						+`<div class="quantity buttons_added">`
						+`<button class="btn-flat btn btn-primary btn-md mr-xs fp presence_btn" onclick="Attendance.setFP('#present${row.user_id}','${row.no_of_place}')"><b class="fa fa-check"></b></button>`
						+`<input type="button" value="-" class="minus btn">`
						+`<input type="number" id="present${row.user_id}" data-td-index="${tdi++}" step="1" min="0" max="${row.no_of_place}" name="quantity" value="${attendance}" title="Qty" class="input-text qty text n-present ${input_class}" size="4" pattern="" inputmode="">`
						+`<input type="button" value="+" class="plus btn"> </div></div></div></div>`;
					}
				}
				$($('#no_show_list').DataTable().row.add([
					// hidden columns
					row.user_id,
					row.registration_id,
					row.civility,
					row.email_address,
					row.comment,

					// shown columns
					(i++),
					row.last_name,
					row.first_name,
					reservation_type,
					row.no_of_place,
					noshow_

					// '<tr>'
					// +'<td class="">'++'</td>'
					// +'<td class="">'+ +'</td>'
					// +'<td>'++'</td>'
					// +'<td>'++'</td>'
					// +'<td>'+

					// +'</td>'
					// +'</tr>'
				]).draw().node()).addClass(row_class+' noshow_data_row');
			});
			// set the header values
			$('.abonnes_attendus').html(abonnes_attendus);
			$('.invites_attendus').html(invites_attendus);
			$('.personnes_attendus').html(abonnes_attendus + invites_attendus);

			$('.abonnes_waiting').html(abonnes_waiting);
			$('.invites_waiting').html(invites_waiting);
			$('.personnes_waiting').html(abonnes_waiting + invites_waiting);

			$('.complet_nshow_total').html(complet_nshow_total);
			// $('.abonnes_presents').html(abonnes_presents);
			// $('.invites_presents').html(invites_presents);
			// $('.personnes_presents').html(abonnes_presents + invites_presents);

			// $('.abonnes_absents').html(abonnes_attendus - abonnes_presents);
			// $('.invites_absents').html(invites_attendus - invites_presents);
			// $('.personnes_absents').html((abonnes_attendus - abonnes_presents) + (invites_attendus - invites_presents));
			Attendance.reloadHeaderValues(eventScheduleId);
			init_plugins();
		})
		.fail(function() {
			// console.log("error");
		})
		.always(function() {
			// console.log("complete");
		});

}

}

$(document).ready(function() {
Attendance.initNoshowStatus();

	var Atable = $('#no_show_list')
	.on('draw.dt', function() {
		// $('#no_show_list').append(app.get_loader());
		//Here show the loader.
		// $("#MessageContainer").html("Your Message while loading");
	})
	.on('init.dt', function() {
		// console.log( 'Loaded' );
		// $('.page-loader').remove();
		//Here hide the loader.
		// $("#MessageContainer").html("Your Message while load Complete");
	})
	.DataTable({
		"paging": false,
		"responsive": true,
		"bFilter": true,
		"info": false,
		// "ordering": false,
		"aaSorting": [],
		"columnDefs": [{
			"targets": [0, 1, 2, 3, 4],
			"visible": false,
			"searchable": false,
		}],
		"language": {
							searchPlaceholder: "Rechercher",
			search  : "",
		},
					dom:"<'myfilter'f<'mybutton'>><'mylength'l>t"
	}).row.add([
		'',
		'',
		'',
		'',
		'',
		'Loading...',
		'',
		'',
		'',
		'',
		'',
	]).draw();
Attendance.populate_data_table(eventScheduleId);
// $(document).on('blur', '.n-present', function(event) {
//     event.preventDefault();
//     /* Act on the event */
//     alert('asd');
// });
initEventListeners();
// save row data on focusout
	
	app.remove_loader();
	$("div#no_show_list_filter label").append('<button id="clearsearch" class="btn btn-default">x</button>');

	$('#clearsearch').hide();
	$('div#no_show_list_filter input[type="search"]').keyup(function () {
			$('#clearsearch').show();

			if($(this).val().length==0){
					$('#clearsearch').hide();
	}

			$('#clearsearch').on('click',function () {
					$('div#no_show_list_filter input[type="search"]').val('');
					$('div#no_show_list_filter input[type="search"]').trigger('keyup');
					$('#clearsearch').hide();
			})
	})
});