152 lines
9.0 KiB
PHP
152 lines
9.0 KiB
PHP
<x-app-layout>
|
|
<div class="max-w-3xl mx-auto py-12 px-4">
|
|
{{-- Header --}}
|
|
<div class="flex items-center gap-6 mb-10">
|
|
<a href="{{ route('cats.show', $cat->id) }}" class="p-4 bg-white border border-slate-200 rounded-2xl text-slate-400 hover:text-indigo-600 transition-all shadow-sm">
|
|
<i class="fas fa-arrow-left"></i>
|
|
</a>
|
|
<div>
|
|
<h2 class="text-2xl font-black text-slate-800 uppercase tracking-tight">Add Routine Ledger</h2>
|
|
<p class="text-sm text-slate-400 font-bold uppercase tracking-widest">Logging for: {{ $cat->nama_kucing }}</p>
|
|
</div>
|
|
</div>
|
|
|
|
{{-- Form Card --}}
|
|
<div class="bg-white rounded-[3rem] shadow-xl border border-slate-100 overflow-hidden">
|
|
<div class="p-10">
|
|
<form action="{{ route('medical-records.store') }}" method="POST" class="space-y-8">
|
|
@csrf
|
|
<input type="hidden" name="cat_id" value="{{ $cat->id }}">
|
|
|
|
{{-- Jenis Tindakan (Tanpa Pengobatan Umum) --}}
|
|
<div class="space-y-3">
|
|
<label class="text-[10px] font-black text-slate-400 uppercase tracking-widest ml-2">Jenis Tindakan</label>
|
|
<select name="type" id="type_selector" onchange="adjustMedisForm()" class="w-full px-6 py-5 bg-slate-50 border-none rounded-3xl text-sm font-black text-slate-800 focus:ring-4 focus:ring-indigo-500/10 transition-all cursor-pointer">
|
|
<option value="Vaccine">Vaksinasi</option>
|
|
<option value="Deworming">Obat Cacing</option>
|
|
<option value="Flea Perawatan">Obat Kutu</option>
|
|
<option value="Grooming">Grooming</option>
|
|
</select>
|
|
</div>
|
|
|
|
{{-- Obat Container --}}
|
|
<div id="medicine_container" class="space-y-4">
|
|
<div class="medicine-row p-6 bg-slate-50 rounded-[2.5rem] border border-slate-100 space-y-4">
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-4 medicine-row-inner">
|
|
<div class="space-y-2">
|
|
<label class="text-[9px] font-black text-slate-400 uppercase ml-2">Produk/Obat</label>
|
|
{{-- oninput dan onchange digunakan agar auto-fill langsung jalan --}}
|
|
<input type="text" name="medicines[0][name]" id="med_name_input" list="medicine-list" required
|
|
oninput="autoFillObat(this)"
|
|
onchange="autoFillObat(this)"
|
|
class="medicine-name-input w-full px-5 py-4 border-none rounded-2xl text-xs font-black bg-white shadow-sm focus:ring-4 focus:ring-indigo-500/10" placeholder="Ketik atau pilih obat...">
|
|
</div>
|
|
<div class="grid grid-cols-2 gap-4">
|
|
<div class="space-y-2">
|
|
<label class="text-[9px] font-black text-slate-400 uppercase ml-2">Dosis</label>
|
|
<input type="text" name="medicines[0][dosage]" id="med_dosage_input" placeholder="e.g. 1/2 atau 1" required
|
|
class="dosage-input w-full px-5 py-4 border-none rounded-2xl text-xs font-black bg-white shadow-sm focus:ring-4 focus:ring-indigo-500/10">
|
|
</div>
|
|
<div class="space-y-2">
|
|
<label class="text-[9px] font-black text-slate-400 uppercase ml-2">Satuan</label>
|
|
<input type="text" name="medicines[0][unit]" id="med_unit_input" readonly
|
|
class="unit-display w-full px-5 py-4 bg-slate-100 border-none rounded-2xl text-[10px] font-black text-slate-400 cursor-not-allowed outline-none">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{{-- Tanggal --}}
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-8">
|
|
<div class="space-y-3">
|
|
<label class="text-[10px] font-black text-slate-400 uppercase tracking-widest ml-2">Tanggal Tindakan</label>
|
|
<input type="date" name="date_given" value="{{ date('Y-m-d') }}" required class="w-full px-6 py-5 bg-slate-50 border-none rounded-3xl text-sm font-black focus:ring-4 focus:ring-indigo-500/10">
|
|
</div>
|
|
<div class="space-y-3">
|
|
<label class="text-[10px] font-black text-slate-400 uppercase tracking-widest ml-2">Jadwal Berikutnya</label>
|
|
<input type="date" name="next_schedule" class="w-full px-6 py-5 bg-slate-50 border-none rounded-3xl text-sm font-black focus:ring-4 focus:ring-indigo-500/10">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="space-y-3">
|
|
<label class="text-[10px] font-black text-slate-400 uppercase tracking-widest ml-2">Notes</label>
|
|
<textarea name="notes" placeholder="Catatan opsional..." class="w-full px-6 py-5 bg-slate-50 border-none rounded-3xl text-sm font-bold h-32 focus:ring-4 focus:ring-indigo-500/10"></textarea>
|
|
</div>
|
|
|
|
<button type="submit" class="w-full py-6 bg-indigo-600 text-white rounded-[2rem] font-black uppercase text-xs tracking-[0.3em] shadow-2xl shadow-indigo-200 hover:bg-indigo-700 transition-all transform active:scale-95">
|
|
Confirm & Log Routine Ledger
|
|
</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{{-- Datalist dibersihkan agar hanya muncul Nama Obat --}}
|
|
<datalist id="medicine-list">
|
|
@foreach($availableObats as $med)
|
|
<option value="{{ $med->nama_obat }}"></option>
|
|
@endforeach
|
|
</datalist>
|
|
|
|
@push('scripts')
|
|
<script>
|
|
// 1. Tarik Data Master Obat dari Database ke JavaScript
|
|
const masterObatData = {!! json_encode($availableObats) !!};
|
|
|
|
// 2. Tampilkan/Sembunyikan Form Obat berdasarkan "Jenis Tindakan"
|
|
function adjustMedisForm() {
|
|
const type = document.getElementById('type_selector').value;
|
|
const container = document.getElementById('medicine_container');
|
|
const nameInput = document.getElementById('med_name_input');
|
|
const dosageInput = document.getElementById('med_dosage_input');
|
|
const unitInput = document.getElementById('med_unit_input');
|
|
|
|
if (type === 'Grooming') {
|
|
// Grooming tidak butuh obat
|
|
container.style.display = 'none';
|
|
nameInput.required = false;
|
|
dosageInput.required = false;
|
|
} else {
|
|
container.style.display = 'block';
|
|
nameInput.required = true;
|
|
dosageInput.required = true;
|
|
|
|
// Jika nama obat masih kosong, set satuan default berdasarkan jenis tindakan
|
|
const fallbackUnit = { 'Vaccine': 'PCS', 'Deworming': 'TABLET', 'Flea Perawatan': 'ML' };
|
|
if (nameInput.value === '') {
|
|
unitInput.value = fallbackUnit[type] || 'PCS';
|
|
}
|
|
}
|
|
}
|
|
|
|
// 3. Fungsi Cerdas: Auto-Fill Dosis dan Satuan
|
|
function autoFillObat(inputElement) {
|
|
const row = inputElement.closest('.medicine-row-inner');
|
|
const unitInput = row.querySelector('.unit-display');
|
|
const dosageInput = row.querySelector('.dosage-input');
|
|
|
|
// Cari kecocokan nama obat dengan data master (Tidak sensitif huruf besar/kecil)
|
|
const selectedObat = masterObatData.find(med => med.nama_obat.toLowerCase() === inputElement.value.toLowerCase());
|
|
|
|
if (selectedObat) {
|
|
// Jika obat terdaftar di database, ambil satuannya!
|
|
unitInput.value = selectedObat.unit;
|
|
|
|
// Beri nilai otomatis "1" pada dosis jika masih kosong untuk mempercepat input
|
|
if (!dosageInput.value) {
|
|
dosageInput.value = '1';
|
|
}
|
|
} else {
|
|
// Jika obat diketik manual (tidak ada di database), kembalikan ke satuan default
|
|
const type = document.getElementById('type_selector').value;
|
|
const fallbackUnit = { 'Vaccine': 'PCS', 'Deworming': 'TABLET', 'Flea Perawatan': 'ML' };
|
|
unitInput.value = fallbackUnit[type] || 'PCS';
|
|
}
|
|
}
|
|
|
|
// Jalankan saat halaman pertama kali dimuat
|
|
document.addEventListener('DOMContentLoaded', adjustMedisForm);
|
|
</script>
|
|
@endpush
|
|
</x-app-layout> |