<div class='form-group col'>
	<label for="consumables" class="form-label border-start border-5 border-primary ps-1">Consumables</label>
	<style> th { text-align:center; } </style>
	<input id='actconid_delete' type='hidden' name='actconid_delete' value='' />
	<div class='table-responsive'>
		<table class='table table-bordered table-sm mb-0' id='actcon_table'>
			<thead>
				<tr> 
					<th style='width:30%; font-size:0.76563rem;'>Consumables</th> 
					<th style='width:10%; font-size:0.76563rem;'>Lot#.</th> 
					<th style='width:5%; font-size:0.76563rem;'></th> 
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>
						<select class='form-control form-select-sm select2 actcon_catalogid' >
							<option value=''>-</option>
							<?php
							foreach($consumables as $data) {
								$qvendorname = $data['vendorname'];
								$qcatalogid = $data['catalogid'];
								$qcatalognumber = $data['catalognumber'];
								$qproductname = $data['productname'];
								$qname = "$qcatalognumber - [ $qvendorname ] $qproductname";
								$qnames[$qcatalogid] = $qname;
								echo "<option value='$qcatalogid'>$qname</option>";
							}
							?>
						</select>
					</td>
					<td><input type='text' class='form-control form-control-sm actcon_lotnumber' /></td>
					<td class='text-center'> <button type='button' class='btn btn-sm btn-success' onclick='actcon_saveRow();'>Add</button> </td>
				</tr>
				<?php
				if(isset($actcons)) {
					foreach($actcons as $data) {
						$actconid = $data['actconid'];
						$qname = $qnames[$data['catalogid']];
						$qlotnumber = $data['lotnumber'];
						echo "<tr> <td>$qname</td> <td>$qlotnumber</td> ".
							"<td class='text-center'> <button type='button' class='btn btn-sm btn-warning' onclick='actcon_deleteRow(this, $actconid)'>delete</button> </td>".
							"</tr>";
					}
				}
				?>
			</tbody>
		</table>
	</div>
</div>
<script>
function actcon_deleteRow(btn, actconid) {
	if(confirm('Are you sure?')) {
		var row = btn.parentNode.parentNode;
		row.parentNode.removeChild(row);
		//console.log(actconid);
		//var actconid = actconid.toString();
		var d = $('#actconid_delete');
		d.val(d.val()+' '+actconid);
		console.log(d.val()+' '+actconid);
	}
}

function actcon_saveRow() {
	var catalogid = $('.actcon_catalogid').val();
	var productname = $('.actcon_catalogid option:selected').text();
	var lotnumber = $('.actcon_lotnumber').val();
	var newRow = "<tr> <input type='hidden' name='catalogid[]' value='"+catalogid+"' /> <input type='hidden' name='lotnumber[]' value='"+lotnumber+"' />"+
		" <td>"+productname+"</td> <td>"+lotnumber+"</td>"+
		" <td class='text-center'> <button type='button' class='btn btn-sm btn-warning' onclick='actcon_deleteRow(this, 0)'>delete</button> </td> </tr>";
	$("#actcon_table").append(newRow);
	$('.actcon_catalogid').val('');
	$('.actcon_lotnumber').val('');
	$('.select2').select2({
		theme: 'bootstrap-5',
		width: '100%'
	});
}
</script>