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

@section('content')
    <div class="container">
        @if (Auth::user()->is_admin)
            <div class="row">
                <div class="col-sm-12">
                    <a href="/questionarys" class="btn backbutton"><i class="fa-solid fa-angles-left"></i> Voltar</a>
                </div>
            </div>
        @endif

        <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">{{ $questionario->name }}</div>
                        <input type="hidden" id="iduser" value="{{ Auth::user()->id }}">
                        <input type="hidden" id="idquestionary" value="{{ $questionario->id }}">
                    </div>
                    <div class="card-body div-button">
                        <div class="col-md-12">
                            <table class="table table-striped">
                                <thead>
                                    <tr>
                                        <th scope="col">Descrição</th>
                                        @if (Auth::user()->is_admin == 1)
                                            <th scope="col">Status</th>
                                            <th scope="col">Tipo</th>
                                            <th scope="col">Múltiplas respostas</th>
                                        @endif
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        @if (Auth::user()->is_admin == 1)
                                            <td class="tamanhopersonalizado">{!! $questionario->description !!}</td>
                                            <td>{{ $questionario->status }}</td>
                                            <td>{{ $questionario->type }}</td>
                                            <td id="multipart">{{ $questionario->multipart == '1' ? 'Ativo' : 'Inativo' }}
                                            </td>
                                        @else
                                            <td>{!! $questionario->description !!}</td>
                                        @endif
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <input type="hidden" id="id_usuario" value="{{ Auth::user()->id }}">
        @foreach ($questions as $etapa => $questoes)
            <div class="containerDeEtapas" data-etapa="{{ $etapa }}">
                @if ($etapa >= '2')
                    <h3 class="etapa">{{ $etapa }}º Processo</h3>
                @endif
                <div id="etapa_col" class="etapa_col col-md-12">
                    <input type="hidden" id="id_etapa" name="id_etapa" value="{{ $etapa }}">
                    @foreach ($questoes as $question)
                        @if ($question->type_subquestion == 'subtitule')
                            <br>
                            <h2 class="text-center subtitulo">{!! $question->content !!}</h2>
                        @else
                            <div class="card space{{ $question->resposta != '' ? ' respondida' : ($question->is_conditional == 1 ? ' disabled-hidden' : '') }}"
                                id="card{{ $question->id }}"
                                data-questionfather="{{ $question->conditional_question_id }}"
                                data-awnserrequired="{{ $question->conditional_answer }}">
                                <div class="card-header card card-header-fli">
                                    <h6 class="text-white">
                                        <div class="indicepergunta">
                                        </div>
                                        <dt>{!! $question->content !!}</dt>
                                    </h6>
                                </div>
                                <div class="card-body">
                                    @if ($question->instruction)
                                        <h6>Instrução:</h6>
                                        <p id="none">
                                            {!! $question->instruction !!}
                                        </p>
                                    @endif
                                    @if ($question->manual_answer == '1')
                                        @if (isset($question->questoes))
                                            @foreach ($question->questoes as $questoes)
                                                <div class="form-group">
                                                    @if ($questoes->type_subquestion == 'radio')
                                                        <input class="form-check-input imputation" type="radio"
                                                            name="question_{{ $questoes->id }}_{{ $etapa }}"
                                                            id="option_{{ $questoes->id }}" value="{!! $questoes->content !!}"
                                                            data-question="{{ $questoes->id }}"
                                                            data-description="{{ $questoes->content }}"
                                                            {{ !empty($questoes->resposta) ? 'checked' : '' }}
                                                            onchange="verificacondicional({{ $question->id }},'{!! $questoes->content !!}')">
                                                        <label>{!! $questoes->content !!}</label>
                                                    @elseif($questoes->type_subquestion == 'checkbox')
                                                        <input class="form-check-input big-checkbox imputation"
                                                            type="checkbox" id=""
                                                            name="question_{{ $questoes->id }}"
                                                            value="{{ $questoes->content }}"
                                                            data-question="{{ $question->id }}"
                                                            data-description="{{ $questoes->content }}"
                                                            {{ $questoes->resposta == true ? 'checked' : '' }}
                                                            onchange="verificacondicional({{ $question->id }},'{!! $questoes->content !!}')">
                                                        <label>{!! $questoes->content !!}</label>
                                                    @else
                                                        <label>{!! $questoes->content !!}</label>
                                                        <input class="form-control imputation"
                                                            value="{!! !empty($questoes->resposta) ? $questoes->resposta : '' !!}"
                                                            name="question_{{ $questoes->id }}">
                                                    @endif
                                                </div>
                                            @endforeach
                                        @else
                                            <div class="mb-3">
                                                <textarea class="form-control textareaform" rows="3">{!! is_array($question->resposta) ? implode(', ', $question->resposta) : $question->resposta !!}</textarea>
                                            </div>
                                        @endif
                                    @else
                                        @if ($question->enable_multiple_choice == '1')
                                            @foreach ($question->options as $option)
                                                <div class="form-check alternative-check">
                                                    <input class="form-check-input big-checkbox imputation" type="checkbox"
                                                        id="" name="" value="{{ $option->content }}"
                                                        data-question="{{ $option->question_id }}"
                                                        data-description="{{ $option->content }}"
                                                        {{ $option->resposta == true ? 'checked' : '' }}
                                                        onchange="verificacondicional({{ $question->id }},'{!! $option->content !!}')">
                                                    <label class="form-check-label">{!! $option->content !!}</label>
                                                </div>
                                            @endforeach
                                        @else
                                            @foreach ($question->options as $option)
                                                <div class="form-check">
                                                    <input class="form-check-input imputation" type="radio"
                                                        name="question_{{ $question->id }}_{{ $etapa }}"
                                                        id="option_{{ $option->id }}" value="{!! $option->content !!}"
                                                        data-question="{{ $option->question_id }}"
                                                        data-description="{{ $option->content }}"
                                                        {{ $option->resposta == true ? 'checked' : '' }}
                                                        onchange="verificacondicional({{ $question->id }},'{!! $option->content !!}')">
                                                    <label class="form-check-label" for="option_{{ $option->id }}">
                                                        {!! $option->content !!}
                                                    </label>
                                                </div>
                                            @endforeach
                                        @endif
                                    @endif
                                </div>
                            </div>
                        @endif
                    @endforeach
                </div>
                <hr>
            </div>
        @endforeach

        <button id="saveProgressBtn" class="btn btn-success" {{ $questionario->multipart == '1' ? '' : '' }}><i
                class="fa-regular fa-floppy-disk"></i> Salvar
            Progresso</button>
        <button id="etapasBtn" class="btn btn-info" disabled><i class="fa-solid fa-retweet"></i>Adicionar resposta</button>
    </div>
    <script defer>
        function verificacondicionalEtapa(idquestao, valor, etapa) {
            // Seleciona apenas o contêiner da etapa específica
            const etapaContainer = document.querySelector(`.containerDeEtapas[data-etapa="${etapa}"]`);

            // Procura dentro da etapa específica
            etapaContainer.querySelectorAll(`div[data-questionfather="${idquestao}"]`).forEach(function(obj) {
                obj.classList.add('disabled-hidden');
            });

            // Mostra as perguntas que correspondem à resposta necessária dentro da mesma etapa
            var questoes = etapaContainer.querySelectorAll(
                `div[data-questionfather="${idquestao}"][data-awnserrequired="${valor}"]`);
            questoes.forEach(function(question) {
                question.classList.remove('disabled-hidden');
            });

            // Atualiza os números das perguntas após alterações
            updateQuestionNumbersEtapa(etapa);
        }

        function updateQuestionNumbersEtapa(etapa) {
            // Atualiza números das perguntas visíveis por etapa
            const etapaContainer = document.querySelector(`.containerDeEtapas[data-etapa="${etapa}"]`);
            let questionNumber = 1;
            etapaContainer.querySelectorAll('.card.space:not(.disabled-hidden)').forEach(function(card) {
                const indicePergunta = card.querySelector('.indicepergunta');
                if (indicePergunta) {
                    indicePergunta.textContent = questionNumber++;
                }
            });
        }

        document.addEventListener('DOMContentLoaded', function() {
            // Adiciona ouvintes de eventos para todos os inputs relevantes em cada etapa
            document.querySelectorAll('.containerDeEtapas').forEach(etapaContainer => {
                const etapa = etapaContainer.getAttribute('data-etapa');
                etapaContainer.querySelectorAll('input[type="radio"], input[type="checkbox"]').forEach(
                    input => {
                        input.addEventListener('change', function() {
                            if (this.checked) {
                                verificacondicionalEtapa(this.getAttribute('data-question'),
                                    this.value, etapa);
                            }
                        });
                    });
            });

            // Verifica inicialmente para todos os inputs marcados ao carregar a página
            document.querySelectorAll('.containerDeEtapas').forEach(etapaContainer => {
                const etapa = etapaContainer.getAttribute('data-etapa');
                etapaContainer.querySelectorAll(
                    'input[type="radio"]:checked, input[type="checkbox"]:checked').forEach(input => {
                    verificacondicionalEtapa(input.getAttribute('data-question'), input.value,
                        etapa);
                });
            });
        });

        function verificacondicional(idquestao, valor) {
            document.querySelectorAll('div[data-questionfather="' + idquestao + '"]').forEach(function(obj) {
                obj.classList.add('disabled-hidden');
            });
            var questoes = document.querySelectorAll('div[data-questionfather="' + idquestao + '"][data-awnserrequired="' +
                valor + '"]');
            questoes.forEach(function(question) {
                question.classList.remove('disabled-hidden');
            });

            updateQuestionNumbers();
        }
    </script>
    @if ($questionario->multipart == '1')
        <meta name="csrf-token" content="{{ csrf_token() }}">
        <script defer type="text/javascript">
            $(document).ready(function() {
                // Configuração CSRF para AJAX no jQuery
                $.ajaxSetup({
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    }
                });

                var etapaCount = {{ !empty($etapa) ? $etapa : '1' }};

                // Script para clonar etapas
                $('#etapasBtn').on('click', function() {
                    etapaCount++;
                    salvar();
                    cloneEtapaCol(etapaCount);
                    validarCondicionaisNaEtapa(etapaCount);
                });

                function cloneEtapaCol(numEtapa) {
                    console.log("Botão clicado, clonando etapa...");

                    var lastEtapaCol = $('.etapa_col').first(); // Clona a primeira etapa, não a última
                    if (lastEtapaCol.length === 0) {
                        console.error("Nenhum elemento .etapa_col encontrado.");
                        return;
                    }

                    var clonedEtapaCol = lastEtapaCol.clone();

                    // Limpa o conteúdo existente
                    clonedEtapaCol.find('h3').remove();
                    clonedEtapaCol.find('hr').remove();

                    // Adiciona novo cabeçalho
                    clonedEtapaCol.prepend('<h3 style="text-align: center; margin-top: 20px;">' + numEtapa +
                        'º Processo</h3>');

                    // Atualiza o ID da etapa
                    clonedEtapaCol.find('#id_etapa').val(numEtapa);

                    // Reseta todos os inputs e textareas
                    clonedEtapaCol.find('input').not('#id_etapa').val('');
                    clonedEtapaCol.find('textarea').val('');
                    clonedEtapaCol.find('input[type="checkbox"], input[type="radio"]').prop('checked', false);

                    // Remove classes de background
                    clonedEtapaCol.find('.indicepergunta-background, .card-header-background').removeClass(
                        'indicepergunta-background card-header-background');

                    // Lida com perguntas condicionais
                    clonedEtapaCol.find('.card.space').each(function() {
                        var $card = $(this);
                        if ($card.data('questionfather')) {
                            // Se é uma pergunta condicional, oculta-a
                            $card.addClass('disabled-hidden');
                        } else {
                            // Se não é condicional, garante que esteja visível
                            $card.removeClass('disabled-hidden');
                        }
                    });

                    // Atualiza IDs e names para evitar conflitos
                    clonedEtapaCol.find('input, textarea, select').each(function() {
                        var $element = $(this);
                        var oldId = $element.attr('id');
                        var oldName = $element.attr('name');
                        if (oldId) {
                            var newId = oldId + '_' + numEtapa;
                            $element.attr('id', newId);
                            clonedEtapaCol.find('label[for="' + oldId + '"]').attr('for', newId);
                        }
                        if (oldName) {
                            $element.attr('name', oldName + '_' + numEtapa);
                        }
                    });

                    // Adiciona a nova etapa após a última etapa existente
                    $('.etapa_col').last().after(clonedEtapaCol);
                    clonedEtapaCol.append('<hr style="margin-top: 10px;">');

                    // Atualiza os números das perguntas
                    updateQuestionNumbers();

                    // Reaplica os event listeners
                    aplicarEventListeners(clonedEtapaCol);
                }

                function validarCondicionaisNaEtapa(etapa) {
                    // Adiciona ouvintes de eventos para todos os inputs relevantes na nova etapa
                    const etapaContainer = document.querySelector(`.containerDeEtapas[data-etapa="${etapa}"]`);
                    etapaContainer.querySelectorAll('input[type="radio"], input[type="checkbox"]').forEach(input => {
                        input.addEventListener('change', function() {
                            if (this.checked) {
                                verificacondicionalEtapa(this.getAttribute('data-question'), this.value,
                                    etapa);
                            }
                        });
                    });

                    // Verifica inicialmente para todos os inputs marcados na nova etapa
                    etapaContainer.querySelectorAll('input[type="radio"]:checked, input[type="checkbox"]:checked')
                        .forEach(input => {
                            verificacondicionalEtapa(input.getAttribute('data-question'), input.value, etapa);
                        });
                }

                function salvar() {
                    var idUser = $('#id_usuario').val();
                    var idQuestionary = $('#id_questionary').val();
                    var answersByStep = {};

                    $('.etapa_col').each(function() {
                        var idEtapa = $(this).find('#id_etapa').val();
                        var answers = [];

                        $(this).find('.card.space:not(.disabled-hidden)').each(function() {
                            var questionId = $(this).attr('id').replace('card', '');

                            // Captura os inputs do tipo checkbox que estão marcados
                            $(this).find('.big-checkbox:checked').each(function() {
                                var answer = $(this).data('description');
                                if (answer !== undefined && answer !== "") {
                                    answers.push({
                                        questionId: questionId,
                                        answer: answer,
                                        type: 'checkbox'
                                    });
                                }
                            });

                            $(this).find('input:text, select').each(function() {
                                var questionId = $(this).attr('name');
                                var answer = $(this).val();

                                if (answer !== undefined && answer !== "") {
                                    answers.push({
                                        questionId: questionId,
                                        answer: answer,
                                        type: 'input'
                                    });
                                }
                            });

                            // Captura os inputs do tipo radio que estão marcados
                            $(this).find('input[type="radio"]:checked').each(function() {
                                var radioName = $(this).attr('data-question');
                                var answer = $(this).val();
                                if (radioName && answer !== undefined && answer !== "") {
                                    answers.push({
                                        questionId: radioName,
                                        answer: answer,
                                        type: 'radio'
                                    });
                                }
                            });

                            // Captura os inputs do tipo textarea que estão preenchidos
                            var textareaValue = $(this).find('.textareaform').val();
                            if (textareaValue !== undefined && textareaValue !== "") {
                                answers.push({
                                    questionId: questionId,
                                    answer: textareaValue,
                                    type: 'textarea'
                                });
                            }
                        });

                        answersByStep[idEtapa] = answers;
                    });

                    $.ajax({
                        url: '/save-answers',
                        type: 'POST',
                        data: {
                            _token: $('meta[name="csrf-token"]').attr('content'),
                            idUser: idUser,
                            idQuestionary: idQuestionary,
                            answersByStep: JSON.stringify(answersByStep)
                        },
                        success: function(response) {
                            if (response.success) {
                                toastr.success(response.success);
                            } else if (response.error) {
                                toastr.error(response.error);
                            }
                        },
                        error: function(xhr, status, error) {
                            toastr.error("Ocorreu um erro ao salvar as respostas.");
                        }
                    });
                }
            });
        </script>
    @endif

    @if ($questionario->multipart == '1')
        <meta name="csrf-token" content="{{ csrf_token() }}">
        <script defer type="text/javascript">
            $(document).ready(function() {
                // Configuração CSRF para AJAX no jQuery
                $.ajaxSetup({
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    }
                });

                var etapaCount = {{ !empty($etapa) ? $etapa : '1' }};

                // Script para clonar etapas
                $('#etapasBtn').on('click', function() {
                    etapaCount++;
                    cloneEtapaCol(etapaCount);
                    salvar();
                });

                function cloneEtapaCol(numEtapa) {
                    console.log("Botão clicado, clonando etapa...");

                    var lastEtapaCol = $('.etapa_col').last();
                    if (lastEtapaCol.length === 0) {
                        console.error("Nenhum elemento .etapa_col encontrado dentro de .containerDeEtapas.");
                        return;
                    }

                    var clonedEtapaCol = lastEtapaCol.clone();
                    clonedEtapaCol.find('h3').remove();
                    clonedEtapaCol.find('hr').remove();
                    clonedEtapaCol.prepend('<h3 style="text-align: center; margin-top: 20px;">' + numEtapa +
                        'º Processo</h3>');
                    clonedEtapaCol.find('#id_etapa').val(numEtapa);
                    clonedEtapaCol.find('input').not('#id_etapa').val('');
                    clonedEtapaCol.find('textarea').val('');
                    clonedEtapaCol.find('.indicepergunta-background, .card-header-background').removeClass(
                        'indicepergunta-background card-header-background');

                    clonedEtapaCol.find('input[type="radio"], input[type="checkbox"]').each(function() {
                        var $this = $(this);
                        $this.prop('checked', false); // Desmarca o elemento

                        var id = $this.attr('id');
                        if (id) {
                            var newId = id + '_' + numEtapa;
                            $this.attr('id', newId);

                            // Atualiza o atributo 'for' do label correspondente
                            var label = clonedEtapaCol.find('label[for="' + id + '"]');
                            if (label.length) {
                                label.attr('for', newId);
                            }
                        }
                    });

                    clonedEtapaCol.find('[style]').each(function() {
                        var $this = $(this);
                        var style = $this.attr('style');
                        $this.attr('style', style);
                    });

                    // Adiciona a nova etapa logo após a última etapa existente
                    lastEtapaCol.after(clonedEtapaCol);
                    clonedEtapaCol.append('<hr style="margin-top: 10px;">');
                }

                function salvar() {
                    var idUser = $('#id_usuario').val();
                    var idQuestionary = $('#id_questionary').val();
                    var answersByStep = {};

                    $('.etapa_col').each(function() {
                        var idEtapa = $(this).find('#id_etapa').val();
                        var answers = [];

                        $(this).find('.card.space:not(.disabled-hidden)').each(function() {
                            var questionId = $(this).attr('id').replace('card', '');

                            // Captura os inputs do tipo checkbox que estão marcados
                            $(this).find('.big-checkbox:checked').each(function() {
                                var answer = $(this).data('description');
                                if (answer !== undefined && answer !== "") {
                                    answers.push({
                                        questionId: questionId,
                                        answer: answer,
                                        type: 'checkbox'
                                    });
                                }
                            });

                            $(this).find('input:text, select').each(function() {
                                var questionId = $(this).attr('name');
                                var answer = $(this).val();

                                if (answer !== undefined && answer !== "") {
                                    answers.push({
                                        questionId: questionId,
                                        answer: answer,
                                        type: 'input'
                                    });
                                }
                            });

                            // Captura os inputs do tipo radio que estão marcados
                            $(this).find('input[type="radio"]:checked').each(function() {
                                var radioName = $(this).attr('data-question');
                                var answer = $(this).val();
                                if (radioName && answer !== undefined && answer !== "") {
                                    answers.push({
                                        questionId: radioName,
                                        answer: answer,
                                        type: 'radio'
                                    });
                                }
                            });

                            // Captura os inputs do tipo textarea que estão preenchidos
                            var textareaValue = $(this).find('.textareaform').val();
                            if (textareaValue !== undefined && textareaValue !== "") {
                                answers.push({
                                    questionId: questionId,
                                    answer: textareaValue,
                                    type: 'textarea'
                                });
                            }
                        });

                        answersByStep[idEtapa] = answers;
                    });

                    $.ajax({
                        url: '/save-answers',
                        type: 'POST',
                        data: {
                            _token: $('meta[name="csrf-token"]').attr('content'),
                            idUser: idUser,
                            idQuestionary: idQuestionary,
                            answersByStep: JSON.stringify(answersByStep)
                        },
                        success: function(response) {
                            if (response.success) {
                                toastr.success(response.success);
                            } else if (response.error) {
                                toastr.error(response.error);
                            }
                        },
                        error: function(xhr, status, error) {
                            toastr.error("Ocorreu um erro ao salvar as respostas.");
                        }
                    });
                }
            });
        </script>
    @endif


    @php
        session()->put('questionario', $questionario->id);
    @endphp
    <script defer type="text/javascript">
        $(document).ready(function() {
            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });

            $('#saveProgressBtn').on('click', function() {
                salvar1();
            });

            function salvar1() {
                var idUser = $('#id_usuario').val();
                var idQuestionary = $('#id_questionary').val();
                var answersByStep = {};

                $('.etapa_col').each(function() {
                    var idEtapa = $(this).find('#id_etapa').val();
                    var answers = [];

                    $(this).find('.card.space:not(.disabled-hidden)').each(function() {
                        var questionId = $(this).attr('id').replace('card', '');

                        // Captura os inputs do tipo checkbox que estão marcados
                        $(this).find('.big-checkbox:checked').each(function() {
                            var answer = $(this).data('description');
                            if (answer !== undefined && answer !== "") {
                                answers.push({
                                    questionId: questionId,
                                    answer: answer,
                                    type: 'checkbox'
                                });
                            }
                        });

                        $(this).find('input:text, select').each(function() {
                            var questionId = $(this).attr('name');
                            var answer = $(this).val();

                            if (answer !== undefined && answer !== "") {
                                answers.push({
                                    questionId: questionId,
                                    answer: answer,
                                    type: 'input'
                                });
                            }
                        });
                        // Captura os inputs do tipo radio que estão marcados
                        $(this).find('input[type="radio"]:checked').each(function() {
                            var radioName = $(this).attr('data-question');
                            var answer = $(this).val();
                            if (radioName && answer !== undefined && answer !== "") {
                                answers.push({
                                    questionId: radioName,
                                    answer: answer,
                                    type: 'radio'
                                });
                            }
                        });

                        // Captura os inputs do tipo textarea que estão preenchidos
                        var textareaValue = $(this).find('.textareaform').val();
                        if (textareaValue !== undefined && textareaValue !== "") {
                            answers.push({
                                questionId: questionId,
                                answer: textareaValue,
                                type: 'textarea'
                            });
                        }
                    });

                    answersByStep[idEtapa] = answers;
                });

                $.ajax({
                    url: '/save-answers',
                    type: 'POST',
                    data: {
                        _token: $('meta[name="csrf-token"]').attr('content'),
                        idUser: idUser,
                        idQuestionary: idQuestionary,
                        answersByStep: JSON.stringify(answersByStep)
                    },
                    success: function(response) {
                        if (response.success) {
                            toastr.success(response.success);
                        } else if (response.error) {
                            toastr.error(response.error);
                        }
                    },
                    error: function(xhr, status, error) {
                        toastr.error("Ocorreu um erro ao salvar as respostas.");
                    }
                });
            }

        });
    </script>
    <script>
        function updateQuestionNumbers() {
            $('.containerDeEtapas').each(function() {
                $(this).find('.etapa_col').each(function() {
                    let questionNumber = 1;

                    $(this).find('.card.space:not(.disabled-hidden)').each(function() {
                        const $card = $(this);
                        const $indicePergunta = $card.find('.indicepergunta');

                        if ($indicePergunta.length) {
                            $indicePergunta.text(questionNumber);
                            questionNumber++;
                        }
                    });
                });
            });
        }

        $(document).ready(function() {


            // Chama a função para inicializar os números
            updateQuestionNumbers();

            $(".big-checkbox").on('click', function() {
                // Se o checkbox foi marcado
                var dataQuestion = $(this).data('question');
                var dataDescription = $(this).data(
                    'description'); // Obtem o valor do atributo 'data-description'
                var answer = {
                    'dataquestion': dataQuestion,
                    'dataawnser': dataDescription, // Usa 'data-description' em vez de 'value'
                    'status': $(this).is(':checked')
                };
                //procura a div com data-questionfather igual ao data-question do checkbox e o data-awnserrequired igual ao data-awnser do checkbox
                var cards = $('div[data-questionfather="' + dataQuestion + '"][data-awnserrequired="' +
                    dataDescription + '"]');
                //se encontrou a div, verifica se o checkbox foi marcado ou desmarcado, se foi marcado retira a classe disabled-hidden, se foi desmarcado adiciona a classe disabled-hidden
                if (cards.length > 0) {
                    if ($(this).is(':checked')) {
                        cards.removeClass('disabled-hidden');
                    } else {
                        cards.addClass('disabled-hidden');

                        // Para cada card que foi ocultado, oculta também todos os seus 'filhos'
                        cards.each(function() {
                            var childCardId = $(this).attr('id').replace('card', '');
                            var childCards = $('div[data-questionfather="' + childCardId + '"]');
                            if (childCards.length > 0) {
                                childCards.addClass('disabled-hidden');
                                // Desmarcar todos os checkboxes dessas perguntas filhas
                                childCards.find('.big-checkbox').prop('checked', false);
                            }
                            // Desmarcar todos os checkboxes da pergunta oculta
                            $(this).find('.big-checkbox').prop('checked', false);
                        });
                    }
                }
                updateQuestionNumbers();
            });
        });
    </script>
    <script defer>
        document.addEventListener('DOMContentLoaded', function() {
            // Função para monitorar o estado do elemento com id 'multipart'
            function checkMultipartStatus() {
                const multipartElement = document.querySelector("#multipart");
                const etapasBtn = document.querySelector("#etapasBtn");

                if (multipartElement && etapasBtn) {
                    if (multipartElement.innerText === "Ativo") {
                        etapasBtn.style.display = "block";
                    } else {
                        etapasBtn.style.display = "none";
                    }
                }
            }

            function monitorarMudancas() {
                const etapasBtn = $("#etapasBtn"); // Usa jQuery para simplificar

                // Procura por todos os elementos textarea com a classe .textareaform
                $(".textareaform").each(function() {
                    const textareaElement = $(this); // O elemento textarea atual

                    // Adiciona um evento 'input' ao elemento textarea
                    textareaElement.on('input', function() {
                        const valor = $(this).val().trim(); // Usa jQuery para simplificar

                        if (valor === "") {
                            etapasBtn.prop("disabled", true); // Usa jQuery para simplificar
                        } else {
                            etapasBtn.prop("disabled", false); // Usa jQuery para simplificar
                        }
                    });
                });

                $(".imputation").each(function() {
                    const textareaElement = $(this); // O elemento textarea atual

                    // Adiciona um evento 'input' ao elemento textarea
                    textareaElement.on('input', function() {
                        const valor = $(this).val().trim(); // Usa jQuery para simplificar

                        if (valor === "") {
                            etapasBtn.prop("disabled", true); // Usa jQuery para simplificar
                        } else {
                            etapasBtn.prop("disabled", false); // Usa jQuery para simplificar
                        }
                    });
                });
            }

            // Chamando a função para verificar o estado inicial
            checkMultipartStatus();

            const divs = document.querySelectorAll(".indicepergunta");

            for (let i = 1; i < divs.length; i++) {
                const closestCardSpace = divs[i].closest(".card.space");

                if (closestCardSpace) {
                    const idCardSpace = closestCardSpace.id;
                    monitorarMudancas(idCardSpace);
                } else {
                    console.log(
                        "Nenhuma div .card.space encontrada nas proximidades da div com classe .indicepergunta."
                    );
                }
            }

            // Monitorar as mudanças no elemento com id 'multipart'
            const multipartElement = document.querySelector("#multipart");

            if (multipartElement) {
                multipartElement.addEventListener('DOMSubtreeModified', checkMultipartStatus);
            }
        });
    </script>
    <script type="text/javascript" defer>
        // Função para remover .form-group com inputs de nomes repetidos, deixando os últimos
        function removeDuplicateInputGroupsKeepLast() {
            // Seleciona todos os .card-body
            const cardBodies = document.querySelectorAll('.card-body');

            // Itera sobre cada .card-body
            cardBodies.forEach(cardBody => {
                // Cria um mapa para rastrear os nomes dos inputs e seus .form-group
                const nameMap = new Map();

                // Seleciona todos os .form-group dentro do .card-body
                const formGroups = cardBody.querySelectorAll('.form-group');

                // Itera sobre cada .form-group de trás para frente
                Array.from(formGroups).reverse().forEach(formGroup => {
                    const input = formGroup.querySelector('input');
                    if (input) {
                        const name = input.getAttribute('name');
                        if (name) {
                            if (nameMap.has(name)) {
                                // Se o nome já foi visto, adiciona o .form-group ao array no mapa
                                nameMap.get(name).push(formGroup);
                            } else {
                                // Se o nome ainda não foi visto, cria um array com o .form-group
                                nameMap.set(name, [formGroup]);
                            }
                        }
                    }
                });

                // Remove todos os .form-group exceto o último de cada nome
                nameMap.forEach((groups) => {
                    groups.pop(); // Remove o último elemento, que é o que queremos manter
                    groups.forEach(group => group.remove()); // Remove todos os outros
                });
            });
        }
        document.addEventListener('DOMContentLoaded', removeDuplicateInputGroupsKeepLast);
    </script>
    <script defer>
        $(document).ready(function() {
            function verificarECorrigirClasses(element) {
                var cardBody = element.closest('.card-body');
                var cardHeader = cardBody.closest('.card.space').querySelector('.card-header.card.card-header-fli');
                var indicePergunta = cardBody.closest('.card.space').querySelector('.indicepergunta');

                if (!cardHeader || !indicePergunta) {
                    console.error('Um dos elementos necessários é nulo.', {
                        cardHeader,
                        indicePergunta
                    });
                    return;
                }

                var preenchido = Array.from(cardBody.querySelectorAll('input, textarea')).some(input => {
                    if (input.type === 'checkbox' || input.type === 'radio') {
                        return input.checked;
                    } else if (input.type === 'text' || input.tagName.toLowerCase() === 'textarea') {
                        return input.value.trim() !== '';
                    }
                    return false; // Adicionado para cobrir outros tipos de input
                });

                console.log('Verificando card:', {
                    cardBody,
                    cardHeader,
                    indicePergunta,
                    preenchido
                });

                if (preenchido) {
                    cardHeader.classList.add('card-header-background');
                    indicePergunta.classList.add('indicepergunta-background');
                } else {
                    cardHeader.classList.remove('card-header-background');
                    indicePergunta.classList.remove('indicepergunta-background');
                }
            }

            // Usar delegação para capturar eventos de change de qualquer input ou textarea dentro de '.card-body'
            $('.containerDeEtapas').on('change', '.card-body input, .card-body textarea', function() {
                verificarECorrigirClasses(this);
            });

            // Inicialmente aplicar as classes corretas para todos os '.card-body'
            $('.card.space').each(function() {
                verificarECorrigirClasses(this.querySelector('.card-body'));
            });
        });
    </script>
    <script defer>
        document.addEventListener('DOMContentLoaded', function() {
            const cardBodies = document.querySelectorAll('.card-body');
            cardBodies.forEach((cardBody, index) => {
                const radioInputs = cardBody.querySelectorAll('input[type="radio"]');
                if (radioInputs.length > 0) {
                    const uniqueName = radioGroup - $ {
                        index
                    };
                    radioInputs.forEach((radioInput) => {
                        radioInput.setAttribute('name', uniqueName);
                    });
                }
            });
        });
    </script>
    <script defer>
        document.addEventListener('DOMContentLoaded', function() {
            // Função verificacondicional ajustada
            function verificacondicional(etapa, idquestao, valor) {
                const etapaContainer = document.querySelector(`#etapa_${etapa}`);
                if (!etapaContainer) return;

                etapaContainer.querySelectorAll('div[data-questionfather="' + idquestao + '"]').forEach(function(
                    obj) {
                    obj.classList.add('disabled-hidden');
                });

                var questoes = etapaContainer.querySelectorAll('div[data-questionfather="' + idquestao +
                    '"][data-awnserrequired="' + valor + '"]');
                questoes.forEach(function(question) {
                    question.classList.remove('disabled-hidden');
                });

                updateQuestionNumbers(etapa);
            }

            // Função para verificar e chamar verificacondicional se a pergunta estiver respondida
            function validarPerguntasRespondidas() {
                document.querySelectorAll('.containerDeEtapas').forEach(function(etapaContainer) {
                    const etapa = etapaContainer.querySelector('input[name="id_etapa"]').value;

                    etapaContainer.querySelectorAll('.card.space').forEach(function(card) {
                        var idquestao = card.id.replace('card', '');
                        var respostaEncontrada = false;

                        // Verifica inputs do tipo radio
                        card.querySelectorAll('input[type="radio"]').forEach(function(radio) {
                            if (radio.checked) {
                                verificacondicional(etapa, idquestao, radio.value);
                                respostaEncontrada = true;
                            }
                        });

                        // Verifica inputs do tipo checkbox
                        if (!respostaEncontrada) {
                            card.querySelectorAll('input[type="checkbox"]').forEach(function(
                                checkbox) {
                                if (checkbox.checked) {
                                    verificacondicional(etapa, idquestao, checkbox.value);
                                    respostaEncontrada = true;
                                }
                            });
                        }

                        // Verifica textareas
                        if (!respostaEncontrada) {
                            card.querySelectorAll('textarea').forEach(function(textarea) {
                                if (textarea.value.trim() !== '') {
                                    verificacondicional(etapa, idquestao, textarea.value
                                        .trim());
                                    respostaEncontrada = true;
                                }
                            });
                        }
                    });
                });
            }

            // Função para atualizar os números das perguntas
            function updateQuestionNumbers(etapa) {
                const etapaContainer = document.querySelector(`#etapa_${etapa}`);
                if (!etapaContainer) return;

                let questionNumber = 1;
                etapaContainer.querySelectorAll('.card.space:not(.disabled-hidden)').forEach(function(card) {
                    var indicePergunta = card.querySelector('.indicepergunta');
                    if (indicePergunta) {
                        indicePergunta.textContent = questionNumber;
                        questionNumber++;
                    }
                });
            }

            // Chamar a função de validação após o carregamento da página
            validarPerguntasRespondidas();
        });
    </script>
    <style>
        .card-body ul li {
            list-style-type: disc;
        }

        h2.text-center.subtitulo {
            font-size: 40px !important;
            color: #000;
        }

        .card-header {
            background-color: #004071;
        }

        /* Adicione isso ao seu arquivo CSS */
        .card-header-background {
            background-color: #00964c !important;
        }

        .indicepergunta-background {
            background-color: #256f28 !important;
        }

        .etapa {
            text-align: center;
            margin-top: 20px;
        }

        .card-body h3 {
            font-weight: 900;
            font-size: 18px;
            font-family: sans-serif;
            margin-bottom: 10px;
            color: #ffffff !important;
            background-color: #00193d;
            padding: 5px 10px;
        }

        dt {
            margin-left: 1.7rem;
        }

        h6.text-white {
            margin-bottom: 0px;
            padding: 0.2rem;
        }

        .indicepergunta {
            background-color: #002d50;
            position: absolute;
            height: 3.2rem;
            width: 3.2rem;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            border-radius: 3rem;
            left: -1rem;
            top: -0.2rem;
            font-weight: 900;
        }

        button#saveProgressBtn {
            position: fixed;
            bottom: 1rem;
            right: 2rem;
            box-shadow: 4px 4px 5px 0px #000000b8;
        }

        button#etapasBtn {
            position: fixed;
            bottom: 1rem;
            left: 2rem;
            box-shadow: 4px 4px 5px 0px #000000b8;
        }

        td.tamanhopersonalizado {
            width: 75%;
        }

        #multipart {
            text-align: center;
        }

        .hidden {
            display: none;
        }
    </style>
