<?php    include_once('../config/db.php');  
         include_once('../config/check.php'); 
         include_once('../functions/sale/sale.php');
        
       



?>

<!DOCTYPE html>
<html>
<head>
<?php include_once('../inc/slink.php');   ?>  
</head>
<body <?php include_once('../inc/snav.php');  ?> 
<div class="wrapper">

  <!-- Main Header -->
    <header class="main-header">

    <!-- Logo -->
       <?php include_once('../inc/sbrand.php');   ?>

    <!-- Header Navbar -->
    <?php include_once('../inc/snavbar.php');   ?>

  </header>
 
  <!-- Left side column. contains the logo and sidebar -->
    <aside class="main-sidebar">

    <!-- sidebar: style can be found in sidebar.less -->
     <?php include_once('../inc/smenu.php'); ?>
    <!-- /.sidebar -->
  </aside>

  <!-- Content Wrapper. Contains page content -->
  <div class="content-wrapper">
  <section class="content-header">
    <div class="">
      <div class="col-md-3">
      <p style="color:green; font-size:20px; text-allign:centre ;font-weight:bold; " > <i class="fa fa-file" ></i> SalesbyProduct  </p>   
      </div>
           
      <div class="col-md-3  " class="mybtn" id="mybtn"  > </div>  
      <div class="col-md-6 pull-right">
        <div class="col-sm-12 row"> 
            <div class="col-md-6" id="mysearchbox">
              
            </div>               
            <div class="col-md-3">
                <input type="text" id="min" name="min" placeholder="start date" class="form-control" >
            </div>               
            <div class="col-md-3">
                  <input type="text" id="max" name="max"  placeholder="End date" class="form-control" >
            </div>               
                          
                                                                    
        </div> 
    </div>
   </section>


  
  <!-- Main content -->
  <section class="content container-fluid">
    <div class="row">        
        <div class="col-md-12">
        <div class="box box-default box-xs">
          <div class="box-body">
                            
                <!-- Filter END -->
          
         

            <table id="customer_data" width="100%" class="table table-condensed   table-small table-responsive ">
                
                <thead class="bg-primary">
                   <th >  </th>
                    <th >  </th>
                    <th >  </th>
                    <th > Branch_Name  </th>
                    <th > Customer_Full_Name </th>
                    <th > InvNum  </th>
                    <th > MEMO </th>            
                    <th > Date_Added </th>
                    <th > Product_Name  </th>
                    <th > UOM  </th>
                    <th > Unit  </th>
                    
                    <th > Price </th>
                    <th > gross </th>
                    <th > Vat </th>
                    <th > Total </th>
                   

                  </thead>
                  <tbody></tbody>
                  
                    <!-- <tfoot > -->
                    <!-- <tr style="background-color:aliceblue;" >                           
                            <th > </th>
                            <th > </th>
                            <th > </th>
                            <th > </th>
                            <th > </th>
                            <th > </th>
                            <th > </th>
                            <th > </th>
                        
                                                    
                         
                            <th colspan="1" > Current Page Totals  </th>
                            <th  id="mytotal1" style="text-decoration:underline;text-decoration-style:double;font-size:13px;">  </th>
                            <th > </th>   
                             
                                              
                      </tr> -->
		                  <tr style="background-color:aliceblue;">                           
                            <th > </th>
                            <th > </th>
                            <th > </th>
                            <th > </th>
                            <th > </th>
                            <th > </th>
                            <th > </th>
                            <th > </th>
                            <th > </th>
                           
                                                    
                            <!-- <th > </th>                            -->
                            <th  colspan="1" >  Totals </th>
                            <th  id="mytotal2" style="text-decoration:underline;text-decoration-style:double;font-size:13px;">  </th>
                            <th > </th>  
                            <th  id="mytotal3" style="text-decoration:underline;text-decoration-style:double;font-size:13px;">  </th>              
                            <th  id="mytotal4" style="text-decoration:underline;text-decoration-style:double;font-size:13px;">  </th>
                            <th  id="mytotal5" style="text-decoration:underline;text-decoration-style:double;font-size:13px;">  </th>
              
                          

                             
                                              
                      </tr>
	                  <!-- </tfoot>  -->
            </table>
                
         
          </div>
        </div>
         
        </div>
        <!-- /.col -->
      </div>
  </section>

   
