<style type="text/css">
	.tooltipevent
	{
		width:auto;
		height:auto;
		background:rgba(0,0,0,0.75);
		position:absolute;
		color: #fff;
		z-index:10001;
		padding:10px 10px 10px 10px ;  
		line-height: 200%;
	}

	.imgOverlay {
		position: absolute;
		top: 8px;
		bottom: 0;
		left: 200px;
		right: 0;
		height: 85%;
		width: auto;
		opacity: 0;
		transition: .5s ease;
		/*background-color: #008CBA;*/
		background:rgba(0,0,0,0.65);
	}

	.imgContainer:hover .imgOverlay {
		opacity: 1;
	}

	.imgText {
		color: white;
		font-size: 20px;
		position: absolute;
		top: 15%;
		left: 5%;
	}
</style>

<section class="container-fluid">
	<div class="row">
		<div class="col-md-8">
			<div class="card bg-light-transparent" style="margin-bottom: 2rem;">
				<div class="card-header bg-white">
					<div class="float-left">
						<h5 class="card-title">Calendar</h5>
					</div>
				</div>
				<div class="card-body">
					<div class="card bg-white no-shadow">
						<div class="card-body">
							<div class="row">
								<div class="col-2">
									<?php foreach ($room_type as $type) { ?>
										<br>
										<div data-trigger="hover" data-tooltip="tooltip" title="<?php echo $type['room']; ?>" class="text-center mt-2 text-white" style="background-color: <?php echo '#'.$type['color_code']; ?>;-webkit-border-radius:8px; -moz-border-radius:8px; border-radius:8px; border:1px solid #ccc; height:28px;"><?php echo $type['short_name']; ?></div>
									<?php } ?>
								</div>
								<div class="col-10">
									<div id="calendar"></div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="col-md-4">
			<div class="card bg-light-transparent" style="margin-bottom: 2rem;">
				<div class="card-header bg-white">
					<!-- <h5 class="card-title">Upcoming Room Booking</h5> -->
					<h5 class="card-title">Today Room Booking (<?php echo date('d-m-Y'); ?>)</h5>
				</div>
				<div class="card-body">
					<div class="card bg-white no-shadow">
						<div class="card-body">
							<?php if(!empty($count_booking)): foreach($count_booking as $type): ?>
								<div class="row">
									<div class="col-7">
										<!-- <p class="text-uppercase" data-trigger="hover" data-tooltip="tooltip" title="<?php //echo ($type['other_room'])?$type['other_room']:$type['room']; ?>"><?php //echo ($type['other_room'])?$type['other_room']:$type['room']; ?></p> -->
										<p class="text-uppercase" data-trigger="hover" data-tooltip="tooltip" title="<?php echo ($type['other_room'])?$type['other_room']:$type['room']; ?>">
											<?php echo ($type['other_room'])?$type['other_room']:$type['room']; ?>
											<?php echo ' ['.$type['shortName'].']'; ?>
										</p>
									</div>
									<div class="col-5 pull-right">
										<!-- <p><?php //echo date('d-m-Y',strtotime($type['start_date'])).' ['.$type['start_time'].']'; ?></p> -->
										<?php echo $type['start_time'].' - '.$type['end_time']; ?>
									</div>
								</div>
							<?php endforeach;endif; ?>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</section>

