<!-- <div  style="max-height: 736px;overflow: auto;overflow-x: hidden;">
  <div class="row" style="margin:0px">
      <div class="col-sm-8 col-md-8" style="text-align: right; font-size: 22px; font-weight: 500;padding-right: 60px;background: #426E86;color: white;">
            <label>{{heading}}</label>
      </div>
      <div class="col-sm-4 col-md-4" style="text-align: right; padding-top: 10px;background: #426E86;color: white;">
            <md-slide-toggle *ngIf = "!editVal" [(ngModel)]="distStaus" ngDefaultControl ></md-slide-toggle>
      </div>  
  </div>
  <div class="row"  style="margin:0px">
      <div class="col-12">
          <flash-messages style="float: center;margin:0px 1px;height:-6px;"></flash-messages>
      </div>
  </div>
  <div class="row"  style="margin:0px">
      <div class="col-sm-12 col-md-4 col-lg-4">
              <md-form-field class="example-full-width width" style="display: initial">
                      <input mdInput type="text" [(ngModel)]="userID" placeholder="{{'Enter User ID' | translate}}" name="userId" required>
                      <md-error class="pattern">{{'Please Enter User ID' | translate}}</md-error>
                  </md-form-field>
      </div>
      <div class="col-sm-12 col-md-4 col-lg-4">
              <md-form-field class="example-full-width width" style="display: initial">
                      <input mdInput type="text" [(ngModel)]="first_name" placeholder="{{'Enter First Name' | translate}}" name="first_name" required>
                      <md-error class="pattern">{{'Please Enter First Name' | translate}}</md-error>
                  </md-form-field>
      </div>
      <div class="col-sm-12 col-md-4 col-lg-4">
        <md-form-field class="example-full-width width" style="display: initial">
            <input  mdInput type="text" [(ngModel)]="last_name" placeholder="{{'Enter Last Name' | translate}}" name="last_name" required>
            <md-error class="pattern">{{'Please Enter Last Name' | translate}}</md-error>
        </md-form-field>
      </div>
  </div>
  <div class="row"  style="margin:0px">
      <div class="col-sm-12 col-md-4 col-lg-4">
        <md-form-field class="example-full-width width" style="display: initial" (click)="stren();">
            <input (keypress)="click2($event)" pattern="[^@^ ]+@[^@^ ]+\.[a-zA-Z]{2,}" mdInput type="text" [(ngModel)]="emaill" name="emaill"
                placeholder="{{'Enter Email ID *' | translate }}">
        </md-form-field>             
      </div>
      <div class="col-sm-12 col-md-4 col-lg-4">
        <md-form-field class="example-full-width width" style="width: 100%;" (click)="stren();">
            <input type="tel" id="demo" (keypress)="click1($event)" onkeydown="call(event)" mdInput  id="telephone" [(ngModel)]="phone" minlength="10" maxlength="10">
              </md-form-field>   
      </div>
      <div class="col-sm-12 col-md-4 col-lg-4">
        <md-form-field class="example-full-width width" style="display: initial">
            <input mdInput type="text" [(ngModel)]="organisation_name" placeholder="{{'Enter Organisation Name' | translate}}" name="organisation_name" >    
        </md-form-field>
      </div>
  </div>
  <div class="row"  style="margin:0px">
    <div class="col-sm-12 col-md-4 col-lg-4" style="padding-top: 17px;">
        <md-form-field class="example-full-width width" style="display: initial">
            <input mdInput type="text" [(ngModel)]="address" placeholder="{{'Enter address' | translate}}"
                name="address">
        </md-form-field>
    </div>
   
      <div class="col-sm-12 col-md-4 col-lg-4" >
              <md-form-field class="example-full-width width" style="display: initial" (click)="stre();">
                      <md-icon style="float:right;margin-bottom:12px;height:5px;cursor:pointer" (click)="showpassword('p1')" mdTooltip="Password Tips : &#013;Min 6 character & Max 12 character. Password must contain at least one small & one capital alphabet , one numeric digit and one special symbol">{{passwordIcon}}</md-icon>
                      <input (keypress)="click2($event)" pattern="(?=^.{8,}$)((?=.*\d)|(?=.*\W+))(?![.\n])(?=.*[A-Z])(?=.*[a-z]).*$" 
                          mdInput type="{{passwordtype}}"  [(ngModel)]="passwordd" name="passwordd" placeholder="{{'Enter Password' | translate}}" minlength="6"
                          maxlength="12" required>
                      <md-error class="required">{{'Invalid Password' | translate}}</md-error>
                  </md-form-field>
      </div>
      <div class="col-sm-12 col-md-4 col-lg-4" *ngIf = "editVal">
              <md-form-field class="example-full-width width" style="display: initial" (click)="stre();">
                      <md-icon style="float:right;margin-bottom:12px;height:5px;cursor:pointer" (click)="showpassword('p2')" mdTooltip="Password Tips : &#013;Min 6 character & Max 12 character. Password must contain at least one small & one capital alphabet , one numeric digit and one special symbol">{{passwordIcon_1}}</md-icon>
                      <input mdInput type="{{passwordtype_1}}"  [(ngModel)]="password2" name="password2" placeholder="{{'Confirm Password' | translate}}" minlength="6" maxlength="12"
                          required>
                      <md-error class="required">{{'Please Enter Confirm Password' | translate}}</md-error>
                  </md-form-field>
      </div>
  </div>
 
