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

     <div class="row show-grid">
        <div class="col-md-6">
          <div>   Delivery Sheet</div>
        </div>
        <div class="col-md-6">
          <div style="text-align: end;"> 
       

          <!-- <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>     
              <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>
            
                <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  (click)="generate()" nbButton status="primary" style="margin-left: 2rem;" hero>
                generate
                 </button> 

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

           <div class="col-md-4">
            <div > 
             
               <!-- <button  (click)="download()" nbButton status="success" hero>
                   Download
                    </button>  -->
          </div>
          </div>
         </div>
       </nb-card-header>
  
    <nb-card-body>

      <h5 *ngIf="summaryaData.length==0 && driverName.length>0" style="text-align: center;">No Data Found For Selected Driver</h5>
        <div id="table" style="text-align: center;margin-bottom: 1rem;">
          <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 Sheet</div>
              </div>
              <div class="col-md-4">
                <div> 
                  Date :{{DateDisplay | date :'dd/MM/yy'}}
                  </div>
                  </div>
          </div>
          
          </nb-card-header>
          <!-- <h5 *ngIf="summaryaData.length>0" >Delivery Sheet</h5>
            <h5 *ngIf="summaryaData.length>0" > </h5> -->
        <ng-data-table  *ngIf="summaryaData.length>0" 
        [id]="'i'" 
        [items]=summaryaData
        [minContentWidth]="500"
        [pageable]="false"  
        [showColumnSelector]="false" 
        [showHeader]="false"
        [selectMode]="'multi'" 
        [minContentHeight]="350" 
        [limit]="50"
        >  
      
        <ng-data-table-column 
        [field]="'orderId'"
        [sortable]="false"
        [title]="'Order ID'"
        [filterable]="false"
        [width]="3"> 
  
        </ng-data-table-column> 

        <ng-data-table-column 
        [field]="'userName'"
        [sortable]="false"
        [title]="'Customer'"
        [filterable]="false"
        [width]="5"> 

        <ng-template #ngDataTableCell  let-row="row">
            <td  >
              <div   style=" text-align: center;">
           
                <span    class="checkTxt"    >
                  {{row.item.cusName}} <br />
                  {{row.item.address_1}} <br />
                  {{row.item.city}} <br />
                  {{row.item.pincode}} <br />

                 ph:- {{row.item.phoneNo}} 
                
                
                   </span>
              </div>
            
            </td> 
            </ng-template>
  
        </ng-data-table-column> 
        <ng-data-table-column 
        [field]="'email'"
        [sortable]="false"
        [title]="'Product'"
        [filterable]="false"
        [width]="6"> 


        <ng-template #ngDataTableCell  let-row="row">
            <td  >
              <div   style="display: flex; align-items: center;">
                <table style="width: 100%;">
                  <thead>
                    <tr>
                      <th></th>
                    
                    </tr>
                  </thead>
                  <tbody>
                    <tr *ngFor="let product of filterData(row.item.orderId)">
                      <td style="    border-top: 0rem solid #ddd;"> <a style="    font-size: initial;" >{{ product }}</a></td>
                      <!-- <td>{{ product.price }}</td>
                      <td>{{ product.quantity }}</td> -->
                    </tr>
                  </tbody>
                </table>
                
                <!-- <span    class="checkTxt"    >
                  {{filterData(row.item.orderId)}}  
                 
            
                
                   </span> -->
              </div>
            
            </td> 
            </ng-template>
  
        </ng-data-table-column> 
        <ng-data-table-column 
        [field]="'total_qty'"
        [sortable]="false"
        [title]="'Qty'"
        [filterable]="false"
        [width]="4"> 
        <ng-template #ngDataTableCell  let-row="row">
          <td  >
          <div   style="display: flex; align-items: center;">
             <!--    <div class="row">
                <div class="col-md-12"  *ngFor="let product of filterDataqty(row.item.orderId)">
                  <h5>{{ product }}</h5>
                </div>
              </div> -->
              <table style="width: 100%;">
                <thead>
                  <tr>
                    <th></th>
                  
                  </tr>
                </thead>
                <tbody>
                  <tr *ngFor="let product of filterDataqty(row.item.orderId)">
                    <td style="    border-top: 0rem solid #ddd;"> <a style="    font-size: initial;" >{{ product }}</a></td> 
                  </tr>
                </tbody>
              </table>
              
              <!-- <span    class="checkTxt"    >
                {{filterData(row.item.orderId)}}  
               
          
              
                 </span> -->
            </div>
          
          </td> 
          </ng-template>

        </ng-data-table-column> 
       
        
       
        </ng-data-table>
   </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>
