<!DOCTYPE html>
<html>
<head>
  <title>Users Logs</title>
<link rel="stylesheet" type="text/css" href="css/userslog.css">
<script>
  $(window).on("load resize ", function() {
    var scrollWidth = $('.tbl-content').width() - $('.tbl-content table').width();
    $('.tbl-header').css({'padding-right':scrollWidth});
}).resize();
</script>
<script src="js/jquery-3.3.1.js"
        integrity="sha1256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
        crossorigin="anonymous">
</script>
</head>
<body>
<?php 
	require_once('header.php');
	require_once("connectDB.php");

	$query = $conn->query("SELECT * FROM users_logs WHERE users_id = '$user_id' ORDER BY checkindate DESC");
	
?>
<main>
  <section>
  <!--User table-->
  <h1 class="slideInDown animated">Presence / Kehadiran</h1>

  <div class="tbl-header slideInRight animated">
    <table cellpadding="0" cellspacing="0" border="0">
      <thead>
        <tr>
          <th>ID</th>
          <th>Name</th>
          <th>Student Number</th>
          <th>Kelas</th>
          <th>Fingerprint ID</th>
          <th>Date</th>
          <th>Time In</th>
          <th>Time Out</th>
        </tr>
      </thead>
    </table>
  </div>
  <div class="tbl-content slideInRight animated">
  <table cellpadding="0" cellspacing="0" border="0">
      <thead>
    <?php $no=1; while($row = $query->fetch_assoc()) { ?>
      <TR>
        <TD><?php echo $no;?></TD>
        <TD><?php echo $row['username'];?></TD>
        <TD><?php echo $row['studentnumber'];?></TD>
        <TD><?php echo $row['class'];?></TD>
        <TD><?php echo $row['fingerprint_id'];?></TD>
        <TD><?php echo $row['checkindate'];?></TD>
        <TD><?php echo $row['timein'];?></TD>
        <TD><?php echo $row['timeout'];?></TD>
      </TR>
    <?php $no++; } ?>
    </thead>
    </table>
  </div>
</section>
</main>
</body>
</html>