@extends('dashboard.utama')
@section('content')
<div class="row">
  <!-- Striped rows -->
  <div class="col-md-12 my-4">
    <h2 class="h4 mb-1">Data Meter Sepihak</h2>
    <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</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 type="button" class="btn btn-primary"><span class="fe fe-download "></span></button> &nbsp;
                  <button type="button" class="btn btn-primary"><span class="fe fe-trash "></span></button>
              </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 -->
<script>
  $('#dataTable-1').DataTable(
  {
    autoWidth: true,
    "lengthMenu": [
      [16, 32, 64, -1],
      [16, 32, 64, "All"]
    ]
  });
</script>

<!-- Button trigger modal -->
  <!-- Modal -->
  <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 Pekerjaan </p>
          <form class="form-inline justify-content-center" action="{{route('carimsepihak')}}" 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="bonp" type="submit">Search</button>
          </form>
        </div>
      </div>
    </div>
  </div> <!-- small modal -
@endsection