@extends('layouts.app')

 @section('content')
     <div class="container">
         <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"> Criar pergunta</div>
                     </div>
                     <div class="card-body">
                         <div class="container">
                             <form method="POST" action="{{ route('questions.store') }}">
                                 <div class="row">
                                     @csrf
                                     <div class="col-sm-12">
                                         <div class="form-group">
                                             <label for="">Formulário Vinculado</label>
                                             <select class="form-control" name="questionary_id" id="questionary_id">
                                                 <option value="0" {{ $questionary_id != null ? 'disabled' : '' }}>
                                                     Selecione um Formulário</option>
                                                 @foreach ($questionarys as $questionary)
                                                     @if ($questionary_id != null)
                                                         <option value="{{ $questionary->id }}"
                                                             {{ $questionary_id == $questionary->id ? 'selected' : 'disabled' }}>
                                                             {!! $questionary->name !!}</option>
                                                     @else
                                                         <option value="{{ $questionary->id }}">{!! $questionary->name !!}
                                                         </option>
                                                     @endif
                                                 @endforeach
                                             </select>
                                         </div>
                                     </div>
                                     <div class="hl"></div>
                                     <div class="col-sm-3">
                                         <div class="form-group">
                                             <label class="fonte directquestion disable_conditional_questions">
                                                 <input type="checkbox" id="disable_conditional_questions"
                                                     name="descritive_questions">
                                                 Pergunta com resposta discursiva
                                             </label>
                                         </div>
                                     </div>
                                     <div class="col-sm-3">
                                         <div class="form-group">
                                             <label class="fonte subquestions">
                                                 <input type="checkbox" class="subquestions" id="subquestions"
                                                     name="subquestions">
                                                 Perguntas com subperguntas
                                             </label>
                                         </div>
                                     </div>
                                     <div class="col-sm-2">
                                         <div class="form-group">
                                             <label class="fonte enable_multiple_choice">
                                                 <input type="checkbox" id="enable_multiple_choice"
                                                     name="enable_multiple_choice"> Multiplas respostas
                                             </label>
                                         </div>
                                     </div>
                                     <div class="col-sm-2">
                                         <div class="form-group">
                                             <label class="fonte">
                                                 <input type="checkbox" id="condicional_enable" name="condicional_enable">
                                                 Pergunta condicional
                                             </label>
                                         </div>
                                     </div>
                                     <div class="col-sm-2">
                                         <div class="form-group">
                                             <label class="fonte">
                                                 <input type="checkbox" id="subtitule" name="subtitule_input">
                                                 Subtitulo
                                             </label>
                                         </div>
                                     </div>

                                     {{-- adiciona sub titulos --}}
                                     <div id="subtitule_section" style="display:none">
                                         <div class="col-sm-12">
                                             <div class="form-group">
                                                 <label>Subtítulo:</label>
                                                 <input type="text" class="form-control manual-question-input"
                                                     id="content" name="subtitule">
                                             </div>
                                         </div>
                                     </div>

                                     {{-- adiciona perguntas condicionais --}}
                                     <div id="condicional_hidden" class="row condicional_hidden">
                                         <div class="col-sm-6">
                                             <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" onchange="atualizarrespostas(this)">
                                                     <option value="0">Selecione uma pergunta</option>

                                                     @foreach ($questions as $question)
                                                         <option data-id="{{ $question->id_questionary }}"
                                                             value="{{ $question->id }}">{!! $question->content !!}</option>
                                                     @endforeach
                                                 </select>
                                             </div>
                                         </div>
                                         <div class="col-sm-6">
                                             <div class="form-group">
                                                 <label for="conditional_answer">Resposta condicional (opcional):</label>
                                                 <select name="conditional_answer" id="conditional_answer"
                                                     class="form-control" disabled>
                                                 </select>
                                             </div>

                                         </div>
                                     </div>

                                     {{-- Adiona perguntas com subperguntas --}}
                                     <div class="col-sm-12" style="display: none;" id="subperguntas">
                                         <div class="form-group" id="manual-questions-container">
                                             <label>Pergunta principal:</label>
                                             <input type="text" class="form-control manual-question-input" id="content"
                                                 name="manual_questions[0]">
                                             <label>Instrução da pergunta(opcional):</label>
                                             <input type="text" class="form-control" id="instruction"
                                                 name="instructionsub">

                                             <label>Sub-pergunta:</label>

                                             <div class="form-group form-control-1 ">
                                                 <div class="col-md-9">
                                                     <input type="text" class="form-control manual-question-input"
                                                         name="manual_questions[1][name]">
                                                 </div>
                                                 <div class="col-md-2">
                                                     <select name="manual_questions[1][type]" class="form-control">
                                                         <option value="text" selected="">Texto</option>
                                                         <option value="checkbox">Multipla escolha</option>
                                                         <option value="radio">Escolha unica</option>
                                                     </select>
                                                 </div>
                                                 <div class="col-md-1">
                                                     <button type="button"
                                                         class="btn btn-danger remove-manual-question-btn"
                                                         style="width: 45%;">
                                                         <svg xmlns="http://www.w3.org/2000/svg" width="20"
                                                             height="20" viewBox="0 0 8 8">
                                                             <path fill="currentColor"
                                                                 d="M3 0c-.55 0-1 .45-1 1H1c-.55 0-1 .45-1 1h7c0-.55-.45-1-1-1H5c0-.55-.45-1-1-1H3zM1 3v4.81c0 .11.08.19.19.19h4.63c.11 0 .19-.08.19-.19V3h-1v3.5c0 .28-.22.5-.5.5s-.5-.22-.5-.5V3h-1v3.5c0 .28-.22.5-.5.5s-.5-.22-.5-.5V3h-1z">
                                                             </path>
                                                         </svg>
                                                     </button>
                                                 </div>
                                             </div>
                                         </div>
                                         <button type="button" class="btn btn-primary"
                                             id="add-manual-question-btn">Adicionar sub-pergunta</button>
                                     </div>

                                     {{-- Adiciona perguntas diretas --}}
                                     <div class="perguntasdiretas" id="perguntasdiretas">

                                         <div class="form-group">
                                             <label for="content">Conteúdo da pergunta:</label>
                                             <input class="form-control" id="content" name="content">
                                         </div>
                                         <div class="form-group">
                                             <label for="">Detalhes da pergunta</label>
                                             <textarea class="form-control" name="description_question" id="instrução da pergunta" cols="1"
                                                 rows="1"></textarea>
                                         </div>
                                         <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"></textarea>
                                         </div>
                                         <div class="col-sm-12" id="checkradioquestions">
                                             <div class="form-group">
                                                 <label>Opções de resposta:</label>
                                                 <div id="options-container">
                                                     <div class="form-group opcoesrespostas">
                                                         <input type="text" class="form-control option-input"
                                                             name="options[]">
                                                         <button class="btn btn-danger remove-option-btn"
                                                             style="display:none">
                                                             <svg xmlns="http://www.w3.org/2000/svg" width="20"
                                                                 height="20" viewBox="0 0 8 8">
                                                                 <path fill="currentColor"
                                                                     d="M3 0c-.55 0-1 .45-1 1H1c-.55 0-1 .45-1 1h7c0-.55-.45-1-1-1H5c0-.55-.45-1-1-1H3zM1 3v4.81c0 .11.08.19.19.19h4.63c.11 0 .19-.08.19-.19V3h-1v3.5c0 .28-.22.5-.5.5s-.5-.22-.5-.5V3h-1v3.5c0 .28-.22.5-.5.5s-.5-.22-.5-.5V3h-1z" />
                                                             </svg>
                                                         </button>
                                                     </div>
                                                 </div>
                                                 <button type="button" class="btn btn-primary"
                                                     id="add-option-btn">Adicionar
                                                     opção</button>
                                             </div>
                                         </div>
                                     </div>

                                     <p class="text-center margi">
                                         <input class="btn btn-success" type="submit" value="Criar pergunta">
                                     </p>
                                 </div>
                             </form>
                         </div>
                     </div>
                 </div>
             </div>
         </div>
     </div>
     <script type="text/javascript" defer>
         document.addEventListener('DOMContentLoaded', function() {
             const checkradioquestions = document.getElementById('checkradioquestions');
             const perguntasdiretas = document.getElementById('perguntasdiretas');
             const subperguntas = document.getElementById('subperguntas');
             const condicional_hidden = document.querySelector('#condicional_hidden');
             const enable_multiple_choice = document.getElementById('enable_multiple_choice');
             const subquestions = document.querySelector('#subquestions');
             const disable_conditional_questions = document.querySelector('#disable_conditional_questions');
             const condicional_enable = document.querySelector('#condicional_enable');
             const subtitule = document.querySelector('#subtitule');
             const subtitule_section = document.querySelector('#subtitule_section');
             if (disable_conditional_questions) {
                 disable_conditional_questions.addEventListener('change', function() {
                     if (this.checked) {
                         checkradioquestions.style.display = 'none';
                         condicional_hidden.classList.add('condicional_hidden');
                         enable_multiple_choice.disabled = true;
                         subquestions.disabled = true;
                     } else {
                         checkradioquestions.style.display = 'block';
                         enable_multiple_choice.disabled = false;
                         subquestions.disabled = false;
                     }
                 });
             }


             if (subquestions) {
                 subquestions.addEventListener('change', function() {
                     if (this.checked) {
                         subperguntas.style.display = 'block';
                         perguntasdiretas.style.display = 'none';
                         enable_multiple_choice.disabled = true;
                         enable_multiple_choice.checked = false;
                         disable_conditional_questions.disabled = true;
                         disable_conditional_questions.checked = false;
                     } else {
                         subperguntas.style.display = 'none';
                         enable_multiple_choice.disabled = false;
                         disable_conditional_questions.disabled = false;
                     }
                 });
             }

             if (subtitule) {
                 subtitule.addEventListener('change', function() {
                     if (this.checked) {
                         subtitule_section.style.display = 'block';
                         perguntasdiretas.style.display = 'none';
                         subperguntas.style.display = 'none';
                         enable_multiple_choice.disabled = true;
                         enable_multiple_choice.checked = false;
                         disable_conditional_questions.disabled = true;
                         disable_conditional_questions.checked = false;
                         subquestions.disabled = true;
                         subquestions.checked = false;
                         condicional_enable.disabled = true;
                         condicional_enable.checked = false;
                     } else {
                         subtitule_section.style.display = 'none';
                         perguntasdiretas.style.display = 'block';
                         enable_multiple_choice.disabled = false;
                         disable_conditional_questions.disabled = false;
                         condicional_enable.disabled = false;
                         subquestions.disabled = false;
                     }
                 });
             }



         });
     </script>

     <script type="text/javascript" defer>
         document.addEventListener("DOMContentLoaded", function() {

             // Seleção dos checkboxes pelo ID
             const disableConditionalQuestionsCheckbox = document.getElementById("disable_conditional_questions");

             // Manipulador de evento para o checkbox 'disable_conditional_questions'
             disableConditionalQuestionsCheckbox.addEventListener("change", function() {

                 // Declare a variável aqui também
                 const condicionalHiddenElement = document.getElementById("condicional_hidden");

                 // Verifica se o elemento existe
                 if (condicionalHiddenElement !== null) {
                     // Oculta o elemento
                     condicionalHiddenElement.style.display = "none";
                 }
             });
         });

         $(document).ready(function() {
             // Seleção dos checkboxes pelo ID
             const disableConditionalQuestionsCheckbox = document.getElementById("disable_conditional_questions");

             // Manipulador de evento para o checkbox 'disable_conditional_questions'
             disableConditionalQuestionsCheckbox.addEventListener("change", function() {

                 // Declare a variável aqui também
                 const condicionalHiddenElement = document.getElementById("condicional_hidden");

                 // Verifica se o elemento existe
                 if (condicionalHiddenElement !== null) {
                     // Oculta o elemento
                     condicionalHiddenElement.style.display = "none";
                 }
             });
         });

         $(document).ready(function() {
             // Função para ocultar ou exibir o conteúdo
             function ocultarConteudo() {
                 const condicionalHiddenElement = document.querySelector(".condicional_hidden");
                 const conditionalEnableCheckbox = document.getElementById("condicional_enable");

                 // Verifica se o elemento existe
                 if (condicionalHiddenElement !== null) {
                     if (conditionalEnableCheckbox.checked) {
                         condicionalHiddenElement.classList.remove("condicional_hidden");
                     } else {
                         condicionalHiddenElement.classList.add("condicional_hidden");
                     }
                 }
             }

             // Seleção dos checkboxes pelo ID
             const disableConditionalQuestionsCheckbox = document.getElementById("disable_conditional_questions");
             const enableMultipleChoiceCheckbox = document.getElementById("enable_multiple_choice");
             const condicionalEnableCheckbox = document.getElementById("condicional_enable");

             // Manipulador de evento para o checkbox 'disable_conditional_questions'
             disableConditionalQuestionsCheckbox.addEventListener("change", function() {
                 // Declare a variável aqui também
                 const condicionalHiddenElement = document.querySelector(".condicional_hidden");

                 // Oculta o conteúdo
                 if (condicionalHiddenElement !== null) {
                     condicionalHiddenElement.classList.add("condicional_hidden");
                 }

                 // Desmarca o checkbox enable_multiple_choice
                 enableMultipleChoiceCheckbox.checked = false;

                 // Desmarca o checkbox condicional_enable
                 condicionalEnableCheckbox.checked = false;

                 // Chame a função ocultarConteudo() novamente para garantir que o conteúdo seja ocultado
                 ocultarConteudo();
             });

             // Manipulador de evento para o checkbox 'enable_multiple_choice'
             enableMultipleChoiceCheckbox.addEventListener("change", function() {
                 if (this.checked) {
                     // Desmarca o checkbox disable_conditional_questions
                     disableConditionalQuestionsCheckbox.checked = false;
                 }
             });

             // Manipulador de evento para o checkbox 'condicional_enable'
             condicionalEnableCheckbox.addEventListener("change", function() {
                 if (this.checked) {
                     // Marca o checkbox disable_conditional_questions como desmarcado
                     disableConditionalQuestionsCheckbox.checked = false;

                     // Atualizar o estado do conteúdo
                     ocultarConteudo();
                 }
             });

             // Chamada inicial para ajustar a visibilidade corretamente
             ocultarConteudo();
         });
         document.addEventListener("DOMContentLoaded", function() {

             // Função para ocultar ou exibir o conteúdo
             function ocultarConteudo() {
                 const condicionalHiddenElement = document.querySelector(".condicional_hidden");
                 const conditionalEnableCheckbox = document.getElementById("condicional_enable");

                 // Verifica se o elemento existe
                 if (condicionalHiddenElement !== null) {
                     if (conditionalEnableCheckbox.checked) {
                         condicionalHiddenElement.classList.remove("condicional_hidden");
                     } else {
                         condicionalHiddenElement.classList.add("condicional_hidden");
                     }
                 }
             }

             // Seleção dos checkboxes pelo ID
             const disableConditionalQuestionsCheckbox = document.getElementById("disable_conditional_questions");
             const enableMultipleChoiceCheckbox = document.getElementById("enable_multiple_choice");
             const condicionalEnableCheckbox = document.getElementById("condicional_enable");

             // Manipulador de evento para o checkbox 'disable_conditional_questions'
             disableConditionalQuestionsCheckbox.addEventListener("change", function() {
                 // Declare a variável aqui também
                 const condicionalHiddenElement = document.querySelector(".condicional_hidden");

                 // Oculta o conteúdo
                 if (condicionalHiddenElement !== null) {
                     condicionalHiddenElement.classList.add("condicional_hidden");
                 }

                 // Desmarca o checkbox enable_multiple_choice
                 enableMultipleChoiceCheckbox.checked = false;

                 // Desmarca o checkbox condicional_enable
                 condicionalEnableCheckbox.checked = false;

                 // Chame a função ocultarConteudo() novamente para garantir que o conteúdo seja ocultado
                 ocultarConteudo();
             });

             // Manipulador de evento para o checkbox 'enable_multiple_choice'
             enableMultipleChoiceCheckbox.addEventListener("change", function() {
                 if (this.checked) {
                     // Desmarca o checkbox disable_conditional_questions
                     disableConditionalQuestionsCheckbox.checked = false;
                 }
             });

             // Manipulador de evento para o checkbox 'condicional_enable'
             condicionalEnableCheckbox.addEventListener("change", function() {
                 if (this.checked) {
                     // Marca o checkbox disable_conditional_questions como desmarcado
                     disableConditionalQuestionsCheckbox.checked = false;

                     // Atualizar o estado do conteúdo
                     ocultarConteudo();
                 }
             });

             // Chamada inicial para ajustar a visibilidade corretamente
             ocultarConteudo();
         });
     </script>
     <script type="text/javascript">
         $(document).ready(function() {
             const conditionalEnableCheckbox = document.getElementById("condicional_enable");
             const condicionalHiddenElement = document.querySelector(".condicional_hidden");
             conditionalEnableCheckbox.addEventListener("change", function() {
                 if (conditionalEnableCheckbox.checked) {
                     condicionalHiddenElement.classList.remove("condicional_hidden");
                 } else {
                     condicionalHiddenElement.classList.add("condicional_hidden");
                 }
             });

             $('#conditional_question_id').prop('disabled', true);
             $('#questionary_id').change(function() {
                 var selectedValue = $(this).val();
                 if (selectedValue == '0') {
                     $('#conditional_question_id').prop('disabled', true);
                     $('#conditional_question_id option').show();
                     return;
                 }
                 $('#conditional_question_id').prop('disabled', false);
                 $('#conditional_question_id option').each(function() {
                     var dataId = $(this).data('id');
                     if (dataId == selectedValue) {
                         $(this)
                             .show();
                     } else {
                         $(this).hide();
                     }
                 });
             });
         });
     </script>
     <script>
         function atualizarrespostas(question) {
             if (question.value != 0) {
                 document.querySelector('#conditional_answer').innerHTML = '';
                 document.querySelector('#conditional_answer').disabled = false;
                 var idpergunta = question.value;
                 $.get('/updateoptions/', {
                     id_pergunta: idpergunta
                 }).done(function(retorno) {
                     retorno.forEach(element => {
                         var element = '<option value="' + element.content + '">' + element.content +
                             '</option>';
                         document.querySelector('#conditional_answer').insertAdjacentHTML('beforeend',
                             element);
                     });

                 })
             } else {
                 document.querySelector('#conditional_answer').disabled = true;
                 document.querySelector('#conditional_answer').innerHTML = '';
             }

         }
     </script>

     <script>
         document.addEventListener('DOMContentLoaded', function() {
             let addOptionBtn = document.getElementById('add-option-btn');
             let optionsContainer = document.getElementById('options-container');

             addOptionBtn.addEventListener('click', function() {
                 let newOption = document.createElement('div');
                 newOption.className = 'form-group opcoesrespostas';
                 newOption.innerHTML =
                     `<input type="text" class="form-control option-input" name="options[]"> <button class="btn btn-danger remove-option-btn" style="display:none">
                                                            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 8 8"><path fill="currentColor" d="M3 0c-.55 0-1 .45-1 1H1c-.55 0-1 .45-1 1h7c0-.55-.45-1-1-1H5c0-.55-.45-1-1-1H3zM1 3v4.81c0 .11.08.19.19.19h4.63c.11 0 .19-.08.19-.19V3h-1v3.5c0 .28-.22.5-.5.5s-.5-.22-.5-.5V3h-1v3.5c0 .28-.22.5-.5.5s-.5-.22-.5-.5V3h-1z"/></svg>
                                                        </button>`;
                 optionsContainer.appendChild(newOption);
                 updateRemoveOptionButtons();
             });

             function updateRemoveOptionButtons() {
                 let removeOptionBtns = document.querySelectorAll('.remove-option-btn');
                 for (let i = 0; i < removeOptionBtns.length; i++) {
                     removeOptionBtns[i].style.display = 'inline';
                     removeOptionBtns[i].addEventListener('click', function() {
                         optionsContainer.removeChild(removeOptionBtns[i].parentNode);
                     });
                 }
             }


             updateRemoveOptionButtons();
         });

         // Aqui começa a nova funcionalidade para verificar o select 'questionary_id'
         let questionarySelect = document.getElementById('questionary_id');

         // Verifique se o select existe e se tem um valor selecionado
         if (questionarySelect && questionarySelect.value) {
             // Se tiver, executa a função para tratar o valor selecionado
             handleQuestionSearch(questionarySelect.value);
         }

         // Adiciona um ouvinte de eventos para lidar com mudanças no select
         questionarySelect.addEventListener('change', function() {
             handleQuestionSearch(this.value);
         });

         // Função que lida com a busca das perguntas baseada no valor do select
         function handleQuestionSearch(selectedValue) {
             // Implemente a lógica de busca das perguntas aqui
             console.log("Buscar perguntas para o option selecionado: " + selectedValue);
         }


         //habilitar mais perguntas manuais
         document.addEventListener('DOMContentLoaded', function() {
             const addManualQuestionBtn = document.getElementById('add-manual-question-btn');
             const manualQuestionsContainer = document.getElementById('manual-questions-container');
             let manualQuestionIndex = 2;

             addManualQuestionBtn.addEventListener('click', function() {
                 let newManualQuestion = document.createElement('div');
                 newManualQuestion.className = 'form-group form-control-1';
                 newManualQuestion.innerHTML =
                     `<div class="col-md-9">
                                                     <input type="text" class="form-control manual-question-input"
                                                         name="manual_questions[${manualQuestionIndex}][name]">
                                                 </div>
                                                 <div class="col-md-2">
                                                     <select name="manual_questions[${manualQuestionIndex}][type]" class="form-control">
                                                         <option value="text" selected="">Texto</option>
                                                         <option value="checkbox">Checkbox</option>
                                                         <option value="radio">Radio</option>
                                                     </select>
                                                 </div>
                                                 <div class="col-md-1">
                                                     <button type="button"
                                                         class="btn btn-danger remove-manual-question-btn"
                                                         style="width: 45%;">
                                                         <svg xmlns="http://www.w3.org/2000/svg" width="20"
                                                             height="20" viewBox="0 0 8 8">
                                                             <path fill="currentColor"
                                                                 d="M3 0c-.55 0-1 .45-1 1H1c-.55 0-1 .45-1 1h7c0-.55-.45-1-1-1H5c0-.55-.45-1-1-1H3zM1 3v4.81c0 .11.08.19.19.19h4.63c.11 0 .19-.08.19-.19V3h-1v3.5c0 .28-.22.5-.5.5s-.5-.22-.5-.5V3h-1v3.5c0 .28-.22.5-.5.5s-.5-.22-.5-.5V3h-1z">
                                                             </path>
                                                         </svg>
                                                     </button>
                                                 </div>`;
                 manualQuestionsContainer.appendChild(newManualQuestion);
                 updateRemoveManualQuestionButtons();
                 manualQuestionIndex++;

             });

             function updateRemoveManualQuestionButtons() {
                 let removeManualQuestionBtns = document.getElementsByClassName('remove-manual-question-btn');
                 for (let i = 0; i < removeManualQuestionBtns.length; i++) {
                     // Remove any previous event listeners to avoid duplicates
                     removeManualQuestionBtns[i].removeEventListener('click', removeQuestionHandler);
                     removeManualQuestionBtns[i].addEventListener('click', removeQuestionHandler);
                 }
             }

             function removeQuestionHandler(event) {
                 let buttonClicked = event.target;
                 // Here we need to navigate up to the parent '.form-group' element to remove the whole question
                 let questionToRemove = buttonClicked.closest('.form-group');
                 if (questionToRemove) {
                     manualQuestionsContainer.removeChild(questionToRemove);
                 }
             }
         });

         //desabilitar perguntas diretas
         /* document.addEventListener('DOMContentLoaded', function() {
             let disableConditionalQuestionsCheckbox = document.getElementById('disable_conditional_questions');
             let contentTextarea = document.getElementById('content');
             let optionsContainer = document.getElementById('options-container');
             let addOptionBtn = document.getElementById('add-option-btn');
             let perguntasdiretas = document.getElementsByClassName('perguntasdiretas');
             let manualQuestionsContainer = document.getElementById('manual-questions-container');
             let addManualQuestionBtn = document.getElementById('add-manual-question-btn');
             disableConditionalQuestionsCheckbox.addEventListener('change', function() {
                 if (this.checked) {
                     contentTextarea.disabled = true;
                     contentTextarea.style.display = 'none';
                     optionsContainer.style.display = 'none';
                     addOptionBtn.style.display = 'none';
                     for (let i = 0; i < perguntasdiretas.length; i++) {
                         perguntasdiretas[i].style.display = 'none';
                     }
                     manualQuestionsContainer.style.display = 'block';
                     addManualQuestionBtn.style.display = 'inline';
                     $('.discursivecheck').hide();


                 } else {
                     contentTextarea.disabled = false;
                     contentTextarea.style.display = 'block';
                     optionsContainer.style.display = 'block';
                     addOptionBtn.style.display = 'inline';
                     for (let i = 0; i < perguntasdiretas.length; i++) {
                         perguntasdiretas[i].style.display = 'block';
                     }
                     manualQuestionsContainer.style.display = 'none';
                     addManualQuestionBtn.style.display = 'none';
                     $('.discursivecheck').show();

                 }
             });
         }); */
     </script>
     <script type="text/javascript" defer>
         document.addEventListener('DOMContentLoaded', function() {
             function updateConditionalSelect(questionaryValue) {
                 const conditionalSelect = document.getElementById('conditional_question_id');
                 const options = conditionalSelect.querySelectorAll('option');
                 setTimeout(function() {
                     conditionalSelect.disabled = false;
                     conditionalSelect.removeAttribute('disabled');
                 }, 2000);
                 options.forEach(function(option) {
                     const optionDataId = option.getAttribute('data-id');
                     if (optionDataId === questionaryValue) {
                         option.style.display = 'block';
                     } else {
                         option.style.display = 'none';
                     }
                 });
             }
             const questionarySelect = document.getElementById('questionary_id');
             const selectedOption = questionarySelect.querySelector('option:checked') || questionarySelect
                 .querySelector('option[selected]');
             if (selectedOption && selectedOption.value !== '0') {
                 updateConditionalSelect(selectedOption.value);
             }
             questionarySelect.addEventListener('change', function() {
                 updateConditionalSelect(this.value);
             });
         });
     </script>
     <style>
         .condicional_hidden {
             display: none !important;
         }

         .tox-statusbar__branding {
             display: none;
         }
     </style>
     <script src="{{ asset('tinymce/js/tinymce.min.js') }}" referrerpolicy="origin"></script>

     <script src="{{ asset('js/email.js') }}"></script>
 @endsection

 {{-- @extends('layouts.app')

@section('content')
    <div class="container">
        <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"> Criar pergunta</div>
                    </div>
                    <div class="card-body">
                        <div class="container">
                            <form method="POST" action="{{ route('questions.store') }}">
                                <div class="row">
                                    @csrf
                                    <div class="col-sm-12">
                                        <div class="form-group">
                                            <label for="">Questionário Vinculado</label>
                                            <select class="form-control" name="questionary_id" id="questionary_id">
                                                <option value="0" {{ $questionary_id != null ? 'disabled' : '' }}>
                                                    Selecione um questionário</option>
                                                @foreach ($questionarys as $questionary)
                                                    @if ($questionary_id != null)
                                                        <option value="{{ $questionary->id }}"
                                                            {{ $questionary_id == $questionary->id ? 'selected' : 'disabled' }}>
                                                            {{ $questionary->name }}</option>
                                                    @else
                                                        <option value="{{ $questionary->id }}">{{ $questionary->name }}
                                                        </option>
                                                    @endif
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-sm-6">
                                        <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" onchange="atualizarrespostas(this)">
                                                <option value="0">Selecione uma pergunta</option>
                                                @foreach ($questions as $question)
                                                    <option value="{{ $question->id }}">{{ $question->content }}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-sm-6">
                                        <div class="form-group">
                                            <label for="conditional_answer">Resposta condicional (opcional):</label>
                                            <select name="conditional_answer" id="conditional_answer" class="form-control"
                                                disabled>
                                            </select>
                                        </div>
                                        <script>
                                            function atualizarrespostas(question) {
                                                if (question.value != 0) {
                                                    document.querySelector('#conditional_answer').innerHTML = '';
                                                    document.querySelector('#conditional_answer').disabled = false;
                                                    var idpergunta = question.value;
                                                    $.get('/updateoptions/', {
                                                        id_pergunta: idpergunta
                                                    }).done(function(retorno) {
                                                        retorno.forEach(element => {
                                                            var element = '<option value="' + element.id + '">' + element.content + '</option>';
                                                            document.querySelector('#conditional_answer').insertAdjacentHTML('beforeend',
                                                                element);
                                                        });

                                                    })
                                                } else {
                                                    document.querySelector('#conditional_answer').disabled = true;
                                                    document.querySelector('#conditional_answer').innerHTML = '';
                                                }

                                            }
                                        </script>
                                    </div>
                                    <div class="hl"></div>
                                    <div class="col-sm-12" style="display: none">
                                        <div class="form-group">
                                            <label class="fonte discursivecheck">
                                                <input type="checkbox" id="enable_manual_questions"
                                                    name="enable_manual_questions">
                                                Habilitar perguntas discursivas
                                            </label>
                                        </div>
                                    </div>
                                    <div class="col-sm-6">
                                        <div class="form-group">
                                            <label class="fonte directquestion">
                                                <input type="checkbox" id="disable_conditional_questions"
                                                    name="disable_conditional_questions">
                                                Pergunta com resposta discursiva
                                            </label>
                                        </div>
                                    </div>

                                    <div class="col-sm-6">
                                        <div class="form-group">
                                            <label class="fonte enable_multiple_choice">
                                                <input type="checkbox" id="enable_multiple_choice"
                                                    name="enable_multiple_choice">
                                                Selecionar mais de uma respostas?
                                            </label>
                                        </div>
                                    </div>

                                    <div class="col-sm-12">
                                        <div class="form-group perguntasdiretas">
                                            <label for="content">Conteúdo da pergunta:</label>
                                            <textarea class="form-control" id="content" name="content" rows="3" required></textarea>
                                        </div>

                                        <div class="form-group" id="manual-questions-container" style="display: none;">
                                            <!-- Aqui ficarão as subperguntas manuais -->
                                        </div>
                                        <button type="button" class="btn btn-primary" id="add-manual-question-btn"
                                            style="display: none;">Adicionar subpergunta manual</button>


                                    </div>

                                    <div class="col-sm-12">
                                        <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"></textarea>
                                        </div>
                                    </div>

                                    <div class="col-sm-12">
                                        <div class="form-group perguntasdiretas">
                                            <label>Opções de resposta:</label>
                                            <div id="options-container">
                                                <div class="form-group opcoesrespostas">
                                                    <input type="text" class="form-control option-input"
                                                        name="options[]">
                                                    <button class="btn btn-danger remove-option-btn" style="display:none">
                                                        <svg xmlns="http://www.w3.org/2000/svg" width="20"
                                                            height="20" viewBox="0 0 8 8">
                                                            <path fill="currentColor"
                                                                d="M3 0c-.55 0-1 .45-1 1H1c-.55 0-1 .45-1 1h7c0-.55-.45-1-1-1H5c0-.55-.45-1-1-1H3zM1 3v4.81c0 .11.08.19.19.19h4.63c.11 0 .19-.08.19-.19V3h-1v3.5c0 .28-.22.5-.5.5s-.5-.22-.5-.5V3h-1v3.5c0 .28-.22.5-.5.5s-.5-.22-.5-.5V3h-1z" />
                                                        </svg>
                                                    </button>
                                                </div>
                                            </div>
                                            <button type="button" class="btn btn-primary" id="add-option-btn">Adicionar
                                                opção</button>
                                        </div>
                                    </div>



                                    <p class="text-center margi">
                                        <input class="btn btn-success" type="submit" value="Criar pergunta">
                                    </p>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            let addOptionBtn = document.getElementById('add-option-btn');
            let optionsContainer = document.getElementById('options-container');

            addOptionBtn.addEventListener('click', function() {
                let newOption = document.createElement('div');
                newOption.className = 'form-group opcoesrespostas';
                newOption.innerHTML =
                    `<input type="text" class="form-control option-input" name="options[]"> <button class="btn btn-danger remove-option-btn" style="display:none">
                                                            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 8 8"><path fill="currentColor" d="M3 0c-.55 0-1 .45-1 1H1c-.55 0-1 .45-1 1h7c0-.55-.45-1-1-1H5c0-.55-.45-1-1-1H3zM1 3v4.81c0 .11.08.19.19.19h4.63c.11 0 .19-.08.19-.19V3h-1v3.5c0 .28-.22.5-.5.5s-.5-.22-.5-.5V3h-1v3.5c0 .28-.22.5-.5.5s-.5-.22-.5-.5V3h-1z"/></svg>
                                                        </button>`;
                optionsContainer.appendChild(newOption);
                updateRemoveOptionButtons();
            });

            function updateRemoveOptionButtons() {
                let removeOptionBtns = document.querySelectorAll('.remove-option-btn');
                for (let i = 0; i < removeOptionBtns.length; i++) {
                    removeOptionBtns[i].style.display = 'inline';
                    removeOptionBtns[i].addEventListener('click', function() {
                        optionsContainer.removeChild(removeOptionBtns[i].parentNode);
                    });
                }
            }


            updateRemoveOptionButtons();
        });

        //habilitar mais perguntas manuais

        document.addEventListener('DOMContentLoaded', function() {
            let enableManualQuestionsCheckbox = document.getElementById('enable_manual_questions');
            let manualQuestionsContainer = document.getElementById('manual-questions-container');
            let addManualQuestionBtn = document.getElementById('add-manual-question-btn');

            enableManualQuestionsCheckbox.addEventListener('change', function() {
                let contentTextarea = document.getElementById('content');
                let optionsContainer = document.getElementById('options-container');
                let addOptionBtn = document.getElementById('add-option-btn');
                let perguntasdiretas = document.getElementsByClassName('perguntasdiretas');
                if (this.checked) {
                    manualQuestionsContainer.style.display = 'block';
                    addManualQuestionBtn.style.display = 'inline';
                    contentTextarea.disabled = true;
                    contentTextarea.style.display = 'none';
                    optionsContainer.style.display = 'none';
                    addOptionBtn.style.display = 'none';
                    for (let i = 0; i < perguntasdiretas.length; i++) {
                        perguntasdiretas[i].style.display = 'none';
                    }
                    $('.directquestion').hide();
                    $('.enable_multiple_choice').hide();


                } else {
                    manualQuestionsContainer.style.display = 'none';
                    addManualQuestionBtn.style.display = 'none';
                    contentTextarea.disabled = false;
                    contentTextarea.style.display = 'block';
                    optionsContainer.style.display = 'block';
                    addOptionBtn.style.display = 'inline';
                    for (let i = 0; i < perguntasdiretas.length; i++) {
                        perguntasdiretas[i].style.display = 'block';
                    }
                    $('.directquestion').show();
                    $('.enable_multiple_choice').show();


                }
            });

            addManualQuestionBtn.addEventListener('click', function() {
                let newManualQuestion = document.createElement('div');
                newManualQuestion.className = 'form-group form-control-1';
                newManualQuestion.innerHTML =
                    `<input type="text" class="form-control manual-question-input" name="manual_questions[]"><button type="button" class="btn btn-danger remove-manual-question-btn"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 8 8"><path fill="currentColor" d="M3 0c-.55 0-1 .45-1 1H1c-.55 0-1 .45-1 1h7c0-.55-.45-1-1-1H5c0-.55-.45-1-1-1H3zM1 3v4.81c0 .11.08.19.19.19h4.63c.11 0 .19-.08.19-.19V3h-1v3.5c0 .28-.22.5-.5.5s-.5-.22-.5-.5V3h-1v3.5c0 .28-.22.5-.5.5s-.5-.22-.5-.5V3h-1z" /></svg></button>`;
                manualQuestionsContainer.appendChild(newManualQuestion);
                updateRemoveManualQuestionButtons();
            });

            function updateRemoveManualQuestionButtons() {
                let removeManualQuestionBtns = document.getElementsByClassName('remove-manual-question-btn');
                for (let i = 0; i < removeManualQuestionBtns.length; i++) {
                    removeManualQuestionBtns[i].style.display = 'inline';
                    removeManualQuestionBtns[i].addEventListener('click', function() {
                        manualQuestionsContainer.removeChild(removeManualQuestionBtns[i].parentNode);
                    });
                }
            }
        });

        //desabilitar perguntas diretas
        document.addEventListener('DOMContentLoaded', function() {
            let disableConditionalQuestionsCheckbox = document.getElementById('disable_conditional_questions');
            let contentTextarea = document.getElementById('content');
            let optionsContainer = document.getElementById('options-container');
            let addOptionBtn = document.getElementById('add-option-btn');
            let perguntasdiretas = document.getElementsByClassName('perguntasdiretas');
            let manualQuestionsContainer = document.getElementById('manual-questions-container');
            let addManualQuestionBtn = document.getElementById('add-manual-question-btn');
            disableConditionalQuestionsCheckbox.addEventListener('change', function() {
                if (this.checked) {
                    contentTextarea.disabled = true;
                    contentTextarea.style.display = 'none';
                    optionsContainer.style.display = 'none';
                    addOptionBtn.style.display = 'none';
                    for (let i = 0; i < perguntasdiretas.length; i++) {
                        perguntasdiretas[i].style.display = 'none';
                    }
                    manualQuestionsContainer.style.display = 'block';
                    addManualQuestionBtn.style.display = 'inline';
                    $('.discursivecheck').hide();


                } else {
                    contentTextarea.disabled = false;
                    contentTextarea.style.display = 'block';
                    optionsContainer.style.display = 'block';
                    addOptionBtn.style.display = 'inline';
                    for (let i = 0; i < perguntasdiretas.length; i++) {
                        perguntasdiretas[i].style.display = 'block';
                    }
                    manualQuestionsContainer.style.display = 'none';
                    addManualQuestionBtn.style.display = 'none';
                    $('.discursivecheck').show();

                }
            });
        });
    </script>
@endsection
 --}}