

<div class="limiter">
  <nav class="navbar navbar-expand-lg navbar-dark bg-primary" style="height: 65px;">
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo03"
      aria-controls="navbarTogglerDemo03" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <h6 class="navbar-brand" >KYC</h6>
  
    <div class="collapse navbar-collapse" id="navbarTogglerDemo03">
      <ul class="navbar-nav mr-auto mt-2 mt-lg-0">
        <li class="nav-item active">
        <i style="cursor: pointer;float: left;font-size: 24px;margin-left: 16px;touch-action: none;user-select: none;"
          class="fas fa-file-excel" (click)="downloadExcel()"></i>
        </li>
        <!-- <li class="nav-item">
          <i style="cursor: pointer;float: left;font-size: 24px;margin-left: 16px;touch-action: none;user-select: none;"
            class="fas fa-file-pdf" (click)="downloadExcel()"></i>
        
        </li> -->
        
      </ul>
      <ul style="position: absolute;left: 50%;transform: translatex(-50%);" class="nav nav-tabs nav-tabs-neutral justify-content-center" role="tablist" data-background-color="orange">
        <!-- <li class="nav-item">
          <a class="nav-link active" data-toggle="tab" href="#CustomerKYC" (click)="changeTab('customerKYC')" role="tab">Customer KYC</a>
        </li> -->
        <li class="nav-item">
          <a class="nav-link active" data-toggle="tab" href="#DeviceKYC" (click)="changeTab('deviceKYC')" role="tab">Device KYC</a>
        </li>
      
      </ul>
      <form class="form-inline my-2 my-lg-0">
        <div style="float: right;">
          <div style="width: 80px; float: right; margin-top: -8px;">
        
            <button md-icon-button mdTooltip="Logout" style="float:right;outline:none;padding-top: 6px;" (click)="logout()">
              <i class="fas fa-sign-out-alt" style=" color: white; font-size: 20px;"></i>
            </button>
            <app-notification></app-notification>
          </div>
        </div>

        <!-- <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
        <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button> -->
      </form>
    </div>
  </nav>
  <div id="toast">
    <div id="desc">{{ data_descip }}</div>
  </div>
  <div class="loading" *ngIf="Load">Loading&#8230;</div>
  <div class="card">
    <div>
      <!-- <div class="row card-header"> -->
        <!-- <div class="col-5" 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 style="cursor: pointer;float: left;font-size: 24px;margin-left: 16px;touch-action: none;user-select: none;"
            class="fas fa-file-excel" (click)="downloadExcel()"></i> -->
        <!-- <ul class="nav nav-tabs nav-tabs-neutral justify-content-center" role="tablist" data-background-color="orange">
          <li class="nav-item">
            <a class="nav-link active" data-toggle="tab" href="#CustomerKYC" role="tab">Customer KYC</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" data-toggle="tab" href="#DeviceKYC" role="tab">Device KYC</a>
          </li>
        
        </ul> -->

        <!-- </div> -->
        <!-- <div class="col-7" 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 style="float: right;">
                <div style="width: 80px; float: right; margin-top: -8px;">
                 
                  <button md-icon-button mdTooltip="Logout"  style="float:right;outline:none;padding-top: 6px;" (click)="logout()">
                    <i class="fas fa-sign-out-alt" style=" color: white; font-size: 20px;"></i>
                  </button>
                  <app-notification></app-notification>
                </div>
              </div> -->
        <!-- </div> -->
      <!-- </div> -->
      
      <flash-messages class='fmsg'></flash-messages>
      <div>
      
        <div class=card-body style="padding-top: 0px;">

          
          <div class="tab-content">
            <div class="tab-pane" id="CustomerKYC" role="tabpanel">

              <div class="card-header" 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);
                        ">
                <button class="btn btn-default" [disabled]="lastcall" (click)="pre()" style="border-right-color: #2d4262">
                  << {{ "Previous" | translate }} </button>
                  
                  <button class="btn btn-default" [disabled]="firstcall" (click)="next()" style="margin-right: 10px">
                      {{ "Next" | translate }} >>
                    </button>
              
                    <select [(ngModel)]="status" (ngModelChange)="changeStatus($event)" style="background: #efecec;height: 35px;">
                      <option value="" selected disabled>Please select status</option>
                      <option value="Pending">Pending</option>
                      <option value="Approved">Approved</option>
                      <option value="Reject">Reject</option>
                    </select>

                    <div style="float: right;">
                      <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="{{ 'Customer Search' | translate }}" />
                    </div>
              </div>

          <div class="table-responsive">
            <table class="table table-striped">
              <thead>
                <tr>
                    <th>
                      {{ "NAME" | translate }}
                    </th>
                    <th>
                      {{ "USER ID" | translate }}
                    </th>
                    <th>
                      {{ "EMAIL ID" | translate }}
                    </th>
                    <th>
                      {{ "Dealer" | translate }}
                    </th>
                    <th>
                      {{ "Distributer" | translate }}
                    </th>
                    <th>
                      {{ "PHONE" | translate }}
                    </th>
                  <th>
                    {{ "KYC Status" | translate }}
                  </th>
                    <th>
                      {{ "View" | translate }}
                    </th>
                 
               
                </tr>
              </thead>
              <tbody>
                <tr *ngFor="let cust_array of custumer">
                 
                  <td >
                    {{ cust_array.first_name ? cust_array.first_name : "" }}
                    {{ cust_array.last_name ? cust_array.last_name : "" }}
                  </td>
                  <td >
                    {{ cust_array.user_id ? cust_array.user_id : "NA" }}
                  </td>
                  <td >
                    {{ cust_array.email }}
                  </td>
                    <td>
                      {{ cust_array.DealerDetails?cust_array.DealerDetails[0].first_name ? cust_array.DealerDetails[0].first_name : "" :''}}
                      {{ cust_array.DealerDetails?cust_array.DealerDetails[0].last_name ? cust_array.DealerDetails[0].last_name : "" :''}}
                      
                    </td>
                      <td>
                        {{ cust_array.AdminDetails?cust_array.AdminDetails[0].first_name ? cust_array.AdminDetails[0].first_name : "" :''}}
                        {{ cust_array.AdminDetails?cust_array.AdminDetails[0].last_name ? cust_array.AdminDetails[0].last_name : "" :''}}
                      </td>
                  <td>
                    {{ custPhone(cust_array) }}
                  </td>
                
                  <td >
                    <button class="btn btn-warning btn-sm" style="border-radius: 40px; font-size: x-small; background-color: orange;"
                      *ngIf="cust_array.kycStatus==undefined">Pending</button>
                    <button class="btn btn-warning btn-sm" style="border-radius: 40px; font-size: x-small; background-color: orange;" *ngIf="cust_array.kycStatus=='Pending'">{{cust_array.kycStatus}}</button>
                    <button class="btn btn-success btn-sm" style="border-radius: 40px; font-size: x-small; background-color: green;" *ngIf="cust_array.kycStatus=='Approved'">{{cust_array.kycStatus}}</button>
                    <button class="btn btn-danger btn-sm" style="border-radius: 40px; font-size: x-small; background-color: red;" *ngIf="cust_array.kycStatus=='Reject'">{{cust_array.kycStatus}}</button>
                    
                  </td>

                  <td>
                    <i class="fas fa-eye" (click)="viewDocuments(cust_array)"></i>
                  </td>
                  
                </tr>
              </tbody>
            </table>
          </div>
          </div>


          <!-- --------------------DEVICE KYC-------------------- -->
          <div class="tab-pane active" id="DeviceKYC" role="tabpanel">
            <app-device-kyc></app-device-kyc>
          
            </div>

        </div>

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