@extends('dashboard.utama')
@section('content')
@foreach ($data as $d)
<form action="{{ route('savekalibrasi') }}" method="POST" class="needs-validation" novalidate>
  @csrf
    <div class="container-fluid">
    <div class="col-md-12">
    <h2 class="page-title">TAMBAH DATA KALIBRASI 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-2 mb-3">
              <label for="validationCustom3">No.Bon Pekerjaan</label>
              <input type="text" class="form-control" id="nobonp" name="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" name="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" name="namapel" value="{{$d->nama}}" required readonly>
            <div class="valid-feedback"> Looks good! </div>
          </div>
          <div class="col-md-3 mb-3">
            <label for="validationCustom4">Nomer Pendaftaran</label>
            <input type="text" class="form-control" id="nopen" name="nopen" value="{{$nopen}}" required readonly>
            <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">Jenis Pekerjaan</label>
                <input type="text" class="form-control" id="ket_jenis" name="kat_jenis" value="{{$d->keterangan}}" required readonly>
                <input type="hidden" name="jenis" id="jenis" value="{{$d->jenis_bonp}}">	
                <div class="valid-feedback"> Looks good! </div>
              </div>
              <div class="col-md-7 mb-3">
                <label for="validationCustom4">Alamat Pelanggan</label>
                <input type="text" class="form-control" id="alamat" name="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="kalibrasi" name="kalibrasi" 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-2">
              <label for="validationCustom4">Tanggal Terima</label>
                <div class="input-group-append">
                    <input class="form-control drgpicker" id="tgl_terima" type="text" name="tgl_terima" value="">
                    <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-2">
            <label for="validationCustom4">Tanggal Kalibrasi</label>
                <div class="input-group-append">
                    <input type="text" class="form-control drgpicker" id="tgl_kalibrasi" name="tgl_kalibrasi">
                    <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-2 mb-3">
            <label for="validationSelect2">Debit</label>
            <select class="form-control select2" id="debitair" name="debitair" required>
                <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" name="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" name="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" name="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" name="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" name="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" name="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" name="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" name="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" name="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" name="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="merkmeter" name="merkmeter" 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" 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="ukuran" name="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-2 mb-3">
                <label for="validationSelect2">Daya Baca/Kelas </label>
                <select class="form-control select2" id="daya" name="daya" required>
                  <option value="0.01">0.01</option>
                  <option value="0.02">0.02</option>	
                  <option value="0.05" >0.05</option>
                  <option value="0.1">0.1</option>	
                  <option value="0.5" selected>0.5</option>
                  <option value="1">1</option>	
                </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" name="standmeter" 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="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" 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="KA">ADA</option> 
                        <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" 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 KALIBRASI </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="hasil1" name="hasil1" placeholder="Hasil Kalibrasi" readonly>
                  </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="error1" name="error1" placeholder="Error " 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="hasil2" name="hasil2" placeholder="Hasil Kalibrasi" readonly>
                  </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="error2" name="error2" placeholder="Error " 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="hasil3" name="hasil3" placeholder="Hasil Kalibrasi" readonly>
                  </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="error3" name="error3" placeholder="Error " readonly>
                  </div>
                  
                  <div class="col-md-6 align-items-center ">
                    <Label> </Label>
                   </div>
                   <div class="col-md-2">
                     <input type="text" class="form-control" id="ratahasil" name="ratahasil" placeholder="Rata Rata Kalibrasi" readonly>
                   </div>
                   <div class="col-md-2">
                     <input type="text" class="form-control" id="rataselisih" name="rataselisih" placeholder="Rata Rata Selisih" readonly>
                   </div>
                   <div class="col-md-2">
                     <input type="text" class="form-control" id="rataerror" name="rataerror" placeholder=" Rata Rata Error" readonly>
                   </div>
                </div>
                <div class="form-group row">
                    <label for="inputPassword3" class="col-md-2 col-form-label">Hasil Tera</label>
                    <div class="col-md-2 mb2">
                    <select class="form-control select2" id="hasiltera" name="hasiltera" 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-8">
                      <input type="text" class="form-control" id="catatan" name="catatan" placeholder="KETERANGAN">
                    </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_p" name="tgl_terima_p" 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" name="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="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 Bengkel Meter</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>
    </div> <!-- .container-fluid -->
    
</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);
        var has1 = parseFloat(akh1)-parseFloat(aw1);
        salah1 = err1.toFixed(2);
        sih1 = sel1.toFixed(2);
        hasill1 = has1.toFixed(2);
        // console.log(tel1);
        
        $('#hasil1').val(hasill1);
        $('#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);
        sil2 = has2.toFixed(2);
        
        $('#hasil2').val(sil2);
        $('#error2').val(salah2);
        $('#selisih2').val(sih2); 
        });
    }); 
    $(document).ready(function () {
      $('#akhir3').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);

        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);

        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);
        var rathas3 = (has1+has2+has3)/3;
        var raterr3 = (err1+err2+err3)/3;
        var ratsel = (sel1+sel2+sel3)/3;
        var salah3 = err3.toFixed(2);
        var sih3 = sel3.toFixed(2);
        var sil3 = has3.toFixed(2);
        var rathasil = rathas3.toFixed(2);
        var raterror = raterr3.toFixed(2);
        var ratselisisih = ratsel.toFixed(2);
        
        $('#hasil3').val(sil3);
        $('#error3').val(salah3);
        $('#selisih3').val(sih3);
        $('#ratahasil').val(rathasil); 
        $('#rataerror').val(raterror);
        $('#rataselisih').val(ratselisisih);
        });
    }); 
  </script>
@endsection