@if (setting?.businesshourofflinemsg == 'on' && responseCreateTicket.isOnline != true) {
  <div class="alert alert-offline p-5">
    <div class="d-flex align-items-start gap-3">
      <div class="lh-1 svg-icon flex-shrink-0">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256">
          <rect width="256" height="256" fill="none" />
          <circle cx="128" cy="128" r="96" opacity="0.2" />
          <path d="M128,224a96,96,0,1,1,96-96" fill="none" stroke="currentColor" stroke-linecap="round"
            stroke-linejoin="round" stroke-width="16" />
          <path d="M128,224s-40-32-40-96,40-96,40-96,40,32,40,96" fill="none" stroke="currentColor"
            stroke-linecap="round" stroke-linejoin="round" stroke-width="16" />
          <line x1="37.46" y1="96" x2="218.54" y2="96" fill="none" stroke="currentColor"
            stroke-linecap="round" stroke-linejoin="round" stroke-width="16" />
          <line x1="37.46" y1="160" x2="128" y2="160" fill="none" stroke="currentColor" stroke-linecap="round"
            stroke-linejoin="round" stroke-width="16" />
          <line x1="168" y1="168" x2="216" y2="216" fill="none" stroke="currentColor" stroke-linecap="round"
            stroke-linejoin="round" stroke-width="16" />
          <line x1="216" y1="168" x2="168" y2="216" fill="none" stroke="currentColor" stroke-linecap="round"
            stroke-linejoin="round" stroke-width="16" />
        </svg>
      </div>
      <div>
        <h5 class="fw-semibold mb-1 offline-title">{{ setting?.offlineTextTitle }}</h5>
        <span>{{ setting?.offlineTextMessage }} - <a href="javascript:void(0);"
            class="font-weight-semibold text-decoration-underline text-secondary"
            (click)="openModel(businesshoursIns)">{{ 'Support Hours' | translate }}</a>
        </span>
      </div>
    </div>
  </div>
}

@if (responseCreateTicket?.envato_on == 'on') {
<div class="alert alert-danger mb-5 br-13 align-center d-none" #supportexpired>
  <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor"
    class="bi bi-exclamation-triangle-fill mb-1 me-1" viewBox="0 0 16 16">
    <path
      d="M8.982 1.566a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566zM8 5c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995A.905.905 0 0 1 8 5zm.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2z" />
  </svg>
  {{'Support Expired: Your support has expired. In order to continue receiving our assistance, please renew your support.' | translate}}
  <a class="btn-sm btn btn-dark me-2 mt-sm-max-2" [href]="responseCreateTicket?.SUPPORT_POLICY_URL"
    target="_blank">{{'Support Policy' | translate}}</a>
  <a class="btn-sm btn btn-dark mt-sm-max-2"
    href="https://help.market.envato.com/hc/en-us/articles/207886473-Extending-and-Renewing-Item-Support"
    target="_blank">{{'How To Renew Item Support' |
    translate}}</a>
</div>
}
@if (responseCreateTicket?.envato_on == 'on') {
<div class="alert alert-warning mb-5 br-13 align-center d-none" #verifysupportexpired>
  <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor"
    class="bi bi-exclamation-triangle-fill mb-1 me-1" viewBox="0 0 16 16">
    <path
      d="M8.982 1.566a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566zM8 5c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995A.905.905 0 0 1 8 5zm.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2z" />
  </svg>
  {{'Your purchase code has been verified, but product support has expired.' | translate}}
  <a class="btn-sm btn btn-dark me-2 mt-sm-max-2" [href]="responseCreateTicket?.SUPPORT_POLICY_URL"
    target="_blank">{{'Support Policy' | translate}}</a>
  <a class="btn-sm btn btn-dark mt-sm-max-2"
    href="https://help.market.envato.com/hc/en-us/articles/207886473-Extending-and-Renewing-Item-Support"
    target="_blank">{{'How To Renew Item Support' |
    translate}}</a>
</div>
}

