<script type="text/javascript" src="https://wellnessandspabooking.com/components/com_osservicesbooking/js/bootstrap-tabdrop.js"></script>
<script language="javascript">
jQuery(function(){
	jQuery('.osbtabs').tabdrop();
});
</script>
		<form method="POST" action="/" name="appform">
		<div class="row-fluid" id="osbcontainer">
						
			<div class="row-fluid">
								<div class="span4" id="calendardivleft">
										<div class="row-fluid">
						<div class="span12">
							        <div id="calendardetails">
            <div id="cal42026" style="display:;" class="row-fluid bookingformdiv">
                <div class="span12 btn btn-warning">
                    <table width="100%" class="apptable">
                        <tr>
                            <td width="20%" align="center" style="font-weight:bold;padding:0px;border:0px !important;" class="headercalendar">
                                                            </td>
                            <td width="60%" align="center" style="height:25px;font-weight:bold;padding:0px;border:0px !important;" class="headercalendar">
                                April                                &nbsp;
                                2026                            </td>
                            <td width="20%" align="center" style="font-weight:bold;padding:0px;border:0px !important;" class="headercalendar">
                                                                <a href="javascript:next('https://wellnessandspabooking.com/','','0','0','','')" class="applink">
                                                                    <img src="https://wellnessandspabooking.com/components/com_osservicesbooking/asset/images/icons/next_pink.png" style="border:0px;" />
                                                                    </a>
                                                            </td>
                        </tr>
                                                <tr>
                            <td width="100%" colspan="3" style="padding:3px;text-align:center;">
                                <select name="ossm" class="input-small" id="ossm" onchange="javascript:updateMonth(this.value)">
                                                                            <option value="1" >January</option>
                                                                                <option value="2" >February</option>
                                                                                <option value="3" >March</option>
                                                                                <option value="4" selected>April</option>
                                                                                <option value="5" >May</option>
                                                                                <option value="6" >June</option>
                                                                                <option value="7" >July</option>
                                                                                <option value="8" >August</option>
                                                                                <option value="9" >September</option>
                                                                                <option value="10" >October</option>
                                                                                <option value="11" >November</option>
                                                                                <option value="12" >December</option>
                                                                        </select>
                                <select name="ossy" class="input-small" id="ossy" onchange="javascript:updateYear(this.value)">
                                                                            <option value="2026" selected>2026</option>
                                                                                <option value="2027" >2027</option>
                                                                                <option value="2028" >2028</option>
                                                                                <option value="2029" >2029</option>
                                                                        </select>
                                <input type="button" class="btn btn-warning" value="Go" onclick="javascript:calendarMovingSmall('https://wellnessandspabooking.com/','','0','0','','');">
                            </td>
                        </tr>
                                            </table>
                </div>
                <table  width="100%">
                    <tr>
                                                <td class="header_calendar">
                            Mon                        </td>
                        <td class="header_calendar">
                            Tue                        </td>
                        <td class="header_calendar">
                            Wed                        </td>
                        <td class="header_calendar">
                            Thu                        </td>
                        <td class="header_calendar">
                            Fri                        </td>
                        <td class="header_calendar">
                            Sat                        </td>
                                                <td class="header_calendar">
                            Sun                        </td>
                                            </tr>
                    <tr>
                                                    <td>
                            </td>
                                                        <td>
                            </td>
                                                        <td id="td_cal_01"  align="center" style="padding:0px !important;padding-bottom:3px !important;padding-top:3px !important;">
                                <div class="btn btn-gray buttonpadding10" style="" id="a2026401">
                                                                            01                                                                    </div>
                            </td>
                                                        <td id="td_cal_02"  align="center" style="padding:0px !important;padding-bottom:3px !important;padding-top:3px !important;">
                                <div class="btn btn-gray buttonpadding10" style="" id="a2026402">
                                                                            02                                                                    </div>
                            </td>
                                                        <td id="td_cal_03"  align="center" style="padding:0px !important;padding-bottom:3px !important;padding-top:3px !important;">
                                <div class="btn btn-gray buttonpadding10" style="" id="a2026403">
                                                                            03                                                                    </div>
                            </td>
                                                        <td id="td_cal_04"  align="center" style="padding:0px !important;padding-bottom:3px !important;padding-top:3px !important;">
                                <div class="btn btn-gray buttonpadding10" style="" id="a2026404">
                                                                            04                                                                    </div>
                            </td>
                                                        <td id="td_cal_05"  align="center" style="padding:0px !important;padding-bottom:3px !important;padding-top:3px !important;">
                                <div class="btn btn-gray buttonpadding10" style="" id="a2026405">
                                                                            05                                                                    </div>
                            </td>
                            </tr><tr>                            <td id="td_cal_06"  align="center" style="padding:0px !important;padding-bottom:3px !important;padding-top:3px !important;">
                                <div class="btn btn-gray buttonpadding10" style="" id="a2026406">
                                                                            06                                                                    </div>
                            </td>
                                                        <td id="td_cal_07"  align="center" style="padding:0px !important;padding-bottom:3px !important;padding-top:3px !important;">
                                <div class="btn btn-gray buttonpadding10" style="" id="a2026407">
                                                                            07                                                                    </div>
                            </td>
                                                        <td id="td_cal_08"  align="center" style="padding:0px !important;padding-bottom:3px !important;padding-top:3px !important;">
                                <div class="btn btn-gray buttonpadding10" style="" id="a2026408">
                                                                            08                                                                    </div>
                            </td>
                                                        <td id="td_cal_9"  align="center" style="padding:0px !important;padding-bottom:3px !important;padding-top:3px !important;">
                                <div class="btn btn-gray buttonpadding10" style="" id="a202649">
                                                                            09                                                                    </div>
                            </td>
                                                        <td id="td_cal_10"  align="center" style="padding:0px !important;padding-bottom:3px !important;padding-top:3px !important;">
                                <div class="btn btn-gray buttonpadding10" style="" id="a2026410">
                                                                            10                                                                    </div>
                            </td>
                                                        <td id="td_cal_11"  align="center" style="padding:0px !important;padding-bottom:3px !important;padding-top:3px !important;">
                                <div class="btn btn-gray buttonpadding10" style="" id="a2026411">
                                                                            11                                                                    </div>
                            </td>
                                                        <td id="td_cal_12"  align="center" style="padding:0px !important;padding-bottom:3px !important;padding-top:3px !important;">
                                <div class="btn btn-gray buttonpadding10" style="" id="a2026412">
                                                                            12                                                                    </div>
                            </td>
                            </tr><tr>                            <td id="td_cal_13"  align="center" style="padding:0px !important;padding-bottom:3px !important;padding-top:3px !important;">
                                <div class="btn btn-gray buttonpadding10" style="" id="a2026413">
                                                                            13                                                                    </div>
                            </td>
                                                        <td id="td_cal_14"  align="center" style="padding:0px !important;padding-bottom:3px !important;padding-top:3px !important;">
                                <div class="btn btn-gray buttonpadding10" style="" id="a2026414">
                                                                            14                                                                    </div>
                            </td>
                                                        <td id="td_cal_15"  align="center" style="padding:0px !important;padding-bottom:3px !important;padding-top:3px !important;">
                                <div class="btn btn-gray buttonpadding10" style="" id="a2026415">
                                                                            15                                                                    </div>
                            </td>
                                                        <td id="td_cal_16"  align="center" style="padding:0px !important;padding-bottom:3px !important;padding-top:3px !important;">
                                <div class="btn btn-gray buttonpadding10" style="" id="a2026416">
                                                                            16                                                                    </div>
                            </td>
                                                        <td id="td_cal_17"  align="center" style="padding:0px !important;padding-bottom:3px !important;padding-top:3px !important;">
                                <div class="btn btn-gray buttonpadding10" style="" id="a2026417">
                                                                            17                                                                    </div>
                            </td>
                                                        <td id="td_cal_18"  align="center" style="padding:0px !important;padding-bottom:3px !important;padding-top:3px !important;">
                                <div class="btn btn-gray buttonpadding10" style="" id="a2026418">
                                                                            18                                                                    </div>
                            </td>
                                                        <td id="td_cal_19"  align="center" style="padding:0px !important;padding-bottom:3px !important;padding-top:3px !important;">
                                <div class="btn btn-danger buttonpadding10" style="" id="a2026419">
                                                                        <a href="javascript:loadServices(2026,4,'19');" class="callink">
                                                                            19                                                                        </a>
                                                                    </div>
                            </td>
                            </tr><tr>                            <td id="td_cal_20"  align="center" style="padding:0px !important;padding-bottom:3px !important;padding-top:3px !important;">
                                <div class="btn btn-warning buttonpadding10" style="" id="a2026420">
                                                                        <a href="javascript:loadServices(2026,4,'20');" class="callink">
                                                                            20                                                                        </a>
                                                                    </div>
                            </td>
                                                        <td id="td_cal_21"  align="center" style="padding:0px !important;padding-bottom:3px !important;padding-top:3px !important;">
                                <div class="btn btn-warning buttonpadding10" style="" id="a2026421">
                                                                        <a href="javascript:loadServices(2026,4,'21');" class="callink">
                                                                            21                                                                        </a>
                                                                    </div>
                            </td>
                                                        <td id="td_cal_22"  align="center" style="padding:0px !important;padding-bottom:3px !important;padding-top:3px !important;">
                                <div class="btn btn-warning buttonpadding10" style="" id="a2026422">
                                                                        <a href="javascript:loadServices(2026,4,'22');" class="callink">
                                                                            22                                                                        </a>
                                                                    </div>
                            </td>
                                                        <td id="td_cal_23"  align="center" style="padding:0px !important;padding-bottom:3px !important;padding-top:3px !important;">
                                <div class="btn btn-warning buttonpadding10" style="" id="a2026423">
                                                                        <a href="javascript:loadServices(2026,4,'23');" class="callink">
                                                                            23                                                                        </a>
                                                                    </div>
                            </td>
                                                        <td id="td_cal_24"  align="center" style="padding:0px !important;padding-bottom:3px !important;padding-top:3px !important;">
                                <div class="btn btn-warning buttonpadding10" style="" id="a2026424">
                                                                        <a href="javascript:loadServices(2026,4,'24');" class="callink">
                                                                            24                                                                        </a>
                                                                    </div>
                            </td>
                                                        <td id="td_cal_25"  align="center" style="padding:0px !important;padding-bottom:3px !important;padding-top:3px !important;">
                                <div class="btn btn-warning buttonpadding10" style="" id="a2026425">
                                                                        <a href="javascript:loadServices(2026,4,'25');" class="callink">
                                                                            25                                                                        </a>
                                                                    </div>
                            </td>
                                                        <td id="td_cal_26"  align="center" style="padding:0px !important;padding-bottom:3px !important;padding-top:3px !important;">
                                <div class="btn btn-gray buttonpadding10" style="" id="a2026426">
                                                                            26                                                                    </div>
                            </td>
                            </tr><tr>                            <td id="td_cal_27"  align="center" style="padding:0px !important;padding-bottom:3px !important;padding-top:3px !important;">
                                <div class="btn btn-warning buttonpadding10" style="" id="a2026427">
                                                                        <a href="javascript:loadServices(2026,4,'27');" class="callink">
                                                                            27                                                                        </a>
                                                                    </div>
                            </td>
                                                        <td id="td_cal_28"  align="center" style="padding:0px !important;padding-bottom:3px !important;padding-top:3px !important;">
                                <div class="btn btn-warning buttonpadding10" style="" id="a2026428">
                                                                        <a href="javascript:loadServices(2026,4,'28');" class="callink">
                                                                            28                                                                        </a>
                                                                    </div>
                            </td>
                                                        <td id="td_cal_29"  align="center" style="padding:0px !important;padding-bottom:3px !important;padding-top:3px !important;">
                                <div class="btn btn-warning buttonpadding10" style="" id="a2026429">
                                                                        <a href="javascript:loadServices(2026,4,'29');" class="callink">
                                                                            29                                                                        </a>
                                                                    </div>
                            </td>
                                                        <td id="td_cal_30"  align="center" style="padding:0px !important;padding-bottom:3px !important;padding-top:3px !important;">
                                <div class="btn btn-warning buttonpadding10" style="" id="a2026430">
                                                                        <a href="javascript:loadServices(2026,4,'30');" class="callink">
                                                                            30                                                                        </a>
                                                                    </div>
                            </td>
                                                </tr>
                </table>
            </div>
        </div>
										<input type="hidden" name="ossmh" id="ossmh" value="4">
								<input type="hidden" name="ossyh" id="ossyh" value="2026">
						</div>
					</div>
										<div class="clearfix" style="height:10px;"></div>
					<div class="row-fluid">
						<div class="span12">
							<div class="row-fluid bookingformdiv">
								<div class="span12 btn btn-warning">
																		<div style="float:left;margin-right:5px;">
										<img src="https://wellnessandspabooking.com/components/com_osservicesbooking/style/images/arttocart.png">
									</div>
									<div style="float:left;padding-top:4px;">
										CART									</div>
																	</div>
								<table  width="100%">
									<tr>
										<td width="100%" style="padding:5px;" valign="top">
											<div id="cartdiv">
															Your cart is empty. To make a booking, please select the date in the calendar, and then select service and employee bellow.			
													</div>
										</td>
									</tr>
								</table>
							</div>
							<div id="servicebox" style="display:none;">
								
							</div>
						</div>
					</div>
										<div class="clearfix"></div>
				</div>
								<div class="span8" id="maindivright">
					<div id="maincontentdiv">
										<div class="row-fluid">
				<div class="span12" style="border:1px solid #B3BED3;">
					<div class="sub_header">
						19-04-2026					</div>
					<div class="clearfix"></div>
					<div style="padding:10px;">
						Day off					</div>
				</div>
			</div>
							</div>
			</div>
			<div class="clearfix"></div>
					</div>
		</div>
		<input type="hidden" name="option" value="com_osservicesbooking"  />
		<input type="hidden" name="task" value="">
		<input type="hidden" name="month"  id="month" value="4" />
		<input type="hidden" name="year"  id="year" value="2026" />
		<input type="hidden" name="day"  id="day" value="19" />
		<input type="hidden" name="select_day" id="select_day" value="19" />
		<input type="hidden" name="select_month" id="select_month" value="4" />
		<input type="hidden" name="select_year" id="select_year" value="2026" />
		<input type="hidden" name="live_site" id="live_site" value="https://wellnessandspabooking.com/"  />
		<input type="hidden" name="order_id" id="order_id" value="" />
		<input type="hidden" name="current_date" id="current_date" value=""  />
		<input type="hidden" name="use_captcha" id="use_captcha" value="2" />
		<input type="hidden" name="category_id" id="category_id" value="0" />
		<input type="hidden" name="employee_id" id="employee_id" value="0" />
		<input type="hidden" name="vid" id="vid" value="0" />
		<input type="hidden" name="selected_item" id="selected_item" value="" />
		<input type="hidden" name="sid" id="sid" value="" />
		<input type="hidden" name="eid" id="eid" value="" />
		<input type="hidden" name="current_link" id="current_link" value="" />
		<input type="hidden" name="calendar_normal_style" id="calendar_normal_style" value="btn btn-warning" />
		<input type="hidden" name="calendar_currentdate_style" id="calendar_currentdate_style" value="btn btn-danger" />
		<input type="hidden" name="calendar_activate_style" id="calendar_activate_style" value="btn btn-info" />
		<input type="hidden" name="use_js_popup" id="use_js_popup" value="0" />
		<input type="hidden" name="using_cart" id="using_cart" value="1" />
		<input type="hidden" name="date_from" id="date_from" value="" />
		<input type="hidden" name="date_to" id="date_to" value="" />
		<input type="hidden" name="unique_cookie" id="unique_cookie" value="" />
		<input type="hidden" name="Itemid" id="Itemid" value="101" />
		</form>
		<div  id="divtemp" style="width:1px;height:1px;"></div>
		<script language="javascript">
		 methods = new PaymentMethods();
 method = new PaymentMethod('os_paypal',0,0,0,0);
 methods.Add(method);
 method = new PaymentMethod('os_offline',0,0,0,0);
 methods.Add(method);
		function addtoCart(sid,eid,time_length){
			var form			= document.appform;
			var category_id		= document.getElementById('category_id');
			var employee_id     = document.getElementById('employee_id');
			var bookitem		= document.getElementById('book_' + sid +  '_' + eid);
			var end_bookitem 	= document.getElementById('end_book_' + sid +  '_' + eid);
			end_bookitem		= end_bookitem.value;
			var startitem 		= document.getElementById('start_' + sid +  '_' + eid);
			var enditem 		= document.getElementById('end_' + sid +  '_' + eid);
			var summary 		= document.getElementById('summary_' + sid +  '_' + eid);
			var str = "";
			var selected_item   = document.getElementById('selected_item');
			selected_item.value = 'employee' + sid + '_' + eid;

			var repeat_name     = sid + "_"+ eid;
			var repeat_type		= document.getElementById('repeat_type_' + repeat_name);
			var repeat_type1	= document.getElementById('repeat_type_' + repeat_name + '1');
			var repeat_amount   = document.getElementById('repeat_to_' + repeat_name);
			var rtype		  	= "";
			var rtype1		  	= "";
			var ramount			= "";
			var repeat          = "";
			if(repeat_amount != null){
				ramount = repeat_amount.value;
			}
			if(repeat_type != null){
				rtype = repeat_type.value;
			}
			if(repeat_type1 != null){
				rtype1 = repeat_type1.value;
			}
			if((ramount != "") && (repeat_type != "") && (repeat_type1 != "")){
				repeat_to		= ramount + "|" + rtype1;
				repeat  		= "" + rtype + "|" + repeat_to;
			}
			
			var vidElement = document.getElementById('vid');
			if(vidElement != null){
				vid = vidElement.value;
			}else{
				vid =  0;
			}
			
			var hasValue = 0;
			if(bookitem.value == ""){
				alert("Please select start time for your booking");
				return false;
			}else{
				var field_ids   = document.getElementById('field_ids' + sid);
				field_ids		= field_ids.value;
				if(field_ids != ""){
					var fieldArr 	= new Array();
					fieldArr 		= field_ids.split(",");
					var temp;
					var label;
					if(fieldArr.length > 0){
						for(i=0;i<fieldArr.length;i++){
							temp = fieldArr[i];
							var element = document.getElementById('field_' + sid + '_' + eid + '_' + temp + '_selected');
							//label = document.getElementById('field_' + sid + '_' + eid + '_' + temp + '_label');
							//if(element.value != ""){
							//	str += "<strong>" + label.value + ":</strong> " + element.value + "<BR />";
							//}
							if(element != null){
								if(element.value != ""){
									hasValue = 1;
									str += temp + "-" + element.value  + "@@";
								}
							}
						}
						//summary.innerHTML = str;
						if(hasValue == 1){
							str = str.substring(0,str.length - 1);
						}

					}
				}
								var answer = 1;
								var end_booking_time = parseInt(bookitem.value) + parseInt(time_length);
				if(answer == 1){
					var live_site = document.getElementById('live_site');
					var x = document.getElementsByName("addtocartbtn");
					var i;
					//disable all buttons in the form
					for (i = 0; i < x.length; i++) {
							x[i].disabled = true;
					}
					
					addtoCartAjax(bookitem.value,end_bookitem,sid,eid,live_site.value,str,repeat,vid,category_id.value,employee_id.value);
				}
			}
		}

		function removeItem(itemid,sid,start_time,end_time,eid){
						var answer = 1;
						if(answer == 1){
				var category_id		= document.getElementById('category_id');
				var employee_id     = document.getElementById('employee_id');
				var vid				= document.getElementById('vid');
				var live_site = document.getElementById('live_site');
				removeItemAjax(itemid,live_site.value,sid,start_time,end_time,eid, category_id.value, employee_id.value,vid.value);
			}
		}
		
		var screenWidth = jQuery(window).width();
		if(screenWidth < 350){
			jQuery(".buttonpadding10").removeClass("buttonpadding10").addClass("buttonpadding5");
		}else{
			jQuery(".buttonpadding5").removeClass("buttonpadding5").addClass("buttonpadding10");
			if(document.getElementById('calendardivleft') != null){
				var leftwidth = jQuery("#calendardivleft").width();
				if(leftwidth > 250){
					jQuery("#calendardivleft").removeClass("span5").removeClass("span6").addClass("span4");
					jQuery("#maindivright").removeClass("span7").removeClass("span6").addClass("span8");
				}else if(leftwidth < 210){
					jQuery("#calendardivleft").removeClass("span5").removeClass("span4").addClass("span6");
					jQuery("#maindivright").removeClass("span7").removeClass("span8").addClass("span6");
				}else{
					jQuery("#calendardivleft").removeClass("span4").removeClass("span6").addClass("span5");
					jQuery("#maindivright").removeClass("span8").removeClass("span6").addClass("span7");
				}
			}
		}

		//alert(jQuery("#osbcontainer").width());
		//article only
		flexScreen = jQuery("#osbcontainer").width();
		if(flexScreen < 500){
			jQuery("#calendardivleft").removeClass("span6").removeClass("span5").removeClass("span4").addClass("span12");
			jQuery("#maindivright").removeClass("span6").removeClass("span7").removeClass("span8").addClass("span12");
			jQuery(".timeslots").removeClass("span6").addClass("span12");
			jQuery("#maindivright").attr("style","margin-left:0px !important;margin-top:10px !important");
		}
		</script>
		