@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-success 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="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>Petugas</th>
              <th>Jenis</th>
              <th>Tgl Cetak</th>
              <th>Petugas</th>
              <th>Action</th>
            </tr>
          </thead>
          <tbody>
           
           
          </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 Pekerjaan </p>
        <form class="form-inline justify-content-center" action="{{route('carimeter')}}" method="GET">
          
          <input type="hidden" name="jnsmeter" value="msepihak">
          <input class="form-control form-control-lg mr-sm-1 bg-transparent" type="search" placeholder="Search" name="cari" 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="laporantera" 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 Tera </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('laporanmeter')}}" 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 class="form-row">
                          <div class="col-md-4 mb-3">
                            <label for="validationCustom4">Diketahui</label>
                            <select class="form-control select2" id="diketahui" name="diketahui" required>
                              @foreach ($pegawai as $p)
                                <option value="{{$p->nip}}">{{$p->namapegawai}}</option>
                              @endforeach
                            </select>
                            <div class="valid-feedback"> Looks good! </div>
                        </div>
                        <div class="col-md-4 mb-3">
                          <label for="validationCustom4">Di Periksa Oleh</label>
                          <select class="form-control select2" id="periksa" name="periksa" required>
                            @foreach ($pegawai as $p)
                              <option value="{{$p->nip}}">{{$p->namapegawai}}</option>
                            @endforeach
                          </select>
                          <div class="valid-feedback"> Looks good! </div>
                      </div>
                      <div class="col-md-4 mb-3">
                          <label for="validationCustom4">Di Buat Oleh</label>
                          <select class="form-control select2" id="dibuat" name="dibuat" required>
                            @foreach ($pegawai as $p)
                              <option value="{{$p->nip}}">{{$p->namapegawai}}</option>
                            @endforeach
                          </select>
                          <div class="valid-feedback"> Looks good! </div>
                      </div>
                    </div> <!-- /.form-row -->
                    <div class="form-row">
                      <label for="validationCustom4">Tanggal Cetak</label>
                      <div class="input-group">
                        <input type="text" class="form-control drgpicker" id="tglCetak" name="tglcetak" aria-describedby="button-addon2">
                        <div class="input-group-append">
                          <div class="input-group-text" id="button-addon-date"><span class="fe fe-calendar fe-16"></span></div>
                        </div>
                      </div>
                    </div>
                </div> --}}
            </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>
    </form>
    </div>
  </div>
  </div>
</div> <!-- /.laporantera-->

<div class="modal fade" id="tidaktera" 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 Tidak diTera </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('laporannontera')}}" 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 class="form-row">
                          <div class="col-md-4 mb-3">
                            <label for="validationCustom4">Diketahui</label>
                            <select class="form-control select2" id="diketahui" name="diketahui" required>
                              @foreach ($pegawai as $p)
                                <option value="{{$p->nip}}">{{$p->namapegawai}}</option>
                              @endforeach
                            </select>
                            <div class="valid-feedback"> Looks good! </div>
                        </div>
                        <div class="col-md-4 mb-3">
                          <label for="validationCustom4">Di Periksa Oleh</label>
                          <select class="form-control select2" id="periksa" name="periksa" required>
                            @foreach ($pegawai as $p)
                              <option value="{{$p->nip}}">{{$p->namapegawai}}</option>
                            @endforeach
                          </select>
                          <div class="valid-feedback"> Looks good! </div>
                      </div>
                      <div class="col-md-4 mb-3">
                          <label for="validationCustom4">Di Buat Oleh</label>
                          <select class="form-control select2" id="dibuat" name="dibuat" required>
                            @foreach ($pegawai as $p)
                              <option value="{{$p->nip}}">{{$p->namapegawai}}</option>
                            @endforeach
                          </select>
                          <div class="valid-feedback"> Looks good! </div>
                      </div>
                    </div> <!-- /.form-row -->
                    <div class="form-row">
                      <label for="validationCustom4">Tanggal Cetak</label>
                      <div class="input-group">
                        <input type="text" class="form-control drgpicker" id="tglCetak" name="tglcetak" aria-describedby="button-addon2">
                        <div class="input-group-append">
                          <div class="input-group-text" id="button-addon-date"><span class="fe fe-calendar fe-16"></span></div>
                        </div>
                      </div>
                    </div><!-- /.form-row -->
                </div>
            </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">Submit</button>
          </div>
          </div>
        </form>
      </div>
    </div>
  </div>
</div><!-- /.laporan nontera -->

<div class="modal fade" id="testband" 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 Test Band </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="#" 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 class="form-row">
                          <div class="col-md-4 mb-3">
                            <label for="validationCustom4">Diketahui</label>
                            <select class="form-control select2" id="diketahui" name="diketahui" required>
                              @foreach ($pegawai as $p)
                                <option value="{{$p->nip}}">{{$p->namapegawai}}</option>
                              @endforeach
                            </select>
                            <div class="valid-feedback"> Looks good! </div>
                        </div>
                        <div class="col-md-4 mb-3">
                          <label for="validationCustom4">Di Periksa Oleh</label>
                          <select class="form-control select2" id="periksa" name="periksa" required>
                            @foreach ($pegawai as $p)
                              <option value="{{$p->nip}}">{{$p->namapegawai}}</option>
                            @endforeach
                          </select>
                          <div class="valid-feedback"> Looks good! </div>
                      </div>
                      <div class="col-md-4 mb-3">
                          <label for="validationCustom4">Di Buat Oleh</label>
                          <select class="form-control select2" id="dibuat" name="dibuat" required>
                            @foreach ($pegawai as $p)
                              <option value="{{$p->nip}}">{{$p->namapegawai}}</option>
                            @endforeach
                          </select>
                          <div class="valid-feedback"> Looks good! </div>
                      </div>
                    </div> <!-- /.form-row -->
                    <div class="form-row">
                      <label for="validationCustom4">Tanggal Cetak</label>
                      <div class="input-group">
                        <input type="text" class="form-control drgpicker" id="tglCetak" name="tglcetak" aria-describedby="button-addon2">
                        <div class="input-group-append">
                          <div class="input-group-text" id="button-addon-date"><span class="fe fe-calendar fe-16"></span></div>
                        </div>
                      </div>
                    </div><!-- /.form-row -->
                </div>
            </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">Submit</button>
          </div>
          </div>
        </form>
      </div>
    </div>
  </div>
</div><!-- /.laporan testband -->
@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 table = $('#dataTable-1').DataTable({
        "processing": true,
        "serverSide": true,
        "ajax": {
          url:"{{ route('meterdatasepihak') }}",
        },
        "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": [[15, 100, -1], [15, 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;
        } );
    });

    // $("#ExportExcel").click(function(){
    //         if($('#bulan').val() == '' ){
    //             alert('Tanggal Harus Diisi!');
    //             return false;
    //         }
    //         var url = "{{ route('cetakexcelmeter') }}";
    //         location.href = url;
    //                     // only one radio can be logically checked, don't check the rest
    //     });        
</script>

@endsection