@extends('dashboard.utama')
@section('content')
<div class="row">
  <!-- Striped rows -->
  <div class="col-md-12 my-4">
    <h2 class="h4 mb-1">Data Meter Tiblang</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
    <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="form-group col-auto ml-3">
                  <label class="my-1 mr-2 sr-only" for="inlineFormCustomSelectPref">Status</label>
                  <select class="custom-select my-1 mr-sm-2" id="inlineFormCustomSelectPref">
                    <option selected>Choose...</option>
                    <option value="1">Processing</option>
                    <option value="2">Success</option>
                    <option value="3">Pending</option>
                    <option value="3">Hold</option>
                  </select>
                </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 table-bordered">
          <thead>
            <tr role="row">
              <th colspan="4">Pelanggan</th>
              <th colspan="3">Benkel Meter</th>
              <th colspan="3">HubLang</th>
            </tr>
            <tr role="row">
              <th>Nopel</th>
              <th>Nama Pelanggan</th>
              <th>No Meter</th>
              <th>Petugas</th>
              <th>Jenis</th>
              <th>Tgl Cetak</th>
              <th>Petugas</th>
              <th>Keterangan</th>
              <th>Action</th>
            </tr>
          </thead>
          <tbody>
            @foreach ($data as $d)
            <tr>
              <td>{{$d->nopel}}</td>
              <td>{{$d->namapel}}</td>
              <td>{{$d->nometer}}</td>
              <td>{{$d->petugashublang}}</td>
              <td>{{$d->namapekerjaan}}</td>
              <td>{{$d->tgldibuat}}</td>
              <td>{{$d->petugasbm}}</td>
              <td>{{$d->keterangan}}</td>
              <td><button class="btn btn-sm dropdown-toggle more-horizontal" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                  <span class="text-muted sr-only">Action</span>
                </button>
                <div class="dropdown-menu dropdown-menu-right">
                  <a class="dropdown-item" href="#">Edit</a>
                  <a class="dropdown-item" href="#">Remove</a>
                  <a class="dropdown-item" href="#">Assign</a>
                </div>
              </td>
            </tr> 
            @endforeach
           
          </tbody>
        </table>
        <nav aria-label="Table Paging" class="mb-0 text-muted">
          <ul class="pagination justify-content-end mb-0">
            <li class="page-item"><a class="page-link" href="#">Previous</a></li>
            <li class="page-item"><a class="page-link" href="#">1</a></li>
            <li class="page-item"><a class="page-link" href="#">2</a></li>
            <li class="page-item"><a class="page-link" href="#">3</a></li>
            <li class="page-item"><a class="page-link" href="#">Next</a></li>
          </ul>
        </nav>
      </div>
    </div>
  </div> <!-- simple table -->
</div> <!-- end section -->
<div class="modal fade modal-full" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
  <button aria-label="" type="button" class="close px-2" data-dismiss="modal" aria-hidden="true">
    <span aria-hidden="true">×</span>
  </button>
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">
      <div class="modal-body text-center">
        <p> Cari Bon Tiblang </p>
        <form class="form-inline justify-content-center" action="{{route('carimtiblang')}}" method="GET">
          <input class="form-control form-control-lg mr-sm-2 bg-transparent" type="search" placeholder="Search" name="cari" aria-label="Search">
          <button class="btn btn-primary btn-lg mb-2 my-2 my-sm-0" value="cari" type="submit">Search</button>
        </form>
      </div>
    </div>
  </div>
</div> <!-- small-->

<script >
   $(".alert-dismissible").fadeTo(2000, 500).slideUp(500, function(){
    $(".alert-dismissible").alert('close');
});
</script>
<script>
  $('#dataTable-1').DataTable(
  {
    autoWidth: true,
    "lengthMenu": [
      [16, 32, 64, -1],
      [16, 32, 64, "All"]
    ]
  });
</script>
@endsection