<section class="content-header">
  <h4 translate class="subheader-title">
    <span class="subheader-icon fal fa-cog"></span>
    WorkFlow Definition
    <small> </small>
  </h4>

</section>

<section class="content">
  <div class="row">
    <div class="col-sm-12 col-md-12 col-lg-12">
      <!-- Form Elements -->
      <div class="box">
        <div class="box-header with-border">
          <h3 class="box-title">Add New</h3>

          <!-- <a download="sample_workflow.xls" target="_blank" href="assets/images/sample_workflow.xlsx">
        Click here to download sample workflow
      </a> -->
          <div class="form-inline">
            <div class="form-group">
              <input type="file" (change)="onFileChange($event)" multiple="false"
                style="border: 1px solid #ddd; padding: 2px;" />
            </div>
            <div class="form-group">
              <span (click)="exportAsXLSX()" class="btn btn-primary waves-effect waves-themed btn-sm"
                title="Click here to download sample workflow"><i class="fal fa-file-excel"></i> </span>
            </div>
          </div>
          <div class="box-tools pull-right">

            <ol class="breadcrumb">

              <li><a href="#/dashboard"><i class="fal fa-home"></i> Home</a></li>
              <li><a [routerLink]='["/workflowconfiguration/workflow"]'><i class="fal fa-taskss"></i> WorkFlow
                  Master</a></li>
              <li class="active">WorkFlow Definition</li>
            </ol>
            <!-- <a [routerLink]='["/masters/workflow"]' class="btn btn-info btn-xs pull-right">
            Back &nbsp;<i class="fa fa-arrow-circle-o-left" aria-hidden="true"></i>
          </a> -->
          </div>
        </div>
        <div class="box-body">
          <div class="row">
            <div class="col-sm-12">
              <mat-horizontal-stepper #stepper (selectionChange)="onStepChange($event);">
                <mat-step label="Define stages" state="definestages" disableRipple="true">
                  <div class="row">
                    <div class="col-md-12">
                      <div class="progress" style="height: 8px;">
                        <div id="progress-bar" class="progress-bar progress-bar-info progress-bar-striped active"
                          role="progressbar" aria-valuenow="33.33" aria-valuemin="0" aria-valuemax="100"
                          style="width: 33.33%">
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="row">
                    <div class="col-sm-3">
                      <div class="panel panel-custom">
                        <div class="panel-hdr">
                          <h2>Stages
                          </h2>
                        </div>
                        <div class="panel-body  stages_container">

                          <div class="input-group">
                            <input type="text" class="form-control" placeholder="WorkFlow Name"
                              [(ngModel)]="stageFilter" name="stageFilter" 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>
                          <p-scrollPanel [style]="{width: '100%', height: '450px'}" class="custombar1 n-p-r">
                            <ul>
                              <li *ngFor="let stage of stages|filter:stageFilter; let i = index">
                                <span class="stage">{{stage.stage}}</span>
                                <button type="button" class="btn btn-mini pull-right" alt="Add" title="Add"
                                  (click)="addStage(stage)">
                                  <span class="fa fa-plus"></span>
                                </button>
                              </li>
                            </ul>
                          </p-scrollPanel>
                        </div>
                      </div>
                    </div>
                    <div class="col-sm-5">
                      <div class="panel panel-custom">
                        <div class="panel-hdr">
                          <h2>Workflow Details
                          </h2>
                        </div>
                        <div class="panel-body" style="min-height: 510px;">
                          <div class="form-group">
                            <label for="desc" class="control-label">Workflow Name</label>
                            <div class="row">
                              <div class="col-sm-10">
                                <input class="form-control" type="text" name="workflowname"
                                  [(ngModel)]="workflow.workflowname" />
                              </div>
                              <div class="col-sm-2">
                                <button class="btn btn-primary waves-effect waves-themed btn-sm" type="button"
                                  (click)="openserachwindow(searchWindowTemplate)"><i class="fal fa-search"
                                    aria-hidden="true"></i></button>
                              </div>
                            </div>
                          </div>
                          <div class="form-group">
                            <label for="desc" class="control-label">Description</label>
                            <textarea class="form-control" style="resize:none" rows="2" id="desc"
                              [(ngModel)]="workflow.description"></textarea>
                          </div>
                          <label for="desc" class="control-label">Workflow Stages</label>
                          <div style="height:290px;overflow:auto;">
                            <table id="mainTable" class="table table-bordered table-striped">
                              <thead>
                                <tr>
                                  <th>#</th>
                                  <th>Stage Name</th>
                                  <th>Reorder</th>
                                  <th>Action</th>
                                </tr>
                              </thead>
                              <tbody>
                                <tr style="cursor:pointer;" *ngFor="let stg of MappedStage; let i = index"
                                  [ngClass]="{selected: i === selectedRow}" (click)="loadStageConfig(i)">
                                  <th scope="row">{{i + 1 }}</th>
                                  <td>{{stg.stagename_alias}}</td>
                                  <td>
                                    <button class="btn btn-default btn-sm" style="padding: 1px 4px !important;"
                                      type="button" (click)="moveUpChoice(i)">
                                      <i class="fa fa-chevron-up" aria-hidden="true"></i>
                                    </button>&nbsp;<button class="btn btn-default btn-sm"
                                      style="padding: 1px 4px !important;" type="button" (click)="moveDownChoice(i)"><i
                                        class="fa fa-chevron-down" aria-hidden="true"></i></button>
                                  </td>
                                  <td class="text-center">
                                    <a (click)="removeStage(i)" class="" alt="Remove" title="Remove">
                                      <span class="fal fa-trash red"></span>
                                    </a>
                                  </td>
                                </tr>
                              </tbody>
                            </table>
                          </div>
                          <div *ngIf="MappedStage.length>0" class="pull-right m-t-10">
                            <button class="btn btn-sm btn-outline-primary waves-effect waves-themed btn-xs"
                              type="button" (click)="SaveOrder()">
                              Save</button> </div>

                        </div>
                      </div>
                    </div>
                    <div class="col-sm-4">
                      <div class="panel panel-custom">
                        <div class="panel-hdr">
                          <h2>Stage name :
                            <label style="margin-bottom: 0;"><i>
                                {{selectedStage.stagename_alias!==undefined ?selectedStage.stagename_alias:'Stage Configuration' }}
                              </i>
                            </label>
                          </h2>
                        </div>
                        <div class="panel-body n-p-r">
                          <p-scrollPanel [style]="{width: '100%', height: '490px'}" class="custombar1">
                            <form [formGroup]="stageconfigForm">
                              <ul id="myUL">
                                <li>
                                  <div class="row form-group">
                                    <label class="control-label col-md-5">
                                      Input File Type:
                                    </label>
                                    <div class="col-md-7 col-sm-12">
                                      <select class="form-control" formControlName="inputfile" id="cmbinputfile"
                                        #cmbinputfile (change)="AddinputOutputfileType($event,'inputFileType');">
                                        <option [value]="0">--Select--</option>
                                        <option *ngFor="let file of activeFileType" [value]="file.filetypeid">
                                          {{file.filetype}}
                                      </select>
                                    </div>
                                  </div>
                                  <div class="divinputlist">
                                    <div class="divfilelist ng-binding ng-scope" *ngFor="let item of inputFileType">
                                      {{item.filevalue}}<div class="closebtn"
                                        (click)="RemoveInOutFileType(item.filetype,'inputFileType')">x</div>
                                    </div>
                                    <label style="text-align: center; line-height: 40px;color: gray;"
                                      *ngIf="inputFileType.length==0" class="ng-hide">
                                      Input File Types
                                    </label>
                                  </div>
                                </li>
                                <li>
                                  <div class="row form-group">
                                    <label class="control-label col-md-5">
                                      Output File Type:
                                    </label>
                                    <div class="col-md-7 col-sm-12">
                                      <select class="form-control" formControlName="outputfile" id="cmboutputfile"
                                        (change)="AddinputOutputfileType($event,'outputFileType');">
                                        <option [value]="0">--Select--</option>
                                        <option *ngFor="let b of activeFileType" [value]="b.filetypeid">
                                          {{b.filetype}}
                                      </select>
                                    </div>
                                  </div>
                                  <div class="divinputlist">
                                    <div class="divfilelist ng-binding ng-scope" *ngFor="let item of outputFileType">
                                      {{item.filevalue}}<div class="closebtn"
                                        (click)="RemoveInOutFileType(item.filetype,'outputFileType')">x</div>
                                    </div>
                                    <label style="text-align: center; line-height: 40px;color: gray;"
                                      *ngIf="outputFileType.length==0" class="ng-hide">
                                      Output File Types
                                    </label>
                                  </div>
                                </li>
                                <li>
                                  <div class="row form-group">
                                    <label class="control-label col-md-5">
                                      Allocation Type:
                                    </label>
                                    <div class="col-md-7 col-sm-12">
                                      <select class="form-control combo-default " formControlName="allocationtype"
                                        id="Selectedallocationtype" (change)="onconfigchanged();">
                                        <option value="0">--Select--</option>
                                        <option *ngFor="let allocationtype of allocationtypes"
                                          [value]="allocationtype.allocationtypeid">
                                          {{allocationtype.allocationtype}}
                                        </option>
                                      </select>
                                    </div>
                                  </div>
                                  <div class="row form-group">
                                    <label class="control-label col-md-5">
                                      Unit:
                                    </label>
                                    <div class="col-md-7 col-sm-12">
                                      <select class="form-control combo-default " formControlName="unit"
                                        id="Selectedunit" (change)="onconfigchanged();">
                                        <option [value]="0">--Select--</option>
                                        <option *ngFor="let unit of units" [value]="unit.unitid">
                                          {{unit.unitname}}
                                      </select>
                                    </div>
                                  </div>
                                  <div class="row form-group">
                                    <label class="control-label col-md-5">
                                      Stage Type:
                                    </label>
                                    <div class="col-md-7 col-sm-12">
                                      <select class="form-control combo-default" formControlName="stagetype"
                                        id="Selectedstagetype" (change)="onconfigchanged();">
                                        <option [value]="0">--Select--</option>
                                        <option *ngFor="let stagetype of stagetypes" [value]="stagetype.stagetypeid">
                                          {{stagetype.stagetype}}
                                      </select>
                                    </div>
                                  </div>
                                </li>
                                <li>
                                  <div class="row form-group">
                                    <label class="control-label col-md-5">
                                      Checkin App:
                                    </label>
                                    <div class="col-md-7 col-sm-12">
                                      <select class="form-control combo-default" formControlName="checkin_app"
                                        id="SelectedApplicationtype" (change)="onappconfigchanged1();">
                                        <option [value]="0">--Select--</option>
                                        <option *ngFor="let application of applications"
                                          [value]="application.applicationid">
                                          {{application.application}}
                                      </select>

                                      <div class="form-group" style="padding-top: 20px;" *ngIf='checkinweburl'>
                                        Web URL Features
                                        <tr
                                          *ngFor="let feature of FeatureselectedItemsCheckIn | filter:'weburl';let i = index">
                                          <td class="scolumn">
                                            <input type="checkbox" [checked]="feature.active" id={{feature.mdata}}
                                              (change)="ChangeActive1($event)" name={{feature.mdata}}>
                                            <label for={{feature.mdata}}>{{feature.mdata}}</label>
                                          </td>
                                        </tr>
                                      </div>
                                      <div class="form-group" style="padding-top: 20px;" *ngIf='checkinserviceurl'>
                                        Service URL Features
                                        <tr
                                          *ngFor="let feature of FeatureselectedItemsCheckIn | filter:'serviceurl';let i = index">
                                          <td class="scolumn">
                                            <input type="checkbox" [checked]="feature.active" id={{feature.mdata}}
                                              (change)="ChangeActive1($event)" name={{feature.mdata}}>
                                            <label for={{feature.mdata}}>{{feature.mdata}}</label>
                                          </td>
                                        </tr>
                                      </div>

                                    </div>
                                  </div>
                                  <div class="row form-group">
                                    <label class="control-label col-md-5">
                                      Checkout App:
                                    </label>
                                    <div class="col-md-7 col-sm-12">
                                      <select class="form-control combo-default" formControlName="checkout_app"
                                        id="Selectedcheckoutapp" (change)="onappconfigchanged2();">
                                        <option [value]="0">--Select--</option>
                                        <option *ngFor="let application of applications"
                                          [value]="application.applicationid">
                                          {{application.application}}
                                      </select>

                                      <div class="form-group" style="padding-top: 20px;" *ngIf='checkoutweburl'>
                                        Web URL Features
                                        <tr
                                          *ngFor="let feature of FeatureselectedItemsCheckOut | filter:'weburl';let i = index">
                                          <td class="scolumn">
                                            <input type="checkbox" [checked]="feature.active" id={{feature.mdata}}
                                              (change)="ChangeActive2($event)" name={{feature.mdata}}>
                                            <label for={{feature.mdata}}>{{feature.mdata}}</label>
                                          </td>
                                        </tr>
                                      </div>
                                      <div class="form-group" style="padding-top: 20px;" *ngIf='checkoutserviceurl'>
                                        Service URL Features
                                        <tr
                                          *ngFor="let feature of FeatureselectedItemsCheckOut | filter:'serviceurl';let i = index">
                                          <td class="scolumn">
                                            <input type="checkbox" [checked]="feature.active" id={{feature.mdata}}
                                              (change)="ChangeActive2($event)" name={{feature.mdata}}>
                                            <label for={{feature.mdata}}>{{feature.mdata}}</label>
                                          </td>
                                        </tr>
                                      </div>


                                    </div>
                                  </div>
                                  <div class="row form-group">
                                    <label class="control-label col-md-5">
                                      In Process App:
                                    </label>

                                    <div class="col-md-7 col-sm-12">
                                      <select class="form-control combo-default" formControlName="inprocessapp"
                                        id="Selectedinprocessapp" (change)="onappconfigchanged3();">
                                        <option [value]="0">--Select--</option>
                                        <option *ngFor="let application of applications"
                                          [value]="application.applicationid">
                                          {{application.application}}
                                      </select>


                                      <div class="form-group" style="padding-top: 20px;" *ngIf='inprogressweburl'>
                                        Web URL Features
                                        <tr
                                          *ngFor="let feature of FeatureselectedItemsInProgress | filter:'weburl';let i = index">
                                          <td class="scolumn">
                                            <input type="checkbox" [checked]="feature.active" id={{feature.mdata}}
                                              (change)="ChangeActive3($event)" name={{feature.mdata}}>
                                            <label for={{feature.mdata}}>{{feature.mdata}}</label>
                                          </td>
                                        </tr>
                                      </div>
                                      <div class="form-group" style="padding-top: 20px;" *ngIf='inprogressserviceurl'>
                                        Service URL Features
                                        <tr
                                          *ngFor="let feature of FeatureselectedItemsInProgress | filter:'serviceurl';let i = index">
                                          <td class="scolumn">
                                            <input type="checkbox" [checked]="feature.active" id={{feature.mdata}}
                                              (change)="ChangeActive3($event)" name={{feature.mdata}}>
                                            <label for={{feature.mdata}}>{{feature.mdata}}</label>
                                          </td>
                                        </tr>
                                      </div>
                                    </div>
                                  </div>
                                </li>
                                <li>
                                  <label class="radio-inline">
                                    <input type="checkbox" formControlName="signoffnotification"
                                      name="signoffnotification" id="signoffnotification"
                                      (change)="onconfigchanged()" />&nbsp; SignOff Notification
                                  </label>

                                  <div *ngIf="stageconfigForm.value.signoffnotification">
                                    <div class="row form-group">
                                      <label class="control-label col-md-5">
                                        Mail Template:
                                      </label>
                                      <div class="col-md-7 col-sm-12">
                                        <select class="form-control combo-default" formControlName="mailtemplate"
                                          (change)="onconfigchanged($event);">
                                          <option [value]="0">--Select--</option>
                                          <option *ngFor="let b of activeMailTemplate" [value]="b.mailtemplateid">
                                            {{b.mailtemplatename}}
                                        </select>
                                      </div>
                                    </div>
                                    <label class="radio-inline">
                                      <input type="checkbox" formControlName="mailattachment"
                                        (change)="onconfigchanged()" name="WfileMove" value="issignoffNotify" />&nbsp;
                                      Mail Attachment
                                    </label>
                                  </div>
                                </li>
                                <li>
                                  <label class="radio-inline">
                                    <input type="checkbox" formControlName="checklistlog" (change)="onconfigchanged()"
                                      name="WfileMove" value="checklistlog" />&nbsp; Check-List Log
                                  </label>
                                  <div *ngIf="stageconfigForm.value.checklistlog">
                                    <div class="row form-group">
                                      <label class="control-label col-md-5">
                                        Template:
                                      </label>
                                      <div class="col-md-7 col-sm-12">
                                        <select class="form-control" formControlName="checklisttemplateid"
                                          id="checklisttemplateid" (change)="onconfigchanged($event);">
                                          <option [value]="0">--Select--</option>
                                          <option *ngFor="let b of activeChecklist" [value]="b.checklistid">
                                            {{b.checklist}}
                                        </select>
                                      </div>
                                    </div>
                                  </div>
                                </li>
                                <li>
                                  <label class="radio-inline">
                                    <input type="checkbox" formControlName="acknowledgement"
                                      (change)="onconfigchanged()" name="WfileMove" value="acknowledgement" />&nbsp;
                                    Acknowledgement
                                  </label>
                                  <div *ngIf="stageconfigForm.value.acknowledgement">
                                    <div class="row form-group">
                                      <label class="control-label col-md-5">
                                        Mail Template:
                                      </label>
                                      <div class="col-md-7 col-sm-12">
                                        <select class="form-control" formControlName="ackmailtemplate"
                                          (change)="onconfigchanged($event);">
                                          <option [value]="0">--Select--</option>
                                          <option *ngFor="let b of activeMailTemplate" [value]="b.mailtemplateid">
                                            {{b.mailtemplatename}}
                                        </select>
                                      </div>
                                    </div>
                                  </div>
                                </li>
                                <li>
                                  <label class="radio-inline">
                                    <input type="checkbox" formControlName="pmnotification" (change)="onconfigchanged()"
                                      name="WfileMove" value="pmnotification" />&nbsp; PM Notification
                                  </label>
                                  <div *ngIf="stageconfigForm.value.pmnotification==true">
                                    <div class="row form-group">
                                      <label class="control-label col-md-5">
                                        Mail Template:
                                      </label>
                                      <div class="col-md-7 col-sm-12">
                                        <select class="form-control" formControlName="pmmailtemplate"
                                          (change)="onconfigchanged($event);">
                                          <option [value]="0">--Select--</option>
                                          <option *ngFor="let b of activeMailTemplate" [value]="b.mailtemplateid">
                                            {{b.mailtemplatename}}
                                        </select>
                                      </div>
                                    </div>
                                  </div>
                                </li>
                                <li>
                                  <label class="radio-inline">
                                    <input type="checkbox" formControlName="querycompilation"
                                      (change)="onconfigchanged()" name="WfileMove" value="querycompilation" />&nbsp;
                                    Query Compilation
                                  </label>
                                  <div *ngIf="stageconfigForm.value.querycompilation==true">
                                    <div class="row form-group">
                                      <label class="control-label col-md-5">
                                        Mail Template:
                                      </label>
                                      <div class="col-md-7 col-sm-12">
                                        <select class="form-control" formControlName="querycomtemplateid"
                                          (change)="onconfigchanged($event);">
                                          <option [value]="0">--Select--</option>
                                          <option *ngFor="let b of activeMailTemplate" [value]="b.mailtemplateid">
                                            {{b.mailtemplatename}}
                                        </select>
                                      </div>
                                    </div>
                                    <label class="radio-inline">
                                      <input type="checkbox" formControlName="querybatch" (change)="onconfigchanged()"
                                        name="WfileMove" value="querybatch" />&nbsp; Query batch
                                    </label>
                                  </div>
                                </li>
                                <li>
                                  <label class="radio-inline">
                                    <input type="checkbox" formControlName="merged_lot" (change)="onconfigchanged()"
                                      name="MergeLot" value="merged_lot" />
                                    Batch Process
                                  </label>
                                  <label class="radio-inline">
                                    <input type="checkbox" formControlName="process_without_file"
                                      (change)="onconfigchanged()" name="WfileMove"
                                      value="process_without_file" />Without
                                    File Movement
                                  </label>
                                  <label class="radio-inline">
                                    <input type="checkbox" formControlName="backmatterstart"
                                      (change)="onconfigchanged()" name="backmatterstart"
                                      value="backmatterstart" />Backmatter Start
                                  </label>
                                </li>
                                <li>
                                  <div class="row form-group">
                                    <label class="control-label col-md-5">
                                      Publication Type:
                                    </label>
                                    <div class="col-md-7 col-sm-12">
                                      <select class="form-control combo-default" formControlName="publicationtype">
                                       <option  *ngFor = "let d of publicationtypelist">
                                         {{d}}
                                       </option>
                                       
                                      </select>
                                    </div>
                                  </div>
                                </li>
                                <li>
                                  <label class="radio-inline">
                                    <input type="checkbox" (change)="metaFieldChecked($event);"
                                      [checked]="isMetaFieldsChk" />&nbsp; MetaFields
                                  </label>
                                  <div *ngIf="isMetaFieldsChk==true">
                                    <div class="row form-group">
                                      <div class="col-md-12 col-sm-12 pull-right text-right">
                                        <button id="myBtn" class="btn btn-info btn-xs" type="button"
                                          (click)="saveStageConfigMetaFields(metaFieldTemplate);">
                                          Add MetaFields
                                        </button>
                                      </div>
                                    </div>
                                  </div>
                                </li>

                                <!-- <li>
                                  <label class="radio-inline" style="margin-left:0px !important;padding-left: 5px;">
                                    <input type="checkbox" formControlName="islotenable" (change)="onconfigchanged()" name="WfileMove"
                                      value="islotenable" />&nbsp; Enable Lots
                                  </label>
                                </li> -->

                              </ul>
                            </form>
                            <div ng-show="selectedStage!==undefined && selectedStage.stageid>0"
                              class="m-t-10 pull-right">
                              <button class="btn btn-sm btn-outline-primary waves-effect waves-themed btn-xs"
                                type="button" (click)="savestageconfig()">
                                Save config
                              </button>
                            </div>
                          </p-scrollPanel>
                        </div>
                      </div>
                    </div>



                  </div>
                  <div>
                    <button class="pull-right btn btn-sm btn-outline-primary waves-effect waves-themed"
                      (click)="loadStageMovement(stepper);">
                      <span class="fal fa-arrow-right mr-1"></span>Next</button>
                  </div>

                </mat-step>
                <mat-step label="Stage Movement" state="stagemovement" disableRipple="true">
                  <div class="row">
                    <div class="col-md-12">
                      <div class="progress" style="height: 8px;">
                        <div id="progress-bar" class="progress-bar progress-bar-info progress-bar-striped active"
                          role="progressbar" aria-valuenow="66.66" aria-valuemin="0" aria-valuemax="100"
                          style="width: 66.66%">
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="row">
                    <div class="col-md-12">
                      <table class="table table-bordered table-striped">
                        <thead>
                          <tr>
                            <th>Sr.no.</th>
                            <th>Stage Name</th>
                            <th>Parallel To </th>
                            <th>Next Stage</th>
                            <th>Move Back To</th>
                            <th>Multiple Move Back </th>
                          </tr>
                        </thead>
                        <tbody>
                          <tr *ngFor="let stage of mappedStageMovement;let i = index">
                            <th scope="row">{{i+1}} </th>
                            <td>{{stage.stagename_alias}}</td>
                            <td>
                              <select class="form-control" (change)="changeStage($event,stage.wfdid,i,'Parallel')">
                                <option label="Na" value="0">Na</option>
                                <option *ngFor="let t of mappedStageList" [value]="t.stageid"
                                  [selected]="stage.parallelstage==t.stageid">
                                  {{t.stagename_alias}}
                              </select>
                            </td>
                            <td>
                              <select class="form-control" (change)="changeStage($event,stage.wfdid,i,'Next')">
                                <option label="Na" value="0">Na</option>
                                <option *ngFor="let t of mappedStageList" [value]="t.stageid"
                                  [selected]="stage.nextstage==t.stageid">
                                  {{t.stagename_alias}}
                              </select>
                            </td>
                            <td>
                              <select class="form-control" (change)="changeStage($event,stage.wfdid,i,'Moveback')">
                                <option label="Na" value="0">Na</option>
                                <option *ngFor="let t of mappedStageList" [value]="t.stageid"
                                  [selected]="stage.movebackstage==t.stageid">
                                  {{t.stagename_alias}}
                              </select>
                            </td>
                            <td>
                              <!-- <select class="form-control" (change)="changeStage($event,stage.wfdid,i,'Reset')">
                                <option label="Na" value="0">Na</option>
                                <option *ngFor="let t of mappedStageList" [value]="t.stageid"
                                  [selected]="stage.resetstage==t.stageid">
                                  {{t.stagename_alias}}
                              </select> -->
                              <ng-multiselect-dropdown [placeholder]="'Select'"
                                (onSelectAll)="selectAll($event,stage.wfdid,i,'Reset')" [data]="mappedStageList"
                                [settings]="MultipleMoveBackDDLSettings" name="MultipleMoveBack"
                                [(ngModel)]="multipleMoveBackList[i]"
                                (onSelect)="changeStage($event,stage.wfdid,i,'Reset')"
                                (onDeSelect)="deSelect(i,'Reset')" (onDeSelectAll)="UnSelectMoveBack(i,'Reset')">
                              </ng-multiselect-dropdown>


                            </td>
                          </tr>
                        </tbody>
                      </table>
                    </div>
                  </div>
                  <div>
                    <button matStepperPrevious class="btn btn-sm btn-outline-primary waves-effect waves-themed"
                      (click)="loadAddNew();">
                      <span class="fal fa-arrow-left mr-1"></span>Previous</button>
                    <button matStepperNext class="pull-right btn btn-sm btn-outline-primary waves-effect waves-themed">
                      <span class="fal fa-arrow-right mr-1"></span>Next</button>
                    <button class="btn btn-sm btn-outline-primary waves-effect waves-themed pull-right m-r-10"
                      *ngIf="mappedStageMovement!==undefined && mappedStageMovement.length>0"
                      (click)="saveStageMovement();" type="button">
                      <span class="fal fa-save mr-1"></span>
                      Save
                    </button>
                  </div>
                </mat-step>
                <mat-step label="Review & Confirm" state="review">
                  <div class="row">
                    <div class="col-md-12">
                      <div class="progress" style="height: 8px;">
                        <div id="progress-bar" class="progress-bar progress-bar-info progress-bar-striped active"
                          role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"
                          style="width: 100%">
                        </div>
                      </div>
                    </div>
                  </div>
                  <div style="float:right;">
                    <button class="btn btn-info btn-xs" *ngIf="graphDefinitionString!=''"
                      (click)="downloadflowchart('graphDiv',workflow.workflowname)"><span class="fa fa-download"
                        aria-hidden="true"></span>&nbsp;click to download flow chart
                    </button>
                  </div>
                  <div #mermaid>
                  </div>
                  <div>
                    <button matStepperPrevious class="btn btn-sm btn-outline-primary waves-effect waves-themed"
                      (click)="loadStageMovement(stepper);"> <span class="fal fa-arrow-left mr-1"></span>Previous
                    </button>
                    <button class="btn btn-sm btn-outline-primary waves-effect waves-themed pull-right"
                      *ngIf="mappedStageMovement!==undefined && mappedStageMovement.length>0"
                      (click)="finishWorkFlowConfig();" type="button">
                      <span class="fal fa-check mr-1"></span>Finish
                    </button>
                  </div>
                </mat-step>


                <!-- Icon overrides. -->
                <ng-template matStepperIcon="definestages">
                  <mat-icon>edit</mat-icon>
                </ng-template>
                <ng-template matStepperIcon="stagemovement">
                  <mat-icon>tune</mat-icon>
                </ng-template>
                <ng-template matStepperIcon="review">
                  <mat-icon>done</mat-icon>
                </ng-template>
              </mat-horizontal-stepper>
            </div>
          </div>

          <!-- End Form Elements -->
        </div>
      </div>
    </div>
  </div>
