@extends('buyers_sellers.layout2.master')
@section('title', 'Home')
<style>
    body {
  margin: 40px;
}

.rating {
  margin-top: 40px;
  border: none;
  float: left;
}

.rating > label {
  color: #90A0A3;
  float: right;
}

.rating > label:before {
  margin: 5px;
  font-size: 2em;
  font-family: FontAwesome;
  content: "\f005";
  display: inline-block;
}

.rating > input {
  display: none;
}

.rating > input:checked ~ label,
.rating:not(:checked) > label:hover,
.rating:not(:checked) > label:hover ~ label {
  color: #F79426;
}

.rating > input:checked + label:hover,
.rating > input:checked ~ label:hover,
.rating > label:hover ~ input:checked ~ label,
.rating > input:checked ~ label:hover ~ label {
  color: #FECE31;
}
</style>
@section('content')

    <div class="py-5">
        <div class="container">
            <div class="row">
                <!-- Main Content -->
                <main class="col col-xl-6 order-xl-2 col-lg-12 order-lg-1 col-md-12 col-sm-12 col-12">
                    <div class="box mb-3 shadow-sm border  bg-white osahan-post">
                        {{-- <div class="p-3 d-flex align-items-center border-bottom osahan-post-header">
                            <div class="dropdown-list-image mr-3">
                                <img class="-circle" src="img/p6.png" alt="">
                                <div class="status-indicator bg-success"></div>
                            </div>
                            <div class="font-weight-bold">
                                <div class="text-truncate">Collin Weiland</div>
                                <div class="small text-gray-500">Web Developer @Google</div>
                            </div>
                            <span class="ml-auto small">3 hours</span>
                        </div>
                        <div class="p-3 border-bottom osahan-post-body">
                            <p>Lorem ipsum dolor sit amet, consectetur 😍😎 adipisicing elit, sed do eiusmod tempo
                                incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
                                exercitation ullamco <a href="#">laboris consequat.</a></p>
                            <img src="img/post1.png" class="img-fluid" alt="Responsive image">
                        </div>
                        <div class="p-3 border-bottom osahan-post-footer">
                            <a href="#" class="mr-3 text-secondary"><i class="feather-heart text-danger"></i> 16</a>
                            <a href="#" class="mr-3 text-secondary"><i class="feather-message-square"></i> 8</a>
                            <a href="#" class="mr-3 text-secondary"><i class="feather-share-2"></i> 2</a>
                        </div> --}}
                        <div class="p-3 d-flex align-items-top border-bottom osahan-post-comment">
                            <div class="dropdown-list-image mr-3">
                                {{-- <img class="-circle" src="img/p7.png" alt=""> --}}
                                {{-- <div class="status-indicator bg-success"></div> --}}
                            </div>
                            <div class="font-weight-bold">
                                <div class="text-truncate"> {{ $data->user->full_name }} <span class="float-right small"></span></div>
                                <div class="small text-gray-500">{{ $data->name }}</div>
                            </div>
                        </div>
                        
                        <div class="p-3">
                            <form action="{{ route('buyer.rating.reviews') }}" method="post" id="ratingform">
                                @csrf
                                <input type="hidden" value="{{ $data->id }}" name="service_id" >
                                <input type="hidden" value="{{ $jobid }}" name="job_id" >

                                
                            <div class="rating">
                                <input type="radio" id="star5" name="rating" value="5" />
                                <label class="star" for="star5" title="Awesome" aria-hidden="true"></label>
                                <input type="radio" id="star4" name="rating" value="4" />
                                <label class="star" for="star4" title="Great" aria-hidden="true"></label>
                                <input type="radio" id="star3" name="rating" value="3" />
                                <label class="star" for="star3" title="Very good" aria-hidden="true"></label>
                                <input type="radio" id="star2" name="rating" value="2" />
                                <label class="star" for="star2" title="Good" aria-hidden="true"></label>
                                <input type="radio" id="star1" name="rating" value="1" checked/>
                                <label class="star" for="star1" title="Bad" aria-hidden="true"></label>
                              </div>
                                {{-- <textarea name="comment" placeholder="Add Comment..." class="form-control border-0 p-0 shadow-none" rows="1"></textarea>
                                <br>
                                <button type="submit">comment</button> --}}
                            </form>
                        </div>
                    </div>
                </main>
                <aside class="col col-xl-3 order-xl-1 col-lg-6 order-lg-2 col-md-6 col-sm-6 col-12">
                    {{-- <div class="box mb-3 shadow-sm border  bg-white profile-box text-center">
                       <div class="p-5">
                          <img src="{{asset('assets/buyers_sellers/img/clogo2.png')}}" class="img-fluid" alt="Responsive image">
                       </div>
                       <div class="p-3 border-top border-bottom">
                          <h5 class="font-weight-bold text-dark mb-1 mt-0">Envato</h5>
                          <p class="mb-0 text-muted">Melbourne, AU
                          </p>
                       </div>
                       <div class="p-3">
                          <div class="d-flex align-items-top mb-2">
                             <p class="mb-0 text-muted">Posted</p>
                             <p class="font-weight-bold text-dark mb-0 mt-0 ml-auto">1 day ago</p>
                          </div>
                          <div class="d-flex align-items-top">
                             <p class="mb-0 text-muted">Applicant Rank</p>
                             <p class="font-weight-bold text-dark mb-0 mt-0 ml-auto">25</p>
                          </div>
                       </div>
                    </div> --}}
                 </aside>
            </div>
        </div>
    </div>
@endsection
@section('scripts')
<script>
    $(document).ready(function(){
        $("input[name='rating']").on('click',function(){
            $('#ratingform').submit();
        });
    });
</script>
@endsection