<!-- Main content -->
<section class="content-header clearfix">
  <h2 translate class="subheader-title">
    <span class="subheader-icon fal fa-tasks"></span>&nbsp; CC-{{stagename}} Process
    <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>
       <!--  <a href="#/dashboard" class="btn btn-outline-primary waves-effect waves-themed btn-sm">
          <i class="fal fa-chart-area"></i> Go back to dashboard</a> -->
        <!-- <ol class="breadcrumb">
      <li><a href="#/dashboard"><i class="fal fa-home"></i> Home</a></li> 
       <li><a [routerLink]='["/ccstageprocess/collectionprocess"]'><i class="fal fa-taskss"></i><span (click)="refresh()">Construct Connect Process</span> 
          </a></li>      
      <li class="active">Collection Process</li>
    </ol> -->
      </div>

    </div>
  </div>
</section>

<section class="content">
  <div class="box padding-15" style="display: block;margin: -6px;" *ngIf="!frommyjob">
    <div class="row">
      <div class="col-md-8">
        <label>Workflow Type: </label>
        <div class="multi_select_col">
          <ng-multiselect-dropdown [placeholder]="'Select The Workflow Type...'" [data]="jobProductTypeList"
            textField="project_subtitle" [settings]="_ddlProjecttypeSettings" name="ddljobproducttype"
            [(ngModel)]="_userselectedItems" (onDeSelect)="onItemDeSelect($event)" (onSelect)="onItemSelect($event);"
            (onSelectAll)="onSelectAll($event)" (onDeSelectAll)="onDeSelectAll($event)">
          </ng-multiselect-dropdown>
        </div>
      </div>
      <div class="col-md-4 text-right">
        <label>Job Info: &nbsp;</label>
        <div class="multi_select_col">
          <select class="form-control" (change)="selectstagedetails($event)">
            <option [value]="0">--Select--</option>
            <option *ngFor="let j of jobs" [value]="j.jobid" [selected]="j.jobid==currentjobno">
              {{j.title}}
          </select>
        </div>
      </div>
    </div>
    <form [formGroup]="joburlForm" (ngSubmit)="Post(joburlForm.value)">
      <div class="box-body">
        <div class="row row-padding-bottom">
          <input type="hidden" name="joburlid" formControlName="joburlid" />
          <div class="form-group col-md-4" style="margin-bottom: 0px;">
            <label class="labelfont control-label" for="projectid">Project Code<span style="color:red;">*</span></label>
            <input type="text" trim placeholder="Enter the Project Code" name="projectid" formControlName="projectid"
              class="form-control" />
          </div>
          <div class="form-group col-md-4" style="margin-bottom: 0px;">
            <label class="labelfont control-label" for="job_url">URL<span style="color:red;">*</span></label>
            <input type="text" trim placeholder="Enter the Job URL" name="job_url" formControlName="job_url"
              class="form-control" />
          </div>
          <div class="form-group col-md-4" style="margin-bottom: 0px; visibility: hidden;">
            <label class="labelfont control-label" for="bitnumber">Bid Number/Project Name<span
                style="color:red;">*</span></label>
            <input type="text" trim placeholder="Enter the Bid Number or Project Name" name="bitnumber"
              formControlName="bitnumber" class="form-control" />
          </div>
          <div class="row row-padding-bottom" style="padding-top: 15px; padding-left: 770px;">
            <div class="form-group pull-right" style="margin-bottom: 0px;">
              <button type="button" class="btn btn-sm btn-outline-warning waves-effect waves-themed pull-right"
                (click)="clearForm();">Reset</button>
              <button type="submit" class="m-r-10 btn btn-sm btn-outline-primary waves-effect waves-themed pull-right"
                [disabled]="joburlForm.invalid">Add Lot</button>
            </div>
          </div>
        </div>
      </div>
    </form>
    <table class="table table-bordered table-striped table-condensed" id="lotdetails" st-table="alllotdetails"
      st-safe-src="rowCollection" search-watch-model="query">

      <thead>
        <tr *ngIf="alllotdetails.length">

          <th st-ratio="20" st-sort="sno" class="st-sort-default sheader" st-sort-ascent="st-sort-ascent"
            st-sort-descent="st-sort-descent" st-sort-default="reverse">#</th>

          <th st-ratio="20" st-sort="title" class="st-sort-default sheader" st-sort-ascent="st-sort-ascent"
            st-sort-descent="st-sort-descent" st-sort-default="reverse">Lot Title</th>

          <th st-ratio="20" st-sort="job_url" class="st-sort-default" style="width:20%;min-width:50px;"
            st-sort-ascent="st-sort-ascent" st-sort-descent="st-sort-descent" st-sort-default="reverse">URL</th>

          <th st-ratio="20" st-sort="projectid" class="st-sort-default" style="width:30%;min-width:50px;"
            st-sort-ascent="st-sort-ascent" st-sort-descent="st-sort-descent" st-sort-default="reverse">Project Code
          </th>

          <!-- <th st-ratio="20" st-sort="bitnumber" class="st-sort-default" style="width:30%;min-width:50px;"
            st-sort-ascent="st-sort-ascent" st-sort-descent="st-sort-descent" st-sort-default="reverse">Bid Number/Name</th> -->


          <th st-ratio="20" st-sort="lotstatus" class="st-sort-default sheader" st-sort-ascent="st-sort-ascent"
            st-sort-descent="st-sort-descent" st-sort-default="reverse">Status</th>

          <th st-ratio="20" st-sort="Action" class="st-sort-default sheader" st-sort-ascent="st-sort-ascent"
            st-sort-descent="st-sort-descent" st-sort-default="reverse">Action</th>

        </tr>
      </thead>
      <tbody>
        <tr *ngFor="let lot of alllotdetails;let i = index">
          <td st-ratio="20" class="sbody">{{i+1}}</td>
          <td st-ratio="20" class="sbody">{{lot.title}}</td>
          <td st-ratio="20" style="width:30%;min-width:50px;">{{lot.job_url}}</td>
          <td st-ratio="20" style="width:30%;min-width:50px;">{{lot.projectid}} </td>
          <!-- <td st-ratio="20" style="width:30%;min-width:50px;">{{lot.bitnumber}} </td> -->
          <td st-ratio="20" class="sbody">{{lot.lotstatus}}</td>
          <td st-ratio="20" class="sbody" style="text-align: center;">
            <a (click)="completeStage('A',worlAreaPopUpTemplate,lot.lotid,lot.transactionid,lot.jobworkflowid)"
              class="badge bg-green">
              Complete
            </a>
          </td>
        </tr>
      </tbody>
    </table>

    <div *ngIf="alllotdetails.length===0" style="text-align:center;background-color: #ddd;padding:3px;"
      class="ng-scope"><b>No Jobs Found.</b></div>
  </div>
  <section class="content" *ngIf="frommyjob && olua_area == false">

    <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-2">
          <!-- <input type="text"  name="jobtiltle" [(ngModel)]="jobtitle" style="width: auto;min-width: 180px;"
          class="form-control" readonly /> -->
          <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">
          <!-- <input type="text"  name="lottiltle" [(ngModel)]="lottitle" style="width: -webkit-fill-available;"
              class="form-control" readonly /> -->
          <span class="label_sty">{{lottitle}}</span>
        </div>
        <div class="form-group col-md-2" style="margin-top: -13px;margin-left: auto;">
          <div *ngIf="projectdefinitionid_pass == automailprojectid">
            <select class="form-control" [(ngModel)]="selectedcategoryid" id="fieldname"
              (change)="selectcategory(selectedcategoryid)" style="width: auto;height: 37px;">
              <option value="0" selected>Select Category</option>
              <option *ngFor='let item of categorylist' value="{{item.categoryid}}">{{item.categoryname}}
              </option>

            </select>
          </div>
        </div>
       <!--  <div class="form-group col-md-2" style="margin-top: -13px;margin-right: 10px;visibility: hidden;">
          <div class="input-group">
            <button class="btn btn-primary waves-effect waves-themed btn-sm" type="button"
              (click)="addmeta(lotMetadataTemplate)">
              <label class="labelfont control-label" style="color: white !important;"><span class="fa fa-plus"
                  style="color: white;"></span> Add Metadata</label>
            </button>
          </div>
        </div> -->
       

      </div>

      <div class="col-md-12" style="padding-bottom: 10px;    margin-top: -40px;">
        <div class="panel">
          <div class="panel-hdr">
            <h2 class="">
              Metadata Details
            </h2>
         
          </div>
          <div class="box-body">
            <div class="content_loop">
             
                <div class="row" >
             <div class="col-md-12" >
            <div class="panel-hdr" style="background-color: #eeeef1;margin-right: -8px; margin-left: -2px;">
              <h2 style="margin-left: -12px;">
                Excel Meta Data
              </h2>
              <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-target="#isexcel" style="line-height: 16px;" (click)="toggle_meta(1)" >
                   <i class="fa fa-compress-alt" style="color: #fff;"></i>
                 </a> 
               </div>
            </div>
          </div>
                  </div>
                  <div class="box-body" style="border: 1px solid #e1d1d1;" id="isexcel" [(ngbCollapse)]="!collapse_excelmd">
                  <div class="row">
                <div [ngClass]="{'col-md-4 col-sm-6 col-lg-4': meta_item.isexcelmeta === true}" *ngFor="let meta_item of jobmetalst">
                  <div *ngIf="meta_item.isexcelmeta === true" style="font-weight: 500;">
                  <div class="form-group row">
                    <div class="col-md-4">
                      <label class="labelfont control-label"
                        style="font-weight: 600;">{{meta_item.FieldName}}:
                        <i *ngIf="meta_item.isrequired ===true && meta_item.isexcelmeta ===false"
                          style="color:red;">*</i>
                      </label>
                    </div>
                    <div class="col-md-8">
                        <input type="text" *ngIf="meta_item.inputtype ==='text'" name="meta_item.FieldName"
                          [(ngModel)]="meta_item.FieldValue" title="{{meta_item.FieldValue}}" class="form-control" readonly />

                        <select *ngIf="meta_item.inputtype==='dropdown'" [(ngModel)]="meta_item.FieldValue"
                          class="form-control"  (change)="selectdropdown(meta_item)">
                          <option [value]="0">
                            --Select--
                          </option>
                          <option *ngFor="let item of meta_item.Fieldselectoption">
                            {{item.Fieldselectoption}}
                          </option>
                        </select>
                        <input type="date" *ngIf="meta_item.inputtype==='date'" [(ngModel)]="meta_item.FieldValue"
                          class="form-control">
                    

                    </div>
                  </div>
                </div>

                </div>
              </div>
              </div>
              <div class="row" >
                <div class="col-md-12" >
               <div class="panel-hdr" style="background-color: #eeeef1;margin-right: -8px; margin-left: -2px;">
                 <h2 style="margin-left: -12px;">
                  Mandatory Meta Data
                 </h2>
                 <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-target="#mandatory" style="line-height: 16px;" (click)="toggle_meta(2)" >
                      <i class="fa fa-compress-alt" style="color: #fff;"></i>
                    </a> 
                  </div>
               </div>
             </div>
                     </div>
                     <div class="box-body" style="border: 1px solid #e1d1d1;" id="mandatory" [(ngbCollapse)]="!collapse_mandemd">
                     <div class="row">
                   <div [ngClass]="{'col-md-4 col-sm-6 col-lg-4': (meta_item.FieldValue === '' || meta_item.FieldValue!= '') && meta_item.isexcelmeta ===false && meta_item.isrequired===true}" *ngFor="let meta_item of jobmetalst">
                    <div
                    *ngIf="(meta_item.FieldValue === '' || meta_item.FieldValue!= '') && meta_item.isexcelmeta ===false && meta_item.isrequired===true">
                   
                     <div class="form-group row">
                       <div class="col-md-4">
                         <label class="labelfont control-label"
                           style="font-weight: 600;">{{meta_item.FieldName}}:
                           <i *ngIf="meta_item.isrequired ===true && meta_item.isexcelmeta ===false"
                             style="color:red;">*</i>
                         </label>
                       </div>
                       <div class="col-md-8">

                        
                            <input *ngIf="meta_item.inputtype==='text' && meta_item.FieldName == 'Project ID'" 
                             type="text" 
                             name="meta_item.FieldName"
                             [ngModel]="meta_item.FieldValue.includes('-') ? meta_item.FieldValue.split('-')[0] : meta_item.FieldValue.toUpperCase()"
                             class="form-control" 
                             (input)="meta_item.FieldValue = $event.target.value.toUpperCase()" [disabled]="meta_item.Isdisplay" />
                            
                             <input *ngIf="meta_item.inputtype==='text' && meta_item.FieldName != 'Project ID'" type="text" name="meta_item.FieldName"
                             [(ngModel)]="meta_item.FieldValue" class="form-control" [disabled]="meta_item.Isdisplay"/>
                           <select *ngIf="meta_item.inputtype==='dropdown'" [(ngModel)]="meta_item.FieldValue"
                             class="form-control"  (change)="selectdropdown(meta_item)" [disabled]="meta_item.Isdisplay">
                             <option [value]="''">
                               --Select--
                             </option>
                             <option *ngFor="let item of meta_item.Fieldselectoption">
                               {{item.Fieldselectoption}}
                             </option>
                           </select>
                           <input type="date" *ngIf="meta_item.inputtype==='date'" style="line-height: normal !important"
                             [(ngModel)]="meta_item.FieldValue" class="form-control" (change)="datevalidation(meta_item,'')" [disabled]="meta_item.Isdisplay">
                        
   
                         
                       </div>
                     </div>
                    </div>
   
                   </div>
                 </div>
                 </div>
                 <div class="row" >
                  <div class="col-md-12" >
                 <div class="panel-hdr" style="background-color: #eeeef1;margin-right: -8px;margin-left: -2px;">
                   <h2 style="margin-left: -12px;">
                     Non-Mandatory Meta Data
                   </h2>
                   <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-target="#nonmandatory" style="line-height: 16px;" (click)="toggle_meta(3)" >
                        <i class="fa fa-compress-alt" style="color: #fff;"></i>
                      </a> 
                    </div>
                 </div>
               </div>
                       </div>
                       <div class="box-body" style="border: 1px solid #e1d1d1;" id="nonmandatory" [(ngbCollapse)]="!collapse_nonmd">
                       <div class="row">
                     <div *ngFor="let meta_item of jobmetalst" [ngClass]="{'col-md-4 col-sm-6 col-lg-4': !meta_item.isexcelmeta && !meta_item.isrequired}">
                      <div *ngIf="!meta_item.isexcelmeta && !meta_item.isrequired">                  
                       <div class="form-group row" >
                         <div class="col-md-4">
                           <label class="labelfont control-label"
                             style="font-weight: 600;">{{meta_item.FieldName}}:
                           </label>
                         </div>
                         <div class="col-md-8">
                           
                             <input *ngIf="meta_item.inputtype==='text'" type="text" name="meta_item.FieldName"
                               [(ngModel)]="meta_item.FieldValue" class="form-control" [disabled]="meta_item.Isdisplay"/>
        
                             <select *ngIf="meta_item.inputtype==='dropdown'" [(ngModel)]="meta_item.FieldValue"
                               class="form-control"  (change)="selectdropdown(meta_item)" [disabled]="meta_item.Isdisplay">
                               <option [value]="''">
                                 --Select--
                               </option>
                               <option *ngFor="let item of meta_item.Fieldselectoption">
                                 {{item.Fieldselectoption}}
                               </option>
                             </select>
                             <div *ngIf="meta_item.inputtype==='checkbox'" style="display: flex;">
                              <div *ngFor="let item of meta_item.Fieldselectoption" style="text-wrap: nowrap;">
                                <input  
                                  type="checkbox" 
                                  [checked]="meta_item.FieldValue === item.Fieldselectoption"
                                  (change)="onCheckboxChange(item.Fieldselectoption,meta_item.FieldName)"
                                  [disabled]="meta_item.Isdisplay">
                                {{ item.Fieldselectoption }}
                              </div>
                             </div>
                            


                             <input type="date" *ngIf="meta_item.inputtype==='date'" style="line-height: normal !important"
                               [(ngModel)]="meta_item.FieldValue" class="form-control" (change)="datevalidation(meta_item,'')" [disabled]="meta_item.Isdisplay">
                          
                         </div>
                       </div>                  
                  </div>
                     </div>
                   </div>
                   </div>
            </div>
          </div>
        </div>
        <div class="panel" style="margin-top: -23px !important;" *ngIf="projectdefinitionid_pass==automailprojectid">
          <div class="panel-hdr">
            <h2 class="">
              Email Details
            </h2>
            <div class="panel-toolbar">
              <div style="float:right;" style="padding:5px 0;">
                <div class="input-group">
                  <div class="panel-toolbar" role="menu" title="Project Minimize">
                    <a href="#emaildetails" data-toggle="tooltip"
                      class="btn btn-panel hover-effect-dot js-panel-collapse waves-effect waves-themed"
                      data-toggle="collapse" style="line-height: 16px;">
                      <i class="fa fa-compress-alt" style="color: #fff;"></i>
                    </a>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div id="emaildetails" class="collapse">
            <div class="box-body">
              <div class="row row-padding-bottom"
                style="padding-left: 10px;overflow:scroll;max-height:190px;margin-top: -8px;"
                *ngIf="mailbody != undefined && mailbody != null  && mailbody !=''">
                <div class="mailbox-read-info">
                  <h4 class="ng-binding">
                    <span style="font-weight: 600;">Subject:</span> {{subject}}
                  </h4>
                  <h6 class="ng-binding">
                    <span style="font-weight: 600;">From:</span> {{from_user}}
                    <span class="mailbox-read-time pull-right ng-binding">{{rec_date | date:'medium'}}</span>
                  </h6>
                </div>
                <div [innerHTML]="mailbody"></div>
              </div>
              <div class="row row-padding-bottom"
                style="padding-left: 10px;text-align: center !important;font-weight: 500;"
                *ngIf="mailbody == undefined || mailbody == null  || mailbody ==''">
                <span>This message might have been moved or deleted.</span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="box-body">
        <div class="row">
          <div 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"
              (click)="
             updatemetaandcompletelot()" [disabled]="selectedcategoryid == 0">Complete</button>
            <!-- [disabled]="showcomplete" -->
            <button type="button" class="m-r-10 btn btn-sm btn-outline-primary waves-effect waves-themed pull-right"
              (click)="openconfrimpop(joburlForm.value)" [disabled]="selectedcategoryid == 0 || addrecnotshoe">Add Record</button>
               <!-- [disabled]="joburlForm.invalid" -->
            <button type="button" *ngIf="projectdefinitionid_pass != automailprojectid"
              class="m-r-10 btn btn-sm btn-outline-primary waves-effect waves-themed pull-right"
              (click)="completeStage('F',worlAreaPopUpTemplate,0,0,0,'norec')">No Record</button>
            <button
              *ngIf="mail_url !== null && mail_url !== undefined && mail_url!=='' && projectdefinitionid_pass == automailprojectid"
              type="button" class="m-r-10 btn btn-sm btn-outline-primary waves-effect waves-themed pull-right"
              (click)="showmail()" ng-dblclick="return false"><i class="fa fa-envelope"></i>&nbsp; Open Mail</button>
            <!-- <button type="button" class="m-r-10 btn btn-sm btn-outline-primary waves-effect waves-themed pull-right" (click)="completeStage('F',worlAreaPopUpTemplate,0,0,0,'dup')">Duplicate</button>-->
            <button *ngIf="stagelist_length ===4" type="button"
              class="m-r-10 btn btn-sm btn-outline-primary waves-effect waves-themed pull-right"
              (click)="completeStage('F',worlAreaPopUpTemplate,0,0,0,'dup')">Duplicate</button>
			<button *ngIf="showbidnumber" type="button" class="m-r-10 btn btn-sm btn-outline-primary waves-effect waves-themed pull-right" 
              (click)="openbidnumber(bidNumberPopUpTemplate)"
               >Bid Number Search</button>								  
          </div>
        </div>

      </div>

      <!--<table class="table table-bordered table-striped table-condensed"  id="lotdetails"
      st-table="alllotdetails" st-safe-src="rowCollection" search-watch-model="query" *ngIf="showlotgrid">
      
      <thead>
        <tr *ngIf="alllotdetails.length">
      
          <th st-ratio="20" st-sort="sno" class="st-sort-default sheader" st-sort-ascent="st-sort-ascent"
            st-sort-descent="st-sort-descent" st-sort-default="reverse">#</th>

          <th st-ratio="20" st-sort="title" class="st-sort-default sheader"
            st-sort-ascent="st-sort-ascent" st-sort-descent="st-sort-descent" st-sort-default="reverse">Lot Title</th>
      
          <th st-ratio="20" st-sort="job_url" class="st-sort-default" style="width:20%;min-width:50px;"
            st-sort-ascent="st-sort-ascent" st-sort-descent="st-sort-descent" st-sort-default="reverse">URL</th>
      
          <th st-ratio="20" st-sort="projectid" class="st-sort-default" style="width:30%;min-width:50px;"
            st-sort-ascent="st-sort-ascent" st-sort-descent="st-sort-descent" st-sort-default="reverse">Project ID</th>

         
          
          <th st-ratio="20" st-sort="lotstatus" class="st-sort-default sheader" st-sort-ascent="st-sort-ascent"
            st-sort-descent="st-sort-descent" st-sort-default="reverse">Status</th>
      
         <th st-ratio="20" st-sort="Action" class="st-sort-default sheader" st-sort-ascent="st-sort-ascent"
            st-sort-descent="st-sort-descent" st-sort-default="reverse">Action</th>
      
        </tr>
      </thead>
      <tbody>
        <tr *ngFor="let lot of alllotdetails;let i = index">
          <td st-ratio="20" class="sbody">{{i+1}}</td>
          <td st-ratio="20" class="sbody" >{{lot.title}}</td>
          <td st-ratio="20" style="width:30%;min-width:50px;"><span *ngIf="!editlot">{{lot.job_url}}</span><span><input *ngIf="editlot" [(ngModel)]="lot.job_url"></span> </td>
          <td st-ratio="20" style="width:30%;min-width:50px;"><span *ngIf="!editlot">{{lot.projectid}}</span><span><input *ngIf="editlot" [(ngModel)]="lot.projectid" ></span> </td>
          
          <td st-ratio="20" class="sbody">{{lot.lotstatus}}</td>
          <td st-ratio="20" class="sbody" style="text-align: center;">

            <span class="fal fa-pencil blue" style="cursor:pointer;" (click)="savelotinfo(lot,'edit')">
            </span> &nbsp;
            <span class="fal fa-save blue" style="cursor:pointer;" (click)="savelotinfo(lot,'save')">
            </span>
          </td>
        </tr>
      </tbody>
      </table>    
      <div *ngIf="alllotdetails.length===0"
      style="text-align:center;background-color: #ddd;padding:3px;" class="ng-scope"><b>No Jobs Found.</b></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>
  <!-- gokul -->
  <div class="row">
    <ng-template #Addmetapopuptemplate style="width:80%">
      <div class="modal-content" ngDraggable [handle]="dragHandle">
        <div class="modal-header" style="cursor:move;" #dragHandle>
          <h4 class="modal-title">Add Metadata</h4>
          <button type="button" class="close pull-right" aria-label="Close" (click)="Addmetapopup.hide()">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>

        <div class="modal-body">
          <form [formGroup]="addmetaFrom" (ngSubmit)="addmeta_sumbit(addmetaFrom.value)">
            <input name="projectdefitionid" formControlName="projectdefinitionid" placeholder="Projectdefinition Id"
              readonly type="hidden">
            <table class="table">
              <tr>
                <td>
                  <div class="form-group">
                    <label>JobMeta</label><span style="color:red;">*</span><input type="text" trim
                      placeholder="JobMeta Name" name="jobmeta" formControlName="jobmeta" class="form-control" />
                    <div *ngIf="submitted && g.jobmeta.errors" class="invalid-feedback">
                      <div *ngIf="g.jobmeta.errors.required" class="errormsg">JobMeta Name is required
                      </div>
                    </div>
                  </div>
                </td>
              </tr>
              <tr>
                <td>
                  <div class="form-group">
                    <label class="labelfont" for="inputtype">Select Input Type<span style="color:red;">*</span></label>
                    <select id="inputtype" class="form-control" formControlName="inputtype"
                      (change)="onchangeinputtype()">
                      <option value="0" selected>Select Inputtype</option>
                      <option value="text">Textbox</option>
                      <option value="dropdown">Dropdown</option>
                    </select>
                  </div>
                </td>
              </tr>
              <tr *ngIf="metadataselectinputoptionflag==true">
                <td>
                  <div class="form-group">
                    <label class="labelfont" for="selectoption">Enter Input Option<span
                        style="color:red;">*</span></label>
                    <table class="table table-bordered table-striped">
                      <tr style="text-align: center;background-color: cornsilk;">
                        <td>#</td>
                        <td>
                          <input id="selectoption" class="form-control" formControlName="selectoption"
                            style="border-style: outset;" placeholder="Enter Option Value" />
                        </td>
                        <td>
                          <button type="button" class="btn btn-sm btn-outline-primary waves-effect waves-themed"
                            (click)="addselectoptionlist();"><i class="fal fa-plus blue"></i></button>
                        </td>
                      </tr>
                      <tr *ngFor="let item of selectoptionlist;let i = index"
                        style="text-align: center;background-color: ghostwhite;">
                        <td>{{i+1}}</td>
                        <td><span>{{item.Fieldselectoption}}</span></td>
                        <td>
                          <button type="button" class="btn btn-sm btn-outline-warning waves-effect waves-themed"
                            (click)="updateselectoptionlist(item);"><i class="fa fa-trash"></i></button>
                        </td>
                      </tr>
                    </table>
                  </div>
                </td>
              </tr>
              <tr>
                <td colspan="2">
                  <div class="form-group">
                    <input type="checkbox" trim placeholder="isexcelmeta" name="isexcelmeta"
                      formControlName="isexcelmeta" /> <label>
                      Is Job Creation Meta
                    </label>
                  </div>
                </td>
              </tr>
              <tr>
                <td colspan="2">
                  <div class="form-group">
                    <input type="checkbox" trim placeholder="isrequired" name="isrequired"
                      formControlName="isrequired" /> <label>
                      Is Required
                    </label>
                  </div>
                </td>
              </tr>
              <tr>
                <td>
                  <div class="form-group">
                    <button type="button" class="btn btn-sm btn-outline-warning waves-effect waves-themed pull-right"
                      (click)="metaclearform();">Cancel</button>
                    <button type="submit" class="btn btn-sm btn-outline-primary waves-effect waves-themed pull-right"
                      [disabled]="addmetaFrom.invalid">
                      <span>Add</span>
                    </button>
                  </div>
                </td>
              </tr>
            </table>
          </form>
        </div>
      </div>
    </ng-template>
  </div>
  <div class="row">
    <ng-template #jobMetadataTemplate>
      <div class="modal-content" id="mainNgCnt1" ngDraggable>
        <div class="modal-header" style="cursor:move" #dragHandle>
          <h4>Add Metadata</h4>
          <button type="button" class="close pull-right" aria-label="Close" (click)="jobMetaDataModalRef.hide()">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          <div class="form-horizontal">
            <!-- <div class="form-group row">
                              <label class="col-md-4">Field Name<i style="color:red;">*</i></label>
                             
                             <div class="col-md-8">
                              <select class="form-control" [(ngModel)]="selectedfieldid" id="fieldname">
                                  <option value="0" selected>--Select--</option>
                                  <option *ngFor='let item of jobMetadata' value="{{item.jobmetaid}}">{{item.jobmeta}}
                                  </option>
                              </select>
                          </div>
                          </div> -->
            <div *ngIf="jobmetalst.length >0">
              <div class="form-group" *ngFor="let item of jobmetalst">
                <label class="col-md-4">{{item.FieldName}}<i *ngIf="item.required === true"
                    style="color:red;">*</i></label>
                <!-- <label class="col-md-4">Value</label> -->
                <div class="col-md-8">
                  <!-- <input class="form-control" id="fieldvalue" [(ngModel)]="fieldvalue" type="text"
                                  required placeholder="Enter Field Value"> -->
                  <input *ngIf="item.type === 'text'" class="form-control" id="crt{{item.FieldName}}"
                    [(ngModel)]="item.FieldValue" type="text" required placeholder="Enter Value">
                  <select *ngIf="item.type === 'dropdown'" class="form-control" id="crt{{item.FieldName}}">
                    <option value="0" selected>
                      --Select--
                    </option>
                  </select>
                </div>
              </div>
            </div>
            <div class="col-md-12" style="text-align:center;" *ngIf="jobmetalst.length ===0">
              <span style="font-weight: bold;">
                No Jobmeta data Found.
              </span>
            </div>
          </div>
          <div class="" style="text-align: right; margin-top: 10px;" *ngIf="jobmetalst.length>0">
            <button type="button" class="btn btn-outline-primary waves-effect waves-themed btn-sm"
              (click)="AddMetaData(jobmetalst);">Add</button>
          </div>
        </div>
      </div>
    </ng-template>
  </div>
  <div class="row">
    <ng-template #lotMetadataTemplate>
      <div class="modal-content" id="mainNgCnt1" ngDraggable>
        <div class="modal-header" style="cursor:move" #dragHandle>
          <h4>Add Metadata</h4>
          <button type="button" class="close pull-right" aria-label="Close" (click)="lotMetadataTemplate_close()">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">

          <!-- form start -->

          <!--  <div class="form-horizontal">
                          <div class="form-group row">
                              <label class="col-md-4">Field Name<i style="color:red;">*</i></label>
                             <div class="col-md-8">
                              <select class="form-control" [(ngModel)]="selectedfieldid" id="fieldname">
                                  <option value="0" selected>--Select--</option>
                                  <option *ngFor='let item of lotmeta' value="{{item.jobmetaid}}">{{item.jobmeta}}
                                  </option>

                              </select>
                          </div>
                          </div>
						  </div>-->
          <!-- <div class="form-horizontal"> -->
          <div class="box-body">
            <div class="content_loop" style="min-width:0; overflow: hidden;">
              <div class="row">
                <div class="col-md-4 col-sm-6 col-lg-4" *ngFor="let meta_item of lotmeta">
                  <div class="form-group row">
                    <div class="col-md-2">
                      <input type="checkbox" (click)="checked_metalist(meta_item)">
                    </div>
                    <div class="col-md-8">
                      <label class="labelfont control-label" name="meta_item.jobmeta"
                        style="width: max-content;font-weight: 600;">{{meta_item.jobmeta}}
                        <!-- <i *ngIf="meta_item.isrequired ===true && meta_item.isexcelmeta ===false" style="color:red;">*</i> -->
                      </label>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <!-- <div class="form-group row">
                            <label class="col-md-4" style="padding-top: 3px">FieldName :<i style="color:red;">*</i></label>
                            <div class="col-sm-8">
                              <div class="multi_select_col" style="margin: -20;">
													  
                              <ng-multiselect-dropdown [placeholder]="'Select The Meta...'" [data]="lotmeta"
                              textField="jobmeta" [settings]="_ddlMetaSettings"
                              name="ddljobproducttype" [(ngModel)]="metadata_checked" (onDeSelect)="Meta_onItemDeSelect($event)"
                              (onSelect)="Meta_onItemSelect($event);" style="margin-left: -15px;">
                            </ng-multiselect-dropdown>  
                              </div>
                            </div>
                           
                          </div>	 -->

          </div>

          <div class="" style="text-align: right; margin-top: 10px;">

            <button type="button" [disabled]="metadata_checked.length ==0"
              class="btn btn-outline-primary waves-effect waves-themed btn-sm"
              (click)="Add_Lot_Meta_Data(selectedfieldid);">Add</button>
          </div>
        </div>
      </div>
    </ng-template>
  </div>