<div class="row"  style="margin:0px">
    <div class="col-sm-12 col-md-4 col-lg-4" style="padding-top: 30px;">
        <div >
            <span style="margin-right: 10px;">Welcome Message :</span>
            <md-slide-toggle style="float: right;margin-top: 5px;" [(ngModel)]="welcome_messages_status" ngDefaultControl ></md-slide-toggle>
        </div>     
    </div>
    <div class="col-sm-12 col-md-4 col-lg-4" *ngIf = "editVal">
        <label>Timezone</label>
        <div style="display:flex">
            <select id="dbselect" >
                <option *ngFor="let zone of timezoneArray"  [value]="zone.value" [selected] = "zone.value === timezone">{{ zone.viewValue }}</option>
            </select>
        </div>
    </div>
    <div class="col-sm-12 col-md-4 col-lg-4" >
        <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>
    </div>
</div>
<div class="row"  style="margin:0px">
    <div class="col-sm-12 col-md-4 col-lg-4" style="padding-top: 17px;">
        <md-form-field class="example-full-width width" style="display: initial">
            <input mdInput type="text" [(ngModel)]="speedLimit" placeholder="{{'Enter Speed Limit (KM/Hr)' | translate}}">
        </md-form-field>
    </div>

    <div class="col-sm-12 col-md-4 col-lg-4" style="padding-top: 17px;">
        <md-form-field class="example-full-width width" style="display: initial">
            <input mdInput type="text" [(ngModel)]="outOfReach" placeholder="{{'Out Of Reach (Hours)' | translate}}">
        </md-form-field>
    </div>

    <div class="col-sm-12 col-md-4 col-lg-4" style="padding-top: 30px;">
        <div>
            <span style="margin-right: 10px;">KYC Verification Mail :</span>
            <md-slide-toggle style="float: right;margin-top: 5px;" [(ngModel)]="kyc_verification_mail" ngDefaultControl>
            </md-slide-toggle>
        </div>
    </div>
