<admin-page-header [title]="'Ip List'"></admin-page-header>

<div class="row">
  <div class="col-xl-12 col-lg-12 col-md-12">
    <div class="card mb-0">
      <div class="card-header border-0 d-flex">
        <h4 class="card-title">{{'IP List' | translate}}</h4>

        <div class="float-end ms-auto">
          @if (permission?.includes('IpBlock Add')) {
            <a (click)="addip(addipmodal)" class="btn btn-secondary ms-auto">{{'Add IP Address' | translate}}</a>
          }
        </div>
      </div>
      <div class="card-body">
        <div class="table-responsive">
          <div class="dashboardtabledata table-responsive">
            <!--Dashboard List-->
            <div class="table-options">
              <div class="custom-buttons">
                @if (permission?.includes('IpBlock Delete')) {
                  <button type="button" [disabled]="sendingResponse['ipmassdelete']" (click)="IpMassdestroy('ipmassdelete')" id="Deletebtn" mat-raised-button
                    class="btn btn-outline-light btn-sm mb-4 me-2">
                    <i class="fe fe-trash"></i>{{'Delete' | translate}}@if (sendingResponse['ipmassdelete']) {
                    <i class="fa fa-spinner fa-spin mx-1"></i>
                  }
                </button>
              }
            </div>
            <mat-form-field class="pull-right">
              <mat-label>{{ "Search" }}</mat-label>
              <input type="text" matInput (keyup)="applyFilter($event)" [placeholder]="'search' | translate" #input>
            </mat-form-field>
          </div>
          <div>
            @if (isloader) {
              <mat-progress-bar mode="indeterminate"></mat-progress-bar>
            }
            <table class="table table-bordered border-bottom text-nowrap ticketdeleterow w-100 dataTable" mat-table [dataSource]="dataSource" matSort>
              <!-- Sno Column -->
              <ng-container matColumnDef="sno">
                <th scope="col" class=" text-center wpx-40" mat-header-cell *matHeaderCellDef mat-sort-header>
                  {{'Sl.No' | translate}}
                </th>
                <td mat-cell *matCellDef="let row;let i = index" class="wpx-40 text-center">
                  {{i + 1 + (paginator.pageIndex * paginator.pageSize)}}
                </td>
              </ng-container>
              <!-- Checkbox Column -->
              <ng-container matColumnDef="select">
                <th scope="col" mat-header-cell class="wpx-40 text-center" *matHeaderCellDef>
                  <mat-checkbox (change)="$event ? toggleAllRows() : null" [checked]="selection.hasValue() && isAllSelected()" [indeterminate]="selection.hasValue() && !isAllSelected()"
                    [aria-label]="checkboxLabel()">
                  </mat-checkbox>
                </th>
                <td mat-cell class="wpx-40 text-center" *matCellDef="let row">
                  <mat-checkbox (click)="$event.stopPropagation()" (change)="$event ? selection.toggle(row) : null" [checked]="selection.isSelected(row)" [aria-label]="checkboxLabel(row)">
                  </mat-checkbox>
                </td>
              </ng-container>
              <ng-container matColumnDef="ip">
                <th scope="col" mat-header-cell *matHeaderCellDef mat-sort-header="ip">
                  {{ "Ip" | translate }}
                </th>
                <td mat-cell *matCellDef="let row">
                  {{ row?.ip }}
                </td>
              </ng-container>
              <ng-container matColumnDef="country">
                <th scope="col" mat-header-cell *matHeaderCellDef mat-sort-header="country">
                  {{ "Country" | translate}}
                </th>
                <td mat-cell *matCellDef="let row">
                  {{ row?.country }}
                </td>
              </ng-container>
              <ng-container matColumnDef="entry">
                <th scope="col" mat-header-cell *matHeaderCellDef mat-sort-header="entrytype">
                  {{ "Entry" | translate }}
                </th>
                <td mat-cell *matCellDef="let row">
                  {{ row?.entrytype }}
                </td>
              </ng-container>
              <ng-container matColumnDef="types">
                <th scope="col" mat-header-cell *matHeaderCellDef mat-sort-header="types">
                  {{ "Types" | translate }}
                </th>
                <td mat-cell *matCellDef="let row">
                  {{ row?.types }}
                </td>
              </ng-container>

              <!-- Actions Column -->
              <ng-container matColumnDef="actions">
                <th scope="col" mat-header-cell *matHeaderCellDef>
                  {{ "Actions" | translate }}
                </th>
                <td mat-cell *matCellDef="let row; let i = index">
                  <div>
                    @if (permission?.includes('IpBlock Edit')) {
                      <button type="button" aria-label="edit" (click)="IpEdit(editmodal, row)" href="javascript:void(0)" class="action-btns1 edit-iplist">
                        <i class="feather feather-edit text-primary" [ngbTooltip]="'Edit' | translate"></i>
                      </button>
                    } @else {
                      ~
                    }
                    @if (permission?.includes('IpBlock Delete')) {
                      <button type="button" aria-label="delete" (click)="Ipdestroy(row?.id, 'ipdelete' + i)" [disabled]="sendingResponse['ipdelete' + i]" class="action-btns1" id="delete-iplist">
                        <i class="feather feather-trash-2 text-danger" [ngbTooltip]="'Delete' | translate"></i>
                        @if (sendingResponse['ipdelete' + i]) {
                          <i class="fa fa-spinner fa-spin mx-1"></i>
                        }
                      </button>
                    } @else {
                      ~
                    }

                    @if (row?.types != 'Unlock') {
                      @if (row?.types != 'Unlock') {
                        <button type="button" aria-label="reset" (click)="resetipblock(row?.id, 'ipunlock' + i)" [disabled]="sendingResponse['ipunlock' + i]"
                          class="action-btns1" id="reset-iplist">
                          <i class="feather feather-rotate-ccw text-success" [ngbTooltip]="'Reset' | translate"></i>
                          @if (sendingResponse['ipunlock' + i]) {
                            <i class="fa fa-spinner fa-spin mx-1"></i>
                          }
                        </button>
                      }
                    } @else {
                      ~
                    }
                  </div>
                </td>
              </ng-container>

              <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
              <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>

              <!-- Row shown when there is no matching data. -->
              <tr class="mat-row" *matNoDataRow>
                @if (!input.value.length) {
                  <td class="mat-cell text-center" colspan="12">
                    {{'No data Found'| translate}}
                  </td>
                } @else {
                  <td class="mat-cell text-center" colspan="12"> {{'No data matching the filter'| translate}} " {{input.value}} " </td>
                }
              </tr>
            </table>
            <mat-paginator #paginator showFirstLastButtons [pageSizeOptions]="[10, 25, 50, 100]" (page)="onPaginateTable()" aria-label="Select page of users" [length]="paginator?.length"
              [pageIndex]="paginator?.pageIndex" [pageSize]="paginator?.pageSize">
            </mat-paginator>
          </div>
          <!--Dashboard List-->
        </div>
      </div>
    </div>
  </div>
