<!-- <button type="button" class="close pull-right" aria-label="Close" (click)="close()"><i class="fas fa-times"></i></button> -->
<!-- <div class="container"> -->
  <md-tab-group class="selected-tab-{{tabGroup.selectedIndex}}" #tabGroup>
    <md-tab>
      <template md-tab-label>User Details</template>
    <div class="row mt-4"  style="margin-top: 19px;">
      <div class="col-12">
        <div style="display: inline-flex;">
          <p style="font-weight: 600;">Name</p>
          <p style="padding-left: 10PX;">{{userDetail.first_name}} {{userDetail.last_name}}</p>
        </div>
      </div>
    
    </div>
    <div class="row">
      <div class="col-12">
        <div style="display: inline-flex;">
          <p style="font-weight: 600;">Phone</p>
          <p style="padding-left: 10PX;">{{userDetail.phone}}</p>
        </div>
      </div>
    
    </div>
    <div class="row">
      <div class="col-12">
        <div style="display: inline-flex;">
          <p style="font-weight: 600;">Email</p>
          <p style="padding-left: 10PX;">{{userDetail.email}}</p>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col-12">
        <div style="display: inline-flex;">
          <p style="font-weight: 600;">Imei</p>
          <p style="padding-left: 10PX;">{{data.deviceData.did}}</p>
        </div>
      </div>
    </div>
    
    </md-tab>
    <md-tab>
      <template md-tab-label>Emergency Contact</template>
    <div class="mt-4" *ngIf="showEmergencyContact" class="row"  style="margin-top: 19px;">
      <div class="col-md-6">
        <h6 class="card-title">Contact 1:</h6>
        <hr>
        <div class="row">
          <div class="col-12">
            <div style="display: inline-flex;">
              <p style="font-weight: 600;">Name :</p>
              <p style="padding-left: 10PX;">{{emergencyContactData.contact1.name}}</p>
            </div>
          </div>
        </div>
    
        <div class="row">
          <div class="col-12">
            <div style="display: inline-flex;">
              <p style="font-weight: 600;">Cell 1:</p>
              <p style="padding-left: 10PX;">{{emergencyContactData.contact1.cell1}}</p>
            </div>
          </div>
        </div>
    
        <div class="row">
          <div class="col-12">
            <div style="display: inline-flex;">
              <p style="font-weight: 600;">Cell 2:</p>
              <p style="padding-left: 10PX;">{{emergencyContactData.contact1.cell2}}</p>
            </div>
          </div>
        </div>
    
        <div class="row">
          <div class="col-12">
            <div style="display: inline-flex;">
              <p style="font-weight: 600;">Phone 1:</p>
              <p style="padding-left: 10PX;">{{emergencyContactData.contact1.phone1}}</p>
            </div>
          </div>
        </div>
    
        <div class="row">
          <div class="col-12">
            <div style="display: inline-flex;">
              <p style="font-weight: 600;">Phone 2:</p>
              <p style="padding-left: 10PX;">{{emergencyContactData.contact1.phone2}}</p>
            </div>
          </div>
        </div>
    
        <!-- -------------contact2 -->
      </div>
      <div class="col-md-6">
        <h6 class="card-title">Contact 1:</h6>
        <hr>
        <div class="row">
          <div class="col-12">
            <div style="display: inline-flex;">
              <p style="font-weight: 600;">Name:</p>
              <p style="padding-left: 10PX;">{{emergencyContactData.contact2.name}}</p>
            </div>
          </div>
        </div>
    
        <div class="row">
          <div class="col-12">
            <div style="display: inline-flex;">
              <p style="font-weight: 600;">Cell 1:</p>
              <p style="padding-left: 10PX;">{{emergencyContactData.contact2.cell1}}</p>
            </div>
          </div>
        </div>
    
        <div class="row">
          <div class="col-12">
            <div style="display: inline-flex;">
              <p style="font-weight: 600;">Cell 2:</p>
              <p style="padding-left: 10PX;">{{emergencyContactData.contact2.cell2}}</p>
            </div>
          </div>
        </div>
    
        <div class="row">
          <div class="col-12">
            <div style="display: inline-flex;">
              <p style="font-weight: 600;">Phone 1:</p>
              <p style="padding-left: 10PX;">{{emergencyContactData.contact2.phone1}}</p>
            </div>
          </div>
        </div>
    
        <div class="row">
          <div class="col-12">
            <div style="display: inline-flex;">
              <p style="font-weight: 600;">Phone 2:</p>
              <p style="padding-left: 10PX;">{{emergencyContactData.contact2.phone2}}</p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div *ngIf="!showEmergencyContact" class="text-center mt-6" style="margin-top: 19px;">
      <h6>No Data Found</h6>
    
    </div>
      

    </md-tab>
    <md-tab>
      <template md-tab-label>Assets</template>
      <div *ngIf="showAssets">
    <div class="row  mt-4" style="margin-top: 19px;">
      <div class="col-12">
        <div style="display: inline-flex;">
          <p style="font-weight: 600;">Vrn:</p>
          <p style="padding-left: 10PX;">{{assetsData.Device_Name?assetsData.Device_Name:""}}</p>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col-12">
        <div style="display: inline-flex;">
          <p style="font-weight: 600;">Engine:</p>
          <p style="padding-left: 10PX;">{{assetsData.engineNo?assetsData.engineNo:""}}</p>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col-12">
        <div style="display: inline-flex;">
          <p style="font-weight: 600;">Chassis:</p>
          <p style="padding-left: 10PX;">{{assetsData.ChassisNo?assetsData.ChassisNo:""}}</p>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col-12">
        <div style="display: inline-flex;">
          <p style="font-weight: 600;">Colour:</p>
          <p style="padding-left: 10PX;">{{assetsData.colour?assetsData.colour:""}}</p>
          <!-- <p style="padding-left: 10PX;">add</p> -->
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col-12">
        <div style="display: inline-flex;">
          <p style="font-weight: 600;">Model:</p>
          <p style="padding-left: 10PX;">{{assetsData.model?assetsData.model:""}}</p>
          <!-- <p style="padding-left: 10PX;">add</p> -->
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col-12">
        <div style="display: inline-flex;">
          <p style="font-weight: 600;">Brand:</p>
          <p style="padding-left: 10PX;">{{assetsData.manufacturingCompany}}</p>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col-12">
        <div style="display: inline-flex;">
          <p style="font-weight: 600;">Tpin:</p>
          <p *ngIf="assetsData.tpin" style="padding-left: 10PX;">{{assetsData.tpin}}</p>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col-12">
        <div style="display: inline-flex;">
          <p style="font-weight: 600;">epin:</p>
          <p *ngIf="assetsData.epin" style="padding-left: 10PX;">{{assetsData.epin}}</p>
        </div>
      </div>
    </div>
    </div>
      

    </md-tab>
    <md-tab>
      <template md-tab-label>Driver Info</template>
      <div *ngIf="showAssets">
      <div class="row  mt-4" style="margin-top: 19px;">
        <div class="col-12">
          <div style="display: inline-flex;">
            <p style="font-weight: 600;">Driver Name:</p>
            <p style="padding-left: 10PX;">{{assetsData.driver_name?assetsData.driver_name:''}}</p>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col-12">
          <div style="display: inline-flex;">
            <p style="font-weight: 600;">Driver Contact Number:</p>
            <p style="padding-left: 10PX;">{{assetsData.contact_number?assetsData.contact_number:''}}</p>
          </div>
        </div>
      </div>
        
        </div>
    </md-tab>
  </md-tab-group>
  <div class="row">
    <div class="col-12">
      <label for="exampleInputEmail1" style="font-weight: 500;">Enter Comment <span style="color: red;">*</span></label>
      <textarea name="commentmsg" [(ngModel)]="commentMsg" class="w-100 form-control" id="commentmsg"></textarea>
      <small id="exampleInputphone12" class="form-text text-muted"
        style="margin-bottom: 5px; color: red !important;">{{templatemessage}}</small>
    </div>
  </div>
  <md-dialog-actions align="end" class="col-sm-12 col-md-12 col-lg-12 mb-3">
        <button md-button md-dialog-close>Cancel</button>
        <button md-button [md-dialog-close]="true" (click)="comment()">Save</button>
      </md-dialog-actions>
    
  <!-- <div class="row"> -->
    <!-- <div class="col-6">
      [ngClass]="{
      'text-success':emp.country === 'India',
      'text-primary':emp.country === 'US',
      'text-danger':emp.country === 'China'
      }"
    'color':employee.country === 'India' ? 'orange' : 'red' 
  [ngClass]="[menu1 ? 'class1' : '', menu2 ? 'class1' : '', (something && (menu1 || menu2)) ? 'class2' : '']"-->
      <!-- <div class="card mt-3 tab-card">
        <div class="card-header tab-card-header" >
          <ul class="nav nav-tabs card-header-tabs" class=" nav nav-tabs card-header-tabs selected-tab-{{tabGroup.selectedIndex}}" #tabGroup id="myTab" role="tablist">
            <li class="nav-item" >
              <a class="nav-link" [ngClass]="[selectedTab===1 ? 'nav-item actives' : 'nav-item']" id="one-tab" data-toggle="tab" href="#one" (click)="selectTab(1)" role="tab" aria-controls="One"
                aria-selected="true">User Details</a>
            </li>
            <li class="nav-item"  >
              <a class="nav-link" [ngClass]="[selectedTab===2 ? 'nav-item actives' : 'nav-item']" id="two-tab" data-toggle="tab" href="#two" role="tab" (click)="selectTab(2)" aria-controls="Two"
                aria-selected="false">Emergency Contact</a>
            </li>
            <li class="nav-item">
              <a class="nav-link"  [ngClass]="[selectedTab===3 ? 'nav-item actives' : 'nav-item']" id="three-tab" data-toggle="tab" href="#three" role="tab" (click)="selectTab(3)" aria-controls="Three"
                aria-selected="false">Assets</a>
            </li>
          </ul>
        </div> -->

        <!-- <div class="tab-content" id="myTabContent">
          <div class="tab-pane fade show active p-3" id="one" role="tabpanel" aria-labelledby="one-tab">
           
            <div style="text-align: center;color:green; font-weight: 500;padding-bottom: 15px;">{{templatemessage1}}</div>
             -->
            
            <!-- <div class="row">
              <div class="col-12">
                <div style="display: inline-flex;">
                  <p style="font-weight: 600;">Name</p>
                  <p style="padding-left: 10PX;">{{userDetail.first_name}} {{userDetail.last_name}}</p>
                </div>
              </div>
            
            </div>
            <div class="row">
              <div class="col-12">
                <div style="display: inline-flex;">
                  <p style="font-weight: 600;">Phone</p>
                  <p style="padding-left: 10PX;">{{userDetail.phone}}</p>
                </div>
              </div>
            
            </div>
            <div class="row">
              <div class="col-12">
                <div style="display: inline-flex;">
                  <p style="font-weight: 600;">Email</p>
                  <p style="padding-left: 10PX;">{{userDetail.email}}</p>
                </div>
              </div>
            </div>
            <div class="row">
              <div class="col-12">
                <div style="display: inline-flex;">
                  <p style="font-weight: 600;">Imei</p>
                  <p style="padding-left: 10PX;">{{data.deviceData.did}}</p>
                </div>
              </div>
            </div>
            -->


          <!-- </div>
          <div  class="tab-pane fade p-3" id="two" role="tabpanel" aria-labelledby="two-tab"> -->
            <!-- <div *ngIf="showEmergencyContact" class="row">
              <div class="col-md-6">
            <h6 class="card-title">Contact 1:</h6>
            <hr>
            <div class="row">
              <div class="col-12">
                <div style="display: inline-flex;">
                  <p style="font-weight: 600;">Name :</p>
                  <p style="padding-left: 10PX;">{{emergencyContactData.contact1.name}}</p>
                </div>
              </div>
            </div>

            <div class="row">
              <div class="col-12">
                <div style="display: inline-flex;">
                  <p style="font-weight: 600;">Cell 1:</p>
                  <p style="padding-left: 10PX;">{{emergencyContactData.contact1.cell1}}</p>
                </div>
              </div>
            </div>

             <div class="row">
              <div class="col-12">
                <div style="display: inline-flex;">
                  <p style="font-weight: 600;">Cell 2:</p>
                  <p style="padding-left: 10PX;">{{emergencyContactData.contact1.cell2}}</p>
                </div>
              </div>
            </div>

            <div class="row">
              <div class="col-12">
                <div style="display: inline-flex;">
                  <p style="font-weight: 600;">Phone 1:</p>
                  <p style="padding-left: 10PX;">{{emergencyContactData.contact1.phone1}}</p>
                </div>
              </div>
            </div>

            <div class="row">
              <div class="col-12">
                <div style="display: inline-flex;">
                  <p style="font-weight: 600;">Phone 2:</p>
                  <p style="padding-left: 10PX;">{{emergencyContactData.contact1.phone2}}</p>
                </div>
              </div>
            </div>

            <!-- -------------contact2 --
            </div>
            <div class="col-md-6">
