Files
silaras-rssa/app/Views/input.php
T
2026-05-13 08:55:17 +07:00

936 lines
27 KiB
PHP
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<title>Form Input Pasien Ambulans Emergensi 119 RSSA</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<style>
body {
background-color: #f8f9fa;
padding: 2rem;
}
.form-label {
font-weight: 500;
}
#inputTujuanContainer {
display: none;
}
.perawat-wrapper {
position: relative;
margin-bottom: 1rem;
}
.hapus-perawat-btn {
position: absolute;
top: 4px;
right: 8px;
font-size: 16px;
color: #dc3545;
background: none;
border: none;
cursor: pointer;
}
.hapus-perawat-btn:hover {
color: #a71d2a;
}
</style>
</head>
<body>
<div class="container py-5">
<div class="card shadow p-4">
<h4 class="mb-4 text-primary">
🚑 Form Input Pasien Ambulans Emergensi 119 RSSA
</h4>
<!-- FORM START -->
<form id="formPasien" method="post" action="<?= base_url('pasien/simpan') ?>">
<?= csrf_field(); ?>
<!-- ================= HEADER ================= -->
<div class="row mb-3">
<div class="col-md-2">
<label class="form-label">Tanggal & Jam</label>
<input
type="datetime-local"
id="tanggal"
name="tanggal"
class="form-control">
</div>
<div class="col-md-2">
<label class="form-label">Register Ambulans</label>
<input
type="text"
class="form-control"
name="register"
value="<?= $register ?>"
readonly>
</div>
<div class="col-md-2 position-relative">
<label class="form-label">No RM</label>
<div class="input-group">
<input
type="text"
id="noRM"
name="no_rm"
class="form-control"
placeholder="Ketik RM"
>
<button type="button" class="btn btn-primary" onclick="searchRM()">
🔍
</button>
</div>
<div id="rmResult" class="list-group position-absolute w-100 z-3"></div>
</div>
<div class="col-md-3">
<label class="form-label">Nama Penelpon</label>
<input
type="text"
class="form-control"
id="penelpon"
name="nama_penelpon"
placeholder="Nama penelpon">
</div>
<div class="col-md-3">
<label class="form-label">No. Penelpon</label>
<input
type="tel"
class="form-control"
id="no_penelpon"
name="no_penelpon"
placeholder="08xxxx">
</div>
</div>
<!-- ================= IDENTITAS ================= -->
<div class="row mb-3">
<div class="col-md-2">
<label class="form-label">Atribut</label>
<select class="form-select" id="panggilanDepan" name="panggilan_depan">
<option>...</option>
<option>By.</option>
<option>An.</option>
<option>Sdr.</option>
<option>Nn.</option>
<option>Tn.</option>
<option>Ny.</option>
</select>
</div>
<div class="col-md-4">
<label class="form-label">Nama Pasien</label>
<input type="text" class="form-control" id="nama" name="nama">
</div>
<div class="col-md-2">
<label class="form-label">JK</label>
<select class="form-select" id="gender" name="gender">
<option>...</option>
<option>Laki-laki</option>
<option>Perempuan</option>
</select>
</div>
<div class="col-md-2">
<label class="form-label">Tanggal Lahir</label>
<input type="date" id="tanggalLahir" class="form-control" name="tanggal_lahir">
</div>
<div class="col-md-2">
<label class="form-label">Umur</label>
<input type="text" id="umur" class="form-control" name="umur" readonly>
</div>
</div>
<!-- ================= ALAMAT + POSISI ================= -->
<div class="row mb-3">
<!-- ALAMAT (kiri) -->
<div class="col-md-6">
<label class="form-label">Alamat</label>
<textarea id="alamat" name="alamat" class="form-control" rows="4"></textarea>
</div>
<!-- POSISI PASIEN (kanan) -->
<div class="col-md-6">
<!-- HEADER: Judul kiri, Lantai kanan -->
<div class="d-flex justify-content-between align-items-center mb-2">
<label class="form-label mb-0">
Posisi Pasien (Saat Ditemukan)
</label>
<div class="d-flex align-items-center">
<label for="lantai" class="me-2 mb-0">Lantai</label>
<select id="lantai" name="lantai" class="form-select form-select-sm">
<option value="">Pilih</option>
<?php for($i = 1; $i <= 50; $i++): ?>
<option value="<?= $i ?>">Lantai <?= $i ?></option>
<?php endfor; ?>
</select>
</div>
</div>
<!-- CHECKBOX -->
<div class="form-check">
<input class="form-check-input" type="checkbox" id="tidur" name="posisi_pasien[]" value="kamar_tidur">
<label class="form-check-label" for="tidur">Di Kamar Tidur</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" id="tamu" name="posisi_pasien[]" value="ruang_tamu">
<label class="form-check-label" for="tamu">Di Ruang Tamu</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" id="mandi" name="posisi_pasien[]" value="kamar_mandi">
<label class="form-check-label" for="mandi">Di Kamar Mandi</label>
</div>
<div class="d-flex align-items-center mb-2">
<input
class="form-check-input me-2"
type="checkbox"
id="ruanglain"
name="posisi_pasien[]"
value="lainnya"
onchange="toggleInputRuangLain()">
<label class="form-check-label me-2" for="ruanglain">
Di Ruang Lain:
</label>
<input
type="text"
id="inputRuangLain"
name="posisi_lainnya"
class="form-control form-control-sm w-50"
placeholder="Sebutkan..."
disabled>
</div>
</div>
<div class="row mb-3">
<!-- Keluhan Utama -->
<div class="col-md-12">
<label class="form-label">Keluhan Utama</label>
<textarea
class="form-control"
name="keluhan_utama"
rows="2"
placeholder="Contoh: sesak napas, nyeri dada, kecelakaan, dll"></textarea>
</div>
</div>
<div class="row mb-3">
<!-- 1. Kesadaran -->
<div class="col-md-4">
<label class="form-label">Kesadaran</label>
<select class="form-select" id="kesadaran" name="kesadaran">
<option>...</option>
<option>Sadar</option>
<option>Tidak Sadar</option>
<option>Gelisah</option>
</select>
</div>
<!-- 2. Kategori -->
<div class="col-md-4">
<label class="form-label">Kategori</label>
<select class="form-select" id="kategori" name="kategori">
<option value="">...</option>
<option value="Trauma">Trauma</option>
<option value="Non Trauma">Non Trauma</option>
</select>
</div>
<!-- 3. Order Type -->
<div class="col-md-4">
<label class="form-label">Order Type</label>
<select class="form-select" id="orderType" name="order_type">
<option value="Pending Order">🟢 Pending Order</option>
<option value="Non Emergency">🟡 Non Emergency</option>
<option value="True Emergency">🔴 True Emergency</option>
</select>
</div>
</div>
<div class="row g-3">
<!-- KIRI: PERNAFASAN + SUHU + BAHAYA -->
<div class="col-md-3">
<div class="border rounded p-3 h-100">
<!-- Pernafasan -->
<label class="fw-bold">Pernafasan</label>
<!-- SESAK -->
<div class="mt-2">
<div class="d-flex gap-3">
<div class="form-check">
<input class="form-check-input" type="radio" name="sesak" value="ya" id="sesakYa">
<label class="form-check-label" for="sesakYa">Sesak</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="sesak" value="tidak" id="sesakTidak">
<label class="form-check-label" for="sesakTidak">Tidak Sesak</label>
</div>
</div>
</div>
<!-- BATUK -->
<div class="mt-2">
<div class="d-flex gap-3">
<div class="form-check">
<input class="form-check-input" type="radio" name="batuk" value="ya" id="batukYa">
<label class="form-check-label" for="batukYa">Batuk</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="batuk" value="tidak" id="batukTidak">
<label class="form-check-label" for="batukTidak">Tidak Batuk</label>
</div>
</div>
</div>
<!-- Suhu -->
<label class="fw-bold">Suhu Tubuh</label>
<div class="d-flex gap-3 mt-2 mb-3">
<div class="form-check">
<input class="form-check-input" type="radio" name="suhu" value="demam" id="demam">
<label class="form-check-label" for="demam">Demam</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="suhu" value="tidak_demam" id="tidak_demam">
<label class="form-check-label" for="tidak_demam">Tidak</label>
</div>
</div>
<!-- Bahaya -->
<label class="fw-bold">Kondisi Bahaya</label>
<div class="d-flex gap-3 mt-2">
<div class="form-check">
<input class="form-check-input" type="radio" name="bahaya" value="ada" id="bahayaAda">
<label class="form-check-label" for="bahayaAda">Ada</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="bahaya" value="tidak" id="bahayaTidakAda" checked>
<label class="form-check-label" for="bahayaTidakAda">Tidak</label>
</div>
</div>
<!-- DETAIL (selalu tampil, tapi disabled) -->
<div id="bahayaInputDiv" class="mt-2 opacity-50">
<input type="text"
class="form-control"
name="bahaya_detail"
placeholder="Jenis bahaya..."
disabled>
</div>
</div>
</div>
<!-- TENGAH: KETERBATASAN GERAK -->
<div class="col-md-3">
<div class="border rounded p-3 h-100">
<label class="form-label fw-bold">Keterbatasan Gerak</label>
<div class="d-flex flex-column gap-2 mt-2">
<div class="form-check">
<input class="form-check-input" type="radio" name="gerak" value="tangan">
<label class="form-check-label">Tangan</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="gerak" value="kaki">
<label class="form-check-label">Kaki</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="gerak" value="semua">
<label class="form-check-label">Semua Anggota Gerak</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="gerak" value="normal">
<label class="form-check-label">Tidak Ada Keterbatasan</label>
</div>
</div>
<!-- Berat Badan -->
<label class="fw-bold">Berat Badan</label>
<div class="input-group mt-2 mb-3">
<input type="number" class="form-control" id="beratBadan" name="berat_badan" placeholder="Berat badan pasien">
<span class="input-group-text">Kg</span>
</div>
</div>
</div>
<!-- KANAN: NYERI -->
<div class="col-md-6">
<div class="border rounded p-3 h-100">
<label class="form-label fw-bold">Nyeri / Luka</label>
<!-- RADIO -->
<div class="d-flex gap-3 mt-2 mb-2">
<div class="form-check">
<input class="form-check-input" type="radio" name="status_nyeri" id="adaNyeri" value="ya">
<label class="form-check-label" for="adaNyeri">Nyeri</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="status_nyeri" id="tidakNyeri" value="tidak" checked>
<label class="form-check-label" for="tidakNyeri">Tidak Nyeri</label>
</div>
</div>
<!-- DETAIL (selalu tampil, tapi default nonaktif) -->
<div id="detailNyeri" class="opacity-50">
<label class="form-label fw-semibold mb-2">Lokasi Nyeri</label>
<div class="row row-cols-2 row-cols-md-4 g-2">
<?php
$lokasi = ['kepala','leher','dada','punggung','perut','panggul','tangan','kaki'];
foreach($lokasi as $l): ?>
<div class="col">
<div class="form-check">
<input class="form-check-input"
type="checkbox"
name="lokasi_nyeri[]"
value="<?= $l ?>"
id="nyeri_<?= $l ?>"
disabled>
<label class="form-check-label" for="nyeri_<?= $l ?>">
<?= ucfirst($l) ?>
</label>
</div>
</div>
<?php endforeach; ?>
</div>
<input type="text" name="nyeri_lain" class="form-control mt-3"
placeholder="Lain-lain..." disabled>
</div>
</div>
</div>
<!-- Informasi Lain -->
<div class="row mt-3">
<div class="col-md-12">
<label class="form-label">Informasi Lain</label>
<input
type="text"
class="form-control"
name="informasi_lain"
placeholder="Contoh: alergi obat, kondisi khusus, permintaan khusus, Peralatan Khusus, dll">
</div>
</div>
</div>
<!-- ================= TUJUAN ================= -->
<div class="row mt-3 g-3">
<!-- TUJUAN -->
<div class="col-md-5">
<div class="border rounded p-3 h-100">
<label for="tujuan" class="form-label fw-bold">🎯 Tujuan</label>
<select class="form-select" id="tujuan" name="tujuan">
<option value="">-- Pilih Tujuan --</option>
<option value="RFDK">RFDK Rumah ke Faskes Dalam Kota</option>
<option value="F-FDK">F-FDK Fasilitas Umum ke Faskes Dalam Kota</option>
<option value="AFDK">AFDK Antar Faskes Dalam Kota</option>
<option value="AFLK">AFLK Antar Faskes Luar Kota</option>
<option value="PDK">PDK Pulang Dalam Kota</option>
<option value="PLK">PLK Pulang Luar Kota</option>
</select>
<div class="mt-3">
<label class="form-label small">Detail Tujuan</label>
<input
type="text"
class="form-control"
name="tujuan_detail"
placeholder="Nama RS / alamat / keterangan">
</div>
</div>
</div>
<!-- PERSETUJUAN BIAYA -->
<div class="col-md-3">
<div class="border rounded p-3 h-100">
<label class="form-label fw-bold">Persetujuan Biaya</label>
<div class="d-flex gap-3 mt-2 mb-3">
<div class="form-check">
<input class="form-check-input" type="radio" name="persetujuan" value="setuju">
<label class="form-check-label">Setuju</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="persetujuan" value="tidak">
<label class="form-check-label">Tidak</label>
</div>
</div>
<label class="form-label small">Nominal Biaya</label>
<div class="input-group">
<span class="input-group-text">Rp</span>
<input
type="number"
class="form-control"
name="biaya"
placeholder="Masukkan nominal">
</div>
</div>
</div>
<!-- VALIDASI + PETUGAS -->
<div class="col-md-4">
<div class="border rounded p-3 h-100">
<label class="form-label fw-bold">Validasi Pelayanan</label>
<input
type="text"
class="form-control mt-2 mb-3"
name="validasi"
placeholder="Valid / Tidak Valid">
<!-- PETUGAS (SELECT) -->
<label class="form-label small">Petugas Penerima</label>
<select id="petugas" name="petugas_id" style="width:100%"></select>
</div>
</div>
</div>
<!-- ================= BUTTON ================= -->
<div class="d-flex justify-content-between mt-4">
<button type="button" class="btn btn-secondary" onclick="location.reload()">
Reset
</button>
<button type="submit" id="btnSubmit" class="btn btn-success">
Simpan Pasien
</button>
</div>
</form>
<!-- FORM END -->
</div>
</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/select2.min.js"></script>
<script>
let isSubmitting = false;
document.getElementById('formPasien').addEventListener('submit', function(e){
if(isSubmitting){
e.preventDefault();
return;
}
if(!confirm("Yakin simpan data pasien?")){
e.preventDefault();
return;
}
isSubmitting = true;
const btn = document.getElementById('btnSubmit');
if(btn){
btn.disabled = true;
btn.innerText = 'Menyimpan...';
}
});
window.addEventListener('pageshow', function () {
const btn = document.getElementById('btnSubmit');
if(btn){
btn.disabled = false;
btn.innerText = 'Simpan Pasien';
}
isSubmitting = false;
});
$(document).ready(function() {
$('#petugas').select2({
width: '100%',
placeholder: 'Ketik nama petugas...',
minimumInputLength: 2,
ajax: {
url: '/pegawai/search',
dataType: 'json',
delay: 300,
data: function (params) {
return { q: params.term };
},
processResults: function (data) {
return {
results: data
};
}
}
});
// ================= TOGGLE RADIO (ENABLE / DISABLE) =================
function toggleByRadio(name, targetId, activeValue) {
const radios = document.querySelectorAll(`input[name="${name}"]`);
const target = document.getElementById(targetId);
radios.forEach(el => {
el.addEventListener("change", function () {
const aktif = this.value === activeValue;
// enable / disable semua input di dalam target
target.querySelectorAll('input').forEach(input => {
input.disabled = !aktif;
});
// efek visual (abu kalau nonaktif)
target.classList.toggle('opacity-50', !aktif);
});
});
}
toggleByRadio("status_nyeri", "detailNyeri", "ya");
toggleByRadio("bahaya", "bahayaInputDiv", "ada");
document.querySelectorAll('input[type="radio"]:checked')
.forEach(el => el.dispatchEvent(new Event('change')));
document.getElementById('noRM').addEventListener('input', searchRM);
});
// ================= auto umur =================
document.getElementById('tanggalLahir')
.addEventListener('change', hitungUmur);
function hitungUmur()
{
const val = document.getElementById('tanggalLahir').value;
if(!val) {
document.getElementById('umur').value = '';
return;
}
const lahir = new Date(val);
const today = new Date();
if(isNaN(lahir.getTime())) {
document.getElementById('umur').value = '';
return;
}
let tahun = today.getFullYear() - lahir.getFullYear();
let bulan = today.getMonth() - lahir.getMonth();
let hari = today.getDate() - lahir.getDate();
if (hari < 0) {
bulan--;
const lastMonth = new Date(today.getFullYear(), today.getMonth(), 0);
hari += lastMonth.getDate();
}
if (bulan < 0) {
tahun--;
bulan += 12;
}
document.getElementById('umur').value =
`${tahun} Th ${bulan} Bln ${hari} Hr`;
}
function toggleInputRuangLain(){
const check = document.getElementById('ruanglain');
const input = document.getElementById('inputRuangLain');
input.disabled = !check.checked;
if(!check.checked) input.value = '';
}
// ================= Fungsi Modal RM =================
let currentRegisterId = null;
function openCekRM(){
currentRegisterId = null;
new bootstrap.Modal(document.getElementById('modalCekRM')).show();
}
function cekRM(){
let rm = document.getElementById('inputRM').value;
fetch("<?= base_url('rm/cek') ?>", {
method: "POST",
headers: {
"Content-Type": "application/x-www-form-urlencoded"
},
body: "rm=" + rm
})
.then(res => res.json())
.then(res => {
let hasil = document.getElementById('hasilRM');
if(res.status === 'found'){
let p = res.data;
hasil.innerHTML = `
<div class="alert alert-success">
<b>✔ RM Ditemukan</b><br>
Nama: ${p.nama}<br>
Gender: ${p.gender ?? '-'}<br>
Alamat: ${p.alamat ?? '-'}
</div>
<button class="btn btn-success" onclick="linkRM('${rm}')">
✔ Konfirmasi RM
</button>
`;
} else {
hasil.innerHTML = `
<div class="alert alert-danger">
⚠ RM tidak ditemukan
</div>
<button class="btn btn-warning" onclick="linkRM('${rm}')">
Tetap Gunakan RM Ini
</button>
`;
}
});
}
function linkRM(rm){
fetch("<?= base_url('rm/link') ?>", {
method: "POST",
headers: {
"Content-Type": "application/x-www-form-urlencoded"
},
body: "register_id=" + currentRegisterId + "&rm=" + rm
})
.then(res => res.json())
.then(res => {
if(res.status === 'success'){
alert("RM berhasil di-update");
location.reload();
}
});
}
//Fungsi Pencari RM//
let rmTimeout;
function searchRM() {
clearTimeout(rmTimeout);
rmTimeout = setTimeout(() => {
let q = document.getElementById('noRM').value;
if (!q) {
alert("RM masih kosong");
return;
}
fetch("<?= base_url('rm/search') ?>", {
method: "POST",
headers: {
"Content-Type": "application/x-www-form-urlencoded"
},
body: "q=" + encodeURIComponent(q)
})
.then(res => res.json())
.then(res => {
let box = document.getElementById('rmResult');
// ================== RM TIDAK ADA ==================
if (!res.data || res.data.length === 0) {
box.innerHTML = `
<div class="list-group-item text-danger">
❌ RM tidak ditemukan
</div>
<div class="list-group-item">
<button class="btn btn-warning w-100"
onclick="useNewRM('${q}')">
Gunakan RM ini (Pasien Baru)
</button>
</div>
`;
return;
}
// ================== RM DITEMUKAN ==================
let html = `
<div class="list-group-item bg-light">
<b>⚠ RM ditemukan</b><br>
Pilih data pasien:
</div>
`;
res.data.forEach(p => {
html += `
<button type="button"
class="list-group-item list-group-item-action"
onclick="confirmRM('${p.rm}','${p.nama}','${p.alamat}','${p.gender}','${p.tanggal_lahir}')">
<b>${p.rm}</b> - ${p.nama}
<br>
<small class="text-muted">${p.alamat ?? ''}</small>
</button>
`;
});
box.innerHTML = html;
});
}, 300);
}
function confirmRM(rm, nama, alamat, gender, tanggal_lahir)
{
if(!rm) {
alert("Data RM tidak ditemukan");
return;
}
if(!confirm(`Gunakan data RM: ${nama}?`)) return;
document.getElementById('noRM').value = rm;
document.getElementById('nama').value = nama ?? '';
document.getElementById('alamat').value = alamat ?? '';
document.getElementById('gender').value = gender ?? '';
document.getElementById('tanggalLahir').value = tanggal_lahir ?? '';
// trigger umur
const tgl = document.getElementById('tanggalLahir');
if(tgl) tgl.dispatchEvent(new Event('change'));
document.getElementById('rmResult').innerHTML = `
<div class="alert alert-success py-2">
✔ RM aktif: <b>${rm}</b><br>
👤 ${nama}
</div>
`;
}
function useNewRM(rm)
{
document.getElementById('noRM').value = rm;
document.getElementById('rmResult').innerHTML = `
<div class="alert alert-warning alert-dismissible fade show" role="alert">
⚠ RM ${rm} sebagai PASIEN BARU
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
`;
setTimeout(() => {
let el = document.querySelector('.alert-warning');
if(el) el.remove();
}, 2000);
}
function fillRM(rm,nama,alamat,gender,tgl)
{
document.getElementById('noRM').value = rm;
document.getElementById('nama').value = nama;
document.getElementById('alamat').value = alamat;
document.getElementById('gender').value = gender;
document.getElementById('rmResult').innerHTML = '';
if(tgl){
document.getElementById('tanggalLahir').value = tgl;
document.getElementById('tanggalLahir').dispatchEvent(new Event('change'));
}
}
</script>
<!-- ================= Modal RM ================= -->
<div class="modal fade" id="modalCekRM" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Cek RM</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
</div>
<div class="modal-body">
<input type="hidden" id="registerId">
<label>Masukkan RM</label>
<input type="text" id="inputRM" class="form-control">
<button class="btn btn-primary mt-2" onclick="cekRM()">
🔍 Cek RM
</button>
<hr>
<div id="hasilRM"></div>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>