 <!-- Main content -->
<?php
	include 'security/security.php';
?>
   <link rel="stylesheet" href="css/bootstrap.min.css">

<style type="text/css">
		tfoot input {
			width: 100%;
			padding: 3px;
			box-sizing: border-box;
		}
	</style>
   
    <link rel="stylesheet" href="css/bootstrap.min.css"> 
    <!--<link rel="stylesheet" href="https://cdn.datatables.net/1.10.19/css/dataTables.bootstrap4.min.css">-->
 
    <link  href="vendor/new/multi/jquery.dataTables.min.css" rel="stylesheet" type="text/css"> 
	<script src="vendor/new/multi/jquery-3.5.1.js" ></script>
	<script src="vendor/new/multi/jquery.dataTables.min.js" ></script>


<style>

    .view-cell{
        background-color: red;
        color: white; 
    }
    .table-hover tbody tr:hover td {
        background: aqua;
    }
</style>
<section class="content" onload="search1();">
    <div class="box box-primary">
        <div class="box-header with-border">
            <h3 class="box-title">LIVE STOCK</h3>
        </div>

        <form role="form" class="form-horizontal">
            <div class="box-body">
                <div class="panel-body" style="overflow-x: auto">
                    <table width="100%" class="table table-striped table-bordered table-hover" id="example" style="width:auto">
                        <thead>
                            <tr>
                                <th width="6%">Item Code</th>
                                <th width="30%">Description</th>
                                <th width="10%">Pattern</th>
                                <th width="10%">PR Rating</th>
                                <th width="10%">Brand</th>
                                <th width="10%">Country</th>
                                <th width="8%">Min Selling</th>
                                <th width="8%">Selling</th>
                                <th width="8%">Qty In Hand</th>
                            </tr>
                        </thead>
                        <tfoot>
                            <tr>
                                <th><input type="text" placeholder="Search Item Code"></th>
                                <th><input type="text" placeholder="Search Description"></th>
                                <th><input type="text" placeholder="Search Pattern"></th>
                                <th><input type="text" placeholder="Search PR Rating"></th>
                                <th><input type="text" placeholder="Search Brand"></th>
                                <th><input type="text" placeholder="Search Cat"></th>
                                <th><input type="text" placeholder="Search Min Selling"></th>
                                <th><input type="text" placeholder="SearchSelling"></th>
                                <th><input type="text" placeholder="Search Qty In Hand"></th>
                            </tr>
                        </tfoot>

                    </table>
                </div>
            </div>
        </form>
    </div>
</section>

<script>
$(document).ready(function() {
    // Initialize the DataTable
    var table = $('#example').DataTable({
        ajax: {
            url: 'live_stock_data.php',
            type: 'POST',
            data: function(d) {
                // Send the search values for each column
                $('#example tfoot th').each(function(i) {
                    d['columns[' + i + '][search][value]'] = $('input', this).val();
                });
            }
        },
        columns: [
            { data: 'STK_NO' },
            { data: 'DESCRIPT' },
            { data: 'PART_NO' },
            { data: 'GEN_NO' },
            { data: 'BRAND_NAME' },
            { data: 'country' },
            { data: 'MIN_SELLING' },
            { data: 'SELLING' },
            { data: 'QTYINHAND' }
        ],
        order: [[8, 'desc']],
        processing: true,
        serverSide: true
    });
    
    // Custom search box functionality
    $('#customSearchBox').on('keyup change', function() {
        table.search(this.value).draw();
    });

    // Apply the search
    table.columns().every(function() {
        var that = this;

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

</script>

