<patTemplate:tmpl name="pageoutput" unusedvars="strip">
<style type="text/css">
/*Overrides*/
.fc-toolbar {
	display:none;
}
.fc-main-col {
	background:#f5f5f5;
}
.fc-no-overlap .fc-body .fc-resource-area .fc-cell-content {
    padding-bottom: 5px;
    padding-top: 5px;
}
.fc-timeline-event {
	font-size:inherit !important;
	font-weight:normal !important;
	padding:2px !important;
	line-height:1 !important;
	margin-top:1px !important;
	margin-bottom:1px !important;
}
.fc-event {
	font-size:13px !important;
}
.fc-event .fc-bg {
	background:transparent;
}
.fc-time-area .fc-event-container {
	padding-bottom:0;
}
.fc-timeline-event .fc-content {
	padding:5px;
}
a.fc-event:hover {
   text-decoration:none;
}
a.fc-event, .fc-event-draggable {
    border: 0 none !important;
}
.fc-widget-header {
	font-size:12px;
	color:#999;
	font-weight:normal;
	font-style:italic;
	background:#f5f5f5;
}
#jrCalendarTrash.jr-calendar-trash {
	box-shadow: 0 8px 6px -6px grey;
	background: rgba(218, 49, 75, 0.55);
	border: 1px dashed #e0e0e1;
	color: #fafafa;
	height: 50px;
	text-align: center;
	margin-right: 20px;
	font-size: 36px;
	width: 22%;
	padding: 5px 10px;
	white-space: nowrap;
	line-height: 1;
	float: right;
}
#jrCalendarTrash.jr-calendar-trash span {
	font-size:13px;
	vertical-align:middle;
	text-align:center;
}
.blockUI h1 {
	font-size:16px;
}
</style>

