						
						<!-- begin:: Content Head -->
						<div class="kt-subheader" id="kt_subheader">
							<div class="kt-container  kt-container--fluid ">
								<div class="kt-subheader__main">
									<a class="btn btn-icon btn-danger btn-sm mr-2" href="index.pzx?c=<?php echo Util::convertLink("MobileHome") ; ?>"><i class="fa fa-home"></i></a>
									<h3 class="kt-subheader__title">Service Report</h3>
								</div>
								<div class="kt-header-mobile__toolbar" style="float:right;padding-top:0.25rem;z-index:90;">
									<a class="btn btn-icon btn-danger btn-sm" style="padding-right:0;" href="#" id="btnLogout"><i class="fa fa-sign-out-alt"></i></a>
								</div>
							</div>
						</div>

						<!-- end:: Content Head -->

						<!-- begin:: Content -->
						<div class="kt-container  kt-grid__item kt-grid__item--fluid">
							<div class="row" id="div-row">
								<div class="col-md-12">
									<!--begin::Portlet-->
									<div class="kt-portlet">
										<!--begin::Form-->
										<form class="kt-form">
											<div class="kt-portlet__body">
											<table>
											<tr>
												<td colspan="2">
													<div class="form-group">
														<label>Job Description: </label>
														<textarea class="form-control" id="txtJobDesc" rows="2" disabled></textarea>
													</div>
												</td>
											</tr>
											<tr>
												<td>
													<div class="form-group">
														<div class="input-group">
															<div class="input-group-prepend"><span class="input-group-text" id="basic-addon2"><i class="fa fa-calendar-alt" aria-hidden="true"></i></span></div>
															<input type="text" id="txtServiceStart" class="form-control" placeholder="" aria-describedby="basic-addon2" disabled>
														</div>
													</div>
												</td>
												<td>
													<div class="form-group">
														<button type="button" class="btn btn-brand" style="width:105px;white-space:nowrap;" id="btnStartService"><i class="fa fa-play"></i> Start</button>
													</div>
												</td>
											</tr>
											<tr>
												<td colspan="2">
													<div class="form-group">
														<label>Service Description: </label>
														<textarea class="form-control" id="txtServiceDesc" rows="5" placeholder="Describe what job done."></textarea>
													</div>
												</td>
											</tr>
											<tr>
												<td colspan="2">
													<div class="form-group">
														<label>Additional Information/Remarks: </label>
														<textarea class="form-control" id="txtServiceAdditional" rows="2"></textarea>
													</div>
												</td>
											</tr>
											<tr>
												<td>
													<div class="form-group">
														<div class="input-group">
															<div class="input-group-prepend"><span class="input-group-text" id="basic-addon2"><i class="fa fa-calendar-alt" aria-hidden="true"></i></span></div>
															<input type="text" id="txtServiceEnd" class="form-control" placeholder="" aria-describedby="basic-addon2" disabled>
														</div>
													</div>
												</td>
												<td>
													<div class="form-group">
														<button type="button" class="btn btn-danger" style="width:105px;white-space:nowrap;" id="btnEndService"><i class="fa fa-stop"></i> End</button>
													</div>
												</td>
											</tr>
											<tr>
												<td>
													<div class="form-group" style="width:110%;">
														<label>Signature: </label><br />
														<!-- <textarea class="form-control" id="txtServiceSignature" rows="4"></textarea> -->
														<!-- <div id="canvasDiv" style="width:100%;height:95px;border: 1px solid #e2e5ec;border-radius: 4px;">
														</div> -->
														<canvas id="canvas" style="width:100%;height:95px;border: 1px solid #e2e5ec;border-radius: 4px;"></canvas>
														<form id="signatureform" action="" style="display:none" method="post">
															<input type="hidden" id="signature" name="signature">
															<input type="hidden" name="signaturesubmit" value="1">
															<input type="hidden" id="detailid" name="detailid">
															<input type="hidden" id="serviceid" name="serviceid">
														</form>
													</div>
												</td>
												<td>
													<div class="form-group" style="vertical-align:middle;padding-left:25px;">
														<button type="button" class="btn btn-info" style="width:80px;height:40px;margin-top:20px;font-size: 0.9em;" id="btnSubmitService"><i style="font-size: 0.9em;" class="fa fa-paper-plane"></i>Submit</button><br />
														<button type="button" class="btn btn-danger" style="width:80px;height:40px;margin-top:5px;font-size: 0.9em;" id="reset-btn"><i style="font-size: 0.9em;" class="fa fa-eraser"></i>Clear</button>
													</div>
												</td>
											</tr>
											<tr>
												<td colspan="2">
													<div class="form-group">
														<label>Name: </label><br />
														<input type="text" id="txtSignName" class="form-control" maxlength="50" value="<?php echo $name; ?>" placeholder="" aria-describedby="basic-addon2">
													</div>
												</td>
											</tr>
											</table>
											</div>
										</form>
										<!--end::Form-->			
									</div>
									<!--end::Portlet-->	
									
									<!--begin::Portlet-->
									<div class="kt-portlet">
										<form class="kt-form">
											<div class="kt-portlet__body">
											<table style="width:100%;">
											<tr>
												<td style="width:100px;">
													<div class="form-group">
														<input type="checkbox" id="chkBillable" disabled /> Billable
													</div>
												</td>
												<td style="width:100px;">
													<div class="form-group">
														<input type="checkbox" id="chkPlusHours" onchange="plusHoursChange();" disabled> <span><i class="fa fa-plus"></i> hours</span>
													</div>
												</td>
												<td>
													<div class="form-group" style="max-width:50px;text-align:center;">
														<input type="text" id="txtPlusHours" class="form-control" style="text-align:center;" disabled />
													</div>
												</td>
											</tr>
											<tr>
												<td>&nbsp;
												</td>
												<td colspan="2">
													<div class="form-group">
														<div class="input-group">
															<div class="input-group-prepend"><span class="input-group-text" id="basic-addon2"><i class="fa fa-calendar-alt" aria-hidden="true"></i></span></div>
															<input type="date" id="txtPlusDate" class="form-control" placeholder="yyyy-mm-dd" disabled />
														</div>
													</div>
												</td>
											</tr>
											</table>
											</div>
										</form>		
									</div>
									<!--end::Portlet-->
									
									<!--begin::Portlet-->									
									<div class="kt-portlet">
										<div class="kt-portlet__body" style="padding-top:0;padding-bottom:0;">
											<div style="padding:10px 0;">
												<label>Upload Picture</label>
												<a class="btn btn-icon btn-secondary btn-sm mr-2" style="float:right;" id="btnAddPhoto" href="#" data-toggle="modal" data-target="#modalUpload"><i class="fa fa-plus"></i></a>
											</div>										
											<div class="table-responsive">
												<table class="table">
													<tbody id="service_attach">
														<!-- <tr>
															<td>
																<div class="kt-user-card-v2" style="padding:0;">
																	<a href="#" data-toggle="modal" data-target="#modalAttach" onclick="enlargePhoto('media/gym/treadmill4.png');">
																		<img src="media/gym/treadmill4.png" style="width:140px;height:140px"/>
																	</a>
																</div>
															</td>
															<td>
																<div class="kt-user-card-v2" style="padding:0;">
																	<a href="#" data-toggle="modal" data-target="#modalAttach" onclick="enlargePhoto('media/gym/treadmill5.png');">
																		<img src="media/gym/treadmill5.png" style="width:140px;height:140px"/>
																	</a>
																</div>
															</td>
														</tr> -->
													</tbody>
												</table>
											</div>
										</div>
									</div>
									<!--end::Portlet-->
								</div>
							</div>
							
						<!-- end:: Row -->
						</div>

						<!-- end:: Content -->
						
						<!--Begin::Modal-->
					<div class="modal fade" data-backdrop="static" tabindex="-1" role="dialog" aria-labelledby="staticBackdrop" aria-hidden="true" id="modalAttach">
						<div class="modal-dialog modal-dialog-centered" role="document">
							<div class="modal-content">
								<div class="modal-header">
									<button type="button" class="close" data-dismiss="modal" aria-label="Close">
										<i aria-hidden="true" class="fa fa-times"></i>
									</button>
								</div>
								<div class="modal-body">
									<img src="media/logos/logo.png" style="width:100%;height:100%;" id="enlarge_photo"/>
									<input type="hidden" id="txtPictureId" />
									<input type="hidden" id="txtServiceId" />
								</div>
								<div class="modal-footer">
									<button type="button" class="btn btn-danger" data-dismiss="modal" id="btnRemovePhoto" onclick="removeJobServicePicture();"><i class="fa fa-minus-circle"></i> Remove</button>
								</div>
							</div>
						</div>
					</div>
					
					<div class="modal fade" data-backdrop="static" tabindex="-1" role="dialog" aria-labelledby="staticBackdrop" aria-hidden="true" id="modalUpload">
						<div class="modal-dialog modal-dialog-centered" role="document">
							<div class="modal-content">
							<form id="form_upload" name="form_upload">
								<div class="modal-header">
									<button type="button" class="close" data-dismiss="modal" aria-label="Close">
										<i aria-hidden="true" class="fa fa-times"></i>
									</button>
								</div>
								<div class="modal-body">
									<input type="file" id="txtUploadPhoto" name="txtUploadPhoto" accept=".jpg,.jpeg,.png" onchange="onchangedPhoto(this.form);" />
								</div>
								<div class="modal-footer">
									<button type="button" class="btn btn-info" data-dismiss="modal" id="btnUploadPhoto"><i class="fa fa-upload"></i> Upload</button>
								</div>
							</form>
							</div>
						</div>
					</div>
					
					<!--End::Modal-->
					
					<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.5.0-beta4/html2canvas.min.js"></script>
					
					<script>
						var scrollTop = 0;
						$(document).ready(() => {
							var canvas = document.getElementById("canvas");
							var ctx = canvas.getContext("2d");
							ctx.strokeStyle = "#222222";
							ctx.lineWith = 2;

							// Set up mouse events for drawing
							var drawing = false;
							var mousePos = { x:0, y:0 };
							var lastPos = mousePos;

							canvas.addEventListener("mousedown", function (e) {
							drawing = true;

							lastPos = getMousePos(canvas, e);
							}, false);
							
							canvas.addEventListener("mouseup", function (e) {
							drawing = false;
							}, false);

							canvas.addEventListener("mousemove", function (e) {
							mousePos = getMousePos(canvas, e);
							}, false);
							
							// Get the position of the mouse relative to the canvas
							function getMousePos(canvasDom, mouseEvent) {
								var rect = canvasDom.getBoundingClientRect();
								return {
									x: mouseEvent.clientX - rect.left,
									y: mouseEvent.clientY - rect.top
								};
							}
							
							// Get a regular interval for drawing to the screen
							window.requestAnimFrame = (function (callback) {
								return window.requestAnimationFrame || 
								window.webkitRequestAnimationFrame ||
								window.mozRequestAnimationFrame ||
								window.oRequestAnimationFrame ||
								window.msRequestAnimaitonFrame ||
								function (callback) {
								window.setTimeout(callback, 1000/60);
								};
							})();
							
							// Draw to the canvas
							function renderCanvas() {
								if (drawing) {
									ctx.moveTo(lastPos.x, lastPos.y);
									ctx.lineTo(mousePos.x, mousePos.y);
									ctx.stroke();
									lastPos = mousePos;
								}
							}
							
							// Allow for animation
							(function drawLoop () {
								requestAnimFrame(drawLoop);
								renderCanvas();
							})();
							
							// Set up touch events for mobile, etc
							canvas.addEventListener("touchstart", function (e) {
								mousePos = getTouchPos(canvas, e);
								var touch = e.touches[0];
								var mouseEvent = new MouseEvent("mousedown", {
									clientX: touch.clientX,
									clientY: touch.clientY
								});
								canvas.dispatchEvent(mouseEvent);
							}, false);

							canvas.addEventListener("touchend", function (e) {
								var mouseEvent = new MouseEvent("mouseup", {});
								canvas.dispatchEvent(mouseEvent);
							}, false);

							canvas.addEventListener("touchmove", function (e) {
								var touch = e.touches[0];
								var mouseEvent = new MouseEvent("mousemove", {
									clientX: touch.clientX,
									clientY: touch.clientY
								});
								canvas.dispatchEvent(mouseEvent);
							}, false);
							
							// Get the position of a touch relative to the canvas
							function getTouchPos(canvasDom, touchEvent) {
								var rect = canvasDom.getBoundingClientRect();
								return {
									x: touchEvent.touches[0].clientX - rect.left,
									y: touchEvent.touches[0].clientY - rect.top
								};
							}
							
							// Prevent scrolling when touching the canvas
							var elem = document.getElementById("canvas");
							elem.addEventListener("touchstart", function (e) {
								if (e.target == canvas) {
									e.preventDefault();
								}
							}, false);

							elem.addEventListener("touchend", function (e) {
								if (e.target == canvas) {
									e.preventDefault();
								}
							}, false);

							elem.addEventListener("touchmove", function (e) {
								if (e.target == canvas) {
									e.preventDefault();
								}
							}, false);

						});	

						$("#reset-btn").click(function() {
							canvas.width = canvas.width;
						});

						$(document).ready(function() {
							document.body.scrollTop = 0; // For Safari
							document.documentElement.scrollTop = 0; // For Chrome, Firefox, IE and Opera
							$('#btnSubmitService').click(function (e) {
								submitJobService($(this));
								e.preventDefault();
							});
						});
					</script>