        <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>User 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>
        
  
                <div class="content">
            <div class="animated fadeIn">
                
                                  <style>
.content{position: relative;}
.overlay{position: absolute;left: 0; top: 0; right: 0; bottom: 0;z-index: 3000;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="assets/css/lib/chosen/chosen.min.css">
                                                                
    <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">
                    
                      <div class="col-lg-12" style="padding-bottom: 10px;">
                           <?php echo validation_errors(); ?>
                
                <button class="btn btn-secondary" name="tax" id="showalluser" onclick ="show_data(this.id);">System User</button>
                <button class="btn btn-secondary" name="tax" id="showallsalse" onclick ="show_data(this.id);">Sales Person</button>
               
                 <button class="btn btn-secondary" name="tax" id="showallroute" onclick ="show_data(this.id);">Route</button>
                
                
                <?php
                if($this->session->userdata['login_data']['userlevel'] == "0"){
                    
                    ?>
                    <button class="btn btn-secondary" name="tax" id="showalluserlvl" onclick ="show_data(this.id);">Level</button>
                    
                    <?php
                }
                ?>
                
               
               
            </div>
                    
                    
                    <div id="btn" class="col-lg-12" style="padding-bottom: 10px;">
                       </div> 
                    
                         
                           <div class="container">
                   
                         <div class="row" style="margin: 0px 0px;  background-color: #D5D6D7; padding: 10px 10px 10px 10px; ">
                   
                         <div class="pull-left col-sm-6">
                     
                     Display <select class=" tableTools-container input-sm" name="state" id="maxRows" style="margin: 4px 4px;"> 
						 <option value="5000">Show ALL Rows</option>
                                                 <option selected="" value="5">5</option>
						 <option value="10">10</option>
						 <option value="15">15</option>
						 <option value="20">20</option>
						 <option value="50">50</option>
						 <option value="70">70</option>
						 <option value="100">100</option>
						</select> records
                 </div>
                 
                <div class="pull-right col-sm-6" style="text-align: end;">
                    Search: <input type="text" class=" input-sm  " id="myInput" onkeyup="myFunction()" placeholder="Search for names.." title="Type in a name" style="margin: 4px 4px;">
                    
                </div>
                        </div>
                   
                       
                        
                            <table class="table table-bordered" style= "table-layout:fixed;" id="table-id">
                                
                                <thead class="thead-dark" id="thed" ></thead>
                               
                             <tbody id="tb_bdy">
												    
												</tbody>
                        </table>

                	<nav aria-label="pagination">
  <ul class="pagination">
    <li class="page-item" data-page="prev">
      <a class="page-link" href="#" aria-label="Previous">
        <span aria-hidden="true">&laquo;</span>
        <span class="sr-only">Previous</span>
      </a>
    </li>
    <li class="page-item" data-page="next" id="prev">
      <a class="page-link" href="#" aria-label="Next">
        <span aria-hidden="true">&raquo;</span>
        <span class="sr-only">Next</span>
      </a>
    </li>
  </ul>
</nav>
                   
                
            </div>
                
           
            </div>
             </div>
           
                <!--MODAL bill-->
          <form id="frm_batch_data">
              <div class="modal fade" id="batchmodel" tabindex="-1" role="dialog" aria-labelledby="scrollmodalLabel" aria-hidden="true" z-index="1000">
                <div class="modal-dialog modal-lg" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title" id="scrollmodalLabel">Bill Book</h5>
                            
                            <label id="itemname"></label>
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                        <div class="modal-body" id="modal_batch">
                            
                        <table class='table table-bordered' id='modal_batch_tbl'>
                               
                                    
                        </table>            
                            
                            
                             
                            
                        </div>
                        <div class="modal-footer">
                            
                            <button type="button" class="btn btn-secondary btn-sm" data-dismiss="modal">Close</button>
                           
                        </div>
                    </div>
                </div>
            </div>
          </form>
            <!--END MODAL bill-->
           
                        <!--MODAL bill edit-->
          <form id="frm_edit_bill">
              <div class="modal fade" id="billeditmodel" tabindex="-1" role="dialog" aria-labelledby="scrollmodalLabel" aria-hidden="true" z-index="1100">
                <div class="modal-dialog modal-lg" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title" id="scrollmodalLabel">Edit Bill Book</h5>
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div> 
                        <div class="modal-body" id="Modal_billedit">
                            
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary btn-sm" data-dismiss="modal">Cancel</button>
                            <button type="button" class="btn btn-primary btn-sm" id="save_editbill">Update</button>
                        </div>
                    </div>
                </div>
            </div>
          </form>
            <!--END MODAL bill edit-->
           
        
            
            <!--MODAL new bill-->
          <form id="frm_bill_data">
              <div class="modal fade" id="billmodel" tabindex="-1" role="dialog" aria-labelledby="scrollmodalLabel" aria-hidden="true">
                <div class="modal-dialog modal-lg" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title" id="scrollmodalLabel">New Bill Book</h5>
                            
                           
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                        <div class="modal-body" id="modal_billbook">
                            
                            <div class="form-group row">
                                <label class="col-md-2 col-form-label">Book ID</label>
                                <div class="col-md-10">
                                 <input type="text" name="billbid" id="billbid" class="form-control"  value="">
                                 <input type="hidden" name="usid" id="usid" class="form-control"  value="">
                                 </div>
                            </div>
                            
                                 
                              <div class="form-group row">
                                <label class="col-md-2 col-form-label">From Number</label>
                                <div class="col-md-10">
                                 <input type="text" name="billfnum" id="billfnum" class="form-control"  value="">
                                 </div>
                            </div>
                            
                             <div class="form-group row">
                                <label class="col-md-2 col-form-label">To Number</label>
                                <div class="col-md-10">
                                 <input type="text" name="billtnum" id="billtnum" class="form-control"  value="">
                                 </div>
                            </div>
                            
                             
                            
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary btn-sm" id="save_billdata">Save</button>
                            <button type="button" class="btn btn-secondary btn-sm" data-dismiss="modal">Close</button>
                           
                        </div>
                    </div>
                </div>
            </div>
          </form>
            <!--END MODAL bill-->
            
          
            
             <!--MODAL add-->
          <form id="frm_add_data">
              <div class="modal fade" id="addmodel" tabindex="-1" role="dialog" aria-labelledby="scrollmodalLabel" aria-hidden="true">
                <div class="modal-dialog modal-lg" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title" id="scrollmodalLabel">Add</h5>
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div> 
                        <div class="modal-body" id="Modal_Add">
                            
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                            <button type="button" class="btn btn-primary" id="save_data">Confirm</button>
                        </div>
                    </div>
                </div>
            </div>
          </form>
            <!--END MODAL add-->
            
            
            <!--MODAL edit-->
          <form id="frm_edit_data">
              <div class="modal fade" id="editmodel" tabindex="-1" role="dialog" aria-labelledby="scrollmodalLabel" aria-hidden="true">
                <div class="modal-dialog modal-lg" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title" id="scrollmodalLabel">Edit</h5>
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                        <div class="modal-body" id="modal_edit">
                            
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                            <button type="button" class="btn btn-primary" id="update_data">Confirm</button>
                        </div>
                    </div>
                </div>
            </div>
          </form>
            <!--END MODAL edit-->
            
            
             <!--MODAL route-->
          <form id="frm_route">
              <div class="modal fade" id="routemodel" tabindex="-1" role="dialog" aria-labelledby="scrollmodalLabel" aria-hidden="true">
                <div class="modal-dialog modal-lg" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title" id="scrollmodalLabel">Add Route</h5>
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                        
                        <div class="modal-body" id="Modal_route">
                            
              
                          <div class="form-group row">
                                <label class="col-md-2 col-form-label">Route Name</label>
                                <div class="col-md-10">
                                 <input type="text" name="rt_name" id="rt_name" class="form-control"  value="">
                                 </div>
                            </div>
                            
                             <div class='form-group row'>
                                <label class='col-md-2 col-form-label'>Ref</label>
                                <div class='col-md-10'>
                                  <select class='form-control' id='ref' name='ref'>
                                  <option value=''>Select Level</option>
                               <?php
                                  
                                     foreach($data as $value) {
                                                echo '<option value="'.$value->user_id.'">'.$value->user_fname." ".$value->user_lname.'</option>';
                                            }     
                                  
                            ?>                     
                                        </select>
                                 </div>
                            </div>
                            
                            <div class='form-group row'>
                                <label class='col-md-2 col-form-label'>City</label>
                                <div class='col-md-10'>
                                    <div class="card">
                                        <div class="card-body">
                
                                        <select data-placeholder="Choose City" multiple class="standardSelect" id='city[]' name='city[]'>
                                          
                                            <option value=''>Select Level</option>
                                               <?php
                                  
                                                     foreach($city as $value) {
                                                                echo '<option value="'.$value->id.'">'.$value->name_en.'</option>';
                                                            }     
                                                  
                                                ?>
                                                   
                                        </select>
                
                                    </div>
                                </div> 
                                    
                                </div>
                            </div>
                            
                            <div class='form-group row'>
                             <label class='col-md-2 col-form-label'>Customer</label>
                                <div class='col-md-10'>
                                    <select class="standardSelect form-control" multiple id="cus" data-placeholder="Choose a cust..." name="cus[]">
							            <option value="0"> Select customer </option>
                                                         <?php 
                                                         foreach ($cus as $rf) {            
                                                          ?>
							            <option value="<?php echo $rf->cust_id; ?>"><?php echo $rf->cust_company; ?></option>
                                                          <?php }?>                                                           
                                    </select>
                                 </div>
                            </div>
                            
                            
                        
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                            <button type="button" class="btn btn-primary" id="save_rt">Confirm</button>
                        </div>
                    </div>
                </div>
            </div>
            </div>
          </form>
          
          <form id="frm_route_edit">
              <div class="modal fade" id="rt_edit" tabindex="-1" role="dialog" aria-labelledby="scrollmodalLabel" aria-hidden="true">
                <div class="modal-dialog modal-lg" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title" id="scrollmodalLabel">Edit Route</h5>
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                        
                        <div class="modal-body" id="Modal_route">
                            
              <input type="hidden" name="edtrt_id" id="edtrt_id" class="form-control"  value="">
                                 
                          <div class="form-group row">
                                <label class="col-md-2 col-form-label">Route Name</label>
                                <div class="col-md-10">
                                 <input type="text" name="edtrt_name" id="edtrt_name" class="form-control"  value="">
                                 </div>
                            </div>
                            
                             <div class='form-group row'>
                                <label class='col-md-2 col-form-label'>Ref</label>
                                <div class='col-md-10'>
                                  <select class='form-control' id='edt_ref' name='edt_ref'>
                                  <option value=''>Select Ref</option>
                               <?php
                                  
                                     foreach($data as $value) {
                                                echo '<option value="'.$value->user_id.'">'.$value->user_fname." ".$value->user_lname.'</option>';
                                            }     
                                  
                            ?>                     
                                        </select>
                                </div>
                            </div>
                            
                            <table id="myTable">
                            
                            </table>
                            
                            <div class='form-group row'>
                                <label class='col-md-2 col-form-label'>City</label>
                                <div class='col-md-10'>
                                    <div class="card">
                                        <div class="card-body">
                
                                        <select data-placeholder="Choose City" multiple class="standardSelect" id='edcity[]' name='edcity[]'>
                                          
                                            <option value=''>Select Level</option>
                                               <?php
                                  
                                                     foreach($city as $value) {
                                                                echo '<option value="'.$value->id.'">'.$value->name_en.'</option>';
                                                            }     
                                                  
                                                ?>
                                                   
                                        </select>
                
                                    </div>
                                </div> 
                                    
                                </div>
                            </div>
                            <table id="cusTable">
                            
                            </table>
                            <div class='form-group row'>
                             <label class='col-md-2 col-form-label'>Customer</label>
                                <div class='col-md-10'>
                                    <select class="standardSelect form-control" multiple id="edcus" data-placeholder="Choose a cust..." name="edcus[]">
							           
                                    </select>
                                 </div>
                            </div>
                            
                            
                        
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                            <button type="button" class="btn btn-primary" id="update_rt">Update</button>
                        </div>
                        </div>
                    </div>
                </div>
            </div>
            </div>
          </form>
            <!--MODAL route-->
            
<script src="<?php echo base_url(); ?>assets/js/jquery.min.js"></script>
<script src="<?php echo base_url(); ?>assets/js/popper.min.js"></script>
<script src="<?php echo base_url(); ?>assets/js/bootstrap.min.js"></script>
<script src="<?php echo base_url(); ?>assets/js/jquery.matchHeight.min.js"></script>
<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
<script src="<?php echo base_url(); ?>assets/js/lib/chosen/chosen.jquery.min.js"></script>






            <script>
$(document).ready(function(){
    document.getElementById("load").style.display = "block";
   //$("#addmodel").modal('show');
   //('test');
   show_data("showalluser");
   document.getElementById("load").style.display = "none";
});

 // get billbook
 
     //show batch data    
    function  bill_view(clickedID){
        $('#modal_part').html("");
        var id = clickedID;
            document.getElementById("load").style.display = "block";
             $.ajax({
                        type  : 'ajax',
                        method : "POST",
                        url   : '<?php echo site_url('view_bill')?>',
                        async : true,
                        dataType : 'json',
                        data : {id:id },
                        success : function(data){
                            
                         
                           
                            $('#modal_batch_tbl').html(data[0]+data[1]);
                            $('#itemname').text(data[2]);
                             document.getElementById("load").style.display = "none";
                        }
         
                    });
            $('#batchmodel').modal('show');
      
            return false;
     
    }
    
    //show new book
    
    function new_bill(clickedID){
        
        var uid = clickedID;
        
        $("#usid").val(uid);
        $('#billmodel').modal('show');
    }
    
    // edit bill
    
     
    function edit_bill(clickedID){
      $('#Modal_billedit').html("");
        var rout = clickedID;
          var res = rout.split("/");
          var rt = res[0];
            var id = res[1];
             $.ajax({
                        type  : 'ajax',
                        method : "POST",
                        url   : '<?php echo site_url('')?>'+rt,
                        async : true,
                        dataType : 'json',
                        data : {id:id },
                        success : function(data){
                            
                            $('#Modal_billedit').html(data);
                        }
         
                    });
            $('#billeditmodel').modal('show');
      
            return false;
           
     
    }
    
    // update bill
    
      // save new bill book
    $('#save_editbill').on('click',function(){
        $('#batchmodel').modal('hide');
        
        swal({
                  title: "Are you sure?",
                  text: "Save, Edit Bill Book will be Saved",
                  icon: "warning",
                  buttons: true,
                  dangerMode: true,
                })
                .then((willDelete) => {
                  if (willDelete) {
                               $.ajax({
                                type  : 'ajax',
                                method : "POST",
                                url   : "<?php echo site_url('update_bill')?>",
                                async : true,
                                dataType : 'json',
                                data: $("#frm_edit_bill").serialize(),
                                success : function(data){
                                    swal(data[0]);
                                  show_data("showallsalse");
                                   document.getElementById("load").style.display = "none";
                                    document.getElementById("frm_edit_bill").reset();
                                  bill_view(data[1]);
                                     $("#billeditmodel").modal('hide');
                                   // window.location = '<?php echo site_url('user')?>';
                                }
                 
                            });
                  } else {
                    swal("No Changes");
                    document.getElementById("load").style.display = "none";
                  }
                });
        
    })
    
        // save new bill book
    $('#save_billdata').on('click',function(){
        
        
        swal({
                  title: "Are you sure?",
                  text: "Save, New Bill Book will be Saved",
                  icon: "warning",
                  buttons: true,
                  dangerMode: true,
                })
                .then((willDelete) => {
                  if (willDelete) {
                               $.ajax({
                                type  : 'ajax',
                                method : "POST",
                                url   : "<?php echo site_url('save_bill')?>",
                                async : true,
                                dataType : 'json',
                                data: $("#frm_bill_data").serialize(),
                                success : function(data){
                                    swal(data);
                                        $("#billmodel").modal('hide');
                                   
                                   show_data("showallsalse");
                                   document.getElementById("load").style.display = "none";
                                    document.getElementById("frm_bill_data").reset();
                                    window.location = '<?php echo site_url('user')?>';
                                }
                 
                            });
                  } else {
                    swal("No Changes");
                    document.getElementById("load").style.display = "none";
                  }
                });
        
    })
    

    //get data
    function show_data(clickedID){
        document.getElementById("load").style.display = "block";
     var rt = clickedID;
        document.getElementsByName("tax")[0].disabled = false;
        document.getElementsByName("tax")[1].disabled = false;
        document.getElementsByName("tax")[2].disabled = false;
        //document.getElementsByName("tax")[4].disabled = false;
        //document.getElementsByName("tax")[2].disabled = false;

     
     document.getElementById(rt).disabled = true;
     
        $('.btn-secondary').not(this).removeClass('btn-outline-secondary');
        $(this).toggleClass('btn-secondary');
     $.ajax({
                type  : 'ajax',
                method : "POST",
                url   : "<?php echo site_url()?>"+rt,
                async : true,
                dataType : 'json',
                success : function(data){
                    $('#btn').html(data[0]);
                    $('#thed').html(data[1]);
                    $('#tb_bdy').html(data[2]);
                    
                    document.getElementById("load").style.display = "none";
                }
 
            });
              
            return false;
     
    }
    
    //inactive all user
    
    
   function inactive_data(clickedID){
     
             var rt = clickedID;
            
             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('')?>"+rt,
                                async : true,
                                dataType : 'json',
                               // data: $("#frm_add_data").serialize(),
                                success : function(data){
                                    
                                   // alert(data);
                                    
                                   swal(data[0]);
                                    
                              
                                    show_data("showallsalse");
                                   document.getElementById("load").style.display = "none";
                                }
                 
                            });
                  } else {
                    swal("No Changes");
                    document.getElementById("load").style.display = "none";
                  }
                });
            
           
            
        }; 
    
    

   //show add new
    function add_data(clickedID){
     var rt = clickedID;
     
    // alert(rt);
     
           $.ajax({
                        type  : 'ajax',
                        method : "POST",
                        url   : '<?php echo site_url('')?>'+rt,
                        async : true,
                        dataType : 'json',
                        success : function(data){
                           $('#Modal_Add').html(data);
                            //$('#tb_bdy').html("");
                            //show_data(data[1]);
                            
                        }
         
                    });
           
     
    }
    
    // save new data
    $('#save_rt').on('click',function(){
        
        
        swal({
                  title: "Are you sure?",
                  text: "Save, New Route will be Saved",
                  icon: "warning",
                  buttons: true,
                  dangerMode: true,
                })
                .then((willDelete) => {
                  if (willDelete) {
                               $.ajax({
                                type  : 'ajax',
                                method : "POST",
                                url   : "<?php echo site_url('save_route')?>",
                                async : true,
                                dataType : 'json',
                                data: $("#frm_route").serialize(),
                                success : function(data){
                                    swal(data);
                                        $("#routemodel").modal('hide');
                                   
                                   show_data("showallroute");
                                   document.getElementById("load").style.display = "none";
                                    document.getElementById("frm_route").reset();
                                    window.location = '<?php echo site_url('user')?>';
                                }
                 
                            });
                  } else {
                    swal("No Changes");
                    document.getElementById("load").style.display = "none";
                  }
                });
        
    })
    
    $('#update_rt').on('click',function(){


        var table = document.getElementById('myTable');

                //gets rows of table
                var rowLength = table.rows.length;
            
                //loops through rows    
                  var data_t="";
                    for (var r = 0; r < rowLength; r++) {    
                        var val =  table.rows[r].cells[0].children[0].value
                        data_t = val+","+data_t;
                    }
                    
            
            var table = document.getElementById('cusTable');

                //gets rows of table
                var rowLength = table.rows.length;
            
                //loops through rows    
                  var data_c="";
                    for (var r = 0; r < rowLength; r++) {    
                        var val =  table.rows[r].cells[0].children[0].value
                        data_c = val+","+data_c;
                    }        
                    //alert(data_t);
                    
            var det = $("#frm_route_edit").serializeArray();
              det.push({previouse:data_t});
              det.push({precity:data_c});
              
              swal({
                  title: "Are you sure?",
                  text: "Save, Route will be Updated",
                  icon: "warning",
                  buttons: true,
                  dangerMode: true,
                })
                .then((willDelete) => {
                  if (willDelete) {
                               $.ajax({
                                type  : 'ajax',
                                method : "POST",
                                url   : "<?php echo site_url('update_route')?>",
                                async : true,
                                dataType : 'json',
                                data: $('#frm_route_edit').serialize() + "&previouse=" + data_t,
                                success : function(data){
                                    swal(data);
                                        $("#rt_edit").modal('hide');
                                   
                                   show_data("showallroute");
                                   document.getElementById("load").style.display = "none";
                                   document.getElementById("frm_route_edit").reset();
                                }
                 
                            });
                  } else {
                    swal("No Changes");
                    document.getElementById("load").style.display = "none";
                  }
                });
                
        
    })
        
        
        
      // save new data  
        $('#save_data').on('click',function(){
     
             var rt = document.getElementById('table').value;
            
            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('')?>"+rt,
                                async : true,
                                dataType : 'json',
                                data: $("#frm_add_data").serialize(),
                                success : function(data){
                                    swal(data[0]);
                                    if(data[2]!="error"){
                                        $("#addmodel").modal('hide');
                                    }
                                       
                                        
                                   
                                   //$("#addmodel").modal('hide');
                                   // $('#tb_bdy').html("");
                                   show_data(data[1]);
                                   document.getElementById("load").style.display = "none";
                                }
                 
                            });
                  } else {
                    swal("No Changes");
                    document.getElementById("load").style.display = "none";
                  }
                });
            
           
            
        });
        
    //show edit data    
    function  edit_view(clickedID){
        $('#modal_edit').html("");
        var rout = clickedID;
          var res = rout.split("/");
          var rt = res[0];
            var id = res[1];
             $.ajax({
                        type  : 'ajax',
                        method : "POST",
                        url   : '<?php echo site_url('')?>'+rt,
                        async : true,
                        dataType : 'json',
                        data : {id:id },
                        success : function(data){
                            
                            $('#modal_edit').html(data);
                        }
         
                    });
            $('#editmodel').modal('show');
      
            return false;
     
    }
    
    function  rtedit_view(clickedID){
       
        var id = clickedID;
     $("#myTable tr").remove(); 
             $.ajax({
                        type  : 'ajax',
                        method : "POST",
                        url   : '<?php echo site_url('edt_route')?>',
                        async : true,
                        dataType : 'json',
                        data : {id:id },
                        success : function(data){
                            console.log(data['rt'][0].route_name);
                            
                             document.getElementById('edtrt_name').value = data['rt'][0].route_name;
                             document.getElementById('edtrt_id').value = data['rt'][0].route_id;
                            
                             $("#edt_ref").val(pad(data['rt'][0].ref_id,4));
                             $("#edt_ref").trigger("chosen:updated");
                             
                             var table = document.getElementById("myTable");
                        
                             for(var i=0; i<(data['det']).length; i++){
                                  
                                    var row = table.insertRow(0);
                                      var cell1 = row.insertCell(0);
                                      var cell2 = row.insertCell(1);
                                      cell1.innerHTML = '<input type="hidden" name="edited_city[]" id="edited_city[]" value="'+data['det'][i][0]+'">'+data['det'][i][1];
                                      cell2.innerHTML = '<input type="button" value="Remove">';
                                    
                                }
                                var table = document.getElementById("cusTable");
                        
                             for(var i=0; i<(data['cust']).length; i++){
                                  
                                    var row = table.insertRow(0);
                                      var cell1 = row.insertCell(0);
                                      var cell2 = row.insertCell(1);
                                      cell1.innerHTML = '<input type="hidden" name="edited_cust[]" id="edited_cust[]" value="'+data['cust'][i][0]+'">'+data['cust'][i][1];
                                      cell2.innerHTML = '<input type="button" value="Remove">';
                                    
                                }
                                
                                             $('#edcus').append($('<option>', {
                                                                        value: "",
                                                                        text: "select"
                                                                    }));
                                                                    
                                        for (var i = 0; i < data['allcus'].length; i++) {
                                            
                                              
                                                                    
                                           $('#edcus').append($('<option>', {
                                                                        value: data['allcus'][i].cust_id,
                                                                        text: data['allcus'][i].cust_company
                                                                    }));
                                        }
                               $("#edcus").trigger("chosen:updated");
                            $('#rt_edit').modal('show');
                        }
         
                    });
            
      
            return false;
     
     function pad (str, max) {
                                          str = str.toString();
                                          return str.length < max ? pad("0" + str, max) : str;
                                        }
     
    }    
        
    
    $('table').on('click', 'input[type="button"]', function(e){
         $(this).closest('tr').remove()
        })    
        
    //show edit data
    $('#show_data').on('click','.item_edit',function(){
      var id = $(this).data('product_code');
      
      $.ajax({
                type  : 'ajax',
                method : "POST",
                url   : '<?php echo site_url('Costsetting_controller/edit_data')?>',
                async : true,
                dataType : 'json',
                data : {p_id:id },
                success : function(data){
                    
                    $('#modal_edit').html(data);
                }
 
            });
      $('#Modal_vali').modal('show');
    })    
        
    
     //save edited data
    $('#update_data').on('click',function(){
             var rt = document.getElementById('edit_table').value;
             
              swal({
                  title: "Are you sure?",
                  text: "Update, Your Edited details will be Updated",
                  icon: "warning",
                  buttons: true,
                  dangerMode: true,
                })
                .then((willDelete) => {
                  if (willDelete) {
                                 $.ajax({
                                    type  : 'ajax',
                                    method : "POST",
                                    url   : "<?php echo site_url('')?>"+rt,
                                    async : true,
                                    dataType : 'json',
                                    data: $("#frm_edit_data").serialize(),
                                    success : function(data){
                                         swal(data[0]);
                                         
                                         if(data[2]!=""){swal(data[2]);}
                                         
                                        $('#editmodel').modal('hide');
                                        $('#tb_bdy').html("");
                                        show_data(data[1]);
                                    }
             
                                });
                  } else {
                    swal("No Changes");
                    $('#editmodel').modal('hide');
                  }
                });
            
        });
      
    
    function gtcity(){
        
         var txt = $('#city :selected').text();
     
         var rt1 = $('#route1').val();
         var route1 = rt1+","+txt;
        $('#route1').val(route1);
        
        var val = $('#city').val();
        var rt = $('#route').val();
         var route = rt+","+val;
        $('#route').val(route);
        
        
        var ul = document.getElementById("list");
          var li = document.createElement("li");
          li.appendChild(document.createTextNode("Four"));
          ul.appendChild(li);
    };
    
    function dis_route(){
        document.getElementById("frm_route").reset();
        $('#cus option').remove();
        document.getElementById("cus").value = "";
        $('#routemodel').modal('show');
    }
    
    function cus_route(){
         
        $('#routemodel').modal('show');
    }
      
     jQuery(document).ready(function() {
        jQuery(".standardSelect").chosen({
            disable_search_threshold: 10,
            no_results_text: "Oops, nothing found!",
            width: "100%"
        });
    });  
     
     $('#ref').change(function(){ 
                
                $('#cus option').remove();
               
                
                $('[name="price"]').val("");
                    $('[name="pricelkr"]').val("");
            var part_id = $(this).val();
             document.getElementById("load").style.display = "block";
             
         
          
             $.ajax({
                type  : 'ajax',
                method:'POST',
                url   : '<?php echo site_url('cust_data')?>',
                dataType : 'json',
                data : {part_id:part_id},
                success : function(data){
                    
                     $('#cus').append($('<option>', {
                                                            value: "0",
                                                            text: "select"
                                                        }));
                                                        
                            for (var i = 0; i < data['customer'].length; i++) {
                                
                                  
                                                        
                               $('#cus').append($('<option>', {
                                                            value: data['customer'][i].custmid,
                                                            text: data['customer'][i].cusname
                                                        }));
                            }
                            
                            
                                $('#itemselect').append($('<option>', {
                                                            value: "",
                                                            text: "select"
                                                        }));
                     
                 var i;
                            for (var i = 0; i < data['item'].length; i++) {
                               $('#itemselect').append($('<option>', {
                                                            value: data['item'][i].item_id,
                                                            text: data['item'][i].itm_name
                                                        }));
                            }
                            
                    $("#cus").trigger("chosen:updated");
                    
                  document.getElementById("load").style.display = "none";
                 // document.getElementById("cus").focus();
					
                }
 
            }); 
      });  
      
      
      
