<!-- Section -->
<section>
  <img src="./assets/images/photos/banner1.jpg" alt="" class="bannerimg cover-image" loading="lazy" decoding="async">
  <div class="header-text mb-0">
    <div class="container ">
      <div class="row text-white">
        <div class="col">
          <h3 class="mb-0">{{'Rating' | translate}}</h3>
        </div>
        <div class="col col-auto">
          <ol class="breadcrumb text-center">
            <li class="breadcrumb-item">
              <a href="javascript:;" class="text-white-50">{{'Home' | translate}}</a>
            </li>
            <li class="breadcrumb-item active">
              <a href="javascript:;" class="text-white">{{'Rating' | translate}}</a>
            </li>
          </ol>
        </div>
      </div>
    </div>
  </div>
<!-- </div> -->
</section>
<!-- Section -->

<!--Section-->
<section>
  <!--Page header-->
  <div class="row">
    <div class="col-md-12 col-lg-6 col-sm-12 m-auto">
      <div class="row row-sm">
        <div class="col-md-12 m-auto text-center">
          <div class="page-header d-block">
            <div class="page-leftheader">
              <h3 class="text-center">{{ticket.subject}} <strong class="fs-22">#{{ticket.ticket_id}}</strong></h3>
            </div>
          </div>
        </div>
      </div>
      <div class="card">
        <div class="card-header d-block">
          <h4 class="card-title ">{{'We Love Your Feedback!' | translate}}</h4>
          <span class="text-muted">{{'We are always looking for ways to improve and would love to know how we did recently.' | translate}}</span>
        </div>
        <div class="border-top">
          <form #rating="ngForm" (ngSubmit)="ticketRtng(rating, 'ticketRating')">
            <div class="row p-5  m-auto">
              <div class="card-body">
                <div class="form-group mb-5">
                  <label class="ps-1 me-5 text-center">
                    <input #rating="ngModel" [class.is-invalid]="rating.invalid && rating.touched" required type="radio" class="ratingticket" name="ratingticket" value="1" ngModel>
                    <img src="./assets/images/rattings/rating1.png" alt="img" class="w-7 mx-1" loading="lazy" decoding="async">
                    <div class=" p-0 border-top-0 bd-t-0 py-1">
                      <h6 class="mb-0 text-red">{{'Worst' | translate}}</h6>
                    </div>
                  </label>

                  <label class="ps-1 me-5 text-center">
                    <input #rating="ngModel" [class.is-invalid]="rating.invalid && rating.touched" required type="radio" class="ratingticket" name="ratingticket" value="2" ngModel>
                    <img src="./assets/images/rattings/rating2.png" alt="img" class="w-7 mx-1" loading="lazy" decoding="async">
                    <div class="border-top-0 bd-t-0 py-1">
                      <h6 class="mb-0 text-danger">{{'Poor' | translate}}</h6>
                    </div>
                  </label>

                  <label class="ps-1 me-5 text-center">
                    <input #rating="ngModel" [class.is-invalid]="rating.invalid && rating.touched" required type="radio" class="ratingticket" name="ratingticket" value="3" ngModel>
                    <img src="./assets/images/rattings/rating3.png" alt="img" class="w-7 mx-1" loading="lazy" decoding="async">
                    <div class=" p-0 border-top-0 bd-t-0 py-1">
                      <h6 class="mb-0 text-orange">{{'Average' | translate}}</h6>
                    </div>
                  </label>

                  <label class="ps-1 me-5 text-center">
                    <input #rating="ngModel" [class.is-invalid]="rating.invalid && rating.touched" required type="radio" class="ratingticket" name="ratingticket" value="4" ngModel>
                    <img src="./assets/images/rattings/rating4.png" alt="img" class="w-7 mx-1" loading="lazy" decoding="async">
                    <div class=" p-0  border-top-0 bd-t-0 py-1">
                      <h6 class="mb-0 text-yellow">{{'Good' | translate}}</h6>
                    </div>
                  </label>

                  <label class="ps-1 me-5 text-center">
                    <input #rating="ngModel" [class.is-invalid]="rating.invalid && rating.touched" required type="radio" class="ratingticket" name="ratingticket" value="5" ngModel>
                    <img src="./assets/images/rattings/rating5.png" alt="img" class="w-7 mx-1" loading="lazy" decoding="async">
                    <div class=" p-0 border-top-0 bd-t-0 py-1">
                      <h6 class="mb-0 text-success">{{'Excellent' | translate}}</h6>
                    </div>
                  </label>
                  @if ((rating.invalid && rating.touched) || rating.dirty) {
                    <div>
                      @if (rating.errors?.['required']) {
                        <small class="text-danger">{{'Rating is required' | translate}}</small>
                      }
                    </div>
                  }
                </div>
                <div class="form-group">
                  <p>{{'Add a Comment about the quality of support you received (optional):' | translate}}</p>
                  <textarea name="ratingcomment" class="form-control"  cols="30" rows="5"></textarea>
                </div>
              </div>
            </div>
            <div class="card-footer">
              <div class="form-group float-end">
                <input [disabled]="rating.invalid || sendingResponse['ticketRating']" type="submit" value="{{'Submit' | translate}}" class="btn btn-secondary">
                @if (sendingResponse['ticketRating']) {
                  <i class="fa fa-spinner fa-spin mx-1"></i>
                }
              </div>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
  <!-- End Row-->
</section>
<!--Section-->