<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>Annual Stock 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>  
                                                                
    <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="content">
            <div class="animated fadeIn">
             

                <div class="row">
                    
                      <!--div class="col-lg-12" style="padding-bottom: 10px;">
                           <?php echo validation_errors(); ?>
                
                <button class="btn btn-secondary" name="tax" id="product_view" onclick ="show_data(this.id);">Product</button>
                <button class="btn btn-secondary" name="curr" id="get_brnd" onclick ="show_data(this.id);">Brand</button>
                <button class="btn btn-secondary" name="unit" id="get_cat" onclick ="show_data(this.id);">Category</button>
                 <button class="btn btn-secondary" name="unit" id="get_model" onclick ="show_data(this.id);">Model</button>
                   <button class="btn btn-secondary" name="unit" id="get_item" onclick ="show_data(this.id);">Item</button>
            </div-->
                    
                  <div id="btn" class="col-lg-12" style="padding-bottom: 10px;">
                       </div>   
                 
                   <div class="container">
                       
                      <form id="Formstock">
                   
                        <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" 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 class="row">
                                    									<div class="col-lg-12" style="padding-bottom: 10px;">      
                                    
                                                                <div class="row" style="float: right; text-align: right;">
                                                                        
                                        <div class="col-md-12 center-block">
                                            <button class="btn btn-secondary btn-sm" id="btn_stksave">
                                                    <i class="ace-icon fa fa-floppy-o bigger-120 blue"></i>
                                                   Save New Stock
                                            </button>
                                           
                                            <button class="btn btn-secondary btn-sm" id="btn_cancel">
                                                    <i class="ace-icon fa fa-times red2"></i>
                                                    Cancel
                                            </button>
                                        </div>
                                        
                                    </div>
                                     </div>
                                    </div>
                                   </form> 
                             
                
            </div>
            </div>
            </div>
            </div>
            
           
            
            <div class="clearfix"></div>
            
             <!--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-->
            
            
<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>

    $(document).ready(function(){
        
        document.getElementById("load").style.display = "block";
       show_data(); 
      getPagination('#table-id');
      
      document.getElementById("load").style.display = "none";
    });
    
        //get data
    function show_data(){
    // var rt = clickedID;
     //alert(rt);
     
       document.getElementById("load").style.display = "block";
     $.ajax({
                type  : 'ajax',
                method : "POST",
                url   : "<?php echo site_url()?>viewall_stockinv",
                async : true,
                dataType : 'json',
                success : function(data){
                   $('#btn').html(data[0]);
                    $('#thed').html(data[1]);
                    $('#tb_bdy').html(data[2]);
                     getPagination('#table-id');
                      document.getElementById("load").style.display = "none";
                }
 
            });
            return false;
     
    }
    
    $("#btn_stksave").on('click',function() {
        
   var  form = $('#Formstock').serialize();

            var stk = $('input[name="nstock[]"]').map(function(){
                   return this.value
            }).get()
            
            var resn = $('input[name="stockreson[]"]').map(function(){
                   return this.value
            }).get()
            
            var ids = $('input[name="item_id[]"]').map(function(){
                   return this.id
            }).get()
            
              for (let i = 0; i < ids.length; i++) {
                    if((stk[i]!="")&&(resn[i]=="")){
                         swal("Please enter stock with reason");
                        
                        event.preventDefault();
                            return false;
                    }
                    if((stk[i]=="")&&(resn[i]!="")){
                         swal("Please enter Reason with Stock");
                    
                        event.preventDefault();
                            return false;
                    }
                    
                }
                
                var x = 0;
                  if(stk.filter(String).length!=x){
                 
                     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 : "POST",
                            url  : "<?php echo site_url('save_stockrep')?>",
                            dataType : "JSON",
                            data : form,
                            success: function(data){
                                
                                
                                swal(data);
                                show_data();
                               
                                location.href = "<?php echo site_url('view_stockauth')?>/";
                            }
                        });
                        
                            
                  } else {
                    swal("No Changes");
                    document.getElementById("load").style.display = "none";
                  }
                });    
                        
                } else{
                    swal("No values");
                }
        
       
                event.preventDefault();
                            return false;
    });
    
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(10)
    .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>