<script type='text/javascript'>
jomresJquery(document).ready(function() {

	var whole_day_bookings = '{WHOLEDAY_BOOKINGS}';
	var checkin_time = "12:00:00";
	var checkout_time = "12:00:00";
	
	if (whole_day_bookings == '1')
		{
		var checkin_time = "00:00:00";
		var checkout_time = "00:00:00";
		}
	
	jomresJquery('#jomres_dashboard{PROPERTY_UID}').block();
	
	var calendar = jomresJquery('#jomres_dashboard{PROPERTY_UID}').fullCalendar({
		schedulerLicenseKey: 'GPL-My-Project-Is-Open-Source',
		lang: '{COMMON_LANG_SHORT}',
		scrollTime: '00:00',
		height: 'auto',
		contentHeight: 'auto',
		resourceAreaWidth: '15%',
		nowIndicator: true,
		titleRangeSeparator: ' - ',
		resourceLabelText: '{HROOMS}',
		eventDurationEditable: true,
		eventStartEditable: true,
		eventOverlap: false,
		selectOverlap: false,
		longPressDelay: 1500,
		isRTL: {IS_RTL},
		header: {
			left: '',
			center: '',
			right: ''
		},
		defaultView: 'timelineTwoWeeks',
		views: {
			timelineDay: {
				type: 'timeline'
			},
			timelineWeek: {
				type: 'timeline',
				slotDuration: { hours:12 }
			},
			timelineTwoWeeks: {
				type: 'timeline',
				duration: { days: 14 },
				slotDuration: { hours:12 }
			},
			timelineMonth: {
				type: 'timeline',
				slotDuration: { hours:12 }
			},
			timelineYear: {
				type: 'timeline',
				slotDuration: { hours:12 }
			}
		},
		firstDay: '{FIRST_DAY_OF_WEEK}',
		monthNames: ['{_JRPORTAL_MONTHS_LONG_0}','{_JRPORTAL_MONTHS_LONG_1}','{_JRPORTAL_MONTHS_LONG_2}','{_JRPORTAL_MONTHS_LONG_3}','{_JRPORTAL_MONTHS_LONG_4}','{_JRPORTAL_MONTHS_LONG_5}','{_JRPORTAL_MONTHS_LONG_6}','{_JRPORTAL_MONTHS_LONG_7}','{_JRPORTAL_MONTHS_LONG_8}','{_JRPORTAL_MONTHS_LONG_9}','{_JRPORTAL_MONTHS_LONG_10}','{_JRPORTAL_MONTHS_LONG_11}'],
		monthNamesShort: ['{_JRPORTAL_MONTHS_SHORT_0}','{_JRPORTAL_MONTHS_SHORT_1}','{_JRPORTAL_MONTHS_SHORT_2}','{_JRPORTAL_MONTHS_SHORT_3}','{_JRPORTAL_MONTHS_SHORT_4}','{_JRPORTAL_MONTHS_SHORT_5}','{_JRPORTAL_MONTHS_SHORT_6}','{_JRPORTAL_MONTHS_SHORT_7}','{_JRPORTAL_MONTHS_SHORT_8}','{_JRPORTAL_MONTHS_SHORT_9}','{_JRPORTAL_MONTHS_SHORT_10}','{_JRPORTAL_MONTHS_SHORT_11}'],
		dayNames: ['{_JOMRES_COM_MR_WEEKDAYS_SUNDAY}','{_JOMRES_COM_MR_WEEKDAYS_MONDAY}','{_JOMRES_COM_MR_WEEKDAYS_TUESDAY}','{_JOMRES_COM_MR_WEEKDAYS_WEDNESDAY}','{_JOMRES_COM_MR_WEEKDAYS_THURSDAY}','{_JOMRES_COM_MR_WEEKDAYS_FRIDAY}','{_JOMRES_COM_MR_WEEKDAYS_SATURDAY}'],
		dayNamesShort: ['{_JOMRES_COM_MR_WEEKDAYS_SUNDAY_ABBR}','{_JOMRES_COM_MR_WEEKDAYS_MONDAY_ABBR}','{_JOMRES_COM_MR_WEEKDAYS_TUESDAY_ABBR}','{_JOMRES_COM_MR_WEEKDAYS_WEDNESDAY_ABBR}','{_JOMRES_COM_MR_WEEKDAYS_THURSDAY_ABBR}','{_JOMRES_COM_MR_WEEKDAYS_FRIDAY_ABBR}','{_JOMRES_COM_MR_WEEKDAYS_SATURDAY_ABBR}'],
		editable: true,
		selectable: true,
		selectHelper: true,
		resourceGroupField: 'itemtype',
		resources: '{AJAXURL_RESOURCES}',
		events: '{AJAXURL_EVENTS}',
		buttonText: {
			prev: '&lt;&lt; {PREV}',
			next: '{NEXT} &gt;&gt;',
			today: '{TODAY}',
			timelineDay: '{DAY}',
			timelineWeek: '{WEEK}',
			timelineTwoWeeks: '{TWOWEEKS}',
			timelineMonth: '{MONTH}'
		},
		select: function(start, end, jsEvent, view, resource) {
			startMoment = jomresJquery.fullCalendar.moment(start);
			endMoment = jomresJquery.fullCalendar.moment(end);
			startDate = startMoment.format('YYYY/MM/DD');
			endDate = endMoment.format('YYYY/MM/DD');
			startTime = startMoment.format('HH:mm:SS');
			endTime = endMoment.format('HH:mm:SS');

			if (whole_day_bookings == '0')
				{
				if (startTime < checkin_time || endTime > checkout_time)
					{
					return false;
					}
				}
			else
				{
				if (startTime > checkin_time || endTime < checkout_time)
					{
					return false;
					}
				}
			
			if (startDate == endDate && whole_day_bookings == '0')
				{
				endMoment.add(1, 'day');
				endDate = endMoment.format('YYYY/MM/DD');
				}

			mywhen = startDate + ' - ' + endDate;
			
			//reset modal form elements
			jomresJquery('#blackBookingForm')[0].reset();
			reset_booking_modal();
			reset_region_dropdown();
			reset_guest_details();
			
			//set the new hidden values
			jomresJquery('#blackBookingModal #start').val(startDate);
			jomresJquery('#blackBookingModal #end').val(endDate);
			jomresJquery('#blackBookingModal #room_uid').val(resource.id);
			jomresJquery('#blackBookingModal #allDay').val('');
			jomresJquery('#blackBookingModal #when').text(mywhen);
			jomresJquery('#blackBookingModal #where').text(resource.title);
			
			//generate the new modal 
			var modal = jomresJquery('#blackBookingModal').modal('show');
		},
		resourceRender: function(resourceObj, labelTds, bodyTds) {
			// this is triggered when the resource is rendered, just like eventRender
		},
		eventClick: function ( event, jsEvent, view )  {
			return null;
		},
		eventRender: function( event, element, view ) {
			// this is triggered when the event is rendered
			element.popover({
				delay: { show: 500, hide: 100 },
				placement: 'top',
				html: true,
				title: event.title,
				content: event.description,
				container:'body',
				trigger: 'manual'
			});
		},
		eventMouseover: function ( event, jsEvent, view )  {
			jomresJquery(this).popover('show');
		},
		eventMouseout: function ( event, jsEvent, view )  {
			jomresJquery(this).popover('hide');
		},
		eventDragStop: function ( event, jsEvent, ui, view ) {
			var trashEl = jomresJquery('#jrCalendarTrash');
			var ofs = trashEl.offset();

			var x1 = ofs.left;
			var x2 = ofs.left + trashEl.outerWidth(true);
			var y1 = ofs.top;
			var y2 = ofs.top + trashEl.outerHeight(true);

			//TODO: we need a confirmation alert here
			if (jsEvent.pageX >= x1 && jsEvent.pageX<= x2 && jsEvent.pageY>= y1 && jsEvent.pageY <= y2) 
				{
				calendar.fullCalendar( 'removeEvents', event.id );

				jomresJquery('#jomres_dashboard{PROPERTY_UID}').block();
				jomresJquery.ajax({
					type: 'GET',
					url: live_site_ajax + '&task=dashboard_cancelbooking_ajax',
					data: {
						contract_uid: event.contract_uid
						},
					success: function(data)
						{
						var cancellation_status = JSON && JSON.parse(data) || jomresJquery.parseJSON(data);
						if (cancellation_status.insertStatus == 1)
							{
							calendar.fullCalendar( 'refetchEvents' );
							}
						else
							{
							alert( cancellation_status.insertMessage );
							calendar.fullCalendar( 'refetchEvents' );
							jomresJquery('#jomres_dashboard{PROPERTY_UID}').unblock();
							}
						}
					});
				}
		},
		eventDrop: function ( event, delta, revertFunc, jsEvent, ui, view ) {
			jomresJquery(this).popover('hide');

			eventStart = jomresJquery.fullCalendar.moment(event.start);
			start = eventStart.format('YYYY/MM/DD');
			eventEnd = jomresJquery.fullCalendar.moment(event.end);
			end = eventEnd.format('YYYY/MM/DD');
			startTime = eventStart.format('HH:mm:SS');
			endTime = eventEnd.format('HH:mm:SS');

			if (whole_day_bookings == '0')
				{
				if (startTime < checkin_time || endTime > checkout_time)
					{
					revertFunc();
					return false;
					}
				}
			else
				{
				if (startTime > checkin_time || endTime < checkout_time)
					{
					revertFunc();
					return false;
					}
				}
			
			if (start == end && whole_day_bookings == '0')
				{
				eventEnd.add(1, 'day');
				end = eventEnd.format('YYYY/MM/DD');
				}

			jomresJquery('#jomres_dashboard{PROPERTY_UID}').block();
			jomresJquery.ajax({
				type: 'GET',
				url: live_site_ajax + '&task=dashboard_amendbooking_ajax',
				data: {
					event_id: event.id,
					room_uid: event.room_uid,
					new_room_uid: event.resourceId,
					contract_uid: event.contract_uid,
					this_contract_room_uids: event.this_contract_room_uids,
					event_start: start,
					event_end: end
					},
				success: function(data)
					{
					var amend_status = JSON && JSON.parse(data) || jomresJquery.parseJSON(data);
					if (amend_status.insertStatus == 1)
						{
						event.id = amend_status.id;
						event.start = amend_status.start;
						event.end = amend_status.end;
						event.room_uid = amend_status.room_uid;
						event.contract_uid = amend_status.contract_uid;
						event.this_contract_room_uids = amend_status.this_contract_room_uids;
						//calendar.fullCalendar( 'updateEvent', event );
						calendar.fullCalendar( 'refetchEvents' );
						//alert( amend_status.insertMessage );
						}
					else
						{
						alert( amend_status.insertMessage );
						revertFunc();
						jomresJquery('#jomres_dashboard{PROPERTY_UID}').unblock();
						}
					}
				});
		},
		eventResize: function ( event, delta, revertFunc, jsEvent, ui, view ) {
			jomresJquery(this).popover('hide');

			eventStart = jomresJquery.fullCalendar.moment(event.start);
			start = eventStart.format('YYYY/MM/DD');
			eventEnd = jomresJquery.fullCalendar.moment(event.end);
			end = eventEnd.format('YYYY/MM/DD');
			startTime = eventStart.format('HH:mm:SS');
			endTime = eventEnd.format('HH:mm:SS');

			if (whole_day_bookings == '0')
				{
				if (startTime < checkin_time || endTime > checkout_time)
					{
					revertFunc();
					return false;
					}
				}
			else
				{
				if (startTime > checkin_time || endTime < checkout_time)
					{
					revertFunc();
					return false;
					}
				}
			
			if (start == end && whole_day_bookings == '0')
				{
				eventEnd.add(1, 'day');
				end = eventEnd.format('YYYY/MM/DD');
				}

			jomresJquery('#jomres_dashboard{PROPERTY_UID}').block();
			jomresJquery.ajax({
				type: 'GET',
				url: live_site_ajax + '&task=dashboard_amendbooking_ajax',
				data: {
					event_id: event.id,
					room_uid: event.room_uid,
					new_room_uid: event.resourceId,
					contract_uid: event.contract_uid,
					this_contract_room_uids: event.this_contract_room_uids,
					event_start: start,
					event_end: end
					},
				success: function(data)
					{
					var amend_status = JSON && JSON.parse(data) || jomresJquery.parseJSON(data);
					if (amend_status.insertStatus == 1)
						{
						event.id = amend_status.id;
						event.start = amend_status.start;
						event.end = amend_status.end;
						event.room_uid = amend_status.room_uid;
						event.contract_uid = amend_status.contract_uid;
						event.this_contract_room_uids = amend_status.this_contract_room_uids;
						//calendar.fullCalendar( 'updateEvent', event );
						calendar.fullCalendar( 'refetchEvents' );
						//alert( amend_status.insertMessage );
						}
					else
						{
						alert( amend_status.insertMessage );
						revertFunc();
						jomresJquery('#jomres_dashboard{PROPERTY_UID}').unblock();
						}
					}
				});
		},
		loading: function( isLoading, view ) {
			if (isLoading === false)
				{ 
				jomresJquery('#jomres_dashboard{PROPERTY_UID}').unblock();
				}
		}
	});
jomresJquery('.btn-group button[data-calendar-nav]').each(function() {
	var $this = jomresJquery(this);
	$this.click(function() {
		jomresJquery("#jomres_dashboard{PROPERTY_UID}").fullCalendar($this.data('calendar-nav'));
		var view = jomresJquery("#jomres_dashboard{PROPERTY_UID}").fullCalendar('getView');
		jomresJquery('.jomres-dashboard h2 span').html(': ' + view.title);
	});
});

jomresJquery('.btn-group button[data-calendar-view]').each(function() {
	var $this = jomresJquery(this);
	$this.click(function() {
		jomresJquery("#jomres_dashboard{PROPERTY_UID}").fullCalendar('changeView',$this.data('calendar-view'));
		jomresJquery('.btn-group button').removeClass('active');
		jomresJquery('button[data-calendar-view="' + $this.data('calendar-view') + '"]').addClass('active');
		var view = jomresJquery("#jomres_dashboard{PROPERTY_UID}").fullCalendar('getView');
		jomresJquery('.jomres-dashboard h2 span').html(': ' + view.title);
	});
});
/* Set the initial title */
var view = jomresJquery("#jomres_dashboard{PROPERTY_UID}").fullCalendar('getView');
jomresJquery('.jomres-dashboard h2 span').html(': ' + view.title);

/* Set a timeout to refresh events every 5 minutes */
setInterval(function(){jomresJquery("#jomres_dashboard{PROPERTY_UID}").fullCalendar( 'refetchEvents' )}, 60000);

/* Modal submit */
//jomresJquery("#blackBookingModal").modal('hide');
jomresJquery("#blackBookingForm").submit(function(e) {
	e.preventDefault();
	jomresJquery('#blackBookingForm #ajax_animation_image').removeClass("hide");
	jomresJquery('#blackBookingForm #modalForm').addClass("hide");
	jomresJquery('#blackBookingForm #blackBookingSubmitButton').addClass("hide");
	jomresJquery('#blackBookingForm #blackBookingRetryButton').addClass("hide");
	jomresJquery('#blackBookingForm #blackBookingCloseButton').removeClass("hide").addClass("disabled");
	jomresJquery.ajax({
		type: 'GET',
		url: live_site_ajax + '&task=dashboard_insertbooking_ajax',
		data: jomresJquery('#blackBookingForm').serialize(),
		success: function(data)
			{
			var new_event = JSON && JSON.parse(data) || jomresJquery.parseJSON(data);
			if (new_event.insertStatus == 1)
				{
				insertMessage = '<p class="alert alert-success">' + new_event.insertMessage + '</p>';
				jomresJquery('#blackBookingForm #ajax_animation_image').addClass("hide");
				jomresJquery('#blackBookingForm #modalMessage').html(insertMessage).removeClass("hide");
				jomresJquery('#blackBookingForm #blackBookingCloseButton').removeClass("disabled").html('<i class="icon-cancel"></i> {COMMON_CLOSE}');
				/* Render the new event */
				jomresJquery("#jomres_dashboard{PROPERTY_UID}").fullCalendar('renderEvent',
						{
						id: new_event.id,
						title: new_event.title,
						description: new_event.description,
						start: new_event.start,
						end: new_event.end,
						allDay: new_event.allDay,
						resourceId: new_event.resourceId,
						url: new_event.url,
						className: new_event.className,
						contract_uid: new_event.contract_uid,
						room_uid: new_event.room_uid,
						this_contract_room_uids: new_event.this_contract_room_uids
						},
					false);
				}
			else
				{
				insertMessage = '<p class="alert alert-error">' + new_event.insertMessage + '</p>';
				jomresJquery('#blackBookingForm #modalMessage').html(insertMessage).removeClass("hide");
				jomresJquery('#blackBookingForm #modalForm').addClass("hide");
				jomresJquery('#blackBookingForm #ajax_animation_image').addClass("hide");
				jomresJquery('#blackBookingForm #blackBookingSubmitButton').addClass("hide");
				jomresJquery('#blackBookingForm #blackBookingRetryButton').removeClass("hide");
				jomresJquery('#blackBookingForm #blackBookingCloseButton').removeClass("disabled");
				}
			}
		});
	});

jomresJquery("#blackBookingForm #blackBookingRetryButton").on("click",function(e) {
	e.preventDefault();
	reset_booking_modal();
	});

var d1 = jomresJquery.Deferred();

jomresJquery(function(){
	jomresJquery("#guest_country").change(function(){
		var selectedValue = jomresJquery(this).find(":selected").val();
		clause = "&task=get_region_dropdown_for_country_code&country="+selectedValue;
		d1 = jomresJquery.get(live_site_ajax + clause, function (data) {
			populateDiv("guest_region_div",data);
			});
		});
	});

jomresJquery(function(){
	jomresJquery("#existingGuests").change(function(){
		var selectedValue = jomresJquery(this).find(":selected").val();
		clause = "&task=dashboard_get_guest_details_ajax&existing_id="+selectedValue;
		jomresJquery.get(live_site_ajax + clause, function (data) {
			var guestDeets = JSON && JSON.parse(data) || jomresJquery.parseJSON(data);
			jomresJquery('#existing_id').val(guestDeets.existing_id);
			jomresJquery('#mos_userid').val(guestDeets.mos_userid);
			jomresJquery('#firstname').val(guestDeets.firstname);
			jomresJquery('#surname').val(guestDeets.surname);
			jomresJquery('#house').val(guestDeets.house);
			jomresJquery('#street').val(guestDeets.street);
			jomresJquery('#guest_country').val(guestDeets.country).trigger('change');
			jomresJquery.when(d1).done(function() {jomresJquery('#region').val(guestDeets.county)});
			jomresJquery('#town').val(guestDeets.town);
			jomresJquery('#postcode').val(guestDeets.postcode);
			jomresJquery('#landline').val(guestDeets.tel_landline);
			jomresJquery('#mobile').val(guestDeets.tel_mobile);
			jomresJquery('#email').val(guestDeets.email);
			
			if (typeof guestDeets.email === 'undefined') {
				reset_guest_details();
				reset_region_dropdown();
			}
			});
		});
	});

jomresJquery("#blackBookingForm").appendTo("body");
});

