<?php 
	session_start();
	$_SESSION['idm'] = '0';
?>
<html>
    <head>
	  <meta charset="utf-8">
	  <meta http-equiv="X-UA-Compatible" content="IE=edge">
	  <title>WAMRUS GROUP OF COMPANIES</title>
	  <!-- Tell the browser to be responsive to screen width -->
	  <meta name="viewport" content="width=device-width, initial-scale=1">
	  	<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
	  	<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
		<script type="text/javascript" src="js/instascan.min.js"></script>
		<link rel="stylesheet" href="plugins/datatables-bs4/css/dataTables.bootstrap4.min.css">
		<link rel="stylesheet" href="plugins/datatables-responsive/css/responsive.bootstrap4.min.css">
		<link rel="stylesheet" href="css/bootstrap.min.css">
		<style>
		#divvideo{
			 box-shadow: 0px 0px 1px 1px rgba(0, 0, 0, 0.1);
		}

			.warneng {
  				background-color: red;
  				color: white;
  				padding: 4px 8px;
  				text-align: center;
  				border-radius: 5px;
				font-size: 17px;
			}
			.taymen {
  				background-color: #20B2AA;
  				color: white;
  				padding: 4px 8px;
  				text-align: center;
  				border-radius: 5px;
				font-size: 17px;
			}
			.taymawt {
  				background-color: #0000CD;
  				color: white;
  				padding: 4px 8px;
  				text-align: center;
  				border-radius: 5px;
				font-size: 17px;
			}

			.button {
  				border: none;
				color: white;
				padding: 9px 20px;
				text-align: center;
				text-decoration: none;
				display: inline-block;
				font-size: 16px;
				margin: 4px 2px;
				cursor: pointer;
			}

