319 lines
12 KiB
PHP
319 lines
12 KiB
PHP
@extends('layouts.app')
|
|
|
|
@section('title', 'Hasil Diagnosa')
|
|
@section('page-title', 'Hasil Diagnosa')
|
|
|
|
@section('content')
|
|
<div class="max-w-4xl mx-auto space-y-6">
|
|
|
|
<!-- HEADER -->
|
|
<div id="tour-result-header" class="bg-white p-6 rounded-2xl border text-center">
|
|
<h2 class="text-2xl font-bold text-green-800">
|
|
Diagnosa Selesai
|
|
</h2>
|
|
<p class="text-sm text-gray-500">
|
|
{{ now()->format('d F Y, H:i') }} WIB
|
|
</p>
|
|
</div>
|
|
|
|
<!-- INFO TANAMAN -->
|
|
<div class="bg-white p-6 rounded-2xl border">
|
|
<h3 class="font-bold mb-3">Informasi Tanaman</h3>
|
|
<p><strong>Nama:</strong> {{ $diagnosis->plant_name }}</p>
|
|
</div>
|
|
|
|
<!-- GEJALA -->
|
|
<div id="tour-result-gejala" class="bg-white p-6 rounded-2xl border">
|
|
<h3 class="font-bold mb-3">
|
|
Gejala yang Dilaporkan ({{ count($diagnosis->symptoms ?? []) }} gejala)
|
|
</h3>
|
|
<ul class="space-y-2">
|
|
@foreach($diagnosis->symptoms ?? [] as $kode => $data)
|
|
@php
|
|
$cfVal = $data['cf'];
|
|
if ($cfVal == 0.0) {
|
|
$cfColor = '#6b7280'; $cfBg = '#f3f4f6';
|
|
} elseif ($cfVal <= 0.2) {
|
|
$cfColor = '#991b1b'; $cfBg = '#fee2e2';
|
|
} elseif ($cfVal <= 0.4) {
|
|
$cfColor = '#92400e'; $cfBg = '#fef3c7';
|
|
} elseif ($cfVal <= 0.6) {
|
|
$cfColor = '#1d4ed8'; $cfBg = '#dbeafe';
|
|
} else {
|
|
$cfColor = '#2d6a4f'; $cfBg = '#d8f3dc';
|
|
}
|
|
@endphp
|
|
<li>
|
|
✔ {{ $kode }} - {{ $data['nama'] }}
|
|
<span style="display:inline-block;margin-left:6px;padding:1px 8px;border-radius:999px;
|
|
font-size:11px;font-weight:600;background:{{ $cfBg }};color:{{ $cfColor }};">
|
|
{{ number_format($cfVal, 1) }}
|
|
</span>
|
|
</li>
|
|
@endforeach
|
|
</ul>
|
|
</div>
|
|
|
|
<!-- HASIL -->
|
|
<div id="tour-result-penyakit" class="bg-white p-6 rounded-2xl border">
|
|
<h3 class="font-bold mb-3">Hasil Diagnosa</h3>
|
|
<p><strong>Penyakit:</strong> {{ $diagnosis->disease_name }}</p>
|
|
|
|
@php
|
|
$conf = $diagnosis->confidence;
|
|
$confVal = $conf / 100;
|
|
if ($confVal <= 0.20) {
|
|
$label = 'Tidak Terdeteksi'; $labelColor = '#6b7280'; $labelBg = '#f3f4f6';
|
|
} elseif ($confVal <= 0.40) {
|
|
$label = 'Rendah'; $labelColor = '#991b1b'; $labelBg = '#fee2e2';
|
|
} elseif ($confVal <= 0.60) {
|
|
$label = 'Sedang'; $labelColor = '#92400e'; $labelBg = '#fef3c7';
|
|
} elseif ($confVal <= 0.80) {
|
|
$label = 'Tinggi'; $labelColor = '#1d4ed8'; $labelBg = '#dbeafe';
|
|
} else {
|
|
$label = 'Sangat Tinggi'; $labelColor = '#2d6a4f'; $labelBg = '#d8f3dc';
|
|
}
|
|
@endphp
|
|
<p>
|
|
<strong>Kepercayaan:</strong> {{ $conf }}%
|
|
<span style="display:inline-block;margin-left:8px;padding:2px 10px;border-radius:999px;
|
|
font-size:12px;font-weight:600;background:{{ $labelBg }};color:{{ $labelColor }};">
|
|
{{ $label }}
|
|
</span>
|
|
</p>
|
|
|
|
<div class="mt-4">
|
|
<h4 class="font-bold mb-2">Penanganan:</h4>
|
|
@php $treatments = explode(';', $diagnosis->treatment); @endphp
|
|
<ol class="list-decimal ml-5 space-y-1">
|
|
@foreach($treatments as $item)
|
|
@if(trim($item) != '')
|
|
<li>{{ trim($item) }}</li>
|
|
@endif
|
|
@endforeach
|
|
</ol>
|
|
|
|
<div id="tour-result-catatan" class="mt-4 p-3 rounded-lg bg-yellow-50 border text-sm text-yellow-800">
|
|
<strong>Catatan:</strong><br>
|
|
Hasil diagnosa ini bersifat awal. Untuk penanganan yang lebih tepat dan akurat,
|
|
disarankan untuk berkonsultasi langsung dengan ahli tanaman atau penyuluh pertanian.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- DEBUG SEMENTARA — hapus setelah selesai debug
|
|
@isset($debugInfo)
|
|
<div class="bg-gray-900 text-green-300 p-4 rounded-2xl text-xs font-mono overflow-x-auto">
|
|
<p class="text-yellow-400 font-bold mb-3">🔍 gambaran perhitungan manual — Langkah Perhitungan CF (hapus setelah selesai)</p>
|
|
@foreach($debugInfo as $item)
|
|
<div class="mb-4 border-b border-gray-700 pb-3">
|
|
<p class="text-white font-bold">{{ $item['nama'] }} → {{ $item['persentase'] }}%</p>
|
|
@if(isset($item['steps']))
|
|
<table class="mt-1 w-full text-xs">
|
|
<tr class="text-gray-400">
|
|
<th class="text-left pr-4">Gejala</th>
|
|
<th class="text-left pr-4">CF Pakar</th>
|
|
<th class="text-left pr-4">CF User</th>
|
|
<th class="text-left pr-4">CF Komb</th>
|
|
<th class="text-left">CF Akumulasi</th>
|
|
</tr>
|
|
@foreach($item['steps'] as $step)
|
|
<tr>
|
|
<td class="pr-4">{{ $step['gejala'] }}</td>
|
|
<td class="pr-4">{{ $step['cf_pakar'] }}</td>
|
|
<td class="pr-4">{{ $step['cf_user'] }}</td>
|
|
<td class="pr-4">{{ $step['cf_komb'] }}</td>
|
|
<td>{{ $step['cf_akum'] }}</td>
|
|
</tr>
|
|
@endforeach
|
|
</table>
|
|
@endif
|
|
</div>
|
|
@endforeach
|
|
</div>
|
|
@endisset -->
|
|
|
|
<!-- ACTION -->
|
|
<div id="tour-result-action" class="flex gap-4">
|
|
<a href="{{ route('diagnosis.create') }}"
|
|
class="flex-1 text-center py-3 rounded-full text-white bg-green-800">
|
|
+ Diagnosa Baru
|
|
</a>
|
|
<a href="{{ route('history') }}"
|
|
class="flex-1 text-center py-3 rounded-full border">
|
|
Lihat Riwayat
|
|
</a>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<script>
|
|
const resultTourSteps = [
|
|
{
|
|
title: 'Hasil Diagnosa Kamu! 🎉',
|
|
desc: 'Ini adalah hasil analisa dari gejala yang kamu masukkan. Mari kita lihat satu per satu.',
|
|
targetSel: null,
|
|
},
|
|
{
|
|
title: 'Gejala yang Dilaporkan',
|
|
desc: 'Di sini tampil semua gejala yang kamu pilih tadi beserta nilai <b>CF (Certainty Factor)</b> — yaitu tingkat keyakinanmu.',
|
|
targetSel: '#tour-result-gejala',
|
|
},
|
|
{
|
|
title: 'Nama Penyakit & Penanganan',
|
|
desc: 'Ini hasil diagnosa utama: nama penyakit, tingkat kepercayaan model, dan <b>langkah penanganannya</b>.',
|
|
targetSel: '#tour-result-penyakit',
|
|
},
|
|
{
|
|
title: 'Catatan Penting',
|
|
desc: 'Hasil ini bersifat <b>awal</b>. Tetap konsultasikan dengan ahli pertanian untuk penanganan yang lebih tepat ya!',
|
|
targetSel: '#tour-result-catatan',
|
|
},
|
|
{
|
|
title: 'Langkah Selanjutnya',
|
|
desc: 'Kamu bisa langsung <b>Diagnosa Baru</b> atau melihat semua riwayat diagnosamu.',
|
|
targetSel: '#tour-result-action',
|
|
},
|
|
];
|
|
|
|
let _rStep = 0;
|
|
const _rGet = id => document.getElementById(id);
|
|
const _rTarget = step => step.targetSel ? document.querySelector(step.targetSel) : null;
|
|
|
|
function _rStart() {
|
|
_rStep = 0;
|
|
['_rt_hl','_rt_tip','_rt_dim'].forEach(id => {
|
|
if (!_rGet(id)) {
|
|
const d = document.createElement('div');
|
|
d.id = id;
|
|
document.body.appendChild(d);
|
|
}
|
|
});
|
|
_rRender();
|
|
}
|
|
|
|
function _rRender() {
|
|
const step = resultTourSteps[_rStep];
|
|
const total = resultTourSteps.length;
|
|
const hl = _rGet('_rt_hl');
|
|
const tip = _rGet('_rt_tip');
|
|
const dim = _rGet('_rt_dim');
|
|
const target = _rTarget(step);
|
|
|
|
dim.style.cssText = 'position:fixed;inset:0;z-index:99990;background:rgba(0,0,0,0.52);pointer-events:auto;';
|
|
|
|
tip.style.opacity = '0';
|
|
hl.style.opacity = '0';
|
|
hl.style.display = 'block';
|
|
|
|
const dots = Array.from({length: total}, (_, i) =>
|
|
`<span style="display:inline-block;width:${i===_rStep?16:6}px;height:6px;
|
|
border-radius:3px;background:${i===_rStep?'#2d6a4f':'#d1d5db'};
|
|
transition:all .3s;margin-right:4px;"></span>`
|
|
).join('');
|
|
|
|
tip.innerHTML = `
|
|
<div style="font-size:11px;color:#2d6a4f;font-weight:700;text-transform:uppercase;
|
|
letter-spacing:.8px;margin-bottom:6px;">Langkah ${_rStep+1} dari ${total}</div>
|
|
<div style="font-size:15px;font-weight:700;color:#1a3a2a;margin-bottom:8px;
|
|
font-family:'Playfair Display',serif;">${step.title}</div>
|
|
<div style="font-size:13px;color:#5a7a67;line-height:1.65;margin-bottom:18px;">${step.desc}</div>
|
|
<div style="display:flex;align-items:center;justify-content:space-between;">
|
|
<div>${dots}</div>
|
|
<div style="display:flex;gap:10px;align-items:center;">
|
|
<button onclick="_rEnd()"
|
|
style="background:none;border:none;font-size:12px;color:#9ca3af;cursor:pointer;padding:4px;">
|
|
Lewati
|
|
</button>
|
|
<button onclick="_rNext()"
|
|
style="background:#2d6a4f;color:#fff;border:none;padding:9px 18px;
|
|
border-radius:10px;font-size:13px;font-weight:600;cursor:pointer;">
|
|
${_rStep === total-1 ? 'Mengerti! ✓' : 'Lanjut →'}
|
|
</button>
|
|
</div>
|
|
</div>`;
|
|
|
|
tip.style.cssText = `
|
|
position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);
|
|
z-index:99999;background:#fff;border-radius:16px;
|
|
padding:22px 24px;width:290px;
|
|
box-shadow:0 12px 40px rgba(0,0,0,0.18);
|
|
font-family:inherit;pointer-events:auto;opacity:0;`;
|
|
|
|
function _place() {
|
|
if (!target) {
|
|
hl.style.display = 'none';
|
|
dim.style.background = 'rgba(0,0,0,0.52)';
|
|
tip.style.opacity = '1';
|
|
return;
|
|
}
|
|
|
|
const r = target.getBoundingClientRect();
|
|
const pad = 8;
|
|
const vw = window.innerWidth;
|
|
const vh = window.innerHeight;
|
|
const TW = 310;
|
|
const TH = 230;
|
|
|
|
hl.style.cssText = `
|
|
position:fixed;z-index:99992;pointer-events:none;
|
|
top:${r.top - pad}px;left:${r.left - pad}px;
|
|
width:${r.width + pad*2}px;height:${r.height + pad*2}px;
|
|
border:2.5px solid #2d6a4f;border-radius:12px;
|
|
box-shadow:0 0 0 9999px rgba(0,0,0,0.52);
|
|
transition:all .3s ease;opacity:1;display:block;`;
|
|
dim.style.background = 'transparent';
|
|
|
|
let top, left;
|
|
left = Math.max(16, Math.min(r.left, vw - TW - 16));
|
|
|
|
if (r.top - TH - 16 >= 0) {
|
|
top = r.top - TH - 12;
|
|
} else if (r.bottom + TH + 16 <= vh) {
|
|
top = r.bottom + 12;
|
|
} else {
|
|
top = Math.max(16, (vh - TH) / 2);
|
|
left = Math.max(16, (vw - TW) / 2);
|
|
}
|
|
|
|
tip.style.top = top + 'px';
|
|
tip.style.left = left + 'px';
|
|
tip.style.transform = 'none';
|
|
tip.style.opacity = '1';
|
|
}
|
|
|
|
if (target) {
|
|
target.scrollIntoView({ behavior: 'smooth', block: 'center' });
|
|
setTimeout(_place, 450);
|
|
} else {
|
|
_place();
|
|
}
|
|
}
|
|
|
|
function _rNext() {
|
|
_rStep++;
|
|
if (_rStep >= resultTourSteps.length) { _rEnd(); return; }
|
|
_rRender();
|
|
}
|
|
|
|
function _rEnd() {
|
|
['_rt_hl','_rt_tip','_rt_dim'].forEach(id => {
|
|
const el = _rGet(id);
|
|
if (el) el.remove();
|
|
});
|
|
localStorage.setItem('sipakartebu_result_tour_done', '1');
|
|
}
|
|
|
|
window.addEventListener('load', function () {
|
|
if (!localStorage.getItem('sipakartebu_result_tour_done')) {
|
|
setTimeout(_rStart, 800);
|
|
}
|
|
});
|
|
|
|
function ulangiTourHasil() {
|
|
localStorage.removeItem('sipakartebu_result_tour_done');
|
|
_rStart();
|
|
}
|
|
</script>
|
|
|
|
@endsection |