pbmc-cmod/app/Views/dashboard.php

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

<?= $this->section('content') ?>

<!--
<div class="d-flex justify-content-between p-0">
	<div class="custom-card">
		<div class="custom-card-content">
			<div class="row p-0 d-flex justify-content-between">
				<div class="col-3 text-start text-orange"> <h5 class="m-0"><i class="bi bi-clock-history"></i></h5> </div>
				<div class="col-9 text-end pe-3"> <h2 class="m-0 custom-card-title">345</h2> </div>
			</div>
			<hr class="text-orange">
			<h3 class="custom-card-text m-0 p-0 text-orange">Pending</h3>
		</div>
	</div>
	<div class="custom-card">
		<div class="custom-card-content">
			<div class="row p-0 d-flex justify-content-between">
				<div class="col-3 text-start text-peach"> <h5 class="m-0"><i class="bi bi-tv"></i></h5> </div>
				<div class="col-9 text-end pe-3"> <h2 class="m-0 custom-card-title">333</h2> </div>
			</div>
			<hr class="text-peach">
			<h3 class="custom-card-text m-0 p-0 text-peach">Part. Collect</h3>
		</div>
	</div>
	<div class="custom-card">
		<div class="custom-card-content">
			<div class="row p-0 d-flex justify-content-between">
				<div class="col-3 text-start text-pink"> <h5 class="m-0"><i class="bi bi-collection"></i></h5> </div>
				<div class="col-9 text-end pe-3"> <h2 class="m-0 custom-card-title">542</h2></div>
			</div>
			<hr class="text-pink">
			<h3 class="custom-card-text m-0 p-0 text-pink">Collected</h3>
		</div>
	</div>
	<div class="custom-card">
		<div class="custom-card-content">
			<div class="row p-0 d-flex justify-content-between">
				<div class="col-3 text-start text-soft-blue"> <h5 class="m-0"><i class="bi bi-file-medical"></i></h5> </div>
				<div class="col-9 text-end pe-3"> <h2 class="m-0 custom-card-title">436</h2> </div>
			</div>
			<hr class="text-soft-blue">
			<h3 class="custom-card-text m-0 p-0 text-soft-blue">Part. Rcv.</h3>
		</div>
	</div>
	<div class="custom-card">
		<div class="custom-card-content">
			<div class="row p-0 d-flex justify-content-between">
				<div class="col-3 text-start text-blue"> <h5 class="m-0"><i class="bi bi-journal-medical"></i></h5> </div>
				<div class="col-9 text-end pe-3"> <h2 class="m-0 custom-card-title">567</h2> </div>
			</div>
			<hr class="text-blue">
			<h3 class="custom-card-text m-0 p-0 text-blue">Received</h3>
		</div>
	</div>
	<div class="custom-card">
		<div class="custom-card-content">
			<div class="row p-0 d-flex justify-content-between">
				<div class="col-3 text-start text-grey"> <h5 class="m-0"><i class="bi bi-calendar3-week"></i></h5> </div>
				<div class="col-9 text-end pe-3"> <h2 class="m-0 custom-card-title">321</h2> </div>
			</div>
			<hr class="text-grey">
			<h3 class="custom-card-text m-0 p-0 text-grey">Inprocess</h3>
		</div>
	</div>
	<div class="custom-card">
		<div class="custom-card-content">
			<div class="row p-0 d-flex justify-content-between">
				<div class="col-3 text-start text-soft-green"> <h5 class="m-0"><i class="bi bi-check2"></i></h5> </div>
				<div class="col-9 text-end pe-3"> <h2 class="m-0 custom-card-title">432</h2> </div>
			</div>
			<hr class="text-soft-green">
			<h3 class="custom-card-text m-0 p-0 text-soft-green">Part. Val.</h3>
		</div>
	</div>
	<div class="custom-card">
		<div class="custom-card-content">
			<div class="row p-0 d-flex justify-content-between">
				<div class="col-3 text-start text-green"> <h5 class="m-0"><i class="bi bi-clipboard-check"></i></h5> </div>
				<div class="col-9 text-end pe-3"> <h2 class="m-0 custom-card-title">321</h2></div>
			</div>
			<hr class="text-green">
			<h3 class="custom-card-text m-0 p-0 text-green">Validated</h3>
		</div>
	</div>
</div>
-->

<div class="card border-0">
	<div class="card-body">
		<div class="table-responsive">
			<table id="myTable" class="table">
				<thead>
					<tr >
						<th>Order</th>
						<th>MR</th>
						<th>Patient</th>
						<th>Request</th>
						<th>Hosp</th>
						<th>Test</th>
						<th>Status</th>
					</tr>
				</thead>
				<tbody id="table-body">
				</tbody>
			</table>
		</div>
	</div>
</div>	

<div class="modal fade" id="modal" aria-hidden="true" tabindex="-1">
	<div class="modal-dialog modal-lg modal-dialog-centered modal-dialog-scrollable">
		<div class="modal-content">
		</div>
	</div>
</div>

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

<?= $this->section('script') ?>
<script>
var tb = $('#mytable').DataTable();
index();
function index() {
	let url = '<?=base_url('');?>api/dashboard/index';
	$.ajax({
		url: url,
		method: 'GET',
		success: function(response) {
			$("#table-body").html("");
			var data = response['data'];
			for (var i = 0; i < data.length; i++) {
				colldate = data[i].COLLECTIONDATE.substr(0,10);
				patnumber = data[i].PATNUMBER.substr(-16,16);
				accessnumber = data[i].SP_ACCESSNUMBER;
				patname = data[i].NAME;
				hon = data[i].HOSTORDERNUMBER;
				tests = data[i].TESTS;
				let datarow = '<tr class="align-middle">' + 
					'<td>' + colldate + '</td> <td>' + patnumber + '</td> <td>' + accessnumber + '</td> <td>' + patname + '</td> <td>' + hon + '</td> <td>' + tests + '</td>' + 
					"<td role='button' class='bg-orange text-center align-middle' onclick='viewAccess("+accessnumber+")'>Pending</td>"
					'</tr>';					
				$("#table-body").append(datarow);
			}
			tb.ajax.reload();
		},
		error: function(response) { console.log(response.responseJSON); }
	});
}

function viewAccess(access) {
	let url = '<?=base_url();?>dashboard/viewAccess/'+access;
	$('.modal-content').load(url, function(){
		$('#modal').modal('show');
	});
}

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