OneQlik/src/app/account-detail/account-detail.component.html

1625 lines
128 KiB
HTML
Raw Normal View History

2022-04-20 11:15:19 +05:30
<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> -->