<div class="breadcrumbs">
            <div class="breadcrumbs-inner">
                <div class="row m-0">
                    <div class="col-sm-4">
                        <div class="page-header float-left">
                            <div class="page-title">
                                <h1>Route Management</h1>
                            </div>
                        </div>
                    </div>
                    <!--div class="col-sm-8">
                        <div class="page-header float-right">
                            <div class="page-title">
                                <ol class="breadcrumb text-right">
                                    <li><a href="#">Dashboard</a></li>
                                    <li><a href="#">Forms</a></li>
                                    <li class="active">Basic</li>
                                </ol>
                            </div>
                        </div>
                    </div-->
                </div>
            </div>
        </div>
       
                <style>
.content{position: relative;}
.overlay{position: absolute;left: 0; top: 0; right: 0; bottom: 0;z-index: 2;background-color: rgba(255,255,255,0.8);position: fixed;   overflow-y: scroll;}
.overlay-content {
    position: absolute;
    transform: translateY(-50%);
     -webkit-transform: translateY(-50%);
     -ms-transform: translateY(-50%);
    top: 50%;
    left: 15%;
    right: 0;
    text-align: center;
    color: #555; 
    position: fixed; 
   overflow-y: scroll;
}

</style>  

<link rel="stylesheet" href="<?php echo base_url(); ?>assets/css/lib/chosen/chosen.min.css">
<link rel="stylesheet" href="<?php echo base_url(); ?>assets/css/jquery-datepicker.css">
<link rel="stylesheet" href="//code.jquery.com/ui/1.13.0/themes/base/jquery-ui.css">   
                                                                
    
  
                <div class="content">
            <div class="animated fadeIn">
       <div class="overlay" style="display:block" id="load"><div class="overlay-content"><img src="<?php echo base_url(); ?>assets/images/loader.gif" alt="Loading..." style="width: 60px;"/></div></div>       

                <div class="row">
                           <?php echo validation_errors(); ?>
           
                   <div class="container">
                       
                         <form id="frm_route_update">
                        <div class="row">

                                    <div class="col-sm-3">  
                                                        From Rep
                                                        <select class="standardSelect form-control" id="ref" data-placeholder="Choose a cat..." name="ref" onchange="get_route()">
							<option value="0"> Select Rep </option>
                                                         <?php 
                                                         foreach ($ref as $rf) {            
                                                          ?>
							<option value="<?php echo $rf->user_id; ?>"><?php echo $rf->user_fname.' '.$rf->user_lname; ?></option>
                                                          <?php }?>                                                           
                                                        </select>                          
                                                    </div>
                                                    
                                                      <div class="col-sm-3">  
                                                       Route
                                                     <select class="form-control standardSelect choosen-select" id="sup_route" name="sup_route">
                                  <option value="" selected>Select Route</option>
                                        </select>                         
                                                    </div>
                                                    
                                                   <div class="col-sm-3">  
                                                    To Rep
                                                      <select class="standardSelect form-control" id="tref" data-placeholder="Choose a cat..." name="tref" onchange="get_route_to()" >
							<option value="0"> Select Rep </option>
                                                         <?php 
                                                         foreach ($ref as $rf) {            
                                                          ?>
							<option value="<?php echo $rf->user_id; ?>"><?php echo $rf->user_fname.' '.$rf->user_lname; ?></option>
                                                          <?php }?>                                                           
                                                        </select>                         
                                                    </div>
                                                    
                                                     <div class="col-sm-3">  
                                                       To Route
                                                     <select class="form-control standardSelect choosen-select" id="tosup_route" name="tosup_route">
                                  <option value="" selected>Select Route</option>
                                        </select>                         
                                                    </div>
                                                    
                                                              
                                            <div class="col-sm-3">   
                                                <br>
                                                 <button type="submit" class="btn btn-secondary btn-sm" id="update_data">Change</button>                 
                                        </div>   
                                                    
                                                  
                                                    
                                                   
                                </div> 
                                
                            <!--div class="row">
                                
                                   <div class="col-sm-4">  
                                                       Catagory 
                                                        <select class="standardSelect form-control" id="brnd" data-placeholder="Choose a Brand..." name="brnd">
							<option value="0"> Select Brand </option>
                                                         <?php 
                                                         foreach ($brnd_list as $rf) {            
                                                          ?>
							<option value="<?php echo $rf->brand_id; ?>"><?php echo $rf->brand_name; ?></option>
                                                          <?php }?>                                                           
                                                        </select>                          
                                                    </div>
                                                    

                                    <div class="col-sm-3">  
                                                       From Date
                                                       <input type="text" style="text-align: right;" class="col-xs-12 col-sm-12 input-sm form-control-sm form-control datepicker" name="frm_date" id="frm_date">                         
                                                    </div>
                                                    
                                                    <div class="col-sm-3">  
                                                       To Date
                                                       <input type="text" style="text-align: right;" class="col-xs-12 col-sm-12 input-sm form-control-sm form-control datepicker" name="to_date" id="to_date">                         
                                                    </div>
                                   
                                                    
                                            <div class="col-sm-2">   
                                                <br>
                                                 <button type="submit" class="btn btn-secondary btn-sm" id="update_data">Print</button>                 
                                        </div>         
                                </div-->     
                    </form> 
            </div>
            </div>
            </div>
            </div>
            
          

