@include('client.common.header', ['title' => 'Interview Feedback'])

<main>
    <div class="container">
        @if (!$expiredLink)
            <div class="box white">
                @if ($contact->status != 'feedback_received')
                    <h2 class="form-title">Feedback Form for {{ $projectName }}</h2>
                    <form id="frmProjectClientFeedback" method="post" action="{{ route('project-client-feedback.store') }}">@csrf
                        <input type="hidden" name="token" value="{{ request()->token }}">
                        @foreach ($groupByQuestions as $key => $questions)
                            <div class="bg-white px-0 border-top" style="border-top-color: #bbb !important;">
                                @foreach ($questions as $question)
                                <div class="mb-20 mt-3">
                                    <label class="control-label">{{ $question->question }}</label>
                                    @if($key != 'Qualitative Questions')
                                        <div class="radio-img clearfix">
                                            <fieldset class="rating">
                                                <input type="radio" id="star5_{{ $question->id }}" name="questions_ratings[{{ $question->id }}]" class="question_ratings" value="5">
                                                <label class="full" for="star5_{{ $question->id }}" title="Awesome - 5 stars"><i class="material-icons">star</i></label>

                                                <input type="radio" id="star4_{{ $question->id }}" name="questions_ratings[{{ $question->id }}]" class="question_ratings" value="4">
                                                <label class="full" for="star4_{{ $question->id }}" title="Pretty good - 4 stars"><i class="material-icons">star</i></label>

                                                <input type="radio" id="star3_{{ $question->id }}" name="questions_ratings[{{ $question->id }}]" class="question_ratings" value="3">
                                                <label class="full" for="star3_{{ $question->id }}" title="Meh - 3 stars"><i class="material-icons">star</i></label>

                                                <input type="radio" id="star2_{{ $question->id }}" name="questions_ratings[{{ $question->id }}]" class="question_ratings" value="2">
                                                <label class="full" for="star2_{{ $question->id }}" title="Kinda bad - 2 stars"><i class="material-icons">star</i></label>

                                                <input type="radio" id="star1_{{ $question->id }}" name="questions_ratings[{{ $question->id }}]" class="question_ratings" value="1">
                                                <label class="full" for="star1_{{ $question->id }}" title="Sucks big time - 1 star"><i class="material-icons">star</i></label>
                                            </fieldset>
                                        </div>
                                    @endif
                                    <div class="form-group mt-3">
                                        @if($key != 'Qualitative Questions')
                                            <label class="control-label mb-1">Feedback</label>
                                        @endif
                                        <textarea name="question_reviews[{{ $question->id }}]" id="question_review_{{ $question->id }}"
                                                class="form-control @if($key == 'Qualitative Questions') review-textarea @endif" placeholder="Enter Review"></textarea>
                                    </div>
                                </div>
                                @if(!$loop->last)<hr style="margin-bottom: 0.75rem" />@endif
                                @endforeach
                            </div>
                        @endforeach
                        <button type="submit" class="btn btn-em submit mt-2">{{@trans('job.submit_feedback')}}</button>
                    </form>
                @else
                    <p>Thank you for submitting your valuable feedback; it has been sent to your respective Project Team at Empower!</p>
                @endif
            </div>
        @else
            <div class="box white">
                <p>Oops, something went wrong!<br/>
                Kindly contact your Project Owner at Empower for further assistance.</p>
            </div>
        @endif
    </div>
</main>
@include('client.common.footer')


<script type="text/javascript" src="{{ asset('js/vendor/jquery.min.js') }}"></script>
<script type="text/javascript" src="{{ asset('js/vendor/popper.min.js') }}"></script>
<script type="text/javascript" src="{{ asset('js/vendor/bootstrap.min.js') }}"></script>
<script type="text/javascript" src="{{ asset('js/vendor/wow.min.js') }}"></script>
<script type="text/javascript" src="{{ asset('js/vendor/jquery.validate.min.js') }}"></script>
<script type="text/javascript" src="{{ asset('js/vendor/snackbar.min.js') }}"></script>

@if (!$expiredLink)
    <script type="text/javascript">
        new WOW().init();
        $(document).ready(function() {
            @if(Session::has('message'))
                Snackbar.show({
                    pos: 'bottom-right',
                    text: "{!! session('message') !!}",
                    actionText: 'Okay'
                });
            @endif

            $('#frmProjectClientFeedback').validate({
                errorElement: 'span',
                errorClass: 'invalid-feedback',
                ignore: [],
                errorPlacement: function(error, element) {
                    if (element.parent('.rating').length) {
                        error.insertAfter(element.parents('.radio-img'));
                    } else {
                        error.insertAfter(element);
                    }
                },
                highlight: function(element) {
                    $(element).closest('.form-control').removeClass('is-valid').addClass('is-invalid');
                },

                unhighlight: function(element) {
                    $(element).closest('.form-control').removeClass('is-invalid').addClass('is-valid');
                },

                invalidHandler: function(form, validator) {

                    if (!validator.numberOfInvalids())
                        return;

                    $scrollTop = 0;
                    if($(validator.errorList[0].element).hasClass('question_ratings'))
                        $scrollTop = $(validator.errorList[0].element).parents('fieldset.rating').offset().top - 100;
                    else
                        $scrollTop = $(validator.errorList[0].element).offset().top;

                    $('html, body').animate({
                        scrollTop: $scrollTop
                    }, 200);

                    if($(validator.errorList[0].element).hasClass('question_ratings'))
                        $(validator.errorList[0].element).parents('fieldset.rating').focus();
                    else
                        $(validator.errorList[0].element).focus();
                },

                success: function(element) {
                    $(element).closest('.form-control').removeClass('is-invalid').addClass('is-valid');
                },
            });

            $(".review-textarea").each(function (item) {
                $(this).rules("add", {
                    required: true
                });
            });

            $(".question_ratings").each(function (item) {
                $(this).rules("add", {
                    required: true
                });
            });


            $('form').on('submit', function(e) {
                e.preventDefault();
                if ($(this).valid()) {
                    $('.submit').addClass('disabled');
                    $('.submit').html('Please Wait...');
                    e.currentTarget.submit();
                }
            });

        });
    </script>
@endif
</body>

</html>