
<div class="limiter">
  <app-all-menus></app-all-menus>
  <div id="toast">
    <div id="desc">{{ data_descip }}</div>
  </div>
  <!-- <div class="loading" *ngIf="Load">Loading&#8230;</div> -->
  <div class="container-table100">
    <div class="wrap-table100">
      <div class="row">
        <div
          class="col-6"
          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"
            *ngIf="dealer_Permission === true || superAdmin === true || adbtn"
            (click)="openDialog()"
            mdTooltip="{{ 'Add customer' | translate }}"
            style="
              box-shadow: 3px 1px 5px 0px #b2b0ae;
              cursor: pointer;
              float: left;
              font-size: 24px;
              border-radius: 50px;
              margin-left: 20px;
            "
          ></i>

        <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>
          <h4 style="display: inline-block; float: right">
            {{ "Customers" | translate }}
          </h4>
        </div>
        <div
          class="col-6"
          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]="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>
          <!-- <button class="btn btn-default" (click)="getAllCustomers()" style="border-right-color: #2d4262">
            << {{ "All" | translate }} </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="{{ 'Customer Search' | translate }}"
          />
          <md-slide-toggle
            *ngIf="superAdmin === true"
            style="float: right; padding: 8px 35.1px"
            md-tooltip="Include Dealer's Customers"
            [(ngModel)]="allUser"
            (change)="allUserFunction($event)"
          ></md-slide-toggle>
        </div>
      </div>
      <flash-messages class='fmsg'></flash-messages>
      <!-- <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)">
    
         <h4 style="display: inline-block;">{{'Customers' | 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="{{'Customer 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">
        <!-- <div class="table100-firstcol">
          <table id='customerTable'>
            <thead>
              <tr class="row100 head">
                <th
                  class="cell100 column1"
                  style="font-weight: 600; background: #add8e6"
                >
                  {{ "NAME" | translate }}
                </th>
              </tr>
            </thead>
            <tbody>
              <tr class="row100 body" *ngFor="let cust_array of custumer">
                 <td class="cell100 column1" (click)="viewCustomerDetails(cust_array)">
                  {{ cust_array.first_name ? cust_array.first_name : "" }}
                  {{ cust_array.last_name ? cust_array.last_name : "" }}
                </td>
              </tr>
            </tbody>
          </table>
        </div> -->
        <div class="1wrap-table100-nextcols js-pscroll" style="height: 660px">
          <div class="table100-nextcols">
            <table>
              <thead>
                <tr class="row100 head">
                   <th
                  class="cell100 column2"
                  style="font-weight: 600; background: #add8e6"
                >
                  {{ "NAME" | translate }}
                </th>
                  <th
                    class="cell100 column2"
                    style="font-weight: 600; background: #add8e6"
                  >
                    {{ "USER ID" | translate }}
                  </th>
                  <th
                    class="cell100 column3"
                    style="font-weight: 600; background: #add8e6"
                  >
                    {{ "DEALER" | translate }}
                  </th>
                  <th
                    class="cell100 column4"
                    style="font-weight: 600; background: #add8e6"
                  >
                    {{ "EMAIL ID" | translate }}
                  </th>
                  <th
                    class="cell100 column5"
                    style="font-weight: 600; background: #add8e6"
                  >
                    {{ "PHONE" | translate }}
                  </th>
                  <th
                    class="cell100 column6"
                    style="font-weight: 600; background: #add8e6"
                  >
                    {{ "PASSWORD" | translate }}
                  </th>
                  <th
                    class="cell100 column16"
                    style="
                      text-align: center;
                      font-weight: 600;
                      background: #add8e6;
                    "
                  >
                    {{ "EDIT" | translate }}
                  </th>
                  <th
                    class="cell100 column19"
                    style="
                      text-align: center;
                      font-weight: 600;
                      background: #add8e6;
                    "
                  >
                    {{ "DELETE" | translate }}
                  </th>
                  </tr>
              </thead>
              <tbody>
                <tr class="row100 body" *ngFor="let cust_array of custumer">
                  <td class="cell100 column1" (click)="viewCustomerDetails(cust_array)">
                   <a style=" cursor: pointer;color: #000000bf;text-decoration: underline;"> <strong>   {{ cust_array.first_name ? cust_array.first_name : "" }}
                  {{ cust_array.last_name ? cust_array.last_name : "" }}</strong> </a>
                </td>
                  <td
                    class="cell100 column2"
                    style="cursor: pointer"
                    (click)="vewdev(cust_array._id)"
                  >
                    {{ cust_array.user_id ? cust_array.user_id : "NA" }}
                  </td>
                  <td
                    class="cell100 column3"
                    style="cursor: pointer"
                    (click)="vewdev(cust_array._id)"
                  >
                    {{
                      cust_array.DealerDetails.length != 0
                        ? cust_array.DealerDetails[0].first_name
                        : ""
                    }}
                    {{
                      cust_array.DealerDetails != 0
                        ? cust_array.DealerDetails[0].last_name
                        : ""
                    }}
                  </td>
                  <td
                    class="cell100 column4"
                    style="cursor: pointer"
                    (click)="vewdev(cust_array._id)"
                  >
                    {{ cust_array.email }}
                  </td>
                  <td
                    class="cell100 column5"
                    style="cursor: pointer"
                    (click)="vewdev(cust_array._id)"
                  >
                    {{ custPhone(cust_array) }}
                  </td>
                  <td
                    class="cell100 column6"
                    style="cursor: pointer"
                    (click)="vewdev(cust_array._id)"
                  >
                    {{ cust_array.pass ? cust_array.pass : "NA" }}
                  </td>
                  <td class="cell100 column16" style="text-align: center">
                    <i
                      class="far fa-edit"
                      md-tooltip="Edit"
                      style="cursor: pointer; color: #08de85"
                      (click)="edit_costumerDetail(cust_array)"
                    ></i>
                  </td>
                  <td class="cell100 column19" style="text-align: center">
                    <i
                      class="fas fa-trash-alt"
                      md-tooltip="Delete"
                      style="cursor: pointer; color: #ff0707"
                      (click)="delete_costumerDetail(cust_array)"
                    ></i>
                  </td>

                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
