<section class="container-fluid">
	<div class="row">
		<div class="col-md-6">
			<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-12">
									<div id="calendar"></div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="col-md-6">
			<div class="card bg-light-transparent" style="margin-bottom: 2rem;">
				<div class="card-header bg-white">
					<h5 class="card-title">Upcoming Hotel Booking</h5>
				</div>
				<div class="card-body">
					<div class="card bg-white no-shadow">
						<div class="card-body">
							<?php if(!empty($upcoming_request)): foreach($upcoming_request as $upcoming): ?>
								<div class="row">
									<div class="col-auto">
										<p data-trigger="hover" data-tooltip="tooltip" title="<?php echo $upcoming['dept_name'].'['.$upcoming['branchName'].']'; ?>"><?php echo $upcoming['dept_name'].'/'.$upcoming['branchName']; ?></p>
									</div>
									<div class="col text-right">
										<p><?php echo date('d-m-Y',strtotime($upcoming['checkin_date'])); ?></p>
									</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="profile" role="tabpanel" aria-labelledby="profile-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 '; ?> Hotel Booking Form</h4>
						</div>
						<div class="card-body">
							<div class="card no-shadow">
								<div class="card-body">

									<?php if(!empty($ID)){ ?>
										<form id="hotelForm" class="form" action="<?php echo base_url('hr/Serviceform/hotel_edit') ?>" method="POST">
										<?php }else{ ?>	
											<form id="hotelForm" class="form" action="<?php echo base_url('hr/Serviceform/hotel_save') ?>" method="POST">
											<?php }?>

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

											<div class="form-row">
												<div class="col-12">
													<div class="form-group">
														<h5><b>Requestor Info</b></h5>
														<hr>
														<div class="form-row">
															<div class="col-12 col-sm-6">
																<div class="form-group">
																	<label>Name</label>
																	<?php if(!empty($ID)){ ?>
																		<?php if(!empty($rsHotelList)): foreach($rsHotelList as $row): ?>
																			<input type="text" class="form-control" name="requestor_name" id="requestor_name" value="<?php echo $row['requestor']; ?>" readonly/>	
																			<input type="text" class="form-control" name="requestor_id" id="requestor_id" value="<?php echo $row['user_id']; ?>" hidden>
																		<?php endforeach;endif; } else{ ?>
																			<input type="text" class="form-control" name="requestor_name" id="requestor_name" value="<?php echo $_SESSION['user']['name']; ?>" readonly/>	
																			<input type="text" class="form-control" name="requestor_id" id="requestor_id" value="<?php echo $_SESSION['user']['id']; ?>" hidden>
																	<?php } ?>
																</div>
															</div>

															<div class="col-12 col-sm-6">
																<div class="form-group">
																	<label for="email">Email Address</label>
																	<?php if(!empty($ID)){ ?>
																		<?php if(!empty($rsHotelList)): foreach($rsHotelList as $row): ?>
																			<input type="text" class="form-control" name="email" id="email" value="<?php echo $row['primary_email']; ?>" readonly/>
																		<?php endforeach;endif; } else{ ?>
																			<input type="text" class="form-control" name="email" id="email" value="<?php echo $_SESSION['user']['email']; ?>" readonly/>
																	<?php } ?>
																</div>
															</div>

															<div class="col-12 col-sm-6">
																<div class="form-group">
																	<label for="department">Department</label>
																	<?php if(!empty($ID)){ ?>
																		<?php if(!empty($rsHotelList)): foreach($rsHotelList as $row): ?>
																			<input type="text" class="form-control" name="department" id="department" value="<?php echo $row['dept_name'].' ['.$row['branchName'].']'; ?>" readonly/>
																			<input type="text" class="form-control" name="department_id" id="department_id" value="<?php echo $row['department_id']; ?>" hidden>
																		<?php endforeach;endif; } else{ ?>
																			<input type="text" class="form-control" name="department" id="department" value="<?php echo $_SESSION['user']['department_name'].' ['.$_SESSION['user']['branch_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-6">
																<div class="form-group">
																	<label for="datereq">Date Request</label>
																	<!-- <input type="date" value="<?php// echo date("Y-m-d"); ?>" class="form-control" name="datereq" id="datereq" readonly/> -->

																	<?php if(!empty($ID)){ ?>
																		<?php if(!empty($rsHotelList)): foreach($rsHotelList as $row): ?>
																			<input type="" class="form-control" name="datereq" id="datereq" value="<?php echo (!empty($ID))?date("d-m-Y",strtotime($row['createdTS'])):''; ?>" readonly/>
																		<?php endforeach;endif; } else { ?>
																			<input type="" class="form-control" name="datereq" id="datereq" value="<?php echo date("d-m-Y"); ?>" readonly/>
																		<?php } ?>
																</div>
															</div>
														</div>

														<br>

														<h5><b>Hotel Info</b></h5>
														<hr>

														<div class="form-row">
															<div class="col-12 col-sm-6">
																<div class="form-group">
																	<label for="hotelname">Hotel Name</label>
																	<?php if(!empty($ID)){ ?>
																		<?php if(!empty($rsHotelList)): foreach($rsHotelList as $row): ?>
																			<input type="text" class="form-control" name="hotelname" id="hotelname" value="<?php echo (!empty($ID))?$row['hotel_name']:''; ?>">
																		<?php endforeach;endif; } else{ ?>
																			<input type="text" class="form-control" name="hotelname" id="hotelname" required>
																		<?php } ?>
																</div>
															</div>

															<div class="col-12 col-sm-6">
																<div class="form-group">
																	<label for="location">Location</label>
																	<?php if(!empty($ID)){ ?>
																		<?php if(!empty($rsHotelList)): foreach($rsHotelList as $row): ?>
																			<input type="text" class="form-control" name="location" id="location" value="<?php echo (!empty($ID))?$row['location']:''; ?>">
																		<?php endforeach;endif; } else{ ?>
																			<input type="text" class="form-control" name="location" id="location" required>
																	<?php } ?>
																</div>
															</div>
														
															<div class="col-12 col-sm-6">
																<div class="form-group">
																	<label for="typeroom">Type of Room</label>
																	<?php if(!empty($ID)){ ?>
																		<?php if(!empty($rsHotelList)): foreach($rsHotelList as $row): ?>
																			<input type="text" class="form-control" name="typeroom" id="typeroom" value="<?php echo (!empty($ID))?$row['room_type']:''; ?>">
																		<?php endforeach;endif; } else{ ?>
																			<input type="text" class="form-control" name="typeroom" id="typeroom" required>
																		<?php } ?>
																</div>
															</div>

															<div class="col-12 col-sm-3">
																<div class="form-group">
																	<label for="room_no">No. of Room</label>
																	<?php if(!empty($ID)){ ?>
																		<?php if(!empty($rsHotelList)): foreach($rsHotelList as $row): ?>
																			<input type="number" class="form-control" name="room_no" id="noroom" value="<?php echo (!empty($ID))?$row['room_no']:''; ?>">
																		<?php endforeach;endif; } else{ ?>
																			<input type="number" class="form-control" name="room_no" id="room_no" required>
																	<?php } ?>
																</div>
															</div>

															<div class="col-12 col-sm-3">
																<div class="form-group">
																	<label for="nopax">No. of Pax</label>
																	<?php if(!empty($ID)){ ?>
																		<?php if(!empty($rsHotelList)): foreach($rsHotelList as $row): ?>
																			<input type="number" class="form-control" name="nopax" id="nopax" min="1" value="<?php echo (!empty($ID))?$row['no_pax']:''; ?>">
																		<?php endforeach;endif; } else{ ?>
																			<input type="number" class="form-control" name="nopax" id="nopax" min="1" required>
																	<?php } ?>
																</div>
															</div>
															
															<div class="col-12 col-sm-3">
																<div class="form-group">
																	<label for="checkin_date">Check In Date</label>
																	<?php if(!empty($ID)){ ?>
																		<?php if(!empty($rsHotelList)): foreach($rsHotelList as $row): ?>
																			<input type="text" class="form-control datepicker" name="checkin_date" id="checkin_date" value="<?php echo (!empty($ID))?date('d-m-Y',strtotime($row['checkin_date'])):''; ?>">
																		<?php endforeach;endif; } else{ ?>
																			<input type="text" class="form-control datepicker" name="checkin_date" id="checkin_date" required>
																	<?php } ?>
																</div>
															</div>

															<div class="col-12 col-sm-3">
																<div class="form-group">
																	<label for="checkin_time"> Check In Time</label>
																	<?php if(!empty($ID)){ ?>
																		<?php if(!empty($rsHotelList)): foreach($rsHotelList as $row): ?>
																			<input type="time" class="form-control" name="checkin_time" id="checkin_time" value="<?php echo (!empty($ID))?$row['checkin_time']:''; ?>">
																		<?php endforeach;endif; } else{ ?>
																			<input type="time" class="form-control" name="checkin_time" id="checkin_time" required>
																	<?php } ?>
																</div>
															</div>

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

															<div class="col-12 col-sm-3">
																<div class="form-group">
																	<label for="checkout_time">Check Out Time</label>
																	<?php if(!empty($ID)){ ?>
																		<?php if(!empty($rsHotelList)): foreach($rsHotelList as $row): ?>
																			<input type="time" class="form-control" name="checkout_time" id="checkout_time" value="<?php echo (!empty($ID))?$row['checkout_time']:''; ?>">
																		<?php endforeach;endif; } else{ ?>
																			<input type="time" class="form-control" name="checkout_time" id="checkout_time" required>
																	<?php } ?>
																</div>
															</div>
														</div>

														<br>

														<h5 style="font-size: 1.1rem;"><input type="checkbox" name="non_self_booking_check" id="non_self_booking_check" onclick="checkbox(this)" style="width: 18px; height: 18px;"> <b>*Please tick if your're booking for someone else.</b></h5>
														
														<div class="d-none" id="guest_info">
															<br>
															<h5><b>Guest Info</b></h5>
															<hr>

															<div class="form-row">
																<div class="col-12">
																	<div class="form-group">
																		<label for="staff_name">Staff Name [Department] [IC No.] [Phone No.]</label>
																		<select class="form-control selectric"  name="staff_name[]" id="staff_name" required>
																			<option value="-1" disabled>-- Please Select --</option>
																			<?php if($listName) foreach($listName as $key => $gID){ 
																				$dept_sName =  ($gID['department_name'])?' ['.$gID['department_short_name'].'] ':' [N/A]';
																				$ic_no =  ($gID['ic_no'])?' ['.$gID['ic_no'].'] ':' [N/A]';
																				$phone =  ($gID['phone'])?' ['.$gID['phone'].'] ':' [N/A]';
																			?>
																				<option value="<?php echo $gID['id']; ?>"><?php echo $gID['name'].$dept_sName.$ic_no.$phone; ?></option>
																			<?php } ?>
																		</select>

																		<!-- <?php if(!empty($ID)){ ?>
																			<ol id="gID_list" style="padding-left: 1.5rem;">
																				<?php if(!empty($booking_room[0]['equipment'])): 
																					$eqpt = explode(",",$booking_room[0]['equipment']); ?>
																					<?php foreach($eqpt as $equipment): ?>
																						<li><?php echo ($equipment)?$equipment:''; ?></li>
																					<?php endforeach; ?>
																				<?php endif;?>
																			</ol>
																		<?php } ?> -->
																	</div>
																</div>

																<div class="col-12">
																	<div class="form-group">
																		<input type="checkbox" id="non_staff_check" onclick="checkbox(this);"> <label for="non_staff_name">Non-Staff Name</label>
																		<textarea class="form-control" name="non_staff_name" id="non_staff_name" rows="1" disabled></textarea>
																	</div>
																</div>

																<div class="col-12">
																	<div class="form-group">
																		<input type="checkbox" id="non_staff_check" onclick="checkbox(this);"> <label for="non_staff_name">Non-Staff Name</label>
																		<textarea class="form-control" name="non_staff_name" id="non_staff_name" rows="1" disabled></textarea>
																	</div>
																</div>
															</div>
														</div>

														<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/hotel_list/'); ?>">Cancel</a>
																	<button type="submit" class="btn btn-primary" onclick="confirmation()">Submit</button>
																</div> 
															</div>
														</div>
													</div>
												</div>
											</div>
										</form>
									</form>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</section>

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

<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%;
	}
</style>

<script>

	$(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 checkin = moment(hover_item.checkin_date).format('DD-MM-YYYY');
                	var checkout = moment(hover_item.checkout_date).format('DD-MM-YYYY');


                	tooltip = '<div class="tooltipevent"> Requester : '+hover_item.requestor+'['+hover_item.staff_id+']'+'<br/> Hotel name : '+hover_item.hotel_name+'<br/> Location : '+hover_item.location+'<br/> Check-in Date : '+checkin+'<br/> Check-out Date : '+checkout+'<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();

	});

	function confirmation() {
		confirm('Do you really want to submit the form?');
	}

	function checkbox(elem)
	{
		var non_staff_check = document.getElementById("non_staff_check");
		var non_self_booking_check = document.getElementById("non_self_booking_check");

		if(non_self_booking_check.checked == true)
		{
			$('#guest_info').removeClass('d-none');
		}else
		{
			$('#guest_info').addClass('d-none');
		}


		if(non_staff_check.checked == true)
    	{
    		$('#non_staff_name').removeAttr('disabled');
    	}else{
    		$('#non_staff_name').attr('disabled','disabled');
    	}

	}
</script>
