<app-all-menus></app-all-menus>
  <div id="wrapper">
    <div id="toast_1">
      <div id="desc">{{data_descip}}</div>
    </div>
    <!-- Sidebar -->
    <ul class="navbar-nav bg-gradient-primary sidebar sidebar-dark accordion nav nav-tabs"  id="accordionSidebar">

      <!-- Sidebar - Brand -->
      <a class="sidebar-brand d-flex align-items-center justify-content-center" >
      
        <div class="sidebar-brand-text mx-3" style="font-size: 14px;">{{'Account Setting' | translate}}</div>
      </a>

      <!-- Divider -->
      <hr class="sidebar-divider my-0">

      <!-- Nav Item - Dashboard -->
      <li  class="nav-item active">
        <a style="color:#add8e6;font-weight: 700;" class="nav-link" data-toggle="tab"  href="#generalSetting">
          <i style="color:#add8e6" class="fas fa-cogs"></i>
          <span>{{'General Setting' | translate}}</span></a>
      </li>
   
      <hr class="sidebar-divider">

      <li  class="nav-item">
        <a style="color:#add8e6;font-weight: 700;" class="nav-link" data-toggle="tab"  href="#tripGeneration">
          <i style="color:#add8e6" class="fas fa-fw fa-chart-area"></i>
          <span>Trip Generation</span></a>
      </li>
      <hr class="sidebar-divider">

      <!-- Nav Item - Tables -->
      <li style="color:#add8e6" class="nav-item">
        <a style="color:#add8e6;font-weight: 700;" class="nav-link" data-toggle="tab" href="#langSetting">
          <i style="color:#add8e6" class="fas fa-language"></i>
          <span>{{'Language Setting' | translate}}</span></a>
      </li>
      <li style="color:#add8e6" class="nav-item">
        <a style="color:#add8e6;font-weight: 700;" class="nav-link" data-toggle="tab" href="#currSetting">
          <i style="color:#add8e6" class="fas fa-language"></i>
          <span>{{'Currency Setting' | translate}}</span></a>
      </li>
      

      <!-- Divider -->
      <hr class="sidebar-divider d-none d-md-block">

      <li style="color:#add8e6" class="nav-item">
        <a style="color:#add8e6;font-weight: 700;" class="nav-link" data-toggle="tab" href="#apiSetting">
          <i style="color:#add8e6" class="fas fa-language"></i>
          <span>API Setting</span></a>
      </li>

      <!-- Divider -->
      <hr class="sidebar-divider d-none d-md-block">

            <!-- Nav Item - Tables -->
            <li style="color:#add8e6" class="nav-item">
              <a style="color:#add8e6;font-weight: 700;" class="nav-link" data-toggle="tab" href="#notifSetting">
                <i style="color:#add8e6" class="fas fa-bell"></i>
                <span>{{'Notification Settings' | translate}}</span></a>
            </li>
         
            <hr class="sidebar-divider">

            <li style="color:#add8e6" class="nav-item">
              <a style="color:#add8e6;font-weight: 700;" class="nav-link" data-toggle="tab" href="#transections">
                <i style="color:#add8e6" class="fas fa-money-check"></i>
                <span>Transection Detail</span></a>
            </li>

            <hr class="sidebar-divider">
            <li *ngIf="showAnnouncementMenu" style="color:#add8e6" class="nav-item">
              <a style="color:#add8e6;font-weight: 700;" class="nav-link" data-toggle="tab" href="#announcement">
                <i style="color:#add8e6" class="fa fa-bullhorn" aria-hidden="true"></i>
                <!-- <i  class="fas fa-money-check"></i> -->
                <span>Announcement</span></a>
            </li>
            
            <hr  *ngIf="showAnnouncementMenu" class="sidebar-divider">
            <!-- <hr class="sidebar-divider"> -->
            <li  style="color:#add8e6" class="nav-item">
              <a style="color:#add8e6;font-weight: 700;" class="nav-link" data-toggle="tab" href="#services">
                <i style="color:#add8e6" class="fas fa-headset" aria-hidden="true"></i>
                <span>Support And Services</span></a>
            </li>
            
            <hr  class="sidebar-divider">
            <li *ngIf="showAnnouncementMenu" style="color:#add8e6" class="nav-item">
              <a style="color:#add8e6;font-weight: 700;" class="nav-link" data-toggle="tab" href="#rechargePlans">
                <i style="color:#add8e6" class="fas fa-money-bill"></i>
                <span>Recharge Plans</span></a>
            </li>
    </ul>
    <!-- End of Sidebar -->

    <!-- Content Wrapper -->
    <div id="content-wrapper" class="d-flex flex-column">

      <!-- Main Content -->
      <div id="content">

        <!-- Topbar -->
   
        <!-- End of Topbar -->

        <!-- Begin Page Content -->
        <div class="container-fluid">

          <!-- Page Heading -->
        

          <!-- Content Row -->
    

          <!-- Content Row -->
       
          <div class="tab-content">
      

            <div class="row tab-pane fade show active" style="margin-top: 25px;" id="generalSetting" > 

              <!-- Area Chart -->
              <div class="col-xl-12 col-lg-12">
                <div class="card shadow mb-4">
                  <!-- Card Header - Dropdown -->
                  <div class="card-header py-3 d-flex flex-row align-items-center justify-content-between">
                    <h6 class="m-0 font-weight-bold text-primary">{{'General Setting' | translate}}</h6>
                 
                    <!-- <div class="dropdown no-arrow">
                      <a class="dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                        <i class="fas fa-ellipsis-v fa-sm fa-fw text-gray-400"></i>
                      </a>
                      <div class="dropdown-menu dropdown-menu-right shadow animated--fade-in" aria-labelledby="dropdownMenuLink">
                        <div class="dropdown-header">Dropdown Header:</div>
                        <a class="dropdown-item" href="#">Action</a>
                        <a class="dropdown-item" href="#">Another action</a>
                        <div class="dropdown-divider"></div>
                        <a class="dropdown-item" href="#">Something else here</a>
                      </div>
                    </div> -->
                  </div>
                  <!-- Card Body -->
                  <div class="card-body" style="height: 540px;">
                    <div class="chart-area">
                     <div class="row">
                       <div class="col-lg-4 col-xl-4 col-sm-12 col-md-6">
                        <label for="exampleInputEmail1" style="font-weight: 500;">{{'First Name' | translate}}</label>
                          <input type="text" class="form-control" id="exampleInputphone1" [(ngModel)]="fs" name="fs" aria-describedby="phoneHelp" placeholder="Please Enter Frist name" required>                  
                       </div>
                       <div class="col-lg-4 col-xl-4 col-sm-12 col-md-6">
                        <label for="exampleInputEmail1" style="font-weight: 500;">{{'Last Names' | translate}}</label>
                        <input type="text" class="form-control" id="nameL"  [(ngModel)]="ls" name="ls"  aria-describedby="lastName" required>
                       </div>
                       <div class="col-lg-4 col-xl-4 col-sm-12 col-md-6">
                        <label for="exampleInputEmail1" style="font-weight: 500;">{{'Email Id' | translate}}</label>
                        <input [disabled]="true" type="text" class="form-control" id="nameE" [(ngModel)]="emailid" name="email" aria-describedby="phoneHelp" >
                         <small *ngIf="verify_email()" id="exampleInputphone1" class="form-text text-muted" [style.color] = "final_counter1 > 0 ? '#e91313' : '#ffffff'" style="margin-bottom: 5px; font-weight: 500;font-size: 14px;text-align: right;">{{text}}</small>
                       </div>
                     </div>
  
                     <div class="row">
                      <div class="col-lg-4 col-xl-4 col-sm-12 col-md-6">
                       <label for="exampleInputEmail1" style="font-weight: 500;">{{'Mobile Number' | translate}}</label>
                       <input [disabled]="true" type="number" [(ngModel)]="mobile" name="mobile"  class="form-control" id="phonenum"  aria-describedby="phoneHelp" placeholder="902119XXXX">
                       <small id="phoneInput"  *ngIf="verify_phone()"  class="form-text text-muted" [style.color] = "final_counter1 > 0 ? '#e91313' : '#ffffff'" style="margin-bottom: 5px;font-weight: 500;font-size: 14px;text-align: right;">{{text2}}</small>
                      </div>
                      <div class="col-lg-4 col-xl-4 col-sm-12 col-md-6">
                       <label for="exampleInputEmail1" style="font-weight: 500;">{{'Organisation' | translate}}</label>
                       <input type="text" class="form-control" [(ngModel)]="or" name="or" id="nameL"  aria-describedby="organisation" >
                      </div>
                      <div class="col-lg-4 col-xl-4 col-sm-12 col-md-6" >
                       <label for="exampleInputEmail1" style="font-weight: 500;">{{'Fuel Unit' | translate}}</label>
                       <!-- <input type="text" class="form-control" id="fuelUnit"  aria-describedby="phoneHelp" > -->
                       <!-- <ng-select [ngClass]="'ng-select'" style="width:99%" placeholder="Fuel Unit" [options]="fuelunitArr" [(ngModel)]="fuelunit" name="fuelUnit"  ngDefaultControl > </ng-select>  -->
                       <md-select [(ngModel)]="fuelunit"  style="width :99%;padding-top: 5px;">
                        <md-option *ngFor="let fuel of fuelunitArr" [value]="fuel">
                          {{fuel}}
                        </md-option>
                      </md-select>
                        <!-- <small id="exampleInputphone1" class="form-text text-muted" style="margin-bottom: 5px; color: red !important;">Verified</small> -->
                      </div>
                    </div>
                    <div class="row">
                      <div class="col-lg-4 col-xl-4 col-sm-12 col-md-6">
                        <label for="timezoneT" style="font-weight: 500;">Timezone</label>
                        <div style="display: flex;width: inherit;background: #eaecf4;border-radius: 5px;padding: 4px 0 4px 0px; border: 1px solid #d1d3e2;">
                          <select id="dbselect" multiple="multiple" >
                            <option *ngFor="let zone of timezoneArray" [value]="zone.value" [selected] = "zone.value === timezone">{{ zone.viewValue }}</option>
                          </select>
                        </div>            
                      </div>
                      <div class="col-lg-4 col-xl-4 col-sm-12 col-md-6">
                        <label for="timezoneT" style="font-weight: 500;">Upload Image</label>
                        <div style="display: flex;">
                          <input type="file" style="background: #eaecf4;" class="form-control" aria-describedby="proImage" (change)="onFileChanged($event)">
                          <i class="fas fa-upload" (click)="onUpload()" style="cursor: pointer;font-size: 25px;margin: 5px 0 0 10px;color: #919191;" title="Upload file"></i>
                        </div>
                      
                      </div>
                      <div class="col-lg-4 col-xl-4 col-sm-12 col-md-6" style="margin-top: 35px;">
                        <div class="row">
                          <div class="col-6">
                            <div>
                              <label for="dealer" style="font-weight: 500;">{{'Dealer' | translate}}</label>
                              <label style="text-align: center;float:right;;width: 25px;background:#eaecf4;" [style.color] = "final_counter > 0 ? '#e91313' : '#ffffff'" md-tooltip={{text3}} *ngIf="deal();">{{symbol3}}</label>
                            </div>
                          </div>
                          <div class="col-6">
                            <div>
                              <label for="noti" style="font-weight: 500;">{{'Notification Sound' | translate}}</label>
                              <md-checkbox style="float: right;" [(ngModel)]="GET_notif" name="GET_notif"></md-checkbox>                  
                            </div>
                          </div>
                        </div>      
                      </div>
                    </div>
                    <div class="row">
                    <div class="col-lg-4 col-xl-4 col-sm-12 col-md-6" style="margin-top: 35px;">
                      <label  for="exampleInputEmail1" style="font-weight: 500;">{{'Working Hours' | translate}}</label>
                      <md-select [(ngModel)]="workingHours" style="width :99%;padding-top: 5px;">
                        <md-option *ngFor="let hours of workingHoursArray" [value]="hours.id">
                          {{hours.name}}
                        </md-option>
                      </md-select>
                      <!-- <small id="exampleInputphone1" class="form-text text-muted" style="margin-bottom: 5px; color: red !important;">Verified</small> -->
                    </div>
                    <div *ngIf="!showAnnouncementMenu" class="col-lg-2" style="margin-top: 35px;">
                      <div style="margin-top: 35px;">
                        <label for="GET_announcememt" style="font-weight: 500;">{{'Announcement' | translate}}</label>
                        <md-checkbox style="float: right;" [(ngModel)]="GET_announcememt" name="GET_announcememt"></md-checkbox>
                      </div>
                    </div>

                    <div *ngIf="showAnnouncementMenu" class="col-lg-4 col-xl-4 col-sm-12 col-md-6" style="margin-top: 35px;">
                      <div style="margin-top: 35px;">
                        <label for="GET_announcememt" style="font-weight: 500;">{{'Renewal Charges' | translate}}</label>
                        <input type="number" class="form-control" [(ngModel)]="renewalCharges" name="renewalCharges">
                      </div>
                    </div>
                    <div  class="col-lg-2" style="margin-top: 35px;">
                      <div style="margin-top: 35px;">
                        <label for="labelSetting" style="font-weight: 500;">{{'Show Label' | translate}}</label>
                        <md-checkbox style="float: right;" [(ngModel)]="labelSetting" name="labelSetting"></md-checkbox>
                      </div>
                    </div>

                    <div class="col-lg-2" style="margin-top: 35px;">
                      <div style="margin-top: 35px;">
                        <label for="driverManagement" style="font-weight: 500;">{{'Driver Management' | translate}}</label>
                        <md-checkbox style="float: right;" [(ngModel)]="driverManagement" name="driverManagement"></md-checkbox>
                      </div>
                    </div>

                    <div *ngIf="showAnnouncementMenu" class="col-lg-4 col-xl-4 col-sm-12 col-md-6" >
                      <div style="margin-top: 35px;">
                      <label for="paymentGateway" style="font-weight: 500;">{{'Payment Gateway' | translate}}</label>
                      <md-checkbox style="float: right;" [(ngModel)]="paymentGateway" name="paymentGateway"></md-checkbox>
                      </div>
                    </div>

                    <!-- <div *ngIf="showAnnouncementMenu" style="margin-top: 35px;">
                      <div style="margin-top: 35px;">
                        <label for="relay_timer" style="font-weight: 500;">{{'Relay Timer' | translate}}</label>
                        <md-checkbox style="float: right;" [(ngModel)]="relay_timer" name="relay_timer"></md-checkbox>
                      </div>
                    </div> -->



                    </div>
                    <div class="row" style="margin-top: 32px;">
                      <div class="col-lg-12 col-xl-12 col-sm-12 col-md-12" style="text-align: center;">
                        <button style="background-color: #1556b9;color:#fdfdfd;font-size: 12px;height: 40px;" md-raised-button  (click)="editAccount()">{{'Edit Account' | translate}}</button>
                      </div>
                    </div>
                    </div>
                  </div>
                </div>
              </div>
  
     
            </div>
  
            <div class="row tab-pane fade" style="margin-top: 25px;" id="tripGeneration"> 
  
              <!-- Area Chart -->
              <div class="col-xl-12 col-lg-12">
                <div class="card shadow mb-4">
                  <!-- Card Header - Dropdown -->
                  <div class="card-header py-3 d-flex flex-row align-items-center justify-content-between">
                    <h6 class="m-0 font-weight-bold text-primary">{{'Trip Setting' | translate}}</h6>
                  </div>
                  <!-- Card Body -->
                  <div class="card-body" style="height: 420px;">
                    <div class="chart-area">
                      <div class="row" style="margin-bottom: 20px;">
                        <div class="col-lg-4 col-xl-4 col-sm-12 col-md-6" >
                          <label for="exampleInputEmail1" style="font-weight: 500;">{{'Trip Generation' | translate}}</label>
                          <!-- <input type="text" class="form-control" id="fuelUnit"  aria-describedby="phoneHelp" > -->
                          <!-- <ng-select [ngClass]="'ng-select'" style="width:99%" placeholder="Fuel Unit" [options]="fuelunitArr" [(ngModel)]="fuelunit" name="fuelUnit"  ngDefaultControl > </ng-select>  -->
                          <md-select style="width: 99%;padding-top: 20px;" [(ngModel)]="tripGenerationVal" placeholder="--{{'Generation Type' | translate}}--"  ngDefaultControl (change)="tripGenerationFunc($event)">
                            <md-option *ngFor="let trip of tripGenerationArr" [value]="trip.value">
                              {{trip.view}}
                            </md-option>
                          </md-select>
                           <!-- <small id="exampleInputphone1" class="form-text text-muted" style="margin-bottom: 5px; color: red !important;">Verified</small> -->
                         </div>
                        <!-- <div class="col-sm-3 col-md-3">
                          <p style= "text-align: left; padding-left: 30px; margin-bottom: 0; font-size: 20px; font-weight: 500; padding-top: 12px;">{{'Trip Generation' | translate}}</p>
                        </div>  
                        <div class="col-sm-9 col-md-9" >
                            <md-select style="width: 20%;" [(ngModel)]="tripGenerationVal" placeholder="--{{'Generation Type' | translate}}--"  ngDefaultControl (change)="tripGenerationFunc($event)">
                                <md-option *ngFor="let trip of tripGenerationArr" [value]="trip.value">
                                  {{trip.view}}
                                </md-option>
                              </md-select>
                        </div> -->
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
  
            <div class="row tab-pane fade" style="margin-top: 25px;" id="langSetting"> 
  
              <!-- Area Chart -->
              <div class="col-xl-12 col-lg-12">
                <div class="card shadow mb-4">
                  <!-- Card Header - Dropdown -->
                  <div class="card-header py-3 d-flex flex-row align-items-center justify-content-between">
                    <h6 class="m-0 font-weight-bold text-primary">{{'Language Setting' | translate}}</h6>
                  </div>
                  <!-- Card Body -->
                  <div class="card-body" style="height: 420px;">
                    <div class="chart-area">
                      <div class="row">
                        <div class="col-lg-4 col-xl-4 col-sm-12 col-md-6" >
                          <label for="exampleInputEmail1" style="font-weight: 500;">{{'Application language' | translate}}</label>
                          <!-- <input type="text" class="form-control" id="fuelUnit"  aria-describedby="phoneHelp" > -->
                          <!-- <ng-select [ngClass]="'ng-select'" style="width:99%" placeholder="Fuel Unit" [options]="fuelunitArr" [(ngModel)]="fuelunit" name="fuelUnit"  ngDefaultControl > </ng-select>  -->
                          <md-select style="width: 99%;padding-top: 20px;" [(ngModel)]="selectedlanguage" placeholder="--{{'Language' | translate}}--"  ngDefaultControl (change)="changelanguage()">
                            <md-option *ngFor="let language of available_languages" [value]="language.id">
                              {{language.view}}
                            </md-option>
                          </md-select>
                           <!-- <small id="exampleInputphone1" class="form-text text-muted" style="margin-bottom: 5px; color: red !important;">Verified</small> -->
                         </div>
                        <!-- <div class="col-sm-3 col-md-3">
                          <p style= "text-align: left; padding-left: 30px; margin-bottom: 0; font-size: 20px; font-weight: 500; padding-top: 12px;">{{'Application language' | translate}}</p>
                        </div>
                        <div class="col-sm-9 col-md-9">
                            <md-select style="width: 20%;" [(ngModel)]="selectedlanguage" placeholder="--{{'Language' | translate}}--"  ngDefaultControl (change)="changelanguage()">
                                <md-option *ngFor="let language of available_languages" [value]="language.id">
                                  {{language.view}}
                                </md-option>
                              </md-select>
                        </div> -->
                      </div>
  
                    </div>
                  </div>
                </div>
              </div>
            </div>
            
            <div class="row tab-pane fade" style="margin-top: 25px;" id="currSetting"> 
  
            
              <div class="col-xl-12 col-lg-12">
                <div class="card shadow mb-4">
             
                  <div class="card-header py-3 d-flex flex-row align-items-center justify-content-between">
                    <h6 class="m-0 font-weight-bold text-primary">{{'Currency Setting' | translate}}</h6>
                  </div>
                
                  <div class="card-body" style="height: 420px;">
                    <div class="chart-area">
                      <div class="row">
                        <div class="col-lg-4 col-xl-4 col-sm-12 col-md-6" >
                          <label for="exampleInputEmail1" style="font-weight: 500;">{{'Currency' | translate}}</label>
                          <md-input-container style="display: inline;" class="example-full-width width"> 
                            <input mdInput  [mdAutocomplete]="tdAutoedit" name="state" #state="ngModel" [(ngModel)]="optiondefault" (ngModelChange)="filterStates(optiondefault)">
                           <md-autocomplete #tdAutoedit="mdAutocomplete">
                              <md-option *ngFor="let option of dataSelect" [value]="option.country">
                                <span>{{ option.country }}</span>
                              </md-option>
                            </md-autocomplete>   
                          </md-input-container>
                         </div>
                         <div class="col-lg-4 col-xl-4 col-sm-12 col-md-6" >
                          <button  class="btn btn-default"  style="position: absolute;bottom: 17px;width: 100px;;color:white;margin-right: 10px;height: 34px;background: #035096;" (click)="currencySet()">Save</button>     
                         </div>        
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          
            <div class="row tab-pane fade" style="margin-top: 25px;" id="apiSetting"> 
  
              <!-- Area Chart -->
              <div class="col-xl-12 col-lg-12">
                <div class="card shadow mb-4">
                  <!-- Card Header - Dropdown -->
                  <div class="card-header py-3 d-flex flex-row align-items-center justify-content-between">
                    <h6 class="m-0 font-weight-bold text-primary">{{'API Setting' | translate}}</h6>
                  </div>
                  <!-- Card Body -->
                  <div class="card-body" style="height: 420px;">
                    <div class="chart-area">
                      <div class="row">
                        <div class="col-lg-6 col-xl-6 col-sm-12 col-md-6" >
                          <label for="exampleInputEmail1" style="font-weight: 500;">{{'API Key' | translate}}</label>
                          <div style="display: flex;">
                            <input [disabled]="btnTag" type="text" class="form-control" id="api" [(ngModel)]="api_key" name="apikey" aria-describedby="phoneHelp" >
                            <button  class="btn btn-default"  style="margin-left: 25px;color:white;margin-right: 10px;height: 34px;background: #035096;" (click)="saveApi()">{{btnKey}}</button>     
                          </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
     
          </div>
          <div class="row tab-pane fade" style="margin-top: 25px;" id="notifSetting"> 
  
            <!-- Area Chart -->
            <div class="col-xl-12 col-lg-12">
              <div class="card shadow mb-4">
                <!-- Card Header - Dropdown -->
                <div class="card-header py-3 d-flex flex-row align-items-center justify-content-between">
                  <h6 class="m-0 font-weight-bold text-primary">{{'Notification Settings' | translate}}</h6>
                  <div style="position: absolute;right: 0%;"> <flash-messages class='fmsg' ></flash-messages></div>
                 
                </div>
                <!-- Card Body -->
                <div class="card-body" style="height: 80vh;overflow: auto;">
                  <div class="chart-area">
                    <div class="row" style="margin: 0;">
                      <div class="col-sm-12">
                        <app-card [title]="'Notification'" [showFilterButton]=false>
                          <div class="row">
                            <div class="col-sm-1">  
                            </div>
                            <div class="col-sm" style="padding-top:4px">
                            </div>
                            <div class="col-sm-1 text-center" >
                              <!-- <strong >{{'Email' | translate}}</strong> -->
                              <i class="fas fa-envelope" title="{{'Email' | translate}}"></i>
                            </div>
                            <div class="col-sm-1 text-center" >
                              <!-- <strong >{{'SMS' | translate}}</strong> -->
                              <i class="fas fa-comments" title="{{'SMS' | translate}}"></i>
                            </div>
                            <div class="col-sm-1 text-center" >
                              <!-- <strong >{{'Notif' | translate}}</strong> -->
                              <i class="far fa-bell" title="{{'Notification' | translate}}"></i>
                            </div>
                            <div class="col-sm-4 text-center" >
                              <strong style="padding-right: 125px;">{{'Priority' | translate}}</strong>
                            </div>
                            <div class="col-sm-1 ">
                            </div>
                          </div>
                          <hr>
                          <div class="row">
                            <div class="col-sm-1">
                              <img class="img-30" src="assets/image/ignition.png" />
                            </div>
                            <div class="col-sm" style="padding-top:4px">
                              <strong>{{'Ignition Notification' | translate}}</strong>
                            </div>
                            <div style="text-align: center;" class="col-sm-1">
                              <md-slide-toggle class="js-single" color="#1abc9c" switchColor="#fff" size="small" [(ngModel)]="data.ign.email_status" (change)=" tab('ign','email_status')"></md-slide-toggle>
                            </div>
                            <div style="text-align: center;" class="col-sm-1">
                              <md-slide-toggle class="js-single" color="#1abc9c" switchColor="#fff" size="small" [(ngModel)]="data.ign.sms_status" (change)=" tab('ign','sms_status')"></md-slide-toggle>
                            </div>
                            <div style="text-align: center;" class="col-sm-1">
                              <md-slide-toggle class="js-single" color="#1abc9c" switchColor="#fff" size="small" [(ngModel)]="data.ign.notif_status" (change)=" tab('ign','notif_status')"></md-slide-toggle>
                            </div>
                            <div class="col-sm-4">
                              <a class="badge" (click)=" tab1('ign','priority',3)" [ngClass]="{'badge-secondary':data.ign.priority!=3,'badge-success':data.ign.priority==3,'disabled':!data.ign.notif_status}"
                                style="margin-left: 20px;color: white;width: 70px;height: 17px;cursor:pointer">{{'High' | translate}}</a>
                              <a class="badge" (click)=" tab1('ign','priority',2)" [ngClass]="{'badge-secondary':data.ign.priority!=2,'badge-success':data.ign.priority==2,'disabled':!data.ign.notif_status}"
                                style="margin-left: 10px;cursor:pointer;color: white;width: 70px;height: 17px;">{{'Medium' | translate}}</a>
                              <a class="badge" (click)=" tab1('ign','priority',1)" [ngClass]="{'badge-secondary':data.ign.priority!=1,'badge-success':data.ign.priority==1,'disabled':!data.ign.notif_status}"
                                style="margin-left: 10px;cursor:pointer;color: white;width: 70px;height: 17px;">{{'Low' | translate}}</a>
                            </div>
                            <div class="col-sm-1">
                              <div class="row">
                                  <button title="Add Email" style="border:1px solid transparent; background-color: transparent;margin-top:8px;cursor:pointer" (click)='onClickAddEmail("ign")'>   <md-icon style="float: right;width:30px;height:30px;cursor:pointer">add</md-icon></button>
                                  <button title="Add Phone" style="border:1px solid transparent; background-color: transparent;margin-top:8px;cursor:pointer" (click)='onClickAddPhone("ign")'>   <md-icon style="float: right;width:30px;height:30px;cursor:pointer">add</md-icon></button>
                                <!-- <button (click)='onClickAddEmail("ign")' title="Add Email" class="btn btn-primary btn-outline-primary btn-icon" style="width:25px;height:25px;margin-right:4px"><i
                                    class=" fa fa-plus " ></i></button> -->
                                <!-- <button (click)='onClickAddPhone("ign")' title="Add Phone" class="btn btn-primary btn-outline-primary btn-icon" style="width:25px;height:25px"><i
                                    class=" fa fa-plus "></i></button> -->
                              </div>
                            </div>
                          </div>
                          <hr>
                          <div class="row">
                            <div class="col-sm-1">
                              <img class="img-30" src="assets/image/ico_direccion.png" />
                            </div>
                            <div class="col-sm" style="padding-top:4px">
                              <strong>{{'POI Notification' | translate}}</strong>
                            </div>
                            <div style="text-align: center;" class="col-sm-1">
                              <md-slide-toggle class="js-single" color="#1abc9c" switchColor="#fff" size="small" [(ngModel)]="data.poi.email_status" (change)=" tab('poi','email_status')"></md-slide-toggle>
                            </div>
                            <div style="text-align: center;" class="col-sm-1">
                              <md-slide-toggle class="js-single" color="#1abc9c" switchColor="#fff" size="small" [(ngModel)]="data.poi.sms_status" (change)=" tab('poi','sms_status')"></md-slide-toggle>
                            </div>
                            <div style="text-align: center;" class="col-sm-1">
                              <md-slide-toggle class="js-single" color="#1abc9c" switchColor="#fff" size="small" [(ngModel)]="data.poi.notif_status" (change)=" tab('poi','notif_status')"></md-slide-toggle>
                            </div>
                            <div class="col-sm-4">
                              <a class="badge" (click)=" tab1('poi','priority',3)" [ngClass]="{'badge-secondary':data.poi.priority!=3,'badge-success':data.poi.priority==3,'disabled':!data.poi.notif_status}"
                                style="margin-left: 20px;color: white;width: 70px;height: 17px;cursor:pointer">{{'High' | translate}}</a>
                              <a class="badge" (click)=" tab1('poi','priority',2)" [ngClass]="{'badge-secondary':data.poi.priority!=2,'badge-success':data.poi.priority==2,'disabled':!data.poi.notif_status}"
                                style="margin-left: 10px;cursor:pointer;color: white;width: 70px;height: 17px;">{{'Medium' | translate}}</a>
                              <a class="badge" (click)=" tab1('poi','priority',1)" [ngClass]="{'badge-secondary':data.poi.priority!=1,'badge-success':data.poi.priority==1,'disabled':!data.poi.notif_status}"
                                style="margin-left: 10px;cursor:pointer;color: white;width: 70px;height: 17px;">{{'Low' | translate}}</a>
                            </div>
                            <div class="col-sm-1">
                                <div class="row">
                                    <button title="Add Email" style="border:1px solid transparent; background-color: transparent;margin-top:8px;cursor:pointer" (click)='onClickAddEmail("poi")'>   <md-icon style="float: right;width:30px;height:30px;cursor:pointer">add</md-icon></button>
                                    <button title="Add Phone" style="border:1px solid transparent; background-color: transparent;margin-top:8px;cursor:pointer" (click)='onClickAddPhone("poi")'>   <md-icon style="float: right;width:30px;height:30px;cursor:pointer">add</md-icon></button>
            
                                  <!-- <button (click)='onClickAddEmail("poi")' title="Add Email" class="btn btn-primary btn-outline-primary btn-icon" style="width:25px;height:25px;margin-right:4px"><i
                                      class=" fa fa-plus " style="display:block;padding-left: 2px;padding-top: 1px;" aria-hidden="true"></i></button>
                                  <button (click)='onClickAddPhone("poi")' title="Add Phone" class="btn btn-primary btn-outline-primary btn-icon" style="width:25px;height:25px"><i
                                      class=" fa fa-plus " style="display:block;padding-left: 2px;padding-top: 1px;" aria-hidden="true"></i></button> -->
                                </div>
                              </div>
                          </div>
                          <hr>
                          <div class="row">
                            <div class="col-sm-1">
                              <img class="img-30" src="assets/image/power_on.png" />
                            </div>
                            <div class="col-sm" style="padding-top:4px">
                              <strong>{{'Power Notification' | translate}}</strong>
                            </div>
                            <div style="text-align: center;" class="col-sm-1">
                              <md-slide-toggle class="js-single" color="#1abc9c" switchColor="#fff" size="small" [(ngModel)]="data.power.email_status" (change)=" tab('power','email_status')"></md-slide-toggle>
                            </div>
                            <div style="text-align: center;" class="col-sm-1">
                              <md-slide-toggle class="js-single" color="#1abc9c" switchColor="#fff" size="small" [(ngModel)]="data.power.sms_status" (change)=" tab('power','sms_status')"></md-slide-toggle>
                            </div>
                            <div style="text-align: center;" class="col-sm-1">
                              <md-slide-toggle class="js-single" color="#1abc9c" switchColor="#fff" size="small" [(ngModel)]="data.power.notif_status" (change)=" tab('power','notif_status')"></md-slide-toggle>
                            </div>
                            <div class="col-sm-4">
                              <a class="badge" (click)=" tab1('power','priority',3)" [ngClass]="{'badge-secondary':data.power.priority!=3,'badge-success':data.power.priority==3,'disabled':!data.power.notif_status}" style="margin-left: 20px;color: white;width: 70px;height: 17px;cursor:pointer">{{'High' | translate}}</a>
                              <a class="badge" (click)=" tab1('power','priority',2)" [ngClass]="{'badge-secondary':data.power.priority!=2,'badge-success':data.power.priority==2,'disabled':!data.power.notif_status}" style="margin-left: 10px;cursor:pointer;color: white;width: 70px;height: 17px;">{{'Medium' | translate}}</a>
                              <a class="badge" (click)=" tab1('power','priority',1)" [ngClass]="{'badge-secondary':data.power.priority!=1,'badge-success':data.power.priority==1,'disabled':!data.power.notif_status}"
                                style="margin-left: 10px;cursor:pointer;color: white;width: 70px;height: 17px;">{{'Low' | translate}}</a>
                            </div>
                            <div class="col-sm-1">
                                <div class="row">
                                    <button title="Add Email" style="border:1px solid transparent; background-color: transparent;margin-top:8px;cursor:pointer" (click)='onClickAddEmail("power")'>   <md-icon style="float: right;width:30px;height:30px;cursor:pointer">add</md-icon></button>
                                    <button title="Add Phone" style="border:1px solid transparent; background-color: transparent;margin-top:8px;cursor:pointer" (click)='onClickAddPhone("power")'>   <md-icon style="float: right;width:30px;height:30px;cursor:pointer">add</md-icon></button>
                                  <!-- <button (click)='onClickAddEmail("power")' title="Add Email" class="btn btn-primary btn-outline-primary btn-icon" style="width:25px;height:25px;margin-right:4px"><i
                                      class=" fa fa-plus " style="display:block;padding-left: 2px;padding-top: 1px;" aria-hidden="true"></i></button>
                                  <button (click)='onClickAddPhone("power")' title="Add Phone" class="btn btn-primary btn-outline-primary btn-icon" style="width:25px;height:25px"><i
                                      class=" fa fa-plus " style="display:block;padding-left: 2px;padding-top: 1px;" aria-hidden="true"></i></button> -->
                                </div>
                              </div>
                          </div>
                          <hr>
                          <div class="row">
                            <div class="col-sm-1">
                              <img class="img-30" src="assets/image/fuel.png" />
                            </div>
                            <div class="col-sm" style="padding-top:4px">
                              <strong>{{'Fuel Notification' | translate}}</strong>
                            </div>
                            <div style="text-align: center;" class="col-sm-1">
                              <md-slide-toggle class="js-single" color="#1abc9c" switchColor="#fff" size="small" [(ngModel)]="data.fuel.email_status" (change)=" tab('fuel','email_status')"></md-slide-toggle>
                            </div>
                            <div style="text-align: center;" class="col-sm-1">
                              <md-slide-toggle class="js-single" color="#1abc9c" switchColor="#fff" size="small" [(ngModel)]="data.fuel.sms_status" (change)=" tab('fuel','sms_status')"></md-slide-toggle>
                            </div>
                            <div style="text-align: center;" class="col-sm-1">
                              <md-slide-toggle class="js-single" color="#1abc9c" switchColor="#fff" size="small" [(ngModel)]="data.fuel.notif_status" (change)=" tab('fuel','notif_status')"></md-slide-toggle>
                            </div>
                            <div class="col-sm-4">
                              <a class="badge" (click)=" tab1('fuel','priority',3)" [ngClass]="{'badge-secondary':data.fuel.priority!=3,'badge-success':data.fuel.priority==3,'disabled':!data.fuel.notif_status}"
                                style="margin-left: 20px;color: white;width: 70px;height: 17px;cursor:pointer">{{'High' | translate}}</a>
                              <a class="badge" (click)=" tab1('fuel','priority',2)" [ngClass]="{'badge-secondary':data.fuel.priority!=2,'badge-success':data.fuel.priority==2,'disabled':!data.fuel.notif_status}"
                                style="margin-left: 10px;cursor:pointer;color: white;width: 70px;height: 17px;">{{'Medium' | translate}}</a>
                              <a class="badge" (click)=" tab1('fuel','priority',1)" [ngClass]="{'badge-secondary':data.fuel.priority!=1,'badge-success':data.fuel.priority==1,'disabled':!data.fuel.notif_status}"
                                style="margin-left: 10px;cursor:pointer;color: white;width: 70px;height: 17px;">{{'Low' | translate}}</a>
                            </div>
                            <div class="col-sm-1">
                                <div class="row">
                                    <button title="Add Email" style="border:1px solid transparent; background-color: transparent;margin-top:8px;cursor:pointer" (click)='onClickAddEmail("fuel")'>   <md-icon style="float: right;width:30px;height:30px;cursor:pointer">add</md-icon></button>
                                    <button title="Add Phone" style="border:1px solid transparent; background-color: transparent;margin-top:8px;cursor:pointer" (click)='onClickAddPhone("fuel")'>   <md-icon style="float: right;width:30px;height:30px;cursor:pointer">add</md-icon></button>
                                  <!-- <button (click)='onClickAddEmail("fuel")' title="Add Email" class="btn btn-primary btn-outline-primary btn-icon" style="width:25px;height:25px;margin-right:4px"><i
                                      class=" fa fa-plus " style="display:block;padding-left: 2px;padding-top: 1px;" aria-hidden="true"></i></button>
                                  <button (click)='onClickAddPhone("fuel")' title="Add Phone" class="btn btn-primary btn-outline-primary btn-icon" style="width:25px;height:25px"><i
                                      class=" fa fa-plus " style="display:block;padding-left: 2px;padding-top: 1px;" aria-hidden="true"></i></button> -->
                                </div>
                              </div>
                          </div>
                          <hr>
                          <div class="row">
                            <div class="col-sm-1">
                              <img class="img-30" src="assets/image/geofence.png" />
                            </div>
                            <div class="col-sm" style="padding-top:4px">
                              <strong>{{'Geo-Fence Notification' | translate}}</strong>
                            </div>
                            <div style="text-align: center;" class="col-sm-1">
                              <md-slide-toggle class="js-single" color="#1abc9c" switchColor="#fff" size="small" [(ngModel)]="data.geo.email_status" (change)=" tab('geo','email_status')"></md-slide-toggle>
                            </div>
                            <div style="text-align: center;" class="col-sm-1">
                              <md-slide-toggle class="js-single" color="#1abc9c" switchColor="#fff" size="small" [(ngModel)]="data.geo.sms_status" (change)="tab('geo','sms_status')"></md-slide-toggle>
                            </div>
                            <div style="text-align: center;" class="col-sm-1">
                              <md-slide-toggle class="js-single" color="#1abc9c" switchColor="#fff" size="small" [(ngModel)]="data.geo.notif_status" (change)="tab('geo','notif_status')"></md-slide-toggle>
                            </div>
                            <div class="col-sm-4">
                              <a class="badge" (click)=" tab1('geo','priority',3)" [ngClass]="{'badge-secondary':data.geo.priority!=3,'badge-success':data.geo.priority==3,'disabled':!data.geo.notif_status}"
                                style="margin-left: 20px;color: white;width: 70px;height: 17px;cursor:pointer">{{'High' | translate}}</a>
                              <a class="badge" (click)="tab1('geo','priority',2)" [ngClass]="{'badge-secondary':data.geo.priority!=2,'badge-success':data.geo.priority==2,'disabled':!data.geo.notif_status}"
                                style="margin-left: 10px;cursor:pointer;color: white;width: 70px;height: 17px;">{{'Medium' | translate}}</a>
                              <a class="badge" (click)=" tab1('geo','priority',1)" [ngClass]="{'badge-secondary':data.geo.priority!=1,'badge-success':data.geo.priority==1,'disabled':!data.geo.notif_status}"
                                style="margin-left: 10px;cursor:pointer;color: white;width: 70px;height: 17px;">{{'Low' | translate}}</a>
                            </div>
                            <div class="col-sm-1">
                                <div class="row">
                                    <button title="Add Email" style="border:1px solid transparent; background-color: transparent;margin-top:8px;cursor:pointer" (click)='onClickAddEmail("geo")'>   <md-icon style="float: right;width:30px;height:30px;cursor:pointer">add</md-icon></button>
                                    <button title="Add Phone" style="border:1px solid transparent; background-color: transparent;margin-top:8px;cursor:pointer" (click)='onClickAddPhone("geo")'>   <md-icon style="float: right;width:30px;height:30px;cursor:pointer">add</md-icon></button>
                                  <!-- <button (click)='onClickAddEmail("geo")' title="Add Email" class="btn btn-primary btn-outline-primary btn-icon" style="width:25px;height:25px;margin-right:4px"><i
                                      class=" fa fa-plus " style="display:block;padding-left: 2px;padding-top: 1px;" aria-hidden="true"></i></button>
                                  <button (click)='onClickAddPhone("geo")' title="Add Phone" class="btn btn-primary btn-outline-primary btn-icon" style="width:25px;height:25px"><i
                                      class=" fa fa-plus " style="display:block;padding-left: 2px;padding-top: 1px;" aria-hidden="true"></i></button> -->
                                </div>
                              </div>
                          </div>
                          <hr>
                          <div class="row">
                            <div class="col-sm-1">
                              <img class="img-30" src="assets/image/overspeed.png" />
                            </div>
                            <div class="col-sm" style="padding-top:4px">
                              <strong>{{'Overspeed Notification' | translate}}</strong>
                            </div>
                            <div style="text-align: center;" class="col-sm-1">
                              <md-slide-toggle class="js-single" color="#1abc9c" switchColor="#fff" size="small" [(ngModel)]="data.overspeed.email_status" (change)=" tab('overspeed','email_status')"></md-slide-toggle>
                            </div>
                            <div style="text-align: center;" class="col-sm-1">
                              <md-slide-toggle class="js-single" color="#1abc9c" switchColor="#fff" size="small" [(ngModel)]="data.overspeed.sms_status" (change)=" tab('overspeed','sms_status')"></md-slide-toggle>
                            </div>
                            <div style="text-align: center;" class="col-sm-1">
                              <md-slide-toggle class="js-single" color="#1abc9c" switchColor="#fff" size="small" [(ngModel)]="data.overspeed.notif_status" (change)=" tab('overspeed','notif_status')"></md-slide-toggle>
                            </div>
                            <div class="col-sm-4">
                              <a class="badge" (click)=" tab1('overspeed','priority',3)" [ngClass]="{'badge-secondary':data.overspeed.priority!=3,'badge-success':data.overspeed.priority==3,'disabled':!data.overspeed.notif_status}"
                                style="margin-left: 20px;color: white;width: 70px;height: 17px;cursor:pointer">{{'High' | translate}}</a>
                              <a class="badge" (click)=" tab1('overspeed','priority',2)" [ngClass]="{'badge-secondary':data.overspeed.priority!=2,'badge-success':data.overspeed.priority==2,'disabled':!data.overspeed.notif_status}"
                                style="margin-left: 10px;cursor:pointer;color: white;width: 70px;height: 17px;">{{'Medium' | translate}}</a>
                              <a class="badge" (click)=" tab1('overspeed','priority',1)" [ngClass]="{'badge-secondary':data.overspeed.priority!=1,'badge-success':data.overspeed.priority==1,'disabled':!data.overspeed.notif_status}"
                                style="margin-left: 10px;cursor:pointer;color: white;width: 70px;height: 17px;">{{'Low' | translate}}</a>
                            </div>
                            <div class="col-sm-1">
                                <div class="row">
                                    <button title="Add Email" style="border:1px solid transparent; background-color: transparent;margin-top:8px;cursor:pointer" (click)='onClickAddEmail("overspeed")'>   <md-icon style="float: right;width:30px;height:30px;cursor:pointer">add</md-icon></button>
                                    <button title="Add Phone" style="border:1px solid transparent; background-color: transparent;margin-top:8px;cursor:pointer" (click)='onClickAddPhone("overespeed")'>   <md-icon style="float: right;width:30px;height:30px;cursor:pointer">add</md-icon></button>
                                  <!-- <button (click)='onClickAddEmail("overspeed")' title="Add Email" class="btn btn-primary btn-outline-primary btn-icon" style="width:25px;height:25px;margin-right:4px"><i
                                      class=" fa fa-plus " style="display:block;padding-left: 2px;padding-top: 1px;" aria-hidden="true"></i></button>
                                  <button (click)='onClickAddPhone("overspeed")' title="Add Phone" class="btn btn-primary btn-outline-primary btn-icon" style="width:25px;height:25px"><i
                                      class=" fa fa-plus " style="display:block;padding-left: 2px;padding-top: 1px;" aria-hidden="true"></i></button> -->
                                </div>
                              </div>
                          </div>
                          <hr>
            
                          <div class="row">
                            <div class="col-sm-1">
                              <img class="img-30" src="assets/image/route_v.png" />
                            </div>
                            <div class="col-sm" style="padding-top:4px">
                              <strong>{{'Route Notification' | translate}}</strong>
                            </div>
                            <div style="text-align: center;" class="col-sm-1">
                              <md-slide-toggle class="js-single" color="#1abc9c" switchColor="#fff" size="small" [(ngModel)]="data.route.email_status" (change)=" tab('route','email_status')"></md-slide-toggle>
                            </div>
                            <div style="text-align: center;" class="col-sm-1">
                              <md-slide-toggle class="js-single" color="#1abc9c" switchColor="#fff" size="small" [(ngModel)]="data.route.sms_status" (change)=" tab('route','sms_status')"></md-slide-toggle>
            
            
                            </div>
                            <div style="text-align: center;" class="col-sm-1">
                              <md-slide-toggle class="js-single" color="#1abc9c" switchColor="#fff" size="small" [(ngModel)]="data.route.notif_status" (change)=" tab('route','notif_status')"></md-slide-toggle>
            
            
                            </div>
                            <div class="col-sm-4">
                              <a class="badge" (click)=" tab1('route','priority',3)" [ngClass]="{'badge-secondary':data.route.priority!=3,'badge-success':data.route.priority==3,'disabled':!data.route.notif_status}"
                                style="margin-left: 20px;color: white;width: 70px;height: 17px;cursor:pointer">{{'High' | translate}}</a>
                              <a class="badge" (click)=" tab1('route','priority',2)" [ngClass]="{'badge-secondary':data.route.priority!=2,'badge-success':data.route.priority==2,'disabled':!data.route.notif_status}"
                                style="margin-left: 10px;cursor:pointer;color: white;width: 70px;height: 17px;">{{'Medium' | translate}}</a>
                              <a class="badge" (click)=" tab1('route','priority',1)" [ngClass]="{'badge-secondary':data.route.priority!=1,'badge-success':data.route.priority==1,'disabled':!data.route.notif_status}"
                                style="margin-left: 10px;cursor:pointer;color: white;width: 70px;height: 17px;">{{'Low' | translate}}</a>
                            </div>
                            <div class="col-sm-1">
                                <div class="row">
                                    <button title="Add Email" style="border:1px solid transparent; background-color: transparent;margin-top:8px;cursor:pointer" (click)='onClickAddEmail("route")'>   <md-icon style="float: right;width:30px;height:30px;cursor:pointer">add</md-icon></button>
                                    <button title="Add Phone" style="border:1px solid transparent; background-color: transparent;margin-top:8px;cursor:pointer" (click)='onClickAddPhone("route")'>   <md-icon style="float: right;width:30px;height:30px;cursor:pointer">add</md-icon></button>
                                  <!-- <button (click)='onClickAddEmail("route")' title="Add Email" class="btn btn-primary btn-outline-primary btn-icon" style="width:25px;height:25px;margin-right:4px"><i
                                      class=" fa fa-plus " style="display:block;padding-left: 2px;padding-top: 1px;" aria-hidden="true"></i></button>
                                  <button (click)='onClickAddPhone("route")' title="Add Phone" class="btn btn-primary btn-outline-primary btn-icon" style="width:25px;height:25px"><i
                                      class=" fa fa-plus " style="display:block;padding-left: 2px;padding-top: 1px;" aria-hidden="true"></i></button> -->
                                </div>
                              </div>
                          </div>
                          <hr>
                          <div class="row">
                            <div class="col-sm-1">
                              <img class="img-30" src="assets/image/ac-on.png" />
                            </div>
                            <div class="col-sm" style="padding-top:4px">
                              <strong>{{'AC Notification' | translate}}</strong>
                            </div>
                            <div style="text-align: center;" class="col-sm-1">
                              <md-slide-toggle class="js-single" color="#1abc9c" switchColor="#fff" size="small" [(ngModel)]="data.AC.email_status" (change)=" tab('AC','email_status')"></md-slide-toggle>
                            </div>
                            <div style="text-align: center;" class="col-sm-1">
                              <md-slide-toggle class="js-single" color="#1abc9c" switchColor="#fff" size="small" [(ngModel)]="data.AC.sms_status" (change)=" tab('AC','sms_status')"></md-slide-toggle>
            
                            </div>
                            <div style="text-align: center;" class="col-sm-1">
                              <md-slide-toggle class="js-single" color="#1abc9c" switchColor="#fff" size="small" [(ngModel)]="data.AC.notif_status" (change)=" tab('AC','notif_status')"></md-slide-toggle>
            
                            </div>
                            <div class="col-sm-4">
                              <a class="badge" (click)=" tab1('AC','priority',3)" [ngClass]="{'badge-secondary':data.AC.priority!=3,'badge-success':data.AC.priority==3,'disabled':!data.AC.notif_status}"
                                style="margin-left: 20px;color: white;width: 70px;height: 17px;cursor:pointer">{{'High' | translate}}</a>
                              <a class="badge" (click)=" tab1('AC','priority',2)" [ngClass]="{'badge-secondary':data.AC.priority!=2,'badge-success':data.AC.priority==2,'disabled':!data.AC.notif_status}"
                                style="margin-left: 10px;cursor:pointer;color: white;width: 70px;height: 17px;">{{'Medium' | translate}}</a>
                              <a class="badge" (click)=" tab1('AC','priority',1)" [ngClass]="{'badge-secondary':data.AC.priority!=1,'badge-success':data.AC.priority==1,'disabled':!data.AC.notif_status}"
                                style="margin-left: 10px;cursor:pointer;color: white;width: 70px;height: 17px;">{{'Low' | translate}}</a>
                            </div>
                            <div class="col-sm-1">
                                <div class="row">
                                    <button title="Add Email" style="border:1px solid transparent; background-color: transparent;margin-top:8px;cursor:pointer" (click)='onClickAddEmail("AC")'>   <md-icon style="float: right;width:30px;height:30px;cursor:pointer">add</md-icon></button>
                                    <button title="Add Phone" style="border:1px solid transparent; background-color: transparent;margin-top:8px;cursor:pointer" (click)='onClickAddPhone("AC")'>   <md-icon style="float: right;width:30px;height:30px;cursor:pointer">add</md-icon></button>
                                  <!-- <button (click)='onClickAddEmail("AC")' title="Add Email" class="btn btn-primary btn-outline-primary btn-icon" style="width:25px;height:25px;margin-right:4px"><i
                                      class=" fa fa-plus " style="display:block;padding-left: 2px;padding-top: 1px;" aria-hidden="true"></i></button>
                                  <button (click)='onClickAddPhone("AC")' title="Add Phone" class="btn btn-primary btn-outline-primary btn-icon" style="width:25px;height:25px"><i
                                      class=" fa fa-plus " style="display:block;padding-left: 2px;padding-top: 1px;" aria-hidden="true"></i></button> -->
                                </div>
                              </div>
                          </div>
                          <hr>
                          <div class="row">
                            <div class="col-sm-1">
                              <img class="img-30" src="assets/image/max-stoppage.png" />
                            </div>
                            <div class="col-sm" style="padding-top:4px">
                              <strong>{{'Max-Stoppage Notification' | translate}}</strong>
                            </div>
                            <div style="text-align: center;" class="col-sm-1">
                              <md-slide-toggle class="js-single" color="#1abc9c" switchColor="#fff" size="small" [(ngModel)]="data.maxstop.email_status" (change)=" tab('maxstop','email_status')"></md-slide-toggle>
                            </div>
                            <div style="text-align: center;" class="col-sm-1">
                              <md-slide-toggle class="js-single" color="#1abc9c" switchColor="#fff" size="small" [(ngModel)]="data.maxstop.sms_status" (change)=" tab('maxstop','sms_status')"></md-slide-toggle>
            
                            </div>
                            <div style="text-align: center;" class="col-sm-1">
                              <md-slide-toggle class="js-single" color="#1abc9c" switchColor="#fff" size="small" [(ngModel)]="data.maxstop.notif_status" (change)=" tab('maxstop','notif_status')"></md-slide-toggle>
            
                            </div>
                            <div class="col-sm-4">
                              <a class="badge" (click)=" tab1('maxstop','priority',3)" [ngClass]="{'badge-secondary':data.maxstop.priority!=3,'badge-success':data.maxstop.priority==3,'disabled':!data.maxstop.notif_status}"
                                style="margin-left: 20px;color: white;width: 70px;height: 17px;cursor:pointer">{{'High' | translate}}</a>
                              <a class="badge" (click)=" tab1('maxstop','priority',2)" [ngClass]="{'badge-secondary':data.maxstop.priority!=2,'badge-success':data.maxstop.priority==2,'disabled':!data.maxstop.notif_status}"
                                style="margin-left: 10px;cursor:pointer;color: white;width: 70px;height: 17px;">{{'Medium' | translate}}</a>
                              <a class="badge" (click)=" tab1('maxstop','priority',1)" [ngClass]="{'badge-secondary':data.maxstop.priority!=1,'badge-success':data.maxstop.priority==1,'disabled':!data.maxstop.notif_status}"
                                style="margin-left: 10px;cursor:pointer;color: white;width: 70px;height: 17px;">{{'Low' | translate}}</a>
                            </div>
                            <div class="col-sm-1">
                                <div class="row">
                                    <button title="Add Email" style="border:1px solid transparent; background-color: transparent;margin-top:8px;cursor:pointer" (click)='onClickAddEmail("maxstop")'>   <md-icon style="float: right;width:30px;height:30px;cursor:pointer">add</md-icon></button>
                                    <button title="Add Phone" style="border:1px solid transparent; background-color: transparent;margin-top:8px;cursor:pointer" (click)='onClickAddPhone("maxstop")'>   <md-icon style="float: right;width:30px;height:30px;cursor:pointer">add</md-icon></button>
                                  <!-- <button (click)='onClickAddEmail("maxstop")' title="Add Email" class="btn btn-primary btn-outline-primary btn-icon" style="width:25px;height:25px;margin-right:4px"><i
                                      class=" fa fa-plus " style="display:block;padding-left: 2px;padding-top: 1px;" aria-hidden="true"></i></button>
                                  <button (click)='onClickAddPhone("maxstop")' title="Add Phone" class="btn btn-primary btn-outline-primary btn-icon" style="width:25px;height:25px"><i
                                      class=" fa fa-plus " style="display:block;padding-left: 2px;padding-top: 1px;" aria-hidden="true"></i></button> -->
                                </div>
                              </div>
                          </div>
                          <hr>
                          <div class="row">
                            <div class="col-sm-1">
                              <img class="img-30" src="assets/image/sos_notification.png" />
                            </div>
                            <div class="col-sm" style="padding-top:4px">
                              <strong>{{'SOS Notification' | translate}}</strong>
                            </div>
                            <div style="text-align: center;" class="col-sm-1">
                              <md-slide-toggle class="js-single" color="#1abc9c" switchColor="#fff" size="small" [(ngModel)]="data.sos.email_status" (change)=" tab('sos','email_status')"></md-slide-toggle>
                            </div>
                            <div style="text-align: center;" class="col-sm-1">
                              <md-slide-toggle class="js-single" color="#1abc9c" switchColor="#fff" size="small" [(ngModel)]="data.sos.sms_status" (change)=" tab('sos','sms_status')"></md-slide-toggle>
            
                            </div>
                            <div style="text-align: center;" class="col-sm-1">
                              <md-slide-toggle class="js-single" color="#1abc9c" switchColor="#fff" size="small" [(ngModel)]="data.sos.notif_status" (change)=" tab('sos','notif_status')"></md-slide-toggle>
            
                            </div>
                            <div class="col-sm-4">
                              <a class="badge" (click)=" tab1('sos','priority',3)" [ngClass]="{'badge-secondary':data.sos.priority!=3,'badge-success':data.sos.priority==3,'disabled':!data.sos.notif_status}"
                                style="margin-left: 20px;color: white;width: 70px;height: 17px;cursor:pointer">{{'High' | translate}}</a>
                              <a class="badge" (click)=" tab1('sos','priority',2)" [ngClass]="{'badge-secondary':data.sos.priority!=2,'badge-success':data.sos.priority==2,'disabled':!data.sos.notif_status}"
                                style="margin-left: 10px;cursor:pointer;color: white;width: 70px;height: 17px;">{{'Medium' | translate}}</a>
                              <a class="badge" (click)=" tab1('sos','priority',1)" [ngClass]="{'badge-secondary':data.sos.priority!=1,'badge-success':data.sos.priority==1,'disabled':!data.sos.notif_status}"
                                style="margin-left: 10px;cursor:pointer;color: white;width: 70px;height: 17px;">{{'Low' | translate}}</a>
                            </div>
                            <div class="col-sm-1">
                                <div class="row">
                                    <button title="Add Email" style="border:1px solid transparent; background-color: transparent;margin-top:8px;cursor:pointer" (click)='onClickAddEmail("sos")'>   <md-icon style="float: right;width:30px;height:30px;cursor:pointer">add</md-icon></button>
                                    <button title="Add Phone" style="border:1px solid transparent; background-color: transparent;margin-top:8px;cursor:pointer" (click)='onClickAddPhone("sos")'>   <md-icon style="float: right;width:30px;height:30px;cursor:pointer">add</md-icon></button>
                                  <!-- <button (click)='onClickAddEmail("sos")' title="Add Email" class="btn btn-primary btn-outline-primary btn-icon" style="width:25px;height:25px;margin-right:4px"><i
                                      class=" fa fa-plus " style="display:block;padding-left: 2px;padding-top: 1px;" aria-hidden="true"></i></button>
                                  <button (click)='onClickAddPhone("sos")' title="Add Phone" class="btn btn-primary btn-outline-primary btn-icon" style="width:25px;height:25px"><i
                                      class=" fa fa-plus " style="display:block;padding-left: 2px;padding-top: 1px;" aria-hidden="true"></i></button> -->
                                </div>
                              </div>
                          </div>
