<!-- Header-->
<div class="landingmain-header header lightheader">
  <div class="horizontal-main landing-header clearfix sticky">
    <div class="horizontal-mainwrapper container clearfix">
      <div class="d-flex">
        <a href="javascript:void(0)" class="animated-arrow horizontal-navtoggle" (click)="toggleMenu()"><span></span></a>
        <div class="headerlanding-logo">
          @if (!headerDetails) {
            <span class="icon-skeleton rounded-circle mb-1 header-brand"></span>
          }
          @if (headerDetails?.title) {
            <a class="header-brand" routerLink="/">
              @if (headerDetails?.title?.logoimage != null) {
                <img [src]="headerDetails?.title?.logoimage1" class="header-brand-img light-logo" alt="logo" loading="lazy" decoding="async">
              }
              @if (headerDetails?.title?.logoimage1 != null;) {
                <img [src]="headerDetails?.title?.logoimage" class="header-brand-img desktop-lgo" alt="logo" loading="lazy" decoding="async">
              }
            </a>
          }
        </div>

        @if (headerDetails?.user?.email) {
          <div class="d-flex order-lg-2 my-auto ms-auto d-lg-none d-block">
            <button aria-label="menutoggle" class="navbar-toggler nav-link icon navresponsive-toggler vertical-icon ms-auto collapsed" type="button" (click)="isMenuCollapsed = !isMenuCollapsed">
              <i class="fe fe-more-vertical header-icons navbar-toggler-icon"></i> </button>
              <div class="mb-0 navbar navbar-expand-lg navbar-nav-right responsive-navbar navbar-dark p-0">
                <div [ngbCollapse]="isMenuCollapsed" class="navbar-collapse collapse" id="navbarSupportedContent-4">
                  <ul class="d-flex ms-auto landing-header-right p-0 mb-0">
                    <li ngbDropdown class="me-3 header-message">
                      <a class="nav-link icon p-0 mt-1 badgecount no-caret" ngbDropdownToggle>
                        <i class="feather feather-bell header-icon"></i>
                        <!-- Counter - Alerts -->
                        @if (headerDetails?.unreadNotifications?.length == '0') {
                          <span class="badge badge-gray">0</span>
                        } @else {
                          <span class="badge badge-success badge-counter pulse-success side-badge">{{
                          headerDetails?.unreadNotifications?.length }}</span>
                        }
                      </a>
                      <div ngbDropdownMenu class="dropdown-menu-end dropdown-menu-arrow p-0 notification-dropdown-container responsive-header-dropdown">
                        <div class="dropdown-header border-bottom d-flex justify-content-between">
                          <div class="markasreadcount">
                            @if (headerDetails?.unreadNotifications?.length == '0') {
                              <span class="mark-read-none fs-13">{{'Mark all as read' |
                              translate}}</span>
                            } @else {
                              <span class="mark-read text-primary fs-13">{{'Mark all as read' |
                              translate}}</span>
                            }
                          </div>
                        </div>
                        <div class="notifyreading">
                          @if (headerDetails?.unreadNotifications?.length) {
                            @for (notification of headerDetails?.unreadNotifications; track notification; let i = $index) {

                              @if (notification?.data?.['reasonofinfo'] && notification?.data?.['reasonofinfo'] == 'adminreset2fa') {
                                <a ngbDropdownItem class="border-bottom mark-as-read" href="javascript:;">
                                  <div class="d-flex align-items-center">
                                    <div class="">
                                      <span class="bg-success-transparent brround fs-12 notifications"><i
                                      class="feather  feather-bell sidemenu_icon fs-20 text-success"></i></span>
                                    </div>
                                    <div class="d-flex">
                                      <div class="ps-3 text-wrap">
                                        <h6 class="mb-1 text-break">{{
                                          notification?.data?.['title'].slice(0,30)
                                        }}</h6>
                                        <p class="fs-13 mb-1 text-wrap text-truncate responsive-notification-truncate"> {{'Your two factor authentication details are removed by admin' | translate}}
                                        </p>
                                        @if(notification?.created_at){
                                          <div class="small text-muted">
                                            {{ notification?.created_at | dateAgo : timezone }}
                                          </div>
                                        }
                                      </div>
                                    </div>
                                  </div>
                                </a>
                              }
                              @if (notification?.data?.['status'] == 'New') {
                                <a ngbDropdownItem class="border-bottom mark-as-read" href="{{notification?.data?.['clink']}}">
                                  <div class="d-flex align-items-center">
                                    <div class="">
                                      <span class="bg-success-transparent brround fs-12 notifications"><i
                                      class="feather  feather-bell sidemenu_icon fs-20 text-success"></i></span>
                                    </div>
                                    <div class="d-flex">
                                      <div class="ps-3 text-wrap">
                                        <h6 class="mb-1 text-break">{{
                                          notification?.data?.['title'].slice(0,30)
                                        }}</h6>
                                        <p class="fs-13 mb-1 text-wrap text-truncate responsive-notification-truncate"> {{'Your new ticket has been created' | translate}}
                                          {{ notification?.data?.['ticket_id'] }}
                                        </p>
                                        @if(notification?.created_at){
                                          <div class="small text-muted">
                                            {{ notification?.created_at | dateAgo : timezone }}
                                          </div>
                                        }
                                      </div>
                                    </div>
                                  </div>
                                </a>
                              }
                              @if (notification?.data?.['status'] == 'Closed') {
                                <a ngbDropdownItem class="border-bottom mark-as-read" href="{{notification?.data?.['clink']}}">
                                  <div class="d-flex align-items-center">
                                    <div class="">
                                      <span class="bg-success-transparent brround fs-12 notifications"><i
                                      class="feather  feather-bell sidemenu_icon fs-20 text-success"></i></span>
                                    </div>
                                    <div class="d-flex">
                                      <div class="ps-3 text-wrap">
                                        <h6 class="mb-1 text-break">{{
                                          notification?.data?.['title'].slice(0,30)
                                        }}</h6>
                                        <p class="fs-13 mb-1 text-wrap text-truncate responsive-notification-truncate"> {{'Your ticket has been closed' | translate}} {{
                                        notification?.data?.['ticket_id'] }}</p>
                                        <div class="small text-muted">
                                          {{ notification?.created_at | dateAgo : timezone }}
                                        </div>
                                      </div>
                                    </div>
                                  </div>
                                </a>
                              }
                              @if (notification?.data?.['status'] == 'On-Hold') {
                                <a ngbDropdownItem class="border-bottom mark-as-read" href="{{notification?.data?.['clink']}}">
                                  <div class="d-flex align-items-center">
                                    <div class="">
                                      <span class="bg-success-transparent brround fs-12 notifications"><i
                                      class="feather  feather-bell sidemenu_icon fs-20 text-success"></i></span>
                                    </div>
                                    <div class="d-flex">
                                      <div class="ps-3 text-wrap">
                                        <h6 class="mb-1 text-break">{{
                                          notification?.data?.['title'].slice(0,30)
                                        }}</h6>
                                        <p class="fs-13 mb-1 text-wrap text-truncate responsive-notification-truncate"> {{'Your ticket status is On-Hold' | translate}}
                                          {{ notification?.data?.['ticket_id'] }}
                                        </p>
                                        <div class="small text-muted">
                                          {{ notification?.created_at | dateAgo : timezone }}
                                        </div>
                                      </div>
                                    </div>
                                  </div>
                                </a>
                              }
                              @if (notification?.data?.['status'] == 'Re-Open') {
                                <a ngbDropdownItem class="border-bottom mark-as-read" href="{{notification?.data?.['clink']}}">
                                  <div class="d-flex align-items-center">
                                    <div class="">
                                      <span class="bg-success-transparent brround fs-12 notifications"><i
                                      class="feather  feather-bell sidemenu_icon fs-20 text-success"></i></span>
                                    </div>
                                    <div class="d-flex">
                                      <div class="ps-3 text-wrap">
                                        <h6 class="mb-1 text-break">{{
                                          notification?.data?.['title'].slice(0,30)
                                        }}</h6>
                                        <p class="fs-13 mb-1 text-wrap text-truncate responsive-notification-truncate"> {{'Your ticket has been Reopened' | translate}}
                                          {{ notification?.data?.['ticket_id'] }}
                                        </p>
                                        <div class="small text-muted">
                                          {{ notification?.created_at | dateAgo : timezone }}
                                        </div>
                                      </div>
                                    </div>
                                  </div>
                                </a>
                              }
                              @if (notification?.data?.['status'] == 'Inprogress') {
                                <a ngbDropdownItem class="border-bottom mark-as-read" href="{{notification?.data?.['clink']}}">
                                  <div class="d-flex align-items-center">
                                    <div class="">
                                      <span class="bg-success-transparent brround fs-12 notifications"><i
                                      class="feather  feather-bell sidemenu_icon fs-20 text-success"></i></span>
                                    </div>
                                    <div class="d-flex">
                                      <div class="ps-3 text-wrap">
                                        <h6 class="mb-1 text-break">{{
                                          notification?.data?.['title'].slice(0,30)
                                        }}</h6>
                                        <p class="fs-13 mb-1 text-wrap text-truncate responsive-notification-truncate"> {{'You got a new reply on this ticket' |
                                          translate}} {{
                                        notification?.data?.['ticket_id'] }}</p>
                                        @if(notification?.created_at){
                                          <div class="small text-muted">
                                            {{ notification?.created_at | dateAgo : timezone }}
                                          </div>
                                        }
                                      </div>
                                    </div>
                                  </div>
                                </a>
                              }
                              @if (notification?.data?.['status'] == 'overdue') {
                                <a ngbDropdownItem class="border-bottom mark-as-read" href="{{notification?.data?.['clink']}}">
                                  <div class="d-flex align-items-center">
                                    <div class="">
                                      <span class="bg-success-transparent brround fs-12 notifications"><i
                                      class="feather  feather-bell sidemenu_icon fs-20 text-success"></i></span>
                                    </div>
                                    <div class="d-flex">
                                      <div class="ps-3 text-wrap">
                                        <h6 class="mb-1 text-break">{{
                                          notification?.data?.['title'].slice(0,30)
                                        }}</h6>
                                        <p class="fs-13 mb-1 text-wrap text-truncate responsive-notification-truncate"> {{'Your ticket status is Overdue' | translate}}
                                          {{ notification?.data?.['ticket_id'] }}
                                        </p>
                                        <div class="small text-muted">
                                          {{ notification?.created_at | dateAgo : timezone }}
                                        </div>
                                      </div>
                                    </div>
                                  </div>
                                </a>
                              }
                              @if (notification?.data?.['status'] == 'Suspend') {
                                <a ngbDropdownItem class="border-bottom mark-as-read" href="{{notification?.data?.['clink']}}">
                                  <div class="d-flex align-items-center">
                                    <div class="">
                                      <span class="bg-success-transparent brround fs-12 notifications"><i
                                      class="feather  feather-bell sidemenu_icon fs-20 text-success"></i></span>
                                    </div>
                                    <div class="d-flex">
                                      <div class="ps-3 text-wrap">
                                        <h6 class="mb-1 text-break">{{
                                          notification?.data?.['title'].slice(0,30)
                                        }}</h6>
                                        <p class="fs-13 mb-1 text-wrap text-truncate responsive-notification-truncate"> {{'Your ticket status is Suspend' | translate}}
                                          {{ notification?.data?.['ticket_id'] }}
                                        </p>
                                        <div class="small text-muted">
                                          {{ notification?.created_at | dateAgo : timezone }}
                                        </div>
                                      </div>
                                    </div>
                                  </div>
                                </a>
                              }
                              @if (notification?.data?.['status'] == 'mail') {
                                <a ngbDropdownItem class="border-bottom mark-as-read" routerLink="/customer/notification/{{notification?.id}}">
                                  <div class="d-flex ">
                                    <div class="">
                                      <span class="bg-success-transparent brround fs-12 notifications"><i
                                      class="feather feather-mail sidemenu_icon fs-20 text-success"></i></span>
                                    </div>
                                    <div class="d-flex">
                                      <div class="ps-3 text-wrap">
                                        <h6 class="mb-1 text-break">
                                          {{notification?.data?.['mailsubject']}}
                                        </h6>
                                        <p class="fs-13 mb-1 text-wrap text-truncate responsive-notification-truncate" [innerHTML]="sanitizeHtml(notification?.data?.['mailtext'].slice(0,100))"></p>
                                        <div class="small text-muted">
                                          {{ notification?.created_at | dateAgo : timezone }}
                                        </div>
                                      </div>
                                    </div>
                                  </div>
                                </a>
                              }
                              
                              @if((notification?.data['status'] == 'invoice') && (notification?.data['itemStatus'] == 'paid')) {
                                  <a ngbDropdownItem class="border-bottom mark-as-read" routerLink="/customer/custom-invoice/{{notification?.data?.['tx_id']}}">
                                    <div class="d-flex align-items-center">
                                      <div class="">
                                        <span class="avatar avatar-md bg-success-transparent avatar-rounded"><i class="fe  fe-bell sidemenu_icon fs-20 text-success"></i></span>
                                      </div>
                                      <div class="d-flex">
                                        <div class="ps-3">
                                          <h6 class="mb-1">{{'Invoice Marked as Paid.'| translate}}</h6>
                                          <p class="fs-13 mb-1 text-wrap">  {{'A custom invoice marked as Paid'| translate}}</p>
                                          <div class="small text-muted">
                                            {{ notification?.created_at | dateAgo : timezone }}
                                          </div>
                                        </div>
                                      </div>
                                    </div>
                                  </a>
                              }
                              @if(notification?.data['status'] === 'invoice' && notification?.data['itemStatus'] === 'pending'){
                                <a ngbDropdownItem class="border-bottom mark-as-read" routerLink="/customer/custom-invoice/{{notification?.data?.['tx_id']}}">
                                  <div class="d-flex align-items-center">
                                    <div>
                                      <span class="avatar avatar-md bg-success-transparent avatar-rounded">
                                        <i class="fe fe-bell sidemenu_icon fs-20 text-success"></i>
                                      </span>
                                    </div>
                                    <div class="d-flex">
                                      <div class="ps-3">
                                        <h6 class="mb-1">{{'New custom invoice created.'| translate}}</h6>
                                        <p class="fs-13 mb-1 text-wrap">{{'A new custom invoice is created'| translate}}</p>
                                        <div class="small text-muted">
                                          {{ notification?.created_at | dateAgo : timezone }}
                                        </div>
                                      </div>
                                    </div>
                                  </div>
                                </a>
                              }

                              @if(['refundRejected'].includes(notification?.data['itemStatus'])){
                                <a ngbDropdownItem class="border-bottom mark-as-read" routerLink="/customer/custom-invoice/{{notification?.data?.['tx_id']}}">
                                  <div class="d-flex align-items-center">
                                    <div>
                                      <span class="avatar avatar-md bg-success-transparent avatar-rounded">
                                        <i class="fe fe-bell sidemenu_icon fs-20 text-success"></i>
                                      </span>
                                    </div>
                                    <div class="d-flex">
                                      <div class="ps-3">
                                        <h6 class="mb-1">{{'Your refund request rejected.'| translate}}</h6>
                                        <p class="fs-13 mb-1 text-wrap">{{'Your refund request is rejected.'| translate}}</p>
                                        <div class="small text-muted">
                                          {{ notification?.created_at | dateAgo : timezone }}
                                        </div>
                                      </div>
                                    </div>
                                  </div>
                                </a>
                              }
                              @if(['refunded'].includes(notification?.data['itemStatus'])){
                                <a ngbDropdownItem class="border-bottom mark-as-read" routerLink="/customer/custom-invoice/{{notification?.data?.['tx_id']}}">
                                  <div class="d-flex align-items-center">
                                    <div>
                                      <span class="avatar avatar-md bg-success-transparent avatar-rounded">
                                        <i class="fe fe-bell sidemenu_icon fs-20 text-success"></i>
                                      </span>
                                    </div>
                                    <div class="d-flex">
                                      <div class="ps-3">
                                        <h6 class="mb-1">{{'Your refund request is approved.'| translate}}</h6>
                                        <p class="fs-13 mb-1 text-wrap">{{'Your refund request has been approved.'| translate}}</p>
                                        <div class="small text-muted">
                                          {{ notification?.created_at | dateAgo : timezone }}
                                        </div>
                                      </div>
                                    </div>
                                  </div>
                                </a>
                              }

                              @if(notification?.data['link'] === 'refunded'){
                                <a ngbDropdownItem class="border-bottom mark-as-read" routerLink="/customer/custom-invoice/{{notification?.data?.['tx_id']}}">
                                  <div class="d-flex align-items-center">
                                    <div>
                                      <span class="avatar avatar-md bg-success-transparent avatar-rounded">
                                        <i class="fe fe-bell sidemenu_icon fs-20 text-success"></i>
                                      </span>
                                    </div>
                                    <div class="d-flex">
                                      <div class="ps-3">
                                        <h6 class="mb-1">{{'Your refund request approved.'| translate}}</h6>
                                        <p class="fs-13 mb-1 text-wrap">{{'Your refund request is approved.'| translate}}</p>
                                        <div class="small text-muted">
                                          {{ notification?.created_at | dateAgo : timezone }}
                                        </div>
                                      </div>
                                    </div>
                                  </div>
                                </a>
                              }

                            }
                          } @else {
                            <a ngbDropdownItem class="border-bottom mark-as-read notification-dropdown" href="javascript:;">
                              <div class="d-flex justify-content-center align-items-center">
                                <div class="d-flex">
                                  <div class="ps-3 text-center">
                                    <img src="./assets/images/nonotification.png" alt="" loading="lazy" decoding="async">
                                    <p class="fs-13 mb-1 text-muted">{{'There are no new notifications to display' | translate}}</p>
                                  </div>
                                </div>
                              </div>
                            </a>
                          }
                        </div>
                        <div class=" text-center p-2">
                          <a rourerLink="/customer/allnotifications" class="cmark-all">{{'See All Notifications' | translate}} </a>
                        </div>
                      </div>
                    </li>
                    <li ngbDropdown class=" header-flags">
                      <a href="javascript:;" class="text-capitalize nav-link icon fs-16 p-0 bg-transparent text-dark mx-5" ngbDropdownToggle>
                        {{DropDownName}}
                      </a>
                      <div ngbDropdownMenu class="dropdown-menu-end dropdown-menu-arrow animated text-capitalize responsive-header-dropdown">
                        @for (data of languageDetails; track data) {
                          <a (click)="setLanCod(data.languagecode,data.id,data.languagename)" ngbDropdownItem class="dropdown-item d-flex fs-13">
                            <span class="">{{data.languagename}}</span>
                          </a>
                        }
                      </div>
                    </li>
                    <li ngbDropdown class="profile-dropdown">
                      <a href="javascript:;" class="nav-link p-0 mt-1 leading-none user-img no-caret" ngbDropdownToggle>
                        <span>
                          <!-- @if (headerDetails?.user?.profileimage) { -->
                            <img [src]="headerDetails?.user?.profileimage || './assets/images/user-profile.png'" [alt]="headerDetails?.user?.profileimage" class="avatar avatar-md bradius rounded-circle" loading="lazy" decoding="async">
                          <!-- }
                          @else {
                              <img  src="./assets/images/user-profile.png" class="avatar avatar-md bradius rounded-circle" alt="default" loading="lazy" decoding="async">
                          } -->
                        </span>
                      </a>
                      <div ngbDropdownMenu class="dropdown-menu-end dropdown-menu-arrow responsive-header-dropdown">
                        <div class="p-3 text-center border-bottom">
                          <a href="javascript:;" class="text-center user pb-0 font-weight-bold">{{headerDetails?.user?.username}}</a>
                          <p class="text-center user-semi-title mb-0">
                            {{headerDetails?.user?.email}}
                          </p>
                        </div>
                        <a ngbDropdownItem class="d-flex" routerLink="/customer/dashboard">
                          <i class="feather feather-grid me-3 fs-16 my-auto"></i>
                          <div class="mt-1">{{'Dashboard' | translate}}</div>
                        </a>
                        <a ngbDropdownItem class="d-flex" routerLink="/customer/profile">
                          <i class="feather feather-user me-3 fs-16 my-auto"></i>
                          <div class="mt-1">{{'Profile' | translate}}</div>
                        </a>
                        <a ngbDropdownItem class="d-flex" routerLink="/customer/refunds">
                          <i class="ri-ticket-2-line me-3 fs-16 my-auto"></i>
                          <div class="mt-1">{{'Refunds' | translate}}</div>
                        </a>
                        <form id="logout-form" (ngSubmit)="logoutcustomer('logout')">
                          <button type="submit" [disabled]="sendingResponse['logout']" ngbDropdownItem class="d-flex">
                            <i class="feather feather-power me-3 fs-16 my-auto"></i>
                            <span class="mt-1">{{'Logout' | translate}}@if (sendingResponse['logout']) {
                              <i class="fa fa-spinner fa-spin mx-1"></i>
                            }</span>
                          </button>
                        </form>
                      </div>
                    </li>
                  </ul>
                </div>
              </div>
            </div>
          }
          <nav class="horizontalMenu clearfix order-lg-2 my-auto ms-auto">
            <ul class="horizontalMenu-list custom-ul">
              @if (headerDetails?.setting?.original?.defaultlogin_on == 'off') {
                <li>
                  <a routerLinkActive="active" routerLink="/" [routerLinkActiveOptions]="{exact: true}">{{
                    "Home" | translate
                  }}</a>
                </li>
              }

              @if (headerDetails?.setting?.original?.KNOWLEDGE_ENABLE == 'yes') {
                <li>
                  <a routerLinkActive="active" routerLink="/knowledge" class="sub-icon">{{ "Knowledge" |
                    translate }}
                  </a>
                </li>
              }
              @if (headerDetails?.setting?.original?.FAQ_ENABLE == 'yes') {
                <li>
                  <a routerLinkActive="active" routerLink="/faqs" class="sub-icon">{{ "FAQ’s" | translate
                    }}
                  </a>
                </li>
              }

              @if (headerDetails?.setting?.original?.CONTACT_ENABLE == 'yes') {
                <li>
                  <a routerLinkActive="active" routerLink="/contact-us">{{
                    "Contact Us" | translate
                  }}</a>
                </li>
              }
              @if (headerDetails?.page) {
                @for (pages of headerDetails?.page; track pages) {
                  @if (
                    pages?.status == '1' &&
                    (pages?.viewonpages == 'both' ||
                    pages?.viewonpages == 'header')
                    ) {
                    <li>
                      <a routerLinkActive="active" routerLink="page/{{ pages?.pageslug }}">{{
                      pages?.pagename }}</a>
                    </li>
                  }
                }
              }

              @if (headerDetails?.user?.email) {
                <li ngbDropdown class="me-3 header-message">
                  <a class="nav-link icon no-caret p-0" ngbDropdownToggle id="badgecount">
                    <i class="feather feather-bell header-icon"></i>
                    <!-- Counter - Alerts -->
                    @if (notifications) {
                      @if(Notificationlength){
                      <span class="badge badge-success badge-counter pulse-success side-badge">{{Notificationlength}}</span>
                      }@else{
                        <span class="badge badge-gray">{{Notificationlength}}</span>
                      }
                    }
                  </a>
                  <div ngbDropdownMenu class="dropdown-menu-end dropdown-menu-arrow animated p-0 notification-dropdown-container responsive-header-dropdown">
                    <div class="header-dropdown-list message-menu" id="message-menu">
                      <div class="dropdown-header border-bottom d-flex justify-content-between">
                        <div id="markasreadcount"><span class="mark-read text-primary fs-13" (click)="MarkAllRead()">{{'Mark all as read' | translate}}</span>
                      </div>
                    </div>
                    <div id="notifyreading">
                      @if (Notificationlength == 0 ) {
                        <a class="dropdown-item border-bottom mark-as-read notification-dropdown" href="javascript:;">
                          <div class="d-flex justify-content-center">
                            <div class="ps-3 text-center">
                              <img src="./assets/images/nonotification.png" alt="" loading="lazy" decoding="async">
                              <p class="fs-13 mb-1 text-muted">{{'There are no new notifications to display' | translate}}</p>
                            </div>
                          </div>
                        </a>
                      } @else {
                        @for (notify of notifications; track notify) {
                          @if (notify?.data?.reasonofinfo && notify.data.reasonofinfo === 'adminreset2fa' ) {
                          <a class="dropdown-item border-bottom mark-as-read" href="javascript:;">
                            <div class="d-flex align-items-center">
                              <div class="">
                                <span class="bg-success-transparent brround fs-12 notifications"><i
                                class="feather  feather-bell sidemenu_icon fs-20 text-success"></i></span>
                              </div>
                              <div class="d-flex">
                                <div class="ps-3 text-wrap">
                                  <h6 class="mb-1 text-break">{{ notify?.data?.['title'].slice(0,30) }}</h6>
                                  <p class="fs-13 mb-1 text-wrap text-truncate responsive-notification-truncate">{{ notify?.data?.['ticket_id'] }} {{'Your two factor authentication details are removed by admin.' | translate}} </p>
                                  <div class="small text-muted">
                                    {{ notify?.created_at | dateAgo : timezone }}
                                  </div>
                                </div>
                              </div>
                            </div>
                          </a>
                        }
                        @else if (notify?.data['ticketassign'] == 'yes') {
                            <a (click)="MarkAsReadWithID(notify?.id)" class="dropdown-item border-bottom mark-as-read"
                              routerLink="/customer/ticket-view/{{notify?.['enc_ticket_id']}}">
                              <div class="d-flex align-items-center">
                                <div class="">
                                  <span class="bg-success-transparent brround fs-12 notifications"><i
                                  class="feather  feather-bell sidemenu_icon fs-20 text-success"></i></span>
                                </div>
                                <div class="d-flex">
                                  <div class="ps-3 text-wrap">
                                    <h6 class="mb-1 text-break">{{ notify?.data?.['title'].slice(0,30) }}</h6>
                                    <p class="fs-13 mb-1 text-wrap text-truncate responsive-notification-truncate">{{ notify?.data['ticket_id'] }} {{'Ticket is assigned' | translate}} </p>
                                    <div class="small text-muted">
                                      {{ notify?.created_at | dateAgo : timezone }}
                                    </div>
                                  </div>
                                </div>
                              </div>
                            </a>
                          }
                          @else if (notify?.data['status'] == 'New') {
                            <a (click)="MarkAsReadWithID(notify?.id)" class="dropdown-item border-bottom mark-as-read"
                              routerLink="/customer/ticket-view/{{notify?.['enc_ticket_id']}}">
                              <div class="d-flex align-items-center">
                                <div class="">
                                  <span class="bg-success-transparent brround fs-12 notifications"><i
                                  class="feather  feather-bell sidemenu_icon fs-20 text-success"></i></span>
                                </div>
                                <div class="d-flex">
                                  <div class="ps-3 text-wrap">
                                    <h6 class="mb-1 text-break">{{ notify?.data?.['title'].slice(0,30) }}</h6>
                                    <p class="fs-13 mb-1 text-wrap text-truncate responsive-notification-truncate"> {{'A new ticket has been created' | translate}} {{ notify?.data['ticket_id'] }}</p>
                                    <div class="small text-muted">
                                      {{ notify?.created_at | dateAgo : timezone }}
                                    </div>
                                  </div>
                                </div>
                              </div>
                            </a>
                          }
                          @else if (notify?.data['status'] == 'Closed') {
                            <a (click)="MarkAsReadWithID(notify?.id)" class="dropdown-item border-bottom mark-as-read"
                              routerLink="/customer/ticket-view/{{notify?.['enc_ticket_id']}}">
                              <div class="d-flex align-items-center">
                                <div class="">
                                  <span class="bg-success-transparent brround fs-12 notifications"><i
                                  class="feather  feather-bell sidemenu_icon fs-20 text-success"></i></span>
                                </div>
                                <div class="d-flex">
                                  <div class="ps-3 text-wrap">
                                    <h6 class="mb-1 text-break">{{ notify?.data?.['title'].slice(0,30) }}</h6>
                                    <p class="fs-13 mb-1 text-wrap text-truncate responsive-notification-truncate"> {{'This ticket has been closed' | translate}} {{ notify?.data['ticket_id'] }}</p>
                                    <div class="small text-muted">
                                      {{ notify?.created_at | dateAgo : timezone }}
                                    </div>
                                  </div>
                                </div>
                              </div>
                            </a>
                          }
                          @else if (notify?.data['status'] == 'On-Hold') {
                            <a (click)="MarkAsReadWithID(notify?.id)" class="dropdown-item border-bottom mark-as-read"
                              routerLink="/customer/ticket-view/{{notify?.['enc_ticket_id']}}">
                              <div class="d-flex align-items-center">
                                <div class="">
                                  <span class="bg-success-transparent brround fs-12 notifications"><i
                                  class="feather  feather-bell sidemenu_icon fs-20 text-success"></i></span>
                                </div>
                                <div class="d-flex">
                                  <div class="ps-3 text-wrap">
                                    <h6 class="mb-1 text-break">{{ notify?.data?.['title'].slice(0,30) }}</h6>
                                    <p class="fs-13 mb-1 text-wrap text-truncate responsive-notification-truncate"> {{'This ticket status is On-Hold' | translate}} {{ notify?.data['ticket_id'] }}</p>
                                    <div class="small text-muted">
                                      {{ notify?.created_at | dateAgo : timezone }}
                                    </div>
                                  </div>
                                </div>
                              </div>
                            </a>
                          }
                          @else if (notify?.data['status'] == 'Re-Open') {
                            <a (click)="MarkAsReadWithID(notify?.id)" class="dropdown-item border-bottom mark-as-read"
                              routerLink="/customer/ticket-view/{{notify?.['enc_ticket_id']}}">
                              <div class="d-flex align-items-center">
                                <div class="">
                                  <span class="bg-success-transparent brround fs-12 notifications"><i
                                  class="feather  feather-bell sidemenu_icon fs-20 text-success"></i></span>
                                </div>
                                <div class="d-flex">
                                  <div class="ps-3 text-wrap">
                                    <h6 class="mb-1 text-break">{{ notify?.data?.['title'].slice(0,30) }}</h6>
                                    <p class="fs-13 mb-1 text-wrap text-truncate responsive-notification-truncate"> {{'This ticket has been reopened' | translate}} {{ notify?.data['ticket_id'] }}</p>
                                    <div class="small text-muted">
                                      {{ notify?.created_at | dateAgo : timezone }}
                                    </div>
                                  </div>
                                </div>
                              </div>
                            </a>
                          }
                          @else if (notify?.data['status'] == 'Inprogress') {
                            @if (notify?.data['overduestatus'] == 'Overdue') {
                              <a (click)="MarkAsReadWithID(notify?.id)" class="dropdown-item border-bottom mark-as-read"
                                routerLink="/customer/ticket-view/{{notify?.['enc_ticket_id']}}">
                                <div class="d-flex align-items-center">
                                  <div class="">
                                    <span class="bg-success-transparent brround fs-12 notifications"><i
                                    class="feather  feather-bell sidemenu_icon fs-20 text-success"></i></span>
                                  </div>
                                  <div class="d-flex">
                                    <div class="ps-3 text-wrap">
                                      <h6 class="mb-1 text-break">{{ notify?.data?.['title'].slice(0,30) }}</h6>
                                      <p class="fs-13 mb-1 text-wrap text-truncate responsive-notification-truncate"> {{'This ticket status is overdue' | translate}} {{ notify?.data['ticket_id'] }}</p>
                                      <div class="small text-muted">
                                        {{ notify?.created_at | dateAgo : timezone }}
                                      </div>
                                    </div>
                                  </div>
                                </div>
                              </a>
                            } @else {
                              <a (click)="MarkAsReadWithID(notify?.id)" class="dropdown-item border-bottom mark-as-read"
                                routerLink="/customer/ticket-view/{{notify?.['enc_ticket_id']}}">
                                <div class="d-flex align-items-center">
                                  <div class="">
                                    <span class="bg-success-transparent brround fs-12 notifications"><i
                                    class="feather  feather-bell sidemenu_icon fs-20 text-success"></i></span>
                                  </div>
                                  <div class="d-flex">
                                    <div class="ps-3 text-wrap">
                                      <h6 class="mb-1 text-break">{{ notify?.data?.['title'].slice(0,30) }}</h6>
                                      <p class="fs-13 mb-1 text-wrap text-truncate responsive-notification-truncate">{{'You got a new reply on this ticket' | translate}} {{ notify?.data['ticket_id'] }}</p>
                                      <div class="small text-muted">
                                        {{ notify?.created_at | dateAgo : timezone }}
                                      </div>
                                    </div>
                                  </div>
                                </div>
                              </a>
                            }
                          }
                          @else if (notify?.data['status'] == 'mail') {
                            <a (click)="MarkAsReadWithID(notify?.id)" class="dropdown-item border-bottom mark-as-read"
                              routerLink="/customer/notifications/{{notify?.id}}">
                              <div class="d-flex ">
                                <div class="">
                                  <span class="bg-success-transparent brround fs-12 notifications"><i
                                  class="feather  feather-mail sidemenu_icon fs-20 text-success"></i></span>
                                </div>
                                <div class="d-flex">
                                  <div class="ps-3 text-wrap">
                                    <h6 class="mb-1 text-break"> {{notify?.data['mailsubject']}}</h6>
                                    <p class="fs-13 mb-1 text-wrap text-truncate responsive-notification-truncate" [innerHTML]="sanitizeHtml(notify?.data['mailtext'].slice(0,30))">
                                    </p>
                                    <div class="small text-muted">
                                      {{ notify?.created_at | dateAgo : timezone }}
                                    </div>
                                  </div>
                                </div>
                              </div>
                            </a>
                          }
                          @else if(notify?.data['status'] === 'invoice' && notify?.data['itemStatus'] === 'pending'){
                            <a (click)="MarkAsReadWithID(notify?.id)" routerLink="/customer/custom-invoice/{{notify?.data['tx_id']}}" class="dropdown-item border-bottom mark-as-read">
                              <div class="d-flex align-items-center">
                                <div>
                                  <span class="avatar avatar-md bg-success-transparent avatar-rounded">
                                    <i class="fe fe-bell sidemenu_icon fs-20 text-success"></i>
                                  </span>
                                </div>
                                <div class="d-flex">
                                  <div class="ps-3">
                                    <h6 class="mb-1">{{'New custom invoice created.' | translate }}</h6>
                                    <p class="fs-13 mb-1 text-wrap">{{'A new custom invoice is created' | translate }}</p>
                                    <div class="small text-muted">
                                      {{ notify?.created_at | dateAgo : timezone }}
                                    </div>
                                  </div>
                                </div>
                              </div>
                            </a>
                          }
                          @else if((notify?.data['status'] == 'invoice') && (notify?.data['itemStatus'] == 'paid')) {
                              <a (click)="MarkAsReadWithID(notify?.id)" routerLink="/customer/custom-invoice/{{notify?.data['tx_id']}}" class="dropdown-item border-bottom mark-as-read">
                                <div class="d-flex align-items-center">
                                  <div class="">
                                    <span class="avatar avatar-md bg-success-transparent avatar-rounded"><i class="fe  fe-bell sidemenu_icon fs-20 text-success"></i></span>
                                  </div>
                                  <div class="d-flex">
                                    <div class="ps-3">
                                      <h6 class="mb-1">{{'Invoice Marked as Paid.' | translate }}</h6>
                                      <p class="fs-13 mb-1 text-wrap">  {{'A custom invoice marked as Paid' | translate }}</p>
                                      <div class="small text-muted">
                                      {{ notify?.created_at | dateAgo : timezone }}
                                      </div>
                                    </div>
                                  </div>
                                </div>
                              </a>
                          }
                          @else if(['refundRejected'].includes(notify?.data['itemStatus'])){
                            <a (click)="MarkAsReadWithID(notify?.id)" class="dropdown-item border-bottom mark-as-read" routerLink="/customer/custom-invoice/{{notify?.data['tx_id']}}">
                              <div class="d-flex align-items-center">
                                <div>
                                  <span class="avatar avatar-md bg-success-transparent avatar-rounded">
                                    <i class="fe fe-bell sidemenu_icon fs-20 text-success"></i>
                                  </span>
                                </div>
                                <div class="d-flex">
                                  <div class="ps-3">
                                    <h6 class="mb-1">{{'Your refund request rejected.' | translate  }}</h6>
                                    <p class="fs-13 mb-1 text-wrap">{{'Your refund request is rejected.' | translate }}</p>
                                    <div class="small text-muted">
                                      {{ notify?.created_at | dateAgo : timezone }}
                                    </div>
                                  </div>
                                </div>
                              </div>
                            </a>
                          }
                          @else if(['refunded'].includes(notify?.data['itemStatus'])){
                            <a (click)="MarkAsReadWithID(notify?.id)" class="dropdown-item border-bottom mark-as-read" routerLink="/customer/custom-invoice/{{notify?.data['tx_id']}}">
                              <div class="d-flex align-items-center">
                                <div>
                                  <span class="avatar avatar-md bg-success-transparent avatar-rounded">
                                    <i class="fe fe-bell sidemenu_icon fs-20 text-success"></i>
                                  </span>
                                </div>
                                <div class="d-flex">
                                  <div class="ps-3">
                                    <h6 class="mb-1">{{'Your refund request is approved.' | translate }}</h6>
                                    <p class="fs-13 mb-1 text-wrap">{{'Your refund request has been approved.' | translate }}</p>
                                    <div class="small text-muted">
                                      {{ notify?.created_at | dateAgo : timezone }}
                                    </div>
                                  </div>
                                </div>
                              </div>
                            </a>
                          }
                          @else if(notify?.data['link'] === 'refunded'){
                            <a (click)="MarkAsReadWithID(notify?.id)" class="dropdown-item border-bottom mark-as-read" routerLink="/customer/custom-invoice/{{notify?.data['tx_id']}}">
                              <div class="d-flex align-items-center">
                                <div>
                                  <span class="avatar avatar-md bg-success-transparent avatar-rounded">
                                    <i class="fe fe-bell sidemenu_icon fs-20 text-success"></i>
                                  </span>
                                </div>
                                <div class="d-flex">
                                  <div class="ps-3">
                                    <h6 class="mb-1">{{'Your refund request approved.' | translate }}</h6>
                                    <p class="fs-13 mb-1 text-wrap">{{'Your refund request is approved.' | translate }}</p>
                                    <div class="small text-muted">
                                      {{ notify?.created_at | dateAgo : timezone }}
                                    </div>
                                  </div>
                                </div>
                              </div>
                            </a>
                          }
                        }
                      }
                    </div>
                  </div>
                  <div class="text-center p-2">
                    <a (click)="MarkAllRead()" routerLink="/customer/allnotifications" class="smark-all">{{'See All Notifications' | translate}} </a>
                  </div>
                </div>
              </li>
              <li ngbDropdown class="header-flags">
                <a href="javascript:;" class="text-capitalize" ngbDropdownToggle>
                  {{DropDownName}}
                </a>
                <div ngbDropdownMenu class="dropdown-menu-end dropdown-menu-arrow animated text-capitalize responsive-header-dropdown">
                  <ng-container>
                    @for (data of languageDetails; track data) {
                      <a (click)="setLanCod(data.languagecode,data.id,data.languagename)" [ngClass]="data.languagename == DropDownName || data.languagecode == DropDownName ? 'active' : ''" ngbDropdownItem class="dropdown-item d-flex fs-13">
                        <span class="">{{data.languagename}}</span>
                      </a>
                    }
                  </ng-container>
                </div>
              </li>
              <li ngbDropdown class="header-flags text-capitalize">
                <a href="javascript:;" class="d-flex align-items-center btn-country" ngbDropdownToggle>
                  {{currencySel}}
                </a>
                <div ngbDropdownMenu class="dropdown-menu-end dropdown-menu-arrow animated text-capitalize responsive-header-dropdown">
                  <ng-container>
                    @for (data of headerDetails?.currencies; track data) {
                      <a (click)="setCurrencyCode(data)" [ngClass]="data.code == currencySel || data.languagecode == currencySel ? 'active' : ''" ngbDropdownItem class="dropdown-item d-flex fs-13">
                        <span class="">{{data.code}}</span>
                      </a>
                    }
                  </ng-container>
                </div>
              </li>
              <li ngbDropdown class="profile-dropdown">
                <a href="javascript:;" class="nav-link p-0 mt-1 avatar-shadow leading-none user-img rounded-pill no-caret p-0" ngbDropdownToggle>
                  <span>
                    <!-- @if (headerDetails?.user?.profileimage) { -->
                      <img [src]="headerDetails?.user?.profileimage || './assets/images/user-profile.png'" [alt]="headerDetails?.user?.profileimage" class="avatar avatar-md bradius rounded-circle" loading="lazy" decoding="async">
                    <!-- }
                    @else {
                        <img  src="./assets/images/user-profile.png" class="avatar avatar-md bradius rounded-circle" alt="default" loading="lazy" decoding="async">
                    } -->
                  </span>
                </a>
                <div ngbDropdownMenu class="dropdown-menu-end dropdown-menu-arrow responsive-header-dropdown">
                  <div class="p-3 text-center border-bottom">
                    <a href="javascript:;" class="text-center user pb-0 font-weight-bold">{{
                    headerDetails?.user?.username }}</a>
                    <p class="text-center user-semi-title mb-0">{{ headerDetails?.user?.email }}</p>
                  </div>
                  <a ngbDropdownItem class="d-flex" routerLinkActive="active" routerLink="/customer/dashboard">
                    <i class="feather feather-grid me-3 fs-16 my-auto"></i>
                    <div class="mt-1">{{ "Dashboard" | translate }}</div>
                  </a>
                  <a ngbDropdownItem class="d-flex" routerLinkActive="active" routerLink="/customer/edit-profile">
                    <i class="feather feather-user me-3 fs-16 my-auto"></i>
                    <div class="mt-1">{{ "Profile" | translate }}</div>
                  </a>
                  <a ngbDropdownItem class="d-flex" routerLinkActive="active" routerLink="/customer/refunds">
                    <i class="ri-ticket-2-line me-3 fs-16 my-auto"></i>
                    <div class="mt-1">{{ "Refunds" | translate }}</div>
                  </a>
                  <form (ngSubmit)="logoutcustomer('logout')">
                    <button type="submit" [disabled]="sendingResponse['logout']" ngbDropdownItem class="d-flex">
                      <i class="feather feather-power me-3 fs-16 my-auto"></i>
                      <span class="mt-1">{{ "Logout" | translate }}@if (sendingResponse['logout']) {
                        <i class="fa fa-spinner fa-spin mx-1"></i>
                      }</span>
                    </button>
                  </form>
                </div>
              </li>
            }
          </ul>
        </nav>
      </div>
    </div>
  </div>
</div>
<!--Header-->