255 lines
12 KiB
PHP
255 lines
12 KiB
PHP
@extends('layouts.app')
|
|
|
|
@section('title', 'Riwayat Diagnosa')
|
|
@section('page-title', 'Riwayat Diagnosa')
|
|
|
|
@section('content')
|
|
<div id="tour-history-card" class="bg-white p-4 rounded-2xl border border-[#ede8df]" style="box-shadow:0 4px 16px rgba(26,58,42,.08);">
|
|
<div class="flex justify-between items-center mb-5">
|
|
<h3 class="text-lg font-bold" style="font-family:'Playfair Display',serif;color:#1a3a2a;">Daftar Riwayat</h3>
|
|
<a href="{{ route('diagnosis.create') }}" id="tour-history-btn"
|
|
class="px-4 py-2 rounded-full text-white font-semibold text-sm flex items-center gap-2 transition"
|
|
style="background:#1a3a2a;box-shadow:0 4px 14px rgba(26,58,42,.25);"
|
|
onmouseover="this.style.background='#2d6a4f'" onmouseout="this.style.background='#1a3a2a'">
|
|
<i class="fas fa-plus"></i>
|
|
<span class="hidden sm:inline">Diagnosa Baru</span>
|
|
</a>
|
|
</div>
|
|
|
|
{{-- Mobile: card --}}
|
|
<div class="block sm:hidden space-y-3">
|
|
@forelse($diagnoses as $index => $diagnosis)
|
|
<div class="p-4 rounded-xl border border-[#ede8df]">
|
|
<div class="flex justify-between items-start mb-2">
|
|
<div>
|
|
<p class="font-semibold text-sm" style="color:#1a3a2a;">{{ $diagnosis->plant_name }}</p>
|
|
<p class="text-xs mt-0.5" style="color:#5a7a67;">{{ $diagnosis->disease_name }}</p>
|
|
</div>
|
|
<span class="px-2 py-1 rounded-full text-xs font-semibold flex-shrink-0" style="background:#d8f3dc;color:#2d6a4f;">
|
|
{{ $diagnosis->confidence }}%
|
|
</span>
|
|
</div>
|
|
<div class="flex justify-between items-center mt-3">
|
|
<p class="text-xs" style="color:#8fa89a;">{{ $diagnosis->created_at->format('d/m/Y H:i') }}</p>
|
|
<a href="{{ route('diagnosis.result', $diagnosis->id) }}"
|
|
class="text-xs font-semibold px-3 py-1.5 rounded-lg"
|
|
style="background:#f0fdf4;color:#2d6a4f;border:1px solid #b7ddc4;">
|
|
<i class="fas fa-eye mr-1"></i> Detail
|
|
</a>
|
|
</div>
|
|
</div>
|
|
@empty
|
|
<div class="text-center py-10" style="color:#8fa89a;">
|
|
<i class="fas fa-inbox text-4xl mb-3 block" style="color:#b7e4c7;"></i>
|
|
<p class="mb-2">Belum ada riwayat diagnosa</p>
|
|
<a href="{{ route('diagnosis.create') }}" style="color:#40916c;" class="text-sm font-medium">
|
|
Mulai diagnosa pertama Anda
|
|
</a>
|
|
</div>
|
|
@endforelse
|
|
</div>
|
|
|
|
{{-- Desktop: tabel --}}
|
|
<div id="tour-history-table" class="hidden sm:block overflow-x-auto">
|
|
<table class="w-full">
|
|
<thead>
|
|
<tr style="background:#f8f4ee;border-bottom:2px solid #ede8df;">
|
|
<th class="text-left py-3 px-4" style="color:#5a7a67;font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;font-weight:600;">No</th>
|
|
<th class="text-left py-3 px-4" style="color:#5a7a67;font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;font-weight:600;">Tanggal</th>
|
|
<th class="text-left py-3 px-4" style="color:#5a7a67;font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;font-weight:600;">Nama Tanaman</th>
|
|
<th class="text-left py-3 px-4" style="color:#5a7a67;font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;font-weight:600;">Penyakit</th>
|
|
<th class="text-left py-3 px-4" style="color:#5a7a67;font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;font-weight:600;">Akurasi</th>
|
|
<th class="text-left py-3 px-4" style="color:#5a7a67;font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;font-weight:600;">Aksi</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
@forelse($diagnoses as $index => $diagnosis)
|
|
<tr style="border-bottom:1px solid rgba(237,232,223,.6);" class="transition" onmouseover="this.style.background='rgba(216,243,220,.25)'" onmouseout="this.style.background=''">
|
|
<td class="py-3 px-4 text-sm" style="color:#8fa89a;">{{ $diagnoses->firstItem() + $index }}</td>
|
|
<td class="py-3 px-4 text-sm" style="color:#5a7a67;">{{ $diagnosis->created_at->format('d/m/Y H:i') }}</td>
|
|
<td class="py-3 px-4 text-sm font-medium" style="color:#1a3a2a;">{{ $diagnosis->plant_name }}</td>
|
|
<td class="py-3 px-4 text-sm" style="color:#1a2e22;">{{ $diagnosis->disease_name }}</td>
|
|
<td class="py-3 px-4">
|
|
<span class="px-3 py-1 rounded-full text-sm font-semibold" style="background:#d8f3dc;color:#2d6a4f;">
|
|
{{ $diagnosis->confidence }}%
|
|
</span>
|
|
</td>
|
|
<td class="py-3 px-4">
|
|
<a href="{{ route('diagnosis.result', $diagnosis->id) }}"
|
|
class="text-sm font-medium flex items-center gap-1 transition"
|
|
style="color:#40916c;"
|
|
onmouseover="this.style.color='#1a3a2a'" onmouseout="this.style.color='#40916c'">
|
|
<i class="fas fa-eye"></i> Detail
|
|
</a>
|
|
</td>
|
|
</tr>
|
|
@empty
|
|
<tr>
|
|
<td colspan="6" class="text-center py-10" style="color:#8fa89a;">
|
|
<i class="fas fa-inbox text-4xl mb-3 block" style="color:#b7e4c7;"></i>
|
|
<p class="mb-2">Belum ada riwayat diagnosa</p>
|
|
<a href="{{ route('diagnosis.create') }}" style="color:#40916c;" class="hover:underline text-sm font-medium">
|
|
Mulai diagnosa pertama Anda
|
|
</a>
|
|
</td>
|
|
</tr>
|
|
@endforelse
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
@if($diagnoses->hasPages())
|
|
<div class="mt-6">
|
|
{{ $diagnoses->links() }}
|
|
</div>
|
|
@endif
|
|
</div>
|
|
|
|
<script>
|
|
/* ============================================================
|
|
GUIDED TOUR — Halaman Riwayat
|
|
============================================================ */
|
|
const histTourSteps = [
|
|
{
|
|
title: 'Halaman Riwayat 📋',
|
|
desc: 'Di sini tersimpan semua diagnosa yang pernah kamu lakukan. Yuk kita lihat apa saja yang ada!',
|
|
target: null,
|
|
},
|
|
{
|
|
title: 'Tabel Riwayat',
|
|
desc: 'Tabel ini menampilkan <b>tanggal</b>, <b>nama tanaman</b>, <b>penyakit</b> yang terdeteksi, dan <b>tingkat akurasi</b>. Klik <b>Detail</b> untuk melihat hasil lengkapnya.',
|
|
targetSel: '#tour-history-table',
|
|
pos: 'bottom',
|
|
},
|
|
{
|
|
title: 'Diagnosa Baru',
|
|
desc: 'Mau diagnosa tanaman lagi? Klik tombol ini dan kamu langsung diarahkan ke halaman diagnosa.',
|
|
targetSel: '#tour-history-btn',
|
|
pos: 'bottom',
|
|
},
|
|
];
|
|
|
|
let _hTourStep = 0;
|
|
|
|
function _hTourEl(id) { return document.getElementById(id); }
|
|
function _hTourFindTarget(step) {
|
|
if (!step.targetSel) return null;
|
|
return document.querySelector(step.targetSel);
|
|
}
|
|
|
|
function _hTourStart() {
|
|
_hTourStep = 0;
|
|
if (!_hTourEl('_htour_hl')) { const d = document.createElement('div'); d.id = '_htour_hl'; document.body.appendChild(d); }
|
|
if (!_hTourEl('_htour_tip')) { const d = document.createElement('div'); d.id = '_htour_tip'; document.body.appendChild(d); }
|
|
if (!_hTourEl('_htour_dim')) { const d = document.createElement('div'); d.id = '_htour_dim'; document.body.appendChild(d); }
|
|
_hTourRender();
|
|
}
|
|
|
|
function _hTourRender() {
|
|
const step = histTourSteps[_hTourStep];
|
|
const total = histTourSteps.length;
|
|
const hl = _hTourEl('_htour_hl');
|
|
const tip = _hTourEl('_htour_tip');
|
|
const dim = _hTourEl('_htour_dim');
|
|
const target = _hTourFindTarget(step);
|
|
|
|
dim.style.cssText = 'position:fixed;inset:0;z-index:99990;background:rgba(0,0,0,0.52);pointer-events:auto;';
|
|
|
|
if (target) {
|
|
const r = target.getBoundingClientRect();
|
|
const pad = 8;
|
|
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 .35s ease;`;
|
|
dim.style.background = 'transparent';
|
|
} else {
|
|
hl.style.cssText = 'display:none;';
|
|
}
|
|
|
|
const dots = Array.from({length:total}, (_, i) =>
|
|
`<div style="width:${i===_hTourStep?16:6}px;height:6px;border-radius:3px;
|
|
background:${i===_hTourStep?'#2d6a4f':'#d1d5db'};
|
|
transition:all .3s;display:inline-block;margin-right:4px;"></div>`
|
|
).join('');
|
|
|
|
let tipPos = 'top:50%;left:50%;transform:translate(-50%,-50%);';
|
|
if (target) {
|
|
const r = target.getBoundingClientRect();
|
|
const vw = window.innerWidth;
|
|
const vh = window.innerHeight;
|
|
if (step.pos === 'bottom' && r.bottom + 230 < vh)
|
|
tipPos = `top:${r.bottom+16}px;left:${Math.max(16,Math.min(r.left,vw-310))}px;transform:none;`;
|
|
else if (step.pos === 'top' && r.top - 230 > 0)
|
|
tipPos = `top:${r.top-230}px;left:${Math.max(16,Math.min(r.left,vw-310))}px;transform:none;`;
|
|
else if (step.pos === 'right' && r.right + 310 < vw)
|
|
tipPos = `top:${Math.min(r.top,vh-260)}px;left:${r.right+16}px;transform:none;`;
|
|
else
|
|
tipPos = 'top:50%;left:50%;transform:translate(-50%,-50%);';
|
|
}
|
|
|
|
tip.style.cssText = `
|
|
position:fixed;${tipPos}
|
|
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;`;
|
|
|
|
tip.innerHTML = `
|
|
<div style="font-size:11px;color:#2d6a4f;font-weight:700;text-transform:uppercase;
|
|
letter-spacing:.8px;margin-bottom:6px;">
|
|
Langkah ${_hTourStep+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="_hTourEnd()"
|
|
style="background:none;border:none;font-size:12px;color:#9ca3af;cursor:pointer;padding:4px;">
|
|
Lewati
|
|
</button>
|
|
<button onclick="_hTourNext()"
|
|
style="background:#2d6a4f;color:#fff;border:none;
|
|
padding:9px 18px;border-radius:10px;font-size:13px;font-weight:600;cursor:pointer;">
|
|
${_hTourStep === total-1 ? 'Paham! ✓' : 'Lanjut →'}
|
|
</button>
|
|
</div>
|
|
</div>`;
|
|
}
|
|
|
|
function _hTourNext() {
|
|
_hTourStep++;
|
|
if (_hTourStep >= histTourSteps.length) { _hTourEnd(); return; }
|
|
_hTourRender();
|
|
}
|
|
|
|
function _hTourEnd() {
|
|
['_htour_hl','_htour_tip','_htour_dim'].forEach(id => {
|
|
const el = _hTourEl(id);
|
|
if (el) el.remove();
|
|
});
|
|
localStorage.setItem('sipakartebu_history_tour_done', '1');
|
|
}
|
|
|
|
window.addEventListener('load', function () {
|
|
if (!localStorage.getItem('sipakartebu_history_tour_done')) {
|
|
setTimeout(_hTourStart, 800);
|
|
}
|
|
});
|
|
|
|
function ulangiTourRiwayat() {
|
|
localStorage.removeItem('sipakartebu_history_tour_done');
|
|
_hTourStart();
|
|
}
|
|
</script>
|
|
|
|
@endsection |