<section class="container" style="padding-bottom: 2rem;">
	<div class="row">
		<div class="col-sm-12">
			<div class="tab-content" id="tabContent">
				<div class="tab-pane fade show active" id="meeting" role="tabpanel" aria-labelledby="meeting-tab">
					<div class="card bg-light-transparent">
						<div class="card-header bg-light">
							<h4 class="card-title float-left"><?php echo (empty($ID))?'New ':'Edit '; ?>Meeting Room Booking Form</h4>
						</div>

						<div class="card-body">
							<div class="card no-shadow">
								<div class="card-body">
									<?php if(!empty($ID)){ ?>
										<form action="<?php echo base_url('hr/serviceform/meeting_edit'); ?>"  method="post" id="meetingForm" class="form" onsubmit="return confirm('Do you really want to submit the form?')">
										<?php } else { ?>
											<form action="<?php echo base_url('hr/serviceform/meeting_form_save'); ?>"  method="post" id="meetingForm" class="form" onsubmit="return confirm('Do you really want to submit the form?')">
											<?php } ?>

											<input type="hidden" class="form-control" name="meetingID" id="meetingID" value="<?php echo $ID; ?>">

											<div class="form-row">
												<div class="col-12 col-sm-6">
													<div class="form-group">
														<label>Name</label>
														<?php if(($ID == 0)) { ?>
															<input type="text" class="form-control" name="reqName" id="reqName" value="<?php echo $_SESSION['user']['name']; ?>" readonly>
															<input type="text" class="form-control" name="requester_id" id="requester_id" value="<?php echo $_SESSION['user']['id']; ?>" hidden>
														<?php } else { ?>
															<?php if(!empty($booking_room)) { ?>
																<?php foreach($booking_room as $row) { //debug($row); ?>
																	<input type="text" class="form-control" name="reqName" id="reqName" value="<?php echo $row['name']; ?>" readonly>
																	<input type="hidden" class="form-control" name="requester_id" id="requester_id" value="<?php echo $row['requester_id']; ?>" readonly>
																<?php }?>
															<?php } ?>
														<?php }?>												
													</div>
												</div>

												<div class="col-12 col-sm-3">
													<div class="form-group">
														<label for="department">Department</label>
														<?php if(!empty($ID)){ ?>
															<?php if(!empty($booking_room)): foreach($booking_room as $row): ?>
																<input type="text" class="form-control" name="department" id="department" value="<?php echo $row['dept_name']; ?>" readonly>
																<input type="text" class="form-control" name="department_id" id="department_id" value="<?php echo $row['department_id']; ?>" hidden>
															<?php endforeach;endif; ?>
														<?php } else { ?>
															<input type="text" class="form-control" name="department" id="department" value="<?php echo $_SESSION['user']['department_name']; ?>" readonly>
															<input type="text" class="form-control" name="department_id" id="department_id" value="<?php echo $_SESSION['user']['department_id']; ?>" hidden>
														<?php } ?>
													</div>
												</div>

												<div class="col-12 col-sm-3">
													<div class="form-group">
														<label for="reqDate">Request Date</label>
														<?php if(!empty($ID)){ ?>
															<?php if(!empty($booking_room)): foreach($booking_room as $row): ?>
																<input type="" class="form-control" name="reqDate" id="reqDate" value="<?php echo (!empty($ID))?date('d-m-Y',strtotime($row['createdTS'])):''; ?>" readonly>
															<?php endforeach;endif; ?> 
														<?php } else { ?>
															<input type="" class="form-control" name="reqDate" id="reqDate" value="<?php echo date("d-m-Y"); ?>" readonly>
														<?php } ?>
													</div>
												</div>
											</div>

											<div class="form-row">
												<div class="col-12 col-sm-6">
													<div class="form-group">
														<label for="event_title">Event Title</label>
														<?php if(!empty($ID)){ ?>
															<input class="form-control" type="text" name="event_title" id="event_title" required value="<?php echo $booking_room[0]['event_title']; ?>">
														<?php } else { ?>
															<input class="form-control" type="text" name="event_title" id="event_title" required>
														<?php } ?>
													</div>
												</div>
												<div class="col-12 col-sm-6">
													<div class="form-group">
														<label for="client_name">Client</label>
														<?php if(!empty($ID)){ ?>
															<input class="form-control" type="text" name="client_name" id="client_name" required value="<?php echo $booking_room[0]['client']; ?>">
														<?php } else { ?>
															<input class="form-control" type="text" name="client_name" id="client_name" required>
														<?php } ?>
													</div>
												</div>
											</div>

											<div class="form-row">
												<div class="col-12 col-sm-3">
													<div class="form-group">
														<label for="start_date">Date Start</label>
														<?php if(!empty($ID)){ ?>
															<input class="form-control datepicker" type="text" name="start_date" id="start_date" required value="<?php echo date('d-m-Y',strtotime($booking_room[0]['start_date'])); ?>" onchange="check_booking_date()">
														<?php } else { ?>
															<input class="form-control datepicker" type="text" name="start_date" id="start_date" required onchange="check_booking_date()">
														<?php } ?>
													</div>
												</div>
												<div class="col-12 col-sm-3">
													<div class="form-group">
														<label for="end_date">Date End</label>
														<?php if(!empty($ID)){ ?>
															<input class="form-control datepicker" type="text" name="end_date" id="end_date" required value="<?php echo date('d-m-Y',strtotime($booking_room[0]['end_date'])); ?>" onchange="check_booking_date()">
														<?php } else { ?>
															<input class="form-control datepicker" type="text" name="end_date" id="end_date" required onchange="check_booking_date()">
														<?php } ?>
													</div>
												</div>
												<div class="col-12 col-sm-3">
													<div class="form-group">
														<label for="start_time">Time Start</label>
														<?php if(!empty($ID)){ ?>
															<input class="form-control" type="time" name="start_time" id="start_time" required value="<?php echo $booking_room[0]['start_time']; ?>" onchange="check_booking_date()">
														<?php } else { ?>
															<input class="form-control" type="time" name="start_time" id="start_time" required onchange="check_booking_date()">
														<?php } ?>
													</div>
												</div>
												<div class="col-12 col-sm-3">
													<div class="form-group">
														<label for="end_time">Time End</label>
														<?php if(!empty($ID)){ ?>
															<input class="form-control" type="time" name="end_time" id="end_time" required value="<?php echo $booking_room[0]['end_time']; ?>" onchange="check_booking_date()">
														<?php } else { ?>
															<input class="form-control" type="time" name="end_time" id="end_time" required onchange="check_booking_date()">
														<?php } ?>
													</div>
												</div>
											</div>
											
											<h4 class="text-center"><b style="color: red;" id="complete_fill_note">*Please Fill In Date Start, Date End, Time Start, Time End*</b></h4>
											<div id=""> <!-- booking_detail -->
												<div class="form-row">
													<div class="col-sm-3">
														<div class="form-group">
															<label for="vip">Vip</label>
															<div class="row form-contol">
																<?php if(!empty($ID)){ ?>
																	<div class="col-sm-4">
																		<input type="radio" name="vip" class="vip" id="vip" required value="1" <?php echo ($booking_room[0]['vip'] == 1)?'checked':'' ?>> Yes
																	</div>
																	<div class="col-sm-4">
																		<input type="radio" name="vip" class="vip" id="vip" required value="0" <?php echo ($booking_room[0]['vip'] == 0)?'checked':'' ?>> No
																	</div>
																<?php } else { ?>
																	<div class="col-sm-4">
																		<input type="radio" class="vip" name="vip" id="vip" required value="1"> Yes
																	</div>
																	<div class="col-sm-4">
																		<input type="radio" class="vip" name="vip" id="vip" required value="0"> No
																	</div>
																<?php } ?>
															</div>
															<span class="alert text-danger d-none" id="error" style="font-size: 85%; padding: 0.4rem 0.25rem;">Please Choose One.</span>
														</div>
													</div>
													<div class="col-sm-3">
														<div class="form-group">
															<label for="no_pax">No. of Pax</label>
															<?php if(!empty($ID)){ ?>
																<input class="form-control" type="number" name="no_pax" id="no_pax" min="1" required value="<?php echo $booking_room[0]['pax'] ?>">
															<?php } else { ?>
																<input class="form-control" type="number" name="no_pax" id="no_pax" min="1" required>
															<?php } ?>
														</div>
													</div>
													<div class="col-sm-6">
														<div class="form-group">
															<label for="package_id">Package</label>
															<div class="input-group mb-3">
																<div class="input-group-append">
																	<?php if($_SESSION['all_modules_access'][0]['access_lvl'] == 'admin' || $_SESSION['user']['division_id'] == 4){ ?>
																		<button type="button" id="updatePackage" class="btn btn-sm btn-warning" onclick="open_modal('package')" data-trigger="hover" data-tooltip="tooltip" title="" data-original-title="Update Package"><i class="far fa-edit"></i></button>
																	<?php } ?>
																</div>
																<select class="form-control" name="package_id" id="package_id" required>
																	<?php if(!empty($ID)){ ?>
																		<option <?php echo ((!empty($booking_room[0]['package'])) && ($booking_room[0]['package_id'] > 0))?'selected':''; ?> readonly>-- Please Select --</option>
																		<?php if($package) foreach($package as $key => $pck){ ?>
																			<option value="<?php echo $pck['ID']; ?>" <?php echo ($booking_room[0]['package_id'] == $pck['ID'])?'selected':''; ?>><?php echo $pck['package'].' = RM'.number_format($pck['price'],2); ?></option>
																		<?php } ?>
																	<?php } else { ?>
																		<option disabled selected>-- Please Select --</option>
																		<?php if($package) foreach($package as $key => $pck){ ?>
																			<option value="<?php echo $pck['ID']; ?>"><?php echo $pck['package'].' = RM'.number_format($pck['price'],2); ?></option>
																		<?php } ?>
																	<?php } ?>
																</select>
															</div>
														</div>
													</div>
												</div>

												<div class="form-row">
													<div class="col-sm-6">
														<div class="form-group">
															<label for="table_setup">Table Setup</label>
															<select class="form-control" name="table_setup" id="table_setup">
																<?php if(!empty($ID)){ ?>
																	<option selected readonly><?php echo (!empty($booking_room[0]['table_setup']))?$booking_room[0]['table_setup']:"-- Please Select --" ?></option>
																	<option>Classroom</option>
																	<option>U Shape</option>
																	<option>Round Table</option>
																	<option>Theater</option>
																	<option>Workshop</option>
																	<option>Standing</option>
																<?php } else { ?>
																	<option disabled selected>-- Please Select --</option>
																	<option>Classroom</option>
																	<option>U Shape</option>
																	<option>Round Table</option>
																	<option>Theater</option>
																	<option>Workshop</option>
																	<option>Standing</option>
																<?php } ?>
															</select>
														</div>
													</div>
													<div class="col-sm-6">
														<div class="form-group">
															<label for="equipment_id">Equipment</label>
															<div class="input-group mb-3">
																<div class="input-group-append">
																	<?php if($_SESSION['all_modules_access'][0]['access_lvl'] == 'admin' || $_SESSION['user']['division_id'] == 4){ ?>
																		<button type="button" id="updateEquipment" class="btn btn-sm btn-warning" onclick="open_modal('equipment')" data-trigger="hover" data-tooltip="tooltip" title="" data-original-title="Update Equipment"><i class="far fa-edit"></i></button>
																	<?php } ?>
																</div>
																<select class="form-control selectpicker" placeholder="--Please Select--" id="equipment_id" name="equipment_id[]" multiple>
																	<?php if($equipment) foreach($equipment as $key => $row){ ?>
																		<option value="<?php echo $row['ID']; ?>"><?php echo $row['equipment']; ?></option>
																	<?php } ?>
																</select>
															</div>
														</div>
													</div>
												</div>

												<div class="form-row">
													<div class="col-sm-4">
														<div class="form-group">
															<label for="breakfast">Breakfast</label>
															<div class="input-group mb-3">
																<div class="input-group-append">
																	<?php if($_SESSION['all_modules_access'][0]['access_lvl'] == 'admin' || $_SESSION['user']['division_id'] == 4){ ?>
																		<button type="button" id="updateBreakfastMenu" class="btn btn-sm btn-warning" onclick="open_modal('meal','Breakfast')" data-trigger="hover" data-tooltip="tooltip" title="" data-original-title="Update Breakfast Menu"><i class="far fa-edit"></i></button>
																	<?php } ?>
																</div>
																<select class="form-control" name="breakfast" id="breakfast">
																	<?php if(!empty($ID)){ ?>
																		<option>-- Please Select --</option>
																		<?php if($meal_menu) foreach($meal_menu as $bf){ ?>
																			<?php if($bf['type'] == 0){ ?>
																				<option <?php echo ($booking_room[0]['breakfast'] == $bf['menu']?'selected':'') ?>><?php echo $bf['menu']; ?></option>
																			<?php } ?>
																		<?php } ?>
																	<?php } else { ?>
																		<option>-- Please Select --</option>
																		<?php if($meal_menu) foreach($meal_menu as $bf){ ?>
																			<?php if($bf['type'] == 0){ ?>
																				<option><?php echo $bf['menu']; ?></option>
																			<?php } ?>
																		<?php } ?>
																	<?php } ?>
																</select>
															</div>
														</div>
													</div>
													<div class="col-sm-4">
														<div class="form-group">
															<label for="lunch">Lunch</label>
															<div class="input-group mb-3">
																<div class="input-group-append">
																<?php if($_SESSION['all_modules_access'][0]['access_lvl'] == 'admin' || $_SESSION['user']['division_id'] == 4){ ?>
																	<button type="button" id="updateLunchMenu" class="btn btn-sm btn-warning" onclick="open_modal('meal','Lunch')" data-trigger="hover" data-tooltip="tooltip" title="" data-original-title="Update Lunch Menu"><i class="far fa-edit"></i></button>
																<?php } ?>
																</div>
																<select class="form-control" name="lunch" id="lunch">
																	<?php if(!empty($ID)){ ?>
																		<option>-- Please Select --</option>
																		<?php if($meal_menu) foreach($meal_menu as $lunch){ ?>
																			<?php if($lunch['type'] == 1){ ?>
																				<option <?php echo ($booking_room[0]['lunch'] == $lunch['menu']?'selected':'') ?>><?php echo $lunch['menu']; ?></option>
																			<?php } ?>
																		<?php } ?>
																	<?php } else { ?>
																		<option>-- Please Select --</option>
																		<?php if($meal_menu) foreach($meal_menu as $lunch){ ?>
																			<?php if($lunch['type'] == 1){ ?>
																				<option><?php echo $lunch['menu']; ?></option>
																			<?php } ?>
																		<?php } ?>
																	<?php } ?>
																</select>
															</div>
														</div>
													</div>
													<div class="col-sm-4">
														<div class="form-group">
															<label for="tea">Hi-Tea</label>
															<div class="input-group mb-3">
																<div class="input-group-append">
																<?php if($_SESSION['all_modules_access'][0]['access_lvl'] == 'admin' || $_SESSION['user']['division_id'] == 4){ ?>
																	<button type="button" id="updateHiTeaMenu" class="btn btn-sm btn-warning" onclick="open_modal('meal','Hi-Tea')" data-trigger="hover" data-tooltip="tooltip" title="" data-original-title="Update Hi-Tea Menu"><i class="far fa-edit"></i></button>
																<?php } ?>
																</div>
																<select class="form-control" name="tea" id="tea">
																	<?php if(!empty($ID)){ ?>
																		<option>-- Please Select --</option>
																		<?php if($meal_menu) foreach($meal_menu as $tea){ ?>
																			<?php if($tea['type'] == 2){ ?>
																				<option <?php echo ($booking_room[0]['hi_tea'] == $tea['menu']?'selected':'') ?>><?php echo $tea['menu']; ?></option>
																			<?php } ?>
																		<?php } ?>
																	<?php } else { ?>
																		<option>-- Please Select --</option>
																		<?php if($meal_menu) foreach($meal_menu as $tea){ ?>
																			<?php if($tea['type'] == 2){ ?>
																				<option><?php echo $tea['menu']; ?></option>
																			<?php } ?>
																		<?php } ?>
																	<?php } ?>
																</select>
															</div>
														</div>
													</div>
												</div>

												<div class="form-row">
													<div class="col-12">
														<div class="form-group">
															<?php if(!empty($booking_room[0]['other_menu'])){ ?>
																<input type="checkbox" name="other_menu_id" id="other_menu_id" value="1" onchange="open_hidden_other_menu(this);" checked>
																<label for="other_menu">Other Menu<small><b>(*for lunch menu)</b></small></label>
																<input type="text" class="form-control" name="other_menu" id="other_menu" value="<?php echo $booking_room[0]['other_menu']; ?>">
															<?php } else { ?>
																<input type="checkbox" name="other_menu_id" id="other_menu_id" value="1" onchange="open_hidden_other_menu(this);">
																<label for="other_menu">Other Menu<small><b> (*for lunch menu)</b></small></label>
																<input type="text" class="form-control" name="other_menu" id="other_menu" hidden>
															<?php } ?>
														</div>
													</div>
													<div class="col-12">
														<div class="form-group">
															<?php if(!empty($booking_room[0]['special_request'])){ ?>
																<input type="checkbox" name="special_request_id" id="special_request_id" value="1" onchange="open_hidden_special_request(this);" checked>
																<label for="special_request">Special Request</label>
																<textarea class="form-control" name="special_request" id="special_request"><?php echo $booking_room[0]['special_request']; ?></textarea>
															<?php } else { ?>
																<input type="checkbox" name="special_request_id" id="special_request_id" value="1" onchange="open_hidden_special_request(this);">
																<label for="special_request">Special Request</label>
																<textarea class="form-control" name="special_request" id="special_request" hidden ></textarea>
															<?php } ?>	
														</div>
													</div>
												</div>

												<div class="form-row">
													<div class="col-12">
														<div class="form-group">
															<button type="button" id="updateRoom" class="btn btn-sm btn-warning" onclick="open_modal('room')" data-trigger="hover" data-tooltip="tooltip" title="" data-original-title="Update Room"><i class="far fa-edit"></i></button>
															<label for="room_id">Room</label>
															<div class="row">
																<?php foreach ($room_type as $key => $row) { ?>
																	<div class="col-12 col-sm-6 pt-2 imgContainer">
																		<img src="<?php echo base_url($row['file_location'].$row['photo_title']); ?>" width="350" height="250" id="image_<?php echo $row['ID']; ?>">
																		<div id="imgOverlayText_<?php echo $row['ID']; ?>"></div>
																		<br>
																		<?php if(!empty($ID) && $row['ID'] && $booking_room[0]['room_id'] == $row['ID']){ ?>
																			<input type="radio" name="room_id" class="room_id" id="room_id_<?php echo $row['ID']; ?>" checked value="<?php echo $row['ID']; ?>">
																		<?php } else { ?>
																			<input type="radio" name="room_id" class="room_id" id="room_id_<?php echo $row['ID']; ?>" value="<?php echo $row['ID']; ?>">
																		<?php } ?>
																		<?php echo (!empty($row['location']))?$row['room'].' - '.$row['location']:$row['room']; ?>
																	</div>
																<?php } ?>
															</div>
														</div>
													</div>
												</div>

												<!-- <div class="form-row">
													<div class="col-6">
														<?php if(!empty($booking_room[0]['other_room'])){ ?>
															<input type="checkbox" name="other_room" id="other_room" value="1" onchange="open_hidden_other_room(this);" checked>
															<label for="other_room">Other Room</label>
															<input type="text" class="form-control" name="other_room_id" id="other_room_id" value="<?php echo $booking_room[0]['other_room']; ?>">
														<?php } else { ?>
															<input type="checkbox" name="other_room" id="other_room" value="1" onchange="open_hidden_other_room(this);">
															<label for="other_room">Other Room</label>
															<input type="text" class="form-control" name="other_room_id" id="other_room_id" hidden >
														<?php } ?>
													</div>
												</div> -->

												<?php if($ID){ ?>
													<?php if($_SESSION['user']['id'] == $booking_room[0]['createdBY']){ ?>
														<div class="form-row">
															<div class="col-12">
																<div class="float-right" style="padding-top: 2rem;">
																	<a class="btn btn-light" href="<?php echo base_url('hr/serviceform/meeting_list'); ?>">Cancel</a>
																	<button type="submit" class="btn btn-primary" id="submitBtn">Submit</button>
																</div> 
															</div>
														</div>
													<?php } ?>
												<?php } else { ?>
													<div class="form-row">
														<div class="col-12">
															<div class="float-right" style="padding-top: 2rem;">
																<a class="btn btn-light" href="<?php echo base_url('hr/serviceform/meeting_list'); ?>">Cancel</a>
																<!-- <button type="button" class="btn btn-primary" id="submitBtn" disabled style="cursor: not-allowed;">Submit</button> -->
																<button type="submit" class="btn btn-primary" id="submitBtn" onclick="check_radio_btn()">Submit</button>
															</div> 
														</div>
													</div>
												<?php } ?>
											</div>
										</form>
									</form>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</section>

