<section class="content-header">
  <h4 translate class="subheader-title">
      <span class="subheader-icon fal fa-tasks"></span>&nbsp;Supplement
</h4>
</section>
<section class="content">
<div class="box padding-15 clearfix" style="display: block;">
  <div class="row">
    <div class="col-md-3">
      <div class="" id="datatable_length">
        <button type="button" *ngIf="add==true" (click)="Opensupplemnt(supplementTemplate,'add')"
          class="btn btn-outline-primary waves-effect waves-themed btn-sm">
          <span class="fal fa-plus"></span>&nbsp; Add New
        </button>
      </div>
    </div>
    <div class="col-md-9 text-right">
      <div class="form-inline pull-right">
        <div class="form-group">
          <label>
            Product Type: <span class="required">*</span>
          </label>
          <div class="multi_select_col">
            <select class="form-control" id="projectid" [(ngModel)]="projectid" (change)="changeProject(projectid)">
              <option *ngFor="let project of projectdefinitions" [value]="project.projectid">
                {{project.project_subtitle}}
              </option>
            </select>
          </div>
        </div>
        <div class="form-group">
          <label>
            Job No: <span class="required">*</span>
          </label>
          <div class="multi_select_col">
            <select class="form-control" id="jobid" [(ngModel)]="jobid" (change)="changeJob(jobid)">
              <option *ngFor="let jobList of jobLists" [value]="jobList.jobid">
                {{jobList.title}}
              </option>
            </select>
          </div>
        </div>
        <div class="form-group">
          <div class="input-group">
            <input type="text" class="form-control" placeholder="Search" [(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>

      <!-- <td class="text-capitalize">
        <input type="text" trim id="tabcardtitle1" name="tabcardtitle1" [disabled] />
      </td> -->

    </div>
  </div>

  <div class="table-responsive">
    <table class="table table-bordered table-condensed table-striped table-hover">
      <thead>
        <tr class="headings">
          <th style="width:60px">#</th>

          <th *ngIf="(edit==true || delete==true)" style="width:110px;">
            <label style="font-weight:bold;margin-bottom:0px;">Action</label>&nbsp;&nbsp;
          </th>
          <th class="pointer" (click)="sort('title')">
            Job No
            <i *ngIf="key =='title'" class="fa {{reverse==true?'fa-caret-up':'fa-caret-down'}}"></i>
          </th>

          <th class="pointer" (click)="sort('batchname')">
            Supplement Name
            <i *ngIf="key =='batchname'" class="fa {{reverse==true?'fa-caret-up':'fa-caret-down'}}"></i>
          </th>
          <th class="pointer" (click)="sort('supplementtypeid')">
            Supplement Type
            <i *ngIf="key =='supplementtypeid'" class="fa {{reverse==true?'fa-caret-up':'fa-caret-down'}}"></i>
          </th>

          <th class="pointer" (click)="sort('count')">
            Chapter Count
            <i *ngIf="key =='count'" class="fa {{reverse==true?'fa-caret-up':'fa-caret-down'}}"></i>
          </th>
        </tr>
      </thead>
      <tbody>
        <tr
          *ngFor="let item of batchlist| orderBy: key : reverse |filter:searchText|paginate: { itemsPerPage: itemsPerPage, currentPage: p};let i = index">
          <td>{{itemsPerPage * (p - 1) + i + 1}}</td>
          <td *ngIf="(edit==true || delete==true)" style="text-align: center;">
            <span class="fal fa-pencil blue" style="cursor:pointer;"
              (click)="Getdetailview(supplementeditTemplate,item);" title="Edit"
              *ngIf="edit==true"></span>&nbsp;&nbsp;
          </td>
          <td>{{item.title}}</td>
          <td>{{item.batchname}}</td>
          <td>{{item.supplementtype}}</td>
          <td>{{item.count}}</td>
        </tr>
        <tr *ngIf="batchlist.length==0 || (batchlist |filter:searchText).length === 0">
          <td colspan="10" style="text-align:center;">No Records Found</td>
        </tr>
      </tbody>
    </table>
  </div>
    <div *ngIf="batchlist && batchlist.length!=0" class="pull-right">
      <pagination-controls (pageChange)="p = $event"></pagination-controls>
    </div>
 

</div>
</section>

<div class="row">
<ng-template #supplementTemplate>
  <div class="modal-content" id="mainsupplementDiv" ngDraggable [handle]="dragHandle">
    <div class="modal-header" style="cursor:move" #dragHandle>
      <h4 class="modal-title pull-left">&nbsp;Add Supplement</h4>
      <button type="button" class="close pull-right" aria-label="Close" (click)="supplementModelRef.hide()">
        <span aria-hidden="true">&times;</span>
      </button>
    </div>
    <div class="modal-body">
      <!--<div class="col-md-8 pull-right text-right">-->
      <form (ngSubmit)="PostSupplement(SupplementForm.value)" name="form" #f="ngForm">
        <table class="table table-bordered table-condensed table-striped table-hover">
          <tr>
            <td>
              <div class="form-group">
                <label>
                  Product Code:
                </label>
                &nbsp;&nbsp;<span style="color:#3c8dbc !important;font-weight:bold;"
                  class="ng-binding">{{projectname}}</span>

                <!-- <div class="multi_select_col">
                  <label>
                    {{projectname}}
                  </label>
                  <select class="form-control" id="projectid" [(ngModel)]="projectid"
                    (change)="changeProject(projectdefinitionid)">
                    <option [value]="0">--Select--</option>
                    <option *ngFor="let project of projectdefinitions" [value]="project.projectid">
                      {{project.projectname}}
                    </option>
                  </select> 
                </div> -->
              </div>
            </td>
          </tr>

          <tr>
            <td>
              <div class="form-group">
                <label>
                  Please select chapters for:
                </label>
                &nbsp;&nbsp;<span style="color:#3c8dbc !important;font-weight:bold;"
                  class="ng-binding">{{supplementnumber}}-{{year}}</span>
              </div>
            </td>
          </tr>
          <tr>
            <td>
              <div class="form-group">
                <label>
                  Job No:
                </label>
                &nbsp;&nbsp;<span style="color:#3c8dbc !important;font-weight:bold;"
                  class="ng-binding">{{jobname}}</span>
                <!-- <div class="multi_select_col">
                  <label>
                    {{jobname}}
                  </label>
                  <select class="form-control" id="jobid" [(ngModel)]="jobid" (change)="changeJob1(jobid)">
                    <option [value]="0">--Select--</option>
                    <option *ngFor="let jobList of jobLists" [value]="jobList.jobid">
                      {{jobList.title}}
                    </option>
                  </select> 
                </div> -->
              </div>
            </td>
          </tr>
          <tr>
            <td>
              <label *ngIf="lotstatus !==''" style="text-align:center;">
                <div style="margin-left:10%;max-height:250px;float:right;vertical-align:middle">
                  <span class="" style="color:red">
                    {{lotstatus}}
                  </span>
                </div>
              </label>
            </td>
          </tr>

          <tr>
            <td>
              <div class="form-group">
                <label>
                  Supplement Name: <span class="required">*</span>
                </label>
                <input type="text" class="form-control" name="batchname" [(ngModel)]="model.batchname"
                  placeholder="Supplement Name">
              </div>
            </td>
          </tr>
          <tr>
            <td>
              <div class="form-group">
                <label>
                  Supplement Type:
                </label>
                <!-- (change)="changeJob(supplementtypeid)" -->
                <select class="form-control" name="supplementtypeid" [(ngModel)]="model.supplementtypeid" disabled
                  [ngModelOptions]="{standalone: true}">
                  <option [value]="0">--Select--</option>
                  <option *ngFor="let supplementType of supplementTypes" [value]="supplementType.supplementtypeid">
                    {{supplementType.supplementtype}}
                  </option>
                </select>
              </div>
            </td>
          </tr>
          <tr>
            <td>
              <div class="form-group">
                <label>Total Files:&nbsp;<span style="color:#3c8dbc !important;font-weight:bold;">
                    {{totallots}}</span> </label>&nbsp;
                <label>Selected Files:&nbsp;<span
                    style="color:#3c8dbc !important;font-weight:bold;">{{selectedlots}}</span></label>
              </div>
            </td>
          </tr>

          <!-- <tr>
            <td>
              <div class="form-group">
                <input type="checkbox" name="mergedproof" [(ngModel)]="model.mergedproof" />Is Merged Proof
              </div>
            </td>
          </tr> -->

          <tr>
            <td>
              <div class="table-responsive">
                <form id="ChapterForm">
                  <table class="table table-bordered table-condensed table-striped table-hover">
                    <thead>
                      <tr class="headings">
                        <th style="width:60px">#</th>
                        <!-- <th *ngIf="(edit==true || delete==true)" style="width:110px;">
                          <label style="font-weight:bold;margin-bottom:0px;">Action</label>&nbsp;&nbsp;
                        </th> -->
                        <th class="pointer" (click)="sort('title')">
                          Chapters
                          <i *ngIf="key =='title'" class="fa {{reverse==true?'fa-caret-up':'fa-caret-down'}}"></i>
                        </th>
                        <th class="pointer" (click)="sort('chaptertype')">
                          Chapter Type
                          <i *ngIf="key =='chaptertype'"
                            class="fa {{reverse==true?'fa-caret-up':'fa-caret-down'}}"></i>
                        </th>
                        <!-- <th class="pointer" (click)="sort('istabcard')">
                          Tab Card
                          <i *ngIf="key =='istabcard'" class="fa {{reverse==true?'fa-caret-up':'fa-caret-down'}}"></i>
                        </th>
                        <th class="pointer" (click)="sort('tabcardtitle')">
                          Tab card Title
                          <i *ngIf="key =='tabcardtitle'"
                            class="fa {{reverse==true?'fa-caret-up':'fa-caret-down'}}"></i>
                        </th> -->
                        <!-- <th>
                          Production Workflow
                        </th> -->
                        <!-- <th class="pointer" (click)="sort('volumename')">
                          Volume Name
                          <i *ngIf="key =='volumename'"
                            class="fa {{reverse==true?'fa-caret-up':'fa-caret-down'}}"></i>
                        </th> -->
                        <th class="pointer" (click)="sort('stagename_alias')">
                          Current Stage
                          <i *ngIf="key =='stagename_alias'"
                            class="fa {{reverse==true?'fa-caret-up':'fa-caret-down'}}"></i>
                        </th>
                        <!-- <th class="pointer" (click)="sort('isprocessed')">
                          Pick-Up Chapter
                          <i *ngIf="key =='isprocessed'"
                            class="fa {{reverse==true?'fa-caret-up':'fa-caret-down'}}"></i>
                        </th> -->
                      </tr>
                    </thead>
                    <tbody>
                      <tr *ngFor="let chapter of chaplist | orderBy: key : reverse | filter:searchText;let i = index">
                        <!-- <td>{{itemsPerPage * (p - 1) + i + 1}}</td> -->
                        <td *ngIf="(edit==true || delete==true)">
                          <input id="selected" type="checkbox" [(ngModel)]="chapter.selected" name="selected"
                            [ngModelOptions]="{standalone: true}" value="{{chapter.lotid}}" [disabled]="chapter.stageorder>1"
                            (change)="getcheckedsupplement(chapter,$event)" />
                        </td>
                        <td class="text-capitalize">{{chapter.title}}</td>
                        <td class="text-capitalize">{{chapter.chaptertype}}</td>
                        <!-- <td>
                          <input type="checkbox" value="{{chapter.lotid}}" [disabled]="!chapter.selected"
                            [(ngModel)]="chapter.istabcard" [ngModelOptions]="{standalone: true}" />
                        </td>
                        <td><input [disabled]="!chapter.selected || chapter.istabcard== true?false:true" type="text"
                            style="width:100%" [(ngModel)]="chapter.tabcardtitle"
                            [ngModelOptions]="{standalone: true}" />
                        </td> -->
                        <!-- <td>
                          <select class="form-control" id="productionworkflowddl">
                            <option [value]='0'>--Select--</option>
                            <option *ngFor="let lst of productionWorkFlowData;" [value]="lst.productionworkflowid">
                              {{lst.productionworkflow}}
                            </option>
                          </select>
                        </td> -->
                        <!-- <td>
                          <select class="form-control"  (change)="ChangeProductionWorkFlow(i,'Add',$event.target.value)" 
                          id="productionworkflowddl"  >
                            <option [value]='0'>--Select--</option>
                            <option *ngFor="let lst of productionWorkFlowData;" [value]="lst.productionworkflowid">
                              {{lst.productionworkflow}}
                            </option>
                          </select>
                        </td> -->
                        <!-- <td class="text-capitalize">{{chapter.volumename}}</td> -->
                        <td class="text-capitalize">{{chapter.stagename_alias}}</td>
                        <!-- <td>
                          <input type="checkbox" value="{{chapter.isprocessed}}"
                            [disabled]="!chapter.selected ||  chapter.stagename_alias != 'XML Review' && chapter.stagename_alias != 'MS Review'"
                            [(ngModel)]="chapter.isprocessed" [ngModelOptions]="{standalone: true}" />
                        </td> -->
                      </tr>
                      <tr *ngIf="chaplist.length==0 || (chaplist |filter:searchText).length === 0">
                        <td colspan="7" style="text-align:center;">No Records Found</td>
                      </tr>
                    </tbody>
                  </table>
                </form>
              </div>
          <tr *ngIf="operation=='update'">
            <td colspan="2">
              <div class="form-group">
                <input type="checkbox" (change)="ChangeActive($event)" name="active" /><label>Active</label>
              </div>
            </td>
          </tr>
          </td>
          </tr>
          <tr>
            <td>
              <div class="form-group">
                <button type="button" class="btn btn-primary pull-right "
                  (click)="supplementModelRef.hide()">Cancel</button>
                <button type="submit" class="btn-primary btn pull-right">
                  <span *ngIf="add==true">Add</span>
                  <!--<span *ngIf="edit==true">Update</span>-->
                </button>
              </div>
            </td>

          </tr>

        </table>
      </form>
      <!--</div>-->
    </div>
  </div>
</ng-template>
</div>

<div class="row">
<ng-template #supplementeditTemplate>
  <div class="modal-content" id="mainsupplementDiv" ngDraggable [handle]="dragHandle">
    <div class="modal-header" style="cursor:move" #dragHandle>
      <h4 class="modal-title pull-left">&nbsp;Supplement Details</h4>
      <button type="button" class="close pull-right" aria-label="Close" (click)="supplementeditModelRef.hide()">
        <span aria-hidden="true">&times;</span>
      </button>
    </div>
    <div class="modal-body">
      <!--<div class="col-md-8 pull-right text-right">-->
      <form>
       
        <table class="table table-bordered table-condensed table-striped table-hoverr">
          <tbody>
            <tr>
              <td>
                <div class="form-group">
                  <label>
                      Product Type: 
                  </label>
                <div>
               <input type="checkbox" [checked]="mergeproof==1"
                        [disabled]="mergeproof==1 || mergeproof==0 " /> Is Merged Proof
                      </div>
                    </div>
              </td>
              <td><label>{{project_subtitle}}</label><br /></td>
              <td>Job No:</td>
              <td><label>{{jobno}}</label><br /></td>
              <td>Batch Name:</td>
              <td><label>{{batchname}}</label></td>
            </tr>
          </tbody>
        </table>
        <div class="table-responsive">
        <table class="table table-bordered table-condensed table-striped table-hover">
          <thead>
            <tr>
              <th>#</th>
              <th>Chapters</th>
              <th>Chapter Type</th>
              <th>Tab Card</th>
              <th>Tab card Title</th>
              <th>Volume name</th>
              <th>Current Stage</th>
              <th>Pick-Up Chapter</th>
            </tr>
          </thead>
            <tbody>
            <!-- <tr ng-repeat="chapter in detaildate  | orderBy:lotid"> -->
            <tr *ngFor="let chapter of detaildate; let i = index">
              <td>
                <!-- (click)="chapter.istabcard=false;chapter.tabcardtitle='';chapter.isprocessed=false" -->
                <input type="checkbox" [(ngModel)]="chapter.ischeck" name="ischeck"
                  [ngModelOptions]="{standalone: true}" (change)="getcheckedsupplement(chapter,$event)"
                  [disabled]="chapter.ishide ||chapter.stageorder>1" />
              </td>
              <td>{{chapter.title }}</td>
              <td>{{chapter.chaptertype }}</td>
              <!-- {{chapter.ishide}}=ishide
              {{chapter.ischeck}}=ischeck -->

              <td>
                <input type="checkbox" value="chapter.lotid" [disabled]="chapter.ishide || !chapter.ischeck"
                  name="istabcard" [(ngModel)]="chapter.istabcard" [ngModelOptions]="{standalone: true}" />
              </td>
              <!-- <td *ngIf="chapter.ischeck">
                <input type="checkbox" value="chapter.lotid" name="istabcard" [(ngModel)]="chapter.istabcard" [ngModelOptions]="{standalone: true}"/>
              </td> -->
              <!-- <td>
                <select class="form-control" id="productionworkflowddl">
                  <option [value]='0'>--Select--</option>
                  <option *ngFor="let lst of productionWorkFlowData;" [value]="lst.productionworkflowid">
                    {{lst.productionworkflow}}
                  </option>
                </select>
              </td> -->
              <!-- <td >
                
                <select class="form-control" id="productionworkflowddl" 
                (change)="ChangeProductionWorkFlow(i,'Edit',$event.target.value)" [attr.disabled]="chapter.ishide===true? 'disabled' : null"> 
                
                  <option [value]='0' >--Select--</option>
                  <option [attr.selected]="lst.productionworkflowid===chapter.productionworkflowid ? true : null" *ngFor="let lst of productionWorkFlowData;" [value]="lst.productionworkflowid">
                    {{lst.productionworkflow}}
                  </option>
                </select>
              </td> -->
              <td>
                <input [disabled]="chapter.ishide || !chapter.ischeck" type="text" style="width:100%"
                  [(ngModel)]="chapter.tabcardtitle" [ngModelOptions]="{standalone: true}" />
              </td>

              <td>{{chapter.volumename }}</td>
              <td>{{chapter.stagename_alias}}</td>
              <td>
                <div *ngIf="!chapter.isprocessed && chapter.ishide">
                  <!--chapter.stagename_alias != 'Word Submission' &&-->
                  <input type="checkbox" value="{{chapter.editisprocessed}}"
                    [disabled]="(chapter.stagename_alias != 'XML Review' && chapter.stagename_alias != 'MS Review')"
                    name="editisprocessed" [(ngModel)]="chapter.editisprocessed"
                    [ngModelOptions]="{standalone: true}" />
                </div>
                <div *ngIf="chapter.isprocessed ===true && chapter.ishide">
                  <input type="checkbox" value="{{chapter.isprocessed}}" [disabled]="true" name="isprocessed"
                    [(ngModel)]="chapter.isprocessed" [ngModelOptions]="{standalone: true}" />
                </div>
                <div *ngIf="!chapter.ishide">
                  <!--chapter.stagename_alias != 'Word Submission' &&-->
                  <input type="checkbox"
                    [disabled]="!chapter.ischeck || ( chapter.stagename_alias != 'XML Review' && chapter.stagename_alias != 'MS Review')"
                    value="{{chapter.isprocessed}}" name="isprocessed" [(ngModel)]="chapter.isprocessed"
                    [ngModelOptions]="{standalone: true}" />
                </div>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
        <div class="box-footer">
          <button type="button" class="btn btn-outline-primary waves-effect waves-themed btn-sm pull-right" (click)="Editsupp()">
            Save
          </button>
          <div *ngIf="supplementcreated==true" style="color:Red;float:left;font-weight:bold;padding-left:25px;">
            {{statustext}}</div>
        </div>

        <!-- <table class="table">
          <tr>
            <td>
              <div class="form-group">
                <label>
                  Product Code: <span class="required">*</span>
                </label>
                <div class="multi_select_col">
                  <select class="form-control" id="projectid" [(ngModel)]="projectid"
                    (change)="changeProject(projectdefinitionid)" >
                    <option [value]="0">--Select--</option>
                    <option *ngFor="let project of projectdefinitions" [value]="project.projectid">
                      {{project.projectname}}
                    </option>
                  </select>
                </div>
              </div>
            </td>
          </tr>
          <tr>
            <td>
              <div class="form-group">
                <label>
                  Job No: <span class="required">*</span>
                </label>
                <div class="multi_select_col">
                  <select class="form-control" id="jobid" [(ngModel)]="jobid" (change)="changeJob1(jobid)"
                    >
                    <option [value]="0">--Select--</option>
                    <option *ngFor="let jobList of jobLists" [value]="jobList.jobid">
                      {{jobList.title}}
                    </option>
                  </select>
                </div>
              </div>
            </td>
          </tr>
          <tr>
            <td>
              <div class="form-group">
                <label>
                  Supplement Name: <span class="required">*</span>
                </label>
                <input type="text" class="form-control" placeholder="Supplement Name" >
              </div>
            </td>
          </tr>

          <tr>
            <td>
              <div class="table-responsive">
                <form [formGroup]="ChapterForm" >
                <table class="table jambo_table table-sm">
                  <thead>
                    <tr class="headings">
                      <th style="width:60px">#</th>
                      <th *ngIf="(edit==true || delete==true)" style="width:110px;">
                        <label style="font-weight:bold;margin-bottom:0px;">Action</label>&nbsp;&nbsp;
                      </th>
                      <th class="pointer" (click)="sort('projectname')">
                        Chapters
                        <i *ngIf="key =='projectname'" class="fa {{reverse==true?'fa-caret-up':'fa-caret-down'}}"></i>
                      </th>
                      <th class="pointer" (click)="sort('projectdname')">
                        Chapter Type
                        <i *ngIf="key =='projectdname'" class="fa {{reverse==true?'fa-caret-up':'fa-caret-down'}}"></i>
                      </th>
                      <th class="pointer" (click)="sort('toolset')">
                        Tab Card
                        <i *ngIf="key =='toolset'" class="fa {{reverse==true?'fa-caret-up':'fa-caret-down'}}"></i>
                      </th>
                      <th class="pointer" (click)="sort('issmartchart')">
                        Tab card Title
                        <i *ngIf="key =='issmartchart'" class="fa {{reverse==true?'fa-caret-up':'fa-caret-down'}}"></i>
                      </th>
                      <th class="pointer" (click)="sort('newsalert')">
                        Volume name
                        <i *ngIf="key =='newsalert'" class="fa {{reverse==true?'fa-caret-up':'fa-caret-down'}}"></i>
                      </th>
                      <th class="pointer" (click)="sort('newsalert')">
                        Current Stage
                        <i *ngIf="key =='newsalert'" class="fa {{reverse==true?'fa-caret-up':'fa-caret-down'}}"></i>
                      </th>
                      <th class="pointer" (click)="sort('newsalert')">
                        Pick-Up Chapter
                        <i *ngIf="key =='newsalert'" class="fa {{reverse==true?'fa-caret-up':'fa-caret-down'}}"></i>
                      </th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr
                      *ngFor="let chapter of chaplist | orderBy: key : reverse | filter:searchText | paginate: { itemsPerPage: itemsPerPage, currentPage: p};let i = index">
                      <td>{{itemsPerPage * (p - 1) + i + 1}}</td>
                      <td *ngIf="(edit==true || delete==true)">
                        <input id="selected" type="checkbox"  (change)="getcheckedsupplement(chapter,$event)" />
                      </td>
                      <td class="text-capitalize">{{chapter.title}}</td>
                      <td class="text-capitalize">{{chapter.chaptertype}}</td>
                      <td class="text-capitalize">
                        <input type="checkbox" trim id="istabcard" name="istabcard"/>  </td> 
                      <td class="text-capitalize"> 
                        <input type="text" trim  name="tabcardtitle" disabled  />
                      </td> 
                      <td class="text-capitalize">{{chapter.volumename}}</td>
                      <td class="text-capitalize">{{chapter.stagename_alias}}</td>
                    </tr>
                    <tr *ngIf="chaplist.length==0 || (chaplist |filter:searchText).length === 0">
                      <td colspan="7" style="text-align:center;">No Records Found</td>
                    </tr>
                  </tbody>
                </table>
              </form>
              </div>
              <tr *ngIf="operation=='update'">
                <td colspan="2">
                  <div class="form-group">
                    <input type="checkbox" (change)="ChangeActive($event)" name="active"/><label>Active</label>
                  </div>
                </td>
              </tr>
            </td>
          </tr>
          <tr>
            <td>
              <div class="form-group">
                <button type="button" class="btn btn-primary pull-right "
                  (click)="supplementModelRef.hide()">Cancel</button>
                <button type="submit"  class="btn-primary btn pull-right" [disabled]="SupplementForm.invalid">
                  <span *ngIf="add==true">Add</span>
                </button>
              </div>
            </td>

          </tr>
          <tr>
            <td>
              <div class="form-group">
                <input type="checkbox"  />Is Merged Proof
              </div>
            </td>
          </tr>
        </table> -->

      </form>
    </div>
  </div>
</ng-template>
</div>

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