pbmc-cmod/app/Views/dashboard_viewAccess.php

<?php
if(isset($data[0])) {
$row = $data[0];
$patnumber = $row['PATNUMBER'];
$host = $row['HOSTORDERNUMBER'];
$name = $row['NAME'];
?>
<style>
span.badge { cursor:pointer; }
</style>
<div class="modal-header bg-orange">
	<h1 class="modal-title fs-5" id="exampleModalToggleLabel">Detail Request </h1>
	<button type="button" class="btn-close" data-bs-dismiss="modal" ></button>
</div>
<div class="modal-body" style='background-color:#F4F6FF'>
	<div class="row">
		<div class="col-6">
			<table class="table table-sm table-borderless">
				<tr> <th>Pat#</th> <th>:</th> <td><?=$patnumber;?></td> </tr>
				<tr> <th>Nama</th> <th>:</th> <td><?=$name;?></td> </tr>
			</table>
		</div>
		<div class="col-6">
			<table class="table table-sm table-borderless">
				<tr> <th>Access#</th> <th>:</th> <td><?=$accessnumber;?></td> </tr>
				<tr> <th>Status</th> <th>:</th> <td><span class="badge bg-orange">Pending</span></td> </tr>
			</table>
		</div>
	</div>
	<div class='row'>
		<div class="col-12">
			<div class="card bg-white">
				<div class="card-body">
					<div class="card-title"><h3>Sample List</h3></div>
					<table class='table'>
						<tr> <th class='text-center'>Coll.</th> <th class='text-center'>Recv.</th> <th>Sample Name</th> <th>Action</th> <th>Comment</th>  </tr>
					<?php
					foreach($data as $row) {
						$sampletype = $row['SAMPLETYPE'];
						$sampletext = $row['SHORTTEXT'];
						$tubestatus = $row['TUBESTATUS'];
						$collstatus = $row['COLLSTATUS'];
						$comment = $row['TUBECOMMENT'];
						echo "\r\n	<tr>";
						if($collstatus==1) { 
							echo " <td class='text-center'><input type='checkbox' class='form-check-input' id='coll$sampletype' checked disabled></td>"; 
						} else { 
							echo " <td class='text-center'><input type='checkbox' class='form-check-input' id='coll$sampletype' disabled></td>"; 
						}
						if($tubestatus==4) { 
							echo "<td class='text-center'><input type='checkbox' class='form-check-input' id='recv$sampletype' checked disabled></td>"; 
						} else { 
							echo "<td class='text-center'><input type='checkbox' class='form-check-input' id='recv$sampletype' disabled></td>"; 
						}
						echo "<td>$sampletext</td>"; 
						echo "<td> 
								<span class='badge text-bg-dark'><i class='bi bi-printer'></i></span>
								<span class='badge text-bg-success' onclick='collect($sampletype, $accessnumber)'>Coll.</span>
								<span class='badge text-bg-warning' onclick='uncollect($sampletype, $accessnumber)'>Un-Coll.</span> 
								<span class='badge text-bg-primary' onclick='unreceive($sampletype, $accessnumber)'>Un-Rec.</span> 
							</td> ";
						echo "<td id='comment$sampletype'>$comment <i class='bi bi-pencil-square' role='button' onclick='comment($sampletype, $accessnumber, \"$sampletext\", \"$comment\")'></i></td>";
						echo " </tr>";
					}
					?>
						<tr> 
							<td></td> <td></td> <td>Collection</td> 
							<td> <span class='badge badge-dark'><i class='bi bi-printer'></i></span> </td>
						</tr>
						<tr> 
							<td></td> <td></td> <td>All</td> 
							<td>
								<span class='badge text-bg-dark'><i class='bi bi-printer'></i></span> 
								<span class='badge text-bg-success' onclick='collectAll(<?=$accessnumber;?>)'>Coll.</span> 
								<!-- <span class='badge bg-black text-white' onclick='uncollectAll(<?=$accessnumber;?>)'>un-collect</span> -->
								<span class='badge text-bg-primary' onclick='unreceiveAll(<?=$accessnumber;?>)'>Un-Rec.</span> 
							</td>
						</tr>
					</table>
				</div>
			</div>
		</div>
	</div>
</div>
<script>
function collect(sample, access) {
	sample = sample.toString().padStart(3,'0');
	const url = '<?=base_url();?>tubes/collect/'+access+'/'+sample;
	fetch(url)
		.then(data => { 
			//console.log(data);
			//$("#coll"+sample).prop("checked", true);
			viewAccess(access);
		})
		.catch(error => { console.error('Error:',error); });
}

function collectAll(access) {
	const url = '<?=base_url();?>tubes/collectAll/'+access;
	fetch(url)
		.then(data => { 
			//console.log(data);
			//$('input[id^="coll"]').prop('checked', true);
			viewAccess(access);
		})
		.catch(error => { console.error('Error:',error); });
	
}

function uncollect(sample, access) {
	sample = sample.toString().padStart(3,'0');
	const url = '<?=base_url();?>tubes/uncollect/'+access+'/'+sample;
	fetch(url)
		.then(data => { 
			//console.log(data);
			//$("#coll"+sample).prop("checked", false);
			viewAccess(access);
		})
		.catch(error => { console.error('Error:',error); });
	
}

function uncollectAll(access) {
	const url = '<?=base_url();?>tubes/uncollectAll/'+access;
	fetch(url)
		.then(data => { 
			//console.log(data);
			//$('input[id^="coll"]').prop('checked', false);
			viewAccess(access);
		})
		.catch(error => { console.error('Error:',error); });
}

function unreceive(sample, access) {
	sample = sample.toString().padStart(3,'0');
	const url = '<?=base_url();?>tubes/unreceive/'+access+'/'+sample;
	fetch(url)
		.then(data => { 
			//console.log(data);
			//$("#recv"+sample).prop("checked", false);
			viewAccess(access);
		})
		.catch(error => { console.error('Error:',error); });
	
}

function unreceiveAll(access) {
	const url = '<?=base_url();?>tubes/unreceiveAll/'+access;
	fetch(url)
		.then(data => { 
			//console.log(data);
			//$('input[id^="recv"]').prop('checked', false);
			viewAccess(access);
		})
		.catch(error => { console.error('Error:',error); });
}

function comment(sample, access, sampletext, comments) {
	const url = '<?=base_url();?>tubes/comment/'+access+'/'+sample;
	let comment = prompt('Comment for sample '+sampletext, comments);	
	//$('#comment'+sample).html(comment +"<i class='bi bi-pencil-square' onclick='comment("+ sample +", "+ access +', "'+sampletext+'", "'+comment+'")\'></i>'); 
	fetch(url, {
		method: "POST",
		body: JSON.stringify({ comment : comment }),
		headers: { "Content-type": "application/json; charset=UTF-8" }
	}).then(data => { 
		//console.log(data);
		viewAccess(access);
	})
	.catch(error => { console.error('Error:',error); });
}
</script>
<?php
} else {
?>
<div class="modal-header bg-black text-white">
	<h1 class="modal-title fs-5" id="exampleModalToggleLabel">Detail Request </h1>
	<button type="button" class="btn-close" data-bs-dismiss="modal" ></button>
</div>
<div class="modal-body">
	<h3>Data not found</h3>
</div>
<?php	
}
?>