<div class="container-fluid" style="background: #f9f9f9;padding:0px;height:80vh;padding: 18px;">
        <div style="text-align: center; font-size: 22px; font-weight: 500; background: #426E86; padding-top: 5px; color: white; padding-bottom: 5px;">
            <p style="margin-bottom: 0px;">{{title | translate}}</p>
        </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-6">
                    <md-form-field class="example-full-width width">
                            <input mdInput type="text" [(ngModel)]="userID" placeholder="Enter User ID" name="userId" required>
                            <!-- <md-error class="pattern">{{'Please Enter User ID' | translate}}</md-error> -->
                        </md-form-field>
            </div>
            <div class="col-6">
                    <md-form-field class="example-full-width width">
                            <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>
        <div class="row" style="margin:0px">
            <div class="col-6">
                    <md-form-field class="example-full-width width">
                            <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 class="col-6">
                    <md-form-field class="example-full-width width" (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>
        <div class="row" style="margin:0px">
            <div class="col-6">
                    <md-form-field class="example-full-width width" (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-6">
                    <md-form-field class="example-full-width width" (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-6">
                    <!-- <md-form-field class="example-full-width width" (click)="stren();">
                            <input (keypress)="click1($event)" onkeydown="call(event)" mdInput type="text" minlength="10" maxlength="10" [(ngModel)]="phone"
                                name="phone" placeholder="{{'Enter Mobile Number' | translate}}">
                        </md-form-field> -->
                       <md-form-field class="example-full-width width" (click)="stren();">
                        <input type="tel" id="demo" (keypress)="click1($event)" onkeydown="call(event)" mdInput  id="telephone" [(ngModel)]="phone" >
                          </md-form-field> 
            </div>
            <div class="col-6">
                    <md-input-container class="example-full-width width">
                            <input [disabled]="!superAdmin" mdInput placeholder="{{'Search Dealer' | translate}}" [mdAutocomplete]="tdAuto2" name="state" #state="ngModel" [(ngModel)]="dealerName"
                                (ngModelChange)="filterDealerStates(dealerName)">
                            <md-autocomplete #tdAuto2="mdAutocomplete">
                                <md-option *ngFor="let dealer of dealerSelect" [value]="dealer.dealer_firstname" (click)="dealerFinalVal(dealer)">
                                    <span>{{ dealer.dealer_firstname?dealer.dealer_firstname:"" }} {{dealer.dealer_lastname?dealer.dealer_lastname:""}}</span>
                                </md-option>
                            </md-autocomplete>
                        </md-input-container>
            </div>
        </div>
        <div class="row" style="margin:0px">
            <div class="col-6">
                <md-form-field class="example-full-width width">
                    <input mdInput type="text" [(ngModel)]="address" placeholder="{{'Enter address' | translate}}" name="address" >
                    <md-error class="pattern">{{'Please Enter address' | translate}}</md-error>
                </md-form-field>
            </div>
            <div class="col-6">
                <lable>Timezone</lable>
                <select id="dbselect" >
                    <option *ngFor="let zone of timezoneArray"  [value]="zone.value" [selected] = "zone.value === timezone">{{ zone.viewValue }}</option>
                </select>
            </div>
        </div>
        <div class="row" style="margin:0px">
            <div class="col-12"> <span>{{'Upload Documents' | translate}} :</span>
                <button mdTooltip="upload Documents" 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> -->
                    <i class="fas fa-plus" style="float: right;width:30px;height:30px;cursor:pointer"></i>
                </button>
            </div>
        </div>
        <div class="row" style="margin:0px" *ngFor="let data of imageuploadObject; let i =index" [ngClass]="{'rowHeight':docRow}">
            <div class="col-3" style="padding-right: 0px">
                <md-select class="example-full-width width" (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">
                    <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="btn btn btn-success" style="background: #f1f1f1;border: none;color: black;width:190px;" (change)="onFileChanged($event)"> -->
                <input type="file" class="form-control" placeholder='{{"Choose a file..." | translate}}' (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>

 <!-- <md-expansion-panel style="background: #fcfbfb;box-shadow: none"> -->
    <!-- <md-expansion-panel-header>
        <md-panel-title style="font-size: 15px;font-weight: 500;color: #615c5c;text-align: left; ">{{'ADDITIONAL SETTING' | translate}}
        </md-panel-title>
    </md-expansion-panel-header>  -->
    <span data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample"
    style="font-size: 15px;font-weight: 500;color: #615c5c;text-align: left; ">{{'EMERGENCY CONTACT' | translate}}</span>
 
    <div class="collapse" id="collapseExample">
    <form [formGroup]="emergencyForm">
<div class="row" style="margin:0px">
    <div class="col-6" style="border: solid 1px black;
    margin-top: 8px;">
    <h6 style="text-align: center;margin-top: 10px;">Contact Details 1</h6>
<md-form-field class="example-full-width width">
    <input mdInput type="text" formControlName="emg_name1" placeholder="{{'Enter name' | translate}}" name="name">
    <!-- <md-error class="pattern">{{'Please Enter address' | translate}}</md-error> -->
</md-form-field>

<md-form-field class="example-full-width width">
    <input mdInput type="text" formControlName="emg_cell1" placeholder="{{'Enter Mobile Number 1' | translate}}"
        name="emg_cell1">
    <!-- <md-error class="pattern">{{'Please Enter address' | translate}}</md-error> -->
</md-form-field>

<md-form-field class="example-full-width width">
    <input mdInput type="text" formControlName="emg_cell2" placeholder="{{'Enter Mobile Number 2' | translate}}"
        name="emg_cell2">
    <!-- <md-error class="pattern">{{'Please Enter address' | translate}}</md-error> -->
</md-form-field>

<md-form-field class="example-full-width width">
    <input mdInput type="text" formControlName="emg_phone1" placeholder="{{'Enter phone Number 1' | translate}}"
        name="emg_phone1">
    <!-- <md-error class="pattern">{{'Please Enter address' | translate}}</md-error> -->
</md-form-field>

<md-form-field class="example-full-width width">
    <input mdInput type="text" formControlName="emg_phone2" placeholder="{{'Enter phone Number 2' | translate}}"
        name="emg_phone2">
    <!-- <md-error class="pattern">{{'Please Enter address' | translate}}</md-error> -->
</md-form-field>
        </div>
<div class="col-6" style="border: solid 1px black;
    margin-top: 8px;">
    <h6 style="text-align: center;margin-top: 10px;" >Contact Details 2</h6>

    <md-form-field class="example-full-width width">
        <input mdInput type="text" formControlName="emg_name2" placeholder="{{'Enter name' | translate}}" name="name">
        <!-- <md-error class="pattern">{{'Please Enter address' | translate}}</md-error> -->
    </md-form-field>
    
    <md-form-field class="example-full-width width">
        <input mdInput type="text" formControlName="emg_cell3" placeholder="{{'Enter Mobile Number 1' | translate}}"
            name="emg_cell1">
        <!-- <md-error class="pattern">{{'Please Enter address' | translate}}</md-error> -->
    </md-form-field>
    
    <md-form-field class="example-full-width width">
        <input mdInput type="text" formControlName="emg_cell4" placeholder="{{'Enter Mobile Number 2' | translate}}"
            name="emg_cell2">
        <!-- <md-error class="pattern">{{'Please Enter address' | translate}}</md-error> -->
    </md-form-field>
    
    <md-form-field class="example-full-width width">
        <input mdInput type="text" formControlName="emg_phone3" placeholder="{{'Enter phone Number 1' | translate}}"
            name="emg_phone1">
        <!-- <md-error class="pattern">{{'Please Enter address' | translate}}</md-error> -->
    </md-form-field>
    
    <md-form-field class="example-full-width width">
        <input mdInput type="text" formControlName="emg_phone4" placeholder="{{'Enter phone Number 2' | translate}}"
            name="emg_phone2">
        <!-- <md-error class="pattern">{{'Please Enter address' | translate}}</md-error> -->
    </md-form-field>


    </div>


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




        <!-- <md-form-field class="example-full-width width">
            <input mdInput type="text" formControlName="emg_name1" placeholder="{{'Enter name' | translate}}" name="name">
        </md-form-field>
<div class="row" style="margin:0px">
    <div class="col-6">
        <md-form-field class="example-full-width width">
            <input mdInput type="text" formControlName="emg_cell1" placeholder="{{'Enter Mobile Number' | translate}}"
                name="emg_cell1">
           
        </md-form-field>
    </div>
    <div class="col-6">
        <md-form-field class="example-full-width width">
            <input mdInput type="text" formControlName="emg_cell2" placeholder="{{'Enter Mobile Number' | translate}}"
                name="emg_cell2">
           
        </md-form-field>
    </div>
</div>

<div class="row" style="margin:0px">
    <div class="col-6">
        <md-form-field class="example-full-width width">
            <input mdInput type="text" formControlName="emg_phone1" placeholder="{{'Enter Mobile Number' | translate}}"
                name="emg_phone1">
           
        </md-form-field>
    </div>
    <div class="col-6">
        <md-form-field class="example-full-width width">
            <input mdInput type="text" formControlName="emg_phone2" placeholder="{{'Enter Mobile Number' | translate}}"
                name="emg_phone2">
           
        </md-form-field>
    </div>
</div>
<md-form-field class="example-full-width width">
    <input mdInput type="text" formControlName="emg_name2" placeholder="{{'Enter name' | translate}}" name="name">
   
</md-form-field>
<div class="row" style="margin:0px">
    <div class="col-6">
        <md-form-field class="example-full-width width">
            <input mdInput type="text" formControlName="emg_cell3" placeholder="{{'Enter Mobile Number' | translate}}"
                name="emg_cell3">
           
        </md-form-field>
    </div>
    <div class="col-6">
        <md-form-field class="example-full-width width">
            <input mdInput type="text" formControlName="emg_cell4" placeholder="{{'Enter Mobile Number' | translate}}"
                name="emg_cell4">
           
        </md-form-field>
    </div>
</div>

<div class="row" style="margin:0px">
    <div class="col-6">
        <md-form-field class="example-full-width width">
            <input mdInput type="text" formControlName="emg_phone3" placeholder="{{'Enter Mobile Number' | translate}}"
                name="emg_phone3">
           
        </md-form-field>
    </div>
    <div class="col-6">
        <md-form-field class="example-full-width width">
            <input mdInput type="text" formControlName="emg_phone4" placeholder="{{'Enter Mobile Number' | translate}}"
                name="emg_phone4">
            !-- <md-error class="pattern">{{'Please Enter address' | translate}}</md-error> --
        </md-form-field>
    </div>
</div> -->
  
<!-- </md-expansion-panel> -->



        <div class="row" style="text-align: center;padding-top: 20px;margin:0px">
            <div class="col-12">
                <button *ngIf="!isTechnician" style="background-color:rgb(48, 100, 197);color:#fdfdfd;width: 135px;" md-raised-button (click)="addContact2()">{{'SUBMIT' | translate}}</button>
                <button *ngIf="isTechnician" style="background-color:rgb(48, 100, 197);color:#fdfdfd;width: 135px;" md-raised-button
                    (click)="addContact3()">{{'SUBMIT' | translate}}</button>
                <button style="background-color: #d81111;color:#fdfdfd;width: 135px;" md-raised-button (click)="closebox()">{{'CANCEL' | translate}}</button>
            </div>
        </div>

        <!-- <button type="button" class="btn btn-info" data-toggle="collapse" data-target="#demo">Simple collapsible</button>
        <div id="demo" class="collapse">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit,
            sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
        </div> -->
    </div>





    <!-- ===============================backup================================================= -->

  
<!-- <div style="height:90vh;">
        <h4 style="text-align:center;">Add Custumer</h4>
       
        <div class="row">
            <div class="col-sm-4" style="padding-top: 15px;">
                <span >User ID:</span>
            </div>
            <div class="col-sm-8">
                <md-form-field class="example-full-width width">
                    <input mdInput type="text" [(ngModel)]="userID" placeholder="Enter User ID" name="userId" required>
                    <md-error class="pattern">Please Enter User ID</md-error>
                </md-form-field>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-4"  style="padding-top: 15px;">
                <span >First Name:</span>
            </div>
            <div class="col-sm-8">
                <md-form-field class="example-full-width width">
                    <input mdInput type="text" [(ngModel)]="first_name" placeholder="Enter First Name" name="first_name" required>
                    <md-error class="pattern">Please Enter First Name</md-error>
                </md-form-field>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-4"  style="padding-top: 15px;">
                <span >Last Name:</span>
            </div>
            <div class="col-sm-8">
                <md-form-field class="example-full-width width">
                    <input  mdInput type="text" [(ngModel)]="last_name" placeholder="Enter Last Name" name="last_name" required>
                    <md-error class="pattern">Please Enter Last Name</md-error>
                </md-form-field>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-4"  style="padding-top: 15px;">
                <span >Email ID:</span>
            </div>
            <div class="col-sm-8">
                <md-form-field class="example-full-width width" (click)="stren();">
                    <input (keypress)="click2($event)" pattern="[^@^ ]+@[^@^ ]+\.[a-zA-Z]{2,}" mdInput type="text" [(ngModel)]="emaill" name="emaill"
                        placeholder="Enter Email ID">
                </md-form-field>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-4"  style="padding-top: 15px;">
                <span >Password:</span>
            </div>
            <div class="col-sm-8">
                <md-form-field class="example-full-width width" (click)="stre();">
    
                    <md-icon style="float:right;margin-bottom:12px;height:5px;cursor:pointer" 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">info_outline</md-icon>
                    <input (keypress)="click2($event)" pattern="(?=^.{8,}$)((?=.*\d)|(?=.*\W+))(?![.\n])(?=.*[A-Z])(?=.*[a-z]).*$" (keypress)="click2($event2)"
                        mdInput type="password" [(ngModel)]="passwordd" name="passwordd" placeholder="Enter Password" minlength="6"
                        maxlength="12" required>
                    <md-error class="required">Invalid Password</md-error>
                </md-form-field>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-4"  style="padding-top: 15px;">
                <span >Confirm Password:</span>
            </div>
            <div class="col-sm-8">
                <md-form-field class="example-full-width width" (click)="stre();">
                    <input mdInput type="password" [(ngModel)]="password2" name="password2" placeholder="Confirm Password" minlength="6" maxlength="12"
                        required>
                    <md-error class="required">Please Enter Confirm Password</md-error>
                </md-form-field>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-4"  style="padding-top: 15px;">
                <span >Mobile Number:</span>
            </div>
            <div class="col-sm-8">
                <md-form-field class="example-full-width width" (click)="stren();">
                    <input (keypress)="click1($event)" onkeydown="call(event)" mdInput type="text" minlength="10" maxlength="10" [(ngModel)]="phone"
                        name="phone" placeholder="Enter Mobile Number">
                </md-form-field>
            </div>
        </div>
    
    
      <p>upload document</p>
        <div class="row">
            <div class = "col-sm-6">
                <span>Upload Documents * :</span>
            </div>
            <div class = "col-sm-6">
                <button mdTooltip="upload Documents"  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="overflow: scroll" [ngClass]="{'rowHeight':docRow}">
        <div class= "row" style="margin-bottom: 2%;" *ngFor="let data of imageuploadObject; let i =index">
            <div class="col-sm-2" >
                    <md-select (ngModelChange)="documentType($event)" [(ngModel)] = "data.doctype" placeholder = "Doc Type">
                      <md-option *ngFor="let doc of documentList" [value]="doc.docId">{{doc.docName}}</md-option>
                    </md-select>
            </div>
             <div class="col-sm-10" style="margin-top: 2%;">
                <input type="text" style ="margin-right: 2%;margin-left: 7px;" [(ngModel)]="data.phone" placeholder="Doc number">
                <span><input type="file" class="btn btn btn-success" style ="background: #f1f1f1;border: none;color: black;margin-right: 2%;width:36%;" (change)="onFileChanged($event)" ></span>
                <span><button class="btn btn btn-success" (click)="onUpload(i)">Upload!</button></span>
                <span><button mdTooltip="Delete field" style="padding:0px;border:1px solid transparent; background-color: transparent;cursor:pointer;float:right" (click)="DeleteDocumentsField(i)"><md-icon style="float: right;width:50px;height:50px;color:red; cursor:pointer">delete</md-icon></button></span>
            </div>
        </div>
    </div>
  <p>upload document</p>
        <div class="row">
            <div class="col-sm-4"  style="padding-top: 15px;">
                <span >Dealer:</span>
            </div>
            <div class="col-sm-8">
                    <md-input-container>
                            <input [disabled]="!superAdmin" mdInput placeholder="Search Dealer" [mdAutocomplete]="tdAuto2" name="state" #state="ngModel" [(ngModel)]="dealerName"
                                (ngModelChange)="filterDealerStates(dealerName)">
                            <md-autocomplete #tdAuto2="mdAutocomplete">
                                <md-option *ngFor="let dealer of dealerSelect" [value]="dealer.dealer_firstname" (click)="dealerFinalVal(dealer)">
                                    <span>{{ dealer.dealer_firstname?dealer.dealer_firstname:"" }} {{dealer.dealer_lastname?dealer.dealer_lastname:""}}</span>
                                </md-option>
                            </md-autocomplete>
                        </md-input-container>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-4"  style="padding-top: 15px;">
                <span >Address :</span>
            </div>
            <div class="col-sm-8">
                    <md-form-field class="example-full-width width">
                            <input mdInput type="text" [(ngModel)]="address" placeholder="Enter address" name="address" required>
                            <md-error class="pattern">Please Enter address</md-error>
                        </md-form-field>        
            </div>
        </div>
        <div class="row">
            <div class="col-sm-12" style="padding-left:35%">
                <input type="submit" class="btn btn btn-success" style="cursor:pointer;width: 177px;" value="Submit" (click)="addContact2()"/>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-12">
                <flash-messages style="float: center;margin:0px 1px;height:-6px;"></flash-messages> 
            </div>
        </div>
     
    </div>
     -->