@extends('dashboard.utama')
@section('content')
<div class="row">
  <!-- Striped rows -->
  <div class="col-md-12 my-4">
    <h2 class="h4 mb-1">Data Meter</h2>
    @if (Session::has('status'))
    <div class="alert alert-danger alert-dismissible fade show" role="alert">
      {{ Session::get('status') }}<button type="button" class="close" data-dismiss="alert" aria-label="Close">
        <span aria-hidden="true">×</span>
      </button>
    </div>
    @endif
    <input type="hidden" value="{{$id}}" name='idd' id='idd'>
    <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 class="form-group col-auto">
                  <label for="search" class="sr-only">Search</label>
                  <input type="text" class="form-control" id="search" value="" placeholder="Search">
                </div> --}}
                <div class="dropdown float-right">
                  <button class="btn btn-secondary " type="button" id="actionMenuButton" data-toggle="modal" data-target="#laporantera"  aria-expanded="false"> Laporan </button>
                  {{-- <div class="dropdown-menu" aria-labelledby="actionMenuButton" style="">
                    <a class="dropdown-item" data-toggle="modal" data-target="#laporantera" >Laporan Tera</a>
                    <a class="dropdown-item" data-toggle="modal" data-target="#tidaktera">Laporan tidak Di Tera</a>
                    <a class="dropdown-item" data-toggle="modal" data-target="#testband">Laporan Test band</a>
                  </div> --}}
                </div>
              </div>
            </form>
          </div>
          <div class="col ml-auto">
            <div class="dropdown float-right">
              <button class="btn btn-primary float-right ml-3" data-toggle="modal" data-target=".modal-full" type="button">Tambah Data</button>
            </div>
          </div>
        </div>
        <!-- table -->
        <table class="table datatables" id="dataTable-1">
          <thead>
           
            <tr role="row">
              <th>#</th>
              <th>Nopel</th>
              <th>Nama Pelanggan</th>
              <th>No.BonP</th>
              <th>No Meter</th>
              <th>Tgl Terima</th>
              <th>Hasil Tera</th>
            </tr>
          </thead>
          <tbody>
           
           
          </tbody>
        </table>
      </div>
    </div>
  </div> <!-- simple table -->
</div> <!-- end section -->

@endsection
@section('page_javascripts')   
<script >
   $(".alert-dismissible").fadeTo(5000, 500).slideUp(500, function(){
   $(".alert-dismissible").alert('close');
});
</script>
<script>

  $('.drgpicker').daterangepicker(
      {
        singleDatePicker: true,
        timePicker: false,
        showDropdowns: true,
        locale:
        {
          format: 'MM/DD/YYYY'
        }
      });
    var id = document.getElementById('idd').value;
      var table = $('#dataTable-1').DataTable({
        "processing": true,
        "serverSide": true,
        "ajax": {
          url:"{{ route('detilmeter') }}" + '/' + id,
        },
        "columns": [
            {data: 'nopel',orderable: false, searchable: false},
            {data: 'nopel'},
            {data: 'namapel'},
            {data: 'nobonp'},
            {data: 'nometer'},
            {data: 'tgldibuat'},
            {data: 'hasiltera'},
            //{data: 'action', name: 'action', orderable: false, searchable: false}
        ],
        "lengthMenu": [[15, 100, -1], [15, 100, "Semua"]],       
    });
    table.on( 'draw.dt', function () {
    var PageInfo = $('#dataTable-1').DataTable().page.info();
         table.column(0, { page: 'current' }).nodes().each( function (cell, i) {
            cell.innerHTML = i + 1 + PageInfo.start;
        } );
    });

</script>

@endsection