@extends('layouts.welcomelayouts.app')
@section('title')
<title>My Balance | subtitle</title>
@endsection
@section('SEO')
<meta name="description" content="">
<meta name="keywords" content="">
<meta property="og:title" content="">
<meta property="og:description" content="">
<meta property="og:image" content="">
<meta property="og:url" content="">
@endsection
@push('css')

<style>
    

.review-pro{
  cursor: pointer;
}
.review-pro a{
  text-decoration: none;
}

.rating-review {
  /*unicode-bidi: bidi-override;
  direction: rtl;
  font-size: 22px; */
  /*margin-top: -6px;*/


}
.rating-review > span {
  /*display: inline-block;
  position: relative;*/
  /*width: 1.1em;*/
  /*color: #f37022;*/



}
.rating-review> span:before, .rating-review > span:before{
  /*content: "\2605";
   position: absolute;*/

}

.r-fill:before{
  content: "\2605";
  position: absolute;
}



.rating-review {
  unicode-bidi: bidi-override;
  direction: rtl;
  cursor: pointer;

}
.rating-review > span {
  display: inline-block;
  position: relative;
  font-size: 24px;
  /*width: 1.1em;*/
}
.rating-review > span:hover:before,
.rating-review > span:hover ~ span:before {
   content: "\2605";
   position: absolute;
}

.customer-review-heading{
  border-bottom: 2px solid #d7d7d7;
}
.top-customer-review{
  font-weight: bolder;
}
.review-by a{
  text-decoration: none;
}
.review-descr{
  font-size:   10pt;
    line-height: 10pt;
}
.usersidebardiv{
    padding:0;
}
@media only screen and (max-width: 600px) {
  .usersidebardiv {
    padding: 15px;
  }
}

</style>

@endpush
@section('contents')
<div class="userdashboard">
    <div class="container">
    <div class="row" style="margin:0;">
        <div class="col-md-3 usersidebardiv">
            <div class="usersidebar">
                @include('users.include.sidebar')
            </div>
        </div>
        <div class="col-md-9">
            <div class="usercontent">
                <div class="myrecentorder">
                    <p style="font-weight: bold;border-bottom: 1px solid #eaeded;padding: 5px 0;">Review of prodcut ID#{{ $product->id }} {{ $product->title }}</p>






<div class="row">
    <div class="col-md-12">

        <img class="img-thumbnail" src="{{ route('imagecache', [ 'template'=>'ppsm','filename' => $product->usliveFi() ]) }}" alt=""> 
        {{ $product->title }}

    <br> <br>
      <h4 class="customer-review-heading" >Product Review</h4>

      @foreach(Auth::user()->reviews()->whereProductId($product->id)->latest()->paginate(5) as $review)

      @if($review->user->hasRatingProduct($product))

      <span class="rating" style="font-size: 22px;color:red;letter-spacing:-3px;">
      @if($review->user->productRating($product) == 5)
    <span class="r-fill">☆</span>
        <span class="r-fill">☆</span>
        <span class="r-fill">☆</span>
        <span class="r-fill">☆</span>
    <span class="r-fill">☆</span>     
  @elseif($review->user->productRating($product) == 4)
    <span class="r-fill">☆</span>
        <span class="r-fill">☆</span>
        <span class="r-fill">☆</span>
        <span class="r-fill">☆</span>
      <span>☆</span>
  @elseif($review->user->productRating($product) == 3)
    <span class="r-fill">☆</span>
        <span class="r-fill">☆</span>
        <span class="r-fill">☆</span>
      <span>☆</span>
      <span>☆</span>
  @elseif($review->user->productRating($product) == 2)
    <span class="r-fill">☆</span>
        <span class="r-fill">☆</span>
      <span>☆</span>
      <span>☆</span>
      <span>☆</span>
  @elseif($review->user->productRating($product) == 1)
    <span class="r-fill">☆</span>
      <span>☆</span>
      <span>☆</span>
      <span>☆</span>
      <span>☆</span>
  @endif
      
      </span> &nbsp;

      @endif

      <br>
      By <b class="review-by"><a href="#">{{$review->user->name}}</a></b> <small><i class="fa fa-clock-o"></i> {{$review->created_at->toDateString()}} 
        {{-- ({{ $review->published ? 'Published' : 'Pending' }}) --}}
    </small> <br>
<span class="review-descr text-justify">
{{$review->comment}} 
</span> <br>

@endforeach
<br> <br>

<span id="review-area"></span>




<div class="card card-default">
  <div class="card-body">

  @include('alerts.alerts')

  <form class="form-horizontal" method="post" action="{{route('user.createReview',['product'=>$product])}}">
  <div class="form-group">
    <label class="control-label col-md-12" for="text">Product Rating</label>
    <div class="col-md-10">

    <span class="pr-rating-area" style="font-size: 24px;color:red;letter-spacing:-2px;">
    
    @include('users.include.productRatingPart')
    </span>

      @csrf
      
      
    </div>
  </div>

  <div class="form-group">
    <label class="control-label col-md-3" for="comment">Review Comment</label>
    <div class="col-md-9"> 
      <textarea placeholder="Review Details" class="form-control" rows="3" id="comment" name="comment" required>{{old('comment')}}</textarea>
    </div>
  </div>
  <div class="form-group"> 
    <div class="col-md-offset-3 col-md-9">
      <button type="submit" class="btn btn-primary">Submit</button>
    </div>
  </div>
</form>



  </div>
</div>
 


   
    </div>
  </div>


            </div>
        </div>
    </div>
    </div>
</div>
</div>
@endsection
@push('js')

<script type="text/javascript">
  $(function(){

      $(document).on("click",".pr-rating",function(e){
        e.preventDefault();
        var url = $(this).attr('data-url');
        // alert(url);

        $.ajax({
          url: url,
          type: 'Post',
          dataType: 'json'
        })
        .done(function(response) {

          $(".pr-rating-area").empty().append(response.page);


        })
        .fail(function() {
          alert("error");
      });
        
  });


      $(".review-btn").click(function() {
          $('html, body').animate({
              scrollTop: $('#review-area').offset().top
          }, 2000);
      });



      ////////////////////////////////////
      
  

 /////////////////////////////

  });
</script>
@endpush