<!-- <app-all-menus></app-all-menus> -->
<div class="topDiv">
  <div class="row" style="text-align: center; background: #426E86; padding-top: 10px; padding-bottom: 10px; color: white;box-shadow:3px 1px 5px 0px rgb(178, 176, 174)">
    <div class="col-sm-12 col-md-12 col-lg-12">
      <h4>{{'POI Report' | translate}}</h4>
    </div>
  </div>  
  <!-- <div class="row rowStyle" >
    <div class="col-sm-12 col-md-12 col-lg-12">
      <app-report-filter></app-report-filter>
    </div>
  </div> -->
  <div class="row rowStyle">
    <!-- <div class="col-sm-3 col-md-3 col-lg-3" style="padding-left: 20px; padding-right: 5px; padding-top: 5px; padding-bottom: 5px;">
      <div class="row" style="margin:0px;height: 84vh;background: white;box-shadow: 3px 1px 5px 0px #b2b0ae;">
        <div class="col-sm-12 col-md-12 col-lg-12" style="padding:0px">
            <app-report-filter (onReportFIlter)= "getReport($event)" [componentIdentifier]="identifier"></app-report-filter>
        </div>
      </div>
    </div> -->
    <div class="col-sm-12 col-md-12 col-lg-12" style="padding-left: 5px; padding-right: 20px; padding-top: 5px;">

      <div class="row" style="margin:0px;height: 84vh;padding-top:10px;padding-bottom:5px;background: white;box-shadow: 3px 1px 5px 0px #b2b0ae;">
        <div class="col-sm-12 col-md-12 col-lg-12">
          <!-- <div *ngIf="Load" class="loading">Loading&#8230;</div> -->
          <div style="width: 100%;height:84vh;">
            <table id="deviceTable" cellspacing="0" style="width: 100%;font-size: 14px;">
                <thead style="background-color:#e0e0e0;color: #444444;">
                    <tr>
                      <th style="text-align:left;">{{'Vehicle Name' | translate}}</th>
                      <th style="text-align:left;">{{'Device ID' | translate}}</th>
                      <th style="text-align:left;">{{'POI name' | translate}}</th>
                      <th style="text-align:left;">{{'Arrival Time' | translate}}</th>
                      <th style="text-align:left;">{{'Departure Time' | translate}}</th>
                      <th style="text-align:left;">{{'Address' | translate}}</th>  
                    </tr>
                </thead>  
            </table>
        </div> 
        </div>
      </div> 
    </div>
  </div>
</div>

<table id="headerTable" style="border: 1px solid black;width: 100%;
            border-collapse: collapse;position: absolute;top: -62px;">
  <tr style="height:30px;border-top:1px solid black;">
    <td>
      <span style="font-weight: 700;">Report Interval from</span> {{f_date | date:"medium"}} to {{t_date |
      date:"medium"}}
    </td>
    <!-- <td>
            <span style="font-weight: 700;">To</span>: {{todate | date:"medium"}}
          </td> -->
  </tr>

</table>


<!-- 
<app-all-menus></app-all-menus>
<div style="min-height:420px;padding-top: 6%;">
  <p class="headStyle">{{'POI Report'  | translate}}</p>
  <div class="InputStyle">
    <div class="row">
      <div class="col-md-2" style="padding-left: 18px;">
          <md-input-container>
          <input mdInput placeholder="{{'Type POI Name' | translate}}" [mdAutocomplete]="tdAutoRoute" name="state" 
          #state="ngModel" [(ngModel)]="routeName"
          (ngModelChange)="filterRoutes(routeName)">
         <md-autocomplete #tdAutoRoute="mdAutocomplete">
            <md-option *ngFor="let route of routeSelect" [value]="route.poiname" >
              <span>{{route.poiname}}</span>
            </md-option >
          </md-autocomplete>   
        </md-input-container>
      </div>
      <div class="col-md-2">
        <md-input-container>
        <input mdInput placeholder="{{'Type Device Name' | translate}}" [mdAutocomplete]="tdAuto" name="state" 
        #state="ngModel" [(ngModel)]="deviceName"
        (ngModelChange)="filterDevices(deviceName)">
       <md-autocomplete #tdAuto="mdAutocomplete">
          <md-option *ngFor="let device of deviceSelect" [value]="device.viewValue" >
            <span>{{device.viewValue}}</span>
          </md-option >
        </md-autocomplete>   
      </md-input-container>
   
    </div>
      <div class="col-md-3">
        <span>{{'From Date' |  translate}}</span>
        <owl-date-time [(ngModel)]="Fromdate" [hourFormat]="'12'" [dateFormat]="'DD/MM/YYYY hh:mm:a'" [autoClose]="true"></owl-date-time>
      </div>
      <div class="col-md-3">
        <span>{{'To Date' | translate}}</span>
        <owl-date-time [(ngModel)]="todate" [hourFormat]="'12'"  [dateFormat]="'DD/MM/YYYY hh:mm:a'" [autoClose]="true"></owl-date-time>
      </div>
      <div class="col-md-2" style="padding-left: 65px;padding-top:17px;">
          <button style="background-color:#3e3737;border:#fdfdfd;width: 120px;" class="btn btn-primary w3-button/" (click)="callfunction()">{{'SEARCH' | translate}}</button>       
        </div>
    </div>
  </div>
  <table id="deviceTable" class="display" cellspacing="0" style="width:100%;font-size:15px;text-align: center">
    <thead style="background-color:#A2C523;color: white;">
        <tr>
            <th style="text-align:center;">{{'Device Name' | translate}}</th>
            <th style="text-align:center;">{{'Device ID' | translate}}</th>
            <th style="text-align:center;">{{'POI name' | translate}}</th>
            <th style="text-align:center;">{{'Arrival Time' | translate}}</th>
            <th style="text-align:center;">{{'Departure Time' | translate}}</th>
            <th style="text-align:center;">{{'Address' | translate}}</th>         
        </tr>
    </thead>    
</table>
</div>

 -->
