@extends('layout.main')

@section('judul')
    Data Penanganan Lanjutan
@endsection

@section('isi')
<div class="card">
    <div class="card-header">
      <h3 class="card-title">
        Tambah Penanganan Lanjutan
      </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="/penanganan/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="penanganan" 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>

            <label for="saran_penanganan_lanjutan">Saran Penanganan Lanjutan</label><br>
                <!-- Kolom teks untuk deskripsi penyakit -->
            <textarea name="saran_penanganan_lanjutan" id="saran_penanganan_lanjutan" class="form-control" rows="4" required></textarea><br>
            <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 || '';
});
</script>
@endsection