<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> Heroes List
                    </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">Heroes</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="card card-warning card-outline">
                        <div class="card-header border-transparent">
                            <h3 class="card-title">&nbsp;</h3>
                            <div style="position: absolute;left:42%;z-index:101;top:0">Select Overall Assessment:
                                <select ng-change="handleOverallAssessment()" class="form-control" 
                                ng-model="selectedAssessment" 
                                ng-options="item.ae_id as item.ae_name for item in allOverallAssessment"></select>
                            </div>
                            <div class="col-sm-4">
                                <span ng-repeat="opt in options track by $index">
                                    <label><input type="radio" ng-click="toggleAssigned($index)"  ng-checked="showAssigned==opt.value?true:false" name="toggle_record"/> {{opt.label}}</label> &nbsp;
                                </span>                                
                            </div>
                            <div class="card-tools" ng-if="selectedAssessment.length > 0">
                                <div class="btn-group">
                                    <!-- uncheckAllHeroes() -->
                                    <button type="button" disabled="disabled" class="btn btn-info" ng-click="">Uncheck Heroes <i class="fas fa-save"></i></button>  
                                    <button type="button" class="btn btn-primary" ng-click="submitAssignment()">Submit <i class="fas fa-save"></i></button>                                
                                    
                                </div> 
                            </div>
                        </div>
                        <div class="card-body p-0 mt-2">
                            <div class="table-responsive">
                                <table id="heroList" class="table table-bordered table-striped table-sm">
                                    <thead>
                                        <tr>
                                            <th> 
                                                <input ng-click="toggleAll()" type="checkbox" ng-checked="isAllSelected" ng-model="isAllSelected" ng-disabled="selectedAssessment==''" /> All
                                            </th>
                                            <th>Name<br>Email / Mobile</th>
                                            <th>Code</th>
                                            <th>Manager</th>
                                            <th>Department</th>
                                            <th>Designation</th>
                                            <th>Revenue Center</th>
                                            <th 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>                                        
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr ng-repeat="hero in heroes track by $index" class="{{hero.is_admin ? 'font-weight-bold' : ''}}} {{ showAssigned=='all' ? '' : showAssigned=='checked' && hero.is_overall?'':showAssigned=='unchecked' && !hero.is_overall?'':'d-none'}}">
                                            <td>
                                                <input type="checkbox" ng-click="toggleOne({{$index}})" ng-model="hero.is_overall" ng-checked="hero.is_overall" ng-disabled="selectedAssessment==''">
                                            </td>
                                            <td>
                                                <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><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><br/>
                                                <span class=""><a target="_blank" href="{{'/heroes/feedback/'+hero.employeeid}}"><i class="fas fa-comments"/> </a></span>
                                            </td>
                                            <td>{{hero.emp_code}}</td>
                                            <td>
                                                <a href="/heroes/view/{{hero.emp_lm}}" target="_blank"  class="nowrap">{{hero.lm_fn + ' ' + hero.lm_mn + ' ' + hero.lm_ln}}</a>
                                                <select ng-if="isMultiManager" ng-change="handleManagerChange($index,hero.emp_lm)" class="form-control custom-select" 
                                                    ng-model="hero.emp_lm" value="hero.emp_lm"
                                                    ng-options="item.id as item.manager_name for item in managerList"></select>
                                            </td>
                                            <td><span class="badge {{hero.emp_department.toLowerCase()}}">{{hero.emp_department}}</span></td>
                                            <td><span class="nowrap">{{hero.emp_designation}}</span></td>
                                            <td><span class="nowrap">{{hero.rc_name}}</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>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                            <!-- /.table-responsive -->
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>    
</div>
