<div class="app-header header header-main">
  <div class="container-fluid">
    <div class="d-flex align-items-center justify-content-between">
      @if (!profileData) {
        <span class="icon-skeleton rounded-circle mb-1 header-brand"></span>
      }
      @if (profileData?.title) {
        <a class="header-brand" routerLink="/admin/dashboard">
          @if (profileData?.title?.logoimage != null) {
            <img [src]="profileData?.title?.logoimage" class="header-brand-img dark-logo" alt="logo" loading="lazy" decoding="async">
          }
          @if (profileData?.title?.logoimage1 != null;) {
            <img [src]="profileData?.title?.logoimage1" class="header-brand-img desktop-lgo" alt="logo" loading="lazy" decoding="async">
          }
          @if (profileData?.title?.logoimage2 != null;) {
            <img [src]="profileData?.title?.logoimage2" class="header-brand-img mobile-logo" alt="logo" loading="lazy" decoding="async">
          }
          @if (profileData?.title?.logoimage3 != null;) {
            <img [src]="profileData?.title?.logoimage3" class="header-brand-img darkmobile-logo" alt="logo" loading="lazy" decoding="async">
          }
        </a>
      }
      <div class="app-sidebar__toggle" >
        <a appSidemenuToggle class="open-toggle" href="javascript:void(0);">
          <i class="feather feather-menu"></i>
        </a>
        <a appSidemenuToggle class="close-toggle" href="javascript:void(0);">
          <i class="feather feather-x"></i>
        </a>
      </div>
      <div class="header-buttons-main">
        @if (permission?.includes('Ticket Create')) {
          <a class="btn btn-outline-light header-buttons text-center" routerLink="/admin/create-ticket"><i class="fa fa-paper-plane-o pe-lg-2"></i><span class="d-m-none">{{'Create Ticket' |
        translate}}</span></a>
      }
      <a class="btn btn-outline-light header-buttons text-center visitsite ms-2" routerLink="/" target="_blank" ><i class="fe fe-home pe-lg-2"></i><span class="d-m-none">{{'Home Page' |
    translate}}</span></a>

  </div><!-- SEARCH -->
  <div class="d-flex order-lg-2 my-auto ms-auto dropdown-container align-items-center">

    <div ngbDropdown class="header-flags">
      <a ngbDropdownToggle class="text-capitalize">
        {{DropDownName}}
      </a>
      <div ngbDropdownMenu class="dropdown-menu dropdown-menu-end dropdown-menu-arrow animated text-capitalize responsive-header-dropdown">
        @for (data of languageDetails; track data) {
          <a (click)="setLanCod(data.languagecode)" ngbDropdownItem [ngClass]="data.languagename == DropDownName || data.languagecode == DropDownName ? 'active' : ''" class="dropdown-item d-flex fs-13">
            <span class="">{{data.languagename}}</span>
          </a>
        }
      </div>
    </div>

    <div  class="header-fullscreen dropdown">
      <a aria-label="fullscreen" class="nav-link icon full-screen-link" appFullscreen>
        <i class="feather feather-maximize fullscreen-button fullscreen header-icons"></i>
        <i class="feather feather-minimize fullscreen-button exit-fullscreen header-icons"></i>
      </a>
    </div>
    <div ngbDropdown>
      <a class="nav-link icon no-caret  ps-0 ms-0 p-0" ngbDropdownToggle id="badgecount">
        <i class="feather feather-bell header-icon"></i>
        <!-- Counter - Alerts -->
        @if (notifications) {
          <span class="badge " [ngClass]="Notificationlength != 0 ? 'badge-success badge-counter pulse-success side-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 (click)="MarkAsReadWithID(notify?.id)"
                  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">
                          {{ '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>
              }
              @if (notify?.data['ticketassign'] == 'yes') {
                <a  (click)="MarkAsReadWithID(notify?.id)" class="dropdown-item border-bottom mark-as-read" routerLink="/admin/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' && notify?.data['replystatus'] == null) {
                <a  (click)="MarkAsReadWithID(notify?.id)" class="dropdown-item border-bottom mark-as-read" routerLink="/admin/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'] == 'New' && notify?.data['replystatus'] == 'Replied' ) {
                <a  (click)="MarkAsReadWithID(notify?.id)" class="dropdown-item border-bottom mark-as-read" routerLink="/admin/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'] == 'Closed') {
                <a (click)="MarkAsReadWithID(notify?.id)" class="dropdown-item border-bottom mark-as-read" routerLink="/admin/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="/admin/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="/admin/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['overduestatus'] == 'Overdue') {
                  <a (click)="MarkAsReadWithID(notify?.id)" class="dropdown-item border-bottom mark-as-read" routerLink="/admin/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 if (notify?.data['draftnotify'] == 'draftcreated') {
                  <a (click)="MarkAsReadWithID(notify?.id)" class="dropdown-item border-bottom mark-as-read" routerLink="/admin/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 Drafted' | 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') {
                <a (click)="MarkAsReadWithID(notify?.id)" class="dropdown-item border-bottom mark-as-read" routerLink="/admin/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="/admin/notifications/notification/{{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="/admin/payments/custom-invoice/{{notify?.data['enc_invoice_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">{{'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="/admin/payments/custom-invoice/{{notify?.data['enc_invoice_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 is created and marked as Paid' | 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'] == 'refundpending')) {
                  <a (click)="MarkAsReadWithID(notify?.id)" routerLink="/admin/payments/refund-view/{{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"> {{'Recieved a new refund request'| translate}}</h6>
                          <p class="fs-13 mb-1 text-wrap">
                            {{notify?.data['reason'].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'] == 'refunded')) {
                  <a (click)="MarkAsReadWithID(notify?.id)" routerLink="/admin/payments/refund-view/{{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"> {{'Recieved a new refund request for # ' + notify?.data['invoice_id']}}</h6>
                          <p class="fs-13 mb-1 text-wrap">
                            {{notify?.data['reason'].slice(0, 30)}}
                          </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="/admin/notifications/all-notifications" class="smark-all">{{'See All Notifications' | translate}} </a>
      </div>
    </div>
  </div>

  <div class="profile-dropdown ps-0 ps-lg-2" ngbDropdown>
    <a href="javascript:;" class="nav-link pe-1 ps-0 leading-none no-caret" ngbDropdownToggle>
        <span>
          <img  [src]="profileData?.users?.profileimage || './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 animated responsive-header-dropdown pt-0">
      <div class="p-3 text-center border-bottom">
        <a routerLink="/admin/profile" class="text-center user pb-0 font-weight-bold">{{profileData?.users?.name}}</a>
        <p class="text-center user-semi-title mb-0">{{profileData?.users?.dashboard}}</p>
      </div>
      <a class="dropdown-item d-flex" routerLink="/admin/profile">
        <i class="feather feather-user me-3 fs-16 my-auto"></i>
        <div class="mt-1">{{'Profile' | translate}}</div>
      </a>
      <form id="logout-form">
        <button type="submit" [disabled]="sendingResponse['logout']" class="dropdown-item d-flex" (click)="Adminlogout('logout')">
          <i class="feather feather-power me-3 fs-16 my-auto"></i>
          <span class="mt-1">{{'Logout' | translate}}</span>
          @if (sendingResponse['logout']) {
            <i class="fa fa-spinner fa-spin mx-1"></i>
          }
        </button>
      </form>
    </div>
  </div>
</div>
</div>
</div>
</div>