<!-- <app-all-menus *ngIf="!token_identifier"></app-all-menus> -->
<button *ngIf="token_identifier"
  style="background-color: #cc0000;color:#fdfdfd;font-size: 12px;float: right;z-index: 111;" md-raised-button>NLET
  ERP</button>
<div class="topWrapper" id="main">
  <div class="mainWrapperWrapper">
    <!-- <div class="row" style="background: #426E86">
      <div class="col-sm-4 col-md-4 col-lg-4" style="color: white;text-align: center; padding-top: 10px;">
      </div>
      <div class="col-sm-4 col-md-4 col-lg-4">
        <p
          style="margin: 0; padding-top: 5px;text-align: center; padding-bottom: 5px; font-size: 20px; font-weight: 500;color: white; ">
          {{headingName | translate}}</p>
      </div>
      <div id="toast">
        <div id="desc">{{data_descip}}</div>
      </div>
    </div> -->
    <div class="col-sm-4 col-md-4 col-lg-4" style="color: white;text-align: center;"> </div>
    <div class="row rowStyle" style="padding-bottom: 39px;">
     
      <div class="col-sm-12 col-md-12 col-lg-12 panel-body panel-resizable" style="padding:0px; overflow: hidden">
        <div *ngIf="Load">
          <div class="loading">Loading&#8230;</div>
        </div>
       
        <div *ngIf="(immobilizeChk === true)"
          style="width: 350px;height: 250px;z-index: 3;position: absolute;background: white;top: 20%;left: 37%;background: white;border-radius: 12px;padding: 15px 20px;box-shadow: rgba(0, 0, 0, 0.16) 4px 2px 10px;">
          <div *ngIf="showErr === false">
            <div style="text-align: center; padding: 20px;color: #426e86;">
              <i style="font-size: 60px; text-align: center;" class="far fa-clock"></i>
              <!-- <img  src={{timerGif}}> -->
            </div>
            <p style="text-align: center;font-size: 16px;font-weight: 600;color: #a2a2a2;">Command Triggered , Please
              wait :</p>
            <div style="text-align: center; padding: 10px;font-size: 16px;font-weight: 600;color: #a2a2a2;">
              <span style="font-size: 40px;">{{immobilizeCount}}</span>
              <span>Sec.</span>
            </div>
          </div>
          <div *ngIf="showErr === true">
            <div style="text-align: center; padding: 20px;">
              <i *ngIf="errIcon=== true" style="font-size: 60px; text-align: center;color: red;"
                class="far fa-times-circle"></i>
              <i *ngIf="locked=== true" style="font-size: 60px; text-align: center;color: red;" class="fas fa-lock"></i>
              <i *ngIf="unlocked === true" style="font-size: 60px; text-align: center;color: green;"
                class="fas fa-lock-open"></i>
            </div>
            <p style="text-align: center;font-size: 25px;font-weight: 600;color: #a2a2a2;">{{ImmErrMsg}}</p>
          </div>
        </div>
        <div *ngIf="showHistory === false" id="map" style="width: 100%; height: 100%;"></div>
        <div *ngIf="showHistory === true" id="map2" style="width: 100%; height: 100%;"></div>
        <div style=" width: 100px; top: 110px; right: -7px; position: absolute; z-index: 1;">
          <input type="range" min="0" max="22" value="5" class="slider" id="myRange"
            style="transform: rotate(-90deg);  height: 7px; box-shadow: 0px 0px 6px 5px lightg">
          <div style="display: grid; width: fit-content; float: right; padding-right: 20px; padding-top: 80px;">
            <a style="float:right;margin: 0;height: 24px;color:white;padding:4px 0px 4px 0px;cursor: pointer;box-shadow: 3px 2px 5px 0px rgb(178, 176, 174);border-bottom: 1px solid;text-align: center;width:38px;"
              [ngStyle]="{'background' : (mapTypeId=='roadmap') ? '#86ac41c7;' : '#989898'}"
              class="pointer animateClass_10" (click)="setMapType('roadmap')">
              <!-- <span id="d"> -->
              <!-- <i class="material-icons" mdTooltip="Selected"  style="float:right;font-size: 11px;color:green;padding-right: 10px;">fiber_manual_record</i> -->
              <i class="material-icons" style="font-size: 16px;padding: 0px 8px 0px 8px;" mdTooltip="Google Street">
                streetview </i>
              <!-- </span> -->
            </a>
            <a style="text-align: center;width:38px;float:right;margin: 0;height: 24px;color:white;padding:4px 0px 4px 0px;cursor: pointer;box-shadow: 3px 2px 5px 0px rgb(178, 176, 174);border-bottom: 1px solid"
              [ngStyle]="{'background' : (mapTypeId=='terrain') ? '#86ac41c7;' : '#989898'}"
              class="pointer animateClass_10" (click)="setMapType('terrain')">
              <!-- <span id="d"> -->
              <!-- <i class="material-icons" mdTooltip="Selected" *ngIf="mapTypeId=='terrain'" style="float:right;font-size: 11px;color:green;padding-right: 10px;">fiber_manual_record</i> -->
              <i class="material-icons" style="font-size: 16px;padding: 0px 8px 0px 8px" mdTooltip="Google Physical">
                terrain </i>
              <!-- </span> -->
            </a>
            <a style="text-align: center;width:38px;float:right;margin: 0;height: 24px;color:white;padding:4px 0px 4px 0px;cursor: pointer;box-shadow: 3px 2px 5px 0px rgb(178, 176, 174);border-bottom: 1px solid"
              [ngStyle]="{'background' : (mapTypeId=='satellite') ? '#86ac41c7;' : '#989898'}"
              class="pointer animateClass_10" (click)="setMapType('satellite')">
              <span id="e">
                <!-- <i class="material-icons" mdTooltip="Selected" *ngIf="mapTypeId=='satellite'" style="float:right;font-size: 11px;color:green;padding-right: 10px;">fiber_manual_record</i> -->
                <i class="material-icons" style="font-size: 16px;padding: 0px 8px 0px 8px;"
                  mdTooltip="Google Satellite"> satellite </i>
              </span>
            </a>
            <a style="text-align: center;width:38px;float:right;cursor: pointer;color:white;margin: 0;height: 28px;padding:4px 0px 8px 0px;box-shadow: 3px 2px 5px 0px rgb(178, 176, 174);border-bottom: 1px solid"
              [ngStyle]="{'background' : (mapTypeId=='hybrid') ? '#86ac41c7;' : '#989898'}"
              class="pointer animateClass_10" (click)="setMapType('hybrid')">
              <span id="f">
                <!-- <i class="material-icons" mdTooltip="Selected" *ngIf="mapTypeId=='hybrid'" style="float:right;font-size: 11px;color:green;padding-right: 10px;">fiber_manual_record</i> -->
                <i class="material-icons" style="font-size: 16px;padding: 0px 8px 0px 8px;" mdTooltip="Google Hybrid">
                  layers </i>
              </span>
            </a>
            <a style="text-align: center;width:38px;float:right;cursor: pointer;color:white;margin: 0;height: 28px;padding:4px 0px 8px 0px;box-shadow: 3px 2px 5px 0px rgb(178, 176, 174);border-bottom: 1px solid"
              [ngStyle]="{'background' : (mapTypeId=='darkmode') ? '#86ac41c7;' : '#989898'}"
              class="pointer animateClass_10" (click)="setMapType('darkmode')">
              <span id="k">
                <!-- <i class="material-icons" mdTooltip="Selected" *ngIf="mapTypeId=='hybrid'" style="float:right;font-size: 11px;color:green;padding-right: 10px;">fiber_manual_record</i> -->
                <i class="material-icons" style="font-size: 16px;padding: 0px 8px 0px 8px;" mdTooltip="Night Mode">
                  nights_stay </i>
              </span>
            </a>
            <a style="text-align: center;width:38px;float:right;margin: 0;height: 24px;color:white;padding:4px 0px 4px 0px;cursor: pointer;box-shadow: 3px 2px 5px 0px rgb(178, 176, 174);border-bottom: 1px solid"
              [ngStyle]="{'background' : (isTraffic==true) ? '#86ac41c7;' : '#989898'}" class="pointer animateClass_10"
              (click)="setMapType('traffic')">
              <span id="g">
                <!-- <i class="material-icons" mdTooltip="Google Hybrid" *ngIf="isTraffic" style="float:right;font-size: 14px;color:green;padding-right: 10px;">done</i> -->
                <i class="material-icons" style="font-size: 16px;padding: 0px 8px 0px 8px;" mdTooltip="Google Traffic">
                  traffic </i>
              </span>
            </a>
          </div>

        
        </div>


      
       
      </div>
    </div>
    <!-- <div class="row" style="padding: 0px;margin: 0px;">
          <div class="col-sm-12 col-md-12 col-lg-12" style="padding: 0;margin: 0;">
            <div class="row">
              <div class="col-sm-6 col-md-6 col-lg-6">
                <div>
                    <i class="fas fa-expand" title="Hide work area" (click)="showHideWorkArea()"></i>
                </div> 
              </div>
              <div class="col-sm-6 col-md-6 col-lg-6">
                <div>
                  <i class="fas fa-book-open"></i>
                </div>
                <div>
                  <p>{{currentTime}}</p>
                </div>    
              </div>
            </div>
          </div>
    </div> -->
  </div>

