<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>{{'Daily Report'|translate}}</h4>
      
    </div>
  </div>
  <div id="toast">
    <div id="desc">{{data_descip}}</div>
  </div>
  <!-- <div class="row" style="margin: 0;padding-bottom: 10px;padding-right: 3px;">
    <div class="col-sm-3 col-md-3 col-lg-3" style="padding-left: 0;">
      <span style="margin-bottom: 0%;font-size: 12px;"> {{'From' | translate}} :</span>
    </div>
    <div class="col-sm-9 col-md-9 col-lg-9" style="padding:0px">
      <input id="from_date" bsDatepicker class="form-control form-control-sm" style="height: 25px;" [bsConfig]="bsConfig"
        [(ngModel)]="from_date" type="text">
    </div>
  </div> -->
  
  <div class="row rowStyle">
    
    <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;" title="Vehicle Name">{{'Vehicle'| translate}}</th>
                  <th style="text-align:left;" title="Device IMEI">{{'IMEI' | translate}}</th>
                  <th style="text-align:left;" title="Total Distance (Km)">{{'Total Distance' | translate}}</th>
                  <th style="text-align:left;" title="Fuel consumption (Litre)">{{'Fuel' | translate}}</th>
                  <th style="text-align:left;" title="Ignition ON Time (Hr:Min)">{{'Ignition ON' | translate}}</th>
                  <th style="text-align:left;" title="Ignition OFF Time (Hr:Min)">{{'Ignition OFF' | translate}}</th>
                  <th style="text-align:left;" title="Idle Time (Hr:Min)">{{'Idle Time' | translate}}</th>
                  <th style="text-align:left;" title="Out of reach (Hr:Min)">{{'Out of reach' | translate}}</th>
                  <th style="text-align:left;" title="No GPS (Hr:Min:Sec)">{{'No GPS' | translate}}</th>
                  <th style="text-align:left;">{{'Trips' | translate}}</th>
                  <th style="text-align:left;" title="Max Speed (Km/hr)">{{'Max Speed'| 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;">{{'Details' | translate}}</th>
                  <th style="text-align:left;width:300px">{{'Recalculate' | 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>
<!-- <div class="card">
  <div class="card-header">
    <h3>Dialy Report</h3>
    <button type="button" class="close btn btn-danger btn-sm pull-right" aria-label="Close">
      Export To Excel
    </button>
  </div>
  <div class="card-body">
    <div class="row">
      <div class="col-md-6">
        <div class="row">
        <div class="col-sm-3 col-md-3 col-lg-3" style="padding-left: 0;">
          <p style="margin-bottom: 0; padding-top: 2px;font-size: 12px">VEHICLE :</p>
        </div>
        <div class="col-sm-9 col-md-9 col-lg-9" style="padding: 0;">
        

          <md-list-item class="primary-imenu-item" role="listitem">
              <md-select placeholder="Select Vehicale" name="vehicale" class="filter-select" [(ngModel)]="deviceArr" [compareWith]="equals"
                multiple #yearSelect="ngModel">
                <md-option disabled="disabled" class="filter-option">
                  <input type="checkbox" placeholder="Select All" (click)="selectAll(checkAll.checked, yearSelect, deviceArray)" #checkAll>
                </md-option>
                <md-option *ngFor="let item of deviceArray" (click)="onChange(item.Device_ID)"  [value]="item.Device_ID">
                  {{item.Device_Name}}
                </md-option>
              </md-select>
          </md-list-item>

         
        </div>
        </div>
      </div>
      <div class="col-md-6">
        <div class="row" style="margin: 0;padding-bottom: 10px;padding-right: 3px;">
            <div class="col-sm-3 col-md-3 col-lg-3" style="padding-left: 0;">
               <span style="margin-bottom: 0%;font-size: 12px;"> {{'From' | translate}} :</span>
           </div>
        <div class="col-sm-9 col-md-9 col-lg-9" style="padding:0px">
            <input id="from_date" bsDatepicker class="form-control form-control-sm" style="height: 25px;" [bsConfig]="bsConfig"
            [(ngModel)]="from_date" type="text">
        </div>
      </div>

      
      </div>

    </div>
    <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;" title="Vehicle Name">{{'Vehicle'| translate}}</th>
              <th style="text-align:left;" title="Device IMEI">{{'IMEI' | translate}}</th>
              <th style="text-align:left;" title="Total Distance (Km)">{{'Total Distance' | translate}}</th>
              <th style="text-align:left;" title="Fuel consumption (Litre)">{{'Fuel' | translate}}</th>
              <th style="text-align:left;" title="Ignition ON Time (Hr:Min)">{{'Ignition ON' | translate}}</th>
              <th style="text-align:left;" title="Ignition OFF Time (Hr:Min)">{{'Ignition OFF' | translate}}</th>
              <th style="text-align:left;" title="Idle Time (Hr:Min)">{{'Idle Time' | translate}}</th>
              <th style="text-align:left;" title="Out of reach (Hr:Min)">{{'Out of reach' | translate}}</th>
              <th style="text-align:left;" title="No GPS (Hr:Min:Sec)">{{'No GPS' | translate}}</th>
              <th style="text-align:left;">{{'Trips' | translate}}</th>
              <th style="text-align:left;" title="Max Speed (Km/hr)">{{'Max Speed'| 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;">{{'Details' | translate}}</th>
            </tr>
          </thead>
        </table>
      </div>
    </div>
    </div>
  </div> -->

<!-- </div> -->