<div class="row" style="margin: 0; padding-top: 10px; background: #f9f6f6">
  <div
    class="col-sm-12 col-md-12 col-lg-12"
    style="padding-left: 10px; padding-right: 10px"
  >
    <div *ngIf="isCC" class="row" style="margin: 0; margin-top: 55px">
      <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">
          {{ "Report" | translate }} :
        </p>
      </div>
      <div class="col-sm-9 col-md-9 col-lg-9" style="padding: 0">
        <div>
          <select
            (ngModelChange)="changeComponent($event)"
            [(ngModel)]="componentIdentifier"
          >
            <option value="" disabled selected>
              Please Select Report Type
            </option>
            <option
              *ngFor="let component of reportArray"
              [disabled]="component.Rstatus == false"
              [value]="component.value"
            >
              <span>{{ component.name }}</span>
            </option>
            <option selected *ngIf="reportArray.length == 0">
              <span>No Reports Found</span>
            </option>
          </select>
        </div>
      </div>
    </div>
  </div>
</div>
<div *ngIf="sidenavbarcontent" class="mainClass">
  <div
    class="row"
    *ngIf="
      componentIdentifier != 'billing_detail' &&
      componentIdentifier != 'censor_detail' &&
      componentIdentifier != 'usersMaster' &&
      componentIdentifier != 'deviceMaster' &&
      componentIdentifier != 'gps_master'
    "
    style="margin: 0; padding-top: 10px; background: #f9f6f6"
  >
    <div
      class="col-sm-12 col-md-12 col-lg-12"
      style="padding-left: 10px; padding-right: 10px"
    >
      <!-- *ngIf="(componentIdentifier != 'route_violation_report')&&(componentIdentifier != 'notification_master')" -->
      <div *ngIf="isCC" 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">
            {{ "Group" | translate }} :
          </p>
        </div>
        <div class="col-sm-9 col-md-9 col-lg-9" style="padding: 0">
          <div>
            <select
              style="width: -webkit-fill-available"
              [ngModel]="selectGroup"
              (ngModelChange)="onChangeGroup($event)"
            >
              <option value="" disabled selected>Please Select Group</option>
              <!-- <option value="" disabled selected>Select your option</option> -->
              <option [value]="'all'">All</option>
              <option *ngFor="let group of groups" [value]="group.name">
                {{ group.name }}
              </option>
            </select>
          </div>
        </div>
      </div>

      <div
        *ngIf="
          componentIdentifier != 'route_violation_report' &&
          componentIdentifier != 'notification_master' &&
          isCC
        "
        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">
            {{ optionLabel | 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
        *ngIf="componentIdentifier === 'notification_master' || !isCC"
        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 :
          </p>
        </div>
        <div class="col-sm-9 col-md-9 col-lg-9" style="padding: 0">
          <div>
            <select id="dbselectNotif" multiple="multiple">
              <option
                *ngFor="let option_1 of notifDevArr"
                [value]="option_1.Device_ID"
              >
                {{ option_1.Device_Name }}
              </option>
            </select>
          </div>
        </div>
      </div>
      <div
        *ngIf="componentIdentifier === 'notification_master' || !isCC"
        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">
            {{ "Notification type" | translate }} :
          </p>
        </div>
        <div class="col-sm-9 col-md-9 col-lg-9" style="padding: 0">
          <div>
            <select id="dbselect_notif" multiple="multiple">
              <option *ngFor="let noti of notificationArr" [value]="noti.value">
                {{ noti.view }}
              </option>
            </select>
          </div>
        </div>
      </div>
      <div
        *ngIf="this.componentIdentifier === 'route_violation_report'"
        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">
            {{ "Route" | translate }} :
          </p>
        </div>
        <div class="col-sm-9 col-md-9 col-lg-9" style="padding: 0">
          <div>
            <select
              id="dbselect_3"
              multiple="multiple"
              (ngModelChange)="clicked = false"
            >
              <option *ngFor="let route of routeArr" [value]="route._id">
                {{ route.name }}
              </option>
            </select>
          </div>
        </div>
      </div>
      <div
        *ngIf="componentIdentifier === 'poi_report'"
        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">
            {{ "Select POI" | translate }} :
          </p>
        </div>
        <div class="col-sm-9 col-md-9 col-lg-9" style="padding: 0">
          <div>
            <select id="dbselect_1" multiple="multiple">
              <option *ngFor="let poiname of poiArr" [value]="poiname.id">
                {{ poiname.poiname }}
              </option>
            </select>
          </div>
        </div>
      </div>
      <div
        *ngIf="componentIdentifier === 'stoppage_report'"
        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">
            {{ "Duration" | translate }} :
          </p>
        </div>
        <div class="col-sm-9 col-md-9 col-lg-9" style="padding: 0">
          <div>
            <select id="dbselect_2" multiple="multiple">
              <option *ngFor="let ds of stoppage_duration" [value]="ds.value">
                {{ ds.view_value }}
              </option>
            </select>
          </div>
        </div>
      </div>

      <div
        *ngIf="showFromDate === true"
        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
              [disabled]="componentIdentifier === 'dayWiseReport'"
              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
              [disabled]="componentIdentifier === 'distance_report'"
              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-top: 5px; ">
            <div class="col-sm-6 col-md-6 col-lg-6" style="padding-left: 0;">
           
              <p style="margin-bottom: 0%;font-size: 12px;">{{'Idle Time' | translate}}</p>
            </div>
            <div class="col-sm-6 col-md-6 col-lg-6" style="padding-left:25px">
           
              <input id="minIdleTime" class="form-control form-control-sm" style="width: 81px;height: 25px; font-size: 12px; padding: 0; padding-left: 5px;" name="minIdleTime" min="1" placeholder="0000" [(ngModel)]="minIdleTime" type="number">
            </div>
          </div> -->
      <div
        *ngIf="showFromDate === true"
        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"
            (ngModelChange)="clicked = false"
          />
        </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"
            >{{ lableVariable | 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"
            (ngModelChange)="clicked = false"
          />
        </div>
      </div>
      <div
        class="row"
        *ngIf="componentIdentifier === 'idle_report'"
        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"
            >{{ "Min Idle Time (Min)" | translate }} :</span
          >
        </div>
        <div class="col-sm-9 col-md-9 col-lg-9" style="padding: 0px">
          <!-- tolabel picker -->
          <input
            id="minIdleTime"
            class="form-control form-control-sm"
            style="margin-top: 4px; width: 80px"
            name="minIdleTime"
            min="1"
            placeholder="0000"
            [(ngModel)]="minIdleTime"
            type="number"
            (ngModelChange)="clicked = false"
          />
        </div>
      </div>

      <div
        class="row"
        *ngIf="componentIdentifier === 'fuel_consumption_report'"
        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"
            >{{ "Report Type" | translate }} :</span
          >
        </div>
        <div class="col-sm-9 col-md-9 col-lg-9" style="padding: 0px">
          <md-radio-group
            aria-labelledby="example-radio-group-label"
            class="example-radio-group"
            [(ngModel)]="filterRtype"
          >
            <md-radio-button
              class="example-radio-button"
              *ngFor="let rtype of reportType"
              [value]="rtype"
              style="margin-left: 5px"
            >
              {{ rtype }}
            </md-radio-button>
          </md-radio-group>
        </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">
          <!-- button -->
          <!-- <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  (click)="exportExel()">{{'Export To Excel' | translate}}</button> -->
          <div class="dropdown">
            <button
              [ngStyle]="{
                'background-color': clicked == false ? '#1556b9' : '#cccccc'
              }"
              style="background-color: #1556b9; color: #fdfdfd"
              [disabled]="clicked"
              (click)="actionMethod('1'); clicked = true"
              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>

          <!-- <button style="background-color: #cc0000;color:#fdfdfd;" md-raised-button 
                (click)="exportPdf()">{{'Export To Pdf' | translate}}</button> -->
        </div>
      </div>
      <!-- <div  *ngIf = "showTable" class="row" style="padding: 0%;padding-top: 10px;">
            <div class="col-sm-12 col-md-12 col-lg-12" style="padding: 0%">
              <div class="row" style="margin: 0; padding-top: 5px;padding-left: 15px; padding-bottom: 5px; padding-top: 1px solid red; border-top: 1px solid #c5c5c5; border-bottom: 1px solid #c5c5c5;">
                <div class="col-sm-6 col-md-6 col-lg-6" style="padding-left: 0%;" >
              
                  <p style="font-size:112x;font-weight: 500;margin-bottom: 0%;">{{'Vehicle' | translate}}</p>
                  
                </div>
                <div class="col-sm-2 col-md-2 col-lg-2" >
               
                  <p style="font-size:112x;font-weight: 500;margin-bottom: 0%;">{{'Mileage' | translate}}</p>
                </div>
                <div class="col-sm-3 col-md-3 col-lg-3" style="padding-right: 0%;">
             
                  <p></p>
                </div>
                <div class="col-sm-1 col-md-1 col-lg-1" style="padding-right: 0%;padding-left: 0%;">
             
                  <i class="fas fa-times" style="color: red; cursor: pointer;" title="{{'Remove all track' | translate}}" (click)="removetracks('all',null)"></i>
                
                </div>
              </div>
              <div class="row" style="margin: 0; padding-left: 15px ;overflow: auto;">
                <div class="col-sm-12 col-md-12 col-lg-12" style="padding-left: 0%;">
                  <div style="max-height: 260px;">
                    <div class="row" *ngFor="let historyArr of tempMapHistory ; let i = index" style="cursor:pointer;padding-left: 15px;padding-top: 5px;padding-bottom: 5px;border-bottom: 1px solid #c5c5c5;background-color: white;">
                      <div class="col-sm-6 col-md-6 col-lg-6" style="padding-left: 0%;" (click)="plotHistory(i)">
                   
                        <p style="margin-bottom: 0%;font-size: 12px;color:#424242;">{{historyArr.device_name}}</p>
                        <p style="margin-bottom: 0%;font-size: 12px;color:#424242;line-height: 15px;">
                          <span style="margin-bottom: 0%;font-size: 12px;color:#424242;">{{historyArr.fromTime}}</span>
                          <span style="margin-bottom: 0%;font-size: 12px;color:#424242;"> - </span>
                          <span style="margin-bottom: 0%;font-size: 12px;color:#424242;">{{historyArr.toTime}}</span>
                        </p>              
                      </div>
                      <div class="col-sm-2 col-md-2 col-lg-2" style="padding-left: 0%;padding-right: 0%;" (click)="plotHistory(i)">
                 
                        <p style="text-align: center;font-size: 12px;color:#424242;">{{historyArr.mileage}}</p>
                      </div>
                      <div class="col-sm-3 col-md-3 col-lg-3" style="padding-left: 0%;text-align: center;padding-right: 0;" >
                       
                        <div>
                            <md-icon *ngIf="SpeedMeter2"   class="play animateClass_8" (click)="inter('slow')"  mdTooltip="Rewind">fast_rewind</md-icon>
                            <md-icon *ngIf="tempMapHistory[i].flag=='init'"   class="play animateClass_9" (click)="play(i)"  mdTooltip="{{'Play History' | translate}}">play_arrow</md-icon>
                            <md-icon *ngIf="tempMapHistory[i].flag=='start'"  class="play animateClass_10" (click)="play(i)"  mdTooltip="{{'Play History' | translate}}">play_arrow</md-icon>
                            <md-icon *ngIf="tempMapHistory[i].flag=='stop'"  class="play animateClass_11" (click)="play(i)"  mdTooltip="{{'Pause' | translate}}">pause_circle_outline</md-icon>
                            <md-icon *ngIf="SpeedMeter2"  class="play animateClass_12" (click)="inter('fast')"  mdTooltip="{{'Fast Forward' | translate}}">fast_forward</md-icon>
                       
                        </div>
                      </div>
                      <div class="col-sm-1 col-md-1 col-lg-1" (click)="removetracks('single',i)">
                        <i class="fas fa-times animateClass_13"  title="{{'Remove track' | translate}}"></i>
                      </div>
                    </div>                             
                  </div>  
                </div>
              </div>       
            </div>
          </div>            -->
    </div>
  </div>
  <div
    class="row"
    *ngIf="componentIdentifier === 'billing_detail'"
    style="margin: 0; padding-top: 10px; background: #f9f6f6"
  >
    <div class="col-sm-12 col-md-12 col-lg-12">
      <div class="row" style="margin-bottom: 10px">
        <div class="col-4">
          <label style="font-weight: 600; color: #948f8f">{{
            "USER" | translate
          }}</label>
        </div>
        <div class="col-8">
          <div>
            <select id="dbselect" style="width: 200px" 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-bottom: 10px">
        <div class="col-4">
          <label style="font-weight: 600; color: #948f8f">{{
            "TYPE" | translate
          }}</label>
        </div>
        <div class="col-8">
          <div>
            <select
              id="dbselect_billtype"
              style="width: 200px"
              multiple="multiple"
            >
              <option *ngFor="let op of billingType" [value]="op.selectedValue">
                {{ op.value }}
              </option>
            </select>
          </div>
        </div>
      </div>
      <div class="row" style="margin-bottom: 10px">
        <div class="col-4">
          <label style="font-weight: 600; color: #948f8f">{{
            "STATUS" | translate
          }}</label>
        </div>
        <div class="col-8">
          <div>
            <select
              id="dbselect_billStatus"
              style="width: 200px"
              multiple="multiple"
            >
              <option
                *ngFor="let opp of billing_status"
                [value]="opp.selectedValue"
              >
                {{ opp.value }}
              </option>
            </select>
          </div>
        </div>
      </div>
      <div class="row" style="margin-bottom: 10px">
        <div class="col-4">
          <label style="font-weight: 600; color: #948f8f">{{
            "Select Month" | translate
          }}</label>
        </div>
        <div class="col-8">
          <form class="container" style="padding: 0px">
            <input
              [(ngModel)]="modelDate"
              autocomplete="off"
              class="form-control"
              name="date"
              bsDatepicker
              [bsConfig]="{ dateInputFormat: 'MM/YYYY' }"
              style="width: 200px"
              (onShown)="onOpenCalendar($event)"
              (ngModelChange)="clicked = false"
            />
          </form>
        </div>
      </div>
      <div class="row" style="margin-bottom: 10px">
        <div class="col-12">
          <button
            [ngStyle]="{
              'background-color': clicked == false ? '#1556b9' : '#cccccc'
            }"
            style="background-color: #1556b9; color: #fdfdfd"
            [disabled]="clicked"
            (click)="actionMethod('2'); clicked = true"
            md-raised-button
            (click)="reportFilter_billing('data')"
          >
            {{ "Search" | translate }}
          </button>
          <button
            *ngIf="showXL == true"
            style="background-color: #cc0000; color: #fdfdfd"
            md-raised-button
            (click)="exportExel()"
          >
            {{ "Export To Excel" | translate }}
          </button>
          <!-- <button style="background-color: #cc0000;color: #fdfdfd;" md-raised-button class="col-md-4" *ngIf="showXL == true" (click)="exportPdf()">{{'Export To Pdf'| translate}}</button> -->
        </div>
      </div>
    </div>
  </div>
  <div
    class="row"
    *ngIf="componentIdentifier === 'censor_detail'"
    style="margin: 0; padding-top: 10px; background: #f9f6f6"
  >
    <div class="col-sm-12 col-md-12 col-lg-12">
      <div class="row">
        <div class="col-3">{{ "Device" | translate }}</div>
        <div class="col-9">
          <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 class="row" style="margin-bottom: 10px; float: right"></div>
        <div class="col-12">
          <button
            style="
              background-color: #1556b9;
              color: #fdfdfd;
              font-size: 12px;
              margin-top: 20px;
              float: right;
            "
            md-raised-button
            (click)="censor_detail()"
          >
            {{ "Search" | translate }}
          </button>
        </div>
      </div>
    </div>
  </div>
  <div
    class="row"
    *ngIf="componentIdentifier === 'usersMaster'"
    style="margin: 0; padding-top: 10px; background: #f9f6f6"
  >
    <div class="col-sm-12 col-md-12 col-lg-12">
      <div class="row">
        <div class="col-4">
          <p>{{ "Search By" | translate }} :</p>
        </div>
        <div class="col-8">
          <div style="display: flex">
            <md-radio-group
              aria-labelledby="example-radio-group-label"
              class="example-radio-group"
              [(ngModel)]="userFilterType"
            >
              <md-radio-button
                class="example-radio-button"
                *ngFor="let utype of userRadio"
                [value]="utype"
                (change)="userRadioButton()"
                style="margin-left: 5px"
              >
                {{ utype }}
              </md-radio-button>
            </md-radio-group>
          </div>
        </div>
      </div>
      <div class="row" style="margin-top: 10px">
        <div class="col-3">{{ "Phone" | translate }}</div>
        <div class="col-9">
          <div style="display: flex">
            <select id="dbselectPhone" multiple="multiple">
              <option *ngFor="let uPhone of userArr" [value]="uPhone._id">
                {{ uPhone.phone }}
              </option>
            </select>
          </div>
        </div>
      </div>
      <div class="row" style="margin-top: 20px">
        <div class="col-3">{{ "Name" | translate }}</div>
        <div class="col-9">
          <div style="display: flex">
            <select id="dbselectName" multiple="multiple">
              <option *ngFor="let uName of userArr" [value]="uName._id">
                {{ uName.first_name ? uName.first_name : "--" }}
                {{ uName.last_name ? uName.last_name : "--" }}
              </option>
            </select>
          </div>
        </div>
      </div>
      <div class="row" style="margin-top: 20px; margin-bottom: 20px">
        <div class="col-5">{{ "Deleted users" | translate }}</div>
        <div class="col-7">
          <div style="display: flex; float: right">
            <md-slide-toggle
              md-tooltip="Deleted Users"
              [(ngModel)]="deleteduser"
              (change)="userDeleted($event)"
            ></md-slide-toggle>
          </div>
        </div>
      </div>
      <div class="row" style="margin: 0; padding-bottom: 20px">
        <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: 20px; 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"
            (ngModelChange)="clicked = false"
          />
        </div>
      </div>
      <div
        class="row"
        style="margin: 0; padding-bottom: 20px; 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"
            (ngModelChange)="clicked = false"
          />
        </div>
      </div>
      <div class="row" style="margin-bottom: 20px">
        <div class="col-12">
          <button
            [ngStyle]="{
              'background-color': clicked == false ? '#1556b9' : '#cccccc'
            }"
            style="background-color: #1556b9; color: #fdfdfd"
            [disabled]="clicked"
            (click)="actionMethod('2'); clicked = true"
            md-raised-button
            (click)="reportFilter('data')"
          >
            {{ "Search" | translate }}
          </button>
          <button
            *ngIf="showXL == true"
            style="background-color: #cc0000; color: #fdfdfd"
            md-raised-button
            (click)="exportExel()"
          >
            {{ "Export To Excel" | translate }}
          </button>
          <!-- <button style="background-color: #cc0000;color: #fdfdfd;" md-raised-button class="col-md-4" *ngIf="showXL == true" (click)="exportPdf()">{{'Export To Pdf'| translate}}</button> -->
        </div>
      </div>
    </div>
  </div>
  <div
    class="row"
    *ngIf="componentIdentifier === 'deviceMaster'"
    style="margin: 0; padding-top: 10px; background: #f9f6f6"
  >
    <div class="col-12">
      <div class="row">
        <div class="col-5">
          <p>{{ "Search By" | translate }} :</p>
        </div>
        <div class="col-7">
          <div style="display: flex">
            <md-radio-group
              aria-labelledby="example-radio-group-label"
              class="example-radio-group"
              [(ngModel)]="deviceFilterType"
            >
              <md-radio-button
                class="example-radio-button"
                *ngFor="let dtype of deviceRadio"
                [value]="dtype"
                (change)="deviceRadioButton()"
                style="margin-left: 5px"
              >
                {{ dtype }}
              </md-radio-button>
            </md-radio-group>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col-sm-12 col-md-12 col-lg-12">
          <div class="row" style="margin-top: 10px">
            <div class="col-3">{{ "IMEI" | translate }}</div>
            <div class="col-9">
              <div style="display: flex">
                <select id="dbselectIMEI" multiple="multiple">
                  <option *ngFor="let udid of deviceArr_1" [value]="udid._id">
                    {{ udid.Device_ID }}
                  </option>
                </select>
              </div>
            </div>
          </div>
          <div class="row" style="margin-top: 20px">
            <div class="col-3">{{ "SIM" | translate }}</div>
            <div class="col-9">
              <div style="display: flex">
                <select id="dbselectSIM" multiple="multiple">
                  <option
                    *ngFor="let uname of deviceArr_1"
                    [value]="uname.sim_number"
                  >
                    {{ uname.sim_number ? uname.sim_number : "--" }}
                  </option>
                </select>
              </div>
            </div>
          </div>
          <div class="row" style="margin-top: 20px; margin-bottom: 20px">
            <div class="col-5">{{ "Deleted Device" | translate }}</div>
            <div class="col-7">
              <div style="display: flex; float: right">
                <md-slide-toggle
                  md-tooltip="Deleted Device"
                  [(ngModel)]="deleteddevice"
                  (change)="deletedDevices($event)"
                ></md-slide-toggle>
              </div>
            </div>
          </div>
          <div class="row" style="margin: 0; padding-bottom: 20px">
            <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: 20px; 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"
                (ngModelChange)="clicked = false"
              />
            </div>
          </div>
          <div
            class="row"
            style="margin: 0; padding-bottom: 20px; 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"
                (ngModelChange)="clicked = false"
              />
            </div>
          </div>
          <div class="row" style="margin-bottom: 20px">
            <div class="col-12">
              <button
                [ngStyle]="{
                  'background-color': clicked == false ? '#1556b9' : '#cccccc'
                }"
                style="background-color: #1556b9; color: #fdfdfd"
                [disabled]="clicked"
                (click)="actionMethod('3'); clicked = true"
                md-raised-button
                (click)="reportFilter('data')"
              >
                {{ "Search" | translate }}
              </button>
              <button
                *ngIf="showXL == true"
                style="
                  background-color: #cc0000;
                  color: #fdfdfd;
                  font-size: 11px;
                "
                md-raised-button
                (click)="exportExel()"
              >
                {{ "Export To Excel" | translate }}
              </button>
              <!-- <button style="background-color: #cc0000;color: #fdfdfd;  font-size: 11px;   font-weight: 700;" md-raised-button class="col-md-4" *ngIf="showXL == true" (click)="exportPdf()">{{'Export To Pdf'| translate}}</button> -->
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div
    class="row"
    *ngIf="componentIdentifier === 'gps_master'"
    style="margin: 0; padding-top: 10px; background: #f9f6f6"
  >
    <div class="col-12">
      <div class="row">
        <div class="col-5">
          <p>{{ "Search By" | translate }} :</p>
        </div>
        <div class="col-7">
          <div style="display: flex">
            <md-radio-group
              aria-labelledby="example-radio-group-label"
              class="example-radio-group"
              [(ngModel)]="deviceFilterType"
            >
              <md-radio-button
                class="example-radio-button"
                *ngFor="let dtype of deviceRadio1"
                [value]="dtype"
                (change)="deviceRadioButton()"
                style="margin-left: 5px"
              >
                {{ dtype }}
              </md-radio-button>
            </md-radio-group>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col-sm-12 col-md-12 col-lg-12">
          <div class="row" style="margin-top: 10px">
            <div class="col-3">{{ "IMEI" | translate }}</div>
            <div class="col-9">
              <div style="display: flex">
                <select id="dbselectIMEI" multiple="multiple">
                  <option
                    *ngFor="let udid of deviceArr_1"
                    [value]="udid.Device_ID"
                  >
                    {{ udid.Device_ID }}
                  </option>
                </select>
              </div>
            </div>
          </div>
          <div class="row" style="margin-top: 20px; margin-bottom: 20px">
            <div class="col-3">{{ "Vahicle Name" | translate }}</div>
            <div class="col-9">
              <div style="display: flex">
                <select id="dbselectVehicleName" multiple="multiple">
                  <option
                    *ngFor="let uname of deviceArr_1"
                    [value]="uname.Device_ID"
                  >
                    {{ uname.Name ? uname.Name : "--" }}
                  </option>
                </select>
              </div>
            </div>
          </div>
          <div class="row" style="margin: 0; padding-bottom: 20px">
            <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: 20px; 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"
                (ngModelChange)="clicked = false"
              />
            </div>
          </div>
          <div
            class="row"
            style="margin: 0; padding-bottom: 20px; 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"
                (ngModelChange)="clicked = false"
              />
            </div>
          </div>
          <div class="row" style="margin-bottom: 20px">
            <div class="col-12">
              <button
                style="
                  background-color: #1556b9;
                  color: #fdfdfd;
                  font-size: 12px;
                "
                md-raised-button
                (click)="reportFilter('data')"
              >
                {{ "Search" | translate }}
              </button>
              <button
                *ngIf="showXL == true"
                style="
                  background-color: #cc0000;
                  color: #fdfdfd;
                  font-size: 12px;
                "
                md-raised-button
                (click)="exportExel()"
              >
                {{ "Export To Excel" | translate }}
              </button>
            </div>
            <!-- <div class="col-12"> -->
            <!-- <button style="background-color: #1556b9;color:#fdfdfd;" md-raised-button class="col-md-4" (click)="reportFilter('data')">{{'Search' | translate}}</button>
        <button *ngIf="showXL == true" style="background-color: #cc0000;color:#fdfdfd;" md-raised-button class="col-md-4" (click)="exportExel()">{{'Export To Excel' | translate}}</button>
        <button style="background-color: #cc0000;color: #fdfdfd;" md-raised-button class="col-md-4" *ngIf="showXL == true" (click)="exportPdf()">{{'Export To Pdf'| translate}}</button> -->
            <!-- </div> -->
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