<!-- modal add and listing meal detail -->
<div class="modal fade d-print-none" id="update_meal_modal" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="modal_title">Add/Update Meal</h5>&emsp;
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <form id="mealForm" class="form">
	            <div class="modal-body">
	                <div class="row">
	                    <div class="col-12">
	                        <label>Meal Type</label>
	                        <input type="text" class="form-control" name="modal_meal_type" id="modal_meal_type" disabled>
	                        <input type="text" class="form-control" name="modal_meal_type_id" id="modal_meal_type_id" hidden>
	                    </div>
	                </div>

	                <div class="row">
	                    <div class="col-12">
	                        <label>Menu</label>
	                        <input type="text" class="form-control" name="modal_meal_menu" id="modal_meal_menu">
	                    </div>
	                </div>

	                <div class="row pt-3">
	                	<div class="col-12">
		                	<div class="btn-group float-right">
								<button type="button" class="btn btn-light" data-dismiss="modal">Cancel</button>
								<button type="button" id="saveMealBtn" class="btn btn-primary">Save</button>
							</div>
						</div>
	                </div>

	                <hr>

	                <div class="row">
	                    <div class="col-12">
	                        <label>List Menu</label>
	                        <div class="table-responsive">
	                            <table id="filter_table_menu" class="table table-bordered">
	                                <thead>
	                                	<th>#</th>
	                                	<th>Menu</th>
	                                	<th>Action</th>
	                                </thead>
	                                <tbody></tbody>
	                            </table>
	                        </div>
	                    </div>
	                </div>

	                <br>

	                <div class="modal-footer">
					</div>
	            </div>
	        </form>
        </div>
    </div>
