@extends('dashboard.utama')
@section('content')
<form  method="POST" class="needs-validation" novalidate>
  @csrf
    <div class="container-fluid">
    <div class="col-md-12">
    <h2 class="page-title">TAMBAH DATA METER SEPIHAK (PERBAIKAN)</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>
      @foreach ($data as $d)
          
      <div class="card-body">
          <div class="form-row">
            <div class="col-md-2 mb-3">
              <label for="validationCustom3">No.Bon Pekerjaan</label>
              <input type="text" class="form-control" id="nobonp" value="{{$d->no_bonp}}" required readonly>
              <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" value="{{$d->no_plg}}" required readonly>
              <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" value="{{$d->nama}}" required readonly>
            <div class="valid-feedback"> Looks good! </div>
          </div>
        </div><!-- /.form-row -->
          <div class="form-row">
            <div class="col-md-2 mb-3">
                <label for="validationCustom4">Jenis Pekerjaan</label>
                <input type="text" class="form-control" id="jenis" value="{{$d->jenis_bonp}}" required readonly>
                <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="alamat" value="JL.{{$d->jalan}}&nbsp;{{$d->gang}}&nbsp;No.{{$d->nomor}}" required readonly>
                <div class="valid-feedback"> Looks good! </div>
              </div>
            </div> <!-- /.form-row -->
            </div>
            </div>
        </div>
    </div>
    @endforeach
