

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





?>

<!DOCTYPE html>
<html>
<head>
 
<?php include_once('inc/link.php');   ?>  
 
</head>


<body <?php include_once('inc/nav.php');  ?>>
<div class="wrapper">

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

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

    <!-- Header Navbar -->
    <?php include_once('inc/navbar.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/menu.php');   ?>
    <!-- /.sidebar -->
  </aside>

  <!-- Content Wrapper. Contains page content -->
  <div class="content-wrapper">
   

  <section class="content-header">
    <div class="col-md-12 ">
      <div class="col-md-3">
      <p style="color:green; font-size:20px; text-allign:centre ;font-weight:bold; " > <i class="fa fa-file" ></i> INVOICE LIST  </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 -->
            <div class="col-xs-12">
         

            <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 > Invoice_Num </th>
                    <th > Transaction_Date </th>                   
                    <th > Customer_FullName  </th>                   
                    <th > Invoice_Description  </th>                   
                    <th > Total  </th>
                    <th > Total_(TZS) </th>                    
                    <th > Status </th>
                    <th > Balance </th>
                   

                  </thead>
                  <tbody></tbody>
                  
                    <!-- <tfoot > -->
                    <tr style="background-color:aliceblue;" >                           
                            <th > </th>
                            <th > </th>
                            <th > </th>
                            <th > </th>
                            <th > </th>
                     
                        
                                                    
                            <!-- <th > </th>                         -->
                            <th colspan="3" > Current Page Totals  </th>
                            <th  id="mytotal1" style="text-decoration:underline;text-decoration-style:double;font-size:13px;">  </th>
                            <th > </th>   
                            <th > </th>   
                             
                                              
                      </tr>
		                  <tr style="background-color:aliceblue;">                           
                            <th > </th>
                            <th > </th>
                            <th > </th>
                            <th > </th>
                            <th > </th>
                        
                           
                                                    
                            <!-- <th > </th>                            -->
                            <th  colspan="3" > All Records Totals </th>
                            <th  id="mytotal2" style="text-decoration:underline;text-decoration-style:double;font-size:13px;">  </th>
                            <th > </th>   
                            <th > </th>   
                             
                                              
                      </tr>
	                  <!-- </tfoot>  -->
            </table>
                
            </div>
          </div>
        </div>
         
        </div>
        <!-- /.col -->
      </div>
  </section>
  
</div>
  <!-- /.content-wrapper -->
  
  <!-- Main Footer -->
  <footer class="main-footer">
    <?php  include_once('inc/footer.php'); ?>
  </footer>
  
</div>
                         
<!-- ./wrapper -->

<!-- REQUIRED JS SCRIPTS -->
<?php  include_once('inc/linkjs.php') ?>


</body>
</html>

<!-- dynamic rows start here -->
<!-- DYANAMIC ROWS LISTING HERE --->
<script type="text/javascript" language="javascript" ></script>

<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[4] );
 
        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/acc_invoice.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(8)
                              .data()
                              .reduce(function (a, b) {
                                  return intVal(a) + intVal(b);
                              }, 0);
              
                          // Total over this page
                          pageTotal = api.column(8, { 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)   );

                         
                      }

       
                 } );

                 // 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>