function reset_region_dropdown() {
	var selectedCountry = jomresJquery('#blackBookingForm #guest_country').find(":selected").val();
	clause = "&task=get_region_dropdown_for_country_code&country="+selectedCountry;
	jomresJquery.get(live_site_ajax + clause, function (data) {
		populateDiv("guest_region_div",data);
		});
	return true;
}

function reset_booking_modal() {
	jomresJquery('#blackBookingModal #modalMessage').html("").addClass("hide");
	jomresJquery('#blackBookingForm #ajax_animation_image').addClass("hide");
	jomresJquery('#blackBookingForm #modalForm').removeClass("hide");
	jomresJquery('#blackBookingForm #blackBookingCloseButton').removeClass("hide").html('<i class="icon-cancel"></i> {COMMON_CANCEL}');
	jomresJquery('#blackBookingForm #blackBookingSubmitButton').removeClass("hide");
	jomresJquery('#blackBookingForm #blackBookingRetryButton').addClass("hide");
	return true;
}

function reset_guest_details() {

	var use_random_emails = {USE_RANDOM_EMAILS};
	
	if (use_random_emails == true ) {
		random_generated_guest_email_address = get_email_address_not_already_in_use();
	} else {
		random_generated_guest_email_address = '';
	}
	
	jomresJquery('#existing_id').val('');
	jomresJquery('#mos_userid').val('');
	jomresJquery('#firstname').val('');
	jomresJquery('#surname').val('');
	jomresJquery('#house').val('');
	jomresJquery('#street').val('');
	jomresJquery('#town').val('');
	jomresJquery('#postcode').val('');
	jomresJquery('#landline').val('');
	jomresJquery('#mobile').val('');
	jomresJquery('#email').val(random_generated_guest_email_address);
}

