<!DOCTYPE html>
<html>
<head>
    <title>Teste de Validação</title>
    <style>
        .pergunta { margin: 20px; padding: 15px; border: 1px solid #ccc; }
        .condicional { margin-left: 30px; background: #f0f0f0; display: none; }
        .erro { border-color: red !important; background: #ffe6e6 !important; }
    </style>
</head>
<body>
    <h1>Teste de Validação de Perguntas Condicionais</h1>
    
    <form id="testForm">
        <!-- Pergunta 1 -->
        <div class="pergunta" data-id="1" data-obrigatoria="1">
            <h3>1. Você gosta de café? <span style="color:red">*</span></h3>
            <label>
                <input type="radio" name="pergunta1" value="sim" data-resposta-id="101"> Sim
            </label>
            <label>
                <input type="radio" name="pergunta1" value="nao" data-resposta-id="102"> Não
            </label>
            
            <!-- Condicional para "Sim" -->
            <div class="condicional" data-parent-resposta="101" data-obrigatoria="1">
                <h4>1.1. Que tipo de café você prefere? <span style="color:red">*</span></h4>
                <input type="text" name="condicional1">
            </div>
        </div>
        
        <!-- Pergunta 2 -->
        <div class="pergunta" data-id="2" data-obrigatoria="0">
            <h3>2. Você toma chá? (opcional)</h3>
            <label>
                <input type="checkbox" name="pergunta2" value="sim" data-resposta-id="201"> Sim
            </label>
            
            <!-- Condicional para "Sim" (obrigatória) -->
            <div class="condicional" data-parent-resposta="201" data-obrigatoria="1">
                <h4>2.1. Qual tipo de chá? <span style="color:red">*</span></h4>
                <label><input type="radio" name="condicional2" value="verde"> Verde</label>
                <label><input type="radio" name="condicional2" value="preto"> Preto</label>
            </div>
        </div>
        
        <button type="submit">Enviar</button>
    </form>
    
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function() {
            // Mostrar/ocultar condicionais
            $('input[type="radio"], input[type="checkbox"]').change(function() {
                // Ocultar todas as condicionais
                $('.condicional').hide().find('[required]').prop('required', false);
                
                // Mostrar condicionais das respostas selecionadas
                $('input:checked').each(function() {
                    const respostaId = $(this).data('resposta-id');
                    const condicional = $(`.condicional[data-parent-resposta="${respostaId}"]`);
                    
                    if (condicional.length) {
                        condicional.show();
                        
                        // Se for obrigatória, adicionar required
                        if (condicional.data('obrigatoria') === 1) {
                            if (condicional.find('input[type="radio"]').length) {
                                condicional.find('input[type="radio"]').prop('required', true);
                            } else {
                                condicional.find('input[type="text"]').prop('required', true);
                            }
                        }
                    }
                });
                
                console.log("Estado atualizado");
                console.log("Condicionais visíveis:", $('.condicional:visible').length);
            });
            
            // Validação
            $('#testForm').on('submit', function(e) {
                e.preventDefault();
                console.log("\n=== VALIDANDO ===");
                
                let valido = true;
                let erros = [];
                
                // Validar todas as perguntas
                $('.pergunta, .condicional:visible').each(function() {
                    const elemento = $(this);
                    const obrigatoria = elemento.data('obrigatoria') === 1;
                    const visivel = elemento.is(':visible');
                    
                    console.log(`Elemento: ${elemento.data('id') || 'condicional'}, Obrigatória: ${obrigatoria}, Visível: ${visivel}`);
                    
                    if (obrigatoria && visivel) {
                        let respondida = false;
                        
                        // Verificar radios
                        const radios = elemento.find('input[type="radio"]');
                        if (radios.length) {
                            respondida = radios.filter(':checked').length > 0;
                        }
                        
                        // Verificar checkbox
                        const checkboxes = elemento.find('input[type="checkbox"]');
                        if (checkboxes.length && !respondida) {
                            respondida = checkboxes.filter(':checked').length > 0;
                        }
                        
                        // Verificar texto
                        const textos = elemento.find('input[type="text"]');
                        if (textos.length && !respondida) {
                            respondida = textos.val().trim() !== '';
                        }
                        
                        console.log(`  Respondida: ${respondida}`);
                        
                        if (!respondida) {
                            valido = false;
                            erros.push(`"${elemento.find('h3, h4').text()}"`);
                            elemento.addClass('erro');
                        } else {
                            elemento.removeClass('erro');
                        }
                    }
                });
                
                if (!valido) {
                    alert('Erro: As seguintes perguntas são obrigatórias:\n\n' + erros.join('\n'));
                } else {
                    alert('Formulário válido! Enviando...');
                    // Aqui você enviaria o formulário
                }
            });
        });
    </script>
</body>
</html>