<!-- <html>

<head>
  <link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet'>
</head>

<body background="../../assets/image/cust2.jpg">
  <app-all-menus></app-all-menus>
 

  <div style="float:left; width: 100%;padding-top: 6%;" class="scrollbar" id="style-1">
    <div class="loading" *ngIf="Load">Loading&#8230;</div> 
    <div id="toast">
      <div id="desc">{{data_descip}}</div>
    </div>
    <p class="headStyle">{{'Dealers' | translate}}</p>
    <p *ngIf="errorMsg">{{serviceResponse}}</p>
   
    <div class="row" >
      <div class="col-sm-4" style="position: inherit;">
        <button mdTooltip="{{'Add Dealer' | translate}}" style="border:1px solid transparent; background-color: transparent;margin-top:8px;cursor:pointer"
          (click)="addDealer()">
          <md-icon style="float: right;width:30px;height:30px;cursor:pointer">add</md-icon>
        </button>
        <a *ngIf="showNav" href="https://youtu.be/dg1zd2geHXA" style="cursor: pointer;color:black" title="Video tutorial" target="_blank"><md-icon class="material-icons" style="font-size: 30px"> theaters </md-icon></a>
      </div>
      <div class="col-sm-8" style="padding-left: 41%;padding-top: 1%;position: inherit;">
        <input style="border-radius: 6px;
          border: 1px solid #c7c7c7;
          border-bottom: 0px;
          padding: 12px;
          width: 175px;
          /* margin-right: 22%; */
          height: 7px;
          background-color: red;
          font-size: 12px;
          margin-top: 0;
          float: left;
          background: #fffcfc;"
          type="search" id="myInput" class="form-control" name="myInput" [(ngModel)]="myInput" placeholder="{{'Dealer Search' | translate}}"
          (ngModelChange)="searchFilter($event)" />
        <button [disabled]="lastcall" (click)="pre()" style="margin-left: 10px;">
          < {{'Previous' | translate}} </button> <button [disabled]="firstcall" (click)="next()"> {{'Next' | translate}} >
        </button>
      </div>
    </div>

    <table id="myTable" class="table table-striped" style="overflow-y: hidden;
       overflow-x: hidden;font-size:12px">
      <thead style="background-color:#A2C523 !important;color: white;">
        <tr>
          <th>{{'User ID' | translate}}</th>
          <th>{{'Name' | translate}}</th>
          <th>{{'Email ID' | translate}}</th>
          <th>{{'Phone Number' | translate}}</th>
          <th>{{'Password' | translate}}</th>
          <th>{{'Created On' | translate}}</th>
          <th>{{'Expire On' | translate}}</th>
          <th>{{'Last activity' | translate}}</th>
          <th>{{'Last login' | translate}}</th>
          <th>{{'Login type' | translate}}</th> 
          <th>{{'Total vehicles' | translate}}</th>
          <th>{{'Deleted vehicles' | translate}}</th>
          <th>{{'Token' | translate}}</th>
          <th>{{'Documents' | translate}}</th>  
          <th>{{'Edit' | translate}}</th>
          <th>{{'Delete' | translate}}</th>
          <th>{{'Dealers Status' | translate}}</th>
          <th>{{'Dealer Permission' | translate}}</th>
          <th>{{'Add Point' | translate}}</th>
        </tr>
      </thead>
      <tbody>
        <tr *ngFor="let dealer of dealers_info">
          <td style="cursor:pointer" (click)="dealerSwitch(dealer)">{{dealer.user_id?dealer.user_id:'NA'}}</td>
          <td style="cursor:pointer" (click)="dealerSwitch(dealer)">{{dealer.first_name}}
            {{dealer.last_name}}</td>
          <td style="cursor:pointer" (click)="dealerSwitch(dealer)">{{dealer.email}}</td>
          <td style="cursor:pointer" (click)="dealerSwitch(dealer)">{{dealer.phone}}</td> 
          <td style="cursor:pointer" (click)="dealerSwitch(dealer)">{{dealer.pass?dealer.pass:'Not saved'}}</td>
          <td style="cursor:pointer" (click)="dealerSwitch(dealer)">{{dealer.created_on|date:'short'}}</td>
          <td style="cursor:pointer" (click)="dealerSwitch(dealer)">{{dealer.expire_date|date:'short'}}</td>
          <td style="cursor:pointer"  (click)="dealerSwitch(dealer)">{{dealer.last_activity_on|date:'dd/MM/yyyy , h:mm:ss a'}}</td> 
          <td style="cursor:pointer"  (click)="dealerSwitch(dealer)">{{dealer.last_login|date:'dd/MM/yyyy , h:mm:ss a'}}</td> 
          <td style="cursor:pointer"  (click)="dealerSwitch(dealer)">{{dealer.login_type?dealer.login_type:"NA"}}</td> 
          <td style="cursor:pointer" (click)="dealerSwitch(dealer)">{{dealer.total_vehicle?dealer.total_vehicle:0}}</td>
          <td style="cursor:pointer" (click)="dealerSwitch(dealer)">{{dealer.delDevices?dealer.delDevices:0}}</td>
          <td style="cursor:pointer" (click)="dealerSwitch(dealer)">{{dealer.notificationTokenCount?dealer.notificationTokenCount:0}}</td>
        

          <td>        
            <p><button md-tooltip="View/Download" style="border:1px solid transparent; background-color: transparent;float:right"(click)="viewDocuments(dealer)">   
                <md-icon>library_books</md-icon></button></p>
          </td> 
          <td>
            <p><button md-tooltip="Edit" style="border:1px solid transparent; background-color: transparent;float:right"
                (click)="edit_DealerDetail(dealer)">
                <md-icon>edit</md-icon>
              </button></p>
          </td>
          <td>
            <p><button md-tooltip="Delete" style="border:1px solid transparent; background-color: transparent;float:right"
                (click)="delete_DealerDetail(dealer)">
                <md-icon>delete</md-icon>
              </button></p>
          </td>
          <td>
            <md-slide-toggle [(ngModel)]="dealer.status" ngDefaultControl (change)="onChange(dealer,$event)"></md-slide-toggle>
          </td>
          <td>
            <img src="assets/image/user_permission.png" alt="permission" height="25" width="25" style="cursor: pointer;" title="Additonal Access" (click)="user_permission(dealer)">
          </td>
          <td>
     
            <i id="pointShare" style="cursor:pointer;font-size: 20px;margin-top: 7px;" class="fas fa-coins" (click)="addPoints(dealer)"></i>
          </td>
        </tr>
      </tbody>
    </table>
  </div>