</div>
<!-- modal add and listing meal detail -->

<!-- modal edit existing meal detail -->
<div class="modal fade d-print-none" id="update_menu_modal" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="modal_title">Update Menu</h5>&emsp;
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>

            <form id="updateMealForm" class="form">
	            <div class="modal-body">
	                <div class="row">
	                    <div class="col-12">
	                        <label>Menu</label>
	                        <input type="text" class="form-control" name="edit_modal_meal_menu" id="edit_modal_meal_menu">
	                        <input type="text" class="form-control" name="edit_modal_menu_id" id="edit_modal_menu_id" hidden>
	                    </div>
	                </div>

	                <br>

		            <div class="modal-footer">
						<div class="btn-group float-right">
							<button type="button" class="btn btn-light" data-dismiss="modal">Cancel</button>
							<button type="button" id="updateMealBtn" class="btn btn-primary">Save</button>
						</div>
					</div>
	            </div>
	        </form>
        </div>
    </div>
</div>
<!-- modal edit existing meal detail -->

<!-- modal add and listing package detail -->
<div class="modal fade d-print-none" id="update_package_modal" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="package_modal_title">Add/Update Package</h5>&emsp;
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <form id="packageForm" class="form">
	            <div class="modal-body">
	                <div class="row">
	                    <div class="col-12">
	                        <label>Package</label>
	                        <input type="text" class="form-control" name="modal_package" id="modal_package" required>
	                    </div>
	                </div>

	                <div class="row">
	                    <div class="col-12">
	                        <label>Price</label>
	                        <input type="text" class="form-control" name="modal_package_price" id="modal_package_price" required>
	                    </div>
	                </div>

	                <div class="row pt-3">
	                	<div class="col-12">
		                	<div class="btn-group float-right">
								<button type="button" class="btn btn-light" data-dismiss="modal">Cancel</button>
								<button type="button" id="savePackageBtn" class="btn btn-primary">Save</button>
							</div>
						</div>
	                </div>

	                <hr>

	                <div class="row">
	                    <div class="col-12">
	                        <label>List Package</label>
	                        <div class="table-responsive">
	                            <table id="filter_table_package" class="table table-bordered">
	                                <thead>
	                                	<th width="1%">#</th>
	                                	<th width="70%">Package</th>
	                                	<th width="20%">Price</th>
	                                	<th width="9%">Action</th>
	                                </thead>
	                                <tbody>
	                                	<?php if($package) foreach($package as $key => $pck){ ?>
											<tr>
												<td class="text-center"><?php echo $key+1; ?></td>
												<td><?php echo $pck['package']; ?></td>
												<td class="text-center"><?php echo 'RM'.number_format($pck['price'],2); ?></td>
												<td>
													<div class="text-center">
														<button type="button" class="btn btn-sm btn-warning" data-package="<?php echo $pck['package']; ?>" data-id="<?php echo $pck['ID']; ?>" data-price="<?php echo $pck['price'] ?>" onclick="update_package(this)" data-trigger="hover" data-tooltip="tooltip" title="" data-original-title="Update Package"><i class="far fa-edit"></i></button>
														<button type="button" id="deletePackageButton" class="btn btn-sm btn-danger" data-package="<?php echo $pck['package']; ?>" data-id="<?php echo $pck['ID']; ?>" data-price="<?php echo $pck['price'] ?>"  onclick="delete_package(this)" data-trigger="hover" data-tooltip="tooltip" title="" data-original-title="Delete Package"><i class="fas fa-trash"></i></button>
													</div>
												</td>
											</tr>
											<!-- <option value="<?php echo $pck['ID']; ?>"><?php echo $pck['package'].' = RM'.number_format($pck['price'],2); ?></option> -->
										<?php } ?>
	                                </tbody>
	                            </table>
	                        </div>
	                    </div>
	                </div>

	                <br>

	                <div class="modal-footer">
					</div>
	            </div>
	        </form>
        </div>
    </div>
