247 lines
8.9 KiB
PHP
247 lines
8.9 KiB
PHP
@extends('layout.app')
|
|
@section('content')
|
|
<div class="container">
|
|
<div class="page-inner">
|
|
<div class="page-header">
|
|
<h3 class="fw-bold mb-3">Diagnosa Penyakit</h3>
|
|
</div>
|
|
<div class="col-xl-12 col-md-12 mt-4">
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<h5>Formulir Diagnosa</h5>
|
|
<div class='alert alert-danger alert-dismissible mt-3' id="diagnosisAlert">
|
|
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
|
|
<h4><i class='icon fa fa-exclamation-triangle'></i> Perhatian!</h4>
|
|
Silakan pilih gejala yang paling sesuai dengan kondisi tanaman Anda dari daftar yang tersedia.
|
|
Setelah selesai memilih gejala, tekan tombol <strong>Diagnosa</strong> yang terletak di
|
|
bawah ini untuk melihat hasil analisis dan rekomendasi penanganan bagi tanaman Anda.
|
|
</div>
|
|
<p id="message" style="display: none;">Silahkan memilih gejala sesuai dengan kondisi tanaman Anda
|
|
!!</p>
|
|
<form method="POST" action="{{ route('diagnosa.proses') }}" id="diagnosaForm">
|
|
@csrf
|
|
<div class="table-responsive mt-3">
|
|
<table id='diagnosisTable' class="table table-bordered" width="100%" cellspacing="0"
|
|
style="border-width: 2px;">
|
|
<thead>
|
|
<tr>
|
|
<th class="col-no" style="border-width: 2px;">No</th>
|
|
<th class="col-gejala" style="border-width: 2px;">Gejala</th>
|
|
<th class="col-kondisi" style="border-width: 2px;">Pilih Kondisi</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody class="pilihkondisi">
|
|
@foreach ($gejala as $index => $item)
|
|
<tr>
|
|
<td class="col-no" style="border-width: 2px;">{{ $loop->iteration }}</td>
|
|
<td class="col-gejala" style="border-width: 2px;">{{ $item->gejala }}</td>
|
|
<td class="col-kondisi" style="border-width: 2px;">
|
|
<select class="form-select form-control"
|
|
name="gejala[{{ $item->kode_gejala }}]">
|
|
<option value="" disabled selected>Pilih Kondisi</option>
|
|
@foreach ($kondisi as $kond)
|
|
<option value="{{ $kond->nilai }}">{{ $kond->name }}</option>
|
|
@endforeach
|
|
</select>
|
|
</td>
|
|
</tr>
|
|
@endforeach
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<button type="submit" class="btn btn-primary mt-3 float-end" name="submit">Diagnosa</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<style>
|
|
.float {
|
|
background: #1A2030;
|
|
/* Warna disesuaikan dengan gambar */
|
|
color: white;
|
|
border-top: 0;
|
|
border-left: 0;
|
|
border-right: 0;
|
|
text-decoration: none;
|
|
font-family: sans-serif;
|
|
font-size: 14pt;
|
|
position: fixed;
|
|
width: 60px;
|
|
height: 60px;
|
|
bottom: 40px;
|
|
right: 40px;
|
|
background-color: #1A2030;
|
|
/* Warna utama */
|
|
color: #FFF;
|
|
border-radius: 50px;
|
|
text-align: center;
|
|
box-shadow: 2px 2px 3px #999;
|
|
z-index: 1000;
|
|
transition: bottom 0.3s ease-in-out;
|
|
|
|
}
|
|
|
|
.scroll-to-top {
|
|
display: none !important;
|
|
}
|
|
|
|
.col-no {
|
|
width: 5% !important;
|
|
}
|
|
|
|
.col-gejala {
|
|
width: 45% !important;
|
|
}
|
|
|
|
.col-kondisi {
|
|
width: 50% !important;
|
|
}
|
|
|
|
select.form-select {
|
|
white-space: normal;
|
|
word-wrap: break-word;
|
|
max-width: 100%;
|
|
font-size: 14px !important;
|
|
}
|
|
|
|
table thead th {
|
|
background-color: #87CEEB !important;
|
|
color: rgb(12, 12, 12) !important;
|
|
border-color: #eaeaea !important;
|
|
}
|
|
|
|
table tbody tr:nth-child(odd) {
|
|
background-color: #f2f2f2 !important;
|
|
}
|
|
|
|
table tbody tr:nth-child(even) {
|
|
background-color: #ffffff !important;
|
|
}
|
|
|
|
table tbody tr:hover {
|
|
background-color: #d1ecf1 !important;
|
|
}
|
|
|
|
table,
|
|
th,
|
|
td {
|
|
border: 2px solid #eaeaea !important;
|
|
}
|
|
|
|
@media (max-width: 576px) {
|
|
table {
|
|
table-layout: fixed;
|
|
}
|
|
|
|
.table thead th {
|
|
padding: 11px 9px !important;
|
|
font-size: 11px !important;
|
|
|
|
}
|
|
|
|
.table thead th.col-no {
|
|
white-space: nowrap !important;
|
|
padding-right: 20px !important;
|
|
|
|
}
|
|
|
|
.table tbody tr td.col-no,
|
|
.table tbody tr td.col-gejala,
|
|
.table tbody tr td.col-kondisi {
|
|
padding: 10px 8px !important;
|
|
font-size: 10px !important;
|
|
|
|
}
|
|
|
|
select.form-select {
|
|
font-size: 10px !important;
|
|
width: 100% !important;
|
|
min-width: 100% !important;
|
|
height: auto !important;
|
|
min-height: 40px !important;
|
|
}
|
|
|
|
.col-no {
|
|
width: 5% !important;
|
|
}
|
|
|
|
.col-gejala {
|
|
width: 40% !important;
|
|
}
|
|
|
|
.col-kondisi {
|
|
width: 50% !important;
|
|
}
|
|
}
|
|
</style>
|
|
|
|
|
|
@section('script')
|
|
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
|
|
<script>
|
|
document.addEventListener("DOMContentLoaded", function() {
|
|
// Validasi form saat submit
|
|
document.getElementById("diagnosaForm").addEventListener("submit", function(event) {
|
|
let selects = document.querySelectorAll("select[name^='gejala']");
|
|
let selectedCount = 0;
|
|
|
|
selects.forEach(select => {
|
|
if (select.value.trim() !== "") {
|
|
selectedCount++;
|
|
}
|
|
});
|
|
|
|
if (selectedCount === 0) {
|
|
event.preventDefault();
|
|
Swal.fire({
|
|
toast: true,
|
|
position: 'top',
|
|
icon: 'error',
|
|
title: 'Anda belum memilih gejala!',
|
|
showConfirmButton: false,
|
|
timer: 3000
|
|
});
|
|
} else if (selectedCount < 3) {
|
|
event.preventDefault();
|
|
Swal.fire({
|
|
toast: true,
|
|
position: 'top',
|
|
icon: 'error',
|
|
title: 'Anda harus memilih minimal 3 gejala!',
|
|
showConfirmButton: false,
|
|
timer: 3000
|
|
});
|
|
}
|
|
});
|
|
|
|
// Inisialisasi DataTables
|
|
$("#diagnosisTable").DataTable({
|
|
"paging": false,
|
|
"lengthChange": false,
|
|
"searching": false,
|
|
"ordering": false,
|
|
"info": false,
|
|
"autoWidth": false,
|
|
"pageLength": 10
|
|
});
|
|
|
|
$("#basic-datatables").DataTable();
|
|
|
|
// Menampilkan pesan setelah alert ditutup
|
|
var alertElement = document.getElementById('diagnosisAlert');
|
|
var messageElement = document.getElementById('message');
|
|
|
|
if (alertElement) {
|
|
alertElement.addEventListener('closed.bs.alert', function() {
|
|
messageElement.style.display = 'block';
|
|
});
|
|
}
|
|
});
|
|
</script>
|
|
|
|
@endsection
|
|
@endsection
|