<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>{{'Route Plan 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">
          <div class="row" style="margin: 0;">
            <div class="col-3" style="padding-top: 18px;">
              <p style="font-weight: 600; color: #a6a6a6;">Vehicle:</p>
            </div>
            <div class="col-9" style="padding-top: 18px;">
      
              <select style="width: inherit;" id="vehicles" multiple="multiple">
                <option *ngFor="let option_1 of options" [value]="option_1.selectedValue">{{ option_1.value }}</option>
              </select>
            
            </div>
          </div>

          <div class="row" style="margin: 0;">
            <div class="col-3" style="padding-top: 18px;">
              <p style="font-weight: 600; color: #a6a6a6;">Route Name:</p>
            </div>
            <div class="col-9" style="padding-top: 18px;">
              <select style="width: inherit;" id="routes" multiple="multiple">
                <option *ngFor="let option_1 of routes" [value]="option_1._id">{{ option_1.name }}</option>
              </select>
            </div>
          </div>

          <div class="row" style="margin: 0;">
            <div class="col-3" style="padding-top: 18px;">
              <p style="font-weight: 600; color: #a6a6a6;">Poi:</p>
            </div>
            <div class="col-9" style="padding-top: 18px;">
              <select style="width: inherit;" id="poi" multiple="multiple">
                <option *ngFor="let option_1 of poiArray" [value]="option_1.id">{{ option_1.poiname }}</option>
              </select>
            </div>
          </div>

          <div class="row" style="margin: 0;">
            <div class="col-3" style="padding-top: 18px;">
              <p style="font-weight: 600; color: #a6a6a6;">From:</p>
            </div>
            <div class="col-9" style="padding-top: 18px;">
              <!-- from datetime picker -->
              <input id="from_date" bsDatepicker class="form-control form-control-sm"
                style="height: 25px; width: 200px;" [bsConfig]="bsConfig" [(ngModel)]="from_date" type="text">
            </div>
          </div>
          <div class="row" style="margin: 0;padding-bottom: 10px;padding-right: 3px;">

            <!-- tolabel -->
            <div class="col-3" style="padding-top: 18px;">
              <p style="font-weight: 600; color: #a6a6a6;">To:</p>

            </div>
            <div class="col-9" style="padding-top: 18px;">
              <!-- tolabel picker -->
              <input id="to_date" bsDatepicker class="form-control form-control-sm" style="height: 25px; width: 200px;"
                [bsConfig]="bsConfig" name="todate" [(ngModel)]="to_date" type="text">
            </div>
          </div>


          <div class="row">
            <div class="col-sm-12 col-md-12 col-lg-12" style="padding-right: 0;">

              <div class="dropdown text-center">
                <button style="background-color: #1556b9;color:#fdfdfd;" md-raised-button (click)="search()">{{'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>
                <!-- (click)="reportFilter('data')"  (click)="exportExel()" (click)="exportPDF()"-->
                <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
                  <a style="cursor: pointer;" class="dropdown-item" (click)="exportExcel()"><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>
      </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">
        <div class="col-sm-12 col-md-12 col-lg-12">
          <div class="loading" *ngIf="Load">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;">{{'Vehicle' | translate}}</th>
                  <th style="text-align: left;">{{'Route Name' | translate}}</th>
                  <th style="text-align: left;">{{'Poi' | translate}}</th>
                  <th style="text-align: left;">{{'Arrival Time' | translate}}</th>
                  <th style="text-align: left;">{{'Departure Time' | translate}}</th>


                </tr>
              </thead>
            </table>
          </div>
        </div>
      </div>
    </div> -->
    <table class="table" style="height: 90vh;">
      <thead>
        <tr>
          <th *ngFor="let header of headerArray">{{header}}</th>
        </tr>

      </thead>
      <tbody>
        <tr *ngFor="let item of mainArray; index as i"> 
          <td>{{item.data.poiname}}</td> 
          <td *ngFor="let date of item.data.date">{{date}}</td>

        </tr>
      </tbody>

    </table>


  </div>

</div>