<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">
                            <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="txtFilterFromDate">
                                        <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="txtFilterFromDate"> -->
                                </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="txtFilterToDate">
                                        <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="To Date" id="txtFilterToDate"> -->
                                </th>
                                <!-- <th class="kt-datatable__cell">
                                    <select class="form-control" id="cmbTypeFilter"><?php echo $this->getOptionJobType(1); ?></select>
                                </th> -->
                                <th class="kt-datatable__cell">
                                    <select class="form-control" id="cmbCompanyFilter"><?php echo $this->getOptionCompany(); ?></select>
                                </th>
                                <!-- <th class="kt-datatable__cell">
                                    <input class="form-control" type="text" placeholder="Customer Name" id="txtCustomerFilter">
                                </th>
                                <th class="kt-datatable__cell">
                                    <input class="form-control" type="text" placeholder="Job No" id="txtJobNoFilter" value="">
                                </th> -->
                                <th class="kt-datatable__cell">
                                    <button type="button" class="btn btn-default" id="btnFilterReport" onclick='filterReport("<?php echo Command::PortalReportJobBillingStatusSummaryFilter; ?>");'><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 # <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="totalmandays" class="kt-datatable__cell" style="width: 8%;" name="jobbillingstatus_sort_column" id="col_totalmandays" onclick="sortColumn(this,'col_totalmandays','asc');">
                                    <span>Total No. Of Mandays <i class="fa"></i></span>
                                </th>
                                <th data-field="billdesc" class="kt-datatable__cell" style="width: 5%;" name="jobbillingstatus_sort_column" id="col_billdesc">
                                    <span> </span>
                                </th>
                                <th data-field="billinterval1" class="kt-datatable__cell" style="width: 8%;" name="jobbillingstatus_sort_column" id="col_billinterval1">
                                    <span>Billing Interval 1 <i class="fa"></i></span>
                                </th>
                                <th data-field="billinterval2" class="kt-datatable__cell" style="width: 8%;" name="jobbillingstatus_sort_column" id="col_billinterval2">
                                    <span>Billing Interval 2 <i class="fa"></i></span>
                                </th>
                                <th data-field="billinterval3" class="kt-datatable__cell" style="width: 8%;" name="jobbillingstatus_sort_column" id="col_billinterval3">
                                    <span>Billing Interval 3 <i class="fa"></i></span>
                                </th>
                                <th data-field="billinterval4" class="kt-datatable__cell" style="width: 8%;" name="jobbillingstatus_sort_column" id="col_billinterval4">
                                    <span>Billing Interval 4 <i class="fa"></i></span>
                                </th>
                                <th data-field="filter" class="kt-datatable__cell" style="width: 50px;" id="col_filter">
                                    <button 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-list-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="totalmandays" class="kt-datatable__cell" id="col_totalmandays" style="width: 10%;">
                                        <input type="text" class="form-control" name="jobbillingstatus_input_filter" id="txtcoltotalmandays" onkeyup="filterData(this,5);" />
                                    </td>
                                    <td data-field="billdesc" class="kt-datatable__cell" id="col_billdesc" style="width: 5%;">&nbsp;</td>
                                    <td data-field="billinterval1" class="kt-datatable__cell" id="col_billinterval1" style="width: 8%;">&nbsp;</td>
                                    <td data-field="billinterval2" class="kt-datatable__cell" id="col_billinterval2" style="width: 8%;">&nbsp;</td>
                                    <td data-field="billinterval3" class="kt-datatable__cell" id="col_billinterval3" style="width: 8%;">&nbsp;</td>
                                    <td data-field="billinterval4" class="kt-datatable__cell" id="col_billinterval4" style="width: 8%;">&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 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));
    // console.log(startDate);
    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>'
		}
	}

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

    $('#txtFilterToDate').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);
    filterReport("<?php echo Command::PortalReportJobBillingStatusSummaryFilter; ?>");
    // getReportAutoSearch("C_SEARCH");
});
</script>