
<!-- No Otp  -->
<section>
  <div class="bannerimg cover-image" style="background: url(./assets/images/photos/banner1.jpg) center center;">
    <div class="header-text mb-0">
      <div class="container">
        <div class="row text-white">
          <div class="col">
            <h1 class="mb-0">{{'Guest Ticket' | translate}}</h1>
          </div>
          <div class="col col-auto">
            <ol class="breadcrumb text-center">
              <li class="breadcrumb-item">
                <a routerLink="/" class="text-white-50">{{'Home' | translate}}</a>
              </li>
              <li class="breadcrumb-item active">
                <a href="javascript:;" class="text-white">{{'Guest Ticket' | translate}}</a>
              </li>
            </ol>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>
<!-- Section -->
@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 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){
  @if (setting?.GUEST_TICKET_OTP == 'yes') {
  <section>
    <div class="cover-image sptb">
      <div class="container">
        <div class="row justify-content-center">
          <div class="col-xl-9">
            @if (setting?.businesshourofflinemsg == 'on' && data.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>
            } 
            <app-announcement-holiday-banner
            [setting]="data?.setting?.original"
            [user]="data?.user"
            [holidays]="data?.holidays"
            [hideAlertsUntil]="hideAlertsUntils"
            ></app-announcement-holiday-banner>
            <div class="card">
              <div class="card-header  border-0">
                <h4 class="card-title">{{'Guest Ticket' | translate}}</h4>
              </div>
              <div class="card-body pb-0">
                <form #nootpTicket="ngForm" (ngSubmit)="opennoOtpticket(nootpTicket, 'opennoOtpticket')">
                  <div class="form-group">
                    <div class="row">
                      <div class="col-md-3">
                        <label class="form-label mb-0 mt-2">{{'Email' | translate}} <span
                            class="text-red">*</span></label>
                      </div>
                      <div class="col-md-9">
                        <input #email="ngModel" [class.is-invalid]="email.invalid && email.touched"
                          [class.is-valid]="email.valid" required type="email" pattern="[^@\s]+@[^@\s]+\.[a-zA-Z]{2,}"
                          class="form-control" [placeholder]="'Email' | translate" name="email" ngModel>
                        @if ((email.invalid && email.touched) || email.dirty) {
                        <div>
                          @if (email.errors?.['required']) {
                          <small class="text-danger">{{'Email address is required' | translate}}</small>
                          }
                          @if (email.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-3">
                        <label class="form-label mb-0 mt-2">{{'CC' | translate}} </label>
                      </div>
                      <div class="col-md-9">
                        <input type="email" class="form-control " [placeholder]="'CC Email' | translate" value
                          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 allowed to send only to 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-3">
                        <label class="form-label mb-0 mt-2">{{'Subject' | translate}} <span
                            class="text-red">*</span></label>
                      </div>
                      <div class="col-md-9">
                        <input type="text" id="subject" #subject="ngModel"
                          [class.is-invalid]="subject.invalid && subject.touched" required
                          [attr.maxlength]="setting?.TICKET_CHARACTER" class="form-control"
                          [placeholder]="'Subject' | translate" name="subject" value ngModel #subjectField>
                        <small class="text-muted float-end mt-1  text-field" id="subjectmaxtext"
                          [class.is-invalid]="subjectField.value.length >= setting?.TICKET_CHARACTER">{{'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-3">
                        <label class="form-label mb-0 mt-2">{{'Category' | translate}}<span
                            class="text-red">*</span></label>
                      </div>
                      <div class="col-md-9">
                        <ng-select class="form-control" [items]="data?.categories" #maincategory
                          [placeholder]="'Select category' | translate" [virtualScroll]="true" bindLabel="name"
                          [multiple]="false" [loading]="!data" [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-3">
                        <label class="form-label">{{'Envato Purchase Code' | translate}} <span
                            class="text-red">*</span></label>
                      </div>
                      <div class="col-md-9">
                        <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-3">
                        <label class="form-label">{{'Envato Item Name' | translate}} <span
                            class="text-red">*</span></label>
                      </div>
                      <div class="col-md-9">
                        <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-3">
                        <label class="form-label mb-0 mt-2">{{'Subcategory' | translate}}</label>
                      </div>
                      <div class="col-md-9">
                        <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-3">
                        <label class="form-label">{{'Projects' | translate}}</label>
                      </div>
                      <div class="col-md-9">
                        <ng-select class="form-control" [items]="hasproject" #project
                          [placeholder]="'Select Projects' | 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 (data?.customfields?.length) {
                  @for (customfield of data?.customfields; track customfield) {
                  @if (customfield?.status == '1') {
                  <div class="form-group ">
                    <div class="row">
                      <div class="col-md-3">
                        <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-9">
                        @if (customfield.fieldtypes == 'text') {
                        <input type="{{customfield.fieldtypes}}" maxlength="255" class="form-control"
                          name="custom_{{customfield.id}}" [required]="customfield.fieldrequired == '1' ? true : false"
                          ngModel>
                        }
                        @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"
                          [required]="customfield.fieldrequired == '1' ? true : false" ngModel></textarea>
                        }
                        @if (customfield.fieldtypes == 'select') {
                        <ng-select name="custom_{{customfield.id}}" class="form-control select2-show-search"
                          [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 (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-3">
                        <label class="form-label mb-0 mt-2">{{'Description' | translate}} <span
                            class="text-red">*</span></label>
                      </div>
                      <div class="col-md-9">
                        <angular-editor [LengthTextFieldStatus]="setting?.LengthTextFieldStatus" [appMaxLength]="setting?.maxLengthTextField" [appMinLength]="setting?.minLengthTextField" [config]="toolbar" #comment="ngModel"
                          ngModel [class.is-invalid]="comment.invalid && comment.touched" required class="form-control"
                          [placeholder]="'Message' | translate" name="message"></angular-editor>
                        @if (comment.errors?.['minLength'] && comment.touched) {
                        <div class="limit-error">{{' Minimum Characters are required' | translate}}</div>
                        }
                        @if (comment.errors?.['maxLength']) {
                        <div class="limit-error">
                          {{ comment.errors?.['maxLength'].actualLength }}/{{ comment.errors?.['maxLength'].maxLength }}
                          {{' exceeded the limit' | translate}}
                        </div>
                        }
                        @if ((comment.invalid && comment.touched) || comment.dirty) {
                        <div>
                          @if (comment.errors?.['required']) {
                          <small class="text-danger">{{'Comment is required' | translate}}</small>
                          }
                        </div>
                        }
                      </div>
                    </div>
                  </div>
                  @if (setting?.GUEST_FILE_UPLOAD_ENABLE == 'yes') {
                  <div class="form-group">
                    <div class="row">
                      <div class="col-md-3">
                        <label class="form-label mb-0 mt-2">{{'Upload Image' |
                          translate}}</label>
                      </div>
                      <div class="col-md-9">
                        <app-image-upload [setting]="setting"
                          (onImageUploaded)="onImageUploaded($event)"></app-image-upload>
                        <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>
                  }
                  @if (setting?.CAPTCHATYPE == 'manual') {
                  @if (setting?.RECAPTCH_ENABLE_GUEST == 'yes') {
                  <div class="form-group mt-4">
                    <div class="row">
                      <div class="col-md-3">
                        <label class="form-label mb-0 mt-2">{{'Enter Captcha' |
                          translate}} <span class="text-red">*</span></label>
                      </div>
                      <div class="col-md-9">
                        <app-manualcaptcha (captchaComplete)="manualCaptchEvent($event)" required
                          [canvasId]="'SubmitTciketWithOtp'"></app-manualcaptcha>
                        <div>
                          @if (captchaMessage) {
                          <span class="text-danger">{{captchaMessage | translate}}</span>
                          }
                        </div>
                      </div>
                    </div>
                  </div>
                  }
                  }
                  <!--- if Enable the Google ReCaptcha --->
                  @if (setting?.CAPTCHATYPE == 'google') {
                  @if (setting?.RECAPTCH_ENABLE_GUEST == 'yes') {
                  <div class="form-group">
                    <div class="row">
                      <div class="col-md-3">
                      </div>
                      <div class="col-md-9">
                        <div class="form-group mb-0 mt-4">
                          <re-captcha #googlerecaptcha name="g-recaptcha-response" required (resolved)="resolved($event)"
                            [siteKey]="setting?.GOOGLE_RECAPTCHA_KEY"></re-captcha>

                          <!-- You can use ngModel on a hidden input field to capture the reCAPTCHA response -->
                          <input type="hidden" name="g-recaptcha-response" [(ngModel)]="captcha"
                            #captchaControl="ngModel" />
                        </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
                        #terms="ngModel" [class.is-invalid]="terms.invalid && terms.touched" ngModel>
                      <span class="custom-control-label">{{'I agree with' | translate}}<a href="{{setting?.terms_url}}"
                          target="_blank" class="text-primary">{{'Terms & 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 class="card-footer">
                    <div class="form-group float-end">
                      <button type="submit"
                        [disabled]="!!haspurchasecode.length ? !licencekeyStatus || nootpTicket.invalid || checkStatus || sendingResponse['opennoOtpticket'] || categoryStatus : nootpTicket.invalid || checkStatus || sendingResponse['opennoOtpticket'] || categoryStatus"
                        class="btn btn-secondary btn-lg purchasecode" id="createticketbtn"> {{'Create Ticket' |
                        translate}} @if (sendingResponse['opennoOtpticket']) {
                        <i class="fa fa-spinner fa-spin mx-1"></i>
                        }</button>
                    </div>
                  </div>
                </form>
              </div>
            </div>
          </div>
          <div class="col-xl-3">
            @if(addspace?.length){
              <div class="card custom-card overflow-hidden card-style-2">
                <div class="swiper-wrapper">
                  <swiper-container #swiperContainer class="swiper mySwiper" space-between="30" slides-per-view="1" [loop]="true" navigation="true"
                    slides-per-group="1" autoplay-delay="2000" autoplay-disable-on-interaction="true">
                    @for(image of addspace;track $index){
                    <swiper-slide>
                      <div class="w-100 br-5swiper-slide"><a [href]="image?.link" target="_blank"><img [src]="url + '/uploads/addspace/' + image.image" alt="Image 380*480"></a></div>
                    </swiper-slide>
                    }
                  </swiper-container>
                </div>
              </div>
              }
          </div>
        </div>
      </div>
    </div>
  </section>
  } @else if (setting?.GUEST_TICKET_OTP != 'yes') {
    
  <section>
    <div class="cover-image sptb">
      <div class="container">
        <div class="row justify-content-center">
          <div class="col-xl-9">
            @if (setting?.businesshourofflinemsg == 'on' && data.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>
            }
            <app-announcement-holiday-banner
            [setting]="data?.setting?.original"
            [user]="data?.user"
            [holidays]="data?.holidays"
            [hideAlertsUntil]="hideAlertsUntils"
            ></app-announcement-holiday-banner>
            <div class="card">
              <div class="card-header  border-0">
                <h4 class="card-title">{{'Guest Ticket' | translate}}</h4>
              </div>
              @if (!showdetail) {
              <form #otpTicket="ngForm" (ngSubmit)="getOtp(otpTicket, 'getOtp')" class="pb-3">
                <div class="card-body pb-0">
                  <div class="form-group">
                    <div class="row">
                      <div class="col-md-3">
                        <label class="form-label mb-0 mt-2">{{'Email' | translate}} <span
                            class="text-red">*</span></label>
                      </div>
                      <div class="col-md-9">
                        <div class="">
                          <input [class.is-invalid]="emailField.invalid && emailField.touched"
                            [class.is-valid]="emailField.valid" required type="email" class="form-control"
                            [placeholder]="'Email' | translate" name="email" value="" id="email" ngModel
                            [disabled]="!emailShow" #emailField="ngModel" pattern="[^@\s]+@[^@\s]+\.[a-zA-Z]{2,}" />
                          @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>
                        <button type="submit" [disabled]="otpTicket.invalid || sendingResponse['getOtp']"
                          class="btn btn-sm btn-primary mt-2" id="sprukoverifybtn">{{'Get OTP'
                          | translate}} @if (sendingResponse['getOtp']) {
                          <i class="fa fa-spinner fa-spin mx-1"></i>
                          }</button>
                      </div>
                    </div>
                  </div>
                  @if (showotpfiled) {
                  <div class="form-group mb-5" id="verifyottp">
                    <div class="row">
                      <div class="col-md-3">
                        <label class="form-label mb-0 mt-2">{{'Verify OTP' | translate}}</label>
                      </div>
                      <div class="col-md-9">
                        <input (keyup)="verifyOtp($event.target)" type="otp number" class="form-control"
                          [placeholder]="'Enter Otp' | translate" name="verifyotp" value="" id="verifyotp" ngModel>
                      </div>
                    </div>
                  </div>
                  }
                </div>
              </form>
              }
              <form #otpTicket="ngForm" (ngSubmit)="openOtpticket(otpTicket, 'otpTicket')">
                <div class="card-body">
                  @if (showdetail) {
                  <div class="form-group">
                    <div class="row">
                      <div class="col-md-3">
                        <label class="form-label mb-0 mt-2">{{'Email' | translate}} <span
                            class="text-red">*</span></label>
                      </div>
                      <div class="col-md-9">
                        <span required class="form-control"> {{emailstored}} </span>
                      </div>
                    </div>
                  </div>
                  }
                  <div class="verifyotp">
                    @if (setting?.cc_email == 'on') {
                    <div class="form-group">
                      <div class="row">
                        <div class="col-md-3">
                          <label class="form-label mb-0 mt-2">{{'CC' | translate}}
                          </label>
                        </div>
                        <div class="col-md-9">
                          <input [disabled]="!showdetail" type="email" class="form-control"
                            [placeholder]="'CC Email' | translate" value name="ccmail" #ccemailField="ngModel"
                            [class.is-invalid]="ccemailField.invalid && ccemailField.touched" [class.is-valid]="ccemailField.valid" id="ccmail" ngModel
                            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-3">
                          <label class="form-label mb-0 mt-2">{{'Subject' | translate}} <span
                              class="text-red">*</span></label>
                        </div>
                        <div class="col-md-9">
                          <input [disabled]="!showdetail" type="text" id="subject" required #subject="ngModel"
                            [class.is-invalid]="subject.invalid && subject.touched"
                            [attr.maxlength]="setting?.TICKET_CHARACTER" class="form-control"
                            [placeholder]="'Subject' | translate" name="subject" value ngModel #subjectField>
                          <small class="text-muted float-end mt-1 subjectmaxtext  text-field" id="subjectmaxtext"
                            [class.is-invalid]="subjectField.value.length >= setting?.TICKET_CHARACTER">{{'Maximum' |
                            translate}} <b>{{setting?.TICKET_CHARACTER}}</b>
                            {{'Characters' | translate}}</small>
                          <div>
                            @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>
                    <div class="form-group">
                      <div class="row">
                        <div class="col-md-3">
                          <label class="form-label mb-0 mt-2">{{'Category' | translate}}<span
                              class="text-red">*</span></label>
                        </div>
                        <div class="col-md-9">
                          <ng-select [disabled]="!showdetail" class="form-control" [items]="data?.categories"
                            #maincategory [placeholder]="'Select category' | translate" [virtualScroll]="true"
                            bindLabel="name" [multiple]="false" [loading]="!data" [searchable]="true"
                            dropdownPosition="auto" bindValue="id" name="category" (load)="categorychange($event)"
                            (change)="categorychange($event)" [ngModel]="null" required #category="ngModel"
                            [class.is-invalid]="category.invalid && category.touched">
                            <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-3">
                          <label class="form-label">{{'Envato Purchase Code' | translate}} <span
                              class="text-red">*</span></label>
                        </div>
                        <div class="col-md-9">
                          <input [disabled]="!showdetail" type="text" class="form-control"
                            (keyup)="envatoVerify($event.target)" name="envato_id" [readOnly]="licencekey ? true : false"
                            required ngModel="{{licencekey}}" #envatokey="ngModel"
                            [class.is-invalid]="envatokey.invalid && envatokey.touched">
                          @if ((envatokey.invalid && envatokey.touched) || envatokey.dirty) {
                          <div>
                            @if (envatokey.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-3">
                          <label class="form-label">{{'Envato Item Name' | translate}} <span
                              class="text-red">*</span></label>
                        </div>
                        <div class="col-md-9">
                          <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-3">
                          <label class="form-label mb-0 mt-2">{{'Subcategory' | translate}}</label>
                        </div>
                        <div class="col-md-9">
                          <ng-select [disabled]="!showdetail" 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-3">
                          <label class="form-label">{{'Projects' | translate}}</label>
                        </div>
                        <div class="col-md-9">
                          <ng-select [disabled]="!showdetail" 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 (data?.customfields?.length) {
                    @for (customfield of data?.customfields; track customfield) {
                    @if (customfield?.status == '1') {
                    <div class="form-group ">
                      <div class="row">
                        <div class="col-md-3">
                          <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-9">
                          @if (customfield.fieldtypes == 'text') {
                          <input [disabled]="!showdetail" 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 [disabled]="!showdetail" 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 [disabled]="!showdetail" name="custom_{{customfield.id}}" maxlength="255"
                            class="form-control" cols="30" rows="4" #c_textare="ngModel"
                            [class.is-invalid]="c_textare.invalid && c_textare.touched"
                            [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">{{'Field is required' | translate}}</small>
                            }
                          </div>
                          }
                          }
                          @if (customfield.fieldtypes == 'select') {
                          <ng-select [disabled]="!showdetail" 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 [disabled]="!showdetail"
                              (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 [disabled]="!showdetail"
                              (click)="customfieldSection(roption, 'custom_'+customfield.id, customfield.fieldtypes)"
                              type="{{customfield.fieldtypes}}" class="custom-control-input"
                              name="custom_{{customfield.id}}">
                            <span class="custom-control-label">{{roption}}</span>
                          </label>
                          }
                          }
                        </div>
                      </div>
                    </div>
                    }
                    }
                    }
                      <div class="form-group ticket-summernote ">
                        <div class="row">
                          <div class="col-md-3">
                            <label class="form-label mb-0 mt-2">{{'Description' | translate}}
                              <span class="text-red">*</span></label>
                          </div>
                          <div class="col-md-9">
                            <angular-editor [appMaxLength]="setting?.maxLengthTextField" [appMinLength]="setting?.minLengthTextField" [LengthTextFieldStatus]="setting?.LengthTextFieldStatus"
                              [config]="toolbar" #message="ngModel" ngModel
                              [class.is-invalid]="message.invalid && message.touched" required class="form-control"
                              [placeholder]="'Message' | translate" name="message"></angular-editor>
                            @if (message.errors?.['minLength'] && message.touched) {
                            <div class="limit-error">{{' Minimum Characters are required' | translate}}</div>
                            }
                            @if (message.errors?.['maxLength']) {
                            <div class="limit-error">
                              {{ message.errors?.['maxLength'].actualLength }}/{{ message.errors?.['maxLength'].maxLength }}
                              {{' exceeded the limit' | translate}}
                            </div>
                            }
                            @if ((message.invalid && message.touched) || message.dirty) {
                            <div>
                              @if (message.errors?.['required']) {
                              <small class="text-danger">{{'Message is required' | translate}}</small>
                              }
                            </div>
                            }
                          </div>
                        </div>
                      </div>
                    @if (setting?.GUEST_FILE_UPLOAD_ENABLE == 'yes') {
                    <div class="form-group">
                      <div class="row">
                        <div class="col-md-3">
                          <label class="form-label mb-0 mt-2">{{'Upload Image' |
                            translate}}</label>
                        </div>
                        <div class="col-md-9">
                          <app-image-upload [disabled]="!showdetail" [setting]="setting"
                            (onImageUploaded)="onImageUploaded($event)"></app-image-upload>
                          <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>
                    }
                    @if (setting?.CAPTCHATYPE == 'manual') {
                    @if (setting?.RECAPTCH_ENABLE_GUEST == 'yes') {
                    <div class="form-group mt-4">
                      <div class="row">
                        <div class="col-md-3">
                          <label class="form-label mb-0 mt-2">{{'Enter Captcha' |
                            translate}} <span class="text-red">*</span></label>
                        </div>
                        <div class="col-md-9">
                          <app-manualcaptcha [disabled]="!showdetail" (captchaComplete)="manualCaptchEvent($event)"
                            required [canvasId]="'SubmitTciketWithoutOtp'"></app-manualcaptcha>
                          <div>
                            @if (captchaMessage) {
                            <span class="text-danger">{{captchaMessage | translate}}</span>
                            }
                          </div>
                        </div>
                      </div>
                    </div>
                    }
                    }
                    <!--- if Enable the Google ReCaptcha --->
                    @if (setting?.CAPTCHATYPE == 'google') {
                    @if (setting?.RECAPTCH_ENABLE_GUEST == 'yes') {
                    <div class="form-group">
                      <div class="row">
                        <div class="col-md-3">
                        </div>
                        <div class="col-md-9">
                          <div class="form-group mb-0 mt-4">
                            <re-captcha #googlerecaptcha name="g-recaptcha-response" required
                              (resolved)="resolved($event)" [siteKey]="setting?.GOOGLE_RECAPTCHA_KEY"></re-captcha>

                            <!-- You can use ngModel on a hidden input field to capture the reCAPTCHA response -->
                            <input type="hidden" name="g-recaptcha-response" [(ngModel)]="captcha"
                              #captchaControl="ngModel" />
                          </div>
                        </div>
                      </div>
                    </div>
                    }
                    }
                    <div class="form-group">
                      <label class="custom-control form-checkbox">
                        <input type="checkbox" class="custom-control-input " [disabled]="!showdetail" 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="{{setting?.terms_url}}"
                            class="text-primary">{{'Terms & 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>
                <div class="verifyotp">
                  <div class="card-footer">
                    <div class="form-group float-end">
                      <button type="submit" class="btn btn-secondary btn-lg purchasecode"
                        [disabled]="!!haspurchasecode.length ? !licencekeyStatus || otpTicket.invalid || checkStatus || sendingResponse['otpTicket'] || categoryStatus || !showdetail : otpTicket.invalid || checkStatus || sendingResponse['otpTicket'] || categoryStatus || !showdetail"
                        id="createticketbtn"><i class="fa fa-paper-plane-o me-1"></i> {{'Create Ticket' | translate}} @if
                        (sendingResponse['otpTicket']) {
                        <i class="fa fa-spinner fa-spin mx-1"></i>
                        }</button>
                    </div>
                  </div>
                </div>
              </form>
            </div>
          </div>
          <div class="col-xl-3">
            @if(addspace?.length){
              <div class="card custom-card overflow-hidden card-style-2">
                <div class="swiper-wrapper">
                  <swiper-container #swiperContainer class="swiper mySwiper" space-between="30" slides-per-view="1" [loop]="true" navigation="true"
                    slides-per-group="1" autoplay-delay="2000" autoplay-disable-on-interaction="true">
                    @for(image of addspace;track $index){
                    <swiper-slide>
                      <div class="w-100 br-5swiper-slide"><a [href]="image?.link" target="_blank"><img [src]="url + '/uploads/addspace/' + image.image" alt="Image 380*480"></a></div>
                    </swiper-slide>
                    }
                  </swiper-container>
                </div>
              </div>
              }
          </div>
        </div>
      </div>
    </div>
  </section>
  <!--Section-->
  }
}
@else {
<section>
  <div class="cover-image sptb">
    <div class="container">
      <div class="row justify-content-center">
        <div class="col-xl-9">
          <div class="card">
            <div class="card-header  border-0">
              <h4 class="card-title">{{'Guest Ticket' | translate}}</h4>
            </div>

            <div class="card-body">
              <div class="form-group">
                <div class="row">
                  <div class="col-md-3">
                    <label class="form-label mb-0 mt-2">{{'Email' | translate}} <span class="text-red">*</span></label>
                  </div>
                  <div class="col-md-9">
                    <span class="line-skeleton w-100 d-block mx-auto mb-2 h-6"></span>
                  </div>
                </div>
              </div>
              <div class="form-group ">
                <div class="row">
                  <div class="col-md-3">
                    <label class="form-label mb-0 mt-2">{{'Subject' | translate}} <span
                        class="text-red">*</span></label>
                  </div>
                  <div class="col-md-9">
                    <span class="line-skeleton w-100 d-block mx-auto mb-2 h-6"></span>
                  </div>
                </div>
              </div>
              <div class="form-group">
                <div class="row">
                  <div class="col-md-3">
                    <label class="form-label mb-0 mt-2">{{'Category' | translate}}<span
                        class="text-red">*</span></label>
                  </div>
                  <div class="col-md-9">
                    <span class="line-skeleton w-100 d-block mx-auto mb-2 h-6"></span>
                  </div>
                </div>
              </div>
              <div class="form-group ticket-summernote ">
                <div class="row">
                  <div class="col-md-3">
                    <label class="form-label mb-0 mt-2">{{'Description' | translate}}
                      <span class="text-red">*</span></label>
                  </div>
                  <div class="col-md-9">
                    <span class="line-skeleton w-100 d-block mx-auto mb-2 h-250"></span>
                  </div>
                </div>
              </div>
              <div class="form-group ">
                <div class="row">
                  <div class="col-md-3">
                    <label class="form-label mb-0 mt-2">{{'Upload Image' | translate}}
                      <span class="text-red">*</span></label>
                  </div>
                  <div class="col-md-9">
                    <span class="line-skeleton w-100 d-block mx-auto mb-2 h-9"></span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

}

<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">
    <div class="card">
      <div class="card-body pt-0 pb-0 px-4 notify-days-container show-days">
        <app-business-hour-card-list [setting]="setting" [businesshours]="businesshours"></app-business-hour-card-list>
      </div>
    </div>
  </div>
</ng-template>