<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 product = document.getElementById('product');
var category = document.getElementById('category');
var productgroups = document.getElementById('productgroups');
 var datefrom = document.getElementById('datepicker');
     var dateto = document.getElementById('datepicker2');
$.ajax(
{
    type: "POST",
    url: "<?php echo base_url(); ?>reports/sales/setparamsinsessionforproductsales",
    //dataType: "json",
    data: {PRODUCT:product.value,CATEGORY:category.value,PRODUCTGROUPS:productgroups.value,DATEFROM:datefrom.value,DATETO:dateto.value},
    success: function(data){
    document.getElementById("preview").src =  "<?php echo base_url(); ?>reports/sales/printproductsales";
    },
        error:function (xhr, ajaxOptions, thrownError){
                    alert(thrownError);
                }
 });

   e.preventDefault();
    //alert('here also ');
  return false;

    });

    });

</script>
<!-- PRODUCT AUTOCOMPLETE -->


<style type="text/css">
      #preview
      {
        border: 1px solid #ddd;
      }

  </style>                        
<!-- Page Content -->
<div class="page-content">

    <!-- Page Header -->
    <div class="page-header position-relative">
        <div class="header-title">
         <h1>
             Product Sales
         </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="form-group">
                             
          <div class="col-md-2 col-sm-6">
                               Product<br>
                              <input id="product" type="text" name="product" class="form-control"/>
                            </div>
                          <div class="col-md-2 col-sm-6">
                                   Category<br>
                                   <input id="category" type="text" name="category" class="form-control"/>
                             </div>
                       <div class="col-md-2 col-sm-6">
                                
                                Warehouse<br>
                                    <input id="productgroups" type="text" name="productgroups" class="form-control"/>
                              </div>
                                 
                   <div class="col-md-2 col-sm-6">
                                   Date<br>
                                    <input name="datefrom" type="text" id="datepicker" class="form-control date-picker" data-date-format="yyyy-mm-dd">

                               </div>
                               <div class="col-md-2 col-sm-6">
                                  Date To<br>
                                    <input name="dateto" type="text" id="datepicker2" class="form-control date-picker" data-date-format="yyyy-mm-dd"></td>
                                 </div>
                                 <div class="col-md-2 col-sm-6">
                                    <br>
                                    <button class="btn btn-primary" id="show" name="add">Show</button>
                                    <button class="btn btn-warning" id="print" name="print">Print</button>
                                 </div>
                               </div>
                                <div class="row form-group"></div>
                             <div align="center">
                            <iframe id="preview" name="preview" src="about:blank" frameborder="5" width="100%" height="600" marginheight="0" marginwidth="0"></iframe>

                            </div>


</div>


</div>
</div>
<!-- /Page Body -->
</div>
<!-- /Page Content -->

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