<div class="box-header"> 
    <h3><i class='fa-fw fa fa-shopping-basket'></i><?php echo $_translator->_getTranslation(ucfirst($_reporte->getTituloReporte()));?></h3>
    <div class='box-icon dropdown'>
        <i class='icon fa fa-tasks' id="moreOptions" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"></i>
        <ul class="dropdown-menu dropdown-menu-right" aria-labelledby="moreOptions">
            <li><a href="<?php echo $_reporte->getStringToSendGET().'&action=create&output=excel' ?>"><i class="fa fa-file-excel-o"></i>Export to excel</a></li>
            <li><a href="<?php echo $_reporte->getStringToSendGET().'&enviarPorMail' ?>" class="linkSendMail"><i class="fa fa-envelope"></i>Send to email</a></li>
        </ul>
    </div>
</div>
<div class='box-content'>
    <div class='row'>
        <div class="col-lg-12">
            <?php
            $result = $_reporte->getReporte();
            $data = $result['data'];
            if(count($data)<= 0){
                echo $_translator->_getTranslation('There is not any data.');
                exit;
            }
            ?>            
        </div>
    </div>
    <div class="row">
        <div class="col-lg-12 col-md-12 col-sm-12">
            <div class="table-responsive">
            <table id="tblReport" class="table table-striped table-bordered table-condensed table-hover">
            <thead class="table-header">
            <tr>
                <td class="text-center"><?php echo $_translator->_getTranslation('Fecha');?></td>
                <td class="text-right"><?php echo $_translator->_getTranslation('Producto');?></td>                
                <td class="text-right"><?php echo $_translator->_getTranslation('Tamano');?></td>
                <td class="text-right"><?php echo $_translator->_getTranslation('Cantidad');?></td>
                <td class="text-center"><?php echo $_translator->_getTranslation('Sucursal');?></td>
            </tr>
            </thead>
            <tfoot>
            <tr>
                <th class="filter"><?php echo $_translator->_getTranslation('Fecha');?></th>
                <th class="filter"><?php echo $_translator->_getTranslation('Producto');?></th>
                <th class="filter"><?php echo $_translator->_getTranslation('Tamano');?></th>
                <th class="filter"><?php echo $_translator->_getTranslation('Cantidad');?></th>                
                <th class="filter"><?php echo $_translator->_getTranslation('Sucursal');?></th>
            </tr>
            </tfoot>
            <tbody>
            <?php
                foreach($data as $row){?>
                    <tr>
                        <td class="text-center"><?php echo $row['fecha'];?></td>
                        <td class="text-center"><?php echo $row['producto'];?></td>
                        <td class="text-center"><?php echo $row['tamano'];?></td>
                        <td class="text-right"><?php echo number_format($row['cantidad'],2);?></td> 
                        <td class="text-center"><?php echo $row['sucursalName'];?></td>
                    </tr><?php 
                }?>
            </tbody>
            </table>
            </div>
        </div>
    </div>
    <style>
        tfoot {
            display: table-header-group;
        }
    </style>
</div>
<script type="text/javascript" language="javascript">
    $('#tblReport').DataTable({paginate:false,filter:true,aaSorting:[]});
    $('#tblReport')
            .removeClass( 'display' )
            .addClass('table table-striped table-bordered');
        
    $('#tblReport tfoot th.filter').each( function () {
        var title = $(this).text();
        $(this).html( '<input type="text" placeholder="Buscar" style="width:100%" />' );
    } );  
 
    var table = $('#tblReport').DataTable();
    // Apply the search
    table.columns().every( function () {
        var that = this; 
        $( 'input', this.footer() ).on( 'keyup change', function () {
            if ( that.search() !== this.value ) {
                that
                    .search (this.value.replace("/;/g", "|"), true, false)
                    .draw();
            }
        } );
    } );
</script>