<!-- ---------------------------------------New ----------------------------------- -->
<!-- <img src="https://img.icons8.com/fluent-systems-filled/48/000000/sonometer.png" /> -->
                          <hr>
                          <div class="row">
                            <div class="col-sm-1">
                              <img class="img-30" src="assets/image/vibration.png" />
                            </div>
                            <div class="col-sm" style="padding-top:4px">
                              <strong>{{'Vibration Notification' | translate}}</strong>
                            </div>
                            <div style="text-align: center;" class="col-sm-1">
                              <md-slide-toggle class="js-single" color="#1abc9c" switchColor="#fff" size="small"
                                [(ngModel)]="data.vibration.email_status" (change)=" tab('vibration','email_status')"></md-slide-toggle>
                            </div>
                            <div style="text-align: center;" class="col-sm-1">
                              <md-slide-toggle class="js-single" color="#1abc9c" switchColor="#fff" size="small" [(ngModel)]="data.vibration.sms_status"
                                (change)=" tab('vibration','sms_status')"></md-slide-toggle>
                          
                            </div>
                            <div style="text-align: center;" class="col-sm-1">
                              <md-slide-toggle class="js-single" color="#1abc9c" switchColor="#fff" size="small"
                                [(ngModel)]="data.vibration.notif_status" (change)=" tab('vibration','notif_status')"></md-slide-toggle>
                          
                            </div>
                            <div class="col-sm-4">
                              <a class="badge" (click)=" tab1('vibration','priority',3)"
                                [ngClass]="{'badge-secondary':data.vibration.priority!=3,'badge-success':data.vibration.priority==3,'disabled':!data.vibration.notif_status}"
                                style="margin-left: 20px;color: white;width: 70px;height: 17px;cursor:pointer">{{'High' | translate}}</a>
                              <a class="badge" (click)=" tab1('vibration','priority',2)"
                                [ngClass]="{'badge-secondary':data.vibration.priority!=2,'badge-success':data.vibration.priority==2,'disabled':!data.vibration.notif_status}"
                                style="margin-left: 10px;cursor:pointer;color: white;width: 70px;height: 17px;">{{'Medium' | translate}}</a>
                              <a class="badge" (click)=" tab1('vibration','priority',1)"
                                [ngClass]="{'badge-secondary':data.vibration.priority!=1,'badge-success':data.vibration.priority==1,'disabled':!data.vibration.notif_status}"
                                style="margin-left: 10px;cursor:pointer;color: white;width: 70px;height: 17px;">{{'Low' | translate}}</a>
                            </div>
                            <div class="col-sm-1">
                              <div class="row">
                                <button title="Add Email"
                                  style="border:1px solid transparent; background-color: transparent;margin-top:8px;cursor:pointer"
                                  (click)='onClickAddEmail("vibration")'>
                                  <md-icon style="float: right;width:30px;height:30px;cursor:pointer">add</md-icon>
                                </button>
                                <button title="Add Phone"
                                  style="border:1px solid transparent; background-color: transparent;margin-top:8px;cursor:pointer"
                                  (click)='onClickAddPhone("vibration")'>
                                  <md-icon style="float: right;width:30px;height:30px;cursor:pointer">add</md-icon>
                                </button>
                                <!-- <button (click)='onClickAddEmail("sos")' title="Add Email" class="btn btn-primary btn-outline-primary btn-icon" style="width:25px;height:25px;margin-right:4px"><i
                                                                class=" fa fa-plus " style="display:block;padding-left: 2px;padding-top: 1px;" aria-hidden="true"></i></button>
                                                            <button (click)='onClickAddPhone("sos")' title="Add Phone" class="btn btn-primary btn-outline-primary btn-icon" style="width:25px;height:25px"><i
                                                                class=" fa fa-plus " style="display:block;padding-left: 2px;padding-top: 1px;" aria-hidden="true"></i></button> -->
                              </div>
                            </div>
                          </div>
