165 lines
7.3 KiB
PHP
165 lines
7.3 KiB
PHP
@extends('layouts.app')
|
|
@section('title', $disease->name)
|
|
@section('page-title', 'Detail Penyakit')
|
|
|
|
@section('content')
|
|
|
|
<!-- Navigasi atas -->
|
|
<div class="flex items-center justify-between mb-6">
|
|
<a href="{{ route('diseases.index') }}" class="inline-flex items-center gap-2 text-sm font-medium" style="color:#2d6a4f;">
|
|
<i class="fas fa-arrow-left"></i> Kembali ke Kamus
|
|
</a>
|
|
<!-- Tombol Hapus di halaman detail -->
|
|
@if(auth()->user()->isAdmin())
|
|
<a href="{{ route('diseases.edit', $disease->id) }}"
|
|
class="px-4 py-2 rounded-lg text-sm font-semibold"
|
|
style="background:#fef3c7;color:#92400e;border:1px solid #fcd34d;">
|
|
Edit Penyakit
|
|
</a>
|
|
<button onclick="confirmDelete({{ $disease->id }}, '{{ addslashes($disease->name) }}')"
|
|
class="inline-flex items-center gap-2 px-4 py-2 rounded-xl text-sm font-semibold transition"
|
|
style="background:#fff0f0;color:#dc2626;border:1.5px solid #fca5a5;"
|
|
onmouseover="this.style.background='#fee2e2'" onmouseout="this.style.background='#fff0f0'">
|
|
<i class="fas fa-trash"></i> Hapus Penyakit
|
|
</button>
|
|
@endif
|
|
</div>
|
|
|
|
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
|
|
|
|
<!-- Kiri: Info Penyakit -->
|
|
<div class="lg:col-span-1">
|
|
<div class="bg-white rounded-2xl border border-[#ede8df] overflow-hidden" style="box-shadow:0 2px 12px rgba(26,58,42,.06);">
|
|
<div class="h-56 flex items-center justify-center overflow-hidden" style="background:#f0fdf4;">
|
|
@if($disease->photo)
|
|
<img src="{{ asset('storage/'.$disease->photo) }}" class="w-full h-full object-cover">
|
|
@else
|
|
<i class="fas fa-leaf text-6xl" style="color:#b7ddc4;"></i>
|
|
@endif
|
|
</div>
|
|
<div class="p-5">
|
|
<span class="text-xs font-bold px-2 py-1 rounded-lg" style="background:#d8f3dc;color:#2d6a4f;">{{ $disease->code }}</span>
|
|
<h2 class="text-xl font-bold mt-3 mb-1" style="font-family:'Playfair Display',serif;color:#1a3a2a;">{{ $disease->name }}</h2>
|
|
<p class="text-sm italic mb-3" style="color:#8fa89a;">{{ $disease->latin_name }}</p>
|
|
<p class="text-sm" style="color:#5a7a67;">{{ $disease->description }}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Kanan: Gejala & Penanganan -->
|
|
<div class="lg:col-span-2 space-y-6">
|
|
|
|
<!-- Gejala -->
|
|
<div class="bg-white rounded-2xl border border-[#ede8df] p-6" style="box-shadow:0 2px 12px rgba(26,58,42,.06);">
|
|
<h3 class="text-lg font-bold mb-4" style="font-family:'Playfair Display',serif;color:#1a3a2a;">
|
|
<i class="fas fa-search mr-2" style="color:#2d6a4f;"></i>Gejala-Gejala
|
|
</h3>
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
@foreach($disease->symptoms as $symptom)
|
|
<div class="rounded-xl overflow-hidden border" style="border-color:#e8f5ec;">
|
|
@if($symptom->photo)
|
|
<img src="{{ asset('storage/'.$symptom->photo) }}" class="w-full h-32 object-cover">
|
|
@else
|
|
<div class="w-full h-24 flex items-center justify-center" style="background:#f0fdf4;">
|
|
<i class="fas fa-image text-2xl" style="color:#b7ddc4;"></i>
|
|
</div>
|
|
@endif
|
|
<div class="p-3">
|
|
<span class="text-xs font-bold" style="color:#2d6a4f;">{{ $symptom->code }}</span>
|
|
<p class="text-sm mt-1" style="color:#1a3a2a;">{{ $symptom->name }}</p>
|
|
<p class="text-xs mt-1" style="color:#a0b4a8;">CF: {{ $symptom->pivot->cf_value }}</p>
|
|
</div>
|
|
</div>
|
|
@endforeach
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Penanganan -->
|
|
<div class="bg-white rounded-2xl border border-[#ede8df] p-6" style="box-shadow:0 2px 12px rgba(26,58,42,.06);">
|
|
<h3 class="text-lg font-bold mb-4" style="font-family:'Playfair Display',serif;color:#1a3a2a;">
|
|
<i class="fas fa-medkit mr-2" style="color:#2d6a4f;"></i>Cara Penanganan
|
|
</h3>
|
|
<div class="space-y-3">
|
|
@foreach($disease->treatments as $i => $t)
|
|
<div class="flex gap-3 p-3 rounded-xl" style="background:#f8f4ee;">
|
|
<div class="w-7 h-7 rounded-full flex items-center justify-center flex-shrink-0 text-white text-sm font-bold"
|
|
style="background:#2d6a4f;">{{ $i+1 }}</div>
|
|
<div>
|
|
<span class="text-xs font-bold" style="color:#8fa89a;">{{ $t->code }}</span>
|
|
<p class="text-sm mt-0.5" style="color:#1a3a2a;">{{ $t->description }}</p>
|
|
</div>
|
|
</div>
|
|
@endforeach
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ─── Modal Konfirmasi Hapus ─── -->
|
|
<div id="deleteModal" class="fixed inset-0 z-50 hidden flex items-center justify-center"
|
|
style="background:rgba(0,0,0,0.4);">
|
|
<div class="bg-white rounded-2xl p-6 w-full max-w-sm mx-4 shadow-2xl"
|
|
style="animation: popIn .25s cubic-bezier(0.22,1,0.36,1);">
|
|
<div class="text-center mb-4">
|
|
<div class="w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-3"
|
|
style="background:#fff0f0;">
|
|
<i class="fas fa-trash text-2xl" style="color:#dc2626;"></i>
|
|
</div>
|
|
<h3 class="text-lg font-bold mb-1" style="font-family:'Playfair Display',serif;color:#1a3a2a;">
|
|
Hapus Penyakit?
|
|
</h3>
|
|
<p class="text-sm" style="color:#5a7a67;">
|
|
Kamu akan menghapus penyakit <br>
|
|
<strong id="deleteName" style="color:#1a3a2a;"></strong>
|
|
</p>
|
|
<p class="text-xs mt-2" style="color:#dc2626;">
|
|
⚠️ Data gejala & penanganan ikut terhapus dan tidak bisa dikembalikan.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="flex gap-3 mt-4">
|
|
<button onclick="closeModal()"
|
|
class="flex-1 py-2.5 rounded-xl text-sm font-semibold"
|
|
style="background:#f0fdf4;color:#2d6a4f;border:1.5px solid #b7ddc4;">
|
|
Batal
|
|
</button>
|
|
<form id="deleteForm" method="POST" class="flex-1">
|
|
@csrf
|
|
@method('DELETE')
|
|
<button type="submit"
|
|
class="w-full py-2.5 rounded-xl text-sm font-semibold text-white"
|
|
style="background:#dc2626;">
|
|
Ya, Hapus
|
|
</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
@endsection
|
|
|
|
@push('scripts')
|
|
<script>
|
|
function confirmDelete(id, name) {
|
|
document.getElementById('deleteName').textContent = name;
|
|
document.getElementById('deleteForm').action = '/kamus/' + id;
|
|
document.getElementById('deleteModal').classList.remove('hidden');
|
|
}
|
|
|
|
function closeModal() {
|
|
document.getElementById('deleteModal').classList.add('hidden');
|
|
}
|
|
|
|
document.getElementById('deleteModal').addEventListener('click', function(e) {
|
|
if (e.target === this) closeModal();
|
|
});
|
|
</script>
|
|
|
|
<style>
|
|
@keyframes popIn {
|
|
from { transform: scale(0.85); opacity: 0; }
|
|
to { transform: scale(1); opacity: 1; }
|
|
}
|
|
</style>
|
|
@endpush |