<!-- Section -->
<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>{{'Contact Us' | 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">{{'Contact Us' | translate}}</a>
              </li>
            </ol>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>
<!-- Section -->

<!--Contact Us Page-->
<section>
  <div class="cover-image sptb">
    <div class="container">
      <div class="row">
        <div class="col-lg-6 col-xl-6 col-md-12 mx-auto d-block">
          <div class="card mb-0">
            <div class="card-body">
              <h3 class="font-weight-semibold2 mb-5">{{'Let’s get in Touch' | translate}}</h3>
              <form #contactUs="ngForm" (ngSubmit)="submitContactUs(contactUs, 'submitContact')">
                <div class="form-group">
                  <input class="form-control" required placeholder="{{'Name' | translate}}" type="text" name="name"
                    value ngModel>
                </div>
                <div class="form-group">
                  <input class="form-control" required placeholder="{{'Email' | translate}}" type="email" name="email"
                    value ngModel #c_email="ngModel" [class.is-invalid]="c_email.invalid && c_email.touched"
                    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>
                  }
                </div>
                <div class="form-group">
                  <input class="form-control" required placeholder="{{'Mobile Number' | translate}}" type="text"
                    name="phone_number" value ngModel>
                </div>
                <div class="form-group">
                  <input required [attr.maxlength]="contact?.setting?.original?.TICKET_CHARACTER" class="form-control"
                    placeholder="{{'Subject' | translate}}" type="text" name="subject" value ngModel #subjectField>
                  <small class="text-muted float-end my-1 text-field"
                    [class.is-invalid]="subjectField.value.length >= contact?.setting?.original?.TICKET_CHARACTER"
                    id="subjectmaxtext">{{'Maximum'| translate}}
                    <b>{{contact?.setting?.original?.TICKET_CHARACTER}}</b> {{'Characters' |
                    translate}}</small>
                </div>
                <div class="form-group">
                  <textarea class="form-control" required placeholder="{{'Message' | translate}}" rows="6"
                    name="message" ngModel>
                  </textarea>
                </div>
                @if (contact?.setting?.original?.CAPTCHATYPE == 'manual') {
                @if (contact?.setting?.original?.RECAPTCH_ENABLE_CONTACT == 'yes') {
                <div class="form-group row">
                  <app-manualcaptcha (captchaComplete)="manualCaptchEvent($event)" required
                    [canvasId]="'ContactUs'"></app-manualcaptcha>
                  <div>
                    @if (captchaMessage) {
                    <span class="text-danger">{{captchaMessage | translate}}</span>
                    }
                  </div>
                </div>
                }
                }

                <!--- if Enable the Google ReCaptcha --->
                <div class="form-group">
                  @if (contact?.setting?.original?.CAPTCHATYPE == 'google') {
                  @if (contact?.setting?.original?.RECAPTCH_ENABLE_CONTACT == 'yes') {
                  <re-captcha #googlerecaptcha name="g-recaptcha-response" required (resolved)="resolved($event)"
                    [siteKey]="contact?.setting?.original?.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>
                <!--- End Google ReCaptcha --->

                <div class="text-start">
                  <input [disabled]="sendingResponse['submitContact'] || contactUs.invalid"
                    class="btn btn-secondary waves-effect waves-light" value="{{'Send Message' | translate}}"
                    type="submit">
                  @if (sendingResponse['submitContact']) {
                  <i class="fa fa-spinner fa-spin mx-1"></i>
                  }
                </div>
              </form>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>
<!--Contact Us Page-->