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

<?= $this->section('content') ?>
<style>
tr { cursor: pointer; }
</style>

<div class="row d-flex justify-content-evenly">
	<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">99999</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">44444</h2>
				</div>
			</div>
			<hr class="text-peach">
			<h3 class="custom-card-text m-0 p-0 text-peach">Partial 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">55422</h2>
				</div>
			</div>
			<hr class="text-pink">
			<h3 class="custom-card-text m-0 p-0 text-pink">Full 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-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">34422</h2>
				</div>
			</div>
			<hr class="text-soft-blue">
			<h3 class="custom-card-text m-0 p-0 text-soft-blue">Partial Receive</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">28922</h2>
				</div>
			</div>
			<hr class="text-blue">
			<h3 class="custom-card-text m-0 p-0 text-blue">Full Receive</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">12345</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">52341</h2>
				</div>
			</div>
			<hr class="text-soft-green">
			<h3 class="custom-card-text m-0 p-0 text-soft-green">Partial 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">45678</h2>
				</div>
			</div>
			<hr class="text-green">
			<h3 class="custom-card-text m-0 p-0 text-green">Complete Val</h3>
		</div>
	</div>
</div>

<div class="card border-0">
	<div class="body-card">
		<div class="table-responsive">
			<table id="tabel_aneh" class="table">
				<thead>
					<tr >
						<th>Order</th>
						<th>MR</th>
						<th>Patient</th>
						<th>Request</th>
						<th>Hosp</th>
						<th>Loc</th>
						<th>Doc</th>
						<th>Test</th>
						<th>Status</th>
					</tr>
				</thead>
				<tbody>
					<tr class="table-row" data-bs-toggle="modal" data-bs-target="#modal1">
						<td class="text-start">2024-10-12 23:37</td>
						<td class="text-start">AJI909S</td>
						<td class="text-start">Zakiya Miksha</td>
						<td class="text-start">1232233112</td>
						<td class="text-start">2211212121</td>
						<td class="text-start">R09</td>
						<td class="text-start">312</td>
						<td class="text-start">Complete Blood Count (CBC): Hemoglobin (Hb), Hematocrit (Hct), Red Blood Cells (RBC), White Blood Cells (WBC), Platelet Count, Mean Corpuscular Volume (MCV), Mean Corpuscular Hemoglobin (MCH), Mean Corpuscular Hemoglobin Concentration (MCHC)</td>
						<td class="bg-orange text-center align-middle">Pending</td>
					</tr>
					
					<tr class="table-row" data-bs-toggle="modal" data-bs-target="#modal2">
						<td class="text-start">2024-10-12 23:37</td>
						<td class="text-start">AJI909S</td>
						<td class="text-start">Zakiya Miksha</td>
						<td class="text-start">1232233112</td>
						<td class="text-start">2211212121</td>
						<td class="text-start">R09</td>
						<td class="text-start">312</td>
						<td class="text-start">Complete Blood Count (CBC): Hemoglobin (Hb), Hematocrit (Hct), Red Blood Cells (RBC), White Blood Cells (WBC), Platelet Count, Mean Corpuscular Volume (MCV), Mean Corpuscular Hemoglobin (MCH), Mean Corpuscular Hemoglobin Concentration (MCHC)</td>
						<td class="bg-peach text-center align-middle">Partial Collect</td>
					</tr>

					<tr class="table-row" data-bs-toggle="modal" data-bs-target="#modal3">
						<td class="text-start">2024-10-12 23:37</td>
						<td class="text-start">AJI909S</td>
						<td class="text-start">Zakiya Miksha</td>
						<td class="text-start">1232233112</td>
						<td class="text-start">2211212121</td>
						<td class="text-start">R09</td>
						<td class="text-start">312</td>
						<td class="text-start">Complete Blood Count (CBC): Hemoglobin (Hb), Hematocrit (Hct), Red Blood Cells (RBC), White Blood Cells (WBC), Platelet Count, Mean Corpuscular Volume (MCV), Mean Corpuscular Hemoglobin (MCH), Mean Corpuscular Hemoglobin Concentration (MCHC)</td>
						<td class="bg-pink text-center align-middle">Full Collect</td>
					</tr>

					<tr class="table-row" data-bs-toggle="modal" data-bs-target="#modal4">
						<td class="text-start">2024-10-12 23:37</td>
						<td class="text-start">AJI909S</td>
						<td class="text-start">Zakiya Miksha</td>
						<td class="text-start">1232233112</td>
						<td class="text-start">2211212121</td>
						<td class="text-start">R09</td>
						<td class="text-start">312</td>
						<td class="text-start">Complete Blood Count (CBC): Hemoglobin (Hb), Hematocrit (Hct), Red Blood Cells (RBC), White Blood Cells (WBC), Platelet Count, Mean Corpuscular Volume (MCV), Mean Corpuscular Hemoglobin (MCH), Mean Corpuscular Hemoglobin Concentration (MCHC)</td>
						<td class="bg-soft-blue text-center align-middle">Partial Receive</td>
					</tr>

					<tr class="table-row" data-bs-toggle="modal" data-bs-target="#modal5">
						<td class="text-start">2024-10-12 23:37</td>
						<td class="text-start">AJI909S</td>
						<td class="text-start">Zakiya Miksha</td>
						<td class="text-start">1232233112</td>
						<td class="text-start">2211212121</td>
						<td class="text-start">R09</td>
						<td class="text-start">312</td>
						<td class="text-start">Complete Blood Count (CBC): Hemoglobin (Hb), Hematocrit (Hct), Red Blood Cells (RBC), White Blood Cells (WBC), Platelet Count, Mean Corpuscular Volume (MCV), Mean Corpuscular Hemoglobin (MCH), Mean Corpuscular Hemoglobin Concentration (MCHC)</td>
						<td class="bg-blue text-center align-middle">Full Receive</td>
					</tr>

					<tr class="table-row" data-bs-toggle="modal" data-bs-target="#modal6">
						<td class="text-start">2024-10-12 23:37</td>
						<td class="text-start">AJI909S</td>
						<td class="text-start">Zakiya Miksha</td>
						<td class="text-start">1232233112</td>
						<td class="text-start">2211212121</td>
						<td class="text-start">R09</td>
						<td class="text-start">312</td>
						<td class="text-start">Complete Blood Count (CBC): Hemoglobin (Hb), Hematocrit (Hct), Red Blood Cells (RBC), White Blood Cells (WBC), Platelet Count, Mean Corpuscular Volume (MCV), Mean Corpuscular Hemoglobin (MCH), Mean Corpuscular Hemoglobin Concentration (MCHC)</td>
						<td class="bg-grey text-center align-middle">Inprocess</td>
					</tr>
					<tr class="table-row" data-bs-toggle="modal" data-bs-target="#modal7">
						<td class="text-start">2024-10-12 23:37</td>
						<td class="text-start">AJI909S</td>
						<td class="text-start">Zakiya Miksha</td>
						<td class="text-start">1232233112</td>
						<td class="text-start">2211212121</td>
						<td class="text-start">R09</td>
						<td class="text-start">312</td>
						<td class="text-start">Complete Blood Count (CBC): Hemoglobin (Hb), Hematocrit (Hct), Red Blood Cells (RBC), White Blood Cells (WBC), Platelet Count, Mean Corpuscular Volume (MCV), Mean Corpuscular Hemoglobin (MCH), Mean Corpuscular Hemoglobin Concentration (MCHC)</td>
						<td class="bg-soft-green text-center align-middle">Partial Validation</td>
					</tr>
					<tr class="table-row" data-bs-toggle="modal" data-bs-target="#modal8">
						<td class="text-start">2024-10-12 23:37</td>
						<td class="text-start">AJI909S</td>
						<td class="text-start">Zakiya Miksha</td>
						<td class="text-start">1232233112</td>
						<td class="text-start">2211212121</td>
						<td class="text-start">R09</td>
						<td class="text-start">312</td>
						<td class="text-start">Complete Blood Count (CBC): Hemoglobin (Hb), Hematocrit (Hct), Red Blood Cells (RBC), White Blood Cells (WBC), Platelet Count, Mean Corpuscular Volume (MCV), Mean Corpuscular Hemoglobin (MCH), Mean Corpuscular Hemoglobin Concentration (MCHC)</td>
						<td class="bg-green text-center align-middle">Complete Validation</td>
					</tr>
				   
				</tbody>
			</table>
		</div>
	</div>
</div>	
	
<?= $this->endSection() ?>

<?= $this->section('script') ?>
<script>
	$(document).ready(function() {
		$('#tabel_aneh').DataTable({
			order: [] // Menonaktifkan pengurutan saat awal
		});
	});
</script>
<?= $this->endSection() ?>