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

     <div class="row show-grid">
        <div class="col-md-6">
          <div>   Summary</div>
        </div>
        <div class="col-md-6">
          <div style="text-align: end;"> 
            <!-- <button  (click)="back()" nbButton status="success" hero>
         Back
          </button> -->

          <!-- <button  style="    margin-left: 2rem;"(click)="generatePDF('print')" nbButton status="primary" hero>
            Print
             </button> -->
        </div>
        </div>
      </div>
    </nb-card-header>

    <nb-card-header>
   

        <div class="row show-grid">
           <div class="col-md-12">
             <div>    
              <!-- [(ngModel)]="dDate" -->
              <input nbInput placeholder="Pick Date"    [nbDatepicker]="dateTimePicker" >
              <nb-datepicker  #dateTimePicker (dateChange)="onStartDateChanged($event)" ></nb-datepicker>
              <!-- <input  nbInput class="fx-date-range" type="text" 
                ngxDaterangepickerMd
                [locale]="{applyLabel: 'okay', format: 'DD/MM/YY'}"
                [drops]="'down'"
                [opens]="'right'"
                [ranges]="ranges"
                [autoApply]="true"
                [singleDatePicker]="true"
                [showCustomRangeLabel]="false"
                [alwaysShowCalendars]="true"
                [keepCalendarOpeningWithRange]="false"
                [showCancel]="true"
                autocomplete="off"
                [(ngModel)]="selectedDateRange"
                name="daterange" placeholder="Fliter Date Wise" (change)="dateWiseFilter()"/> -->
                <nb-select selected=""     style="width: 100% !important;margin-left: 2rem;"     >
                  <nb-option  value="">Select Drivers</nb-option>
                  <!-- [(ngModel)]="dId" -->
                <nb-option    *ngFor="let user of drivers; index as i; first as isFirst " (click)="val(user)"  [value]="user.id
                ">{{user.userName  }}</nb-option>
              
                
              </nb-select>

              <button  style=" margin-left: 2rem;"    (click)="generate()" nbButton status="primary" hero>
                generate
                 </button> 

                   <button  style="    margin-left: 2rem;"(click)="download()"nbButton nbTooltip="Download" nbTooltipPlacement="top" nbButton status="success" hero>
                    <nb-icon icon="download-outline"></nb-icon>  
             </button>
              </div>
           </div>
           
         </div>
       </nb-card-header>
  
    <nb-card-body>

     
<div id="table"   style="text-align: center;">
  <nb-card-header *ngIf="summaryaData.length>0" style="text-align: center;"><img src="assets/images/VN_Medical_Logo.png" alt="vnms" width="120" height="50" style="padding-right: 1rem;"> </nb-card-header>
          
  <nb-card-header *ngIf="summaryaData.length>0" style="text-align: center;margin-top: 2rem;">  
  
    <div class="row show-grid" style="    margin-top: 2rem;">
      <div class="col-md-4">
        <div> Driver Name: {{driverName}}</div>
      </div>
      <div class="col-md-4">
        <div  style="text-align: center;">   Delivery Summary</div>
      </div>
      <div class="col-md-4">
        <div> 
          Date :{{DateDisplay | date :'dd/MM/yy'}}
          </div>
          </div>
  </div>
  
  </nb-card-header>
        <div   >
            <div>
           
               
         
        
        
        
          <div class="row show-grid" *ngIf="summaryaData.length>0">
            <div class="col-6 col-md-3">
                <div  > 
                  
                    <label for="subject" style="    font-weight: 600;"><h6>Order Id</h6></label> 
         
              </div>
              </div>

              <div class="col-6 col-md-2">
                <div  > 
                  
                    <label for="subject" style="    font-weight: 600;"><h6>Customer</h6></label> 
         
              </div>
              </div>
            <div class="col-6 col-md-2">
              <div>
         
                <label for="subject" style="    font-weight: 600;"><h6>Delivered</h6></label> <br>
               
                    
                
                <!-- <input nbInput type="number" min="0"  [(ngModel)]="item.qty"> -->
             </div>
            </div>
            <div class="col-6 col-md-2">
              <div  > 
                <!-- <input nbInput type="text"    [(ngModel)]="item.productSpec"> -->
                <label for="subject" style="    font-weight: 600;"><h6>Empty Pick up</h6></label> 
            </div>
            </div>
        
            <div class="col-6 col-md-3">
              <div  > 
                <!-- <input nbInput type="text"    [(ngModel)]="item.productSpec"> -->
                <label for="subject" style="    font-weight: 600;"><h6>View</h6></label> 
            </div>
            </div>
        
        
              <hr>
          </div>
        
        </div>
        </div>
  <h5 *ngIf="summaryaData.length==0" style="text-align: center;margin: 2rem;">  No Data Available ...!</h5>
         <div *ngFor="let dataVal of summaryaData; let i = index" >
            <div *ngIf="summaryaData.length>0">
           
                 
         
        
        
        
          <div class="row show-grid">
            <div class="col-6 col-md-3">
                <div  > 
              
                    <label for="subject" style="    font-weight: 600;margin-left: 1rem;">({{dataVal.orderId}})</label> 
         
              </div>
              </div>


              <div class="col-6 col-md-2">
                <div  > 
               
                    <label for="subject" style="    font-weight: 600;margin-left: 1rem;">{{dataVal.cusName}}</label> 
                    
         
              </div>
              </div>
            <div class="col-6 col-md-2">
              <div>
         
                <label for="subject" style="    font-weight: 600;">{{dataVal. total_amount}}</label> <br> 
                 
              
                    
                
                <!-- <input nbInput type="number" min="0"  [(ngModel)]="item.qty"> -->
             </div>
            </div>
            <div class="col-6 col-md-2">
              <div  > 
                <!-- <input nbInput type="text"    [(ngModel)]="item.productSpec"> -->
                <label for="subject" style="    font-weight: 600;">{{returnCount(dataVal.orderId)}}</label> 
            </div>
            </div>
        
           
            <div class="col-6 col-md-3">
              <div  > 
                <!-- <input nbInput type="text"    [(ngModel)]="item.productSpec"> -->
                <nb-icon icon="eye-outline" style="color: green;" (click)="view(dataVal.orderId,dataVal.cusName)" ></nb-icon>  
                <!-- <label for="subject" style="    font-weight: 600;">{{returnCount(dataVal.orderId)}}</label>  -->
            </div>
            </div>
        
           
          </div>
        
        </div>
        </div>
      </div>    
          <nb-card-footer>
            <div class="row show-grid" >
                <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>
