<div class="main-chat-area main-chat-area-new bg-white">
  <div id="main-chat-content">
    @if(livechatcustomerData){
      <div
        class="d-flex align-items-center py-2 px-3 rounded border-bottom bg-white mb-3"
        id="operator-conversation-Info"
        [attr.data-id]="custId"
      >
        <div class="me-2 lh-1">
          <span
            class="avatar avatar-md brround"
            style="background-image: url(uploads/profile/user-profile.png)"
          >
          </span>
        </div>
        <div class="flex-fill">
          <p class="mb-0 fw-semibold fs-14">
            <a
              href="javascript:void(0);"
              class="chatnameperson responsive-userinfo-open"
            >
              {{ livechatcustomerData.username }}
            </a>
            @if(livechatcustomerData.livechatTickets){
            <a
              class="badge badge-md bg-primary-transparent"
              routerLink="/admin/live-chat/livechatTickets/{{livechatcustomerData.gustId}}"
              >{{ livechatcustomerData.livechatTickets }} {{"Tickets Created" | translate}}</a
            >
            }
          </p>
          @if(livechatcustomerData?.liveChatCustomerOnlineUsers?.split(',').includes(custId)){
          <p class="text-green mb-0 chatpersonstatus">
            {{ "online" | translate }}
          </p>
          } @else {
          <p class="text-muted mb-0 chatpersonstatus">
            {{ "offline" | translate }}
          </p>
          }
        </div>
        <div class="d-flex flex-wrap rightIcons">
          <div class="dropdown ms-2" ngbDropdown container="body">
            <button
              aria-label="button"
              class="btn btn-icon btn-outline-light my-1 btn-wave waves-light waves-effect waves-light no-caret"
              type="button"
              
              aria-expanded="false"
              ngbDropdownToggle
            >
              <i class="ri-more-2-fill"></i>
            </button>
            <ul ngbDropdownMenu>
              @if(livechatcustomerData?.status != "solved"){
                @if(livechatcustomerData?.engage_conversation != ""){
                  @if(livechatcustomerData?.mark_as_unread?.includes(AuthId)){
                  <li>
                    <a
                      (click)="removeUserFromUnread(livechatcustomerData?.id)"
                      href="javascript:;"
                      ngbDropdownItem
                      class="markAsreadBtn"
                      href="javascript:void(0);"
                      ><i class="ri-chat-check-line align-start me-2 fs-18"></i>
                      {{ "Mark As Read" | translate }}
                    </a>
                  </li>
                  }@else{
                    <li>
                      <a
                        (click)="conversationUnread(livechatcustomerData?.id)"
                        href="javascript:;"
                        ngbDropdownItem
                        class="markAsUnreadBtn"
                        href="javascript:void(0);"
                        ><i class="ri-chat-check-line align-start me-2 fs-18"></i
                        >{{ "Mark As Unread" | translate }}</a
                      >
                    </li>
                  }
                  <li>
                    <a
                      (click)="markAsSolved(livechatcustomerData?.id)"
                      href="javascript:;"
                      ngbDropdownItem
                      class=""
                      href="javascript:void(0);"
                      ><i class="ri-chat-smile-line align-start me-2 fs-18"></i
                      >{{ "Mark As Solved" | translate }}</a
                    >
                  </li>
                }
                @if(livechatcustomerData?.engage_conversation?.length > 1){
                  <li>
                    <a
                      (click)="conversationLeave(livechatcustomerData?.id)"
                      ngbDropdownItem
                      href="javascript:;"
                    >
                      <i class="ri-chat-delete-line align-start me-2 fs-18"></i>
                      {{ "Leave" | translate }}
                    </a>
                  </li>
                }
                <li
                  (click)="openAssignModel(reassign)"
                  class="reAssignModalTrigger"
                  data-bs-toggle="modal"
                  data-bs-target="#staticBackdrop"
                >
                  <a ngbDropdownItem class="" href="javascript:void(0);"
                    ><i class="ri-chat-upload-line align-start me-2 fs-18"></i
                    >{{ "Re-Assign" | translate }}</a
                  >
                </li>  
              }
              <li>
                <a
                  ngbDropdownItem
                  class=""
                  (click)="
                    livechatConversationDelete(livechatcustomerData['cust_unique_id'])
                  "
                >
                  <i class="ri-chat-delete-line align-start me-2 fs-18"></i
                  >{{ "Delete" | translate }}</a
                >
              </li> 
            </ul>
          </div>
        </div>
      </div>
      <ul #dynamicList
        class="list-unstyled chat-content overflow-auto"
        id="operator-conversation"
        [attr.operator-id]="custId"
      >
        @if(!livechatcustomerData.deletedMessage) {
          <li class="chat-day-label">
            <span>
              {{ formatDateString(livechatcustomerData.created_at) }}
              {{ updateValue(livechatcustomerData.created_at) }}
            </span>
          </li>
        @for(val of parsedChatFlowMessages; track val){ 
          @if(val){
            @if(val.authMessage == "agent"){
              <app-agent-message 
                [data]="val"
                [autoUserInfo]="autoUserInfo"
              ></app-agent-message>
            } @else {
              <app-customer-message
                [data]="val"
              ></app-customer-message>
            } 
          } 
        } 
        }

        <!-- // For the Agent Messages -->
        @if(chatData?.livechatdata){ 
          @for(chatdata of chatData.livechatdata; track
        chatdata){ 
            @if(currentDate != formatDateString(chatdata?.created_at)){
              <li class="chat-day-label">
                <span>
                  {{ formatDateString(chatdata.created_at) }}
                </span>
              </li>
              {{
                updateValue(chatdata.created_at)
              }}
            }
            <!-- // For the Agent Messages -->
            @if(chatdata?.livechat_cust_id && chatdata?.status != 'comment' && chatdata.message_type != "feedBack"){
              <app-customer-message
                [data]="chatdata"
              ></app-customer-message>
            } @else{ 
              @if(chatdata.status != 'comment' && chatdata.message_type != "feedBack"){
              <app-agent-message
                [data]="chatdata"
                [autoUserInfo]="autoUserInfo"
              ></app-agent-message>
              } 
              @if(chatdata.status == 'comment' && chatdata.message_type !=
              "feedBack"){
              <app-comment-message
                [data]="chatdata"
                [autoUserInfo]="autoUserInfo"
              ></app-comment-message>
              } 
              @if(chatdata.message_type == "feedBack"){
              <app-feedback-comment [data]="chatdata"></app-feedback-comment>
              } 
            }
          } 
        } 
        @for (list of typingList; let i = $index; track i) {
          
        
          @if(!list?.admin){
    
            <li class="chat-item-start">
              <div class="chat-list-inner">
              <div class="chat-user-profile">
                <span class="avatar avatar-md brround" >
                  <span class="new-chat-user-letter">{{list?.userName.slice(0, 1)}}</span>
                </span>
              </div>
              <div class="ms-3">
                <span class="chatting-user-info">
                  <span class="chatnameperson">{{list?.userName}}</span>
                  <!-- <span class="msg-sent-time" >{{formatTime(customerData?.updated_at)}}</span> -->
                </span>
                <div class="main-chat-msg">
                  <div class="d-flex">
                    <p class="mb-0" class="cust-message">{{list?.msg}}</p>
                    <b class="ms-3">{{list?.typing ? ' Typing...' : 'TypingEnd'}}</b>
                  </div>
                </div>
              </div>
            </div>
          </li>
          }
          @else if(list?.userId != AuthId){
    
            <li class="chat-item-start">
              <div class="chat-list-inner">
              <div class="chat-user-profile">
                <span class="avatar avatar-md brround" >
                  <span class="new-chat-user-letter">{{list?.userName.slice(0, 1)}}</span>
                </span>
              </div>
              <div class="ms-3">
                <span class="chatting-user-info">
                  <span class="chatnameperson">{{list?.userName}}</span>
                  <!-- <span class="msg-sent-time" >{{formatTime(customerData?.updated_at)}}</span> -->
                </span>
                <div class="main-chat-msg">
                  <div class="d-flex">
                    <p class="mb-0" class="cust-message">{{list?.msg}}</p>
                    <b class="ms-3">{{list?.typing ? ' Typing...' : 'TypingEnd'}}</b>
                  </div>
                </div>
              </div>
            </div>
          </li>
          }
        }
      </ul>
      

      <div class="chat-footer bg-transparent shadow-none">
          @if(!engaged){
              <div class="chat-reply-area flex-fill text-center engageConversation" #engageConversation>
                  <button type="button" (click)="engageChat()"
                      class="btn btn-primary d-flex justify-content-center align-items-center mx-auto">{{'Engage in the conversation' | translate}} <i class="ri-discuss-line ms-1"></i></button>
              </div>
          }@else{
              <div class="chat-reply-area flex-fill textareaDiv" #textareaDiv>
                  @if(!isChat){
                  <form
                  #createLivechatTicket="ngForm"
                  id="createLivechatTicket"
                  (ngSubmit)="
                      createLivechatTicketFn(
                      createLivechatTicket,
                      'livechatConversationReassign'
                      )
                  "
                  >
                  <div class="form-group create-ticket">
                      <label for="livechatTicketSubject" class="form-label">
                      {{ "Subject" | translate }}
                      <span class="text-red">*</span>
                      </label>
                      <input
                      type="text"
                      class="form-control"
                      id="livechatTicketSubject"
                      name="subject"
                      ngModel
                      placeholder="Enter Ticket Subject" #subject="ngModel" #subjectField
              [class.is-invalid]="subject.invalid && subject.touched" required
                      />
            <small class="text-muted float-end mt-1  text-field" [class.is-invalid]="subjectField.value.length >= setting?.TICKET_CHARACTER" id="subjectmaxtext">{{"Maximum" | translate}} <b>
            {{setting?.TICKET_CHARACTER}} </b> {{"Characters" | translate}}</small>
                  </div>

                  <div class="form-group">
                      <!-- <div class="row"> -->
                      <!-- <div class="col-md-2"> -->
                          <label class="form-label mb-0 mt-2"
                          >{{ "Category" | translate
                          }}<span class="text-red">*</span></label
                          >
                      <!-- </div>
                      <div class="col-md-10"> -->
                          <ng-select
                          class="form-control"
                          [items]="data?.categories"
                          #maincategory
                          [placeholder]="'Select category' | translate"
                          [virtualScroll]="true"
                          bindLabel="name"
                          [multiple]="false"
                          [loading]="!data?.categories"
                          [searchable]="true"
                          dropdownPosition="auto"
                          bindValue="id"
                          name="category"
                          (load)="categorychange($event)"
                          (change)="categorychange($event)"
                          [ngModel]="null"
                          #category="ngModel"
                          [class.is-invalid]="category.invalid && category.touched"
                          required
                          >
                          <ng-template
                              ng-option-tmp
                              let-item="item"
                              let-search="searchTerm"
                          >
                              <div>
                              <span>{{ item?.name }}</span>
                              </div>
                          </ng-template>
                          </ng-select>
                          @if ((category.invalid && category.touched) || category.dirty) {
                          <div>
                          @if (category.errors?.['required']) {
                          <small class="text-danger">{{
                              "Category is required" | translate
                          }}</small>
                          }
                          </div>
                          }
                      <!-- </div> -->
                      <!-- </div> -->
                  </div>

                  @if (haspurchasecode.length) {
                  <div class="form-group" id="envatopurchase">
                      <!-- <div class="row"> -->
                      <!-- <div class="col-md-2"> -->
                          <label class="form-label"
                          >{{ "Envato Purchase Code" | translate }}
                          <span class="text-red">*</span></label
                          >
                      <!-- </div>
                      <div class="col-md-10"> -->
                          <input
                          type="text"
                          class="form-control"
                          (keyup)="envatoVerify($event.target, 'createTicket')"
                          name="envato_id"
                          [readOnly]="licencekey ? true : false"
                          #envatopurchasecode="ngModel"
                          [class.is-invalid]="
                              envatopurchasecode.invalid && envatopurchasecode.touched
                          "
                          required
                          ngModel="{{ licencekey }}"
                          />
                          @if ((envatopurchasecode.invalid && envatopurchasecode.touched)
                          || envatopurchasecode.dirty) {
                          <div>
                          @if (envatopurchasecode.errors?.['required']) {
                          <small class="text-danger">{{
                              "Envato Purchase Code is required" | translate
                          }}</small>
                          }
                          </div>
                          }
                      <!-- </div> -->
                      <!-- </div> -->
                  </div>
                  } @if (envatoName?.length) {
                  <div class="form-group" id="envatoName">
                      <!-- <div class="row"> -->
                      <!-- <div class="col-md-2"> -->
                          <label class="form-label"
                          >{{ "Envato Item Name" | translate }}
                          <span class="text-red">*</span></label
                          >
                      <!-- </div>
                      <div class="col-md-10"> -->
                          <input
                          type="text"
                          class="form-control"
                          name="productname"
                          [readOnly]="true"
                          required
                          [ngModel]="envatoName"
                          />
                      <!-- </div> -->
                      <!-- </div> -->
                  </div>
                  } @if (hassubcategoriess.length) {
                  <div class="form-group" id="selectssSubCategory">
                      <!-- <div class="row">
                      <div class="col-md-2"> -->
                          <label class="form-label mb-0 mt-2">{{
                          "Subcategory" | translate
                          }}</label>
                      <!-- </div>
                      <div class="col-md-10"> -->
                          <ng-select
                          class="form-control"
                          [items]="hassubcategoriess"
                          #subcategoriess
                          [placeholder]="'Select Sub Category' | translate"
                          [virtualScroll]="true"
                          bindLabel="subcategoryname"
                          [multiple]="false"
                          [loading]="!hassubcategoriess"
                          [searchable]="true"
                          dropdownPosition="auto"
                          bindValue="id"
                          name="subscategory"
                          [(ngModel)]="subcategory"
                          >
                          <ng-template
                              ng-option-tmp
                              let-item="item"
                              let-search="searchTerm"
                          >
                              <div>
                              <span>{{ item?.subcategoryname }}</span>
                              </div>
                          </ng-template>
                          </ng-select>
                      <!-- </div>
                      </div> -->
                  </div>
                  } @if (hasproject.length) {
                  <div class="form-group" id="project">
                      <!-- <div class="row">
                      <div class="col-md-2"> -->
                          <label class="form-label">{{ "Projects" | translate }}</label>
                      <!-- </div>
                      <div class="col-md-10"> -->
                          <ng-select
                          class="form-control"
                          [items]="hasproject"
                          [loading]="!hasproject"
                          #project
                          [placeholder]="'Select Project' | translate"
                          [virtualScroll]="true"
                          bindLabel="name"
                          [multiple]="false"
                          [searchable]="true"
                          dropdownPosition="auto"
                          bindValue="name"
                          name="project"
                          [(ngModel)]="projects"
                          >
                          <ng-template
                              ng-option-tmp
                              let-item="item"
                              let-search="searchTerm"
                          >
                              <div>
                              <span>{{ item?.name }}</span>
                              </div>
                          </ng-template>
                          </ng-select>
                      <!-- </div>
                      </div> -->
                  </div>
                  }

                  <label
                      for="livechatTicketSubject"
                      class="form-label create-ticket-description"
                  >
                      {{ "Description" | translate }}
                      <span class="text-red">*</span>
                  </label>
                  <div class="position-relative">
                      <div
                      contenteditable="true"
                      id="message"
                      #chatReplyInput
                      class="form-control form-control-lg text-break mb-2 fs-14 overflow-auto h-7"
                      placeholder="Type your message here..."
                      name="message"
                      (input)="onTextareaValueChange(chatReplyInput.innerText)"
                      (keydown.enter)="onEnterKey($event, chatReply)"
                      >
                      {{ reply }}
                      </div>
                      @if(newVal == '' || newVal == null){
                      <div class="custom-placeholder">
                      {{ "Type your message here..." | translate }}
                      </div>
                      }
                  </div>
                  </form>
                  } @else{
                  <form
                  #chatReply="ngForm"
                  id="chatReply"
                  (ngSubmit)="
                      chatReplyUserFn(chatReply, 'livechatConversationReassign')
                  "
                  >
                  <div class="position-relative">
                      <div
                      contenteditable="true"
                      #chatReplyInput
                      id="message"
                      class="form-control form-control-lg text-break mb-2 fs-14 overflow-auto h-7"
                      placeholder="Type your message here..."
                      name="message"
                      (input)="onTextareaValueChange(chatReplyInput.innerText)"
                      (keydown.enter)="onEnterKey($event, chatReply)"
                      >
                      {{ reply }}
                      </div>
                      @if(newVal == '' || newVal == null){
                      <div class="custom-placeholder">
                      {{ "Type your message here..." | translate }}
                      </div>
                      }
                  </div>
                  </form>
                  }
                  <div class="image-uploaded d-flex gap-2 flex-wrap">
                  @for(res of UploadedImages; track res){
                  <div class="file-img">
                      @if(['jpg', 'png', 'jpeg', 'svg'].includes(getFileType(res))){
                      <img
                      [attr.imageSrc]="res"
                      src="{{
                          res
                      }}"
                      style="
                          width: 100%;
                          max-height: 55px;
                          border-radius: 5px;
                          height: 65px;
                      "
                      />
                      } @else{
                      <span
                      [attr.imageSrc]="res"
                      style="
                          width: 100%;
                          max-height: 55px;
                          border-radius: 5px;
                          height: 65px;
                          display: flex;
                          align-items: center;
                          justify-content: center;
                          padding: 0.5rem;
                          border: var(--border);
                      "
                      >
                      .{{ getFileType(res) }}
                      </span>
                      }
                      <button
                      class="btn-danger rounded-circle"
                      (click)="imageRemoveClick($event, res)"
                      >
                      <i class="fe fe-x fs-12"></i>
                      </button>
                  </div>
                  }
                  </div>
                  <div class="d-flex align-items-center px-2">
                  <div placement="top" container="body" [ngbTooltip]="'Canned responses' | translate">
                      <a
                      (click)="openAssignModel(cannedResponse)"
                      href="javascript:;"
                      aria-label="anchor"
                      class="btn-emoji"
                      >
                      <i class="ri-message-line"></i>
                      </a>
                  </div>
                  <div
                      id="chat-btn"
                      placement="top"
                      container="body"
                      ngbTooltip="Chat"
                      (click)="showChat()"
                  >
                      <a aria-label="anchor" class="btn-emoji" href="javascript:void(0)">
                      <i class="ri-chat-3-line text-primary"></i>
                      </a>
                  </div>
                  <div
                      id="create-ticket-btn"
                      placement="top"
                      container="body"
                      (click)="showcreateTikcte()"
                      ngbTooltip="Create Ticket"
                  >
                      <a aria-label="anchor" class="btn-emoji" href="javascript:void(0)">
                      <i class="ri-ticket-line"></i>
                      </a>
                  </div>

                  <div class="d-flex align-items-center ms-auto gap-2">
                      <app-emoji (emojiAdded)="updateemojiAdded($event)"></app-emoji>
                      @if(settings?.['liveChatAgentFileUpload'] == '1' ||
                      autoUserInfo?.['roles']?.[0]?.name == 'superadmin'){
                      <a
                      aria-label="anchor"
                      class="btn-attach"
                      type="file"
                      onclick="{document.querySelector('#chat-file-upload').click()}"
                      href="javascript:void(0)"
                      placement="top"
                      container="body"
                      ngbTooltip="Upload"
                      data-bs-original-title=""
                      title=""
                      >
                      <i class="ri-attachment-line"></i>
                      </a>
                      <input
                      type="file"
                      id="chat-file-upload"
                      (change)="fileUpload()"
                      class="d-none"
                      name="chat-file-upload"
                      />
                      } @if(isChat){
                      <button
                      form="chatReply"
                      aria-label="anchor"
                      type="submit"
                      id="agentSendMessage"
                      class="btn-reply border rounded-3 btn-outline-primary d-flex justify-content-center align-items-center"
                      href="javascript:void(0)"
                      >
                      <i class="ri-send-plane-2-fill fs-20"></i>
                      @if(sendingResponse['livechatConversationReassign']){
                        <i class="fa fa-spinner fa-spin mx-1"></i>
                      }
                      </button>
                      } @else {
                      <button
                      form="createLivechatTicket"
                      aria-label="anchor"
                      type="submit"
                      id="agentCreateTicket"
                      class="btn-reply border rounded-3 btn-outline-primary d-flex justify-content-center align-items-center"
                      href="javascript:void(0)"
                      >
                      <i class="ri-send-plane-2-fill fs-20"></i>
                      @if(sendingResponse['livechatConversationReassign']){
                        <i class="fa fa-spinner fa-spin mx-1"></i>
                      }
                      </button>
                      }
                  </div>
                  </div>
              </div>
          }
      </div>

    }@else{
      <div
        class="card no-articles mb-0"
        style="height: calc(100vh - 8rem); background-color: transparent"
      >
        <div class="card-body p-8">
          <div class="main-content text-center">
            <div class="notification-icon-container p-4">
              <img src="/assets/images/noarticle.png" alt="" />
            </div>
            <h4 class="mb-1">
              {{
                "Currently, no active chat discussions at the moment" | translate
              }}
            </h4>
            <p class="text-muted">
              {{
                "There are currently no ongoing chat discussions at this time."
                  | translate
              }}
            </p>
          </div>
        </div>
      </div>
    }
  </div>
