<div class="main-content">
	<div class="content-wrapper">
		<div class="container-fluid">
		<?php if ($this->session->flashdata('success_msg')) : ?>
								<div class="alert alert-success">
									<a href="#" class="close" data-dismiss="alert" aria-label="close" title="close">×</a>
									<?php echo $this->session->flashdata('success_msg') ?>
								</div>
							<?php endif ?>
							<?php if ($this->session->flashdata('error_msg')) : ?>
								<div class="alert alert-danger">
									<a href="#" class="close" data-dismiss="alert" aria-label="close" title="close">×</a>
									<?php echo $this->session->flashdata('error_msg') ?>
								</div>
							<?php endif ?>
			<!-- Basic form layout section start -->
			<section id="basic-form-layouts">
			
			
				<!--<div class="row">
		<div class="col-sm-12">
			<h2 class="content-header">Driver Master</h2>
		</div>
	</div>-->
				<div class="row">
					<div class="col-md-12">
						<div class="card">
							<div class="card-header">
								<div class="page-title-wrap">
									<h4 class="card-title">Bond Setup</h4>

								</div>


								<!--<p class="mb-0">This is the most basic and cost estimation form is the default position.</p>-->
							</div>
							<div class="card-body">
								<div class="px-3">
								<form id="bond_setup_form" name="bond_setup_form" method="POST" action="<?=base_url()?>admin/settings/bond_submit">
										<div class="form-body">
											<!----->
											<div class="row">
												<div class="col-md-12">
													<div class="staff_tab_area">
														<!-- Tab panes -->
														
														<input type="hidden" id="bond_id" name="bond_id">
														<div class="tab-content">
															<div id="active_user" class="tab-pane active">
																<div class="tab_btn_area">
																	<div class="row">
																		<div class="col-sm-6">
																			<div class="form-group">
																				<select id="user_id" name="user_id" class="js-select2 " data-show-subtext="true" data-live-search="true">
																					<option value="">Select Driver</option>
																					<?php if (!empty($drivers)) { ?>
																						<?php foreach ($drivers as $driver) { ?>
																							<option value="<?= $driver['user_id']; ?>"><?= $driver['full_name'] . '-' . $driver['dc_no'] ?></option>
																						<?php }
																						} else { ?>
																						<option value="" selected disabled>No Driver Found</option>
																					<?php  } ?>
																				</select>
																			</div>
																		</div>
																	</div>
																</div>
																<div class="accident_form_area">
																	<div class="table-responsive custom_table_area">
																		<table class="table table-striped table-bordered c_table_style">
																			<tbody>
																				<tr>
																					<td>Total Bond Amount</td>
																					<td align="right"><input style=" text-align:right;" type="text" id="bond_amt" name="bond_amt" class="form-control"></td>
																				</tr>
																				<tr>
																					<td>Initial Amount Paid</td>
																					<td align="right"><input style=" text-align:right;" type="text" id="initial_amt_paid" class="form-control" name="initial_amt_paid"></td>
																				</tr>
																				<tr>
																					<td>Installment /Shift</td>
																					<td align="right"><input style=" text-align:right;" type="text"  id="installment_shift" name="installment_shift"  class="form-control"></td>
																				</tr>
																				<tr>
																					<td>Total Amount Paid</td>
																					<td align="right" id="total_amt_paid"></td>
																				</tr>
																				<tr>
																					<td>Total Amount Due</td>
																					<td align="right" id="total_amt_due"></td>
																				</tr>
																			</tbody>
																		</table>

																	</div>
																	<div class="row" style="text-align:center;">
																		<div class="col-sm-12">
																			<div class="form-actions">
																				<button type="button" class="btn btn-danger mr-1" onclick="window.location.reload();">
																					<i class="fa fa-times" aria-hidden="true"></i> Cancel
																				</button>
																				<button type="submit" class="btn btn-success">
																					<i class="fa fa-floppy-o" aria-hidden="true"></i> Submit
																				</button>
																			</div>
																		</div>
																	</div>
																</div>
															</div>
														</div>
													</div>
												</div>
											</div>
										</div>
									</form>
								</div>
							</div>
						</div>
					</div>
				</div>
			</section>
			<!-- // Basic form layout section end -->
		</div>
	</div>
</div>
<script>
	$(document).on('change','#user_id',function(){
		var user_id = $(this).val();
		$.ajax({
			type: "POST",
			url: '<?= base_url(); ?>admin/settings/get_bond_details_against_driver',
			data: {user_id: user_id},
			dataType: 'json',
			encode: true
		})
		.done(function(data) {
			
			if(data.status){
				$("#bond_id").val(data.bond_data.bond_id);
				$("#bond_amt").val(data.bond_data.bond_amt);
				$("#initial_amt_paid").val(data.bond_data.initial_amt_paid);
				$("#installment_shift").val(data.bond_data.installment_shift);
				var total_amt_paid = parseFloat(Number(data.bond_data.installment_amt_paid) + Number(data.bond_data.initial_amt_paid)).toFixed(2);
				var total_amt_due = parseFloat(Number(data.bond_data.bond_amt) - Number(total_amt_paid)).toFixed(2);
				$("#total_amt_paid").text(total_amt_paid);
				$("#total_amt_due").text(total_amt_due);
				
			}else{
				$.alert({
					title: 'Alert!',
					content: 'No Data Found',
				});
			}	
		
		})
		.fail(function(data) {
			$.alert({
				title: 'Alert!',
				content: 'Oops!something went wrong',
			});
		})
	})	
</script>