<div class="content-wrapper" ng-if="myAccess.heroList">
    <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 ({{(heroes | filter:dynFilter).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">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">Active Heroes</h3>
                            <div class="card-tools">
                                <div class="btn-group" ng-if="false">
                                    <button ng-click="filterOptions.skipManager = !filterOptions.skipManager" type="button" class="btn btn-default btn-sm">
                                        <i class="fas {{filterOptions.skipManager ? 'fa-check' : 'fa-filter'}}"></i>
                                        <span class="d-none d-lg-inline-block">Skip Managers</span>
                                    </button>
                                    <button ng-click="filterOptions.unAssigne = !filterOptions.unAssigne" type="button" class="btn btn-default btn-sm">
                                        <i class="fas {{filterOptions.unAssigne ? 'fa-check' : 'fa-filter' }}"></i>
                                        <span class="d-none d-lg-inline-block">Unassigned Only</span>
                                    </button>
                                </div>
                                <div class="btn-group">
                                    <button type="button" class="toggle-vis btn btn-{{ !colOptions.emp_batch_code ? 'dark' : 'default'}}" data-column="1" ng-click="colOptions.emp_batch_code = !colOptions.emp_batch_code">Batch Code <i class="fas fa-{{colOptions.emp_batch_code ? 'eye-slash' : 'eye'}}"></i></button>
                                    <button type="button" class="toggle-vis btn btn-{{ !colOptions.designation ? 'dark' : 'default'}}" data-column="4" ng-click="colOptions.designation = !colOptions.designation">Department <i class="fas fa-{{colOptions.designation ? 'eye-slash' : 'eye'}}"></i></button>
                                    <button type="button" class="toggle-vis btn btn-{{ !colOptions.department ? 'dark' : 'default'}}" data-column="5" ng-click="colOptions.department = !colOptions.department">Designation <i class="fas fa-{{colOptions.department ? 'eye-slash' : 'eye'}}"></i></button>
                                    <button type="button" class="toggle-vis btn btn-{{ !colOptions.skills ? 'default' : 'dark'}}"  ng-click="colOptions.skills = !colOptions.skills">Skill <i class="fas fa-{{colOptions.skills ? 'eye' : 'eye-slash'}}"></i></button>
                                </div>

                                <div class="btn-group">
                                    <a href="/data/importcsv" class="btn btn-success" ng-if="isAllowImporter==true || isAdmin">Import Heroes</a>
                                    <button ng-click="goTo($event,'heroAdd')" type="button" class="btn btn-warning"><i class="fas fa-plus"></i> <span class="d-none d-lg-inline-block">Add Hero</span></button>
                                    <!--<button ng-click="goTo($event,'projectList')" type="button" class="btn btn-success"><i class="fas fa-table"></i> <span class="d-none d-lg-inline-block">View Project</span></button>-->
                                    <button type="button" title="Fullscreen Toggle" class="btn btn-dark toggle-fullscreen"><i class="fas fa-expand"></i></button>
                                    <button type="button" title="Collapse Toggle" class="btn btn-dark" data-widget="collapse"><i class="fas fa-minus"></i></button>
                                </div>

                            </div>
                        </div>
                        <div class="row">  
                            <div class="col-sm-4">  
                            </div>
                            <div class="col-sm-2">    
                                <label for="selectCountry">Country</label>     
                                <select class="form-control" id="selectCountry" ng-model="selectCountry" ng-change="filterToCountry(selectCountry)"> 
                                        <option value="0">All</option>      
                                        <option ng-repeat="x in countryList" value="{{x.id}}">{{x.country_name}}</option>    
                                </select>  
                            </div>
                        </div>
                        <div class="card-body p-0 mt-2" ng-if="heroes.length > 0">
                            <div class="table-responsive">
                                <table id="heroList" class="table table-bordered table-striped table-sm heroList">
                                    <thead>
                                    <tr>
                                        <th>Name<br>Email / Mobile</th>
                                        <th>Batch</th>
                                        <th>Code</th>
                                        <th>Manager</th>
                                        <th>Tagged</th>
                                        <th>Department</th>
                                        <th>Designation</th>
                                        <th>Revenue Center</th>
                                        <th>Is Certified ?</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">YoE/R. YOE <i class="fas fa-question-circle"></i></th>
                                        <th class="{{colOptions.skills==true ? '' : 'd-none'}}">Skills</th>
                                        <th ng-if="gUser.is_admin">Pool</th>
                                        <th ng-if="gUser.is_admin">Last Login</th>
                                        <th data-toggle="tooltip" title="Shadow Hours" class="bg-gray-dark"><span class="nowrap"><i class="fas fa-clock text-white"></i></span></th>
                                        <th>Actions</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    <tr ng-repeat="hero in heroes" class="{{hero.is_admin ? 'font-weight-bold' : ''}}">
                                        <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> 
                                            <span><a href="heroes/view/{{hero.employeeid}}" target="_blank"><i class="fas fa-external-link-alt"></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><span class="nowrap">{{hero.emp_batch_code}}</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></td>
                                        <td><a ng-if="hero.tagId!=null" href="/heroes/view/{{hero.tagId}}" target="_blank"  class="nowrap">{{hero.tagFirstName  + ' ' + hero.tagLastName}}</a><span ng-if="hero.tagId==null">-</span></td>
                                        <td><span class="badge {{hero.dept_name.toLowerCase()}}">{{hero.dept_name}}</span></td>
                                        <td><span class="nowrap">{{hero.emp_designation}}</span></td>
                                        <td><span class="nowrap">{{hero.rc_name}}</span></td>
                                        <td><span class="nowrap"><a href="/mycertificate/report-heroview/{{hero.employeeid}}" target="_blank" ng-if="hero.is_certified==true && hero.cert_hero_id=='0' ">Yes (Not Uploaded)</a>  <a href="/mycertificate/report-heroview/{{hero.employeeid}}" target="_blank" ng-if="hero.is_certified==true && hero.cert_hero_id=='1' ">Yes</a>  <span ng-if="hero.is_certified==false">No</span> </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 class="{{colOptions.skills==true ? '' : 'd-none'}}">
                                            <div><small class="badge bg-primary ml-1" ng-repeat="sk in hero.emp_skills.split(',')">{{sk}}</small></div>
                                        </td>
                                        <td ng-if="gUser.is_admin"><span class="{{'badge '+poolStatus(hero.emp_pool)}}">{{hoursToPercent(hero.emp_pool)}}</span></td>
                                        <td ng-if="gUser.is_admin">{{hero.emp_last_login | date: 'dd MMM yyyy HH:mm'}}</td>
                                        <td><span class="{{'badge '+poolStatus(hero.emp_shadow)}}">{{hoursToPercent(hero.emp_shadow)}}</span></td>
                                        <td>
                                            <div class="btn-group nowrap">
                                                <button type="button" class="btn btn-warning" ng-click="goToSelf('heroView',{employeeid:hero.employeeid})"><i class="fas fa-eye"></i> View</button>
                                                <button type="button" class="btn btn-warning dropdown-toggle" data-toggle="dropdown" ng-if="isActiveHeroes">
                                                    <span class="caret"></span>
                                                    <span class="sr-only">Toggle Dropdown</span>
                                                </button>
                                                <div class="dropdown-menu dropdown-menu-right" role="menu">
                                                    <button ng-if="myAccess.heroLoginAs" class="dropdown-item" ng-click="loginAs(hero.employeeid)"><i class="fas fa-key"></i> Login As</button>
                                                    <button ng-if="myAccess.heroEdit" class="dropdown-item" ng-click="goToSelf('heroEdit',{employeeid:hero.employeeid})"><i class="fas fa-pen"></i> Edit</button>
                                                    <button ng-if="myAccess.heroEdit" class="dropdown-item" ng-click="goToSelf('heroesUploadFile',{employeeid:hero.employeeid})"><i class="fas fa-upload"></i> Upload File</button>
                                                    <button ng-if="myAccess.resetPassword" class="dropdown-item" ng-click="resetPassword(hero)"><i class="fas fa-key"></i> Reset Password</button>
                                                    <!--<button ng-if="myAccess.allocationAdd" class="dropdown-item text-danger" ng-click="notInPool(hero)"><i class="fas fa-user"></i> Assign Project</button>-->
                                                    <button ng-if="myAccess.allocationAdd" class="dropdown-item" ng-click="goToSelf('heroProjectAdd',{employeeid:hero.employeeid})"><i class="fas fa-user"></i> Assign Project</button>
                                                    <button ng-if="myAccess.heroDelete" class="dropdown-item" ng-click="openHeroLeaveModel(hero)"><i class="fas fa-trash"></i> Remove</button>
                                                </div>
                                            </div>
                                        </td>
                                    </tr>
                                    </tbody>
                                </table>
                            </div>
                            <!-- /.table-responsive -->
                        </div>
                    </div>
                </div>
            </div>

            <!-- Inactive Heroes -->
            <div class="row">
                <div class="col-md-12">
                    <div class="card card-warning card-outline collapsed-card">
                        <div class="card-header border-transparent">
                            <h3 class="card-title">In-Active / Removed Heroes</h3>
                            <div class="card-tools">
                                <div class="btn-group">
                                    <!-- <button type="button" class="toggle-vis btn btn-{{ !colOptions.emp_batch_code ? 'dark' : 'default'}}" data-column="1" ng-click="colOptions.emp_batch_code = !colOptions.emp_batch_code">Batch Code <i class="fas fa-{{colOptions.emp_batch_code ? 'eye-slash' : 'eye'}}"></i></button>
                                    <button type="button" class="toggle-vis btn btn-{{ !colOptions.designation ? 'dark' : 'default'}}" data-column="4" ng-click="colOptions.designation = !colOptions.designation">Department <i class="fas fa-{{colOptions.designation ? 'eye-slash' : 'eye'}}"></i></button>
                                    <button type="button" class="toggle-vis btn btn-{{ !colOptions.department ? 'dark' : 'default'}}" data-column="5" ng-click="colOptions.department = !colOptions.department">Designation <i class="fas fa-{{colOptions.department ? 'eye-slash' : 'eye'}}"></i></button> -->
                                    <button type="button" class="toggle-vis btn btn-{{ !colOptions.skills ? 'default' : 'dark'}}"  ng-click="colOptions.skills = !colOptions.skills">Skill <i class="fas fa-{{colOptions.skills ? 'eye' : 'eye-slash'}}"></i></button>
                                </div>

                                <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" title="Collapse Toggle" class="btn btn-dark" data-widget="collapse"><i class="fas fa-plus"></i></button>
                                </div>

                            </div>
                        </div>
                        <div class="card-body p-0 mt-2" ng-if="inactiveHeroes.length > 0">
                            <div class="table-responsive">
                                <table id="inactiveHeroes" class="table table-bordered table-striped table-sm inactiveHeroes">
                                    <thead>
                                    <tr>
                                        <th>Name<br>Email / Mobile</th>
                                        <th>Batch</th>
                                        <th>Code</th>
                                        <th>Manager</th>
                                        <th>Tagged</th>
                                        <th>Department</th>
                                        <th>Designation</th>
                                        <th>Revenue Center</th>
                                        <th>Is Certified ?</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="Date of Leaving"><span class="nowrap">DoL <i class="fas fa-question-circle"></i></span></th>
                                        <th>Reason of Leaving</th>
                                        <th>Feedback</th>
                                        <th data-toggle="tooltip" title="Years of Experience/Relevant Years of Experience">YoE/R. YOE <i class="fas fa-question-circle"></i></th>
                                        <th class="{{colOptions.skills==true ? '' : 'd-none'}}">Skills</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    <tr ng-repeat="hero in inactiveHeroes" class="{{hero.is_admin ? 'font-weight-bold' : ''}}">
                                        <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><span class="nowrap">{{hero.emp_batch_code}}</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></td>
                                        <td><a ng-if="hero.tagId!=null" href="/heroes/view/{{hero.tagId}}" target="_blank"  class="nowrap">{{hero.tagFirstName  + ' ' + hero.tagLastName}}</a><span ng-if="hero.tagId==null">-</span></td>
                                        <td><span class="badge {{hero.dept_name.toLowerCase()}}">{{hero.dept_name}}</span></td>
                                        <td><span class="nowrap">{{hero.emp_designation}}</span></td>
                                        <td><span class="nowrap">{{hero.rc_name}}</span></td>
                                        <td><span class="nowrap"><a href="/mycertificate/report-heroview/{{hero.employeeid}}" target="_blank" ng-if="hero.is_certified==true && hero.cert_hero_id=='0' ">Yes (Not Uploaded)</a>  <a href="/mycertificate/report-heroview/{{hero.employeeid}}" target="_blank" ng-if="hero.is_certified==true && hero.cert_hero_id=='1' ">Yes</a>  <span ng-if="hero.is_certified==false">No</span> </span></td>
                                        <td><span class="nowrap">{{hero.emp_doj | date:'dd MMM yyyy'}}</span></td>
                                        <td><span class="nowrap">{{hero.last_date | datetz:'DD MMM YYYY'}}</span></td>
                                        <td><span class="nowrap">{{hero.release_type | capitalize}}</span></td>
                                        <td><span class="nowrap">{{hero.lm_comment}}</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 class="{{colOptions.skills==true ? '' : 'd-none'}}">
                                            <div><small class="badge bg-primary ml-1" ng-repeat="sk in hero.emp_skills.split(',')">{{sk}}</small></div>
                                        </td>
                                    </tr>
                                    </tbody>
                                </table>
                            </div>
                            <!-- /.table-responsive -->
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- <script type="text/ng-template" id="HeroLeave.html">
        <div class="">
            <div class="modal-header bg-gradient-gray-dark">
                <h4 class="modal-title" id="modal-title">Delete Hero: <strong class="text-warning">{{data.hero.emp_first_name + ' ' + data.hero.emp_last_name}}</strong></h4>
            </div>
            <div class="modal-body" id="modal-body">
                <h6 ng-if="!data.projects">Currently, No project assign to <strong class="text-gray-dark">{{data.hero.emp_first_name + ' ' + data.hero.emp_last_name}}</strong>, so click on 'Proceed to Delete' to delete Hero from Management Tool.</h6>
                <h6 ng-if="data.projects.length > 0">Project List</h6>
                <ol ng-if="data.projects.length > 0">
                    <li ng-repeat="p in data.projects">{{p.proj_name + ' of ' + p.acc_company_name}}</li>
                </ol>
                <p ng-if="data.projects.length > 0"><strong><i class="fas fa-exclamation-circle"></i> Please remove all the allocated projects first.</strong></p>
                <div class="form-check" ng-if="data.projects.length > 0">
                    <input ng-model="data.confirm" type="checkbox" class="form-check-input" id="confirm">
                    <label class="form-check-label" for="confirm">I have confirm to release <strong class="text-gray-dark">{{data.hero.emp_first_name + ' ' + data.hero.emp_last_name}}</strong> from above project and delete from Management Tool</label>
                </div>
            </div>
            <div class="modal-footer bg-gradient-gray-dark">
                <button ng-if="!data.projects" class="btn btn-default" type="button" ng-click="delHero(data)">Proceed to Delete</button>
                <button ng-if="data.confirm && data.projects.length == 0" class="btn btn-danger" type="button" ng-click="delHero(data)">Confirm and Delete</button>
                <button class="btn btn-primary" type="button" ng-click="cancel()">Cancel</button>
            </div>
        </div>
    </script> -->
    <script type="text/ng-template" id="HeroLeave.html">
        <div class="">
            <div class="modal-header bg-danger">
                <h3 class="modal-title" id="modal-title">Release from company</h3>
            </div>
            <div class="modal-body" id="modal-body">
                <p>Are you sure to remove <strong>{{data.hero.emp_first_name +' '+ data.hero.emp_last_name }} </string> ?</p>

                <div class="form-group">
                    <label for="removing_type">Reason of Releasing:</label>
                    <select class="form-control" ng-model="heroHistory.release_type">
                        <option value="">Select</option>
                        <option value="resigned">Resigned</option>
                        <option value="terminated">Terminated</option>
                        <option value="absconded">Absconded</option>
                    </select>
                </div>
                <div class="form-group">
                    <label for="lm_comment">Overall Manager's Feedback :</label>
                    <textarea required="required" ng-model="heroHistory.lm_comment" id="lm_comment" ng-required="true" class="form-control" rows="2" placeholder="Hero's feedback for current project" ></textarea>
                </div>
                <div class="form-group">
                    <label for="last_date">Date of Release</label>
                    <input id="last_date" type=text date-picker placeholder='YYYY-MM-DD' dateformat='yy-mm-dd' default='' maxlength="10" ng-required='true' class='form-control' ng-model='heroHistory.last_date'/>
                </div>
            </div>
            <div class="modal-footer bg-danger">
                <button class="btn btn-default" type="button" ng-click="removeHero()">Remove</button>
                <button class="btn btn-primary" type="button" ng-click="cancel()">Cancel</button>
            </div>
        </div>
    </script>
</div>