</div>
  <div class="row"  style="margin:0px">
      <div class="col-12" style="padding-top: 20px;font-weight: 600;"> <span>{{'Upload Documents' | translate }}:</span>
          <button mdTooltip="{{'upload Documents' | translate}}" style="border:1px solid transparent; background-color: transparent;cursor:pointer;float:right" (click)="AddDocumentsField('addedrow')">
              <md-icon style="float: right;width:30px;height:30px;cursor:pointer">add</md-icon>
          </button>
      </div>
  </div>
  <div  style="margin:0px" class="row" *ngFor="let data of imageuploadObject; let i =index" [ngClass]="{'rowHeight':docRow}">
      <div class="col-3" style="padding-right: 0px;padding-top: 16px;">
          <md-select class="example-full-width width" style="display: initial" (ngModelChange)="documentType($event)" [(ngModel)] = "data.doctype"  placeholder="{{'Doc Type' | translate}}">
              <md-option *ngFor="let doc of documentList" [value]="doc.docId">{{doc.docName}}</md-option>
          </md-select>
      </div>
      <div class="col-3" style="margin-top: 4px;padding-right: 0px">
          <md-form-field class="example-full-width width" style="display: initial">
              <input type="text" [(ngModel)]="data.phone" mdInput placeholder="{{'Doc Number' | translate}}">
          </md-form-field>
      </div>
      <div class="col-4" style="margin-top: 7px;padding-right: 0px">
         
          <input type="file" class="form-control" placeholder='Choose a file...' (change)="onFileChanged($event)" />
      </div>
      <div class="col-2" style="padding-right: 0px">
          <md-icon style="float: right;width:50px;height:50px;color:green; cursor:pointer;padding-top:15px;" (click)="onUpload(i)">cloud_upload</md-icon>
          <md-icon style="float: right;width:50px;height:50px;color:red; cursor:pointer;padding-top:15px;" (click)="DeleteDocumentsField(i)">delete</md-icon>
      </div>
  </div>
  <div class="row"  style="margin:0px">
      <div class="col-12">
          <p style="font-size: 20px;font-weight: 600;color: #5c5c5c;margin-top: 1rem;">Billing Information</p>
      </div>
  </div>
  <div class="row"  style="margin:0px">
      <div class="col-sm-12 col-md-4 col-lg-4" style="padding-top: 16px;">
        <md-select class="example-full-width width" style="display: initial"  [(ngModel)] = "billingType"  placeholder="{{'Billing Type' | translate}}">
            <md-option *ngFor="let bill of billingTypeArr" [value]="bill">{{bill}}</md-option>
        </md-select>
      </div>
      <div class="col-sm-12 col-md-4 col-lg-4" style="display: inherit;">
        <md-select name="currency"  [(ngModel)]="currencyType" style="padding-top: 17px;">
        <md-option value="USD" selected="selected">United States Dollars</md-option>
        <md-option value="EUR">Euro</md-option>
        <md-option value="GBP">United Kingdom Pounds</md-option>
        <md-option value="DZD">Algeria Dinars</md-option>
        <md-option value="ARP">Argentina Pesos</md-option>
        <md-option value="AUD">Australia Dollars</md-option>    
        <md-option value="ATS">Austria Schillings</md-option>
        <md-option value="BSD">Bahamas Dollars</md-option>
        <md-option value="BBD">Barbados Dollars</md-option>
        <md-option value="BEF">Belgium Francs</md-option>
        <md-option value="BMD">Bermuda Dollars</md-option>
        <md-option value="BRR">Brazil Real</md-option>
        <md-option value="BGL">Bulgaria Lev</md-option>
        <md-option value="CAD">Canada Dollars</md-option>
        <md-option value="CLP">Chile Pesos</md-option>
        <md-option value="CNY">China Yuan Renmimbi</md-option>
        <md-option value="CYP">Cyprus Pounds</md-option>
        <md-option value="CSK">Czech Republic Koruna</md-option>
        <md-option value="DKK">Denmark Kroner</md-option>
        <md-option value="NLG">Dutch Guilders</md-option>
        <md-option value="XCD">Eastern Caribbean Dollars</md-option>
        <md-option value="EGP">Egypt Pounds</md-option>
        <md-option value="FJD">Fiji Dollars</md-option>
        <md-option value="FIM">Finland Markka</md-option>
        <md-option value="FRF">France Francs</md-option>
        <md-option value="DEM">Germany Deutsche Marks</md-option>
        <md-option value="XAU">Gold Ounces</md-option>
        <md-option value="GRD">Greece Drachmas</md-option>
        <md-option value="HKD">Hong Kong Dollars</md-option>
        <md-option value="HUF">Hungary Forint</md-option>
        <md-option value="ISK">Iceland Krona</md-option>
        <md-option value="INR">India Rupees</md-option>
        <md-option value="IDR">Indonesia Rupiah</md-option>
        <md-option value="IEP">Ireland Punt</md-option>
        <md-option value="ILS">Israel New Shekels</md-option>
        <md-option value="ITL">Italy Lira</md-option>
        <md-option value="JMD">Jamaica Dollars</md-option>
        <md-option value="JPY">Japan Yen</md-option>
        <md-option value="JOD">Jordan Dinar</md-option>
        <md-option value="KRW">Korea (South) Won</md-option>
        <md-option value="LBP">Lebanon Pounds</md-option>
        <md-option value="LUF">Luxembourg Francs</md-option>
        <md-option value="MYR">Malaysia Ringgit</md-option>
        <md-option value="MXP">Mexico Pesos</md-option>
        <md-option value="NLG">Netherlands Guilders</md-option>
        <md-option value="NZD">New Zealand Dollars</md-option>
        <md-option value="NOK">Norway Kroner</md-option>
        <md-option value="PKR">Pakistan Rupees</md-option>
        <md-option value="XPD">Palladium Ounces</md-option>
        <md-option value="PHP">Philippines Pesos</md-option>
        <md-option value="XPT">Platinum Ounces</md-option>
        <md-option value="PLZ">Poland Zloty</md-option>
        <md-option value="PTE">Portugal Escudo</md-option>
        <md-option value="ROL">Romania Leu</md-option>
        <md-option value="RUR">Russia Rubles</md-option>
        <md-option value="SAR">Saudi Arabia Riyal</md-option>
        <md-option value="XAG">Silver Ounces</md-option>
        <md-option value="SGD">Singapore Dollars</md-option>
        <md-option value="SKK">Slovakia Koruna</md-option>
        <md-option value="ZAR">South Africa Rand</md-option>
        <md-option value="KRW">South Korea Won</md-option>
        <md-option value="ESP">Spain Pesetas</md-option>
        <md-option value="XDR">Special Drawing Right (IMF)</md-option>
        <md-option value="SDD">Sudan Dinar</md-option>
        <md-option value="SEK">Sweden Krona</md-option>
        <md-option value="CHF">Switzerland Francs</md-option>
        <md-option value="TWD">Taiwan Dollars</md-option>
        <md-option value="THB">Thailand Baht</md-option>
        <md-option value="TTD">Trinidad and Tobago Dollars</md-option>
        <md-option value="TRL">Turkey Lira</md-option>
        <md-option value="VEB">Venezuela Bolivar</md-option>
        <md-option value="ZMK">Zambia Kwacha</md-option>
        <md-option value="EUR">Euro</md-option>
        <md-option value="XCD">Eastern Caribbean Dollars</md-option>
        <md-option value="XDR">Special Drawing Right (IMF)</md-option>
        <md-option value="XAG">Silver Ounces</md-option>
        <md-option value="XAU">Gold Ounces</md-option>
        <md-option value="XPD">Palladium Ounces</md-option>
        <md-option value="XPT">Platinum Ounces</md-option>
    </md-select>
        <md-form-field class="example-full-width width" style="display: initial;padding-top: 5px;">
            <input mdInput type="number" [(ngModel)]="billingRate" placeholder="{{'Enter Billing Rate' | translate}}"
                name="billrate">
        </md-form-field>      
    </div>
    <div class="col-sm-12 col-md-4 col-lg-4" style="display: initial;padding-top: 7px;">
        <md-form-field class="example-full-width width" style="width: 100%;" (click)="stren();">
            <input type="tel"  (keypress)="click1($event)" onkeydown="call(event)" mdInput  id="telephoneBill" [(ngModel)]="billingContactDetail"  minlength="10" maxlength="10">
              </md-form-field> 
              <small id="emailHelp" class="form-text text-muted" style="margin-top: 0;">Enter Billing Contact Detail</small>
    </div>
  </div>


