<!--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>

  <!--page header left -->
  <div class="page-rightheader d-flex ms-md-auto">


    <div class="btn-list">

      <div ngbDropdown>
        <button aria-label="dropdown" type="button" class="btn btn-light" ngbDropdownToggle>
          <i class="fe fe-more-vertical"></i>
        </button>
        <div ngbDropdownMenu>


          @if (permission?.includes('Ticket Delete')) {
          <button type="button" [disabled]="sendingResponse['massDelTic']" ngbDropdownItem id="show-delete"
            (click)="deleteTicket(ticketData?.ticket?.enc_id, 'massDelTic')">
            <i class="fa fa-trash me-3 fs-18 my-auto text-muted"></i>
            {{'Delete Ticket' | translate}}@if (sendingResponse['massDelTic']) {
            <i class="fa fa-spinner fa-spin mx-1"></i>
            }
          </button>
          }

          @if (ticketData?.ticket?.status != 'Closed') {
          <button type="button" [disabled]="sendingResponse['closeTicket']" ngbDropdownItem id="close-ticket"
            (click)="forceClose(ticketData?.ticket?.enc_id, 'closeTicket')">
            <i class="fa fa-times-circle me-3 fs-18 my-auto text-muted"></i>
            {{'Force close' | translate}}@if (sendingResponse['closeTicket']) {
            <i class="fa fa-spinner fa-spin mx-1"></i>
            }
          </button>
          }
        </div>
      </div>
    </div>
  </div>
  <!--page header left -->
