<div class="container mt-3 mb-3">
  <div class="loading" *ngIf="isLoading">Loading&#8230;</div>
  <!-- <div *ngIf="isLoading" class="loading-spinner">Loading&#8230;</div> -->
  <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
    class="device-kyc.component_36"
    [(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
    class="device-kyc.component_70"
    [(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
  *ngIf="stateflag"
    class="device-kyc.component_82"
    [(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>
  <select
    class="device-kyc.component_83"
    (change)="changesort($event)"
    [(ngModel)]="sort"
    id="state_ert"
    style="background: #efecec; height: 35px"
  >
    <option value="created_on" selected>Please Select Sort</option>
    <option value="created_on">Created ON</option>
    <option value="kycApprovalDate">KYC Approval Date</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 data-attr="1">
          {{ "Name" | translate }}
        </th>
        <!-- <th >
          {{ "USER ID" | translate }}
        </th> -->
        <th data-attr="2">
          {{ "Email ID" | translate }}
        </th>
        <th data-attr="3">
          {{ "Phone" | translate }}
        </th>
        <th data-attr="4">
          {{ "Password" | translate }}
        </th>
        <th data-attr="5">
          {{ "Dealer" | translate }}
        </th>
        <th data-attr="6">
          {{ "Distributer" | translate }}
        </th>
        <th data-attr="7">
          {{ "Device Name" | translate }}
        </th>
        <th data-attr="8">
          {{ "IMEI" | translate }}
        </th>
        <th data-attr="9">
          {{ "E sim Validity" | translate }}
        </th>
        <th data-attr="10">
          {{ "KYC Date" | translate }}
        </th>
        <th data-attr="11">
          {{ "KYC Approval Date" | translate }}
        </th>
        <th data-attr="12">
          {{ "RTO Cer. Date" | translate }}
        </th>
        <th data-attr="13">
          {{ "Vaahan Cer. Date" | translate }}
        </th>
        <!-- <th data-attr="27">
          {{ "Renewal Cer. Date" | translate }}
        </th> -->
        <!-- <th data-attr="27" *ngIf="isTag">
          {{ "Renewal Details" | translate }}
        </th> -->
          <!-- <th data-attr="27" *ngIf="isTag">
          {{ "Renewal Certificate" | translate }}
        </th> -->
      
        <th data-attr="27">
          {{ "Installation Certificates" | translate }}
        </th>

        <th data-attr="27"  *ngIf="isTag">
          {{ "Renewal" | translate }}
        </th>
        <th data-attr="28">
          {{ "View" | translate }}
        </th>
        <th data-attr="14">
          {{ "Remarks" | translate }}
        </th>
        <th data-attr="15">
          {{ "RTO State" | translate }}
        </th>
        <th data-attr="16">
          {{ "RTO City" | translate }}
        </th>

        <th data-attr="17" *ngIf="isTag">{{ "Ignition" | translate }}</th>
        <th data-attr="18" *ngIf="isTag">{{ "Power" | translate }}</th>
        <th data-attr="19" *ngIf="isTag">{{ "Last Update" | translate }}</th>
        <th data-attr="20" *ngIf="isTag">{{ "Address" | translate }}</th>
        <th data-attr="21" *ngIf="isTag">{{ "Speed" | translate }}</th>
        <th data-attr="22" *ngIf="isTag">{{ "GPS" | translate }}</th>
        <th data-attr="23" *ngIf="isTag">{{ "gsm" | translate }}</th>
        <th data-attr="24" *ngIf="isTag">{{ "Panic" | translate }}</th>
        <th data-attr="25" *ngIf="isTag">
          {{ "Followup Contact" | translate }}
        </th>
        <th data-attr="26">{{ "KYC Status" | translate }}</th>

        <th data-attr="29" *ngIf="!isTag">
          {{ "Edit" | 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 class="text-center">
          <i
            *ngIf="
              cust_array.showPass == undefined || cust_array.showPass == false
            "
            class="fa-solid fa-eye text-primary"
            (click)="cust_array.showPass = !cust_array.showPass"
          ></i>
          <span
            *ngIf="cust_array.showPass == true"
            (click)="cust_array.showPass = !cust_array.showPass"
          >
            {{ cust_array.user.pass != undefined ? cust_array.user.pass : "" }}
          </span>
        </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>
          <ng-container *ngIf="cust_array.state_certifcate_date; else noDate">
            <a
              target="_blank"
              [href]="
                'https://www.oneqlik.in' +
                cust_array.state_rto_certificate_path.substring(6)
              "
            >
              {{ cust_array.state_certifcate_date | date : "medium" }}
            </a>
          </ng-container>
          <ng-template #noDate>
            <span>{{ "" }}</span>
          </ng-template>
        </td>  
        <td>
          <ng-container *ngIf="cust_array.vaahan_certifcate_date; else noDate1">
            <a
              target="_blank"
              [href]="
                'https://www.oneqlik.in' +
                cust_array.vaahan_certificate.substring(6)
              "
            >
              {{ cust_array.vaahan_certifcate_date | date : "medium" }}
            </a>
          </ng-container>
          <ng-template #noDate1>
            <span>{{ "" }}</span>
          </ng-template>
        </td>
        <!-- <td>
          <ng-container *ngIf="cust_array.renew_certifcate_date; else noDate2">
            <a
              target="_blank"
              [href]="
                'https://www.oneqlik.in' +
                cust_array.renew_certificate.substring(6)
              "
            >
              {{ cust_array.renew_certifcate_date | date : "medium" }}
            </a>
          </ng-container>
          <ng-template #noDate2>
            <span>{{ "" }}</span>
          </ng-template>
        </td> -->
        <!-- <td class="text-center"  *ngIf="isTag">
          <span
            id="simexp" 
            *ngIf="cust_array.renew_details; else notRenewed"
            style="font-size: 20px; color: rgb(0, 87, 128); cursor: pointer"
            (click)="renewDoc(cust_array)"
            ><i class="fas fa-sim-card"></i
          ></span>
          <ng-template #notRenewed>
            <span style="font-size: 20px; color: #000;"><i class="fas fa-sim-card"></i
              ></span>
          </ng-template>
        </td>   -->
        <!-- <td > -->
        <!-- <i *ngIf="cust_array.kycStatus == 'Approved'" class="fas fa-file" (click)="exportCertificate(cust_array)"></i> -->
        <td class="text-center">  
          <ng-container
            *ngIf="cust_array.kycStatus == 'Approved'; else notApproved"
            style="text-align: center; cursor: pointer"
          >
            <a
              target="_blank"
              [href]="
                'https://nipponsecura.in/devices/getInstallationPdf?_id=' +
                cust_array._id
              "
            >
              <i class="fas fa-file" style="color: #000"></i>
            </a>
          </ng-container>
          <ng-template #notApproved>
            <span>{{ "" }}</span>
          </ng-template>
        </td>

        <!-- </td> -->
        <td class="text-center"  *ngIf="isTag">
          <span
            id="simexp"
            style="font-size: 20px; color: green; cursor: pointer"
            (click)="editModalDeviceExpiryDate(cust_array)"
            ><i class="fas fa-sim-card"></i
          ></span>
        </td>
        <!--<td></td> -->
        <td style="text-align: center; cursor: pointer">
          <i class="fas fa-eye db-442" (click)="viewDocuments(cust_array)"></i>
        </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 *ngIf="isTag">
          {{
            cust_array.last_ACC
              ? cust_array.last_ACC == "1"
                ? "On"
                : "Off"
              : ""
          }}
        </td>
        <td *ngIf="isTag">
          {{ cust_array.power ? (cust_array.power == "1" ? "On" : "Off") : "" }}
        </td>
        <td *ngIf="isTag">
          {{
            cust_array.last_ping_on
              ? (cust_array.last_ping_on | date : "medium")
              : ""
          }}
        </td>
        <td *ngIf="isTag">
          {{ cust_array.lastAddress ? cust_array.lastAddress : "" }}
        </td>
        <td *ngIf="isTag">
          {{ cust_array.last_speed ? cust_array.last_speed : "" }}
        </td>
        <td *ngIf="isTag">
          {{
            cust_array.gpsTracking
              ? cust_array.gpsTracking == "1"
                ? "Fixed"
                : "Unfixed"
              : ""
          }}
        </td>
        <td *ngIf="isTag">
          {{ cust_array.gsmSignal ? cust_array.gsmSignal : "" }}
        </td>
        <td *ngIf="isTag">{{ cust_array.sos ? cust_array.sos : "" }}</td>
        <td *ngIf="isTag">{{ cust_array.CID_No ? cust_array.CID_No : "" }}</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 *ngIf="!isTag" style="text-align: center; cursor: pointer">
          <i
            id="edit"
            (click)="editDevice(cust_array)"
            title="Edit Vehicle"
            style="font-size: 20px; color: green"
            class="fas fa-edit"
          ></i>
        </td>
      </tr>
    </tbody>
  </table>
</div>
<button (click)="downloadExcel()" class="d-none" id="downloadExcel379">
  download
</button>

<!-- modal start-->
<!-- Button trigger modal -->
<button
  type="button"
  class="btn btn-primary d-none"
  data-toggle="modal"
  id="db_exampleModal"
  data-target="#exampleModal"
>
  Launch demo modal
</button>

<!-- Modal -->
<div
  class="modal fade"
  id="exampleModal"
  tabindex="-1"
  aria-labelledby="exampleModalLabel"
  aria-hidden="true"
>
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header" style="background-color: #426e86; color: #fff">
        <h5 class="modal-title" id="exampleModalLabel">Renew Devices</h5>
        <button
          type="button"
          style="color: #fff"
          class="close"
          data-dismiss="modal"
          aria-label="Close"
        >
          <i class="fas fa-times"></i>
        </button>
      </div>
      <div class="modal-body">
        <div class="row">
          <div class="col-4">
            <div class="form-group">
              <label for="exampleInputEmail1">Vehicle Reg. Date</label>
              <input
                type="date"
                [(ngModel)]="vehicle_registration_date"
                placeholder="Enter Vehicle reg. Date"
                class="form-control form-control-sm"
              />
            </div>
          </div>
          <div class="col-4">
            <div class="form-group">
              <label for="exampleInputEmail1">Renewal Ext. Year</label>
          
              <select class="form-control form-control-sm" name="customerType" id="customerType"
              [(ngModel)]="esim_renewal_extenstion">
              <option value="1 year">1 year</option>
              <option value="2 years">2 years</option>
              <option value="3 years">3 years</option>
              <option value="-1">Custom</option>
            </select>
            </div>
          </div>
          <div class="col-4" *ngIf="esim_renewal_extenstion == -1 ">
            <div class="form-group">
              <label for="exampleInputEmail1">Select Renewal Date</label>
              <input
                type="date"
                [(ngModel)]="esim_renewal_selected_dt"
                placeholder="Select Ext. Date"
                class="form-control form-control-sm"
                (change)="validateFromDate()"
              />
            </div>
          </div>
        </div>
          
      <div class="modal-footer">
        <button
          type="button"
          class="db-btn db-btn-primary"
          (click)="simValidChange(dbexp)"
        >
          Update
        </button>
        <button
          type="button"
          class="db-btn db-btn-secondary"
          data-dismiss="modal"
          id="simValidChange_close"
        >
          Close
        </button>
      </div>
    </div>
  </div>
</div>
