<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>{{'Loading Unloading Trip' | translate}}</h4>
      <!-- <i class="fas fa-download"></i> -->
    </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;">
      <ul class="nav nav-tabs" id="myTab" role="tablist" > 
        <li class="nav-item" (click)="changeDetector('group')">
          <a class="nav-link active" id="grouped-tab" data-toggle="tab" href="#grouped" role="tab" aria-controls="grouped logs" aria-selected="false">{{'Group' | translate}}</a>
        </li>
        <li class="nav-item" (click)="changeDetector('detail')">
          <a class="nav-link" id="detailed-tab" data-toggle="tab" href="#detailed" role="tab" aria-controls="detialed data" aria-selected="true">{{'Detail'|translate}}</a>
        </li>
      </ul>
      <div class="tab-content" id="myTabContent">
        <div class="tab-pane fade show active" id="grouped" role="tabpanel" aria-labelledby="groupes-tab">
          <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 style="width: 100%;height:84vh;">
                <table id="deviceTable_grouped" cellspacing="0" style="width: 100%;font-size: 14px;">
                    <thead style="background-color:#e0e0e0;color: #444444;width: 100%;">
                        <tr>
                           <th style="text-align:left;">{{'Vehicle Name' | translate}}</th>
                            <th style="text-align:left;">{{'Trip Start Geofence' | translate}}</th>
                            <th style="text-align:left;">{{'Trip End Geofence' | translate}}</th>
                            <th style="text-align:left;">{{'Distance' | translate}}</th>
                            <th style="text-align:left;">{{'Running' | translate}}</th>
                            <th style="text-align:left;">{{'Stop' | translate}}</th>
                            <th style="text-align:left;">{{'Idle' | translate}}</th>
                            <th style="text-align:left;">{{'Utilization %' | translate}}</th>
                            <th style="text-align:left;">{{'Efficiency %' | translate}}</th>                
                            <th style="text-align:left;">{{'No. of trips' | translate}}</th>  
                        </tr>
                    </thead>  
                </table>
            </div> 
            </div>
          </div> 
        </div>
        <div class="tab-pane fade" id="detailed" role="tabpanel" aria-labelledby="detailed-tab">
          <div *ngIf="tableSwitch" 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 >
                <table id="deviceTable" style="font-size: 14px;width:100%">
                    <thead style="background-color:#e0e0e0;color: #444444;">
                        <tr>
                          <th style="text-align:left">{{'Vehicle Name' | translate}}</th>
                            <th style="text-align:left">{{'Trip Start' | translate}}</th>
                            <th style="text-align:left">{{'Trip End' | translate}}</th>
                            <th style="text-align:left;">{{'Trip Start time' | translate}}</th>
                            <th style="text-align:left">{{'Trip End time' | translate}}</th>   
                            <th style="text-align:left">{{'Distance (Kms.)' | translate}}</th>
                            <th style="text-align:left;">{{'Duration (HH:MM)' |translate}}</th>
                            <th style="text-align:left">{{'Running Time (HH:MM)' |translate}}</th>
                            <th style="text-align:left">{{'Stoppage Time (HH:MM)' | translate}}</th>        
                            <th style="text-align:left">{{'Idle Time (HH:MM)' | translate}}</th>   
                            <th style="text-align: left">{{'Status' | translate}}</th>      
                            <th style="text-align: left">{{'Replay' | translate}}</th>           
                        </tr>
                    </thead>  
                </table>
            </div> 
            </div>
          </div> 
        </div>
       
    </div>
  </div>
</div>

