<?php defined('BASEPATH') OR exit('No direct script access allowed'); ?>
<style>
th { white-space: nowrap; }
button.dt-button, div.dt-button, a.dt-button, input.dt-button {
    border: 0px solid rgba(0, 0, 0, 0.3) !important;
    border-radius: 2px !important;
    color: white !important;
    background: #428bca !important;
    padding: 0.3em 1em !important;
}
</style>
 <link rel="stylesheet" href="<?= $assets ?>styles/jquery.dataTables.css">
 <script type="text/javascript" src="<?= $assets ?>js/jquery.js"></script>
   <script type="text/javascript" src="<?= $assets ?>js/jquery.dataTables.js"></script>
<script>
$(document).ready(function() {
    $('#example').dataTable({
    	"footerCallback": function ( row, data, start, end, display ) {
            var api = this.api(), data;
 
            // converting to interger to find total
            var intVal = function ( i ) {
                return typeof i === 'string' ?
                    i.replace(/[\,]/g, '')*1 :
                    typeof i === 'number' ?
                        i : 0;
            };
 
            // computing column Total of the complete result 
            var monTotal = api
                .column( 5 )
                .data()
                .reduce( function (a, b) {
                    return  (intVal(a) + intVal(b)).toFixed(2);
                }, 0 );
				
	    var tueTotal = api
                .column( 6 )
                .data()
                .reduce( function (a, b) {
                    return  (intVal(a) + intVal(b)).toFixed(2);
                }, 0 );
				
            var pageTotals = api
                .column( 4, { page: 'current'} )
                .data()
                .reduce( function (a, b) {
                    return  (intVal(a) + intVal(b)).toFixed(2);
                } );
                 var pageTotal = api
                .column( 5, { page: 'current'} )
                .data()
                .reduce( function (a, b) {
                    return  (intVal(a) + intVal(b)).toFixed(2);
                } );
				
            // Update footer by showing the total with the reference of the column index 
	    $( api.column( 3 ).footer() ).html('Total');
            $( api.column( 4 ).footer() ).html(pageTotals);
            $( api.column( 5 ).footer() ).html(pageTotal);
           
        },
        
    } );
} );
</script>
<script type="text/javascript">
    $(document).ready(function () {
        $('#form').hide();
        $('.toggle_down').click(function () {
            $("#form").slideDown();
            return false;
        });
        $('.toggle_up').click(function () {
            $("#form").slideUp();
            return false;
        });

    });
    </script>
