248 lines
11 KiB
PHP
248 lines
11 KiB
PHP
{{-- resources/views/user/show.blade.php --}}
|
|
@extends('layouts.app')
|
|
@section('title', 'Hasil Diagnosa')
|
|
|
|
@push('styles')
|
|
<style>
|
|
/* HEADER CARD */
|
|
.hasil-hero {
|
|
background: linear-gradient(135deg, var(--gd) 0%, #0F3D24 100%);
|
|
border-radius: 20px; padding: 28px 32px;
|
|
margin-bottom: 24px; position: relative; overflow: hidden;
|
|
box-shadow: 0 12px 32px rgba(26,77,46,0.25);
|
|
}
|
|
.hasil-hero::before {
|
|
content:''; position:absolute; top:-60px; right:-60px;
|
|
width:220px; height:220px; border-radius:50%;
|
|
background: radial-gradient(circle, rgba(76,175,114,0.15) 0%, transparent 70%);
|
|
}
|
|
.hasil-hero::after {
|
|
content:'🌶️'; position:absolute; bottom:12px; right:20px;
|
|
font-size:72px; opacity:0.07; line-height:1;
|
|
}
|
|
.hasil-hero-inner { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; position: relative; z-index: 1; }
|
|
.hasil-hero-left h3 { font-size: 11px; font-weight: 700; color: rgba(255,255,255,0.5); letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 8px; }
|
|
.hasil-hero-left h1 { font-family: 'Plus Jakarta Sans', sans-serif; font-size: clamp(20px, 3vw, 28px); font-weight: 800; color: #fff; margin-bottom: 14px; line-height: 1.2; }
|
|
.meta-row { display: flex; gap: 8px; flex-wrap: wrap; }
|
|
.meta-pill {
|
|
background: rgba(255,255,255,0.12); color: rgba(255,255,255,0.85);
|
|
font-size: 11px; padding: 4px 12px; border-radius: 100px;
|
|
border: 1px solid rgba(255,255,255,0.18); backdrop-filter: blur(4px);
|
|
}
|
|
.cf-badge-big {
|
|
background: rgba(76,175,114,0.2); border: 1.5px solid rgba(76,175,114,0.35);
|
|
border-radius: 14px; padding: 16px 22px; text-align: center;
|
|
flex-shrink: 0; backdrop-filter: blur(4px);
|
|
box-shadow: 0 4px 16px rgba(0,0,0,0.15);
|
|
}
|
|
.cf-badge-big small { display: block; font-size: 10px; color: rgba(255,255,255,0.55); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 4px; }
|
|
.cf-badge-big span { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 28px; font-weight: 800; color: #6CE89B; }
|
|
|
|
/* GRID */
|
|
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 20px; }
|
|
.grid-2-bottom { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 20px; }
|
|
|
|
/* FOTO */
|
|
.foto-penyakit {
|
|
width: 100%; height: 190px; object-fit: cover;
|
|
border-radius: 10px; border: 1px solid var(--border);
|
|
background: var(--gp);
|
|
}
|
|
.foto-placeholder {
|
|
width: 100%; height: 190px; border-radius: 10px;
|
|
background: var(--gpl); border: 1px solid var(--border);
|
|
display: flex; align-items: center; justify-content: center;
|
|
font-size: 48px;
|
|
}
|
|
.penyakit-desc { font-size: 13px; color: var(--text2); line-height: 1.75; margin-top: 12px; }
|
|
|
|
/* CF LIST */
|
|
.cf-row { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; padding: 10px 12px; border-radius: 10px; transition: background 0.15s; }
|
|
.cf-row:hover { background: var(--gpl); }
|
|
.cf-thumb {
|
|
width: 42px; height: 42px; border-radius: 8px; flex-shrink: 0;
|
|
overflow: hidden; border: 1px solid var(--border); background: var(--gp);
|
|
display: flex; align-items: center; justify-content: center; font-size: 20px;
|
|
}
|
|
.cf-thumb img { width: 100%; height: 100%; object-fit: cover; }
|
|
.cf-info { flex: 1; min-width: 0; }
|
|
.cf-name { font-size: 13px; font-weight: 600; color: var(--text); }
|
|
.cf-jenis { font-size: 11px; color: var(--text3); margin-top: 1px; }
|
|
.cf-right { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex-shrink: 0; }
|
|
.cf-pct { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 14px; font-weight: 800; }
|
|
.cf-bar-bg { width: 80px; height: 5px; background: var(--gpl); border-radius: 3px; overflow: hidden; }
|
|
.cf-bar-fill { height: 100%; border-radius: 3px; transition: width 0.8s ease; }
|
|
.bar-1 { background: var(--rm); }
|
|
.bar-2 { background: var(--gl); }
|
|
.bar-3 { background: #97C459; }
|
|
.pct-1 { color: var(--rm); }
|
|
.pct-2 { color: var(--gm); }
|
|
.pct-3 { color: #639922; }
|
|
|
|
/* SOLUSI */
|
|
.solusi-card { border-radius: 12px; padding: 18px; border-left: 3px solid var(--gl); background: var(--gpl); border: 1px solid rgba(76,175,114,0.2); }
|
|
.solusi-label { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 13px; font-weight: 700; color: var(--gd); margin-bottom: 8px; display: flex; align-items: center; gap: 6px; }
|
|
.solusi-text { font-size: 13px; color: var(--text2); line-height: 1.75; }
|
|
.pencegahan-card { border-radius: 12px; padding: 18px; background: var(--rp); border: 1px solid #FADBD8; }
|
|
.pencegahan-label { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 13px; font-weight: 700; color: var(--rd); margin-bottom: 8px; display: flex; align-items: center; gap: 6px; }
|
|
.pencegahan-text { font-size: 13px; color: #7A3028; line-height: 1.75; }
|
|
|
|
/* GEJALA */
|
|
.gejala-list { display: flex; flex-wrap: wrap; gap: 8px; }
|
|
.gejala-pill {
|
|
background: var(--gp); color: var(--gd); font-size: 12px; font-weight: 500;
|
|
padding: 6px 14px; border-radius: 100px; border: 1px solid rgba(76,175,114,0.25);
|
|
display: flex; align-items: center; gap: 5px;
|
|
}
|
|
.gejala-pill::before { content: '✓'; color: var(--gl); font-weight: 700; }
|
|
|
|
/* ACTION BAR */
|
|
.action-bar { display: flex; gap: 12px; margin-top: 8px; flex-wrap: wrap; }
|
|
|
|
@media (max-width: 768px) {
|
|
.hasil-hero { padding: 20px; }
|
|
.hasil-hero-inner { flex-direction: column; }
|
|
.cf-badge-big { width: 100%; }
|
|
.grid-2, .grid-2-bottom { grid-template-columns: 1fr; }
|
|
.cf-bar-bg { width: 60px; }
|
|
}
|
|
</style>
|
|
@endpush
|
|
|
|
@section('content')
|
|
<div class="breadcrumb" style="margin-bottom:1rem;">
|
|
<a href="{{ route('konsultasi.index') }}">Beranda</a> /
|
|
<a href="{{ route('user.riwayat') }}">Riwayat</a> /
|
|
Hasil diagnosa
|
|
</div>
|
|
|
|
{{-- HEADER --}}
|
|
<div class="hasil-hero">
|
|
<div class="hasil-hero-inner">
|
|
<div class="hasil-hero-left">
|
|
<h3>Penyakit utama terdeteksi</h3>
|
|
<h1>{{ $konsultasi->hasilUtama->penyakit->nama ?? 'Tidak terdeteksi' }}</h1>
|
|
<div class="meta-row">
|
|
<span class="meta-pill">📅 {{ \Carbon\Carbon::parse($konsultasi->tanggal)->format('d M Y, H:i') }}</span>
|
|
<span class="meta-pill">🔑 {{ $konsultasi->kode_konsultasi }}</span>
|
|
@if($konsultasi->hasilUtama?->penyakit?->jenis)
|
|
<span class="meta-pill">{{ $konsultasi->hasilUtama->penyakit->jenis }}</span>
|
|
@endif
|
|
</div>
|
|
</div>
|
|
@if($konsultasi->hasilUtama)
|
|
<div class="cf-badge-big">
|
|
<small>Tingkat kepercayaan</small>
|
|
<span>{{ number_format($konsultasi->hasilUtama->persentase, 1) }}%</span>
|
|
</div>
|
|
@endif
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
{{-- GRID BARIS 1 --}}
|
|
<div class="grid-2">
|
|
<div class="card">
|
|
<div class="card-header"><span class="card-title">Detail penyakit</span></div>
|
|
<div class="card-body">
|
|
@if($konsultasi->hasilUtama?->penyakit?->gambar)
|
|
<img src="{{ asset('storage/' . $konsultasi->hasilUtama->penyakit->gambar) }}" class="foto-penyakit" alt="{{ $konsultasi->hasilUtama->penyakit->nama }}">
|
|
@else
|
|
<div class="foto-placeholder">🌿</div>
|
|
@endif
|
|
@if($konsultasi->hasilUtama?->penyakit?->deskripsi)
|
|
<p class="penyakit-desc">{{ $konsultasi->hasilUtama->penyakit->deskripsi }}</p>
|
|
@endif
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card">
|
|
<div class="card-header"><span class="card-title">Informasi penyakit</span></div>
|
|
<div class="card-body">
|
|
@if($konsultasi->hasilUtama?->penyakit)
|
|
@php $p = $konsultasi->hasilUtama->penyakit; @endphp
|
|
<div style="display:flex;flex-direction:column;gap:12px;">
|
|
|
|
<div style="display:flex;justify-content:space-between;align-items:center;padding:10px 14px;background:var(--gpl);border-radius:10px;border:1px solid rgba(76,175,114,0.2);">
|
|
<span style="font-size:12px;color:var(--text3);font-weight:600;">Jenis</span>
|
|
<span style="font-size:13px;font-weight:700;color:var(--gd);">{{ $p->jenis ?? '-' }}</span>
|
|
</div>
|
|
|
|
<div style="display:flex;justify-content:space-between;align-items:center;padding:10px 14px;background:var(--gpl);border-radius:10px;border:1px solid rgba(76,175,114,0.2);">
|
|
<span style="font-size:12px;color:var(--text3);font-weight:600;">Kode penyakit</span>
|
|
<span style="font-size:13px;font-weight:700;color:var(--gd);">{{ $p->kode ?? '-' }}</span>
|
|
</div>
|
|
|
|
<div style="display:flex;justify-content:space-between;align-items:center;padding:10px 14px;background:var(--gpl);border-radius:10px;border:1px solid rgba(76,175,114,0.2);">
|
|
<span style="font-size:12px;color:var(--text3);font-weight:600;">Nilai CF akhir</span>
|
|
<span style="font-size:13px;font-weight:700;color:var(--gd);">{{ number_format($konsultasi->hasilUtama->nilai_cf_akhir, 4) }}</span>
|
|
</div>
|
|
|
|
<div style="display:flex;justify-content:space-between;align-items:center;padding:10px 14px;background:var(--gpl);border-radius:10px;border:1px solid rgba(76,175,114,0.2);">
|
|
<span style="font-size:12px;color:var(--text3);font-weight:600;">Tingkat kepercayaan</span>
|
|
<span style="font-size:13px;font-weight:700;color:var(--rm);">{{ number_format($konsultasi->hasilUtama->persentase, 1) }}%</span>
|
|
</div>
|
|
|
|
@if($p->penyebab)
|
|
<div style="padding:10px 14px;background:var(--gpl);border-radius:10px;border:1px solid rgba(76,175,114,0.2);">
|
|
<div style="font-size:12px;color:var(--text3);font-weight:600;margin-bottom:5px;">Penyebab</div>
|
|
<div style="font-size:13px;color:var(--text2);line-height:1.7;">{{ $p->penyebab }}</div>
|
|
</div>
|
|
@endif
|
|
|
|
</div>
|
|
@else
|
|
<p style="font-size:13px;color:var(--text3);">Data tidak tersedia.</p>
|
|
@endif
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{{-- SOLUSI & PENCEGAHAN --}}
|
|
@if($konsultasi->hasilUtama?->penyakit?->solusi)
|
|
<div class="grid-2-bottom">
|
|
<div class="card">
|
|
<div class="card-header"><span class="card-title">🌱 Solusi penanganan</span></div>
|
|
<div class="card-body">
|
|
<p style="font-size:13px;color:var(--text2);line-height:1.8;">
|
|
{{ $konsultasi->hasilUtama->penyakit->solusi->solusi }}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
@if($konsultasi->hasilUtama->penyakit->solusi->pencegahan)
|
|
<div class="card">
|
|
<div class="card-header"><span class="card-title">🛡️ Pencegahan</span></div>
|
|
<div class="card-body">
|
|
<p style="font-size:13px;color:var(--text2);line-height:1.8;">
|
|
{{ $konsultasi->hasilUtama->penyakit->solusi->pencegahan }}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
@endif
|
|
</div>
|
|
@endif
|
|
|
|
{{-- GEJALA --}}
|
|
<div class="card" style="margin-bottom:0;">
|
|
<div class="card-header"><span class="card-title">Gejala yang dipilih</span><span class="badge badge-green">{{ $konsultasi->gejala->count() }} gejala</span></div>
|
|
<div class="card-body">
|
|
<div class="gejala-list">
|
|
@foreach($konsultasi->gejala as $gejala)
|
|
<span class="gejala-pill">{{ $gejala->nama }}</span>
|
|
@endforeach
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="action-bar">
|
|
<a href="{{ route('konsultasi.index') }}" class="btn btn-green">🔍 Diagnosa baru</a>
|
|
<a href="{{ route('user.riwayat') }}" class="btn btn-outline">📋 Lihat riwayat</a>
|
|
<a href="{{ route('hasil.pdf', $konsultasi->id) }}"
|
|
style="background:#C0392B; color:#fff; text-decoration:none;
|
|
padding:9px 18px; border-radius:8px; font-size:12px;
|
|
font-weight:600; display:inline-block;">
|
|
📄 Download PDF
|
|
</a>
|
|
</div>
|
|
@endsection |