<admin-page-header [title]="'Ticket History'"></admin-page-header>

<!--Page header-->
<div class="page-header d-lg-flex d-block">
  <div class="page-leftheader">
    <div class="page-title d-flex align-items-center">{{data?.ticket?.ticket_id}} {{data?.ticket?.subject}}

      <span
        class="badge fs-11 badge-pill badge-danger mx-2"
        [ngClass]="[data?.ticket?.status == 'Inprogress' ? 'bg-primary-transparent text-primary' :'', data?.ticket?.status == 'Closed' ? 'bg-danger-transparent text-danger' :'', data?.ticket?.status == 'Re-Open' ? 'badge badge-teal text-white' :'',data?.ticket?.status == 'New' ? 'text-white badge badge-burnt-orange' :'', data?.ticket?.status == 'On-Hold' ? 'badge badge-warning text-white' :'']"
      >{{data?.ticket?.status | translate}}</span>

    </div>
    <div class="ticket-title">
      <ul class="fs-13 font-weight-normal custom-ul d-flex">
        <li class="px-2 text-muted" [ngbTooltip]="'Created At' | translate"><i
        class="fe fe-calendar me-1 fs-14"></i>{{data?.ticket?.created_at |date :
      data?.setting?.original?.date_format : timezone}}</li>
      @if (data?.ticket?.priority != null) {
        <li class="ps-5 pe-2 preference"
          [ngClass]="[data?.ticket?.priority == 'Low' ? 'preference-low' :'', data?.ticket?.priority == 'High' ? 'preference-high' :'', data?.ticket?.priority == 'Critical' ? 'preference-critical' :'',data?.ticket?.priority == 'Medium' ? 'preference-medium' :'']"
          [ngbTooltip]="'Priority' | translate">{{data?.ticket?.priority | translate}}
        </li>
      } @else {
        ~
      }


      @if (data?.ticket?.category_id != null) {
        @if (data?.ticket?.category != null) {
          <li class="px-2 text-muted" [ngbTooltip]="'Category' | translate"><i class="fe fe-grid me-1 fs-14" ></i>{{data?.ticket?.category?.name}}</li>
        } @else {
          ~
        }
      } @else {
        ~
      }
      @if (data?.ticket?.enc_last_reply == null) {
        <li class="px-2 text-muted" [ngbTooltip]="'Last Replied' | translate"><i
        class="fe fe-clock me-1 fs-14"></i>{{data?.ticket?.created_at | dateAgo : timezone}}</li>
      } @else {
        <li class="px-2 text-muted" [ngbTooltip]="'Last Replied' | translate"><i
        class="fe fe-clock me-1 fs-14"></i>{{data?.ticket?.enc_last_reply | dateAgo : timezone}}</li>
      }

    </ul>
  </div>
</div>
</div>
<!--End Page header-->

<!-- row -->
<div class="container">
  <ul class="notification">
    @for (tickethistory of data?.ticket?.ticket_history; track tickethistory) {
      <li>
        <div class="notification-time">
          <span class="date">{{tickethistory.created_at | date : data?.setting?.original?.date_format :
          timezone}}</span>
          <span class="time">{{tickethistory.created_at | date : data?.setting?.original?.time_format :
          timezone}}</span>
        </div>
        <div class="notification-icon">
          <a aria-label="notify" href="javascript:void(0);"></a>
        </div>
        
        <div class="notification-body">
          <div class="media mt-0">
            @if(tickethistory?.ticketactions){
              <div class="media-body" [innerHTML]="sanitizeHtml(tickethistory?.ticketactions)"></div>
            }@else {<div class="media-body">
              <div class="d-flex align-items-center">
                <div class="mt-0">
                    <p class="mb-0 fs-12 mb-1">Status
                    <span class="font-weight-semibold mx-1"
                    [ngClass]="{
                      'text-orange' : tickethistory.status == 'New' ||tickethistory.status == 'On-Hold' || tickethistory.status == 'Re-Open',
                      'text-info' : tickethistory.status == 'Inprogress',
                      'text-danger' : tickethistory.status == 'Closed' ||  tickethistory.status == 'Solved',
                    }"
                    >{{tickethistory.status}}</span>
                    <!-- @if(tickethistory.replystatus){
                      <span class="text-muted font-weight-semibold mx-1">{{tickethistory.replystatus}}</span>
                    } -->
                    @if(tickethistory.ticketnote){
                      <span class="text-burnt-orange font-weight-semibold mx-1">{{'Note' | translate}}</span>
                    }
                    @if(tickethistory.overduestatus){
                      <span class="text-danger font-weight-semibold mx-1">{{tickethistory.overduestatus}}</span>
                    }
                </p><p class="mb-0 fs-17 font-weight-semibold text-dark">{{tickethistory.username}}
                  @if(tickethistory.currentAction){
                    <span class="fs-11 mx-1 text-muted">({{tickethistory.currentAction}})</span>
                  }
                </p>
                @if(tickethistory.assignUser | jsonParse | isArray){
                  @for(user of tickethistory.assignUser  | jsonParse; track user.name){
                  <div class="fs-11 font-weight-semibold ps-3">
                    <div>
                        <span class="fs-12">{{user?.name}}</span>
                        <span class="text-muted">(Assignee)</span>
                    </div>
                    <small class="text-muted useroutput" >{{user?.roles?.[0].name}}</small>
                </div>
                }
              }
            </div>
            @if(tickethistory.type){
            <div class="ms-auto">
            <span class="float-end badge "
            [ngClass]="{
               'badge-danger-light' : tickethistory.type == 'Customer' || tickethistory.type == 'Guest',
               'badge-primary-light' : tickethistory.type != 'Customer' &&  tickethistory.type != 'Guest' 
            }">
                <span class="fs-11 font-weight-semibold"
                
                >{{tickethistory.type}}
              </span>
            </span>
            </div>
          }
            </div>
            </div>
            }
          </div>
        </div>
      </li>
    }
  </ul>
</div>
<!-- row closed -->