<script src="<?php echo base_url(); ?>assets/js/jquery.min.js"></script>
<script src="<?php echo base_url(); ?>assets/js/bootstrap.min.js"></script>
<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
<script src="<?php echo base_url(); ?>assets/js/jquery-ui.js"></script>
<script src="<?php echo base_url(); ?>assets/js/lib/chosen/chosen.jquery.min.js"></script>


<script>

    $(document).ready(function(){
        //show_data(); 
        //getPagination('#table-id');
        document.getElementById("load").style.display = "none";
    });
    
        function get_route(){
        
        document.getElementById("load").style.display = "block";
        
            var f = document.getElementById("ref");
            var sup_id = f.options[f.selectedIndex].value;
            
          
        
                $('#sup_route option').remove();
                $("#sup_route").trigger("chosen:updated");
                
               
           
                
        
         $.ajax({
                        type  : 'ajax',
                        method : "POST",
                        url   : "<?php echo site_url('cus_route_get')?>",
                        async : true,
                        data : {sup_id:sup_id},
                        dataType : 'json',
                        success : function(data){
                            
                          
                            
                        
                               $('#sup_route').append($('<option>', {
                                                            value: "",
                                                            text: "select"
                                                        }));
                    
                             var i;
                                for(i=0; i<data[0].length; i++){
                                        $('#sup_route').append($('<option>', {
                                                                        value: data[0][i].route_id,
                                                                        text: data[0][i].route_name
                                                                    }));
                                    
                                                            
                                }
                                
                                  
                                    
                                                            
                                
                           
                            
                                
                                                
                    
                       $("#sup_route").trigger("chosen:updated");
                      
                       
                      // $("#sup_citye").trigger("chosen:updated");
                      
                       document.getElementById("load").style.display = "none";
                        }
         
                    });
        
        
    }
    
    function get_route_to(){
        
        document.getElementById("load").style.display = "block";
        
           
            
            var g = document.getElementById("tref");
            var tosup_id = g.options[g.selectedIndex].value;
            
           
                
                $('#tosup_route option').remove();
                $("#tosup_route").trigger("chosen:updated");
           
                
        
         $.ajax({
                        type  : 'ajax',
                        method : "POST",
                        url   : "<?php echo site_url('cus_route_get')?>",
                        async : true,
                        data : {tosup_id:tosup_id},
                        dataType : 'json',
                        success : function(data){
                            
                          
                          
                                
                                    $('#tosup_route').append($('<option>', {
                                                            value: "",
                                                            text: "select"
                                                        }));
                    
                             var j;
                                for(j=0; j<data[1].length; j++){
                                        $('#tosup_route').append($('<option>', {
                                                                        value: data[1][j].route_id,
                                                                        text: data[1][j].route_name
                                                                    }));
                                    
                                                            
                                }
                           
                            
                                
                                                
                    
                      
                       $("#tosup_route").trigger("chosen:updated");
                       
                      // $("#sup_citye").trigger("chosen:updated");
                      
                       document.getElementById("load").style.display = "none";
                        }
         
                    });
        
        
    }
    
  
    
        $('#update_data').on('click',function(){
       
          
             //var rt = document.getElementById('edit_table').value;
             
              var f = document.getElementById("ref");
            var frmrep = f.options[f.selectedIndex].value;
            
            var e = document.getElementById("tref");
            var torep = e.options[e.selectedIndex].value;
             //var rt = document.getElementById('edit_table').value;
             
            
             
         
             
             if(frmrep === torep){
                 
                 swal("Please Change Same Rep");
             }
             
               document.getElementById("load").style.display = "block";
             
        swal({
                  title: "Are you sure?",
                  text: "Save, Entered Details will be Saved",
                  icon: "warning",
                  buttons: true,
                  dangerMode: true, 
                })
                .then((willDelete) => {
                  if (willDelete) {
                               $.ajax({
                                type  : 'ajax',
                                method : "POST",
                                url   : "<?php echo site_url('changeupdate_route')?>",
                                async : true,
                                dataType : 'json',
                                 data: $("#frm_route_update").serialize(),
                                success : function(data){
                                    
                                               swal(data[0]);
                                                //$("#showdadd").modal('hide');
                                                //$('#tb_bdy').html("");
                                                //dadd_view(adid);
                                                //show_data("customer_view");
                                                document.getElementById("load").style.display = "none";
                                            }
                                    
                               
                 
                            });
                  } else {
                    swal("No Changes");
                    document.getElementById("load").style.display = "none";
                  }
                });
          
             
            
      
            return false;
                 
               
            
        });
    
    $( ".datepicker" ).datepicker();
    $( ".datepicker" ).datepicker( "option", "dateFormat", "yy-mm-dd");
    
  

        
            jQuery(document).ready(function() {
        jQuery(".standardSelect").chosen({
            disable_search_threshold: 5,
            no_results_text: "Oops, nothing found!",
            width: "100%"
        });
    });  

</script>    