<?php
include_once("booking_func.php");
$clientId = (count($_SESSION['caller']['args']) < 4) ? $_SESSION['caller']['args'][1] : 0;
if ($_SESSION['user']['access_level'] < SABLE_ACCESS_MANAGER){SableGeneralFunctions::divertFromPage();}
include(SABLE_INCLUDES_PATH.'googleMaps.php');

//$buildingClientList = $sableDB->getValue('select GROUP_CONCAT(distinct(client_id)) from building');
//$clientWhere = "where client_id in (".$buildingClientList.")"; //so we only display clients with buildings.
if ($calendarDate === null) 
{
	$calendarDate = new DateTime();
}
$calendarDate->setTime(0,0);
$calendarDate->modify('-1 day'); //this is to force validation to ensure the user selects a date.

$js = '';
if ($clientId) $js = '<script>setClientName(); getClientBuildingList();</script>';

//reset the conflict warning flag:
if (isset($_SESSION['conflict_warning'])) unset($_SESSION['conflict_warning']);
?>
<script src="<?php SableGeneralFunctions::printModuleJS('booking'); ?>"></script>
<!--// Booking -->
<form id="frmBooking" name="frmBooking" autocomplete="on">
	<input type="hidden" id="hddnAddress" name="hddnAddress" />
	<div class="forms">
		<div class="container forms-grids">
			<div class="row forms-grid">
				<div class="col-md-12">
					<h3 class="title"><i class="fa fa-plus" aria-hidden="true"></i>&nbsp;Add Booking</h3>
					<p></p>
				</div>
			</div>
			<!--// edtClientName -->
			<div class="row forms-grids">
				<div class="col-md-4 forms-grid">
					<input type="text" id="edtClientName" name="edtClientName" placeholder="SEARCH..." onKeyUp="doClientRefinement(this)" style="border-bottom: none;" autocomplete="off"/>
				</div>
				<div class="col-md-8">
					<div class="fieldHint" id="hint_edtClientName">Search by name or cell no.</div>
				</div>   
			</div>
			<!-- edtClientName //-->		
			<!--// selClientId -->
			<div class="row forms-grid">
				<div class="col-md-4 forms-grid">
					<div class="dropdown">
						<select name="selClientId" type="select" id="selClientId" onfocus="showHint('selClientId');" onblur="hideHint('selClientId');"
								onkeypress="handleEnter(this, event)" placeholder="Client" size="6" class="noArrow"  onClick="setClientName()" 
								onChange="getClientBuildingList();">
						<?php 
                            $params				= [];
							$params['tables']	= [];
                            $params['tables'][0]['table_name']		= 'client';
							$params['tables'][1]['table_name']		= 'building';
							$params['tables'][1]['join_type']		= 'inner';
							$params['tables'][1]['field_name']		= 'client_id';
                            $params['value_field_name']		= 'client.client_id';
                            $params['caption_field_name']	= 'concat(client_name, " ", client_surname, " [", client_cell, "]")';
                            $params['selected_value']		= $clientId;
                            $params['select_title']			= 'Select Client';
                            $params['where_clause']			= $clientWhere;
							$params['group_field_name']		= 'building.client_id';
							SableDBFunctions::printOptionsAdv($params); ?>
						</select>
					</div>
				</div>
				<div class="col-md-8">
					<h3 id="clientAddress"></h3>
				</div>
			</div>
			<div class="row forms-grid">
				<div class="col-md-4 forms-grid">
					<div class="fieldHint hintUnder" id="hint_selClientId">Client</div>
				</div>
				<div class="col-md-8">
					
				</div>
			</div>
			<p></p>
			<!-- selClientId //-->
			<p></p>
			<!--// edtBookingDate -->
			<div class="row forms-grid">
				<div class="col-md-4 forms-grid">
					<input name="edtBookingDate" type="date" id="edtBookingDate" onfocus="showHint('edtBookingDate'); validate_edtBookingDate();" onblur="hideHint('edtBookingDate');" placeholder="Date" onkeypress="handleEnter(this, event);" value="<?=  $calendarDate->format('Y-m-d'); ?>">
					<label for="edtBookingDate" class="fieldHint hintUnder" id="hint_edtBookingDate">Date</label>
				</div>
				<div class="col-md-8 forms-grid">
                  	<label class="holder" for="cbRecurring" style="width: 100%;">
						<span style="margin:6px;">Recurring Appointment</span>
						<input name="cbRecurring" type="checkbox" id="cbRecurring" onfocus="showHint('cbRecurring');"
							onblur="hideHint('cbRecurring')" onClick="showRecurringOptions();" />
						<span class="checkmark"></span>					
                    </label>
					<label for="edtBookcbRecurringingDate" class="fieldHint hintUnder" id="hint_cbRecurring"></label>
				</div>
			</div>
			<p></p>
			<!-- edtBookingDate //-->
			<p></p>
			<!--// txtBookingNote  -->
			<div class="row forms-grid">
				<div class="col-md-4 forms-grid">
					<textarea name="txtBookingNote" type="textarea" id="txtBookingNote" onfocus="showHint('txtBookingNote');" 
							  onblur="hideHint('txtBookingNote'); validate_txtBookingNote()" placeholder="Notes"></textarea>
					<label for="txtBookingNote" class="fieldHint hintUnder" id="hint_txtBookingNote">Notes</label>
				</div>
				<div class="col-md-4 forms-grid" style="display:none;">
					<!-- dummy address field -->
					<textarea name="txtAddress" id="txtAddress"></textarea>
				</div>					
			</div>
			<p></p>
			<!-- txtBookingNote  //-->
		</div>
		
		<div class="container forms-grids">
			<div class="row forms-grid">
				<!--// selBuildingId -->
					<div class="col-md-4 forms-grid">
						<div class="dropdown">
							<select name="selBuildingId" type="select" id="selBuildingId" onfocus="showHint('selBuildingId');" 
									onblur="hideHint('selBuildingId');" onkeypress="handleEnter(this, event)" placeholder="Building" onChange="setBuildingServiceList()">
								<option>Select Client First</option>
							</select>
						</div>
					</div>
					<div class="col-md-4 forms-grid">
						<div class="dropdown">
							<select name="selServiceId" type="select" id="selServiceId" onfocus="showHint('selServiceId');" 
									onblur="hideHint('selServiceId');" onkeypress="handleEnter(this, event)" placeholder="Service" onChange="setServiceItem();">
								<option>Select Building First</option>
							</select>
						</div>
					</div>
				<!-- selBuildingId //-->	
			</div>
	
			<div class="row forms-grid">
				<!--// selServiceId -->
					<div class="col-md-4">
						<div class="fieldHint hintUnder" id="hint_selBuildingId">Building</div>
					</div>
					<div class="col-md-4">
						<div class="fieldHint hintUnder" id="hint_selServiceId">Service</div>
					</div>
				<!-- selServiceId //-->	
			</div>
			
			<div class="row forms-grid">
				<div id="ServiceElement">
					<!--// Selected elements will be placed here. -->
				</div>
			</div>
			<p></p>
		</div>
		
		<!--// Recurring Pattern -->
		<div class="row forms-grid" id="recurring-options" style="display:none;">
			<div class="col-sm-12">
				<div class="panel-group">
					<div class="panel panel-default">
						<div class="panel-heading">
							<h4 class="panel-title">Recurring Appointment</h4>
						</div>
					
						<div id="repeat" class="panel-collapse">
							<div class="panel-body">

								<div class="container">
									<div class="row forms-grid">
										<div class="col-sm-2">
											<label class="holder" for="cbActive" style="width: 100%;">
												<span style="margin:6px;">Enabled</span>
												<input name="cbActive" type="checkbox" id="cbActive" checked/>
												<span class="checkmark"></span>					
											</label>
										</div>
										<div class="col-sm-10"></div>
									</div>									
									<div class="row forms-grid">
										<div class="col-sm-2">
											<label for="edtRepeatEvery">Recurs every </label>
										</div>
										<div class="col-sm-10"></div>
									</div>
									<p></p>
									<div class="row forms-grid">
										<div class="col-sm-2">
											<input type="number" class="mod" min="1" max="14" value="1" id="edtDayNumber" onChange="setSchedulingFields()"/>
										</div>
										<div class="col-sm-2">
											<div class="dropdown">
												<select id="selRepeatCycle" onChange="setSchedulingFields()">
													<option value="1">Day</option>
													<option value="2">Week</option>
													<option value="3">Month</option>
												</select>
											</div>
										</div>
										<div class="col-sm-2">
											<div class="dropdown" id="divIntervalType" style="display:none;">
												<select id="selMonthType" onChange="setSchedulingFields()">
													<option value="1">By Day Numbers</option>
													<option value="2">By Week Days</option>
												</select>
											</div>
										</div>
									</div>
									<p></p>
									<div class="row forms-grid">
										<div class="col-sm-2" id="divMonthDayInterval" style="display:none;">
											<div class="dropdown">
												<select id="selMonthWeekCycle" onChange="setSchedulingFields()">
													<option value="1">1<sup>st</sup></option>
													<option value="2">2<sup>nd</sup></option>
													<option value="3">3<sup>rd</sup></option>
													<option value="4">4<sup>th</sup></option>
													<option value="5">Last</option>
												</select>
											</div>
										</div>
									</div>
									<p></p>
									<div class="row forms-grid">									
										<div class="col-sm-12" id="divDayOfWeek" style="display:none;">
											<label for="chkbxMonday" class="holder">
												<span style="margin-left: 6px;">Monday</span>
												<input type="checkbox" id="chkbxMonday" value="Monday" name="dayOfWeek" onChange="setSchedulingFields()"/>
												<span class="checkmark"></span>
											</label>
											<label for="chkbxTuesday" class="holder">
												<span style="margin-left: 6px;">Tuesday</span>
												<input type="checkbox" id="chkbxTuesday" value="Tuesday" name="dayOfWeek" onChange="setSchedulingFields()"/>
												<span class="checkmark"></span>
											</label>
											<label for="chkbxWednesday" class="holder">
												<span style="margin-left: 6px;">Wednesday</span>
												<input type="checkbox" id="chkbxWednesday" value="Wednesday" name="dayOfWeek" onChange="setSchedulingFields()"/>
												<span class="checkmark"></span>
											</label>
											<label for="chkbxThursday" class="holder">
												<span style="margin-left: 6px;">Thursday</span>
												<input type="checkbox" id="chkbxThursday" value="Thursday" name="dayOfWeek" onChange="setSchedulingFields()"/>
												<span class="checkmark"></span>
											</label>
											<label for="chkbxFriday" class="holder">
												<span style="margin-left: 6px;">Friday</span>
												<input type="checkbox" id="chkbxFriday" value="Friday" name="dayOfWeek" onChange="setSchedulingFields()"/>
												<span class="checkmark"></span>
											</label>
											<label for="chkbxSaturday" class="holder">
												<span style="margin-left: 6px;">Saturday</span>
												<input type="checkbox" id="chkbxSaturday" value="Saturday" name="dayOfWeek" onChange="setSchedulingFields()"/>
												<span class="checkmark"></span>
											</label>
											<label for="chkbxSunday" class="holder">
												<span style="margin-left: 6px;">Sunday</span>
												<input type="checkbox" id="chkbxSunday" value="Sunday" name="dayOfWeek" onChange="setSchedulingFields()"/>
												<span class="checkmark"></span>
											</label>
										</div>										
									</div>
									<p></p>
									<div class="row forms-grid">
										<div class="col-sm-12" id="divDayOfMonth" style="display:none;">
											<?php printDaysOfMonth(); ?>											
										</div>
									</div>
									
									<div class="row forms-grid">
										<div class="col-md-12">
											<div class="fieldHint hintUnder" id="hint_recurring"></div>
										</div>			
									</div>
									
								</div>
								<div class="panel-footer" id="pnlFooter">Repeats every day.</div>
								
							</div>
						</div>
						
						
					</div>
				</div>
			</div>
		</div>
		<!-- Recurring Pattern //-->		
		
		<div class="container forms-grids">
		<!--// buttons -->
			<div class="row forms-grid">
				<div class="col-md-2">
					<input type="button" id="btnCancel" value="Cancel" class="submit" 
						   onclick="window.location.reload();"/>
				</div>
				<div class="col-md-2 forms-grid">
					<input id="btnOk" type="button" onclick="insertBooking();" value="Add Booking" class="submit"/>
				</div>
			</div>
		<!-- buttons //-->
		</div>
		<?php include(SABLE_INCLUDES_PATH.'googleMapsDisplay.php'); ?>
	</div>
</form>
<!-- Booking //-->
<?php echo($js); ?>