.button1 {background-color: #04AA6D;} /* Green */
</style>

    </head>
    <body style="background:#ffe6ea">
        <nav class="navbar" style="background:#fff">
		  <div class="col-md-7">
			<div class="navbar-header">
			  <img src="database/HRIS.PNG" class="navbar-brand" href="#" height="60" width="150"></img>
			  <img src="database/Comp.PNG" class="navbar-brand" href="#" height="80" width="300"></img>
			</div>
			<ul class="nav justify-content-center">
			  <li class="nav-item active"><a href="index.php"><span class="glyphicon glyphicon-time"></span> Home</a></li>
			  <!--<li><a href="attendance.php"><span class="glyphicon glyphicon-cog"></span> Attendance </a></li>-->
			</ul>
		  </div>
		</nav>
       <div class="container">
            <div class="row">
                <div class="col-md-4 float-md-end" style="padding:5px;background:#fff;border-radius: 5px;" id="divvideo">
					<center><p class="login-box-msg"> <i class="glyphicon glyphicon-camera"></i> SCAN HERE | QR CODE ONLY </p></center>
                    <video id="preview" width="100%" style="border-radius:10px;"></video>
					<br>
					<br>
					<?php		
					if(isset($_SESSION['warn'])){
						echo "
						  <div class='alert alert-success alert-dismissible' style='background:#FFFFFF;color:#000000'>
							<button type='button' class='close' data-dismiss='alert' aria-hidden='true'>&times;</button>
							<button type='button' class='btn btn-warning text-dark'>
  									INVALID <span class='badge bg-secondary'> QRCODE </span>
							</button><br>
							".$_SESSION['warn']."
						  </div>
						";
						unset($_SESSION['warn']);
					  }
					  if(isset($_SESSION['timein'])){
						echo "
						  <div class='alert alert-success alert-dismissible' style='background:#FFFFFF;color:#000000'>
							<button type='button' class='close' data-dismiss='alert' aria-hidden='true'>&times;</button>
							<button type='button' class='btn btn-success'>
  									ATTENDANCE <span class='badge bg-secondary'> TIME-IN </span>
							</button><br>
							".$_SESSION['timein']."
						  </div>
						";
						unset($_SESSION['timein']);
					  }
					  if(isset($_SESSION['timeout'])){
						echo "
						  <div class='alert alert-success alert-dismissible' style='background:#FFFFFF;color:#000000'>
							<button type='button' class='close' data-dismiss='alert' aria-hidden='true'>&times;</button>
							<button type='button' class='btn btn-info'>
  									ATTENDANCE <span class='badge bg-secondary'> TIME-OUT </span>
							</button><br>
							".$_SESSION['timeout']."
						  </div>
						";
						unset($_SESSION['timeout']);
					  }
				  ?>
                </div>
                <div class="col-md-8">
                <form action="insert.php" method="post" class="form-horizontal" style="border-radius: 5px;padding:10px;background:#fff;" id="divvideo" onsubmit="return false">
                    <input type="hidden"  name="empidn" id="empidt" placeholder="scan qrcode" class="form-control" autofocus>
					<input type="hidden"   name="stnm" id="stid" placeholder="status" class="form-control">
					<!--<b><button class="button button1" id="boton" onclick="nightTag()">REGULAR-SHIFT SCHEDULE</button></b>-->
					<input type="radio" class="btn-check" name="op" id="success-outlined" autocomplete="off" value="DY" checked>
					<label class="btn btn-outline-success" for="success-outlined">Regular</label>
					<input type="radio" class="btn-check" name="op" id="danger-outlined" autocomplete="off" value="NG">
					<label class="btn btn-outline-danger" for="danger-outlined">Night-Shift</label>
                </form>
				<div style="border-radius: 5px;padding:10px;background:#fff;" id="divvideo">
                  <table id="example1" class="table table-bordered">
                    <thead>
                        <tr>
							<td>DATE/TIME</td>
							<td>EMPLOYEE ID</td>
                            <td>STATUS</td>
                        </tr>
                    </thead>
                    <tbody>
                        <?php
                        $server = "localhost";
                        $username="qrcode";
                        $password="P@ssw0rd%!";
                        $dbname="hris";
                    
                        $conn = new mysqli($server,$username,$password,$dbname);
						$date = date('Y-m-d');
                        if($conn->connect_error){
                            die("Connection failed" .$conn->connect_error);
                        }
                           $sql ="SELECT LOGDATE, EMPID, CASE WHEN STATUS=1 THEN 'Clock IN' ELSE 'Clock OUT' END STATUS FROM qrattendance WHERE DATE(LOGDATE)=CURDATE()";
                           $query = $conn->query($sql);
                           while ($row = $query->fetch_assoc()){
                        ?>
                            <tr>
								<td><?php echo $row['LOGDATE'];?></td>
								<td><?php echo $row['EMPID'];?></td>
                                <td><?php echo $row['STATUS'];?></td>
                            </tr>
                        <?php
                        }
                        ?>
                    </tbody>
                  </table>
				  
                </div>
				
                </div>
				
            </div>
        <script>
           let scanner = new Instascan.Scanner({ video: document.getElementById('preview')});
           Instascan.Camera.getCameras().then(function(cameras){
               if(cameras.length > 0 ){
                   scanner.start(cameras[0]);
               } else{
                   alert('No cameras found');
               }

           }).catch(function(e) {
               console.error(e);
           });
           scanner.addListener('scan',function(c){
			   document.getElementById('empidt').value=c;
			   document.getElementById("stid").value = document.querySelector('input[name="op"]:checked').value;
               document.forms[0].submit();  
           });   
        </script>
		<script src="plugins/jquery/jquery.min.js"></script>
		<script src="plugins/bootstrap/js/bootstrap.min.js"></script>
		<script src="plugins/datatables/jquery.dataTables.min.js"></script>
		<script src="plugins/datatables-bs4/js/dataTables.bootstrap4.min.js"></script>
		<script src="plugins/datatables-responsive/js/dataTables.responsive.min.js"></script>
		<script src="plugins/datatables-responsive/js/responsive.bootstrap4.min.js"></script>
		<script>
			function nightTag() {
				alert(document.querySelector('input[name="op"]:checked').value);	
		}
		</script>
		<script>
		  $(function () {
			$("#example1").DataTable({
			  "responsive": true,
			  "autoWidth": false,
			  "order": [[0,"desc"]]
			});
			$('#example2').DataTable({
			  "paging": true,
			  "lengthChange": false,
			  "searching": false,
			  "ordering": true,
			  "info": true,
			  "autoWidth": false,
			  "responsive": true,
			});
		  });
		</script>
		
    </body>
</html>