<nb-card>
    <nb-card-header>
   
      <div class="row show-grid">
        <div class="col-md-2">
          <div>   <nb-icon icon="shopping-bag-outline"></nb-icon>   Order Management</div>
       
        </div>

        <div class="col-md-3">
          <div style="    text-align: end;"> 
            <!-- <button  (click)="Assign()" nbButton status="primary" hero>
              Assign Driver
              </button> -->
              <input nbInput placeholder="Pick Date Range" [nbDatepicker]="formpicker">
              <nb-rangepicker #formpicker  (rangeChange)="manipulateDate($event)"[startDate]="defaultStartDate" [endDate]="defaultEndDate"></nb-rangepicker>
              
              <!-- <input  nbInput class="fx-date-range" type="text" 
              ngxDaterangepickerMd
              [locale]="{applyLabel: 'okay', format: 'MM/DD/YY'}"
              [drops]="'down'"
              [opens]="'right'"
              [ranges]="ranges"
              [showCustomRangeLabel]="true"
              [alwaysShowCalendars]="true"
              [keepCalendarOpeningWithRange]="true"
              [showCancel]="true"
              autocomplete="off"
              [(ngModel)]="selectedDateRange"
              name="daterange" placeholder="Fliter Date Wise" (change)="dateWiseFilter()"/> -->
          
        </div>
        </div>
        <div class="col-md-3">
          <div style="    text-align: end;"> 
            <!-- <button  (click)="Assign()" nbButton status="primary" hero>
              Assign Driver
              </button> -->
              <input [(ngModel)]="searchTerm" (keyup)="filterItems()"  style="width: 100%;" nbInput id="mobileNo" type="text" placeholder="Search" >
          
        </div>
        </div>

        <div class="col-md-4">
          <div  style="    text-align: end;"> 
            <button  (click)="refresh()" nbTooltip="Refresh" nbTooltipPlacement="top"   nbButton status="warning" hero>
              <nb-icon icon="flip-outline"></nb-icon>  
              </button>
            <button style="    margin-left: 1rem;" nbButton nbTooltip="Add Order" nbTooltipPlacement="top" (click)="onCreateConfirm()" nbButton status="primary" hero>
              <nb-icon icon="plus-circle-outline"></nb-icon>  
          </button>

          <button style="    margin-left: 1rem;" nbButton nbTooltip="Download" nbTooltipPlacement="top" (click)="exportExcelData()" nbButton status="success" hero>
            <nb-icon icon="download-outline"></nb-icon>  
           </button>
        </div>
        </div>
      </div>
    </nb-card-header>
  
    <nb-card-body>
        <!-- <ng2-smart-table [settings]="settings"   (userRowSelect)="onUserRowSelect($event)" [source]="source" (edit)="onSaveConfirm($event)"
        (create)="onCreateConfirm($event)" (delete)="onDeleteConfirm($event)">
        </ng2-smart-table> --> 
  <ng-data-table  
  [id]="'i'" 
  [items]=orders
  [minContentWidth]="600"
  [pageable]="true"  
  [showColumnSelector]="true" 
  [showHeader]="false"
  [selectMode]="'multi'" 
  [minContentHeight]="350" 
  [selectMode]="'multi'"
  [selectOnRowClick]="true"

  [limit]="25"
  >  

  <ng-data-table-column 
  [field]="'role'"
  [sortable]="false"
  [title]="''"
  [filterable]="false"
  [width]="2"> 



  <ng-template #ngDataTableHeader let-column="column"  >
   <tr   ><th class="center" style=" font-size: large; text-align: -webkit-center;"> <div style="text-align: center;"> 
     
    <nb-checkbox   (change)="onCheckboxChange($event)"     status="primary" ></nb-checkbox>
    </div></th></tr> 
  <!--    <tr   ><th class="center"  style="text-align: -webkit-center;"   >{{tableTitle.Y4_st_type_name}}</th></tr>  -->
    
  </ng-template> 





  <ng-template #ngDataTableCell  let-row="row">
  <td  style="text-align: center;" >
    <div class="align-center" style="display: flex; align-items: center;text-align: center;">
     
    
     <nb-checkbox  *ngIf="isChecked == true" [(ngModel)]="row.item.selected"   [checked]="row.item.selected == true" (click)="selectSingleRow(row.item)" status="primary" ></nb-checkbox>
     <nb-checkbox *ngIf="isChecked == false"  [(ngModel)]="row.item.selected"  [checked]="row.item.selected == true"  (click)="selectSingleRow(row.item)"  status="primary" ></nb-checkbox>
      
    </div>
  
  </td> 
  </ng-template>
