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