<!--Page header-->
<div class="page-header d-xl-flex d-block">
  <div class="page-leftheader">
    <h4 class="page-title">
      <span class="font-weight-normal text-muted ms-2">{{
        "Ticket Information" | translate
      }}</span>
    </h4>
  </div>
  <div class="page-rightheader ms-md-auto">
    <button type="button" (click)="deleteTicketPermanent('deleteTicketPermanent')" [disabled]="sendingResponse['deleteTicketPermanent']" class="btn btn-sm btn-danger me-2" id="show-delete">
      <span> {{ "Delete Ticket" | translate }} </span>
      <i class="feather feather-trash-2 text-white" [ngbTooltip]="'Delete' | translate"></i>
      @if (sendingResponse['deleteTicketPermanent']) {
        <i class="fa fa-spinner fa-spin mx-1"></i>
      }
    </button>
    <button type="button" (click)="restoreDelete('restoreDelete')" [disabled]="sendingResponse['restoreDelete']" class="btn btn-sm btn-info" id="show-restore">
      <span> {{ "Restore Ticket" | translate }} </span>
      <i class="feather feather-rotate-ccw text-white" [ngbTooltip]="'Restore' | translate"></i>
      @if (sendingResponse['restoreDelete']) {
        <i class="fa fa-spinner fa-spin mx-1"></i>
      }
    </button>
  </div>
</div>
<!--End Page header-->

