crm-summit/app/Views/areazone_edit.php

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

<?= $this->section('content') ?>
<?php
$data = $areas[0];
$areaid = $data['areaid'];
$areaname = $data['areaname'];
?>
<div class="form-body">
	<h3 class="card-jobtitle">Zone Editor</h3>
	<hr>
	<h4>Zone for <b><?=$areaname;?></b></h4>
	<?php 
	if(isset($validation)) {
	?>
		<div class='alert alert-danger alert-dismissible'>
			<?= $validation->listErrors(); ?>
			<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"> <span aria-hidden="true"></span> </button>
		</div>
	<?php
	}
	?>
	<form method='post'>	
		<input type='hidden' name='areaid' value='<?=$areaid;?>'/>
		<input id='areazoneid_delete' type='hidden' name='areazoneid_delete' value='' />
		<div class="table-responsive">
			<table id="myTable" class="table display table-striped table-sm border">			
				<thead>
					<th>Name</th> 
					<th><button class='btn btn-sm btn-info' type='button' onclick='newrow()'>+ Add</button></th>
				</thead>
				<tbody class='areazone_tbl'>
				<?php
				for($i=0; $i<count($areazone); $i++) {
					$zoneid = '';
					$zonename = '';
					if(isset($areazone[$i])) {
						$data = $areazone[$i];
						$areazoneid = $data['areazoneid'];
						$zonename = $data['zonename'];
					}
				?>
				<tr> 
					<td style='min-width:250px;'> <?=$zonename;?> </td> 
					<td><button type='button' class='btn btn-sm btn-warning' onclick='f_areazoneid_delete(this, <?=$areazoneid;?>)'>Delete</button>
				</tr>
				<?php } ?>
				</tbody>
			</table>
		</div>
		<button type="button" class="btn btn-dark float-start" onclick="window.close()">Cancel</button>
		<button type="submit" class="btn btn-success text-white float-end"> <i class="fa fa-check"></i> Submit</button>
	</form>
</div>
<?= $this->endSection() ?>

<?= $this->section('script') ?>
<script>
function f_areazoneid_delete(e, areazoneid) {
	if(confirm('Are you sure?')) {
		e.parentNode.parentNode.remove();
		var areazoneid = areazoneid.toString();
		var d = $('#areazoneid_delete');
		d.val(d.val()+' '+areazoneid);
		console.log(d.val());
	}
}

function newrow() {
	$.get("<?=base_url();?>/areazone/newrow", function(data) {
		$('.areazone_tbl').prepend(data);
		$('.select2').select2({
			theme: 'bootstrap-5',
			width: '100%'
		});
	})
}

$(function () {
	$('#myTable').DataTable({
		ordering : false,
		paging: false,
		info:false
	});
});

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