<div class="content-wrapper" ng-if="!myAccess.unfilledDiaryReport">
    <div class="container-fluid">
        <div class="row">
            <div class="col-sm-6 offset-sm-1 offset-md-2 offset-lg-3 mt-5">
                <div class="alert alert-warning alert-dismissible">
                    <h5><i class="icon fas fa-ban"></i> Warning!</h5>
                    Unauthorised Access.
                </div>
            </div>
        </div>
    </div>
</div>
<style>
    .customTooltip{padding:0 20px;}
    .form-control.is-valid, .was-validated .form-control:valid {
        padding-right: 0px !important;
        background-position: right calc(0.5em + 0.15rem) !important;
        background-size: calc(0.1em + 0.375rem) calc(0.1em + 0.375rem) !important;
    }
    #blackout {
        width:100%;
        height:100%; /* make sure you have set parents to a height of 100% too*/
        position: absolute;
        background: #0202027a;
        left:0; top:0;
        z-index:10 /*just to make sure its on top*/}
    .weekAct{
        background: antiquewhite;
    }
    .weekNormal{
        background: aliceblue;
    }
    .plannedHours{
        background: #2ffd2f;
    }
    .actualHours{
        background: #e7e700;
    }
</style>
<div id="blackout" style="display:none;"></div>
<div class="content-wrapper" ng-if="myAccess.unfilledDiaryReport">
    <section class="content-header">
        <div class="container-fluid">
            <div class="row mb-2">
                <div class="col-sm-3">
                    <h1 class="text-olive ng-binding">
                        <go-back class="ng-isolate-scope"><span class="pointer" title="Back"><i class="fas fa-chevron-left "></i></span></go-back>
                        <i class="fas fa-book"></i> Project Forecast Report

                    </h1>
                </div>
            </div>
        </div><!-- /.container-fluid -->
    </section>
    <section class="content">
        <div class="container-fluid">
            <div class="row">
                <div class="col-md-12">
                    <div class="form-group row">
                        <div class="col-sm-3"></div>
                        <div class="col-sm-2"><select data-toggle="tooltip" ng-change="projectByRevenue(filter.rc_name)" title="Select Revenue Center" id="rc_name" class="form-control custom-select" ng-model="filter.rc_name">
                            <option value="0">Select Revenue Center</option>
                            <option ng-repeat="rc in revenueCenters" value="{{rc.revenuecenterid}}">{{rc.rc_name}}</option>
                            </select>
                        </div>
                        
                        <div class="col-sm-3">
                            <select id="project" data-toggle="tooltip" title="Select Project" class="form-control custom-select" ng-model="filter.proj_id" ng-options="p.id as p.name for p in project"></select>
                        </div>
                        <div class="col-sm-4">
                            <button class="btn btn-success" ng-disabled="showLoader" ng-click="fetchReport(filter.proj_id)" ><i class="fa fa-filter"></i> Filter</button>
                        </div>
                    </div>
                    <img class="loading-gif" ng-show="showLoader" ng-src="{{baseurl}}/app/uploads/loading.gif" >
                </div>
                <div class="col-md-12">
                    <div class="card card-primary card-outline">
                        <div class="card-header border-transparent  mb-1">
                            <h3 class="card-title">Report</h3>
                        </div>
                        <div class="card-body p-0">
                            <div class="table table-responsive">
                                <!-- For Extended & Compact -->
                                <table ng-if="reportData.length>0" class="myDiaryDataTableView table table-bordered table-striped table-sm" id="forecastreport">
                                    <thead>
                                        <tr>
                                            <th>Profile Name</th>
                                            <th ng-repeat-start="wk in weeks" class="weekAct">Week {{ wk.week }} </th>
                                            <th ng-repeat-end class="weekNormal">Week {{ wk.week }} Act ({{wk.start_day}}-{{wk.end_day}})</th>
                                            <th class="plannedHours">Planned Hours</th>
                                            <th class="actualHours">Actual Hours</th>
                                            <!-- <th>Total Hours</th> -->
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr ng-repeat="profile in reportData">
                                            <td><a ng-click="getProfileDetail({{profile.profile_id}})" style="cursor: pointer;" title="Detailed View">{{ profile.name }}</a></td>
                                            <td ng-repeat-start="weekData in profile.weeks" class="weekAct">
                                                {{ weekData.forecastHour }}
                                            </td>
                                            <td ng-repeat-end class="weekNormal">
                                                {{ weekData.total_hours }}
                                            </td>
                                            <td class="plannedHours">{{ profile.Hours}}</td>
                                            <td class="actualHours">{{ profile.actualHours }}</td>
                                            <!-- <td>{{ profile.actualHours + profile.Hours }}</td> -->
                                        </tr>
                                        <!-- <tr>
                                            <td>Total</td>
                                           <td colspan="{{lenColSpan}}" style="text-align: end;"></td>
                                           <td>{{ totalAmt }}</td>
                                        </tr> -->
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>

                </div>

                <div class="col-md-12">
                    <div class="card card-primary card-outline">
                        <div class="card-header border-transparent  mb-1">
                            <h3 class="card-title">Profile Detailed Report</h3>
                        </div>
                        <div class="card-body p-0">
                            <div class="table table-responsive">
                                <!-- For Extended & Compact -->
                                <table ng-if="reportDataDetail.length>0" class="myDiaryDataTableView table table-bordered table-striped table-sm" id="forecastreportdetail">
                                    <thead>
                                        <tr>
                                            <th>Hero</th>
                                            <th ng-repeat="wk in weeks" class="weekNormal">Week {{ wk.week }} Act ({{wk.start_day}}-{{wk.end_day}})</th>
                                            <!-- <th ng-repeat-end class="weekNormal">Week {{ week }} Act</th> -->
                                            <!-- <th>Planned Hours</th> -->
                                            <th class="actualHours">Actual Hours</th>
                                            <th>Billing Rate</th>
                                            <th>Total Amt</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr ng-repeat="profile in reportDataDetail">
                                            <td>{{ profile.name }}</td>
                                            <td ng-repeat="weekData in profile.weeks" class="weekNormal">
                                                {{ weekData.total_hours }}
                                            </td>
                                            <!-- <td ng-repeat-end class="weekNormal">
                                                {{ weekData.total_hours }}
                                            </td> -->
                                            <!-- <td>{{ profile.Hours}}</td> -->
                                            <td class="actualHours">{{ profile.actualHours }}</td>
                                            <td>{{ profile.weeks[0].billing_rate }}</td>
                                            <td>{{ profile.actualHours  * profile.weeks[0].billing_rate  }}</td>
                                        </tr>
                                        <!-- <tr>
                                            <td>Total</td>
                                           <td colspan="{{lenColSpan}}" style="text-align: end;"></td>
                                           <td>{{ totalAmt }}</td>
                                        </tr> -->
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </section>
</div>
<style>
.loading-gif {
    position: absolute;
    top: 40%;
    left: 50%;
    margin: 50px 0px 0px -50px;
    width:10%;
    z-index: 999;
}
.weekend{
    background-color: gray;
}
.fixedHeader{
    background-color: #f1f1f1;
    z-index: 9999;
}
th, td { white-space: nowrap; }
</style>
