@extends('layouts.app')

@section('content')
    <script src="{{ asset('tinymce/js/tinymce.min.js') }}" referrerpolicy="origin"></script>

    <script src="{{ asset('js/Tiny_questionario.js') }}"></script>
    <div class="container">
        <!-- Botão e retornar -->
        <div class="row">
            <div class="col-sm-12">
                <a href="/questions?questionario={{ $question->id_questionary }}" class="btn backbutton"><i
                        class="fa-solid fa-angles-left"></i> Voltar</a>
            </div>
        </div>
        <div class="row justify-content-center">
            <div class="col-md-12">
                <div class="card">
                    <div class="card-header card-header-fle color-back">
                        <div class="col-md-12 div-button">Editar Pergunta</div>
                    </div>
                    <div class="card-body">
                        <div class="container">
                            <form method="POST" action="{{ route('questions.update', $question->id) }}">

                                <div class="row">
                                    @csrf
                                    @method('PUT')

                                    <div class="col-sm-12">
                                        <div class="form-group">
                                            <label class="fonte">
                                                <input type="checkbox" id="is_a_conditional_question"
                                                    name="is_a_conditional_question"
                                                    {{ $question->is_conditional == 1 ? 'checked' : '' }} value="yes"
                                                    onchange="disablequestions()">
                                                É uma Pergunta condicional?
                                            </label>
                                        </div>
                                    </div>

                                    <script>
                                        function disablequestions() {
                                            if (document.getElementById('is_a_conditional_question').checked == false) {
                                                document.getElementById('conditional_question_id').value = '';
                                                document.getElementById('conditional_answer').value = '';
                                                document.querySelectorAll('.conditionalask').forEach(function(element) {
                                                    element.style.display = 'none';
                                                });
                                            } else {

                                                document.querySelectorAll('.conditionalask').forEach(function(element) {
                                                    element.style.display = 'block';
                                                });
                                            }
                                        }
                                        //roda o codigo quando carregar a pagina
                                        window.onload = function() {
                                            disablequestions();
                                        }
                                    </script>

                                    <div class="col-sm-12 conditionalask">
                                        <div class="form-group">
                                            <label for="conditional_question_id">Pergunta condicional (opcional):</label>
                                            <select class="form-control" id="conditional_question_id"
                                                name="conditional_question_id">
                                                <option value="">Selecione uma pergunta</option>
                                                @foreach ($questions as $q)
                                                    <option value="{{ $q->id }}"
                                                        {{ $q->id == $question->conditional_question_id ? 'selected' : '' }}>
                                                        {{ $q->content }}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-sm-12 conditionalask">
                                        <div class="form-group">
                                            <label for="conditional_answer">Resposta condicional (opcional):</label>
                                            <select class="form-control" id="conditional_answer" name="conditional_answer">
                                                @foreach ($options as $option)
                                                    <option value="{{ $option->id }}"
                                                        {{ $option->id == $question->conditional_answer ? 'selected' : '' }}>
                                                        {{ $option->content }}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>


                                    <hr style="margin: 3rem 0rem 3rem;max-width: 97%;" class="separator conditionalask">

                                    <div class="col-sm-12 espaco">
                                        <div class="form-group">
                                            <label>Detalhes para a pergunta:</label>
                                            <textarea class="form-control" name="description_question" rows="1">{{ $question->description_question }}</textarea>
                                        </div>
                                    </div>

                                    <div class="col-sm-12 espaco">
                                        <div class="form-group">
                                            <label for="content">Conteúdo da pergunta:</label>
                                            <textarea class="form-control" id="content" name="content" rows="3" required>{{ $question->content }}</textarea>
                                        </div>
                                    </div>
                                    <div class="col-sm-12 espaco">
                                        <div class="form-group">
                                            <label for="">Instrução da pergunta(opcional)</label>
                                            <textarea class="form-control" name="instruction" id="instrução da pergunta" cols="1" rows="1">{{ $question->instruction != null ? $question->instruction : '' }}</textarea>
                                        </div>
                                    </div>
                                    @if ($question->manual_answer == 0)
                                        <div class="col-sm-12">
                                            <div class="form-group">
                                                <label class="fonte">
                                                    <input type="checkbox" id="enable_multiple_choice"
                                                        name="enable_multiple_choice"
                                                        {{ $question->enable_multiple_choice == 1 ? 'checked' : '' }}>
                                                    Selecionar mais de uma respostas?
                                                </label>
                                            </div>
                                        </div>

                                        <div class="col-sm-12">
                                            <div class="form-group">
                                                <label>Opções de resposta:</label>
                                                <div id="options-container">
                                                    @foreach ($question->options as $index => $option)
                                                        <div class="form-group opd option{{ $index }}">

                                                            <div class="col-sm-10">
                                                                <input type="text" class="form-control option-input"
                                                                    name="options[{{ $option->id }}]"
                                                                    value="{{ $option->content }}">
                                                            </div>

                                                            <div class="col-sm-2 opb">
                                                                <button type="button"
                                                                    class="btn btn-danger remove-option-btn"
                                                                    onClick="removeoption('.option{{ $index }}')"><i
                                                                        class="fa-solid fa-trash-can"></i></button>
                                                            </div>
                                                        </div>
                                                    @endforeach
                                                </div>
                                                <button type="button" class="btn btn-primary" id="add-option-btn">Adicionar
                                                    opção</button>
                                            </div>
                                        </div>
                                    @endif
                                    <p class="text-center margi">
                                        <input class="btn btn-success" type="submit" value="Salvar">
                                    </p>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script>
        function removeoption(option) {
            console.log(option);
            $(option).remove();
        }

        document.addEventListener('DOMContentLoaded', function() {


            //identifica a alteração do select com id conditional_question_id e a partir dele, pega o valor selecionado e faz uma chamda ajax para buscar as opções da pergunta selecionada
            $('#conditional_question_id').change(function() {
                var id = $(this).val();
                console.log(id);
                $.ajax({
                    url: "{{ route('questions.getOptions') }}",
                    method: 'get',
                    data: {
                        id: id
                    },
                    success: function(data) {
                        console.log(data);
                        $('#conditional_answer').empty();
                        $('#conditional_answer').append(
                            '<option value="">Selecione uma opção</option>');
                        $.each(data, function(index, value) {
                            $('#conditional_answer').append('<option value="' + value
                                .id +
                                '">' + value.content + '</option>');
                        });
                    }
                });
            });



            const addOptionBtn = document.getElementById('add-option-btn');
            const optionsContainer = document.getElementById('options-container');

            addOptionBtn.addEventListener('click', function() {
                //conta quantos elementos com a classe opd existem dentro do container de opções
                let optionCount = optionsContainer.getElementsByClassName('opd').length;
                //verifica se ja existe o elemento com a classe option+optionCount, caso exista, adiciona 1 ao optionCount e verifica novamente, até que não exista mais nenhum elemento com a classe option+optionCount
                while (optionsContainer.getElementsByClassName('option' + optionCount).length > 0) {
                    optionCount++;
                }
                const newOption = document.createElement('div');
                newOption.className = 'form-group opd option' + optionCount;
                newOption.innerHTML =
                    `<div class="col-sm-10"><input type="text" class="form-control option-input" name="options[]"></div><div class="col-sm-2 opb"><button type="button" class="btn btn-danger remove-option-btn" onClick="removeoption('.option` +
                    optionCount + `')"><i class="fa-solid fa-trash-can"></i></button></div>`;
                optionsContainer.appendChild(newOption);

            });




        });
    </script>
    <style type="text/css">
        .tox .tox-statusbar__right-container {
            display: none !important;
            margin-top: 2%;

            margin-top: 2%;

        }

        .espaco {
            margin-top: 2%;
        }
    </style>
@endsection