<app-announcement-holiday-banner
[setting]="responseCreateTicket?.setting?.original"
[user]="responseCreateTicket?.user"
[announcement]="responseCreateTicket?.announcement"
[announcements]="responseCreateTicket?.announcements"
[holidays]="responseCreateTicket?.holidays"
[hideAlertsUntil]="hideAlertsUntils"
></app-announcement-holiday-banner>
<div class="card">
  <div class="card-header  border-0">
    <h4 class="card-title">{{'New Ticket' | translate}}</h4>
  </div>
  @if (!newTicketLimit.length) {
  <form id="user_form" enctype="multipart/form-data" #NewTicket="ngForm" (ngSubmit)="newTicket(NewTicket, 'createtick')">
    <div class="card-body">
      @if (responseCreateTicket?.cc_email == 'on') {
      <div class="form-group">
        <div class="row">
          <div class="col-md-2">
            <label class="form-label mb-0 mt-2">{{'CC' | translate}} </label>
          </div>
          <div class="col-md-10">
            <input ngModel type="email" class="form-control" [placeholder]="'CC Email' | translate" name="ccmail"
              id="ccmail" #ccemailField="ngModel" [class.is-invalid]="ccemailField.invalid && ccemailField.touched" [class.is-valid]="ccemailField.valid" pattern="[^@\s]+@[^@\s]+\.[a-zA-Z]{2,}">
            <div><small class="text-muted"> {{'You are allowed to send only a single CC.' | translate}}</small></div>
            @if ((ccemailField.invalid && ccemailField.touched) || ccemailField.dirty) {
              <div
                >
                @if (ccemailField.errors?.['required']) {
                  <small class="text-danger"
                    >
                  {{'Email address is required' | translate}}</small>
                }
@if (ccemailField.errors?.['pattern']) {
<small class="text-danger">{{'Please check Email Format' | translate}}</small>
}
              </div>
            }
          </div>
        </div>
      </div>
      }
      <div class="form-group ">
        <div class="row">
          <div class="col-md-2">
            <label class="form-label mb-0 mt-2">{{'Subject' | translate}}<span class="text-red">*</span></label>
          </div>
          <div class="col-md-10">
            <input type="text" id="subject" ngModel [attr.maxlength]="responseCreateTicket?.TICKET_CHARACTER" required
              class="form-control " [placeholder]="'Subject' | translate" #subjectField name="subject" value="subject">
            <small class="text-muted float-end mt-1  text-field"
              [class.is-invalid]="subjectField.value.length >= responseCreateTicket?.TICKET_CHARACTER"
              id="subjectmaxtext">{{'Maximum' |
              translate}} <b>
                {{responseCreateTicket?.TICKET_CHARACTER}} </b> {{'Characters' | translate}}</small>
          </div>
        </div>
      </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]="categories" #maincategory
              [placeholder]="'Select category' | translate" [virtualScroll]="true" bindLabel="name" [multiple]="false"
              [loading]="!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)" name="envato_id"
              [readOnly]="licencekey ? true : false" #purchasecode="ngModel"
              [class.is-invalid]="purchasecode.invalid && purchasecode.touched" required ngModel="{{licencekey}}">
            @if ((purchasecode.invalid && purchasecode.touched) || purchasecode.dirty) {
            <div>
              @if (purchasecode.errors?.['required']) {
              <small class="text-danger">{{'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 [value]="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"
              [loading]="!hassubcategoriess" [multiple]="false" [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" #project [placeholder]="'Select Project' | translate"
              [virtualScroll]="true" bindLabel="name" [multiple]="false" [loading]="!hasproject" [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>
      }
      @if (responseCreateTicket?.customfields?.length) {
      @for (customfield of responseCreateTicket?.customfields; track customfield) {
      @if (customfield?.status == '1') {
      <div class="form-group ">
        <div class="row">
          <div class="col-md-2">
            <label class="form-label mb-0 mt-2">{{customfield.fieldnames}}
              @if (customfield.fieldrequired == '1') {
              <span class="text-red">*</span>
              }
            </label>
          </div>
          <div class="col-md-10">
            @if (customfield.fieldtypes == 'text') {
            <input type="{{customfield.fieldtypes}}" [maxlength]="255" class="form-control"
              name="custom_{{customfield.id}}" #c_text="ngModel" [class.is-invalid]="c_text.invalid && c_text.touched"
              [required]="customfield.fieldrequired == '1' ? true : false" ngModel>
            @if ((c_text.invalid && c_text.touched) || c_text.dirty) {
            <div>
              @if (c_text.errors?.['required']) {
              <small class="text-danger">{{'Field is required' | translate}}</small>
              }
            </div>
            }
            }
            @if (customfield.fieldtypes == 'email') {
            <input type="email" class="form-control" name="custom_{{customfield.id}}"
              #c_email="ngModel" [class.is-invalid]="c_email.invalid && c_email.touched"
              [required]="customfield.fieldrequired == '1' ? true : false" ngModel pattern="[^@\s]+@[^@\s]+\.[a-zA-Z]{2,}">
            @if ((c_email.invalid && c_email.touched) || c_email.dirty) {
            <div>
              @if (c_email.errors?.['required']) {
              <small class="text-danger">{{'Email address is required' | translate}}</small>
              }
              @if (c_email.errors?.['pattern']) {
              <small class="text-danger">{{'Please check Email Format' | translate}}</small>
              }
            </div>
            }
            }
            @if (customfield.fieldtypes == 'textarea') {
            <textarea name="custom_{{customfield.id}}" maxlength="255" class="form-control" cols="30" rows="4"
              #c_textarea="ngModel" [class.is-invalid]="c_textarea.invalid && c_textarea.touched"
              [required]="customfield.fieldrequired == '1' ? true : false" ngModel></textarea>
            @if ((c_textarea.invalid && c_textarea.touched) || c_textarea.dirty) {
            <div>
              @if (c_textarea.errors?.['required']) {
              <small class="text-danger">{{'Field is required' | translate}}</small>
              }
            </div>
            }
            }
            @if (customfield.fieldtypes == 'select') {
            <ng-select name="custom_{{customfield.id}}" class="form-control select2-show-search" #c_select="ngModel"
              [class.is-invalid]="c_select.invalid && c_select.touched"
              [required]="customfield.fieldrequired == '1' ? true : false" [ngModel]="null">
              @for (seoption of customfield.fieldoptions?.split(','); track seoption) {
              <ng-option value="{{seoption}}">{{seoption}}</ng-option>
              }
            </ng-select>
            @if ((c_select.invalid && c_select.touched) || c_select.dirty) {
            <div>
              @if (c_select.errors?.['required']) {
              <small class="text-danger">{{'Field is required' | translate}}</small>
              }
            </div>
            }
            }
            @if (customfield.fieldtypes == 'checkbox') {
            @for (coption of customfield.fieldoptions?.split(','); track coption) {
            <label class="custom-control custom-checkbox d-inline-block me-3">
              <input #custo (click)="customfieldSection(coption, 'custom_'+customfield?.id, customfield?.fieldtypes)"
                type="{{customfield.fieldtypes}}" class="custom-control-input" name="custom_{{customfield.id}}"
                [value]="coption">
              <span class="custom-control-label">{{coption}}</span>
            </label>
            }
            }
            @if (customfield.fieldtypes == 'radio') {
            @for (roption of customfield.fieldoptions?.split(','); track roption) {
            <label class="custom-control form-radio d-inline-block me-3">
              <input #custo (click)="customfieldSection(roption, 'custom_'+customfield?.id, customfield?.fieldtypes)"
                type="{{customfield.fieldtypes}}" class="custom-control-input" name="custom_{{customfield.id}}"
                [value]="roption">
              <span class="custom-control-label">{{roption}}</span>
            </label>
            }
            }
          </div>
        </div>
      </div>
      }
      }
      }
      <div class="form-group ticket-summernote ">
        <div class="row">
          <div class="col-md-2">
            <label class="form-label mb-0 mt-2">{{'Description' | translate}}<span class="text-red">*</span></label>
          </div>
          <div class="col-md-10">
            <angular-editor [appMaxLength]="setting?.maxLengthTextField" [appMinLength]="setting?.minLengthTextField" [LengthTextFieldStatus]="setting?.LengthTextFieldStatus" [config]="toolbar" #description="ngModel" ngModel
              [class.is-invalid]="description.invalid && description.touched" required class="form-control"
              [placeholder]="'Message' | translate" name="message"></angular-editor>
              @if (description.errors?.['minLength'] && description.touched) {
                <div class="limit-error">{{' Minimum Characters are required' | translate}}</div>
              }
            @if (description.errors?.['maxLength']) {
            <div class="limit-error">
              {{ description.errors?.['maxLength'].actualLength }}/{{ description.errors?.['maxLength'].maxLength }} {{'
              exceeded the limit' | translate}}
            </div>
            }
            @if ((description.invalid && description.touched) || description.dirty) {
            <div>
              @if (description.errors?.['required']) {
              <small class="text-danger">{{'Description is required' | translate}}</small>
              }
            </div>
            }
          </div>
        </div>
      </div>
      @if (responseCreateTicket?.USER_FILE_UPLOAD_ENABLE == 'yes') {
      <div class="form-group">
        <div class="row">
          <div class="col-md-2">
            <label class="form-label mb-0 mt-2">{{'Upload Image' | translate}}</label>
          </div>
          <div class="col-md-10">
            <div class="form-group mb-0">
              <app-image-upload [setting]="setting" (onImageUploaded)="onImageUploaded($event)"></app-image-upload>
            </div>
            <div class="col-md-10 ps-0">
              <small class="text-muted"><i>{{'The file size should not be more than' | translate}}
                  {{setting?.FILE_UPLOAD_MAX}}{{'MB' | translate}}</i></small>
            </div>
          </div>
        </div>
      </div>
      }
      <div class="form-group">
        <label class="custom-control form-checkbox">
          <input type="checkbox" class="custom-control-input " value="agreed" name="agree_terms" required ngModel
            #terms="ngModel" [class.is-invalid]="terms.invalid && terms.touched">
          <span class="custom-control-label">{{'I agree with' | translate}}<a href="{{responseCreateTicket?.terms_url}}"
              target="_blank" class="text-primary">{{'Terms and Services' |
              translate}}</a></span>
        </label>
        @if ((terms.invalid && terms.touched) || terms.dirty) {
        <div>
          @if (terms.errors?.['required']) {
          <small class="text-danger">{{'Terms is required' | translate}}</small>
          }
        </div>
        }
      </div>
    </div>
    <div class="card-footer">
      <div class="form-group float-end">
        <button
          [disabled]="!!haspurchasecode.length ? !licencekeyStatus || NewTicket.invalid || checkStatus || sendingResponse['createtick'] || categoryStatus : NewTicket.invalid || checkStatus || sendingResponse['createtick'] || categoryStatus"
          type="submit" class="btn btn-primary btn-lg purchasecode" id="createticketbtn">{{'Create Ticket' |
          translate}}@if (sendingResponse['createtick']) {
          <i class="fa fa-spinner fa-spin mx-1"></i>
          }</button>
      </div>
    </div>
  </form>
  } @else {
  <ngb-alert [dismissible]="false" type="danger">
    {{newTicketLimit | translate}}
  </ngb-alert>
  }
</div>


<ng-template #businesshoursIns let-modal>
  <div class="modal-header">
    <h5 class="modal-title">{{'Support Hours'|translate}}</h5>
    <button type="button" aria-label="close" class="btn-close" (click)="modal.dismiss('Cross click')">
    </button>
  </div>
  <div class="modal-body">
    <app-business-hour-card-list  [setting]="setting" [businesshours]="businesshours"></app-business-hour-card-list>
  </div>
</ng-template>