</ng-data-table-column> 
  <ng-data-table-column 
  [field]="'index'"
  [sortable]="false"
  [title]="'ID'"
  [filterable]="false"
  [width]="2"> 

  </ng-data-table-column> 

  <ng-data-table-column 
  [field]="'orderId'"
  [sortable]="false"
  [title]="'Order ID'"
  [filterable]="false"
  [width]="4"> 
  <ng-template #ngDataTableCell  let-row="row">
    <td   (click)="onViewConfirm(row.item)">
      <div   style="display: flex; align-items: center;">
   
        <span    class="checkTxt"    >
          {{row.item.orderId  }} 
           </span>
      </div>
    
    </td> 
    </ng-template>
  </ng-data-table-column> 
  <ng-data-table-column 
  [field]="'customer'"
  [sortable]="false"
  [title]="'Customer Name'"
  [filterable]="false"
  [width]="4"> 

  <ng-template #ngDataTableCell  let-row="row">
    <td   (click)="onViewConfirm(row.item)">
      <div   style="display: flex; align-items: center;">
   
        <span    class="checkTxt"    >
          {{row.item.customer  }} 
           </span>
      </div>
    
    </td> 
    </ng-template>
  </ng-data-table-column> 
  <ng-data-table-column 
  [field]="'address'"
  [sortable]="false"
  [title]="'Address'"
  [filterable]="false"
  [width]="6"> 
  <ng-template #ngDataTableCell  let-row="row">
    <td   (click)="onViewConfirm(row.item)">
      <div   style="display: flex; align-items: center;">
   
        <span    class="checkTxt"    >
          {{row.item.address  }} 
           </span>
      </div>
    
    </td> 
    </ng-template>
  </ng-data-table-column> 
  <ng-data-table-column 
  [field]="'orderDate'"
  [sortable]="false"
  [title]="'Order Date'"
  [filterable]="false"
  [width]="4"> 

  <ng-template #ngDataTableCell  let-row="row">
    <td   (click)="onViewConfirm(row.item)">
      <div   style="display: flex; align-items: center;">
   
        <span    class="checkTxt"    >
          {{row.item.updatedAt | date :'dd/MM/yy hh:mm:ss'}} 
           </span>
      </div>
    
    </td> 
    </ng-template>

  </ng-data-table-column> 
  <ng-data-table-column 
  [field]="'status'"
  

  [title]="'Status'"
  [sortable]="false"
   
  
  [width]="5"> 









  <ng-template #ngDataTableCell  let-row="row">
  <td  (click)="onViewConfirm(row.item)">
    <div   style="display: flex; align-items: center;">
      <span  [ngStyle] = "{'color':row.item.status =='Out For Delivery'?'blue':'' }" class="checkTxt"  *ngIf="row.item.status =='Out For Delivery'" >
     {{row.item.status}} <p  class="checkTxt" >({{row.item['UserDetails.userName']}}) <nb-icon icon="done-all-outline" style="color:#08d992" [nbTooltip]="'Driver seen at ' + (row.item.seenTime | date:'dd/MM/yyyy, h:mm a')"  *ngIf="row.item.seenStatus == 1"  ></nb-icon> 
      <nb-icon icon="done-all-outline" nbTooltip="Not Seen"  style="color: rgb(159, 167, 170);" *ngIf="row.item.seenStatus == 0"  ></nb-icon>   </p>
    
      </span>
      <span  [ngStyle] = "{'color':row.item.status =='ordered'?'#1f1dc9f5':row.item.status =='Delivered' ?'green':'red' }"  class="checkTxt"  *ngIf="row.item.status !='Out For Delivery'" >
        {{row.item.status}}  <p  class="checkTxt" *ngIf="row.item.status == 'Delivered'">({{row.item['UserDetails.userName']}})</p>
         </span>
    </div>
  
  </td> 
  </ng-template>
</ng-data-table-column> 

  <!-- <ng-data-table-column 
  [field]="'reason'"
  [sortable]="false"
  [title]="'Reason'"
  [filterable]="false"
  [width]="4"> 

  </ng-data-table-column>  -->
  

  <!-- <ng-data-table-column 
  [field]="'role'"
  [sortable]="false"
  [title]="'view'"
  [filterable]="false"
  [width]="3"> 









  <ng-template #ngDataTableCell  let-row="row">
  <td  >
  
    <div   style="align-items: center;text-align: center;">
      <nb-icon icon="eye-outline" title="View"  style="color: green;" (click)="onViewConfirm(row.item)"></nb-icon>  
 
      </div>

     
  
  </td> 
  </ng-template>
