<?php $__env->startSection('content'); ?>
<div class="content-heading">
	<div>
		Absensi Personalia
	</div>
</div>
<div class="container-fluid">
	<div class="col-sm-12">
		<div class="card">
			<div class="card-header">
				<div class="jumbotron" style="background: #3a3f51;">
					<h2 class="text-white">Selamat Datang di Halaman Absensi</h2>
				</div>	
			</div>
			<div class="card-body">
				<?php if( session('msg') ): ?>
				<?php $msg = session('msg'); ?>
				<div class="alert alert-<?php echo e($msg['type']); ?> alert-remove">
					<?php echo $msg['text']; ?>

				</div>
				<?php endif; ?>
				<div class="row">
					<div class="content-wrapper">
						<div class="content-heading">Absensi RSA Purwakarta</div><!-- START timeline-->
						<!-- ul.timeline-alt-->
						<ul class="timeline">
							<li class="timeline-separator" data-datetime="Jadwal"></li><!-- START timeline item-->
							<li>
								<div class="timeline-badge primary"><em class="fa fa-user"></em></div>
								<div class="timeline-card">
									<div class="popover left">
										<h4 class="popover-header"><?php echo e(session()->get('nama')); ?></h4>
										<div class="arrow"></div>
										<div class="popover-body">
											<div class="d-flex align-items-center mb-3"><img class="mr-3 rounded-circle thumb48" src="<?php echo e(url_foto(session()->get('foto'))); ?>" alt="Image">
												<p class="m-0">
													NIK (<?php echo e(session()->get('sEmpID')); ?>)
													<br>
													Jabatan (<?php echo e($unit->data->sDescription); ?>)
												</p>
											</div>
										</div>
									</div>
								</div>
							</li><!-- END timeline item-->
							<!-- START timeline item-->
							<li class="timeline-inverted">
								<div class="timeline-badge warning"><em class="fas fa-map-marker-alt"></em></div>
								<div class="timeline-card">
									<div class="popover right">
										<h4 class="popover-header">Lokasi Sekarang</h4>
										<div class="arrow"></div>
										<div class="popover-body">
											<p id="verify"></p>
											<small id="lokasi"></small>
										</div>
									</div>
								</div>
							</li>
							<li class="timeline-separator" data-datetime="Submited"></li>
							<li class="timeline-end"><a class="timeline-badge" href="#"><em class="fa fa-plus"></em></a></li>
						</ul>
						<form action="<?php echo e(route('absensi.store')); ?>" method="POST">
							<div class="row" id="submited" style="display: none;">
								<?php echo csrf_field(); ?>
								<div class="col-sm-12 text-center">
									<button type="submit" name="tipe" value="IN" class="btn btn-success btn-sm mt-4"><h2>&nbsp;CHECK-IN</h2><span class="fa-2x mr-2 fas fa-arrow-circle-left"></span></button>
									<button type="submit" name="tipe" value="OUT" class="btn btn-warning btn-sm mt-4"><h2>&nbsp;CHECK-OUT</h2><span class="fa-2x mr-2 fas fa-arrow-circle-right"></span></button>
								</div>
							</div>
						</form>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>

<?php $__env->stopSection(); ?>
<?php $__env->startSection('scripts'); ?>
<script src="<?php echo e(mix('/js/sweetalert.js')); ?>"></script>
<script src="<?php echo e(mix('/js/datatable.js')); ?>"></script>
<script>
	var x = document.getElementById("verify");
	var submited = document.getElementById("submited");

	$(document).ready(function(){
		document.getElementById("verify").setAttribute("class", "whirl traditional"); 
		if (navigator.geolocation) {
			navigator.geolocation.getCurrentPosition(showPosition);
		} else {
			x.innerHTML = "Geolocation is not supported by this browser.";
		}
	});

	function showPosition(position) {
		verifyLocation(position.coords.longitude, position.coords.latitude);
		x.innerHTML = "Latitude: " + position.coords.latitude +
		"<br>Longitude: " + position.coords.longitude;
	}

	function verifyLocation(longitude, latitude) {
		$.get("<?php echo e(route('absensi.verify_location')); ?>",{
			longitude:longitude,
			latitude:latitude
		},function(res){
			document.getElementById("verify").setAttribute("class", "");
			if (res.VerifyLocation == 200) {
				document.getElementById("lokasi").setAttribute("class", "badge badge-success");
				document.getElementById("lokasi").innerHTML = "Anda Berada Di lokasi Anda Bekerja";
				$('#submited').attr('style','display:show;');
			}else{
				document.getElementById("lokasi").setAttribute("class", "badge badge-danger");
				document.getElementById("lokasi").innerHTML = "Anda Tidak Berada Di lokasi Anda Bekerja";
				$('#submited').attr('style','display:none;');
			}
		},'json');
	}
</script>
<?php $__env->stopSection(); ?>
<?php echo $__env->make('layouts.app', \Illuminate\Support\Arr::except(get_defined_vars(), ['__data', '__path']))->render(); ?><?php /**PATH E:\PROGRAM_JANGAN_DIHAPUS\xampp73\htdocs\idam_tech\Laravel6\rs-app\rs-presensi-web\resources\views/pages/personalia/absensi/index.blade.php ENDPATH**/ ?>