</div>
  <!-- /.content-wrapper -->
  
  <!-- Main Footer -->
  <footer class="main-footer">
    <?php  include_once('../inc/sfooter.php'); ?>
  </footer>
  
</div>
<?php include_once('../inc/slinkjs.php') ?>

</body>
</html>

<script>

var minDate, maxDate;
 
// Custom filtering function which will search data in column four between two values
$.fn.dataTable.ext.search.push(
    function( settings, data, dataIndex ) {
        var min = minDate.val();
        var max = maxDate.val();
        var date = new Date( data[7] );
 
        if (
            ( min === null && max === null ) ||
            ( min === null && date <= max ) ||
            ( min <= date   && max === null ) ||
            ( min <= date   && date <= max )
        ) {
            return true;
        }
        return false;
    }
);
 
$(document).ready(function() {
    // Create date inputs
    minDate = new DateTime($('#min'), {
        format: 'MMMM Do YYYY'
    });
    maxDate = new DateTime($('#max'), {
        format: 'MMMM Do YYYY'
    });
 
    // DataTables initialisation
       var table= $('#customer_data').DataTable( { 
                    "scrollX": true,
 
                    "language": {
                      searchPlaceholder: "Search here",
                      search: "" },
                    "pageLength": 10,
                    "dom": '<"top"f>rt<"bottom"ilp><"clear">',
                     ajax: {
                           url: '../filter/sale/salebyproduct.php'
                     },
                     footerCallback: function (row, data, start, end, display) {
                          var api = this.api();
              
                          // Remove the formatting to get integer data for summation
                          var intVal = function (i) {
                              return typeof i === 'string' ? i.replace(/[\$,]/g, '') * 1 : typeof i === 'number' ? i : 0;
                          };
              
                          // Total over all pages
                          total = api
                              .column(10)
                              .data()
                              .reduce(function (a, b) {
                                  return intVal(a) + intVal(b);
                              }, 0);

                              total3 = api
                              .column(12)
                              .data()
                              .reduce(function (a, b) {
                                  return intVal(a) + intVal(b);
                              }, 0);
                              total4 = api
                              .column(13)
                              .data()
                              .reduce(function (a, b) {
                                  return intVal(a) + intVal(b);
                              }, 0);
                              total5 = api
                              .column(14)
                              .data()
                              .reduce(function (a, b) {
                                  return intVal(a) + intVal(b);
                              }, 0);
              
                          // Total over this page
                          pageTotal = api.column(10, { page: 'current' }).data().reduce(function (a, b) 
                                   { 
                                       return intVal(a) + intVal(b);
                                    }, 0);
              
                          // Update footer                      

                                  function format_number(n) {
                                      return n.toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, "$1,");
                                  }

                              
                        //   $('#mytotal1').html(   format_number(pageTotal)   );
                          $('#mytotal2').html(   format_number(total)   );
                          $('#mytotal3').html(   format_number(total3)   );
                          $('#mytotal4').html(   format_number(total4)   );
                          $('#mytotal5').html(   format_number(total5)   );

                         
                      }

       
                 } );

                 // start btn
                      
                 codeListTable = $("#customer_data").DataTable();
                        new $.fn.dataTable.Buttons( codeListTable, {
                            buttons: [
                          
                                {
                                extend:    'excel',
                                footer: true,
                                text:      '<i class="fa fa-files-o"></i> Excel',
                                titleAttr: 'Excel',
                                className: 'btn btn-default btn-sm',
                                exportOptions: {
                                    footer: true,
                                    columns: ':visible'
                                }
                                },
                                {
                                extend:    'pdf',
                                text:      '<i class="fa fa-file-pdf-o"></i> PDF',
                                titleAttr: 'PDF',
                                className: 'btn btn-default btn-sm',
                                exportOptions: {
                                    columns: ':visible'
                                }
                                },               
                                {
                                extend:    'print',
                                text:      '<i class="fa fa-print"></i> Print',
                                titleAttr: 'Print',
                                className: 'btn btn-default btn-sm',
                                exportOptions: {
                                    columns: ':visible'
                                }
                                },  
                            ]
                        } );
                        codeListTable.buttons().container().appendTo('#mybtn');  
                         $(".dataTables_filter").detach().appendTo("#mysearchbox");
                          

                      // end btn 

 
    // Refilter the table
    $('#min, #max').on('change', function () {
        table.draw();
    });


});


</script>