</ng-data-table-column>  -->

  </ng-data-table> 
       

    </nb-card-body>


  <nb-card-footer>
    <!-- <form class="form" [formGroup]="driverForm" (ngSubmit)="onSubmit()"> -->
    <div class="row show-grid">
      <div class="col-md-2">
        <div style="text-align: center;"> 
           
          <nb-checkbox   (change)="onCheckboxChange($event)"     status="primary" >Select All</nb-checkbox>
          </div>
      </div>
      <div class="col-md-4">
        <div> 
          <nb-select selected=""  placeholder="Change Status" clearable  style="width: 100% !important;"  [(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>
          <!-- <label for="subject">Drivers:</label> <br /> -->
       
          </div>
      </div>
      <!-- <div class="col-md-3">
        <div  > 
        
           
      </div>
      </div> -->
      <div class="col-md-5">
        <div  > 
          <nb-select selected="" placeholder="Select Drivers"  *ngIf="selectStatus == 'Out For Delivery'"  [(ngModel)]="selectDriver"   style="width: 100% !important;margin-right: 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="selectStatus == 'Cancelled'" [(ngModel)]="CancelReason"  placeholder="Reason" style=" margin-right: 2%;"    id="text"> 
          <button   (click)="onSubmit2()"   type="submit" nbButton status="primary" hero>
          Submit
            </button>
      </div>
      </div>

      <!-- <div class="col-md-5">
        <div  style="text-align: end;"> 
        
      </div>
      </div> -->
    </div>
  <!-- </form> -->
  </nb-card-footer>

  <div id="orderExcel" hidden>
    <ng-data-table  
    [id]="'i'" 
    [items]=orders
    [minContentWidth]="600"
    [showColumnSelector]="true" 
    [showHeader]="false"
    >   
   
    <ng-data-table-column 
    [field]="'index'"
    [sortable]="false"
    [title]="'ID'"
    [filterable]="false"
    [width]="2"> 
  
    </ng-data-table-column> 
  
    <ng-data-table-column 
    [field]="'orderId'"
    [sortable]="false"
    [title]="'Order ID'"
    [filterable]="false"
    [width]="4"> 
    <ng-template #ngDataTableCell  let-row="row">
      <td   (click)="onViewConfirm(row.item)">
        <div   style="display: flex; align-items: center;">
     
          <span    class="checkTxt"    >
            {{row.item.orderId  }} 
             </span>
        </div>
      
      </td> 
      </ng-template>
    </ng-data-table-column> 
    <ng-data-table-column 
    [field]="'customer'"
    [sortable]="false"
    [title]="'Customer Name'"
    [filterable]="false"
    [width]="4"> 
  
    <ng-template #ngDataTableCell  let-row="row">
      <td   (click)="onViewConfirm(row.item)">
        <div   style="display: flex; align-items: center;">
     
          <span    class="checkTxt"    >
            {{row.item.customer  }} 
             </span>
        </div>
      
      </td> 
      </ng-template>
    </ng-data-table-column> 
    <ng-data-table-column 
    [field]="'address'"
    [sortable]="false"
    [title]="'Address'"
    [filterable]="false"
    [width]="6"> 
    <ng-template #ngDataTableCell  let-row="row">
      <td   (click)="onViewConfirm(row.item)">
        <div   style="display: flex; align-items: center;">
     
          <span    class="checkTxt"    >
            {{row.item.address  }} 
             </span>
        </div>
      
      </td> 
      </ng-template>
    </ng-data-table-column> 
    <ng-data-table-column 
    [field]="'orderDate'"
    [sortable]="false"
    [title]="'Order Date'"
    [filterable]="false"
    [width]="4"> 
  
    <ng-template #ngDataTableCell  let-row="row">
      <td   (click)="onViewConfirm(row.item)">
        <div   style="display: flex; align-items: center;">
     
          <span    class="checkTxt"    >
            {{row.item.updatedAt | date :'dd/MM/yy hh:mm:ss'}} 
             </span>
        </div>
      
      </td> 
      </ng-template>
  
    </ng-data-table-column> 
    <ng-data-table-column 
    [field]="'status'" 
    [title]="'Status'"
    [sortable]="false" 
    [width]="5">  
    <ng-template #ngDataTableCell  let-row="row">
    <td  (click)="onViewConfirm(row.item)">
      <div   style="display: flex; align-items: center;">
        <span  [ngStyle] = "{'color':row.item.status =='Out For Delivery'?'blue':'' }" class="checkTxt"  *ngIf="row.item.status =='Out For Delivery'" >
       {{row.item.status}} <p  class="checkTxt" >({{row.item['UserDetails.userName']}}) <nb-icon icon="done-all-outline" style="color:#08d992" [nbTooltip]="'Driver seen at ' + (row.item.seenTime | date:'dd/MM/yyyy, h:mm a')"  *ngIf="row.item.seenStatus == 1"  ></nb-icon> 
        <nb-icon icon="done-all-outline" nbTooltip="Not Seen"  style="color: rgb(159, 167, 170);" *ngIf="row.item.seenStatus == 0"  ></nb-icon>   </p>
      
        </span>
        <span  [ngStyle] = "{'color':row.item.status =='ordered'?'#1f1dc9f5':row.item.status =='Delivered' ?'green':'red' }"  class="checkTxt"  *ngIf="row.item.status !='Out For Delivery'" >
          {{row.item.status}}  <p  class="checkTxt" *ngIf="row.item.status == 'Delivered'">({{row.item['UserDetails.userName']}})</p>
           </span>
      </div>
    
    </td> 
    </ng-template>
  </ng-data-table-column> 
   
  
    </ng-data-table>
  </div>

</nb-card>