<div class="row"  style="margin:0px">
  <div class="col-sm-12 col-md-4 col-lg-4">
     
      <md-form-field class="example-full-width width" style="display: initial">
          <input mdInput type="text" [(ngModel)]="billingMail" placeholder="{{'Enter Billing Email' | translate}}"
              name="billrate">
      </md-form-field>     
    
</div>
<div class="col-sm-12 col-md-4 col-lg-4" style="padding-top: 16px;">
  <md-select [(ngModel)]="plan" class="example-full-width width" style="display: initial" placeholder="Please select Plan">
      
      <md-option value="basic">Basic</md-option>
      <md-option value="advanced">Advanced</md-option>
      <md-option value="premium">Premium</md-option>
      </md-select>
</div>


</div>
<!-- ------------------------- SUpports And Service-------- --
<div class="row" style="margin:0px">
    <div class="col-12">
        <p style="font-size: 20px;font-weight: 600;color: #5c5c5c;margin-top: 1rem;">Supports And Services</p>
    </div>
</div>
<div class="row"  style="margin:0px">
    <div class="col-sm-12 col-md-4 col-lg-4" style="padding-top: 17px;">
        <md-form-field class="example-full-width width" style="display: initial">
            <input mdInput type="text" [(ngModel)]="support1" placeholder="{{'support1' | translate}}">
        </md-form-field>
    </div>
    <div class="col-sm-12 col-md-4 col-lg-4" style="padding-top: 17px;">
        <md-form-field class="example-full-width width" style="display: initial">
            <input mdInput type="text" [(ngModel)]="support2" placeholder="{{'support2' | translate}}">
        </md-form-field>
    </div>
    <div class="col-sm-12 col-md-4 col-lg-4" style="padding-top: 17px;">
        <md-form-field class="example-full-width width" style="display: initial">
            <input mdInput type="text" [(ngModel)]="support3" placeholder="{{'support3' | translate}}">
        </md-form-field>
    </div>
    <div class="col-sm-12 col-md-4 col-lg-4" style="padding-top: 17px;">
        <md-form-field class="example-full-width width" style="display: initial">
            <input mdInput type="text" [(ngModel)]="service1" placeholder="{{'service1' | translate}}">
        </md-form-field>
    </div>
    <div class="col-sm-12 col-md-4 col-lg-4" style="padding-top: 17px;">
        <md-form-field class="example-full-width width" style="display: initial">
            <input mdInput type="text" [(ngModel)]="service2" placeholder="{{'service2' | translate}}">
        </md-form-field>
    </div>
</div>


 
<div class="row" style="text-align: center;padding-top: 20px;margin:0px">
    <div class="col-12">
        <button style="background-color: #484848;color:#fdfdfd;width: 135px;" md-raised-button (click)="checkkeyandupdate()">{{'SUBMIT' | translate}}</button>
        <button style="background-color: #d81111;color:#fdfdfd;width: 135px;" md-raised-button (click)="closebox()">{{'CANCEL' | translate}}</button>
    </div>
</div>

</div> -->
<div style="height: 90vh;">
<div class="row" style="margin:0px">
    <div class="col-sm-8 col-md-8"
        style="text-align: right; font-size: 22px; font-weight: 500;padding-right: 60px;background: #426E86;color: white;">
        <label>{{heading}}</label>
    </div>
    <div class="col-sm-4 col-md-4" style="text-align: right; padding-top: 10px;background: #426E86;color: white;">
        <md-slide-toggle *ngIf="!editVal" [(ngModel)]="distStaus" ngDefaultControl></md-slide-toggle>
    </div>
</div>
<div class="row" style="margin:0px">
    <div class="col-12">
        <flash-messages style="float: center;margin:0px 1px;height:-6px;"></flash-messages>
    </div>
</div>

<ul class="nav nav-tabs" style="margin-top: 17px;" role="tablist">
    <li class="nav-item">
        <a class="nav-link active" data-toggle="tab" href="#tabs-1" role="tab">General Information</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" data-toggle="tab" href="#tabs-2" role="tab">Upload Documents</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" data-toggle="tab" href="#tabs-3" role="tab">Billing Information</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" data-toggle="tab" href="#tabs-4" role="tab">Support And Service</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" data-toggle="tab" href="#tabs-5" role="tab">Permissions</a>
    </li>
