<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*/}
</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> My Diary Unfilled Monthly Report

                    </h1>
                </div>
                <div class="col-sm-2 offset-2">
                    <button ng-click="goTo($event,'MyDiaryUnfilledReportWeekly')" type="button" class="btn btn-warning"><span class="d-none d-lg-inline-block">Go To Weekly Unfilled Report</span></button>
                </div>
                <div class="col-sm-5">
                    <ol class="breadcrumb float-sm-right">
                        <li class="breadcrumb-item"><a ng-href="/dashboard" href="/dashboard">Home</a></li>
                        <li class="breadcrumb-item active">My Diary</li>
                    </ol>
                </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-4">
                            <input type="month" class="form-control ng-pristine ng-valid ng-empty ng-touched" ng-model="filter.monthyear">
                        </div>
                        <!-- <div class="col-sm-2"><input data-toggle="tooltip" title="From Date" type=text max-date="{{filter.toDate}}" date-picker placeholder='From Date (DD-MM-YYYY)' dateformat='dd-mm-yy' maxlength="10" ng-required='true' class='form-control' ng-model='filter.fromDate'/></div> -->
                        <!-- <div class="col-sm-2"><input data-toggle="tooltip" title="To Date" type=text min-date="{{filter.fromDate}}" date-picker placeholder='To Date (DD-MM-YYYY)' dateformat='dd-mm-yy' maxlength="10" ng-required='true' class='form-control' min ng-model='filter.toDate'/></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="">Select Revenue Center</option>
                            <option ng-repeat="rc in revenueCenters" value="{{rc.revenuecenterid}}">{{rc.rc_name}}</option>
                            </select>
                        </div>
                        
                        <div class="col-sm-2">
                            <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-click="dateChanged()" ><i class="fa fa-filter"></i> Filter</button>
                            <button ng-if="filter.proj_id!=0 && reportViewModel!='3' && showBtn == true" class="btn btn-success float-right" ng-click="PreBilledSave()"><i class="fa fa-save"></i> Save & Update Billing</button>
                            <!-- <button ng-if="filter.proj_id!=0 && reportViewModel=='3'" class="btn btn-success float-right" ng-if="showBtn" ng-click="PreBilledSaveWeekly()"><i class="fa fa-save"></i> Save</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 class="card-tools">
                                <div class="btn-group">
                                    <select data-toggle="tooltip" ng-change="reportView(reportViewModel)" title="Select ReportView" class="form-control custom-select" ng-model="reportViewModel">
                                        <option value="1">Extended</option>
                                        <option value="2">Compact</option>
                                        <option value="3">Weekly Compact</option>
                                    </select>
                                    <button type="button" title="Fullscreen Toggle" class="btn btn-dark toggle-fullscreen"><i class="fas fa-expand"></i></button>
                                    <button type="button" class="btn btn-dark" data-widget="collapse"><i class="fas fa-minus"></i></button>
                                </div>
                            </div>
                        </div>
                        <div class="card-body p-0">
                            <div class="table table-responsive" ng-if="reportViewModel!='3'">
                                <span ng-repeat="(key,val) in tblheader">{{key?key:'Date'}} test</span>
                                <!-- For Extended & Compact -->
                                <table class="myDiaryDataTableView table table-bordered table-striped table-sm" id="myDiaryDataTableView">
                                    <thead>
                                        <tr>
                                            <th class="fixedHeader">#</th>
                                            <th class="fixedHeader">Hero</th>
                                            <th class="fixedHeader">Emp Id</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                    <tr ng-repeat="d in myDiary.default">
                                        <td class="fixedHeader">{{$index+1}}</td>
                                        <td class="fixedHeader"><span>{{d.emp_first_name +' '+d.emp_last_name}}</span></td>
                                        <td class="fixedHeader"><span>{{d.emp_code}}</span></td>
                                        <!-- <td class="fixedHeader" ng-if="reportViewModel==1"><span>{{d.rc_name}}</span></td>
                                        <td class="fixedHeader" ng-if="reportViewModel==1"><span>{{d.emp_email}}</span></td> -->
                                        <td ng-repeat-start="fil in d.logged_hours" style="text-align: end;" ng-if="fil.currentDay!=6" class="{{ fil.logtype.search('24') != -1 ? 'bg-warning' : '' }} {{fil.currentDay == 0 || fil.currentDay == 6 || fil.lastDayOfMonth ? 'weekend' : ''}}">
                                            <strong ng-if="!fil.lastWeekData">{{ fil.logtype == '' ?  '-' : ( fil.logtype.search('16') != -1 || fil.logtype.search('17') != -1) ? 'L/H' : fil.hours   }} {{ fil.logtype.search('24') != -1 ? '(HF)' : ''  }}</strong> 
                                            <strong ng-if="fil.lastWeekData">{{ fil.lastWeekData.hours   }}</strong> 
                                        </td>
                                        
                                        <td ng-repeat-end class="managerFilled {{fil.currentDay == 0 || fil.currentDay == 6 || fil.lastDayOfMonth ? 'weekend' : ''}}" ng-if="fil.currentDay!=6"> 
                                            <span ng-if="!fil.lastWeekData" ng-model="fil.prebilled" class="d-none">{{ fil.logtype == '' ? '-' : ( fil.logtype.search('16') != -1 || fil.logtype.search('17') != -1) ? '0' : fil.prebilled != null ? fil.prebilled : fil.hours }}</span>
                                            <input ng-if="!fil.lastWeekData" type="text" ng-disabled="fil.logtype.search('16') != -1 || fil.logtype.search('17') != -1 || fil.dates.search('Sun') != -1 || fil.dates.search('Sat') != -1" id="prebilled{{d.employeeid}}{{$index}}" ng-change="OnChangePrebilled(d.employeeid,$index,filter.proj_id,fil.inserton,fil.prebilled,'{{fil.prebilled}}',fil.logtype)" ng-model="fil.prebilled" name="prebilled" class="form-control text-bold {{filter.proj_id==0 ? 'd-none' : ''}} {{ fil.logtype == '' ? '' : ( fil.logtype.search('16') != -1 || fil.logtype.search('17') != -1) ? '' : fil.prebilled && fil.prebilled != 0 ? 'is-valid' : '' }}" ng-value="{{ fil.logtype == '' ? 0 : ( fil.logtype.search('16') != -1 || fil.logtype.search('17') != -1) ? 0 : fil.prebilled && fil.prebilled!=0 ? fil.prebilled : fil.hours }}">
                                            <strong ng-if="fil.lastWeekData">{{ fil.lastWeekData.preHours   }}</strong> 
                                        </td>
                                    </tr>
                                    </tbody>
                                </table>
                            </div>

                            <div class="table table-responsive" ng-if="reportViewModel=='3'">
                                
                                <span ng-repeat="(key,val) in tblheader2" >{{key?key:'Date'}} test</span>
                                <!-- For Extended & Compact -->
                                <table class="myDiaryDataTableView2 table table-bordered table-striped table-sm" id="myDiaryDataTableView2">
                                    <thead>
                                    <tr>
                                        <th class="fixedHeader">#</th>
                                        <th class="fixedHeader">Hero</th>
                                        <th class="fixedHeader">Emp Id</th>
                                        <!-- <th class="fixedHeader">Revenue Centre</th> -->
                                        <!-- <th class="fixedHeader">Email ID</th> -->
                                        <!-- <th ng-repeat-start="numWeek in numOfWeeksArr">
                                            <span>{{ numWeek.week }}-({{numWeek.days}})</span>
                                        </th>
                                        <th ng-repeat-end>
                                            <span>{{ numWeek.week }}-({{numWeek.days}})</span>
                                        </th> -->
                                    </tr>
                                    </thead>
                                    <tbody>
                                    <tr ng-repeat="d in myDiary.default">
                                        <td class="fixedHeader">{{$index+1}}</td>
                                        <td class="fixedHeader"><span>{{d.emp_first_name +' '+d.emp_last_name}}</span></td>
                                        <td class="fixedHeader"><span>{{d.emp_code}}</span></td>

                                        <!-- <td class="fixedHeader"><span>{{d.rc_name}}</span></td> -->
                                        <!-- <td class="fixedHeader"><span>{{d.emp_email}}</span></td> -->
                                        <!-- For weekly -->
                                        <td ng-repeat-start="fil in d.weeklyHours" style="text-align: end;">
                                            <strong>{{ fil.hours }}</strong> 
                                        </td>
                                        <td ng-repeat-end class="managerFilled" ng-if="filter.proj_id!=0"> 
                                            <span ng-model="fil.preHours" class="d-none">{{ fil.preHours != null ? fil.preHours : fil.hours }}</span>
                                            <!-- <input type="text" disabled="true" id="prebilled{{d.employeeid}}{{$index}}"  ng-model="fil.preHours" name="preHours" class="form-control text-bold {{filter.proj_id==0 ? 'd-none' : ''}} {{ fil.preHours != null ? 'is-valid' : '' }}" value="{{ fil.preHours != null ? fil.preHours : fil.hours }}"> -->
                                            <strong>{{ fil.preHours != null ? fil.preHours : fil.hours }}</strong> 
                                        </td>
                                    </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
            <div class="row">
                <div class="col-md-6">
                    <div class="card card-primary card-outline" ng-if="consolidatedData.length>0">
                        <div class="card-header border-transparent  mb-1">
                            <h3 class="card-title">Consolidate Data | <strong>Billing Type : {{billingType}}</strong></h3>
                            <div class="card-tools">
                                <div class="btn-group">
                                    <button type="button" class="btn btn-success ng-scope" ng-click="changeConsolidatedData()"><i class="fa fa-refresh"></i> Render</button>
                                    <button type="button" title="Fullscreen Toggle" class="btn btn-dark toggle-fullscreen"><i class="fas fa-expand"></i></button>
                                    <button type="button" class="btn btn-dark" data-widget="collapse"><i class="fas fa-minus"></i></button>
                                </div>
                            </div>
                        </div>
                        <div class="card-body p-0">
                            <div class="table table-responsive">
                                <table class="myDiaryDataTableView table table-bordered table-striped table-sm">
                                    <thead>
                                    <tr>
                                        <th>#</th>
                                        <th>Hero</th>
                                        <th class="{{billingType=='Daily'?'bg-warning':''}}">Total Days</th>
                                        <th class="{{billingType=='Hourly'?'bg-warning':''}}">Total Month Hours</th>
                                        <th>Rate</th>
                                        <th>Total</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    <tr ng-repeat="row in consolidatedData">
                                        <td>{{$index+1}}</td>
                                        <td><span>{{row.empName}}</span></td>
                                        <td class="{{billingType=='Daily'?'bg-warning':''}}"><span>{{row.totalDays}}</span></td>
                                        <td class="{{billingType=='Hourly'?'bg-warning':''}}"><span>{{row.totalMonthHours}}</span></td>
                                        <td><span>{{row.billing_rate}}</span></td>
                                        <td><span>{{row.total}}</span></td>
                                    </tr>
                                    <tr>
                                        <td>Total</td>
                                        <td></td>
                                        <td></td>
                                        <td></td>
                                        <td></td>
                                        <td>{{sum('total',consolidatedData)}}</td>
                                    </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="card card-primary card-outline" ng-if="consolidatedData.length>0">
                        <div class="card-header border-transparent  mb-1">
                            <h3 class="card-title"><strong>Invoice</strong></h3>
                            <div class="card-tools">
                                <div class="btn-group">
                                    <button type="button" title="Fullscreen Toggle" class="btn btn-dark toggle-fullscreen"><i class="fas fa-expand"></i></button>
                                    <button type="button" class="btn btn-dark" data-widget="collapse"><i class="fas fa-minus"></i></button>
                                </div>
                            </div>
                        </div>
                        <div class="card-body p-0">
                            <div class="table table-responsive">
                                <table class="table table-bordered table-striped table-sm">
                                    <tr>
                                        <td>Attn.</td>
                                        <td>{{invoiceData.attn}}</td>
                                    <tr>    
                                        <td>To</td>
                                        <td>{{invoiceData.invoice_to}}</td>
                                    </tr>
                                    <tr>
                                        <td>CC</td>
                                        <td>{{invoiceData.invoice_cc}}</td>
                                    </tr>
                                    <tr>
                                        <td>Company Code</td>
                                        <td>{{invoiceData.company_code}}</td>
                                    </tr>
                                    <tr>
                                        <td>Company Name</td>
                                        <td>{{invoiceData.company_name}}</td>
                                    </tr>
                                    <tr>
                                        <td>Description</td>
                                        <td>{{invoiceData.company_code}}</td>
                                    </tr>
                                </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>
