<?php
  include('session.php');
?>
<!doctype html>
<html lang="en" class="h-100">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <title></title>
 
    <!-- Bootstrap core CSS -->
<link href="css/bootstrap.css" rel="stylesheet">

    <style>
      body {
        font-size: 14px!important;
        font-family: pyidaungsu_bookregular;
      }

      input {
        font-size: 14px!important;
        font-family: pyidaungsu_bookregular;
      }

      select {
        font-size: 14px!important;
        font-family: pyidaungsu_bookregular;
      }

      .bd-placeholder-img {
        font-size: 1.125rem;
        text-anchor: middle;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
      }

      @media (min-width: 768px) {
        .bd-placeholder-img-lg {
          font-size: 3.5rem;
        }
      }

      .p-t-5 {
          padding-top: 5px;
      }


      .p-lr-5 {
          padding-left: 5px!important;
          padding-right: 5px!important;
      }

      .bg-dark-blue {
        background-color: #1978a5;
      }

      .even {
        background-color: #ebebeb!important;
        text-align: center!important;
      }

      .odd {
        text-align: center!important;
      }

      th {
        text-align: center!important;
      }

      .imgclass:hover {
        cursor: pointer;
      }

    </style>
    <!-- Custom styles for this template -->
     <link rel="stylesheet" type="text/css" href="css/dataTables.css">

    <link rel="stylesheet" type="text/css" href="css/buttons.dataTables.min.css">
   
  </head>
  <body class="d-flex flex-column h-100">
  <?php
    include('include/menu.php');
  ?>

  <link href="css/fontawesome/css/all.css" rel="stylesheet">

<!-- Begin page content -->
<main role="main" class="flex-shrink-0" style="padding-top: 10px;">
  <div class="container tex">
    <br />
  
    <center>
      <?php
        include("dbconnect.php");
        $items = getallitems($mysqli);
      ?>

    <table border="0" width="100%">
      <tr>
        <td>

          <div style="min-height: 70vh" >
            <div id="listarea">
             <br />
             <?php
             $active = getactive($mysqli);
             ?>
              <h4 class="mt-5">ဧည့်မှတ်တမ်းအသေးစိတ်</h4>
             <table class="table dtb" id="visitorlist">
                <thead>
                  <tr>
                    
                    <th scope="col">ကတ်နံပါတ်</th>
                    <th scope="col">ဖုန်းနံပါတ်</th>
                    <th scope="col">မြို့နယ်</th>
                    <th scope="col">သွားလိုသည့်ဌာန</th>
                    <th scope="col">စတင်ရောက်ရှိချိန်</th>
                    <th scope="col">မျက်နှာပုံ</th>
                    <th scope="col">မှတ်ပုံတင်</th>
                    <th scope="col">ဖောင်ပုံ</th>
                    
                  </tr>
                </thead>
                <tbody>
            
                </tbody>
              </table>
            </div>
  
        </div>
  </div>

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel"></h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <img id="imgid" src="" width="100%">
      </div>
      <div class="modal-footer">
      </div>
    </div>
  </div>
</div>
</main>


<?php   
  include("include/footerandbasedscript.php");
?>
  <script src="js/jquery.dataTables.js"></script>
  <script src="js/dataTables.bootstrap4.js"></script>
  <script type="text/javascript" language="javascript" src="js/dataTables.buttons.min.js"></script>
  <script type="text/javascript">

    function showit(txt) {
      $("#imgid").attr('src', 'vphoto/' + txt);
      $('#myModal').modal();
    }

      
   $(document).ready(function() {
    $('#visitorlist').DataTable( {
        "order": [[ 4, "desc" ]],
        "processing": true,
        "serverSide": true,
        "ajax": "server_list.php"
    });
  });


  </script>
</html>