function getPagination(table) {
  var lastPage = 1;

  $('#maxRows')
    .on('change', function(evt) {
      //$('.paginationprev').html('');						// reset pagination

     lastPage = 1;
      $('.pagination')
        .find('li')
        .slice(1, -1)
        .remove();
      var trnum = 0; // reset tr counter
      var maxRows = parseInt($(this).val()); // get Max Rows from select option

      if (maxRows == 5000) {
        $('.pagination').hide();
      } else {
        $('.pagination').show();
      }

      var totalRows = $(table + ' tbody tr').length; // numbers of rows
      $(table + ' tr:gt(0)').each(function() {
        // each TR in  table and not the header
        trnum++; // Start Counter
        if (trnum > maxRows) {
          // if tr number gt maxRows

          $(this).hide(); // fade it out
        }
        if (trnum <= maxRows) {
          $(this).show();
        } // else fade in Important in case if it ..
      }); //  was fade out to fade it in
      if (totalRows > maxRows) {
        // if tr total rows gt max rows option
        var pagenum = Math.ceil(totalRows / maxRows); // ceil total(rows/maxrows) to get ..
        //	numbers of pages
        for (var i = 1; i <= pagenum; ) {
          // for each page append pagination li
          $('.pagination #prev')
            .before(
              '<li class="page-item" data-page="' +
                i +
                '">\
								  <span class="page-link">' +
                i++ +
                '<span class="sr-only">(current)</span></span>\
								</li>'
            )
            .show();
        } // end for i
      } // end if row count > max rows
      $('.pagination [data-page="1"]').addClass('active'); // add active class to the first li
      $('.pagination li').on('click', function(evt) {
        // on click each page
        evt.stopImmediatePropagation();
        evt.preventDefault();
        var pageNum = $(this).attr('data-page'); // get it's number

        var maxRows = parseInt($('#maxRows').val()); // get Max Rows from select option

        if (pageNum == 'prev') {
          if (lastPage == 1) {
            return;
          }
          pageNum = --lastPage;
        }
        if (pageNum == 'next') {
          if (lastPage == $('.pagination li').length - 2) {
            return;
          }
          pageNum = ++lastPage;
        }

        lastPage = pageNum;
        var trIndex = 0; // reset tr counter
        $('.pagination li').removeClass('active'); // remove active class from all li
        $('.pagination [data-page="' + lastPage + '"]').addClass('active'); // add active class to the clicked
        // $(this).addClass('active');					// add active class to the clicked
	  	limitPagging();
        $(table + ' tr:gt(0)').each(function() {
          // each tr in table not the header
          trIndex++; // tr index counter
          // if tr index gt maxRows*pageNum or lt maxRows*pageNum-maxRows fade if out
          if (
            trIndex > maxRows * pageNum ||
            trIndex <= maxRows * pageNum - maxRows
          ) {
            $(this).hide();
          } else {
            $(this).show();
          } //else fade in
        }); // end of for each tr in table
      }); // end of on click pagination list
	  limitPagging();
    })
    .val(50)
    .change();

  // end of on select change

  // END OF PAGINATION
}

