@extends('layout.main')

@section('judul')
    Data Galeri
@endsection

@section('isi')
<div class="card">
    <div class="card-header">
      <h3 class="card-title">
        Tambah Data Galeri
      </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="/gejala/store" method="POST">
            @csrf
            <div class="form-group">
                <!-- Label untuk kode gejala -->
                <label for="kode_gejala">Kode Gejala:</label><br>
                <!-- Input field untuk kode gejala -->
                <input type="text" name="kode_gejala" id="kode_gejala" class="form-control" readonly><br>
                <!-- Label untuk nama gejala -->
                <label for="nama_gejala">Nama Gejala:</label><br>
                <!-- Input field untuk nama gejala -->
                <input type="text" name="nama_gejala" id="nama_gejala" class="form-control" required><br>
            </div>
            <button type="submit" class="btn btn-primary">Simpan</button><br>
        </form>
    </div>
  </div>
</div>
@endsection

<script>
    // Generate kode gejala secara otomatis saat halaman dimuat
    window.onload = function() {
        generateKodeGejala();
    };

    // Fungsi untuk menghasilkan kode gejala secara otomatis
    function generateKodeGejala() {
        // Kirim permintaan AJAX untuk mendapatkan jumlah total gejala
        axios.get('/gejala/count')
            .then(function(response) {
                // Hitung total gejala
                var totalGejala = response.data.total;
                
                // Bangkitkan kode gejala berikutnya
                var nextKodeGejala = 'G' + (totalGejala + 1);

                // Tampilkan data kode gejala di konsol
                console.log('Next Kode Gejala:', nextKodeGejala);
                
                // Set nilai input field kode_gejala dengan kode gejala yang dihasilkan
                document.getElementById('kode_gejala').value = nextKodeGejala;
            })
            .catch(function(error) {
                console.error('Error:', error);
            });
    }
</script>