@extends('user.header')
@section('userContent')
  <div class="content-wrapper rounded15 p-0 p-md-10" style="min-height: 630px;">
    <div class="container-full">
      <section class="content">
        @include('extensions.alerts')

        <div class="row">
          <div class="col-md-12">
            <div class="box">
              <div class="box-header with-border">
                <h4 class="box-title">{{ isset($testimonial) ? 'Edit' : 'Add' }} Testimonial</h4>
              </div>
              <div class="box-body">
                <!-- Tab panes -->
                <form
                  action="{{ isset($testimonial)? route('admin.testimonials.update', $testimonial->id): route('admin.testimonials.store') }}"
                  method="post" id="category" enctype="multipart/form-data">
                  @csrf
                  @if (isset($testimonial))
                    @method('PATCH')
                  @endif
                  <div class="tab-content">
                    <div class="tab-pane active" id="home4" role="tabpanel">
                      <div class="col-sm-12">
                        <div class="row grey-bg-clr">
                          <h5 class="mb-0">Testimonial Info</h5>
                          <div class="col-md-12">
                            <hr>
                          </div>
                          <div class="clearfix"></div>
                          <div class="col-md-3">
                            <div class="form-group">
                              <label class="form-label">Rating *</label>
                              <div class="star-rating">
                                <span class="fa fa-star-o" data-rating="1"></span>
                                <span class="fa fa-star-o" data-rating="2"></span>
                                <span class="fa fa-star-o" data-rating="3"></span>
                                <span class="fa fa-star-o" data-rating="4"></span>
                                <span class="fa fa-star-o" data-rating="5"></span>
                                <input type="hidden" name="rating" class="rating-value"
                                  value="@if (isset($testimonial)) {{ $testimonial->rating }}@else{{ old('rating') }} @endif">
                              </div>
                            </div>
                          </div>
                          <div class="col-md-3">
                            <div class="form-group">
                              <label class="form-label">Name *</label>
                              <div class="input-group mb-3">
                                <span class="input-group-text"><i class="fa fa-angle-double-right"></i></span>
                                <input type="text" class="form-control" name="name" id="name" maxlength="100"
                                  value="@if (isset($testimonial)) {{ $testimonial->name }}@else{{ old('name') }} @endif"
                                  placeholder="">
                              </div>
                            </div>
                          </div>
                          <div class="col-md-3">
                            <div class="form-group">
                              <label class="form-label">From</label>
                              <div class="input-group mb-3">
                                <span class="input-group-text"><i class="fa fa-angle-double-right"></i></span>
                                <input type="text" class="form-control" name="country" maxlength="100"
                                  value="@if (isset($testimonial)) {{ $testimonial->country }}@else{{ old('country') }} @endif"
                                  placeholder="Facebook, Linkedin, Twitter, Instagram">
                              </div>
                            </div>
                          </div>
                          <div class="col-md-3">
                            <div class="form-group">
                              <label for="formFileSm" class="form-label ">Icon [MAX: 2MB]</label>
                              <input class="form-control" id="formFileSm" name="testimonial_icon" type="file"
                                accept="image/*">
                            </div>
                          </div>
                          <div class="col-12 mt-30">
                            <h5 class="mb-3">Content</h5>
                            <div class="col-md-12">
                              <textarea name="content" class="form-control" maxlength="300" rows="5">@if (isset($testimonial))
  {{ $testimonial->content }}@else{{ old('content') }}
  @endif</textarea>
                              <hr>
                            </div>
                            <div class="clearfix"></div>
                          </div>
                          {{-- <div class="col-md-6">
                          <div class="form-group">
                            <label class="form-label ">Position</label>
                            <select class="form-select" name="position">
                              <option name="About Us page">About Us page</option>
                              <option name="Testimonials page">Testimonials page</option>
                              <option name="Via Community page">Via Community page</option>
                              <option name="Emergency Breakdown page">Emergency Breakdown page</option>
                            </select>
                          </div>
                          </div> --}}

                        </div>
                      </div>
                      <div class="row mt-20">
                        <hr>
                        <div class="col-md-12 pull-right">
                          <div class="clearfix">
                            <button type="submit" class="waves-effect waves-light btn btn-dark mb-5 category"><i
                                class="fa fa-check"></i> Save</button>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </form>
              </div>
            </div>
            <!-- /.box -->
          </div>
        </div>
      </section>
    </div>
  </div>
  <script type="text/javascript">
    $('#summernote').summernote({
      placeholder: 'Please enter your category content here.',
      tabsize: 2,
      height: 250,
      toolbar: [
        ['style', ['style']],
        ['font', ['bold', 'underline', 'clear']],
        ['color', ['color']],
        ['para', ['ul', 'ol', 'paragraph']],
        ['table', ['table']],
        ['view', ['codeview', 'help']]
      ]
    });
    var $star_rating = $('.star-rating .fa');

    var SetRatingStar = function() {
      return $star_rating.each(function() {
        if (parseInt($star_rating.siblings('input.rating-value').val()) >= parseInt($(this).data('rating'))) {
          return $(this).removeClass('fa-star-o').addClass('fa-star');
        } else {
          return $(this).removeClass('fa-star').addClass('fa-star-o');
        }
        document.querySelector('.rating-value').value = parseInt($(this).data('rating'));
      });
    };

    $star_rating.on('click', function() {
      $star_rating.siblings('input.rating-value').val($(this).data('rating'));

      return SetRatingStar();
    });

    SetRatingStar();
  </script>
@endsection