@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('graph.question.save') }}">
                                 <div class="row">
                                     @csrf
                                     @if ($select_questionary->isNotEmpty())
                                         <div class="col-sm-12">
                                             <div class="form-group">
                                                 <label for="">Formulário Vinculado</label>
                                                 <select class="form-control" id="questionary_id">
                                                     @foreach ($select_questionary as $questionary)
                                                         <option value="{{ $questionary->id }}"
                                                             {{ $questionary->id == $id ? 'selected' : 'disabled' }}>
                                                             {!! $questionary->name !!}</option>
                                                     @endforeach
                                                 </select>
                                             </div>
                                         </div>
                                         <div class="hl"></div>
                                     @endif
                                     <div class="perguntasdiretas" id="perguntasdiretas">
                                         <input type="hidden" required name="questionary_id" value="{{ $id }}">
                                         @if (!empty($select_question))
                                             <input type="hidden" required name="question_id"
                                                 value="{{ $select_question->id }}">
                                         @endif
                                         <div class="form-group">
                                             <label>Pergunta:</label>
                                             <input class="form-control" required name="question"
                                                 value="{{ !empty($select_question->question) ? $select_question->question : '' }}">
                                         </div>
                                         <div class="form-group">
                                             <label>Descrição:</label>
                                             <textarea class="form-control" name="description">{{ !empty($select_question->description) ? $select_question->description : '' }}</textarea>
                                         </div>
                                         <div class="form-group">
                                             <label>Impacto da pergunta(0 a 5):</label>
                                             <input required type="text" class="form-control" id="impact"
                                                 name="impact"
                                                 value="{{ !empty($select_question->impact) ? $select_question->impact : '' }}"
                                                 maxlength="1" onblur="validateInput(this)">
                                         </div>
                                         <div class="form-group">
                                             <label>Área de impacto:</label>
                                             <select class="form-control" name="source" required>
                                                 <option value="" {{ empty($select_question) ? 'selected' : '' }}>
                                                     Selecione
                                                 </option>
                                                 <option value="Órgãos de Controle, Consultivos e Auxiliares"
                                                     {{ !empty($select_question->source) && $select_question->source == 'Órgãos de Controle, Consultivos e Auxiliares' ? 'selected' : '' }}>
                                                     Órgãos de Controle, Consultivos e Auxiliares
                                                 </option>
                                                 <option value="Órgãos Administrativos"
                                                     {{ !empty($select_question->source) && $select_question->source == 'Órgãos Administrativos' ? 'selected' : '' }}>
                                                     Órgãos Administrativos
                                                 </option>
                                             </select>

                                         </div>
                                         <div class="col-sm-12" id="checkradioquestions">
                                             <div class="form-group">
                                                 <div class="row">
                                                     <div class="col-md-9">
                                                         <label>Opções de resposta:</label>
                                                     </div>
                                                     <div class="col-md-3">
                                                         <label>Valor por resposta:</label>
                                                     </div>
                                                 </div>
                                                 <div id="options-container">
                                                     @php
                                                         $cont = 0;
                                                     @endphp
                                                     @if (!empty($select_options))
                                                         @foreach ($select_options as $option)
                                                             <div class="form-row">
                                                                 <div class="form-group opcoesrespostas">
                                                                     <div class="col-md-9">
                                                                         <input type="text"
                                                                             class="form-control option-input"
                                                                             value="{{ $option->description }}"
                                                                             name="options[{{ $cont }}][description]">
                                                                     </div>
                                                                     <div class="col-md-2">
                                                                         <input type="text"
                                                                             class="form-control option-input"
                                                                             value="{{ $option->weight }}"
                                                                             name="options[{{ $cont }}][weight]">
                                                                     </div>
                                                                     <div class="col-md-1">
                                                                         <button class="btn btn-danger remove-option-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>
                                                                     </div>
                                                                 </div>
                                                             </div>
                                                             @php
                                                                 $cont++;
                                                             @endphp
                                                         @endforeach
                                                     @else
                                                         <div class="form-row">
                                                             <div class="form-group opcoesrespostas">
                                                                 <div class="col-md-9">
                                                                     <input type="text" class="form-control option-input"
                                                                         name="options[{{ $cont }}][description]">
                                                                 </div>
                                                                 <div class="col-md-2">
                                                                     <input type="text" class="form-control option-input"
                                                                         name="options[{{ $cont }}][weight]">
                                                                 </div>
                                                                 <div class="col-md-1">
                                                                     <button class="btn btn-danger remove-option-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>
                                                                 </div>
                                                             </div>
                                                         </div>
                                                         @php
                                                             $cont++;
                                                         @endphp
                                                     @endif
                                                 </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="{{ !empty($select_question) ? 'Alterar pergunta' : 'Criar pergunta' }}">
                                     </p>
                                 </div>
                             </form>
                         </div>
                     </div>
                 </div>
             </div>
         </div>
     </div>

     <script>
         document.querySelector('form').addEventListener('submit', function(e) {
             // Transferir conteúdo do TinyMCE para o textarea
             tinymce.triggerSave();

             // Remover o atributo 'required' para evitar erros de validação
             document.querySelector('textarea[name="description"]').removeAttribute('required');
         });

         document.addEventListener('DOMContentLoaded', function() {
             var input = document.getElementById('impact');

             input.addEventListener('input', function() {
                 var value = this.value;

                 // Verifica se o valor está fora do intervalo permitido (0-5)
                 if (value < 0 || value > 5 || isNaN(value) || value == ' ' || value === '') {
                     alert('Por favor, insira um número entre 0 e 5.');
                     input.value = ''; // Limpa o campo se o valor for inválido
                 }
             });
         });
     </script>
     <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');
             let optionIndex = {{ $cont }};

             addOptionBtn.addEventListener('click', function() {
                 let newOption = document.createElement('div');
                 newOption.className = 'form-row';
                 newOption.innerHTML =
                     `<div class="form-group opcoesrespostas">
                    <div class="col-md-9">
                        <input type="text"
                            class="form-control option-input"
                            name="options[${optionIndex}][description] ">
                    </div>
                    <div class="col-md-2">
                        <input type="text"
                            class="form-control option-input"
                            name="options[${optionIndex}][weight] "
                            onblur="validateInput(this)">
                    </div>
                    <div class="col-md-1">
                        <button type="button" class="btn btn-danger remove-option-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>
                </div>
            </div>`;
                 optionsContainer.appendChild(newOption);
                 optionIndex++; // Incrementar o índice após adicionar cada opção
                 updateRemoveOptionButtons();
             });

             function updateRemoveOptionButtons() {
                 let removeOptionBtns = document.querySelectorAll('.remove-option-btn');
                 removeOptionBtns.forEach((btn) => {
                     btn.removeEventListener('click',
                         removeOption); // Remover event listener existente para evitar duplicatas
                     btn.addEventListener('click', removeOption);
                 });
             }

             function removeOption(event) {
                 let optionDiv = event.target.closest('.form-row');
                 optionsContainer.removeChild(optionDiv);
             }


             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);
                 }
             }
         });
     </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