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

   <div class="row show-grid">
      <div class="col-md-4">
        <div>    {{fieldTitle}}</div>
      </div>
      <div class="col-md-8">
        <div style="text-align: end;"> 
          <button nbTooltip="Back" nbTooltipPlacement="top"  (click)="back()" nbButton status="warning" hero>
            <nb-icon icon="corner-down-left-outline"></nb-icon>   
        </button>

        <button nbTooltip="Edit" nbTooltipPlacement="top"  *ngIf="  fieldTitle != 'Edit Order' && this.selectStatus != 'Delivered' && addFormBtn != 0" style="    margin-left: 2rem;" (click)="edit()" nbButton status="primary" hero>
          <nb-icon icon="edit-outline"></nb-icon>  
           </button>

        <button nbTooltip="Download" nbTooltipPlacement="top"   *ngIf="  fieldTitle != 'Edit Order' && addFormBtn != 0" style="    margin-left: 2rem;"(click)="generatePDF('download')" nbButton status="success" hero>
          <nb-icon icon="download-outline"></nb-icon>  
           </button>
      </div>
      </div>
    </div>
  </nb-card-header>

  <nb-card-body>

      <div class="row show-grid">
          <div class="col-6 col-md-5">
            <div>  
              <label for="exampleInputEmail1"  class="label">Customer</label> <br />
           <span  *ngIf="fieldTitle == 'View Order'">{{selectCustomer}}</span>
              <nb-select selected="" [(ngModel)]="selectCustomer"  *ngIf="fieldTitle != 'View Order'" [disabled]="fieldTitle =='Edit Order' ">
                  
                  <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> 
                <hr>
                <div style="font-size: larger;margin-top: 1rem;;margin-bottom: 1rem;">  Shipping Information</div>
                <div class="row show-grid" *ngIf="product.length>0">
                  <div class="col-6 col-md-4">
                    <div>  
                      <label for="subject" style="    font-weight: 500;">{{selectCustomerData['CusDetails.address_1']}} , {{selectCustomerData['CusDetails.city']}}, {{selectCustomerData['CusDetails.pincode']}}<br />Contact No-({{selectCustomerData['CusDetails.phoneNo']}}) </label> 
                  </div> 
                  </div>
                  <!-- <div class="col-6 col-md-1">
                   <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;"></label> 
                  </div>  
                  </div> -->
                </div>
              <!-- <input type="text" nbInput fullWidth placeholder="Project">-->
          </div> 
          </div>
          <div class="col-6 col-md-3">
            <div>
               <!-- <nb-select selected="DRIVER"   >
              <nb-option value="DRIVER">DRIVER</nb-option>
              
            </nb-select> -->
           </div>
          </div>
          <div class="col-6 col-md-4">
            <div  *ngIf="fieldTitle == 'Edit Order' || fieldTitle == 'View Order'"> 
              <div style="font-size: larger;font-weight: 600;"> ORDER ID</div>
     
              <p>  {{setData.orderId}} </p> <br />
              <div style="font-size: larger;font-weight: 600;">  Status</div>
              <p style="text-transform: capitalize;"  *ngIf="fieldTitle == 'View Order'   "  [ngStyle] = "{'color':setData.status =='ordered'?'#1f1dc9f5':setData.status =='Delivered' ?'green':'red' }" >  {{setData.status}} <br> <span *ngIf="setData.status == 'Delivered' || setData.status == 'Out For Delivery'" style="color: black;">({{setData['UserDetails.userName']}}) </span></p>
              <nb-select selected=""  *ngIf="fieldTitle != 'View Order'" (ngModelChange)="onSelectChange($event)"  placeholder="Change Status" clearable  style="width: 57% !important;margin-top: 1rem;"  [(ngModel)]="selectStatus" >
                <!-- <nb-option  value="">Change Status</nb-option> -->
                <nb-option value="ordered"   >Ordered</nb-option>
               <nb-option value="In Progress" >In Progresss</nb-option>
               <nb-option value="Out For Delivery"  >Out For Delivery</nb-option>
             
               <nb-option value="Delivered"  >Delivered</nb-option>
               <nb-option value="Cancelled"  >Cancelled</nb-option>
              
            </nb-select>

            <nb-select (ngModelChange)="onSelectChange1($event)" selected="" placeholder="Select Drivers"  *ngIf="fieldTitle != 'View Order' && selectStatus == 'Out For Delivery'"  [(ngModel)]="selectDriver"   style="width: 57% !important;margin-right: 1rem;margin-top: 1rem;"   >
              <!-- <nb-option  value="">Select Drivers</nb-option> -->
        
            <nb-option   *ngFor="let user of drivers; index as i; first as isFirst "   [value]="user.id
            ">{{user.userName  }}</nb-option>
          
            
          </nb-select>
          <input nbInput   *ngIf="fieldTitle != 'View Order'   && selectStatus == 'Cancelled'" [(ngModel)]="CancelReason"  placeholder="Reason" style=" margin-right: 2%;margin-top: 1rem;"    id="text"> <br />
            <button   *ngIf="fieldTitle != 'View Order'" [disabled]="hiddenBtn" (click)="onSubmit2()" style="margin-top: 1rem;"  type="submit" nbButton status="success" hero>
            Save
              </button>
              <span *ngIf="setData.status =='Cancelled'">Reason: {{setData.reason}} </span>
              <!-- <nb-select selected="DRIVER"    >
              <nb-option value="DRIVER">DRIVER</nb-option>
              
            </nb-select>  -->
          </div>
          </div>
        </div>
        <hr>


     
 
      <nb-card-header>
 

        <div class="row show-grid">
           <div class="col-md-6">
             <div style="font-size: larger;">  Product Information</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>
    <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-3"></div>
      <div class="col-6 col-md-4">
        <div *ngIf="( fieldTitle == 'Edit Order' && setData.status == 'ordered') || dropdown_data == 'ordered'"> 
          <label for="subject" style="font-weight: 600; text-align: center; display: block;">Add or Remove Products </label> 
      </div>
      </div>
      <nb-action icon="plus-circle-outline"   class="custom-action-icon"  [nbTooltip]="'Add'" (click)="addInputFieldGroup()" *ngIf="inputFieldGroups.length == 0"></nb-action>
    </div>


    <div *ngFor="let fieldGroup of inputFieldGroups; let i = index">
      <div  *ngIf="fieldTitle != 'View Order'">
     
  
   
  
  
  
    <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;" [disabled]="fieldTitle == 'Edit Order' ? !fieldGroup.isNew : false">
              <!-- <nb-option  value="">Select Drivers</nb-option> -->
              <!-- (click)="onProductSelect(user.id,user.productName)" -->
            <nb-option   *ngFor="let user of checkProductArray(); 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"  *ngIf="fieldTitle == 'View Order'" style="    font-weight: 600;">{{ fieldGroup.qty }}</label> 
          <input nbInput style="width: 50%;"  *ngIf="fieldTitle != 'View Order'"    [(ngModel)]="fieldGroup.qty" type="number">
          <!-- <input nbInput type="number" min="0"  [(ngModel)]="item.qty"> -->
       </div>
      </div>
      <div class="col-6 col-md-4">
        <div  > 
          <!-- <input nbInput type="text"    [(ngModel)]="item.productSpec"> -->
          <label for="subject"  *ngIf="fieldTitle == 'View Order'" style="    font-weight: 600;">({{ fieldGroup.productSpec }})</label> 
          <input nbInput  *ngIf="fieldTitle != 'View Order' && fieldGroup.id == 6" style="    width: 100%;"  [(ngModel)]="fieldGroup.productSpec" placeholder="eg:- N2:CO2:O2 - 50:30:20" type="text">
      </div>
      </div>

      <div class="col-6 col-md-3">
          <div >
              <nb-actions size="medium"  *ngIf="(fieldTitle != 'View Order') && ( fieldTitle == 'Edit Order' && setData.status == 'ordered') || dropdown_data == 'ordered'">
                  <nb-action icon="plus-circle-outline"   class="custom-action-icon"  [nbTooltip]="'Add'" (click)="addInputFieldGroup()"></nb-action>
                 
                      <nb-action icon="minus-circle-outline" [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" *ngIf="i !=0" (click)="removeInputFieldGroup(i)">Remove</button> -->
   
        </div>
        </div>
  
     
    </div>
  
  </div>
  </div>
    
       <div *ngFor="let item of ResultDisplay; index as j">

          <div class="row show-grid" *ngIf="fieldTitle == 'View Order'">
              <div class="col-6 col-md-3">
                <div  >  
                  <label for="subject"   *ngIf="item.qty != 0   " style="    font-weight: 600;">{{ item.ProductDetails[0].productName }} <br />({{item.ProductDetails[0].skuId}} ) <br />
                 <span  *ngIf="item.productSpec != null   " >{{ item.productSpec }}</span> 
                </label> 
                 
                  
              </div> 
              </div>
              <div class="col-6 col-md-2">
                <div  >
                  <label for="subject"   *ngIf="item.qty != 0   " style="    font-weight: 600;">{{ item.qty }}</label> 
                 
               </div>
              </div>
              <div class="col-6 col-md-4">
                <div  > 
                
              </div>
              </div>
            </div>
          
            <!-- <ngx-mixed-form  (childButtonEvent)="receivedMessageHandler($event)"
            (onInitEvent)="receiveAutoMsgHandler($event)"  *ngIf="item.productName == 'Mixed Gas'"></ngx-mixed-form> -->
        </div> 
        <nb-card-header>
 
<hr>
          <div class="row show-grid" *ngIf="productlistReturn.length>0">
             <div class="col-md-6">
               <div style="font-size: larger;    color: #182ea1;">  Return Information</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>

        
      <div   >
          <div>
         
             
       
      
      
      
        <div class="row show-grid"  *ngIf="productlistReturn.length>0">
          <div class="col-6 col-md-3">
              <div  > 
                
                  <label for="subject" style="    font-weight: 600;"><span>Product Name</span></label> 
       
            </div>
            </div>
          <div class="col-6 col-md-2">
            <div>
       
              <label for="subject" style="    font-weight: 600;"><span>Qty</span></label> <br>
             
                  
              
              <!-- <input nbInput type="number" min="0"  [(ngModel)]="item.qty"> -->
           </div>
          </div>
          <div class="col-6 col-md-4">
            <div  > 
              <!-- <input nbInput type="text"    [(ngModel)]="item.productSpec"> -->
              <label for="subject" style="    font-weight: 600;"><h6></h6></label> 
          </div>
          </div>
      
          <div class="col-6 col-md-3">
              <div  > 
                  <label for="subject" style="    font-weight: 600;"><h6></h6></label> 
                  <!-- <nb-actions size="medium"   >
                      <nb-action icon="plus-circle-outline"   class="custom-action-icon"  [nbTooltip]="'Add'"  ></nb-action>
                     
                          <nb-action icon="minus-circle-outline"  [nbTooltip]="'Remove'"  ></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>
      
            <hr>
        </div>
      
      </div>
      </div>
    

       <div *ngFor="let dataVal of productlistReturn; let i = index" >
          <div  *ngIf="productlistReturn.length>0">
         
               
       
      
      
      
        <div class="row show-grid">
          <div class="col-6 col-md-3">
              <div  > 
                  <label for="subject" style="    font-weight: 600;">#</label> 
                  <label for="subject" style="    font-weight: 600;margin-left: 1rem;">{{dataVal.ProductDetails[0]. productName}}</label> 

       
            </div>
            </div>
          <div class="col-6 col-md-2">
            <div>
       
              <label for="subject" style="    font-weight: 600;">{{dataVal.qty}}</label> <br>
            
                  
              
              <!-- <input nbInput type="number" min="0"  [(ngModel)]="item.qty"> -->
           </div>
          </div>
          <div class="col-6 col-md-4">
            <div  > 
              <!-- <input nbInput type="text"    [(ngModel)]="item.productSpec"> -->
              <label for="subject" style="    font-weight: 600;">Cylinder No: {{dataVal.cylinderNo}}</label> 
          </div>
          </div>
      
          <div class="col-6 col-md-3">
              <div  > 

                  <!-- <nb-icon icon="eye-outline" style="color: green;"  ></nb-icon>   -->
                  <!-- <nb-actions size="medium"   >
                      <nb-action icon="plus-circle-outline"   class="custom-action-icon"  [nbTooltip]="'Add'"  ></nb-action>
                     
                          <nb-action icon="minus-circle-outline"  [nbTooltip]="'Remove'"  ></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>
      </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  *ngIf="fieldTitle != 'View Order'"> 
                  <button nbButton status="success" (click)="saveNew()" style="margin-right: 10px;"  type="submit" >Submit</button>
                  <button type="button" class="cancel" nbButton status="danger" (click)="cancelData()">Cancel</button>
              </div>
              </div>
            </div>
      
     
        </nb-card-footer>
  </nb-card-body>
</nb-card>
