<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>{{'Daywise Report' | translate}}</h4>
    </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 *ngIf="Load" class="loading">Loading&#8230;</div>
          <div id="toast"> <div id="desc">{{data_descip}}</div> </div>
          <div style="width: 100%;height:84vh;">
            <table id="deviceTable" cellspacing="0" class="display nowrap" style="width: 100%;font-size: 14px;">
                <thead style="background-color:#e0e0e0;color: #444444;">
                    <tr>
                      <th ></th>
                        <th style="text-align:left;width:100px">{{'Date'|translate}} </th>
                        <th style="text-align:left;width:100px">{{'Vehicle Name' | translate}}</th>
                        <th style="text-align:left;">{{'Distance (Kms.)' | translate}}</th>
                        <th style="text-align:left;width:100px">{{'Moving Time (hh:mm)' | translate}}</th>   
                        <th style="text-align:left;width:100px">{{'Stoppage Time (hh:mm)' | translate}}</th>
                        <th style="text-align:left;">{{'Idle Time (hh:mm)' | translate}}</th>
                        <th style="text-align:left;width:300px">{{"Start Location" | translate}}</th>
                        <th style="text-align:left;width:300px">{{'End Location' | translate}}</th>           
                    </tr>
                </thead>  
            </table>
        </div> 
        </div>
      </div> 
    </div>
  </div>
</div>

<!-- 
<th style="text-align:left;">Stoppage Time</th>
<th style="text-align:left;">Idle Time</th>
<th style="text-align:left;">Start Location</th>
<th style="text-align:left;">End Location</th> -->








<!-- <app-all-menus></app-all-menus>
<div style="min-height:100vh;padding-top: 6%;">
  <p class="headStyle">{{'Daywise Report' | translate}}</p>
  <div class="loading" *ngIf="Load">Loading&#8230;</div> 
  <div class="InputStyle">
    <div class="row">
      <div class="col-md-4" style="display: inherit;">
          <md-select style="display: grid;padding-top:11px;width:200px;margin-left: 25px;" name="neww" placeholder="Filter Report" [(ngModel)]="dateStr">
              <md-option *ngFor="let dateStr of dateString" [value]="dateStr" (click)="filtered_report(dateStr)">
                {{dateStr}}
              </md-option>
            </md-select>
            <div style="padding-left: 50px; padding-top: 15px;">
              <select id="dbselect" multiple="multiple">
                <option *ngFor="let option_1 of options" [value]="option_1.selectedValue">{{ option_1.value }}</option>
              </select>
            </div>
      </div>
      <div class="col-md-6" style="display:inherit;padding-top: 16px;">
        <span>{{'From Date' | translate}}</span>
        <owl-date-time [(ngModel)]="fDate" [hourFormat]="'12'" [dateFormat]="'DD/MM/YYYY hh:mm:a'" [autoClose]="true"></owl-date-time>
        <span style="padding-left: 50px;">{{'To Date' | translate}}</span>
        <owl-date-time [(ngModel)]="tDate" [hourFormat]="'12'"  [dateFormat]="'DD/MM/YYYY hh:mm:a'" [autoClose]="true"></owl-date-time>
      </div>
      <div class="col-md-2" style="padding-top: 15px;">
        <button md-raised-button style="cursor: pointer;background-color: #427942;color: white;" class="btn btn-primary w3-button/" (click)="exportExcel()">{{'Export to excel' | translate}}</button>
      </div>  
    </div>
  </div>
</div>
 -->