</div>
<!-- modal add and listing package detail -->

<!-- modal update existing package detail -->
<div class="modal fade d-print-none" id="update_package_detail_modal" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="update_package_modal_title">Update Package</h5>&emsp;
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <form id="updatePackageForm" class="form">
	            <div class="modal-body">
	                <div class="row">
	                    <div class="col-12">
	                        <label>Package</label>
	                        <input type="text" class="form-control" name="modal_update_package" id="modal_update_package" required>
	                        <input type="text" class="form-control" name="modal_update_package_id" id="modal_update_package_id" required hidden>
	                    </div>
	                </div>

	                <div class="row">
	                    <div class="col-12">
	                        <label>Price</label>
	                        <input type="text" class="form-control" name="modal_update_package_price" id="modal_update_package_price" required>
	                    </div>
	                </div>

	                <div class="row pt-3">
	                	<div class="col-12">
		                	<div class="btn-group float-right">
								<button type="button" class="btn btn-light" data-dismiss="modal">Cancel</button>
								<button type="button" id="updatePackageBtn" class="btn btn-primary">Update</button>
							</div>
						</div>
	                </div>
	            </div>
	        </form>
        </div>
    </div>
</div>
<!-- modal update existing package detail -->

<!-- modal add and listing equipment detail -->
<div class="modal fade d-print-none" id="update_equipment_modal" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="equipment_modal_title">Add/Update Equipment</h5>&emsp;
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <form id="packageForm" class="form">
	            <div class="modal-body">
	                <div class="row">
	                    <div class="col-12">
	                        <label>Equipment</label>
	                        <input type="text" class="form-control" name="modal_equipment" id="modal_equipment" required>
	                    </div>
	                </div>

	                <div class="row pt-3">
	                	<div class="col-12">
		                	<div class="btn-group float-right">
								<button type="button" class="btn btn-light" data-dismiss="modal">Cancel</button>
								<button type="button" id="saveEquipmentBtn" class="btn btn-primary">Save</button>
							</div>
						</div>
	                </div>

	                <hr>

	                <div class="row">
	                    <div class="col-12">
	                        <label>List Equipment</label>
	                        <div class="table-responsive">
	                            <table id="filter_table_package" class="table table-bordered">
	                                <thead>
	                                	<th width="1%">#</th>
	                                	<th width="90%">Equipment</th>
	                                	<th width="9%">Action</th>
	                                </thead>
	                                <tbody>
	                                	<?php if($equipment) foreach($equipment as $key => $row){ ?>
											<tr>
												<td class="text-center"><?php echo $key+1; ?></td>
												<td><?php echo $row['equipment']; ?></td>
												<td>
													<div class="text-center">
														<button type="button" class="btn btn-sm btn-warning" data-equipment="<?php echo $row['equipment']; ?>" data-id="<?php echo $row['ID']; ?>" onclick="update_equipment(this)" data-trigger="hover" data-tooltip="tooltip" title="" data-original-title="Update Equipment"><i class="far fa-edit"></i></button>
														<button type="button" id="deleteEquipmentButton" class="btn btn-sm btn-danger" data-equipment="<?php echo $row['equipment']; ?>" data-id="<?php echo $row['ID']; ?>" onclick="delete_equipment(this)" data-trigger="hover" data-tooltip="tooltip" title="" data-original-title="Delete Equipment"><i class="fas fa-trash"></i></button>
													</div>
												</td>
											</tr>
										<?php } ?>
	                                </tbody>
	                            </table>
	                        </div>
	                    </div>
	                </div>

	                <br>

	                <div class="modal-footer">
					</div>
	            </div>
	        </form>
        </div>
    </div>
</div>
<!-- modal add and listing equipment detail -->

<!-- modal update existing equipment detail -->
<div class="modal fade d-print-none" id="update_equipment_detail_modal" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="update_package_modal_title">Update Package</h5>&emsp;
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <form id="updatePackageForm" class="form">
	            <div class="modal-body">
	                <div class="row">
	                    <div class="col-12">
	                        <label>Package</label>
	                        <input type="text" class="form-control" name="modal_update_package" id="modal_update_package" required>
	                        <input type="text" class="form-control" name="modal_update_package_id" id="modal_update_package_id" required hidden>
	                    </div>
	                </div>

	                <div class="row">
	                    <div class="col-12">
	                        <label>Price</label>
	                        <input type="text" class="form-control" name="modal_update_package_price" id="modal_update_package_price" required>
	                    </div>
	                </div>

	                <div class="row pt-3">
	                	<div class="col-12">
		                	<div class="btn-group float-right">
								<button type="button" class="btn btn-light" data-dismiss="modal">Cancel</button>
								<button type="button" id="updatePackageBtn" class="btn btn-primary">Update</button>
							</div>
						</div>
	                </div>
	            </div>
	        </form>
        </div>
    </div>