</ul><!-- Tab panes -->
<div class="tab-content" style="margin-top: 13px;margin: 20px;">
    <div class="tab-pane active" id="tabs-1" role="tabpanel">
        <div class="row" style="margin:0px">
            <div class="col-sm-12 col-md-4 col-lg-4">
                <md-form-field class="example-full-width width" style="display: initial">
                    <input mdInput type="text" [(ngModel)]="userID" placeholder="{{'Enter User ID' | translate}}" name="userId"
                        required>
                    <md-error class="pattern">{{'Please Enter User ID' | translate}}</md-error>
                </md-form-field>
            </div>
            <div class="col-sm-12 col-md-4 col-lg-4">
                <md-form-field class="example-full-width width" style="display: initial">
                    <input mdInput type="text" [(ngModel)]="first_name" placeholder="{{'Enter First Name' | translate}}"
                        name="first_name" required>
                    <md-error class="pattern">{{'Please Enter First Name' | translate}}</md-error>
                </md-form-field>
            </div>
            <div class="col-sm-12 col-md-4 col-lg-4">
                <md-form-field class="example-full-width width" style="display: initial">
                    <input mdInput type="text" [(ngModel)]="last_name" placeholder="{{'Enter Last Name' | translate}}"
                        name="last_name" required>
                    <md-error class="pattern">{{'Please Enter Last Name' | translate}}</md-error>
                </md-form-field>
            </div>
        </div>
        <div class="row" style="margin:0px">
            <div class="col-sm-12 col-md-4 col-lg-4">
                <md-form-field class="example-full-width width" style="display: initial" (click)="stren();">
                    <input (keypress)="click2($event)" pattern="[^@^ ]+@[^@^ ]+\.[a-zA-Z]{2,}" mdInput type="text"
                        [(ngModel)]="emaill" name="emaill" placeholder="{{'Enter Email ID *' | translate }}">
                </md-form-field>
            </div>
            <div class="col-sm-12 col-md-4 col-lg-4">
                <md-form-field class="example-full-width width" style="width: 100%;" (click)="stren();">
                    <input type="tel" id="demo" (keypress)="click1($event)" onkeydown="call(event)" mdInput id="telephone"
                        [(ngModel)]="phone" minlength="10" maxlength="10">
                </md-form-field>
            </div>
            <div class="col-sm-12 col-md-4 col-lg-4">
                <md-form-field class="example-full-width width" style="display: initial">
                    <input mdInput type="text" [(ngModel)]="organisation_name"
                        placeholder="{{'Enter Organisation Name' | translate}}" name="organisation_name">
                </md-form-field>
            </div>
        </div>
        <div class="row" style="margin:0px">
            <div class="col-sm-12 col-md-4 col-lg-4" style="padding-top: 17px;">
                <md-form-field class="example-full-width width" style="display: initial">
                    <input mdInput type="text" [(ngModel)]="address" placeholder="{{'Enter address' | translate}}"
                        name="address">
                </md-form-field>
            </div>
        
            <div class="col-sm-12 col-md-4 col-lg-4">
                <md-form-field class="example-full-width width" style="display: initial" (click)="stre();">
                <i class="fas fa-eye" style="float:right;margin-bottom:12px;height:5px;cursor:pointer" (click)="showpassword('p1')"
                        mdTooltip="Password Tips : &#013;Min 6 character & Max 12 character. Password must contain at least one small & one capital alphabet , one numeric digit and one special symbol"></i>

                    <!-- <md-icon style="float:right;margin-bottom:12px;height:5px;cursor:pointer" (click)="showpassword('p1')"
                        mdTooltip="Password Tips : &#013;Min 6 character & Max 12 character. Password must contain at least one small & one capital alphabet , one numeric digit and one special symbol">
                        {{passwordIcon}}</md-icon> -->
                    <input (keypress)="click2($event)"
                        pattern="(?=^.{8,}$)((?=.*\d)|(?=.*\W+))(?![.\n])(?=.*[A-Z])(?=.*[a-z]).*$" mdInput
                        type="{{passwordtype}}" [(ngModel)]="passwordd" name="passwordd"
                        placeholder="{{'Enter Password' | translate}}" minlength="6" maxlength="12" required>
                    <md-error class="required">{{'Invalid Password' | translate}}</md-error>
                </md-form-field>
            </div>
            <div class="col-sm-12 col-md-4 col-lg-4" *ngIf="editVal">
                <md-form-field class="example-full-width width" style="display: initial" (click)="stre();">
                    <i class="fas fa-eye" style="float:right;margin-bottom:12px;height:5px;cursor:pointer" (click)="showpassword('p2')"
                        mdTooltip="Password Tips : &#013;Min 6 character & Max 12 character. Password must contain at least one small & one capital alphabet , one numeric digit and one special symbol"></i>
                    <!-- <md-icon style="float:right;margin-bottom:12px;height:5px;cursor:pointer" (click)="showpassword('p2')"
                        mdTooltip="Password Tips : &#013;Min 6 character & Max 12 character. Password must contain at least one small & one capital alphabet , one numeric digit and one special symbol">
                        {{passwordIcon_1}}</md-icon> -->
                    <input mdInput type="{{passwordtype_1}}" [(ngModel)]="password2" name="password2"
                        placeholder="{{'Confirm Password' | translate}}" minlength="6" maxlength="12" required>
                    <md-error class="required">{{'Please Enter Confirm Password' | translate}}</md-error>
                </md-form-field>
            </div>
        </div>
        
        <div class="row" style="margin:0px">
            <div class="col-sm-12 col-md-4 col-lg-4" style="padding-top: 30px;">
                <div>
                    <span style="margin-right: 10px;">Welcome Message :</span>
                    <md-slide-toggle style="float: right;margin-top: 5px;" [(ngModel)]="welcome_messages_status"
                        ngDefaultControl></md-slide-toggle>
                </div>
            </div>
            <div class="col-sm-12 col-md-4 col-lg-4" *ngIf="editVal">
                <label>Timezone</label>
                <div style="display:flex">
                    <select id="dbselect">
                        <option *ngFor="let zone of timezoneArray" [value]="zone.value" [selected]="zone.value === timezone">{{
                            zone.viewValue }}</option>
                    </select>
                </div>
            </div>
            <div class="col-sm-12 col-md-4 col-lg-4">
                <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>
            </div>
        </div>
        <div class="row" style="margin:0px">
            <div class="col-sm-12 col-md-4 col-lg-4" style="padding-top: 17px;">
                <md-form-field class="example-full-width width" style="display: initial">
                    <input mdInput type="text" [(ngModel)]="speedLimit"
                        placeholder="{{'Enter Speed Limit (KM/Hr)' | translate}}">
                </md-form-field>
            </div>
        
            <div class="col-sm-12 col-md-4 col-lg-4" style="padding-top: 17px;">
                <md-form-field class="example-full-width width" style="display: initial">
                    <input mdInput type="text" [(ngModel)]="outOfReach" placeholder="{{'Out Of Reach (Hours)' | translate}}">
                </md-form-field>
            </div>
        
            <div class="col-sm-12 col-md-4 col-lg-4" style="padding-top: 30px;">
                <div>
                    <span style="margin-right: 10px;">KYC Verification Mail :</span>
                    <md-slide-toggle style="float: right;margin-top: 5px;" [(ngModel)]="kyc_verification_mail" ngDefaultControl>
                    </md-slide-toggle>
                </div>
            </div>
        </div>
        <div class="row" style="margin:0px">
            <div class="col-sm-12 col-md-4 col-lg-4" style="padding-top: 30px;">
                <div>
                    <span style="margin-right: 10px;">Inventory :</span>
                    <md-slide-toggle style="float: right;margin-top: 5px;" [(ngModel)]="inventoryManagement" ngDefaultControl>
                    </md-slide-toggle>
                </div>
            </div>
            <div class="col-sm-12 col-md-4 col-lg-4" style="padding-top: 30px;">
                <div>
                    <span style="margin-right: 10px;">Bussiness Type :</span>
                    <md-slide-toggle style="float: right;margin-top: 5px;" [(ngModel)]="bussinessType" ngDefaultControl>
                    </md-slide-toggle>
                </div>
            </div>
        </div>
        </div>

