<!-- <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>{{'NOTIFICATIONS' | translate}}</h4>
    </div>
  </div>  

  <div class="rowStyle">

    <ul class="nav nav-tabs" style="margin-top: 17px;" role="tablist">
      <li class="nav-item">
        <a class="nav-link active" data-toggle="tab" href="#tabs-1" role="tab">History</a>
      </li>
      <li class="nav-item">
        <a class="nav-link " data-toggle="tab" href="#tabs-2" role="tab">Live</a>
      </li>
      <li class="nav-item">
        <a class="nav-link " data-toggle="tab" href="#tabs-3" role="tab">My Tasks</a>
      </li>

     
     
    
    </ul><!-- Tab panes -->
    <div class="tab-content" style="margin-top: 13px;height: 90vh;margin: 20px;">
      <div class="tab-pane active" id="tabs-1" role="tabpanel">
        <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">

              <!-- <input type="text" class="form-control" id="myInput" name="myInput" type="text" [(ngModel)]="myInput"
                (input)="filterItem(myInput.value)" placeholder="{{'Device Search' | translate}}" /> -->

              <button *ngIf="tableData=== true" class="btn btn-default" [disabled]="firstcall" (click)="next()" style="margin-right: 1px;width: 89px;float: right;color:white;line-height: 1.6;background: #426E86;height: auto;font-size: 12px;border-radius: 0px;border: none;margin-bottom: 10px;">{{'Next' | translate}} >></button>  
              <button *ngIf="tableData=== true" class="btn btn-default" [disabled]="lastcall" (click)="pre()" style="width: 90px;float: right;color:white;margin-right: 0;line-height: 1.6;background: #426E86;height: auto;font-size: 12px;border-radius: 0px;border: none;margin-bottom: 10px;"><< {{'Previous' | translate}}</button>   
              <md-select *ngIf="tableData=== true" (change)="callDataTable()" style="float: right;margin-top: -12px;" [(ngModel)]="limit">
                <md-option *ngFor="let i of limitArr" [value]="i">{{i}}</md-option>
              </md-select>
              <div *ngIf="Load" class="loading">Loading&#8230;</div>
              <div *ngIf="tableData=== false">
                <p style="line-height: 12;
                text-align: center;
                font-size: 40px;
                font-weight: 600;
                color: #999999;">No data Found</p>
              </div>
              <div *ngIf="tableData=== true" style="width: 100%;">
                <div class="tableFixHead">
                  <div class="container-table100">
                    <div class="wrap-table100">
                      <div class="table100" >
                        <table id="deviceTable" class="table table-striped table-hover">
                          <thead >
                            <tr>
                              <th>Sentence</th>
                              <th>Comment</th>
                              <th>Assigned To</th>
                              <th>Assigned on</th>
                            </tr>
                          </thead>
                          <tbody>
                            <tr *ngFor="let notif of filteredItems" style="margin-top:10px;">
                              <td  style="cursor:pointer">
                                <div>
                                  <div *ngIf="notif.address">{{notif.item.sentence}} at {{notif.address}} on {{notif.timestamp|date:'short'}}</div>
                                  <div *ngIf="!notif.address">{{notif.item.sentence}} on {{notif.timestamp|date:'short'}}</div>
                                  <div *ngIf="notif.overSpeed">by actual speed of {{notif.overSpeed}}</div>
                                </div>
                              </td>
                              <td>
                                <p style="margin-bottom: 0%;">
                                  <span>{{notif.comment?notif.comment:'NA'}}</span>
                                  <!-- <span style="float: right;" *ngIf="notif.assigned_date">  Assigned on : {{notif.assigned_date |date:'medium'}}</span>
                                  <span style="float: right;margin-right: 6px;" *ngIf="notif.assigned_to">Assigned To : {{notif.assigned_to.first_name}} {{notif.assigned_to.last_name}} , </span> -->
                                </p>  
                              </td> 
                              <td>
                                <span style="float: right;margin-right: 6px;" *ngIf="notif.assigned_to">
                                  {{notif.assigned_to.first_name}} {{notif.assigned_to.last_name}}</span>
                              </td>
                              <td>
                                <span style="float: right;" *ngIf="notif.assigned_date"> {{notif.assigned_date |date:'medium'}}</span>
                              </td> 

                              </tr>
                          </tbody>
                        </table>
                      </div>
                    </div>
                  </div>
                </div>                 
              </div>
            </div>
          </div> 
        </div>
        
        </div>
       <!-- -------------------------LIVE NOTIFICATION -------------------------------- -->
        <div class="tab-pane" id="tabs-2" role="tabpanel">
          <md-select [(ngModel)]="devStatus" multiple
           style="position: absolute;top: 17%;left: 87%;margin-top: -25px;"
            placeholder="{{'Select Type' | translate}}" ngDefaultControl [(ngModel)]="devStatus" (ngModelChange)="selectedStatus($event)">
            <md-option *ngFor="let devStatus of statusArray; let i = index" style="padding-left: 20px;" [value]="devStatus.name">
              {{devStatus.name}}
            </md-option>
          </md-select>
          <div class="row" style="margin:0px">
            <div class="col-12">
              <flash-messages style="float: center;margin:0px 1px;height:-6px;"></flash-messages>
            </div>
          </div>
          <div style="height: 90vh;overflow: auto;">
            <div class="row" style="font-size: 12px;margin: 0%;">
              <div class="col-sm-12 col-md-12 col-lg-12" style="padding: 0%;">
                <div class="row"
                  style="margin-top: 5px;margin: 0%;background: #e9ecef;margin: 3px;"
                  *ngFor="let device of final_data;let i = index;">
                 
                  <div class="col-sm-12 col-md-12 col-lg-12 card2" style="padding: 1%;">
                    <div class="row " style="margin: 0%;margin-bottom: 7px;margin-top: 5px;">
                      <div class="col-md-2"> 
                        <img *ngIf="device.type=='overspeed'" style="width: 30px;"  src="/assets/image/speedometer.png">
                        <span *ngIf="device.type=='power'">
                          <img *ngIf="device.last=='disconnected'" style="width: 30px;" src="/assets/image/power-on2.png">
                          <img *ngIf="device.last!='disconnected'" style="width: 30px;" src="/assets/image/power-on (1).png">
                        </span>
                        <span *ngIf="device.type=='Geo-Fence'">
                          <img *ngIf="device.in" style="width: 30px;" src="/assets/image/outside.png">
                          <img *ngIf="!device.in" style="width: 30px;" src="/assets/image/inside.png">
                        </span>
                        <img *ngIf="device.type=='Fuel'" style="width: 30px;" src="/assets/image/fuel.png">
                        <img *ngIf="device.type=='MAXSTOPPAGE'" style="width: 30px;" src="/assets/image/overStopped.png">
                        <img *ngIf="device.type=='MAXIDLING'" style="width: 30px;" src="/assets/image/play.png">
                        <img *ngIf="device.type=='route-poi'" style="width: 30px;" src="/assets/image/pin.png">
                       
                      
                      </div>

                      <div   class="col-sm-4 col-md-4 col-lg-4" style="padding: 0%;padding-left: 3px;">
                      <p style="margin: 1%;font-weight: 700;color: #4897d8;">{{ device.data }} {{ device.address }}</p>
                      </div>
                 
                      <div class="col-sm-3 col-md-3 col-lg-3" style="padding: 0%;padding-left: 3px;">
                        <p style="margin: 1%;">{{ device.date }} {{ device.time }}</p>
                      </div>
                      <div class="col-sm-3 col-md-3 col-lg-3" style="padding: 0%;">
                        <button class="btn btn btn-outline-warning btn-sm" style="border-radius: 40px; font-size: x-small;"
                          (click)="calldevice(device)">Location</button>
                        <button class="btn btn-outline-primary btn-sm" style="border-radius: 40px; font-size: x-small;" (click)="openPopup(device)">Comment</button>
                        <!-- <button class="btn btn-warning btn-sm" style="border-radius: 40px; font-size: x-small;"
                          >Immoblize</button> -->
                          <button class="btn btn btn-outline-secondary btn-sm" style="border-radius: 40px; font-size: x-small;"
                             (click)="select(device,i)" >Assign to Me</button>
                      </div>
                    </div>
                  </div>
                  <!-- <div class="collapse multi-collapse" id="multiCollapseExample2">
                    <div *ngIf="i==index1" class="card card-body">
                  <div class="card-body row">
                    <div class="col-sm-6" style="text-align: right;">
                      <span>{{'Assigned To' | translate}} :</span>
                      <md-input-container style="width: 60%;">
                        <input mdInput placeholder="{{'Select user' | translate}}" [mdAutocomplete]="tdAuto" name="state1"
                          #state="ngModel" [(ngModel)]="dealerData" (ngModelChange)="filtergrpStatess(dealerData)">
                        <md-autocomplete #tdAuto="mdAutocomplete">
                          <md-option *ngFor="let group of dealerSelect" [value]="group.fullName">
                            <span>{{ group.first_name }} {{ group.last_name }}</span>
                          </md-option>
                         
                        </md-autocomplete>
                      </md-input-container>
                    </div>
                    <div class="col-sm-6">
                      <button class="btn btn-primary" style="margin-top: 14px;" data-toggle="collapse" data-target="#collapseZero"
                        aria-expanded="true" aria-controls="collapseZero" (click)="transfer()">Transfer</button>
                    </div>
                  
                  </div>
                    </div>
                  </div> -->
                </div>
              </div>
            </div>
          </div>
          </div>
        
        <div class="tab-pane" id="tabs-3" role="tabpanel">
        
          <div style="height: 90vh;">
            <div class="row" style="font-size: 12px;margin: 0%;">
              <div class="col-sm-12 col-md-12 col-lg-12" style="padding: 0%;">
                <div class="row" style="margin-top: 5px;margin: 0%;background: #e9ecef;margin: 3px;"
                  *ngFor="let device of task;let i = index;">
        
                  <div class="col-sm-12 col-md-12 col-lg-12 card2" style="padding: 1%;">
                    <div class="row " style="margin: 0%;margin-bottom: 7px;margin-top: 5px;">
                      <div class="col-md-2">
                        <img *ngIf="device.type=='overspeed'" style="width: 30px;" src="/assets/image/speedometer.png">
                        <span *ngIf="device.type=='power'">
                          <img *ngIf="device.last=='disconnected'" style="width: 30px;" src="/assets/image/power-on2.png">
                          <img *ngIf="device.last!='disconnected'" style="width: 30px;" src="/assets/image/power-on (1).png">
                        </span>
                        <span *ngIf="device.type=='Geo-Fence'">
                          <img *ngIf="device.in" style="width: 30px;" src="/assets/image/outside.png">
                          <img *ngIf="!device.in" style="width: 30px;" src="/assets/image/inside.png">
                        </span>
                        <img *ngIf="device.type=='Fuel'" style="width: 30px;" src="/assets/image/fuel.png">
                        <img *ngIf="device.type=='MAXSTOPPAGE'" style="width: 30px;" src="/assets/image/overStopped.png">
                        <img *ngIf="device.type=='MAXIDLING'" style="width: 30px;" src="/assets/image/play.png">
                        <img *ngIf="device.type=='route-poi'" style="width: 30px;" src="/assets/image/loginIcon.png">
        
        
                      </div>
        
                      <div class="col-sm-4 col-md-4 col-lg-4" style="padding: 0%;padding-left: 3px;">
                        <p style="margin: 1%;font-weight: 700;color: #4897d8;">{{ device.data }} {{ device.address }}</p>
                      </div>
        
                      <div class="col-sm-3 col-md-3 col-lg-3" style="padding: 0%;padding-left: 3px;">
                        <p style="margin: 1%;">{{ device.date }} {{ device.time }}</p>
                      </div>
                      <div class="col-sm-3 col-md-3 col-lg-3" style="padding: 0%;">
                        <button class="btn btn btn-outline-warning btn-sm" style="border-radius: 40px; font-size: x-small;"
                          (click)="calldevice(device)">Location</button>
                        <button class="btn btn-outline-primary btn-sm" style="border-radius: 40px; font-size: x-small;"
                          (click)="openPopup(device)">Comment</button>
                        <!-- <button class="btn btn-warning btn-sm" style="border-radius: 40px; font-size: x-small;"
                                  >Immoblize</button> -->
                        <!-- <button class="btn btn btn-outline-secondary btn-sm" style="border-radius: 40px; font-size: x-small;"
                          (click)="select(device,i)">Assign to Me</button> -->
                      </div>
                    </div>
                  </div>
                
                </div>
              </div>
            </div>
          </div>
        </div>
        </div>



   
  </div>
</div>
<!-- [5:02 PM, 1/19/2022] Job 1: Immoblize
[5:03 PM, 1/19/2022] Job 1: Assign to Me -->
<table id="headerTable" style="border: 1px solid black;width: 100%;
            border-collapse: collapse;position: absolute;top: -62px;">
  <tr style="height:30px;border-top:1px solid black;">
    <td>
      <span style="font-weight: 700;">Report Interval from</span> {{f_date | date:"medium"}} to {{t_date |
      date:"medium"}}
    </td>
    <!-- <td>
            <span style="font-weight: 700;">To</span>: {{todate | date:"medium"}}
          </td> -->
  </tr>

</table>