<section>
    <div class="row">
        <div class="col-sm-1">
            <label class="control-label" style="margin-top: 6px !important;">
                <span style="font-weight: 600;">Date:</span>
            </label>
        </div>
        <div class="col-sm-2">
            <input type="text"  placeholder="From & To Date" class=" form-control"
              (bsValueChange)="onrepdateValueChange($event)" id="selectedDaterange" bsDaterangepicker
              [(bsValue)]="dateRange" [bsConfig]="{ adaptivePosition: true,dateInputFormat:'MM/DD/YYYY'}" style="margin-left: -30px;
               width: -webkit-fill-available;">  
        </div>
        <div class="col-sm-4"></div>
        <div class="col-sm-5">
          <div class="pull-right">
            <input type="text" ng-model="schange" id="schange" style="display:none; visibility:collapse; height:1px;" />
            <div class="input-group input-group-sm" style="width: 150px;">
               <input type="text" class="form-control pull-right" placeholder="Search..." [(ngModel)]="searchText" [ngModelOptions]="{standalone: true}" aria-label="Search">
               <span class="input-group-append">
               <button class="btn btn-primary waves-effect waves-themed btn-sm">
               <span class="fal fa-search"></span>
               </button>
               </span>                  
            </div>
         </div>
        </div>
    </div>
     <div >
        <div class="table-responsive">
            <table class="table table-bordered table-condensed table-hover table-striped">
              <thead class="headings">
                <tr>
                  <th class="sno_width">#</th>
                  <th class="pointer" (click)="sort('project_subtitle')">
                    Workflow
                    <i *ngIf="key =='errorcategory'" class="fa {{reverse==true?'fa-caret-up':'fa-caret-down'}}"></i>
                  </th>
                  <th class="pointer" (click)="sort('projectid')">
                    Project ID
                    <i *ngIf="key =='projectid'" class="fa {{reverse==true?'fa-caret-up':'fa-caret-down'}}"></i>
                  </th>
                  <th class="pointer" (click)="sort('productionagent')">
                    Production Agent
                     <i *ngIf="key =='qaagent'" class="fa {{reverse==true?'fa-caret-up':'fa-caret-down'}}"></i>
                   </th> 
                  <th class="pointer" (click)="sort('errorcategory')">
                    Error Category
                    <i *ngIf="key =='errorcategory'" class="fa {{reverse==true?'fa-caret-up':'fa-caret-down'}}"></i>
                  </th>
                  <th class="pointer" (click)="sort('errorcategory')">
                    Error Type
                    <i *ngIf="key =='errorcategory'" class="fa {{reverse==true?'fa-caret-up':'fa-caret-down'}}"></i>
                  </th>
                  <th class="pointer" (click)="sort('remarks')">
                    Remarks
                    <i *ngIf="key =='remarks'" class="fa {{reverse==true?'fa-caret-up':'fa-caret-down'}}"></i>
                  </th>
                  <th class="pointer" (click)="sort('jobtitle')">
                    Job Title
                    <i *ngIf="key =='jobtitle'" class="fa {{reverse==true?'fa-caret-up':'fa-caret-down'}}"></i>
                  </th>
                  <th class="pointer" (click)="sort('lottitle')">
                    Lot Title
                    <i *ngIf="key =='lottitle'" class="fa {{reverse==true?'fa-caret-up':'fa-caret-down'}}"></i>
                  </th>
                  <th class="pointer" (click)="sort('status')">
                   Status
                    <i *ngIf="key =='status'" class="fa {{reverse==true?'fa-caret-up':'fa-caret-down'}}"></i>
                  </th>
                   <th class="pointer" (click)="sort('bidentry')">
                    Bid Entry Agent
                     <i *ngIf="key =='qaagent'" class="fa {{reverse==true?'fa-caret-up':'fa-caret-down'}}"></i>
                   </th>
                  <th class="pointer" (click)="sort('qaagent')">
                    QA Agent
                    <i *ngIf="key =='qaagent'" class="fa {{reverse==true?'fa-caret-up':'fa-caret-down'}}"></i>
                  </th>
                  <th class="pointer" (click)="sort('qa_entereddate')">
                    QA Entry Date
                     <i *ngIf="key =='qa_entereddate'" class="fa {{reverse==true?'fa-caret-up':'fa-caret-down'}}"></i>
                   </th>
                   <th class="pointer" (click)="sort('qa_fixeddate')">
                    QA Fixing Date
                     <i *ngIf="key =='qa_fixeddate'" class="fa {{reverse==true?'fa-caret-up':'fa-caret-down'}}"></i>
                   </th>
                </tr>
              </thead>
              <tbody>
                <tr *ngFor="let item of recorderrorlst| orderBy: key : reverse |filter:searchText |paginate: { itemsPerPage: itemsPerPage, currentPage: p};let i = index">
                  <td>{{itemsPerPage * (p - 1) + i + 1}}</td>
                  <td>{{item.project_subtitle}}</td>
                  <td>{{item.projectid}}</td>
                  <td>{{item.productionagent}}</td>	
                    <td>{{item.errorcategory}}</td>
                    <td>{{item.errortype}}</td>
                    <td>{{item.remarks}}</td>
                    <td>{{item.jobtitle}}</td>
                    <td>{{item.lottitle}}</td>
                    <td>{{item.status}}</td>					  
                    <td>{{item.bidentry}}</td>						  
                    <td>{{item.qaagent}}</td>	
                    <td>{{item.qa_entereddate}}</td>
                    <td>{{item.qa_fixeddate}}</td>					 
                </tr>
                <tr *ngIf=" recorderrorlst.length==0 || (recorderrorlst |filter:searchText).length === 0">
                  <td colspan="11" style="text-align:center;">No Records Found</td></tr>
        
              </tbody>
            </table>
            <div *ngIf="recorderrorlst && recorderrorlst.length!=0" class="pull-right">
              <pagination-controls (pageChange)="p = $event"></pagination-controls>
            </div>
          </div>
     </div>
</section>
<ngx-spinner bdColor="rgba(255, 255, 255, 0.8)" size="small" color="#000000" type="ball-fall" [fullScreen]="false">
  <p style="color: black;"> Loading... </p>
</ngx-spinner>