@extends('dashboard.utama')
@section('content')
<form action="{{route('savemetertiblang')}}" method="post" class="needs-validation" novalidate>
  @csrf
  @foreach ($data as $d)
  <div class="container-fluid">
    <div class="col-md-12">
    <h2 class="page-title">TAMBAH DATA METER </h2>
    </div>
    </div> 
<div class="container-fluid">
    <div class="row justify-content-center">
    <div class="col-md-12">
    <div class="card shadow mb-4">
      <div class="card-header">
        <strong class="card-title">Data Pekerjaan</strong>
      </div>
      <div class="card-body">
          <div class="form-row">
            <div class="col-md-3 mb-3">
              <label for="validationCustom3">No.Bon Pekerjaan</label>
              <input type="text" class="form-control" id="nobonp" name="nobonp" value="{{$d->no_bonp}}" readonly required>
              <div class="valid-feedback"> Looks good! </div>
            </div>
           
            <div class="col-md-2 mb-3">
              <label for="validationCustom4">No.Pelanggan</label>
              <input type="text" class="form-control" id="nopel" name="nopel" value="{{$d->no_plg}}" readonly required>
              <div class="valid-feedback"> Looks good! </div>
            </div>
          <div class="col-md-4 mb-3">
            <label for="validationCustom4">Nama Pelanggan</label>
            <input type="text" class="form-control" id="namapel" name="namapel" value="{{$d->nama}}" readonly required>
            <div class="valid-feedback"> Looks good! </div>
          </div>
       
        </div><!-- /.form-row -->
          <div class="form-row">
            <div class="col-md-3 mb-3">
                <label for="validationCustom4">Jenis Pekerjaan</label>
                <input type="text" class="form-control" id="ket_jenis" name="ket_jenis" value="TIBLANG" readonly required>
                <input type="hidden" name="jnspk" id="jnspk" value="-">		
                <div class="valid-feedback"> Looks good! </div>
              </div>
              <div class="col-md-6 mb-3">
                <label for="validationCustom4">Alamat Pelanggan</label>
                <input type="text" class="form-control" id="alamatpel" name="alamatpel" value="JL.{{$d->jalan}}&nbsp;{{$d->gang}}&nbsp;No.{{$d->nomor}}" readonly required>
                <div class="valid-feedback"> Looks good! </div>
              </div>
            </div> <!-- /.form-row -->
            </div>
            </div>
        </div>
    </div>