function get_email_address_not_already_in_use() {
	guest_email_address_account_name = Math.floor((Math.random() * 1000000) + 1);
	var random_generated_email_address = guest_email_address_account_name+'{DEFAULT_EMAIL_DOMAIN}';
	jomresJquery.ajax({
		type: 'GET',
		async: true,
		url: live_site_ajax + '&task=dashboard_email_check_ajax',
		data: {
			guest_email_address: random_generated_email_address
			},
		success: function(data)
			{
			var response = JSON && JSON.parse(data) || jomresJquery.parseJSON(data);
			if ( response.email_already_in_system == true ) {
				random_generated_email_address = get_email_address_not_already_in_use();
				}
			}
		});
	return random_generated_email_address;
}

</script>

<div class="page-header jomres-dashboard">
	<h2>{PAGETITLE}<span></span></h2>
</div>

<div class="well form-inline">
	<div class="btn-group">
		<a href="{NEW_BOOKING_URL}" class="btn btn-primary"><i class="icon-plus"></i> {HNEW_BOOKING}</a>
	</div>
	<!--<div class="btn-group">
		<a href="{BLACK_BOOKINGS_URL}" class="btn btn-primary"><i class="icon-plus"></i> {HBLACK_BOOKINGS}</a>
	</div>-->
	<div class="btn-group">
		<button class="btn" data-calendar-nav="prev"><< {PREV}</button>
		<button class="btn" data-calendar-nav="today">{TODAY}</button>
		<button class="btn" data-calendar-nav="next">{NEXT} >></button>
	</div>
	<div class="btn-group">
		<patTemplate:tmpl name="rows" unusedvars="strip">
			<button class="btn {ACTIVE}" data-calendar-view="{VIEW}">{VIEW_NAME}</button>
		</patTemplate:tmpl>
	</div>