<!-- <img src="https://img.icons8.com/ios/50/000000/low-battery--v2.png" />                          -->
                          <hr>
                          <div class="row">
                            <div class="col-sm-1">
                              <img class="img-30" src="assets/image/battery.png" />
                            </div>
                            <div class="col-sm" style="padding-top:4px">
                              <strong>{{'Low Battery Notification' | translate}}</strong>
                            </div>
                            <div style="text-align: center;" class="col-sm-1">
                              <md-slide-toggle class="js-single" color="#1abc9c" switchColor="#fff" size="small"
                                [(ngModel)]="data.lowBattery.email_status" (change)=" tab('lowBattery','email_status')"></md-slide-toggle>
                            </div>
                            <div style="text-align: center;" class="col-sm-1">
                              <md-slide-toggle class="js-single" color="#1abc9c" switchColor="#fff" size="small"
                                [(ngModel)]="data.lowBattery.sms_status" (change)=" tab('lowBattery','sms_status')"></md-slide-toggle>
                          
                            </div>
                            <div style="text-align: center;" class="col-sm-1">
                              <md-slide-toggle class="js-single" color="#1abc9c" switchColor="#fff" size="small"
                                [(ngModel)]="data.lowBattery.notif_status" (change)=" tab('lowBattery','notif_status')"></md-slide-toggle>
                          
                            </div>
                            <div class="col-sm-4">
                              <a class="badge" (click)=" tab1('lowBattery','priority',3)"
                                [ngClass]="{'badge-secondary':data.lowBattery.priority!=3,'badge-success':data.lowBattery.priority==3,'disabled':!data.lowBattery.notif_status}"
                                style="margin-left: 20px;color: white;width: 70px;height: 17px;cursor:pointer">{{'High' | translate}}</a>
                              <a class="badge" (click)=" tab1('lowBattery','priority',2)"
                                [ngClass]="{'badge-secondary':data.lowBattery.priority!=2,'badge-success':data.lowBattery.priority==2,'disabled':!data.lowBattery.notif_status}"
                                style="margin-left: 10px;cursor:pointer;color: white;width: 70px;height: 17px;">{{'Medium' | translate}}</a>
                              <a class="badge" (click)=" tab1('lowBattery','priority',1)"
                                [ngClass]="{'badge-secondary':data.lowBattery.priority!=1,'badge-success':data.lowBattery.priority==1,'disabled':!data.lowBattery.notif_status}"
                                style="margin-left: 10px;cursor:pointer;color: white;width: 70px;height: 17px;">{{'Low' | translate}}</a>
                            </div>
                            <div class="col-sm-1">
                              <div class="row">
                                <button title="Add Email"
                                  style="border:1px solid transparent; background-color: transparent;margin-top:8px;cursor:pointer"
                                  (click)='onClickAddEmail("lowBattery")'>
                                  <md-icon style="float: right;width:30px;height:30px;cursor:pointer">add</md-icon>
                                </button>
                                <button title="Add Phone"
                                  style="border:1px solid transparent; background-color: transparent;margin-top:8px;cursor:pointer"
                                  (click)='onClickAddPhone("lowBattery")'>
                                  <md-icon style="float: right;width:30px;height:30px;cursor:pointer">add</md-icon>
                                </button>
                                <!-- <button (click)='onClickAddEmail("sos")' title="Add Email" class="btn btn-primary btn-outline-primary btn-icon" style="width:25px;height:25px;margin-right:4px"><i
                                                                                          class=" fa fa-plus " style="display:block;padding-left: 2px;padding-top: 1px;" aria-hidden="true"></i></button>
                                                                                      <button (click)='onClickAddPhone("sos")' title="Add Phone" class="btn btn-primary btn-outline-primary btn-icon" style="width:25px;height:25px"><i
                                                                                          class=" fa fa-plus " style="display:block;padding-left: 2px;padding-top: 1px;" aria-hidden="true"></i></button> -->
                              </div>
                            </div>
                          </div>


                          <!-- <img src="https://img.icons8.com/ios-glyphs/30/000000/alarm-clock--v2.png" /> -->
                          <hr>
                          <div class="row">
                            <div class="col-sm-1">
                              <img class="img-30" src="assets/image/alarm.png" />
                            </div>
                            <div class="col-sm" style="padding-top:4px">
                              <strong>{{'Acc Alarm Notification' | translate}}</strong>
                            </div>
                            <div style="text-align: center;" class="col-sm-1">
                              <md-slide-toggle class="js-single" color="#1abc9c" switchColor="#fff" size="small"
                                [(ngModel)]="data.accAlarm.email_status" (change)=" tab('accAlarm','email_status')"></md-slide-toggle>
                            </div>
                            <div style="text-align: center;" class="col-sm-1">
                              <md-slide-toggle class="js-single" color="#1abc9c" switchColor="#fff" size="small"
                                [(ngModel)]="data.accAlarm.sms_status" (change)=" tab('accAlarm','sms_status')"></md-slide-toggle>
                          
                            </div>
                            <div style="text-align: center;" class="col-sm-1">
                              <md-slide-toggle class="js-single" color="#1abc9c" switchColor="#fff" size="small"
                                [(ngModel)]="data.accAlarm.notif_status" (change)=" tab('accAlarm','notif_status')"></md-slide-toggle>
                          
                            </div>
                            <div class="col-sm-4">
                              <a class="badge" (click)=" tab1('accAlarm','priority',3)"
                                [ngClass]="{'badge-secondary':data.accAlarm.priority!=3,'badge-success':data.accAlarm.priority==3,'disabled':!data.accAlarm.notif_status}"
                                style="margin-left: 20px;color: white;width: 70px;height: 17px;cursor:pointer">{{'High' | translate}}</a>
                              <a class="badge" (click)=" tab1('accAlarm','priority',2)"
                                [ngClass]="{'badge-secondary':data.accAlarm.priority!=2,'badge-success':data.accAlarm.priority==2,'disabled':!data.accAlarm.notif_status}"
                                style="margin-left: 10px;cursor:pointer;color: white;width: 70px;height: 17px;">{{'Medium' | translate}}</a>
                              <a class="badge" (click)=" tab1('accAlarm','priority',1)"
                                [ngClass]="{'badge-secondary':data.accAlarm.priority!=1,'badge-success':data.accAlarm.priority==1,'disabled':!data.accAlarm.notif_status}"
                                style="margin-left: 10px;cursor:pointer;color: white;width: 70px;height: 17px;">{{'Low' | translate}}</a>
                            </div>
                            <div class="col-sm-1">
                              <div class="row">
                                <button title="Add Email"
                                  style="border:1px solid transparent; background-color: transparent;margin-top:8px;cursor:pointer"
                                  (click)='onClickAddEmail("accAlarm")'>
                                  <md-icon style="float: right;width:30px;height:30px;cursor:pointer">add</md-icon>
                                </button>
                                <button title="Add Phone"
                                  style="border:1px solid transparent; background-color: transparent;margin-top:8px;cursor:pointer"
                                  (click)='onClickAddPhone("accAlarm")'>
                                  <md-icon style="float: right;width:30px;height:30px;cursor:pointer">add</md-icon>
                                </button>
                                <!-- <button (click)='onClickAddEmail("sos")' title="Add Email" class="btn btn-primary btn-outline-primary btn-icon" style="width:25px;height:25px;margin-right:4px"><i
                                                                                                                    class=" fa fa-plus " style="display:block;padding-left: 2px;padding-top: 1px;" aria-hidden="true"></i></button>
                                                                                                                <button (click)='onClickAddPhone("sos")' title="Add Phone" class="btn btn-primary btn-outline-primary btn-icon" style="width:25px;height:25px"><i
                                                                                                                    class=" fa fa-plus " style="display:block;padding-left: 2px;padding-top: 1px;" aria-hidden="true"></i></button> -->
                              </div>
                            </div>
                          </div>

                          <!-- <img src="https://img.icons8.com/ios/50/000000/tollbooth.png" /> -->

                          <hr>
                          <div class="row">
                            <div class="col-sm-1">
                              <img class="img-30" src="assets/image/tollbooth.png" />
                            </div>
                            <div class="col-sm" style="padding-top:4px">
                              <strong>{{'Toll Notification' | translate}}</strong>
                            </div>
                            <div style="text-align: center;" class="col-sm-1">
                              <md-slide-toggle class="js-single" color="#1abc9c" switchColor="#fff" size="small"
                                [(ngModel)]="data.toll.email_status" (change)=" tab('toll','email_status')"></md-slide-toggle>
                            </div>
                            <div style="text-align: center;" class="col-sm-1">
                              <md-slide-toggle class="js-single" color="#1abc9c" switchColor="#fff" size="small"
                                [(ngModel)]="data.toll.sms_status" (change)=" tab('toll','sms_status')"></md-slide-toggle>
                          
                            </div>
                            <div style="text-align: center;" class="col-sm-1">
                              <md-slide-toggle class="js-single" color="#1abc9c" switchColor="#fff" size="small"
                                [(ngModel)]="data.toll.notif_status" (change)=" tab('toll','notif_status')"></md-slide-toggle>
                          
                            </div>
                            <div class="col-sm-4">
                              <a class="badge" (click)=" tab1('toll','priority',3)"
                                [ngClass]="{'badge-secondary':data.toll.priority!=3,'badge-success':data.toll.priority==3,'disabled':!data.toll.notif_status}"
                                style="margin-left: 20px;color: white;width: 70px;height: 17px;cursor:pointer">{{'High' | translate}}</a>
                              <a class="badge" (click)=" tab1('toll','priority',2)"
                                [ngClass]="{'badge-secondary':data.toll.priority!=2,'badge-success':data.toll.priority==2,'disabled':!data.toll.notif_status}"
                                style="margin-left: 10px;cursor:pointer;color: white;width: 70px;height: 17px;">{{'Medium' | translate}}</a>
                              <a class="badge" (click)=" tab1('toll','priority',1)"
                                [ngClass]="{'badge-secondary':data.toll.priority!=1,'badge-success':data.toll.priority==1,'disabled':!data.toll.notif_status}"
                                style="margin-left: 10px;cursor:pointer;color: white;width: 70px;height: 17px;">{{'Low' | translate}}</a>
                            </div>
                            <div class="col-sm-1">
                              <div class="row">
                                <button title="Add Email"
                                  style="border:1px solid transparent; background-color: transparent;margin-top:8px;cursor:pointer"
                                  (click)='onClickAddEmail("toll")'>
                                  <md-icon style="float: right;width:30px;height:30px;cursor:pointer">add</md-icon>
                                </button>
                                <button title="Add Phone"
                                  style="border:1px solid transparent; background-color: transparent;margin-top:8px;cursor:pointer"
                                  (click)='onClickAddPhone("toll")'>
                                  <md-icon style="float: right;width:30px;height:30px;cursor:pointer">add</md-icon>
                                </button>
                                <!-- <button (click)='onClickAddEmail("sos")' title="Add Email" class="btn btn-primary btn-outline-primary btn-icon" style="width:25px;height:25px;margin-right:4px"><i
                                                                                                                                              class=" fa fa-plus " style="display:block;padding-left: 2px;padding-top: 1px;" aria-hidden="true"></i></button>
                                                                                                                                          <button (click)='onClickAddPhone("sos")' title="Add Phone" class="btn btn-primary btn-outline-primary btn-icon" style="width:25px;height:25px"><i
                                                                                                                                              class=" fa fa-plus " style="display:block;padding-left: 2px;padding-top: 1px;" aria-hidden="true"></i></button> -->
                              </div>
                            </div>
                          </div>

                          <hr>
                          <div class="row">
                            <div class="col-sm-1">
                              <img class="img-30" src="assets/image/break.png" />
                            </div>
                            <div class="col-sm" style="padding-top:4px">
                              <strong>{{'Harsh Break Notification' | translate}}</strong>
                            </div>
                            <div style="text-align: center;" class="col-sm-1">
                              <md-slide-toggle class="js-single" color="#1abc9c" switchColor="#fff" size="small"
                                [(ngModel)]="data.harshBreak.email_status" (change)=" tab('harshBreak','email_status')"></md-slide-toggle>
                            </div>
                            <div style="text-align: center;" class="col-sm-1">
                              <md-slide-toggle class="js-single" color="#1abc9c" switchColor="#fff" size="small"
                                [(ngModel)]="data.harshBreak.sms_status" (change)=" tab('harshBreak','sms_status')"></md-slide-toggle>
                          
                            </div>
                            <div style="text-align: center;" class="col-sm-1">
                              <md-slide-toggle class="js-single" color="#1abc9c" switchColor="#fff" size="small"
                                [(ngModel)]="data.harshBreak.notif_status" (change)=" tab('harshBreak','notif_status')"></md-slide-toggle>
                          
                            </div>
                            <div class="col-sm-4">
                              <a class="badge" (click)=" tab1('harshBreak','priority',3)"
                                [ngClass]="{'badge-secondary':data.harshBreak.priority!=3,'badge-success':data.harshBreak.priority==3,'disabled':!data.harshBreak.notif_status}"
                                style="margin-left: 20px;color: white;width: 70px;height: 17px;cursor:pointer">{{'High' | translate}}</a>
                              <a class="badge" (click)=" tab1('harshBreak','priority',2)"
                                [ngClass]="{'badge-secondary':data.harshBreak.priority!=2,'badge-success':data.harshBreak.priority==2,'disabled':!data.harshBreak.notif_status}"
                                style="margin-left: 10px;cursor:pointer;color: white;width: 70px;height: 17px;">{{'Medium' | translate}}</a>
                              <a class="badge" (click)=" tab1('harshBreak','priority',1)"
                                [ngClass]="{'badge-secondary':data.harshBreak.priority!=1,'badge-success':data.harshBreak.priority==1,'disabled':!data.harshBreak.notif_status}"
                                style="margin-left: 10px;cursor:pointer;color: white;width: 70px;height: 17px;">{{'Low' | translate}}</a>
                            </div>
                            <div class="col-sm-1">
                              <div class="row">
                                <button title="Add Email"
                                  style="border:1px solid transparent; background-color: transparent;margin-top:8px;cursor:pointer"
                                  (click)='onClickAddEmail("harshBreak")'>
                                  <md-icon style="float: right;width:30px;height:30px;cursor:pointer">add</md-icon>
                                </button>
                                <button title="Add Phone"
                                  style="border:1px solid transparent; background-color: transparent;margin-top:8px;cursor:pointer"
                                  (click)='onClickAddPhone("harshBreak")'>
                                  <md-icon style="float: right;width:30px;height:30px;cursor:pointer">add</md-icon>
                                </button>
                                <!-- <button (click)='onClickAddEmail("sos")' title="Add Email" class="btn btn-primary btn-outline-primary btn-icon" style="width:25px;height:25px;margin-right:4px"><i
                                                                                                                                                                        class=" fa fa-plus " style="display:block;padding-left: 2px;padding-top: 1px;" aria-hidden="true"></i></button>
                                                                                                                                                                    <button (click)='onClickAddPhone("sos")' title="Add Phone" class="btn btn-primary btn-outline-primary btn-icon" style="width:25px;height:25px"><i
                                                                                                                                                                        class=" fa fa-plus " style="display:block;padding-left: 2px;padding-top: 1px;" aria-hidden="true"></i></button> -->
                              </div>
                            </div>
                          </div>

                          <hr>
                          <div class="row">
                            <div class="col-sm-1">
                              <img class="img-30" src="assets/image/acceleration.png" />
                            </div>
                            <div class="col-sm" style="padding-top:4px">
                              <strong>{{'Harsh Acceleration Notification' | translate}}</strong>
                            </div>
                            <div style="text-align: center;" class="col-sm-1">
                              <md-slide-toggle class="js-single" color="#1abc9c" switchColor="#fff" size="small"
                                [(ngModel)]="data.harshAcceleration.email_status" (change)=" tab('harshAcceleration','email_status')"></md-slide-toggle>
                            </div>
                            <div style="text-align: center;" class="col-sm-1">
                              <md-slide-toggle class="js-single" color="#1abc9c" switchColor="#fff" size="small"
                                [(ngModel)]="data.harshAcceleration.sms_status" (change)=" tab('harshAcceleration','sms_status')"></md-slide-toggle>
                          
                            </div>
                            <div style="text-align: center;" class="col-sm-1">
                              <md-slide-toggle class="js-single" color="#1abc9c" switchColor="#fff" size="small"
                                [(ngModel)]="data.harshAcceleration.notif_status" (change)=" tab('harshAcceleration','notif_status')"></md-slide-toggle>
                          
                            </div>
                            <div class="col-sm-4">
                              <a class="badge" (click)=" tab1('harshAcceleration','priority',3)"
                                [ngClass]="{'badge-secondary':data.harshAcceleration.priority!=3,'badge-success':data.harshAcceleration.priority==3,'disabled':!data.harshAcceleration.notif_status}"
                                style="margin-left: 20px;color: white;width: 70px;height: 17px;cursor:pointer">{{'High' | translate}}</a>
                              <a class="badge" (click)=" tab1('harshAcceleration','priority',2)"
                                [ngClass]="{'badge-secondary':data.harshAcceleration.priority!=2,'badge-success':data.harshAcceleration.priority==2,'disabled':!data.harshAcceleration.notif_status}"
                                style="margin-left: 10px;cursor:pointer;color: white;width: 70px;height: 17px;">{{'Medium' | translate}}</a>
                              <a class="badge" (click)=" tab1('harshAcceleration','priority',1)"
                                [ngClass]="{'badge-secondary':data.harshAcceleration.priority!=1,'badge-success':data.harshAcceleration.priority==1,'disabled':!data.harshAcceleration.notif_status}"
                                style="margin-left: 10px;cursor:pointer;color: white;width: 70px;height: 17px;">{{'Low' | translate}}</a>
                            </div>
                            <div class="col-sm-1">
                              <div class="row">
                                <button title="Add Email"
                                  style="border:1px solid transparent; background-color: transparent;margin-top:8px;cursor:pointer"
                                  (click)='onClickAddEmail("harshAcceleration")'>
                                  <md-icon style="float: right;width:30px;height:30px;cursor:pointer">add</md-icon>
                                </button>
                                <button title="Add Phone"
                                  style="border:1px solid transparent; background-color: transparent;margin-top:8px;cursor:pointer"
                                  (click)='onClickAddPhone("harshAcceleration")'>
                                  <md-icon style="float: right;width:30px;height:30px;cursor:pointer">add</md-icon>
                                </button>
                                <!-- <button (click)='onClickAddEmail("sos")' title="Add Email" class="btn btn-primary btn-outline-primary btn-icon" style="width:25px;height:25px;margin-right:4px"><i
                                                                                                                                                                                                  class=" fa fa-plus " style="display:block;padding-left: 2px;padding-top: 1px;" aria-hidden="true"></i></button>
                                                                                                                                                                                              <button (click)='onClickAddPhone("sos")' title="Add Phone" class="btn btn-primary btn-outline-primary btn-icon" style="width:25px;height:25px"><i
                                                                                                                                                                                                  class=" fa fa-plus " style="display:block;padding-left: 2px;padding-top: 1px;" aria-hidden="true"></i></button> -->
                              </div>
                            </div>
                          </div>
                          <hr>
                          <!-- OVER STOP -->
                            <div class="row">
                              <div class="col-sm-1">
                                <img class="img-30" src="assets/image/overStopped.png" />
                              </div>
                              <div class="col-sm" style="padding-top:4px">
                                <strong>{{'Over Stopped Notification' | translate}}</strong>
                              </div>
                              <div style="text-align: center;" class="col-sm-1">
                                <md-slide-toggle class="js-single" color="#1abc9c" switchColor="#fff" size="small"
                                  [(ngModel)]="data.over_stopped.email_status" (change)=" tab('over_stopped','email_status')">
                                </md-slide-toggle>
                              </div>
                              <div style="text-align: center;" class="col-sm-1">
                                <md-slide-toggle class="js-single" color="#1abc9c" switchColor="#fff" size="small"
                                  [(ngModel)]="data.over_stopped.sms_status" (change)=" tab('over_stopped','sms_status')">
                                </md-slide-toggle>
                            
                              </div>
                              <div style="text-align: center;" class="col-sm-1">
                                <md-slide-toggle class="js-single" color="#1abc9c" switchColor="#fff" size="small"
                                  [(ngModel)]="data.over_stopped.notif_status" (change)=" tab('over_stopped','notif_status')">
                                </md-slide-toggle>
                            
                              </div>
                              <div class="col-sm-4">
                                <a class="badge" (click)=" tab1('over_stopped','priority',3)"
                                  [ngClass]="{'badge-secondary':data.over_stopped.priority!=3,'badge-success':data.over_stopped.priority==3,'disabled':!data.over_stopped.notif_status}"
                                  style="margin-left: 20px;color: white;width: 70px;height: 17px;cursor:pointer">{{'High' | translate}}</a>
                                <a class="badge" (click)=" tab1('over_stopped','priority',2)"
                                  [ngClass]="{'badge-secondary':data.over_stopped.priority!=2,'badge-success':data.over_stopped.priority==2,'disabled':!data.over_stopped.notif_status}"
                                  style="margin-left: 10px;cursor:pointer;color: white;width: 70px;height: 17px;">{{'Medium' | translate}}</a>
                                <a class="badge" (click)=" tab1('over_stopped','priority',1)"
                                  [ngClass]="{'badge-secondary':data.over_stopped.priority!=1,'badge-success':data.over_stopped.priority==1,'disabled':!data.over_stopped.notif_status}"
                                  style="margin-left: 10px;cursor:pointer;color: white;width: 70px;height: 17px;">{{'Low' | translate}}</a>
                              </div>
                              <div class="col-sm-1">
                                <div class="row">
                                  <button title="Add Email"
                                    style="border:1px solid transparent; background-color: transparent;margin-top:8px;cursor:pointer"
                                    (click)='onClickAddEmail("over_stopped")'>
                                    <md-icon style="float: right;width:30px;height:30px;cursor:pointer">add</md-icon>
                                  </button>
                                  <button title="Add Phone"
                                    style="border:1px solid transparent; background-color: transparent;margin-top:8px;cursor:pointer"
                                    (click)='onClickAddPhone("over_stopped")'>
                                    <md-icon style="float: right;width:30px;height:30px;cursor:pointer">add</md-icon>
                                  </button>
                                  <!-- <button (click)='onClickAddEmail("sos")' title="Add Email" class="btn btn-primary btn-outline-primary btn-icon" style="width:25px;height:25px;margin-right:4px"><i
                                                                                                                                                                                                                              class=" fa fa-plus " style="display:block;padding-left: 2px;padding-top: 1px;" aria-hidden="true"></i></button>
                                                                                                                                                                                                                          <button (click)='onClickAddPhone("sos")' title="Add Phone" class="btn btn-primary btn-outline-primary btn-icon" style="width:25px;height:25px"><i
                                                                                                                                                                                                                              class=" fa fa-plus " style="display:block;padding-left: 2px;padding-top: 1px;" aria-hidden="true"></i></button> -->
                                </div>
                              </div>
                            </div>
                            <hr>
                            <!-- Over Idle---------------------- -->
                              <div class="row">
                                <div class="col-sm-1">
                                  <img class="img-30" src="assets/image/idle.png" />
                                </div>
                                <div class="col-sm" style="padding-top:4px">
                                  <strong>{{'Over Idle Notification' | translate}}</strong>
                                </div>
                                <div style="text-align: center;" class="col-sm-1">
                                  <md-slide-toggle class="js-single" color="#1abc9c" switchColor="#fff" size="small"
                                    [(ngModel)]="data.over_idle.email_status" (change)=" tab('over_idle','email_status')">
                                  </md-slide-toggle>
                                </div>
                                <div style="text-align: center;" class="col-sm-1">
                                  <md-slide-toggle class="js-single" color="#1abc9c" switchColor="#fff" size="small"
                                    [(ngModel)]="data.over_idle.sms_status" (change)=" tab('over_idle','sms_status')">
                                  </md-slide-toggle>
                              
                                </div>
                                <div style="text-align: center;" class="col-sm-1">
                                  <md-slide-toggle class="js-single" color="#1abc9c" switchColor="#fff" size="small"
                                    [(ngModel)]="data.over_idle.notif_status" (change)=" tab('over_idle','notif_status')">
                                  </md-slide-toggle>
                              
                                </div>
                                <div class="col-sm-4">
                                  <a class="badge" (click)=" tab1('over_idle','priority',3)"
                                    [ngClass]="{'badge-secondary':data.over_idle.priority!=3,'badge-success':data.over_idle.priority==3,'disabled':!data.over_idle.notif_status}"
                                    style="margin-left: 20px;color: white;width: 70px;height: 17px;cursor:pointer">{{'High' | translate}}</a>
                                  <a class="badge" (click)=" tab1('over_idle','priority',2)"
                                    [ngClass]="{'badge-secondary':data.over_idle.priority!=2,'badge-success':data.over_idle.priority==2,'disabled':!data.over_idle.notif_status}"
                                    style="margin-left: 10px;cursor:pointer;color: white;width: 70px;height: 17px;">{{'Medium' | translate}}</a>
                                  <a class="badge" (click)=" tab1('over_idle','priority',1)"
                                    [ngClass]="{'badge-secondary':data.over_idle.priority!=1,'badge-success':data.over_idle.priority==1,'disabled':!data.over_idle.notif_status}"
                                    style="margin-left: 10px;cursor:pointer;color: white;width: 70px;height: 17px;">{{'Low' | translate}}</a>
                                </div>
                                <div class="col-sm-1">
                                  <div class="row">
                                    <button title="Add Email"
                                      style="border:1px solid transparent; background-color: transparent;margin-top:8px;cursor:pointer"
                                      (click)='onClickAddEmail("over_idle")'>
                                      <md-icon style="float: right;width:30px;height:30px;cursor:pointer">add</md-icon>
                                    </button>
                                    <button title="Add Phone"
                                      style="border:1px solid transparent; background-color: transparent;margin-top:8px;cursor:pointer"
                                      (click)='onClickAddPhone("over_idle")'>
                                      <md-icon style="float: right;width:30px;height:30px;cursor:pointer">add</md-icon>
                                    </button>
                                    <!-- <button (click)='onClickAddEmail("sos")' title="Add Email" class="btn btn-primary btn-outline-primary btn-icon" style="width:25px;height:25px;margin-right:4px"><i
                                                                                                                                                                                                                                                            class=" fa fa-plus " style="display:block;padding-left: 2px;padding-top: 1px;" aria-hidden="true"></i></button>
                                                                                                                                                                                                                                                        <button (click)='onClickAddPhone("sos")' title="Add Phone" class="btn btn-primary btn-outline-primary btn-icon" style="width:25px;height:25px"><i
                                                                                                                                                                                                                                                            class=" fa fa-plus " style="display:block;padding-left: 2px;padding-top: 1px;" aria-hidden="true"></i></button> -->
                                  </div>
                                </div>
                              </div>

                              <!-- Theft Alert -->
                              <hr>
                              <div class="row">
                                <div class="col-sm-1">
                                  <img class="img-30" src="assets/image/theft.png" />
                                </div>
                                <div class="col-sm" style="padding-top:4px">
                                  <strong>{{'Parking Notification' | translate}}</strong>
                                </div>
                                <div style="text-align: center;" class="col-sm-1">
                                  <md-slide-toggle class="js-single" color="#1abc9c" switchColor="#fff" size="small"
                                    [(ngModel)]="data.theft.email_status" (change)=" tab('theft','email_status')">
                                  </md-slide-toggle>
                                </div>
                                <div style="text-align: center;" class="col-sm-1">
                                  <md-slide-toggle class="js-single" color="#1abc9c" switchColor="#fff" size="small"
                                    [(ngModel)]="data.theft.sms_status" (change)=" tab('theft','sms_status')">
                                  </md-slide-toggle>
                              
                                </div>
                                <div style="text-align: center;" class="col-sm-1">
                                  <md-slide-toggle class="js-single" color="#1abc9c" switchColor="#fff" size="small"
                                    [(ngModel)]="data.theft.notif_status" (change)=" tab('theft','notif_status')">
                                  </md-slide-toggle>
                              
                                </div>
                                <div class="col-sm-4">
                                  <a class="badge" (click)=" tab1('theft','priority',3)"
                                    [ngClass]="{'badge-secondary':data.theft.priority!=3,'badge-success':data.theft.priority==3,'disabled':!data.theft.notif_status}"
                                    style="margin-left: 20px;color: white;width: 70px;height: 17px;cursor:pointer">{{'High' | translate}}</a>
                                  <a class="badge" (click)=" tab1('theft','priority',2)"
                                    [ngClass]="{'badge-secondary':data.theft.priority!=2,'badge-success':data.theft.priority==2,'disabled':!data.theft.notif_status}"
                                    style="margin-left: 10px;cursor:pointer;color: white;width: 70px;height: 17px;">{{'Medium' | translate}}</a>
                                  <a class="badge" (click)=" tab1('theft','priority',1)"
                                    [ngClass]="{'badge-secondary':data.theft.priority!=1,'badge-success':data.theft.priority==1,'disabled':!data.theft.notif_status}"
                                    style="margin-left: 10px;cursor:pointer;color: white;width: 70px;height: 17px;">{{'Low' | translate}}</a>
                                </div>
                                <div class="col-sm-1">
                                  <div class="row">
                                    <button title="Add Email"
                                      style="border:1px solid transparent; background-color: transparent;margin-top:8px;cursor:pointer"
                                      (click)='onClickAddEmail("theft")'>
                                      <md-icon style="float: right;width:30px;height:30px;cursor:pointer">add</md-icon>
                                    </button>
                                    <button title="Add Phone"
                                      style="border:1px solid transparent; background-color: transparent;margin-top:8px;cursor:pointer"
                                      (click)='onClickAddPhone("theft")'>
                                      <md-icon style="float: right;width:30px;height:30px;cursor:pointer">add</md-icon>
                                    </button>
                                    <!-- <button (click)='onClickAddEmail("sos")' title="Add Email" class="btn btn-primary btn-outline-primary btn-icon" style="width:25px;height:25px;margin-right:4px"><i
                                                                                                                                                                                                                                class=" fa fa-plus " style="display:block;padding-left: 2px;padding-top: 1px;" aria-hidden="true"></i></button>
                                                                                                                                                                                                                            <button (click)='onClickAddPhone("sos")' title="Add Phone" class="btn btn-primary btn-outline-primary btn-icon" style="width:25px;height:25px"><i
                                                                                                                                                                                                                                class=" fa fa-plus " style="display:block;padding-left: 2px;padding-top: 1px;" aria-hidden="true"></i></button> -->
                                  </div>
                                </div>
                              </div>


                        </app-card>
                        <!-- Basic Inputs Validation end -->
                      </div>
                    </div>

                  </div>
                </div>
              </div>
            </div>
          </div>

          <div class="row tab-pane fade" style="margin-top: 25px;" id="transections"> 

            <!-- Area Chart -->
            <div class="col-xl-12 col-lg-12">
              <div class="card shadow mb-4">
                <!-- Card Header - Dropdown -->
                <div class="card-header py-3 d-flex flex-row align-items-center justify-content-between">
                  <h6 class="m-0 font-weight-bold text-primary">{{'TRANSACTION DETAIL' | translate}}</h6>
                  <div class="nav nav-tab" style="float: right;">
                    <ul class="nav nav-tabs">
                      <li  class="nav-item" title="Search Filter">
                        <a  class="nav-link" data-toggle="collapse" data-target="#tFilter">
                          <i style="color:black" class="fas fa-filter"></i>
                        </a>
                      </li>
                    </ul>
                  </div>
          
                </div>
                <!-- Card Body -->
                <div class="card-body" style="height: 77vh;overflow: auto;padding: 0;">
                  <div class="chart-area">
                    <div class="row collapse"  id="tFilter" style="background: #d4d2da;padding-top: 5px;padding-bottom: 5px;margin: 0;">
                      <div class="col-sm-12 col-md-12 col-lg-12" style="display: flex;">
                        <div style="margin-right: 20px;display: inherit;">
                          <label style="width: inherit;margin-top: 7px;margin-right: 20px;">{{'From Date' | translate}}</label>
                          <input id="from_date" bsDatepicker class="form-control form-control-sm" style="height: 35px;width: 200px;" [bsConfig]="bsConfig"  [(ngModel)]="from_date" type="text"  placeholder="Select Date"> 
                        </div>
                        <div style="display: inherit;;margin-right: 20px;">
                          <label style="width: inherit;margin-top: 7px;margin-right: 20px;">{{'To Date' | translate}}</label>
                          <input id="to_date" bsDatepicker placeholder="Select Date" class="form-control form-control-sm" style="height: 35px;width: 200px;" [bsConfig]="bsConfig"   name="todate"  [(ngModel)]="to_date" type="text" >
                        </div>
                        <button class="btn btn-default" (click)="getTransectionDetail()" style="color:white;margin-right: 10px;height: 34px;background: #035096;">FIND</button>     
                      </div>
                    </div>
                     <div class="table100 ver1">
                       <div class="wrap-table100-nextcols js-pscroll" style="height: 77vh;overflow-y: hidden;">
                         <div class="table100-nextcols">
                          <table id="deviceTable" class="display order-column" cellspacing="0" style="font-size:15px;text-align: center;" >
                            <thead style=" background: #ADD8E6;">
                              <tr>
                               <th style="width: 200px;text-align: left;padding-left: 10px;padding-top: 10pxp;padding-bottom: 10px;color: white;font-weight: 600;white-space: nowrap;">{{'Sold By' | translate}}</th>
                                <th style="width: 200px;text-align: left;padding-left: 10px;padding-top: 10pxp;padding-bottom: 10px;color: white;font-weight: 600;white-space: nowrap;">{{'Purchased By' | translate}}</th>
                                <th style="width: 220px;text-align: left;padding-left: 10px;padding-top: 10pxp;padding-bottom: 10px;color: white;font-weight: 600;white-space: nowrap;">{{'Allocation Date' | translate}}</th>
                                <th style="width: 150px;text-align: left;padding-left: 10px;padding-top: 10pxp;padding-bottom: 10px;color: white;font-weight: 600;white-space: nowrap;">{{'Points' | translate}}</th>
                                <th style="width: 150px;text-align: left;padding-left: 10px;padding-top: 10pxp;padding-bottom: 10px;color: white;font-weight: 600;white-space: nowrap;">{{'Rate' | translate}}</th>
                                <th style="width: 190px;text-align: left;padding-left: 10px;padding-top: 10pxp;padding-bottom: 10px;color: white;font-weight: 600;white-space: nowrap;">{{'Total Amount' | translate}}</th>
                                <th style="width: 200px;text-align: left;padding-left: 10px;padding-top: 10pxp;padding-bottom: 10px;color: white;font-weight: 600;white-space: nowrap;">{{'Payment Mode' | translate}}</th>
                                <th style="width: 200px;text-align: left;padding-left: 10px;padding-top: 10pxp;padding-bottom: 10px;color: white;font-weight: 600;white-space: nowrap;">{{'Credit Date' | translate}}</th>
                                <th style="width: 150px;text-align: left;padding-left: 10px;padding-top: 10pxp;padding-bottom: 10px;color: white;font-weight: 600;white-space: nowrap;">{{'Remarks' | translate}}</th>
                              </tr>
                            </thead>
                            <tbody>
                             <tr class="row100 body" *ngFor="let point of allocatedPoints">
                               <td class="cell100 column2"  style="white-space: nowrap;cursor: pointer;text-align: left;padding-left: 10px; background: #12dc12;color:white">{{point.by.first_name?point.by.first_name:''}} {{point.by.last_name?point.by.last_name:''}}</td>
                               <td class="cell100 column2"  style="white-space: nowrap;cursor: pointer;text-align: left;padding-left: 10px;background: #f92e2e;color:white">{{point.to.first_name?point.to.first_name:''}} {{point.to.last_name?point.to.last_name:''}}</td>
                               <td class="cell100 column3" style="white-space: nowrap;cursor: pointer;text-align: left;padding-left: 10px;" >{{point.created_date|date:'dd/MM/yyyy , h:mm:ss a'}}</td>
                               <td class="cell100 column4" style="white-space: nowrap;cursor: pointer;text-align: left;padding-left: 10px;" >{{point.points}}</td>
                               <td class="cell100 column5" style="white-space: nowrap;cursor: pointer;text-align: left;padding-left: 10px;" tooltip = "Per Unit Price">{{point.rate}}</td>
                               <td class="cell100 column6" style="white-space: nowrap;cursor: pointer;text-align: left;padding-left: 10px;" >{{point.totalAmount}}</td>
                               <td class="cell100 column7" style="white-space: nowrap;cursor: pointer;text-align: left;padding-left: 10px;" >{{point.Payment_type}}</td>
                               <td class="cell100 column8" style="white-space: nowrap;cursor: pointer;text-align: left;padding-left: 10px;" >{{point.credit_date?(point.credit_date|date:'dd/MM/yyyy , h:mm:ss a'):''}}</td>
                               <td class="cell100 column9" style="white-space: nowrap;cursor: pointer;text-align: left;padding-left: 10px;" >{{point.remarks?point.remarks:''}}</td> 
                             </tr>
                           </tbody>
                          </table>
                         </div>
                       </div>
                     </div>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <div class="row tab-pane fade" style="margin-top: 25px;" id="announcement">
