@extends('dashboard.utama')
@section('content')
<div class="row">
  <!-- Striped rows -->
  <div class="col-md-12 my-4">
    <h2 class="h4 mb-1">Data Kalibrasi 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="dropdown float-right">
                  <button class="btn btn-secondary " type="button" id="actionMenuButton" data-toggle="modal" data-target="#laporankalibrasi"  aria-expanded="false"> Laporan </button>
                </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>Petugas</th>
              <th>Jenis</th>
              <th>Tgl Cetak</th>
              <th>Petugas</th>
              <th>Action</th>
            </tr>
          </thead>
          <tbody>
          </tbody>
        </table>
      </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 Pekerjaan </p>
        <form class="form-inline justify-content-center" action="{{route('carikaltiblang')}}" method="GET">
            <div class="col-md-12 mb-3">
              
          </div><!-- /.form-row -->
          <input type="hidden" name="jnsmeter" value="mtiblang">
          <input class="form-control form-control-lg mr-sm-1 bg-transparent" type="text" placeholder="BONP" name="cari" aria-label="Search" required>
          <input class="form-control form-control-lg mr-sm-1 bg-transparent" type="search" placeholder="Bon Tiblang" name="bont" aria-label="Search" required>
          <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-->
<div class="modal fade" id="laporankalibrasi" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLongTitle">Laporan Kalibrasi </h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <form action="{{route('laporankalibrasi')}}" method="GET" >
          <div class="container-fluid">
            <div class="col-md-12">
            <div class="card shadow mb-8">
              <div class="card-body">
                  <div class="form-row">
                    <div class="col-md-12 mb-3">
                      <label for="example-month">Bulan dan Tahun Laporan yang di Cetak</label>
                      <input class="form-control" id="bulan" type="month" name="bulan">
                    </div>
                  </div><!-- /.form-row -->
                  <div class="form-row">
                    <div class="col-md-12 mb-3">
                      <label for="validationCustom4">Bagian</label>
                      <select class="form-control select2" id="bagian" name="bagian" required>
                        <option value="ss">Semua</option>
                        <option value="lb">Langganan Barat</option>
                        <option value="lt">Langganan Timur</option>
                        <option value="pp">Penertiban Pelanggan</option>
                        <option value="ts">Tera Sepihak</option>
                      </select>
                      <div class="valid-feedback"> Looks good! </div>
                    </div>
                  </div><!-- /.form-row -->
            </div>
            </div> 
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
            <button type="submit" style="float: right margin-right:50px"  class="btn btn-primary" >PREVIEW LAPORAN</button>
          </div>
          </div>
@endsection
@section('page_javascripts')
<script >
  $(".alert-dismissible").fadeTo(5000, 500).slideUp(500, function(){
  $(".alert-dismissible").alert('close');
});
</script>
<script>
//  $('#dataTable-1').DataTable(
//  {
//    autoWidth: true,
//    "lengthMenu": [
//      [16, 32, 64, -1],
//      [16, 32, 64, "All"]
//    ]
//  });
 var table = $('#dataTable-1').DataTable({
        "processing": true,
        "serverSide": true,
        "ajax": {
          url:"{{ route('kalibrasidata') }}",
        },
        "columns": [
            {data: 'nopel'},
            {data: 'nopel'},
            {data: 'namapel'},
            {data: 'nobonp'},
            {data: 'nometer'},
            {data: 'petugashublang'},
            {data: 'namapekerjaan'},
            {data: 'tgldibuat'},
            {data: 'petugasbm'},
            {data: 'action', orderable: false, searchable: false}
            //{data: 'action', name: 'action', orderable: false, searchable: false}
        ],
        "lengthMenu": [[50,75, 100, -1], [50,75, 100, "Semua"]],
        "order": [[7, 'desc']],
                /*"dom": "lTfigt",
                 "tableTools": {
                 "sSwfPath": "{{asset('js/plugins/dataTables/swf/copy_csv_xls_pdf.swf')}}"
                 }*/
          columnDefs: [
            {
                searchable: false,
                orderable: false,
                targets: 0,
            },
        ],
    });
    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