pbmc-cmod/app/Views/orders_index.php

<?= $this->extend($_SESSION['userrole'].'/layout/main.php') ?>

<?= $this->section('content') ?>
<div id="alert">
	
</div>
<div class="card border-0">
	<div class="card-body">
		<div class='card-title'>Order List</div>
			<p>
				<b>Date</b> &nbsp; <input class='date1' type='date' value=''> - <input class='date2' type='date'> <button class='btn btn-sm btn-primary' onclick='index()'><i class="bi bi-calendar2-event"></i>&nbsp;Filter</button> 
			</p>
			<p> <button class='btn btn-sm btn-success' onclick='create()'><i class="bi bi-plus-circle"></i>&nbsp;New Order</button> </p>
			
		
		<div class="table-responsive">
			<table id="myTable" class="table">
				<thead>
					<th>VisitDate</th>
					<th>Loc.</th>
					<th>Visit#</th>
					<th>MR#</th>
					<th>Patient Name</th>
					<th>Payer Name</th>
					<th>Test</th>
					<th>Action</th>
				</thead>
				<tbody id="table-body">
				</tbody>
			</table>
		</div>
	</div>
</div>	

<div class="modal fade" id="modal_orderdetail" 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>
let curDate = new Date().toJSON().slice(0, 10);
$('.date1').val(curDate);
$('.date2').val(curDate);
index();

function index() {
	let url = '<?=base_url('');?>api/orders/index';
	date1 = $('.date1').val();
	date2 = $('.date2').val();
	$.ajax({
		url: url,
		method: 'POST',
		data : {date1:date1, date2:date2},
		success: function(response) {
			$("#myTable").DataTable().destroy();
			$("#table-body").html("");
			var data = response['data'];
			for (var i = 0; i < data.length; i++) {
				orderid = data[i].ORDERID;
				loc = data[i].LOC;
				visitdate = data[i].VISITDATE;
				visitnumber = data[i].VISITNUMBER;
				patnumber = data[i].PATNUMBER;
				patname = data[i].PATNAME;
				payername = data[i].PAYERNAME;
				tests = data[i].TESTS;
				editBtn = '<button class="btn btn-sm btn-warning" onclick="edit(\''+ orderid +'\')"><i class="bi bi-pencil"></i> edit</button>';
				resendBtn = '<button class="btn btn-sm btn-primary" onclick="resend(\''+ visitnumber +'\')"><i class="bi bi-send"></i> resend</button>';
				let datarow = '<tr class="align-middle">' + 
					'<td>' + visitdate + '</td> <td>' + loc + '</td> <td>' + visitnumber + '</td> <td>' + patnumber + '</td> <td>' + patname +
					'</td> <td>' + payername + '</td> <td>' + tests + '</td> ' +
					'<td>' + resendBtn + '  ' + editBtn + '</td>' +
					'</tr>';
				$("#table-body").append(datarow);
			}
			// $('#myTable').DataTable();
			$('#myTable').DataTable({
				"pageLength": 25, // Ganti sesuai kebutuhan
				"lengthMenu": [25, 50, 100] // Pilihan dropdown entries per halaman
    		});
		},
		error: function(response) { console.log(response.responseJSON); }
	});
}

function create() {
	window.open("<?php echo base_url();echo $_SESSION['userrole']?>/orders/create", 
		'_blank', "width=1200,height=700,location=no,toolbar=no,menubar=no"
	);
}

function edit(orderid) {
	window.open("<?php echo base_url();echo $_SESSION['userrole']?>/orders/edit/"+orderid, 
		'_blank', "width=1200,height=700,location=no,toolbar=no,menubar=no"
	);
}

function resend(visitnumber) {
	let url = '<?=base_url('');?>api/orders/resend/'+visitnumber;
	$.ajax({
		url: url,
		method: 'GET',
		success: function(response) { 
			alert = '<div class="alert alert-primary alert-dismissible fade show" role="alert">' +
				'Re-send '+visitnumber+' success.' +
				'<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>'+
				'</div>';
			$('#alert').html(alert);
		},
		error: function(response) { console.log(response.responseJSON); }
	});
}
</script>
<?= $this->endSection() ?>