<div class="col-xl-12 col-lg-12">
  <div class="card shadow mb-4">
    <!-- Card Header - Dropdown -->
    <div class="card-header py-3 d-flex flex-row align-items-center justify-content-between">
      <h6 class="m-0 font-weight-bold text-primary">{{'Announcement' | translate}}</h6>
    </div>
    <!-- Card Body -->
    <div class="card-body" style="height: 420px;">
      <div class="chart-area">
        <div class="row">
          <div class="col-lg-6 col-xl-6 col-sm-12 col-md-6">
            <label for="exampleInputEmail1" style="font-weight: 500;">{{'Announcement' | translate}}</label>
            <div style="display: flex;">
              <textarea  type="text" class="form-control" id="announcement_txt" [(ngModel)]="announcement" name="announcement"
                aria-describedby="phoneHelp"></textarea>
              <button class="btn btn-default"
                style="margin-left: 25px;color:white;margin-right: 10px;height: 34px;background: #035096;"
                (click)="createAnnouncement()">
                <span *ngIf="announcement">Update</span>
                <span *ngIf="!announcement">Save</span>
                
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
          </div>

          <!-- ===============SUPPORT AND SERVICES=============================== -->
        <div class="row tab-pane fade" style="margin-top: 25px;" id="services">
          <div class="col-xl-12 col-lg-12">
            <div class="card shadow mb-4">
              <!-- Card Header - Dropdown -->
              <div class="card-header py-3 d-flex flex-row align-items-center justify-content-between">
                <h6 class="m-0 font-weight-bold text-primary">{{'Support And Services' | translate}}</h6>
              </div>
              <!-- Card Body -->
              <div class="card-body" style="height: 420px;">
                <div class="chart-area">
                  <div class="row">
                    <div class="col-lg-6 col-xl-6 col-sm-12 col-md-6 mt-3">
                      <label for="exampleInputEmail1" style="font-weight: 500;">{{'Support 1' | translate}}</label>
                      <div style="display: flex;">
                        <input [disabled]="!showAnnouncementMenu" type="text" class="form-control"  [(ngModel)]="support1"
                         >
                        </div>
                        </div>
                        <div class="col-lg-6 col-xl-6 col-sm-12 col-md-6 mt-3">
                          <label for="exampleInputEmail1" style="font-weight: 500;">{{'Support 2' | translate}}</label>
                          <div style="display: flex;">
                            <input [disabled]="!showAnnouncementMenu" type="text" class="form-control" [(ngModel)]="support2">
                          </div>
                        </div>
                        <div class="col-lg-6 col-xl-6 col-sm-12 col-md-6 mt-3">
                          <label for="exampleInputEmail1" style="font-weight: 500;">{{'Support 3' | translate}}</label>
                          <div style="display: flex;">
                            <input [disabled]="!showAnnouncementMenu" type="text" class="form-control" [(ngModel)]="support3">
                          </div>
                        </div>
                        <div class="col-lg-6 col-xl-6 col-sm-12 col-md-6 mt-3">
                          <label for="exampleInputEmail1" style="font-weight: 500;">{{'Service 1' | translate}}</label>
                          <div style="display: flex;">
                            <input [disabled]="!showAnnouncementMenu" type="text" class="form-control" [(ngModel)]="service1">
                          </div>
                        </div>
                        <div class="col-lg-6 col-xl-6 col-sm-12 col-md-6 mt-3">
                          <label for="exampleInputEmail1" style="font-weight: 500;">{{'Sevice 2' | translate}}</label>
                          <div style="display: flex;">
                            <input [disabled]="!showAnnouncementMenu" type="text" class="form-control" [(ngModel)]="service2">
                          </div>
                        </div>

                        <div *ngIf="showAnnouncementMenu" class="col-lg-12 col-xl-12 col-sm-12 col-md-12 mt-4">
                          <button class="btn btn-primary" (click)="editAccount()">Update</button>
                        </div>

                        </div>
                        </div>
                        </div>
                        </div>
                        </div>

          <div>

          </div>


        </div>


        <!-- =======================Rechage Plans ============================-->
        <div class="row tab-pane fade" style="margin-top: 25px;" id="rechargePlans">
          <div class="card shadow mb-4">
            <div class="card-header py-3 d-flex flex-row align-items-center justify-content-between">
              <h6 class="m-0 font-weight-bold text-primary">{{'Recharge Plans' | translate}}</h6>
              <button type="button" class="btn btn-outline-primary pull-right" (click)="addNewPlan()"><i class="fas fa-plus"></i> Add New Plan</button>
            </div>
            <div class="card-body" style="height: 420px;">
              <div class="row">
                <div class="card col-md-3 mr-1" *ngFor="let item of rechargePlans">
                  <div class="modal-header ">
                    <h5 style="font-weight: 500;" class="float-left bold">{{item.Name}}</h5>
                    <div class="float-right">
                      <button style="color: black;
    background-color: transparent;
    border-color: transparent;" class="btn btn-primary btn-sm" (click)="editPlan(item)">
                        <i class="fas fa-pencil-alt mr-1" ></i>
                      </button>
                      <button style="color: black;
    background-color: transparent;
    border-color: transparent;" class="btn btn-danger btn-sm" (click)="deletePlan(item._id)">
                        <i class="fas fa-trash-alt" ></i>
                      </button>
                    </div>
                  </div>
                  <div style="padding-top: 5px;" class="card-body">
                    <div class="row">
                      <div class="col-md-8">
                        <h5 style="margin-bottom: 1px;font-weight: 500;">{{item.Amount}}</h5>
                        <span>Amount</span>
                      </div>
                      <div class="col-md-4 mt-4">
                        <span *ngIf="item.Status=='Active'" class="badge badge-pill badge-success">{{item.Status}}</span>
                        <span *ngIf="item.Status=='InActive'" class="badge badge-pill badge-danger">{{item.Status}}</span>
                      </div>

                    </div>
                    
                  </div>
                  <div class="modal-footer text-center">
                    <span *ngIf="item.Duration_days==30" class="">Type: Monthly</span>
                    <span *ngIf="item.Duration_days==90" class="">Type: Quaterly</span>
                    <span *ngIf="item.Duration_days==180" class="">Type: Half Yearly</span>
                    <span *ngIf="item.Duration_days==365" class="">Type: Yearly</span>
                    <span *ngIf="item.Duration_days==1095" class="">Type: 3 Year</span>
                    <!-- <span>Monthly</span> -->
                  </div>
                  
                </div>

              </div>




            </div>
            </div>



          <div>
        
          </div>
        
        
        </div>
      
        
      

        </div>
        <!-- /.container-fluid -->

      </div>
      <!-- End of Main Content -->

      <!-- Footer -->
  
      <!-- End of Footer -->

    </div>
    <!-- End of Content Wrapper -->

  </div>
  <!-- End of Page Wrapper -->

  <!-- Scroll to Top Button-->
  <a class="scroll-to-top rounded" href="#page-top">
    <i class="fas fa-angle-up"></i>
  </a>

  <!-- Logout Modal-->
  <!-- <div class="modal fade" id="logoutModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="exampleModalLabel">Ready to Leave?</h5>
          <button class="close" type="button" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">×</span>
          </button>
        </div>
        <div class="modal-body">Select "Logout" below if you are ready to end your current session.</div>
        <div class="modal-footer">
          <button class="btn btn-secondary" type="button" data-dismiss="modal">Cancel</button>
          <a class="btn btn-primary" href="login.html">Logout</a>
        </div>
      </div>
    </div>
  </div> -->