<!-- --------------------------------Document Upload -->
<!-- <div class="tab-content" style="margin-top: 13px;margin: 20px;"> -->
    <div class="tab-pane" id="tabs-2" role="tabpanel">
        <div class="row" style="margin:0px">
            <div class="col-12" style="padding-top: 20px;font-weight: 600;"> <span>{{'Upload Documents' | translate }}:</span>
                <button mdTooltip="{{'upload Documents' | translate}}"
                    style="border:1px solid transparent; background-color: transparent;cursor:pointer;float:right"
                    (click)="AddDocumentsField('addedrow')">
                    <i class="fas fa-plus" style="float: right;width:30px;height:30px;cursor:pointer"></i>
                    <!-- <md-icon style="float: right;width:30px;height:30px;cursor:pointer">add</md-icon> -->
                </button>
            </div>
        </div>
        <div style="margin:0px" class="row" *ngFor="let data of imageuploadObject; let i =index"
            [ngClass]="{'rowHeight':docRow}">
            <div class="col-3" style="padding-right: 0px;padding-top: 16px;">
                <md-select class="example-full-width width" style="display: initial" (ngModelChange)="documentType($event)"
                    [(ngModel)]="data.doctype" placeholder="{{'Doc Type' | translate}}">
                    <md-option *ngFor="let doc of documentList" [value]="doc.docId">{{doc.docName}}</md-option>
                </md-select>
            </div>
            <div class="col-3" style="margin-top: 4px;padding-right: 0px">
                <md-form-field class="example-full-width width" style="display: initial">
                    <input type="text" [(ngModel)]="data.phone" mdInput placeholder="{{'Doc Number' | translate}}">
                </md-form-field>
            </div>
            <div class="col-4" style="margin-top: 7px;padding-right: 0px">
        
                <input type="file" class="form-control" placeholder='Choose a file...' (change)="onFileChanged($event)" />
            </div>
            <div class="col-2" style="padding-right: 0px">
                <i class="fas fa-cloud-upload-alt" style="float: right;width:50px;height:50px;color:green; cursor:pointer;padding-top:15px;"
                    (click)="onUpload(i)"></i>
                    <i class="fas fa-trash-alt"
                        style="float: right;width:50px;height:50px;color:red; cursor:pointer;padding-top:15px;"
                    (click)="DeleteDocumentsField(i)"></i>
                
                    <!-- <md-icon style="float: right;width:50px;height:50px;color:green; cursor:pointer;padding-top:15px;"
                    (click)="onUpload(i)">cloud_upload</md-icon> -->
                <!-- <md-icon style="float: right;width:50px;height:50px;color:red; cursor:pointer;padding-top:15px;"
                    (click)="DeleteDocumentsField(i)">delete</md-icon> -->
            </div>
        </div>
    </div>
