<style type="text/css">
.error{
color: red;
font-size:13px;
}
.book-form-area .form-control {
background: #fff !important;
}
.subject_lformarea .form-control {
background: #fff !important;
}
span.caret {
display: none;
}
</style>
<link rel="stylesheet" type="text/css" href="<?php echo base_url();?>assets-bustracking/css/style-drivers.css">
<main class="common_margin" id="main">
<div class="row dash-main-row">
<div class="col-md-10 col-lg-10 p-0">
<a href="<?php echo base_url()?>routes">
<button class="btn btn-dark btn-sm">Back</button>
</a>
<div class="block-head">
<h3 class="dash-tab-head"><?php echo $title; ?></h3>
</div>
<?php $bus_id=$route_id=$route_name=$driver_id=$stops=$working_id=$p_start=$d_start='';
if (isset($detailsHere) && !empty($detailsHere)) {
foreach($detailsHere as $k => $v){
$route_id = $v['id'];
$route_name = $v['route_name'];
$driver_id = $v['driver_id'];
$bus_id = $v['bus_id'];
$stops = $v['stops'];
$working_id = explode(",", $v['working_id']);
$p_start = $v['pickup_start'];
$d_start = $v['drop_start'];
}
}
?>
<form method="post" id="add_route" accept="<?php echo base_url()?>add-edit-route">
<input type="hidden" name="route_id" value="<?= $route_id ?>">
<div class="subject_lformarea book-form-area" style="width: 80%;">
<div class="form-group">
<label for="">Route name<span class="text-danger font-weight-bold">*</span></label>
<input type="text" name="name" placeholder="Route name" class="form-control add-drivers-input driverSelect" value="<?php echo $route_name; ?>">
</div>
<div class="form-group" id="no_stops">
</div>
<div class="form-group">
<label for="">Select Bus<span class="text-danger font-weight-bold">*</span></label>
<select id="busState" class="form-control driverSelect" name="bus">
<option value="" selected>Select Bus </option>
<?php if (isset($bus_data) && !empty($bus_data)) {
foreach ($bus_data as $key => $value) {
if ($bus_id == $value['id']) {?>
<option value="<?php echo $value['id'] ?>" selected><?php echo $value['bus_brand'] ?></option>
<?php }else{
?>
<option value="<?php echo $value['id'] ?>"><?php echo $value['bus_brand'] ?></option>
<?php } }
} ?>
</select>
</div>
<div class="form-group">
<label for="">Select Driver<span class="text-danger font-weight-bold">*</span></label>
<select id="driverState" name="driver" class="form-control driverSelect">
<option value="" selected>Select Driver </option>
<?php if (isset($driver_data) && !empty($driver_data)) {
foreach ($driver_data as $key => $value) {
if ($driver_id == $value['id']) { ?>
<option value="<?php echo $value['id'] ?>" selected><?php echo $value['name'] ?></option>
<?php }else{ ?>
<option value="<?php echo $value['id'] ?>"><?php echo $value['name'] ?></option>
<?php } }
} ?>
</select>
</div>
<div class="form-group">
<div class="route-times">
<div class="times-pickup">
<label for="">Pickup Start time<span class="text-danger font-weight-bold">*</span></label>
<input type="time" name="pictime" id="pictime" class="form-control add-drivers-input" value="<?php echo $p_start? $p_start : '00:00'; ?>">
</div>
<div class="times-drop">
<label for="">Drop Start time<span class="text-danger font-weight-bold">*</span></label>
<input type="time" name="droptime" id="droptime" class="form-control add-drivers-input" value="<?php echo $d_start? $d_start : '00:00'; ?>">
</div>
</div>
</div>
<div class="form-group">
<label for="">Select Working Days<span class="text-danger font-weight-bold">*</span></label>
<select id="workingState" class="form-control selectpicker" name="working_day[]" multiple data-live-search="true">
<?php foreach ($weekDays as $key => $value) {
if ($working_id) {
?>
<option value="<?php echo $key; ?>" <?php if (in_array($key, $working_id)) { ?>selected<?php } ?>>
<?php echo $value; ?>
</option>
<?php } else{ ?>
<option value="<?php echo $key; ?>">
<?php echo $value; ?>
</option>
<?php } } ?>
</select>
</div>
</div>
<div class="row">
<div class="col-md-10 col-lg-10">
<div class="route-details">
<div class="route-arows">
<div class="arrow_dots_withrrowtp">
<img class="arrow-img" src="<?php echo base_url();?>assets-bustracking/images/dashboard/arrow.svg" alt="">
</div>
<div class="arrow_dots">
</div>
<div class="arrow_dots_witharrow">
<img src="<?php echo base_url();?>assets-bustracking/images/dashboard/circle.svg" alt="">
</div>
</div>
<div class="routes-display">
<?php if (isset($detailsHere) && !empty($detailsHere)) {
$i=1;
foreach ($detailsHere as $key => $value) { ?>
<div class="route-single-line" id="<?php echo $i; ?>">
<input type="hidden" name="ro_det_id[<?php echo $i; ?>]" value="<?php echo $value['details_id']; ?>">
<div class="routes-line-1">
<input type="text" name="placeName[<?php echo $i; ?>]" class="form-control driver-inputs" placeholder="Starting Point" value="<?php echo $value['place_name']; ?>">
<input type="text" name="latitude[<?php echo $i; ?>]" class="form-control driver-inputs" placeholder="Latitude" value="<?php echo $value['latitude']; ?>">
</div>
<div class="routes-line-2">
<input type="text" name="longitude[<?php echo $i; ?>]" class="form-control driver-input-right-1" placeholder="Longitude" value="<?php echo $value['longitude']; ?>">
</div>
<div class="form-div">
<div class=" add-remove-btns">
<button type="button" style=" " class="add-delete-btn add-btn-click" name=" " id=" ">+</button>
</div>
<div class=" add-remove-btns remove-btn remove-btn-click">
<button type="button" class="add-delete-btn" name=" " id=" " >-</button>
</div>
</div>
<div class="preference_counter" id="route_pre">
<input class="counter_route text-center" type="text" name="conter[<?php echo $i ?>]" value="" readonly>
</div>
</div>
<?php $i++; } }else{ ?>
<div class="route-single-line" id="">
<input type="hidden" name="ro_det_id[1]" value="">
<div class="routes-line-1">
<input type="text" name="placeName[1]" class="form-control driver-inputs" placeholder="Starting Point *" value="">
<input type="text" name="latitude[1]" class="form-control driver-inputs" placeholder="Latitude *" value="">
</div>
<div class="routes-line-2">
<input type="text" name="longitude[1]" class="form-control driver-input-right-1" placeholder="Longitude *" value="">
</div>
<div class="form-div">
<div class=" add-remove-btns">
<button type="button" style=" " class="add-delete-btn add-btn-click" name=" " id=" ">+</button>
</div>
<div class=" add-remove-btns remove-btn remove-btn-click">
<button type="button" class="add-delete-btn" name=" " id=" " >-</button>
</div>
</div>
<div class="preference_counter" id="route_pre">
<input class="counter_route text-center" type="text" name="conter[1]" value="" readonly>
</div>
</div>
<div class="route-single-line" id="">
<input type="hidden" name="ro_det_id[2]" value="">
<div class="routes-line-1">
<input type="text" name="placeName[2]" class="form-control driver-inputs" placeholder="Destination Point *" value="">
<input type="text" name="latitude[2]" class="form-control driver-inputs" placeholder="Latitude *" value="">
</div>
<div class="routes-line-2">
<input type="text" name="longitude[2]" class="form-control driver-input-right-1" placeholder="Longitude *" value="">
</div>
<div class="form-div">
<div class=" add-remove-btns">
<button type="button" style=" " class="add-delete-btn add-btn-click" name=" " id=" ">+</button>
</div>
<div class=" add-remove-btns remove-btn remove-btn-click">
<button type="button" class="add-delete-btn" name=" " id=" " >-</button>
</div>
</div>
<div class="preference_counter" id="route_pre">
<input class="counter_route text-center" type="text" name="conter[2]" value="" readonly>
</div>
</div>
<?php } ?>
</div>
</div>
<button type="submit" name="submit" class="btn btn-primary student-update-btn assign-btn driver-btn btn_schedule" >Schedule</button>
</div>
</div>
</form>
</div>
</div>
</main>
<!--End right-top side-->
</div>
<script src="<?php echo base_url(); ?>assets-bustracking/js/jquery-3.4.1.min.js" ></script>
<script src="<?php echo base_url(); ?>assets-bustracking/js/popper.min.js"></script>
<script src="<?php echo base_url(); ?>assets-bustracking/js/bootstrap.min.js"></script>
<script src="https://cdn.datatables.net/1.10.22/js/jquery.dataTables.min.js"></script>
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/jquery.validate.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/additional-methods.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.8.1/css/bootstrap-select.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.8.1/js/bootstrap-select.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<style type="text/css">
.user-login-section {
width: 20%;
display: flex;
justify-content: center;
align-items: center;
margin-left: 0%;
float: right;
}
</style>
<script>
$(document).ready(function(){
$('.user-drpdown').click(function(){
$('.drpdown-items').toggle();
});
});
$(document).ready(function() {
//multiple select js start
$('select').selectpicker();
//multiple select js end
});
</script>
<script>
$(document).ready(function(){
var route_data = '';var i='';
jQuery.validator.addMethod("inputregx", function(value, element) {
return this.optional(element) || /^[a-zA-Z ]{3,50}$/.test(value);
}, 'Please enter alpha and numeric characters only ');
jQuery.validator.addMethod("placename", function(value, element) {
return this.optional(element) || /^[a-zA-Z0-9 -]{3,50}$/.test(value);
}, 'Please enter alpha and numeric characters only ');
jQuery.validator.addMethod("patternregx", function(value, element) {
return this.optional(element) || /^[A-Z]{2}[0-9]{2}[A-Z]{2,3}[0-9]{4}$/.test(value);
}, 'could not match the pattern ');
jQuery.validator.addMethod("latitude", function(value,element) {
return this.optional(element) || /^(\+|-)?(?:90(?:(?:\.0{1,8})?)|(?:[0-9]|[1-8][0-9])(?:(?:\.[0-9]{1,8})?))$/.test(value);
}, 'Format for Latitude 47.1231231 or +90.0');
jQuery.validator.addMethod("longitude", function(value,element) {
return this.optional(element) || /^(\+|-)?(?:180(?:(?:\.0{1,8})?)|(?:[0-9]|[1-9][0-9]|1[0-7][0-9])(?:(?:\.[0-9]{1,8})?))$/.test(value);
}, 'Format for Longitude 179.99999999 , -180.0 ');
$('.selectpicker,.driverSelect').on('change', function() {
$(this).valid();
})
$("#add_route").validate({
rules: {
<?php
for ($i = 1; $i <= 20; $i++) {
echo "'placeName[$i]': {
required:true,
placename:true
},";
echo "'latitude[$i]' : {
required:true,
latitude:true
},";
echo "'longitude[$i]' : {
required:true,
longitude:true
},";
} ?>
name: {
required: true,
inputregx: true
},
stops:{
required:true
},
driver:{
required:true
},
bus:{
required:true
},
'working_day[]':{
required:true
},
placename:{
required:true,
inputregx:true
},
price:{
required:true,
number:true
}
},
messages: {
name: {
required: "Please Enter Name"
},
stops:{
required: "Please Select Stop's"
},
driver:{
required: "Please Select Driver Name"
},
bus:{
required:"Plase select Bus Name"
},
'working_day[]':{
required:"Please Select Working Day's"
}
},
submitHandler: function(form) {
form.submit();
}
});
});
</script>
<!-- script for the adding btn and deleting button -->
<script>
$(document).ready(function(){
assign_preference();
});
// Add extra field
$(document).on('click',".add-btn-click", function(e)
{
var prefer_id = '';
var id = $(this).closest('.route-single-line').attr('id');
if (id !='' && (typeof id !== "undefined")) {
prefer_id = $('.route-single-line').length + 1;
}else{
prefer_id = $('.route-single-line').length + 1;
}
// alert(id);
var data = '<div class="route-single-line"><input type="hidden" name="ro_det_id['+ prefer_id +']" value=""><div class="routes-line-1"><input type="text" name="placeName['+ prefer_id +']" class="form-control driver-inputs" placeholder="Place Name" value=""><input type="text" name="latitude['+ prefer_id +']" class="form-control driver-inputs" placeholder="Latitude" value=""></div><div class="routes-line-2"><input type="text" name="longitude['+ prefer_id +']" class="form-control driver-input-right-1" placeholder="Longitude" value=""></div><div class="form-div"><div class=" add-remove-btns"><button type="button" style=" " class="add-delete-btn add-btn-click" name=" " id=" ">+</button></div><div class=" add-remove-btns remove-btn remove-btn-click"><button type="button" class="add-delete-btn" name=" " id=" " >-</button></div></div><div class="preference_counter" id="route_pre"><input class="counter_route text-center" type="text" name="conter['+ prefer_id+']" value="" readonly></div></div>';
$(this).closest('.route-single-line').after(data);
assign_preference();
});
$(document).on('click',".remove-btn-click", function(e)
{
// $(this).closest('.route-single-line').remove();
var get_id = $(this).closest('.route-single-line').attr('id');
// console.log(get_id);
if (typeof get_id != 'undefined' && get_id > 0) {
var id = <?php echo $route_id ? $route_id : '0'; ?>;
$.ajax({
url:'<?php echo base_url() . 'delete-route-content '?>',
data:{'route_id': id, 'detail_id': get_id},
type:'POST',
data_type:'json',
success: function(result){
console.log(result);
}
});
}else{
$(this).closest('.route-single-line').remove();
}
assign_preference();
});
function assign_preference() {
var count = $('.counter_route').length;
var no = '<input type="hidden" name="stops" value="'+ count +'">'
$('#no_stops').html(no)
$('.counter_route').each(function(index,ele) {
$(ele).val(index+1);
})
}
</script>
<style type="text/css">
div#route_pre {
margin-right: 0px;
display: flex;
position: absolute;
right: -10em;
top: 66px;
}
input.counter_route {
width: 30px;
border: none;
color: green;
}
</style>
</body>
</html>