</div>
<!-- modal update existing equipment detail -->

<!-- modal update listing room detail -->
<div class="modal fade d-print-none" id="update_room_modal" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="room_modal_title">Add/Update Room</h5>&emsp;
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <form id="roomForm" class="form">
	            <div class="modal-body">
	                <div class="row">
	                    <div class="col-12">
	                        <label>Room</label>
	                        <input type="text" class="form-control" name="modal_room" id="modal_room" required>
	                    </div>
	                </div>

	                <div class="row">
	                    <div class="col-12">
	                        <label>Location</label>
	                        <input type="text" class="form-control" name="modal_room_location" id="modal_room_location" required>
	                    </div>
	                </div>

	                <div class="row pt-3">
	                	<div class="col-12">
		                	<div class="btn-group float-right">
								<button type="button" class="btn btn-light" data-dismiss="modal">Cancel</button>
								<button type="button" id="saveRoomBtn" class="btn btn-primary">Save</button>
							</div>
						</div>
	                </div>

	                <hr>

	                <div class="row">
	                    <div class="col-12">
	                        <label>List Room</label>
	                        <div class="table-responsive">
	                            <table id="filter_table_room" class="table table-bordered">
	                                <thead>
	                                	<th width="1%">#</th>
	                                	<th width="70%">Room - Location</th>
	                                	<th width="20%">Room Picture</th>
	                                	<th width="9%">Action</th>
	                                </thead>
	                                <tbody>
	                                	<?php if($room) foreach($room as $key => $pck){ ?>
											<tr>
												<td class="text-center"><?php echo $key+1; ?></td>
												<td><?php echo (!empty($row['location']))?$row['room'].' - '.$row['location']:$row['room']; ?></td>
												<td><img src="<?php echo base_url($row['file_location'].$row['photo_title']); ?>" width="350" height="250" id="image_<?php echo $row['ID']; ?>"></td>
												<td>
													<div class="text-center">
														<button type="button" class="btn btn-sm btn-warning" data-room="<?php echo $pck['room']; ?>" data-id="<?php echo $pck['ID']; ?>" data-price="<?php echo $pck['price'] ?>" onclick="update_room(this)" data-trigger="hover" data-tooltip="tooltip" title="" data-original-title="Update Room"><i class="far fa-edit"></i></button>
														<button type="button" id="deleteRoomButton" class="btn btn-sm btn-danger" data-room="<?php echo $pck['room']; ?>" data-id="<?php echo $pck['ID']; ?>" data-price="<?php echo $pck['price'] ?>"  onclick="delete_room(this)" data-trigger="hover" data-tooltip="tooltip" title="" data-original-title="Delete Room"><i class="fas fa-trash"></i></button>
													</div>
												</td>
											</tr>
										<?php } ?>
	                                </tbody>
	                            </table>
	                        </div>
	                    </div>
	                </div>

	                <br>

	                <div class="modal-footer">
					</div>
	            </div>
	        </form>
        </div>
    </div>
</div>
<!-- modal update listing room detail -->

<?php echo (!empty($approval))?$approval:''; ?>

