<div class="content-wrapper">
    <section class="content-header">
        <div class="container-fluid">
            <div class="row mb-2">
                <div class="col-sm-6">
                    <h1 class="text-warning">
                        <go-back/>
                        <i class="fas fa-users"></i> My Heroes List ({{myHeroes.length}})
                    </h1>
                </div>
                <div class="col-sm-6">
                    <ol class="breadcrumb float-sm-right">
                        <li class="breadcrumb-item"><a ng-href="{{baseurl}}/dashboard">Home</a></li>
                        <li class="breadcrumb-item active">My Heroes</li>
                    </ol>
                </div>
            </div>
        </div><!-- /.container-fluid -->
    </section>
    <style>
        .badge{
            font-size: 95% !important;
        }
    </style>
    <section class="content">
        <div class="container-fluid">
            <div class="row">
                <div class="col-md-12">
                    <div class="card card-warning card-outline">   
                        <div class="card-header border-transparent">
                            <h3 class="card-title">Goals Report</h3>
                            <div class="card-tools">
                                <div class="btn-group">
                                    <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 mt-2">
                            <div class="row p-3">
                                <div class="col-sm-2"></div>
                                <div class="col-sm-4">
                                    <label>Select Template</Select></label>
                                    <select class="form-control" ng-model="selectTemplate" ng-change="changeTemplate(selectTemplate)" ng-disabled="false">
                                        <option value="0" selected="selected">All</option>
                                        <option ng-if="temp.is_active == 1" ng-repeat="temp in allGoalTemplates" value="{{temp.id}}">{{temp.name}}</option>
                                    </select>
                                </div>
                                
                                <div class="col-sm-4">
                                    <label>Select Biiling Type</Select></label>
                                    <select class="form-control" ng-model="selectBillingType" ng-change="billingType(selectBillingType)" ng-disabled="selectTemplate!=0">
                                        <option value="1">Pool</option>
                                        <option value="2">No Billing</option>
                                        <option value="3">Partial</option>
                                        <option value="4">New Joinee</option>
                                    </select>
                                </div>
                            </div>
                            <div class="table-responsive">
                                <table id="heroList" class="table table-bordered table-striped table-sm heroList">
                                    <thead>
                                        <tr>
                                            <th style="width:40px;">S.N.</th>
                                            <th style="width:200px">Name<br>Email / Mobile</th>
                                            <th style="width:80px;">Code</th>
                                            <th style="width:100px;">Designation</th>
                                            <th style="width:100px;">Department</th>  
                                            <th style="width:100px;" data-toggle="tooltip" title="Date of Joining"><span class="nowrap">DoJ <i class="fas fa-question-circle"></i></span></th>
                                            <th data-toggle="tooltip" title="Years of Experience/Relevant Years of Experience"><span class="nowrap">YoE/Relevant YOE <i class="fas fa-question-circle"></i></span></th>
                                            <th style="width:100px;">Total Assigned Goals</th> 
                                            <th style="width:100px;">Required Hours</th> 
                                            <th style="width:100px;">Completed Hours</th> 
                                            <th style="width:100px;">Expired Goals</th> 
                                            <!-- <th style="width:100px;">Comments Count</th>    -->
                                            <!-- <th>Draft Goal</th> -->
                                            <th>In-Progress Goal</th>
                                            <!-- <th>Approved Goal</th> -->
                                            <th>Goal Completed</th>
                                            <th>Actions</th>
                                            <th>Assign Goals</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr ng-repeat="hero in myHeroes track by $index" class="{{hero.is_admin ? 'font-weight-bold' : ''}}">
                                            <td>{{$index+1}}</td>
                                            <td>
                                                <a href="/heroes/view/{{hero.eid}}" target="_blank"><span class="nowrap">{{hero.emp_first_name + ' ' + hero.emp_last_name}}</span><span ng-if="hero.is_admin"><i class="fas fa-check-circle"> &nbsp;</i></span></a><br>
                                                <span class="nowrap"><a href="{{'mailto:'+hero.emp_email}}" target="_blank">{{hero.emp_email}}</a></span><br>
                                                <span class=""><a target="_blank" href="{{'tel:+91'+hero.emp_mobile}}">{{hero.emp_mobile}}</a></span>                                                
                                            </td>
                                            <td>{{hero.emp_code}}</td>       
                                            <td>{{hero.desg_name}}</td>                                     
                                            <td class="text-center" style="vertical-align: middle;"><span class="badge {{hero.emp_department.toLowerCase()}}">{{hero.emp_department}}</span></td>
                                            <td><span class="nowrap">{{hero.emp_doj | date:'dd MMM yyyy'}}</span></td>
                                            <td><span class="nowrap" ng-if="hero.emp_yoe">{{hero.emp_yoe}}</span><span class="nowrap" ng-if="hero.emp_relevant_yoe">/{{hero.emp_relevant_yoe}}</span></td>
                                            <td><span>{{hero.totalAssignedGoals}}</span></td>
                                            <td><span>{{hero.reqHours}}</span></td>
                                            <td><span>{{hero.completedHours}}</span></td>
                                            <td><span>{{hero.expiredGoals}}</span></td>
                                            <!-- <td class="text-center"><span class="badge badge-success">{{ (hero.comment_count.length > 0) ? hero.comment_count[0].count : 0  }}</span></td> -->
                                            <!-- <td class="text-center"><span class="badge badge-danger">{{hero.draftCounter}}</span></td> -->
                                            <td class="text-center"><span class="badge badge-warning">{{hero.progressCounter}}</span></td>
                                            <!-- <td class="text-center"><span class="badge badge-success">{{hero.doneCounter}}</span></td> -->
                                            <td class="text-center"><span class="badge badge-success">{{hero.goalCompleted}}</span></td>
                                            <td><a href="/goal-dashboard/list/{{hero.eid}}/{{hero.emp_lm}}">View Goals</a>
                                            </td>
                                            <td>
                                                <a ng-if="selectTemplate==0" href="/goal-dashboard/view/{{hero.eid}}/">Assign Goals</a>
                                                <!-- <a ng-if="selectTemplate!=0" href="#" ng-click="deleteHeroGoals({{hero.eid}},{{hero.eid}})">Unassign Goals</a> -->
                                                <button class="btn btn-warning btn-xs" ng-click="deleteHeroGoals({{hero.eid}},{{selectTemplate}})" ng-if="selectTemplate!=0"><i title="Delete goals" class="fas fa-trash"></i> <strong>Unassign Goals</strong></button>
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                            <!-- /.table-responsive -->
                        </div>
                    </div>
                </div>

                <!-- Consolidated Report -->

                <div class="col-md-12">
                    <div class="card card-warning card-outline">   
                        <div class="card-header border-transparent">
                            <h3 class="card-title">Goals Training Wise Report</h3>
                            <div class="card-tools">
                                <div class="btn-group">
                                    <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 mt-2">
                            <div class="table-responsive">
                                <table class="table table-bordered table-striped table-sm heroList2">
                                    <thead>
                                        <tr>
                                            <th style="width:40px;">S.N.</th>
                                            <th style="width:200px">Name<br>Email</th>
                                            <th style="width:80px;">Code</th> 
                                            <th style="width:80px;">Template Name</th>  
                                            <th style="width:100px;">Assigned Goals</th>
                                            <th style="width:100px;">Completed Goals</th> 
                                            <th>In-Progress Goal</th>
                                            <th>Goal Not Started</th>
                                            <th>Time Required</th>
                                            <th>Time Completed</th>
                                            <th>Assign Date</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr ng-repeat="hero in consolidatedReport track by $index" class="{{hero.is_admin ? 'font-weight-bold' : ''}}">
                                            <td>{{$index+1}}</td>
                                            <td>
                                                <a href="/heroes/view/{{hero.eid}}" target="_blank"><span class="nowrap">{{hero.emp_first_name + ' ' + hero.emp_last_name}}</span><span ng-if="hero.is_admin"><i class="fas fa-check-circle"> &nbsp;</i></span></a><br>
                                                <span class="nowrap"><a href="{{'mailto:'+hero.emp_email}}" target="_blank">{{hero.emp_email}}</a></span><br>
                                                <span class=""><a target="_blank" href="{{'tel:+91'+hero.emp_mobile}}">{{hero.emp_mobile}}</a></span>                                                
                                            </td>
                                            <td>{{hero.emp_code}}</td>       
                                            <td>{{hero.template_name}}</td>                                     
                                            <td><span>{{hero.total_goals}}</span></td>
                                            <td><span>{{hero.total_completed}}</span></td>
                                            <td><span>{{hero.in_progress}}</span></td>
                                            <td><span>{{hero.not_started}}</span></td>
                                            <td><span>{{hero.total_hours}}</span></td>
                                            <td><span>{{hero.completed_hours}}</span></td>
                                            <td><span>{{hero.date_assigned}}</span></td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                            <!-- /.table-responsive -->
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>    
</div>