TIF_Nganjuk_E41220879/resources/views/resep/edit.blade.php

298 lines
20 KiB
PHP

<x-app-layout>
@section('title', 'Edit 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">Edit Resep</span>
</div>
</li>
</ol>
</nav>
<div class="flex items-center justify-between">
<h1 class="text-2xl font-bold text-[#2F347A]">Edit Resep: {{ $resep->no_resep }}</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.update', $resep) }}" x-data="resepForm()">
@csrf
@method('PUT')
<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', $resep->nama_dokter) }}" 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', $resep->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', $resep->tanggal_resep->format('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', $resep->jenis_penjamin) == 'umum' ? 'selected' : '' }}>Umum</option>
<option value="BPJS Kes" {{ old('jenis_penjamin', $resep->jenis_penjamin) == 'BPJS Kes' ? 'selected' : '' }}>BPJS Kes</option>
<option value="BPJS Naker" {{ old('jenis_penjamin', $resep->jenis_penjamin) == 'BPJS Naker' ? 'selected' : '' }}>BPJS Naker</option>
<option value="Jamkesmas/KIS" {{ old('jenis_penjamin', $resep->jenis_penjamin) == 'Jamkesmas/KIS' ? 'selected' : '' }}>Jamkesmas/KIS</option>
<option value="R. Inap" {{ old('jenis_penjamin', $resep->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', $resep->jenis_layanan) == 'BP' ? 'selected' : '' }}>BP</option>
<option value="KIA" {{ old('jenis_layanan', $resep->jenis_layanan) == 'KIA' ? 'selected' : '' }}>KIA</option>
<option value="Gigi" {{ old('jenis_layanan', $resep->jenis_layanan) == 'Gigi' ? 'selected' : '' }}>Gigi</option>
<option value="UGD" {{ old('jenis_layanan', $resep->jenis_layanan) == 'UGD' ? 'selected' : '' }}>UGD</option>
<option value="Lainnya" {{ old('jenis_layanan', $resep->jenis_layanan) == 'Lainnya' ? 'selected' : '' }}>Lainnya</option>
</select>
</div>
<div>
<label class="block text-sm font-medium text-[#2F347A] mb-1">Status <span class="text-red-500">*</span></label>
<select name="status" 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="proses" {{ old('status', $resep->status) == 'proses' ? 'selected' : '' }}>Proses</option>
<option value="selesai" {{ old('status', $resep->status) == 'selesai' ? 'selected' : '' }}>Selesai</option>
<option value="dibatalkan" {{ old('status', $resep->status) == 'dibatalkan' ? 'selected' : '' }}>Dibatalkan</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', $resep->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', $resep->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', $resep->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', $resep->jenis_kelamin) == 'L' ? 'selected' : '' }}>Laki-laki</option>
<option value="P" {{ old('jenis_kelamin', $resep->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', $resep->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', $resep->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', $resep->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', $resep->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>
Update Resep
</button>
</div>
</div>
</div>
</form>
</div>
@push('scripts')
@php
$itemsJson = $resep->items->map(function($item) {
return [
'obat_masuk_id' => (string) $item->obat_masuk_id,
'jumlah' => $item->jumlah,
'aturan_pakai' => $item->aturan_pakai ?? '',
'stok' => $item->obatMasuk->stok ?? null
];
})->values()->toArray();
@endphp
<script>
function resepForm() {
return {
items: @json($itemsJson),
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>