<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>