@extends('layout.main')

@section('judul')
    Data Nilai CF Pakar
@endsection

@section('isi')
<div class="card">
    <div class="card-header">
      <h3 class="card-title">
        Tambah Data Nilai CF Pakar
      </h3>

      <div class="card-tools">
        <button type="button" class="btn btn-tool" data-card-widget="collapse" data-toggle="tooltip" title="Collapse">
          <i class="fas fa-minus"></i></button>
        <button type="button" class="btn btn-tool" data-card-widget="remove" data-toggle="tooltip" title="Remove">
          <i class="fas fa-times"></i></button>
      </div>
    </div>
    <div class="card-body">
        <form action="/npakar/store" method="POST">
            @csrf
            <div class="mb-3">
              <label for="kode_penyakit" class="form-label">Kode Penyakit</label>
              <input type="text" name="kode_penyakit" class="form-control" id="kode_penyakit" aria-describedby="npakarPenangananHelp" readonly>
          </div>
            <div class="mb-3">
              <label for="nama_penyakit" class="form-label">Nama Penyakit</label>
              <select name="nama_penyakit" class="form-control" id="nama_penyakit">
                  <option value="">Pilih Nama Penyakit</option>
                  @foreach($penyakit as $p)
                      <option value="{{ $p->nama_penyakit }}" data-kode="{{ $p->kode_penyakit }}">{{ $p->nama_penyakit }}</option>
                  @endforeach
              </select>
          </div>
          
          <div class="mb-3">
            <label for="kode_gejala" class="form-label">Kode Gejala</label>
            <input type="text" name="kode_gejala" class="form-control" id="kode_gejala" aria-describedby="npakarPencegahanHelp" readonly>
        </div>  
          <div class="mb-3">
                <label for="nama_gejala" class="form-label">Nama Gejala</label>
                <select name="nama_gejala" class="form-control" id="nama_gejala">
                    <option value="">Pilih Nama Gejala</option>
                    @foreach($gejala as $g)
                        <option value="{{ $g->nama_gejala }}" data-kode="{{ $g->kode_gejala }}">{{ $g->nama_gejala }}</option>
                    @endforeach
                </select>
            </div>
            
            <div class="mb-3">
              <label for="nilai_pakar" class="form-label">Nilai Pakar</label>
              <input type="text" name="nilai_pakar" class="form-control" id="nilai_pakar" aria-describedby="npakarPencegahanHelp">
          </div>
            <input type="submit" class="btn btn-info" value="Save">
        </form>
    </div>
  </div>
</div>
@endsection

@section('scripts')
<script>
document.getElementById('nama_penyakit').addEventListener('change', function() {
    var namaPenyakit = this.value;
    var kodePenyakitInput = document.getElementById('kode_penyakit');

    // Ambil kode penyakit dari atribut data-kode
    var kodePenyakit = this.options[this.selectedIndex].getAttribute('data-kode');

    // Isi kolom kode penyakit dengan kode penyakit yang sesuai
    kodePenyakitInput.value = kodePenyakit || '';
});


document.getElementById('nama_gejala').addEventListener('change', function() {
    var namaGejala = this.value;
    var kodeGejalaInput = document.getElementById('kode_gejala');

    // Ambil kode gejala dari atribut data-kode
    var kodeGejala = this.options[this.selectedIndex].getAttribute('data-kode');

    // Isi kolom kode gejala dengan kode gejala yang sesuai
    kodeGejalaInput.value = kodeGejala || '';
});
</script>
@endsection