<script type="text/javascript">
	$(document).ready(function(){
		var fc_event= '';
		var resource = <?php echo $resource;?>;

		var fullcalendar = $('#calendar').fullCalendar({ 
			themeSystem: 'bootstrap4',
			header: 
			{
				left: 'prev,next today',
				center: 'title',
				right: 'month,listMonth'
			},
			buttonText: {
				today: 'Today',
				month: 'Calendar',
				listMonth: 'List'
			},

            navLinks: true, // can click day/week names to navigate views
            editable: true,
            eventLimit: true, // allow "more" link when too many events
            events: <?php echo $fc_event; ?>,

            eventMouseover: function (data, event, param, resource = <?php echo $resource;?>) {
            	var js_res = JSON.parse(JSON.stringify(resource));
            	var hover_item = js_res[data.id];
            	var title = JSON.stringify(data.title);
            	var start_date = moment(hover_item.start_date).format('DD-MM-YYYY');
            	var end_date = moment(hover_item.end_date).format('DD-MM-YYYY');


            	if(hover_item.room_id == 7)
            	{
            		var room = hover_item.other_room;
            	} else {
            		var room = hover_item.room;
            	}

            	tooltip = '<div class="tooltipevent"> Requester : '+hover_item.name+'['+hover_item.staff_id+']'+'<br/> Email : '+hover_item.email+'<br/> Room : '+room+'<br/> Start Date : '+start_date+'<br/> End Date : '+end_date+'<br/>Start Time : '+hover_item.start_time+'<br/>End Time : '+hover_item.end_time+'<br/>Department : '+hover_item.dept_name+'/'+hover_item.branchName+'</div>';

            	$("body").append(tooltip);
            	$(this).mouseover(function (e) {
            		$(this).css('z-index', 10000);
            		$('.tooltipevent').fadeIn('500');
            		$('.tooltipevent').fadeTo('10', 1.9);
            		}).mousemove(function (e) {
            		$('.tooltipevent').css('top', e.pageY + 10);
            		$('.tooltipevent').css('left', e.pageX + 20);
            	});
            },

            eventMouseout: function(data, event) {
            	$(this).css('z-index', 8);
            	$('.tooltipevent').remove();
            },
        });

		fullcalendar.fullCalendar();

		check_booking_date();

	    if('<?php echo $ID; ?>' > 0) selected_equipment('<?php echo $booking_room[0]['equipment_id']; ?>');
	});

	function open_hidden_other_menu(elem) 
	{
		let input_name_id = $(elem).val();
		if(document.getElementById('other_menu_id').checked)
		{
			$('#other_menu').removeAttr('hidden');
		}else {
			$('#other_menu').attr('hidden','hidden');
		}
	}

	function open_hidden_special_request(elem) 
	{
		let input_name_id = $(elem).val();
		if(document.getElementById('special_request_id').checked)
		{
			$('#special_request').removeAttr('hidden');
		}else {
			$('#special_request').attr('hidden','hidden');
		}
	}

	function open_hidden_other_room(elem) 
	{
		let input_name_id = $(elem).val();
		if(document.getElementById('other_room').checked)
		{
			$('#other_room_id').removeAttr('hidden');
		}else {
			$('#other_room_id').attr('hidden','hidden');
		}
	}

	function open_modal(mode, type)
	{
		if(mode == 'meal'){	
			clearForm('#mealForm');

			var table = $('#filter_table_menu').DataTable();
			table.clear().draw();
			
			$.ajax({
				url:'<?php echo base_url('hr/serviceform/getMealMenu') ?>',
				data: {
					type : type,
				},
				type: 'post',
				dataType: 'json',
				success: (data) => {
					if(data.status == "Success") {
						let menu = data.menu;

						if(menu != null)
						{
							$.each(menu,function(key,content)
							{
								var btn_edit = '<button type="button" class="btn btn-sm btn-warning" data-menu="'+content.menu+'" data-id="'+content.ID+'" data-type="'+type+'" onclick="update_meal(this)" data-trigger="hover" data-tooltip="tooltip" title="" data-original-title="Update Breakfast Menu"><i class="far fa-edit"></i></button>';
								
								var btn_delete = '<button type="button" id="deleteButton" class="btn btn-sm btn-danger" data-menu="'+content.menu+'" data-id="'+content.ID+'" data-type="'+type+'" onclick="delete_meal(this)" data-trigger="hover" data-tooltip="tooltip" title="" data-original-title="Update Breakfast Menu"><i class="fas fa-trash"></i></button>';

								table.row.add({
		                            0   : '<div class="text-center">'+(key + 1)+'</div>',
		                            1   : content.menu,
		                            2   : '<div class="text-center">'+btn_edit+btn_delete+'</div>',
		                        }).draw();
							});

							$('#filter_table_menu').DataTable().destroy();
						}
					}
				}
			});
			
			if(type == "Breakfast") $('#modal_meal_type_id').val(0);
			if(type == "Lunch") $('#modal_meal_type_id').val(1);
			if(type == "Hi-Tea") $('#modal_meal_type_id').val(2);
			
			$('#modal_title').text('Add/Update '+type+' Menu');
			$('#modal_meal_type').val(type);
			$('#saveMealBtn').attr('onclick', 'saveMeal()');
			$('#update_meal_modal').modal('show');
		}else if(mode == 'package'){
			$('#modal_title_package').text('Add/Update Package');
			$('#savePackageBtn').attr('onclick', 'savePackage()');
			$('#update_package_modal').modal('show');
			$('#filter_table_package').DataTable().destroy();
		}else if(mode == 'equipment'){
			$('#modal_title_equipment').text('Add/Update Equipment');
			$('#saveEquipmentBtn').attr('onclick', 'saveEquipment()');
			$('#update_equipment_modal').modal('show');
			$('#filter_table_equipment').DataTable().destroy();
		}else if(mode == 'room'){
			$('#modal_title_room').text('Add/Update Equipment');
			$('#saveRoonBtn').attr('onclick', 'saveEquipment()');
			$('#update_room_modal').modal('show');
			$('#filter_table_room').DataTable().destroy();
		}
	}

	function update_meal(elem)
	{
		var menu_id = $(elem).data('id');
		var menu = $(elem).data('menu');

		$('#edit_modal_menu_id').val(menu_id);
		$('#edit_modal_meal_menu').val(menu);
		$('#edit_modal_meal_menu').val(menu);
		$('#updateMealBtn').attr('onclick', 'updateMeal()');
		$('#update_menu_modal').modal('show');
	}

    function saveMeal() 
	{
		var type 	= $('#modal_meal_type').val();
		var type_id = $('#modal_meal_type_id').val();
		var menu 	= $('#modal_meal_menu').val();
		
        validateForm("#saveMealBtn", "Add "+menu+" to "+type+" list?", function() {
            $.ajax({
                url:'<?php echo base_url('hr/serviceform/updateMealMenu/add') ?>',
                data: {
                    type : type,
                    type_id : type_id,
                    menu : menu,
                },
                type: 'post',
                dataType: 'json',
                success: (data) => {
                    if(data.status == "Success") {

                        localStorage.setItem("status", data.status);
                        localStorage.setItem("msg", data.msg);

                        location.reload();
                    }
                }
            });
        });
    }

    function updateMeal() 
	{
		var menu 		= $('#edit_modal_meal_menu').val();
		var menu_id 	= $('#edit_modal_menu_id').val();
		
        validateForm("#updateMealBtn", "Update to "+menu+"?", function() {
            $.ajax({
                url:'<?php echo base_url('hr/serviceform/updateMealMenu') ?>',
                data: {
                    menu : menu,
                    menu_id : menu_id,
                },
                type: 'post',
                dataType: 'json',
                success: (data) => {
                    if(data.status == "Success") {

                        localStorage.setItem("status", data.status);
                        localStorage.setItem("msg", data.msg);

                        location.reload();
                    }
                }
            });
        });
    }

    function delete_meal(elem) 
	{
		var menu_id = $(elem).data('id');
		var menu = $(elem).data('menu');
		var type = $(elem).data('type');

        validateForm("#deleteButton", "Delete "+menu+" from "+type+" list?", function() {
            $.ajax({
                url:'<?php echo base_url('hr/serviceform/updateMealMenu/delete') ?>',
                data: {
                    menu_id : menu_id,
                    menu : menu,
                    type : type,
                },
                type: 'post',
                dataType: 'json',
                success: (data) => {
                    if(data.status == "Success") {

                        localStorage.setItem("status", data.status);
                        localStorage.setItem("msg", data.msg);

                        location.reload();
                    }
                }
            });
        });
    }

    function check_booking_date(mode = '')
    {
    	var start_date 	= $('#start_date').val();
    	var end_date 	= $('#end_date').val();
		var start_time 	= $('#start_time').val();
		var end_time 	= $('#end_time').val();
		var room_id 	= 0;
		// var mode_value 	= $('#'+mode).val();
		// var room_id 	= $("input:radio[name=room_id]:checked").val();

		<?php if($room_type) foreach($room_type as $key => $row) { ?>
			$('#imgOverlayText_'+'<?php echo $row['room_id']; ?>').html('');
    		$('#room_id_'+'<?php echo $row['room_id']; ?>').removeAttr('disabled');
    		$('#room_id_'+'<?php echo $row['room_id']; ?>').css("cursor","default");
    		$('#image_'+'<?php echo $row['room_id']; ?>').css({"filter":"","-webkit-filter":""});
    		if($('#room_id_'+'<?php echo $row['room_id']; ?>').is(':checked') == true)
    		{
    			room_id = '<?php echo $row['room_id']; ?>';
    		}
		<?php } ?>

		if((start_date && end_date && start_time && end_time) != '')
		{
			if((moment(start_date,"YYYY-MM-DD").format("X") <= moment(end_date,"YYYY-MM-DD").format("X")) && (moment(start_time,"HH:mm").format("X") <= moment(end_time,"HH:mm").format("X")))
			{
	    		$('#booking_detail').css({"filter":"","-webkit-filter":"","pointer-events":"","cursor":"default"});
	    		$('#complete_fill_note').addClass('d-none');
				
				$.ajax({
		            url:'<?php echo base_url('hr/serviceform/getBookingDate/meeting') ?>',
		            data: {
		            	id 			: '<?php echo $ID; ?>',
		                start_date 	: start_date,
		                end_date	: end_date,
		                start_time 	: start_time,
						end_time	: end_time,
						room_id		: room_id,
		                // mode_value 	: mode+'->'+mode_value,
		            },
		            type: 'post',
		            dataType: 'json',
		            success: (data) => {
		                if(data.status == "Success") {
		                 	// iziToast.success({
							// 	title: 'Success',
							// 	message: data.msg
							// });
		                }else{
		                	// iziToast.error({
							// 	title: 'Error',
							// 	message: data.msg
							// });

							var existingBooking = data.getBookingData;
							// console.log(existingBooking);
							$(existingBooking).each(function(key,row){
								var temp_text_overlay = 'Start Date : '+moment(row.start_date).format('DD-MM-YYYY')+'<br>Start Time : '+row.start_time+'<br>End Date : '+moment(row.end_date).format('DD-MM-YYYY')+'<br>End Time : '+row.end_time+'<br>Department : ['+row.dept_name+' / '+row.branchName+']';

								<?php if($ID){ ?>
									if((row.room_id != '<?php echo $booking_room[0]['room_id']; ?>') || (row.start_date != '<?php echo $booking_room[0]['start_date']; ?>')|| (row.end_date != '<?php echo $booking_room[0]['end_date']; ?>') || (row.start_time != '<?php echo $booking_room[0]['start_time']; ?>') || (row.end_time != '<?php echo $booking_room[0]['end_time']; ?>')){
										$('#imgOverlayText_'+row.room_id).append('<div class="imgOverlay"><div class="imgText">'+temp_text_overlay+'</div></div>');
				                		$('#room_id_'+row.room_id).attr('disabled', 'disabled');
				                		$('#room_id_'+row.room_id).css("cursor","not-allowed");
				                		$('#image_'+row.room_id).css({"filter":"blur(5px)","-webkit-filter":"blur(5px)"});

				                		if($('#room_id_'+row.room_id).is(':checked')) $('#room_id_'+row.room_id).prop('checked', false);
				                	}
			                	<?php }else{ ?>
									$('#imgOverlayText_'+row.room_id).append('<div class="imgOverlay"><div class="imgText">'+temp_text_overlay+'</div></div>');
			                		$('#room_id_'+row.room_id).attr('disabled', 'disabled');
			                		$('#room_id_'+row.room_id).css("cursor","not-allowed");
			                		$('#image_'+row.room_id).css({"filter":"blur(5px)","-webkit-filter":"blur(5px)"});
			                	<?php } ?>
							});

		                 	//$('#submitBtn').attr('disabled', 'disabled');
							// $('#submitBtn').css("cursor","not-allowed");
		                 	//$('#submitBtn').prop('type', 'button');
		                }
		            }
		        });
			}else{
				$('#booking_detail').css({"filter":"blur(5px)","-webkit-filter":"blur(5px)","pointer-events":"none","cursor":"not-allowed"});
    			$('#complete_fill_note').removeClass('d-none');

				iziToast.error({
                    position: 'bottomRight',
                    message: 'Date / Time Invalid. Please select another Date / Time.'
                });
			}
		}else{
    		$('#booking_detail').css({"filter":"blur(5px)","-webkit-filter":"blur(5px)","pointer-events":"none","cursor":"not-allowed"});
    		$('#complete_fill_note').removeClass('d-none');
		}
    }

    function update_package(elem) 
    {
		var package_id 		= $(elem).data('id');
		var package 		= $(elem).data('package');
		var package_price 	= $(elem).data('price');

		$('#modal_update_package_id').val(package_id);
		$('#modal_update_package').val(package);
		$('#modal_update_package_price').val(package_price);

		$('#updatePackageBtn').attr('onclick', 'updatePackage()');
		$('#update_package_detail_modal').modal('show');
	}

    function updatePackage() 
	{
		var package_id 		= $('#modal_update_package_id').val();
		var package 		= $('#modal_update_package').val();
		var package_price 	= $('#modal_update_package_price').val();
		
        validateForm("#updatePackageBtn", "Update to "+package+' = RM'+parseFloat(package_price).toFixed(2).replace(/(\d)(?=(\d{3})+(?!\d))/g, "$1,")+"?", function() {
            $.ajax({
                url:'<?php echo base_url('hr/serviceform/updateMeetingPackage') ?>',
                data: {
                    package_id 		: package_id,
                    package 		: package,
                    package_price 	: package_price,
                },
                type: 'post',
                dataType: 'json',
                success: (data) => {
                    if(data.status == "Success") {

                        localStorage.setItem("status", data.status);
                        localStorage.setItem("msg", data.msg);

                        location.reload();
                    }
                }
            });
        });
    }

    function delete_package(elem)
	{
		var package_id 		= $(elem).data('id');
		var package 		= $(elem).data('package');
		var package_price 	= $(elem).data('price');
		
        validateForm("#deletePackageButton", "Delete "+package+' = RM'+parseFloat(package_price).toFixed(2).replace(/(\d)(?=(\d{3})+(?!\d))/g, "$1,")+" from the list?", function() {
            $.ajax({
                url:'<?php echo base_url('hr/serviceform/updateMeetingPackage/delete') ?>',
                data: {
                    package_id 		: package_id,
                    package 		: package,
                    package_price 	: package_price,
                },
                type: 'post',
                dataType: 'json',
                success: (data) => {
                    if(data.status == "Success") {

                        localStorage.setItem("status", data.status);
                        localStorage.setItem("msg", data.msg);

                        location.reload();
                    }
                }
            });
        });
    }

    function savePackage() 
	{
		var package 		= $('#modal_package').val();
		var package_price 	= $('#modal_package_price').val();
		
        validateForm("#savePackageBtn", "Add "+package+' = RM'+parseFloat(package_price).toFixed(2).replace(/(\d)(?=(\d{3})+(?!\d))/g, "$1,")+" to the list?", function() {
            $.ajax({
                url:'<?php echo base_url('hr/serviceform/updateMeetingPackage/add') ?>',
                data: {
                    package 		: package,
                    package_price 	: package_price,
                },
                type: 'post',
                dataType: 'json',
                success: (data) => {
                    if(data.status == "Success") {

                        localStorage.setItem("status", data.status);
                        localStorage.setItem("msg", data.msg);

                        location.reload();
                    }
                }
            });
        });
    }

    function selected_equipment(equipment_id)
	{
		var equipment_id = equipment_id.split(',');

		$('#equipment_id').val(equipment_id).selectpicker('refresh');
	}

	function check_radio_btn()
	{
		var rb_vip = $('.vip').is(':checked');
				
		if(rb_vip == false){
			$('#error').removeClass("d-none");
		}else{
			$('#error').addClass("d-none");
		}
	}
</script>