<div class="container mt-3 mb-3">
  <div class="row">
    <div
      *ngFor="let item of inventoryCount"
      class="card shadow-sm col-sm rounded p-1 mr-1 text-center"
      [ngStyle]="{
        'background-color':
          item._id === 'Pending'
            ? '#00c0ef'
            : item._id === 'Reject'
            ? '#f39c12'
            : '#00a65a'
      }"
    >
      <h6>{{ item._id }}</h6>
      <span class="text-white">{{ item.TotalDev }}</span>
    </div>
  </div>
</div>

<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);
  "
>
  <!-- style="float: left;background: #efecec;margin-right: 5px;height: 33px;margin-top: 6px;" -->
  <select
    [(ngModel)]="limit"
    (ngModelChange)="callDataTable()"
    style="
      background: #efecec;
      height: 35px;
      width: 63px;
      float: left;
      margin-top: 3px;
    "
  >
    <option *ngFor="let page of pageLengthArr; let i = index" [value]="page">
      {{ page }}
    </option>
  </select>

  <button
    class="btn btn-default"
    [disabled]="previewButton"
    (click)="pre()"
    style="border-right-color: #2d4262"
  >
    << {{ "Previous" | translate }}
  </button>
  <button
    class="btn btn-default"
    [disabled]="nextButton"
    (click)="next()"
    style="margin-right: 10px"
  >
    {{ "Next" | translate }} >>
  </button>

  <select
    [(ngModel)]="status"
    (ngModelChange)="changeStatus($event)"
    style="background: #efecec; height: 35px"
  >
    <option value="" selected>Please select status</option>
    <option value="Pending">Pending</option>
    <option value="Approved">Approved</option>
    <option value="Reject">Reject</option>
  </select>

  <select
    [(ngModel)]="state"
    id="state"
    (ngModelChange)="changeStatus($event)"
    style="background: #efecec; height: 35px"
  >
    <option value="" selected>Please select state</option>
    <option *ngFor="let ustate of Indianstate" [value]="ustate">
      {{ ustate }}
    </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="{{ 'Device Search' | translate }}"
    />
  </div>
</div>
<div class="table-responsive" style="height: 71vh">
  <table class="table table-striped">
    <thead>
      <tr>
        <th>
          {{ "NAME" | translate }}
        </th>
        <!-- <th >
          {{ "USER ID" | translate }}
        </th> -->
        <th>
          {{ "EMAIL ID" | translate }}
        </th>
        <th>
          {{ "PHONE" | translate }}
        </th>
        <th>
          {{ "Dealer" | translate }}
        </th>
        <th>
          {{ "Distributer" | translate }}
        </th>
        <th>
          {{ "DEVICE NAME" | translate }}
        </th>
        <th>
          {{ "IMEI" | translate }}
        </th>
        <th>
          {{ "E sim Validity" | translate }}
        </th>
        <th>
          {{ "KYC Date" | translate }}
        </th>
        <th>
          {{ "KYC Approval Date" | translate }}
        </th>
        <th>
          {{ "RTO Cer. Date" | translate }}
        </th>
        <th>
          {{ "Vaahan Cer. Date" | translate }}
        </th>
        <th>
          {{ "Remarks" | translate }}
        </th>
        <th>
          {{ "RTO State" | translate }}
        </th>
        <th>
          {{ "RTO City" | translate }}
        </th>
        <th>
          {{ "KYC Status" | translate }}
        </th>
        <th>
          {{ "Installation Certificates" | translate }}
        </th>
        <th>
          {{ "View" | translate }}
        </th>
      </tr>
    </thead>
    <tbody>
      <tr *ngFor="let cust_array of custumer">
        <td>
          {{
            cust_array.user
              ? cust_array.user.first_name
                ? cust_array.user.first_name
                : ""
              : ""
          }}
          {{
            cust_array.user
              ? cust_array.user.last_name
                ? cust_array.user.last_name
                : ""
              : ""
          }}
        </td>
        <!-- <td>
          {{cust_array.user? cust_array.user.user_id ? cust_array.user.user_id : "NA":'' }}
        </td> -->
        <td>
          {{
            cust_array.user
              ? cust_array.user.email
                ? cust_array.user.email
                : ""
              : ""
          }}
        </td>
        <td>
          {{
            cust_array.user
              ? cust_array.user.phone
                ? cust_array.user.phone
                : ""
              : ""
          }}
        </td>
        <td>
          {{
            cust_array.Dealer
              ? cust_array.Dealer.first_name
                ? cust_array.Dealer.first_name
                : ""
              : ""
          }}
          {{
            cust_array.Dealer
              ? cust_array.Dealer.last_name
                ? cust_array.Dealer.last_name
                : ""
              : ""
          }}
        </td>
        <td>
          {{
            cust_array.supAdmin
              ? cust_array.supAdmin.first_name
                ? cust_array.supAdmin.first_name
                : ""
              : ""
          }}
          {{
            cust_array.supAdmin
              ? cust_array.supAdmin.last_name
                ? cust_array.supAdmin.last_name
                : ""
              : ""
          }}
        </td>
        <td>
          {{ cust_array.Device_Name ? cust_array.Device_Name : "" }}
        </td>
        <td>
          {{ cust_array.Device_ID ? cust_array.Device_ID : "" }}
        </td>
        <td>
          {{
            cust_array.esim_validity
              ? (cust_array.esim_validity | date: "medium")
              : ""
          }}
        </td>
        <td>
          {{
            cust_array.created_on
              ? (cust_array.created_on | date: "medium")
              : ""
          }}
        </td>
        <td>
          {{
            cust_array.kycApprovalDate
              ? (cust_array.kycApprovalDate | date: "medium")
              : ""
          }}
        </td>
        <td>
          {{
            cust_array.state_certifcate_date
              ? (cust_array.state_certifcate_date | date: "medium")
              : ""
          }}
        </td>
        <td>
          {{
            cust_array.vaahan_certifcate_date
              ? (cust_array.vaahan_certifcate_date | date: "medium")
              : ""
          }}
        </td>
        <td>
          {{ cust_array.remark ? cust_array.remark : "" }}
        </td>
        <td>
          {{
            cust_array.transportOfficeState
              ? cust_array.transportOfficeState
              : ""
          }}
        </td>
        <td>
          {{
            cust_array.transportOfficeCity ? cust_array.transportOfficeCity : ""
          }}
        </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 style="text-align: center; cursor: pointer">
          <i
            *ngIf="cust_array.kycStatus == 'Approved'"
            class="fas fa-file"
            (click)="exportCertificate(cust_array)"
          ></i>
        </td>
        <td style="text-align: center; cursor: pointer">
          <i class="fas fa-eye" (click)="viewDocuments(cust_array)"></i>
        </td>
      </tr>
    </tbody>
  </table>
</div>
