<?php
session_start();

?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Search Expense</title>
    <style type="text/css">
        tfoot input {
            width: 100%;
            padding: 3px;
            box-sizing: border-box;
        }
    </style>
     <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.22/css/jquery.dataTables.min.css">
    <script src="https://code.jquery.com/jquery-3.5.1.js"></script>
    <script src="https://cdn.datatables.net/1.10.22/js/jquery.dataTables.min.js"></script>  
 
   
    <script language="JavaScript" src="js/expense.js"></script>
</head>
<body>

        

    <table id="example" class="display" style="width:100%">
        <thead>
            <tr>
                <th>Refno</th>
                <th>Description</th>
                <th>Category</th>
                <th>Date</th>
                <th>Amount</th>
                <th>Department</th> 
            </tr>
        </thead>
        <tbody>
            <?php
            $stname = "";
            if (isset($_GET['stname'])) {
                $stname = $_GET["stname"];
            }
            ?>
            <input type="hidden" value="" id="cur" />

            <?php
           require_once ("connection_sql.php");

               
                    $sql = "SELECT * from expense ";
                
                   foreach ($conn->query($sql) as $row) {
                        $cuscode = $row["refno"];
                        	if($row['cancel'] == "1"){
                    $color="red";
                }else{
                    $color="";
                }
                
               	echo "<tr bgcolor=\"$color\">           
                              <td onclick=\"custno('$cuscode', '$stname');\">" . $row['refno'] . "</a></td>
                              <td onclick=\"custno('$cuscode', '$stname');\">" . $row['name'] . "</a></td>
                              <td onclick=\"custno('$cuscode', '$stname');\">" . $row['cat'] . "</a></td>
                              <td onclick=\"custno('$cuscode', '$stname');\">" . $row['sdate'] . "</a></td>
                              <td onclick=\"custno('$cuscode', '$stname');\">" . $row['amount'] . "</a></td>
                              <td onclick=\"custno('$cuscode', '$stname');\">" . $row['dep'] . "</a></td>
                            </tr>";
                    }
                 
            ?>

        </tbody>
        <tfoot>
            <tr>
               <th>Refno</th>
                <th>Description</th>
                <th>Category</th>
                <th>Date</th>
                <th>Amount</th>
                <th>Department</th> 
            </tr>
        </tfoot>
    </table>

</body>
</html>
<script type="text/javascript">
    $(document).ready(function() {
    // Setup - add a text input to each footer cell
    $('#example tfoot th').each( function () {
        var title = $(this).text();
        $(this).html( '<input type="text" placeholder="Search '+title+'" />' );
    } );

    // DataTable
    var table = $('#example').DataTable({
        lengthChange: true,
        fixedHeader: true,
        responsive: true,
        "deferRender": true,
        "order": [[ 0, 'desc' ]],
        lengthMenu: [[ 10, 25, 50,100, -1 ],[ '10 rows', '25 rows', '50 rows', '100 rows', 'Show all' ]],
        initComplete: function () {
            // Apply the search
            this.api().columns().every( function () {
                var that = this;

                $( 'input', this.footer() ).on( 'keyup change clear', function () {
                    if ( that.search() !== this.value ) {
                        that
                        .search( this.value )
                        .draw();
                    }
                } );
            } );
        }
    });

} );
</script>


