File: //var/www/html/qcr24/app/application/views/admin/odometer/edit.php
<style>
.error {
color: red;
}
</style>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.20/jquery.datetimepicker.min.css"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.3.4/jquery-confirm.min.css" integrity="sha512-0V10q+b1Iumz67sVDL8LPFZEEavo6H/nBSyghr7mm9JEQkOAm91HNoZQRvQdjennBb/oEuW+8oZHVpIKq+d25g==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.3.4/jquery-confirm.min.js" integrity="sha512-zP5W8791v1A6FToy+viyoyUUyjCzx+4K8XZCKzW28AnCoepPNIXecxh9mvGuy3Rt78OzEsU+VCvcObwAMvBAww==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.5/jquery.validate.min.js" integrity="sha512-rstIgDs0xPgmG6RX1Aba4KV5cWJbAMcvRCVmglpam9SoHZiUCyQVDdH2LPlxoHtrv17XWblE/V/PP+Tr04hbtA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<!-- ! Main -->
<main class="main users job-role-page" id="">
<div class="container">
<?php if ($this->session->flashdata('success_msg')) : ?>
<div class="alert alert-success">
<a href="javascript:void(0);" 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="javascript:void(0);" class="close" data-dismiss="alert" aria-label="close" title="close">×</a>
<?php echo $this->session->flashdata('error_msg') ?>
</div>
<?php endif ?>
<div class="row justify-content-between">
<div class="col-auto">
<h2 class="app-page-title mrg15B">Edit Odometer Reading</h2>
</div>
<div class="col-auto">
<div class="page-utilities">
<div class="row">
<div class="col-auto">
<a class="btn app-btn-primary" href="<?=base_url('admin/odometer')?>">
View All Odometer Report
</a>
</div>
</div>
</div>
</div>
</div>
<div class="row mrg15T">
<div class="col-lg-12">
<div class="white-block">
<form id="submit_odometer_form" class="row" method="post" action="<?php echo base_url('admin/odometer/submit_edit_odometer'); ?>" enctype="multipart/form-data" autocomplete="off">
<input type="hidden" id="odometer_id" name="odometer_id" value="<?=$odometer_details['odometer_id']?>">
<div class="col-lg-6 col-md-12">
<div class="form-group">
<label for="car_id" class="">Car No<span class="asterisk"> *</span></label>
<input type="hidden" name="car_id" value="<?=$odometer_details['car_id']?>">
<select class="form-control select2" id="car_id" style="width: 100%;" required disabled>
<option value="" selected="selected">Select Car </option>
<?php foreach($cars as $car) {?>
<option data-service_due_kilometer="<?=$car['service_due_kilometer']?>" data-total_odometer_reading="<?=$car['total_odometer_reading']?>" value="<?=$car['car_id']?>" <?=($car['car_id'] == $odometer_details['car_id'])?'selected':''?>><?= $car['car_no'].'|'.$car['make'].'|'.$car['model'] ?></option>
<?php } ?>
</select>
</div>
</div>
<div class="col-lg-6 col-md-12">
<div class="form-group">
<label for="" class="">Current Service Due KM. <span class="asterisk"> *</span></label>
<input type="text" id="service_due_kilometer" name="service_due_kilometer" class="form-control" placeholder="Service Due Km." required readonly>
</div>
</div>
<div class="col-lg-6 col-md-6">
<div class="form-group">
<label for="driver_id" class="">Driver <span class="asterisk"> *</span></label>
<input type="hidden" name="driver_id" value="<?= $odometer_details['driver_id'] ?>">
<input type="text" class="form-control" value="<?= $odometer_details['first_name'].' '.$odometer_details['middle_name'].' '.$odometer_details['last_name'] ?>" disabled>
<!-- <select class="form-control select2" id="driver_id" name="driver_id" style="width: 100%;" required>
<option value="" selected="selected">Select Driver </option>
</select> -->
</div>
</div>
<div class="col-lg-6 col-md-12">
<div class="form-group">
<label for="" class="">Mobile No.<span class="asterisk"> *</span></label>
<input type="text" id="mobile_no" name="mobile_no" class="form-control" placeholder="Enter Mobile No" value="<?= $odometer_details['mobile']?>" readonly>
<input type="hidden" id="rent_out_id" name="rent_out_id" value="<?= $odometer_details['rent_out_id']?>">
<input type="hidden" id="total_odometer_reading" name="total_odometer_reading" value="<?= $odometer_details['total_odometer_reading']?>">
</div>
</div>
<div class="col-md-12">
<hr>
<div class="row">
<div class="col-lg-6 col-md-12">
<div class="form-group">
<label for="" class="">Odometer Reading <span class="asterisk"> *</span></label>
<input type="text" id="odometer_reading" name="odometer_reading" class="form-control" placeholder="Odometer Reading" value="<?= $odometer_details['odometer_reading']?>" required>
</div>
</div>
<div class="col-lg-6 col-md-12">
<div class="form-group">
<label for="" class="">Updated Date <span class="asterisk"> *</span></label>
<div class="Datepicker_sec">
<input type="text" class="form-control" name="odometer_updated_date" required="required" id="odometer_updated_date" value="<?= date('d/m/Y',strtotime($odometer_details['odometer_update_date']))?>">
</div>
</div>
</div>
<div class="col-lg-4 col-md-12">
<div class="form-group">
<label for="" class="">Photo 1</label>
<input type="file" id="odometer_image_1" name="odometer_image_1" class="form-control" placeholder="">
</div>
</div>
<div class="col-lg-2 col-md-12 ">
<div class="form-group">
<?php if( $odometer_details['odometer_image_1']){?>
<a href="<?= base_url() . 'public/admin_images/odometer/odometer_image_1/' . $odometer_details['odometer_image_1'] ?>" data-lightbox="<?=$odometer_details['odometer_image_1']?>"><img src="<?= base_url() . 'public/admin_images/odometer/odometer_image_1/' . $odometer_details['odometer_image_1'] ?>" width="100%" alt="Empty!" style="margin-top:21px"></a>
<?php } ?>
</div>
</div>
<div class="col-lg-4 col-md-12">
<div class="form-group">
<label for="" class="">Photo 2</label>
<input type="file" id="odometer_image_2" name="odometer_image_2" class="form-control" placeholder="">
</div>
</div>
<div class="col-lg-2 col-md-12 ">
<div class="form-group">
<?php if( $odometer_details['odometer_image_1']){?>
<a href="<?= base_url() . 'public/admin_images/odometer/odometer_image_2/' . $odometer_details['odometer_image_2'] ?>" data-lightbox="<?=$odometer_details['odometer_image_2']?>"><img src="<?= base_url() . 'public/admin_images/odometer/odometer_image_2/' . $odometer_details['odometer_image_2'] ?>" width="100%" alt="Empty!" style="margin-top:21px"></a>
<?php } ?>
</div>
</div>
</div>
<hr>
</div>
<div class="col-md-12">
<div class="form-group">
<button type="submit" class="btn btn-primary mrg15R">SUBMIT</button>
<a class="btn btn-danger" href="<?=base_url('admin/odometer')?>">CANCEL</a>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</main>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.20/jquery.datetimepicker.full.min.js"></script>
<script>
$(function() {
//Initialize Select2 Elements
$('.select2').select2()
var car_id = "<?=$odometer_details['car_id']?>";
if(car_id){
$("#car_id").trigger('change');
}
})
</script>
<script>
$(document).ready(function() {
$("#odometer_updated_date").datepicker({
dateFormat: 'dd/mm/yy',
changeMonth: true,
changeYear: true,
minDate: new Date()
})
});
$("#car_id").change(function(){
$("#service_due_kilometer").val($(this).find('option:selected').data('service_due_kilometer'));
$("#total_odometer_reading").val($(this).find('option:selected').data('total_odometer_reading'));
$("#odometer_reading").val($(this).find('option:selected').data('total_odometer_reading'));
calculate_current_service_due_kilometer();
//get_rent_out_drivers();
})
$("#odometer_reading").keyup(function(){
calculate_current_service_due_kilometer();
})
function calculate_current_service_due_kilometer() {
var service_due_kilometer = $("#car_id").find('option:selected').data('service_due_kilometer');
var total_odometer_reading = $("#total_odometer_reading").val();
var odometer_reading = $("#odometer_reading").val();
var current_service_due_kilometer = service_due_kilometer - (odometer_reading - total_odometer_reading);
$("#service_due_kilometer").val(current_service_due_kilometer);
}
// function get_rent_out_drivers(){
// var car_id = $("#car_id").val();
// var resultHTML = '<option value="" selected="selected">Select Driver </option>';
// if(car_id){
// $.ajax({
// url: '<?php echo base_url("admin/odometer/getRentOutDriver"); ?>',
// method: 'post',
// data: {
// 'car_id': car_id
// },
// dataType: 'json',
// success: function(response) {
// if (response.rent_out_driver_data.length > 0) {
// $.each(response.rent_out_driver_data,function(key,value){
// resultHTML+='<option data-rent_out_id="'+value.rent_out_id+'" data-mobile_no="'+value.mobile+'" value="'+value.driver_id+'">'+value.first_name+' '+value.last_name+'</option>';
// })
// } else {
// $.alert({
// title: 'Alert!',
// content: 'No Car Details Found',
// type: 'red',
// typeAnimated: true,
// })
// }
// $("#driver_id").html(resultHTML);
// }
// })
// } else {
// $.alert({
// title: 'Alert!',
// content: 'Please select car',
// type: 'red',
// typeAnimated: true,
// })
// }
// }
$("#driver_id").change(function(){
$("#mobile_no").val($(this).find('option:selected').data('mobile_no'));
$("#rent_out_id").val($(this).find('option:selected').data('rent_out_id'));
})
$(".allow_decimal").on("input", function(evt) {
var self = $(this);
self.val(self.val().replace(/[^0-9\.]/g, ''));
if ((evt.which != 46 || self.val().indexOf('.') != -1) && (evt.which < 48 || evt.which > 57))
{
evt.preventDefault();
}
});
$('#submit_odometer_form').validate({
errorPlacement: function(error, element) {
if (element.attr("type") == "checkbox") {
$(element).parents('.form-group').append(error);
} else {
$(element).parents('.form-group').append(error);
}
},
submitHandler: function(form) {
form.submit();
// var odometer_reading = $("#odometer_reading").val();
// var total_odometer_reading = $("#total_odometer_reading").val();
// if(Number(total_odometer_reading) > Number(odometer_reading)){
// $.alert({
// title: 'Alert!',
// content: 'Odometer reading should be greater than total odometer reading',
// type: 'red',
// typeAnimated: true,
// })
// return false;
// }
// else {
// form.submit();
// }
}
})
// $("#accident_submit_btn").click(function(e){
// e.preventDefault();
// var car_id = $("#car_id").val();
// if(!car_id){
// $.alert({
// title: 'Alert!',
// content: 'No Car Details Found',
// type: 'red',
// typeAnimated: true,
// })
// } else {
// $("#submit_add_accident_form").submit();
// }
// })
</script>