OneQlik/src/app/account-detail/account-detail.component.html
2023-01-07 17:28:53 +00:00

1624 lines
128 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<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> -->