<!DOCTYPE html>
<html lang="en">
 <head>
  <style>
   td,
th {
	padding: 5px;
}

.fullTable {
	right: 0;
	position: fixed;
	height: 100vh;
	border-left: 2px solid #000;
	overflow: auto;
}

#eletable {
	z-index: 2;
	background: #fff;
}

div {
	overflow: auto;
}
  </style>
 </head>
 <body translate="no">
  <div ng-app="myApp" ng-controller="customersCtrl">
   <div class="col-md-7">
    <ul class="nav nav-tabs">
     <li class="active">
      <a href="#addEmployee">
       Add Employee
      </a>
     </li>
     <li>
      <a href="#filterEmployee">
       Filter Employee
      </a>
     </li>
    </ul>
    <div class="tab-content col-md-12">
     <form class="tab-pane fade in active" id="addEmployee">
      <h1>
       Add Employee
      </h1>
      <p>
       Name :
       <input ng-model="addEmployee.name" type="text"/>
      </p>
      <p>
       Designation :
       <input ng-model="addEmployee.designation" type="text"/>
      </p>
      <p>
       Company Id :
       <input ng-model="addEmployee.company.id" type="number"/>
      </p>
      <p>
       Company Name :
       <input ng-model="addEmployee.company.name" type="text"/>
      </p>
      <p>
       Rating :
       <input ng-model="addEmployee.rating" type="number"/>
      </p>
      <p>
       Check :
       <input ng-model="addEmployee.action" type="checkbox"/>
      </p>
      <button ng-click="addEmployeefunc()" type="reset">
       Add
      </button>
     </form>
     <form class="tab-pane fade" id="filterEmployee">
      <h1>
       Filter Employee
      </h1>
      <p>
       Name :
       <input ng-model="searchtest.name" type="text"/>
      </p>
      <p>
       Designation :
       <input ng-model="searchtest.designation" type="text"/>
      </p>
      <p>
       Company Name :
       <input ng-model="searchtest.company.name" type="text"/>
      </p>
      <p>
       Rating(greater than) :
       <input ng-model="minrating" type="number"/>
      </p>
      <p>
       Check :
       <select ng-model="searchtest.action">
        <option value="">
         Select
        </option>
        <option value="true">
         True
        </option>
        <option value="false">
         False
        </option>
       </select>
      </p>
      <button ng-click="resetFilter()" type="reset">
       Reset
      </button>
     </form>
    </div>
    <hr class="col-md-12"/>
    <h1 class="col-md-12">
     Filtered/Paginated Table
    </h1>
    <table class="table table-responsive col-md-12" id="eletable" ng-init="check=''">
     <tr>
      <th ng-click="order('name')">
       Name
      </th>
      <th ng-click="order('designation')">
       Designation
      </th>
      <th ng-click="order('company.name')">
       Company Name
      </th>
      <th ng-click="order('rating')">
       Ratings
      </th>
      <th ng-click="order('action')">
       Check
      </th>
      <th>
       Actions
      </th>
     </tr>
     <tr ng-repeat="client in clients | orderBy:predicate:reverse | filter:searchtest | filter: greaterThan('rating') | limitTo:pagelimit:sstart">
      <td>
       <div class="labelValues">
        {{client.name}}
       </div>
       <input class="hidden editers" ng-click="saveChange($event,client,'name')" type="text" value="{{ client.name}}"/>
      </td>
      <td>
       <div class="labelValues">
        {{client.designation}}
       </div>
       <input class="hidden editers" ng-click="saveChange($event,client,'designation')" type="text" value="{{ client.designation}}"/>
      </td>
      <td>
       <div class="labelValues">
        {{client.company.name}}
       </div>
       <input class="hidden editers" ng-click="saveChange($event,client,'company.name')" type="text" value="{{ client.company.name}}"/>
      </td>
      <td>
       <div class="labelValues">
        {{client.rating}}
       </div>
       <input class="hidden editers" ng-click="saveChange($event,client,'rating')" type="text" value="{{ client.rating}}"/>
      </td>
      <td>
       <div class="labelValues">
        {{client.action}}
       </div>
       <input class="hidden editers" ng-checked="{{client.action}}" ng-click="saveChange($event, client, 'action')" type="checkbox"/>
      </td>
      <td>
       <button class="btn btn-warning edit btn-xs" type="button">
        Edit
       </button>
       <button class="btn btn-primary save btn-xs hidden" type="button">
        Save
       </button>
       <button class="btn cancel btn-xs hidden" type="button">
        Cancel
       </button>
      </td>
     </tr>
    </table>
    <button class="prev" ng-click="prev($event)" ng-disabled="startReach">
     Previous
    </button>
    <button class="next" ng-click="next($event)" ng-disabled="endReach">
     Next
    </button>
   </div>
   <div class="col-md-5 fullTable">
    <h1>
     Full Table
    </h1>
    <table class="table table-responsive col-md-12">
     <tr>
      <th>
       Name
      </th>
      <th>
       Designation
      </th>
      <th>
       Company Name
      </th>
      <th>
       Ratings
      </th>
      <th>
       check
      </th>
     </tr>
     <tr ng-repeat="client in clients">
      <td>
       {{ client.name}}
      </td>
      <td>
       {{ client.designation}}
      </td>
      <td>
       {{ client.company.name}}
      </td>
      <td>
       {{ client.rating}}
      </td>
      <td>
       {{ client.action}}
      </td>
     </tr>
    </table>
   </div>
  </div>
 </body>
</html>
