<admin-page-header [title]="'All Notifications'"></admin-page-header>

<!-- Row-->
<div class="row">
  <div class="col-xl-9 col-md-12 col-lg-8 loaddata">
    @if (authname) {
      @if (!!allNotificationList?.length) {
        @for(allList of allNotificationList; track allList; let index = $index) {
          @if(shouldShowDateBadge(allList.created_date)){
          <div class="badge badge-light-1 p-2 px-3 fs-16 ms-0 mt-0 mb-3">
            @if(allList.created_date == today){
            {{ 'Today' | translate }}
            }
            @else if(allList.created_date == yesterday){
            {{ 'Yesterday' | translate }}
            }
            @else if(allList.created_date != today && allList.created_date != yesterday){
            {{ allList.created_date | date: setting?.date_format : authtimezone }}
            }
          </div>
          }
          @if (allList?.data.hasOwnProperty('ticketassign') && allList?.data?.['ticketassign'] == 'yes') {
          <div class="card mb-3 " [ngClass]="allList?.read_at ? 'notify-read' : ''">
            <button type="button" aria-label="delete" [disabled]="sendingResponse['deletenotify' + index]"
              class="ticketnotetrash notifydeletespruko"><i class="fe fe-trash-2"
                (click)="deletenotify(allList?.id, 'deletenotify' + index)"></i>
              @if (sendingResponse['deletenotify' + index]) {
              <i class="fa fa-spinner fa-spin mx-1"></i>
              }
            </button>
            <div class="d-flex p-4 border-bottom-0">
              <div class="">
                <svg class="me-4  alt-notify" xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24"
                  viewBox="0 0 24 24">
                  <path fill="#ffce6d"
                    d="M18,13.18463V10c0-3.31372-2.68628-6-6-6s-6,2.68628-6,6v3.18463C4.83832,13.59863,4.00146,14.69641,4,16v2c0,0.00037,0,0.00073,0,0.00116C4.00031,18.5531,4.44806,19.00031,5,19h14c0.00037,0,0.00073,0,0.00116,0C19.5531,18.99969,20.00031,18.55194,20,18v-2C19.99854,14.69641,19.16168,13.59863,18,13.18463z" />
                  <path fill="#ffae0c"
                    d="M8.14233 19c.4472 1.72119 1.99689 2.99817 3.85767 3 1.86078-.00183 3.41046-1.27881 3.85767-3H8.14233zM12 4c.34149 0 .67413.03516 1 .08997V3c0-.55231-.44769-1-1-1s-1 .44769-1 1v1.08997C11.32587 4.03516 11.65851 4 12 4z" />
                </svg>
              </div>
              <div class="mt-0 text-start">
                <span class="fs-16 font-weight-semibold">{{allList?.data?.['title']?.slice(0,50)}}
                  <span class="badge badge-info badge-notify br-13 ms-2 mt-0"> {{'Assigned Ticket' | translate}}
                  </span></span>
                <p class="fs-13 mb-0 text-break"><strong>{{allList?.data?.['ticket_id'] }}</strong> {{'Ticket is assigned.' | translate}}
                  <a routerLink="/admin/ticket-view/{{allList?.['enc_ticket_id']}}" [queryParams]="{ notify: allList?.id}"
                    routerLinkActive="router-link-active" class="ms-3 text-blue mark-as-read d-inline-block">{{'View' |
                    translate}}</a></p>
              </div>
            </div>
            <span class="text-end mb-2 me-3 fs-12 text-muted">
              {{allList?.created_at | date : setting?.time_format : authtimezone}}
            </span>
          </div>
          }
          @else {
            @if (allList?.data?.['status'] != 'mail' && allList?.data?.['status'] != 'invoice') {
            <div class="card mb-3" [ngClass]="allList?.read_at ? 'notify-read' : ''">
              <button type="button" aria-label="delete" [disabled]="sendingResponse['deletenotify' + index]"
                class="ticketnotetrash notifydeletespruko" (click)="deletenotify(allList?.id, 'deletenotify' + index)">
                <i class="fe fe-trash-2"></i>
                @if (sendingResponse['deletenotify' + index]) {
                <i class="fa fa-spinner fa-spin mx-1"></i>
                }
              </button>
              <div class="d-flex p-4 border-bottom-0">
                <div class="">
                  <svg class="me-4  alt-notify" xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24"
                    viewBox="0 0 24 24">
                    <path fill="#ffce6d"
                      d="M18,13.18463V10c0-3.31372-2.68628-6-6-6s-6,2.68628-6,6v3.18463C4.83832,13.59863,4.00146,14.69641,4,16v2c0,0.00037,0,0.00073,0,0.00116C4.00031,18.5531,4.44806,19.00031,5,19h14c0.00037,0,0.00073,0,0.00116,0C19.5531,18.99969,20.00031,18.55194,20,18v-2C19.99854,14.69641,19.16168,13.59863,18,13.18463z" />
                    <path fill="#ffae0c"
                      d="M8.14233 19c.4472 1.72119 1.99689 2.99817 3.85767 3 1.86078-.00183 3.41046-1.27881 3.85767-3H8.14233zM12 4c.34149 0 .67413.03516 1 .08997V3c0-.55231-.44769-1-1-1s-1 .44769-1 1v1.08997C11.32587 4.03516 11.65851 4 12 4z" />
                  </svg>
                </div>
                <div class="mt-0 text-start">
                  <span class="fs-16 font-weight-semibold">{{allList?.data?.['title']?.slice(0,50)}}
                    <span [ngClass]="[ allList?.data?.['status'] == 'New' ? 'badge-burnt-orange' : '',
                                      allList?.data?.['status'] == 'Closed' ? 'badge-danger' : '',
                                      allList?.data?.['status'] == 'On-Hold' ? 'badge-warning' : '',
                                      allList?.data?.['status'] == 'overdue' ? 'badge-danger-light' : '',
                                      allList?.data?.['status'] == 'Re-Open' ? 'badge-teal' : '',
                                      allList?.data?.['status'] == 'Inprogress' ? 'badge-info' : ''
                                      ]" class="badge  badge-notify br-13 ms-2 mt-0">
                      {{allList?.data?.['status'] + ' Ticket' | translate}}
                    </span>
                  </span>
                  @if (allList?.data?.['status'] == 'New' && !(allList?.data?.['replystatus'] == 'Replied')) {
                  <p class="fs-13 mb-0 text-break">{{'A new ticket has been created' | translate}}
                    <strong>{{ allList?.data?.['ticket_id'] }}</strong> <a
                      routerLink="/admin/ticket-view/{{allList?.['enc_ticket_id']}}" [queryParams]="{ notify: allList?.id}"
                      class="ms-3 text-blue mark-as-read d-inline-block">{{'View' | translate}}</a>
                  </p>
                  } @else {
                  @if (allList?.data?.['replystatus'] == 'Replied' && allList?.data?.['status'] == 'New') {
                  <p class="fs-13 mb-0 text-break">{{'You got a new reply on this ticket' | translate}}
                    <strong>{{ allList?.data?.['ticket_id'] }}</strong> <a
                      routerLink="/admin/ticket-view/{{allList?.['enc_ticket_id']}}" [queryParams]="{ notify: allList?.id}"
                      class="ms-3 text-blue mark-as-read d-inline-block">{{'View' | translate}}</a>
                  </p>
                  }
                  }
                  @if (allList?.data?.['status'] == 'Closed') {
                  <p class="fs-13 mb-0 text-break">{{'This ticket has been closed' | translate}}
                    <strong>{{ allList?.data?.['ticket_id'] }}</strong> <a
                      routerLink="/admin/ticket-view/{{allList?.['enc_ticket_id']}}" [queryParams]="{ notify: allList?.id}"
                      class="ms-3 text-blue mark-as-read d-inline-block">{{'View' | translate}}</a>
                  </p>
                  }
                  @if (allList?.data?.['status'] == 'On-Hold') {
                  <p class="fs-13 mb-0 text-break">{{'This ticket status is On-Hold' | translate}}
                    <strong>{{ allList?.data?.['ticket_id'] }}</strong> <a
                      routerLink="/admin/ticket-view/{{allList?.['enc_ticket_id']}}" [queryParams]="{ notify: allList?.id}"
                      class="ms-3 text-blue mark-as-read d-inline-block">{{'View' | translate}}</a>
                  </p>
                  }
                  @if (allList?.data?.['status'] == 'overdue') {
                  <p class="fs-13 mb-0 text-break">{{'This ticket status is overdue' | translate}}
                    <strong>{{ allList?.data?.['ticket_id'] }}</strong> <a
                      routerLink="/admin/ticket-view/{{allList?.['enc_ticket_id']}}" [queryParams]="{ notify: allList?.id}"
                      class="ms-3 text-blue mark-as-read d-inline-block">{{'View' | translate}}</a>
                  </p>
                  }
                  @if (allList?.data?.['status'] == 'Re-Open') {
                  <p class="fs-13 mb-0 text-break">{{'This ticket has been reopened' | translate}}
                    <strong>{{ allList?.data?.['ticket_id'] }}</strong> <a
                      routerLink="/admin/ticket-view/{{allList?.['enc_ticket_id']}}" [queryParams]="{ notify: allList?.id}"
                      class="ms-3 text-blue mark-as-read d-inline-block">{{'View' | translate}}</a>
                  </p>
                  }
                  @if (allList?.data?.['status'] == 'Inprogress') {
                  <p class="fs-13 mb-0 text-break">{{'You got a new reply on this ticket' | translate}}
                    <strong>{{ allList?.data?.['ticket_id'] }}</strong> <a
                      routerLink="/admin/ticket-view/{{allList?.['enc_ticket_id']}}" [queryParams]="{ notify: allList?.id}"
                      class="ms-3 text-blue mark-as-read d-inline-block">{{'View' | translate}}</a>
                  </p>
                  }
                </div>
              </div>
              <span class="text-end mb-2 me-3 fs-12 text-muted">
                {{allList?.created_at | date : setting?.time_format : authtimezone}}
              </span>
            </div>
            }
            @if (allList?.data?.['status'] == 'mail' && allList?.data?.['status'] != 'invoice') {
            <div class="card mb-3 notify-read">
              <button aria-label="delete" type="button" [disabled]="sendingResponse['deletenotify' + index]"
                class="ticketnotetrash notifydeletespruko" (click)="deletenotify(allList?.id, 'deletenotify' + index)">
                <i class="fe fe-trash-2"></i>
                @if (sendingResponse['deletenotify' + index]) {
                <i class="fa fa-spinner fa-spin mx-1"></i>
                }
              </button>
              <div class="d-flex p-4 border-bottom-0">
                <div class="">
                  <svg class="alt-notify mail me-4" xmlns=" http://www.w3.org/2000/svg" viewBox="0 0 24 24">
                    <path fill="#8ac0c3"
                      d="M19,20H5a3.00328,3.00328,0,0,1-3-3V7A3.00328,3.00328,0,0,1,5,4H19a3.00328,3.00328,0,0,1,3,3V17A3.00328,3.00328,0,0,1,19,20Z" />
                    <path fill="#3c969c"
                      d="M22,7a3.00328,3.00328,0,0,0-3-3H5A3.00328,3.00328,0,0,0,2,7V8.061l9.47852,5.79248a1.00149,1.00149,0,0,0,1.043,0L22,8.061Z" />
                  </svg>
                </div>
                <div class="mt-0 text-start">
                  <span class="fs-16 font-weight-semibold">{{allList?.data?.['mailsubject']}}
                    <span [ngStyle]="{'background-color' : allList?.data?.mailsendtagcolor}"
                      class="badge badge-success badge-notify br-13 ms-2 mt-0"> {{allList?.data?.['mailsendtag']}}
                    </span>
                  </span>
                  <p class="fs-13 mb-0 text-break pe-6">
                    <span [innerHTML]="sanitizeHtml(allList?.data?.['mailtext'].slice(0,50))"></span> <a
                      routerLink="/admin/notifications/notification/{{allList?.id}}" [queryParams]="{ notify: allList?.id}"
                      class="ms-3 text-blue mark-as-read d-inline-block">{{'View' | translate}}</a>
                  </p>
                </div>
              </div>
              <span class="text-end mb-2 me-3 fs-12 text-muted">
                {{allList?.created_at | date : setting.time_format : authtimezone}}
              </span>
            </div>
            }

            @if((allList?.data?.['status'] == 'invoice') && (allList?.data['itemStatus'] == 'pending')){
            @if(allList?.read_at != null){
            <div class="card mb-3 border-0 notify-read">
              <div class="d-flex p-3">
                <div class="">
                  <svg class="me-4  alt-notify" xmlns="http://www.w3.org/2000/svg" enableBackground="new 0 0 24 24"
                    viewBox="0 0 24 24">
                    <path fill="#ffce6d"
                      d="M18,13.18463V10c0-3.31372-2.68628-6-6-6s-6,2.68628-6,6v3.18463C4.83832,13.59863,4.00146,14.69641,4,16v2c0,0.00037,0,0.00073,0,0.00116C4.00031,18.5531,4.44806,19.00031,5,19h14c0.00037,0,0.00073,0,0.00116,0C19.5531,18.99969,20.00031,18.55194,20,18v-2C19.99854,14.69641,19.16168,13.59863,18,13.18463z">
                    </path>
                    <path fill="#ffae0c"
                      d="M8.14233 19c.4472 1.72119 1.99689 2.99817 3.85767 3 1.86078-.00183 3.41046-1.27881 3.85767-3H8.14233zM12 4c.34149 0 .67413.03516 1 .08997V3c0-.55231-.44769-1-1-1s-1 .44769-1 1v1.08997C11.32587 4.03516 11.65851 4 12 4z">
                    </path>
                  </svg>
                </div>
                <div class="mt-0 text-start">
                  <span class="fs-14 fw-semibold">{{'New custom invoice created.' | translate}}
                    <span class="badge bg-warning badge-notify ms-2"> {{'Custom Invoice Created' | translate}} </span>
                  </span>
                  <a routerLink="/admin/payments/custom-invoice/{{allList?.data['invoice_id']}}"
                    class="ms-3 text-primary mark-as-read">{{'View' | translate}}</a>

                </div>
                <button aria-label="delete" type="button" disabled={isPending} class="ticketnotetrash notifydeletespruko"
                  (click)="deletenotify(allList?.id, 'deletenotify' + index)">
                  <i class="fe fe-trash-2"></i>
                  @if (sendingResponse['deleteNotification' + index]) {
                  <i class="fa fa-spinner fa-spin mx-1"></i>
                  }
                </button>
              </div>
              <span class="text-end mb-2 me-3 fs-12 text-muted">
                {{allList?.created_at | date : setting?.time_format : authtimezone}}
              </span>
            </div>
            }@else{
            <div class="card mb-3">
              <div class="d-flex p-3">
                <div class="">
                  <svg class="me-4  alt-notify" xmlns="http://www.w3.org/2000/svg" enableBackground="new 0 0 24 24"
                    viewBox="0 0 24 24">
                    <path fill="#ffce6d"
                      d="M18,13.18463V10c0-3.31372-2.68628-6-6-6s-6,2.68628-6,6v3.18463C4.83832,13.59863,4.00146,14.69641,4,16v2c0,0.00037,0,0.00073,0,0.00116C4.00031,18.5531,4.44806,19.00031,5,19h14c0.00037,0,0.00073,0,0.00116,0C19.5531,18.99969,20.00031,18.55194,20,18v-2C19.99854,14.69641,19.16168,13.59863,18,13.18463z">
                    </path>
                    <path fill="#ffae0c"
                      d="M8.14233 19c.4472 1.72119 1.99689 2.99817 3.85767 3 1.86078-.00183 3.41046-1.27881 3.85767-3H8.14233zM12 4c.34149 0 .67413.03516 1 .08997V3c0-.55231-.44769-1-1-1s-1 .44769-1 1v1.08997C11.32587 4.03516 11.65851 4 12 4z">
                    </path>
                  </svg>
                </div>
                <div class="mt-0 text-start">
                  <span class="fs-14 fw-semibold">{{'New custom invoice created.' | translate }}
                    <span class="badge bg-warning badge-notify ms-2"> {{'Custom Invoice Created' | translate}} </span>
                  </span>
                  <a routerLink="/admin/payments/custom-invoice/{{allList?.data['invoice_id']}}"
                    class="ms-3 text-primary mark-as-read">
                    {{'View' | translate}}
                  </a>
                </div>
                <button aria-label="delete" type="button" disabled={isPending} class="ticketnotetrash notifydeletespruko"
                  (click)="deletenotify(allList?.id, 'deletenotify' + index)">
                  <i class="fe fe-trash-2"></i>
                  @if (sendingResponse['deleteNotification' + index]) {
                  <i class="fa fa-spinner fa-spin mx-1"></i>
                  }
                </button>
              </div>
              <span class="text-end mb-2 me-3 fs-12 text-muted">
                {{allList?.created_at | date : setting?.time_format : authtimezone}}
              </span>
            </div>
            }
            }
            @if((allList?.data['status'] == 'invoice') && (allList?.data['itemStatus'] == 'refundRejected')){

            @if(allList?.read_at != null){
            <div class="card mb-3 border-0 notify-read">
              <div class="d-flex p-3">
                <div class="">
                  <svg class="me-4  alt-notify" xmlns="http://www.w3.org/2000/svg" enableBackground="new 0 0 24 24"
                    viewBox="0 0 24 24">
                    <path fill="#ffce6d"
                      d="M18,13.18463V10c0-3.31372-2.68628-6-6-6s-6,2.68628-6,6v3.18463C4.83832,13.59863,4.00146,14.69641,4,16v2c0,0.00037,0,0.00073,0,0.00116C4.00031,18.5531,4.44806,19.00031,5,19h14c0.00037,0,0.00073,0,0.00116,0C19.5531,18.99969,20.00031,18.55194,20,18v-2C19.99854,14.69641,19.16168,13.59863,18,13.18463z">
                    </path>
                    <path fill="#ffae0c"
                      d="M8.14233 19c.4472 1.72119 1.99689 2.99817 3.85767 3 1.86078-.00183 3.41046-1.27881 3.85767-3H8.14233zM12 4c.34149 0 .67413.03516 1 .08997V3c0-.55231-.44769-1-1-1s-1 .44769-1 1v1.08997C11.32587 4.03516 11.65851 4 12 4z">
                    </path>
                  </svg>
                </div>
                <div class="mt-0 text-start">
                  <span class="fs-14 fw-semibold">{{'Your refund request is rejected.' | translate }}
                    <span class="badge bg-danger badge-notify ms-2"> {{'Refund Rejected' | translate }} </span>
                  </span>
                  <p class="fs-13 mb-0 text-break">{{'Your refund request has been rejected.' | translate }}
                    <a routerLink="/admin/payments/refund-view/{{allList?.data['tx_id']}}"
                      class="ms-3 text-primary mark-as-read">{{'View' | translate }}</a>
                  </p>
                </div>
                <button aria-label="delete" type="button" disabled={isPending} class="ticketnotetrash notifydeletespruko"
                  (click)="deletenotify(allList?.id, 'deletenotify' + index)">
                  <i class="fe fe-trash-2"></i>
                  @if (sendingResponse['deleteNotification' + index]) {
                  <i class="fa fa-spinner fa-spin mx-1"></i>
                  }
                </button>
              </div>
              <span class="text-end mb-2 me-3 fs-12 text-muted">
                {{allList?.created_at | date : setting?.time_format : authtimezone}}
              </span>
            </div>
            }@else{
            <div class="card mb-3">
              <div class="d-flex p-3">
                <div class="">
                  <svg class="me-4  alt-notify" xmlns="http://www.w3.org/2000/svg" enableBackground="new 0 0 24 24"
                    viewBox="0 0 24 24">
                    <path fill="#ffce6d"
                      d="M18,13.18463V10c0-3.31372-2.68628-6-6-6s-6,2.68628-6,6v3.18463C4.83832,13.59863,4.00146,14.69641,4,16v2c0,0.00037,0,0.00073,0,0.00116C4.00031,18.5531,4.44806,19.00031,5,19h14c0.00037,0,0.00073,0,0.00116,0C19.5531,18.99969,20.00031,18.55194,20,18v-2C19.99854,14.69641,19.16168,13.59863,18,13.18463z">
                    </path>
                    <path fill="#ffae0c"
                      d="M8.14233 19c.4472 1.72119 1.99689 2.99817 3.85767 3 1.86078-.00183 3.41046-1.27881 3.85767-3H8.14233zM12 4c.34149 0 .67413.03516 1 .08997V3c0-.55231-.44769-1-1-1s-1 .44769-1 1v1.08997C11.32587 4.03516 11.65851 4 12 4z">
                    </path>
                  </svg>
                </div>
                <div class="mt-0 text-start">
                  <span class="fs-14 fw-semibold">{{'Your refund request is rejected.' | translate }}
                    <span class="badge bg-danger badge-notify ms-2"> {{'Refund Rejected' | translate }} </span>
                  </span>
                  <p class="fs-13 mb-0 text-break">{{'Your refund request has been rejected.' | translate }}
                    <a routerLink="/admin/payments/refund-view/{{allList?.data['tx_id']}}"
                      class="ms-3 text-primary mark-as-read">{{'View' | translate }}</a>
                  </p>
                </div>
                <button aria-label="delete" type="button" disabled={isPending} class="ticketnotetrash notifydeletespruko"
                  (click)="deletenotify(allList?.id, 'deletenotify' + index)">
                  <i class="fe fe-trash-2"></i>
                  @if (sendingResponse['deleteNotification' + index]) {
                  <i class="fa fa-spinner fa-spin mx-1"></i>
                  }
                </button>
              </div>
              <span class="text-end mb-2 me-3 fs-12 text-muted">
                {{allList?.created_at | date : setting?.time_format : authtimezone}}
              </span>
            </div>}
            }


            @if((allList?.data['status'] == 'invoice') && (allList?.data['itemStatus'] == 'refunded')){

            @if(allList?.read_at != null) {
            <div class="card mb-3 border-0 notify-read">
              <div class="d-flex p-3">
                <div class="">
                  <svg class="me-4  alt-notify" xmlns="http://www.w3.org/2000/svg" enableBackground="new 0 0 24 24"
                    viewBox="0 0 24 24">
                    <path fill="#ffce6d"
                      d="M18,13.18463V10c0-3.31372-2.68628-6-6-6s-6,2.68628-6,6v3.18463C4.83832,13.59863,4.00146,14.69641,4,16v2c0,0.00037,0,0.00073,0,0.00116C4.00031,18.5531,4.44806,19.00031,5,19h14c0.00037,0,0.00073,0,0.00116,0C19.5531,18.99969,20.00031,18.55194,20,18v-2C19.99854,14.69641,19.16168,13.59863,18,13.18463z">
                    </path>
                    <path fill="#ffae0c"
                      d="M8.14233 19c.4472 1.72119 1.99689 2.99817 3.85767 3 1.86078-.00183 3.41046-1.27881 3.85767-3H8.14233zM12 4c.34149 0 .67413.03516 1 .08997V3c0-.55231-.44769-1-1-1s-1 .44769-1 1v1.08997C11.32587 4.03516 11.65851 4 12 4z">
                    </path>
                  </svg>
                </div>
                <div class="mt-0 text-start">
                  <span class="fs-14 fw-semibold">{{'Your refund request is approved.' | translate }}
                    <span class="badge bg-success badge-notify ms-2"> {{'Refund Approved' | translate }} </span>
                  </span>
                  <p class="fs-13 mb-0 text-break">{{'Your refund request has been approved.' | translate }}
                    <a routerLink="/admin/payments/refund-view/{{allList?.data['tx_id']}}"
                      class="ms-3 text-primary mark-as-read">{{'View' | translate }}</a>
                  </p>
                </div>
                <button aria-label="delete" type="button" disabled={isPending} class="ticketnotetrash notifydeletespruko"
                  (click)="deletenotify(allList?.id, 'deletenotify' + index)">
                  <i class="fe fe-trash-2"></i>
                  @if (sendingResponse['deleteNotification' + index]) {
                  <i class="fa fa-spinner fa-spin mx-1"></i>
                  }
                </button>
              </div>
              <span class="text-end mb-2 me-3 fs-12 text-muted">
                {{allList?.created_at | date : setting?.time_format : authtimezone}}
              </span>
            </div>
            }
            @else{
            <div class="card mb-3">
              <div class="d-flex p-3">
                <div class="">
                  <svg class="me-4  alt-notify" xmlns="http://www.w3.org/2000/svg" enableBackground="new 0 0 24 24"
                    viewBox="0 0 24 24">
                    <path fill="#ffce6d"
                      d="M18,13.18463V10c0-3.31372-2.68628-6-6-6s-6,2.68628-6,6v3.18463C4.83832,13.59863,4.00146,14.69641,4,16v2c0,0.00037,0,0.00073,0,0.00116C4.00031,18.5531,4.44806,19.00031,5,19h14c0.00037,0,0.00073,0,0.00116,0C19.5531,18.99969,20.00031,18.55194,20,18v-2C19.99854,14.69641,19.16168,13.59863,18,13.18463z">
                    </path>
                    <path fill="#ffae0c"
                      d="M8.14233 19c.4472 1.72119 1.99689 2.99817 3.85767 3 1.86078-.00183 3.41046-1.27881 3.85767-3H8.14233zM12 4c.34149 0 .67413.03516 1 .08997V3c0-.55231-.44769-1-1-1s-1 .44769-1 1v1.08997C11.32587 4.03516 11.65851 4 12 4z">
                    </path>
                  </svg>
                </div>
                <div class="mt-0 text-start">
                  <span class="fs-14 fw-semibold">{{'Your refund request is approved.' | translate }}
                    <span class="badge bg-success badge-notify ms-2"> {{'Refund Approved' | translate }} </span>
                  </span>
                  <p class="fs-13 mb-0 text-break">
                    {{'Your refund request has been approved.' | translate }}
                    <a routerLink="/admin/payments/refund-view/{{allList?.data['tx_id']}}"
                      class="ms-3 text-primary mark-as-read">{{'View' | translate }}</a>
                  </p>
                </div>
                <button aria-label="delete" type="button" disabled={isPending} class="ticketnotetrash notifydeletespruko"
                  (click)="deletenotify(allList?.id, 'deletenotify' + index)">
                  <i class="fe fe-trash-2"></i>
                  @if (sendingResponse['deleteNotification' + index]) {
                  <i class="fa fa-spinner fa-spin mx-1"></i>
                  }
                </button>
              </div>
              <span class="text-end mb-2 me-3 fs-12 text-muted">
                {{allList?.created_at | date : setting?.time_format : authtimezone}}
              </span>
            </div>
            }
            }

            @if((allList?.data['status'] == 'invoice') && (allList?.data['itemStatus'] == 'refundpending')){

            @if(allList?.read_at != null){
            <div class="card mb-3 border-0 notify-read">
              <div class="d-flex p-3">
                <div class="">
                  <svg class="me-4  alt-notify" xmlns="http://www.w3.org/2000/svg" enableBackground="new 0 0 24 24"
                    viewBox="0 0 24 24">
                    <path fill="#ffce6d"
                      d="M18,13.18463V10c0-3.31372-2.68628-6-6-6s-6,2.68628-6,6v3.18463C4.83832,13.59863,4.00146,14.69641,4,16v2c0,0.00037,0,0.00073,0,0.00116C4.00031,18.5531,4.44806,19.00031,5,19h14c0.00037,0,0.00073,0,0.00116,0C19.5531,18.99969,20.00031,18.55194,20,18v-2C19.99854,14.69641,19.16168,13.59863,18,13.18463z">
                    </path>
                    <path fill="#ffae0c"
                      d="M8.14233 19c.4472 1.72119 1.99689 2.99817 3.85767 3 1.86078-.00183 3.41046-1.27881 3.85767-3H8.14233zM12 4c.34149 0 .67413.03516 1 .08997V3c0-.55231-.44769-1-1-1s-1 .44769-1 1v1.08997C11.32587 4.03516 11.65851 4 12 4z">
                    </path>
                  </svg>
                </div>
                <div class="mt-0 text-start">
                  <span class="fs-14 fw-semibold">{{'Recieved a new refund request.' | translate }}
                    <span class="badge bg-teal  badge-notify ms-2"> {{'Refund Request' | translate }} </span>
                  </span>
                  <p class="fs-13 mb-0 text-break">{{allList?.data['reason']?.slice(0, 30)}} <strong>{{'Invoice Id' | translate }}
                      #{{allList?.data['invoice_id']}}</strong>
                    <a routerLink="/admin/payments/refund-view/{{allList?.data['tx_id']}}" class="ms-3 text-primary">{{'View' |
                      translate }}</a>
                  </p>
                </div>
                <button aria-label="delete" type="button" disabled={isPending} class="ticketnotetrash notifydeletespruko"
                  (click)="deletenotify(allList?.id, 'deletenotify' + index)">
                  <i class="fe fe-trash-2"></i>
                  @if (sendingResponse['deleteNotification' + index]) {
                  <i class="fa fa-spinner fa-spin mx-1"></i>
                  }
                </button>
              </div>
              <span class="text-end mb-2 me-3 fs-12 text-muted">
                {{allList?.created_at | date : setting?.time_format : authtimezone}}
              </span>
            </div>
            }@else{
            <div class="card mb-3 border-0">
              <div class="d-flex p-3">
                <div class="">
                  <svg class="me-4  alt-notify" xmlns="http://www.w3.org/2000/svg" enableBackground="new 0 0 24 24"
                    viewBox="0 0 24 24">
                    <path fill="#ffce6d"
                      d="M18,13.18463V10c0-3.31372-2.68628-6-6-6s-6,2.68628-6,6v3.18463C4.83832,13.59863,4.00146,14.69641,4,16v2c0,0.00037,0,0.00073,0,0.00116C4.00031,18.5531,4.44806,19.00031,5,19h14c0.00037,0,0.00073,0,0.00116,0C19.5531,18.99969,20.00031,18.55194,20,18v-2C19.99854,14.69641,19.16168,13.59863,18,13.18463z">
                    </path>
                    <path fill="#ffae0c"
                      d="M8.14233 19c.4472 1.72119 1.99689 2.99817 3.85767 3 1.86078-.00183 3.41046-1.27881 3.85767-3H8.14233zM12 4c.34149 0 .67413.03516 1 .08997V3c0-.55231-.44769-1-1-1s-1 .44769-1 1v1.08997C11.32587 4.03516 11.65851 4 12 4z">
                    </path>
                  </svg>
                </div>
                <div class="mt-0 text-start">
                  <span class="fs-14 fw-semibold">{{'Recieved a new refund request.' | translate }}
                    <span class="badge bg-teal  badge-notify ms-2"> {{'Refund Request' | translate }} </span>
                  </span>
                  <p class="fs-13 mb-0 text-break">{{allList?.data['reason']?.slice(0, 30)}}<strong>{{'Invoice Id' | translate }}
                      #{{allList?.data['invoice_id']}}</strong> <a
                      routerLink="/admin/payments/refund-view/{{allList?.data['tx_id']}}" class="ms-3 text-primary">{{'View' |
                      translate }}</a></p>
                </div>
                <button aria-label="delete" type="button" disabled={isPending} class="ticketnotetrash notifydeletespruko"
                  (click)="deletenotify(allList?.id, 'deletenotify' + index)">
                  <i class="fe fe-trash-2"></i>
                  @if (sendingResponse['deleteNotification' + index]) {
                  <i class="fa fa-spinner fa-spin mx-1"></i>
                  }
                </button>
              </div>
              <span class="text-end mb-2 me-3 fs-12 text-muted">
                {{allList?.created_at | date : setting?.time_format : authtimezone}}
              </span>
            </div>
            }
            }
          }
        }
      }
      @else {
      <div class="card">
        <div class="card-body h-100 w-100">
          <div class="main-content text-center">
            <div class="notification-icon-container p-4">
              <svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" viewBox="0 0 24 24">
                <path
                  d="M21.9,21.1l-19-19C2.7,2,2.4,2,2.2,2.1C2,2.3,2,2.7,2.1,2.9l4.5,4.5C6.2,8.2,6,9.1,6,10v4.1c-1.1,0.2-2,1.2-2,2.4v2C4,18.8,4.2,19,4.5,19h3.7c0.5,1.7,2,3,3.8,3c1.8,0,3.4-1.3,3.8-3h2.5l2.9,2.9c0.1,0.1,0.2,0.1,0.4,0.1c0.1,0,0.3-0.1,0.4-0.1C22,21.7,22,21.3,21.9,21.1z M7,10c0-0.7,0.1-1.3,0.4-1.9l5.9,5.9H7V10z M13,20.8c-1.6,0.5-3.3-0.3-3.8-1.8h5.6C14.5,19.9,13.8,20.5,13,20.8z M5,18v-1.5C5,15.7,5.7,15,6.5,15h7.8l3,3H5z M9.6,5.6c1.9-1,4.3-0.7,5.9,0.9C16.5,7.4,17,8.7,17,10v3.3c0,0.3,0.2,0.5,0.5,0.5h0c0.3,0,0.5-0.2,0.5-0.5V10c0-3.1-2.4-5.7-5.5-6V2.5C12.5,2.2,12.3,2,12,2s-0.5,0.2-0.5,0.5V4c-0.8,0.1-1.6,0.3-2.3,0.7c0,0,0,0,0,0C8.9,4.8,8.8,5.1,9,5.4C9.1,5.6,9.4,5.7,9.6,5.6z" />
              </svg>
            </div>
            <h4 class="mb-1">{{'There are no new notifications to display'| translate}}</h4>
            <p class="text-muted">{{'There are no notifications. We will notify you when the new notification arrives.'|
              translate}}</p>
          </div>
        </div>
      </div>
      }
    }
    <div #commentsClose>
      @if (isLoadingComments) {
      <i class="fe fe-loader"></i>
      }
    </div>
  </div>
  <div class="col-xl-3 col-md-12 col-lg-4 mt-5 mt-lg-0">
    <div class="card">
      <div class="card-header border-0">
        <h4 class="card-title">{{'Filter Notifications' | translate}}</h4>
      </div>
      <form id="notifysearch">
        <div class="card-body pb-0">
          <div class="form-group">
            <input type="search" class="form-control notifysearch" name="notifysearch" placeholder="Search here ...">
            <i class="fe fe-search search-element"></i>
          </div>
        </div>
      </form>
      <form>
        <div class="card-body">
          <div class="form-group">
            <h6 class="mb-4">{{'Sort by Status' | translate }}</h6>
            <div class="form-check">
              <input type="checkbox" class="notifystatus form-check-input" name="notifystatus[]" value="New"
                id="flexCheckDefaultq">
              <label for="flexCheckDefaultq" class=" ms-2">{{'New Tickets' | translate }}</label>
            </div>
            <div class=" form-check">
              <input type="checkbox" class="form-check-input notifystatus" name="notifystatus[]" value="Closed"
                id="flexCheckDefaultw">
              <label for="flexCheckDefaultw" class=" ms-2">{{'Closed Tickets' | translate}}</label>
            </div>
            <div class=" form-check">
              <input type="checkbox" class="form-check-input notifystatus" name="notifystatus[]" value="On-Hold"
                id="flexCheckDefaulte">
              <label for="flexCheckDefaulte" class=" ms-2">{{'On-Hold Tickets' | translate}}</label>
            </div>
            <div class=" form-check">
              <input type="checkbox" class="form-check-input notifystatus" name="notifystatus[]" value="overdue"
                id="flexCheckDefaultr">
              <label for="flexCheckDefaultr" class=" ms-2">{{'Overdue Tickets' | translate}}</label>
            </div>
            <div class=" form-check">
              <input type="checkbox" class="form-check-input notifystatus" name="notifystatus[]" value="Re-Open"
                id="flexCheckDefaultt">
              <label for="flexCheckDefaultt" class=" ms-2">{{'Re-Open Tickets' | translate}}</label>
            </div>
            <div class=" form-check">
              <input type="checkbox" class="form-check-input notifystatus" name="notifystatus[]" value="Inprogress"
                id="flexCheckDefaultf">
              <label for="flexCheckDefaultf" class=" ms-2">{{'Inprogress Tickets' | translate}}</label>
            </div>
            <div class=" form-check">
              <input type="checkbox" class="form-check-input notifystatus" name="notifystatus[]" value="mail"
                id="flexCheckDefaultqq">
              <label for="flexCheckDefaultqq" class=" ms-2">{{'Custom Notifications' | translate}}</label>
            </div>
            <div class=" form-check">
              <input type="checkbox" class="form-check-input notifystatus" name="notifystatus[]" value="invoice"
                id="flexCheckDefaulta">
              <label for="flexCheckDefaulta" class=" ms-2">{{'Custom Invoice Notifications' | translate}}</label>
            </div>
            <div class=" form-check">
              <input type="checkbox" class="form-check-input notifystatus" name="notifystatus[]" value="refund"
                id="flexCheckDefaultb">
              <label for="flexCheckDefaultb" class=" ms-2">{{'Refund Notifications' | translate}}</label>
            </div>
          </div>
        </div>
      </form>
    </div>
  </div>
</div>
<!-- End Row-->