</div>
@endforeach
    <div class="container-fluid">
        <div class="row justify-content-center">
        <div class="col-md-12">
        <div class="card shadow mb-4">
          <div class="card-header">
            <strong class="card-title"> Data Fisik Periksa Meter</strong>
          </div>
          <div class="card-body">
          <div class="form-row">
            <div class="col-md-3 mb-3">
                <label for="validationSelect2">Merk Meter</label>
                <select class="form-control select2" id="merkmeter" name="merkmeter" required>
                  @foreach ($merk as $m)
                  <option value="{{$m->kodemerek}}">{{$m->namamerek}}</option>
                  @endforeach
                </select>
                <div class="invalid-feedback"> Mohon Pilih Merk Meter </div>
              </div>
              <div class="col-md-3 mb-3">
                <label for="validationCustom4">No.Meter</label>
                <input type="text" class="form-control" id="nometer" name="nometer" required>
                <div class="valid-feedback"> Looks good! </div>
              </div>
              <div class="col-md-2 mb-3">
                <label for="validationSelect2">Ukuran</label>
                <select class="form-control select2" id="ukuranmeter" name="ukuranmeter" required>
                  @foreach ($ukuran as $u)
                  <option value="{{$u->kodeukuran}}">{{$u->kodeukuran}}&nbsp;{{$u->ket}}</option>
                  @endforeach
                </select>
                <div class="invalid-feedback"> Mohon Pilih Ukuran Pipa Meter </div>
              </div>
              <div class="col-md-3 mb-3">
                <label for="validationCustom4">Penunjuk Angka (Stand)</label>
                <input type="text" class="form-control" id="standmeter" name="standmeter" placeholder="Stand Meter" required>
                <div class="valid-feedback"> Looks good! </div>
              </div>
          </div> <!-- /.form-row -->
         
          </div>
        </div>
        </div>
    </div>
    </div>
    <div class="container-fluid">
        <div class="card shadow mb-4">
            <div class="col-md-12">
            <div class="card-header">
              <strong class="card-title">HASIL PEMERIKSAAN FISIK</strong>
            </div>
            <div class="card-body">
                <div class="form-group row">
                  <label for="inputEmail3" class="col-md-2 col-form-label">BODY</label>
                  <div class="col-md-2 mb-3">
                    <select class="form-control select2" id="body" name="body" required>
                        <option value="BA">ADA</option>
                        <option value="BA">BAIK</option>
                    </select>
                    <div class="invalid-feedback"> Please select a valid state. </div>
                  </div>
                  <div class="col-md-6 mb-3">
                    <input type="text" class="form-control" id="ketbody" name="ketbody" placeholder="KETERANGAN">
                  </div>
                </div>
                <div class="form-group row">
                  <label for="inputPassword3" class="col-md-2 col-form-label">SEGEL</label>
                  <div class="col-md-2 mb-3">
                  <select class="form-control select2" id="segel" name="segel" required>
                      <option value="SA">ADA</option>
                      <option value="SP">PUTUS</option>
                      <option value="ST">TIDAK ADA</option>
                  </select>
                  <div class="invalid-feedback"> Please select a valid state. </div>
                </div>
                  <div class="col-md-6">
                    <input type="text" class="form-control" id="ketsegel" name="ketsegel" placeholder="KETERANGAN">
                  </div>
                </div>
                <div class="form-group row">
                    <label for="inputPassword3" class="col-md-2 col-form-label">TUTUP</label>
                    <div class="col-md-2 mb-3">
                    <select class="form-control select2" id="tutup" name="tutup" required>
                        <option value="TA">ADA</option>
                        <option value="TT">TIDAK ADA</option>
                    </select>
                    <div class="invalid-feedback"> Please select a valid state. </div>
                  </div>
                    <div class="col-md-6">
                      <input type="text" class="form-control" id="kettutup" name="kettutup" placeholder="KETERANGAN">
                    </div>
                  </div>
                  <div class="form-group row">
                    <label for="inputPassword3" class="col-md-2 col-form-label">KACA</label>
                    <div class="col-md-2 mb-3">
                    <select class="form-control select2" id="kaca" name="kaca" required>
                        <option value="KB">BURAM</option>
                        <option value="KP">PECAH</option>
                        <option value="KA">ADA</option>
                        <option value="KT">TIDAK ADA</option>
                      </optgroup>
                    </select>
                    <div class="invalid-feedback"> Please select a valid state. </div>
                  </div>
                    <div class="col-md-6">
                      <input type="text" class="form-control" id="ketkaca" name="ketkaca" placeholder="KETERANGAN">
                    </div>
                  </div>
                  <div class="form-group row">
                    <label for="inputPassword3" class="col-md-2 col-form-label">MESIN</label>
                    <div class="col-md-2 mb-3">
                    <select class="form-control select2" id="mesin" name="mesin" required>
                        <option value="MA">ADA</option>
                        <option value="MM">MACET</option>
                        <option value="MR">RUSAK</option>
                    </select>
                    <div class="invalid-feedback"> Please select a valid state. </div>
                  </div>
                    <div class="col-md-6">
                      <input type="text" class="form-control" id="ketmesin" name="ketmesin" placeholder="KETERANGAN">
                    </div>
                  </div>
            </div>
            </div>
        </div>
    </div> <!-- /.flowting row -->
    <div class="container-fluid">
        <div class="card shadow mb-4">
            <div class="col-md-12">
            <div class="card-header">
              <strong class="card-title">HASIL TERA </strong>
            </div>
            <div class="card-body">
                <div class="form-group row">
                    <div class="col-md-2">
                        <input type="text" class="form-control" id="bejana1" name="bejana1" placeholder="Bejana 1">
                      </div>
                    <div class="col-md-2">
                        <input type="text" class="form-control" id="awal1" name="awal1" placeholder="Awal Tera 1">
                    </div>
                    <div class="col-md-2">
                      <input type="text" class="form-control" id="akhir1" name="akhir1" placeholder="Akhir Tera 1">
                    </div>
                    <div class="col-md-2">
                      <input type="text" class="form-control" id="selisih1" name="selisih1" placeholder="Selisih" readonly>
                    </div>
                    <div class="col-md-2">
                      <input type="text" class="form-control" id="kesalahan1" name="kesalahan1" placeholder="Kesalahan " readonly>
                    </div>
                </div>
                <div class="form-group row">
                    <div class="col-md-2">
                        <input type="text" class="form-control" id="bejana2" name="bejana2" placeholder="Bejana 2">
                      </div>
                    <div class="col-md-2">
                        <input type="text" class="form-control" id="awal2" name="awal2" placeholder="Awal Tera 2">
                    </div>
                    <div class="col-md-2">
                      <input type="text" class="form-control" id="akhir2" name="akhir2" placeholder="Akhir Tera 2">
                    </div>
                  
                    <div class="col-md-2">
                      <input type="text" class="form-control" id="selisih2" name="selisih2" placeholder="Selisih" readonly>
                    </div>
                    <div class="col-md-2">
                      <input type="text" class="form-control" id="kesalahan2" name="kesalahan2" placeholder="kesalahan" readonly>
                    </div>
                </div>
                <div class="form-group row">
                    <div class="col-md-2">
                        <input type="text" class="form-control" id="bejana3" name="bejana3" placeholder="Bejana 3">
                      </div>
                    <div class="col-md-2">
                        <input type="text" class="form-control" id="awal3" name="awal3" placeholder="Awal Tera 3">
                    </div>
                    <div class="col-md-2">
                      <input type="text" class="form-control" id="akhir3" name="akhir3" placeholder="Akhir Tera 3">
                    </div>
                    <div class="col-md-2">
                      <input type="text" class="form-control" id="selisih3" name="selisih3" placeholder="Selisih" readonly>
                    </div>
                    <div class="col-md-2">
                      <input type="text" class="form-control" id="kesalahan3" name="kesalahan3" placeholder="kesalahan " readonly>
                    </div>
                    
                </div>
                
            </div>
            </div>
        </div>
    </div> <!-- /.flowting row -->
    </div>
    <div class="container-fluid">
        <div class="col-md-12">
        <div class="card shadow mb-4">
          <div class="card-header">
            <strong class="card-title">KETERANGAN PENUNJANG</strong>
          </div>
          <div class="card-body">
              <div class="form-row">
                <div class="col-md-3 mb-3">
                  <label for="validationCustom3">Tanggal Terima</label>
                  <div class="input-group">
                    <input type="text" class="form-control drgpicker" id="tgl_terima" name="tgl_terima" 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 class="valid-feedback"> Looks good! </div>
                </div>
                <div class="col-md-3 mb-3">
                  <label for="validationCustom4">Nama TTD Pelanggan</label>
                  <input type="text" class="form-control" id="namattd" name="namattd" value="PTD" required>
                  <div class="valid-feedback"> Looks good! </div>
                </div>
              <div class="col-md-4 mb-3">
                <label for="validationCustom4">Petugas TIBLANG</label>
                <select class="form-control select2" id="pethublang" name="pethublang" 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">
                  <div class="col-md-3 mb-3">
                    <label for="validationCustom4">Tanggal Selesai</label>
                    <div class="input-group">
                        <input type="text" class="form-control drgpicker" id="tgl_selesai" name="tgl_selesai" 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 class="valid-feedback"> Looks good! </div>
                    </div>
                <div class="col-md-3 mb-3">
                  <label for="validationCustom4">Tanggal Cetak</label>
                  <div class="input-group">
                      <input type="text" class="form-control drgpicker" id="tgl_cetak" name="tgl_cetak" 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 class="valid-feedback"> Looks good! </div>
                </div>
                <div class="col-md-4 mb-3">
                    <label for="validationCustom4">Petugas Laboratorium</label>
                    <select class="form-control select2" id="petbengkel" name="petbengkel" 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 -->
                 <button type="submit" style="float: right margin-right:50px"  class="btn btn-primary">Submit</button>
                </div>
            </div>
        </div>
   