</div>
</div>

<ng-template #addipmodal let-modal>
  <div class="modal-header">
    <h4 class="modal-title">{{'Add New IP Address' | translate}}</h4>
    <button type="button" class="btn-close" aria-label="Close" (click)="modal.dismiss('Cross click')">
    </button>
  </div>
  <div class="modal-body">
    <form #FormData="ngForm" (ngSubmit)="addIp(FormData, 'addIp')">
      <div class="form-group">
        <label class="form-label">{{'IP' | translate}} <span class="text-red">*</span></label>
        <input required ngModel type="text" class="form-control" name="ip" #ip="ngModel" [class.is-invalid]="ip.invalid && ip.touched">
        @if ((ip.invalid && ip.touched) || ip.dirty) {
          <div>
            @if (ip.errors?.['required']) {
              <small class="text-danger">{{'IP is required' | translate}}</small>
            }
          </div>
        }

      </div>
      <div class="form-group">
        <div class="custom-controls-stacked d-md-flex">
          <label class="form-label mt-1 me-5">{{'Types' | translate}} <span class="text-red">*</span></label>
          <label class="custom-control form-radio success me-4">
            <input required ngModel type="radio" class="custom-control-input iptype1" name="types" value="Unlock" #types="ngModel" [class.is-invalid]="types.invalid && types.touched">
            <span class="custom-control-label">{{'Unlock' | translate}}</span>
          </label>
          <label class="custom-control form-radio success me-4">
            <input required ngModel type="radio" class="custom-control-input iptype2" name="types" value="Locked" #types="ngModel" [class.is-invalid]="types.invalid && types.touched">
            <span class="custom-control-label">{{'Lock' | translate}}</span>
          </label>
          <label class="custom-control form-radio success me-4">
            <input required ngModel type="radio" class="custom-control-input iptype3" name="types" value="Blocked" #types="ngModel" [class.is-invalid]="types.invalid && types.touched">
            <span class="custom-control-label">{{'Block' | translate}}</span>
          </label>
        </div>
        @if ((types.invalid && types.touched) || types.dirty) {
          <div>
            @if (types.errors?.['required']) {
              <small class="text-danger">{{'Types is required' | translate}}</small>
            }
          </div>
        }

      </div>
      <div class="form-group float-end">
        <button [disabled]="FormData.invalid || sendingResponse['addIp']" type="submit" class="btn btn-secondary">{{'Save Changes' | translate}}@if (sendingResponse['addIp']) {
          <i
          class="fa fa-spinner fa-spin mx-1"></i>
        }</button>
      </div>
    </form>
  </div>
