@extends('layouts.app')

@section('content')
    <div class="container">
        <h1 class="mb-4 titlepage">Formulário</h1>

        <form method="POST" action="{{ route('questionnaire.store') }}">
            @csrf

            @foreach ($questions as $question)
                <!-- converte o question->content considerando os elementos html no texto-->
                @if (!$question->is_conditional && !$question->manual_answer)
                    <div class="question{{ $question->id }}">
                        <div class="question-tittle">{!! $question->content !!}</div>
                        @foreach ($question->options as $option)
                            @if ($option['condition_id'] == 0)
                                <!--checkbox com o cntent e o id -->
                                <div class="form-check">
                                    <input type="hidden" id="questionfromanswer{{ $option['id'] }}"
                                        value="{{ $question->id }}">

                                    <input class="form-check-input ask{{ $question->id }}ans{{ $option['id'] }}" type="checkbox" value="{{ $option['id'] }}"
                                        onchange="getmorequestions({{ $option['id'] }})">
                                    <label class="form-check-label" for="flexCheckDefault">
                                        {{ $option['content'] }}
                                    </label>
                                </div>
                            @endif
                        @endforeach
                    </div>
                    <hr>
                @elseif(!$question->is_conditional && $question->manual_answer)
                    <div class="question{{ $question->id }}">
                        <div class="question-tittle">{!! $question->content !!}</div>
                        <div class="mb-3">
                            <textarea class="form-control" rows="3" placeholder="Resposta..."></textarea>
                        </div>
                    </div>
                @endif
            @endforeach

            <button type="submit" class="btn btn-success mt-4">Enviar respostas</button>
        </form>
    </div>
    <style>
        .question-tittle h3 {
            font-size: 25px;
            font-weight: 800;
            color: #002b4b;
        }

        .question-tittle p {
            font-size: 17px;
            font-weight: 800;
            color: #6c6c6c;
            /* font-style: italic; */
        }
    </style>
    <script defer>
        //conta a quantidade de "question-tittle" e adiciona o numero da questão dentro do h3 dentro do elemento
        function updatenumbers() {
            var questionTittle = document.querySelectorAll(".question-tittle>h3:nth-child(1)");
            for (let i = 0; i < questionTittle.length; i++) {
                questionTittle[i].innerHTML = '<span class="numberquestion">' + (i + 1) + '</span>' + " - " +
                    questionTittle[i].innerHTML;
            }
        }
        updatenumbers();

        function getmorequestions(id) {
            var idpergunta = $('#questionfromanswer' + id).val();
            var elemento = document.querySelector('.ask' + idpergunta + 'ans' + id);
            if (elemento.checked == false) {
                $('.addbyquestion' + idpergunta + 'and' + id).remove();
                updatenumbers2();
            } else {
                $.get('/get-questions', {
                    idanswer: id,
                    idquestion: $('#questionfromanswer' + id).val()
                }).done(function(data) {
                    console.log('.question' + idpergunta);
                    document.querySelector('.question' + idpergunta).insertAdjacentHTML('beforeend',
                        '<div class="addbyquestion' + idpergunta + 'and' + id + '"><hr>' + data + '</div>');
                    updatenumbers2();
                });
            }

        }

        function updatenumbers2() {
            var questionTittle = document.querySelectorAll(".question-tittle>h3:nth-child(1) span.numberquestion");
            for (let i = 0; i < questionTittle.length; i++) {
                questionTittle[i].innerHTML = +(i + 1);
            }
        }
    </script>
@endsection