<div id="screen[index]" style="width: 100%;height:100%">
    <div class="kt-portlet kt-portlet--mobile">
        <div class="kt-portlet__body kt-portlet__body--fit">
            <div class="row">
                <div class="col-lg-12">
                    <input type="hidden" id="isManagerFilter" value="<?php echo isset($isManagerFilter) ? ($isManagerFilter ? 'true' : 'false' ) : 'false';?>" >
                    <!--begin: Datatable -->
                    <div class="kt-datatable kt-datatable--default kt-datatable--brand kt-datatable--loaded" style="">
                        <table class="kt-datatable__table" style="display: none;">
                            <thead class="kt-datatable__head">
                            <tr class="dnd-moved kt-datatable__row" style="left: 0px;">
                                <th class="kt-datatable__cell">
                                    <span>Confirm Date</span>
                                </th>
                                <th class="kt-datatable__cell" style="width: 200px;">
                                    <div class="input-group date">
                                        <input type="text" class="form-control" id="txtFilterActVsBillFromDate">
                                        <div class="input-group-append">
                                            <span class="input-group-text">
                                                <i class="la la-calendar-check-o"></i>
                                            </span>
                                        </div>
                                    </div>
                                    <!-- <input class="form-control" type="date" placeholder="From Date" id="txtFilterActVsBillFromDate"> -->
                                </th>
                                <th class="kt-datatable__cell">
                                    <span>To</span>
                                </th>
                                <th class="kt-datatable__cell" style="width: 200px;">
                                    <div class="input-group date">
                                        <input type="text" class="form-control" id="txtFilterActVsBillToDate">
                                        <div class="input-group-append">
                                            <span class="input-group-text">
                                                <i class="la la-calendar-check-o"></i>
                                            </span>
                                        </div>
                                    </div>
                                </th>
                                <th class="kt-datatable__cell">
                                    <select class="form-control" id="cmbCompanyActVsBillFilter"><?php echo $this->getOptionCompany(); ?></select>
                                </th>
                                <th class="kt-datatable__cell">
                                    <button type="button" class="btn btn-default" id="btnFilterReport" onclick='filterActVsBillReport();'><i class="fa fa-filter"></i> Filter </button>
                                </th>
                            </tr>
                            </thead>
                        </table>
                </div>
                <div class="col-lg-12 kt-separator kt-separator--dashed"></div>
                <div class="col-lg-12">
                    <!--begin: Datatable -->
                    <div class="kt-datatable kt-datatable--default kt-datatable--brand kt-datatable--loaded" style="">
                        <table class="kt-datatable__table" id="jobbillingstatus_table_data">
                            <thead class="kt-datatable__head">
                                <tr class="dnd-moved kt-datatable__row" style="left: 0px;">
                                <th data-field="jobid" class="kt-datatable__cell" id="col_jobid" style="display: none;">
                                    <span>ID <i class="fa"></i></span>
                                </th>
                                <th data-field="jobnumber" class="kt-datatable__cell" style="width: 10%;" id="col_jobnumber" name="jobbillingstatus_sort_column" onclick="sortColumn(this,'col_jobnumber','asc');">
                                    <span>Job Number<i class="fa"></i></span>
                                </th>
                                <th data-field="jobtitle" class="kt-datatable__cell" style="width: 15%;" id="col_jobtitle" name="jobbillingstatus_sort_column" onclick="sortColumn(this,'col_jobtitle','desc');">
                                    <span>Job Title <i class="fa fa-sort-up"></i></span>
                                </th>
                                <th data-field="jobtype" class="kt-datatable__cell" style="width: 10%;" id="col_jobtype" name="jobbillingstatus_sort_column" onclick="sortColumn(this,'col_jobtype','asc');">
                                    <span>Job Type <i class="fa"></i></span>
                                </th>
                                <th data-field="jobcustomer" class="kt-datatable__cell" style="width: 15%;" name="jobbillingstatus_sort_column" id="col_jobcustomer" onclick="sortColumn(this,'col_jobcustomer','asc');">
                                    <span>Customer <i class="fa"></i></span>
                                </th>
                                <th data-field="status" class="kt-datatable__cell" style="width: 8%;" name="jobbillingstatus_sort_column" id="col_status" onclick="sortColumn(this,'col_status','asc');">
                                    <span>Status <i class="fa"></i></span>
                                </th>
                                <th data-field="billdesc" class="kt-datatable__cell" style="width: 15%;" name="jobbillingstatus_sort_column" id="col_billdesc">
                                    <span>Bill</span>
                                </th>
                                <th data-field="filter" class="kt-datatable__cell" style="width: 50px;" id="col_filter">
                                    <button style="display:none;" type="button" class="btn btn-default btn-sm btn-icon btn-icon-md" id="btnFilterReport" onclick="filterRow('report-row-filter',this,true);"><i class="fa fa-filter"></i></button>
                                </th>
                            </tr>
                            </thead>
                            <tbody class="kt-datatable__body" style="" id="report-act-vs-bill-table">
                                <!-- <tr data-row="customer-rows-0" class="dnd-moved kt-datatable__row" style="left: 0px;" id="report-row-filter">
                                    <td data-field="jobid" class="kt-datatable__cell" id="col_jobid" style="display: none;">&nbsp;</td>
                                    <td data-field="jobnumber" class="kt-datatable__cell" id="col_jobnumber" style="width: 10%;">
                                        <input type="text" class="form-control" name="jobbillingstatus_input_filter" id="txtcoljobnumber" onkeyup="filterData(this,1);" />
                                    </td>
                                    <td data-field="jobtitle" class="kt-datatable__cell" id="col_jobtitle" style="width: 15%;">
                                        <input type="text" class="form-control" name="jobbillingstatus_input_filter" id="txtcoljobtitle" onkeyup="filterData(this,2);" />
                                    </td>
                                    <td data-field="jobtype" class="kt-datatable__cell" id="col_jobtype" style="width: 8%;">
                                        <input type="text" class="form-control" name="jobbillingstatus_input_filter" id="txtcoljobtype" onkeyup="filterData(this,3);" />
                                    </td>
                                    <td data-field="jobcustomer" class="kt-datatable__cell" id="col_jobcustomer" style="width: 15%;">
                                        <input type="text" class="form-control" name="jobbillingstatus_input_filter" id="txtcoljobcustomer" onkeyup="filterData(this,4);" />
                                    </td>
                                    <td data-field="status" class="kt-datatable__cell" id="col_status" style="width: 10%;">
                                        <input type="text" class="form-control" name="jobbillingstatus_input_filter" id="txtcolstatus" onkeyup="filterData(this,5);" />
                                    </td>
                                    <td data-field="billdesc" class="kt-datatable__cell" id="col_billdesc" style="width: 5%;">&nbsp;</td>
                                    <td data-field="filter" class="kt-datatable__cell" id="col_filter">&nbsp;</td>
                                </tr> -->
                            </tbody>
                        </table>
                    </div>
                    <!--end: Datatable -->
                </div>
            </div>
        </div>
        <!-- button to trigger the things -->
        <button id="activatebuttonscreen[index]" onclick='reactivatescreen[index]();' style="display: none;">activate screen button</button>
    </div>
