@extends('layout.main')

@section('judul')
    Data Analisis Dugaan
@endsection

@section('isi')
<div class="alert alert-warning" role="alert">
    <i class="fas fa-exclamation-circle"></i> <!-- Icon perhatian -->
    Pilih paling sedikit 3 dan paling banyak 7 gejala sesuai yang dialami kucing kemudian pilih rentan jawaban atau tingkat keyakinan,
    untuk gejala yang tidak dipilih dapat dihiraukan.
</div>

<div class="card">
    <div class="card-header">
      <h3 class="card-title">
        <!--<a href="/analisis/create" class="btn btn-primary">Tambah Data Analisis Dugaan</a>-->
      </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 id="form-analisis" action="{{ url('/hasil-analisis') }}" method="POST">
            @csrf
            <table class="table table-sm table-bordered table-striped">
                <thead>
                    <tr>
                        <th style="text-align: center;">No</th>
                        <th style="text-align: center;">Kode Gejala</th>
                        <th style="text-align: center;">Nama Gejala</th>
                        <th style="text-align: center;">Pilihan Jawaban</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($gejala as $index => $g)
                    <tr>
                        <td>{{ $index + 1 }}</td>
                        <td>G{{ $index + 1 }}</td>
                        <td>{{ $g->nama_gejala }}</td>
                        <td>
                            <select name="pilihan_jawaban[]" class="form-control" id="pilihan_jawaban_{{ $g->id }}" aria-describedby="analisisPencegahanHelp">
                                <option value="Pilih Rentan Jawaban">Pilih Rentan Jawaban</option>
                                @foreach($nuser as $rentan => $nilaiUser)
                                <option value="{{ $rentan }}" data-nilai-user="{{ $nilaiUser }}">{{ $rentan }}</option>
                            @endforeach
                            </select>
                    </tr>
                    @endforeach
                </tbody>
            </table>
            <br>
            <button type="submit" id="btn-kirim" class="btn btn-success float-right">Kirim Jawaban</button>
        </form>
    </div>
</div>
<script>
    // Kode JavaScript validasi
    document.getElementById('form-analisis').addEventListener('submit', function(event) {
        // Ambil semua elemen select
        var selects = document.querySelectorAll('select[name="pilihan_jawaban[]"]');
        var selectedCount = 0;

        // Periksa setiap elemen select
        selects.forEach(function(select) {
            if (select.value !== 'Pilih Rentan Jawaban') {
                selectedCount++;
            }
        });

        // Jika tidak ada yang dipilih atau hanya satu yang dipilih, hentikan pengiriman formulir dan tampilkan peringatan
        if (selectedCount < 3 || selectedCount > 7) {
            event.preventDefault(); // Hentikan pengiriman formulir
            alert('Pilih setidaknya tiga jawaban dan paling banyak tujuh jawaban sebelum mengirimkan formulir.');
        }
    });
</script>

@endsection