function limitPagging(){
	// alert($('.pagination li').length)

	if($('.pagination li').length > 7 ){
			if( $('.pagination li.active').attr('data-page') <= 3 ){
			$('.pagination li:gt(5)').hide();
			$('.pagination li:lt(5)').show();
			$('.pagination [data-page="next"]').show();
		}if ($('.pagination li.active').attr('data-page') > 3){
			$('.pagination li:gt(0)').hide();
			$('.pagination [data-page="next"]').show();
			for( let i = ( parseInt($('.pagination li.active').attr('data-page'))  -2 )  ; i <= ( parseInt($('.pagination li.active').attr('data-page'))  + 2 ) ; i++ ){
				$('.pagination [data-page="'+i+'"]').show();

			}

		}
	}
}

$(function() {
  // Just to append id number for each row
  $('table tr:eq(0)').prepend('<th> ID </th>');

  var id = 0;

  $('table tr:gt(0)').each(function() {
    id++;
    $(this).prepend('<td>' + id + '</td>');
  });
});


function myFunction() {
  var input, filter, table, tr, td, i;
  input = document.getElementById("myInput");
  filter = input.value.toUpperCase();
  table = document.getElementById("table-id");
  var rows = table.getElementsByTagName("tr");
  for (i = 1; i < rows.length; i++) {
    var cells = rows[i].getElementsByTagName("td");
    var j;
    var rowContainsFilter = false;
    for (j = 1; j < cells.length; j++) {
      if (cells[j]) {
        if (cells[j].innerHTML.toUpperCase().indexOf(filter) > -1) {
          rowContainsFilter = true;
          
          continue;
        }
      }
    }

    if (! rowContainsFilter) {
      rows[i].style.display = "none";
    } else {
      rows[i].style.display = "";
      
    }
  }
}
      
</script>