
<div  class="navbar navbar-default" style="margin-left: -15px;margin-top: -8px;">
<app-all-menus *ngIf="!token_identifier"></app-all-menus>
</div>

<div style="margin-top: 30px;">

  <div *ngIf="show" id="mySidebar" class="sidebar" style="background: white;
    box-shadow: 3px 1px 5px 0px #b2b0ae;">
    <!-- <button class="close pull-right" (click)="closeNav()"><i class="fas fa-times"></i></button> -->
    <!-- <app-report-filter></app-report-filter> -->
    <div class="row" style="margin: 0;padding-bottom: 10px;">
      <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" | translate}} :</p>
      </div>
      <div class="col-sm-9 col-md-9 col-lg-9" style="padding: 0;">
        <div>
          <select id="dbselect" multiple="multiple">
            <option *ngFor="let option_1 of options" [value]="option_1.selectedValue">{{ option_1.value }}</option>
          </select>
        </div>
      </div>
    </div>
    <div class="row" style="margin: 0;padding-bottom: 10px;">
      <div class="col-sm-12 col-md-12 col-lg-12" style="padding-right: 0%;padding-left: 0;">
        <!-- timefilter icons -->
        <div class="btn-group btn-group-sm" role="group" aria-label="Basic example" style="width:100%;">
          <button type="button" style="width:25%;border-right: 2px solid white;" class="btn btn-secondary animateClass_4"
            (click)="changeDate('today')">{{'Today' | translate}}</button>
          <button type="button" style="width:25%;border-right: 2px solid white;" class="btn btn-secondary animateClass_5"
            (click)="changeDate('yesterday')">{{'Yesterday' | translate}}</button>
          <button type="button" style="width:25%;border-right: 2px solid white;" class="btn btn-secondary animateClass_6"
            (click)="changeDate('week')">{{'Week' | translate}}</button>
          <button type="button" style="width:25%;" class="btn btn-secondary animateClass_7" (click)="changeDate('month')">{{'Month' | translate}}</button>
        </div>
      </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;">
      <!-- from time label-->
      <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">
      <!-- from datetime picker -->
      <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" style="margin: 0;padding-bottom: 10px;padding-right: 3px;">
      <div class="col-sm-3 col-md-3 col-lg-3" style="padding-left: 0;">
        <!-- tolabel -->
        <span style="margin-bottom: 0%;font-size: 12px;">{{"To" | translate}} :</span>
      </div>
      <div class="col-sm-9 col-md-9 col-lg-9" style="padding:0px">
        <!-- tolabel picker -->
        <input id="to_date" bsDatepicker class="form-control form-control-sm" style="height: 25px;" [bsConfig]="bsConfig"
          name="todate" [(ngModel)]="to_date" type="text">
      </div>
    </div>
    <!-- <div class="row" style="margin: 0;padding-bottom: 10px;padding-right: 3px;">
        <span class="col-md-4" style="margin-bottom: 0%;font-size: 12px;">{{"IN" | translate}} </span>
      <md-slide-toggle class="col-md-4" style="float: right; padding: 8px 35.1px"
        md-tooltip="Include Dealer's Customers" [(ngModel)]="event"></md-slide-toggle>
          <span class="col-md-4" style="margin-bottom: 0%;font-size: 12px;">{{"OUT" | translate}}</span>

    </div> -->

    <div class="dropdown">
      <button style="background-color: #1556b9;color:#fdfdfd;" md-raised-button (click)="reportFilter('data')">{{'Search' |
        translate}}</button>
      <button style="background-color: #cc0000;color:#fdfdfd;" md-raised-button class="dropdown-toggle" type="button"
        id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        {{ 'Export To' |translate}}
      </button>
      <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
        <a style="cursor: pointer;" class="dropdown-item" (click)="exportExel()"><i class="far fa-file-excel"></i> Excel</a>
        <a style="cursor: pointer;" class="dropdown-item" (click)="exportPDF()"><i class="far fa-file-pdf"></i> PDF</a>
      </div>
    </div>
  </div>
  <div>
    <div id="line" class="line"></div>
    <div class="wordwrapper">
      <div id="line1" class="word">
        <i style="color: floralwhite;" *ngIf="showLine" class="fas fa-chevron-circle-right" (click)="openNav()"></i>
        <i style="color: black;font-size: 14px;margin-left: -11px;" *ngIf="!showLine" class="fas fa-chevron-circle-left"
          (click)="openNav()"></i>
      </div>

    </div>
  </div>

  <div *ngIf="show" id="main" style="box-shadow: 3px 1px 5px 0px #b2b0ae">
    <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>{{'Fuel Fill Report' | translate}}</h4>
        <div id="toast">
          <!-- <div id="desc">{{data_descip}}</div> -->
        </div>
      </div>
    </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 *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:center">{{'Vehicle Name' | translate}}</th>
                <th style="text-align:center">{{'Event' | translate}}</th>
                <th style="text-align:center">{{'Fuel Change (L)' | translate}}</th>
                <th style="text-align:center">{{'Time' | translate}}</th>
                <th style="text-align:center">{{'Location' | translate}}</th>
              </tr>
            </thead>
          </table>
        </div>
      </div>
    </div>


  </div>
</div>


