<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>{{'Fuel Price List' | translate}}

        <button class="btn btn-primary btn-sm" *ngIf="useridd=='59cbbdbe508f164aa2fef3d8'" style="float: right;" [routerLink]="['/addFuelPrice']"><i class="fas fa-plus"></i> Add Fuel Price</button>
          </h4>
      </div>
    </div>

  <div class="row">
    <div class="col-md-3">
      <div class="sidebar">
       

       

        <div class="accordion" id="accordionExample">
          <!-- <div class="card"> -->
            <!-- <div class="card-header" id="headingOne"> -->
              <h2 class="mb-2">
                <button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapseOne"
                  aria-expanded="true" aria-controls="collapseOne" (click)="selectOptions(1)">
                  Get Fuel Price By State
                </button>
              </h2>
            <!-- </div> -->
        
            <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordionExample">
              <!-- <div class="card-body"> -->
                <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;"> {{'State' | translate}} :</span>
                  </div>
                  <div class="col-sm-9 col-md-9 col-lg-9" style="padding:0px">
                    <select style="margin-top: -20px;width: inherit;" [(ngModel)]="currState" ngDefaultControl>
                      <option *ngFor="let ustate of Indianstate" [value]="ustate">
                        {{ustate}}
                      </option>
                    </select>
                  </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" 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;"> {{'To' | translate}} :</span>
                  </div>
                  <div class="col-sm-9 col-md-9 col-lg-9" style="padding:0px">
                    <input id="to_date" bsDatepicker class="form-control form-control-sm" style="height: 25px;" [bsConfig]="bsConfig"
                      [(ngModel)]="to_date" type="text">
                  </div>
                <!-- </div> -->
              </div>
            </div>
          <!-- </div> -->
          <!-- <div class="card">
            <div class="card-header" id="headingTwo"> -->
              <h2 class="mb-0">
                <button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseTwo"
                  aria-expanded="false" aria-controls="collapseTwo" (click)="selectOptions(2)">
                  Get Fuel Price of all states
                </button>
              </h2>
            <!-- </div> -->
            <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionExample">
              <!-- <div class="card-body"> -->
                <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;"> {{'Date' | translate}} :</span>
                  </div>
                  <div class="col-sm-9 col-md-9 col-lg-9" style="padding:0px">
                    <input id="to_date" bsDatepicker class="form-control form-control-sm" style="height: 25px;" [bsConfig]="bsConfig"
                      [(ngModel)]="to_date" type="text">
                  </div>
                </div>
              <!-- </div> -->
            </div>
          <!-- </div> -->

          </div>
          <!-- </div> -->

        

        <div class="text-center">

          <button class="btn btn-primary" (click)="submit()"> Submit</button>
        </div>

      </div>

    </div>
    <div class="col-md-9 main">
      <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 id="toast">
                    <div id="desc">{{data_descip}}</div>
                  </div> -->
            <div class="row" style="padding: 8px;margin-bottom: 8px;">
      
      
              <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 style="text-align:left;width:100px">{{'Date'|translate}} </th>
                      <th style="text-align:left;width:100px">{{'State' | translate}}</th>
                      <th style="text-align:left;width:100px">{{'Petrol Price' | translate}}</th>
                      <th style="text-align:left;width:100px">{{'Diesel Price' | translate}}</th>                   
      
                    </tr>
                  </thead>
                </table>
      
      
              </div>
              </div>
              </div>
              </div>
    </div>

  </div>