@include('header')

<div class="padding">
  <div class="row">
    <div class="col-md-12">
      <div class="box">
        <div class="box-divider m-0"></div>
        <div class="box-header bg-info">
         <p class="text-white">Daftar Menu</p>
       </div>
       <div class="box-body">
        <div class="col-md-12">

          <div class="b-b b-primary nav-active-primary">
            <ul class="nav nav-tabs">
              <li class="nav-item">
                <a class="nav-link active show" href="#" data-toggle="tab" data-target="#tab4">Tamu Hariini</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#" data-toggle="tab" data-target="#tab5">Riwayat Tamu</a>
              </li>
              
            </ul>
          </div>
          <div class="tab-content p-3 mb-3">
            <div class="tab-pane animate fadeIn text-muted active show" id="tab4">
             <div class="table-responsive">

              <table id="datatable" class="table  table-bordered table-striped" data-plugin="dataTable">
                <thead class="text-white" style="background-color: #452d3a">
                  <tr>
                    <th width="50">No</th>
                    <th>No Id </th>
					<th>Foto</th>
					<th>Nama </th>
                    <th>Asal</th>
                    <th>Tujuan</th>
                    <th>Jam Masuk</th>
                    <th>Jam Keluar</th>
                  </tr>
                </thead>
                <tbody>
                  @foreach($tamuhariini as $nos => $resx)
                  <tr>
                    <td>{{$nos+1}}</td>
                    <td>{{$resx->id_card}}</td>
					<td><a onclick="ambilf()" data-toggle="modal" data-target="#myModal"><img src="../../../VMS/vmsfront/admin/webcamImage/" width="100px"></a></td>
				  
					<td>{{$resx->nama}}</td>
                    <td>{{$resx->istansi}}</td>
                    <td>{{$resx->tujuan}}</td>
                    <td>{{$resx->jam_berangkat}}</td>
                    <td>{{$resx->jam_pulang}}</td>
                    
                  </tr>
                  @endforeach
                </tbody>
              </table>
            </div>
          </div>
          
          <div class="tab-pane animate fadeIn text-muted" id="tab5">
           <div class="table-responsive">

            <table id="datatable" class="table  table-bordered table-striped" data-plugin="dataTable">
              <thead class="text-white" style="background-color: #452d3a">
                <tr>
                  <th width="50">No</th>
                  <th>No Id </th>
                  <th>Foto</th>
				  <th>Nama </th>
                  <th>Asal</th>
                  <th>Tujuan</th>
                  <th>Tanggal Masuk</th>
				  <th>Jam Masuk</th>
                  <th>Jam Keluar</th>
                </tr>
              </thead>
              <tbody>
                @foreach($tamu as $no => $res)
                
								<tr>
				
                  <td>{{$no+1}}</td>
                   <td>{{$res->id_card}}</td>
                   <td><a onclick="ambilf()" data-toggle="modal" data-target="#myModal"><img src="../../../VMS/vmsfront/admin/webcamImage/" width="100px"></a></td>
				   <td>{{$res->nama}}</td>
                    <td>{{$res->istansi}}</td>
                    <td>{{$res->tujuan}}</td>
					<td>{{$tglfix}}</td>
                    <td>{{$res->jam_berangkat}}</td>
                    <td>{{$res->jam_pulang}}</td>
                  
                </tr>
                @endforeach
              </tbody>
            </table>
          </div>
        </div>
        
      </div>
    </div>

  </div>


</div>

</div>
</div>
</div>

<div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog">
    
      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header"><h5>Preview Foto</h5>
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title"></h4>
        </div>
        <div class="modal-body">
		<div id="fotonya"></div>
          
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div>
      
    </div>
  </div>
  <script>
  function ambilf(x){
	  // alert(x);
	  // $('#fotonya').html(x);
	  $.get('{{url("gettam")}}/'+x,function (data) {
      console.log(data);
      $('#fotonya').html(data);
    });
  }
  </script>

@include('footer')