@endsection --}}

{{-- backup --}}

{{--     @if ($questionario->multipart == '1')
     <meta name="csrf-token" content="{{ csrf_token() }}">
        <script defer type="text/javascript">
            $(document).ready(function() {
                // Configuração CSRF para AJAX no jQuery
                $.ajaxSetup({
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    }
                });

                var etapaCount = {{ !empty($etapa) ? $etapa : '1' }};

                // Script para clonar etapas
                $('#etapasBtn').on('click', function() {
                    etapaCount++;
                    cloneEtapaCol(etapaCount);
                    salvar();

                });

                function cloneEtapaCol(numEtapa) {
                    console.log("Botão clicado, clonando etapa...");

                    var lastEtapaCol = $('.etapa_col').last();
                    if (lastEtapaCol.length === 0) {
                        console.error("Nenhum elemento .etapa_col encontrado dentro de #containerDeEtapas.");
                        return;
                    }

                    var clonedEtapaCol = lastEtapaCol.clone();
                    clonedEtapaCol.find('h3').remove();
                    clonedEtapaCol.find('hr').remove();
                    clonedEtapaCol.prepend('<h3 style="text-align: center; margin-top: 20px;">' + numEtapa +
                        'º Processo</h3>');
                    clonedEtapaCol.find('#id_etapa').val(numEtapa);
                    clonedEtapaCol.find('input').not('#id_etapa').val('');
                    clonedEtapaCol.find('textarea').val('');
                    clonedEtapaCol.find('.indicepergunta-background, .card-header-background').removeClass(
                        'indicepergunta-background card-header-background');

                    clonedEtapaCol.find('input[type="radio"], input[type="checkbox"]').each(function() {
                        var $this = $(this);
                        $this.prop('checked', false); // Desmarca o elemento

                        var id = $this.attr('id');
                        if (id) {
                            var newId = id + '_' + numEtapa;
                            $this.attr('id', newId);

                            // Atualiza o atributo 'for' do label correspondente
                            var label = clonedEtapaCol.find('label[for="' + id + '"]');
                            if (label.length) {
                                label.attr('for', newId);
                            }
                        }
                    });


                    clonedEtapaCol.find('[style]').each(function() {
                        var $this = $(this);
                        var style = $this.attr('style');
                        $this.attr('style', style);
                    });

                    clonedEtapaCol.append('<hr style="margin-top: 10px;">');
                    $(".containerDeEtapas").append(clonedEtapaCol);


                }

                function salvar() {
                var idUser = $('#id_usuario').val();
                var idQuestionary = $('#id_questionary').val();
                var answersByStep = {};

                $('.etapa_col').each(function() {
                    var idEtapa = $(this).find('#id_etapa').val();
                    var answers = [];

                    $(this).find('.card.space:not(.disabled-hidden)').each(function() {
                        var questionId = $(this).attr('id').replace('card', '');

                        // Captura os inputs do tipo checkbox que estão marcados
                        $(this).find('.big-checkbox:checked').each(function() {
                            var answer = $(this).data('description');
                            if (answer !== undefined && answer !== "") {
                                answers.push({
                                    questionId: questionId,
                                    answer: answer,
                                    type: 'checkbox'
                                });
                            }
                        });

                        $(this).find('input:text, select').each(function() {
                            var questionId = $(this).attr('name');
                            var answer = $(this).val();

                            if (answer !== undefined && answer !== "") {
                                answers.push({
                                    questionId: questionId,
                                    answer: answer,
                                    type: 'input'
                                });
                            }
                        });
                        // Captura os inputs do tipo radio que estão marcados
                        $(this).find('input[type="radio"]:checked').each(function() {
                            var radioName = $(this).attr('data-question');
                            var answer = $(this).val();
                            if (radioName && answer !== undefined && answer !== "") {
                                answers.push({
                                    questionId: radioName,
                                    answer: answer,
                                    type: 'radio'
                                });
                            }
                        });

                        // Captura os inputs do tipo textarea que estão preenchidos
                        var textareaValue = $(this).find('.textareaform').val();
                        if (textareaValue !== undefined && textareaValue !== "") {
                            answers.push({
                                questionId: questionId,
                                answer: textareaValue,
                                type: 'textarea'
                            });
                        }
                    });

                    answersByStep[idEtapa] = answers;
                });

                $.ajax({
                    url: '/save-answers',
                    type: 'POST',
                    data: {
                        _token: $('meta[name="csrf-token"]').attr('content'),
                        idUser: idUser,
                        idQuestionary: idQuestionary,
                        answersByStep: JSON.stringify(answersByStep)
                    },
                    success: function(response) {
                        if (response.success) {
                            toastr.success(response.success);
                        } else if (response.error) {
                            toastr.error(response.error);
                        }
                    },
                    error: function(xhr, status, error) {
                        toastr.error("Ocorreu um erro ao salvar as respostas.");
                    }
                });
            }
            });
        </script>

        <script defer>
            document.addEventListener('DOMContentLoaded', function() {
                // Função para monitorar o estado do elemento com id 'multipart'
                function checkMultipartStatus() {
                    const multipartElement = document.querySelector("#multipart");
                    const etapasBtn = document.querySelector("#saveProgressBtn");

                    if (multipartElement && etapasBtn) {
                        if (multipartElement.innerText === "Ativo") {
                            etapasBtn.style.display = "block";
                        } else {
                            etapasBtn.style.display = "none";
                        }
                    }
                }

                // Chamando a função para verificar o estado inicial
                checkMultipartStatus();

                const divs = document.querySelectorAll(".indicepergunta");

                for (let i = 1; i < divs.length; i++) {
                    const closestCardSpace = divs[i].closest(".card.space");

                    if (closestCardSpace) {
                        const idCardSpace = closestCardSpace.id;
                        monitorarMudancas(idCardSpace);
                        monitorarMudancasImput(idCardSpace);
                    } else {
                        console.log(
                            "Nenhuma div .card.space encontrada nas proximidades da div com classe .indicepergunta."
                        );
                    }
                }

                // Monitorar as mudanças no elemento com id 'multipart'
                const multipartElement = document.querySelector("#multipart");

                if (multipartElement) {
                    multipartElement.addEventListener('DOMSubtreeModified', checkMultipartStatus);
                }
            });
        </script>
    @endif --}}