</form>
@endsection
@section('page_javascripts')
  <script>
     $('.drgpicker').daterangepicker(
      {
        singleDatePicker: true,
        timePicker: false,
        showDropdowns: true,
        locale:
        {
          format: 'DD/MM/YYYY'
        }
      });
    $(document).ready(function () {
      $('#akhir1').keyup(function(event){
        
        var persen = (100);
        var bej1 = $('#bejana1').val();
        var aw1 = $('#awal1').val();
        var akh1 = $('#akhir1').val();
        
        var sel1 = parseFloat(akh1)-parseFloat(aw1)-parseFloat(bej1);
        var err1 = parseFloat(sel1)/parseFloat(bej1)*parseFloat(persen);
        has1 = err1.toFixed(2);
        sih1 = sel1.toFixed(2);
        // console.log(tel1);
        
        $('#kesalahan1').val(has1);
        $('#selisih1').val(sih1); 
        });
    }); 

    $(document).ready(function () {
      $('#akhir2').keyup(function(event){
        
        var persen = (100);
        var bej2 = $('#bejana2').val();
        var aw2 = $('#awal2').val();
        var akh2 = $('#akhir2').val();
        
        var sel2 = parseFloat(akh2)-parseFloat(aw2)-parseFloat(bej2);
        var err2 = parseFloat(sel2)/parseFloat(bej2)*parseFloat(persen);
        has2 = err2.toFixed(2);
        sih2 = sel2.toFixed(2);
        // console.log(tel1);
        
        $('#kesalahan2').val(has2);
        $('#selisih2').val(sih2); 
        });
    }); 
    $(document).ready(function () {
      $('#akhir3').keyup(function(event){
        
        var persen = (100);
        var bej3 = $('#bejana3').val();
        var aw3 = $('#awal3').val();
        var akh3 = $('#akhir3').val();
        
        var sel3 = parseFloat(akh3)-parseFloat(aw3)-parseFloat(bej3);
        var err3 = parseFloat(sel3)/parseFloat(bej3)*parseFloat(persen);
        has3 = err3.toFixed(2);
        sih3 = sel3.toFixed(2);
        // console.log(tel1);
        
        $('#kesalahan3').val(has3);
        $('#selisih3').val(sih3); 
        });
    }); 
  </script>
@endsection