initial commit
This commit is contained in:
@@ -0,0 +1,152 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user