<script type="text/javascript">
    var params=0;
    $(function(){
$("#print").click(function(e){
    window.frames["preview"].focus();
    window.frames["preview"].print();
 });
$("#show").click(function(e){

var category= document.getElementById('category');
var product = document.getElementById('product');
$.ajax(
{
type: "POST",
url: "<?php echo base_url(); ?>reports/inventory/setparamsinsessionforproduct",
//dataType: "json",
data: {CATEGORY:category.value, PRODUCT:product.value},
success: function(data){

document.getElementById("preview").src =  "<?php echo base_url(); ?>reports/inventory/printproduct";
},
error:function (xhr, ajaxOptions, thrownError){
                    alert(thrownError);
                }
 });

   e.preventDefault();
  return false;

    });
    });
</script>
<!-- PRODUCT AUTOCOMPLETE -->
<style>
    #preview 
    {
        border: 1px solid #ddd;
        padding: 10px;
    }
</style>
                       
<!-- Page Content -->
<div class="page-content">

    <!-- Page Header -->
    <div class="page-header position-relative">
        <div class="header-title">
            <h1>
              Products
            </h1>
        </div>
        <!--Header Buttons-->
        <div class="header-buttons">
            <a class="sidebar-toggler" href="#">
                <i class="fa fa-arrows-h"></i>
            </a>
            <a class="refresh" id="refresh-toggler" href="">
                <i class="glyphicon glyphicon-refresh"></i>
            </a>
            <a class="fullscreen" id="fullscreen-toggler" href="#">
                <i class="glyphicon glyphicon-fullscreen"></i>
            </a>
        </div>
        <!--Header Buttons End-->
    </div>
    <!-- /Page Header -->
    <!-- Page Body -->
    <div class="page-body" id="resources">
      <div class="well with-header">
          <div class="row">
                     <div class="form-group">
                           
                            <div class="col-md-3">
                               
                                   Category<br>
                                    <input id="category" type="text" name="category" class="form-control"/>
                            </div>
                             <div class="col-md-3">
                                   Product<br>
                                   <input id="product" type="text" name="product" class="form-control"/>
                              </div>
  
                                <div class="col-md-6">
                                    <br>
                                    <button class="btn btn-primary" id="show" name="add">Show</button>
                               
                                    <button class="btn btn-danger" id="print" name="print">Print</button>
                                </div>
                     </div>
                </div>
                <div class="row">
                        <iframe id="preview" name="preview" src="about:blank"  frameborder="5" width="100%" height="600" marginheight="0" marginwidth="0" scrolling="auto"></iframe>
                </div>
</div>
</div>
<!-- /Page Body -->
</div>
<!-- /Page Content -->

</div>
<!-- /Page Container -->
<!-- Main Container -->

</div>

