<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 datefrom = document.getElementById('datepicker');
     var dateto = document.getElementById('datepicker2');
     var hostsequence = document.getElementById('hostsequence');
$.ajax(
{
type: "POST",
url: "<?php echo base_url(); ?>reports/sales/setparamsinsessionforclosedcash",
//dataType: "json",
data: {DATEFROM:datefrom.value,DATETO:dateto.value,SEQUENCE:hostsequence.value},
success: function(data){
document.getElementById("preview").src =  "<?php echo base_url(); ?>reports/sales/printclosedcash";

},
error:function (xhr, ajaxOptions, thrownError){
                    alert(thrownError);
                }
 });

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

    });

    });
</script>                          
                 
  <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>
             Closed cash
         </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-3 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-3 col-sm-6">
                                Date To<br>
                                
                                    <input name="dateto" type="text" id="datepicker2" class="form-control date-picker" data-date-format="yyyy-mm-dd"/>
                                  </div>
                                  <div class="col-md-3 col-sm-6">
                               Host Sequence<br>
                                   
                                    <input name="hostsequence" id="hostsequence" type="text" class="form-control"/>
                              </div>
                              <div class="col-md-3 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 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>