<div class="subheader">
        <h5 class="subheader-title">
           <i class="subheader-icon fal fa-table"></i>  {{_project_subtitle}}: 
           <span class="fw-300">- Job Assignment</span>      
        </h5>
     </div>
     <section class="content">
        <div class="margin" style="margin-bottom:0px !important;">
           <div class="row">
              <div class="col-md-3 col-xl-3" *ngFor="let itm of stagelist" style="cursor: pointer;">
                 <div class="p-3 bg-primary-300 rounded overflow-hidden position-relative text-white mb-g" (click)="stageclick(itm.wfdid)"
                 *ngIf="itm.selectstage == 'false'">
                 <div>
                    <h5 class="display-6 d-block l-h-n m-0 fw-500">
                       {{itm.stagename_alias}}
                    </h5>
                 </div>
                 <i class="fal fa-edit position-absolute pos-right pos-bottom opacity-40 mb-n1 mr-n1" style="font-size:4rem; color: #000;"></i>
              </div>
              <div class="p-3 bg-success-200 rounded overflow-hidden position-relative text-white mb-g" (click)="stageclick(itm.wfdid)"
              *ngIf="itm.selectstage == 'true'">
              <div>
                 <h5 class="display-6 d-block l-h-n m-0 fw-500">
                    {{itm.stagename_alias}}
                 </h5>
              </div>
              <i class="fal fa-check position-absolute pos-right pos-bottom opacity-40 mb-n1 mr-n1" style="font-size:4rem; color: #000;"></i>
           </div>
        </div>
        </div>
        </div>
        <div class="row">
           <hr />
        </div>
        <div class="row">
           <div class="col-md-12">
            <div class="panel">
               <div class="panel-hdr">
                  <div class="form-inline" style="margin-top: 10px; margin-bottom: 10px;padding: 5px;">          
                     <div class="form-group row">
                        <label class="control-label">Job Title:</label>  	   
                        <ng-multiselect-dropdown [placeholder]="'Select'"
                        [data]="joblist" textField=jobtitle [settings]="_ddljobSettings"
                        name="lotjob"  (onSelectAll)="onSelectAll($event)" [(ngModel)]="allotjob_output"
                        (onSelect)="onJobSelect($event)" (onDeSelect)="onJobDeSelect($event);" (onDeSelectAll)="onDeSelectAll($event)" (onFilterChange)="onFilterChange($event)"
                        >
                        </ng-multiselect-dropdown>
                      </div>
                      <div class="form-group row">
                        <label class="control-label">Date:</label>  	   
                        <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="width:  167px;">        
                      </div>
                      <div class="form-group row">                     
                        <button class="btn btn-primary waves-effect waves-themed btn-sm" type="button"
                        (click)="loadall()">
                        Get All
                      </button>
                        </div>
                        <!-- <div class="form-group row">
                        <span style="color:#0bb1a9; font-size:15px; cursor:pointer;" class="pull-right"  (click)="reset()" title="Reset">
                         <i class="fas fa-redo"></i>
                       </span>
                     </div> -->
                    <div class="form-group row">
                       <label class="control-label">User:</label>                        
                          <ng-multiselect-dropdown [placeholder]="'Select'"
                          [data]="userlist" textField=username [settings]="_ddluserSettings"
                          name="lotuser"  [(ngModel)]="allotuser_output"
                          (onSelect)="onUserSelect($event)" (onDeSelect)="onUserDeSelect($event);" [disabled]="showuserlist">
                          </ng-multiselect-dropdown>
                       </div>
                       <div class="form-group row" style="margin: inherit;">
                        <label class="control-label">Project ID:</label>   
                        <input type="text" class="form-control" placeholder="Search Project ID" [(ngModel)]="projectid_search_filter" aria-label="filter"   style="width: 130px;
                        margin-left: -5px;
                        "><!--(ngModelChange)="projectid_filter('ontype')"-->
                        <span class="input-group-append">
                         <button class="btn btn-primary waves-effect waves-themed btn-sm" type="button" (click)="projectid_filter('ontype')">
                        <span class="fal fa-search" ></span>
                        </button>
                        </span>
                     </div>
                       <!-- <div class="form-group row">
                        <form [formGroup]="myForm">
                        <label class="control-label">Project ID:</label>    
                      <select class="custom-select" formControlName="projectid" [(ngModel)]="projectid_output" (change)="projectidonItemSelect($event.target.value)"  style="width: 167px;height: 34px;">
                        <option class="custom-option" selected [value]="0">
                           Select
                        </option>
                        <option class="custom-option" *ngFor="let item of projectidlst"
                        [value]="item.projectid">{{item.projectid}}</option>
                      </select>
                     </form>  
                        </div> -->
                  </div>
               </div>
               
              <!-- /.box-header -->
              <div class="card-body">
            
                  <div class="panel-hdr" style="border-width:0">
                     <h2 class="" style="padding-left: 0;">
                        AVAILABLE FOR ASSIGNMENT
                     </h2>
                    <!--<div id="serach_lot" class="form-group" style="float:right;text-align: right;padding-right: 0;" [(ngbCollapse)]="!collapse_assignedlot">
                        <div class="input-group" style="float:right">
                           <input type="text" class="form-control" placeholder="Search" [(ngModel)]="searchuserjob" aria-label="Search">
                           <span class="input-group-append">
                           <button class="btn btn-primary waves-effect waves-themed btn-sm" type="button">
                           <span class="fal fa-search"></span>
                           </button>
                           </span>
                        </div>
                     </div>-->

                     <div id="lotbutton" class="form-group" style="float:right;text-align: right;padding-right: 0;padding-left: 4px; " *ngIf="AssignedLot.length!=0" [(ngbCollapse)]="!collapse_assignedlot">
                        <div class="input-group" style="float:right">
                           <dx-button
                              stylingMode="contained"
                              text="Assign Lot"
                              type="default"
                              [width]="120"
                               (onClick)="vendor_user_check('','','','','1','','','M','','assign')"
                           >
                           </dx-button>
                        </div>
                     </div>
                     <div class="panel-toolbar" style="margin-bottom:10px;">
                        <a href="javascript:;" data-toggle="tooltip" data-offset="0,10" data-original-title="Collapse" class="btn btn-panel hover-effect-dot js-panel-collapse waves-effect waves-themed" data-toggle="collapse" data-target="#available_lot,#lotbutton,#serach_lot" style="line-height: 16px;" (click)="toggle_assginedlotuser(1)" >
                           <i class="fa fa-compress-alt" style="color: #fff;"></i>
                         </a> 
                       </div>
                       
                  </div>

                  <!-- <div class="row" style="border-width:0;justify-content:end;padding-bottom: 5px;" *ngIf="AssignedLot.length!=0">

                     <div class="pull-right" style="" >
                        <div class="input-group" style="float:right">
                          
                        </div>
                     </div>
                  </div> -->
                  <!--<div *ngIf="(allotjob_output.length===0 || AssignedLotLoading != true) && this.projectid_output ==='0'"
                     style="text-align:center;background-color: #ddd;padding:3px; margin-top: 10px;" class="ng-scope"><b>No Lots available.</b>
                     </div>-->
                  <div *ngIf="AssignedLotvisible" id="available_lot"  [(ngbCollapse)]="!collapse_assignedlot">
                     <dx-data-grid
                              id="gridContainer"
                              [dataSource]="AssignedLot"
                              [showBorders]="true"
                              [columnAutoWidth]="true"
                              [(selectedRowKeys)]="selected_assginlot"
                              (onSelectionChanged)="selectionChangedHandler()"
                              >
                              <!-- <dxo-paging [enabled]="true"></dxo-paging> -->
                              <dxo-paging [pageSize]="10"> </dxo-paging>
                              <dxo-pager
                              [showPageSizeSelector]="true"
                              [allowedPageSizes]="[5,10, 20, 50,100]"
                              [showNavigationButtons]="true">
                              </dxo-pager>
                              <!-- [selectAllMode]='allPages'-->
                              <dxo-selection
                                          mode="multiple"
                                          selectAllMode="page"
                              ></dxo-selection>
                                 <dxi-column dataField="jobno" caption="Job No"></dxi-column>
                               <dxi-column dataField="lottitle" caption="Lot Name"  sortOrder="asc"></dxi-column>
                               <dxi-column dataField="ProjectID" caption="Project ID"></dxi-column>
                               <dxi-column dataField="CompanyName" caption="Company Name"></dxi-column>
                               <dxi-column dataField="stagename_alias" caption="Stage"></dxi-column>
                               <dxi-column dataField="lotstatus" cellTemplate="lot_stauts" caption="Status"></dxi-column>
                               <dxi-column dataField="City" caption="City"></dxi-column>
                               <dxi-column dataField="State" caption="State"></dxi-column>
                               <dxi-column dataField="BidDate" dataType="date" format="dd-MMM-yyyy" caption="Bid Date"></dxi-column>
                               <dxi-column dataField="WC_Com" caption="Production Agent"></dxi-column>
                               <dxi-column dataField="BE_Com" caption="Bid Entry Agent"></dxi-column>
                               <dxi-column dataField="assigned_user"  caption="Assigned User" cellTemplate="assign_user"></dxi-column>
                               <dxo-header-filter [visible]="true" [allowSearch]="true"></dxo-header-filter>
                              <dxo-load-panel
                              [enabled]="true">
                                </dxo-load-panel>
                                <!-- <dxo-filter-row
                                [visible]="true"></dxo-filter-row> -->
                                <div *dxTemplate="let cellInfo of 'assign_user'">
                                 <div class="dxcell_lotstatus" *ngIf="cellInfo.data.assigned_user == -1" style="cursor:pointer;"
                                    title="Assign"> <i class="fal fa-circle-notch fa-spin fa-3x fa-fw"
                                    style="color:#d73925;font-size: 16px;"></i>  
                                 </div>
                     
                                 <div class="dxcell_lotstatus" *ngIf="cellInfo.data.assigned_user == 0"  style="cursor:pointer;"
                                 title="Assign"
                                 (click)="vendor_user_check(cellInfo.data.jobworkflowid,cellInfo.data.lotid,cellInfo.data.selectUser,cellInfo.data.assigned_user,'1',cellInfo.data.sType,cellInfo.data,'S',cellInfo.data.transactionid)"
                                 >
                                 <i class="fal fa-square" aria-hidden="true"
                                    style="color:black;font-size: 16px;"></i>  
                                 </div>

                                 <div *ngIf="cellInfo.data.bookauthorkey == '' || cellInfo.data.bookauthorkey == 'null'">
                                          <div class="dxcell_lotstatus" *ngIf="userid_ != cellInfo.data.assigned_user && cellInfo.data.assigned_user != 0" title="Already Assigned to {{cellInfo.data.assignedUser}}" (click)="vendor_user_check(cellInfo.data.jobworkflowid,cellInfo.data.lotid,cellInfo.data.selectUser,cellInfo.data.assigned_user,'1',cellInfo.data.sType,cellInfo.data,'S',cellInfo.data.transactionid)">
                                             <i class="fal fa-check-square" aria-hidden="true"
                                                style="color:red;font-size: 16px;"></i>
                                          </div> 
                                          <div class="dxcell_lotstatus" *ngIf="userid_ === cellInfo.data.assigned_user" (click)="vendor_user_check(cellInfo.data.jobworkflowid,cellInfo.data.lotid,cellInfo.data.selectUser,cellInfo.data.assigned_user,'3',cellInfo.data.sType,cellInfo.data,'S',cellInfo.data.transactionid)" title="Assigned">
                                             <i class="fal fa-check-square" aria-hidden="true"
                                                style="color:green;font-size: 16px;"></i>
                                          </div>
                                 </div>
                                 <div *ngIf="cellInfo.data.bookauthorkey != ''">
                                       <div class="dxcell_lotstatus"
                                          *ngIf="cellInfo.data.assigned_user > 0 && cellInfo.data.assigned_user != cellInfo.data.selectUser"
                                          style="cursor:pointer;" title="Assigned"> <i
                                          class="fal fa-check-square" aria-hidden="true"
                                          style="color:orangered;font-size: 16px;"></i>
                                       </div>
                                   
                                          <div class="dxcell_lotstatus" *ngIf="cellInfo.data.assigned_user == cellInfo.data.selectUser"
                                             style="cursor:pointer;" title="Assigned"> <i
                                             class="fal fa-check-square" aria-hidden="true"
                                             style="color:#07455B;font-size: 16px;"></i>
                                          </div>
                                    </div>
                                
                                 <!-- <div [ngClass]="{'my-class': cellInfo.data.assigned_user > cellInfo.data.SpeedLimit}">
                                     {{cellInfo.value}}
                                 </div>                                                  -->
                             </div>
                             <div *dxTemplate="let cellInfo of 'lot_stauts'" >
                              
                              
                             
                              <div class="dxcell_lotstatus" *ngIf="cellInfo.data.lotstatus == 'R' || cellInfo.data.lotstatus == 'YTS' || cellInfo.data.lotstatus == ''">
                                 <a  class="badge bg-green">YTS</a>
                              </div>
                              <div class="dxcell_lotstatus" *ngIf="cellInfo.data.lotstatus == 'I'">
                                 <a  class="badge bg-blue">Hold</a>
                              </div>
                              <div class="dxcell_lotstatus" *ngIf="cellInfo.data.lotstatus == 'P' || cellInfo.data.lotstatus == 'WIP'">
                                 <a title="Picked by {{cellInfo.data.empname}}" class="badge bg-yellow">WIP</a>
                              </div>
                              <div class="dxcell_lotstatus" *ngIf="cellInfo.data.lotstatus == 'AP'">
                                 <a  class="badge bg-gray" title="Already allocated to {{cellInfo.data.empname===''?'Automation':cellInfo.data.empname}}">{{cellInfo.data.empname===''?'Automation':cellInfo.data.empname}}</a>
                              </div>
                              <div class="dxcell_lotstatus" *ngIf="cellInfo.data.lotstatus == 'OP'" >
                                 <a class="badge bg-yellow" title="Picked by {{cellInfo.data.empname===''?'Automation':cellInfo.data.empname}}">{{cellInfo.data.empname===''?'Automation':cellInfo.data.empname}}</a>
                              </div>
                             </div>
                              </dx-data-grid>

                    <!--<div *ngIf="!AssignedLotLoading" style="margin-top:10%;margin-left:50%;">
                       <div class="loader1">
                           <div class="bar1"></div>
                           <div class="bar1"></div>
                           <div class="bar1"></div>
                       </div>
                       </div> -->
                    <!-- <div style="max-height: 200px;overflow-y: auto;">
                       <table *ngIf="AssignedLotLoading" class="table jambo_table table-striped table-condensed table-hover no-footer"
                          id="example1m" st-table="AssignedLot" st-safe-src="rowCollectionm"
                          search-watch-model="query">
                          <thead>
                           <tr>
                              <th (click)="sort('jobno')" st-sort="jobno" class="st-sort-default" st-sort-ascent="st-sort-ascent"
                                 st-sort-descent="st-sort-descent" st-sort-default="reverse">
                                 Job No
                                 <i *ngIf="key =='jobno'" class="fa {{reverse==true?'fa-caret-up':'fa-caret-down'}}"></i>
                              </th>
                              <th (click)="sort('lottitle')" st-sort="lottitle" class="st-sort-default" st-sort-ascent="st-sort-ascent"
                                 st-sort-descent="st-sort-descent" st-sort-default="reverse">
                                 Lot Name
                                 <i *ngIf="key =='lottitle'" class="fa {{reverse==true?'fa-caret-up':'fa-caret-down'}}"></i>
                              </th>
                              <th (click)="sort('projectID')" st-sort="projectID" class="st-sort-default" st-sort-ascent="st-sort-ascent" st-sort-descent="st-sort-descent" st-sort-default="reverse">
                               Project ID
                               <i *ngIf="key =='projectID'" class="fa {{reverse==true?'fa-caret-up':'fa-caret-down'}}"></i>
                            </th>
                              <th (click)="sort('CompanyName')" st-sort="CompanyName" class="st-sort-default" st-sort-ascent="st-sort-ascent" st-sort-descent="st-sort-descent" st-sort-default="reverse">
                               Company Name
                               <i *ngIf="key =='CompanyName'" class="fa {{reverse==true?'fa-caret-up':'fa-caret-down'}}"></i>
                            </th>
                              <th st-sort="stagename_alias" class="st-sort-default" st-sort-ascent="st-sort-ascent" st-sort-descent="st-sort-descent" st-sort-default="reverse">
                               Stage
                            </th>
                            <th st-sort="lotstatus" class="st-sort-default" st-sort-ascent="st-sort-ascent" st-sort-descent="st-sort-descent" st-sort-default="reverse">
                               Status
                            </th>
                            <th (click)="sort('City')" st-sort="City" class="st-sort-default" st-sort-ascent="st-sort-ascent" st-sort-descent="st-sort-descent" st-sort-default="reverse">
                               City
                               <i *ngIf="key =='City'" class="fa {{reverse==true?'fa-caret-up':'fa-caret-down'}}"></i>
                            </th>
                            <th (click)="sort('State')" st-sort="State" class="st-sort-default" st-sort-ascent="st-sort-ascent" st-sort-descent="st-sort-descent" st-sort-default="reverse">
                               State
                               <i *ngIf="key =='State'" class="fa {{reverse==true?'fa-caret-up':'fa-caret-down'}}"></i>
                            </th>
                            <th (click)="sort('BidDate')" st-sort="State" class="st-sort-default" st-sort-ascent="st-sort-ascent" st-sort-descent="st-sort-descent" st-sort-default="reverse">
                              Bid Date
                              <i *ngIf="key =='BidDate'" class="fa {{reverse==true?'fa-caret-up':'fa-caret-down'}}"></i>
                           </th>
                              <th>
                                 Assignment Status
                              </th>
                           </tr>
                        </thead>
                          <tbody>
                             <tr class="unread" *ngFor="let ta of AssignedLot| filter:searchuserjob| orderBy: key : reverse">
                                <td>
                                   {{ta.jobno}}
                                </td>
                                <td>
                                   {{ta.lottitle}}<span *ngIf="ta.sType == 'BATCH'">(B)</span>
                                </td>
                                <td>
                                 {{ta.ProjectID}}
                                 </td>
                                <td>
                                 {{ta.CompanyName}}
                                 </td>
                                <td>
                                 {{ta.stagename_alias}}
                              </td>
                              <td st-ratio="10">
                                 <a *ngIf="ta.lotstatus == 'R' || ta.lotstatus == 'YTS' || ta.lotstatus == ''" class="badge bg-green">YTS</a>
                                 <a *ngIf="ta.lotstatus == 'I'" class="badge bg-blue">Hold</a>
                                 <a *ngIf="ta.lotstatus == 'P' || ta.lotstatus == 'WIP'" title="Picked by {{ta.empname}}" class="badge bg-yellow">WIP</a>
                                 <a *ngIf="ta.lotstatus == 'AP'" class="badge bg-gray" title="Already allocated to {{ta.empname===''?'Automation':ta.empname}}">{{ta.empname===''?'Automation':ta.empname}}</a>
                                 <a *ngIf="ta.lotstatus == 'OP'" class="badge bg-yellow" title="Picked by {{ta.empname===''?'Automation':ta.empname}}">{{ta.empname===''?'Automation':ta.empname}}</a>
                              </td>
                              <td> {{ta.City}}</td>
                              <td> {{ta.State}}</td>
                              <td> {{ta.BidDate}}</td>
                                <td>
                                   <div *ngIf="ta.assigned_user == -1" class="label" style="cursor:pointer;"
                                      title="Assign"> <i class="fal fa-circle-notch fa-spin fa-3x fa-fw"
                                      style="color:#d73925;font-size: 16px;"></i>  </div>
                                   <div *ngIf="ta.assigned_user == 0" class="label" style="cursor:pointer;"
                                   title="Assign"
                                   (click)="lotAssign(ta.jobworkflowid,ta.lotid,ta.selectUser,'1',ta.sType,ta)">
                                   <i class="fal fa-square" aria-hidden="true"
                                      style="color:black;font-size: 16px;"></i>  
                    </div>
                    <div *ngIf="ta.bookauthorkey == '' || ta.bookauthorkey == 'null'">
                    <div *ngIf="ta.assigned_user > 0 && ta.assigned_user != ta.selectUser"
                    class="label" title="Already Assigned to {{ta.assignedUser}}"
                    (click)="lotAssign(ta.jobworkflowid,ta.lotid,ta.selectUser,'1',ta.sType,ta)">
                    <i class="fal fa-check-square" aria-hidden="true"
                       style="color:red;font-size: 16px;"></i></div>
                    <div *ngIf="ta.assigned_user == ta.selectUser" class="label"
                    style="cursor:pointer;" title="Assigned"
                    (click)="lotAssign(ta.jobworkflowid,ta.lotid,ta.selectUser,'3',ta.sType,ta)">
                    <i class="fal fa-check-square" aria-hidden="true"
                       style="color:green;font-size: 16px;"></i>
                 </div>
              </div>
              <div *ngIf="ta.bookauthorkey != ''">
              <div class="label"
                 *ngIf="ta.assigned_user > 0 && ta.assigned_user != ta.selectUser"
                 style="cursor:pointer;" title="Assigned"> <i
                 class="fal fa-check-square" aria-hidden="true"
                 style="color:orangered;font-size: 16px;"></i></div>
              <div class="label" *ngIf="ta.assigned_user == ta.selectUser"
                 style="cursor:pointer;" title="Assigned"> <i
                 class="fal fa-check-square" aria-hidden="true"
                 style="color:#07455B;font-size: 16px;"></i></div>
              </div>
              </td>
              </tr>
              </tbody>
              <tfoot>
              <tr>
              <td colspan="5" class="text-right">
              <div st-pagination="" st-items-by-page="20" st-displayed-pages="20"></div>
              </td>
              </tr>
              </tfoot>
              </table> 
              *ngIf="AssignedLot.length===0"
              <div *ngIf="AssignedLot.length===0"
      style="text-align:center;background-color: #ddd;padding:3px;" class="ng-scope"><b>No lots available.</b></div>
                    
           </div> -->
                 </div>
	  <!--Monicaa-->
                 <div class="panel-hdr" style="border-width:0; padding-top: 15px;">
                  <h2 class="" style="padding-left: 0;">
                     AVAILABLE FOR RE-ASSIGNMENT
                  </h2>

                  <div id="reassignlotbutton" class="form-group" style="float:right;text-align: right;padding-right: 0;padding-left: 4px; " *ngIf="ReAssignedLot.length!=0"  [(ngbCollapse)]="!reassign_collapse"><!---->
                     <div class="input-group" style="float:right">
                        <dx-button
                           stylingMode="contained"
                           text="Re-Assign Lot"
                           type="default"
                           [width]="140"
                            (onClick)="vendor_user_check('','','','','1','','','M','','reassign')"
                        >
                        </dx-button>
                     </div>
                  </div>
                  <div class="panel-toolbar" style="margin-bottom:10px;" >
                     <a href="javascript:;" data-toggle="tooltip" data-offset="0,10" data-original-title="Collapse" class="btn btn-panel hover-effect-dot js-panel-collapse waves-effect waves-themed" data-toggle="collapse" data-target="#reassignedlot" style="line-height: 16px;" (click)="toggle_assginedlotuser(3)" >
                        <i class="fa fa-compress-alt" style="color: #fff;"></i>
                      </a> 
                    </div>
                    
               </div>
               <div *ngIf="AssignedLotvisible" id="reassignedlot"  [(ngbCollapse)]="!reassign_collapse">
                  <dx-data-grid
                           id="gridContainer"
                           [dataSource]="ReAssignedLot"
                           [showBorders]="true"
                           [columnAutoWidth]="true"
                           [(selectedRowKeys)]="selected_reassginlot"
                           (onSelectionChanged)="selectionChangedHandler()"
                           >
                           <dxo-paging [pageSize]="10"> </dxo-paging>
                           <dxo-pager
                           [showPageSizeSelector]="true"
                           [allowedPageSizes]="[5,10, 20, 50,100]"
                           [showNavigationButtons]="true">
                           </dxo-pager>
                           <dxo-selection
                                       mode="multiple"
                                       selectAllMode="page"
                           ></dxo-selection>
                              <dxi-column dataField="jobno" caption="Job No"></dxi-column>
                            <dxi-column dataField="lottitle" caption="Lot Name"  sortOrder="asc"></dxi-column>
                            <dxi-column dataField="ProjectID" caption="Project ID"></dxi-column>
                            <dxi-column dataField="CompanyName" caption="Company Name"></dxi-column>
                            <dxi-column dataField="stagename_alias" caption="Stage"></dxi-column>
                            <dxi-column dataField="lotstatus" cellTemplate="lot_stauts" caption="Status"></dxi-column>
                            <dxi-column dataField="City" caption="City"></dxi-column>
                            <dxi-column dataField="State" caption="State"></dxi-column>
                            <dxi-column dataField="BidDate" dataType="date" format="dd-MMM-yyyy" caption="Bid Date"></dxi-column>
                            <dxi-column dataField="WC_Com" caption="Production Agent"></dxi-column>
                            <dxi-column dataField="BE_Com" caption="Bid Entry Agent"></dxi-column>
                            <dxi-column dataField="assigned_user"  caption="Assigned User" cellTemplate="assign_user"></dxi-column>
                            <dxo-header-filter [visible]="true" [allowSearch]="true"></dxo-header-filter>
                           <dxo-load-panel
                           [enabled]="true">
                             </dxo-load-panel>
                             <div *dxTemplate="let cellInfo of 'assign_user'">
                              <div class="dxcell_lotstatus" *ngIf="cellInfo.data.assigned_user == -1" style="cursor:pointer;"
                                 title="Assign"> <i class="fal fa-circle-notch fa-spin fa-3x fa-fw"
                                 style="color:#d73925;font-size: 16px;"></i>  
                              </div>
                  
                              <div class="dxcell_lotstatus" *ngIf="cellInfo.data.assigned_user == 0"  style="cursor:pointer;"
                              title="Assign"
                              (click)="vendor_user_check(cellInfo.data.jobworkflowid,cellInfo.data.lotid,cellInfo.data.selectUser,cellInfo.data.assigned_user,'1',cellInfo.data.sType,cellInfo.data,'S',cellInfo.data.transactionid)"
                              >
                              <i class="fal fa-square" aria-hidden="true"
                                 style="color:black;font-size: 16px;"></i>  
                              </div>

                              <div *ngIf="cellInfo.data.bookauthorkey == '' || cellInfo.data.bookauthorkey == 'null'">
                                       <div class="dxcell_lotstatus" *ngIf="userid_ != cellInfo.data.assigned_user && cellInfo.data.assigned_user != 0" title="Already Assigned to {{cellInfo.data.assignedUser}}" (click)="vendor_user_check(cellInfo.data.jobworkflowid,cellInfo.data.lotid,cellInfo.data.selectUser,cellInfo.data.assigned_user,'1',cellInfo.data.sType,cellInfo.data,'S',cellInfo.data.transactionid)">
                                          <i class="fal fa-check-square" aria-hidden="true"
                                             style="color:red;font-size: 16px;"></i>
                                       </div> 
                                       <div class="dxcell_lotstatus" *ngIf="userid_ === cellInfo.data.assigned_user" (click)="vendor_user_check(cellInfo.data.jobworkflowid,cellInfo.data.lotid,cellInfo.data.selectUser,cellInfo.data.assigned_user,'3',cellInfo.data.sType,cellInfo.data,'S',cellInfo.data.transactionid)" title="Assigned">
                                          <i class="fal fa-check-square" aria-hidden="true"
                                             style="color:green;font-size: 16px;"></i>
                                       </div>
                              </div>
                              <div *ngIf="cellInfo.data.bookauthorkey != ''">
                                    <div class="dxcell_lotstatus"
                                       *ngIf="cellInfo.data.assigned_user > 0 && cellInfo.data.assigned_user != cellInfo.data.selectUser"
                                       style="cursor:pointer;" title="Assigned"> <i
                                       class="fal fa-check-square" aria-hidden="true"
                                       style="color:orangered;font-size: 16px;"></i>
                                    </div>
                                
                                       <div class="dxcell_lotstatus" *ngIf="cellInfo.data.assigned_user == cellInfo.data.selectUser"
                                          style="cursor:pointer;" title="Assigned"> <i
                                          class="fal fa-check-square" aria-hidden="true"
                                          style="color:#07455B;font-size: 16px;"></i>
                                       </div>
                                 </div>
                          </div>
                          <div *dxTemplate="let cellInfo of 'lot_stauts'" >
                           
                           
                          
                           <div class="dxcell_lotstatus" *ngIf="cellInfo.data.lotstatus == 'R' || cellInfo.data.lotstatus == 'YTS' || cellInfo.data.lotstatus == ''">
                              <a  class="badge bg-green">YTS</a>
                           </div>
                           <div class="dxcell_lotstatus" *ngIf="cellInfo.data.lotstatus == 'I'">
                              <a  class="badge bg-blue">Hold</a>
                           </div>
                           <div class="dxcell_lotstatus" *ngIf="cellInfo.data.lotstatus == 'P' || cellInfo.data.lotstatus == 'WIP'">
                              <a title="Picked by {{cellInfo.data.empname}}" class="badge bg-yellow">WIP</a>
                           </div>
                           <div class="dxcell_lotstatus" *ngIf="cellInfo.data.lotstatus == 'AP'">
                              <a  class="badge bg-gray" title="Already allocated to {{cellInfo.data.empname===''?'Automation':cellInfo.data.empname}}">{{cellInfo.data.empname===''?'Automation':cellInfo.data.empname}}</a>
                           </div>
                           <div class="dxcell_lotstatus" *ngIf="cellInfo.data.lotstatus == 'OP'" >
                              <a class="badge bg-yellow" title="Picked by {{cellInfo.data.empname===''?'Automation':cellInfo.data.empname}}">{{cellInfo.data.empname===''?'Automation':cellInfo.data.empname}}</a>
                           </div>
                          </div>
                           </dx-data-grid>
               
              </div>				
        </div>				 
        <!-- /.box-body -->
        </div>
        </div>
        <div class="col-md-12">
           <div class="panel">
              <div class="panel-hdr">
                 <h2 class="">
                    ALREADY ASSIGNED 
                 </h2>
                 
                 <div class="panel-toolbar">
                    <div  style="float:right;" style="padding:5px 0;" *ngIf="collapse">
                       <div class="input-group">
                          <input type="text" class="form-control" placeholder="Search" [(ngModel)]="searchalljob" aria-label="Search">
                          <span class="input-group-append">
                          <button class="btn btn-primary waves-effect waves-themed btn-sm" type="button">
                          <span class="fal fa-search"></span>
                          </button>
                          </span> 
                       </div>
                    </div>
                 </div>
                 <div class="panel-toolbar" style="margin:6px ;">
                  <a href="javascript:;" data-toggle="tooltip" data-offset="0,10" data-original-title="Collapse_2" id="Collapse_2" class="btn btn-panel hover-effect-dot js-panel-collapse waves-effect waves-themed" data-target="#assginedlotuser" style="line-height: 16px;"  aria-controls="assginedlotuser" role="link" (click)="toggle_assginedlotuser(2)">
                     <i class="fa fa-compress-alt" style="color: #fff;"></i>
                   </a> 
                 </div>
              </div>
              <!-- /.box-header -->
              <div class="box-body" id="assginedlotuser" [(ngbCollapse)]="!collapse">
                 <div *ngIf="!AssignedLotLoading1" style="margin-top:10%;margin-left:50%;">
                    <div class="loader1">
                       <div class="bar1"></div>
                       <div class="bar1"></div>
                       <div class="bar1"></div>
                    </div>
                 </div>
                 <div class="table-responsive" style="max-height: 200px;">
                    <table *ngIf="AssignedLotLoading1" class="table jambo_table table-striped table-condensed table-hover no-footer" id="example1m" st-table="allotuserjobs" st-safe-src="rowCollectionm1" search-watch-model="query1m">
                     <thead>
                        <tr *ngIf="allotuserjobs">
                           <th (click)="sort('assignedUser')" st-sort="assignedUser" class="st-sort-default" st-sort-ascent="st-sort-ascent" st-sort-descent="st-sort-descent" st-sort-default="reverse">
                              User
                              <i *ngIf="key =='assignedUser'" class="fa {{reverse==true?'fa-caret-up':'fa-caret-down'}}"></i>
                           </th>
                           <th (click)="sort('jobtitle')" st-sort="jobtitle" class="st-sort-default" st-sort-ascent="st-sort-ascent" st-sort-descent="st-sort-descent" st-sort-default="reverse">
                              Job Title
                              <i *ngIf="key =='jobtitle'" class="fa {{reverse==true?'fa-caret-up':'fa-caret-down'}}"></i>
                           </th>
                           <th (click)="sort('lottitle')" st-sort="lottitle" class="st-sort-default" st-sort-ascent="st-sort-ascent" st-sort-descent="st-sort-descent" st-sort-default="reverse">
                              Lot Name
                              <i *ngIf="key =='lottitle'" class="fa {{reverse==true?'fa-caret-up':'fa-caret-down'}}"></i>
                           </th>
                           <th (click)="sort('CompanyName')" st-sort="CompanyName" class="st-sort-default" st-sort-ascent="st-sort-ascent" st-sort-descent="st-sort-descent" st-sort-default="reverse">
                              Company Name
                              <i *ngIf="key =='CompanyName'" class="fa {{reverse==true?'fa-caret-up':'fa-caret-down'}}"></i>
                           </th>
                           <th (click)="sort('stagename_alias')" st-sort="stagename_alias" class="st-sort-default" st-sort-ascent="st-sort-ascent" st-sort-descent="st-sort-descent" st-sort-default="reverse">
                              Stage
                              <i *ngIf="key =='stagename_alias'" class="fa {{reverse==true?'fa-caret-up':'fa-caret-down'}}"></i>
                           </th>
                           <th (click)="sort('City')" st-sort="City" class="st-sort-default" st-sort-ascent="st-sort-ascent" st-sort-descent="st-sort-descent" st-sort-default="reverse">
                              City
                              <i *ngIf="key =='City'" class="fa {{reverse==true?'fa-caret-up':'fa-caret-down'}}"></i>
                           </th>
                           <th (click)="sort('State')" st-sort="State" class="st-sort-default" st-sort-ascent="st-sort-ascent" st-sort-descent="st-sort-descent" st-sort-default="reverse">
                              State
                              <i *ngIf="key =='State'" class="fa {{reverse==true?'fa-caret-up':'fa-caret-down'}}"></i>
                           </th>
                           <th (click)="sort('lotstatus')" st-sort="stagename_alias" class="st-sort-default" st-sort-ascent="st-sort-ascent" st-sort-descent="st-sort-descent" st-sort-default="reverse">
                              Status
                              <i *ngIf="key =='stagename_alias'" class="fa {{reverse==true?'fa-caret-up':'fa-caret-down'}}"></i>
                           </th>
                        </tr>
                     </thead>
                       <tbody>
                        <tr class="unread" *ngFor="let ta of allotuserjobs |filter: searchalljob| orderBy: key : reverse">
                             <td>
                                {{ta.assignedUser}}
                             </td>
                             <td>
                                {{ta.jobtitle}}<span *ngIf="ta.sType == 'BATCH'">(B)</span>
                             </td>
                             <td>
                                {{ta.lottitle}}
                             </td>
                             <td>
                              {{ta.CompanyName}}
                              </td>
                             <td>
                                {{ta.stagename_alias}}
                             </td>
                             <td> {{ta.City}}</td>
                             <td> {{ta.State}}</td>
                             <td st-ratio="10">
                                <a *ngIf="ta.lotstatus == 'R' || ta.lotstatus == 'YTS' || ta.lotstatus == ''" class="badge bg-green">YTS</a>
                                <a *ngIf="ta.lotstatus == 'I'" class="badge bg-blue">Hold</a>
                                <a *ngIf="ta.lotstatus == 'P' || ta.lotstatus == 'WIP'" title="Picked by {{ta.empname}}" class="badge bg-yellow">WIP</a>
                                <a *ngIf="ta.lotstatus == 'AP'" class="badge bg-gray" title="Already allocated to {{ta.empname===''?'Automation':ta.empname}}">{{ta.empname===''?'Automation':ta.empname}}</a>
                                <a *ngIf="ta.lotstatus == 'OP'" class="badge bg-yellow" title="Picked by {{ta.empname===''?'Automation':ta.empname}}">{{ta.empname===''?'Automation':ta.empname}}</a>
                             </td>
                          </tr>
                          <tr *ngIf="!allotuserjobs">
                             <td colspan="6" align="center">
                                <span style="width:100%; align-content:center;"><b>No Records Found</b></span>
                             </td>
                          </tr>
                       </tbody>
                       <tfoot>
                          <tr>
                             <td colspan="5" class="text-right">
                                <div st-pagination="" st-items-by-page="20" st-displayed-pages="20"></div>
                             </td>
                          </tr>
                       </tfoot>
                    </table>
                 </div>
              </div>
              <!-- /.box-body -->
           </div>
           <!-- /.box -->
        </div>
        </div>
        <div id="dashboard_footer" style="bottom: 45px; right: 24px;position:absolute;">
        </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>