<h6 class="card-title">Contact 1:</h6>
<hr>
<div class="row">
  <div class="col-12">
    <div style="display: inline-flex;">
      <p style="font-weight: 600;">Name:</p>
      <p style="padding-left: 10PX;">{{emergencyContactData.contact2.name}}</p>
    </div>
  </div>
</div>

<div class="row">
  <div class="col-12">
    <div style="display: inline-flex;">
      <p style="font-weight: 600;">Cell 1:</p>
      <p style="padding-left: 10PX;">{{emergencyContactData.contact2.cell1}}</p>
    </div>
  </div>
</div>

<div class="row">
  <div class="col-12">
    <div style="display: inline-flex;">
      <p style="font-weight: 600;">Cell 2:</p>
      <p style="padding-left: 10PX;">{{emergencyContactData.contact2.cell2}}</p>
    </div>
  </div>
</div>

<div class="row">
  <div class="col-12">
    <div style="display: inline-flex;">
      <p style="font-weight: 600;">Phone 1:</p>
      <p style="padding-left: 10PX;">{{emergencyContactData.contact2.phone1}}</p>
    </div>
  </div>
</div>

<div class="row">
  <div class="col-12">
    <div style="display: inline-flex;">
      <p style="font-weight: 600;">Phone 2:</p>
      <p style="padding-left: 10PX;">{{emergencyContactData.contact2.phone2}}</p>
    </div>
  </div>
