@extends('dashboard.utama')
@section('content')
<div class="card shadow">
    <div class="card-body">
      <div class="toolbar row mb-3">
        <div class="col">
          <form class="form-inline">
            <div class="form-row">
            </div>
          </form>
        </div>
        <div class="col ml-auto">
        </div>
      </div>
      <!-- table -->
      <table class="table datatables" id="dataTable-1">
        <thead>
          <tr role="row">
            <th >#</th>
            <th >No Bon</th>
            <th >No Pendaftaran</th>
            <th >No pel</th>
            <th >Pel Datang</th>
            <th >Tgl Terima</th>
            <th >Nama Pel </th>
            <th >Alamat</th>
            <th style ="display:none;" >Merk</th>                      
            <th style ="display:none;">UK</th>
            <th >No.Seri</th>
            <th >Stand</th>
            <th >Hasil Tera</th>
            <th >Tgl Sls</th>                      
            <th style ="display:none;">Catatan</th>
          </tr>
        </thead>
        <tbody>
            @foreach ($data as $laporan)

                          
            <tr>
                <td >{{$nomor++}}</td>
                <td >{{$laporan->nobonp}}</td>
                <td >{{$laporan->nopendaftaran}}</td>
                <td >{{$laporan->nopel}}</td>
                <td >{{$laporan->namattdpel}}</td>
                <td >{{$tgltrm}}</td>
                <td >{{$laporan->namapel}}</td>
                <td >{{$laporan->alamatpel}}</td>
                <td style= "display:none;">{{$laporan->namamerek}}</td>                  
                <td style="display:none;">{{$laporan->kodeukuran}}</td>
                <td >{{$laporan->nometer}}</td>
                <td >{{$laporan->stand}}</td>
                <td >{{$laporan->hasiltera}}</td>                  
                <td >{{$tglsls}}</td>                                                        
                <td style = "display:none;">{{$laporan->keterangan}}</td>
            </tr>

        @endforeach          
        </tbody>
      </table>
    </div>
  </div>
</div> <!-- simple table -->
</div> <!-- end section -->
@endsection
@section('page_javascripts')   
<script>
$(document).ready(function() {
  // $('#dataTable-1').DataTable(
  // {
  //   autoWidth: true,
  //   "lengthMenu": [
  //     [16, 32, 64, -1],
  //     [16, 32, 64, "All"]
  //   ]
  // });
    document.getElementById("navbar").classList.add("collapsed");
    var table = $('#dataTable-1').DataTable( {
        dom: 'Bfrtip',
        buttons: [
            {
                extend: 'excelHtml5',
                title: 'LAPORAN HASIL KALIBRASI',
                messageTop: 'REKAP HASIL KALIBRASI'
            },
            {
                extend: 'pdfHtml5',
                title: 'Laporan KALIBRASI', 
               
                messageTop: 'TREKAP HASIL TERA/PERIKSA'
            },
            'colvis'
        ]
    } );
} );    
</script>


@endsection