<div class="content-wrapper" ng-if="!myAccess.heroSkills">
  <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>
<div class="content-wrapper" ng-if="myAccess.heroSkills">
  <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 By Skills ({{(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="form-group row">
            <div class="col-sm-4">
              <label>Hero</label>
              <ui-select
                ng-model="filter.hero"
                theme="bootstrap"
                title="Select a Hero"
                class=""
              >
                <ui-select-match
                  placeholder="Select or search a Hero in the list..."
                  >{{$select.selected.name}}</ui-select-match
                >
                <ui-select-choices
                  repeat="e.id as e in allHeroes | filter: $select.search"
                >
                  <span
                    ng-bind-html="e.name | highlight: $select.search"
                  ></span>
                </ui-select-choices>
              </ui-select>
            </div>
            <div class="col-sm-3">
              <label>Revenue Center</label>
              <ui-select
                ng-model="filter.rc"
                theme="bootstrap"
                title="Select a Hero"
                class=""
              >
                <ui-select-match
                  placeholder="Select or search a Hero in the list..."
                  >{{$select.selected.rc_name}}</ui-select-match
                >
                <ui-select-choices
                  repeat="e.revenuecenterid as e in revenueCenterList | filter: $select.search"
                >
                  <span
                    ng-bind-html="e.rc_name | highlight: $select.search"
                  ></span>
                </ui-select-choices>
              </ui-select>
            </div>
            <div class="col-sm-2" style="padding-top: 18px">
              <button
                type="button"
                class="btn btn-success"
                ng-click="searchRC_OR_Hero(filter)"
              >
                Search
              </button>
            </div>
          </div>
        </div>
        <div class="col-md-12">
          <div class="form-group row">
            <div class="col-sm-3">
              <label>Skill Name</label>
              <input
                type="text"
                class="form-control"
                ng-model="searchSkill"
                placeholder="Enter Skill Name"
              />
            </div>
            <div class="col-sm-3">
              <label>Level</label>
              <select class="form-control" ng-model="selectLevel">
                <option value="1">Show All</option>
                <option value="2">Knowledge</option>
                <option value="3">Hands On Experience</option>
              </select>
            </div>
            <div class="col-sm-2" style="padding-top: 18px">
              <button
                type="button"
                class="btn btn-success"
                ng-click="searchSkillButton(searchSkill,selectLevel)"
              >
                Filter
              </button>
            </div>
          </div>
        </div>
      </div>
      <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">Skill 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>
            <img
              class="loading-gif center-block"
              style="margin-left: 45%"
              width="100"
              height="100"
              ng-show="showLoader"
              ng-src="{{baseurl}}/app/uploads/loading.gif"
            />
            <div class="card-body p-0 mt-2" ng-if="heroes.length > 0">
              <div class="table-responsive">
                <table
                  id="heroSkills"
                  class="table table-bordered table-striped table-sm"
                >
                  <thead>
                    <tr>
                      <th>Name<br />Email / Mobile</th>
                      <th>Code</th>
                      <th>Designation</th>
                      <th>Manager</th>
                      <th>Experience (In Months)</th>
                      <th>Skills</th>
                      <th>Skill Group</th>
                      <th>All Skills</th>
                      <th>Total Experience (In Years)</th>
                      <th>Skill Experience Level</th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr
                      ng-repeat="hero in heroes | orderBy : '-skill'"
                      class="{{hero.is_admin ? 'font-weight-bold' : ''}}"
                    >
                      <td>
                        <span class="nowrap"
                          >{{hero.fname + ' ' + hero.lname}}</span
                        ><span ng-if="hero.is_admin"
                          ><i class="fas fa-check-circle"> &nbsp;</i></span
                        ><br />
                      </td>
                      <td>{{hero.emp_code}}</td>
                      <td>
                        <span class="nowrap">{{hero.emp_designation}}</span>
                      </td>
                      <td>{{hero.lm_fn + ' ' + hero.lm_ln}}</td>
                      <td>
                        <span class="nowrap"
                          >{{ (hero.exp_in_month == null) ? '-' :
                          hero.exp_in_month }}</span
                        >
                      </td>
                      <td>{{ hero.skill }}</td>
                      <td>{{ hero.sg_name }}</td>
                      <td>
                        <div>
                          <small
                            class="badge bg-primary ml-1"
                            ng-repeat="sk in hero.skills.split(',') | unique:sk"
                            >{{sk}}</small
                          >
                        </div>
                      </td>
                      <td>
                        <span class="nowrap"
                          >{{ (hero.emp_yoe == null) ? '-' : hero.emp_yoe
                          }}</span
                        >
                      </td>
                      <td>
                        <span class="nowrap text-capitalize"
                          >{{ (hero.exp_level == null) ? '-' :
                          hero.exp_level}}</span
                        >
                      </td>
                    </tr>
                  </tbody>
                </table>
              </div>
            </div>
            <div class="card-body p-0 mt-2 mb-5" ng-if="heroes.length == 0">
              <center>No data Found.</center>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- Skill Matrix -->

    <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">Skill Cummulative 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
                  id="skillsMatrix"
                  class="table table-bordered table-striped table-sm"
                >
                  <thead>
                    <tr>
                      <th>Skill Group</th>
                      <th>Skill</th>
                      <th>No. of Knowledge (Count)</th>
                      <th>No. of Hands On Exp. (Count)</th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr ng-repeat="skill in skillsMatrix">
                      <td>{{skill.sg_name}}</td>
                      <td>
                        <a
                          ng-href="{{baseurl}}/heroes/heroListBySkill/{{skill.id}}"
                          >{{skill.skl_name}}</a
                        >
                      </td>
                      <td>{{skill.knwldge}}</td>
                      <td>{{skill.handonex}}</td>
                    </tr>
                  </tbody>
                </table>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
</div>