<!-- </div> -->
<!-- --------------------------------Billing Information -->
<!-- <div class="tab-content" style="margin-top: 13px;margin: 20px;"> -->
    <div class="tab-pane" id="tabs-3" role="tabpanel">
        <div class="row" style="margin:0px">
            <div class="col-12">
                <p style="font-size: 20px;font-weight: 600;color: #5c5c5c;margin-top: 1rem;">Billing Information</p>
            </div>
        </div>
        <div class="row" style="margin:0px">
            <div class="col-sm-12 col-md-4 col-lg-4" style="padding-top: 16px;">
                <md-select class="example-full-width width" style="display: initial" [(ngModel)]="billingType"
                    placeholder="{{'Billing Type' | translate}}">
                    <md-option *ngFor="let bill of billingTypeArr" [value]="bill">{{bill}}</md-option>
                </md-select>
            </div>
            <div class="col-sm-12 col-md-4 col-lg-4" style="display: inherit;">
                <md-select name="currency" [(ngModel)]="currencyType" style="padding-top: 17px;">
                    <md-option value="USD" selected="selected">United States Dollars</md-option>
                    <md-option value="EUR">Euro</md-option>
                    <md-option value="GBP">United Kingdom Pounds</md-option>
                    <md-option value="DZD">Algeria Dinars</md-option>
                    <md-option value="ARP">Argentina Pesos</md-option>
                    <md-option value="AUD">Australia Dollars</md-option>
                    <md-option value="ATS">Austria Schillings</md-option>
                    <md-option value="BSD">Bahamas Dollars</md-option>
                    <md-option value="BBD">Barbados Dollars</md-option>
                    <md-option value="BEF">Belgium Francs</md-option>
                    <md-option value="BMD">Bermuda Dollars</md-option>
                    <md-option value="BRR">Brazil Real</md-option>
                    <md-option value="BGL">Bulgaria Lev</md-option>
                    <md-option value="CAD">Canada Dollars</md-option>
                    <md-option value="CLP">Chile Pesos</md-option>
                    <md-option value="CNY">China Yuan Renmimbi</md-option>
                    <md-option value="CYP">Cyprus Pounds</md-option>
                    <md-option value="CSK">Czech Republic Koruna</md-option>
                    <md-option value="DKK">Denmark Kroner</md-option>
                    <md-option value="NLG">Dutch Guilders</md-option>
                    <md-option value="XCD">Eastern Caribbean Dollars</md-option>
                    <md-option value="EGP">Egypt Pounds</md-option>
                    <md-option value="FJD">Fiji Dollars</md-option>
                    <md-option value="FIM">Finland Markka</md-option>
                    <md-option value="FRF">France Francs</md-option>
                    <md-option value="DEM">Germany Deutsche Marks</md-option>
                    <md-option value="XAU">Gold Ounces</md-option>
                    <md-option value="GRD">Greece Drachmas</md-option>
                    <md-option value="HKD">Hong Kong Dollars</md-option>
                    <md-option value="HUF">Hungary Forint</md-option>
                    <md-option value="ISK">Iceland Krona</md-option>
                    <md-option value="INR">India Rupees</md-option>
                    <md-option value="IDR">Indonesia Rupiah</md-option>
                    <md-option value="IEP">Ireland Punt</md-option>
                    <md-option value="ILS">Israel New Shekels</md-option>
                    <md-option value="ITL">Italy Lira</md-option>
                    <md-option value="JMD">Jamaica Dollars</md-option>
                    <md-option value="JPY">Japan Yen</md-option>
                    <md-option value="JOD">Jordan Dinar</md-option>
                    <md-option value="KRW">Korea (South) Won</md-option>
                    <md-option value="LBP">Lebanon Pounds</md-option>
                    <md-option value="LUF">Luxembourg Francs</md-option>
                    <md-option value="MYR">Malaysia Ringgit</md-option>
                    <md-option value="MXP">Mexico Pesos</md-option>
                    <md-option value="NLG">Netherlands Guilders</md-option>
                    <md-option value="NZD">New Zealand Dollars</md-option>
                    <md-option value="NOK">Norway Kroner</md-option>
                    <md-option value="PKR">Pakistan Rupees</md-option>
                    <md-option value="XPD">Palladium Ounces</md-option>
                    <md-option value="PHP">Philippines Pesos</md-option>
                    <md-option value="XPT">Platinum Ounces</md-option>
                    <md-option value="PLZ">Poland Zloty</md-option>
                    <md-option value="PTE">Portugal Escudo</md-option>
                    <md-option value="ROL">Romania Leu</md-option>
                    <md-option value="RUR">Russia Rubles</md-option>
                    <md-option value="SAR">Saudi Arabia Riyal</md-option>
                    <md-option value="XAG">Silver Ounces</md-option>
                    <md-option value="SGD">Singapore Dollars</md-option>
                    <md-option value="SKK">Slovakia Koruna</md-option>
                    <md-option value="ZAR">South Africa Rand</md-option>
                    <md-option value="KRW">South Korea Won</md-option>
                    <md-option value="ESP">Spain Pesetas</md-option>
                    <md-option value="XDR">Special Drawing Right (IMF)</md-option>
                    <md-option value="SDD">Sudan Dinar</md-option>
                    <md-option value="SEK">Sweden Krona</md-option>
                    <md-option value="CHF">Switzerland Francs</md-option>
                    <md-option value="TWD">Taiwan Dollars</md-option>
                    <md-option value="THB">Thailand Baht</md-option>
                    <md-option value="TTD">Trinidad and Tobago Dollars</md-option>
                    <md-option value="TRL">Turkey Lira</md-option>
                    <md-option value="VEB">Venezuela Bolivar</md-option>
                    <md-option value="ZMK">Zambia Kwacha</md-option>
                    <md-option value="EUR">Euro</md-option>
                    <md-option value="XCD">Eastern Caribbean Dollars</md-option>
                    <md-option value="XDR">Special Drawing Right (IMF)</md-option>
                    <md-option value="XAG">Silver Ounces</md-option>
                    <md-option value="XAU">Gold Ounces</md-option>
                    <md-option value="XPD">Palladium Ounces</md-option>
                    <md-option value="XPT">Platinum Ounces</md-option>
                </md-select>
                <md-form-field class="example-full-width width" style="display: initial;padding-top: 5px;">
                    <input mdInput type="number" [(ngModel)]="billingRate" placeholder="{{'Enter Billing Rate' | translate}}"
                        name="billrate">
                </md-form-field>
            </div>
            <div class="col-sm-12 col-md-4 col-lg-4" style="display: initial;padding-top: 7px;">
                <md-form-field class="example-full-width width" style="width: 100%;" (click)="stren();">
                    <input type="tel" (keypress)="click1($event)" onkeydown="call(event)" mdInput id="telephoneBill"
                        [(ngModel)]="billingContactDetail" minlength="10" maxlength="10">
                </md-form-field>
                <small id="emailHelp" class="form-text text-muted" style="margin-top: 0;">Enter Billing Contact Detail</small>
            </div>
        </div>
        
        
        <div class="row" style="margin:0px">
            <div class="col-sm-12 col-md-4 col-lg-4">
        
                <md-form-field class="example-full-width width" style="display: initial">
                    <input mdInput type="text" [(ngModel)]="billingMail" placeholder="{{'Enter Billing Email' | translate}}"
                        name="billrate">
                </md-form-field>
        
            </div>
            <div class="col-sm-12 col-md-4 col-lg-4" style="padding-top: 16px;">
                <md-select [(ngModel)]="plan" class="example-full-width width" style="display: initial"
                    placeholder="Please select Plan">
        
                    <md-option value="basic">Basic</md-option>
                    <md-option value="advanced">Advanced</md-option>
                    <md-option value="premium">Premium</md-option>
                </md-select>
            </div>
        
        
        </div>
    </div>