</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 (ticketData?.ticket?.purchasecode) {
        <!-- 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 (ticketData?.ticket?.purchasecodeVal) {
              <span class="">{{ticketData?.ticket?.purchasecodeVal}}</span>
              }
              <button type="button" class="btn btn-sm btn-dark leading-tight ms-2" id="purchasecodebtn"
                (click)="verifyTicket(ticketData?.ticket?.purchasecode, ticketDetails)">{{'View Details' |
                translate}}</button>
              @if (ticketData?.ticket?.purchasecodesupport == 'supported' || ticketData?.ticket?.purchasecodesupport ==
              'true') {
              <span class="badge badge-success ms-2">{{'Support Active' | translate}}</span>
              } @else {
              @if (ticketData?.ticket?.purchasecodesupport == 'expired') {
              <span class="btn btn-sm btn-danger leading-tight ms-2">{{'Support Expired' |
                translate}}</span>
              }
              }
              <ng-template #Expired>
                @if (ticketData?.ticket?.purchasecodesupport == 'expired') {
                <span class="btn btn-sm btn-danger leading-tight ms-2">{{'Support Expired' |
                  translate}}</span>
                }
              </ng-template>
            </div>
          </div>
        </div>
        <!-- End Purchase Code Details -->
        }


        @if (ticketData?.ticket?.cust?.logintype == 'envatosociallogin') {
        @if (ticketData?.ticket?.usernameverify != null) {
        @if (ticketData?.ticket?.usernameverify == 'verified') {
        @if (user?.roles?.[0]?.name === 'superadmin') {
        <div class="alert alert-light-success br-13 w-100 fs-14" id="custmermismatch" #custmermismatch>
          <span class="">{{'The username in purchase details and the current logged-in username do not match. This
            customer’s username has been verified and is valid.' |
            translate}}</span>
          <div class="mt-1">
            <button type="button" class="btn btn-sm me-2 btn-success" disabled> <i class="fe fe-check"></i> {{'Verify' |
              translate}}</button>
            <button type="button" class="btn btn-sm me-2 btn-danger"
              (click)="wrongcustomer(ticketData?.ticket?.id)">{{'Unverifiy' | translate}}</button>
          </div>
        </div>
        }
        } @else {
        <div class="alert alert-light-danger br-13 w-100 fs-14" #custmermismatch>
          <span class="">{{'The username in purchase details and the current logged-in username do not match. This
            customer seems invalid, please take appropriate action.' |
            translate}}</span>
          @if (user?.roles?.[0]?.name === 'superadmin') {
          <div class="mt-1">
            <button type="button" class="btn btn-sm me-2 btn-success"
              (click)="purchasverified(ticketData?.ticket?.id)">{{'Verify' | translate}}</button>
            <button type="button" class="btn btn-sm me-2 btn-danger" disabled> <i class="fe fe-check"></i> {{'Unverifiy'
              | translate}}</button>
          </div>
          }
        </div>
        }
        } @else {
        <div class="alert alert-light-danger br-13 w-100 fs-14" #custmermismatch>
          <span class="">{{'The username in purchase details and the current logged-in username do not match. Verify
            customer details and proceed to the next step.' |
            translate}}</span>
          <div class="mt-1">
            <button type="button" class="btn btn-sm me-2 btn-success " id="purchasverified"
              (click)="purchasverified(ticketData?.ticket?.id)">{{'Valid User' | translate}}</button>
            <button type="button" class="btn btn-sm me-2 ms-1 btn-danger" id="wrongcustomer"
              (click)="wrongcustomer(ticketData?.ticket?.id)">{{'Invalid User' | translate}}</button>
          </div>
        </div>
        }
        }

        @if (ticketData?.ticket?.status != 'Closed' && ticketData?.ticket?.status != 'Suspend') {
        @if (ticketData?.ticket?.ticketassignmutliples?.length && ticketData?.ticket?.selfassignuser_id == null) {
        @if (notAssigncondition) {
        <ngb-alert [dismissible]="false" type="bg-light-info" class="alert alert-light-info br-13 ">
          <div class="d-flex align-items-center">
            <span class="">{{'This ticket is assigned to you please respond.' | translate}}</span>
          </div>
        </ngb-alert>
        } @else {
        <ngb-alert [dismissible]="false" type="bg-light-danger" class="alert alert-light-danger br-13 ">
          <div class="">
            <span class="">{{'This ticket has already been assigned to another employee.' | translate}}</span>
          </div>
        </ngb-alert>
        }
        } @else {
        @if (!ticketData?.ticket?.ticketassignmutliples?.length && ticketData?.ticket?.selfassignuser_id != null) {
        @if (ticketData?.ticket?.selfassignuser_id != user?.id) {
        <ngb-alert [dismissible]="false" type="bg-light-danger" class="alert alert-light-danger br-13 ">
          <div class="">
            <span class="">{{'This ticket has already been assigned to another employee.' | translate}}</span>
          </div>
        </ngb-alert>
        } @else {
        <ngb-alert [dismissible]="false" type="bg-light-info" class="alert alert-light-info br-13 ">
          <div class="d-flex align-items-center">
            <span class="">{{'This ticket has been selfassigned by you, please respond.' | translate}}</span>
          </div>
        </ngb-alert>
        }
        }
        }
        }

        <div class="card">
          <div class="card-header border-0 mb-1 d-block">
            <div class="d-sm-flex d-block">
              <div class="d-flex justify-content-between w-100">
                <h4 class="card-title mb-1 fs-22">{{ ticketData?.ticket?.subject }} </h4>
                @if(setting?.emp_google_translate == 'on'){
                <span class="btn btn-sm btn-white position-absolute end-0 d-flex align-items-center"
                  (click)="translateModel(translateins)" [ngbTooltip]="'Translate' | translate"
                  style='top: 20px; margin-inline-end: 1.0rem'>
                  <i class="fa fa-solid fa-language" id="translate-btn" style="font-size: 1rem;"></i>
                </span>
                }
              </div>
            </div>
            @if (!ticketData) {
            <span class="line-skeleton w-10 d-block mb-2"></span>
            }
            @if (ticketData) {
            <small class="fs-13"><i class="feather feather-clock text-muted me-1"></i>{{'Created At' |
              translate}}
              @if ((ticketData?.ticket?.created_at |date : 'Y-M-d' : timezone) == (now | date : 'Y-M-d' : timezone)) {
              {{ ticketData?.ticket?.created_at | date : 'hh:mm a' : timezone }} ({{ ticketData?.ticket?.created_at | dateAgo : timezone}})
              } @else {
              {{ ticketData?.ticket?.created_at | date : 'd M Y, hh:mm a' : timezone }} ({{
              ticketData?.ticket?.created_at | dateAgo : timezone }})
              }
            </small>
            }
          </div>
          <div class="card-body readmores pt-2  px-6 mx-1">
            <div>
              @if (!ticketData) {
              <span class="line-skeleton w-75 d-block mb-2"></span>
              }
              @if (!ticketData) {
              <span class="line-skeleton w-75 d-block mb-2"></span>
              }
              @if (ticketData) {
              <app-read-more [content]="ticketData?.ticket?.message" [completeWords]="true"></app-read-more>
              }
              <div class="row galleryopen">
                <div class="uhelp-attach-container flex-wrap">
                  @for (ticketss of ticketData?.ticket?.media; track ticketss) {
                  <div class="border d-table rounded attach-container-width">
                    <div class="d-flex align-items-center file-attach-uhelp">
                      <div class="me-2">
                        @if (ticketss?.mime_type == 'jpg' || ticketss?.mime_type == 'jpeg' || ticketss?.mime_type ==
                        'image/jpeg') {
                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
                          class="bi bi-filetype-jpg" viewBox="0 0 16 16">
                          <path fill-rule="evenodd"
                            d="M14 4.5V14a2 2 0 0 1-2 2h-1v-1h1a1 1 0 0 0 1-1V4.5h-2A1.5 1.5 0 0 1 9.5 3V1H4a1 1 0 0 0-1 1v9H2V2a2 2 0 0 1 2-2h5.5L14 4.5Zm-4.34 8.132c.076.153.123.317.14.492h-.776a.797.797 0 0 0-.097-.249.689.689 0 0 0-.17-.19.707.707 0 0 0-.237-.126.96.96 0 0 0-.299-.044c-.285 0-.507.1-.665.302-.156.201-.234.484-.234.85v.498c0 .234.032.439.097.615a.881.881 0 0 0 .304.413.87.87 0 0 0 .519.146.967.967 0 0 0 .457-.096.67.67 0 0 0 .272-.264c.06-.11.091-.23.091-.363v-.255H8.24v-.59h1.576v.798c0 .193-.032.377-.097.55a1.29 1.29 0 0 1-.293.458 1.37 1.37 0 0 1-.495.313c-.197.074-.43.111-.697.111a1.98 1.98 0 0 1-.753-.132 1.447 1.447 0 0 1-.533-.377 1.58 1.58 0 0 1-.32-.58 2.482 2.482 0 0 1-.105-.745v-.506c0-.362.066-.678.2-.95.134-.271.328-.482.582-.633.256-.152.565-.228.926-.228.238 0 .45.033.636.1.187.066.347.158.48.275.133.117.238.253.314.407ZM0 14.786c0 .164.027.319.082.465.055.147.136.277.243.39.11.113.245.202.407.267.164.062.354.093.569.093.42 0 .748-.115.984-.345.238-.23.358-.566.358-1.005v-2.725h-.791v2.745c0 .202-.046.357-.138.466-.092.11-.233.164-.422.164a.499.499 0 0 1-.454-.246.577.577 0 0 1-.073-.27H0Zm4.92-2.86H3.322v4h.791v-1.343h.803c.287 0 .531-.057.732-.172.203-.118.358-.276.463-.475.108-.201.161-.427.161-.677 0-.25-.052-.475-.158-.677a1.176 1.176 0 0 0-.46-.477c-.2-.12-.443-.179-.732-.179Zm.546 1.333a.795.795 0 0 1-.085.381.574.574 0 0 1-.238.24.794.794 0 0 1-.375.082H4.11v-1.406h.66c.218 0 .389.06.512.182.123.12.185.295.185.521Z" />
                        </svg>
                        }
                        @else if (ticketss?.mime_type == 'application/pdf') {
                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
                          class="bi bi-filetype-pdf" viewBox="0 0 16 16">
                          <path fill-rule="evenodd"
                            d="M14 4.5V14a2 2 0 0 1-2 2h-1v-1h1a1 1 0 0 0 1-1V4.5h-2A1.5 1.5 0 0 1 9.5 3V1H4a1 1 0 0 0-1 1v9H2V2a2 2 0 0 1 2-2h5.5L14 4.5ZM1.6 11.85H0v3.999h.791v-1.342h.803c.287 0 .531-.057.732-.173.203-.117.358-.275.463-.474a1.42 1.42 0 0 0 .161-.677c0-.25-.053-.476-.158-.677a1.176 1.176 0 0 0-.46-.477c-.2-.12-.443-.179-.732-.179Zm.545 1.333a.795.795 0 0 1-.085.38.574.574 0 0 1-.238.241.794.794 0 0 1-.375.082H.788V12.48h.66c.218 0 .389.06.512.181.123.122.185.296.185.522Zm1.217-1.333v3.999h1.46c.401 0 .734-.08.998-.237a1.45 1.45 0 0 0 .595-.689c.13-.3.196-.662.196-1.084 0-.42-.065-.778-.196-1.075a1.426 1.426 0 0 0-.589-.68c-.264-.156-.599-.234-1.005-.234H3.362Zm.791.645h.563c.248 0 .45.05.609.152a.89.89 0 0 1 .354.454c.079.201.118.452.118.753a2.3 2.3 0 0 1-.068.592 1.14 1.14 0 0 1-.196.422.8.8 0 0 1-.334.252 1.298 1.298 0 0 1-.483.082h-.563v-2.707Zm3.743 1.763v1.591h-.79V11.85h2.548v.653H7.896v1.117h1.606v.638H7.896Z" />
                        </svg>
                        }
                        @else if (ticketss?.mime_type == 'text/csv') {
                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
                          class="bi bi-filetype-csv" viewBox="0 0 16 16">
                          <path fill-rule="evenodd"
                            d="M14 4.5V14a2 2 0 0 1-2 2h-1v-1h1a1 1 0 0 0 1-1V4.5h-2A1.5 1.5 0 0 1 9.5 3V1H4a1 1 0 0 0-1 1v9H2V2a2 2 0 0 1 2-2h5.5L14 4.5ZM3.517 14.841a1.13 1.13 0 0 0 .401.823c.13.108.289.192.478.252.19.061.411.091.665.091.338 0 .624-.053.859-.158.236-.105.416-.252.539-.44.125-.189.187-.408.187-.656 0-.224-.045-.41-.134-.56a1.001 1.001 0 0 0-.375-.357 2.027 2.027 0 0 0-.566-.21l-.621-.144a.97.97 0 0 1-.404-.176.37.37 0 0 1-.144-.299c0-.156.062-.284.185-.384.125-.101.296-.152.512-.152.143 0 .266.023.37.068a.624.624 0 0 1 .246.181.56.56 0 0 1 .12.258h.75a1.092 1.092 0 0 0-.2-.566 1.21 1.21 0 0 0-.5-.41 1.813 1.813 0 0 0-.78-.152c-.293 0-.551.05-.776.15-.225.099-.4.24-.527.421-.127.182-.19.395-.19.639 0 .201.04.376.122.524.082.149.2.27.352.367.152.095.332.167.539.213l.618.144c.207.049.361.113.463.193a.387.387 0 0 1 .152.326.505.505 0 0 1-.085.29.559.559 0 0 1-.255.193c-.111.047-.249.07-.413.07-.117 0-.223-.013-.32-.04a.838.838 0 0 1-.248-.115.578.578 0 0 1-.255-.384h-.765ZM.806 13.693c0-.248.034-.46.102-.633a.868.868 0 0 1 .302-.399.814.814 0 0 1 .475-.137c.15 0 .283.032.398.097a.7.7 0 0 1 .272.26.85.85 0 0 1 .12.381h.765v-.072a1.33 1.33 0 0 0-.466-.964 1.441 1.441 0 0 0-.489-.272 1.838 1.838 0 0 0-.606-.097c-.356 0-.66.074-.911.223-.25.148-.44.359-.572.632-.13.274-.196.6-.196.979v.498c0 .379.064.704.193.976.131.271.322.48.572.626.25.145.554.217.914.217.293 0 .554-.055.785-.164.23-.11.414-.26.55-.454a1.27 1.27 0 0 0 .226-.674v-.076h-.764a.799.799 0 0 1-.118.363.7.7 0 0 1-.272.25.874.874 0 0 1-.401.087.845.845 0 0 1-.478-.132.833.833 0 0 1-.299-.392 1.699 1.699 0 0 1-.102-.627v-.495Zm8.239 2.238h-.953l-1.338-3.999h.917l.896 3.138h.038l.888-3.138h.879l-1.327 4Z" />
                        </svg>
                        }
                        @else if (ticketss?.mime_type == 'image/png') {
                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
                          class="bi bi-filetype-png" viewBox="0 0 16 16">
                          <path fill-rule="evenodd"
                            d="M14 4.5V14a2 2 0 0 1-2 2v-1a1 1 0 0 0 1-1V4.5h-2A1.5 1.5 0 0 1 9.5 3V1H4a1 1 0 0 0-1 1v9H2V2a2 2 0 0 1 2-2h5.5L14 4.5Zm-3.76 8.132c.076.153.123.317.14.492h-.776a.797.797 0 0 0-.097-.249.689.689 0 0 0-.17-.19.707.707 0 0 0-.237-.126.96.96 0 0 0-.299-.044c-.285 0-.506.1-.665.302-.156.201-.234.484-.234.85v.498c0 .234.032.439.097.615a.881.881 0 0 0 .304.413.87.87 0 0 0 .519.146.967.967 0 0 0 .457-.096.67.67 0 0 0 .272-.264c.06-.11.091-.23.091-.363v-.255H8.82v-.59h1.576v.798c0 .193-.032.377-.097.55a1.29 1.29 0 0 1-.293.458 1.37 1.37 0 0 1-.495.313c-.197.074-.43.111-.697.111a1.98 1.98 0 0 1-.753-.132 1.447 1.447 0 0 1-.533-.377 1.58 1.58 0 0 1-.32-.58 2.482 2.482 0 0 1-.105-.745v-.506c0-.362.067-.678.2-.95.134-.271.328-.482.582-.633.256-.152.565-.228.926-.228.238 0 .45.033.636.1.187.066.348.158.48.275.133.117.238.253.314.407Zm-8.64-.706H0v4h.791v-1.343h.803c.287 0 .531-.057.732-.172.203-.118.358-.276.463-.475a1.42 1.42 0 0 0 .161-.677c0-.25-.053-.475-.158-.677a1.176 1.176 0 0 0-.46-.477c-.2-.12-.443-.179-.732-.179Zm.545 1.333a.795.795 0 0 1-.085.381.574.574 0 0 1-.238.24.794.794 0 0 1-.375.082H.788v-1.406h.66c.218 0 .389.06.512.182.123.12.185.295.185.521Zm1.964 2.666V13.25h.032l1.761 2.675h.656v-3.999h-.75v2.66h-.032l-1.752-2.66h-.662v4h.747Z" />
                        </svg>
                        }
                        @else if (ticketss?.mime_type != 'image/jpeg' && ticketss?.mime_type != 'application/pdf' &&
                        ticketss?.mime_type != 'text/csv' && ticketss?.mime_type != 'image/png') {
                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
                          class="bi bi-file-earmark" viewBox="0 0 16 16">
                          <path
                            d="M14 4.5V14a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V2a2 2 0 0 1 2-2h5.5L14 4.5zm-3 0A1.5 1.5 0 0 1 9.5 3V1H4a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V4.5h-2z" />
                        </svg>
                        }
                      </div>
                      <div class="d-flex align-items-center text-muted fs-12 me-3">
                        <p class="file-attach-name text-truncate mb-0">{{ticketss.file_name}}</p>
                      </div>
                      <a aria-label="view" routerLink="/imageview/{{ticketss?.id}}"
                        [queryParams]="{ 'image': ticketss?.file_name }" target="_blank"
                        class="uhelp-attach-acion p-2 rounded border lh-1 me-1 d-flex align-items-center justify-content-center"><i
                          class="fe fe-eye text-muted fs-12"></i></a>
                      <a aria-label="Download" href="javascript:;"
                        (click)="downloadFile(ticketss?.id,ticketss.file_name)"
                        class="uhelp-attach-acion p-2 rounded border lh-1 d-flex align-items-center justify-content-center"
                        download><i class="fe fe-download text-muted fs-12"></i></a>
                    </div>
                  </div>
                  }

                  @if (ticketData?.ticket?.emailticketfile != null) {
                    @if(ticketData?.ticket?.emailticketfile == 'mismatch'){
                      <div class="border d-table rounded attach-container-width mb-2" placement="top"
                        ngbTooltip="{{'File upload failed, Please make sure that the file size is within the allowed limits and that the file format is supported.' | translate}}">
                        <div class="d-flex align-items-center file-attach-uhelp mt-1">
                          <div class="me-2">
                            <a href="javascript:;" class="uhelp-attach-acion d-flex align-items-center justify-content-center"><i
                                class="fe feather-alert-circle text-danger fs-20"></i></a>
                          </div>
                          <div class="d-flex align-items-center text-muted fs-12 me-3">
                            <p class="file-attach-name text-danger mb-0">{{'Upload Failed' |
                              translate}}</p>
                          </div>
                        </div>
                      </div>
                    }@else{
                      @for (arraytypes of ticketData?.ticket?.emailticketfile?.split(','); track arraytypes) {
                      <div class="border d-table rounded attach-container-width mb-2">
                        <div class="d-flex align-items-center file-attach-uhelp">
                          <div class="me-2">
                            @if (arraytypes?.split('.')[1] == 'jpg' || arraytypes?.split('.')[1] == 'jpeg' ||
                            arraytypes?.split('.')[1] == 'JPG') {
                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
                              class="bi bi-filetype-jpg" viewBox="0 0 16 16">
                              <path fill-rule="evenodd"
                                d="M14 4.5V14a2 2 0 0 1-2 2h-1v-1h1a1 1 0 0 0 1-1V4.5h-2A1.5 1.5 0 0 1 9.5 3V1H4a1 1 0 0 0-1 1v9H2V2a2 2 0 0 1 2-2h5.5L14 4.5Zm-4.34 8.132c.076.153.123.317.14.492h-.776a.797.797 0 0 0-.097-.249.689.689 0 0 0-.17-.19.707.707 0 0 0-.237-.126.96.96 0 0 0-.299-.044c-.285 0-.507.1-.665.302-.156.201-.234.484-.234.85v.498c0 .234.032.439.097.615a.881.881 0 0 0 .304.413.87.87 0 0 0 .519.146.967.967 0 0 0 .457-.096.67.67 0 0 0 .272-.264c.06-.11.091-.23.091-.363v-.255H8.24v-.59h1.576v.798c0 .193-.032.377-.097.55a1.29 1.29 0 0 1-.293.458 1.37 1.37 0 0 1-.495.313c-.197.074-.43.111-.697.111a1.98 1.98 0 0 1-.753-.132 1.447 1.447 0 0 1-.533-.377 1.58 1.58 0 0 1-.32-.58 2.482 2.482 0 0 1-.105-.745v-.506c0-.362.066-.678.2-.95.134-.271.328-.482.582-.633.256-.152.565-.228.926-.228.238 0 .45.033.636.1.187.066.347.158.48.275.133.117.238.253.314.407ZM0 14.786c0 .164.027.319.082.465.055.147.136.277.243.39.11.113.245.202.407.267.164.062.354.093.569.093.42 0 .748-.115.984-.345.238-.23.358-.566.358-1.005v-2.725h-.791v2.745c0 .202-.046.357-.138.466-.092.11-.233.164-.422.164a.499.499 0 0 1-.454-.246.577.577 0 0 1-.073-.27H0Zm4.92-2.86H3.322v4h.791v-1.343h.803c.287 0 .531-.057.732-.172.203-.118.358-.276.463-.475.108-.201.161-.427.161-.677 0-.25-.052-.475-.158-.677a1.176 1.176 0 0 0-.46-.477c-.2-.12-.443-.179-.732-.179Zm.546 1.333a.795.795 0 0 1-.085.381.574.574 0 0 1-.238.24.794.794 0 0 1-.375.082H4.11v-1.406h.66c.218 0 .389.06.512.182.123.12.185.295.185.521Z" />
                            </svg>
                            } @else {
                            @if (arraytypes?.split('.')[1] == 'pdf') {
                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
                              class="bi bi-filetype-pdf" viewBox="0 0 16 16">
                              <path fill-rule="evenodd"
                                d="M14 4.5V14a2 2 0 0 1-2 2h-1v-1h1a1 1 0 0 0 1-1V4.5h-2A1.5 1.5 0 0 1 9.5 3V1H4a1 1 0 0 0-1 1v9H2V2a2 2 0 0 1 2-2h5.5L14 4.5ZM1.6 11.85H0v3.999h.791v-1.342h.803c.287 0 .531-.057.732-.173.203-.117.358-.275.463-.474a1.42 1.42 0 0 0 .161-.677c0-.25-.053-.476-.158-.677a1.176 1.176 0 0 0-.46-.477c-.2-.12-.443-.179-.732-.179Zm.545 1.333a.795.795 0 0 1-.085.38.574.574 0 0 1-.238.241.794.794 0 0 1-.375.082H.788V12.48h.66c.218 0 .389.06.512.181.123.122.185.296.185.522Zm1.217-1.333v3.999h1.46c.401 0 .734-.08.998-.237a1.45 1.45 0 0 0 .595-.689c.13-.3.196-.662.196-1.084 0-.42-.065-.778-.196-1.075a1.426 1.426 0 0 0-.589-.68c-.264-.156-.599-.234-1.005-.234H3.362Zm.791.645h.563c.248 0 .45.05.609.152a.89.89 0 0 1 .354.454c.079.201.118.452.118.753a2.3 2.3 0 0 1-.068.592 1.14 1.14 0 0 1-.196.422.8.8 0 0 1-.334.252 1.298 1.298 0 0 1-.483.082h-.563v-2.707Zm3.743 1.763v1.591h-.79V11.85h2.548v.653H7.896v1.117h1.606v.638H7.896Z" />
                            </svg>
                            } @else {
                            @if (arraytypes?.split('.')[1] == 'csv') {
                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
                              class="bi bi-filetype-csv" viewBox="0 0 16 16">
                              <path fill-rule="evenodd"
                                d="M14 4.5V14a2 2 0 0 1-2 2h-1v-1h1a1 1 0 0 0 1-1V4.5h-2A1.5 1.5 0 0 1 9.5 3V1H4a1 1 0 0 0-1 1v9H2V2a2 2 0 0 1 2-2h5.5L14 4.5ZM3.517 14.841a1.13 1.13 0 0 0 .401.823c.13.108.289.192.478.252.19.061.411.091.665.091.338 0 .624-.053.859-.158.236-.105.416-.252.539-.44.125-.189.187-.408.187-.656 0-.224-.045-.41-.134-.56a1.001 1.001 0 0 0-.375-.357 2.027 2.027 0 0 0-.566-.21l-.621-.144a.97.97 0 0 1-.404-.176.37.37 0 0 1-.144-.299c0-.156.062-.284.185-.384.125-.101.296-.152.512-.152.143 0 .266.023.37.068a.624.624 0 0 1 .246.181.56.56 0 0 1 .12.258h.75a1.092 1.092 0 0 0-.2-.566 1.21 1.21 0 0 0-.5-.41 1.813 1.813 0 0 0-.78-.152c-.293 0-.551.05-.776.15-.225.099-.4.24-.527.421-.127.182-.19.395-.19.639 0 .201.04.376.122.524.082.149.2.27.352.367.152.095.332.167.539.213l.618.144c.207.049.361.113.463.193a.387.387 0 0 1 .152.326.505.505 0 0 1-.085.29.559.559 0 0 1-.255.193c-.111.047-.249.07-.413.07-.117 0-.223-.013-.32-.04a.838.838 0 0 1-.248-.115.578.578 0 0 1-.255-.384h-.765ZM.806 13.693c0-.248.034-.46.102-.633a.868.868 0 0 1 .302-.399.814.814 0 0 1 .475-.137c.15 0 .283.032.398.097a.7.7 0 0 1 .272.26.85.85 0 0 1 .12.381h.765v-.072a1.33 1.33 0 0 0-.466-.964 1.441 1.441 0 0 0-.489-.272 1.838 1.838 0 0 0-.606-.097c-.356 0-.66.074-.911.223-.25.148-.44.359-.572.632-.13.274-.196.6-.196.979v.498c0 .379.064.704.193.976.131.271.322.48.572.626.25.145.554.217.914.217.293 0 .554-.055.785-.164.23-.11.414-.26.55-.454a1.27 1.27 0 0 0 .226-.674v-.076h-.764a.799.799 0 0 1-.118.363.7.7 0 0 1-.272.25.874.874 0 0 1-.401.087.845.845 0 0 1-.478-.132.833.833 0 0 1-.299-.392 1.699 1.699 0 0 1-.102-.627v-.495Zm8.239 2.238h-.953l-1.338-3.999h.917l.896 3.138h.038l.888-3.138h.879l-1.327 4Z" />
                            </svg>
                            } @else {
                            @if (arraytypes?.split('.')[1] == 'png') {
                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
                              class="bi bi-filetype-png" viewBox="0 0 16 16">
                              <path fill-rule="evenodd"
                                d="M14 4.5V14a2 2 0 0 1-2 2v-1a1 1 0 0 0 1-1V4.5h-2A1.5 1.5 0 0 1 9.5 3V1H4a1 1 0 0 0-1 1v9H2V2a2 2 0 0 1 2-2h5.5L14 4.5Zm-3.76 8.132c.076.153.123.317.14.492h-.776a.797.797 0 0 0-.097-.249.689.689 0 0 0-.17-.19.707.707 0 0 0-.237-.126.96.96 0 0 0-.299-.044c-.285 0-.506.1-.665.302-.156.201-.234.484-.234.85v.498c0 .234.032.439.097.615a.881.881 0 0 0 .304.413.87.87 0 0 0 .519.146.967.967 0 0 0 .457-.096.67.67 0 0 0 .272-.264c.06-.11.091-.23.091-.363v-.255H8.82v-.59h1.576v.798c0 .193-.032.377-.097.55a1.29 1.29 0 0 1-.293.458 1.37 1.37 0 0 1-.495.313c-.197.074-.43.111-.697.111a1.98 1.98 0 0 1-.753-.132 1.447 1.447 0 0 1-.533-.377 1.58 1.58 0 0 1-.32-.58 2.482 2.482 0 0 1-.105-.745v-.506c0-.362.067-.678.2-.95.134-.271.328-.482.582-.633.256-.152.565-.228.926-.228.238 0 .45.033.636.1.187.066.348.158.48.275.133.117.238.253.314.407Zm-8.64-.706H0v4h.791v-1.343h.803c.287 0 .531-.057.732-.172.203-.118.358-.276.463-.475a1.42 1.42 0 0 0 .161-.677c0-.25-.053-.475-.158-.677a1.176 1.176 0 0 0-.46-.477c-.2-.12-.443-.179-.732-.179Zm.545 1.333a.795.795 0 0 1-.085.381.574.574 0 0 1-.238.24.794.794 0 0 1-.375.082H.788v-1.406h.66c.218 0 .389.06.512.182.123.12.185.295.185.521Zm1.964 2.666V13.25h.032l1.761 2.675h.656v-3.999h-.75v2.66h-.032l-1.752-2.66h-.662v4h.747Z" />
                            </svg>
                            } @else {
                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
                              class="bi bi-file-earmark" viewBox="0 0 16 16">
                              <path
                                d="M14 4.5V14a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V2a2 2 0 0 1 2-2h5.5L14 4.5zm-3 0A1.5 1.5 0 0 1 9.5 3V1H4a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V4.5h-2z" />
                            </svg>
                            }
                            }
                            }
                            }
                          </div>
                          <div class="d-flex align-items-center text-muted fs-12 me-3">
                            <p class="file-attach-name text-truncate mb-0">{{ arraytypes?.split('.')[0] }}</p>.{{
                            arraytypes?.split('.')[1] }}
                          </div>
                          <a aria-label="view" routerLink="/emailtoticketimageurl/{{ticketData?.ticket?.id}}"
                            [queryParams]="{ 'image': arraytypes }" target="_blank"
                            class="uhelp-attach-acion p-2 rounded border lh-1 me-1 d-flex align-items-center justify-content-center"><i
                              class="fe fe-eye text-muted fs-12"></i></a>
                          <a aria-label="Download" href="javascript:;"
                            (click)="emailtoticketdownload(ticketData?.ticket?.id,arraytypes)"
                            class="uhelp-attach-acion p-2 rounded border lh-1 d-flex align-items-center justify-content-center"
                            download><i class="fe fe-download text-muted fs-12"></i></a>
                        </div>
                      </div>
                      }
                    }
                  }

                </div>
              </div>


            </div>
          </div>

        </div>

        @if (ticketData?.ticket?.ticket_customfield?.length) {
        @for (customfield of ticketData?.ticket?.ticket_customfield; track customfield) {
        @if (customfield.fieldtypes == 'textarea' && customfield?.values?.length) {
        @if (customfield.privacymode == '1') {
        <div class="card">
          <div class="card-header border-0">
            <h4 class="card-title">{{customfield?.fieldnames}}</h4>
          </div>
          <div class="card-body">
            <span>{{customfield?.value}}</span>
          </div>
        </div>
        } @else {
        <div class="card">
          <div class="card-header border-0">
            <h4 class="card-title">{{customfield?.fieldnames}}</h4>
          </div>
          <div class="card-body">
            <span>{{customfield?.values}}</span>
          </div>
        </div>
        }
        }
        }
        }


        <!-- Reply Ticket Display -->

        @if (ticketData?.ticket?.ticketassignmutliples?.length && ticketData?.ticket?.selfassignuser_id == null) {
        @if (notAssigncondition) {
        <app-showticketinclude (employIsWorking)="onemployIsWorking($event)" [setting]="setting" [user]="user"
          [data]="ticketData"></app-showticketinclude>
        } @else {
        @if (user?.roles?.[0]?.name === 'superadmin') {
        <app-showticketinclude (employIsWorking)="onemployIsWorking($event)" [setting]="setting" [user]="user"
          [data]="ticketData"></app-showticketinclude>
        }
        }
        } @else {
        @if (!ticketData?.ticket?.ticketassignmutliples?.length && ticketData?.ticket?.selfassignuser_id != null) {
        @if (ticketData?.ticket?.selfassignuser_id == user?.id) {
        <app-showticketinclude (employIsWorking)="onemployIsWorking($event)" [setting]="setting" [user]="user"
          [data]="ticketData"></app-showticketinclude>
        } @else {
        @if (user?.roles?.[0]?.name === 'superadmin') {
        <app-showticketinclude (employIsWorking)="onemployIsWorking($event)" [setting]="setting" [user]="user"
          [data]="ticketData"></app-showticketinclude>
        }
        }
        } @else {
        <app-showticketinclude (employIsWorking)="onemployIsWorking($event)" [setting]="setting" [user]="user"
          [data]="ticketData"></app-showticketinclude>
        }
        }

        <!-- {{-- End Reply Ticket Display --}} -->



        <!-- {{-- Comments Display --}} -->
        @if (!ticketData) {
        <div class="card">
          <div class="card-header">
            <div class="d-sm-flex d-block w-100">
              <div class="w-10">
                <h4 class="card-title">
                  <span class="line-skeleton w-100 d-block mb-2"></span>
                </h4>
              </div>
            </div>
          </div>
          <div class="suuport-convercontentbody">
            <div id="spruko_loaddata">
              <div class="card-body">
                <div class="d-lg-flex">
                  <span class="icon-skeleton d-block mb-2  me-3"></span>
                  <div class="d-flex w-100">
                    <div class="media-body w-100">
                      <h5 class="mt-1 mb-1 font-weight-semibold d-flex w-20">
                        <span class="my-auto line-skeleton w-10 d-block"></span>
                        <span class="badge badge-primary-light badge-md ms-2 w-40">
                          <span class="line-skeleton w-100 d-block m-0 my-1"></span></span>
                      </h5>
                      <p class="line-skeleton w-75 d-block mb-2"></p>
                      <p class="line-skeleton w-75 d-block mb-2"></p>
                      <p class="line-skeleton w-75 d-block mb-2"></p>
                    </div>
                  </div>
                </div>
              </div><!-- {{--Admin Reply status end--}} -->
              <div class="card-body">
                <div class="d-lg-flex">
                  <span class="icon-skeleton d-block mb-2  me-3"></span>
                  <div class="d-flex w-100">
                    <div class="media-body w-100">
                      <h5 class="mt-1 mb-1 font-weight-semibold d-flex w-20">
                        <span class="my-auto line-skeleton w-10 d-block"></span>
                        <span class="badge badge-primary-light badge-md ms-2 w-40">
                          <span class="line-skeleton w-100 d-block m-0 my-1"></span></span>
                      </h5>
                      <p class="line-skeleton w-75 d-block mb-2"></p>
                      <p class="line-skeleton w-75 d-block mb-2"></p>
                      <p class="line-skeleton w-75 d-block mb-2"></p>
                    </div>
                  </div>
                </div>
              </div><!-- {{--Admin Reply status end--}} -->
              <div class="card-body">
                <div class="d-lg-flex">
                  <span class="icon-skeleton d-block mb-2  me-3"></span>
                  <div class="d-flex w-100">
                    <div class="media-body w-100">
                      <h5 class="mt-1 mb-1 font-weight-semibold d-flex w-20">
                        <span class="my-auto line-skeleton w-10 d-block"></span>
                        <span class="badge badge-primary-light badge-md ms-2 w-40">
                          <span class="line-skeleton w-100 d-block m-0 my-1"></span></span>
                      </h5>
                      <p class="line-skeleton w-75 d-block mb-2"></p>
                      <p class="line-skeleton w-75 d-block mb-2"></p>
                      <p class="line-skeleton w-75 d-block mb-2"></p>
                    </div>
                  </div>
                </div>
              </div><!-- {{--Admin Reply status end--}} -->
            </div>
          </div>
        </div>
        }
        @if (ticketData?.comments?.data?.length) {
        <div class="card">
          <div class="card-header">
            <h4 class="card-title">{{'Conversations' | translate}}</h4>
            @if (permission?.includes('Article Create') && permission?.includes('Article Access')) {
            @if (ticketData?.ticket?.status == 'Closed') {
            <button type="button" (click)="tickettoarticle(ticketData?.ticket?.enc_ticket_id)"
              class="btn btn-sm btn-secondary me-2 ms-auto d-inline-flex align-items-center">
              <i class="feather feather-book me-3 fs-18 my-auto text-muted"
                [ngbTooltip]="'Create Article' | translate"></i>
              <span>{{'Ticket To Article' | translate}}</span>
            </button>
            }
            }
          </div>
          <div class="suuport-convercontentbody">
            <div id="spruko_loaddata">
              <app-conversations [setting]="setting" [user]="user" [ticketDataParent]="ticketData"
                [languages]="languages" [permissions]="permission" [comments]="comment"></app-conversations>
            </div>
          </div>
        </div>
        }
        <div #commentsClose>
          @if (isLoadingComments) {
          <i class="fe fe-loader"></i>
          }
        </div>
        <!-- {{-- End Comments Display --}} -->

      </div>
      <div class="col-xl-3 col-lg-12 col-md-12">

        <!-- Ticket Information -->
        @if (ticketData?.ticket?.ticketassignmutliples?.length && ticketData?.ticket?.selfassignuser_id == null) {
        @if ((user?.roles?.[0]?.name == 'superadmin') || notAssigncondition ) {
        <app-ticketinfooter [user]="user" [permissions]="permission" [data]="ticketData"></app-ticketinfooter>
        } @else {
        <app-ticketinfo [user]="user" [ticketDataParent]="ticketData"></app-ticketinfo>
        }
        } @else {
        @if (!ticketData?.ticket?.ticketassignmutliples?.length && ticketData?.ticket?.selfassignuser_id != null) {
        @if ((user?.roles?.[0]?.name == 'superadmin') || (ticketData?.ticket?.selfassignuser_id == user?.id) ) {
        <app-ticketinfooter [user]="user" [permissions]="permission" [data]="ticketData"></app-ticketinfooter>
        } @else {
        <app-ticketinfo [user]="user" [ticketDataParent]="ticketData"></app-ticketinfo>
        }
        } @else {
        <app-ticketinfooter [user]="user" [permissions]="permission" [data]="ticketData"></app-ticketinfooter>
        }
        }
        <!-- Ticket Information -->

        <!-- Ticket Activity Details -->
        <div class="card">
          <div class="card-header border-bottom-0">
            <h3 class="card-title">{{'Assign Activity' | translate}}</h3>
            <div class="card-options">
              <a class="btn btn-sm btn-outline-primary"
                routerLink="/admin/tickethistory/{{ticketData?.ticket?.enc_ticket_id}}" target="_blank"
                rel="noopener noreferrer">{{'View History' | translate}}</a>
            </div>
          </div>
          <div class="card-body">
            <ul class="list-unstyled mb-0 ticket-activity">
              @if (!ticketData) {
              <span class="line-skeleton w-100 d-block mx-auto mb-2"></span>
              }
              @if (!ticketData) {
              <span class="line-skeleton w-100 d-block mx-auto mb-2"></span>
              }
              @if (!ticketData) {
              <span class="line-skeleton w-100 d-block mx-auto mb-2"></span>
              }
              @if (!ticketData?.ticket?.user_id && ticketData?.ticket?.cust) {
              <li class="list-item border-bottom-0">
                <div class="d-flex">
                  <div class="me-3">
                    <span class="mt-1">
                      <img [src]="ticketData?.ticket?.cust.profileimage || './assets/images/user-profile.png'"
                        class="avatar brround  brround" alt="{{ticketData?.ticket?.cust.profileimage}}" loading="lazy"
                        decoding="async">
                    </span>
                  </div>
                  <div>
                    <p class="mb-0 text-muted fs-12">{{'Created By' | translate}}</p>
                    <p class="fs-13 mb-0">
                      <a href="javascript:void(0);"
                        class="text-dark font-weight-semibold">{{ticketData?.ticket?.cust?.username}}</a>
                      <span class="fs-12 text-muted">({{ticketData?.ticket?.cust?.userType}})</span>
                    </p>
                  </div>
                  <div class="datatime fs-11 mb-0 ms-auto text-end">
                    <div class="w-100 mb-1">
                      {{ticketData?.ticket?.created_at | date : ticketData?.setting?.original?.date_format : timezone}}
                    </div>
                    <div class="w-100">
                      {{ticketData?.ticket?.created_at | date : ticketData?.setting?.original?.time_format : timezone}}
                    </div>
                  </div>
                </div>
              </li>
              }
              @if (ticketData?.ticket?.user_id && ticketData?.ticket?.users) {
              <li class="list-item border-bottom-0">
                <div class="d-flex">
                  <div class="me-3">
                    <span class="mt-1">
                      <img [src]="ticketData?.ticket?.users?.profileimage || './assets/images/user-profile.png'"
                        class="avatar brround  brround" alt="{{ticketData?.ticket?.users?.profileimage}}" loading="lazy"
                        decoding="async">
                    </span>
                  </div>
                  <div>
                    <p class="mb-0 text-muted fs-12">{{'Created By' | translate}}</p>
                    <p class="fs-13 mb-0">
                      <a href="javascript:void(0);"
                        class="text-dark font-weight-semibold">{{ticketData?.ticket?.users?.name}}</a>
                      @if (ticketData?.usersRoles?.length) {
                      <span class="fs-12 text-muted">({{ticketData?.usersRoles[0].name}})</span>
                      }
                    </p>
                  </div>
                  <div class="datatime fs-11 mb-0 ms-auto text-end">
                    <div class="w-100 mb-1">
                      {{ticketData?.ticket?.created_at | date : ticketData?.setting?.original?.date_format : timezone}}
                    </div>
                    <div class="w-100">
                      {{ticketData?.ticket?.created_at | date : ticketData?.setting?.original?.time_format : timezone}}
                    </div>
                  </div>
                </div>
              </li>
              }
              @if (ticketData?.ticket?.selfassignuser_id && ticketData?.ticket?.selfassign) {
              <li class="list-item border-bottom-0">
                <div class="d-flex">
                  <div class="me-3">
                    <span class="mt-1">
                      <img [src]="ticketData?.ticket?.selfassign?.profileimage || './assets/images/user-profile.png'"
                        class="avatar brround" alt="{{ticketData?.ticket?.selfassign?.profileimage}}" loading="lazy"
                        decoding="async">
                    </span>
                  </div>
                  <div>
                    <p class="fs-13 mb-0">
                      <a href="javascript:void(0);"
                        class="text-dark font-weight-semibold">{{ticketData?.ticket?.selfassign?.name}}</a>
                      @if (ticketData?.selfassignRoles?.length) {
                      <span class="fs-12 text-muted">({{ticketData?.selfassignRoles[0].name}})</span>
                      }
                    </p>
                    <p class="mb-0 fs-12 text-success">{{'Self Assigned' | translate}}</p>
                  </div>
                  <div class="datatime fs-11 mb-0 ms-auto text-end">
                    <div class="w-100 mb-1">
                      {{ticketData?.ticket?.updated_at | date : ticketData?.setting?.original?.date_format : timezone}}
                    </div>
                    <div class="w-100">
                      {{ticketData?.ticket?.updated_at | date : ticketData?.setting?.original?.time_format : timezone}}
                    </div>
                  </div>
                </div>
              </li>
              }
              @if (!ticketData?.ticket?.selfassignuser_id && ticketData?.ticket?.myassignuser) {
              <li class="list-item border-bottom-0">
                <div class="d-flex">
                  <div class="me-3">
                    <span class="mt-1">
                      <img [src]="ticketData?.ticket?.myassignuser?.profileimage || './assets/images/user-profile.png'"
                        class="avatar brround" alt="{{ticketData?.ticket?.myassignuser?.profileimage}}" loading="lazy"
                        decoding="async">
                    </span>
                  </div>
                  <div>
                    <p class="fs-13 mb-0">
                      <a href="javascript:void(0);"
                        class="text-dark font-weight-semibold">{{ticketData?.ticket?.myassignuser?.name}}</a>
                      @if (ticketData?.myassignuserRoles?.length) {
                      <span class="fs-12 text-muted">({{ticketData?.myassignuserRoles[0].name}})</span>
                      }
                    </p>
                    <p class="mb-0 fs-12 text-success font-weight-semibold">{{'Assigner' |
                      translate}}</p>
                  </div>
                  <div class="datatime fs-11 mb-0 ms-auto text-end">
                    <div class="w-100 mb-1">
                      {{ticketData?.ticket?.updated_at | date : ticketData?.setting?.original?.date_format : timezone}}
                    </div>
                    <div class="w-100">
                      {{ticketData?.ticket?.updated_at | date : ticketData?.setting?.original?.time_format : timezone}}
                    </div>
                  </div>
                </div>
              </li>
              }
              @if (ticketData?.ticketassignmutliples?.length) {
              @for (toassignuser of ticketData?.ticketassignmutliples; track toassignuser) {
              <li class="list-item border-bottom-0">
                <div class="d-flex">
                  <div class="me-3">
                    <span class="mt-1">
                      <img [src]="toassignuser?.profileimage || './assets/images/user-profile.png'"
                        class="avatar brround" alt="{{toassignuser?.profileimage}}" loading="lazy" decoding="async">
                    </span>
                  </div>
                  <div>
                    <p class="fs-13 mb-0">
                      <a href="javascript:void(0);" class="text-dark font-weight-semibold">{{toassignuser?.name}}</a>.
                      @if (toassignuser?.role) {
                      <span class="fs-12 text-muted">({{toassignuser?.role}})</span>
                      }
                    </p>
                    <p class="mb-0 fs-12 text-primary">{{'Assignee' | translate}}</p>
                  </div>
                  <div class="datatime fs-11 mb-0 ms-auto text-end">
                    <div class="w-100 mb-1">
                      {{ticketData?.ticket?.updated_at | date : ticketData?.setting?.original?.date_format : timezone}}
                    </div>
                    <div class="w-100">
                      {{ticketData?.ticket?.updated_at | date : ticketData?.setting?.original?.time_format : timezone}}
                    </div>
                  </div>
                </div>
              </li>
              }
              }
              @if (ticketData?.ticket?.closedby_user) {
              <li class="list-item border-bottom-0">
                <div class="d-flex">
                  <div class="me-3">
                    <span class="mt-1">
                      <img [src]="ticketData?.ticket?.closedusers?.profileimage || './assets/images/user-profile.png'"
                        class="avatar brround" alt="{{ticketData?.ticket?.closedusers?.image}}" loading="lazy"
                        decoding="async">
                    </span>
                  </div>
                  <div>
                    <p class="fs-13 mb-0">
                      <a href="javascript:void(0);"
                        class="text-dark font-weight-semibold">{{ticketData?.ticket?.closedusers?.name}}</a>
                      @if (ticketData?.closedusersRoles?.length) {
                      <span class="fs-12 text-muted">({{ticketData?.closedusersRoles[0].name}})</span>
                      }
                      <svg xmlns="http://www.w3.org/2000/svg" class="svg-success" [ngbTooltip]="'Solved' | translate"
                        viewBox="0 0 24 24">
                        <path opacity="0.2"
                          d="M10.3125,16.09375a.99676.99676,0,0,1-.707-.293L6.793,12.98828A.99989.99989,0,0,1,8.207,11.57422l2.10547,2.10547L15.793,8.19922A.99989.99989,0,0,1,17.207,9.61328l-6.1875,6.1875A.99676.99676,0,0,1,10.3125,16.09375Z"
                          opacity=".99" />
                        <path
                          d="M12,2A10,10,0,1,0,22,12,10.01146,10.01146,0,0,0,12,2Zm5.207,7.61328-6.1875,6.1875a.99963.99963,0,0,1-1.41406,0L6.793,12.98828A.99989.99989,0,0,1,8.207,11.57422l2.10547,2.10547L15.793,8.19922A.99989.99989,0,0,1,17.207,9.61328Z" />
                      </svg>
                    </p>
                    <p class="mb-0 fs-12 text-secondary">{{'Closed' | translate}}</p>
                  </div>
                  <div class="datatime fs-11 mb-0 ms-auto text-end">
                    <div class="w-100 mb-1">
                      {{ticketData?.ticket?.updated_at | date : ticketData?.setting?.original?.date_format : timezone}}
                    </div>
                    <div class="w-100">
                      {{ticketData?.ticket?.updated_at | date : ticketData?.setting?.original?.time_format : timezone}}
                    </div>
                  </div>
                </div>
              </li>
              }
            </ul>
          </div>
        </div>
        <!-- End Ticket Activity Details -->
        <!-- Customer Details -->
        <div class="card">
          <div class="card-header  border-0">
            <div class="card-title">{{'Customer Details' | translate}}</div>
            @if (ticketData?.custsimillarticket > 1) {
            <div class="card-options">
              <a class="btn btn-sm btn-outline-primary"
                routerLink="/admin/customer/tickethistory/{{ticketData?.ticket?.cust?.enc_id}}" target="_blank"
                rel="noopener noreferrer">{{'Previous Tickets' |
                translate}}</a>
            </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>
                <img [src]="ticketData?.ticket?.cust?.profileimage || './assets/images/user-profile.png'"
                  class="brround avatar-xxl" alt="{{ticketData?.ticket?.cust?.profileimage}}" loading="lazy"
                  decoding="async">
              </div>
              <div class="text-dark">
                @if (ticketData?.ticket?.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">
                  {{ticketData?.ticket?.cust?.username}}
                  @if (!ticketData) {
                  <span class="line-skeleton w-50 d-block mx-auto mb-2"></span>
                  }
                </h5>
                <h6 class="mb-1 mt-2 text-muted fw-normal">{{ticketData?.ticket?.cust?.firstname}}
                  {{ticketData?.ticket?.cust?.lastname}}</h6>
                <small class="text-muted ">
                  {{ ticketData?.ticket?.cust?.email }}
                  @if (!ticketData) {
                  <span class="line-skeleton w-50 d-block mx-auto mb-2"></span>
                  }
                </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>
                      @if(ticketData?.ticket?.cust?.last_login_ip){
                        <span class="font-weight-semibold">{{ ticketData?.ticket?.cust?.last_login_ip }}</span>
                      }
                      @if (!ticketData) {
                        <span class="line-skeleton w-100 d-block mx-auto mb-2"></span>
                      }
                    </td>
                  </tr>
                  <tr>
                    <td>
                      <span class="w-50">{{'Mobile Number'| translate}}</span>
                    </td>
                    <td>:</td>
                    <td>
                      @if(ticketData?.ticket?.cust?.phone){
                      <span class="font-weight-semibold">{{ticketData?.ticket?.cust?.phone}}</span>
                      }
                      @if (!ticketData) {
                      <span class="line-skeleton w-100 d-block mx-auto mb-2"></span>
                      }
                    </td>
                  </tr>
                  <tr>
                    <td>
                      <span class="w-50">{{'Country'| translate}}</span>
                    </td>
                    <td>:</td>
                    <td>
                      @if (!ticketData) {
                      <span class="line-skeleton w-100 d-block mx-auto mb-2"></span>
                      }
                      @if(ticketData?.ticket?.cust?.country){
                      <span class="font-weight-semibold">{{ ticketData?.ticket?.cust?.country}}</span>
                      }
                    </td>
                  </tr>
                  <tr>
                    <td>
                      <span class="w-50">{{'Timezone'| translate}}</span>
                    </td>
                    <td>:</td>
                    <td>
                      @if(ticketData?.ticket?.cust?.timezone){
                      <span class="font-weight-semibold">{{ticketData?.ticket?.cust?.timezone}}</span>
                      }
                      @if (!ticketData) {
                      <span class="line-skeleton w-100 d-block mx-auto mb-2"></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 class="card-options">
              @if (ticketData?.ticket?.status != 'Closed') {
              <a aria-label="create" href="javascript:void(0)" class="btn btn-secondary" (click)="createnote(notemodel)"
                id="create-new-note"><i class="feather feather-plus"></i></a>
              }
            </div>
          </div>
          @if (ticketData?.ticketnote?.length) {
          <div class="card-body  item-user">
            <div id="refresh">
              @for (note of ticketData?.ticketnote; track note; let i = $index) {
              <div class="alert alert-light-warning ticketnote" id="ticketnote_{{note?.id}}" role="alert">
                @if (note?.user_id == user?.id || user?.roles[0].name == 'superadmin') {
                <button aria-label="Delete" type="button" [disabled]="sendingResponse['deleteNote'+i]"
                  class="ticketnotedelete" (click)="deleteNote(note?.id, 'deleteNote'+i)">
                  <i class="feather feather-x"></i>@if (sendingResponse['deleteNote'+i]) {
                  <i class="fa fa-spinner fa-spin mx-1"></i>
                  }
                </button>
                }
                <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 {
          <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>
              @if (ticketData?.ticket?.status != 'Closed' && ticketData?.ticket?.status != 'Suspend') {
              <span class="text-muted">{{'Add your notes here' | translate}}</span>
              }
            </div>
          </div>
          }
        </div>
        <!-- End ticket note  -->


        @if (setting?.cust_or_tick_violation == 'yes') {

        <!--ticke violation  -->
        <div class="card">
          <div class="card-header  border-0">
            <div class="card-title">{{'Ticket Violation' | translate}}</div>
            <div class="card-options">
              @if (ticketData?.ticket?.status != 'Closed') {
              <a aria-label="create" href="javascript:void(0)" class="btn btn-secondary"
                (click)="violationModelFn(violationmodel)" id="create-new-note"><i class="feather feather-plus"></i></a>
              }
            </div>
          </div>
          @if (ticketData?.ticket?.ticketviolation?.length) {
          <div class="card-body  item-user">
            <div id="refresh">
              @for (violation of ticketData?.ticket?.ticketviolation; track violation; let i = $index) {
              <div class="alert alert-light-warning ticketnote" id="ticketnote_{{violation?.id}}" role="alert">
                @if (violation?.user_id == user?.id || user?.roles[0].name == 'superadmin') {
                <button aria-label="Delete" type="button" [disabled]="sendingResponse['deleteViolation'+i]"
                  class="ticketnotedelete" (click)="deleteViolation(violation?.id, 'deleteViolation'+i)">
                  <i class="feather feather-x"></i>@if (sendingResponse['deleteViolation'+i]) {
                  <i class="fa fa-spinner fa-spin mx-1"></i>
                  }
                </button>
                }
                @if (violation?.user_id == user?.id || user?.roles[0].name == 'superadmin') {
                <a aria-label="Edit" href="javascript:void(0)" class=""
                  (click)="violationModelFn(violationmodel, violation)">
                  <i class="feather feather-edit"></i>
                </a>
                }
                <p class="m-0">{{ violation.ticketviolation}}</p>
                <p class="text-end mb-0">
                  <small>
                    <i><b>{{violation?.users?.name}}</b>
                      @if (violation?.users?.roles?.length) {
                      ({{violation?.users?.roles[0].name}})
                      }
                    </i>
                  </small>
                </p>
              </div>
              }
            </div>
          </div>
          } @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>
              @if (ticketData?.ticket?.status != 'Closed' && ticketData?.ticket?.status != 'Suspend') {
              <span class="text-muted">{{'Add your notes here' | translate}}</span>
              }
            </div>
          </div>
          }
        </div>
        <!-- End ticket violation  -->
        }
      </div>
    </div>
  </div>
</div>
<ng-template #notemodel let-modal>
  <div class="modal-header">
    <h4 class="modal-title" id="modal-basic-title">{{'Add Note' | translate}}</h4>
    <button type="button" class="btn-close" aria-label="Close" (click)="modal.dismiss('Cross click')">
    </button>
  </div>
  <form #noteModel="ngForm" (ngSubmit)="createNote(noteModel, 'createNote')">

    <div class="modal-body">
      <div class="form-group">
        <label class="form-label">{{'Note' | translate}} :</label>
        <textarea class="form-control" rows="4" name="ticketnote" id="note" ngModel required></textarea>
      </div>
    </div>
    <div class="modal-footer">
      <button type="button" class="btn btn-danger" (click)="modal.dismiss('Close click')">{{'Close' |
        translate}}</button>
      <button [disabled]="noteModel.invalid || sendingResponse['createNote']" type="submit" class="btn btn-primary"
        (click)="modal.close('Save click')">{{'Save' |
        translate}}@if (sendingResponse['createNote']) {
        <i class="fa fa-spinner fa-spin mx-1"></i>
        }</button>
    </div>
  </form>
</ng-template>
<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>
<ng-template #violationmodel let-modal>
  <div class="modal-header">
    <h4 class="modal-title">{{ violation ? 'Edit Violation Note' : 'Violation Note' | translate | titlecase}}</h4>
    <button type="button" class="btn-close" aria-label="Close" (click)="modal.dismiss('Cross click')">
    </button>
  </div>
  <div class="modal-body">
    <form #voilationForm="ngForm" (ngSubmit)="voilating(voilationForm, 'viloationBtn')">
      <div class="modal-body">

        <div class="form-group">
          <label class="form-label">{{'Violation:' | translate | titlecase}}</label>
          <textarea class="form-control" name="ticketviolation" id="ticketviolation" aria-multiline="true"
            [ngModel]="violation"></textarea>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-danger" (click)="modal.dismiss('Close click')">{{'Close' |
          translate}}</button>
        <button [disabled]="sendingResponse['viloationBtn']" type="submit" class="btn btn-primary"
          (click)="modal.close('Save click')">{{ violation ? 'Update' : 'Save' | translate}}
          @if (sendingResponse['viloationBtn']) {
          <i class="fa fa-spinner fa-spin mx-1"></i>
          }</button>
      </div>
    </form>
  </div>
</ng-template>


<ng-template #translateins let-modal>
  <div class="modal-header">
    <h5 class="modal-title">{{'Translate'|translate}}</h5>
    <button type="button" aria-label="close" class="btn-close" (click)="modal.dismiss('Cross click')">
    </button>
  </div>
  <div class="modal-body">
    <form #translate="ngForm" (ngSubmit)="translateFn(translate, 'translate')">
      <ng-select class="form-control custom-select form-select" [items]="languages"
        [placeholder]="'Select Language' | translate" bindLabel="name" [multiple]="false" [searchable]="true"
        dropdownPosition="auto" bindValue="id" name="languages" [ngModel]="null" [virtualScroll]="true">
        <ng-template ng-option-tmp let-item="item" let-search="searchTerm">
          <div><span>{{item.name}}</span></div>
        </ng-template>
      </ng-select>
      <div class="btn-list mt-1">
        <button type="submit" [disabled]="translate.invalid || sendingResponse['translate']"
          class="btn btn-secondary">{{"Update" | translate}}@if (sendingResponse['translate']) {
          <i class="fa fa-spinner fa-spin mx-1"></i>
          }</button>
      </div>
    </form>
  </div>
</ng-template>