<?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;
      }

    </style>
    <!-- Custom styles for this template -->
   
  </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 />
    <h4 class="mt-5">ဧည့်မှတ်တမ်း <a href="main.php"><i class="fas fa-address-book"></i></a></h4>
    <br />
    <center>

      <?php
        include("dbconnect.php");
        $items = getalltownship($mysqli);
      ?>

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

    <div style="min-height: 70vh" >
      <div class="row row-sm mg-b-10 p-t-5">
      <!-- <div class="col-sm-10 p-lr-5">
          <input type="text" name="cardnumber" id="cardnumber" class="form-control " placeholder="ကတ်နံပါတ်ရိုက်ပါ။ (သို့) Scan ဖတ်ပါ" required>
      </div> -->
      </div>
      

     <!--  <input type="file" accept="image/*" capture="camera" id="firstcam" caption="မျက်နှာပုံရိုက်ရန်"/> -->
      <form action="savelog_desktop.php" method="post" id="dataform" name="dataform" enctype="multipart/form-data">

     <div class="custom-file">

          <div class="col-sm-5 p-lr-5">
              <div class="thumbnail">
                  <!-- <img src="https://via.placeholder.com/468x360?text=ID-Image+(Offline)" alt="Nature" style="width:100%">
                  <div class="caption">
                    <p>မှတ်ပုံတင်ပုံ</p>
                  </div> -->

                   <div id="facecam">
                     <video id="face_v" width="320" autoplay></video>
                     <br />
                     <a class="btn btn-small btn-info" id="snap">မျက်နှာပုံရိုက် <i class="fas fa-camera"></i></a>
                    </div>

                    <div id="facecamsnap" style="display:none; width: 380px;">
                     <canvas id="face_c" name="face_c" width="240" height="160"></canvas>
                     <br />
                      <a class="btn btn-small btn-success" id="review">ထပ်မံရုက်ရန်  <i class="fas fa-retweet"></i></a> 
                   </div>

              </div>
          </div>


          <br /><br />

     <div class="custom-file">

          <div class="col-sm-5 p-lr-5">
              <div class="thumbnail">
                

                   <div id="idcam">
                     <video id="id_v" width="320" autoplay></video>
                     <br />
                     <a class="btn btn-small btn-info" id="snap_id">မှတ်ပုံတင်ပုံရိုက် <i class="fas fa-camera"></i></a>
                    </div>

                    <div id="idcamsnap" style="display:none; width: 380px;">
                     <canvas id="id_c" name="id_c" width="240" height="160"></canvas>
                     <br />
                      <a class="btn btn-small btn-success" id="review_id">ထပ်မံရုက်ရန်  <i class="fas fa-retweet"></i></a> 
                   </div>

              </div>
          </div>

            <br /><br />

           <div class="custom-file">

          <div class="col-sm-5 p-lr-5">
              <div class="thumbnail">
                

                   <div id="formcam">
                     <video id="form_v" width="320" autoplay></video>
                     <br />
                     <a class="btn btn-small btn-info" id="snap_form">ဖောင်ပုံရိုက် <i class="fas fa-camera"></i></a>
                    </div>

                    <div id="formcamsnap" style="display:none; width: 380px;">
                     <canvas id="form_c" name="form_c" width="240" height="160"></canvas>
                     <br />
                      <a class="btn btn-small btn-success" id="review_form">ထပ်မံရုက်ရန်  <i class="fas fa-retweet"></i></a> 
                   </div>

              </div>
          </div>



   
      <div id="carea" style="">
     

         
        

           <div class="row row-sm mg-b-10 p-t-5">
            <div class="col-sm-5 p-lr-5">
            <select id="dept" name="dept" class="form-control"> 
                   
            <?php


              foreach ($items as $key => $value) {
                echo '<option value="'.$value['name'].','.$value['dept_name'].'"> '.$value['name']." - " .$value['dept_name'].' </option>';
              }
            ?>
              </select>
              </div>
          </div>



           <div class="row row-sm mg-b-10 p-t-5">
            <div class="col-sm-5 p-lr-5">
            <select id="topic" name="topic" class="form-control"> 
                   
              <?php

           
                $topic = getalltopic($mysqli);

              foreach ($topic as $key => $value) {
                echo '<option value="'.$value['name'].'"> '.$value['name'].' </option>';
              }


            
              // foreach ($items as $key => $value) {
              //   echo '<option value="'.$value['name'].'"> '.$value['name']." - " .$value['dept_name'].' </option>';
              // }
            ?>
              </select>
              </div>
          </div>


          <div class="row row-sm mg-b-10 p-t-5">
          <div class="col-sm-5 p-lr-5">
            <input type="number" id="phonenumber" name="phonenumber" class="form-control" placeholder="ဖုန်းနံပါတ်">
          </div>
        </div>



        <div class="row row-sm mg-b-10 p-t-5">
          <div class="col-sm-5 p-lr-5">
            <input type="number" id="vcard" name="vcard" class="form-control" required placeholder="ကတ်နံပါတ်">
          </div>
        </div>

        <input type="hidden" name="faceimgdata" id="faceimgdata">
         <input type="hidden" name="idimgdata" id="idimgdata">
          <input type="hidden" name="formimgdata" id="formimgdata">

        

         <div class="row row-sm mg-b-10 p-t-5">
         
           <div class="col-sm-5 p-lr-5">
             <button type="submit" class="btn btn-success">သိမ်းမည်</button>
          </div>
        </div>
      </div>

  </form>
  </div>
  </div>