<!--Row-->
<div class="row">
  <div class="col-xl-12 col-md-12 col-lg-12">
    <div class="row">
      <div class="col-xl-9 col-lg-12 col-md-12">
        @if (trashedTicketData?.tickettrashedview?.purchasecode != null) {
          <!-- Purchase Code Details -->
          <div class="purchasecodes alert alert-light-warning br-13">
            <div class="ps-0 pe-0 pb-0">
              <div class="">
                <strong>{{ "Purchase Code" | translate }} :</strong>
                 @if (trashedTicketData?.tickettrashedview?.purchasecodeVal) {
                <span class="">{{trashedTicketData?.tickettrashedview?.purchasecodeVal}}</span>
              }
                <button type="button" class="btn btn-sm btn-dark leading-tight ms-2" id="purchasecodebtn" (click)="verifyTicket(trashedTicketData?.tickettrashedview?.purchasecode, ticketDetails)">
                  {{'View Details' | translate}}
                </button>
                @if (trashedTicketData?.tickettrashedview?.purchasecodesupport == 'supported' || trashedTicketData?.tickettrashedview?.purchasecodesupport == 'true') {
                  <span class="badge badge-success ms-2">{{
                    "Support Active" | translate
                  }}</span>
                } @else {
                  @if (
                    trashedTicketData?.tickettrashedview?.purchasecodesupport?.toLowerCase() == 'expired') {
                    <span class="badge badge-danger ms-2">{{
                      "Support Expired" | translate
                    }}</span>
                  }
                }
              </div>
            </div>
          </div>
          <!-- End Purchase Code Details -->
        }

        <div class="card">
          <div class="card-header border-0 mb-1 d-block">
            <div class="d-sm-flex d-block">
              <div>
                <h4 class="card-title mb-1 fs-22">
                  {{
                  trashedTicketData?.tickettrashedview?.subject | translate
                  }}
                </h4>
              </div>
            </div>
            <small class="fs-13"><i class="feather feather-clock text-muted me-1"></i>{{ "Created Date" | translate }}
            <span class="text-muted">
              @if ((trashedTicketData?.tickettrashedview?.created_at |date : 'Y-M-d' : timezone) == (now | date : 'Y-M-d' : timezone)) {
                {{ trashedTicketData?.tickettrashedview?.created_at | date : 'hh:mm a' : timezone }} ({{ trashedTicketData?.tickettrashedview?.created_at | dateAgo : timezone}})
              } @else {
                {{ trashedTicketData?.tickettrashedview?.created_at | date : 'd M Y, hh:mm a' : timezone }} ({{ trashedTicketData?.tickettrashedview?.created_at | dateAgo : timezone }})
              }
            </span></small>
          </div>
          <div class="card-body pt-2 readmores px-6 mx-1">
            <div>
              <span [innerHTML]="sanitizeHtml(trashedTicketData?.tickettrashedview?.message)"></span>

              <div class="row galleryopen">
                @for (
                  tickettrashedviewss of trashedTicketData
                  ?.tickettrashedview?.media
                  ; track
                  tickettrashedviewss) {
                  <div class="file-image-1 removespruko{{tickettrashedviewss?.id}}" id="imageremove{{ tickettrashedviewss?.id }}"></div>
                }
              </div>
            </div>
          </div>
        </div>
        @if (trashedTicketData?.comments?.length) {
          <div class="card">
            <div class="card-header">
              <h4 class="card-title">{{ "Conversions" | translate }}</h4>
            </div>
            @for ($comment of trashedTicketData?.comments; track $comment) {
              @if ($comment?.user_id != null) {
                <!-- Admin Reply status -->
                <div class="card-body">
                  <div class="d-sm-flex">
                    <div class="d-flex me-3">
                      <a href="javascript:;">
                        @if ($comment?.user != null;) {
                          <!-- @if ($comment?.user?.profileimage == null) { -->
                            <img class="media-object brround avatar-lg" alt="{{$comment?.user?.profileimage}}" [src]="$comment?.user?.profileimage || './assets/images/user-profile.png'" loading="lazy" decoding="async">
                          <!-- } -->
                        }
                      </a>
                    </div>
                    <div class="media-body">
                      @if ($comment?.user != null) {
                        <h5 class="mt-1 mb-1 font-weight-semibold">{{ $comment?.user?.name }}
                          @if ($comment?.user?.roles?.length) {
                            <span class="badge badge-primary-light badge-md ms-2">{{ $comment?.user?.roles[0]?.name }}</span>
                          }
                        </h5>
                      } @else {
                        <h5 class="mt-1 mb-1 font-weight-semibold text-muted">
                          ~
                        </h5>
                      }
                      <small class="text-muted"><i class="feather feather-clock"></i> {{ $comment?.created_at | dateAgo : timezone }}</small>
                      <div class="fs-13 mb-0 mt-1" [innerHTML]="sanitizeHtml($comment?.comment)" ></div>
                      <div class="row galleryopen">
                        @for ($commentss of $comment.media; track $commentss) {
                          <div class="file-image-1  removespruko{{$commentss?.id}}" id="imageremove{{$commentss?.id}}">
                            <div class="product-image">
                            </div>
                            <span class="file-name-1">
                              {{$commentss?.file_name.slice(0,10)}}
                            </span>
                          </div>
                        }
                      </div>
                    </div>
                  </div>
                </div>
                <!-- {{--Admin Reply status end--}} -->
              } @else {
                <!-- Customer Reply status -->
                <div class="card-body">
                  <div class="d-sm-flex">
                    <div class="d-flex me-3">
                      <a href="javascript:;">
                        <!-- @if ($comment?.cust?.profileimage == null) { -->
                          <img class="media-object brround avatar-lg" alt="{{$comment?.cust?.profileimage}}" [src]="$comment?.cust?.profileimage || './assets/images/user-profile.png'" loading="lazy" decoding="async">
                        <!-- } -->
                      </a>
                    </div>
                    <div class="media-body">
                      <h5 class="mt-1 mb-1 font-weight-semibold">
                        {{ $comment?.cust?.username
                        }}<span class="badge badge-danger-light badge-md ms-2">{{ $comment?.cust?.userType }}</span>
                      </h5>
                      <small class="text-muted"><i class="feather feather-clock"></i>
                    {{ $comment?.created_at | dateAgo : timezone }}</small>
                    <div class="fs-13 mb-0 mt-1" [innerHTML]="sanitizeHtml($comment?.comment)"></div>
                    <div class="row galleryopen">
                      @for ($commentss of $comment.media; track $commentss) {
                        <div class="file-image-1  removespruko{{$commentss?.id}}" id="imageremove{{ $commentss?.id }}">
                          <div class="product-image">
                          </div>
                          <span class="file-name-1">
                            {{ $commentss?.file_name.slice(0, 10) }}
                          </span>
                        </div>
                      }
                    </div>
                  </div>
                </div>
              </div>
              <!-- Customer Reply status end -->
            }
          }
        </div>
      }
    </div>

    <div class="col-xl-3 col-lg-12 col-md-12">
      <div class="card">
        <div class="card-header border-0">
          <div class="card-title">{{'Ticket Information' | translate}}</div>
        </div>
        <div class="card-body pt-2 ps-0 pe-0 pb-0">
          <div class="table-responsive tr-lastchild">
            <table class="table mb-0 table-information">
              <tbody>
                <tr>
                  <td>
                    <span class="w-50">{{'Ticket ID' | translate}}</span>
                  </td>
                  <td>:</td>
                  <td>
                    <span class="font-weight-semibold">#{{ trashedTicketData?.tickettrashedview?.ticket_id }}</span>
                  </td>
                </tr>
                <tr>
                  <td>
                    <span class="w-50">{{'Category' | translate}}</span>
                  </td>
                  <td>:</td>
                  <td>
                    @if (trashedTicketData?.tickettrashedview?.category_id != null) {
                      @if (trashedTicketData?.tickettrashedview?.category != null) {
                        <span class="font-weight-semibold">{{ trashedTicketData?.tickettrashedview?.category?.name}}</span>
                      } @else {
                        ~
                      }
                    } @else {
                      ~
                    }
                  </td>
                </tr>
                @if (trashedTicketData?.tickettrashedview?.subcategory != null) {
                  <tr>
                    <td>
                      <span class="w-50">{{'SubCategory' | translate}}</span>
                    </td>
                    <td>:</td>
                    <td>
                      <span class="font-weight-semibold">{{trashedTicketData?.tickettrashedview?.subcategoriess?.subcategoryname}}</span>
                    </td>
                  </tr>
                }

                @if (trashedTicketData?.tickettrashedview?.project != null) {
                  <tr>
                    <td>
                      <span class="w-50">{{'Project' | translate}}</span>
                    </td>
                    <td>:</td>
                    <td>
                      <span class="font-weight-semibold">{{ trashedTicketData?.tickettrashedview?.project }}</span>
                    </td>
                  </tr>
                }
                <tr>
                  <td>
                    <span class="w-50">{{'Priority' | translate}}</span>
                  </td>
                  <td>:</td>
                  <td id="priorityid">
                    @if (trashedTicketData?.tickettrashedview?.priority != null) {
                        <span class="badge" [ngClass]="[
                              trashedTicketData?.tickettrashedview?.priority == 'Low'? 'badge-success-light':'',
                              trashedTicketData?.tickettrashedview?.priority == 'High'? 'badge-danger-light':'',
                              trashedTicketData?.tickettrashedview?.priority == 'Critical'? 'badge-danger-dark':'',
                              trashedTicketData?.tickettrashedview?.priority == 'Medium'? 'badge-warning-light':'',
                              ]">{{ trashedTicketData?.tickettrashedview?.priority | translate }}</span>
                    } @else {
                      ~
                    }
                  </td>
                </tr>

                <tr>
                  <td>
                    <span class="w-50">{{'Opened Date' | translate}}</span>
                  </td>
                  <td>:</td>
                  <td>
                    <span class="font-weight-semibold">{{ trashedTicketData?.tickettrashedview?.created_at | date : trashedTicketData?.setting?.original?.date_format :
                    timezone}}</span>
                  </td>
                </tr>
                <tr>
                  <td>
                    <span class="w-50">{{'Status' | translate}}</span>
                  </td>
                  <td>:</td>
                  <td>
                      <span class="badge" [ngClass]="[
                              trashedTicketData?.tickettrashedview?.status == 'New'? 'badge-burnt-orange':'',
                              trashedTicketData?.tickettrashedview?.status == 'Re-Open'? 'badge-teal':'',
                              trashedTicketData?.tickettrashedview?.status == 'Inprogress'? 'badge-info':'',
                              trashedTicketData?.tickettrashedview?.status == 'On-Hold'? 'badge-warning':'',
                              trashedTicketData?.tickettrashedview?.status == 'Closed'? 'badge-danger':'',
                              ]">{{ trashedTicketData?.tickettrashedview?.status | translate }}</span>
                  </td>
                </tr>
                @if (trashedTicketData?.tickettrashedview?.replystatus != null;) {
                  <tr>
                    <td>
                      <span class="w-50">{{'Reply Status' | translate}}</span>
                    </td>
                    <td>:</td>
                    <td>
                        <span class="badge" [ngClass]="[
                              trashedTicketData?.tickettrashedview?.replystatus == 'Solved'? 'badge-burnt-success':'',
                              trashedTicketData?.tickettrashedview?.replystatus == 'Unanswered'? 'badge-light':'',
                              trashedTicketData?.tickettrashedview?.replystatus == 'Waiting for response'? 'badge-warning':''
                              ]">{{ trashedTicketData?.tickettrashedview?.replystatus  | translate}}</span>
                    </td>
                  </tr>
                }

                @if (trashedTicketData?.tickettrashedview?.ticketviolation == 'on') {
                  <tr>
                    <td>
                      <span class="w-50">{{'Ticket Violation' | translate | titlecase}}</span>
                    </td>
                    <td>:</td>
                    <td>
                      <button class="border-0 bg-transparent">
                        <i class="fa fa-exclamation-triangle text-danger"></i>
                      </button>
                    </td>
                  </tr>
                }
              </tbody>
            </table>
          </div>
        </div>
      </div>

      <!-- Customer Details -->
      <div class="card">
        <div class="card-header border-0">
          <div class="card-title">{{'Customer Details' | translate}}</div>
        </div>
        <div class="card-body text-center pt-2 px-0 pb-0 py-0">
          <div class="profile-pic">
            <div class="profile-pic-img mb-2">
              <span class="bg-success dots" [ngbTooltip]="'Online' | translate"></span>
              <!-- @if (trashedTicketData?.tickettrashedview?.cust?.profileimage) { -->
                <img class="brround avatar-xxl" alt="{{trashedTicketData?.tickettrashedview?.cust?.profileimage}}" [src]="trashedTicketData?.tickettrashedview?.cust?.profileimage || './assets/images/user-profile.png'" loading="lazy" decoding="async">
              <!-- } -->
            </div>
            <div class="text-dark">
              @if (trashedTicketData?.tickettrashedview?.cust?.voilated == 'on') {
                <span class="badge badge-danger rounded-circle p-0 violation-badge">
                  <i class="fa fa-exclamation-triangle text-white"></i>
                </span>
              }
              <h5 class="mb-1 font-weight-semibold2">{{trashedTicketData?.tickettrashedview?.cust?.username}}</h5>
              <small class="text-muted ">{{ trashedTicketData?.tickettrashedview?.cust?.email }}
              </small>
            </div>
          </div>
          <div class="table-responsive text-start tr-lastchild">
            <table class="table mb-0 table-information">
              <tbody>
                <tr>
                  <td>
                    <span class="w-50">{{'IP'| translate}}</span>
                  </td>
                  <td>:</td>
                  <td>
                    <span class="font-weight-semibold">{{ trashedTicketData?.tickettrashedview?.cust?.last_login_ip }}</span>
                  </td>
                </tr>
                <tr>
                  <td>
                    <span class="w-50">{{'Mobile Number'| translate}}</span>
                  </td>
                  <td>:</td>
                  <td>
                    <span class="font-weight-semibold">{{ trashedTicketData?.tickettrashedview?.cust?.phone}}</span>
                  </td>
                </tr>
                <tr>
                  <td>
                    <span class="w-50">{{'Country'| translate}}</span>
                  </td>
                  <td>:</td>
                  <td>
                    <span class="font-weight-semibold">{{ trashedTicketData?.tickettrashedview?.cust?.country }}</span>
                  </td>
                </tr>
                <tr>
                  <td>
                    <span class="w-50">{{'Timezone'| translate}}</span>
                  </td>
                  <td>:</td>
                  <td>
                    <span class="font-weight-semibold">{{trashedTicketData?.tickettrashedview?.cust?.timezone}}</span>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
      <!-- End Customer Details -->
      <!--ticke note  -->
      <div class="card">
        <div class="card-header border-0">
          <div class="card-title">{{'Ticket Note'| translate}}</div>
        </div>
        @if (trashedTicketData?.ticketnote?.length) {
          <div class="card-body item-user">
            <div id="refresh">
              @for (note of trashedTicketData?.ticketnote; track note) {
                <div class="alert alert-light-warning ticketnote" id="ticketnote_{{note?.id}}" role="alert">
                  <!-- @if($note->user_id == Auth::id())
                  @endif -->
                  <p class="m-0">{{note?.ticketnotes}}</p>
                  <p class="text-end mb-0"><small><i><b>{{note?.users?.name}}</b>
                  @if (note?.users?.roles?.length) {
                    ({{note?.users?.roles[0]?.name}})
                  }
                </i></small></p>
              </div>
            }
          </div>
        </div>
      } @else {
        <!-- @else -->
        <div class="card-body">
          <div class="text-center">
            <div class="avatar avatar-xxl empty-block mb-4">
              <svg xmlns="http://www.w3.org/2000/svg" height="50" width="50" viewBox="0 0 48 48">
                <path fill="#CDD6E0" d="M12.8 4.6H38c1.1 0 2 .9 2 2V46c0 1.1-.9 2-2 2H6.7c-1.1 0-2-.9-2-2V12.7l8.1-8.1z" />
                <path fill="#ffffff" d="M.1 41.4V10.9L11 0h22.4c1.1 0 2 .9 2 2v39.4c0 1.1-.9 2-2 2H2.1c-1.1 0-2-.9-2-2z" />
                <path fill="#CDD6E0" d="M11 8.9c0 1.1-.9 2-2 2H.1L11 0v8.9z" />
                <path fill="#FFD05C" d="M15.5 8.6h13.8v2.5H15.5z" />
                <path fill="#dbe0ef" d="M6.3 31.4h9.8v2.5H6.3zM6.3 23.8h22.9v2.5H6.3zM6.3 16.2h22.9v2.5H6.3z" />
                <path fill="#FFD15C" d="M22.8 35.7l-2.6 6.4 6.4-2.6z" />
                <path fill="#334A5E" d="M21.4 39l-1.2 3.1 3.1-1.2z" />
                <path fill="#FF7058" d="M30.1 18h5.5v23h-5.5z" transform="rotate(-134.999 32.833 29.482)" />
                <path fill="#40596B" d="M46.2 15l1 1c.8.8.8 2 0 2.8l-2.7 2.7-3.9-3.9 2.7-2.7c.9-.6 2.2-.6 2.9.1z" />
                <path fill="#F2F2F2" d="M39.1 19.3h5.4v2.4h-5.4z" transform="rotate(-134.999 41.778 20.536)" />
              </svg>
            </div>
            <h4 class="mb-2">{{'Don’t have any notes yet'|translate}}</h4>
          </div>
        </div>
      }
    </div>
    <!-- End ticket note  -->
  </div>
</div>
</div>
</div>


<ng-template #ticketDetails let-modal>
  <div class="modal-header">
    <h4 class="modal-title">{{'Purchase Details' | translate}}</h4>
    <button type="button" class="btn-close" aria-label="Close" (click)="modal.dismiss('Cross click')">
    </button>
  </div>
  <div class="modal-body">
    <div id="purchasedata" [innerHTML]="sanitizeHtml(purchasedata)"></div>
  </div>
</ng-template>