</ng-template>


<ng-template #editmodal let-modal>
  <div class="modal-header">
    <h4 class="modal-title">{{'Edit IP Address' | translate}}</h4>
    <button type="button" class="btn-close" aria-label="Close" (click)="modal.dismiss('Cross click')">
    </button>
  </div>
  <div class="modal-body">
    <form #FormData2="ngForm" (ngSubmit)="editIp(FormData2, 'editIp')">
      <div class="form-group">
        <label class="form-label">{{'IP' | translate}} <span class="text-red">*</span></label>
        <input required [ngModel]="EditIp?.ip" type="text" class="form-control" name="ip" #ip="ngModel" [class.is-invalid]="ip.invalid && ip.touched">
        @if ((ip.invalid && ip.touched) || ip.dirty) {
          <div>
            @if (ip.errors?.['required']) {
              <small class="text-danger">{{'IP is required' | translate}}</small>
            }
          </div>
        }

      </div>
      <div class="form-group">
        <div class="custom-controls-stacked d-md-flex">
          <label class="form-label mt-1 me-5">{{'Types' | translate}} <span class="text-red">*</span></label>
          <label class="custom-control form-radio success me-4">
            <input required id="UnlockIP" [ngModel]="EditIp?.types" [checked]="EditIp?.types == 'Unlock' ? true: false" type="radio" class="custom-control-input iptype1" name="types" value="Unlock"
              #types="ngModel" [class.is-invalid]="types.invalid && types.touched">
            <span class="custom-control-label">{{'Unlock' | translate}}</span>
          </label>
          <label class="custom-control form-radio success me-4">
            <input required id="LockedIP" [ngModel]="EditIp?.types" [checked]="EditIp?.types == 'Locked' ? true: false" type="radio" class="custom-control-input iptype2" name="types" value="Locked"
              #types="ngModel" [class.is-invalid]="types.invalid && types.touched">
            <span class="custom-control-label">{{'Lock' | translate}}</span>
          </label>
          <label class="custom-control form-radio success me-4">
            <input required id="BlockedIP" [ngModel]="EditIp?.types" [checked]="EditIp?.types == 'Blocked'? true: false" type="radio" class="custom-control-input iptype3" name="types" value="Blocked"
              #types="ngModel" [class.is-invalid]="types.invalid && types.touched">
            <span class="custom-control-label">{{'Block' | translate}}</span>
          </label>
        </div>
        @if ((types.invalid && types.touched) || types.dirty) {
          <div>
            @if (types.errors?.['required']) {
              <small class="text-danger">{{'Types is required' | translate}}</small>
            }
          </div>
        }

      </div>
      <div class="form-group float-end">
        <button type="submit" [disabled]="FormData2.invalid || sendingResponse['editIp']" class="btn btn-secondary">{{'Update' | translate}}@if (sendingResponse['editIp']) {
          <i
          class="fa fa-spinner fa-spin mx-1"></i>
        }</button>
      </div>
    </form>
  </div>
</ng-template>