</div>
</div>
</div>
<div  *ngIf="!showEmergencyContact" class="text-center">
    <h6>No Data Found</h6>

</div> -->

<!-- </div>

          <div *ngIf="showAssets" class="tab-pane fade p-3" id="three" role="tabpanel" aria-labelledby="three-tab"> -->
            <!-- <div class="row  mt-4">
              <div class="col-12">
                <div style="display: inline-flex;">
                  <p style="font-weight: 600;">Vrn:</p>
                  <p style="padding-left: 10PX;">{{assetsData.Device_Name}}</p>
                </div>
              </div>
            </div>
            <div class="row">
              <div class="col-12">
                <div style="display: inline-flex;">
                  <p style="font-weight: 600;">Engine:</p>
                  <p style="padding-left: 10PX;">{{assetsData.engineNo}}</p>
                </div>
              </div>
            </div>
            <div class="row">
              <div class="col-12">
                <div style="display: inline-flex;">
                  <p style="font-weight: 600;">Chassis:</p>
                  <p style="padding-left: 10PX;">{{assetsData.ChassisNo}}</p>
                </div>
              </div>
            </div>
            <div class="row">
              <div class="col-12">
                <div style="display: inline-flex;">
                  <p style="font-weight: 600;">Colour:</p>
                  <!-- <p style="padding-left: 10PX;">add</p> 
                </div>
              </div>
            </div>
            <div class="row">
              <div class="col-12">
                <div style="display: inline-flex;">
                  <p style="font-weight: 600;">Model:</p>
                  <!-- <p style="padding-left: 10PX;">add</p> 
                </div>
              </div>
            </div>
            <div class="row">
              <div class="col-12">
                <div style="display: inline-flex;">
                  <p style="font-weight: 600;">Brand:</p>
                  <p style="padding-left: 10PX;">{{assetsData.manufacturingCompany}}</p>
                </div>
              </div>
            </div>
            <div class="row">
              <div class="col-12">
                <div style="display: inline-flex;">
                  <p style="font-weight: 600;">Tpin:</p>
                  <p *ngIf="assetsData.tpin" style="padding-left: 10PX;">{{assetsData.tpin}}</p>
                </div>
              </div>
            </div>
            <div class="row">
              <div class="col-12">
                <div style="display: inline-flex;">
                  <p style="font-weight: 600;">epin:</p>
                  <p *ngIf="assetsData.epin" style="padding-left: 10PX;">{{assetsData.epin}}</p>
                </div>
              </div>
            </div> -->
          <!-- </div>

        </div>
      
      <div class="row">
        <div class="col-10">
          <label for="exampleInputEmail1" style="font-weight: 500;margin-left: 18px;">Enter Comment <span style="color: red;">*</span></label>
          <textarea name="commentmsg" style="margin-left: 18px;" [(ngModel)]="commentMsg" class="form-control" id="commentmsg"></textarea>
          <small id="exampleInputphone12" class="form-text text-muted"
            style="margin-bottom: 5px; color: red !important;">{{templatemessage}}</small>
        </div>
      </div> -->
      <!-- <div class="row">
        <div class="col-sm-12 col-md-12 col-lg-12">
          <button md-raised-button
            style="float:right;background: #2C7873; color: white;font-size: 14px;margin-left: 10px;border-radius:0px;"
            (click)="comment()"> Save </button>
        </div>
      </div> -->
      <!-- <md-dialog-actions align="end" class="col-sm-12 col-md-12 col-lg-12 mb-3">
        <button md-button md-dialog-close>Cancel</button>
        <button md-button [md-dialog-close]="true" (click)="comment()">Save</button>
      </md-dialog-actions>
    </div>
  </div>
  </div> -->