</body>

</html> -->


<div class="limiter">
 <app-all-menus></app-all-menus>
 <div id="dvTable" style="position: absolute;top:200px"></div>
 <div id="toast">
  <div id="desc">{{data_descip}}</div>
</div>
  <div class="container-table100">
    <div class="wrap-table100">
      <div class="row" style="width:100%;text-align: center;align-items: center;background: #426E86; padding-top: 10px; padding-bottom: 10px; color: white;box-shadow:3px 1px 5px 0px rgb(178, 176, 174)">
        <div class="col-6">
          <i class="fas fa-plus-circle" (click)="addDealer()" mdTooltip="{{'Add Dealer' | translate}}" style="box-shadow: 3px 1px 5px 0px #b2b0ae;cursor: pointer; float: left; font-size: 24px;border-radius: 50px;margin-left: 20px;"></i>
          <h4 style="display: inline-block;float: right;">{{'Dealers' | translate}}</h4>
              <!-- <button style="background-color: #cc0000;color:#fdfdfd;font-size: 12px;" md-raised-button (click)="exportPdf()">{{'PDF' | translate}}</button> -->
        </div>
        <div class="col-6">
          <button class="btn btn-default" [disabled]="firstcall" (click)="next()" style="margin-right: 10px;">{{'Next' | translate}} >></button>
          <button class="btn btn-default" [disabled]="lastcall" (click)="pre()" style="border-right-color: #2d4262;"><< {{'Previous' | translate}}</button>
          <input type="search" style="width: 225px;float: right;border-radius: 0px;line-height: 1.9;background: #efecec;margin-right: 5px;" class="form-control" id="myInput" name="myInput" type="text" [(ngModel)]="myInput" (ngModelChange)="searchFilter($event)"  placeholder="{{'Dealer Search' | translate}}" />
        </div> 
      </div>
      <!-- <div style="width:100%;text-align: center;align-items: center;background: #426E86; padding-top: 10px; padding-bottom: 10px; color: white;box-shadow:3px 1px 5px 0px rgb(178, 176, 174)">
        <i class="fas fa-plus-circle" (click)="addDealer()" mdTooltip="{{'Add Dealer' | translate}}" style="box-shadow: 3px 1px 5px 0px #b2b0ae;cursor: pointer; float: left; font-size: 24px;border-radius: 50px;margin-left: 20px;"></i>
        <h4 style="display: inline-block;">{{'Dealers' | translate}}</h4> 
        <button class="btn btn-default" [disabled]="firstcall" (click)="next()" style="margin-right: 10px;">Next >></button>
        <button class="btn btn-default" [disabled]="lastcall" (click)="pre()" style="border-right-color: #2d4262;"><< Previous</button>
        <input type="search" style="width: 225px;float: right;border-radius: 0px;line-height: 1.9;background: #efecec;box-shadow: 3px 2px 5px 0px rgb(178, 176, 174);" class="form-control" id="myInput" name="myInput" type="text" [(ngModel)]="myInput" (ngModelChange)="searchFilter($event)"  placeholder="{{'Dealer Search' | translate}}" />
      </div> -->
      <!-- <p style="width:100%;text-align: center;align-items: center;background: #426E86; padding-top: 10px; padding-bottom: 10px; color: white;box-shadow:3px 1px 5px 0px rgb(178, 176, 174)">Dealers</p> -->
      <div class="table100 ver1" id="deviceTable">
        <div class="table100-firstcol">       
          <table>
            <thead>
              <tr>  
                  <th class="cell100 column1" style="font-weight:600;background: #ADD8E6;">
                    <div class="row">
                      <div class="col-5">
                        <p>{{'NAME' | translate}}</p>
                      </div>
                      <div class="col-5">
                        <p>{{'EMAIL' | translate}}</p>
                      </div>
                      <div class="col-2">
                        <p>{{'PHONE' | translate}}</p>
                      </div>          
                    </div>
                  </th>
                  <!-- <th class="cell100 column1" style='font-weight:600;background: #ADD8E6;text-align: left;'>EMAIL</th> -->
                  <!-- <th class="cell100 column111" style='font-weight:600;background: #ADD8E6;'>PHONE</th>          -->
              </tr>
            </thead>
            <tbody>
              <tr *ngFor="let dealer of dealers_info">          
                  <td class="cell100 column1" (click)="dealerSwitch(dealer)">
                    <div class="row">
                      <div class="col-sm-5">
                        <p>{{dealer.first_name}} {{dealer.last_name}}</p>
                      </div>
                      <div class="col-sm-5">
                        <p (click)="dealerSwitch(dealer)">{{dealer.email}}</p>
                      </div>
                      <div class="col-sm-2">
                        <p (click)="dealerSwitch(dealer)">{{dealerPhone(dealer)}}</p>
                      </div>
                    </div>              
                  </td>
                  <!-- <td class="cell100 column1" style="cursor: pointer;"  (click)="dealerSwitch(dealer)"></td>
                  <td class="cell100 column1" style="cursor: pointer;" (click)="dealerSwitch(dealer)"></td> -->
              </tr>
            </tbody>
          </table>
        </div>
        <div class="wrap-table100-nextcols js-pscroll" style="height: 660px;">
          <div class="table100-nextcols">
            <table>
              <thead>
                <tr class="row100 head">    
            
                  <th class="cell100 column2" style='text-align: left;font-weight: 600;background: #ADD8E6;padding-left: 55px;'>{{'USER ID' | translate}}</th>
                  <th class="cell100 column3" style='text-align: left;font-weight: 600;background: #ADD8E6'>{{'PASSWORD' | translate}}</th>
                  <th class="cell100 column4" style='text-align: left;font-weight: 600;background: #ADD8E6'>{{'CREATED ON' | translate}}</th>
                  <th class="cell100 column5" style='text-align: left;font-weight: 600;background: #ADD8E6'>{{'EXPIRES ON' | translate}}</th>
                  <th class="cell100 column6" style='text-align: left;font-weight: 600;background: #ADD8E6'>{{'LAST ACTIVITY' | translate}}</th>
                  <th class="cell100 column7" style='text-align: left;font-weight: 600;background: #ADD8E6'>{{'LAST LOGIN' | translate}}</th>
                  <th class="cell100 column8" style='text-align: left;font-weight: 600;background: #ADD8E6'>{{'LOGIN TYPE' | translate}}</th>
                  <th class="cell100 column9" style='text-align: left;font-weight: 600;background: #ADD8E6'>{{'TOTAL VEHICLES' | translate}}</th>
                  <th class="cell100 column10" style='text-align: left;font-weight: 600;background: #ADD8E6'>{{'DELETED VEHICLES' | translate}}</th>
                  <th class="cell100 column11" style='text-align: left;font-weight: 600;background: #ADD8E6'>{{'ALLOCATED POINTS' | translate}}</th>
                  <th class="cell100 column11" style='text-align: left;font-weight: 600;background: #ADD8E6'>{{'AVAILABLE POINTS'| translate}}</th>
                  <th class="cell100 column12" style="text-align: center;font-weight: 600;background: #ADD8E6">{{'TOKEN' | translate}}</th>
                  <th class="cell100 column13" style="text-align: center;font-weight: 600;background: #ADD8E6">{{'DOCUMENTS' | translate}}</th>  
                  <th class="cell100 column14" style="text-align: center;font-weight: 600;background: #ADD8E6">{{'EDIT' | translate}}</th>
                  <th class="cell100 column15" style="text-align: center;font-weight: 600;background: #ADD8E6">{{'DELETE' |translate}}</th>
                  <th class="cell100 column16" style="text-align: left;font-weight: 600;background: #ADD8E6">{{'DEALER STATUS' | translate}}</th>
                  <th class="cell100 column17" style="text-align: left;font-weight: 600;background: #ADD8E6">{{'DEALER PERMISSION' | translate}}</th>
                  <th class="cell100 column18" style="text-align: center;font-weight: 600;background: #ADD8E6">{{'ADD POINTS' | translate}}</th>  
                  <th class="cell100 column18" style="text-align: center;font-weight: 600;background: #ADD8E6">{{'SUSPEND ACCOUNT' | translate}}</th>
                   <th class="cell100 column18" style="text-align: center;font-weight: 600;background: #ADD8E6">{{'SUSPEND ACCOUNT' | translate}}</th>           
                </tr>
              </thead>
              <tbody>
                <tr class="row100 body" *ngFor="let dealer of dealers_info">
     
                  <td class="cell100 column2"  style="cursor: pointer;" (click)="dealerSwitch(dealer)">{{dealer.user_id?dealer.user_id:'NA'}}</td>
                  <td class="cell100 column3" style="cursor: pointer;" (click)="dealerSwitch(dealer)">{{dealer.pass?dealer.pass:'Not saved'}}</td>
                  <td class="cell100 column4" style="cursor: pointer;" (click)="dealerSwitch(dealer)">{{dealer.created_on|date:'short'}}</td>
                  <td class="cell100 column5" style="cursor: pointer;" (click)="dealerSwitch(dealer)">{{dealer.expire_date|date:'short'}}</td>
                  <td class="cell100 column6" style="cursor: pointer;" (click)="dealerSwitch(dealer)">{{dealer.last_activity_on|date:'dd/MM/yyyy , h:mm:ss a'}}</td>
                  <td class="cell100 column7" style="cursor: pointer;" (click)="dealerSwitch(dealer)">{{dealer.last_login|date:'dd/MM/yyyy , h:mm:ss a'}}</td> 
                  <td class="cell100 column8" style="cursor: pointer;" (click)="dealerSwitch(dealer)">{{dealer.login_type?dealer.login_type:"NA"}}</td> 
                  <td class="cell100 column9" style="cursor: pointer;" (click)="dealerSwitch(dealer)">{{dealer.total_vehicle?dealer.total_vehicle:0}}</td>
                  <td class="cell100 column10" style="cursor: pointer;" (click)="dealerSwitch(dealer)">{{dealer.delDevices?dealer.delDevices:0}}</td>
                  <td class="cell100 column11" style="cursor: pointer;" (click)="dealerSwitch(dealer)">{{dealer.point_Allocated?dealer.point_Allocated:0}}</td>
                  <td class="cell100 column11" style="cursor: pointer;" (click)="dealerSwitch(dealer)">{{availablePoint(dealer)}}</td>
                  <td class="cell100 column12" style="cursor: pointer;text-align: center;" (click)="dealerSwitch(dealer)">{{dealer.notificationTokenCount?dealer.notificationTokenCount:0}}</td>  
                  <td class="cell100 column13" style="text-align: center;">  
                    <i class="far fa-folder-open" md-tooltip="View/Download" style="cursor: pointer;" (click)="viewDocuments(dealer)"></i>           
                  </td> 
                  <td class="cell100 column14" style="text-align: center">
                    <i class="far fa-edit" md-tooltip="Edit" style="cursor: pointer;color:#08de85" (click)="edit_DealerDetail(dealer)"></i>
                   
                  </td>
                  <td class="cell100 column15" style="text-align: center">
                    <i class="fas fa-trash-alt" md-tooltip="Delete" style="cursor: pointer;color:#ff0707;" (click)="delete_DealerDetail(dealer)"></i>
                
                  </td>
                  <td class="cell100 column16" style="text-align: center">
                    <md-slide-toggle [(ngModel)]="dealer.status" style="height: 0px !important" ngDefaultControl (change)="onChange(dealer,$event)"></md-slide-toggle>
                  </td>
                  <td class="cell100 column17" style="text-align: center;">
                    <i class="fas fa-user-shield" title="Additonal Access"  (click)="user_permission(dealer)"></i>
                 
                  </td>
                  <td class="cell100 column18" style="text-align: center;">    
                    <i id="pointShare" style="cursor:pointer;color:#f5b515;" class="fas fa-coins" (click)="addPoints(dealer)"></i>
                  </td>  
                  <td class="cell100 column16" style="text-align: center">
                    <md-slide-toggle [(ngModel)]="dealer.accountSuspended" style="height: 0px !important" ngDefaultControl (change)="accountStatusonChange(dealer,$event)"></md-slide-toggle>
                  </td> 
                </tr>


           
                <!-- <td style="cursor:pointer" (click)="dealerSwitch(dealer)">{{dealer.notificationTokenCount?dealer.notificationTokenCount:0}}</td> -->
              

                <!-- <tr class="row100 body">
                  <td class="cell100 column2">Marketing</td>
                  <td class="cell100 column3">16 Nov 2015</td>
                  <td class="cell100 column4">30 Nov 2017</td>
                  <td class="cell100 column5">kathy_82@example.com</td>
                  <td class="cell100 column6">26</td>
                  <td class="cell100 column7">New York City, NY</td>
                  <td class="cell100 column8">424242xxxxxx1616</td>
                
                </tr>

                <tr class="row100 body">
                  <td class="cell100 column2">CFO</td>
                  <td class="cell100 column3">16 Nov 2013</td>
                  <td class="cell100 column4">30 Nov 2017</td>
                  <td class="cell100 column5">elizabeth82@example.com</td>
                  <td class="cell100 column6">32</td>
                  <td class="cell100 column7">New York City, NY</td>
                  <td class="cell100 column8">424242xxxxxx5326</td>
               
                </tr>

                <tr class="row100 body">
                  <td class="cell100 column2">Designer</td>
                  <td class="cell100 column3">16 Nov 2013</td>
                  <td class="cell100 column4">30 Nov 2017</td>
                  <td class="cell100 column5">michael94@example.com</td>
                  <td class="cell100 column6">22</td>
                  <td class="cell100 column7">New York City, NY</td>
                  <td class="cell100 column8">424242xxxxxx6328</td>
                
                </tr>

                <tr class="row100 body">
                  <td class="cell100 column2">Developer</td>
                  <td class="cell100 column3">16 Nov 2017</td>
                  <td class="cell100 column4">30 Nov 2017</td>
                  <td class="cell100 column5">jasoncox@example.com</td>
                  <td class="cell100 column6">25</td>
                  <td class="cell100 column7">New York City, NY</td>
                  <td class="cell100 column8">424242xxxxxx7648</td>
            
                </tr>

                <tr class="row100 body">
                  <td class="cell100 column2">Sale</td>
                  <td class="cell100 column3">16 Nov 2016</td>
                  <td class="cell100 column4">30 Nov 2017</td>
                  <td class="cell100 column5">christian_83@example.com</td>
                  <td class="cell100 column6">28</td>
                  <td class="cell100 column7">New York City, NY</td>
                  <td class="cell100 column8">424242xxxxxx4152</td>
                
                </tr>

                <tr class="row100 body">
                  <td class="cell100 column2">Support</td>
                  <td class="cell100 column3">16 Nov 2013</td>
                  <td class="cell100 column4">30 Nov 2017</td>
                  <td class="cell100 column5">emily90@example.com</td>
                  <td class="cell100 column6">24</td>
                  <td class="cell100 column7">New York City, NY</td>
                  <td class="cell100 column8">424242xxxxxx6668</td>
               
                </tr>
                <tr class="row100 body">
                  <td class="cell100 column2">Support</td>
                  <td class="cell100 column3">16 Nov 2013</td>
                  <td class="cell100 column4">30 Nov 2017</td>
                  <td class="cell100 column5">emily90@example.com</td>
                  <td class="cell100 column6">24</td>
                  <td class="cell100 column7">New York City, NY</td>
                  <td class="cell100 column8">424242xxxxxx6668</td>
               
                </tr>
                <tr class="row100 body">
                  <td class="cell100 column2">Support</td>
                  <td class="cell100 column3">16 Nov 2013</td>
                  <td class="cell100 column4">30 Nov 2017</td>
                  <td class="cell100 column5">emily90@example.com</td>
                  <td class="cell100 column6">24</td>
                  <td class="cell100 column7">New York City, NY</td>
                  <td class="cell100 column8">424242xxxxxx6668</td> 
                </tr>
                <tr class="row100 body">
                  <td class="cell100 column2">Support</td>
                  <td class="cell100 column3">16 Nov 2013</td>
                  <td class="cell100 column4">30 Nov 2017</td>
                  <td class="cell100 column5">emily90@example.com</td>
                  <td class="cell100 column6">24</td>
                  <td class="cell100 column7">New York City, NY</td>
                  <td class="cell100 column8">424242xxxxxx6668</td> 
                </tr> -->
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>




