<!--Page header-->
<div class="page-header d-lg-flex d-block">
  <div class="page-leftheader">
    <h4 class="page-title">
      <span class="font-weight-normal text-muted ms-2">{{'Custom Notifications' | translate}}</span>
    </h4>
  </div>
  <div class="page-rightheader ms-md-auto">
    <div class="d-flex align-items-end flex-wrap my-auto end-content breadcrumb-end">
      <div class="d-flex">
        <div class="btn-list">
          @if (permission?.includes('Custom Notifications Employee')) {
            <a routerLink="/admin/notifications/compose-employees" class="btn btn-success">{{'Compose for Employees' | translate}}</a>
          }
          @if (permission?.includes('Custom Notifications Customer')) {
            <a routerLink="/admin/notifications/compose-customers" class="btn btn-info ">{{'Compose for Customers' | translate}}</a>
          }
        </div>
      </div>
    </div>
  </div>
</div>
<!--End Page header-->

<!-- Custom Notification List -->
<div class="row">
  <div class="col-md-12 col-lg-12 col-xl-12">
    <div class="card">
      <div class="card-header border-0">
        <h4 class="card-title">{{'Custom Notifications List' | translate}}</h4>
      </div>
      <div class="card-body">
        <div class="table-responsive spruko-delete">

          <div class="table-options">
            <div class="custom-buttons">
              @if (permission?.includes('Custom Notifications Delete')) {
                <button type="button" [disabled]="sendingResponse['massDeleteNoti']" (click)="MassDeleteNotifications('massDeleteNoti')" id="massdeletenotify" class="btn btn-outline-light btn-sm mb-4 d-inline-flex align-items-center"><i class="fe fe-trash me-1"></i>
                {{'Delete'
                | translate}}
                @if (sendingResponse['massDeleteNoti']) {
                  <i class="fa fa-spinner fa-spin mx-1"></i>
                }</button>
              }
            </div>
            <mat-form-field  class="pull-right">
              <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="wpx-40 text-center" mat-header-cell *matHeaderCellDef mat-sort-header="id"> {{'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>

              <!-- name Column -->
              <ng-container matColumnDef="name">
                <th scope="col" mat-header-cell *matHeaderCellDef> {{'Name' | translate}}
                </th>
                <td mat-cell *matCellDef="let row">
                  @for (list of row?.touser?.slice(0,1); track list) {                    
                    @if (list.touser_id !== null) {
                      @if (row?.touser.length > 1) {
                        <p class="me-2 badge bg-primary">
                          {{'Multiple Employees' | translate}}
                        </p>
                      } @else {
                        <!-- @for (custlist of catlist; track custlist) {
                          @if (custlist.id === list.touser_id) { -->
                            <p class="me-2 badge bg-primary">
                              <!-- {{custlist?.name?.slice(0,40)}} -->
                              {{ getEmployeeById(list.touser_id)?.name?.slice(0, 40) }}
                            </p>
                          <!-- }
                        } -->
                      }
                    }
                    @if (list.tocust_id !== null) {
                      @if (row?.touser.length > 1) {
                        <p class="me-2 badge bg-primary">
                          {{'Multiple Customers' | translate}}
                        </p>
                      } @else {
                        <p class="me-2 badge bg-primary">
                          {{ getCustomerById(list.tocust_id)?.username?.slice(0, 40) }}
                        </p>
                      }
                    }
                  }
                </td>

              </ng-container>

              <!-- User Type Column -->
              <ng-container matColumnDef="usertype">
                <th scope="col" mat-header-cell *matHeaderCellDef mat-sort-header="custlist.userType"> {{'User Type' | translate}} </th>
                <td mat-cell *matCellDef="let row">
                  @for (list of row?.touser?.slice(0,1); track list) {
                    @if (list.touser_id !== null) {
                      {{'Employees' | translate}}
                    }
                    @if (list.tocust_id) {
                      @if (getUserById(list.tocust_id)?.userType === 'Customer') {
                        {{'Customer' | translate}}
                      }
                    }
                  }
                </td>
              </ng-container>

              <!-- subject Column -->
              <ng-container matColumnDef="subject">
                <th scope="col" mat-header-cell *matHeaderCellDef mat-sort-header="mailsubject"> {{'Subject' | translate}} </th>
                <td mat-cell *matCellDef="let row">
                  {{row?.mailsubject?.slice(0,40)}}
                </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('Custom Notifications View')) {
                      <button type="button" aria-label="view" class="action-btns1" (click)="viewCustomNotificationModel(row, viewNotification)"><i
                      class="feather feather-eye text-info" [ngbTooltip]="'View' | translate"></i></button>
                    }
                    @if (permission?.includes('Custom Notifications Delete')) {
                      <button type="button" aria-label="delte" [disabled]="sendingResponse['deletecustNotify'+i]" (click)="deleteCustomNotification(row, 'deletecustNotify'+i)"
                        class="action-btns1" id="show-delete"><i class="feather feather-trash-2 text-danger" [ngbTooltip]="'Delete' | translate"></i>
                        @if (sendingResponse['deletecustNotify'+i]) {
                          <i class="fa fa-spinner fa-spin mx-1"></i>
                        }</button>
                      }
                    </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>
          </div>
        </div>
      </div>

    </div>
  </div>
  <!-- End Custom Notification List -->


  <!-- // Category model start -->
  <ng-template #viewNotification let-modal>
    <div class="modal-header">
      <h4 class="card-title">{{'View CustomNotification' | translate}}</h4>
      <button type="button" aria-label="close" class="btn-close" (click)="modal.dismiss('Cross click')">
      </button>
    </div>
    <div class="modal-body text-break">
      <h3 id="mailsubject" class="text-break">{{groupObj.mailsubject}}</h3>
      <p id="mailtest" [innerHTML]="sanitizeHtml(groupObj.mailtext)"></p>
    </div>
  </ng-template>
  <!-- // Category model end -->