@extends('layouts.portal', ['title' => 'Responder afirmaciones: ' . $test->instrument->name])
@section('content')
    <div class="container" id="questions">

        <p class="display-3">{{$test->instrument->name}}</p>

        <form action="{{route('portal.tests.talent.finish', $test)}}" method="GET">
            @forelse($test->instrument->questions as $question)
                <x-question :id="$question->id"
                            :title="''"
                            :onSelected="'handleAnswerSelected'"
                            :answer="@$answers->where('tal_question_id', $question->id)->first()->value"
                            required>

                    <p class="text-primary"><strong>{{$loop->iteration}}.</strong></p>

                    {!! $question->description !!}

                    @if($question->help)
                        <x-slot name="evidence">
                            {!! $question->help !!}
                        </x-slot>
                    @endif

                </x-question>
            @empty
                <p>No hay afirmaciones para mostrar</p>
            @endforelse


            <div class="text-center my-4">
                <a class="btn btn-secondary" href="javascript:history.go(-1)">
                    <i class="fa fa-arrow-left"></i> Volver
                </a>
                <button class="btn btn-primary" type="submit">
                    <i class="fa fa-check-double"></i> Terminar y Enviar
                </button>
            </div>
        </form>


    </div>
@endsection
@push('js')
    <script>
        new Vue({
            el: '#questions',
            data() {
                return {
                    answers: []
                }
            },
            methods: {
                handleAnswerSelected(ev) {
                    const questionId = ev.target.name
                    axios.post('/api/portal/talent/questions/'+questionId+'/save-answer', {
                        value: ev.target.value,
                        testId: @json($test->id),
                    }).then(res => {
                        console.log(res.data)
                    }).catch(err => {
                        console.log(err.response)
                    })
                },
            }
        })
    </script>
@endpush