<div class="box">
    <div class="box-header">
        <div class="box-header">
        <h2 class="blue"><i class="fa-fw fa fa-plus"></i><?= lang('Previous Balance') ?></h2>
        
        <div class="box-icon">
            <ul class="btn-tasks">
                <li class="dropdown">
                    <a href="#" class="toggle_up tip" title="<?= lang('hide_form') ?>">
                        <i class="icon fa fa-toggle-up"></i>
                    </a>
                </li>
                <li class="dropdown">
                    <a href="#" class="toggle_down tip" title="<?= lang('show_form') ?>">
                        <i class="icon fa fa-toggle-down"></i>
                    </a>
                </li>
            </ul>
        </div>
    </div>
        
    </div>
    <div class="box-content">
        <div class="row">
            <div class="col-lg-12">
                
                 <div id="form">

                    <?php echo admin_form_open("transaction/list_balance"); ?>
                     <div class="row">
                    
                     <div class="col-md-4">
                                        <div class="form-group">
                        <?= lang("customer", "customer") ?>
                        <?php
                        $cus[''] = "";
                        foreach ($customer as $customer) {
                            $cus[$customer->id] = $customer->name;
                        }
                        echo form_dropdown('customer', $cus, (isset($_POST['customer']) ? $_POST['customer'] :"" ), 'class="form-control select" id="category" placeholder="' . lang("select") . " " . lang("customer") . '" required="required" style="width:100%"')
                        ?>
                    </div></div>
                    
                     <div class="col-md-4">
                                        <div class="form-group">
                        <?= lang("category", "category") ?>
                        <?php
                        $cat[''] = "";
                        foreach ($categories as $category) {
                            $cat[$category->id] = $category->name;
                        }
                        echo form_dropdown('category', $cat, (isset($_POST['category']) ? $_POST['category'] :"" ), 'class="form-control select" id="category" placeholder="' . lang("select") . " " . lang("category") . '" required="required" style="width:100%"')
                        ?>
                    </div></div>
                  </div>
                    <div class="form-group">
                        <div
                            class="controls"> <?php echo form_submit('submit_report', $this->lang->line("submit"), 'class="btn btn-primary"'); ?> </div>
                    </div>
                    <?php echo form_close(); ?>

                </div>
                
                	<div>
				  
				  <button id="btnExport" class="dt-button buttons-excel buttons-html5"><span>Excel</span></button>
				  <button id="btnExportPdf" class="dt-button buttons-excel buttons-html5" onclick="exportpdf()"><span>Pdf</span></button>
				  
				  <!--<input type="button" id="btnExport" value="Export" onclick="Export()" />-->
				</div>
              
                <div class="table-responsive">
                 <table id="example" class="table table-bordered table-hover table-striped dataTable" cellspacing="0" width="100%">
                        <thead>
                        <tr class="primary">
                            <!--<th style="min-width:30px; width: 30px; text-align: center;">
                                <input class="checkbox checkth" type="checkbox" name="check"/>
                            </th>-->
                            <th>#</th>
                            <th><?= lang("date") ?></th>
							<th><?= lang("Name") ?></th>
							<th><?= lang("Company") ?></th>
                            <th><?= lang("category") ?></th>
						    <th><?= lang("account") ?></th>
                            <th><?= lang("Amount") ?></th>
                            <th><?= lang("deposit/withdrawal") ?></th>
                            
                        </tr>
                        </thead>
 
                        <tbody>
                        <?php if(!empty($transaction)){?>
						<?php  $count = 1; $inco = $expen = 0;
						if($transaction != '' ){?>
						<?php foreach($transaction as $row):?><?php //print_r($row);?>
						
                        <tr>
						
							<td><?php echo $count++; ?></td>
							<td><?=$row->trans_date; ?></td>
							<td><?=$row->cust_name; ?></td>
							<td><?=$row->cust_company; ?></td>
							<?php $cates = $this->db->get_where('categories' , array('id' => $row->category_id))->row()->name;?>
							<td><?php echo $cates; ?></td>
							<?php $cate = $this->db->get_where('accounts' , array('id' => $row->account))->row()->Name;?>
							<td><?php echo $cate; ?></td>
							<td><?=$this->sma->formatQuantity($row->amount); ?></td> 
							
						
							<td><?=$row->deposit_withdrawal; ?></td> 
							
                        </tr>
						<?php endforeach;
						}
						}
						
						?>
                        </tbody>

    </table>
                </div>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript">

	jQuery(document).ready(function($)
	{
		

		var datatable = $("#table_export").dataTable();
		
		$(".dataTables_wrapper select").select2({
			minimumResultsForSearch: -1
		});
	});
		
</script>
<!-- EXPORT TO EXCEL STARTS HERE -->
<script src="https://cdn.jsdelivr.net/gh/linways/table-to-excel@v1.0.4/dist/tableToExcel.js"></script>
<script>
  $(document).ready(function(){
    $("#btnExport").click(function() {
        let table = document.getElementsByTagName("table");
        TableToExcel.convert(table[1], { // html code may contain multiple tables so here we are refering to 1st table tag
           name: `Customer Statement.xlsx`, // fileName you could use any name
           sheet: {
              name: 'Sheet 1' // sheetName
           }
        });
    });
    
});
</script>

<!-- EXPORT TO EXCEL ENDS HERE -->

<!-- EXPORT TO PDF STARTS HERE -->

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.22/pdfmake.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script>
    <script type="text/javascript">
        function exportpdf() {
            html2canvas(document.getElementById('example'), {
                onrendered: function (canvas) {
                    var data = canvas.toDataURL();
                    var docDefinition = {
                        content: [{
                            image: data,
                            width: 500
                        }]
                    };
                    pdfMake.createPdf(docDefinition).download("Customer Statement.pdf");
                }
            });
        }
    </script>


<!-- EXPORT TO EXCEL ENDS HERE -->
