<style>

/* Create two equal columns that sits next to each other */
.column {
  flex: 50%;
  padding: 10px;
  z-index: 1110!important;
}

/* The container */

.container {
  display: block;
  position: relative;
  padding-left: 35px;
  margin-bottom: 12px;
  cursor: pointer;
  font-size: 22px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Hide the browser's default checkbox */

.container input {
  /*position: absolute;*/
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

/* Create a custom checkbox */
.checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 25px;
  width: 25px;
  background-color: #eee;
}

/* On mouse-over, add a grey background color */
.container:hover input ~ .checkmark {
  background-color: #ccc;
}

/* When the checkbox is checked, add a blue background */
.container input:checked ~ .checkmark {
  background-color: #2196F3;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the checkmark when checked */
.container input:checked ~ .checkmark:after {
  display: block;
}

/* Style the checkmark/indicator */
.container .checkmark:after {
  left: 9px;
  top: 5px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}
</style>
<div class="form-horizontal">
   <div id="">
        <ul class="nav nav-tabs">
            <li class="active"><a href="#job-agent-general" data-toggle="tab">On Site Report</a></li>
            <li><a href="#job-agent-checklist" data-toggle="tab">Checklist</a></li>
        </ul>
        <div class="tab-content clearfix">
            <div class="tab-pane active" id="job-agent-general">
                    <div class="column" >
                    
                      <div class="column">
                            <div class="row">
                                
                                <div class="form-group">
                                      <label style="text-align:left;padding-left:40px;" for="txtStartDateAgent" class="col-sm-2 control-label">Start Date</label>
                                        <div class="col-lg-2" >
                                            <input type="text" style="min-width:100px;" onchange="onOverrideToChangeStatus()" class="form-control" id="txtStartDateAgent"  value="<?php echo $start_date; ?>" <?php echo $buttonDisable; ?>>
                                        </div>
                                        <label ></label>
                                        <div class="col-lg-2" >
                                            <div class="input-group bootstrap-timepicker timepicker">
                                                <input style="min-width:85px;" id="txtStartTimeAgent" onchange="onOverrideToChangeStatus()" type="text" class="form-control input-small" value="<?php echo $start_time; ?>" <?php echo $buttonDisable; ?>>
                                                <span class="input-group-addon"><i class="glyphicon glyphicon-time"></i></span>
                                            </div>
                                        </div>
                                        <!-- <div class="form-group">
											<button type="button" class="btn btn-primary" id="btnStartDateAgent" onclick="startAgentAssignment('<?php echo $jobDetailId; ?>');" <?php echo $buttonDisable; ?>><i class="fa fa-play"></i> Start</button>
										</div> -->
                                </div>
                            </div>
                            <div class="row">
                                <div class="form-group">
                                    <label style="text-align:left;padding-left:40px;" for="txtEndDateAgent" class="col-sm-2 control-label">End Date</label>
                                    <div class="col-sm-2">
                                        <input type="text" style="min-width:100px;" class="form-control" id="txtEndDateAgent"  onchange="onOverrideToChangeStatus()" value="<?php echo $end_date; ?>" <?php echo $buttonDisable; ?>>
                                    </div>
                                  <div class="col-sm-2" >
                                      <div class="input-group bootstrap-timepicker timepicker">
                                      <input id="txtEndTimeAgent" style="min-width:85px;" type="text" class="form-control input-small" onchange="onOverrideToChangeStatus()" value="<?php echo $end_time; ?>" <?php echo $buttonDisable; ?>>
                                      <span class="input-group-addon"><i class="glyphicon glyphicon-time"></i></span>
                                      </div>
                                  </div>
                                  <div>
                                  <label style="text-align:left;padding-left:40px;" for="txtOverrrideHours" class="col-sm-2 control-label">Override Hours</label>
                                    <div class="col-sm-1" >
                                        <input type="number" style="min-width:50px;" class="form-control" id="txtOverrrideHours" disabled>
                                    </div>
                                  </div>
                                  
                                    <!-- <div class="form-group">
										<button type="button" class="btn btn-danger" id="btnEndService" <?php echo $buttonDisable; ?>><i class="fa fa-stop"></i> End</button>
									</div> -->
                                </div>
                            </div>
                            <div class="row">
                                <div class="form-group">
                                    <label style="text-align:left;;padding-left:40px;" for="txtEndDateAgent" class="col-sm-2 control-label"></label>
                                    <div class="col-sm-2">
                                      <input type="checkbox" id="chkBillable" <?php echo $chk_billable; ?> <?php echo $buttonDisable; ?>>
                                      <span>Billable</span>
                                    </div>
                                    <div class="col-sm-2">
                                      <input type="checkbox" id="chkPlusHours" <?php echo $chk_addhours; ?> <?php echo $buttonDisable; ?>>
                                      <span>+ Hours</span>
                                    </div>
                                    
                                    <div class="col-sm-1">
                                      <input type="text" style="min-width:50px;text-align:right" class="form-control"  min="0"  id="txtPlusHours" value="<?php echo $add_hours; ?>" <?php echo $buttonDisable; ?>>
                                      
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="form-group">
                                    <label style="text-align:left;;padding-left:40px;" for="txtPlusDate" class="col-sm-2 control-label">Additional Date</label>
                                    <div class="col-sm-2">
                                        <input type="text" class="form-control" style="min-width:100px;" id="txtPlusDate"  value="<?php echo $additional_date; ?>" <?php echo $buttonDisable; ?>>
                                       
                                        <span> dd/mm/yyyy</span>
                                    </div>
                                  
                                  
                                </div>
                            </div>
                            <div class="row">
                                <div class="form-group">

                                    <label style="text-align:left;padding-left:40px;" for="txtDescriptionAgent" class="col-sm-2 control-label">Description</label>
                                    <div class="col-sm-6">
                                          <textarea class="form-control" placeholder="Describe what job done" name="txtDescriptionAgent" id="txtDescriptionAgent" cols="10" rows="3" <?php echo $buttonDisable; ?>><?php echo $description; ?></textarea>
                                          
                                        
                                    </div>

                                </div>
                            </div>
                            <div class="row">
                                    <div class="form-group">
                                            <label style="text-align:left;padding-left:40px;" for="txtRemarksAgent" class="col-sm-2 control-label">Remarks</label>
                                            <div class="col-sm-6">
                                                  <textarea class="form-control" name="txtRemarksAgent" id="txtRemarksAgent" cols="10" rows="3" <?php echo $buttonDisable; ?>><?php echo $remarks; ?></textarea>
                                                  
                                                
                                            </div>
                                    </div>
                            </div>
                            
                            <br>
                            <br>
                            
                            <div class="row">
                            <?php if($btnComplete == 1 && $btnAccept == 1) { ?>
                              <label style="text-align:left;padding-left:40px;" for="txtRemarksAgent" class="col-sm-2 control-label"></label>
                                <div class="col-md-3" style="float: left;text-align:center;<?php echo $style?>">
                                      <img src="<?php echo $newfile?>" style="width:100px;height:100px;" id="enlarge_photo"/>
                                </div>
                            <?php } ?>
                            </div>
                            <div class="row">
                            <label style="text-align:left;padding-left:40px;" for="txtRemarksAgent" class="col-sm-2 control-label"></label>
                                <div class="col-md-4" style="padding:5px">
                                <?php if($btnAccept == 1 && $btnComplete == 0) { ?>
                                    <!-- <label style="text-align:left;margin-bottom:5px;" for="" class="col-md-3 control-label">Signature</label> -->
                                    <canvas id="canvas" style="width:100%;height:145px;border: 1px solid #e2e5ec;border-radius: 4px;"></canvas>
                                    <input type="hidden" id="signature" name="signature">
                                    <button style="float: right;margin-bottom:20px;" type="button" class="btn btn-info" id="btnResetSign"><i class="fa fa-eraser"></i>Clear</button>
                                <?php } ?>
                                      <input style="text-align:center" id="signName" class="form-control" type="text" value="<?php echo $customer_name; ?>" <?php echo $buttonDisable; ?>>
                                  
                                  
                                </div>
                            </div>
                      </div>
                    </div>
                   
            </div>
            <br>
            <div class="tab-pane" id="job-agent-checklist">
              <div class="column" >
                    <?php echo $htmlCheckList; ?>
                    
              </div>
            </div>
        </div>
   </div>
</div>
<script type="text/javascript">
    $('#txtStartDateAgent').datepicker({
        format: "dd/mm/yyyy"
    }); 
    $('#txtStartDateAgent').on('changeDate', function(ev){
        $(this).datepicker('hide');
        onOverrideToChangeStatus();
      
    });

    $('#txtEndDateAgent').datepicker({
        format: "dd/mm/yyyy"
    }); 
    $('#txtEndDateAgent').on('changeDate', function(ev){
        $(this).datepicker('hide');
        onOverrideToChangeStatus();
      
    });

    $('#txtPlusDate').datepicker({
        format: "dd/mm/yyyy"
    }); 
    $('#txtPlusDate').on('changeDate', function(ev){
        $(this).datepicker('hide');
      
    });

    $('#txtStartTimeAgent').timepicker({
        minuteStep:1
    });

     $('#txtEndTimeAgent').timepicker({
        minuteStep:1
    });
</script>

<?php if($btnAccept == 1 && $btnComplete == 0) { ?>
<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);

						});	

						$("#btnResetSign").click(function() {
							canvas.width = canvas.width;
						});
					</script>
 <?php } ?>