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

<div class="col-xl-12 col-lg-12 col-md-12">
  <div class="card ">
    <div class="card-header border-0">
      <h4 class="card-title">{{'Ticket To Article' | translate}}</h4>
    </div>
    <form #createarticle="ngForm" (ngSubmit)="createArticle(createarticle, 'createArticle')">

      <div class="card-body">
        <div class="form-group">
          <label class="form-label">{{'Title' | translate}}</label>
          <input type="text" class="form-control" name="title" [ngModel]="data?.articleticket?.subject">
        </div>
        <div class="form-group">
          <label class="form-label">{{'Category' | translate}}</label>

          <ng-select class="form-control" [items]="data?.category" #select [placeholder]="'Select category' | translate" [virtualScroll]="true" bindLabel="name" [multiple]="false" [searchable]="true" [loading]="!data?.category" dropdownPosition="auto" bindValue="id" name="category" [(ngModel)]="data?.articleticket.category_id" (load)="categorychange($event)" (change)="categorychange($event)">
            <ng-template ng-option-tmp let-item="item" let-search="searchTerm">
              <div><span>{{item?.name}}</span></div>
            </ng-template>
          </ng-select>
        </div>
        @if (hassubcategoriess.length) {
          <div class="form-group" id="selectssSubCategory">
            <label class="form-label mb-0 mt-2">{{'Subcategory' | translate}}</label>
            <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]="data?.articleticket?.subcategory">
              <ng-template ng-option-tmp let-item="item" let-search="searchTerm">
                <div><span>{{item?.subcategoryname}}</span></div>
              </ng-template>
            </ng-select>
          </div>
        }
        <div class="form-group">
          <label class="form-label">{{'Description' | translate}}:</label>
          <angular-editor [config]="toolbar" #description="ngModel" [ngModel]="data?.finalcomment.join('\n')" [class.is-invalid]="description.invalid && description.touched" required class="form-control"
          [placeholder]="'Comment' | translate" name="message"></angular-editor>
          @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 class="form-group">
          <label class="form-label">{{'Feature Image' | translate}}</label>
          <div class="input-group file-browser">
            <app-image-upload [directTypes]="setting?.USER_FILE_UPLOAD_TYPES" class="w-100" [setting]="setting" [maxLength]="1" (onImageUploaded)="onImageUploaded($event)" ></app-image-upload>
          </div>
          <small class="text-muted"><i>{{'The file size should not be more than' | translate}} {{data?.setting?.original?.FILE_UPLOAD_MAX}}{{'MB' | translate}}</i></small>
          <small class="text-muted"><i>{{'File types allowed'| translate}}{{data?.setting?.original?.FILE_UPLOAD_TYPES?.split(',')}}</i></small>
        </div>
        <div class="form-group">
          <label class="form-label">{{'Tags' | translate}} <span class="text-red">*</span></label>
          <ng-select class="form-control nodropdown" #tags="ngModel" [class.is-invalid]="tags.invalid && tags.touched" required [items]="[]" [maxSelectedItems]="10" [ngModel]="tagslist" name="tags" [addTag]="true" [multiple]="true" [isOpen]="false" [selectOnTab]="true" ></ng-select>
          @if ((tags.invalid && tags.touched) || tags.dirty) {
            <div>
              @if (tags.errors?.['required']) {
                <small class="text-danger">{{'Tags is required' | translate}}</small>
              }
            </div>
          }
        </div>

        <div class="form-group">
          <div class="custom-controls-stacked d-md-flex">
            <label class="form-label mt-1 me-5">{{'Status' | translate}} : <span class="text-red">*</span></label>
            <label class="custom-control form-radio success me-4">
              <input ngModel type="radio" class="custom-control-input" name="status" value="Published" [checked]="data?.articleticket?.status == 'Published' ? true : false">
              <span class="custom-control-label">{{'Publish' | translate}}</span>
            </label>
            <label class="custom-control form-radio success me-4">
              <input ngModel type="radio" class="custom-control-input" name="status" value="UnPublished" [checked]="data?.articleticket?.status == 'UnPublished' ? true : false">
              <span class="custom-control-label">{{'UnPublish' | translate}}</span>
            </label>
          </div>
        </div>

        <div class="form-group">
          <label class="custom-control form-checkbox">
            <input ngModel type="checkbox" class="custom-control-input" name="privatemode" id="privatemode" [checked]="data?.articleticket?.privatemode == 1  ? true : false">
            <span class="custom-control-label">{{'Privacy Mode' | translate}}</span>
          </label>
        </div>
        <div class="form-group">
          <label class="form-label">{{'Upload Image' | translate}}</label>
          <app-image-upload [directTypes]="setting?.USER_FILE_UPLOAD_TYPES" [setting]="setting" (onImageUploaded)="onImageUploaded2($event)" ></app-image-upload>
          <small class="text-muted"><i>{{'The file size should not be more than' | translate}} {{data?.setting?.original?.FILE_UPLOAD_MAX}}{{'MB' | translate}}</i></small>
          <small class="text-muted"><i>{{'File types allowed'| translate}}{{data?.setting?.original?.FILE_UPLOAD_TYPES?.split(',')}}</i></small>
        </div>
      </div>
      <div class="card-footer clearfix">
        <div class="form-group float-end mb-0">
          <a routerLink="/admin/knowledge/articles" class="btn btn-outline-danger mx-2">{{'Close' | translate}}</a>
          <button type="submit" [disabled]="createarticle.invalid || sendingResponse['createArticle']" class="btn btn-secondary">@if (sendingResponse['createArticle']) {
            <i class="fa fa-spinner fa-spin mx-1"></i>
            }{{'Save' |
          translate}}</button>
        </div>
      </div>
    </form>
  </div>
</div>