<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-9">
            <div class="row">
                <div class="col-sm-2" style="padding-right: 0px;">
                    <label style="text-align:left;" for="" class="control-label">Delivery Date From</label>
                    <input type="date" class="form-control col-sm-2" id="txtCorporateGiftSummaryDeliveryDateFrom">
                </div>
                <div class="col-sm-2" style="padding-right: 0px;">
                    <label style="text-align:left;" for="" class="control-label">Delivery Date To</label>
                    <input type="date" class="form-control col-sm-2" id="txtCorporateGiftSummaryDeliveryDateTo">
                </div>
                <div class="col-sm-1" style="padding-right: 0px;min-width: 150px;">
                    <label style="text-align:left;white-space: nowrap;" for="" class="control-label">Corporate Gift</label>
                    <select id="cobCorporateGiftSummaryGift" class="form-control col-sm-1" onchange="changeGiftItem()">
                        <?php echo $this->getGiftMasterOption(); ?>
                    </select>
                </div>
                <div class="col-sm-1" style="padding-right: 0px;min-width: 150px;">
                    <label style="text-align:left;white-space: nowrap;" for="" class="control-label">Gift Type</label>
                    <select id="cobCorporateGiftSummaryGiftType" class="form-control col-sm-1" >
                        <option value="">All</option>
                    </select>
                </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="filterCorporateGiftSummary();">Filter</a>
                    </div>
                </div>
            </div>
        </div>

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

        <div class="col-md-6" 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="corporategiftsummary-table">
                </table>
            </div>
        </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 () {
    filterRow('corporategift-row-filter',this,false);
    // filterJournalInquiry() ;
});
</script>