Dwi F Sukmana
87 lines
5.8 KiB
PHP
87 lines
5.8 KiB
PHP
<x-app-layout>
|
|
<div class="max-w-2xl mx-auto space-y-6 pb-12">
|
|
<div class="flex items-center gap-4">
|
|
<a href="{{ route('inventory.medicines.index') }}" 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 Stok Obat</h2>
|
|
<p class="text-sm text-slate-500 font-medium italic uppercase tracking-tighter">Pendaftaran Inventori Medis Baru</p>
|
|
</div>
|
|
</div>
|
|
|
|
<form action="{{ route('inventory.medicines.store') }}" method="POST" enctype="multipart/form-data" class="space-y-6">
|
|
@csrf
|
|
|
|
<div class="bg-white border border-slate-200 rounded-[2.5rem] p-8 shadow-sm space-y-8">
|
|
|
|
<div class="space-y-4">
|
|
<label class="text-[10px] font-black text-slate-400 uppercase tracking-widest ml-1">Foto Produk / Kemasan</label>
|
|
<div class="flex flex-col md:flex-row items-center gap-6">
|
|
<div id="image-preview" class="w-32 h-32 rounded-[2rem] bg-slate-50 border-2 border-dashed border-slate-200 flex items-center justify-center overflow-hidden shrink-0">
|
|
<i class="fas fa-camera text-slate-300 text-3xl"></i>
|
|
</div>
|
|
<div class="flex-1 w-full">
|
|
<input type="file" name="foto_produk" id="foto_produk" accept="image/*" onchange="previewImage(event)"
|
|
class="w-full text-xs text-slate-500 file:mr-4 file:py-2.5 file:px-6 file:rounded-xl file:border-0 file:text-[10px] file:font-black file:bg-indigo-50 file:text-indigo-600 hover:file:bg-indigo-100 transition-all cursor-pointer border border-slate-100 p-2 rounded-2xl">
|
|
<p class="text-[9px] text-slate-400 mt-3 italic leading-relaxed">
|
|
<i class="fas fa-info-circle mr-1"></i> Rekomendasi: Gunakan foto kemasan yang jelas agar staf medis tidak salah mengambil obat.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<hr class="border-slate-50">
|
|
|
|
<div class="space-y-6">
|
|
<div class="space-y-2">
|
|
<label class="text-[10px] font-black text-slate-400 uppercase tracking-widest ml-1">Nama Obat / Vitamin</label>
|
|
<input type="text" name="nama_obat" value="{{ old('nama_obat') }}" required placeholder="Contoh: Amoxicillin"
|
|
class="w-full px-5 py-4 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 outline-none">
|
|
<p class="text-[9px] text-indigo-500 font-bold italic px-1 animate-pulse">
|
|
<i class="fas fa-magic mr-1"></i> Sistem akan menentukan kategori secara otomatis berdasarkan nama.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
|
<div class="space-y-2">
|
|
<label class="text-[10px] font-black text-slate-400 uppercase tracking-widest ml-1">Jumlah Stok Awal</label>
|
|
<input type="number" name="qty" value="{{ old('qty', 0) }}" step="0.01" min="0" required
|
|
class="w-full px-5 py-4 bg-slate-50 border border-slate-200 rounded-2xl text-sm font-black text-slate-800 focus:ring-2 focus:ring-indigo-500 transition-all outline-none">
|
|
</div>
|
|
<div class="space-y-2">
|
|
<label class="text-[10px] font-black text-slate-400 uppercase tracking-widest ml-1">Satuan (Unit)</label>
|
|
<input type="text" name="unit" value="{{ old('unit', 'Pcs') }}" required placeholder="ML, Kapsul, dll"
|
|
class="w-full px-5 py-4 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 outline-none">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="space-y-2">
|
|
<label class="text-[10px] font-black text-slate-400 uppercase tracking-widest ml-1">Tanggal Kadaluarsa (Expired)</label>
|
|
<input type="date" name="expired_date" value="{{ old('expired_date') }}"
|
|
class="w-full px-5 py-4 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 outline-none">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<button type="submit" class="w-full py-5 bg-indigo-600 text-white text-sm font-black rounded-[2rem] shadow-xl hover:bg-indigo-700 transition-all active:scale-[0.98] flex items-center justify-center gap-3">
|
|
<i class="fas fa-check-circle text-lg"></i> DAFTARKAN OBAT KE INVENTORI
|
|
</button>
|
|
</form>
|
|
</div>
|
|
|
|
@push('scripts')
|
|
<script>
|
|
function previewImage(event) {
|
|
const reader = new FileReader();
|
|
reader.onload = function(){
|
|
const output = document.getElementById('image-preview');
|
|
output.innerHTML = `<img src="${reader.result}" class="w-full h-full object-cover">`;
|
|
output.classList.remove('border-dashed');
|
|
output.classList.add('border-solid', 'border-indigo-100');
|
|
};
|
|
reader.readAsDataURL(event.target.files[0]);
|
|
}
|
|
</script>
|
|
@endpush
|
|
</x-app-layout> |