</main>

<?php   
  include("include/footerandbasedscript.php");
?>

<script type="text/javascript">


  $("#phonenumber").on('focus', function(){
      $("#phonenumber").val("09");
  
  });






   var canvas = document.getElementById('face_c');
   var context = canvas.getContext('2d');
   var video = document.getElementById('face_v');

   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.srcObject = stream;
            video.play();
        });
    }

   document.getElementById("snap").addEventListener("click", function() {

      canvas.height = video.videoHeight;
      canvas.width = video.videoWidth;
      context.drawImage(video, 0, 0);

      $("#facecam").hide();
      $("#facecamsnap").show();


       $("#faceimgdata").val(canvas.toDataURL());
   

    });

    document.getElementById("review").addEventListener("click", function() {
      $("#facecam").show();
      $("#facecamsnap").hide();
    });



   var canvas_id = document.getElementById('id_c');
   var context_id = canvas_id.getContext('2d');
   var video_id = document.getElementById('id_v');

   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_id.srcObject = stream;
            video_id.play();
        });
    }

    document.getElementById("snap_id").addEventListener("click", function() {

      canvas_id.height = video_id.videoHeight;
      canvas_id.width = video_id.videoWidth;
      context_id.drawImage(video_id, 0, 0);

      $("#idcam").hide();
      $("#idcamsnap").show();

       $("#idimgdata").val(canvas_id.toDataURL());

   

    });

    document.getElementById("review_id").addEventListener("click", function() {
      $("#idcam").show();
      $("#idcamsnap").hide();
    });






   var canvas_form = document.getElementById('form_c');
   var context_form = canvas_form.getContext('2d');
   var video_form = document.getElementById('form_v');

   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_form.srcObject = stream;
            video_form.play();
        });
    }

    document.getElementById("snap_form").addEventListener("click", function() {

      canvas_form.height = video_form.videoHeight;
      canvas_form.width = video_form.videoWidth;
      context_form.drawImage(video_form, 0, 0);

      $("#formcam").hide();
      $("#formcamsnap").show();

       $("#formimgdata").val(canvas_form.toDataURL());

    });

    document.getElementById("review_form").addEventListener("click", function() {
      $("#formcam").show();
      $("#fromcamsnap").hide();
    });



 


</script>
</html>