@extends('layouts.member.rattingshell')

@section('content')
<section class="main">
    <div class="content">
        <h4 class="spage-title text-center" style="color:black;">{{__('member_ratting.replyrating')}}</h4>
        <!-- 帳號資料區塊 -->
        <div class="bg-box-1 m-0auto mw-50r">
            {!!__('member_ratting.hellouser')!!}
            <hr>

            <form action="/saveratting" method="POST">
                @csrf
                <div class="rating-box">
                    <h6>{{__('member_ratting.video_quality')}} <input class="rating-input" name="videorating" type="text" readonly id="dataInput1" required></h6>
                    <div id="ratingVideo"></div>
                </div>

                <div class="dashed-border"></div>

                <div class="rating-box">
                    <h6>{{__('member_ratting.audio_quality')}} <input class="rating-input" name="audiorating" type="text" readonly id="dataInput2" required></h6>
                    <div id="ratingSound"></div>
                </div>

                <!-- <div class="dashed-border"></div> -->

                <!-- <div class="rating-box">
                    <h6>是否願意推廣給他人使用： <input class="rating-input" type="text" readonly id="dataInput3"></h6>
                    <div id="ratingPromote"></div>
                </div> -->

                <div class="dashed-border"></div>
                <div class="rating-box">
                    <h6>{{__('member_ratting.replyelse')}}</h6>
                    <textarea class="rating-text" name="message" rows="3" placeholder="{{__('member_ratting.uptoyou')}}"></textarea>
                </div>

                <hr>
                <p class="fs-14 text-center">{{__('member_ratting.endfill')}}</p>
                <div class="d-flex justify-content-center">
                    <button class="btn-normal btn-purple">{{__('member_ratting.filldown')}}</button>
                </div>
            </form>

        </div>
    </div>
</section>
@endsection

@section('jsscript')

<script>
    $("#ratingVideo").rating({
        "star": 5,
        "click": function(e) {
            // console.log(e);
            $("#dataInput1").val(e.stars);
        }
    });
    $("#ratingSound").rating({
        "star": 5,
        "click": function(e) {
            // console.log(e);
            $("#dataInput2").val(e.stars);
        }
    });
    $("#ratingPromote").rating({
        "star": 5,
        "click": function(e) {
            // console.log(e);
            $("#dataInput3").val(e.stars);
        }
    });
</script>

@endsection