<style>
    .iconspan {
        float: right;
        margin-right: 16px !important;
        margin-top: -24px;
        position: relative;
        z-index: 2;
        color: black;
    }
    
    .tableFixHead          { overflow: auto; height: 100px; }
	.tableFixHead thead th { position: sticky; top: 0; z-index: 1; background-color:grey;}
	table  { border-collapse: collapse; width: 100%; }
	th, td { padding: 8px 16px;}

    td {
		vertical-align: middle!important;
		padding:0px!important;
		text-align:left!important;
		background-color: #eee;
	}

    td input, td select {
        padding:0px!important;
		border-radius:0px!important;
		border-color:transparent!important;
		background-color: white;
	}

    tr.highlight > td {
	    background: #3c8dbc!important;
	    color: #333!important;
	}
</style>
<div id="screen[index]" style="padding-top: 20px;"> 
    <div>
        <div class="col-md-12">
            <div class="row">
                <div class="col-sm-1" style="padding-right: 0px;">
                    <label style="text-align:left;" for="" class="control-label">Business Unit</label>
                    <select id="txtFilterAuditLogBU" class="form-control col-sm-1" disabled>
                        <?php echo $this->getMultiBUOpt(); ?>
                    </select>
                </div>
                <div class="col-sm-2" style="padding-right: 0px;">
                    <label style="text-align:left;" for="" class="control-label">Table</label>
                    <select id="txtFilterAuditLogTable" class="form-control col-sm-1">
                        <?php echo $this->getAuditLogTableOpt(); ?>
                    </select>
                </div>
                <div class="col-sm-2" style="padding-right: 0px;">
                    <label style="text-align:left;" for="" class="control-label">User</label>
                    <select id="txtFilterAuditLogUser" class="form-control col-sm-1">
                        <option value='0'>All</option>
                        <?php echo $this->getAllUsers(); ?>
                    </select>
                </div>
                <div class="col-sm-1" style="padding-right: 0px;">
                    <label style="text-align:left;" for="" class="control-label">Activity</label>
                    <select id="txtFilterAuditLogActivity" class="form-control col-sm-1">
                        <?php echo $this->getAuditLogActivityTypeOpt(); ?>
                    </select>
                </div>
                <div class="col-sm-1" style="padding-right: 0px;width:170px;">
                    <label style="text-align:left;" for="" class="control-label">Log Date From</label>
                    <input type="text" class="form-control col-sm-2" id="txtFilterAuditLogDateFrom" placeholder="dd/mm/yyyy">
                </div>
                <div class="col-sm-1" style="padding-right: 0px;width:170px;">
                    <label style="text-align:left;" for="" class="control-label">Log Date To</label>
                    <input type="text" class="form-control col-sm-2" id="txtFilterAuditLogDateTo" placeholder="dd/mm/yyyy">
                </div>
                <div class="col-sm-1">
                    <div class="col-sm-12" style="padding-left: 0px;">
                        <br>
                        <a href="#" class="btn btn-secondary btn-md" style="background-color:grey;color:white;margin-top:5px;" onclick="filterAuditLog();">Filter</a>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-md-12" id="errorShow"></div>

        <div class="col-md-12" style="margin-top: 20px;">
            <div class="tableFixHead" id="testData" style="height: 710px;overflow: auto;">
                <table class="table table-bordered" style="width: 100%; max-width: 100%; margin-bottom: 20px;" id="auditlog-table">
                <thead style='background-color: grey;color:white;'>
                    <tr>
                        <th style="text-align: center;min-width:30px">
                        <i class="fa fa-filter" style="font-size:12px;cursor:pointer;" onclick="filterRow('auditlog-row-filter',this,true);"></i>
                        </th>
                        <th style="min-width:200px">Table</th>
                        <th style="min-width:150px">Activity</th>
                        <th style="min-width:200px">Date</th>
                        <th style="min-width:200px">Data</th>
                        <th style="min-width:150px">User</th>
                    </tr>
                    <tr style="left: 0px;" id="auditlog-row-filter">
						<td style="min-width:30px" data-field="filter" id="col_filter">&nbsp;</td>
						<td style="min-width:200px" data-field="logtable" id="col_logtable">
							<input type="text" class="form-control" name="auditlog-input-filter" id="txtcollogtable" onkeyup="filterData(this,2);" />
						</td>
						<td style="min-width:150px" data-field="logactivity" id="col_logactivity">
							<input type="text" class="form-control" name="auditlog-input-filter" id="txtcollogactivity" onkeyup="filterData(this,3);" />
						</td>
						<td style="min-width:200px" data-field="logdate" id="col_logadate">
							<input type="text" class="form-control" name="auditlog-input-filter" id="txtcollogdate" onkeyup="filterData(this,4);" />
						</td>
						<td style="min-width:200px" data-field="logdata" id="col_logdata">
							<input type="text" class="form-control" name="auditlog-input-filter" id="txtcollogdata" onkeyup="filterData(this,5);" />
						</td>
						<td style="min-width:150px" data-field="loguser" id="col_loguser">
							<input type="text" class="form-control" name="auditlog-input-filter" id="txtcolloguser" onkeyup="filterData(this,6);" />
						</td>
                    </tr>
                </thead>
                <tbody id="auditlog-table-body"></tbody>
                </table>
            </div>
            
            <h5>Number of Records: <span id="totalRecords">0</span></h5>
        </div>
    </div>

	 <!-- button to trigger the things -->
    <button id="activatebuttonscreen[index]" onclick='reactivatescreen();' style="display: none;">activate screen button</button>
</div>

<div id="screen[index]a"></div>

<!-- the function index that you want to run -->
<script type="text/javascript">
    function reactivatescreen() {
        swal2("activation screen [index]");
    }
</script>

<script>
$(document).ready(function () {
    $('#txtFilterAuditLogDateFrom').datepicker({
        format: "dd/mm/yyyy",
        autoclose: true,
    });
    $('#txtFilterAuditLogDateTo').datepicker({
        format: "dd/mm/yyyy",
        autoclose: true,
    });
        
    filterRow('auditlog-row-filter',this,false);
    // filterAuditLog() ;
});
</script>