279 lines
16 KiB
PHP
279 lines
16 KiB
PHP
@extends('layouts.app')
|
|
@section('title', isset($isEdit) ? 'Edit Penyakit' : 'Tambah Penyakit')
|
|
@section('page-title', isset($isEdit) ? 'Edit Penyakit' : 'Tambah Penyakit Baru')
|
|
|
|
@section('content')
|
|
<a href="{{ route('diseases.index') }}" class="inline-flex items-center gap-2 mb-6 text-sm font-medium" style="color:#2d6a4f;">
|
|
<i class="fas fa-arrow-left"></i> Kembali
|
|
</a>
|
|
|
|
<form method="POST"
|
|
action="{{ isset($isEdit) ? route('diseases.update', $disease->id) : route('diseases.store') }}"
|
|
enctype="multipart/form-data">
|
|
@csrf
|
|
@if(isset($isEdit))
|
|
@method('PUT')
|
|
@endif
|
|
|
|
<!-- INFO PENYAKIT -->
|
|
<div class="bg-white rounded-2xl border border-[#ede8df] p-6 mb-6" style="box-shadow:0 2px 12px rgba(26,58,42,.06);">
|
|
<h3 class="text-lg font-bold mb-5" style="font-family:'Playfair Display',serif;color:#1a3a2a;">
|
|
<i class="fas fa-info-circle mr-2" style="color:#2d6a4f;"></i>Informasi Penyakit
|
|
</h3>
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
<div>
|
|
<label class="block text-xs font-semibold uppercase mb-1" style="color:#5a7a67;letter-spacing:.06em;">Kode Penyakit</label>
|
|
<input type="text" value="{{ $nextDiseaseCode }}" disabled
|
|
class="w-full px-4 py-3 rounded-xl text-sm" style="background:#f0fdf4;border:1.5px solid #b7ddc4;color:#2d6a4f;font-weight:700;">
|
|
</div>
|
|
<div>
|
|
<label class="block text-xs font-semibold uppercase mb-1" style="color:#5a7a67;letter-spacing:.06em;">Nama Penyakit <span style="color:red">*</span></label>
|
|
<input type="text" name="name" value="{{ old('name', isset($disease) ? $disease->name : '') }}" required placeholder="Contoh: Luka Api"
|
|
class="w-full px-4 py-3 rounded-xl text-sm" style="border:1.5px solid #e5e7eb;background:#f9fafb;outline:none;">
|
|
@error('name')<p class="text-xs mt-1" style="color:red;">{{ $message }}</p>@enderror
|
|
</div>
|
|
<div>
|
|
<label class="block text-xs font-semibold uppercase mb-1" style="color:#5a7a67;letter-spacing:.06em;">Nama Latin</label>
|
|
<input type="text" name="latin_name" value="{{ old('latin_name', isset($disease) ? $disease->latin_name : '') }}" placeholder="Contoh: Xanthomonas albilineans"
|
|
class="w-full px-4 py-3 rounded-xl text-sm" style="border:1.5px solid #e5e7eb;background:#f9fafb;outline:none;">
|
|
</div>
|
|
<div>
|
|
<label class="block text-xs font-semibold uppercase mb-1" style="color:#5a7a67;letter-spacing:.06em;">Foto Penyakit</label>
|
|
@if(isset($disease) && $disease->photo)
|
|
<div class="mb-2">
|
|
<img src="{{ asset('storage/'.$disease->photo) }}" class="h-16 rounded-lg object-cover">
|
|
<p class="text-xs mt-1" style="color:#8fa89a;">Unggah foto baru untuk mengganti</p>
|
|
</div>
|
|
@endif
|
|
<input type="file" name="photo" accept="image/*"
|
|
class="w-full px-4 py-3 rounded-xl text-sm" style="border:1.5px solid #e5e7eb;background:#f9fafb;">
|
|
</div>
|
|
<div class="md:col-span-2">
|
|
<label class="block text-xs font-semibold uppercase mb-1" style="color:#5a7a67;letter-spacing:.06em;">Deskripsi</label>
|
|
<textarea name="description" rows="3" placeholder="Deskripsi singkat tentang penyakit ini..."
|
|
class="w-full px-4 py-3 rounded-xl text-sm" style="border:1.5px solid #e5e7eb;background:#f9fafb;outline:none;resize:none;">{{ old('description', isset($disease) ? $disease->description : '') }}</textarea>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- GEJALA -->
|
|
<div class="bg-white rounded-2xl border border-[#ede8df] p-6 mb-6" style="box-shadow:0 2px 12px rgba(26,58,42,.06);">
|
|
<div class="flex items-center justify-between mb-5">
|
|
<h3 class="text-lg font-bold" style="font-family:'Playfair Display',serif;color:#1a3a2a;">
|
|
<i class="fas fa-search mr-2" style="color:#2d6a4f;"></i>Gejala <span class="text-sm font-normal" style="color:#8fa89a;">(minimal 3)</span>
|
|
</h3>
|
|
<button type="button" onclick="tambahGejala()"
|
|
class="px-4 py-2 rounded-xl text-sm font-semibold" style="background:#f0fdf4;color:#2d6a4f;border:1.5px solid #b7ddc4;">
|
|
<i class="fas fa-plus mr-1"></i> Tambah Gejala
|
|
</button>
|
|
</div>
|
|
@error('symptoms')<p class="text-xs mb-3" style="color:red;">{{ $message }}</p>@enderror
|
|
|
|
<div id="gejala-container" class="space-y-4">
|
|
@if(isset($isEdit) && $disease->symptoms->count() > 0)
|
|
@foreach($disease->symptoms as $i => $symptom)
|
|
<div class="gejala-item p-4 rounded-xl" style="background:#f8f4ee;border:1px solid #ede8df;">
|
|
<div class="flex items-center justify-between mb-3">
|
|
<span class="text-sm font-bold" style="color:#2d6a4f;">Gejala {{ $i+1 }}</span>
|
|
@if($i >= 3)
|
|
<button type="button" onclick="hapusGejala(this)" class="text-xs px-2 py-1 rounded-lg" style="color:#dc2626;background:#fef2f2;">
|
|
<i class="fas fa-times"></i> Hapus
|
|
</button>
|
|
@endif
|
|
</div>
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-3">
|
|
<div class="md:col-span-2">
|
|
<label class="block text-xs font-semibold uppercase mb-1" style="color:#5a7a67;">Nama Gejala *</label>
|
|
<input type="text" name="symptoms[{{ $i }}][name]" required
|
|
value="{{ $symptom->name }}"
|
|
placeholder="Contoh: Daun berwarna kuning"
|
|
class="w-full px-3 py-2.5 rounded-xl text-sm" style="border:1.5px solid #e5e7eb;background:white;outline:none;">
|
|
</div>
|
|
<div>
|
|
<label class="block text-xs font-semibold uppercase mb-1" style="color:#5a7a67;">Nilai CF (0.1 - 1.0)</label>
|
|
<input type="number" name="symptoms[{{ $i }}][cf]"
|
|
value="{{ $symptom->pivot->cf_value }}"
|
|
min="0.1" max="1.0" step="0.05"
|
|
class="w-full px-3 py-2.5 rounded-xl text-sm" style="border:1.5px solid #e5e7eb;background:white;outline:none;">
|
|
</div>
|
|
<div class="md:col-span-3">
|
|
<label class="block text-xs font-semibold uppercase mb-1" style="color:#5a7a67;">Foto Gejala</label>
|
|
@if($symptom->photo)
|
|
<div class="mb-2">
|
|
<img src="{{ asset('storage/'.$symptom->photo) }}" class="h-12 rounded-lg object-cover">
|
|
<p class="text-xs mt-1" style="color:#8fa89a;">Unggah foto baru untuk mengganti</p>
|
|
</div>
|
|
@endif
|
|
<input type="file" name="symptoms[{{ $i }}][photo]" accept="image/*"
|
|
class="w-full px-3 py-2.5 rounded-xl text-sm" style="border:1.5px solid #e5e7eb;background:white;">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@endforeach
|
|
@else
|
|
@for($i = 0; $i < 3; $i++)
|
|
<div class="gejala-item p-4 rounded-xl" style="background:#f8f4ee;border:1px solid #ede8df;">
|
|
<div class="flex items-center justify-between mb-3">
|
|
<span class="text-sm font-bold" style="color:#2d6a4f;">Gejala {{ $i+1 }}</span>
|
|
</div>
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-3">
|
|
<div class="md:col-span-2">
|
|
<label class="block text-xs font-semibold uppercase mb-1" style="color:#5a7a67;">Nama Gejala *</label>
|
|
<input type="text" name="symptoms[{{ $i }}][name]" required placeholder="Contoh: Daun berwarna kuning"
|
|
class="w-full px-3 py-2.5 rounded-xl text-sm" style="border:1.5px solid #e5e7eb;background:white;outline:none;">
|
|
</div>
|
|
<div>
|
|
<label class="block text-xs font-semibold uppercase mb-1" style="color:#5a7a67;">Nilai CF (0.1 - 1.0)</label>
|
|
<input type="number" name="symptoms[{{ $i }}][cf]" value="0.7" min="0.1" max="1.0" step="0.05"
|
|
class="w-full px-3 py-2.5 rounded-xl text-sm" style="border:1.5px solid #e5e7eb;background:white;outline:none;">
|
|
</div>
|
|
<div class="md:col-span-3">
|
|
<label class="block text-xs font-semibold uppercase mb-1" style="color:#5a7a67;">Foto Gejala</label>
|
|
<input type="file" name="symptoms[{{ $i }}][photo]" accept="image/*"
|
|
class="w-full px-3 py-2.5 rounded-xl text-sm" style="border:1.5px solid #e5e7eb;background:white;">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@endfor
|
|
@endif
|
|
</div>
|
|
</div>
|
|
|
|
<!-- PENANGANAN -->
|
|
<div class="bg-white rounded-2xl border border-[#ede8df] p-6 mb-6" style="box-shadow:0 2px 12px rgba(26,58,42,.06);">
|
|
<div class="flex items-center justify-between mb-5">
|
|
<h3 class="text-lg font-bold" style="font-family:'Playfair Display',serif;color:#1a3a2a;">
|
|
<i class="fas fa-medkit mr-2" style="color:#2d6a4f;"></i>Cara Penanganan <span class="text-sm font-normal" style="color:#8fa89a;">(minimal 3)</span>
|
|
</h3>
|
|
<button type="button" onclick="tambahPenanganan()"
|
|
class="px-4 py-2 rounded-xl text-sm font-semibold" style="background:#f0fdf4;color:#2d6a4f;border:1.5px solid #b7ddc4;">
|
|
<i class="fas fa-plus mr-1"></i> Tambah Penanganan
|
|
</button>
|
|
</div>
|
|
@error('treatments')<p class="text-xs mb-3" style="color:red;">{{ $message }}</p>@enderror
|
|
|
|
<div id="penanganan-container" class="space-y-3">
|
|
@if(isset($isEdit) && $disease->treatments->count() > 0)
|
|
@foreach($disease->treatments as $i => $t)
|
|
<div class="penanganan-item flex gap-3 items-start">
|
|
<div class="w-8 h-8 rounded-full flex items-center justify-center text-white text-sm font-bold flex-shrink-0 mt-1"
|
|
style="background:#2d6a4f;">{{ $i+1 }}</div>
|
|
<div class="flex-1">
|
|
<input type="text" name="treatments[{{ $i }}][description]" required
|
|
value="{{ $t->description }}"
|
|
placeholder="Contoh: Gunakan bibit sehat dan bebas penyakit"
|
|
class="w-full px-4 py-3 rounded-xl text-sm" style="border:1.5px solid #e5e7eb;background:#f9fafb;outline:none;">
|
|
</div>
|
|
@if($i >= 3)
|
|
<button type="button" onclick="hapusPenanganan(this)" class="mt-1 text-xs px-2 py-2 rounded-lg flex-shrink-0" style="color:#dc2626;background:#fef2f2;">
|
|
<i class="fas fa-times"></i>
|
|
</button>
|
|
@endif
|
|
</div>
|
|
@endforeach
|
|
@else
|
|
@for($i = 0; $i < 3; $i++)
|
|
<div class="penanganan-item flex gap-3 items-start">
|
|
<div class="w-8 h-8 rounded-full flex items-center justify-center text-white text-sm font-bold flex-shrink-0 mt-1"
|
|
style="background:#2d6a4f;">{{ $i+1 }}</div>
|
|
<div class="flex-1">
|
|
<input type="text" name="treatments[{{ $i }}][description]" required
|
|
placeholder="Contoh: Gunakan bibit sehat dan bebas penyakit"
|
|
class="w-full px-4 py-3 rounded-xl text-sm" style="border:1.5px solid #e5e7eb;background:#f9fafb;outline:none;">
|
|
</div>
|
|
</div>
|
|
@endfor
|
|
@endif
|
|
</div>
|
|
</div>
|
|
|
|
<!-- SUBMIT -->
|
|
<div class="flex gap-3">
|
|
<button type="submit" class="px-8 py-3 rounded-xl text-sm font-semibold text-white" style="background:#2d6a4f;">
|
|
<i class="fas fa-save mr-2"></i>{{ isset($isEdit) ? 'Update Penyakit' : 'Simpan Penyakit' }}
|
|
</button>
|
|
<a href="{{ isset($isEdit) ? route('diseases.show', $disease->id) : route('diseases.index') }}"
|
|
class="px-8 py-3 rounded-xl text-sm font-semibold" style="background:#f0fdf4;color:#2d6a4f;border:1.5px solid #b7ddc4;">
|
|
Batal
|
|
</a>
|
|
</div>
|
|
|
|
</form>
|
|
@endsection
|
|
|
|
@push('scripts')
|
|
<script>
|
|
let gejalaCount = {{ isset($isEdit) ? $disease->symptoms->count() : 3 }};
|
|
let penangananCount = {{ isset($isEdit) ? $disease->treatments->count() : 3 }};
|
|
|
|
function tambahGejala() {
|
|
gejalaCount++;
|
|
const container = document.getElementById('gejala-container');
|
|
const div = document.createElement('div');
|
|
div.className = 'gejala-item p-4 rounded-xl';
|
|
div.style.cssText = 'background:#f8f4ee;border:1px solid #ede8df;';
|
|
div.innerHTML = `
|
|
<div class="flex items-center justify-between mb-3">
|
|
<span class="text-sm font-bold" style="color:#2d6a4f;">Gejala ${gejalaCount}</span>
|
|
<button type="button" onclick="hapusGejala(this)" class="text-xs px-2 py-1 rounded-lg" style="color:#dc2626;background:#fef2f2;">
|
|
<i class="fas fa-times"></i> Hapus
|
|
</button>
|
|
</div>
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-3">
|
|
<div class="md:col-span-2">
|
|
<label class="block text-xs font-semibold uppercase mb-1" style="color:#5a7a67;">Nama Gejala *</label>
|
|
<input type="text" name="symptoms[${gejalaCount-1}][name]" required placeholder="Contoh: Daun berwarna kuning"
|
|
class="w-full px-3 py-2.5 rounded-xl text-sm" style="border:1.5px solid #e5e7eb;background:white;outline:none;">
|
|
</div>
|
|
<div>
|
|
<label class="block text-xs font-semibold uppercase mb-1" style="color:#5a7a67;">Nilai CF (0.1 - 1.0)</label>
|
|
<input type="number" name="symptoms[${gejalaCount-1}][cf]" value="0.7" min="0.1" max="1.0" step="0.05"
|
|
class="w-full px-3 py-2.5 rounded-xl text-sm" style="border:1.5px solid #e5e7eb;background:white;outline:none;">
|
|
</div>
|
|
<div class="md:col-span-3">
|
|
<label class="block text-xs font-semibold uppercase mb-1" style="color:#5a7a67;">Foto Gejala</label>
|
|
<input type="file" name="symptoms[${gejalaCount-1}][photo]" accept="image/*"
|
|
class="w-full px-3 py-2.5 rounded-xl text-sm" style="border:1.5px solid #e5e7eb;background:white;">
|
|
</div>
|
|
</div>`;
|
|
container.appendChild(div);
|
|
}
|
|
|
|
function hapusGejala(btn) {
|
|
const items = document.querySelectorAll('.gejala-item');
|
|
if (items.length <= 3) { alert('Minimal 3 gejala!'); return; }
|
|
btn.closest('.gejala-item').remove();
|
|
document.querySelectorAll('.gejala-item').forEach((el, i) => {
|
|
el.querySelector('span').textContent = 'Gejala ' + (i+1);
|
|
});
|
|
}
|
|
|
|
function tambahPenanganan() {
|
|
penangananCount++;
|
|
const container = document.getElementById('penanganan-container');
|
|
const div = document.createElement('div');
|
|
div.className = 'penanganan-item flex gap-3 items-start';
|
|
div.innerHTML = `
|
|
<div class="w-8 h-8 rounded-full flex items-center justify-center text-white text-sm font-bold flex-shrink-0 mt-1"
|
|
style="background:#2d6a4f;">${penangananCount}</div>
|
|
<div class="flex-1">
|
|
<input type="text" name="treatments[${penangananCount-1}][description]" required
|
|
placeholder="Contoh: Gunakan bibit sehat dan bebas penyakit"
|
|
class="w-full px-4 py-3 rounded-xl text-sm" style="border:1.5px solid #e5e7eb;background:#f9fafb;outline:none;">
|
|
</div>
|
|
<button type="button" onclick="hapusPenanganan(this)" class="mt-1 text-xs px-2 py-2 rounded-lg flex-shrink-0" style="color:#dc2626;background:#fef2f2;">
|
|
<i class="fas fa-times"></i>
|
|
</button>`;
|
|
container.appendChild(div);
|
|
}
|
|
|
|
function hapusPenanganan(btn) {
|
|
const items = document.querySelectorAll('.penanganan-item');
|
|
if (items.length <= 3) { alert('Minimal 3 cara penanganan!'); return; }
|
|
btn.closest('.penanganan-item').remove();
|
|
document.querySelectorAll('.penanganan-item').forEach((el, i) => {
|
|
el.querySelector('div.w-8').textContent = i+1;
|
|
});
|
|
}
|
|
</script>
|
|
@endpush |