</div>

<!-- <div *ngIf="false"> -->
<table id="headerTable" style="border: 1px solid black;width: 100%;
    border-collapse: collapse;">
  <tr style="text-align:center">
    <div style="text-align:center">Table</div>
  </tr>
  <tr style="height:30px;border-top:1px solid black">
    <td>
      <span style="font-weight: 700;">Name</span>: {{deviceNameForPDF}}
    </td>
    <td>
      <!-- <image style="width: 50px;height: 50px;" src="image"></image> -->
    </td>
  </tr>
  <tr>
    <td>
      <span style="font-weight: 700;">Start Time</span>: {{startTime}}
    </td>
    <td>
      <span style="font-weight: 700;">End Time</span>: {{endTime}}
    </td>
  </tr>
  <tr style="height:30px;border-top:1px solid black">
    <td>
      <span style="font-weight: 700;"> Start Address</span>: {{startAddress}}
    </td>
    <td>
      <span style="font-weight: 700;">End Address</span>: {{endAddress}}
    </td>
  </tr>
</table>
<div class="w3-sidebar w3-bar-block w3-animate-right"
  style="display:none;right:0;width: 290px;top: 60px;background: transparent;" id="rightMenu">
  <button (click)="closeRightMenu()" class="w3-bar-item w3-button w3-large">Close &times;</button>
  <div class="card m-2" style="border: 1px solid #dadada;
  box-shadow: 4px 4px 8px 0 rgba(0, 0, 0, 0.2);
  transition: 0.2s;
 
  background:
   
   url('../../assets/images/liveTrackIcons/location(background).jpg') top/100% auto no-repeat;
   background-repeat:no-repeat;">
    <!-- <div class="card-header">
     <h4>Location</h4>

   </div> -->
    <div class="card-body" style="font-family: initial;">
      <h6> {{liveAdd}}</h6>
      <span>Latitude:{{socketData?socketData.latDecimal:''}}</span>
      <span>Longitude:{{socketData?socketData.longDecimal:''}}</span>

    </div>

  </div>

  <div class="card m-2" style="border: 1px solid #dadada;box-shadow: 4px 4px 8px 0 rgba(0, 0, 0, 0.2);transition: 0.2s;color: black;
 background: linear-gradient(45deg, #f44336, transparent);">
    <!-- <div class="card-header">
    <h4>Speed</h4>

  </div> -->
    <div class="card-body" style="font-family: initial;">
      <h6><i class="fas fa-tachometer-alt"></i> {{socketData?socketData.speed:''}} km/hr</h6>

    </div>

  </div>
  <div class="card m-2">
    <!-- <div class="card-header">
    <h3>IMEI</h3>

  </div> -->
    <div class="card-body">
      <h5>
        IMEI
      </h5>
      <h6>{{socketData?socketData.imei:''}}</h6>

    </div>

  </div>

  <div class="card m-2">

    <div class="card-body">
      <div class="row">
        <!-- <div class="col-md-6"> -->
        <span style="white-space: nowrap;"> {{'Date' | translate}}: {{socketData?socketData.date:'' |
          date:'medium'}}</span>
        <span> {{'Command' | translate}}: {{socketData?socketData.command?socketData.command:'NA':'NA'}}</span>
        <span>{{'Ignition' | translate}} : {{socketData?socketData.ignition==1?'ON':'OFF':'NA'}}</span>
        <!-- </div> -->
        <!-- <div class="col-md-6"> -->
        <span> {{'Satellites' | translate}}: {{socketData?socketData.satellites:'NA'}}</span>
        <span>{{'GPS Positioned' | translate}} : {{socketData?socketData['GPS positioned']==1?'Fixed':socketData['GPS
          positioned']==0?'Not Fixed':'NA':'NA'}}</span>
        <span>{{'Port' | translate}} : {{socketData?socketData.port:'NA'}}</span>
        <!-- </div> -->

      </div>
    </div>

  </div>
  <!-- <div class="card m-2">
  <div class="card-header">
    <h3>hjdsh</h3>

  </div>
  <div class="card-body">
    <h4>a,sjnaksnasjnl</h4>

  </div>

</div>
<div class="card m-2">
  <div class="card-header">
    <h3>hjdsh</h3>

  </div>
  <div class="card-body">
    <h4>a,sjnaksnasjnl</h4>

  </div>

</div>
<div class="card m-2">
  <div class="card-header">
    <h3>hjdsh</h3>

  </div>
  <div class="card-body">
    <h4>a,sjnaksnasjnl</h4>

  </div>

</div>
<div class="card m-2">
  <div class="card-header">
    <h3>hjdsh</h3>

  </div>
  <div class="card-body">
    <h4>a,sjnaksnasjnl</h4>

  </div>

</div>
<div class="card m-2">
  <div class="card-header">
    <h3>hjdsh</h3>

  </div>
  <div class="card-body">
    <h4>a,sjnaksnasjnl</h4>

  </div>

</div> -->
</div>