
<div class="page-header">
	<h3 class="page-title">
		<span class="page-title-icon bg-gradient-primary text-white mr-2">
			<i class="mdi mdi-account-convert"></i>
		</span>
		Payment Methods
	</h3>
	<nav aria-label="breadcrumb">
		<ul class="breadcrumb">
			<li class="breadcrumb-item active" aria-current="page">
				<span></span>Overview
				<i class="mdi mdi-alert-circle-outline icon-sm text-primary align-middle"></i>
			</li>
		</ul>
	</nav>
</div>

<div class="card shadow mb-3 p-1shadow border10">
	<div class="table-responsive">
		<table class="table" >
			<thead>
				<tr>
					<th><b>SL</b></th>
					<th><b>Method Name</b></th>
					<th><b>Method Number</b></th>
					<th><b>Training Fee</b></th>
				</tr>
			</thead>
			<tbody>

				<?php
					if ($methods)
					{
						foreach ($methods as $key=>$method)
						{
							?>
								<tr>
									<td><?= ($key+1) ?></td>
									<td id="method_name<?= $method->id?>"><?= $method->method_name?></td>
									<td>
										<input type="text" value="<?= $method->mobile?>" class="form-control valueChange mobile<?= $method->id ?>" data-id="<?= $method->id ?>" >
									</td>

									<td>
										<input type="text" value="<?= $method->join_fee?>"  data-id="<?= $method->id ?>" class="form-control valueChange fee<?= $method->id ?>">
									</td>
								</tr>
							<?php
						}
					}
				?>

			</tbody>
		</table>
	</div>
</div>

<script>
	$(document).ready(function () {
		$('#datatable').DataTable();
	});

	$(document).on("keyup",".valueChange",function () {
		var dataId = $(this).attr('data-id');
		var mobile = $(".mobile"+dataId).val();
		var fee = $(".fee"+dataId).val();

		if (mobile && fee){
			$.ajax({
				method:"post",
				url:"<?= base_url("PaymentSetup/updatePaymentMethod") ?>",
				data:{mobile:mobile,fee:fee,id:dataId},
				dataType:'json',
				success:function(res){
					console.log(res);
				}
			});
		}
	});


</script>