<!-- </div> -->
<!-- --------------------------------Supports And Services -->
<!-- <div class="tab-content" style="margin-top: 13px;margin: 20px;"> -->
    <div class="tab-pane" id="tabs-4" role="tabpanel">
        <div class="row" style="margin:0px">
            <div class="col-12">
                <p style="font-size: 20px;font-weight: 600;color: #5c5c5c;margin-top: 1rem;">Supports And Services</p>
            </div>
        </div>
        <div class="row" style="margin:0px">
            <div class="col-sm-12 col-md-4 col-lg-4" style="padding-top: 17px;">
                <md-form-field class="example-full-width width" style="display: initial">
                    <input mdInput type="text" [(ngModel)]="support1" placeholder="{{'support1' | translate}}">
                </md-form-field>
            </div>
            <div class="col-sm-12 col-md-4 col-lg-4" style="padding-top: 17px;">
                <md-form-field class="example-full-width width" style="display: initial">
                    <input mdInput type="text" [(ngModel)]="support2" placeholder="{{'support2' | translate}}">
                </md-form-field>
            </div>
            <div class="col-sm-12 col-md-4 col-lg-4" style="padding-top: 17px;">
                <md-form-field class="example-full-width width" style="display: initial">
                    <input mdInput type="text" [(ngModel)]="support3" placeholder="{{'support3' | translate}}">
                </md-form-field>
            </div>
            <div class="col-sm-12 col-md-4 col-lg-4" style="padding-top: 17px;">
                <md-form-field class="example-full-width width" style="display: initial">
                    <input mdInput type="text" [(ngModel)]="service1" placeholder="{{'service1' | translate}}">
                </md-form-field>
            </div>
            <div class="col-sm-12 col-md-4 col-lg-4" style="padding-top: 17px;">
                <md-form-field class="example-full-width width" style="display: initial">
                    <input mdInput type="text" [(ngModel)]="service2" placeholder="{{'service2' | translate}}">
                </md-form-field>
            </div>
        </div>
    </div>
<!-- </div> -->
<!-- --------------------------------Device And User Settings-->
<!-- <div class="tab-content" style="margin-top: 13px;margin: 20px;"> -->
    <div class="tab-pane" id="tabs-5" role="tabpanel">

        <div class="form-group row m-2">
            <label for="options" class="ml-3 mr-4">User Setting :</label>
            <div  class="mr-3" *ngFor="let option of UserOptions">
                <label>
                    <input type="checkbox" name="options" value="{{option.value}}" [checked]="option.value"
                        (change)="updateCheckedOptions(option.name, !option.value,'user')" />
                    {{option.name}}
                </label>
            </div>
        </div>
        <div class="form-group row m-2">
            <label for="options" class="ml-3 mr-4">Device Setting :</label>
            <div class="mr-3" *ngFor="let option of DeviceOptions">
                <label>
                    <input type="checkbox" name="options" value="{{option.value}}" [checked]="option.value"
                        (change)="updateCheckedOptions(option.name, !option.value,'device')" />
                    {{option.name}}
                </label>
            </div>
        </div>
    </div>
</div>

<div class="row" style="text-align: center;padding-top: 20px;margin:0px">
    <div class="col-12">
        <button style="background-color: #484848;color:#fdfdfd;width: 135px;" md-raised-button
            (click)="checkkeyandupdate()">{{'SUBMIT' | translate}}</button>
        <button style="background-color: #d81111;color:#fdfdfd;width: 135px;" md-raised-button
            (click)="closebox()">{{'CANCEL' | translate}}</button>
    </div>
</div>
</div>