</div>

<ng-template #cannedResponse let-modal>
  <div class="modal-body p-4">
    <div class="form-group">
      <label class="form-label d-flex justify-content-between" >
        {{ "Canned Responses" | translate }}
        
        <button type="button" aria-label="close" class="btn-close" (click)="modal.dismiss('Cross click')">
        </button>
      </label>
      <ng-select
        name="livechatPosition"
        [items]="chatData?.cannedmessages"
        [loading]="!chatData?.cannedmessages"
        class="form-control"
        id="livechatPosition"
        [placeholder]="'Select Canned Response' | translate"
        [multiple]="false"
        bindLabel="title"
        bindValue="messages"
        [clearable]="false"
        (change)="onSelectChange($event)"
      >
        <!-- Show "No items" if tagslist is empty -->
        <ng-template ng-select-empty-list>
          <div>{{ "No items" | translate }}</div>
        </ng-template>
      </ng-select>
    </div>
  </div>
</ng-template>

<ng-template #reassign let-modal>
  <div class="modal-header">
    <h5 class="modal-title" id="staticBackdropLabel">
      {{ "Reassign the conversation" | translate }}
    </h5>
    <button
      type="button"
      aria-label="close"
      class="btn-close"
      (click)="modal.dismiss('Cross click')"
    ></button>
  </div>
  <div class="modal-body">
    <form
      [formGroup]="reAssign"
      id="reAssign"
      (ngSubmit)="reAssignUserFn(reAssign, 'livechatConversationReassign')"
    >
      <div class="form-group select2-lg">
        <label for="form-label">{{"Reassign Users" | translate}}</label>
        <input type="hidden" formControlName="custId" [value]="custId" />
        <app-ng-select-input
          nameField="assignUser"
          [tagslist]="data?.user"
          idField="assignUser"
          classText="form-control nodropdown"
          placeholder="Select Users"
          [addTag]="false"
          [hideSelected]="false"
          [multiple]="false"
          bindLabel="name"
          bindValue="id"
          [initailSelect]=""
          [isOpen]="true"
          [isRequired]="true"
        ></app-ng-select-input>
      </div>
    </form>
  </div>
  <div class="modal-footer">
    <button
      type="button"
      aria-label="close"
      class="btn btn-secondary"
      (click)="modal.dismiss('Cross click')"
    >
      {{ "Close" | translate }}
    </button>
    <button
      type="submit"
      class="btn btn-primary"
      data-bs-dismiss="modal"
      form="reAssign"
      id="reassignSelectBtn"
    >
      {{ "Reassign" | translate }}
    </button>
  </div>
</ng-template>
