306 lines
14 KiB
PHP
306 lines
14 KiB
PHP
{{-- resources/views/user/index.blade.php --}}
|
|
@extends('layouts.app')
|
|
@section('title', 'Diagnosa Tanaman')
|
|
|
|
@push('styles')
|
|
<style>
|
|
.hero-user {
|
|
background: linear-gradient(135deg, var(--gpl) 0%, #fff 100%);
|
|
border-radius: 20px; padding: 36px 32px;
|
|
margin-bottom: 24px; position: relative; overflow: hidden;
|
|
border: 1px solid var(--border); box-shadow: var(--shadow-sm);
|
|
}
|
|
.hero-user::after { content:'🌶️'; position:absolute; bottom:12px; right:20px; font-size:64px; opacity:0.07; line-height:1; }
|
|
.hero-badge { display:inline-flex; align-items:center; gap:6px; background:var(--rp); color:var(--rm); font-size:11px; font-weight:700; letter-spacing:0.06em; text-transform:uppercase; padding:5px 14px; border-radius:100px; margin-bottom:14px; border:1px solid #FADBD8; }
|
|
.hero-user h1 { font-family:'Plus Jakarta Sans',sans-serif; font-size:clamp(22px,3vw,30px); font-weight:800; color:var(--text); margin-bottom:8px; line-height:1.2; }
|
|
.hero-user h1 span { color:var(--rm); }
|
|
.hero-user p { font-size:14px; color:var(--text2); line-height:1.75; max-width:460px; margin-bottom:20px; }
|
|
.hero-btns { display:flex; gap:12px; flex-wrap:wrap; }
|
|
|
|
/* PROGRESS */
|
|
.progress-wrap { margin-bottom:20px; }
|
|
.progress-steps { display:flex; align-items:center; gap:0; margin-bottom:8px; }
|
|
.prog-step { display:flex; align-items:center; gap:8px; flex:1; }
|
|
.prog-dot { width:32px; height:32px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:700; flex-shrink:0; transition:all 0.3s; border:2px solid var(--border); background:var(--white); color:var(--text3); font-family:'Plus Jakarta Sans',sans-serif; }
|
|
.prog-dot.active { background:var(--rm); border-color:var(--rm); color:#fff; }
|
|
.prog-dot.done { background:var(--gm); border-color:var(--gm); color:#fff; }
|
|
.prog-label { font-size:12px; color:var(--text3); font-weight:500; }
|
|
.prog-label.active { color:var(--rm); font-weight:600; }
|
|
.prog-label.done { color:var(--gm); }
|
|
.prog-line { flex:1; height:2px; background:var(--border); margin:0 8px; border-radius:2px; transition:background 0.3s; }
|
|
.prog-line.done { background:var(--gm); }
|
|
|
|
/* STEP 1 - Pilih gejala */
|
|
.form-card { background:var(--white); border-radius:16px; border:1px solid var(--border); overflow:hidden; box-shadow:var(--shadow-sm); }
|
|
.form-card-header { padding:18px 24px; border-bottom:1px solid var(--border); }
|
|
.form-card-header h2 { font-family:'Plus Jakarta Sans',sans-serif; font-size:16px; font-weight:800; color:var(--text); margin-bottom:3px; }
|
|
.form-card-header p { font-size:13px; color:var(--text2); }
|
|
.form-card-body { padding:24px; }
|
|
|
|
.bagian-block { margin-bottom:18px; }
|
|
.bagian-label { display:flex; align-items:center; gap:9px; font-family:'Plus Jakarta Sans',sans-serif; font-size:13px; font-weight:700; color:#fff; padding:11px 16px; border-radius:10px 10px 0 0; background:var(--gm); }
|
|
.bagian-label.red { background:var(--rm); }
|
|
.bagian-label.dark { background:var(--gd); }
|
|
.bagian-label.gold { background:#856404; }
|
|
.gejala-grid { display:grid; grid-template-columns:1fr 1fr; background:var(--border); gap:1px; border:1px solid var(--border); border-top:none; border-radius:0 0 10px 10px; overflow:hidden; }
|
|
.gejala-item { display:flex; align-items:center; gap:11px; padding:12px 16px; background:var(--white); cursor:pointer; transition:background 0.15s; }
|
|
.gejala-item:hover { background:var(--gpl); }
|
|
.gejala-item input[type="checkbox"] { accent-color:var(--rm); width:15px; height:15px; flex-shrink:0; cursor:pointer; }
|
|
.gejala-item label { font-size:13px; color:var(--text); cursor:pointer; line-height:1.4; }
|
|
|
|
.form-footer-bar { display:flex; align-items:center; gap:16px; padding:16px 24px; border-top:1px solid var(--border); background:var(--gpl); }
|
|
.selected-info { font-size:13px; color:var(--text2); }
|
|
.selected-info strong { color:var(--rm); font-family:'Plus Jakarta Sans',sans-serif; font-size:15px; }
|
|
.btn-analisis { background:var(--rm); color:#fff; border:none; padding:12px 28px; border-radius:10px; font-size:14px; font-weight:700; font-family:'Plus Jakarta Sans',sans-serif; cursor:pointer; box-shadow:0 4px 12px rgba(192,57,43,0.2); transition:all 0.25s; }
|
|
.btn-analisis:hover:not(:disabled) { background:var(--rd); transform:translateY(-1px); }
|
|
.btn-analisis:disabled { background:#ccc; cursor:not-allowed; box-shadow:none; }
|
|
|
|
/* STEP 2 - Keyakinan */
|
|
.keyakinan-card { background:var(--white); border-radius:16px; border:1px solid var(--border); overflow:hidden; box-shadow:var(--shadow-sm); display:none; }
|
|
.keyakinan-item { border-bottom:1px solid var(--border); }
|
|
.keyakinan-item:last-child { border-bottom:none; }
|
|
.keyakinan-header { padding:14px 20px 10px; background:var(--gpl); }
|
|
.keyakinan-num-nama { display:flex; align-items:center; gap:10px; }
|
|
.k-num { width:24px; height:24px; border-radius:50%; background:var(--rm); color:#fff; font-size:11px; font-weight:700; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
|
|
.k-nama { font-size:14px; font-weight:600; color:var(--text); }
|
|
.keyakinan-options { display:flex; gap:8px; padding:10px 20px 14px; flex-wrap:wrap; }
|
|
.k-opt { display:flex; align-items:center; gap:6px; cursor:pointer; padding:7px 14px; border-radius:100px; border:1px solid var(--border); font-size:12px; font-weight:500; color:var(--text2); transition:all 0.15s; white-space:nowrap; }
|
|
.k-opt:hover { border-color:var(--gm); color:var(--gd); background:var(--gpl); }
|
|
.k-opt.active { background:var(--gp); border-color:var(--gm); color:var(--gd); font-weight:600; }
|
|
.k-opt input[type="radio"] { accent-color:var(--rm); width:13px; height:13px; }
|
|
|
|
@media(max-width:768px){
|
|
.hero-user { padding:24px 18px; }
|
|
.gejala-grid { grid-template-columns:1fr; }
|
|
.hero-btns { flex-direction:column; }
|
|
.form-footer-bar { flex-direction:column; align-items:stretch; }
|
|
.btn-analisis { width:100%; text-align:center; }
|
|
.progress-steps { flex-wrap:wrap; gap:8px; }
|
|
.keyakinan-options { gap:6px; }
|
|
.k-opt { font-size:11px; padding:6px 10px; }
|
|
}
|
|
</style>
|
|
@endpush
|
|
|
|
@section('content')
|
|
|
|
<div class="hero-user">
|
|
<div class="hero-badge">🌶️ RedGuard</div>
|
|
<h1>Diagnosa penyakit <span>tanamanmu</span></h1>
|
|
<p>Pilih gejala yang kamu temukan, lalu tentukan tingkat keyakinanmu untuk hasil diagnosa yang lebih akurat.</p>
|
|
<div class="hero-btns">
|
|
<a href="#form-diagnosa" class="btn btn-primary">🔍 Mulai diagnosa</a>
|
|
<a href="{{ route('user.riwayat') }}" class="btn btn-outline">📋 Lihat riwayat</a>
|
|
</div>
|
|
</div>
|
|
|
|
{{-- Progress Steps --}}
|
|
<div class="progress-wrap" id="progress-wrap">
|
|
<div class="progress-steps">
|
|
<div class="prog-step">
|
|
<div class="prog-dot active" id="dot1">1</div>
|
|
<span class="prog-label active" id="lbl1">Pilih gejala</span>
|
|
</div>
|
|
<div class="prog-line" id="line1"></div>
|
|
<div class="prog-step">
|
|
<div class="prog-dot" id="dot2">2</div>
|
|
<span class="prog-label" id="lbl2">Tingkat keyakinan</span>
|
|
</div>
|
|
<div class="prog-line" id="line2"></div>
|
|
<div class="prog-step">
|
|
<div class="prog-dot" id="dot3">3</div>
|
|
<span class="prog-label" id="lbl3">Hasil diagnosa</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{{-- STEP 1: Pilih Gejala --}}
|
|
<div class="form-card" id="step1" id="form-diagnosa">
|
|
<div class="form-card-header">
|
|
<h2>🩺 Langkah 1 — Pilih gejala yang terlihat</h2>
|
|
<p>Centang semua gejala yang kamu temukan pada tanamanmu</p>
|
|
</div>
|
|
<div class="form-card-body">
|
|
|
|
@if(isset($gejalaDaun) && $gejalaDaun->count())
|
|
<div class="bagian-block">
|
|
<div class="bagian-label">🍃 Daun</div>
|
|
<div class="gejala-grid">
|
|
@foreach($gejalaDaun as $g)
|
|
<div class="gejala-item">
|
|
<input type="checkbox" name="gejala_check[]" value="{{ $g->id }}" id="g{{ $g->id }}" onchange="hitungGejala()">
|
|
<label for="g{{ $g->id }}">{{ $g->nama }}</label>
|
|
</div>
|
|
@endforeach
|
|
</div>
|
|
</div>
|
|
@endif
|
|
|
|
@if(isset($gejalaBatang) && $gejalaBatang->count())
|
|
<div class="bagian-block">
|
|
<div class="bagian-label red">🪵 Batang</div>
|
|
<div class="gejala-grid">
|
|
@foreach($gejalaBatang as $g)
|
|
<div class="gejala-item">
|
|
<input type="checkbox" name="gejala_check[]" value="{{ $g->id }}" id="g{{ $g->id }}" onchange="hitungGejala()">
|
|
<label for="g{{ $g->id }}">{{ $g->nama }}</label>
|
|
</div>
|
|
@endforeach
|
|
</div>
|
|
</div>
|
|
@endif
|
|
|
|
@if(isset($gejalaBuah) && $gejalaBuah->count())
|
|
<div class="bagian-block">
|
|
<div class="bagian-label gold">🍎 Buah</div>
|
|
<div class="gejala-grid">
|
|
@foreach($gejalaBuah as $g)
|
|
<div class="gejala-item">
|
|
<input type="checkbox" name="gejala_check[]" value="{{ $g->id }}" id="g{{ $g->id }}" onchange="hitungGejala()">
|
|
<label for="g{{ $g->id }}">{{ $g->nama }}</label>
|
|
</div>
|
|
@endforeach
|
|
</div>
|
|
</div>
|
|
@endif
|
|
|
|
@if(isset($gejalaLain) && $gejalaLain->count())
|
|
<div class="bagian-block">
|
|
<div class="bagian-label dark">🌿 Seluruh tanaman</div>
|
|
<div class="gejala-grid">
|
|
@foreach($gejalaLain as $g)
|
|
<div class="gejala-item">
|
|
<input type="checkbox" name="gejala_check[]" value="{{ $g->id }}" id="g{{ $g->id }}" onchange="hitungGejala()">
|
|
<label for="g{{ $g->id }}">{{ $g->nama }}</label>
|
|
</div>
|
|
@endforeach
|
|
</div>
|
|
</div>
|
|
@endif
|
|
|
|
</div>
|
|
<div class="form-footer-bar">
|
|
<button type="button" class="btn-analisis" id="btn-lanjut" onclick="goStep2()" disabled>
|
|
Lanjut ke keyakinan →
|
|
</button>
|
|
<span class="selected-info">
|
|
<strong id="count-gejala">0</strong> gejala dipilih <span id="min-info" style="color:var(--rm);font-size:12px;">(minimal 4 gejala)</span>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
{{-- STEP 2: Keyakinan --}}
|
|
<div class="keyakinan-card" id="step2">
|
|
<div class="form-card-header" style="padding:18px 24px;border-bottom:1px solid var(--border);">
|
|
<h2 style="font-family:'Plus Jakarta Sans',sans-serif;font-size:16px;font-weight:800;color:var(--text);margin-bottom:3px;">🎯 Langkah 2 — Seberapa yakin kamu melihat gejala ini?</h2>
|
|
<p style="font-size:13px;color:var(--text2);">Pilih tingkat keyakinan untuk setiap gejala yang kamu pilih</p>
|
|
</div>
|
|
|
|
<form method="POST" action="{{ route('konsultasi.store') }}" id="form-submit">
|
|
@csrf
|
|
<div id="keyakinan-list"></div>
|
|
<div class="form-footer-bar">
|
|
<button type="button" class="btn btn-outline" onclick="goStep1()">← Kembali</button>
|
|
<button type="submit" class="btn-analisis" id="btn-submit">
|
|
🔍 Analisis sekarang
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
|
|
@endsection
|
|
|
|
@push('scripts')
|
|
<script>
|
|
const SKALA = [
|
|
{label: 'Pasti tidak', val: 0.1},
|
|
{label: 'Hampir pasti tidak', val: 0.2},
|
|
{label: 'Kemungkinan besar tidak', val: 0.3},
|
|
{label: 'Mungkin tidak', val: 0.4},
|
|
{label: 'Tidak tahu', val: 0.5},
|
|
{label: 'Mungkin', val: 0.6},
|
|
{label: 'Kemungkinan besar', val: 0.7},
|
|
{label: 'Hampir pasti', val: 0.8},
|
|
{label: 'Pasti', val: 1.0},
|
|
];
|
|
|
|
function hitungGejala() {
|
|
const checked = document.querySelectorAll('input[name="gejala_check[]"]:checked').length;
|
|
document.getElementById('count-gejala').textContent = checked;
|
|
document.getElementById('btn-lanjut').disabled = checked < 4;
|
|
|
|
const info = document.getElementById('min-info');
|
|
if (checked >= 4) {
|
|
info.textContent = '✓ Gejala mencukupi';
|
|
info.style.color = 'var(--gm)';
|
|
} else {
|
|
info.textContent = `(minimal 4 gejala, kurang ${4 - checked} lagi)`;
|
|
info.style.color = 'var(--rm)';
|
|
}
|
|
}
|
|
|
|
function goStep2() {
|
|
const checked = document.querySelectorAll('input[name="gejala_check[]"]:checked');
|
|
if (checked.length === 0) return;
|
|
|
|
// Update progress
|
|
document.getElementById('dot1').className = 'prog-dot done';
|
|
document.getElementById('lbl1').className = 'prog-label done';
|
|
document.getElementById('line1').className = 'prog-line done';
|
|
document.getElementById('dot2').className = 'prog-dot active';
|
|
document.getElementById('lbl2').className = 'prog-label active';
|
|
|
|
// Build keyakinan form
|
|
const list = document.getElementById('keyakinan-list');
|
|
list.innerHTML = '';
|
|
|
|
checked.forEach((cb, i) => {
|
|
const label = document.querySelector(`label[for="${cb.id}"]`);
|
|
const nama = label ? label.textContent.trim() : cb.value;
|
|
const id = cb.value;
|
|
|
|
const item = document.createElement('div');
|
|
item.className = 'keyakinan-item';
|
|
item.innerHTML = `
|
|
<input type="hidden" name="gejala[]" value="${id}">
|
|
<div class="keyakinan-header">
|
|
<div class="keyakinan-num-nama">
|
|
<div class="k-num">${i+1}</div>
|
|
<div class="k-nama">${nama}</div>
|
|
</div>
|
|
</div>
|
|
<div class="keyakinan-options">
|
|
${SKALA.map((s, si) => `
|
|
<label class="k-opt ${si === 4 ? 'active' : ''}" onclick="setActive(this, '${id}')">
|
|
<input type="radio" name="cf_user[${id}]" value="${s.val}" ${si === 4 ? 'checked' : ''}>
|
|
${s.label} (${s.val})
|
|
</label>
|
|
`).join('')}
|
|
</div>
|
|
`;
|
|
list.appendChild(item);
|
|
});
|
|
|
|
document.getElementById('step1').style.display = 'none';
|
|
document.getElementById('step2').style.display = 'block';
|
|
window.scrollTo({top: 0, behavior: 'smooth'});
|
|
}
|
|
|
|
function setActive(el, id) {
|
|
el.closest('.keyakinan-options').querySelectorAll('.k-opt').forEach(o => o.classList.remove('active'));
|
|
el.classList.add('active');
|
|
}
|
|
|
|
function goStep1() {
|
|
document.getElementById('dot1').className = 'prog-dot active';
|
|
document.getElementById('lbl1').className = 'prog-label active';
|
|
document.getElementById('line1').className = 'prog-line';
|
|
document.getElementById('dot2').className = 'prog-dot';
|
|
document.getElementById('lbl2').className = 'prog-label';
|
|
document.getElementById('step2').style.display = 'none';
|
|
document.getElementById('step1').style.display = 'block';
|
|
window.scrollTo({top: 0, behavior: 'smooth'});
|
|
}
|
|
</script>
|
|
@endpush
|