@extends('layouts.app') @push('css') @endpush @section('content')

<!-- Content Header (Page header) -->
<div class="content-header">
    <div class="container-fluid">
        <div class="row mb-2">
            <div class="col-sm-6">
                <h1 class="m-0 text-dark">{{ $feedback->name }} Form</h1>
            </div>
            <!-- /.col -->
            <div class="col-sm-6">
                <ol class="breadcrumb float-sm-right">
                    <div class="d-inline p-2 text-white text-right">
                        <a href="{{ route('home') }}" class="btn btn-sm btn-info"><i class="fas fa-home"></i> Home</a>
                    </div>
                    @can('feedbackanswer.index')
                    <div class="d-inline p-2 text-white text-right">
                        <a href="{{ route('feedback.index') }}" class="btn btn-sm btn-primary text-right"><i class="fas fa-arrow-circle-left"></i> Back</a>
                    </div>
                    @endcan
                </ol>
            </div>
            <!-- /.col -->
        </div>
        <!-- /.row -->
    </div>
    <!-- /.container-fluid -->
</div>
<!-- /.content-header -->

<!-- Main content -->
<section class="content">
    <div class="container-fluid">
        <!-- Main row -->
        <div class="row">
            <div class="col-md-12 col-x-12 col-sm-12">
                <form action="{{ route('feedbackanswer.store') }}" method="POST">
                    @csrf 
                    <div class="card-body">
                        <h4 class="card-title">Answer Feedback</h4> <hr>
                        <br />
                        <div>
                            @for ($i = 0 ; $i < count($feedback_questions) ; $i++)
                                <input type="hidden" name="feedback_id" value="{{ $feedback_id }}"/>
                                    
                                <h5>{{ $feedback_questions[$i]->question }}</h5>
                                <input type="hidden" name="question_ids[]" rquired class="form-control @error('question') is-invalid @enderror" value="{{ $feedback_questions[$i]->id }}"/>
                                
                                @if ($feedback_questions[$i]->answer_type == 'written')
                                <input type="text" name="{{ $i }}" rquired class="form-control @error('answer') is-invalid @enderror" value="{{ $feedback_questions[$i]->answer }}"/>
                                
                                @elseif ($feedback_questions[$i]->answer_type == 'point')
                                <div class="row">
                                    @php
                                        $end=count($feedback_questions);
                                    @endphp
                                <div class="value col-md-3 col-x-3 col-sm-3" onclick="show_rating_function({{ $i }},{{ $end }})" id="value{{ $i }}">
                                    {{ csrf_field() }}
                                    @for ($j = 1 ; $j <= 10 ; $j++)
                                    <input class="star star-{{ $j }} radio @error('radio') is-invalid @enderror" required value="{{ $j }}" id="star-{{ $j }}" type="radio" name="{{ $i }}"/>
                                    
                                    @error('radio')
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                    @enderror
                                    <label class="star" for="star- {{ $j }}"> </label>
                                    @endfor
                                </div>
                                <div class="show_rating col-md-3 col-x-3 col-sm-3" name="show_rating" id="show_rating{{ $i }}">
                                </div>
                                </div>
                                @endif
                            @endfor
                            <h5>Any suggestions or comment?</h5>
                            <input type="text" name="comment" rquired class="form-control @error('comment') is-invalid @enderror" value=""/>
                                
                            @error('comment')
                                <span class="invalid-feedback" role="alert">
                                    <strong>{{ $message }}</strong>
                                </span>
                                @enderror
                        </div>
                        
                        <input type="submit" class="btn btn-success mt-2" value="Submit Feedback" />
                    </div>

                </form>
            </div>
        </div>
        <!-- /.row (main row) -->
    </div>
    <!-- /.container-fluid -->
</section>
<!-- /.content -->

@endsection @push('js') 

<script>
    
    function show_rating_function(start, end){
    for (let i = start; i <= end; i++) {
        var value = $("input[type='radio'][name='"+i+"']:checked").val();
        var output = document.getElementById('show_rating'+i);
        output.innerHTML = '<h5>You are rating <b>' + value + ' out of 10</b> on this.</h5>';
        break;
        };
    };                                                 
</script>
@endpush