<!-- <div class="container"> -->
  <!-- <div style="text-align: center;color:green; font-weight: 500;padding-bottom: 15px;">{{templatemessage1}}</div>

  
  <div class="row" >
   <div class="col-12" > 
     <div style="display: inline-flex;">
      <p style="font-weight: 600;">Name</p>
      <p style="padding-left: 10PX;">{{userDetail.first_name}} {{userDetail.last_name}}</p>
     </div>   
   </div>

  </div>
  <div class="row" >
    <div class="col-12" > 
      <div style="display: inline-flex;">
        <p style="font-weight: 600;">Phone</p>
        <p style="padding-left: 10PX;">{{userDetail.phone}}</p>
      </div>   
    </div>
   
   </div>
  <div class="row">
    <div class="col-12">
      <div  style="display: inline-flex;">
        <p style="font-weight: 600;">Email</p>
        <p style="padding-left: 10PX;">{{userDetail.email}}</p>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-12">
      <div  style="display: inline-flex;">
        <p style="font-weight: 600;">Imei</p>
        <p style="padding-left: 10PX;">{{data.deviceData.did}}</p>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-12">
      <label for="exampleInputEmail1" style="font-weight: 500;">Enter Comment <span style="color: red;">*</span></label>
      <textarea name="commentmsg" [(ngModel)]="commentMsg" class="w-100 form-control" id="commentmsg"></textarea>
      <small id="exampleInputphone12" class="form-text text-muted" style="margin-bottom: 5px; color: red !important;">{{templatemessage}}</small>
    </div>
  </div>
  <div class="row">
    <div class="col-sm-12 col-md-12 col-lg-12">
        <button md-raised-button style="float:right;background: #2C7873; color: white;font-size: 14px;margin-left: 10px;border-radius:0px;" (click)="comment()"> Save </button>
    </div>
  </div> 
</div> -->
