
<content>
    <div>
      <div class="legend_box" style="display:none;">
          <a class="waves-light red" style="background: #337ab7 !important;box-shadow: 0 12px 20px -10px rgba(244, 67, 54, 0.28), 0 4px 20px 0px rgba(0, 0, 0, 0.12), 0 7px 8px -5px rgba(244, 67, 54, 0.2)">
              <span style="margin:30px; color:white;">YTS</span>
          </a>
          <a class="waves-light green" style="background: #f39c12 !important;box-shadow: 0 12px 20px -10px rgba(244, 67, 54, 0.28), 0 4px 20px 0px rgba(0, 0, 0, 0.12), 0 7px 8px -5px rgba(244, 67, 54, 0.2)">
              <span style="margin:5px; color:white;">In Progress</span>
          </a>
          <a class="waves-light green" style="background: #00a65a!important;box-shadow: 0 12px 20px -10px rgba(244, 67, 54, 0.28), 0 4px 20px 0px rgba(0, 0, 0, 0.12), 0 7px 8px -5px rgba(244, 67, 54, 0.2)">
              <span style="margin:5px; color:white;">Completed</span>
          </a>
          <a class="waves-light red" style="background: #d81b60 !important;box-shadow: 0 12px 20px -10px rgba(244, 67, 54, 0.28), 0 4px 20px 0px rgba(0, 0, 0, 0.12), 0 7px 8px -5px rgba(244, 67, 54, 0.2)">
              <span style="margin:10px; color:white;">Ignored</span>
          </a>
          <a class="waves-light red" style="background:purple !important;box-shadow: 0 12px 20px -10px rgba(244, 67, 54, 0.28), 0 4px 20px 0px rgba(0, 0, 0, 0.12), 0 7px 8px -5px rgba(244, 67, 54, 0.2)">
              <span style="margin:10px; color:white;">Waiting</span>
          </a>
          <a class="waves-light red" style="background: #a20596 !important;box-shadow: 0 12px 20px -10px rgba(244, 67, 54, 0.28), 0 4px 20px 0px rgba(0, 0, 0, 0.12), 0 7px 8px -5px rgba(244, 67, 54, 0.2)">
              <span style="margin:10px; color:white;">Reassigned</span>
          </a>
      </div>
          <div *ngIf="AssignedLotLoading_3"
              style="text-align:center;background-color: #ddd;padding:3px;"><b>No Record Found.</b></div>
          <div>
										  
											
												   
																																			  
									   
					
              <div   class="table-responsive table-cont" id="table-cont">
             <!-- <div class="pagination_cont">
                       <mat-paginator [length]="total"
                     [pageSize]="itemsPerPage"
                     [pageSizeOptions]="itemsPerPageOptions"
                     aria-label="Select page"
                     (page)="onItemsPerPageChange($event)" #paginator>
        </mat-paginator>
                    </div> -->
                        <div  class="pagination_cont">
                    <label>Show Entries:</label>
                    <select [(ngModel)]="itemsPerPage" (ngModelChange)="onShowEntriesChange()">
                      <option *ngFor="let option of itemsPerPageOptions" [value]="option">{{ option }}</option>
                    </select>              
                  </div>
                  <table rz-table="" rz-mode="resizeMode" id="myTable" *ngIf="show"
                  class="table table-striped table-bordered table-hover fixed" style="width:100%">
                  <thead>
                  <tr>
                      <th style="width: 50px !important;">
                          <div class="text-center" title="{{dtitle}}" style="
                          display: block;">
                            
                      <span style="white-space: nowrap;"> {{dtitle}}</span>
                      </div>
                      </th>
                      <th *ngFor="let item of uniqueStagename_st" style="width: 100px;">
                          <div class="text-center" title="{{item}}" style="
                          display: block;">
                              <span style="white-space: nowrap;">{{item}} </span>
                              </div>
                      </th>
                  </tr>
              </thead>
              <tbody>
                  <tr *ngFor="let item of jsonObj_st | paginate: { itemsPerPage: itemsPerPage, currentPage: p , totalItems: total}">
                      <td>
                          <span style="padding-left:5px;">{{item.stagename.stagename}}</span>
                             <!--show comments for first  stage-->
                            <!--<span class="pull-right" style="padding: 5px;" *ngIf="item.files[0].comments !='' && item.files[0].comments != undefined && item.files[0].comments != null">
                              <i class="fa fa-comment" matTooltip="{{item.files[0].comments}}" ></i>
                              </span>-->
                              <!--show comments for first and second stage-->
                              <!--<span class="pull-right" style="padding: 5px;" *ngIf="item.files[0].lotmasterstatus == 'norecord' && item.files[0].comments !='' && item.files[0].comments != undefined && item.files[0].comments != null">         
                                <i class="fa fa-comment" matTooltip="{{item.files[0].comments}}" ></i>
                              </span>
                              <span class="pull-right"  style="padding: 5px;" *ngIf="item.files[1].lotmasterstatus == 'duplicate' && item.files[1].comments !='' && item.files[1].comments != undefined && item.files[1].comments != null">         
                                <i class="fa fa-comment" matTooltip="{{item.files[1].comments}}" ></i>
                              </span>-->
                              <div class="panel-toolbar dropdown-icon-legend pull-right" role="menu"  title="Comments table" *ngIf="item.stagename.comments_status === true">
                                <button class="btn btn-icon btn-xs btn-success shadow-0 mr-1 rounded-circle waves-effect waves-themed" data-toggle="dropdown" aria-expanded="false" style="background-color:#4679CC !important">
                                <i class="fa fa-comment"></i>
                                </button>
                                <div class="dropdown-menu dropdown-menu-animated dropdown-menu-right p-0" style="width: auto !important;height: auto !important; border-color: #337ab7 !important; border-radius: 3px !important; border-width: thin;" x-placement="top-end1"  >
                                    <span >
                                        <div style="font-weight: bold;text-align: center;padding-top: 2px;text-transform: uppercase;">
                                           Stage Comment(s)
                                        </div>
                                      
                                    </span>
                                    <hr>
                                   <div class="dropdown-item">
                                    <table class="table borderless">
                                        <tbody style="color:#337ab7;">
                                        <tr *ngFor="let comts of item.comments">
                                            <td *ngIf="comts.comments != '' && comts.comments != null && (comts.lotstatus == 'C' || comts.lotstatus == 'R' || comts.lotstatus == 'B' || comts.lotstatus == 'F')" style="width: 200px;">
                                                <span *ngIf="comts.stagename_alias != '' && comts.stagename_alias != null  && comts.stagename_alias != undefined" style="padding-top: 2px;padding-bottom: 7px;">
                                                    <span style="font-weight: 600;">Stage:</span> {{comts.stagename_alias}}  
                                                </span>
                                                <br>
                                                <span *ngIf="comts.comments != '' && comts.comments != null && comts.comments != undefined" style="padding-bottom: 10px;">
                                                    <span style="font-weight: 600;"> Comments: </span>  {{comts.comments}} 
                                                </span>
                                                <br>
                                                <br>
                                                <span class="pull-left" *ngIf="comts.comments_status != 'Completed'" style="color: red;text-transform: uppercase;">
                                                    {{comts.comments_status}}
                                                </span>
                                                <span class="pull-left" *ngIf="comts.comments_status === 'Completed'" style="color: #00a65a;text-transform: uppercase;" >
                                                    {{comts.comments_status}}
                                                </span>
                                               <span class="pull-right" *ngIf="comts.tostage!= '' && comts.tostage!= null && comts.tostage != undefined">
                                                <span style="font-weight: 600;"> To stage:</span> {{comts.tostage}}
                                               </span>
                                            </td>
                                        </tr>
                                    </tbody>
                                    </table>
                                   </div>    
                                </div>
                             </div>
                         
                      </td>
                      <td *ngFor="let item1 of item.files" [hidden]="swapeboardval == 1" [attr.colspan]="item1.slotcnt">
                               <div *ngIf="item1.lotstatus==='P'" class='wrap bg-yellow'
                              title='In Progress - {{item1.emp_name}}'>
                              <i class="fa fa-circle blink" aria-hidden="true" style="color:green;font-size: 10px;"
                                 *ngIf="item1.livestatus == 'true'"></i>
                              <i class="fa fa-circle" aria-hidden="true" style="color:silver;font-size: 10px;"
                                 *ngIf="item1.livestatus == 'false'"></i>
                              <i class="fa fa-circle" aria-hidden="true" style="color:yellowgreen;font-size: 10px;"
                                 *ngIf="item1.livestatus == 'inter'"></i>
                              <span *ngIf="item1.stage_type != 2">{{item1.emp_name}}</span>
                              <span *ngIf="item1.stage_type == 2">Auto</span>
                          </div>
                          <div *ngIf="item1.lotstatus==='C'" class='wrap bg-green' title='Completed -{{item1.emp_name}}'>
                              <span *ngIf="item1.stage_type != 2">{{item1.emp_name}}</span>
                              <span *ngIf="item1.stage_type == 2">Auto</span>
                              <i *ngIf="item1.isready_yts != '0'" class="fal fa-cog pull-right"
                                  style="margin-top:2px; margin-right:2px;cursor:pointer;"
                                  (click)="ready_to_yts(item1)"></i>
                          </div>
                          <div *ngIf="item1.lotstatus==='Q'" class='wrap bg-blue-active'
                              title='Queue -{{item1.emp_name}}'><span>In Queue..</span></div>
                          <div *ngIf="item1.lotstatus==='G' && item1.article_status == 'del'" class='wrap'
                              style="background-color:dimgray" title='Delete'>Delete</div>
                          <div *ngIf="item1.lotstatus==='G' && item1.article_status != 'del'" class='wrap bg-maroon'
                              title='Ignored'>Ignored</div>
  
                          <div *ngIf="item1.lotstatus==='R' && jobstatus === true && item1.holdreason===0" class='wrap bg-primary'  title='YTS' style="color: white !important;">
                            <i *ngIf="item1.difference == 1 && item1.stage_type == 2 && item1.projectdefinitionid!=366" class="fa fa-ban" (click)="manualcheckout(item1)"
                              style="margin-top:2px; margin-right:2px;cursor:pointer;"></i>
                              <i class="fa fa-cog pull-right" style="margin-top:2px; margin-right:2px;cursor:pointer;color: white !important;"
                              (click)="dashboardMove(item1,reAllocateTemplate)"></i> YTS <span  style="color: white;" *ngIf="item1.c_count != 0">
                                
                                </span>
                                
                          </div>
                          <div *ngIf="item1.lotstatus==='R' && jobstatus === false && item1.holdreason===0"
                              class='wrap bg-green' title='Completed'>
                              Auto
                          </div>
                          <div *ngIf="item1.lotstatus==='R' && jobstatus === true && item1.holdreason===1" class='wrap'
                              style="background-color:#a20596;color: white !important;" title='{{item1.reassign}}'>
                              <i *ngIf="item1.difference == 1 && item1.stage_type == 2 && item1.projectdefinitionid!=366" class="fa fa-ban" (click)="manualcheckout(item1)"
                              style="margin-top:2px; margin-right:2px;cursor:pointer;"></i>
                              <i class="fa fa-cog pull-right" style="margin-top:2px; margin-right:2px;cursor:pointer;color: white !important;"
                              (click)="dashboardMove(item1,reAllocateTemplate)"></i> YTS  <span  style="color: white;" *ngIf="item1.c_count != 0">
                                
                                </span>
                               
                          </div>
                          <div *ngIf="item1.lotstatus==='R' && jobstatus === false && item1.holdreason===1"
                              class='wrap bg-blue-active' title='Completed'>
                              <i *ngIf="item1.difference == 1 && item1.stage_type == 2 && item1.projectdefinitionid!=366" class="fa fa-ban" (click)="manualcheckout(item1)"
                              style="margin-top:2px; margin-right:2px;cursor:pointer;"></i>
                              Auto
                              
                          </div>
                          <div *ngIf="item1.lotstatus==='B' && swapeboardval == 2" class='wrap bg-gray-active'
                              title='Reverse Chapter by {{item1.emp_name}}'><i class="fal fa-arrow-up"></i></div>
                          <div *ngIf="item1.lotstatus==='F'  && swapeboardval == 2" class='wrap bg-gray-active'
                              title='Bypass Chapter by {{item1.emp_name}}'><i class="fal fa-arrow-down"></i></div>
                          <div *ngIf="item1.lotstatus==='B' && swapeboardval == 1" class='wrap bg-gray-active'
                              title='Reverse Chapter by {{item1.emp_name}}'><i class="fal fa-arrow-left"></i></div>
                          <div *ngIf="item1.lotstatus==='F'  && swapeboardval == 1" class='wrap bg-gray-active'
                              title='Bypass Chapter by {{item1.emp_name}}'><i class="fal fa-arrow-right"></i></div>
                          <div *ngIf="item1.lotstatus==='W'" class='wrap bg-purple' title='Waiting'>Waiting...</div>
                          <div *ngIf="item1.lotstatus==='A'" class='wrap bg-yellow' title='Loading'>Loading...</div>
                          <div *ngIf="item1.lotstatus==='D'" class='wrap bg-red' title='Re-Assign'>
                              <i class="fa fa-retweet pull-left" (click)="TriggerApp(item1)"
                                  style="margin-top:2px; margin-right:2px;cursor:pointer;" title='Re-Assign'></i>
                              <a (click)="showerror(item1)"
                                  style="color:white ; text-decoration: underline; cursor:pointer; "
                                  title='Show Error'>Failed!</a>
                                  <i *ngIf="item1.stagename_alias==='LARE Review'" class="fa fa-step-forward" title="Skip" (click)="skiplot(item1)"></i>
                              <i class="fa fa-backward pull-right" (click)="backword(item1)"
                                  style="margin-top:2px; margin-right:2px;cursor:pointer;" title='Revert'></i>
                          </div>
                          <div *ngIf="item1.lotstatus==='I'" class='wrap bg-yellow' title='On Hold'>On Hold</div>
                          <div *ngIf="item1.lotstatus==='H'" class='wrap bg-yellow' title='Hold'>Hold</div>
                          <div *ngIf="item1.lotstatus===null" class='wrap'>.</div>
                      </td>
                      <td *ngFor="let item1 of item.files" [hidden]="swapeboardval == 2" [attr.rowspan]="item1.slotcnt">
                       
                          <div *ngIf="item1.lotstatus==='P'" class='wrap bg-yellow'
                              title='In Progress - {{item1.emp_name}}'>
                              <i class="fa fa-circle blink" aria-hidden="true" style="color:green;font-size: 10px;"
                                 *ngIf="item1.livestatus == 'true'"></i>
                              <i class="fa fa-circle" aria-hidden="true" style="color:silver;font-size: 10px;"
                                 *ngIf="item1.livestatus == 'false'"></i>
                              <i class="fa fa-circle" aria-hidden="true" style="color:yellowgreen;font-size: 10px;"
                                 *ngIf="item1.livestatus == 'inter'"></i>
                              <span *ngIf="item1.stage_type != 2">{{item1.emp_name}}</span>
                              <!-- gokul -->
                              <span *ngIf="item1.stage_type == 2"><i *ngIf="item1.difference == 1 && item1.stage_type == 2 && item1.projectdefinitionid!=366" class="fa fa-ban" (click)="manualcheckout(item1)"
                                style="margin-top:2px; margin-right:2px;cursor:pointer;"></i>Auto</span>
                                 
                          </div>
                          <div *ngIf="item1.lotstatus==='C'" class='wrap bg-green' title='Completed -{{item1.emp_name}}'>
                              <span *ngIf="item1.stage_type != 2">{{item1.emp_name}}</span>
                              <!-- gokul -->
                              <span *ngIf="item1.stage_type == 2">Auto</span>
                              <i *ngIf="item1.isready_yts != '0'" class="fa fa-cog pull-right"
                                  style="margin-top:2px; margin-right:2px;cursor:pointer;"
                                  (click)="ready_to_yts(item1)"></i>
                          </div>
                          <div *ngIf="item1.lotstatus==='Q'" class='wrap bg-blue-active'
                              title='Queue -{{item1.emp_name}}'>
                              <span>In Queue..</span>
                          </div>
                          <div *ngIf="item1.lotstatus==='E'" class='wrap bg-red-active' title='Delete'>
                              <span>Delete</span>
                          </div>
                          <div *ngIf="item1.lotstatus==='R' && jobstatus === true && item1.holdreason===0"
                              class='wrap bg-primary' title='YTS' style="color:  white !important;"> 
                              <i *ngIf="item1.difference == 1 && item1.stage_type == 2 && item1.projectdefinitionid!=366" class="fa fa-ban" (click)="manualcheckout(item1)"
                                style="margin-top:2px; margin-right:2px;cursor:pointer;"></i>
                              <i class="fa fa-cog pull-right" style="margin-top:2px; margin-right:2px;cursor:pointer;color: white !important;"
                              (click)="dashboardMove(item1,reAllocateTemplate)"></i>YTS <span  style="color: white;" *ngIf="item1.c_count != 0">
                                
                                </span> <i *ngIf="item1.stagename_alias==='LARE Review'" class="fa fa-step-forward" title="Skip" (click)="skiplot(item1)"></i>
                               
                          </div>
                          <div *ngIf="item1.lotstatus==='R' && jobstatus === false && item1.holdreason===0"
                              class='wrap bg-green' title='Completed'>
                              <i *ngIf="item1.difference == 1 && item1.stage_type == 2 && item1.projectdefinitionid!=366" class="fa fa-ban" (click)="manualcheckout(item1)"
                                style="margin-top:2px; margin-right:2px;cursor:pointer;"></i>
                              Auto
                          
                          </div>
  
                          <div *ngIf="item1.lotstatus==='R' && jobstatus === true && item1.holdreason===1" class='wrap'
                              style="background-color:#a20596;color: white !important;" title='{{item1.reassign}}'>
                              <i *ngIf="item1.difference == 1 && item1.stage_type == 2 && item1.projectdefinitionid!=366" class="fa fa-ban" (click)="manualcheckout(item1)"
                              style="margin-top:2px; margin-right:2px;cursor:pointer;"></i>
                              <i class="fa fa-cog pull-right" style="margin-top:2px; margin-right:2px;cursor:pointer;color: white !important;"
                              (click)="dashboardMove(item1,reAllocateTemplate)"></i>YTS  <span  style="color: white;" *ngIf="item1.c_count != 0">
                                
                                </span>
                             
                          </div>
                          <div *ngIf="item1.lotstatus==='R' && jobstatus === false && item1.holdreason===1"
                              class='wrap bg-blue-active' title='Completed'>
                              Auto
                          </div>
                          <div *ngIf="item1.lotstatus==='B' && swapeboardval == 2" class='wrap bg-gray-active'
                              title='Reverse Chapter by {{item1.emp_name}}'><i class="fa fa-arrow-up"></i></div>
                          <div *ngIf="item1.lotstatus==='F'  && swapeboardval == 2" class='wrap bg-gray-active'
                              title='Bypass Chapter by {{item1.emp_name}}'><i class="fa fa-arrow-down"></i></div>
  
                          <div *ngIf="item1.lotstatus==='B' && swapeboardval == 1" class='wrap bg-gray-active'
                              title='Reverse Chapter by {{item1.emp_name}}'><i class="fa fa-arrow-left"></i></div>
                          <div *ngIf="item1.lotstatus==='F'  && swapeboardval == 1" class='wrap bg-gray-active'
                              title='Bypass Chapter by {{item1.emp_name}}'><i class="fa fa-arrow-right"></i></div>
  
  
                          <div *ngIf="item1.lotstatus==='W'" class='wrap bg-purple' title='Waiting'>Waiting...</div>
                          <div *ngIf="item1.lotstatus==='A'" class='wrap bg-yellow' title='Loading'>Loading...</div>
                          <div *ngIf="item1.lotstatus==='D'" class='wrap bg-red' title='Re-Assign'>
                              <i class="fa fa-retweet pull-left" (click)="TriggerApp(item1)"
                                  style="margin-top:2px; margin-right:2px;cursor:pointer;"></i>Failed!
                              <i class="fa fa-backward pull-right" (click)="backword(item1)"
                                  style="margin-top:2px; margin-right:2px;cursor:pointer;"></i>
                                  <i *ngIf="item1.stagename_alias==='LARE Review'" class="fa fa-step-forward" title="Skip" (click)="skiplot(item1)"></i>
  
  
                          </div>
                          <div *ngIf="item1.lotstatus==='I'" class='wrap bg-yellow' title='On Hold'>On Hold</div>
                          <div *ngIf="item1.lotstatus==='H'" class='wrap bg-yellow' title='Hold'>Hold</div>
                          <div *ngIf="item1.lotstatus==='G'" class='wrap bg-maroon' title='Ignored'>Ignored</div>
                          <div *ngIf="item1.lotstatus===null" class='wrap'>.</div>
                      </td>
                  </tr>
              </tbody>
              </table>
             
             </div>
			 <div>  <pagination-controls  (pageChange)="onItemsPerPageChange($event)"></pagination-controls></div>																																			
          </div>
      </div> 
     
  </content>
  <ng-template #reAllocateTemplate>
      <div class="modal-content" id="mainNgCnt" ngDraggable [handle]="dragHandle">
          <div class="modal-header" style="cursor:move" #dragHandle>
          <h4 class="modal-title pull-left">{{allocatetype}} Settings</h4>
          <button type="button" class="close pull-right" aria-label="Close" (click)="reAllocateModalRef.hide();">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
              <div class="mailbox-read-info">
                  <h4 style="font-size: 13px; line-height: 23px;">Stage : {{stagename}} Title   : {{lottitle}}</h4>
                  <h5>
                    <!--  <span class="mailbox-read-time pull-right">{{callType.mailtemp.senton|date:'medium'}}</span>-->
                  </h5>
              </div>
             
              <div class="mailbox-read-message">
                  <button type="button" *ngIf="allocatetype == 'Re Allocation'" class="btn btn-google btn-sm" data-container="body"
                   title="Remove title from {{assignee}}"  (click)="relMove();">
                      <i class="fa fa-trash-o"></i> Remove the Title ({{lottitle}})  from {{assignee}}
                  </button>
                  <div *ngIf="allocatetype != 'Re Allocation'" class="row">
                      <table class="table-bordered" style="width:100%;">
                          <tr>
                              <td>
                                  <label style="text-align:left;">Back</label>
                              </td>
                              <td>
                                  <label>Current Stage</label>
                              </td>
                              <td>
                                  <label>Forward</label>
                              </td>
                          </tr>
                          <tr>
                              <td>
                                  <select name="selback" id="selback" [(ngModel)]="selback" class="form-control" (change)="changeSelBack($event);">
                                      <option value="0">Select</option>
                                      <option *ngFor="let uni of backstage" value="{{uni}}">{{uni}}</option>
                                  </select>
                              </td>
                              <td>
                                  <button type="button" class="btn btn-danger btn-sm" data-container="body">
                                    {{stagename}}
                                  </button>
                              </td>
                              <td>
                                  <select name="selforward" id="selforward" [(ngModel)]="selforward" class="form-control" (change)="changeSelForward($event);">
                                      <option value="0">Select</option>
                                      <option *ngFor="let uni of forwardstage" value="{{uni}}">{{uni}}</option>
                                  </select>
                              </td>
                          </tr>
                          <tr>
                              <td colspan="3" style="padding-top:15px; text-align:center;">
                                  <button type="button" class="btn btn-facebook btn-sm" (click)="selMove();">
                                      <i class="fa fa-angle-double-left"></i> Move <i class="fa fa-angle-double-right"></i>
                                  </button>
                              </td>
                          </tr>
                      </table>
                     
                  </div>
              </div>
              <!-- /.mailbox-read-message -->
          </div>
        </div>
     
    </ng-template>
    <script>
  window.onload = function(){
        var tableCont = document.querySelector('#table-cont')
        /**
         * scroll handle
         * @param {event} e -- scroll event
         */
        function scrollHandle (e){
          var scrollTop = this.scrollTop;
          this.querySelector('thead').style.transform = 'translateY(' + scrollTop + 'px)';
        }
        
        tableCont.addEventListener('scroll',scrollHandle)
      }
    </script>
    <ngx-spinner bdColor="rgba(255, 255, 255, 0.8)" size="default" type="line-scale-party" [fullScreen]="false">
  </ngx-spinner>