<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>{{'IDLE 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="loading" *ngIf="Load">Loading&#8230;</div> 
      <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 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;">{{'Start Time' | translate}}</th>
                      <th style="text-align: left;">{{'End Time' | translate}}</th>
                      <th style="text-align: left;">{{'Duration (HH:MM)' | translate}}</th>
                      <th style="text-align: left;">{{'Location' | translate}}</th>    
                      <th style="text-align: left;">{{'AC Status' | translate}}</th>
                    </tr>
                </thead>  
            </table>
        </div> 
        </div>
      </div> 
    </div>
  </div>
</div>




<!-- <app-all-menus></app-all-menus>
<div class="container-fluid" style="padding-top: 6%;">
  <div class="headerStyle">
    <span>{{'IDLE REPORT' | translate}}</span>
    <div class="loading" *ngIf="Load">Loading&#8230;</div> 
  </div>
  <div class="filterDiv">
    <div class="row" style="width: 100%; padding-bottom: 25px; background: #efefef;">
      <div class="col-12" style="text-align: center;margin-top: 30px;">
        <div style="display: inline-flex; width: 80%;padding-bottom: 3px;">
          <label style="margin-top: 11px;width: inherit;">{{'Select Vehicle' | translate}}</label>
          <div style="width: inherit; margin-top: 9px;text-align: left">
            <select id="select" multiple="multiple" style="text-align: left">
              <option *ngFor="let option_1 of options" value={{option_1.id}} >{{ option_1.value }}</option>
            </select>
          </div>
          <label style="width: inherit;margin-top: 11px">{{'From Date' | translate}}</label>
          <input id="from_date" bsDatepicker class="form-control form-control-sm" style="margin-top: 4px;"
            [bsConfig]="bsConfig" [(ngModel)]="from_date" type="text">
          <label style="width: inherit;margin-top: 11px">{{'To Date' | translate}}</label>
          <input id="to_date" bsDatepicker class="form-control form-control-sm" style="margin-top: 4px;" [bsConfig]="bsConfig" name="todate" [(ngModel)]="to_date" type="text">
            <label style="width: inherit;margin-top: 11px">{{'Min Idle Time (Min)' | translate}}</label>
            <input id="minIdleTime" class="form-control form-control-sm" style="margin-top: 4px;width: 80px;" name="minIdleTime" min="1" placeholder="0000" [(ngModel)]="minIdleTime" type="number">
        </div>
        <button md-raised-button style="width: 190px; background: #31428c; color: white;margin-left: 20px;"
          (click)="callfunction()"> {{'SEARCH' | translate}} </button>

      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-12">
        <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;">{{'Start Time' | translate}}</th>
                    <th style="text-align:center;">{{'End Time' | translate}}</th>
                    <th style="text-align:center;">{{'Duration (HH:MM:SS)' | translate}}</th>
                    <th style="text-align:center;">{{'Location' | translate}}</th>    
                    <th style="text-align:center;">{{'AC Status' | translate}}</th>
                </tr>
            </thead>  
        </table>
    </div>
  </div>
</div> -->