<nb-card>
    <nb-card-header>{{heading}}</nb-card-header>
    <nb-card-body>
        <div class="row show-grid"  *ngIf="product.length>0" >
            <div class="col-6 col-md-3">
                <div  > 
                 
                    <label for="subject" style="    font-weight: 600;">Product</label> 
         
              </div>
              </div>
            <div class="col-6 col-md-2">
              <div>
         
                <label for="subject"  style="    font-weight: 600;">Qty</label> 
              
             
             </div>
            </div>
            <div class="col-6 col-md-4">
              <div  > 
         
                <label for="subject"   style="    font-weight: 600;">Cylinder No</label> 
              
            </div>
            </div>
        
            <div class="col-6 col-md-3">
                <div  > 
                    
                    <!-- <button nbButton status="success"  (click)="addInputFieldGroup()" style="margin-right: 1rem;">  Add </button> -->
                    <!-- <button nbButton status="danger"  (click)="removeInputFieldGroup(i)">Remove</button> -->
         
              </div>
              </div>
        
           
          </div>
        <div *ngFor="let fieldGroup of inputFieldGroups; let i = index">
        <div class="row show-grid"  *ngIf="product.length>0" >
            <div class="col-6 col-md-3">
                <div  > 
                  <nb-select  placeholder="Select Product"  [(ngModel)]="fieldGroup.id"    style="width: 100% !important;margin-right: 1rem;"   >
                    <!-- <nb-option  value="">Select Drivers</nb-option> -->
              
                  <nb-option   *ngFor="let user of product; index as i; first as isFirst "   [value]="user.id
                  ">{{user.productName  }}({{user.skuId  }} )</nb-option>
                
                  
                </nb-select>
                    <!-- <label for="subject" style="    font-weight: 600;">Mixed Gas {{i+1}}:</label>  -->
         
              </div>
              </div>
            <div class="col-6 col-md-2">
              <div>
         
                <!-- <label for="subject"  style="    font-weight: 600;">{{ fieldGroup.qty }}</label>  -->
                <input nbInput style="width: 70%;"     [(ngModel)]="fieldGroup.qty" type="number" min="1">
             
             </div>
            </div>
            <div class="col-6 col-md-4">
              <div  > 
         
                <!-- <label for="subject"   style="    font-weight: 600;">({{ fieldGroup.productSpec }})</label>  -->
                <input nbInput   style="    width: 100%;"  [(ngModel)]="fieldGroup.productSpec" placeholder="Cylinder No" type="text">
            </div>
            </div>
        
            <div class="col-6 col-md-3">
                <div  > 
                    <nb-actions size="medium"  >
                        <nb-action icon="plus-circle-outline"   class="custom-action-icon"  [nbTooltip]="'Add'" (click)="addInputFieldGroup()"></nb-action>
                       
                            <nb-action icon="minus-circle-outline" *ngIf="i !=0" [nbTooltip]="'Remove'"  (click)="removeInputFieldGroup(i)"></nb-action>
                            </nb-actions>
                    <!-- <button nbButton status="success"  (click)="addInputFieldGroup()" style="margin-right: 1rem;">  Add </button> -->
                    <!-- <button nbButton status="danger"  (click)="removeInputFieldGroup(i)">Remove</button> -->
         
              </div>
              </div>
        
           
          </div>
    </div>
    <nb-card-footer>
        <button class="cancel" nbButton status="danger" type="button" (click)="cancel()">Cancel</button>
        <button nbButton status="success" (click)="save()"  type="submit">Submit</button>
        </nb-card-footer>
        </nb-card-body>
        </nb-card>
   