<?php
	//include('./models/lm/.lm.header.php');
?>

<form method="POST" enctype="multipart/form-data" action="save.php" id="myForm">
		<input type="hidden" name="img_val" id="img_val" value="" />
	</form>

<div class="hero-body">
	<div class="container has-text-centered">
		<div class="columns is-vcentered">
			<div class="column is-7">					
				
				<script src="https://rawgit.com/schmich/instascan-builds/master/instascan.min.js"></script>
					<div class="col-sm-12">
						<video id="canvas" class="p-1 border" style="width:90%;"></video>
					</div>
					<script type="text/javascript">
						var scanner = new Instascan.Scanner({ video: document.getElementById('canvas'), scanPeriod: 5, mirror: true });
						scanner.addListener('scan',function(content){
							//alert(content);
							//window.location.href=content;
							//$('#data').text(content);
							
							// preload shutter audio clip
							var shutter = new Audio();
							shutter.autoplay = false;
							shutter.src = navigator.userAgent.match(/Firefox/) ? 'assets/sounds/success.wav' : 'success.mp3';
							
							var sound_warning = new Audio();
							sound_warning.autoplay = false;
							sound_warning.src = navigator.userAgent.match(/Firefox/) ? 'assets/sounds/warning.ogg' : 'warning.mp3';
							
							request();
							
							// AJAX Here
							function request(){
																
								$.ajax({
									url:'<?=$path;?>interface/check-qrcode',
									method:'POST',
									data:{
										qrcode:content
									},
								})
								.always(function(data){
									//$('#ul').empty()
									
									setTimeout(function() {
										$('#results').empty();
										$('#data_result').empty();
										$('#data_result').append('<span id="data" class="button is-medium is-info is-outlined">Ready to scan QR Code... &nbsp; <i class="fa fa-circle-o faa-burst animated"></i></span>')
										//$('#data').addClass('is-link');
										//$('#data').text('Ready for scanning...')
										$('#dtr-table').show();
									}, 5000); 
								})
								.done(function(data){
									//$('#ul').append('<li>'+JSON.parse(data).msg)
									
									/* $.each(data, function(index){
										console.log(JSON.parse(data).msg);
									}); */	
									
									//$('#data').text(msg);
									
									if(JSON.parse(data).success == '1'){
										shutter.play();
										$('#data').addClass('is-success');
										//$('#data').text(content);
										$('#data').text(JSON.parse(data).msg);
										$('#dtr-table').hide();
										take_snapshot();
										save_snapshot();								
										$('#curr-date').text(JSON.parse(data).current_date);
										$('#dtr-status').text(JSON.parse(data).dtr_status);
										load_dtr();
										
									}else{
										sound_warning.play();
										$('#data').addClass('is-danger');
										$('#data').text('QR-Code not recognized / No record found');
									}										
									
								})
								.fail(function(data){
									//$('#ul').append('<li>'+data.statusText)
									console.log(data.statusText);
								})										
							}																	
							
							
								
								
							
							

						});
						Instascan.Camera.getCameras().then(function (cameras){
							if(cameras.length>0){
								scanner.start(cameras[0]);
								//$('[name="options"]').on('change',function(){
									//if($(this).val()==1){
										if(cameras[0]!=""){
											scanner.start(cameras[0]);
										}else{
											alert('No Front camera found!');
										}
									//}else if($(this).val()==2){
									//	if(cameras[1]!=""){
									//		scanner.start(cameras[1]);
									//	}else{
									//		alert('No Back camera found!');
									//	}
									//}
								//});
							}else{
								console.error('No cameras found.');
								alert('No cameras found.');
							}
						}).catch(function(e){
							console.error(e);
							alert(e);
						});
					</script>
				
				
			</div>
			<div class="column is-5">

				<h1 class="title is-2 pb-4">
					Non-contact <br> Daily Timekeeping
				</h1>
				<h2 class="subtitle is-4">
				   Face the camera while holding your QR-Code, wait until the scanning is finished.
				</h2>

				<p id="data_result" class="has-text-centered">
					<span id="data" class="button is-medium is-info is-outlined">
					   Ready to scan QR Code... &nbsp; <i class="fa fa-circle-o faa-burst animated"></i>			  
					</span>
				</p>
				
				<div id="results"></div>

				<div id="my_camera" style="display: none;"></div>										
				
				<br>
				<div id="dtr-table">
					<table class="table is-fullwidth" style="font-size:10px;">
						<thead>
							<tr>
								<th>Date </th>
								<th>Time In</th>
								<th>Time Out</th>
								<th>Employee No.</th>
								<th>Employee Name</th>
							</tr>
						</thead>
						<tbody id="dtr">
							<tr>
								<td>Failed to load data</td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
							</tr>
						</tbody>
					</table>
			
					
				</div>
				
				<!--<input type="submit" value="Take Screenshot Of Div Below" onclick="testin();" />-->
				
				
				
			</div>	
		</div>	
	</div>		
</div>

<!-- ----------------------------------------------------------------- -->
<!-- First, include the Webcam.js JavaScript Library -->
<script type="text/javascript" src="<?=$path;?>assets/js/webcam.min.js"></script>

<!-- Configure a few settings and attach camera -->
<script language="JavaScript">
	Webcam.set({
		width: 320,
		height: 240,
		image_format: 'jpeg',
		jpeg_quality: 90,
		flip_horiz: true,
	});
	Webcam.attach( '#my_camera' );
</script>
<!-- ----------------------------------------------------------------- -->

<script>
	
	<!-- For Webcam.js JavaScript Library -->
	function take_snapshot() {
		// take snapshot and get image data
		Webcam.snap( function(data_uri) {
			// display results in page
			document.getElementById('results').innerHTML = 
				'<br><img id="imageprev" src="'+data_uri+'"/>'+
				'<h1 class="title is-4" id="curr-date" class="title is-4">xxx</h1>'+
				'<h1 class="subtitle is-4" id="dtr-status" class="title is-4">xxx</h1>';
		} );
	}
	
	<!-- For Webcam.js JavaScript Library -->
	function save_snapshot(){
	 // Get base64 value from <img id='imageprev'> source
		var base64image = document.getElementById("imageprev").src;

		Webcam.upload( base64image, 'upload.php', function(code, text) {
		console.log('Save successfully');
		//console.log(text);
		})
	}
	
	$(document).ready(function() {
		load_dtr();
	});
	
	
	function load_dtr(){		
		$.ajax({
			url:'<?=$path;?>interface',
			method:'POST',
			data:{
				msg:'hi'
			},
		})
		.always(function(data){
			$('#dtr').empty()
		})
		.done(function(data){
			//$('#ul').append('<li>'+JSON.parse(data).msg)
			/* $.each(data, function(index){
				$("#names").append("<li>"+data[index].employeeNo+" - "+data[index].biometricsDate+"</li>")
			});	 */
			$.each(data, function(index){
				$("#dtr").append("<tr><td>"+data[index].biometricsDate+"</td><td>"+data[index].biometricsTimeIn+"</td><td>"+data[index].biometricsTimeOut+"</td><td>"+data[index].employeeNo+"</td><td>"+data[index].employeeName+"</td></tr>")
			});	
		})
		.fail(function(data){
			//$('#ul').append('<li>'+data.statusText)
			console.log(data.statusText);
		})
	}
	
	
</script>