</section>

<ng-template #searchWindowTemplate>
  <div class="modal-content" id="mainNgCnt" ngDraggable>
    <div class="custom-modal-header" style="cursor:move;" #dragHandle>
      <h4 class="">Workflow Search</h4>
      <button type="button" class="close pull-right" aria-label="Close" (click)="workflowModalRef.hide()">
        <span aria-hidden="true">&times;</span>
      </button>
    </div>
    <div class="custom_body">
      <div class="row">
        <div class="col-sm-8" style="float:right;">
          <div class="input-group">
            <input type="text" class="form-control" placeholder="WorkFlow Name" [(ngModel)]="searchText"
              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="table-responsive">
        <table class="table table-bordered table-striped table-condensed">
          <thead>
            <tr class="headings">
              <th>Select Workflow</th>
              <th class="pointer" (click)="sort('workflowname')">
                Workflow
                <i *ngIf="key =='workflowname'" class="fa {{reverse==true?'fa-caret-up':'fa-caret-down'}}"></i>
              </th>
              <th class="pointer" (click)="sort('description')">
                Description
                <i *ngIf="key =='description'" class="fa {{reverse==true?'fa-caret-up':'fa-caret-down'}}"></i>
              </th>
            </tr>
          </thead>
          <tbody>
            <tr
              *ngFor="let item of workflows |filter:searchText|paginate: { itemsPerPage: itemsPerPage, currentPage: p};let i = index">
              <td>
                <a style="cursor:pointer;" (click)="onsearchclick(item)">select</a>
              </td>
              <td>{{item.workflowname}}</td>
              <td>{{item.description}}</td>
            </tr>
            <tr *ngIf="workflows.length==0 || (workflows |filter:searchText).length === 0">
              <td colspan="3" style="text-align:center;">No Records Found</td>
            </tr>
          </tbody>
        </table>
        <div *ngIf="workflows && workflows.length!=0" class="pull-right">
          <pagination-controls (pageChange)="p = $event"></pagination-controls>
        </div>
      </div>
    </div>
  </div>
</ng-template>



<ng-template #metaFieldTemplate>
  <div class="modal-content" id="mainNgCnt" ngDraggable [handle]="dragHandle">

    <div class="custom-modal-header" style="cursor:move;" #dragHandle>
      <h4 class="">Add Meta Fields - {{selectedStage.stagename_alias}}</h4>
      <button type="button" class="close pull-right" aria-label="Close" (click)="metaFieldModalRef.hide()">
        <span aria-hidden="true">&times;</span>
      </button>
    </div>
    <div class="custom_body">
      <div class="row">
        <div class="col-lg-12">
          <h4 style="background-color:#f7f7f7; font-size: 13px; text-align: center; padding: 7px 10px; margin-top: 0;">
            Form Configuration
          </h4>
        </div>
      </div>
      <div class="row">
        <div class="col-md-12">
          <app-fbeditor (frmElementJson)="getfrmValue($event);" [wfdid]="selectedStage.wfdid"></app-fbeditor>
        </div>
      </div>
    </div>
  </div>
</ng-template>

<ngx-spinner bdColor="rgba(255, 255, 255, 0.8)" size="default" type="line-scale-party" [fullScreen]="false">
</ngx-spinner>