<style>
	.article
	{
		width: 80%;
		margin:auto;
		margin-top:10px;
	}


	.thumbnail{

		height: 100px;
		margin: 10px;    
	}
</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 ($complain as $type) { ?>
										<br><div data-trigger="hover" data-tooltip="tooltip" title="<?php echo $type['Complaint']; ?>" 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">Maintenance Request This Week</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 $detail): ?>
								<div class="row">
									<div class="col-auto">
										<p class="text-uppercase" data-trigger="hover" data-tooltip="tooltip" title="<?php echo $detail['complain_category']; ?>"><?php echo $detail['complain_category'].' [ Unit '.$detail['office_unit'].' - Floor '.$detail['floor'].' ]'; ?></p>
									</div>
									<div class="col text-right">
										<p><?php echo date('d-m-Y',strtotime($detail['createdTS'])); ?></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 '; ?>Maintenance Request Form</h4>
						</div>
						<div class="card-body">
							<div class="card no-shadow">
								<div class="card-body">
									<?php if(!empty($ID)){ ?>
										<form class="form" id="maintenanceForm" method="post" action="<?php echo base_url('hr/Serviceform/maintenance_edit') ?>" enctype="multipart/form-data" onsubmit="return confirm('Do you really want to update the form?')">
										<?php }else { ?>
											<form id="maintenanceFormSave" class="form" method="post" action="<?php echo base_url('hr/Serviceform/maintenance_save') ?>" enctype="multipart/form-data" onsubmit="return confirm('Do you really want to submit the form?')">
											<?php } ?>

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

											<?php if(!empty($maintenanceDetails)){ ?>
												<input type="text" class="form-control" name="picture_id" id="picture_id" value="<?php echo $maintenanceDetails[0]['photoID'];?>" hidden>
											<?php } ?>

											<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="reqName_id" id="reqName_id" value="<?php echo $_SESSION['user']['id']; ?>" hidden>

														<?php } else{ ?>
															<?php if(!empty($maintenanceDetails)){ ?>
																<?php foreach($maintenanceDetails as $row) { //debug($row); ?>
																	<input type="text" class="form-control" name="reqName" id="reqName" value="<?php echo $row['requestor']; ?>" readonly>

																	<input type="text" class="form-control" name="reqName_id" id="reqName_id" value="<?php echo $_SESSION['user']['id']; ?>" hidden>
																	<input type="text" class="form-control" name="approveByName" id="approveByName" value="<?php echo $row['approvedByName']; ?>" hidden>
																<?php }?>
															<?php }?>
														<?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($maintenanceDetails)): foreach($maintenanceDetails as $row): ?>
																<input type="text" class="form-control" name="email" id="email" value="<?php echo $row['email']; ?>" readonly/>
															<?php endforeach;endif; ?>
														<?php } 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($maintenanceDetails)): foreach($maintenanceDetails 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-6">
													<div class="form-group">
														<label for="reqDate">Request Date</label>
														<?php if(!empty($ID)){ ?>
															<?php if(!empty($maintenanceDetails)): foreach($maintenanceDetails 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-4">
													<div class="form-group">
														<label for="office">Office Unit</label>
														<select class="form-control" id="officeUnit" name="officeUnit" required <?php echo ($ID && $_SESSION['user']['id'] != $maintenanceDetails[0]['createdBY'] && $_SESSION['all_modules_access'][0]['access_lvl'] == 'admin')?'readonly style="pointer-events: none;"':''; ?>>
															<?php if(!empty($ID)){ ?>
																<?php if(!empty($maintenanceDetails)) foreach($maintenanceDetails as $row){ ?>
																	<option value="<?php echo (!empty($ID))?$row['office_unit']:''; ?>" selected><?php echo (!empty($ID))?$row['office_unit']:''; ?></option>
																	<option value="554">554</option>
																	<option value="555">555</option>
																	<option value="556">556</option>
																	<option value="557">557</option>
																	<option value="558">558</option>
																<?php } ?>
															<?php } else { ?>
																<option value="" disabled selected>--Please Select--</option>
																<option value="554">554</option>
																<option value="555">555</option>
																<option value="556">556</option>
																<option value="557">557</option>
																<option value="558">558</option>
															<?php } ?>
														</select>
													</div>
												</div>
												<div class="col-12 col-sm-4">
													<div class="form-group">
														<label for="maintenanceFloor">Floor</label>
														<select class="form-control" id="maintenanceFloor" name="maintenanceFloor" required <?php echo ($ID && $_SESSION['user']['id'] != $maintenanceDetails[0]['createdBY'] && $_SESSION['all_modules_access'][0]['access_lvl'] == 'admin')?'readonly style="pointer-events: none;"':''; ?>>
															<?php if(!empty($ID)){ ?>
																<?php if(!empty($maintenanceDetails)) foreach($maintenanceDetails as $row){ ?>
																	<option value="<?php echo (!empty($ID))?$row['floor']:'--Please Select--'; ?>" selected><?php echo (!empty($ID))?('level '.$row['floor']):''; ?></option>
																	<option value="Ground Floor">Ground Floor</option>
																	<option value="1">Level 1</option>
																	<option value="2">Level 2</option>
																	<option value="3">Level 3</option>
																<?php } ?>
															<?php } else { ?>
																<option value="" disabled selected>--Please Select--</option>
																<option value="Ground Floor">Ground Floor</option>
																<option value="1">Level 1</option>
																<option value="2">Level 2</option>
																<option value="3">Level 3</option>
															<?php } ?>
														</select>
													</div>
												</div>
												<div class="col-12 col-sm-4">
													<div class="form-group">
														<label for="floor">Complaint Category</label>
														<select class="form-control" id="complaintCategory" name="complaintCategory" required <?php echo ($ID && $_SESSION['user']['id'] != $maintenanceDetails[0]['createdBY'] && $_SESSION['all_modules_access'][0]['access_lvl'] == 'admin')?'readonly style="pointer-events: none;"':''; ?>>
															<?php if(!empty($ID)){ ?>
																<?php if(!empty($maintenanceDetails)) foreach($maintenanceDetails as $row){ ?>
																	<option value="<?php echo (!empty($ID))?$row['complain_category']:'--Please Select--'; ?>" selected><?php echo (!empty($ID))?$row['complain_category']:''; ?></option>
																	<option>Lights</option>
																	<option>Aircond</option>
																	<option>Washroom</option>
																	<option>Copier Machine</option>
																	<option>Furniture</option>
																	<option>Others General</option>
																	<option>Cleanliness Floor</option>
																	<option>Other</option>
																<?php } ?>
															<?php } else { ?>
																<option value="" disabled selected>--Please Select--</option>
																<option>Lights</option>
																<option>Aircond</option>
																<option>Washroom</option>
																<option>Copier Machine</option>
																<option>Furniture</option>
																<option>Others General</option>
																<option>Cleanliness Floor</option>
																<option>Other</option>
															<?php } ?>
														</select>
													</div>
												</div>
											</div>

											<div class="form-row">
												<div class="col-12">
													<div class="form-group">
														<label for="prob">Problem</label>
														<?php if(!empty($ID)){ ?>
															<?php if(!empty($maintenanceDetails)) foreach($maintenanceDetails as $row){ ?>
																<textarea rows="4" cols="50" class="form-control" name="prob" id="prob"  value="<?php echo (!empty($ID))?$row['problem']:''; ?>" required <?php echo ($ID && $_SESSION['user']['id'] != $maintenanceDetails[0]['createdBY'] && $_SESSION['all_modules_access'][0]['access_lvl'] == 'admin')?'readonly':''; ?>><?php echo (!empty($ID))?$row['problem']:''; ?></textarea> 
															<?php } ?>
														<?php } else { ?>
															<textarea rows="4" cols="50" class="form-control" name="prob" id="prob" required></textarea>
														<?php } ?>
													</div>
												</div>
											</div>	

											<div class="form-row">
												<div class="col-12 col-sm-6">
													<div class="form-group">
														<label for="picture_upload">Upload Picture</label><br>
														<?php if(!empty($ID)){ ?>
															<input type="file" class="form-control" id="picture_upload" name="picture_upload" value="" aria-describedby="attachmentHelp">
														<?php } else { ?>
															<input type="file" class="form-control" id="picture_upload" name="picture_upload"  value=""  aria-describedby="attachmentHelp">
														<?php } ?>
													</div>
												</div>
												<div class="col-12 col-sm-6">
													<div class="form-group">
														<?php if(!empty($ID)){ ?>
															<?php if(!empty($maintenanceDetails)): foreach($maintenanceDetails as $row): ?>
																<label for="curr_picture_upload">Current picture</label>
																<input class="form-control" type="text" name="curr_picture_upload" id="curr_picture_upload" value="<?php echo (!empty($ID))?$row['photo_title']:''; ?>" aria-describedby="attachmentHelp" readonly>
															<?php endforeach; endif; ?>
														<?php } ?>
													</div>	
												</div>
											</div>

											<?php if(!empty($ID) && $_SESSION['all_modules_access'][0]['access_lvl'] == 'admin'){ ?>
												<div class="form-row">
													<div class="col-12 col-md-6">
														<div class="form-group">
															<label for="fixDate">Fixed Date</label>
															<?php if(!empty($maintenanceDetails)){ foreach($maintenanceDetails as $row){ ?> 
																<?php if($row['date_fixed'] != '0000-00-00') { ?>
																	<input type="text" class="form-control datepicker" name="fixDate" id="fixDate" value="<?php echo (!empty($ID))?date('d-m-Y',strtotime($row['date_fixed'])):''; ?>">
																<?php } else { ?>
																	<?php //if($row['date_fixed'] == '0000-00-00'){ ?>
																		<input type="text" class="form-control datepicker" name="fixDate" id="fixDate" value="<?php echo (!empty($ID))?'':''; ?>">
																	<?php }?>
																<?php }
															} ?>
														</div>
													</div>

													<div class="col-12 col-md-6">
														<div class="form-group">
															<label for="sqft">Square Feet</label>
															<?php if(!empty($maintenanceDetails)){ foreach($maintenanceDetails as $row){ ?> 
																<?php if($row['sqft'] > 0) { ?>
																	<input type="text" class="form-control" name="sqft" id="sqft" value="<?php echo (!empty($ID))?$row['sqft']:''; ?>">
																<?php } else { ?>
																	<input type="text" class="form-control" name="sqft" id="sqft" value="<?php echo (!empty($ID))?'':''; ?>">
																	<?php } ?>
																<?php } ?>
															<?php } ?>
														</div>
													</div>
												</div>
											<?php } ?>								

											<div class="form-row">
												<div class="col-12" style="padding-top: 2rem;">
													<div class="float-left <?php echo ($ID)?'d-none':''; ?>">
														<table>
															<tbody>
																<tr>
																	<td class="text-center">
																		<label class="switch" data-trigger="hover" data-tooltip="tooltip" title="" data-original-title="Send me a copy of this form">
																			<input type="checkbox" name="send_email_checkbox">
																			<span class="slider round"></span>
																		</label>
																	</td>
																	<td class="p-3 py-1"><b><h6 style="">Send me a copy of this form</h6></b></td>
																</tr>
															</tbody>
														</table>
													</div>

													<div class="float-right">
														<a class="btn btn-light" href="<?php echo base_url('hr/serviceform/maintenance_list'); ?>">Cancel</a>
														<button type="submit" class="btn btn-primary"><?php echo ($ID)?'Update':'Submit'; ?></button>
													</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>
	function confirmation() {
		confirm('Do you want to submit the form?');
	}

	$(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 = moment(hover_item.createdTS).format('DD-MM-YYYY');

            	if((hover_item.date_fixed != null || hover_item.date_fixed != '' || hover_item.date_fixed != undefined) && hover_item.date_fixed != '0000-00-00'){
            		var end = moment(hover_item.date_fixed).format('DD-MM-YYYY');
            	}else{
            		var end = 'No fixed date'
            	}

            	tooltip = '<div class="tooltipevent"> Requester : '+hover_item.userName+'['+hover_item.staff_id+']'+'<br/> Email : '+hover_item.email+'<br/> Complaint : '+hover_item.complain_category+'<br/> Request Date : '+start+'<br/> Fix Date : '+end+'<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();
	});
</script>

