276 lines
18 KiB
PHP
276 lines
18 KiB
PHP
<x-app-layout>
|
|
@section('title', 'Tambah Resep')
|
|
|
|
<div class="space-y-6">
|
|
<!-- Breadcrumb -->
|
|
<nav class="flex" aria-label="Breadcrumb">
|
|
<ol class="inline-flex items-center space-x-1 md:space-x-3">
|
|
<li>
|
|
<a href="{{ route('resep.index') }}" class="text-[#7A7FAE] hover:text-[#4A538F]">Resep</a>
|
|
</li>
|
|
<li>
|
|
<div class="flex items-center">
|
|
<svg class="w-4 h-4 text-[#7A7FAE]" fill="currentColor" viewBox="0 0 20 20">
|
|
<path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"/>
|
|
</svg>
|
|
<span class="ml-1 text-[#2F347A] font-medium">Tambah Resep</span>
|
|
</div>
|
|
</li>
|
|
</ol>
|
|
</nav>
|
|
|
|
<div class="flex items-center justify-between">
|
|
<h1 class="text-2xl font-bold text-[#2F347A]">Tambah Resep Baru</h1>
|
|
</div>
|
|
|
|
<!-- Error Message -->
|
|
@if($errors->any())
|
|
<div class="bg-[#FFD6D6] border border-[#C0392B] text-[#C0392B] px-4 py-3 rounded-lg">
|
|
@foreach($errors->all() as $error)
|
|
<p>{{ $error }}</p>
|
|
@endforeach
|
|
</div>
|
|
@endif
|
|
|
|
<form method="POST" action="{{ route('resep.store') }}" x-data="resepForm()">
|
|
@csrf
|
|
|
|
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
|
|
<!-- Left Column - Data Resep & Pasien -->
|
|
<div class="lg:col-span-1 space-y-6">
|
|
<!-- Data Resep -->
|
|
<x-card class="p-6">
|
|
<h3 class="text-lg font-semibold text-[#2F347A] mb-4 pb-2 border-b border-[#E5E7F2]">Data Resep</h3>
|
|
|
|
<div class="space-y-4">
|
|
<div>
|
|
<label class="block text-sm font-medium text-[#2F347A] mb-1">Nama Dokter <span class="text-red-500">*</span></label>
|
|
<input type="text" name="nama_dokter" value="{{ old('nama_dokter', auth()->user()->name) }}" required
|
|
class="w-full px-4 py-2.5 border border-[#E5E7F2] rounded-lg focus:ring-2 focus:ring-[#4A538F] focus:border-[#4A538F] text-[#2F347A]"
|
|
placeholder="Nama dokter">
|
|
</div>
|
|
|
|
<div>
|
|
<label class="block text-sm font-medium text-[#2F347A] mb-1">No. SIP</label>
|
|
<input type="text" name="no_sip" value="{{ old('no_sip') }}"
|
|
class="w-full px-4 py-2.5 border border-[#E5E7F2] rounded-lg focus:ring-2 focus:ring-[#4A538F] focus:border-[#4A538F] text-[#2F347A]"
|
|
placeholder="Nomor Surat Izin Praktik">
|
|
</div>
|
|
|
|
<div>
|
|
<label class="block text-sm font-medium text-[#2F347A] mb-1">Tanggal Resep <span class="text-red-500">*</span></label>
|
|
<input type="date" name="tanggal_resep" value="{{ old('tanggal_resep', date('Y-m-d')) }}" required
|
|
class="w-full px-4 py-2.5 border border-[#E5E7F2] rounded-lg focus:ring-2 focus:ring-[#4A538F] focus:border-[#4A538F] text-[#2F347A]">
|
|
</div>
|
|
|
|
<div>
|
|
<label class="block text-sm font-medium text-[#2F347A] mb-1">Jenis Penjamin <span class="text-red-500">*</span></label>
|
|
<select name="jenis_penjamin" required
|
|
class="w-full px-4 py-2.5 border border-[#E5E7F2] rounded-lg focus:ring-2 focus:ring-[#4A538F] focus:border-[#4A538F] bg-white text-[#2F347A]">
|
|
<option value="umum" {{ old('jenis_penjamin') == 'umum' ? 'selected' : '' }}>Umum</option>
|
|
<option value="BPJS Kes" {{ old('jenis_penjamin') == 'BPJS Kes' ? 'selected' : '' }}>BPJS Kes</option>
|
|
<option value="BPJS Naker" {{ old('jenis_penjamin') == 'BPJS Naker' ? 'selected' : '' }}>BPJS Naker</option>
|
|
<option value="Jamkesmas/KIS" {{ old('jenis_penjamin') == 'Jamkesmas/KIS' ? 'selected' : '' }}>Jamkesmas/KIS</option>
|
|
<option value="R. Inap" {{ old('jenis_penjamin') == 'R. Inap' ? 'selected' : '' }}>R. Inap</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div>
|
|
<label class="block text-sm font-medium text-[#2F347A] mb-1">Jenis Layanan <span class="text-red-500">*</span></label>
|
|
<select name="jenis_layanan" required
|
|
class="w-full px-4 py-2.5 border border-[#E5E7F2] rounded-lg focus:ring-2 focus:ring-[#4A538F] focus:border-[#4A538F] bg-white text-[#2F347A]">
|
|
<option value="BP" {{ old('jenis_layanan') == 'BP' ? 'selected' : '' }}>BP</option>
|
|
<option value="KIA" {{ old('jenis_layanan') == 'KIA' ? 'selected' : '' }}>KIA</option>
|
|
<option value="Gigi" {{ old('jenis_layanan') == 'Gigi' ? 'selected' : '' }}>Gigi</option>
|
|
<option value="UGD" {{ old('jenis_layanan') == 'UGD' ? 'selected' : '' }}>UGD</option>
|
|
<option value="Lainnya" {{ old('jenis_layanan') == 'Lainnya' ? 'selected' : '' }}>Lainnya</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</x-card>
|
|
|
|
<!-- Data Pasien -->
|
|
<x-card class="p-6">
|
|
<h3 class="text-lg font-semibold text-[#2F347A] mb-4 pb-2 border-b border-[#E5E7F2]">Data Pasien</h3>
|
|
|
|
<div class="space-y-4">
|
|
<div>
|
|
<label class="block text-sm font-medium text-[#2F347A] mb-1">No. RM</label>
|
|
<input type="text" name="no_rm" value="{{ old('no_rm') }}"
|
|
class="w-full px-4 py-2.5 border border-[#E5E7F2] rounded-lg focus:ring-2 focus:ring-[#4A538F] focus:border-[#4A538F] text-[#2F347A]"
|
|
placeholder="Nomor Rekam Medis">
|
|
</div>
|
|
|
|
<div>
|
|
<label class="block text-sm font-medium text-[#2F347A] mb-1">Nama Pasien <span class="text-red-500">*</span></label>
|
|
<input type="text" name="nama_pasien" value="{{ old('nama_pasien') }}" required
|
|
class="w-full px-4 py-2.5 border border-[#E5E7F2] rounded-lg focus:ring-2 focus:ring-[#4A538F] focus:border-[#4A538F] text-[#2F347A]"
|
|
placeholder="Masukkan nama pasien">
|
|
</div>
|
|
|
|
<div>
|
|
<label class="block text-sm font-medium text-[#2F347A] mb-1">Alamat</label>
|
|
<textarea name="alamat_pasien" rows="2"
|
|
class="w-full px-4 py-2.5 border border-[#E5E7F2] rounded-lg focus:ring-2 focus:ring-[#4A538F] focus:border-[#4A538F] text-[#2F347A]"
|
|
placeholder="Alamat pasien">{{ old('alamat_pasien') }}</textarea>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-2 gap-4">
|
|
<div>
|
|
<label class="block text-sm font-medium text-[#2F347A] mb-1">Jenis Kelamin <span class="text-red-500">*</span></label>
|
|
<select name="jenis_kelamin" required
|
|
class="w-full px-4 py-2.5 border border-[#E5E7F2] rounded-lg focus:ring-2 focus:ring-[#4A538F] focus:border-[#4A538F] bg-white text-[#2F347A]">
|
|
<option value="">-- Pilih --</option>
|
|
<option value="L" {{ old('jenis_kelamin') == 'L' ? 'selected' : '' }}>Laki-laki</option>
|
|
<option value="P" {{ old('jenis_kelamin') == 'P' ? 'selected' : '' }}>Perempuan</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div>
|
|
<label class="block text-sm font-medium text-[#2F347A] mb-1">Umur (Tahun) <span class="text-red-500">*</span></label>
|
|
<input type="number" name="umur_pasien" value="{{ old('umur_pasien') }}" min="0" max="150" required
|
|
class="w-full px-4 py-2.5 border border-[#E5E7F2] rounded-lg focus:ring-2 focus:ring-[#4A538F] focus:border-[#4A538F] text-[#2F347A]"
|
|
placeholder="Umur">
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<label class="block text-sm font-medium text-[#2F347A] mb-1">Berat Badan (kg) <span class="text-red-500">*</span></label>
|
|
<input type="number" name="berat_badan" value="{{ old('berat_badan') }}" min="0" max="500" step="0.1" required
|
|
class="w-full px-4 py-2.5 border border-[#E5E7F2] rounded-lg focus:ring-2 focus:ring-[#4A538F] focus:border-[#4A538F] text-[#2F347A]"
|
|
placeholder="Berat badan">
|
|
</div>
|
|
|
|
<div>
|
|
<label class="block text-sm font-medium text-[#2F347A] mb-1">Diagnosa <span class="text-red-500">*</span></label>
|
|
<textarea name="diagnosa" rows="3" required
|
|
class="w-full px-4 py-2.5 border border-[#E5E7F2] rounded-lg focus:ring-2 focus:ring-[#4A538F] focus:border-[#4A538F] text-[#2F347A]"
|
|
placeholder="Diagnosa pasien">{{ old('diagnosa') }}</textarea>
|
|
</div>
|
|
|
|
<div>
|
|
<label class="block text-sm font-medium text-[#2F347A] mb-1">Catatan</label>
|
|
<textarea name="catatan" rows="2"
|
|
class="w-full px-4 py-2.5 border border-[#E5E7F2] rounded-lg focus:ring-2 focus:ring-[#4A538F] focus:border-[#4A538F] text-[#2F347A]"
|
|
placeholder="Catatan tambahan">{{ old('catatan') }}</textarea>
|
|
</div>
|
|
</div>
|
|
</x-card>
|
|
</div>
|
|
|
|
<!-- Right Column - Medicines -->
|
|
<div class="lg:col-span-2 space-y-6">
|
|
<x-card class="p-6">
|
|
<div class="flex items-center justify-between mb-4 pb-2 border-b border-[#E5E7F2]">
|
|
<h3 class="text-lg font-semibold text-[#2F347A]">Daftar Obat</h3>
|
|
<button type="button" @click="addItem()"
|
|
class="px-4 py-2 bg-[#4A538F] text-white rounded-lg hover:bg-[#424B84] transition-colors text-sm flex items-center gap-2">
|
|
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"/>
|
|
</svg>
|
|
Tambah Obat
|
|
</button>
|
|
</div>
|
|
|
|
<div class="space-y-4">
|
|
<template x-for="(item, index) in items" :key="index">
|
|
<div class="p-4 bg-[#F4F6FF] rounded-lg space-y-3">
|
|
<div class="flex items-center justify-between">
|
|
<span class="text-sm font-medium text-[#4A538F]" x-text="'Obat #' + (index + 1)"></span>
|
|
<button type="button" @click="removeItem(index)"
|
|
x-show="items.length > 1"
|
|
class="p-1 text-[#C0392B] hover:bg-[#FFD6D6] rounded transition-colors">
|
|
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-3">
|
|
<div class="md:col-span-2">
|
|
<label class="block text-sm font-medium text-[#2F347A] mb-1">Pilih Obat <span class="text-red-500">*</span></label>
|
|
<select :name="'items[' + index + '][obat_masuk_id]'" required
|
|
x-model="item.obat_masuk_id"
|
|
@change="updateObatInfo(index)"
|
|
class="w-full px-4 py-2.5 border border-[#E5E7F2] rounded-lg focus:ring-2 focus:ring-[#4A538F] focus:border-[#4A538F] bg-white text-[#2F347A]">
|
|
<option value="">-- Pilih Obat --</option>
|
|
@foreach($obats as $obat)
|
|
<option value="{{ $obat->id }}"
|
|
data-nama="{{ $obat->nama_obat }}"
|
|
data-stok="{{ $obat->stok }}"
|
|
data-satuan="{{ $obat->satuan->nama ?? '' }}">
|
|
{{ $obat->nama_obat }} - Stok: {{ $obat->stok }} {{ $obat->satuan->nama ?? '' }} (Batch: {{ $obat->kode_batch }})
|
|
</option>
|
|
@endforeach
|
|
</select>
|
|
</div>
|
|
|
|
<div>
|
|
<label class="block text-sm font-medium text-[#2F347A] mb-1">Jumlah <span class="text-red-500">*</span></label>
|
|
<input type="number" :name="'items[' + index + '][jumlah]'"
|
|
x-model="item.jumlah" required min="1"
|
|
class="w-full px-4 py-2.5 border border-[#E5E7F2] rounded-lg focus:ring-2 focus:ring-[#4A538F] focus:border-[#4A538F] text-[#2F347A]"
|
|
placeholder="Jumlah">
|
|
<p class="text-xs text-[#7A7FAE] mt-1" x-show="item.stok" x-text="'Stok tersedia: ' + item.stok"></p>
|
|
</div>
|
|
|
|
<div>
|
|
<label class="block text-sm font-medium text-[#2F347A] mb-1">Aturan Pakai</label>
|
|
<input type="text" :name="'items[' + index + '][aturan_pakai]'"
|
|
x-model="item.aturan_pakai"
|
|
class="w-full px-4 py-2.5 border border-[#E5E7F2] rounded-lg focus:ring-2 focus:ring-[#4A538F] focus:border-[#4A538F] text-[#2F347A]"
|
|
placeholder="Contoh: 3x1 sehari">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</div>
|
|
|
|
<div x-show="items.length === 0" class="text-center py-8 text-[#7A7FAE]">
|
|
Klik "Tambah Obat" untuk menambahkan obat ke resep
|
|
</div>
|
|
</x-card>
|
|
|
|
<!-- Submit Buttons -->
|
|
<div class="flex gap-3 justify-end">
|
|
<x-btn type="secondary" href="{{ route('resep.index') }}">Batal</x-btn>
|
|
<button type="submit"
|
|
class="px-6 py-2.5 bg-[#4A538F] text-white rounded-lg hover:bg-[#424B84] transition-colors flex items-center gap-2">
|
|
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
|
|
</svg>
|
|
Simpan Resep
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
|
|
@push('scripts')
|
|
<script>
|
|
function resepForm() {
|
|
return {
|
|
items: [{ obat_masuk_id: '', jumlah: 1, aturan_pakai: '', stok: null }],
|
|
|
|
addItem() {
|
|
this.items.push({ obat_masuk_id: '', jumlah: 1, aturan_pakai: '', stok: null });
|
|
},
|
|
|
|
removeItem(index) {
|
|
this.items.splice(index, 1);
|
|
},
|
|
|
|
updateObatInfo(index) {
|
|
const select = document.querySelector(`select[name="items[${index}][obat_masuk_id]"]`);
|
|
const option = select.options[select.selectedIndex];
|
|
if (option) {
|
|
this.items[index].stok = option.dataset.stok || null;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
@endpush
|
|
</x-app-layout>
|