</div>
</div>
<div id="screen[index]a" style="width: 100%;height:100%"> 

</div>
<script type ="text/javascript">
$(document).ready(function() {
    var claimDayLast = 30;
    var date = new Date();
    var firstDay = new Date();
    var lastDay = new Date();
    var todayDate = new Date();
    var startDate = new Date(new Date().setDate(todayDate.getDate()-claimDayLast));

    firstDay.setFullYear(date.getFullYear(), date.getMonth(), 1);
    lastDay.setFullYear(date.getFullYear(), date.getMonth() + 1, 0);

    var dteopt = {
        // todayHighlight: true,
        orientation: "bottom left",
        autoclose: true,
        format: 'dd/mm/yyyy',
        templates: {
            leftArrow: '<i class="la la-angle-left"></i>',
            rightArrow: '<i class="la la-angle-right"></i>'
        }
    }

    $("#txtFilterActVsBillFromDate").datepicker(dteopt) ;
    $("#txtFilterActVsBillToDate").datepicker(dteopt) ;
    
    // // last xx days
    $('#txtFilterActVsBillFromDate').datepicker('setDate', (startDate.getDate() <= 9 ? "0" + startDate.getDate() : startDate.getDate()) + "/" + (startDate.getMonth()+1 <= 9 ? "0" + (startDate.getMonth()+1) : (startDate.getMonth()+1) ) + "/" + startDate.getFullYear());

    $('#txtFilterActVsBillToDate').datepicker('setDate', (todayDate.getDate() <= 9 ? "0" + todayDate.getDate() : todayDate.getDate()) + "/" + (todayDate.getMonth()+1 <= 9 ? "0" + (todayDate.getMonth()+1) : (todayDate.getMonth()+1) ) + "/" + todayDate.getFullYear());
    
    sorts = "";
    filterRow("report-row-filter",this,false);
    filterActVsBillReport();
});
</script>