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


@if (setting?.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 mt-sm-max-2 me-2" [href]="setting?.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 (setting?.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]="setting?.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>
}

<!-- Create Ticket List-->
<div class="col-xl-12 col-lg-12 col-md-12">
  <div class="card ">
    <div class="card-header border-0">
      <h4 class="card-title">{{'New Ticket' | translate}}</h4>
    </div>
    <form #createTicket="ngForm" (ngSubmit)="ticketCreate(createTicket, 'createTicket')">
      <div class="card-body">
        <div class="form-group">
          <div class="row">
            <div class="col-md-2">
              <label class="form-label mb-0 mt-2">{{'Email' | translate}} <span class="text-red"> *</span></label>
            </div>
            <div class="col-md-10">
              <input
                type="email" class="form-control " [placeholder]="'Email' | translate" value="" name="email" id="email" ngModel #emailField="ngModel" pattern="[^@\s]+@[^@\s]+\.[a-zA-Z]{2,}"
                [class.is-invalid]="emailField.invalid && emailField.touched" [class.is-valid]="emailField.valid" required>
              @if ((emailField.invalid && emailField.touched) || emailField.dirty) {
                <div>
                  @if (emailField.errors?.['required']) {
                    <small class="text-danger">{{'Email address is required' | translate}}</small>
                  }
                  @if (emailField.errors?.['pattern']) {
                  <small class="text-danger">{{'Please check Email Format' | translate}}</small>
                  }
                </div>
              }
            </div>
          </div>
        </div>
        @if (setting?.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 type="email" class="form-control" [placeholder]="'CC Email' | translate" name="ccmail" id="ccmail" ngModel #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>
                  @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>
      }

      <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" class="form-control" [maxLength]="setting?.TICKET_CHARACTER" [placeholder]="'Subject' | translate" name="subject" ngModel #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>
            @if ((subject.invalid && subject.touched) || subject.dirty) {
              <div>
                @if (subject.errors?.['required']) {
                  <small class="text-danger">{{'Subject is required' | 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">{{'Category' | translate}}<span class="text-red"> *</span></label>
          </div>
          <div class="col-md-10">
            <ng-select class="form-control" [items]="responseCreateTicket?.categories" #maincategory [placeholder]="'Select category' | translate" [virtualScroll]="true" bindLabel="name" [multiple]="false" [loading]="!responseCreateTicket?.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>
      }
      @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">{{'Custom 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" #c_textare="ngModel" [class.is-invalid]="c_textare.invalid && c_textare.touched"
                    rows="4" [required]="customfield.fieldrequired == '1' ? true : false" ngModel></textarea>
                    @if ((c_textare.invalid && c_textare.touched) || c_textare.dirty) {
                      <div>
                        @if (c_textare.errors?.['required']) {
                          <small class="text-danger">{{'Custom 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">{{'Custom 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" [required]="customfield.fieldrequired == '1' ? true : false" name="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"
                          [required]="customfield.fieldrequired == '1' ? true : false">
                        <span class="custom-control-label">{{roption}}</span>
                      </label>
                    }
                  }
                </div>
              </div>
            </div>
          }
        }
      }
      
      <div class="form-group">
        <div class="row">
          <div class="col-md-2">
            <label class="form-label mb-0 mt-2">{{'Assign Agent' | translate}}</label>
          </div>
          <div class="col-md-10">
            <ng-select class="form-control" [items]="responseCreateTicket?.agents" #mainassignagent [placeholder]="'Select Agents' | translate" [virtualScroll]="true" bindLabel="name" [multiple]="true" [loading]="!responseCreateTicket?.agents" [searchable]="true" dropdownPosition="auto" bindValue="id" name="assignagent" ngModel>
              <ng-template ng-option-tmp let-item="item" let-search="searchTerm">
                <div><span>{{item?.name}}</span></div>
              </ng-template>
            </ng-select>
          </div>
        </div>
      </div>
      
      <div class="form-group">
        <div class="row">
          <div class="col-md-2">
            <label class="form-label mb-0 mt-2">{{'Priority' | translate}}</label>
          </div>
          <div class="col-md-10">
            <ng-select class="form-control select2_modalpriority" [items]="priorityList" #select
            [placeholder]="'Priority' | translate" [virtualScroll]="true" bindLabel="name" [multiple]="false"
            [loading]="!priorityList" [searchable]="true" dropdownPosition="auto" bindValue="name" name="priority"
            [ngModel]="">
            <ng-template ng-option-tmp let-item="item" let-search="searchTerm">
              <div><span>{{item?.name}}</span></div>
            </ng-template>
          </ng-select>
          </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" (keyup)="eventToStoreData($event.target)" #description="ngModel" [(ngModel)]="ticketData" [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>

      <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">
            <app-image-upload [directTypes]="setting?.USER_FILE_UPLOAD_TYPES"  [setting]="setting" (onImageUploaded)="onImageUploaded($event)" ></app-image-upload>

            <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>
    <div class="card-footer">
      <div class="form-group float-end">
        <button
          [disabled]="!!haspurchasecode.length ? !licencekeyStatus || createTicket.invalid || checkStatus || sendingResponse['createTicket'] || categoryStatus : createTicket.invalid || checkStatus || sendingResponse['createTicket'] || categoryStatus"
          type="submit" id="createticketbtn" class="btn btn-secondary btn-lg purchasecode">{{'Create Ticket'|
          translate}}@if (sendingResponse['createTicket']) {
          <i class="fa fa-spinner fa-spin mx-1"></i>
        }</button>
      </div>
    </div>
  </form>
</div>
</div>
<!--End Create Ticket List-->