  <!--- Custom notification -->
  @if (Auth) {
    @if (mailnotify?.length) {
      <ngb-alert type="alert-warning-light" class="alert alert-warning-light br-13 mt-6 align-items-center border-0 d-flex">
        <div class="d-flex">
          <svg class="alt-notify  me-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
            <path fill="#eec466" 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="#e49e00" 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>
        <ul class="notify vertical-scroll5 custom-ul ht-0 me-5 parent " (mouseenter)="stopScroll()" (mouseleave)="startScroll()">
          @for (notification of mailnotify; track notification) {
            <li class="item text-break content" [ngStyle]="{'animation-play-state': animationPlayState}">
              @if (notification?.data?.status == 'mail') {
                <p class="fs-13 mb-0">{{notification?.data?.mailsubject}}
                  <span [innerHTML]="sanitizeHtml(notification?.data?.mailtext.slice(0,40))"></span>
                  <a (click)="sendMarkRequest(notification?.id)" routerLink="/customer/notifications/{{notification?.id}}" class="ms-3 text-blue mark-as-read">{{'Read more' | translate}}</a>
                </p>
              }
            </li>
          }
          <li class="item text-break content" [ngStyle]="{'animation-play-state': animationPlayState}"></li>
          <li class="item text-break content" [ngStyle]="{'animation-play-state': animationPlayState}"></li>
        </ul>
      </ngb-alert>
    }
  }
  <!--- End Custom notification -->
  <div class="row">
    <div class="col-xl-3 col-lg-3 col-md-12">
      <div class="card">
        <div class="card-body">
          <div class="row">
            <div class="col-7">
              <div class="mt-0 text-start">
                <span class="fs-16 font-weight-semibold">{{
                  "Total Tickets" | translate
                }}</span>
                <h3 class="mb-0 mt-1 text-primary fs-25">
                  {{ totlaTicketscount }}
                </h3>
              </div>
            </div>
            <div class="col-5">
              <div class="icon1 bg-primary-transparent my-auto float-end">
                <i class="las la-ticket-alt"></i>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="col-xl-3 col-lg-3 col-md-12">
      <div class="card">
        <div class="card-body">
          <div class="row">
            <div class="col-7">
              <div class="mt-0 text-start">
                <span class="fs-16 font-weight-semibold">{{
                  "Active Tickets" | translate
                }}</span>
                <h3 class="mb-0 mt-1 text-success fs-25">
                  {{ activeTicketscount }}
                </h3>
              </div>
            </div>
            <div class="col-5">
              <div class="icon1 bg-success-transparent my-auto float-end">
                <i class="ri-ticket-2-line"></i>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="col-xl-3 col-lg-3 col-md-12">
      <div class="card">
        <div class="card-body">
          <div class="row">
            <div class="col-7">
              <div class="mt-0 text-start">
                <span class="fs-16 font-weight-semibold">{{
                  "On-Hold Tickets" | translate
                }}</span>
                <h3 class="mb-0 mt-1 text-secondary fs-25">
                  {{ onhoildTicketscount }}
                </h3>
              </div>
            </div>
            <div class="col-5">
              <div class="icon1 bg-warning-transparent my-auto float-end">
                <i class="ri-coupon-2-line"></i>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="col-xl-3 col-lg-3 col-md-12">
      <div class="card">
        <div class="card-body">
          <div class="row">
            <div class="col-7">
              <div class="mt-0 text-start">
                <span class="fs-16 font-weight-semibold">{{
                  "Closed Tickets" | translate
                }}</span>
                <h3 class="mb-0 mt-1 text-secondary fs-25">
                  {{ closedTicketscount }}
                </h3>
              </div>
            </div>
            <div class="col-5">
              <div class="icon1 bg-danger-transparent my-auto float-end">
                <i class="ri-coupon-2-line"></i>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    
    @if(quotationscount > 0){
    <div class="col-xl-3 col-lg-3 col-md-12">
        <div class="card">
            <span>
                <a >
                    <div class="card-body">
                        <div class="row">
                            <div class="col-7">
                                <div class="mt-0 text-start">
                                    <span class="fs-14  font-weight-semibold">{{ 'Quotations' | translate}}</span>
                                    <h3 class="mb-0 mt-1 text-secondary fs-20">{{ quotationscount }}</h3>
                                </div>
                            </div>
                            <div class="col-5">
                                <div class="icon1 bg-danger-transparent my-auto  float-end"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-receipt" viewBox="0 0 16 16">
                                    <path d="M1.92.506a.5.5 0 0 1 .434.14L3 1.293l.646-.647a.5.5 0 0 1 .708 0L5 1.293l.646-.647a.5.5 0 0 1 .708 0L7 1.293l.646-.647a.5.5 0 0 1 .708 0L9 1.293l.646-.647a.5.5 0 0 1 .708 0l.646.647.646-.647a.5.5 0 0 1 .708 0l.646.647.646-.647a.5.5 0 0 1 .801.13l.5 1A.5.5 0 0 1 15 2v12a.5.5 0 0 1-.053.224l-.5 1a.5.5 0 0 1-.8.13L13 14.707l-.646.647a.5.5 0 0 1-.708 0L11 14.707l-.646.647a.5.5 0 0 1-.708 0L9 14.707l-.646.647a.5.5 0 0 1-.708 0L7 14.707l-.646.647a.5.5 0 0 1-.708 0L5 14.707l-.646.647a.5.5 0 0 1-.708 0L3 14.707l-.646.647a.5.5 0 0 1-.801-.13l-.5-1A.5.5 0 0 1 1 14V2a.5.5 0 0 1 .053-.224l.5-1a.5.5 0 0 1 .367-.27m.217 1.338L2 2.118v11.764l.137.274.51-.51a.5.5 0 0 1 .707 0l.646.647.646-.646a.5.5 0 0 1 .708 0l.646.646.646-.646a.5.5 0 0 1 .708 0l.646.646.646-.646a.5.5 0 0 1 .708 0l.646.646.646-.646a.5.5 0 0 1 .708 0l.646.646.646-.646a.5.5 0 0 1 .708 0l.509.509.137-.274V2.118l-.137-.274-.51.51a.5.5 0 0 1-.707 0L12 1.707l-.646.647a.5.5 0 0 1-.708 0L10 1.707l-.646.647a.5.5 0 0 1-.708 0L8 1.707l-.646.647a.5.5 0 0 1-.708 0L6 1.707l-.646.647a.5.5 0 0 1-.708 0L4 1.707l-.646.647a.5.5 0 0 1-.708 0z"/>
                                    <path d="M3 4.5a.5.5 0 0 1 .5-.5h6a.5.5 0 1 1 0 1h-6a.5.5 0 0 1-.5-.5m0 2a.5.5 0 0 1 .5-.5h6a.5.5 0 1 1 0 1h-6a.5.5 0 0 1-.5-.5m0 2a.5.5 0 0 1 .5-.5h6a.5.5 0 1 1 0 1h-6a.5.5 0 0 1-.5-.5m0 2a.5.5 0 0 1 .5-.5h6a.5.5 0 0 1 0 1h-6a.5.5 0 0 1-.5-.5m8-6a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 0 1h-1a.5.5 0 0 1-.5-.5m0 2a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 0 1h-1a.5.5 0 0 1-.5-.5m0 2a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 0 1h-1a.5.5 0 0 1-.5-.5m0 2a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 0 1h-1a.5.5 0 0 1-.5-.5"/>
                                </svg> </div>
                            </div>
                        </div>
                    </div>
                </a>
            </span>
        </div>
    </div>
  }

    @if(invoicescount > 0){
    <div class="col-xl-3 col-lg-3 col-md-12">
        <div class="card">
            <span>
                <a routerLink="">
                    <div class="card-body">
                        <div class="row">
                            <div class="col-7">
                                <div class="mt-0 text-start">
                                    <span class="fs-14 font-weight-semibold">{{'Invoices' | translate }}</span>
                                    <h3 class="mb-0 mt-1 text-secondary fs-20">{{ invoicescount }}</h3>
                                </div>
                            </div>
                            <div class="col-5">
                                <div class="icon1 bg-danger-transparent my-auto  float-end"> <i
                                        class="ri-coupon-2-line"></i> </div>
                            </div>
                        </div>
                    </div>
                </a>
            </span>
        </div>
    </div>
  }

    @if(setting?.enableRefund == 'on' && refundscount){
        <div class="col-xl-3 col-lg-3 col-md-12">
            <div class="card">
                <span>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-7">
                                <div class="mt-0 text-start">
                                    <span class="fs-14 font-weight-semibold">{{'Refunds' | translate}}</span>
                                    <h3 class="mb-0 mt-1 text-secondary fs-20">{{ refundscount }}</h3>
                                </div>
                            </div>
                            <div class="col-5">
                                <div class="icon1 bg-danger-transparent my-auto  float-end"> <i
                                    class="ri-coupon-2-line"></i> </div>
                            </div>
                        </div>
                    </div>
                </span>
            </div>
        </div>
      }
  </div>

  <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">{{'Tickets Summary' | translate}}</h4>

          @if (setting?.CUSTOMER_TICKET == 'no') {
            <div class="float-end ms-auto">
              <a routerLink="/customer/create-tickets" class="btn btn-secondary ms-auto"><i class="fa fa-paper-plane-o me-2"></i>{{'Create Ticket' | translate}}</a>
            </div>
          }
        </div>
        <div class="card-body">
          <div class="table-responsive">
            <div class="dashboardtabledata table-responsive">
              <!--Dashboard List-->
              <div class="table-options">
                <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="id">
                    <th scope="col" class="wpx-40 text-center" 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>
                  

                  <!-- ticketdetails Column -->
                  <ng-container matColumnDef="ticketdetails">
                    <th scope="col" mat-header-cell *matHeaderCellDef mat-sort-header="subject">
                      {{ "Ticket Details" | translate}}
                    </th>
                    <td mat-cell *matCellDef="let row" class="overflow-hidden ticket-details">
                      <div class="d-flex align-items-center">
                        <div class="">
                          <a routerLink="/customer/ticket-view/{{row.enc_ticket_id}}" class="fs-14 d-block font-weight-semibold">{{ row?.subject }}</a>

                          <ul class="fs-13 font-weight-normal d-flex custom-ul">
                            <li class="pe-2 text-muted">#{{ row?.ticket_id }}</li>
                            <li class="px-2 text-muted">
                              <i class="fe fe-calendar me-1 fs-14"></i>
                              {{row?.created_at | date : setting?.date_format : timezone }}
                            </li>


                            @if (row?.priority != null) {
<li class="ps-5 pe-2 preference preference-low" [ngClass]="[
                                                                    row?.priority == 'Low' ? 'preference-low' : '',
                                                                    row?.priority == 'High' ? 'preference-high' : '',
                                                                    row?.priority == 'Critical' ? 'preference-critical' : '',
                                                                    row?.priority == 'Medium' ? 'preference-medium' : ''
                                                                  ]"  placement="top" [ngbTooltip]="'Priority' | translate">
                                {{ row?.priority | translate }}
                              </li>
                            } 

                            @if (row?.category_id != null) {
                              @if (row?.category != null) {
                                <li class="px-2 text-muted"  placement="top" [ngbTooltip]="'Category' | translate">
                                  <i class="fe fe-grid me-1 fs-14"></i>{{
                                  row?.category.name }}
                                </li>
                              } 
                            } 

                            @if (row?.enc_last_reply == null) {
                              <li class="px-2 text-muted"  placement="top" [ngbTooltip]="'Last Replied' | translate"><i
                              class="fe fe-clock me-1 fs-14"></i>{{row?.created_at | dateAgo : timezone}}
                            </li>
                          } @else {
                            <li class="px-2 text-muted"  placement="top" [ngbTooltip]="'Last Replied' | translate"><i
                            class="fe fe-clock me-1 fs-14"></i>{{row?.enc_last_reply | dateAgo : timezone}}
                          </li>
                        }
                        @if (row?.purchasecodesupport != null) {
                          @if (row?.purchasecodesupport?.toLowerCase() == 'supported' || row?.purchasecodesupport == 'true') {
                            <li class="px-2 text-success font-weight-semibold">{{'Support Active' | translate}}</li>
                          } @else {
                            @if (row?.purchasecodesupport?.toLowerCase() == 'expired') {
                              <li
                              class="px-2 text-danger-dark font-weight-semibold"> {{'Support Expired' | translate}}</li>
                            }
                          }
                        }
                      </ul>
                    </div>
                  </div>
                </td>
              </ng-container>

              <!-- status Column -->
              <ng-container matColumnDef="status">
                <th scope="col" mat-header-cell *matHeaderCellDef mat-sort-header>
                  {{ "Status" | translate}}
                </th>
                <td mat-cell *matCellDef="let row">
                  @if (row?.status !== null) {
                                                        <span [ngClass]="[
                                        row?.status == 'New' ? 'badge-burnt-orange' : '',
                                        row?.status == 'Re-Open' ? 'badge-teal' : '',
                                        row?.status == 'Inprogress' ? 'badge-info' : '',
                                        row?.status == 'On-Hold' ? 'badge-warning' : '',
                                        row?.status == 'Closed' ? 'badge-danger' : '',
                                        row?.status == 'Suspend' ? 'badge-danger' : '',
                                      row?.status == 'Suspend' ? 'badge-danger' : ''
                                    ]" class="badge">{{ row?.status | translate }}
                    </span>
                  }
                </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">
                  <div>
                    <a aria-label="View" routerLink="/customer/ticket-view/{{row.enc_ticket_id}}" href="javascript:;" class="btn btn-sm action-btns"><i
                    class="feather feather-eye text-primary" placement="top"  placement="top" [ngbTooltip]="'View' | translate"></i></a>
                    </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>