<div class="row">
    <ng-template #bidNumberPopUpTemplate >

      <div class="modal-content maxheight80"  ngDraggable [handle]="dragHandle" style="width: 57rem;transform: translate(-40px, -50px) !important;" >

        <div class="modal-header" style="cursor:move;" #dragHandle>
          <h4 class="modal-title">Bid Number Search</h4>
          <button type="button" class="close pull-right" aria-label="Close" (click)="bidNumberPopUpModalRef.hide();">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>

        <div class="modal-body">
          <div class="box padding-15" style="display: block;" style="width: 54rem;" >
            <div class="row">
              <div class="col-sm-1">
                  <label style="margin-top: 6px !important;width: 80px !important;">  <span style="font-weight: 600;">Bid Number:</span> </label>
              </div>
              <div class="col-sm-2">
                  <div  class="multi_select_col">
                    <input class="form-control" [(ngModel)]="solicitation" type="text" placeholder="Type Bid number...">
                  </div>
                  <!--(keyup)="onKey($event)"-->
              </div>
              <div class="col-sm-2">
                <label style="margin-top: 6px !important;">  <span style="font-weight: 600;">Project Name:</span> </label>
            </div>
            <div class="col-sm-2">
                <div  class="multi_select_col" style="margin-left: -60px;">
                  <input class="form-control" [(ngModel)]="Project_name_search" type="text" placeholder="Type Project Name...">
                </div>
                <!--(keyup)="onKey($event)"-->
            </div>

              <div class="col-sm-1">
                  <div class="multi_select_col">

                    
                   <button class="btn btn-primary waves-effect waves-themed btn-sm" (click)="getBidlst('')">
                      <span>
                          Search
                      </span>
                   </button>
                  </div>
              </div>
             </div>
          <div class="box-body">

             <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" >
            Company Name
          </th>
          <th class="pointer" >
            Project ID
          </th>
          <th class="pointer" >
            Project Name
          </th>
          <th class="pointer" >
            Bid Number
          </th>
          <th class="pointer" >
            Bid Date
          </th>
          <th class="pointer" >
            Creation Date
           
          </th>
        </tr>
      </thead>
      <tbody>
        <tr *ngFor="let item of search_bidlst| orderBy: key : reverse |paginate: { itemsPerPage: itemsPerPage, currentPage: p};let i = index">
          <td>{{itemsPerPage * (p - 1) + i + 1}}</td>
          <td  style="word-break:break-all;">{{item.companyname}}</td>       
          <td  style="word-break:break-all;">{{item.projectid}}</td>
          <td  style="word-break:break-all;">{{item.projectname}}</td>
          <td  style="word-break:break-all;">{{item.solicitation}}</td>
          <td>{{item.biddate | date:'MM-dd-yyyy'}}</td>
          <td>{{item.createdon  | date:'MM-dd-yyyy'}}</td>					  
        </tr>
        <tr *ngIf=" search_bidlst.length==0">
          <td colspan="11" style="text-align:center;">No Records Found</td></tr>

      </tbody>
    </table>
    <div *ngIf="search_bidlst && search_bidlst.length!=0" class="pull-right">
      <pagination-controls (pageChange)="p = $event"></pagination-controls>
    </div>
  </div>
          </div>
        </div>
        </div>

      </div>
    </ng-template>
    <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>
  </div>
  <section class="content" *ngIf="frommyjob && olua_area == true">
    <div class="box padding-15" style="display: block;margin: -6px;">
      <div class="box-body">
       <div class="row">
       <!--  <div class="col-sm-12 col-md-12 pull-right" style="margin-top: -13px;margin-right: 10px;margin-bottom:15px">
            <button class="btn btn-primary waves-effect waves-themed btn-sm pull-right" [disabled]="selected_lots.length ==0" type="button"
              (click)="addmeta(lotMetadataTemplate)">
              <label class="labelfont control-label" style="color: white !important;"><span class="fa fa-plus"
                  style="color: white;"></span> Add Metadata</label>
            </button>
        </div> --><!--(click)="addmeta(Addmetapopuptemplate)"-->
       </div>
        <div class="row">
          <div class="table-responsive">
            <table *ngIf="assignedlotlist.length != 0 && assignedlotlist[0].lotmeta != undefined && assignedlotlist[0].lotmeta != null && assignedlotlist[0].lotmeta.length != 0 " class="table table-bordered table-condensed table-hover table-striped">
              <thead class="headings">
                <tr>
                  <th class="sno_width">#</th>
                  <th class="pointer">
                    <label style="font-weight:bold;margin-bottom:0px;">Action</label>
                    <input type="checkbox" [checked]="insert_all == 1" (click)="lot_select($event,item,'M')" [disabled]="true">
                  </th>
                  <th class="pointer" (click)="sort('errorcategory')">
                    Job Title
                    <i *ngIf="key =='errorcategory'" class="fa {{reverse==true?'fa-caret-up':'fa-caret-down'}}"></i>
                  </th>
                  <th class="pointer" (click)="sort('errortype')">
                    Lot Title
                    <i *ngIf="key =='errortype'" class="fa {{reverse==true?'fa-caret-up':'fa-caret-down'}}"></i>
                  </th>
                  <th class="pointer" (click)="sort('createdbyname')">
                    Meta Fields
                    <i *ngIf="key =='createdbyname'" class="fa {{reverse==true?'fa-caret-up':'fa-caret-down'}}"></i>
                  </th>
                 
                </tr>
              </thead>
              <tbody>
                <tr *ngFor="let item of assignedlotlist  |paginate: { itemsPerPage: itemsPerPage, currentPage: p};let i = index">
                  <td>{{itemsPerPage * (p - 1) + i + 1}}</td>
                  <td >
                    <input type="checkbox" [checked]="item.insert_p == 1" [disabled]=" item.insert_p==0 &&  assign_area" (click)="lot_select($event,item,'S')">
                  </td>
                  <td>{{item.jobtitle}}</td>
                  <td>{{item.title}}</td>
                  <td>
                     <div class="content_loop">
                        <div class="row">
                          <div class="col-md-5 col-sm-6 col-lg-6" *ngFor="let meta_item of item.lotmeta">
                            <div class="form-group row">
                              <div class="col-md-4">
                                <label class="labelfont control-label"
                                  style="font-weight: 600; text-wrap: balance!important;">{{meta_item.FieldName}}:
                                  <i *ngIf="meta_item.isrequired ===true && meta_item.isexcelmeta ===false"
                                    style="color:red;">*</i>
                                </label>
                              </div>
                              <div class="col-md-8">
                                <span *ngIf="meta_item.isexcelmeta === true" style="font-weight: 500;">
                                  <!-- {{meta_item.FieldValue}} -->
                                  <input type="text" *ngIf="meta_item.inputtype ==='text'" name="meta_item.FieldName"
                                    [(ngModel)]="meta_item.FieldValue" class="form-control" readonly />
          
                                  <select *ngIf="meta_item.inputtype==='dropdown'" [(ngModel)]="meta_item.FieldValue"
                                    class="form-control" (change)="selectdropdown(meta_item)">
                                    <option [value]="0">
                                      --Select--
                                    </option>
                                    <option *ngFor="let item of meta_item.Fieldselectoption">
                                      {{item.Fieldselectoption}}
                                    </option>
                                  </select>
                                  <input type="date" *ngIf="meta_item.inputtype==='date'" [(ngModel)]="meta_item.FieldValue"
                                    class="form-control">
                                </span>
                                <span
                                  *ngIf="(meta_item.FieldValue === '' || meta_item.FieldValue!= '') && meta_item.isexcelmeta ===false && meta_item.isrequired===true">
                                 
                                  <!-- <input *ngIf="meta_item.inputtype==='text'" type="text" name="meta_item.FieldName"
                                    [(ngModel)]="meta_item.FieldValue" class="form-control" /> -->
                                    <input *ngIf="meta_item.inputtype==='text'&& meta_item.FieldName == 'Project ID'" type="text" name="meta_item.FieldName"
                                    [(ngModel)]="meta_item.FieldValue" class="form-control" (keyup)="onprojectidchange($event,item)"  oninput="this.value = this.value.toUpperCase()" />
                        
                                    <input *ngIf="meta_item.inputtype==='text' && meta_item.FieldName != 'Project ID'" type="text" name="meta_item.FieldName"
                                    [(ngModel)]="meta_item.FieldValue" class="form-control" />
                                  <select *ngIf="meta_item.inputtype==='dropdown'" [(ngModel)]="meta_item.FieldValue"
                                    class="form-control" (change)="selectdropdown(meta_item)">
                                    <option [value]="''">
                                      --Select--
                                    </option>
                                    <option *ngFor="let item of meta_item.Fieldselectoption">
                                      {{item.Fieldselectoption}}
                                    </option>
                                  </select>
                                  <input type="date" *ngIf="meta_item.inputtype==='date'" style="line-height: normal !important"
                                    [(ngModel)]="meta_item.FieldValue" class="form-control" (change)="datevalidation(meta_item,item)">
                                </span>
          
                                <span *ngIf="meta_item.isexcelmeta ===false && meta_item.isrequired===false">
          
                                  <input *ngIf="meta_item.inputtype==='text'" type="text" name="meta_item.FieldName"
                                    [(ngModel)]="meta_item.FieldValue" class="form-control" />
          
                                  <select *ngIf="meta_item.inputtype==='dropdown'" [(ngModel)]="meta_item.FieldValue"
                                    class="form-control" (change)="selectdropdown(meta_item)">
                                    <option [value]="''">
                                      --Select--
                                    </option>
                                    <option *ngFor="let item of meta_item.Fieldselectoption">
                                      {{item.Fieldselectoption}}
                                    </option>
                                  </select>
                                  <input type="date" *ngIf="meta_item.inputtype==='date'" style="line-height: normal !important"
                                    [(ngModel)]="meta_item.FieldValue" class="form-control" (change)="datevalidation(meta_item,item)">
                                </span>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                  </td>
                </tr>
              </tbody>
            </table>
            <div *ngIf="assignedlotlist && assignedlotlist.length!=0" class="pull-right">
              <pagination-controls (pageChange)="p = $event"></pagination-controls>
            </div>
          </div>
        </div>
        <div class="row">
          <div class="col-sm-12 col-md-12 pull-right" style="margin-bottom: 0px;margin-top: 18px;">
            <button type="button" class="m-r-10 btn btn-sm btn-outline-primary waves-effect waves-themed pull-right"
              (click)="
             updatemetaandcompletelot()" [disabled]="selectedcategoryid == 0">Complete</button>
            <!-- [disabled]="showcomplete" -->
            
            <button type="button" class="m-r-10 btn btn-sm btn-outline-primary waves-effect waves-themed pull-right"
              (click)="openconfrimpop(joburlForm.value)" 
              [disabled]="selectedcategoryid == 0 || addrecnotshoe || selected_lots.length != 1 || selected_lots.length == 0 ">
              Add Record</button>
               <!-- [disabled]="joburlForm.invalid" -->
            
               <button type="button" *ngIf="projectdefinitionid_pass != automailprojectid"
              class="m-r-10 btn btn-sm btn-outline-primary waves-effect waves-themed pull-right"
              (click)="completeStage('F',worlAreaPopUpTemplate,0,0,0,'norec')">No Record</button>
            
              <button
              *ngIf="mail_url !== null && mail_url !== undefined && mail_url!=='' && projectdefinitionid_pass == automailprojectid"
              type="button" class="m-r-10 btn btn-sm btn-outline-primary waves-effect waves-themed pull-right"
              (click)="showmail()" ng-dblclick="return false"><i class="fa fa-envelope"></i>&nbsp; Open Mail</button>
    
            <button *ngIf="stagelist_length ===4" type="button"
              class="m-r-10 btn btn-sm btn-outline-primary waves-effect waves-themed pull-right"
              (click)="completeStage('F',worlAreaPopUpTemplate,0,0,0,'dup')">Duplicate</button>
			
              <button *ngIf="showbidnumber" type="button" class="m-r-10 btn btn-sm btn-outline-primary waves-effect waves-themed pull-right" 
              (click)="openbidnumber(bidNumberPopUpTemplate)"
               >Bid Number Search</button>								  
          </div>
        </div>
      </div>
    </div>
  </section>