</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 Kalibrasi</strong>
      </div>
      <div class="card-body">
          <div class="form-row">
            <div class="col-md-4 mb-3">
                <label for="validationSelect2">Metode Kalibrasi</label>
                <select class="form-control select2" id="validationSelect2" required>
                    <option value="4">IK-7.4-29 : KALIBRASI METER AIR</option>
                </select>
                <div class="invalid-feedback"> Masukkan Data yang Benar </div>
              </div>
            <div class="col-md-3 mb-3">
              <label for="validationCustom4">Tanggal Terima</label>
                <div class="input-group-append">
                    <input class="form-control" id="tgl_terimakali" type="date" name="date">
                </div>
              <div class="valid-feedback"> Looks good! </div>
            </div>
          <div class="col-md-3 mb-3">
            <label for="validationCustom4">Tanggal Kalibrasi</label>
                <div class="input-group-append">
                    <input class="form-control" id="tgl_kalibrasi" type="date" name="date">
                </div>
              <div class="valid-feedback"> Looks good! </div>
          </div>
          <div class="col-md-2 mb-3">
            <label for="validationSelect2">Debit</label>
            <select class="form-control select2" id="debitair" required>
              <option value="Q3=1.5 m3/h">Q3 = 1.5M<sup>3</sup>/H</option>
              <option value="Q3=1.6 m3/h">Q3 = 1.6M<sup>3</sup>/H</option>
            </select>
            <div class="invalid-feedback"> Please select a valid state. </div>
          </div>
        </div><!-- /.form-row -->
          <div class="form-row">
            <div class="col-md-3 mb-3">
                <label for="validationCustom4">Suhu Ruang Awal</label>
                <input type="text" class="form-control" id="suhuawal"  required>
                <div class="valid-feedback"> Looks good! </div>
              </div>
              <div class="col-md-3 mb-3">
                <label for="validationCustom4">Suhu Ruang Akhir</label>
                <input type="text" class="form-control" id="suhuakhir"  required>
                <div class="valid-feedback"> Looks good! </div>
              </div>
              <div class="col-md-3 mb-3">
                <label for="validationCustom4">Kelembapan Awal</label>
                <input type="text" class="form-control" id="lembapawal" required>
                <div class="valid-feedback"> Looks good! </div>
              </div>
              <div class="col-md-3 mb-3">
                <label for="validationCustom4">Kelembapan Akhir</label>
                <input type="text" class="form-control" id="lembapakhir" required>
                <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">Suhu Meter Air 1</label>
                    <input type="text" class="form-control" id="suhuair1"  required>
                    <div class="valid-feedback"> Looks good! </div>
                  </div>
                  <div class="col-md-4 mb-3">
                    <label for="validationCustom4">Suhu Meter Air 2</label>
                    <input type="text" class="form-control" id="suhuair2"  required>
                    <div class="valid-feedback"> Looks good! </div>
                  </div>
                  <div class="col-md-4 mb-3">
                    <label for="validationCustom4">Suhu Meter Air 3</label>
                    <input type="text" class="form-control" id="suhuair3"  required>
                    <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">Suhu Bejana 1</label>
                        <input type="text" class="form-control" id="suhubejana1" required>
                        <div class="valid-feedback"> Looks good! </div>
                      </div>
                      <div class="col-md-4 mb-3">
                        <label for="validationCustom4">Suhu Bejana 2</label>
                        <input type="text" class="form-control" id="suhubejana2" required>
                        <div class="valid-feedback"> Looks good! </div>
                      </div>
                      <div class="col-md-4 mb-3">
                        <label for="validationCustom4">Suhu Bejana 3</label>
                        <input type="text" class="form-control" id="suhubejana3" required>
                        <div class="valid-feedback"> Looks good! </div>
                      </div>
                    </div> <!-- /.form-row -->
            </div>
            </div>
        </div>
    </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 Fisik Periksa Meter</strong>
          </div>
          <div class="card-body">
          <div class="form-row">
            <div class="col-md-2 mb-3">
                <label for="validationSelect2">Merk Meter</label>
                <select class="form-control select2" id="validationSelect2" required>
                  @foreach ($merk as $m)
                  <option value="{{$m->kodemerek}}">{{$m->namamerek}}</option>
                  @endforeach
                </select>
                <div class="invalid-feedback"> Please select a valid state. </div>
              </div>
              <div class="col-md-3 mb-3">
                <label for="validationCustom4">No.Meter</label>
                <input type="text" class="form-control" id="nometer" value="No Meter" 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="ukuran" required>
                  @foreach ($ukuran as $u)
                  <option value="{{$u->kodeukuran}}">{{$u->kodeukuran}}&nbsp;{{$u->ket}}</option>
                  @endforeach
                </select>
                <div class="invalid-feedback"> Please select a valid state. </div>
              </div>
              <div class="col-md-3 mb-3">
                <label for="validationCustom4">Penunjuk Angka (Stand)</label>
                <input type="text" class="form-control" id="standmeter" value="No 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="validationSelect2" required>
                        <option value="BA">ADA</option>
                        <option value="BB">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" 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="validationSelect2" 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" 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="validationSelect2" 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" 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="validationSelect2" required>
                        <option value="KB">BURAM</option>
                        <option value="KP">PECAH</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" 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="validationSelect2" 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" 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 KALIBRASI </strong>
            </div>
            <div class="card-body">
                <div class="form-group row">
                    <div class="col-md-3">
                        <input type="text" class="form-control" id="bejana1" placeholder="Bejana 1">
                      </div>
                    <div class="col-md-3">
                        <input type="text" class="form-control" id="awal1" placeholder="Awal Tera 1">
                    </div>
                  <div class="col-md-3">
                    <input type="text" class="form-control" id="akhir1" placeholder="Akhir Tera 1">
                  </div>
                  <div class="col-md-2">
                    <input type="text" class="form-control" id="hasil1" placeholder="Hasil Kalibrasi" readonly>
                  </div>
                  <div class="col-md-2">
                    <input type="text" class="form-control" id="selisih1" placeholder="Selisih" readonly>
                  </div>
                  <div class="col-md-2">
                    <input type="text" class="form-control" id="error1" placeholder="Error " readonly>
                  </div>
                </div>
                <div class="form-group row">
                    <div class="col-md-3">
                        <input type="text" class="form-control" id="bejana2" placeholder="Bejana 2">
                      </div>
                    <div class="col-md-3">
                        <input type="text" class="form-control" id="awal2" placeholder="Awal Tera 2">
                    </div>
                  <div class="col-md-3">
                    <input type="text" class="form-control" id="akhir2" placeholder="Akhir Tera 2">
                  </div>
                  <div class="col-md-2">
                    <input type="text" class="form-control" id="hasil2" placeholder="Hasil Kalibrasi" readonly>
                  </div>
                  <div class="col-md-2">
                    <input type="text" class="form-control" id="selisih2" placeholder="Selisih" readonly>
                  </div>
                  <div class="col-md-2">
                    <input type="text" class="form-control" id="error2" placeholder="Error " readonly>
                  </div>
                </div>
                <div class="form-group row">
                    <div class="col-md-3">
                        <input type="text" class="form-control" id="bejana3" placeholder="Bejana 3">
                      </div>
                    <div class="col-md-3">
                        <input type="text" class="form-control" id="awal3" placeholder="Awal Tera 3">
                    </div>
                  <div class="col-md-3">
                    <input type="text" class="form-control" id="akhir3" placeholder="Akhir Tera 3">
                  </div>
                  <div class="col-md-2">
                    <input type="text" class="form-control" id="hasil3" placeholder="Hasil Kalibrasi" readonly>
                  </div>
                  <div class="col-md-2">
                    <input type="text" class="form-control" id="selisih3" placeholder="Selisih" readonly>
                  </div>
                  <div class="col-md-2">
                    <input type="text" class="form-control" id="error3" placeholder="Error " 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" value="04/24/2020" 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 Pelanggan</label>
                  <input type="text" class="form-control" id="namattd" placeholder="TTD PELANGGAN" required>
                  <div class="valid-feedback"> Looks good! </div>
                </div>
              <div class="col-md-4 mb-3">
                <label for="validationCustom4">Petugas Hublang</label>
                <select class="form-control select2" id="validationSelect2" 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" value="04/24/2020" 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" value="04/24/2020" 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 Bengkel Meter</label>
                    <select class="form-control select2" id="validationSelect2" 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>
    </div> <!-- .container-fluid -->
</form>
@endsection
@section('page_javascripts')
  <script>
    $(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);
        var has1 = parseFloat(akh1)-parseFloat(aw1);
        salah1 = err1.toFixed(2);
        sih1 = sel1.toFixed(2);
        // console.log(tel1);
        
        $('#hasil1').val(has1);
        $('#error1').val(salah1);
        $('#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);
        var has2 = parseFloat(akh2)-parseFloat(aw2);
        salah2 = err2.toFixed(2);
        sih2 = sel2.toFixed(2);
        
        $('#hasil2').val(has2);
        $('#error2').val(salah2);
        $('#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);
        var has3 = parseFloat(akh3)-parseFloat(aw3);
        salah3 = err3.toFixed(2);
        sih3 = sel3.toFixed(2);
        
        $('#hasil3').val(has3);
        $('#error3').val(salah3);
        $('#selisih3').val(sih3); 
        });
    }); 
  </script>
@endsection