<nb-card>
    <nb-card-header>
   

     <div class="row show-grid">
        <div class="col-md-6">
          <div>    {{fieldTitle}}</div>
        </div>
        <div class="col-md-6">
          <div style="    text-align: end;"> 
            <button  (click)="back()" nbButton status="success" hero>
         Back
          </button>
        </div>
        </div>
      </div>
    </nb-card-header>
  
    <nb-card-body>

        <div class="row show-grid">
            <div class="col-6 col-md-4">
              <div>  
                <nb-select selected="" [(ngModel)]="selectCustomer" >
                    
                    <nb-option value="" hidden>Select Customer</nb-option>
                  
                    <nb-option   *ngFor="let user of customer; index as i; first as isFirst " (click)="checkType(user)"  [value]="user['CusDetails.cusName']
                    ">{{user['CusDetails.cusName']
                    }}</nb-option>
                    
                  </nb-select> 
                <!-- <input type="text" nbInput fullWidth placeholder="Project">-->
            </div> 
            </div>
            <div class="col-6 col-md-4">
              <div>
                 <!-- <nb-select selected="DRIVER"   >
                <nb-option value="DRIVER">DRIVER</nb-option>
                
              </nb-select> -->
             </div>
            </div>
            <div class="col-6 col-md-4">
              <div> 
                <!-- <nb-select selected="DRIVER"    >
                <nb-option value="DRIVER">DRIVER</nb-option>
                
              </nb-select>  -->
            </div>
            </div>
          </div>
          


      <div class="row show-grid" *ngIf="product.length>0">
        <div class="col-6 col-md-3">
          <div>  
            <label for="subject" style="    font-weight: 600;">Products: ( <span style="color:#ba0404">{{selectCustomerData['CusDetails.cusType'] ||setData['OrderDetails.CusDetails.cusType'] }}</span>)</label> 
        </div> 
        </div>
        <div class="col-6 col-md-2">
          <div>
            <label for="subject" style="    font-weight: 600;width: 30%;">Qty:</label> 
         </div>
        </div>
        <div class="col-6 col-md-4">
          <div> 
            <label for="subject" style="    font-weight: 600;">Specification:</label> 
        </div>
        </div>
      </div>
          <div *ngFor="let item of product; index as j">

            <div class="row show-grid">
                <div class="col-6 col-md-3">
                  <div *ngIf=" item.productName != 'Mixed Gas'">  
                    <label for="subject" style="    font-weight: 600;">{{ item.productName }}</label> 
                    <!-- <nb-checkbox [(ngModel)]="item.checked">{{ item.productName }}</nb-checkbox> -->
                    
                </div> 
                </div>
                <div class="col-6 col-md-2">
                  <div *ngIf=" item.productName != 'Mixed Gas'">
                   
                    <input nbInput type="number" min="0" style="width: 50%;"  [(ngModel)]="item.qty">
                 </div>
                </div>
                <div class="col-6 col-md-4">
                  <div *ngIf=" item.productName != 'Mixed Gas'"> 
                    <!-- <input nbInput type="text"    [(ngModel)]="item.productSpec"> -->
                </div>
                </div>
              </div>
            
              <ngx-mixed-form  (childButtonEvent)="receivedMessageHandler($event)"
              (onInitEvent)="receiveAutoMsgHandler($event)"  *ngIf=" item.productName == 'Mixed Gas'"></ngx-mixed-form>
          </div>
       
        
          <nb-card-footer>
            <div class="row show-grid" *ngIf="product.length>0">
                <div class="col-6 col-md-3">
                  <div>  
                 
                </div> 
                </div>
                <div class="col-6 col-md-2">
                  <div>
                 
                 </div>
                </div>
                <div class="col-6 col-md-4">
                  <div>
                 
                 </div>
                </div>
                <div class="col-6 col-md-3">
                  <div> 
                    <button nbButton status="success" (click)="save()" style="margin-right: 10px;"  type="submit" >Submit</button>
                    <button type="button" class="cancel" nbButton status="danger" (click)="back()">Cancel</button>
                </div>
                </div>
              </div>
        
       
          </nb-card-footer>
    </nb-card-body>
</nb-card>
