224 lines
14 KiB
PHP
224 lines
14 KiB
PHP
<x-app-layout>
|
|
<div class="max-w-5xl mx-auto space-y-6 pb-12" x-data="treatmentForm()">
|
|
{{-- HEADER --}}
|
|
<div class="flex items-center justify-between gap-4">
|
|
<div class="flex items-center gap-4">
|
|
<a href="{{ url()->previous() }}" class="p-3 bg-white border border-slate-200 rounded-2xl text-slate-400 hover:text-indigo-600 transition-all shadow-sm active:scale-90">
|
|
<i class="fas fa-arrow-left"></i>
|
|
</a>
|
|
<div>
|
|
<h2 class="text-2xl font-black text-slate-800 tracking-tight">Tambah Rekam Medis</h2>
|
|
<p class="text-sm text-slate-500 font-medium italic uppercase tracking-tighter">Pemeriksaan & Pemberian Obat Pasien (Multi-Obat Support)</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{{-- GLOBAL ERROR BANNER --}}
|
|
@if ($errors->any())
|
|
<div class="bg-rose-50 border border-rose-200 rounded-2xl p-6 flex items-start gap-4">
|
|
<div class="w-10 h-10 bg-rose-100 text-rose-500 rounded-xl flex items-center justify-center shrink-0">
|
|
<i class="fas fa-exclamation-triangle"></i>
|
|
</div>
|
|
<div>
|
|
<h4 class="text-xs font-black text-rose-600 uppercase tracking-widest mb-1">Gagal Menyimpan Data</h4>
|
|
<ul class="text-[11px] text-rose-500 font-bold list-disc list-inside space-y-1">
|
|
@foreach ($errors->all() as $error)
|
|
<li>{{ $error }}</li>
|
|
@endforeach
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
@endif
|
|
|
|
<form action="{{ route('treatments.store') }}" method="POST" enctype="multipart/form-data" class="space-y-6">
|
|
@csrf
|
|
|
|
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
|
|
{{-- LEFT COLUMN: DATA PASIEN --}}
|
|
<div class="lg:col-span-1 space-y-6">
|
|
<div class="bg-white border border-slate-200 rounded-[2.5rem] p-6 shadow-sm space-y-6">
|
|
<h4 class="text-xs font-black text-indigo-600 uppercase tracking-widest border-b border-slate-100 pb-3">Data Pasien</h4>
|
|
|
|
<div class="space-y-4">
|
|
<div class="space-y-2">
|
|
<label class="text-[10px] font-black text-slate-400 uppercase tracking-widest ml-1">Pilih Pasien</label>
|
|
<select name="cat_id" required class="w-full px-4 py-3 bg-slate-50 border border-slate-200 rounded-2xl text-sm font-bold text-slate-800 focus:ring-2 focus:ring-indigo-500 transition-all">
|
|
<option value="" disabled selected>-- Pilih Pasien --</option>
|
|
@foreach($cats as $cat)
|
|
<option value="{{ $cat->id }}" {{ ($selectedCat && $selectedCat->id == $cat->id) || old('cat_id') == $cat->id ? 'selected' : '' }}>
|
|
{{ $cat->nama_kucing }} ({{ $cat->ras }})
|
|
</option>
|
|
@endforeach
|
|
</select>
|
|
</div>
|
|
<div class="space-y-2">
|
|
<label class="text-[10px] font-black text-slate-400 uppercase tracking-widest ml-1">Tanggal Pemeriksaan</label>
|
|
<input type="date" name="tanggal" value="{{ old('tanggal', date('Y-m-d')) }}" required class="w-full px-4 py-3 bg-slate-50 border border-slate-200 rounded-2xl text-sm font-bold focus:ring-2 focus:ring-indigo-500 transition-all">
|
|
</div>
|
|
<div class="space-y-2">
|
|
<label class="text-[10px] font-black text-slate-400 uppercase tracking-widest ml-1">Foto Bukti / Kondisi (Opsional)</label>
|
|
<input type="file" name="foto_bukti" class="w-full text-xs font-bold text-slate-400 file:mr-4 file:py-2 file:px-4 file:rounded-full file:border-0 file:text-[10px] file:font-black file:bg-indigo-50 file:text-indigo-600 hover:file:bg-indigo-100 transition-all">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{{-- RIGHT COLUMN: HASIL PEMERIKSAAN --}}
|
|
<div class="lg:col-span-2 space-y-6">
|
|
<div class="bg-white border border-slate-200 rounded-[2.5rem] p-8 shadow-sm space-y-6">
|
|
<h4 class="text-xs font-black text-rose-600 uppercase tracking-widest border-b border-slate-100 pb-3">Diagnosa Klinik</h4>
|
|
|
|
<div class="space-y-4">
|
|
<div class="space-y-2">
|
|
<label class="text-[10px] font-black text-slate-400 uppercase tracking-widest ml-1">Keluhan Utama</label>
|
|
<input type="text" name="keluhan" value="{{ old('keluhan') }}" required placeholder="Contoh: Flu berat, Nafsu makan turun" class="w-full px-4 py-3 bg-slate-50 border {{ $errors->has('keluhan') ? 'border-rose-500 ring-1 ring-rose-500' : 'border-slate-200' }} rounded-2xl text-sm font-bold focus:ring-2 focus:ring-rose-500 transition-all">
|
|
</div>
|
|
<div class="space-y-2">
|
|
<label class="text-[10px] font-black text-slate-400 uppercase tracking-widest ml-1">Hasil Diagnosa & Tindakan</label>
|
|
<textarea name="diagnosa" rows="3" required placeholder="Tulis diagnosa dokter/staf dan tindakan yang diambil..." class="w-full px-4 py-3 bg-slate-50 border {{ $errors->has('diagnosa') ? 'border-rose-500 ring-1 ring-rose-500' : 'border-slate-200' }} rounded-2xl text-sm font-bold focus:ring-2 focus:ring-rose-500 transition-all">{{ old('diagnosa') }}</textarea>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{{-- MULTI MEDICINE SECTION --}}
|
|
<div class="bg-white border border-slate-200 rounded-[2.5rem] p-8 shadow-sm space-y-6">
|
|
<div class="flex items-center justify-between border-b border-slate-100 pb-4">
|
|
<h4 class="text-xs font-black text-emerald-600 uppercase tracking-widest">Resep Obat & Penggunaan Stok</h4>
|
|
<button type="button" @click="addObat" class="px-4 py-2 bg-emerald-50 text-emerald-600 text-[10px] font-black rounded-xl hover:bg-emerald-600 hover:text-white transition-all flex items-center gap-2">
|
|
<i class="fas fa-plus"></i> TAMBAH OBAT
|
|
</button>
|
|
</div>
|
|
|
|
<div class="space-y-4">
|
|
{{-- Header Table --}}
|
|
<div class="hidden md:grid grid-cols-12 gap-4 px-4 text-[9px] font-black text-slate-400 uppercase tracking-widest">
|
|
<div class="col-span-4">Nama Obat (Stok Tersedia)</div>
|
|
<div class="col-span-2 text-center">Jumlah Stok</div>
|
|
<!-- <div class="col-span-2 text-center">Dosis</div>
|
|
<div class="col-span-3">Keterangan Pakai</div> -->
|
|
<div class="col-span-1"></div>
|
|
</div>
|
|
|
|
{{-- Loop Baris Obat (AlpineJS) --}}
|
|
<template x-for="(item, index) in items" :key="index">
|
|
<div class="grid grid-cols-1 md:grid-cols-12 gap-3 bg-slate-50 p-4 md:p-2 rounded-2xl items-center border border-slate-100 transition-all">
|
|
{{-- Pilih Obat --}}
|
|
<div class="col-span-1 md:col-span-4">
|
|
<label class="md:hidden text-[9px] font-black text-slate-400 uppercase">Obat</label>
|
|
<select :name="`items[${index}][medicine_id]`"
|
|
x-model="item.medicine_id"
|
|
@change="updateUnit(index, $event)"
|
|
required
|
|
class="w-full px-3 py-2 bg-white border border-slate-200 rounded-xl text-xs font-bold focus:ring-emerald-500">
|
|
<option value="">-- Pilih Obat --</option>
|
|
@foreach($medicines as $med)
|
|
<option value="{{ $med->id }}" data-unit="{{ $med->unit }}" data-stock="{{ (float)$med->qty }}">
|
|
{{ $med->nama_obat }} ({{ (float)$med->qty }} {{ $med->unit }})
|
|
</option>
|
|
@endforeach
|
|
</select>
|
|
</div>
|
|
|
|
{{-- Qty Used --}}
|
|
<div class="col-span-1 md:col-span-2">
|
|
<label class="md:hidden text-[9px] font-black text-slate-400 uppercase">Qty Potong Stok</label>
|
|
<div class="relative">
|
|
<input type="number" :name="`items[${index}][qty_used]`" x-model="item.qty_used" step="0.01" required
|
|
class="w-full pl-3 pr-10 py-2 bg-white border border-slate-200 rounded-xl text-xs font-black">
|
|
<span class="absolute right-3 top-1/2 -translate-y-1/2 text-[8px] font-black text-slate-300" x-text="item.unit"></span>
|
|
</div>
|
|
</div>
|
|
|
|
{{-- Dosis --}}
|
|
<!-- <div class="col-span-1 md:col-span-2">
|
|
<label class="md:hidden text-[9px] font-black text-slate-400 uppercase">Dosis</label>
|
|
<input type="text" :name="`items[${index}][dosis]`" x-model="item.dosis" required placeholder="0.5 cc / 1 tablet"
|
|
class="w-full px-3 py-2 bg-white border border-slate-200 rounded-xl text-xs font-bold">
|
|
</div> -->
|
|
|
|
{{-- Keterangan --}}
|
|
<!-- <div class="col-span-1 md:col-span-3">
|
|
<label class="md:hidden text-[9px] font-black text-slate-400 uppercase">Ket</label>
|
|
<input type="text" :name="`items[${index}][keterangan]`" x-model="item.keterangan" placeholder="Oral / Campur Wetfood"
|
|
class="w-full px-3 py-2 bg-white border border-slate-200 rounded-xl text-xs font-bold">
|
|
</div> -->
|
|
|
|
{{-- Tombol Hapus --}}
|
|
<div class="col-span-1 md:col-span-1 text-center mt-2 md:mt-0">
|
|
<button type="button" @click="removeItem(index)" x-show="items.length > 1" class="w-8 h-8 inline-flex items-center justify-center bg-rose-50 text-rose-500 rounded-lg hover:bg-rose-500 hover:text-white transition-all">
|
|
<i class="fas fa-times text-xs"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<div class="bg-amber-50 border border-amber-100 rounded-2xl p-4 flex items-start gap-3">
|
|
<i class="fas fa-info-circle text-amber-500 mt-1"></i>
|
|
<div>
|
|
<p class="text-[10px] text-amber-800 font-bold leading-tight">Gunakan titik (.) untuk angka desimal. Pastikan jumlah potong stok tidak melebihi stok tersedia untuk menghindari error sistem.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<button type="submit" class="w-full py-5 bg-slate-900 text-white text-sm font-black rounded-3xl shadow-xl hover:bg-indigo-700 transition-all active:scale-[0.98] flex items-center justify-center gap-2">
|
|
<i class="fas fa-save"></i> SIMPAN REKAM MEDIS & UPDATE SEMUA STOK
|
|
</button>
|
|
</form>
|
|
</div>
|
|
|
|
@push('scripts')
|
|
<script src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js" defer></script>
|
|
<script>
|
|
document.addEventListener('alpine:init', () => {
|
|
Alpine.data('treatmentForm', () => ({
|
|
// Membaca input lama jika validasi form gagal, agar baris obat tidak hilang
|
|
init() {
|
|
const oldItems = @json(old('items', []));
|
|
if (oldItems.length > 0) {
|
|
this.items = oldItems.map(item => ({
|
|
medicine_id: item.medicine_id || '',
|
|
qty_used: item.qty_used || 1,
|
|
unit: 'UNIT', // Akan diupdate oleh user
|
|
dosis: item.dosis || '',
|
|
keterangan: item.keterangan || ''
|
|
}));
|
|
}
|
|
},
|
|
|
|
items: [{
|
|
medicine_id: '',
|
|
qty_used: 1,
|
|
unit: 'UNIT',
|
|
dosis: '',
|
|
keterangan: ''
|
|
}],
|
|
|
|
addObat() {
|
|
this.items.push({
|
|
medicine_id: '',
|
|
qty_used: 1,
|
|
unit: 'UNIT',
|
|
dosis: '',
|
|
keterangan: ''
|
|
});
|
|
},
|
|
|
|
removeItem(index) {
|
|
this.items.splice(index, 1);
|
|
},
|
|
|
|
// Menggunakan event.target lebih aman dari querySelectorAll
|
|
updateUnit(index, event) {
|
|
const select = event.target;
|
|
const selectedOption = select.options[select.selectedIndex];
|
|
const unit = selectedOption.getAttribute('data-unit');
|
|
this.items[index].unit = unit ? unit : 'UNIT';
|
|
}
|
|
}))
|
|
})
|
|
</script>
|
|
@endpush
|
|
</x-app-layout> |