		<@if(booking.tab == 'showServices'){@>
				<div class="booking-body clearfix">
					<h2><@=ptEscape(langjs['List of all Services'])@>:</h2>
					<div class="booking-list-box">
						<ul class="booking-list view-list">
							<@services.each(function(service){
							var duration = moment.utc(moment.duration(service.get('serviceDuration')*60000).asMilliseconds());
							var childs = children.where({serviceKey: service.id});
							if(service.get('pricingType') == 'multiple' && childs.length){
							_.each(childs,function(child){
							var duration = moment.utc(moment.duration(child.get('duration')*60000).asMilliseconds());
							@>
							<li>
								<div class="bl bl-left"><img class="img-responsive img-circle default-img" src="<@=service.get('serviceImage') ? resizeGoogleImage(service.get('serviceImage'), 50) : '/bookingPage/img/booking-services.png'@>" alt=""></div>
								<div class="bl bl-center">
									<div><@=service.get('serviceName')@> (<@=child.get('name')@>)</div>
									<@if(showPrices || showDuration){@>
									<div class="bl-meta-deta">
										<@if(showPrices){@>
										<span><@=TCC.currency(account.get('currency')).symbol@> <@=child.get('cost') != null ? child.get('cost').toFixed(2) : 0 @></span>
										<@}@>
										<@if(showDuration){@>
										<span><@=getDurationString(duration)@></span>
										<@}@>
									</div>
									<@}@>
									<@if(showDescription){@>
										<@if(service.get('description') && service.get('description').value){@>
	                                    <div class="bl-meta-deta">
	                                        <span><@=service.get('description').value@></span>
	                                    </div>
										<@}@>
									<@}@>
								</div>
								<div class="bl bl-right">&nbsp;</div>
							</li>
							<@});@>
							<@} else{@>
							<li>
								<div class="bl bl-left"><img class="img-responsive img-circle default-img" src="<@=service.get('serviceImage') ? resizeGoogleImage(service.get('serviceImage'), 50) : '/bookingPage/img/booking-services.png'@>" alt=""></div>
								<div class="bl bl-center">
									<div><@=service.get('serviceName')@></div>
									<@if(showPrices || showDuration){@>
									<div class="bl-meta-deta">
										<@if(showPrices){@>
										<span><@=TCC.currency(account.get('currency')).symbol@> <@=service.get('serviceCost') != null ? service.get('serviceCost').toFixed(2) : 0 @></span>
										<@}@>
										<@if(showDuration){@>
										<span><@=getDurationString(duration)@></span>
										<@}@>
									</div>
									<@}@>
									<@if(showDescription){@>
										<@if(service.get('description') && service.get('description').value){@>
	                                    <div class="bl-meta-deta">
	                                    <span><@=service.get('description').value@></span>
	                                    </div>
										<@}@>
									<@}@>
								</div>
								<div class="bl bl-right">&nbsp;</div>
							</li>
							<@}@>
							<@});@>
						</ul>
					</div>
				</div>
		<@} else if(booking.tab == 'showClasses'){@>
				<div class="booking-body clearfix">
					<h2><@=ptEscape(langjs['List of all Classes'])@>:</h2>
					<div class="booking-list-box">
						<ul class="booking-list view-list">
							<@classes.each(function(classModel){
							var duration = moment.utc(moment.duration(classModel.get('classDuration')*60000).asMilliseconds());
							@>
							<li>
								<div class="bl bl-left"><img class="img-responsive img-circle default-img" src="<@=classModel.get('classImage') ? resizeGoogleImage(classModel.get('classImage'), 50) : '/bookingPage/img/booking-class.png'@>" alt=""></div>
								<div class="bl bl-center">
									<div><@=classModel.get('className')@></div>
									<@if(showPrices || showDuration){@>
									<div class="bl-meta-deta">
										<@if(showPrices){@>
										<span><@=TCC.currency(account.get('currency')).symbol@> <@=classModel.get('classCost') != null ? classModel.get('classCost').toFixed(2) : 0 @></span>
										<@}@>
										<@if(showDuration){@>
										<span><@=getDurationString(duration)@></span>
										<@}@>
									</div>
									<@}@>
									<@if(showDescription){@>
										<@if(classModel.get('description') && classModel.get('description').value){@>
	                                    <div class="bl-meta-deta">
	                                    <span><@=classModel.get('description').value@></span>
	                                    </div>
	                                    <@}@>
                                    <@}@>
								</div>
								<div class="bl bl-right">&nbsp;</div>
							</li>
							<@});@>
						</ul>
					</div>
				</div>
		<@} else if(booking.tab == 'showResources'){@>
				<div class="booking-body clearfix">
					<h2><@=ptEscape(langjs['List of all Resources'])@>:</h2>
					<div class="booking-list-box">
						<ul class="booking-list view-list">
							<@resources.each(function(resource){
							var duration = moment.utc(moment.duration(resource.get('duration')*60000).asMilliseconds());
							var childs = children.where({serviceKey: resource.id});
							if(resource.get('pricingType') == 'multiple' && childs.length){
							_.each(childs,function(child){
							var duration = moment.utc(moment.duration(child.get('duration')*60000).asMilliseconds());
							@>
							<li>
								<div class="bl bl-left"><img class="img-responsive img-circle default-img" src="<@=resource.get('displayImage') ? resizeGoogleImage(resource.get('displayImage'), 50) : '/bookingPage/img/booking-services.png'@>" alt=""></div>
								<div class="bl bl-center">
									<div><@=resource.get('name')@> (<@=child.get('name')@>)<@=(resource.get('type') == 'room' ? ' - Room' : '')@></div>
									<@if(showPrices || showDuration){@>
									<div class="bl-meta-deta">
										<@if(showPrices){@>
										<span><@=TCC.currency(account.get('currency')).symbol@> <@=child.get('cost') != null ? child.get('cost').toFixed(2) : 0 @></span>
										<@}@>
										<@if(showDuration){@>
										<span><@=getDurationString(duration)@></span>
										<@}@>
									</div>
									<@}@>
									<@if(resource.get('description') && resource.get('description').value){@>
									<div class="bl-meta-deta">
										<span><@=resource.get('description').value@></span>
									</div>
									<@}@>
								</div>
								<div class="bl bl-right">&nbsp;</div>
							</li>
							<@});@>
							<@} else{@>
							<li>
								<div class="bl bl-left"><img class="img-responsive img-circle default-img" src="<@=resource.get('displayImage') ? resizeGoogleImage(resource.get('displayImage'), 50) : '/bookingPage/img/booking-services.png'@>" alt=""></div>
								<div class="bl bl-center">
									<div><@=resource.get('name')@><@=(resource.get('type') == 'room' ? ' - Room' : '')@></div>
									<@if(showPrices || showDuration){@>
									<div class="bl-meta-deta">
										<@if(showPrices){@>
										<span><@=TCC.currency(account.get('currency')).symbol@> <@=resource.get('cost') != null ? resource.get('cost').toFixed(2) : 0 @></span>
										<@}@>
										<@if(showDuration){@>
										<span><@=getDurationString(duration)@></span>
										<@}@>
									</div>
									<@}@>
									<@if(resource.get('description') && resource.get('description').value){@>
									<div class="bl-meta-deta">
										<span><@=resource.get('description').value@></span>
									</div>
									<@}@>
								</div>
								<div class="bl bl-right">&nbsp;</div>
							</li>
							<@}@>
							<@});@>
						</ul>
					</div>
				</div>
		<@} else{@>


				<@if((booking.tab != 'locations' && booking.tab != 'services') || booking.serviceId || booking.classId || booking.resourceId){
				var serviceName = '';
				var staffName = booking.autoSelectStaff ? '...' : '';
				var dateFormat = booking.dateAndTime ? moment(toPTDate(booking.dateAndTime)).format('MMM D , '+hourFormat) : '';
				var sessionDateFormat = booking.sessionDate ? moment(toPTDate(booking.sessionDate)).format('MMM D , '+hourFormat) : '';

				if(booking.type == 'appointment' && booking.serviceId) serviceName = services.get(booking.serviceId.split('_')[0]).get('serviceName');
				if(booking.staffId) staffName = (team.get(booking.staffId).get('firstName') ? team.get(booking.staffId).get('firstName') : "")+" "+(team.get(booking.staffId).get('lastName') ? team.get(booking.staffId).get('lastName') : "");
				if(booking.resourceId) serviceName = resources.get(booking.resourceId.split('_')[0]).get('name') + (resources.get(booking.resourceId.split('_')[0]).get('type') == 'room' ? ' - Room' : '' );
				if(booking.classId) serviceName = classes.get(booking.classId).get('className');

				@>
				<ul class="booking-body-nav">
					<li><a data-type="nav-services" href="javascipt:void(0);" <@=serviceName ? 'class="active"' : ''@>><span class=""><@=serviceName ? serviceName : 'Service type'@></span></a></li>
					<@if(booking.type == 'appointment' || booking.type == 'class'){@>
					<li><a data-type="nav-staff" href="javascipt:void(0);" <@=staffName ? 'class="active"' : ''@>><i class="icon-arrow-right"></i><span class=""><@=staffName ? staffName : ptEscape(langjs['Team Member'])@></span></a></li>
					<@}@>
					<@if(booking.type == 'class'){@>
					<li><a data-type="nav-sessions" href="javascipt:void(0);"  <@=booking.sessionDate ? 'class="active"' : ''@>><i class="icon-arrow-right"></i><@=sessionDateFormat ? sessionDateFormat : '<span>'+ptEscape(langjs['Sessions'])+'</span>'@></a></li>
					<@} else{ @>
					<li><a data-type="nav-date" href="javascipt:void(0);"  <@=booking.dateAndTime ? 'class="active"' : ''@>><i class="icon-arrow-right"></i><@=dateFormat ? dateFormat : '<span class="span-visible-xs">'+ptEscape(langjs['Date'])+'</span><span class="span-hidden-xs">'+ptEscape(langjs['Date & Time'])+'</span>'@></a></li>
					<@}@>
					<li><a data-type="nav-info" href="javascipt:void(0);"  <@=booking.complete ? 'class="active"' : ''@>><i class="icon-arrow-right"></i><span class=""><@=ptEscape(langjs['Info'])@></span></a></li>
					<li><a data-type="nav-confirmation" href="javascipt:void(0);" <@=booking.booked ? 'class="active"' : ''@>><i class="icon-arrow-right"></i><span class=""><@=ptEscape(langjs['Complete'])@></span></a></li>
				</ul>
				<@}@>

				<@if(booking.tab == 'date'){@>
				<div class="dates-container">
					<div class="dates-array">
						<@if(!leftStop){@>
	    				<div class="date-item date-left"><i class="icon-arrow-left"></i></div>
						<@}@>
	    				<@
	    				var startday = startDate.clone();
	    				var endday = endDate.clone();
	    				while(startday.isSameOrBefore(endday))
	    				{
	    				@>
	    				<div class="date-item data-date-item <@= startday.format('YYYYMMDD') == booking.selectedDate.format('YYYYMMDD') ? 'active' : ''@><@=minEndDate && +startday.format('YYYYMMDD') > minEndDate.format('YYYYMMDD') ? ' disable' : ''@>" data-date="<@=startday.format('YYYYMMDD')@>" title="<@=startday.format('Do MMM YYYY')@>">
					        <div><@=startday.format('ddd').toUpperCase()@></div>
							<div><span><@=startday.format('Do')@></span></div>
							<div><@=startday.format('MMM').toUpperCase()@></div>
						</div>
	    				<@
	    					startday.add('days', 1);
	    				}
	    				@>
	    				<@if(!rightStop){@>
						<div class="date-item date-right"><i class="icon-arrow-right"></i></div>
						<@}@>
					</div>
				</div>
				<@}@>


				<@if(booking.tab == 'sessions'){@>
				<div class="dates-container">
					<div class="dates-array">
						<@if(booking.classPrevDates && booking.classPrevDates.length){@>
	    				<div class="date-item date-left classitem"><i class="icon-arrow-left"></i></div>
	    				<@}@>
	    				<div class="date-item data-date-item active">
							<div class="class-date"><@=booking.classDate.format('MMMM YYYY')@></div>
						</div>
						<@if(booking.classNextDate){@>
						<div class="date-item date-right classitem"><i class="icon-arrow-right"></i></div>
						<@}@>
					</div>
				</div>
				<@}@>

				<div class="booking-body clearfix">
					<@if(booking.tab == 'locations'){
					  if(locations && locations.size()){
					@>
					<h2><@=ptEscape(langjs['Choose a Location'])@>:</h2>
					<div class="booking-list-box">
						<ul class="booking-list location-list">
							<@locations.each(function(location){@>
							<li data-id="<@=location.id@>" class="<@=booking.locationId == location.id ? 'active' : ''@>">
								<div class="bl bl-left"><img class="img-responsive img-circle default-img" src="/bookingPage/img/booking-location.png" alt=""></div>
								<div class="bl bl-center">
									<div><@=location.get('locationName')@></div>
									<div class="bl-meta-deta">
										<span><@=ptEscape(location.get('address'))@><@=location.get('city') ? ', '+location.get('city') : ''@></span>
									</div>
								</div>
								<div class="bl bl-right"><i class="icon-arrow-right"></i></div>
							</li>
							<@});@>
						</ul>
					</div>
						<@} else{@>
						<div class="booking-none text-center margin-top"><@=allowToBookWithoutSSO ? ptEscape(langjs['BOOKINGS ARE NOT OPEN AT THE MOMENT']) : 'PLEASE <a class="sso-login" href="javascript:void(0);" style="text-decoration: underline;">LOGIN</a> TO CONTINUE...'@></div>
						<@} @>
					<@} @>


					<@
					var allServiceItems = 0;
					var location = locations.get(booking.locationId);
					@>

					<@if(booking.tab == 'services'){@>
					<@	var items = 0;
						var catServices = {};
						var catServiceArray = [];
						_.each(location.get('serviceKeys'), function(serviceId){

							var service = services.get(serviceId);
							if(!service) return;

							var staffInLocation = false;
							if(service.get('staffKeys') && service.get('staffKeys').length){
								_.each(service.get('staffKeys'), function(staffId){
									if(location.get('staffKeys') && location.get('staffKeys').contains(staffId) && team.get(staffId)) staffInLocation = true;
								});
							}
							if(!staffInLocation) return;

							items++;
							allServiceItems++;
							if(service.get('categorySet') && service.get('categorySet').length){
								if(!catServices[service.get('categorySet')[0]]) catServices[service.get('categorySet')[0]] = [];
								catServices[service.get('categorySet')[0]].push(service.id);
								if(!catServiceArray.contains(service.get('categorySet')[0])) catServiceArray.push(service.get('categorySet')[0]);
							}
							else{
								if(!catServices['Others']) catServices['Others'] = [];
								catServices['Others'].push([service.id]);
								if(!catServiceArray.contains('Others')) catServiceArray.push('Others');
							}
						});
						catServiceArray.sort(function(a, b){
							var keys = preferences.get('serviceCategoryKeys') ? preferences.get('serviceCategoryKeys') : [];
							if(!keys.contains(a)) return -1;
							return keys.indexOf(a) - keys.indexOf(b);
						});
						if(catServiceArray.contains('Others')){
							catServiceArray.splice(catServiceArray.indexOf('Others'), 1);
							catServiceArray.push('Others');
						}
						console.log(catServices);
					@>
					<@if(items){@>
					<h2><@=ptEscape(langjs['Choose a Service'])@>:</h2>
					<@_.each(catServiceArray, function(catId){
					var serviceIds = catServices[catId];
					serviceIds.sort(function(a, b){
						var keys = preferences.get('serviceKeys') ? preferences.get('serviceKeys') : [];
						if(!keys.contains(a)) return -1;
						return keys.indexOf(a) - keys.indexOf(b);
					});
					@>
					<div class="booking-list-box">
					<h3><@=serviceCats.get(catId) ? serviceCats.get(catId).get('categoryName') : 'Others'@></h3>
					<ul class="booking-list service-list">
						<@_.each(serviceIds, function(serviceId){
						var service = services.get(serviceId);
						var duration = moment.utc(moment.duration(service.get('serviceDuration')*60000).asMilliseconds());
						var childs = children.where({serviceKey: serviceId});

						if(service.get('pricingType') != 'single' && childs.length){
						_.each(childs,function(child){
						var duration = moment.utc(moment.duration(child.get('duration')*60000).asMilliseconds());
						@>
						<li data-id="<@=service.id@>_<@=child.id@>" class="<@=booking.serviceId == service.id+'_'+child.id ? 'active' : ''@>">
							<div class="bl bl-left"><img class="img-responsive img-circle<@=!service.get('serviceImage') ? ' default-img' : ''@>" src="<@=service.get('serviceImage') ? resizeGoogleImage(service.get('serviceImage'), 50) : '/bookingPage/img/booking-services.png'@>"></div>
							<div class="bl bl-center">
								<div><@=service.get('serviceName')@> (<@=child.get('name')@>)</div>
								<div class="bl-meta-deta">
									<@if(showPrices){@>
									<span><@=TCC.currency(account.get('currency')).symbol@> <@=child.get('cost') != null ? child.get('cost').toFixed(2) : 0 @></span>
									<@}@>
									<@if(showDuration){@>
									<span><@=getDurationString(duration)@></span>
									<@}@>
									<span class="bl-meta-details">VIEW DETAILS</span>
								</div>
								<div class="bl-meta-deta">
								<@if(showDescription){@>
									<div class="trimmed-content" ><span><@=service.get('description') && service.get('description').value ? service.get('description').value.replaceAll('\n', ' ').replaceAll('<br>', ' ') : ''@></span></div>
									<div class="full-content" ><@=service.get('description') ? service.get('description').value : ''@></div>
									<a href="#" class="show_hide <@=service.get('description') && service.get('description').value && service.get('description').value.indexOf('<br>') != -1 ? '' : 'hide' @>" data-content="toggle-text"><@=ptEscape(langjs['Read More'])@></a>
								<@}@>
								</div>
							</div>
							<div class="bl bl-right"><i class="icon-arrow-right"></i></div>
						</li>
						<@
						});
						} else{@>
						<li data-id="<@=service.id@>" class="<@=booking.serviceId == service.id ? 'active' : ''@>">
							<div class="bl bl-left"><img class="img-responsive img-circle<@=!service.get('serviceImage') ? ' default-img' : ''@>" src="<@=service.get('serviceImage') ? resizeGoogleImage(service.get('serviceImage'), 50) : '/bookingPage/img/booking-services.png'@>"></div>
							<div class="bl bl-center">
								<div><@=service.get('serviceName')@></div>
									<div class="bl-meta-deta">
										<@if(showPrices){@>
										<span><@=TCC.currency(account.get('currency')).symbol@> <@=service.get('serviceCost') != null ? service.get('serviceCost').toFixed(2) : 0 @></span>
										<@}@>
										<@if(showDuration){@>
										<span><@=getDurationString(duration)@></span>
										<@}@>
										<span class="bl-meta-details">VIEW DETAILS</span>
									</div>
									<div class="bl-meta-deta">
										<@if(showDescription){@>
											<div class="trimmed-content" ><span><@=service.get('description') && service.get('description').value ? service.get('description').value.replaceAll('\n', ' ').replaceAll('<br>', ' ') : ''@></span></div>
											<div class="full-content" ><@=service.get('description') ? service.get('description').value : ''@></div>
											<a href="#" class="show_hide <@=service.get('description') && service.get('description').value && service.get('description').value.indexOf('<br>') != -1 ? '' : 'hide' @>" data-content="toggle-text"><@=ptEscape(langjs['Read More'])@></a>
										<@}@>
									</div>
							</div>
							<div class="bl bl-right"><i class="icon-arrow-right"></i></div>
						</li>
						<@}
						 });@>
					</ul>
					</div>
					<@});@>
					<@}@>
					<@}@>


					<@if(booking.tab == 'services'){@>
					<@	var items = 0;
						var catClasses = {};
						var catClassesArray = [];
						classes.each(function(classModel){
						if(!classModel || !booking.availableClases.contains(classModel.id)) return;
						items++;
						allServiceItems++;
						if(classModel.get('categorySet') && classModel.get('categorySet').length){
							if(!catClasses[classModel.get('categorySet')[0]]) catClasses[classModel.get('categorySet')[0]] = [];
							catClasses[classModel.get('categorySet')[0]].push(classModel.id);
							if(!catClassesArray.contains(classModel.get('categorySet')[0])) catClassesArray.push(classModel.get('categorySet')[0]);
						}
						else{
							if(!catClasses['Others']) catClasses['Others'] = [];
							catClasses['Others'].push([classModel.id]);
							if(!catClassesArray.contains('Others')) catClassesArray.push('Others');
						}
						});

						catClassesArray.sort(function(a, b){
							var keys = preferences.get('classesCategoryKeys') ? preferences.get('classesCategoryKeys') : [];
							if(!keys.contains(a)) return -1;
							return keys.indexOf(a) - keys.indexOf(b);
						});
						if(catClassesArray.contains('Others')){
							catClassesArray.splice(catClassesArray.indexOf('Others'), 1);
							catClassesArray.push('Others');
						}
						console.log(catClasses);
					@>
					<@if(items){@>
					<h2><@=ptEscape(langjs['Choose a Class'])@>:</h2>
					<@_.each(catClassesArray, function(catId){
					var classIds = catClasses[catId];
					classIds.sort(function(a, b){
						var keys = preferences.get('classKeys') ? preferences.get('classKeys') : [];
						if(!keys.contains(a)) return -1;
						return keys.indexOf(a) - keys.indexOf(b);
					});
					@>
					<div class="booking-list-box">
					<h3><@=classCats.get(catId) ? classCats.get(catId).get('categoryName') : 'Others'@></h3>
					<ul class="booking-list class-list">
						<@_.each(classIds, function(classId){
						var classModel = classes.get(classId);
						var duration = moment.utc(moment.duration(classModel.get('classDuration')*60000).asMilliseconds());
						@>
						<li data-id="<@=classModel.id@>" class="<@=booking.classId == classModel.id ? 'active' : ''@>">
							<div class="bl bl-left"><img class="img-responsive img-circle<@=!classModel.get('classImage') ? ' default-img' : ''@>" src="<@=classModel.get('classImage') ? resizeGoogleImage(classModel.get('classImage'), 50) : '/bookingPage/img/booking-class.png'@>"></div>
							<div class="bl bl-center">
								<div><@=classModel.get('className')@></div>
								<div class="bl-meta-deta">
<!-- 									<@if(showPrices){@> -->
<!-- 									<span><@=TCC.currency(account.get('currency')).symbol@> <@=classModel.get('classCost') != null ? classModel.get('classCost').toFixed(2) : 0 @></span> -->
<!-- 									<@}@> -->
<!-- 									<@if(showDuration){@> -->
<!-- 									<span><@=getDurationString(duration)@></span> -->
<!-- 									<@}@> -->
									<span class="bl-meta-details">VIEW DETAILS</span>
									<div class="bl-meta-deta">
									<@if(showDescription){@>
											<div class="trimmed-content" ><span><@=classModel.get('description') && classModel.get('description').value ? classModel.get('description').value.replaceAll('\n', ' ').replaceAll('<br>', ' ') : ''@></span></div>
											<div class="full-content" ><@=classModel.get('description') ? classModel.get('description').value : ''@></div>
											<a href="#" class="show_hide <@=classModel.get('description') && classModel.get('description').value && classModel.get('description').value.indexOf('<br>') != -1 ? '' : 'hide' @>" data-content="toggle-text"><@=ptEscape(langjs['Read More'])@></a>
										<@}@>
									</div>
									</div>
							</div>
							<div class="bl bl-right"><i class="icon-arrow-right"></i></div>
						</li>
						<@});@>
					</ul>
					</div>
					<@});@>
					<@}@>
					<@}@>




					<@if(booking.tab == 'services' && !preferences.get('autoSelectResource')){@>
					<@	var items = 0;
						var catResources = {};
						var catResourcesArray = [];
						_.each(location.get('resourceKeys'), function(resourceId){
							var resource = resources.get(resourceId);
							if(!resource) return;

							items++;
							allServiceItems++;
							if(resource.get('category')){
								if(!catResources[resource.get('category')]) catResources[resource.get('category')] = [];
								catResources[resource.get('category')].push(resource.id);
								if(!catResourcesArray.contains(resource.get('category'))) catResourcesArray.push(resource.get('category'));
							}
							else{
								return;
							}
						});
						catResourcesArray.sort(function(a, b){
							var keys = preferences.get('resourceCategoryKeys') ? preferences.get('resourceCategoryKeys') : [];
							if(!keys.contains(a)) return -1;
							return keys.indexOf(a) - keys.indexOf(b);
						});
						console.log(catResources);
					@>
					<@if(items){@>
					<h2><@=ptEscape(langjs['Choose a Resource'])@>:</h2>
					<@_.each(catResourcesArray, function(catId){
					var resourceIds = catResources[catId];
					resourceIds.sort(function(a, b){
						var keys = preferences.get('resourceKeys') ? preferences.get('resourceKeys') : [];
						if(!keys.contains(a)) return -1;
						return keys.indexOf(a) - keys.indexOf(b);
					});
					@>
					<div class="booking-list-box">
					<h3><@=resourceCats.get(catId) ? resourceCats.get(catId).get('categoryName') : 'Others'@></h3>
					<ul class="booking-list resource-list">
						<@_.each(resourceIds, function(resourceId){
						var resource = resources.get(resourceId);
						var duration = moment.utc(moment.duration(resource.get('duration')*60000).asMilliseconds());
						var childs = children.where({serviceKey: resourceId});

						if( resource.get('pricingType') != 'single' && childs.length){
						_.each(childs,function(child){
						var duration = moment.utc(moment.duration(child.get('duration')*60000).asMilliseconds());
						@>
						<li data-id="<@=resource.id@>_<@=child.id@>" class="<@=booking.resourceId == resource.id+'_'+child.id ? 'active' : ''@>">
							<div class="bl bl-left"><img class="img-responsive img-circle<@=!resource.get('displayImage') ? ' default-img' : ''@>" src="<@=resource.get('displayImage') ? resizeGoogleImage(resource.get('displayImage'), 50) : '/bookingPage/img/booking-services.png'@>"></div>
							<div class="bl bl-center">
								<div><@=resource.get('name')@> (<@=child.get('name')@>)<@=(resource.get('type') == 'room' ? ' - Room' : '')@></div>
								<div class="bl-meta-deta">
									<@if(showPrices){@>
									<span><@=TCC.currency(account.get('currency')).symbol@> <@=child.get('cost') != null ? child.get('cost').toFixed(2) : 0 @></span>
									<@}@>
									<@if(showDuration){@>
									<span><@=getDurationString(duration)@></span>
									<@}@>
									<span class="bl-meta-details">VIEW DETAILS</span>
								</div>
							</div>
							<div class="bl bl-right"><i class="icon-arrow-right"></i></div>
						</li>
						<@
						});
						} else{@>
						<li data-id="<@=resource.id@>" class="<@=booking.resourceId == resource.id ? 'active' : ''@>">
							<div class="bl bl-left"><img class="img-responsive img-circle<@=!resource.get('displayImage') ? ' default-img' : ''@>" src="<@=resource.get('displayImage') ? resizeGoogleImage(resource.get('displayImage'), 50) : '/bookingPage/img/booking-services.png'@>"></div>
							<div class="bl bl-center">
								<div><@=resource.get('name')@><@=(resource.get('type') == 'room' ? ' - Room' : '')@></div>
								<div class="bl-meta-deta">
									<@if(showPrices){@>
									<span><@=TCC.currency(account.get('currency')).symbol@> <@=resource.get('cost') != null ? resource.get('cost').toFixed(2) : 0 @></span>
									<@}@>
									<@if(showDuration){@>
									<span><@=getDurationString(duration)@></span>
									<@}@>
									<span class="bl-meta-details">VIEW DETAILS</span>
								</div>
							</div>
							<div class="bl bl-right"><i class="icon-arrow-right"></i></div>
						</li>
						<@}
						 });@>
					</ul>
					</div>
					<@});@>
					<@}@>
					<@}@>



					<@if(booking.tab == 'services' && preferences.get('autoSelectResource')){@>
					<@	var items = 0;
						var catResources = {};
						var catResourcesArray = [];
						_.each(location.get('resourceKeys'), function(resourceId){
							var resource = resources.get(resourceId);
							if(!resource) return;

							items++;
							allServiceItems++;
							if(resource.get('category')){
								if(!catResources[resource.get('category')]) catResources[resource.get('category')] = [];
								catResources[resource.get('category')].push(resource.id);
								if(!catResourcesArray.contains(resource.get('category'))) catResourcesArray.push(resource.get('category'));
							}
							else{
								return;
							}
						});
						catResourcesArray.sort(function(a, b){
							var keys = preferences.get('resourceCategoryKeys') ? preferences.get('resourceCategoryKeys') : [];
							if(!keys.contains(a)) return -1;
							return keys.indexOf(a) - keys.indexOf(b);
						});
						console.log(catResources);
					@>
					<@if(items){@>
					<h2><@=ptEscape(langjs['Choose a Resource'])@>:</h2>
					<div class="booking-list-box">
					<ul class="booking-list resource-cat-list">
					<@_.each(catResourcesArray, function(catId){
						var resourceIds = catResources[catId];
						resourceIds.sort(function(a, b){
							var keys = preferences.get('resourceKeys') ? preferences.get('resourceKeys') : [];
							if(!keys.contains(a)) return -1;
							return keys.indexOf(a) - keys.indexOf(b);
						});

						var resourceCategoryModel = resourceCats.get(catId);
						var durations = []; var costs = [];
						_.each(resourceIds, function(resourceId){
							var resource = resources.get(resourceId);
							var duration = moment.utc(moment.duration(resource.get('duration')*60000).asMilliseconds());
							var childs = children.where({serviceKey: resourceId});
							if(childs.length){
								_.each(childs,function(child){
								var duration = moment.utc(moment.duration(child.get('duration')*60000).asMilliseconds());
								durations.push(child.get('duration'));
								costs.push(child.get('cost') != null ? child.get('cost').toFixed(2) : 0 );
								});
							}
							else{
								durations.push(resource.get('duration'));
								costs.push(resource.get('cost') != null ? resource.get('cost').toFixed(2) : 0 );
							}
						});
						console.log(durations);
						console.log(costs);
						@>
						<li data-id="<@=resourceCategoryModel.id@>" class="<@=booking.resourceCatId == resourceCategoryModel.id ? 'active' : ''@>">
							<div class="bl bl-left"><img class="img-responsive img-circle default-img" src="/bookingPage/img/booking-services.png"></div>
							<div class="bl bl-center">
								<div><@=resourceCategoryModel.get('categoryName')@></div>
								<div class="bl-meta-deta">
									<@if(showPrices){
									var min = costs.min();
									var max = costs.max();
									var costString = min == max ? TCC.currency(account.get('currency')).symbol + ' ' + min : TCC.currency(account.get('currency')).symbol + ' ' + min + ' - ' + TCC.currency(account.get('currency')).symbol + ' ' + max;
									@>
									<span><@=costString@></span>
									<@}@>
									<@if(showDuration){
									var min = durations.min();
									var max = durations.max();
									var durationString = min == max ? getDurationString(moment.utc(moment.duration(min*60000).asMilliseconds())) : getDurationString(moment.utc(moment.duration(min*60000).asMilliseconds())) +' - '+ getDurationString(moment.utc(moment.duration(max*60000).asMilliseconds()));
									@>
									<span><@=durationString@></span>
									<@}@>
									<span class="bl-meta-details">VIEW DETAILS</span>
								</div>
							</div>
							<div class="bl bl-right"><i class="icon-arrow-right"></i></div>
						</li>
					<@});@>
					</ul>
					</div>
					<@}@>
					<@}@>



					<@if(booking.tab == 'services' && !allServiceItems){@>
					<div class="booking-none text-center margin-top"><@=ptEscape(langjs['BOOKINGS ARE NOT OPEN AT THE MOMENT'])@></div>
					<@}@>



					<@if(booking.tab == 'staff'){
					var staffList = [];
					_.each(location.get('staffKeys'), function(staffId){
						var staffKeys = [];
						if(booking.type == 'class'){
							staffKeys = booking.availableStaff
						} else if(booking.type == 'appointment') {
							staffKeys = services.get(booking.serviceId.split('_')[0]) ? services.get(booking.serviceId.split('_')[0]).get('staffKeys') :  [];
						}
						if(!staffKeys.contains(staffId)) return;
						var staff = team.get(staffId);
						if(!staff) return;
						items++;
						allServiceItems++;
						staffList.push(staff);
					});
					staffList.sort(function(a, b){
						if(booking.preferences.get('staffKeys') && booking.preferences.get('staffKeys').length)
						{
							var aIndex = booking.preferences.get('staffKeys').indexOf(a.id) != -1 ? booking.preferences.get('staffKeys').indexOf(a.id) : staffList.length;
							var bIndex = booking.preferences.get('staffKeys').indexOf(b.id) != -1 ? booking.preferences.get('staffKeys').indexOf(b.id) : staffList.length;
							return aIndex - bIndex;
						}
						else
						{
							return a.get('firstName') < b.get('firstName') ? -1 : (a.get('firstName') > b.get('firstName') ? 1: 0);
						}
					});
					if(staffList.length){@>
					<h2><@=ptEscape(langjs['Choose a Team Member'])@>:</h2>
					<div class="booking-list-box">
						<ul class="booking-list staff-list">
							<@_.each(staffList, function(staff){@>
							<li data-id="<@=staff.id@>" class="<@=booking.staffId == staff.id ? 'active' : ''@>">
								<div class="bl bl-left"><img class="img-responsive img-circle<@=!staff.get('displayImage') ? ' default-img' : ''@>" src="<@=staff.get('displayImage') ? resizeGoogleImage(staff.get('displayImage'), 50) : '/bookingPage/img/booking-staff.png'@>"></div>
								<div class="bl bl-center">
									<div><@=(staff.get('firstName') ? staff.get('firstName') : "")+" "+(staff.get('lastName') ? staff.get('lastName') : "")@></div>
									<@if(staff.get('designation')){@>
									<div class="bl-meta-deta">
										<span><@=staff.get('designation')@></span>
									</div>
									<@}@>
								</div>
								<div class="bl bl-right"><i class="icon-arrow-right"></i></div>
							</li>
							<@});@>
						</ul>
					</div>
					<@} else{@>
					<div class="booking-none"><@=ptEscape(langjs['SORRY! NO TEAM MEMBERS ARE AVAILABLE AT THE MOMENT'])@></div>
					<@}@>
					<@}@>




					<@if(booking.tab == 'sessions'){@>
					<@var classModel = classes.get(booking.classId);@>
					<@if(booking.classSlots.length){@>
					<@if(!preferences.get('hideBookingTimezone')){@>
					<div class="col-xs-12">
						<div class="row">
<!-- 								<div class="col-sm-6" style="margin: 0px auto 20px !important; float: none;"> -->
<!-- 								<div class="col-sm-offset-6 col-sm-6"> -->
							<div class="col-xs-12 col-sm-6 col-md-4" style="padding-left: 30px;margin-left: -15px;position: relative;">
								<i class="icon-navigation timezone-detect"></i>
								<div class="form-group">
			                        <select class="form-control selectpicker account-timezone" data-live-search="true" title="<@=!TCC.timezone_map_latest[currentTimezone] ? (timezoneValue ? timezoneValue : currentTimezone) : ''@>">
			                        	<@_.each(TCC.timezone_ids_latest,function(timezoneId)
			                        	{
			                        	var timezoneDisplayName = TCC.timezone_map_latest[timezoneId];
			                        	@>
			                        	<option data-icon="icon-overview" <@=timezoneId == currentTimezone ? 'selected ' : ''@>value="<@=timezoneId@>"> (<@=timezoneHoursMap[timezoneId]@>) <@=timezoneDisplayName@></option>
			                        	<@});@>
				                    </select>
			                    </div>
							</div>
						</div>
					</div>
					<@}@>
					<h2><@=ptEscape(langjs['Choose a Session you want to attend'])@>:</h2>
					<@
						var allSessionStaff = false;
						_.each(booking.classSlots, function(slot){
							if(booking.autoSelectStaff){
								var staffId = slot.split('_')[2];
								if(!team.get(staffId)) return;
							}
							allSessionStaff = true;
						});
						@>
						<@if(allSessionStaff){@>
						<div class="booking-list-box">
							<ul class="booking-list sessions-list">
								<@_.each(booking.classSlots, function(slot)
								{
									if(booking.autoSelectStaff){
										var staffId = slot.split('_')[2];
										if(!team.get(staffId)) return;
									}
									var cost = booking.classTotalAvailable[slot] && booking.classTotalAvailable[slot]["COST"] != null ? booking.classTotalAvailable[slot]["COST"] : 0;
									var duration = booking.classTotalAvailable[slot] && booking.classTotalAvailable[slot]["DURATION"] != null ? booking.classTotalAvailable[slot]["DURATION"] : 0;
									@>
									<li data-date="<@=slot@>" class="<@=slot == booking.sessionDate+'_'+booking.sessionId ? 'active' : ''@>">
										<div class="bl bl-left"><img class="img-responsive img-circle<@=!classModel.get('classImage') ? ' default-img' : ''@>" src="<@=classModel.get('classImage') ? resizeGoogleImage(classModel.get('classImage'), 50) : '/bookingPage/img/booking-class.png'@>"></div>
										<div class="bl bl-center" style="/* display: flex; */ justify-content: left;">
											<div class="bl-meta-deta" style="display: table;">
												<@if(booking.classFullSlots.contains(slot)){@>
													<@if(classModel && classModel.get('allowWaitlist')){@>
														<span class="<@=(booking.classTotalAvailable[slot]['IWA'] == 'true' ? 'slot-badge-wait' : 'slot-badge-full')@>" style="white-space :nowrap;"><@=(booking.classTotalAvailable[slot]["IWA"] == 'true' ? ((preferences.get('showSlots') == true ? booking.classTotalAvailable[slot]["WAIT"] : '') + 'Wait List - '+ptEscape(langjs['Available'])) : (ptEscape(langjs['Full'])))@></span>
													<@}else{@>
														<span class="slot-badge-full" style="white-space :nowrap;"><@=ptEscape(langjs['Full'])@></span>
													<@}@>
												<@}else{@>
													<span class="slot-badge-avail-<@=booking.classTotalAvailable[slot]['COLOR']@>" style="white-space :nowrap;"><@=(preferences.get('showSlots') == true ? booking.classTotalAvailable[slot]["CNF"] : '') + ptEscape(langjs['Available'])@></span>
												<@}@>
												<@if(showPrices){@>
													<span style="padding-left: 10px; margin-left: 10px;margin-right: 0px;display: table-cell;white-space :nowrap;"><@=TCC.currency(account.get('currency')).symbol@> <@=(+cost).toFixed(2)@></span>
												<@}if(showDuration){@>
													<span style="padding-left: 10px; margin-left: 10px;display: table-cell;white-space :nowrap;"><@=+duration >= 60 ? (parseInt(+duration/60, 10) > 1 ? parseInt(+duration/60, 10)+' hrs' : '1 hr')+'&nbsp;' : ''@><@=+duration%60 > 0 ? +duration%60+' mins' : ''@></span>
												<@}@>
											</div>
											<div style="margin-left: 10px;"><@=moment(toPTDate(slot.split('_')[0])).format('Do MMM YYYY, '+hourFormat)@> <span style="font-size: 14px;"><@=timezoneValue@></span></div>
											<@if(booking.autoSelectStaff){
											var staffId = slot.split('_')[2];
											@>
											<div class="bl-meta-deta"><span>- <@=(team.get(staffId).get('firstName') ? team.get(staffId).get('firstName') : "")+" "+(team.get(staffId).get('lastName') ? team.get(staffId).get('lastName') : "")@></span></div>
											<@}@>
										</div>
										<div class="bl bl-right"><i class="icon-arrow-right"></i></div>
									</li>
								<@});@>
							</ul>
						</div>
						<@} else{@>
						<div class="booking-none"><@=ptEscape(langjs['SORRY! NO TEAM MEMBERS ARE AVAILABLE AT THE MOMENT'])@></div>
						<@}@>
					<@} else{@>
					<div class="booking-none"><@=ptEscape(langjs['NO SESSIONS AVAILABLE FOR THIS MONTH'])@></div>
					<@}@>
					<@}@>



					<@if(booking.tab == 'date'){@>
					<h2 class="hide">Choose date & time:</h2>
					<div class="row margin-bottom">
						<div class="col-sm-6 hide">
							<div class="datepicker"></div>
						</div>
						<@if(!preferences.get('hideBookingTimezone')){@>
						<div class="col-xs-12" style="margin-bottom: 30px;">
							<div class="row">
<!-- 								<div class="col-sm-6" style="margin: 0px auto 20px !important; float: none;"> -->
<!-- 								<div class="col-sm-offset-6 col-sm-6"> -->
								<div class="col-xs-12 col-sm-6 col-md-4" style="padding-left: 30px;position: relative;height: 40px;">
									<i class="icon-navigation timezone-detect"></i>
									<div class="form-group">
				                        <select class="form-control selectpicker account-timezone" data-live-search="true" title="<@=!TCC.timezone_map_latest[currentTimezone] ? (timezoneValue ? timezoneValue : currentTimezone) : ''@>">
				                        	<@_.each(TCC.timezone_ids_latest,function(timezoneId)
				                        	{
				                        	var timezoneDisplayName = TCC.timezone_map_latest[timezoneId];
				                        	@>
				                        	<option data-icon="icon-overview" <@=timezoneId == currentTimezone ? 'selected ' : ''@>value="<@=timezoneId@>"> (<@=timezoneHoursMap[timezoneId]@>) <@=timezoneDisplayName@></option>
				                        	<@});@>
					                    </select>
				                    </div>
								</div>
							</div>
						</div>
						<@}@>
						<div class="col-sm-12">
							<div class="row timeslots">
								<@_.each(slots, function(slot){@>
								<div class="col-xs-6 col-sm-3">
									<button class="btn btn-default booking-page-timings-btn <@=booking.dateAndTime == slot ? 'select-block' : ''@>" startdate="<@=slot@>" title="<@=moment(toPTDate(slot)).format('MMM Do YYYY, '+hourFormat)@> <@=timezoneValue@> (Available)"><@=moment(toPTDate(slot)).format(hourFormat)@></button>
								</div>
								<@});@>
								<@if(!slots.length){@>
								<div class="col-xs-12"><span class="no-slots"><@=ptEscape(langjs['No time slots are available for this date. Please select another date above to check availability'])@>.</span></div>
								<@}@>
								<@if(false){@>
						        <div class="col-xs-4">
									<h3 class="booking-page-timings-title">Morning</h3>
									<@
									var morning = 0;
									var noon = 0;
									var evening = 0;
									@>
									<@_.each(slots, function(slot){
									if( +(slot+"").substring(8,10) >= 12 ) return;
									morning++;
									@>
								 	<button class="btn btn-default booking-page-timings-btn <@=booking.dateAndTime == slot ? 'select-block' : ''@>" startdate="<@=slot@>" title="<@=moment(toPTDate(slot)).format('Do MMM YYYY, '+hourFormat)@> <@=timezoneValue@> (Available)"><@=moment(toPTDate(slot)).format(hourFormat)@></button>
									<@});@>
									<@if(!morning){@>
									<span class="no-slots">NO SLOTS</span>
									<@}@>
								</div>
								<div class="col-sm-4 col-xs-4 booking-page-timings-block">
							 		<h3 class="booking-page-timings-title">Afternoon</h3>
								 	<@_.each(slots, function(slot){
									if( +(slot+"").substring(8,10) < 12 || +(slot+"").substring(8,10) >= 17 ) return;
									noon++;
									@>
								 	<button class="btn btn-default booking-page-timings-btn <@=booking.dateAndTime == slot ? 'select-block' : ''@>" startdate="<@=slot@>" title="<@=moment(toPTDate(slot)).format('Do MMM YYYY, '+hourFormat)@> <@=timezoneValue@> (Available)"><@=moment(toPTDate(slot)).format(hourFormat)@></button>
									<@});@>
									<@if(!noon){@>
									<span class="no-slots">NO SLOTS</span>
									<@}@>
						 		</div>
						 		<div class="col-sm-4 col-xs-4 booking-page-timings-block">
							 		<h3 class="booking-page-timings-title">Evening</h3>
								 	<@_.each(slots, function(slot){
									if( +(slot+"").substring(8,10) < 17 ) return;
									evening++;
									@>
								 	<button class="btn btn-default booking-page-timings-btn <@=booking.dateAndTime == slot ? 'select-block' : ''@>" startdate="<@=slot@>" title="<@=moment(toPTDate(slot)).format('Do MMM YYYY, '+hourFormat)@> <@=timezoneValue@> (Available)"><@=moment(toPTDate(slot)).format(hourFormat)@></button>
									<@});@>
									<@if(!evening){@>
									<span class="no-slots">NO SLOTS</span>
									<@}@>
								</div>
								<@}@>
							</div>
						</div>
					</div>
					<@}@>

					<@if(booking.tab == 'info'){@>
					<h2><@=ptEscape(langjs['Enter your Information'])@>:</h2>
					<div class="information-box col-sm-8 row margin-bottom ">
					<form autocomplete="off">
							<@
							var allCustFieldsArray = [];
							if(allFields && allFields.length) allCustFieldsArray.push(allFields);
							if(allOtherFields && allOtherFields.length) allCustFieldsArray.push(allOtherFields);
							allCustFieldsArray = _.flatten(allCustFieldsArray);
							var custFieldsOrder = custFieldsOrder && custFieldsOrder.length ? custFieldsOrder : ['firstName', 'lastName', 'email', 'mobileNumber', 'alternativeMobileNumber', 'address', 'birthday', 'comments'];
							allCustFieldsArray.sort(function(a, b) {
							  var positionA = custFieldsOrder.indexOf(a) == -1 ? allCustFieldsArray.length : custFieldsOrder.indexOf(a);
							  var positionB = custFieldsOrder.indexOf(b) == -1 ? allCustFieldsArray.length : custFieldsOrder.indexOf(b);
							  if (positionA < positionB) {
							    return -1;
							  }
							  if (positionA > positionB) {
							    return 1;
							  }
							  return 0;
							});

							var isFirstLastNameConsecutive = false;
							for (i = 1; i < allCustFieldsArray.length; i++) {
							    if (allCustFieldsArray[i - 1] === 'firstName' && allCustFieldsArray[i] === 'lastName') {
							        isFirstLastNameConsecutive = true;
							    }
							}
							@>

							<@ if(booking.type == 'resource' && booking.resources && booking.resources.get(booking.resourceId.split('_')[0]) && booking.resources.get(booking.resourceId.split('_')[0]).get('type') == 'room'){@>
								<div class="row">
									<div class="form-group col-sm-12">
				                        <label class="pt-label"><@=ptEscape(langjs['Meeting Name'])@><span class="req_field">*</span></label>
				                        <input autocomplete="off" class="form-control meetingname" type="text" value="">
				                    </div>
								</div>
							<@}@>

							<@

							_.each(allCustFieldsArray, function(currentField){

							@>
								<@if(isFirstLastNameConsecutive && currentField == 'firstName'){@>
								<div class="row">
									<div class="form-group col-sm-6">
				                        <label class="pt-label"><@=ptEscape(langjs['First Name'])@><span class="req_field">*</span></label>
				                        <input autocomplete="off" class="form-control firstname" type="text" value="<@=user && user.firstName ? user.firstName : ''@>">
				                    </div>
									<div class="form-group col-sm-6">
				                        <label class="pt-label"><@=ptEscape(langjs['Last Name'])@><@=reqFields.contains('lastName') ? '<span class="req_field">*</span>' : ''@></label>
				                        <input autocomplete="off" class="form-control lastname" type="text" value="<@=user && user.lastName ? user.lastName : ''@>">
				                    </div>
								</div>
								<@}else if(!isFirstLastNameConsecutive && currentField == 'firstName'){@>
								<div class="form-group">
			                        <label class="pt-label"><@=ptEscape(langjs['First Name'])@><span class="req_field">*</span></label>
			                        <input autocomplete="off" class="form-control firstname" type="text" value="<@=user && user.firstName ? user.firstName : ''@>">
			                    </div>
								<@}else if(!isFirstLastNameConsecutive && currentField == 'lastName'){@>
								<div class="form-group">
			                        <label class="pt-label"><@=ptEscape(langjs['Last Name'])@><@=reqFields.contains('lastName') ? '<span class="req_field">*</span>' : ''@></label>
			                        <input autocomplete="off" class="form-control lastname" type="text" value="<@=user && user.lastName ? user.lastName : ''@>">
			                    </div>
								<@}@>
								<@if(currentField == 'email'){@>
								<div class="form-group">
			                        <label class="pt-label"><@=ptEscape(langjs['Email Id'])@><@=reqFields.contains('email') ? '<span class="req_field">*</span>' : ''@></label>
			                        <input autocomplete="off" class="form-control custemail" type="text" value="<@=user && user.email ? user.email : ''@>">
			                    </div>
			                    <@}@>

			                    <@if(currentField == 'mobileNumber'){@>
			                    <div class="form-group">
			                        <label class="pt-label"><@=ptEscape(langjs['Mobile Number'])@><@=reqFields.contains('mobileNumber') ? '<span class="req_field">*</span>' : ''@></label>
	<!-- 			                    <div class="phonenumber-group"> -->
				                    	<input autocomplete="off" class="form-control custmobile mobilenumber" type="text" value="<@=user && user.phoneNumber ? '+'+user.phoneNumber.replace('+','')  : ''@>">
	<!-- 			                   		<input autocomplete="off" class="form-control custmobile-extension" placeholder="Extension" type="text" value="<@=user.phoneNumberExt ? user.phoneNumberExt  : ''@>"> -->
	<!-- 			                   	</div> -->
			                   	</div>
			                    <@}@>

			                    <@if(currentField == 'alternativeMobileNumber'){@>
			                    <div class="form-group">
			                        <label class="pt-label"><@=ptEscape(langjs['Alternative Number'])@><@=reqFields.contains('alternativeMobileNumber') ? '<span class="req_field">*</span>' : ''@></label>
			                       	<div class="phonenumber-group">
			                        	<input autocomplete="off" class="form-control custalternative" type="text" value="<@=user && user.alternativeNumber ? '+'+user.alternativeNumber.replace('+','')  : ''@>">
			                   			<input autocomplete="off" class="form-control custaltmobile-extension" placeholder="Extension" type="text" value="<@=user.altNumberExt ? user.altNumberExt  : ''@>">
			                   		</div>
			                   	</div>
			                    <@}@>
								<@if(currentField == 'birthday'){@>
			                    <div class="form-group">
			                        <label class="pt-label"><@=ptEscape(langjs['Birthday'])@><@=reqFields.contains('birthday') ? '<span class="req_field">*</span>' : ''@></label>
			                        <div class="cust-edit-birthday-holder margin-bottom clearfix">
			                        	<div class="col-xs-4 btn-group">
					                     	<select class="form-control selectpicker custmonth bdselect" title="<@=ptEscape(langjs['MONTH'])@>">
					                            <@
					                            var birthmonth, birthday;
					                            if(user.birthMonthAndDate)
												{
													birthmonth = user.birthMonthAndDate.split('-')[0];
													birthday   = user.birthMonthAndDate.split('-')[1];
												}
												var monthsInDiffLanguage = moment.months();
												for(var i=0; i< Months.length; i++){@>
												<option value="<@=Months[i]@>" <@= birthmonth  == Months[i] ? 'selected="selected"' : ''@> ><@=monthsInDiffLanguage[i]@></option>
											   	<@}@>
					                        </select>
					                     </div>
					                     <div class="col-xs-4 btn-group" style="margin-left: -1px;">
					                     	<@
											  	var Days = [];
						                         if(!birthmonth || birthmonth == 'month')
						                         {
						                           	Days.length = 31;
						                         }
												 else if(birthmonth == 'February' && (user.birthYear && user.birthYear%4 == 0))
											  	{
											  		Days.length = 29 ;
											  	}
											 	else if(birthmonth == 'January' || birthmonth == 'March' || birthmonth == 'May' || birthmonth =='July' || birthmonth == 'August' || birthmonth == 'October' || birthmonth == 'December')
											  	{
											  	 	Days.length =31 ;
											  	}
											  	else if(birthmonth == 'April' || birthmonth == 'June' || birthmonth == 'September' || birthmonth == 'November')
											  	{
											  		Days.length = 30 ;
											  	}
											 	 else
											  	{
											 		 Days.length = 28;
											  	}
											@>
					                     	<select class="form-control selectpicker custdate bdselect" title="<@=ptEscape(langjs['Date'].toUpperCase())@>">
												<@for(var i=1; i <= Days.length; i++){@>
												<option value="<@=i@>" <@=birthday == i ? 'selected="selected"' : ''@>  ><@=i@></option>
												<@}@>
					                        </select>
					                     </div>
					                     <div class="col-xs-4 btn-group cust-year-drop <@=user.birthYear ? '' : 'hide'@>" style="margin-left: -1px;">
					                     	<select class="form-control selectpicker custyear bdselect" title="<@=ptEscape(langjs['YEAR'])@>">
					                            	<@for(var i= +DateFormater(new Date(),"%y") ; i >= 1900; i--){@>
						                   	  	<option  value="<@=i@>" <@=user.birthYear == i ? 'selected="selected"' : ''@> ><@=i@></option>
									            <@}@>
					                        </select>
					                     </div>
					                     <div class="col-xs-4">
					                     	<a href="javascript:void(0);" class="show-set-year <@=user.birthYear ? 'hide' : ''@>"><@=ptEscape(langjs['SET YEAR'])@></a>
					                     </div>
			                        </div>
			                    </div>
			                    <@}@>
								<@if(currentField == 'address'){@>
								<div class="form-group">
			                        <label class="pt-label"><@=ptEscape(langjs['Address'])@><@=reqFields.contains('address') ? '<span class="req_field">*</span>' : ''@></label>
			                        <input autocomplete="off" class="form-control custaddress" type="text" value="<@=user && user.address ? user.address : ''@>">
			                    </div>
								<div class="form-group">
			                        <label class="pt-label"><@=ptEscape(langjs['City'])@><@=reqFields.contains('address') ? '<span class="req_field">*</span>' : ''@></label>
			                        <input autocomplete="off" class="form-control custcity" type="text" value="<@=user && user.city ? user.city : ''@>">
			                    </div>
			                    <div class="row">
									<div class="form-group col-sm-6">
				                        <label class="pt-label"><@=ptEscape(langjs['State'])@><@=reqFields.contains('address') ? '<span class="req_field">*</span>' : ''@></label>
				                        <input autocomplete="off" class="form-control custstate" type="text" value="<@=user && user.state ? user.state : ''@>">
				                    </div>
									<div class="form-group col-sm-6">
				                        <label class="pt-label"><@=ptEscape(langjs['Pincode / Zipcode'])@><@=reqFields.contains('address') ? '<span class="req_field">*</span>' : ''@></label>
				                        <input autocomplete="off" class="form-control custzip" type="text" value="<@=user && user.zip ? user.zip : ''@>">
				                    </div>
			                    </div>
			                    <@}@>


			                    <@_.each(otherFieldsMap, function(key, value){@>
			                    <@if(currentField == value){@>
			                    <div class="form-group">
			                        <label class="pt-label"><@=ptEscape(value.replaceAll('ptSPCpt',' '))@><@=reqFields.contains(value) ? '<span class="req_field">*</span>' : ''@></label>
			                        <input autocomplete="off" class="form-control other_<@=key@>" data-key="<@=key@>" type="text" value="<@=user && user.otherFields ? user.otherFields[value] : ''@>">
			                    </div>
			                    <@}@>
			                    <@});@>

		                    <@});@>



		                    <@var allApptFieldsArray = [];
							if(allApptOtherFields && allApptOtherFields.length) allApptFieldsArray.push(allApptOtherFields);
							allApptFieldsArray = _.flatten(allApptFieldsArray);
							var allDuplicateApptFieldsArray = _.flatten(allApptFieldsArray);
							var apptFieldsOrder = apptFieldsOrder && apptFieldsOrder.length ? apptFieldsOrder : [];
							allApptFieldsArray.sort(function(a, b) {
							  var positionA = apptFieldsOrder.indexOf(a) == -1 ? allApptFieldsArray.length : apptFieldsOrder.indexOf(a);
							  var positionB = apptFieldsOrder.indexOf(b) == -1 ? allApptFieldsArray.length : apptFieldsOrder.indexOf(b);
							  if (positionA < positionB) {
							    return -1;
							  }
							  if (positionA > positionB) {
							    return 1;
							  }
							  return 0;
							});

							var filteredArray = apptFieldsOrder.filter(function(n) {
							    return allDuplicateApptFieldsArray.indexOf(ptEscape(n)) !== -1 && allDuplicateApptFieldsArray.remove(ptEscape(n));
							});

							_.each(filteredArray, function(currentField){@>
			                    <@_.each(apptOtherFieldsMap, function(key, value){@>
			                    <@if(ptEscape(currentField) == value){@>
			                    <div class="form-group">
			                        <label class="pt-label"><@=ptEscape(value.replaceAll('ptSPCpt',' '))@><@=apptReqFields.contains(value) ? '<span class="req_field">*</span>' : ''@></label>
			                        <input autocomplete="off" class="form-control apptOther_<@=key@>" data-key="<@=key@>" type="text" value="">
			                    </div>
			                    <@}@>
			                    <@});@>
		                    <@});@>



		                    <@if(allCustFieldsArray.contains('comments')){@>
							<div class="form-group">
		                        <label class="pt-label"><@=ptEscape(langjs['Booking Notes'])@></label>
		                        <textarea class="form-control bookingcomments" rows="3" ><@=user && user.bookingNotes ? user.bookingNotes : ''@></textarea>
		                    </div>
		                    <@}@>

		                    <@if(!_.isEmpty(coupons.models)){@>

							<div class="form-group">
								<div class="showCoupon" style="padding: 5px;border: 1px dashed #c7c7c7;border-radius: 5px;cursor: pointer;">
									<i class="icon-coupon-applied-obp" style="font-size: 20px;color: #674cab;"></i>
									<span style="padding-left: 5px;cursor: pointer;">View Coupons &amp; Offers</span>
								</div>
							</div>

							<div class="form-group">
								<div class="showAppliedCoupon hide" style="padding: 5px;border: 1px dashed #c7c7c7;border-radius: 5px;">
									<i class="icon-web-advertising booking-coupon-offers"></i>
									<span style="padding-left: 5px;color: #34a853;font-weight: 600;" class="applied-coupon"></span>
									<span style="padding-left: 10px;font-size: 10px;font-weight: 600;" class="offer-price"></span>
									<span style="padding-left: 5px;color: red;font-weight: 600;cursor: pointer;float: right;" class="remove-offer">Remove</span>
								</div>
							</div>

							<@}@>

		                    <@if(preferences.get("termsLink") && preferences.get("termsLink") != ''){
		                    	var termsLink = "http://"+preferences.get("termsLink").replace("http://", "").replace("https://", "");
		                    @>
		                    <div class="checkbox-holder checkbox-holder-lg margin-bottom">
		                    	<input id="terms-link" class="checkbox-custom terms-link" type="checkbox" <@=( preferences.get('termsLink') && preferences.get('checkTcOnLoad')) ? 'checked="checked"' : ''@> <@= (preferences.get('termsLink')) ? '' : 'enabled="enabled"'@>/ >
								<label for="terms-link" class="checkbox-custom-label">I confirm that I have read, understand and agree to the <a style="color: #674CAB;" href='<@=termsLink@>' target="_blank">Terms and Conditions</a>.</label>
						    	<!-- <div class="clearfix" >I confirm that I have read, understand and agree to the <a style="color: #674CAB;" href='<@=termsLink@>' target="_blank">Terms and Conditions</a>.</div> -->
						    </div>
		                    <@}
		                    if((alerts.customerAlerts.contains('remMessage')) ||
		                    ((booking.type == 'appointment' && (alerts.smsAlerts.contains("booked") || alerts.smsAlerts.contains("edited") || alerts.smsAlerts.contains("cancelled"))) ||
		                    (booking.type == 'class' && (alerts.smsAlerts.contains("classBooked") || alerts.smsAlerts.contains("classEdited") || alerts.smsAlerts.contains("classCancelled") || alerts.smsAlerts.contains("classWait") || alerts.smsAlerts.contains("classWaitEdited") || alerts.smsAlerts.contains("classWaitCancel"))) ||
		                    (booking.type == 'resource' && (alerts.smsAlerts.contains("resBooked") || alerts.smsAlerts.contains("resEdited") || alerts.smsAlerts.contains("resCancelled"))))){@>
		                    <div class="checkbox-holder checkbox-holder-lg margin-bottom">
			                    <input id="send-sms" class="checkbox-custom send-sms" type="checkbox" checked>
								<label for="send-sms" class="checkbox-custom-label"><@=ptEscape(langjs['Enable SMS notifications for this booking'])@></label>
		                    </div>
		                    <@}
		                    if(preferences.get("captcha")){@>
							<style>#g-captcha > div{margin: auto;}</style>
<!-- 		                    <div id="g-captcha" class="g-recaptcha" data-sitekey="<@=cap_site@>"></div> -->
								<div id="g-captcha"></div>
		                    <@}@>

		                    <div class="margin-top text-center">
		                    	<@
		                      if(!preferences.get("termsLink"))
		                    	{
			                    	  if(booking.isPaymentRequired)
			                    	  {
			                    	   	@>
			                    	   		<button  class="btn btn-primary margin-bottom booknow bookingpaymentbtn"><@=ptEscape(langjs['Proceed to Payment'])@><i class="icon-arrow-right"></i></button>

			                    		 		<@if(booking.showPayLater){@>
													<hr class="hr-text bookingpaymentbtnor" data-content="OR">
													<button class="btn btn-default margin-bottom pay-later bookingpaymentbtn" style="padding: 15px 30px;margin-top: 10px;font-size: 16px;margin-right: 28px;"><@=ptEscape(langjs['Skip Payment'])@></button>
												<@}@>
			                    	  	<@
			                    	  }
			                    	  else
			                    	  {
			                    	  	@>
			                    	  		<button class="btn btn-primary margin-bottom booknow"><i class="icon-check-mark"></i><@=ptEscape(langjs['Book Appointment'])@></button>
			                    	  	<@
			                    	  }

		                    	}
		                    	else if(booking.isPaymentRequired)
		                    	{
		                    		 if(!preferences.get("checkTcOnLoad"))
		                    		 {
		                    		 	@>
		                    		 		<button  disabled class="btn btn-primary margin-bottom booknow bookingpaymentbtn"><@=ptEscape(langjs['Proceed to Payment'])@><i class="icon-arrow-right"></i></button>

		                    		 		<@if(booking.showPayLater){@>
												<hr class="hr-text bookingpaymentbtnor" data-content="OR">
												<button disabled class="btn btn-default margin-bottom pay-later bookingpaymentbtn" style="padding: 15px 30px;margin-top: 10px;font-size: 16px;margin-right: 28px;"><@=ptEscape(langjs['Skip Payment'])@></button>
											<@}@>
		                    		 	<@
		                    		 }
		                    		 else
		                    		 {
		                    		 	@>
		                    		 		<button  class="btn btn-primary margin-bottom booknow bookingpaymentbtn"><@=ptEscape(langjs['Proceed to Payment'])@><i class="icon-arrow-right"></i></button>

		                    		 		<@if(booking.showPayLater){@>
												<hr class="hr-text bookingpaymentbtnor" data-content="OR">
												<button class="btn btn-default margin-bottom pay-later bookingpaymentbtn" style="padding: 15px 30px;margin-top: 10px;font-size: 16px;margin-right: 28px;"><@=ptEscape(langjs['Skip Payment'])@></button>
											<@}@>
		                    		 	<@
		                    		 }
		                    	}
		                    	else
		                    	{
		                    		 if(!preferences.get("checkTcOnLoad"))
		                    		 {
		                    		 	@>
			                    			<button disabled class="btn btn-primary margin-bottom booknow"><i class="icon-check-mark"></i><@=ptEscape(langjs['Book Appointment'])@></button>
			                    		<@
		                    		 }
		                    		 else
		                    		 {
		                    		 	@>
			                    			<button class="btn btn-primary margin-bottom booknow"><i class="icon-check-mark"></i><@=ptEscape(langjs['Book Appointment'])@></button>
			                    		<@
		                    		 }
		                    	}
		                    	@>
							</div>
						</form>
					</div>
					<@}@>

					<@if(booking.tab == 'payment'){@>
					<div class="row">
						<div class="col-xs-12" style="float: none;">
							<iframe id="paymentframe" src="<@=paymentLink@>" width="100%" frameborder="0" style="min-height: 400px;"></iframe>
						</div>
					</div>
					<@}@>


					<@if(booking.tab == 'confirmation' || booking.tab == 'waiting' || booking.tab == 'pending'){@>
					<div class="row">
						<div class="col-sm-8" style="margin: auto;float: none;">
							<div class="margin-bottom">
								<div class="booking-confirm-head">

									<@if(booking.tab == 'waiting'){@>
										<i class="icon-completed"></i>
										<h2><@=ptEscape(langjs['Your booking has been added to waitlist'])@>.</h2>
										<@if(booking.bookingEmailConfirmation == true){@>
											<@if(user.email){@>
											<h3><@=ptEscape(langjs['You will be receiving a mail once your booking has been confirmed'])@>.</h3>
											<@}@>
										<@}@>
									<@}else if(booking.tab == 'pending'){@>
										<i class="icon-pending" style="color: orange;font-size: 80px;"></i>
										<h2><@=ptEscape(langjs['Your booking is waiting for confirmation'])@>.</h2>
										<@if(booking.bookingEmailConfirmation == true &&
										((booking.type == 'appointment' && alerts.customerAlerts.contains("booked")) ||
										(booking.type == 'class' && alerts.customerAlerts.contains("classBooked")) ||
										(booking.type == 'resource' && alerts.customerAlerts.contains("resBooked")))){@>
											<@if(user.email){@>
											<h3><@=ptEscape(langjs['You will be receiving a confirmation mail once your booking has been approved'])@>.</h3>
											<@}@>
										<@}@>
									<@}else{@>
										<i class="icon-completed"></i>
										<h2><@=ptEscape(langjs['Your booking has been confirmed'])@>.</h2>
										<@if(booking.bookingEmailConfirmation == true){@>
											<@if(user.email){@>
												<h3><@=ptEscape(langjs['An email has been sent to '])@>  <@=user.email@></h3>
											<@}@>
										<@}@>
									<@}@>

								</div>
								<div class="booking-confirm clearfix">

									<@if(booking.type == 'appointment'){
										var serviceName = '';
										if(booking.serviceId.contains('_')) {
											serviceName = services.get(booking.serviceId.split('_')[0]).get('serviceName');
											serviceName += ' ('+children.get(booking.serviceId.split('_')[1]).get('name')+')';
										}
										else serviceName = services.get(booking.serviceId).get('serviceName');
									@>
									<div class="clearfix">
										<div class="col-sm-3"><@=ptEscape(langjs['Service'])@></div>
										<div class="col-sm-9"><@=serviceName@></div>
									</div>
									<@}@>

									<@if(booking.type == 'resource'){
										var serviceName = '';
										if(booking.resourceId.contains('_')) {
											serviceName = resources.get(booking.resourceId.split('_')[0]).get('name');
											serviceName += ' ('+children.get(booking.resourceId.split('_')[1]).get('name')+')';
											serviceName += ' - '+toTitleCase(resources.get(booking.resourceId.split('_')[0]).get('type'));
										}
										else
										{
											serviceName = resources.get(booking.resourceId).get('name');
											serviceName += (' - '+toTitleCase(resources.get(booking.resourceId).get('type')));
										}
									@>
									<div class="clearfix">
										<div class="col-sm-3"><@=ptEscape(langjs['Resource'])@></div>
										<div class="col-sm-9"><@=serviceName@></div>
									</div>
									<@}@>

									<@if(booking.type == 'class'){
										var serviceName = classes.get(booking.classId).get('className');
									@>
									<div class="clearfix">
										<div class="col-sm-3"><@=ptEscape(langjs['Class'])@></div>
										<div class="col-sm-9"><@=serviceName@></div>
									</div>
									<@}@>

									<@if(booking.type == 'appointment' || booking.type == 'class'){@>
									<div class="clearfix">
										<div class="col-sm-3"><@=ptEscape(langjs['Team Member'])@></div>
										<div class="col-sm-9"><@=(team.get(booking.staffId).get('firstName') ? team.get(booking.staffId).get('firstName') : "")+" "+(team.get(booking.staffId).get('lastName') ? team.get(booking.staffId).get('lastName') : "")@></div>
									</div>
									<@}@>

									<@if(booking.type == 'appointment' || booking.type == 'resource'){@>
									<div class="clearfix">
										<div class="col-sm-3"><@=ptEscape(langjs['Date & Time'])@></div>
										<div class="col-sm-9"><@=moment(toPTDate(booking.dateAndTime)).format('MMM Do YYYY, '+hourFormat)@> <@=timezoneValue@></div>
									</div>
									<@}@>

									<@if(booking.type == 'class'){@>
									<div class="clearfix">
										<div class="col-sm-3"><@=ptEscape(langjs['Date & Time'])@></div>
										<div class="col-sm-9"><@=moment(toPTDate(booking.sessionDate)).format('MMM Do YYYY, '+hourFormat)@> <@=timezoneValue@></div>
									</div>
									<@}@>

									<div class="clearfix">
										<div class="col-sm-3"><@=ptEscape(langjs['Client'])@></div>
										<div class="col-sm-9" style="line-height: 22px;margin-top: 5px;">
											<@=user.firstName@> <@=user.lastName@><br/>
											<@if(user.phoneNumber){@>
											<@=formatPhoneNumber('+'+user.phoneNumber.replace('+',''))@><br/>
											<@}@>
											<@if(user.email){@>
											<@=user.email@><br/>
											<@}@>
										</div>
									</div>
									<@if(booking.tab != 'waiting'){@>
									<@if(booking.zoomURL){@>
									<div class="clearfix" style="margin: 10px 0px;">
										<div class="col-sm-3" style="line-height: 20px;">Zoom URL</div>
										<div class="col-sm-9" style="word-break: break-all;line-height: 20px;">
											<a target="_blank" href="<@=booking.zoomURL@>"><@=booking.zoomURL@></a>
										</div>
									</div>
										<@if(booking.zoomPassword){@>
										<div class="clearfix" style="margin: 10px 0px;">
											<div class="col-sm-3" style="line-height: 20px;">Meeting Password</div>
											<div class="col-sm-9" style="word-break: break-all;line-height: 20px;">
												<@=booking.zoomPassword@>
											</div>
										</div>
										<@}@>
									<@}@>
									<@if(booking.gotomeetingURL){@>
									<div class="clearfix" style="margin: 10px 0px;">
										<div class="col-sm-3" style="line-height: 20px;">GoToMeeting URL</div>
										<div class="col-sm-9" style="word-break: break-all;line-height: 20px;">
											<a target="_blank" href="<@=booking.gotomeetingURL@>"><@=booking.gotomeetingURL@></a>
										</div>
									</div>
									<@}@>
									<@if(booking.jitsiURL){@>
									<div class="clearfix" style="margin: 10px 0px;">
										<div class="col-sm-3" style="line-height: 20px;">Jitsi URL</div>
										<div class="col-sm-9" style="word-break: break-all;line-height: 20px;">
											<a target="_blank" href="<@=booking.jitsiURL@>"><@=booking.jitsiURL@></a>
										</div>
									</div>
									<@}@>
									<@if(booking.hangoutURL){@>
									<div class="clearfix" style="margin: 10px 0px;">
										<div class="col-sm-3" style="line-height: 20px;">Google Meet URL</div>
										<div class="col-sm-9" style="word-break: break-all;line-height: 20px;">
											<a target="_blank" href="<@=booking.hangoutURL@>"><@=booking.hangoutURL@></a>
										</div>
									</div>
									<@}@>
									<@if(booking.hangoutPhone){@>
									<div class="clearfix" style="margin: 10px 0px;">
										<div class="col-sm-3" style="line-height: 20px;">Google Meet Phone</div>
										<div class="col-sm-9" style="word-break: break-all;line-height: 20px;">
											<a target="_blank" href="tel:<@=booking.hangoutPhone@><@=booking.phoneNumberPin ? ','+booking.phoneNumberPin : ''@>"><@=booking.hangoutPhone@> Pin: <@=booking.phoneNumberPin@></a>
										</div>
									</div>
									<@}@>
									<@if(booking.outlookURL){@>
									<div class="clearfix" style="margin: 10px 0px;">
										<div class="col-sm-3" style="line-height: 20px;">Skype/Teams URL</div>
										<div class="col-sm-9" style="word-break: break-all;line-height: 20px;">
											<a target="_blank" href="<@=booking.outlookURL@>"><@=booking.outlookURL@></a>
										</div>
									</div>
									<@}@>
									<@}@>
								</div>
								<div class="margin-top text-center">
									<div class="book-redirect-container"></div>
									<button type="button" class="btn btn-primary margin-bottom bookanother" style="margin-right: 30px;"><@=ptEscape(langjs['Book Again'])@></button>
									<@if(preferences.get('confirmCustomButtonName') && preferences.get('confirmCustomButtonLink')){@>
									<a type="button" class="btn btn-success bookcustombtn margin-bottom" href="<@=!preferences.get('confirmCustomButtonLink').contains('http://') && !preferences.get('confirmCustomButtonLink').contains('https://') ? 'http://'+preferences.get('confirmCustomButtonLink') : preferences.get('confirmCustomButtonLink')@>" target="_blank"> <@=ptEscape(preferences.get('confirmCustomButtonName'))@></a>
									<@}@>
								</div>
							</div>
						</div>
					</div>
					<@}@>


				</div>

		<@}@>










		<div class="modal fade" id="booking-login" role="dialog">
		    <div class="modal-dialog">
		      <!-- Modal content-->
		      <div class="modal-content">
		        <div class="modal-header" style="background: #674CAB;">
		          <button type="button" class="close" style="color: #fff;margin-top: -11px;" data-dismiss="modal">&times;</button>
		          <div class="logo" style="text-align: center;padding: 0px;">
					<a href="/"><img class="brand-logo" src="/images/picktime-logo-leftnav-footer.png" height="50"></a>
				  </div>
		        </div>
		        <div class="modal-body booking-login-body">
			    	<div class="form">
			            <div class="panel with-nav-tabs panel-default bookingPage-loginPage" style="border: none;">
			                <div class="panel-heading loginPage-heading" style="border-bottom: none;">
		                        <ul class="nav nav-tabs bookingPage-loginPage-tabs">
		                            <li class="active"><a href="#login-tab" class="login-navtab-btn bookingPage-login" data-toggle="tab"><@=ptEscape(langjs['Login'].toUpperCase())@></a></li>
		                            <li><a href="#register-tab" class="login-navtab-btn" data-toggle="tab"><@=ptEscape(langjs['Register'].toUpperCase())@></a></li>
		                        </ul>
			                </div>
			                <div class="panel-body bookingPage-loginPage-body">
			                    <div class="tab-content">
			                        <div class="tab-pane fade in active" id="login-tab">
		                        		<div class="main-login-form">
		                        			<div class="form-group">
						                        <label class="pt-label"><@=ptEscape(langjs['Email'])@></label>
						                        <input class="form-control bookingPage-loginPage-input booking-login-userName m-t-25" type="text"  autocomplete="off" value=""  placeholder="<@=ptEscape(langjs['Email'])@>" required="required">
						                    </div>
		                        			<div class="form-group" style="position: relative">
						                        <label class="pt-label"><@=ptEscape(langjs['Password'])@></label>
						                        <input class="form-control  bookingPage-loginPage-input booking-loign-password m-t-25" type="password" style="padding-right: 40px;" placeholder="<@=ptEscape(langjs['Password'])@>" autocomplete="off" required="required">
						                    	 <i id="eye-login" class="icon-private field-icon showpasswords hide" style="bottom: 8px;"></i>
						                    </div>
						                    <input class="form-control loginPage-input m-t-25" type="hidden" id="lg_cap" name="lg_cap">
				                        	<style>#g-captcha {margin-top: -10px;}</style>
											<div id="g-captcha-login"></div>
				                        	<button type="submit" class="margin-top btn btn-primary btn-block login-btn signin-btn m-t-25" style="padding: 10px;font-size: 16px;"><@=ptEscape(langjs['Login'])@></button>
				                        </div>
			                        	<div class="forgot-password m-t-25 margin-top">
			                        		<a class="forgot-password-link" href="/forgotPassword" target="_blank"><@=ptEscape(langjs['Forgotten your password?'])@></a>
			                        	</div>
											<hr class="hr-text" data-content="OR">
				                        	<div class="login-btn-block clearfix">
					                        	<div class="facebook-connect pull-left" style="cursor: pointer;width: 45%;">
					                        		<img src="/img/login/fb-signin-button.png" class="img-responsive">
					                        	</div>
					                        	<div class="google-connect pull-right" style="cursor: pointer;width: 45%;">
					                        		<img src="/img/login/google-signin-button.png" class="img-responsive">
					                        	</div>
	                        			   </div>
			                       		 </div>
			                        <div class="tab-pane fade" id="register-tab">
		                        		<div class="main-login-form">
		                        			<div class="form-group">
						                        <label class="pt-label"><@=ptEscape(langjs['Full Name'])@></label>
						                        <input class="form-control bookingPage-loginPage-input booking-firstName m-t-25" type="text"  placeholder="<@=ptEscape(langjs['Full Name'])@>"  autocomplete="off" required="required">
						                    </div>
		                        			<div class="form-group">
						                        <label class="pt-label"><@=ptEscape(langjs['Email'])@></label>
						                        <input class="form-control bookingPage-loginPage-input booking-email m-t-25" value="" type="text" placeholder="<@=ptEscape(langjs['Email'])@>" autocomplete="off" required="required">
						                    </div>
		                        			<div class="form-group" style="position: relative">
						                        <label class="pt-label"><@=ptEscape(langjs['Password'])@></label>
						                        <input class="form-control bookingPage-loginPage-input booking-password m-t-25" type="password" style="padding-right: 40px;" maxlength="256" placeholder="<@=ptEscape(langjs['Password'])@>"  autocomplete="off" required="required">
						                   		 <i id="eye-register" class="icon-private field-icon showpasswords" style="bottom: 8px;"></i>
						                    </div>
		                        			<div class="form-group" style="position: relative">
						                        <label class="pt-label"><@=ptEscape(langjs['Confirm Password'])@></label>
						                        <input class="form-control bookingPage-loginPage-input booking-confirmPassword m-t-25" style="padding-right: 40px;"type="password" maxlength="256" placeholder="<@=ptEscape(langjs['Confirm Password'])@>"  autocomplete="off" required="required">
						                    	<i id="eye-confRegister" class="icon-private field-icon showpasswords" style="bottom: 8px;"></i>
						                    </div>

						                    <input class="form-control loginPage-input m-t-25" type="hidden" id="rg_cap" name="rg_cap">
											<@if(showBusinessCaptcha){@>
						                      	<style>#business-captcha {margin-top: 10px;margin-left: auto;margin-right: auto;width: fit-content;}</style>
											<div id="business-captcha"></div>
											<div class="error-class error-captcha text-center hide" style="font-size: 11px;color: #ff0000;">Please complete CAPTCHA</div>
											<@}@>

				                        	<button type="submit" class="margin-top btn btn-primary btn-block login-btn register-btn m-t-25" style="padding: 10px;font-size: 16px;"><@=ptEscape(langjs['Register'])@></button>
			                        	</div>
			                        	<hr class="hr-text" data-content="OR">
			                        	<div class="login-btn-block clearfix">
				                        	<a class="facebook-connect pull-left" href="/social/redirect/facebook?isBookingPage=true" style="width: 45%">
				                        		<img src="/img/login/fb-signup-button.png" class="img-responsive">
				                        	</a>
				                        	<a class="google-connect pull-right" href="/social/redirect/google?isBookingPage=true" style="width: 45%">
				                        		<img src="/img/login/google-signup-button.png" class="img-responsive">
				                        	</a>
                        			   </div>
                        			   <div style="color: #999999;margin-top: 10px;padding: 4px;">
			                        		By clicking on Register or Signup with Facebook or Signup with Google, you agree to our <a href="https://www.picktime.com/legal/terms" target="_blank" style="color: #b3b2ab">Terms</a>, <a href="https://www.picktime.com/legal/privacy" target="_blank" style="color: #b3b2ab">Privacy Policy</a> and <a href="https://www.picktime.com/legal/cookie" target="_blank" style="color: #b3b2ab">Cookie Policy</a>.
			                          </div>
			                        </div>
			                    </div>
			                </div>
			            </div>
			        </div>
		        </div>
		      </div>
	    	</div>
	  	  </div>

	  	<div class="modal fade" id="customer-coupon-modal" tabindex="-1" role="dialog" data-keyboard="true" data-backdrop="static" style="z-index: 1051;">
			<div class="modal-dialog modal-lg" role="document">
				<div class="modal-content">
				   <div class="modal-header clearfix">
 			     	 <button type="button" class="btn btn-default" aria-label="Close" data-dismiss="modal" style="float: right;">Close</button>
				     <h4 class="modal-title">Available Coupons</h4>
				   </div>
				   <div class="modal-body">
						<div class="form-group margin-bottom clearfix">
							<div class="col-sm-12">
		                        <input autocomplete="off" class="form-control coupon-code" type="text" value="" placeholder="Enter Coupon code" maxlength="11" onchange="this.value = this.value.toUpperCase();" onkeypress="return /[a-zA-Z0-9]/.test(event.key);">
		                        <div class="btn btn-default apply-coupon" >Apply</div>
		                    </div>
		                </div>

		                <div class="form-group margin-bottom clearfix" style="height: 20px;">
		                	<label class="col-sm-12 applied-label hide" style="font-size: 13px;">
		                		<i class="icon-check-mark" style="font-weight: 600;">Applied</i>
		                	</label>
		                </div>

		                <@
		                	if(booking.tab == 'info')
		                	{
			                _.each(coupons.models, function(coupon){
								if(((booking.isPaymentRequired && coupon.get("allowInBookingPage") == 'ONLY_TO_PAYMENT') || (coupon.get("allowInBookingPage") == 'ALL_BOOKINGS')) && coupon.get("showToCustomers"))
				                {
				                	var isEligible = false;




				                	if(coupon.get('locationKeys').contains(booking.locationId)){
							      		isEligible = true;

							      		var offerValue = JSON.parse(coupon.get('offerValue'));

								      	if(booking.type == 'class')
										{
											if(coupon.get('offerType') == 'items')
											{
												isEligible = offerValue.contains(booking.classId);
											}
											else if(coupon.get('offerType') == 'categories')
											{
												isEligible = offerValue.contains(booking.classes.get(booking.classId).get('categorySet')[0])
											}
										}
										else if(booking.type == 'appointment')
										{
											if(coupon.get('offerType') == 'items')
											{
												isEligible = offerValue.contains(booking.serviceId.split('_')[0]);
											}
											else if(coupon.get('offerType') == 'categories')
											{
												isEligible = offerValue.contains(booking.services.get(booking.serviceId.split('_')[0]).get('categorySet')[0])
											}
										}
										else if(booking.type == 'resource')
										{
											if(coupon.get('offerType') == 'items')
											{
												isEligible = offerValue.contains(booking.resourceId.split('_')[0]);
											}
											else if(coupon.get('offerType') == 'categories')
											{
												isEligible = offerValue.contains(booking.resources.get(booking.resourceId.split('_')[0]).get('category'))
											}
										}

										if(isEligible)
										{
											if(coupon.get('minPurchaseAmount') && booking.cost < coupon.get('minPurchaseAmount'))
											{
												isEligible = false;
											}


											let currentDate = moment(moment(), currentTimezone);
											let slotDate = moment(moment(), currentTimezone);
											let slotBeforeDate = moment(moment(), currentTimezone);
											let launchDateTime = moment(coupon.get('launchDate'), "YYYYMMDD").add(coupon.get('launchTime'), 'minutes');
											let expiryDateTime = moment(coupon.get('expiryDate'), "YYYYMMDD").add(coupon.get('expiryTime'), 'minutes');

											if(booking.type == 'class')
											{
												slotDate = moment(booking.sessionDate+'', "YYYYMMDDHHmm", currentTimezone);
											}
											else
											{
											    slotDate = moment(booking.dateAndTime+'', "YYYYMMDDHHmm", currentTimezone);
										    }


										    if(slotDate.isBefore(launchDateTime))
										    {
										    	isEligible = false;
										    }
										    else
										    {
												if(isEligible)
												{
													if(booking.cost <=0 )
													{
														isEligible = false;
													}
												}

										    }
										}
							      	}

							      	@>
									<div class="form-group margin-bottom clearfix" <@=isEligible ? '' : 'style="opacity: 0.5;"'@>>
									  <div class="booking-coupon">
										  <div class="left"></div>
										  <div class="center">
										    <div class="col-sm-12 col-xs-12" style="border-bottom: 2px dashed #ccc;padding: 20px 0px;">
										      <div class="col-sm-4 col-xs-4" style="text-align: left;">
										        <span class="pt-label" style="font-size: 13px;padding: 5px 10px;border: 2px dashed green;margin: 17px 0px;border-radius:5px;color: green; "><@=coupon.get('couponCode')@></span>
										      </div>
										      <div class="col-sm-4 col-xs-4" style="text-align: left;">
										      	<li class="pt-label" style="font-size: 13px;text-overflow: ellipsis;overflow: hidden;font-weight: 500;"><@=coupon.get('couponName')@></li>
										      </div>
										      <div class="col-sm-4 col-xs-4" style="text-align: right;">
										        <span class="<@=isEligible ? 'select-apply-coupon' : ''@> " coupon-id="<@=coupon.get('couponCode')@>" style="float: right;color: #631ab8;font-weight: 700;cursor: pointer;" <@=isEligible ? "" : "disabled=disabled"@> >TAP TO APPLY</span>
										      </div>
										    </div>

										    <div class="col-sm-12 col-xs-12" style="padding: 20px 0px;">
										      <div class="col-sm-7 col-xs-7" style="text-align: left;">
										      	<@if(coupon.get('minPurchaseAmount')){@>
										        <span class="pt-label" style="font-size: 11px;margin: 17px 0px;">Get Flat <@=coupon.get('discountType') == 'fixed' ? (TCC.currency_map[booking.account.get('currency')].symbol)+' ' : ''@><@=coupon.get('discountValue')@><@=coupon.get('discountType') == 'percent' ? '%' : ''@> Off on minimum booking amount of <@=(TCC.currency_map[booking.account.get('currency')].symbol) + ' ' +coupon.get('minPurchaseAmount')@></span>
										        <@}else{@>
										        <span class="pt-label" style="font-size: 11px;margin: 17px 0px;">Get Flat <@=coupon.get('discountType') == 'fixed' ? (TCC.currency_map[booking.account.get('currency')].symbol)+' ' : ''@><@=coupon.get('discountValue')@><@=coupon.get('discountType') == 'percent' ? '%' : ''@> Off</span>
										        <@}@>
										      </div>
										      <div class="col-sm-5 col-xs-5" style="text-align: right;color: red;">
										        <@if(coupon.get('expiryDate')){@>
										        	<span>Validity : <@=moment(coupon.get('expiryDate'), 'YYYYMMDD').format('Do, MMM YYYY')@></span>
										        <@}else{@>
										        	<span>&nbsp;</span>
										        <@}@>
										      </div>
										    </div>
										  </div>
										  <div class="right"></div>
										</div>
									</div>

				                <@
				                }
			                });

			                }
			                @>
				   </div>
				</div>
			</div>
		</div>