pbmc-cmod/app/Views/patients_index.php

<?= $this->extend('admin/layout/main.php') ?>

<?= $this->section('content') ?>
<div class="card border-0 m-1">
	<div class="card-header bg-success text-white">Patients List</div>
	<div class="card-body">	
		<div class='row mb-2'>
			<div class='col-2'>MR#</div>
			<div class='col-2'><input type='text' class='form-control form-control-sm' id='search_patnumber' oninput='this.value = this.value.toUpperCase();' /></div>
		</div>
		<div class='row mb-2'>
			<div class='col-2'>Name</div>
			<div class='col-3'><input type='text' class='form-control form-control-sm' id='search_patname' oninput='this.value = this.value.toLowerCase();' /></div>
		</div>
		<button class='btn btn-sm btn-success-2' onclick='search()'>Search</button>
	</div>
</div>

<div class="card border-0 m-1">
	<div class="card-body">
		<button class='btn btn-sm btn-primary' onclick='create()'><i class='bi bi-plus-circle'></i> Create</button>
		<div class="table-responsive">
			<table id="myTable" class="table">
				<thead>
					<tr>
						<th>MR#</th>
						<th>Name</th>
						<th>Sex</th>
						<th>Birthdate</th>
						<th>Action</th>
					</tr>
				</thead>
				<tbody id='table-body'>
				</tbody>
			</table>
		</div>
	</div>
</div>

<div class="modal fade" id="modal_patEditor" aria-hidden="true" tabindex="-1">
	<div class="modal-dialog modal-lg modal-dialog-centered modal-dialog-scrollable">
		<div class="modal-content">
			<div class="modal-header">
				<h1 class="modal-title fs-5" id="exampleModalToggleLabel">Patient Editor</h1>
				<button type="button" class="btn-close" data-bs-dismiss="modal" ></button>
			</div>
			<div class="modal-body" style='background-color:#F4F6FF'>
				<table class="table table-sm table-borderless">
					<input type='hidden' id='qpatid' value='' />
					<tr class="align-middle"> <th>MR#</th> <th>:</th> 
						<td><input class='form-control' type='text' id='qpatnumber' oninput='this.value = this.value.toUpperCase();' /></td> 
					</tr>
					<tr class="align-middle"> <th>Patient Name</th> <th>:</th> <td><input class='form-control' type='text' id='qpatname'/></td> </tr>
					<tr class="align-middle"> <th>BirthDate</th> <th>:</th> <td><input class='form-control' type='date' id='qbirthdate'/></td> </tr>
					<tr class="align-middle"> 
						<th>Sex</th> <th>:</th> 
						<td>
							<select class='form-control' id='qsex'>
								<option value=''></option>
								<option value='F'>Female</option>
								<option value='M'>Male</option>
							</select>
						</td> 
					</tr>
					<tr class="align-middle"> <th>Address</th> <th>:</th> <td><textarea class='form-control' id='qaddress'></textarea></td> </tr>
					<tr class="align-middle"> <th>Phone</th> <th>:</th> <td><input class='form-control' type='text' id='qphone'/></td> </tr>
				</table>		
				<button class='btn btn-sm btn-success' onclick='save()'>Save</button>
				<button class='btn btn-sm btn-secondary' data-bs-dismiss="modal">Cancel</button>
			</div>
		</div>
	</div>
</div>
<?= $this->endSection() ?>

<?= $this->section('script') ?>
<script>
function search() {
	let url = '<?=base_url('');?>api/patients/search';
	patnumber = $('#search_patnumber').val();
	patname = $('#search_patname').val();
	let data = { patnumber:patnumber, patname:patname };
	$.ajax({
		url: url,
		method: 'POST',
		data: data,
		success: function(response) {
			$("#myTable").DataTable().destroy();
			$("#table-body").html("");
			var data = response['patients'];
			for (var i = 0; i < data.length; i++) {
				patid = data[i].PATID;
				patnumber = data[i].PATNUMBER;
				patname = data[i].PATNAME;
				sex = data[i].SEX;
				birthdate = data[i].BIRTHDATE;
				let editBtn =  '<button class="btn btn-sm btn-success" ' + ' onclick="edit(\'' + patid + '\')">Edit' + '</button> ';
				let datarow = '<tr class="align-middle">' + 
					'<td>' + patnumber + '</td>' + '<td>' + patname + '</td> <td>' + sex + '</td> <td>' + birthdate + '</td>' +
					'<td>' + editBtn + '</td>' + '</tr>';
				$("#table-body").append(datarow);
			}			
			$("#myTable").DataTable();
		},
		error: function(response) { console.log(response.responseJSON); }
	});
}

function create() {
	$("#qpatid").val('0');
	$("#qpatnumber").val();
	$("#qpatname").val("");
	$("#qsex").val("");
	$("#qbirthdate").val("");
	$("#qaddress").val(''); 
	$('#modal_patEditor').modal('show');
}

function edit(patid) {
	let url = '<?=base_url('');?>api/patients/detail/'+patid;
	$.ajax({
		url: url,
		method: "GET",
		success: function(response) {
			let data = response['patient'];
			$("#qpatid").val(patid);
			$("#qpatnumber").val(data.PATNUMBER);
			$("#qpatname").val(data.PATNAME);
			$("#qsex").val(data.SEX);
			$("#qbirthdate").val(data.BIRTHDATE);
			$("#qaddress").val(data.ADDRESS); 
			$("#qphone").val(data.PHONE); 
			$("#modal_patEditor").modal('show');
		},
		error: function(response) {
			alert(response.responseJSON.messages.errors);
		}
	});
}

function save() {
	patid = $("#qpatid").val();
	patnumber = $("#qpatnumber").val();
	patname = $("#qpatname").val();
	birthdate = $('#qbirthdate').val();
	sex = $('#qsex').val();
	address = $('#qaddress').val();
	phone = $('#qphone').val();	
	let data = { patid: patid, patnumber: patnumber, patname:patname, birthdate:birthdate, sex:sex, address:address, phone:phone };
	let url = '<?=base_url('');?>api/patients/save';
	$.ajax({
		url: url,
		method: "POST",
		data:data,
		success: function(response) {
			$("#modal_patEditor").modal('hide');
			$('#search_patnumber').val(patnumber);
			search();
		},
		error: function(response) {
			alert(response.responseJSON.messages.errors);
		}
	});
}

</script>
<?= $this->endSection() ?>