<section class="content-header clearfix">
    <h2 translate class="subheader-title">
      <span class="subheader-icon fal fa-tasks"></span>&nbsp; {{stagename_alias}}
      <small> </small>
    </h2>
    <div class="subheader" *ngIf="frommyjob" style="float: right;margin-top: -35px;">
        <div class="subheader-block d-lg-flex align-items-center">
          <div class="d-inline-flex flex-column justify-content-center">      
            <a (click)="exit()" class="btn btn-outline-primary waves-effect waves-themed btn-sm">
              <i class="fal fa-chart-area"></i> Go back to dashboard</a>
          </div>
    
        </div>
      </div>
</section>
<section class="content" *ngIf="frommyjob">
    <div class="box padding-15" style="display: block;    margin: -12px;">
      <div class="row row-padding-bottom" style="padding-left: 10px;margin-top: 10px;margin-bottom: 25px;">
        <div class="form-group col-md-1">
          <label class="labelfont control-label" style="font-weight: 600;">Job Info: &nbsp;</label>
        </div>
        <div class="form-group col-md-6">
          <span class="label_sty">{{jobtitle}}</span>
        </div>
       <!--  <div class="form-group col-md-1">

          <label class="labelfont control-label" style="font-weight: 600;">Lot Info:</label>
        </div>
        <div class="form-group col-md-3">
          <span class="label_sty">{{lottitle}}</span>
        </div> -->
       
      </div>

      <div class="col-md-12" style="padding-bottom: 10px;    margin-top: -40px;">
        <div class="panel">
          <div class="panel-hdr">
            <h2 class="">
              Lots Available for Assignment
            </h2>
            <div id="lotbutton" class="form-group" style="float:right;text-align: right;padding-right: 0;padding-left: 4px; " *ngIf="availablelotlist.length!=0" >
              <div class="form-group col-md-6" style="margin-top: 10px;margin-left: auto;float: left;">
                <ng-multiselect-dropdown [placeholder]="'Select Coder'"
                [data]="userlist"
                textField="username"
                [settings]="_ddluserSettings"
                name="lotuser"
                [(ngModel)]="allotuser_output"
                (onSelect)="onUserSelect($event)"
                (onDeSelect)="onUserDeSelect($event);"
                >
      </ng-multiselect-dropdown>
              </div>
              <div class="form-group col-md-6" style="float:right;margin-top: 10px;">
                 <dx-button
                    stylingMode="contained"
                    text="Assign Lot"
                    type="default"
                    [width]="120"
                     (onClick)="assign()"
                 >
                 </dx-button>
              </div>
           </div>
          </div>
          <div class="box-body">

            <div style="max-height: 200px;overflow-y: auto;">

              <dx-data-grid
              id="gridContainer"
              [dataSource]="availablelotlist"
              [showBorders]="true"
              [columnAutoWidth]="true"
              [(selectedRowKeys)]="selected_assginlot"
              (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="title" caption="Journal"  ></dxi-column>
               <dxi-column dataField="totalunits" caption="Units"  ></dxi-column>
             <dxo-header-filter [visible]="true" [allowSearch]="true"></dxo-header-filter>
              <dxo-load-panel
              [enabled]="true">
                </dxo-load-panel>
              
           
              </dx-data-grid>
          <!--     <table  class="table jambo_table table-striped table-condensed table-hover no-footer"
                 id="example1m" st-table="availablelotlist" st-safe-src="rowCollectionm"
                 search-watch-model="query">
                 <thead>
                  <tr>
                     <th>#</th>
                     <th (click)="sort('title')" st-sort="title" class="st-sort-default" st-sort-ascent="st-sort-ascent"
                        st-sort-descent="st-sort-descent" st-sort-default="reverse">
                        Journal
                        <i *ngIf="key =='title'" class="fa {{reverse==true?'fa-caret-up':'fa-caret-down'}}"></i>
                     </th>
                  </tr>
               </thead>
                 <tbody>
                    <tr class="unread" *ngFor="let ta of availablelotlist;let i = index">
                       <td>
                        {{itemsPerPage * (p - 1) + i + 1}}
                       </td>
                       <td>
                          {{ta.title}}
                       </td>
                      
                       
                     <td>
                       <span *ngIf="ta.withvendor == 1"> {{ta.vendorsendmailon}}</span>
                      <span *ngIf="ta.withvendor == 0">  <button (click)="retryVendor(ta)">Retry</button></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>
        </div>

      </div>
      <div class="col-md-12" style="padding-bottom: 10px;    margin-top: -40px;">
        <div class="panel">
          <div class="panel-hdr">
            <h2 class="">
             Already Assigned lots
            </h2>
         
          </div>
          <div class="box-body">

            <div style="max-height: 200px;overflow-y: auto;">

              <dx-data-grid
              id="gridContainer2"
              [dataSource]="assignedlotlist"
              [showBorders]="true"
              [columnAutoWidth]="true"
              >
              <dxo-paging [pageSize]="10"> </dxo-paging>
              <dxo-pager
              [showPageSizeSelector]="true"
              [allowedPageSizes]="[5,10, 20, 50,100]"
              [showNavigationButtons]="true">
              </dxo-pager>
                 
               <dxi-column dataField="title" caption="Journal"  ></dxi-column>
               <dxi-column dataField="totalunits" caption="Units"  ></dxi-column>
               <dxi-column dataField="withvendor" caption="Email Status" cellTemplate="emailstatus" ></dxi-column>
               <dxi-column dataField="vendorsendmailon" caption="Assigned Date" dataType="date" format="dd-MMM-yyyy" ></dxi-column>
               <dxi-column dataField="username" caption="Assigned To" ></dxi-column>
               <dxi-column dataField="currentstage" caption="Lot Status"  ></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 'emailstatus'" style="text-align: left;">
                  <div  *ngIf="cellInfo.data.withvendor == 0" > Failed 
                    <span style="cursor:pointer;color: #ef3030;"
                    title="Retry"> <i class="fas fa-redo"  (click)="retryVendor(cellInfo.data)"></i> </span>
               </div>
               <div  *ngIf="cellInfo.data.withvendor == 1" > Success  
            </div>
            <div  *ngIf="cellInfo.data.withvendor == 2" > NA
            </div>
                  </div>
           
              </dx-data-grid>
              
  </div>
          </div>
        </div>

      </div>
      <div class="box-body">
        <div class="row">
          <div *ngIf="completevalidate !=false"  class="col-sm-12 col-md-12 pull-right" style="margin-bottom: 0px;margin-top: -37px;">
            <button type="button" class="m-r-10 btn btn-sm btn-outline-primary waves-effect waves-themed pull-right"
            [disabled]="availablelotlist.length!=0"
            (click)="
             completelot()">Complete</button>
         							  
          </div>
        </div>

      </div>
 </div>

  </section>
  <div class="row">
    <ng-template #worlAreaPopUpTemplate style="width:80%">
      <div class="modal-content" ngDraggable [handle]="dragHandle">
        <div class="modal-header" style="cursor:move;" #dragHandle>
          <h4 class="modal-title">{{comments}}</h4>
          <button type="button" class="close pull-right" aria-label="Close" (click)="workAreaPopUpModalRef.hide();">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          <div style="visibility:visible">
            <div class="form-group">
              <label for="comment">{{comments_header}}</label><span style="color: red;"
                *ngIf="command"><sup>*</sup></span>

              <textarea class="form-control" rows="4" id="desc" [(ngModel)]="procomment"></textarea>
            </div>
          </div>
          <br>
          <div class="form-group row" *ngIf="!command">
            <label class="col-md-4 control-label">To Stage</label>
            <div class="col-mod-8">
              <select name="selback" id="selback" [(ngModel)]="selback" class="form-control">
                <option value="">Select</option>
                <option *ngFor=" let uni of uniqueStageTitles" value="{{uni.jobworkflowid}}">{{uni.stagename_alias}}
                </option>
              </select>
            </div>
          </div>
          <button type="button" class="btn btn-outline-primary waves-effect waves-themed btn-sm" (click)="add()"
            ng-dblclick="return false"><i class="fa fa-comment"></i> {{buttonType}}</button>
        </div>
      </div>
    </ng-template>
  </div>
  <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>
