<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>UBIHRM | Attendance</title>
    <meta content='width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no' name='viewport'>
    <!-- Bootstrap 3.3.2 -->
    <link href="<?php echo URL;?>public/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <!-- Font Awesome Icons -->
    <link href="<?php echo URL;?>public/font-awesome-4.3.0/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
    <!-- Theme style -->
    <link href="<?php echo URL;?>public/dist/css/AdminLTE.min.css" rel="stylesheet" type="text/css" />
    
    <link href="<?php echo URL;?>public/plugins/datatables/dataTables.bootstrap.css" rel="stylesheet" type="text/css" />
    
    <link href="<?php echo URL;?>public/dist/css/skins/_all-skins.min.css" rel="stylesheet" type="text/css" />
	<?php include(VIEWS_PATH."_templates/sidebar.php");?>
	<style>
		.tooltip-inner {
            max-width: none;
            white-space: nowrap;
        }
		input[type="file"] {
    display: none;
}
		.custom-file-upload {
    
    display: inline-block;
    padding: 6px 12px;
    cursor: pointer;
			height:150px;
			width:150px;
			
			background:url('<?=URL?>public/camera.png') center;
			background-size:cover;
}
	</style>
	
	
	
	
	
	  <script> 
//var x = document.getElementById("lat");
//var y = document.getElementById("long");

function getLocation() { 
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(showPosition,error,options); 
	  // navigator.geolocation.getCurrentPosition(success, error, options)
    } else { 
        alert("Geolocation is not supported by this browser.");
		}
    }
    function error(err) {
		 alert("Please Allow to share your location");		
	}
	function options(err) {
		 alert("Other options");		
	}
function showPosition(position) { 
	
 var lat= position.coords.latitude ; 
  var lng=position.coords.longitude;
	//----------------------------
	var _url='';
	//	var x = document.getElementById("lat").value;
	//	var y = document.getElementById("long").value; 
	//	alert(x);
	//	alert(y);
		
		_url='https://maps.googleapis.com/maps/api/geocode/json?latlng='+lat+','+lng+'&key=AIzaSyDYh77SKpI6kAD1jiILwbiISZEwEOyJLtM';
//	alert(_url);

	document.getElementById('addr').value=_url;
	
	
	//	alert(_url);
		//https://maps.googleapis.com/maps/api/geocode/json?latlng=26.1876921,78.1997794&key=AIzaSyDYh77SKpI6kAD1jiILwbiISZEwEOyJLtM
//	document.getElementById("long").value='1';
	//	alert(data.results[0]['formatted_address']);

//	document.getElementById("long").value='4';
		//alert("GeoLocation : "+$scope.addr);
		//return false;
	//$scope.hastrue=true;
	//----------------------------
}
</script>
  </head>
  <body class="skin-green" ng-app="attendanceapi_daily" ng-controller="attendanceCtrl" onload="getLocation();" >
    <!-- Site wrapper -->
    <div class="wrapper">
      
      <header>
		<?php echo topmenu(1);?>
	  </header>

      <!-- Content Wrapper. Contains page content -->
      <div class="content-wrapper">
        <!-- Main content -->
        <section class="content form">
			<div class="row">
			<div class="box">
				<div class="box-body"> 
				<input type="text" id="addr" hidden />
				<input type="hidden" id="photo"  value="" />
				<center>
					<form method="POST" enctype="multipart/form-data">
					 <input type="hidden" name="file" id="file" value="" />
						<!--<label for="file-upload" class="custom-file-upload"></label>-->
						  <!------------------------------------------------------------------------->
						  <div class="row">
						  	<div class="col-sm-2">
						  	</div>
						  	<div class="col-sm-8" style="padding:20px;align:center;">
						  		<video id="video" width="50%" height="100%"  autoplay></video><br/>
								<button id="snap">Take Picture</button>
						  	</div>
						  	<div class="col-sm-2">
						  	</div>
						  </div>
						  
						  <div class="row" id="canvassection" style="display:none;">
						  	<div class="col-sm-2">
						  	</div>
						  	<div class="col-sm-8" style="padding:20px;align:center;">
						  		<canvas id="canvas" width="100%" height="100%"></canvas><br/>
						  		 <input type="button"  ng-click="uploadFile(<?php  echo $this->empid;?>,<?php  echo $this->shiftId;?>,<?php  echo $this->aid;?>);" class="btn btn-primary" id="upload" name="Done" value="OK" >
						  	</div>
						  	<div class="col-sm-2">
						  	</div>
						  </div>
					</form>
					 	
				</center>
				</div>
				<div class="overlay" ng-show="hastrue">
			  		<i class="fa fa-cog fa-spin"></i>
				</div> 		
				</div>
				
				</div> 
        </section><!-- /.content -->
        
      </div><!-- /.content-wrapper -->

      <footer class="main-footer">
        <?php footertext();?>
      </footer>
    </div><!-- ./wrapper -->

    <!-- jQuery 2.1.3 -->
    <script src="<?php echo URL;?>public/plugins/jQuery/jQuery-2.1.3.min.js"></script>
    <script src="<?php echo URL;?>public/bootstrap/js/adapter.js" type="text/javascript"></script>
    <!-- Bootstrap 3.3.2 JS -->
    <script src="<?php echo URL;?>public/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
<!--    <script src="<?php echo URL;?>public/bootstrap/js/adapter.js" type="text/javascript"></script>-->
    <script src="<?php echo URL;?>public/bootstrap/js/jquery.plugin.html2canvas.js" type="text/javascript"></script>
    <script src="<?php echo URL;?>public/bootstrap/js/html2canvas.js" type="text/javascript"></script>
	<script src="<?php echo URL;?>public/angularjs/angular.min.js" type="text/javascript"></script>
	
	<script src="<?php echo URL;?>public/plugins/datatables/jquery.dataTables.js" type="text/javascript"></script>
	<script src="<?php echo URL;?>public/plugins/datatables/dataTables.bootstrap.js" type="text/javascript"></script>
	
	<script src="<?php echo URL;?>public/angularjs/attandance_daily.js" type="text/javascript"></script>
	<script src="<?php echo URL;?>public/angularjs/alerts.js" type="text/javascript"></script>

<script type="text/javascript">
// Grab elements, create settings, etc.
var video = document.getElementById('video');

// Get access to the camera!
if(navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
    // Not adding `{ audio: true }` since we only want video now
    navigator.mediaDevices.getUserMedia({ video: true }).then(function(stream) {
	video.src = window.URL.createObjectURL(stream);
	video.play();
    });
}

// Elements for taking the snapshot
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
var video = document.getElementById('video');

// Trigger photo take
document.getElementById("snap").addEventListener("click", function() {
	document.getElementById('canvassection').style.display='block';
	context.drawImage(video, 0, 0, 100, 100);
	var image = new Image();
//	image.src = canvas.toDataURL("image/png");
//	document.getElementById("photo").value=image.src;
	
	 $('#file').val(canvas.toDataURL("image/png"));
	//alert(btoa(image.src));
	//document.getElementById("file-upload").value=document.getElementById("canvas").src;
	//alert(document.getElementById("canvas").value);
});

</script>


  </body>
</html>
