<app-all-menus></app-all-menus>
<div class="topDiv">
  <div id="toast">
    <div id="desc">{{data_descip}}</div>
  </div>
  <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>{{'Distance 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-9 col-md-9 col-lg-9" 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 class="row">
            <div class="col-sm-12 col-md-12 col-lg-12">
              <button class="btn btn-default" [disabled]="firstcall" (click)="next()" style="margin-right: 1px;width: 89px;float: right;color:white;line-height: 1.6;background: #426E86;height: auto;font-size: 12px;border-radius: 0px;border: none;margin-bottom: 10px;">{{'Next' | translate}} >></button>  
              <button class="btn btn-default" [disabled]="lastcall" (click)="pre()" style="width: 90px;float: right;color:white;margin-right: 0;line-height: 1.6;background: #426E86;height: auto;font-size: 12px;border-radius: 0px;border: none;margin-bottom: 10px;"><< {{'Previous' | translate}}</button>   
            </div>
          </div>
          <div class="row">
              <div class="col-sm-12 col-md-12 col-lg-12">
                <div class="loading" *ngIf="Load">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;">{{'Device Name' | translate}}</th>
                            <th style="text-align: left;">{{'From Date' | translate}}</th>
                            <th style="text-align: left;">{{'To Date' | translate}}</th>
                            <th style="text-align: left;">{{'Start Location' | translate}}</th>
                            <th style="text-align: left;">{{'End Location' | translate}}</th>
                            <th style="text-align: left;">{{'Total K.M.' | translate}}</th>
                              <th style="text-align: left;">{{'Details' | translate}}</th>

                          </tr>
                      </thead>  
                  </table>
              </div>       
            </div>
          </div>

        </div>
       
      </div> 
    </div>
  </div>
</div>


<!-- 

      <app-all-menus></app-all-menus>

  <div style="min-height:100vh;padding-top: 6%;">
    <p class="headStyle">{{'Distance Report' | translate}}</p>
<div class="loading" *ngIf="Load">Loading&#8230;</div>
    <div class="InputStyle">
      <div class="row">
        <div class="col-md-3">
            <md-input-container>
                <input mdInput placeholder="Devices" [mdAutocomplete]="tdAuto" name="state" 
                #state="ngModel" [(ngModel)]="option" 
               (ngModelChange)="filterStates(option)">
               <md-autocomplete #tdAuto="mdAutocomplete">
                  <md-option *ngFor="let option_1 of dataSelect" [value]="option_1.value" >
                    <span>{{ option_1.value }}</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-3" style="top: 16px;">
            <button style="background-color:#3e3737;border:#fdfdfd;" class="btn btn-primary w3-button/" (click)="distanceRep(Fromdate,todate)">{{'SEARCH' | translate}}</button>
            <button style="background-color: #427942;border: white;" class="btn btn-primary w3-button/" (click)="exportExcel()">{{'Export to excel' | translate}}</button>
          </div>
          <flash-messages style="float: center;margin:0px 1px;height:-6px;"></flash-messages>
      </div>
    </div>
    <table id="test" class="table table-striped table-hover " style="overflow-y: hidden;
           overflow-x: hidden;font-size:12px">

      <thead style="background-color:#A2C523;color: white;">
        <tr>
          <th>{{'Device Name' | translate}}</th>
          <th >{{'Start Location' | translate}}</th>
          <th>{{'End Location' | translate}}</th>
          <th>{{'Total K.M.' | translate}}</th>        
        </tr>
      </thead>
      <tbody>
        <tr *ngFor="let device of device_summary">
          <td style="cursor:pointer">{{device.devicename}}</td>
          <td style="cursor:pointer">{{device.address}}</td>
          <td style="cursor:pointer">{{device.address_end}}</td>
          <td style="cursor:pointer">{{device.totalkm | number:'1.2-2'}}</td>
        </tr>
      </tbody>
    </table>
  </div> -->

  
    
 