@extends('frontend.layouts.app')

@section('title', app_name() . ' | ' . __('navs.frontend.dashboard') )

@section('content')
    <div class="row mb-4">
    <div class="header header-top">
        <a href="{{ url('/dashboard') }}" class="header-menu"><i class="fa fa-arrow-left"></i></a>
            <h2 class="page-title">Rate and Review</h2>
        </div><!-- header -->
        <div class="main-content">
            <div class="container-fluid text-center">
                <p class="thanku-block">Thanks For Rating Us</p>
                <p><strong>Rating</strong></p>
                <div class="rating-star-block">
                    <ul id='stars'>
                        <li class='star' title='Poor' data-value='1'>
                            <i class='fa fa-star fa-fw'></i>
                        </li>
                        <li class='star' title='Fair' data-value='2'>
                            <i class='fa fa-star fa-fw'></i>
                        </li>
                        <li class='star' title='Good' data-value='3'>
                            <i class='fa fa-star fa-fw'></i>
                        </li>
                        <li class='star' title='Excellent' data-value='4'>
                            <i class='fa fa-star fa-fw'></i>
                        </li>
                        <li class='star' title='WOW!!!' data-value='5'>
                            <i class='fa fa-star fa-fw'></i>
                        </li>
                    </ul>
                </div>
                <div class="form-group">
                    <label class="pt-5">Add Your Comments</label>
                    <textarea name="comment" id="comment" class="form-control" placeholder="Leave a comment"></textarea>
                </div><!-- form-group -->
                <input type="hidden" name="rating" id="rating" value="0">
            </div>
        </div><!-- main-content -->
        <div class="footer">
            <a href="javascript:void(0)" class="block-btn submit_btn">Submit</a>       
        </div><!-- footer -->
    </div><!-- row -->
<div class="loader-main">
            <div class="loading-wrapper">
              <div class="loading-bar"></div>
              <div class="loading-bar"></div>
              <div class="loading-bar"></div>
              <div class="loading-bar"></div>
            </div>
    </div>
<script type="text/javascript">
    $(function(){
        $('#stars li').on('mouseover', function(){
            var onStar = parseInt($(this).data('value'), 10); // The star currently mouse on
           
            // Now highlight all the stars that's not after the current hovered star
            $(this).parent().children('li.star').each(function(e){
              if (e < onStar) {
                $(this).addClass('hover');
              }
              else {
                $(this).removeClass('hover');
              }
            });
            
        }).on('mouseout', function(){
            $(this).parent().children('li.star').each(function(e){
              $(this).removeClass('hover');
            });
        });
          
          
        /* 2. Action to perform on click */
        $('#stars li').on('click', function(){
            var onStar = parseInt($(this).data('value'), 10); // The star currently selected
            var stars = $(this).parent().children('li.star');
            
            for (i = 0; i < stars.length; i++) {
              $(stars[i]).removeClass('selected');
            }
            
            for (i = 0; i < onStar; i++) {
              $(stars[i]).addClass('selected');
            }
            
            // JUST RESPONSE (Not needed)
            var ratingValue = parseInt($('#stars li.selected').last().data('value'), 10);
            console.log(ratingValue);
            $('#rating').val(ratingValue);
        });

        $('.submit_btn').click(function(){
            if($.trim($("#comment").val())!='') {
                $('.loader-main').css('display','inline-block');
                $.ajax({
                    url: "{{url('quotation-rating/'.base64_decode($quotations).'/'.base64_decode($serviceProviders))}}",
                    type: 'POST',
                    data: {
                            _token: "{{ csrf_token() }}",
                            comment: $.trim($("#comment").val()),
                            rating: $.trim($("#rating").val()),
                            quotation_id: "{{$quotations}}",
                            service_provider_id: "{{$serviceProviders}}",
                        },
                    success: function(res){
                        if(res==1) {
                            $('.loader-main').css('display','none');
                            window.location.href="{{route('frontend.user.quotation.list')}}";
                        } else {
                            alert('Something wrong....');
                            $('.loader-main').css('display','none');
                        }
                    }
                })
            } else {
                alert('Please put comment....');
            }
        })
    })

</script>
@endsection