</div>

<div id="jomres_dashboard{PROPERTY_UID}"></div>

<div class="footer navbar-fixed-bottom" style="bottom: 40px;">
	<div class="row-fluid">
		<div class="span12">
			<div id="jrCalendarTrash" class="jr-calendar-trash">
				<i class="fa fa-trash"></i> <span class="hidden-phone">{HDRAG_TRASH}</span>
			</div>
		</div>
	</div>
</div>

<div>&nbsp;</div>
<h5>{HLEGEND}</h5>
<span class="label label-grey">{TEXT_PENDING}</span>
<span class="label label-orange">{TEXT_ARRIVETODAY}</span>
<span class="label label-green">{TEXT_RESIDENT}</span>
<span class="label label-red">{TEXT_LATE}</span>
<span class="label label-info">{TEXT_DEPARTTODAY}</span>
<span class="label label-purple">{TEXT_STILLHERE}</span>
<span class="label label-teal">{TEXT_BOOKEDOUT}</span>
<span class="label label-black">{HBLACKBOOKING}</span>
<br/>
<br/>
{OVERVIEW}

<form action="{JOMRES_SITEPAGE_URL_AJAX}&task=dashboard_insertbooking_ajax" method="get" id="blackBookingForm">
<div id="blackBookingModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel1" aria-hidden="true">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">x</button>
        <h3 id="myModalLabel1">{HQUICK_BOOKING}</h3>
    </div>
    <div class="modal-body">
		<input type="hidden" id="start" name="start" value="" />
		<input type="hidden" id="end" name="end" value="" />
		<input type="hidden" id="room_uid" name="room_uid" value="" />
		<input type="hidden" id="allDay" name="allDay" value="" />
		<input type="hidden" id="existing_id" name="existing_id" value="" />
		<input type="hidden" id="mos_userid" name="mos_userid" value="" />
		<div id="modalForm">
			<div class="row-fluid">
				<div class="span6">
					<div class="control-group well">
						<h5>{HSELECTED_DATES}</h5>
		
						<div class="controls">
							<p id="when"></p>
						</div>
					</div>
				</div>
				<div class="span6">
					<div class="control-group well">
						<h5>{HSELECTED_ROOM}</h5>
		
						<div class="controls">
							<p id="where"></p>
						</div>
					</div>
				</div>
			</div>
			<div class="row-fluid">
				<div class="span6">
					<div class="control-group">
						<label class="control-label" for="existingGuests">{HEXISTING_GUESTS_DROPDOWN}</label>
						
						<div class="controls">
							{EXISTING_GUESTS_DROPDOWN}
						</div>
					</div>
				</div>
				<div class="span6">
				</div>
			</div>
			<div class="row-fluid">
				<div class="span4">
					<div class="control-group">
						<label class="control-label" for="firstname">{HFIRSTNAME}</label>
			
						<div class="controls">
							<input id="firstname" name="firstname" type="text" value="{FIRSTNAME}" class="span12 "/>
						</div>
					</div>
					<div class="control-group">
						<label class="control-label" for="surname">{HSURNAME}</label>
			
						<div class="controls">
							<input id="surname" name="surname" type="text" value="{SURNAME}" class="span12 "/>
						</div>
					</div>
					<div class="control-group">
						<label class="control-label" for="house">{HHOUSE}</label>
			
						<div class="controls">
							<input id="house" name="house" type="text" value="{HOUSE}" class="span12 "/>
						</div>
					</div>
					<div class="control-group">
						<label class="control-label" for="street">{HSTREET}</label>
			
						<div class="controls">
							<input id="street" name="street" type="text" value="{STREET}" class="span12 "/>
						</div>
					</div>
					<div class="control-group">
						<label class="control-label" for="postcode">{HPOSTCODE}</label>
			
						<div class="controls">
							<input id="postcode" name="postcode" type="text" value="{POSTCODE}" class="span12 "/>
						</div>
					</div>
				</div>
				<div class="span4">
					<div class="control-group">
						<label class="control-label" for="guest_country">{HCOUNTRY}</label>
			
						<div class="controls">
							{COUNTRY}
						</div>
					</div>
					<div class="control-group">
						<label class="control-label" for="region">{HREGION}</label>
			
						<div class="controls">
							<div id="guest_region_div">{REGION}</div>
						</div>
					</div>
					<div class="control-group">
						<label class="control-label" for="town">{HTOWN}</label>
			
						<div class="controls">
							<input id="town" name="town" type="text" value="{TOWN}" class="span12 "/>
						</div>
					</div>
					<div class="control-group">
						<label class="control-label" for="landline">{HLANDLINE}</label>
			
						<div class="controls">
							<input id="landline" name="landline" type="text" value="{LANDLINE}" class="span12 "/>
						</div>
					</div>
					<div class="control-group">
						<label class="control-label" for="mobile">{HMOBILE}</label>
			
						<div class="controls">
							<input id="mobile" name="mobile" type="text" value="{MOBILE}" class="span12 "/>
						</div>
					</div>
				</div>
				<div class="span4">
					<div class="control-group">
						<label class="control-label" for="email">{HEMAIL}</label>
			
						<div class="controls">
							<input id="email" name="email" type="email" value="{EMAIL}" class="span12 "/>
						</div>
					</div>
					<div class="well well-small">
						<div class="control-group">
							<h5>{HCONTRACT_TOTAL}</h5>
				
							<div class="controls">
								<div class="input-append">
									<input id="contract_total" name="contract_total" type="text" value="{CONTRACT_TOTAL}" class="input-mini "/>
									<span class="add-on">{CURRENCY_CODE}</span>
								</div>
							</div>
						</div>
						<div class="control-group">
							<h5>{HDEPOSIT_REQUIRED}</h5>
				
							<div class="controls">
								<div class="input-append">
									<input id="deposit_required" name="deposit_required" type="text" value="{DEPOSIT_REQUIRED}" class="input-mini "/>
									<span class="add-on">{CURRENCY_CODE}</span>
								</div>
							</div>
						</div>
						<div class="control-group">
							<h5>{HDEPOSIT_PAID}</h5>
				
							<div class="controls">
								{DEPOSIT_PAID}
							</div>
						</div>
						<div class="control-group">
							<h5>{HBOOKED_IN}</h5>
				
							<div class="controls">
								{BOOKED_IN}
							</div>
						</div>
					</div>
				</div>
			</div>
			
			<div class="row-fluid">
				<div class="span12">
					<div>
						<P class="alert alert-info">{_JOMRES_QUICKBOOKING_EMAIL_ADDRESS_NOTE}</p>
					</div>
				</div>
			</div>
			
		</div>
		<img src="{JOMRES_IMAGES_RELPATH}ajax_animation/broken_circle.gif" alt="ajax_animation_image" class="hide" id="ajax_animation_image"/>
		<div id="modalMessage" class="hide">
		</div>
    </div>
    <div class="modal-footer">
		<button class="btn" id="blackBookingRetryButton"><i class="icon-refresh"></i> Retry</button>
        <button class="btn" data-dismiss="modal" aria-hidden="true" id="blackBookingCloseButton"><i class="icon-cancel"></i> {COMMON_CANCEL}</button>
        <button type="submit" class="btn btn-primary" id="blackBookingSubmitButton"><i class="icon-save"></i> {COMMON_SAVE}</button>
    </div>
</div>
</form>

</patTemplate:tmpl>
