@extends('apex-layouts.main')
@section('pageTitle','Meal Review')

<style type="text/css">
    /*
        Use :not with impossible condition so inputs are only hidden
        if pseudo selectors are supported. Otherwise the user would see
        no inputs and no highlighted stars.
    */
    .rating input[type="radio"]:not(:nth-of-type(0)) {
        /* hide visually */
        border: 0;
        clip: rect(0 0 0 0);
        height: 1px;
        margin: -1px;
        overflow: hidden;
        padding: 0;
        position: absolute;
        width: 1px;
    }
    .rating [type="radio"]:not(:nth-of-type(0)) + label {
        display: none;
    }

    label[for]:hover {
        cursor: pointer;
    }

    .rating .stars label:before {
        content: "★";
        font-size: 50px;
    }

    .stars label {
        color: lightgray;
    }

    .stars label:hover {
        text-shadow: 0 0 1px #000;
        color: orange;
    }

    .rating [type="radio"]:nth-of-type(1):checked ~ .stars label:nth-of-type(-n+1),
    .rating [type="radio"]:nth-of-type(2):checked ~ .stars label:nth-of-type(-n+2),
    .rating [type="radio"]:nth-of-type(3):checked ~ .stars label:nth-of-type(-n+3),
    .rating [type="radio"]:nth-of-type(4):checked ~ .stars label:nth-of-type(-n+4),
    .rating [type="radio"]:nth-of-type(5):checked ~ .stars label:nth-of-type(-n+5) {
        color: orange;
    }

    .rating [type="radio"]:nth-of-type(1):focus ~ .stars label:nth-of-type(1),
    .rating [type="radio"]:nth-of-type(2):focus ~ .stars label:nth-of-type(2),
    .rating [type="radio"]:nth-of-type(3):focus ~ .stars label:nth-of-type(3),
    .rating [type="radio"]:nth-of-type(4):focus ~ .stars label:nth-of-type(4),
    .rating [type="radio"]:nth-of-type(5):focus ~ .stars label:nth-of-type(5) {
        color: darkorange;
    }
</style>


@section('content')

    <div class="row match-height">
        <div class="col-md-12">
            <div class="card">
                <div class="card-header">
                </div>
                <div class="card-content">
                    <div class="px-3">

{{--                        <form method="post" class="form" action="{{route('members.updateShowResetPassword')}}">--}}
                        <form method="post" class="form" action="#">
                            @csrf
                            <div class="row justify-content-md-center">
                                <div class="col-md-6">
                                    <div class="form-body">
                                        <fieldset class="rating" >
                                            <label for="review_id">Rating</label>

                                            <input id="demo-1" type="radio" name="rate" value="1">
                                            <label for="demo-1">1 star</label>
                                            <input id="demo-2" type="radio" name="rate" value="2">
                                            <label for="demo-2">2 stars</label>
                                            <input id="demo-3" type="radio" name="rate" value="3">
                                            <label for="demo-3">3 stars</label>
                                            <input id="demo-4" type="radio" name="rate" value="4">
                                            <label for="demo-4">4 stars</label>
                                            <input id="demo-5" type="radio" name="rate" value="5">
                                            <label for="demo-5">5 stars</label>

                                            <div class="stars">
                                                <label for="demo-1" aria-label="1 star" title="1 star"></label>
                                                <label for="demo-2" aria-label="2 stars" title="2 stars"></label>
                                                <label for="demo-3" aria-label="3 stars" title="3 stars"></label>
                                                <label for="demo-4" aria-label="4 stars" title="4 stars"></label>
                                                <label for="demo-5" aria-label="5 stars" title="5 stars"></label>
                                            </div>

                                        </fieldset>


                                        <div class="form-group">
                                            <br>
                                            <label for="review_id">Review</label>
                                            <select id="review_id" name="review_id"
                                                    class="form-control select2" >
                                                @foreach($review as  $key => $title)
                                                    <option value="{{$key}}">{{ $title }}</option>
                                                @endForeach
                                            </select>
                                            @if ($errors->has('review_id'))
                                                <div class="help-block">
                                            <span class="" role="alert">
                                                        <strong class="text-danger">{{ $errors->first('review_id') }}</strong>
                                            </span></div>
                                            @endif
                                        </div>

                                        <div class="form-group">
                                            <br>
                                            <label for="eventInput2">Comment</label>
                                            <textarea id="comment" name="comment" required style="width: 550px" ></textarea>
                                        </div>

                                    </div>
                                </div>
                            </div>

                            <div class="form-actions center">
                                <a href="{{ route('home.profile') }}"
                                   class="btn btn-raised btn-raised btn-warning mr-1">
                                    <i class="ft-x"></i> Back
                                </a>
                                <button type="submit" class="btn btn-raised btn-primary">
                                    <i class="fa fa-check-square-o"></i> Save
                                </button>
                            </div>
                        </form>

                    </div>
                </div>
            </div>
        </div>
    </div>

@endsection

@section('scripts')
    <script>

        (function(){
            var rating = document.querySelector('.rating');
            var handle = document.getElementById('toggle-rating');
            handle.onchange = function(event) {
                rating.classList.toggle('rating', handle.checked);
            };
        }());
    </script>



@stop

@section('styles')

@stop