189 lines
6.5 KiB
PHP
189 lines
6.5 KiB
PHP
@extends('layouts.app')
|
|
|
|
@section('content')
|
|
<section class="py-5" style="background-color:#FFF7ED;">
|
|
<div class="container">
|
|
|
|
<!-- Judul -->
|
|
<h2 class="text-center fw-bold mb-5"
|
|
style="color:#F2720C; font-size:2rem; letter-spacing:0.5px;">
|
|
🌽 Diagnosis Penyakit Jagung
|
|
</h2>
|
|
|
|
<p class="text-center mb-4"
|
|
style="font-size: 1.1rem; color:#555;">
|
|
Silakan pilih gejala yang muncul pada tanaman jagung Anda
|
|
beserta tingkat keyakinannya untuk mengetahui kemungkinan
|
|
penyakit yang menyerang.
|
|
</p>
|
|
|
|
<!-- Form -->
|
|
<form action="{{ route('diagnosis.proses') }}"
|
|
method="POST"
|
|
class="p-5 rounded-4 shadow-sm bg-white"
|
|
style="max-width:1500px; margin:auto;"
|
|
id="diagnosisForm">
|
|
|
|
@csrf
|
|
|
|
<div class="row g-4">
|
|
|
|
@foreach ($gejala as $item)
|
|
|
|
<div class="col-md-6">
|
|
|
|
<div class="border rounded-4 p-4 h-100 shadow-sm"
|
|
style="background-color:#fff;
|
|
border:2px solid #F2720C !important;">
|
|
|
|
<!-- Checkbox -->
|
|
<div class="form-check mb-4">
|
|
|
|
<input class="form-check-input gejala-checkbox"
|
|
type="checkbox"
|
|
name="gejala[]"
|
|
value="{{ $item['kode'] }}"
|
|
id="{{ $item['kode'] }}"
|
|
data-target="cf_{{ $item['kode'] }}"
|
|
style="
|
|
width:24px;
|
|
height:24px;
|
|
cursor:pointer;
|
|
border:2px solid #F2720C;
|
|
">
|
|
|
|
<label class="form-check-label ms-2"
|
|
for="{{ $item['kode'] }}"
|
|
style="
|
|
cursor:pointer;
|
|
font-size:1.08rem;
|
|
font-weight:600;
|
|
color:#333;
|
|
">
|
|
|
|
<strong>{{ $item['kode'] }}</strong>
|
|
- {{ $item['nama'] }}
|
|
|
|
</label>
|
|
|
|
</div>
|
|
|
|
<!-- Tingkat Keyakinan -->
|
|
<div>
|
|
|
|
<label class="form-label fw-semibold"
|
|
style="color:#444;">
|
|
Tingkat Keyakinan
|
|
</label>
|
|
|
|
<select name="cf_user[{{ $item['kode'] }}]"
|
|
id="cf_{{ $item['kode'] }}"
|
|
class="form-select"
|
|
disabled>
|
|
|
|
<option value="0">
|
|
-- Pilih Keyakinan --
|
|
</option>
|
|
|
|
<option value="1">
|
|
Sangat Yakin
|
|
</option>
|
|
|
|
<option value="0.8">
|
|
Yakin
|
|
</option>
|
|
|
|
<option value="0.6">
|
|
Cukup Yakin
|
|
</option>
|
|
|
|
<option value="0.4">
|
|
Sedikit Yakin
|
|
</option>
|
|
|
|
<option value="0.2">
|
|
Tidak Yakin
|
|
</option>
|
|
|
|
</select>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
@endforeach
|
|
|
|
</div>
|
|
|
|
<!-- Tombol -->
|
|
<div class="text-center mt-5">
|
|
|
|
<button type="submit"
|
|
class="btn px-5 py-2"
|
|
style="
|
|
background-color:#4CAF50;
|
|
color:white;
|
|
font-weight:600;
|
|
border-radius:10px;
|
|
font-size:1.1rem;
|
|
">
|
|
|
|
Proses Diagnosis
|
|
|
|
</button>
|
|
|
|
</div>
|
|
|
|
</form>
|
|
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Script Enable Disable Dropdown + VALIDASI POPUP SAAT KLIK TOMBOL -->
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function () {
|
|
|
|
const checkboxes = document.querySelectorAll('.gejala-checkbox');
|
|
const form = document.getElementById('diagnosisForm');
|
|
|
|
// Fungsi untuk enable/disable dropdown
|
|
checkboxes.forEach(function (checkbox) {
|
|
checkbox.addEventListener('change', function () {
|
|
const targetId = this.getAttribute('data-target');
|
|
const selectBox = document.getElementById(targetId);
|
|
|
|
if (this.checked) {
|
|
selectBox.disabled = false;
|
|
} else {
|
|
selectBox.disabled = true;
|
|
selectBox.value = 0;
|
|
}
|
|
});
|
|
});
|
|
|
|
// =====================================================
|
|
// VALIDASI SAAT TOMBOL DIKLIK: POPUP JIKA < 3 GEJALA
|
|
// =====================================================
|
|
if (form) {
|
|
form.addEventListener('submit', function(e) {
|
|
|
|
// Hitung berapa checkbox yang diceklis
|
|
let checkedCount = document.querySelectorAll('.gejala-checkbox:checked').length;
|
|
|
|
// Jika kurang dari 3, tampilkan popup alert dan BATALKAN submit
|
|
if (checkedCount < 3) {
|
|
e.preventDefault();
|
|
alert('⚠️ PERINGATAN!\n\nAnda hanya memilih ' + checkedCount + ' gejala.\n\nMinimal harus memilih 3 gejala untuk melakukan diagnosis sesuai dengan rule base yang telah ditetapkan pakar.');
|
|
return false;
|
|
}
|
|
|
|
// Jika 3 atau lebih, lanjutkan submit (tidak ada popup)
|
|
return true;
|
|
});
|
|
}
|
|
|
|
});
|
|
</script>
|
|
@endsection |