
<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Formulário com Condicionais</title>
    <meta name="csrf-token" content="49376145605c1480d1173ff8062f18e07fa28a375f52b78f62d38b22fbc189a9">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            background-color: #f5f5f5;
        }

        .header-fixed {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            background-color: #f5f5f5;
            padding: 15px 20px;
            z-index: 1000;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .header-fixed img {
            height: 50px;
            margin-right: 15px;
        }
        
        .header-fixed h2 {
            margin: 0;
            flex-grow: 1;
            text-align: center;
        }
        
        /* Menu Hamburger */
        .menu-container {
            position: relative;
            display: inline-block;
        }
        
        .hamburger-btn {
            background: none;
            border: none;
            font-size: 24px;
            cursor: pointer;
            padding: 10px;
            color: #333;
        }
        
        .dropdown-menu {
            display: none;
            position: absolute;
            right: 0;
            background-color: white;
            min-width: 200px;
            box-shadow: 0 8px 16px rgba(0,0,0,0.2);
            z-index: 1;
            border-radius: 4px;
            overflow: hidden;
        }
        
        .dropdown-menu a {
            color: #333;
            padding: 12px 16px;
            text-decoration: none;
            display: block;
            text-align: left;
            transition: background-color 0.3s;
        }
        
        .dropdown-menu a:hover {
            background-color: #f1f1f1;
        }
        
        .dropdown-menu.show {
            display: block;
        }
        
        .submenu {
            display: none;
            padding-left: 20px;
            margin-top: 10px;
            background-color: #f9f9f9;
        }
        
        .submenu a {
            display: block;
            padding: 8px 16px;
            text-decoration: none;
            color: #333;
            font-size: 0.9em;
        }
        
        .submenu a:hover {
            background-color: #f1f1f1;
        }
        
        .menu-item {
            position: relative;
        }
        
        .menu-item > a {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .menu-item > a:after {
            content: "▶";
            font-size: 0.8em;
            transition: transform 0.3s;
        }
        
        .menu-item.open > a:after {
            transform: rotate(90deg);
        }
        
        /* Classes para menu */
        .menu-btn-success {
            color: #6B8E23;
        }
        
        .menu-btn-primary {
            color: #0000FF;
        }
        
        .menu-btn-danger {
            color: #e74c3c;
        }

        .content-wrapper {
            margin-top: 80px;
            padding: 20px;
        }
        
        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
            background: white;
            border-radius: 8px;
            box-shadow: 0 0 10px rgba(0,0,0,0.1);
        }

        /* Estilos específicos do formulário */
        .pergunta, .resposta {
            display: flex;
            align-items: center;
            padding: 5px 8px;
            background: #fff;
            border: 1px solid #ccc;
            border-radius: 6px;
            margin-bottom: 6px;
            gap: 6px;
            flex-wrap: wrap;
        }
        
        input[type="text"] {
            flex-grow: 1;
            min-width: 180px;
            padding: 4px;
            font-size: 13px;
        }
        
        select {
            font-size: 13px;
            padding: 3px;
        }
        
        .acoes button {
            margin-left: 4px;
            font-size: 12px;
            padding: 3px 6px;
            cursor: pointer;
        }
        
        .respostas {
            margin-left: 25px;
            margin-top: 4px;
        }
        
        .oculto {
            display: none;
        }
        
        .toggle {
            cursor: pointer;
            font-weight: bold;
            font-size: 14px;
            user-select: none;
            margin-right: 4px;
        }
        
        #formulario-header {
            margin-bottom: 12px;
        }
        
        #formulario-header input {
            padding: 6px;
            font-size: 14px;
            width: 300px;
        }
        
        #salvar-btn {
            padding: 6px 12px;
            font-size: 14px;
            margin-left: 10px;
            cursor: pointer;
        }

        /* Estilos para a lista de formulários */
        .lista-formularios {
            margin: 20px 0;
            border: 1px solid #ddd;
            border-radius: 5px;
            overflow: hidden;
        }
        
        .lista-formularios table {
            width: 100%;
            border-collapse: collapse;
        }
        
        .lista-formularios th, .lista-formularios td {
            padding: 12px 15px;
            text-align: left;
            border-bottom: 1px solid #ddd;
        }
        
        .lista-formularios th {
            background-color: #f5f5f5;
            font-weight: bold;
        }
        
        .lista-formularios tr:hover {
            background-color: #f9f9f9;
        }
        
        .lista-formularios .acoes {
            display: flex;
            gap: 5px;
        }
        
        .lista-formularios .acoes button {
            padding: 5px 10px;
            border: none;
            border-radius: 3px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .lista-formularios .acoes .editar {
            background-color: #4CAF50;
            color: white;
        }
        
        .lista-formularios .acoes .excluir {
            background-color: #f44336;
            color: white;
        }
        
        .lista-formularios .acoes .duplicar {
            background-color: #2196F3;
            color: white;
        }
        
        .aba-container {
            margin-bottom: 20px;
        }
        
        .abas {
            display: flex;
            border-bottom: 1px solid #ddd;
            margin-bottom: 20px;
        }
        
        .aba {
            padding: 10px 20px;
            cursor: pointer;
            border: 1px solid transparent;
            border-bottom: none;
            margin-right: 5px;
            background-color: #f5f5f5;
            border-radius: 5px 5px 0 0;
        }
        
        .aba.ativa {
            background-color: white;
            border-color: #ddd;
            border-bottom: 1px solid white;
            margin-bottom: -1px;
            font-weight: bold;
        }
        
        .conteudo-aba {
            display: none;
        }
        
        .conteudo-aba.ativa {
            display: block;
        }

         .lista-formularios .acoes button {
            padding: 5px 10px;
            border: none;
            border-radius: 3px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 16px;
            background: none;
        }
        
        .lista-formularios .acoes button:hover {
            background-color: #f0f0f0;
        }

    </style>
</head>
<body>
    <!-- Cabeçalho Fixo -->
    <div class="header-fixed">
        <img src="tvitec.png" alt="Logo TVITEC" style="height:40px; margin-right: 15px;">

        <div style="flex-grow: 1; display: flex; align-items: center; justify-content: center; gap: 12px;">
            <h2 style="margin: 0;">Formulário com Condicionais</h2>

            <button onclick="abrirTelefone()" 
                    style="background:none; border:none; cursor:pointer; padding:6px; color:#007bff; display:flex; align-items:center; justify-content:center;"
                    title="Abrir telefone" aria-label="Abrir telefone">
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 24 24">
                    <path d="M6.62 10.79a15.091 15.091 0 006.59 6.59l2.2-2.2a1 1 0 011.11-.21 11.36 11.36 0 003.55.57 1 1 0 011 1v3.5a1 1 0 01-1 1A17 17 0 013 5a1 1 0 011-1h3.5a1 1 0 011 1 11.36 11.36 0 00.57 3.55 1 1 0 01-.21 1.11l-2.24 2.13z"/>
                </svg>
            </button>
        </div>

        <div class="user-info" style="display:flex; align-items:center; gap:10px;">
                            <div class="user-initial" style="width:40px; height:40px; border-radius:50%; background:#ccc; display:flex; align-items:center; justify-content:center; font-weight:bold; font-size:1.2em;">
                    T                </div>
                        <div style="text-align:left;">
                <div style="font-weight: bold; color: #333; font-size: 1.1em;">
                    Thiago Vieira                </div>
                <div style="font-size: 0.9em; color: #555;">
                    tvi@tvitec.com                </div>
            </div>
        </div>
        
        <!-- Menu Hamburger -->
        <div class="menu-container">
            <button class="hamburger-btn" onclick="toggleMenu()">☰</button>
            <div class="dropdown-menu" id="dropdownMenu">
                <a href="index.php" class="menu-btn-primary">← Início</a>

                                    <div class="menu-item">
                        <a href="javascript:void(0);" class="menu-btn-primary" onclick="toggleSubmenu('clientesSubmenu')">👥 Clientes</a>
                        <div id="clientesSubmenu" class="submenu">
                            <a href="cadastrar_cliente.php" class="menu-btn-success">➕ Novo Cliente</a>
                            <a href="lista_clientes.php" class="menu-btn-primary">📋 Listar Clientes</a>
                        </div>
                    </div>
                
                <div class="menu-item">
                    <a href="javascript:void(0);" class="menu-btn-primary" onclick="toggleSubmenu('produtosSubmenu')">📦 Produtos</a>
                    <div id="produtosSubmenu" class="submenu">
                        <a href="lista_produtos.php" class="menu-btn-primary">📋 Lista de Produtos</a>
                        <a href="cadastrar_produto.php" class="menu-btn-primary">➕ Novo Produto</a>
                    </div>
                </div>

                <div class="menu-item">
                    <a href="javascript:void(0);" class="menu-btn-primary" onclick="toggleSubmenu('atividadesSubmenu')">📝 Atividades</a>
                    <div id="atividadesSubmenu" class="submenu">
                        <a href="lista_atividades.php" class="menu-btn-primary">📋 Listar Atividades</a>
                        <a href="cadastrar_atividade.php" class="menu-btn-primary">✍️ Cadastrar Tipo de Atividade</a>
                        <a href="consulta_atividades.php" class="menu-btn-primary">🔍 Consulta atividades</a>
                    </div>
                </div>

                <!-- Seção de Origens -->
                <div class="menu-item">
                    <a href="javascript:void(0);" class="menu-btn-primary" onclick="toggleSubmenu('origensSubmenu')">🌐 Origens</a>
                    <div id="origensSubmenu" class="submenu">
                        <a href="cadastrar_origem.php" class="menu-btn-primary">➕ Cadastrar Origem</a>
                        <a href="lista_origens.php" class="menu-btn-primary">📋 Listar Origens</a>
                    </div>
                </div>

                <div class="menu-item">
                    <a href="javascript:void(0);" class="menu-btn-primary" onclick="toggleSubmenu('emailSubmenu')">📧 E-mail & Configurações</a>
                    <div id="emailSubmenu" class="submenu">
                        <a href="email_app.php" class="menu-btn-primary">⚙️ Configurar E-mail</a>
                        <a href="email.php" class="menu-btn-primary">📨 Enviar E-mail</a>
                    </div>
                </div>

                                    <div class="menu-item">
                        <a href="javascript:void(0);" class="menu-btn-primary" onclick="toggleSubmenu('adminSubmenu')">👤 Administração</a>
                        <div id="adminSubmenu" class="submenu">
                            <a href="cadastrar_usuario.php" class="menu-btn-primary">➕ Cadastrar Usuário</a>
                            <a href="gerenciar_usuarios.php" class="menu-btn-primary">👥 Gerenciar Usuários</a>
                        </div>
                    </div>
                
                <!-- Novo submenu: Análise -->
                <div class="menu-item">
                    <a href="javascript:void(0);" class="menu-btn-primary" onclick="toggleSubmenu('analiseSubmenu')">📈 Análise</a>
                    <div id="analiseSubmenu" class="submenu">
                        <a href="dashboard_clientes.php" class="menu-btn-primary">📊 Dashboard</a>
                        <a href="mapa_vendas.php" class="menu-btn-primary">📍 Mapa de Vendas</a>
                    </div>
                </div>
                <a href="formulario.php" class="menu-btn-primary">📝 Formulários</a>
                <a href="calendario.php" class="menu-btn-primary">📅 Calendário</a>
                <a href="funis.php" class="menu-btn-primary">🔽 Gerenciar Funis</a>
                <a href="chat.php" class="menu-btn-success">💬 Chat</a>
                <a href="#" onclick="abrirModalAlterarSenha()" class="menu-btn-primary">🔒 Alterar Senha</a>

                <a href="perfil_usuario.php" class="menu-btn-primary">🪪 Perfil</a>

                <a href="logout.php" class="menu-btn-danger">🚪 Sair</a>
                <h6 class="version-info">Tvitecnologia SON v1.0</h6>
            </div>
        </div>
    </div>

    <div class="content-wrapper">
        <div class="container">
            <div class="aba-container">
                <div class="abas">
                    <div class="aba ativa" onclick="mostrarAba('lista')">📋 Formulários Existentes</div>
                    <div class="aba" onclick="mostrarAba('novo')">➕ Novo Formulário</div>
                </div>
                
                <div id="aba-lista" class="conteudo-aba ativa">
                    <h2>Formulários Existentes</h2>
                    
                                            <div class="lista-formularios">
                            <table>
                                <thead>
                                    <tr>
                                        <th>ID</th>
                                        <th>Nome</th>
                                        <th>Criado em</th>
                                        <th>Ações</th>
                                    </tr>
                                </thead>
                                <tbody>
                                                                            <tr>
                                            <td>25</td>
                                            <td>Cópia de 1507-2</td>
                                            <td>15/07/2025 10:18</td>
                                            <td class="acoes">
                                                <button onclick="editarFormulario(25)" title="Editar">✏️</button>
                                                 <a href="formulario_excluir.php?id=25" class="btn btn-danger btn-sm" onclick="return confirm('Tem certeza que deseja excluir este formulário?')">Excluir</a>
                                                <button onclick="duplicarFormulario(25)" title="Duplicar">⎘</button>
                                            </td>
                                        </tr>
                                                                            <tr>
                                            <td>23</td>
                                            <td>1507-3</td>
                                            <td>15/07/2025 09:20</td>
                                            <td class="acoes">
                                                <button onclick="editarFormulario(23)" title="Editar">✏️</button>
                                                 <a href="formulario_excluir.php?id=23" class="btn btn-danger btn-sm" onclick="return confirm('Tem certeza que deseja excluir este formulário?')">Excluir</a>
                                                <button onclick="duplicarFormulario(23)" title="Duplicar">⎘</button>
                                            </td>
                                        </tr>
                                                                            <tr>
                                            <td>19</td>
                                            <td>1507-2</td>
                                            <td>15/07/2025 08:47</td>
                                            <td class="acoes">
                                                <button onclick="editarFormulario(19)" title="Editar">✏️</button>
                                                 <a href="formulario_excluir.php?id=19" class="btn btn-danger btn-sm" onclick="return confirm('Tem certeza que deseja excluir este formulário?')">Excluir</a>
                                                <button onclick="duplicarFormulario(19)" title="Duplicar">⎘</button>
                                            </td>
                                        </tr>
                                                                            <tr>
                                            <td>17</td>
                                            <td>1507</td>
                                            <td>14/07/2025 15:32</td>
                                            <td class="acoes">
                                                <button onclick="editarFormulario(17)" title="Editar">✏️</button>
                                                 <a href="formulario_excluir.php?id=17" class="btn btn-danger btn-sm" onclick="return confirm('Tem certeza que deseja excluir este formulário?')">Excluir</a>
                                                <button onclick="duplicarFormulario(17)" title="Duplicar">⎘</button>
                                            </td>
                                        </tr>
                                                                    </tbody>
                            </table>
                        </div>
                                    </div>
                
                <div id="aba-novo" class="conteudo-aba">
                    <h2>Novo Formulário</h2>

                    <div id="formulario-header">
                        <label for="nome_formulario">Nome do formulário:</label>
                        <input type="text" id="nome_formulario" placeholder="Digite o nome do formulário">
                        <button id="salvar-btn" onclick="salvarFormulario()">📃 Salvar Formulário</button>
                    </div>

                    <div id="perguntas-container"></div>
                    <button onclick="adicionarPergunta()">+ Adicionar Pergunta</button>
                </div>
            </div>
        </div>
    </div>

    <script>
    // Funções para abas
    function mostrarAba(abaId) {
        // Esconder todas as abas
        document.querySelectorAll('.conteudo-aba').forEach(aba => {
            aba.classList.remove('ativa');
        });
        
        // Mostrar a aba selecionada
        document.getElementById(`aba-${abaId}`).classList.add('ativa');
        
        // Atualizar visualização das abas
        document.querySelectorAll('.abas .aba').forEach(aba => {
            aba.classList.remove('ativa');
        });
        
        // Ativar a aba clicada
        event.currentTarget.classList.add('ativa');
    }
    
    // Funções para formulários existentes
    function editarFormulario(id) {
        // Carregar o formulário para edição
        fetch(`formulario_carregar.php?id=${id}`)
            .then(response => response.json())
            .then(data => {
                if (data.status === 'sucesso') {
                    // Preencher o nome do formulário
                    document.getElementById('nome_formulario').value = data.formulario.nome;
                    
                    // Limpar perguntas existentes
                    document.getElementById('perguntas-container').innerHTML = '';
                    
                    // Reconstruir a estrutura do formulário
                    if (data.formulario.estrutura && data.formulario.estrutura.perguntas) {
                        data.formulario.estrutura.perguntas.forEach(pergunta => {
                            const perguntaId = adicionarPergunta();
                            const perguntaEl = document.getElementById(perguntaId);
                            
                            // Preencher pergunta
                            perguntaEl.querySelector('input').value = pergunta.pergunta;
                            perguntaEl.querySelector('select').value = pergunta.tipo;
                            
                            // Adicionar respostas
                            if (pergunta.respostas && pergunta.respostas.length > 0) {
                                pergunta.respostas.forEach(resposta => {
                                    const respostaId = adicionarResposta(perguntaId);
                                    const respostaEl = document.getElementById(respostaId);
                                    
                                    // Preencher resposta
                                    respostaEl.querySelector('input').value = resposta.resposta;
                                    
                                    // Adicionar condicionais
                                    if (resposta.condicionais && resposta.condicionais.length > 0) {
                                        resposta.condicionais.forEach(condicional => {
                                            const condicionalId = adicionarPergunta(respostaId);
                                            const condicionalEl = document.getElementById(condicionalId);
                                            
                                            // Preencher condicional
                                            condicionalEl.querySelector('input').value = condicional.pergunta;
                                            condicionalEl.querySelector('select').value = condicional.tipo;
                                            
                                            // Poderia continuar recursivamente para condicionais aninhadas
                                        });
                                    }
                                });
                            }
                        });
                    }
                    
                    // Mudar para a aba de edição
                    mostrarAba('novo');
                    
                    // Adicionar um campo oculto para o ID do formulário
                    let idInput = document.getElementById('formulario-id');
                    if (!idInput) {
                        idInput = document.createElement('input');
                        idInput.type = 'hidden';
                        idInput.id = 'formulario-id';
                        document.getElementById('formulario-header').appendChild(idInput);
                    }
                    idInput.value = id;
                } else {
                    alert('Erro ao carregar formulário: ' + data.mensagem);
                }
            })
            .catch(error => {
                console.error('Erro:', error);
                alert('Erro ao carregar formulário');
            });
    }
    
    function confirmarExclusao(id, nome) {
        if (confirm(`Tem certeza que deseja excluir o formulário "${nome}"? Esta ação não pode ser desfeita.`)) {
            excluirFormulario(id);
        }
    }
    
    function excluirFormulario(id) {
        fetch('formulario_excluir.php', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-Token': document.querySelector('meta[name="csrf-token"]').content
            },
            body: JSON.stringify({ id: id })
        })
        .then(response => response.json())
        .then(data => {
            if (data.status === 'sucesso') {
                alert('Formulário excluído com sucesso!');
                location.reload();
            } else {
                alert('Erro ao excluir: ' + data.mensagem);
            }
        })
        .catch(error => {
            console.error('Erro:', error);
            alert('Erro ao excluir formulário');
        });
    }
    
    function duplicarFormulario(id) {
        if (confirm('Deseja criar uma cópia deste formulário?')) {
            fetch('formulario_duplicar.php', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-Token': document.querySelector('meta[name="csrf-token"]').content
                },
                body: JSON.stringify({ id: id })
            })
            .then(response => response.json())
            .then(data => {
                if (data.status === 'sucesso') {
                    alert('Formulário duplicado com sucesso!');
                    location.reload();
                } else {
                    alert('Erro ao duplicar: ' + data.mensagem);
                }
            })
            .catch(error => {
                console.error('Erro:', error);
                alert('Erro ao duplicar formulário');
            });
        }
    }

    // Funções para construção do formulário
    let contadorPergunta = 0;

    function adicionarPergunta(parentId = null) {
        const id = `pergunta-${contadorPergunta++}`;
        const div = document.createElement('div');
        div.className = 'pergunta';
        div.id = id;

        div.innerHTML = `
            <span class="toggle" onclick="toggleRespostas('${id}')">▶</span>
            <input type="text" placeholder="Digite a pergunta...">
            <select onchange="atualizarTipoPergunta('${id}')">
                <option value="unica">Única escolha</option>
                <option value="multipla">Múltipla escolha</option>
                <option value="aberta">Resposta aberta</option>
            </select>
            <div class="acoes">
                <button onclick="editarPergunta('${id}')">✏️</button>
                <button onclick="duplicarPergunta('${id}')">⎘</button>
                <button onclick="removerPergunta('${id}')">🗑️</button>
                <button onclick="adicionarResposta('${id}')">+ Resposta</button>
            </div>
        `;

        const respostas = document.createElement('div');
        respostas.className = 'respostas oculto';
        respostas.id = `${id}-respostas`;

        if (parentId) {
            document.getElementById(`${parentId}-respostas`).appendChild(div);
            document.getElementById(`${parentId}-respostas`).appendChild(respostas);
        } else {
            document.getElementById('perguntas-container').appendChild(div);
            document.getElementById('perguntas-container').appendChild(respostas);
        }
        
        return id;
    }

    function atualizarTipoPergunta(perguntaId) {
        const perguntaEl = document.getElementById(perguntaId);
        const tipo = perguntaEl.querySelector('select').value;
        const respostasEl = document.getElementById(`${perguntaId}-respostas`);
        
        // Se for resposta aberta, remover todas as respostas
        if (tipo === 'aberta') {
            respostasEl.innerHTML = '';
        }
    }

    function adicionarResposta(perguntaId) {
        const perguntaEl = document.getElementById(perguntaId);
        const tipo = perguntaEl.querySelector('select').value;
        
        // Não permitir adicionar respostas se for pergunta aberta
        if (tipo === 'aberta') {
            alert('Perguntas abertas não podem ter respostas pré-definidas.');
            return null;
        }
        
        const id = `${perguntaId}-resp-${Math.random().toString(36).substr(2, 5)}`;
        const div = document.createElement('div');
        div.className = 'resposta';
        div.id = id;

        div.innerHTML = `
            <input type="text" placeholder="Resposta...">
            <div class="acoes">
                <button onclick="editarPergunta('${id}')">✏️</button>
                <button onclick="duplicarPergunta('${id}')">⎘</button>
                <button onclick="removerPergunta('${id}')">🗑️</button>
                <button onclick="adicionarCondicional('${id}')">+ Condicional</button>
            </div>
        `;

        const condicionais = document.createElement('div');
        condicionais.className = 'respostas oculto';
        condicionais.id = `${id}-respostas`;

        const container = document.getElementById(`${perguntaId}-respostas`);
        container.appendChild(div);
        container.appendChild(condicionais);
        container.classList.remove('oculto');
        
        return id;
    }

    function adicionarCondicional(respostaId) {
        const perguntaId = adicionarPergunta(respostaId);
        toggleRespostas(respostaId);
        return perguntaId;
    }

    function editarPergunta(id) {
        const el = document.querySelector(`#${id} input`);
        if (el) {
            el.focus();
            el.select();
        }
    }

    function removerPergunta(idOrBtn) {
        if (typeof idOrBtn === 'string') {
            const el = document.getElementById(idOrBtn);
            const respostas = document.getElementById(`${idOrBtn}-respostas`);
            if (el) el.remove();
            if (respostas) respostas.remove();
        } else {
            const el = idOrBtn.closest('.resposta');
            const respostas = document.getElementById(`${el.id}-respostas`);
            if (el) el.remove();
            if (respostas) respostas.remove();
        }
    }

    function duplicarPergunta(id) {
        const original = document.getElementById(id);
        const clone = original.cloneNode(true);
        const novoId = `pergunta-${contadorPergunta++}`;
        clone.id = novoId;

        const respostasClone = document.createElement('div');
        respostasClone.className = 'respostas oculto';
        respostasClone.id = `${novoId}-respostas`;

        clone.querySelectorAll('button').forEach(btn => {
            let onClick = btn.getAttribute('onclick');
            if (onClick) btn.setAttribute('onclick', onClick.replaceAll(id, novoId));
        });

        const toggle = clone.querySelector('.toggle');
        if (toggle) toggle.setAttribute('onclick', `toggleRespostas('${novoId}')`);

        const select = clone.querySelector('select');
        if (select) select.setAttribute('onchange', `atualizarTipoPergunta('${novoId}')`);

        original.parentNode.insertBefore(clone, original.nextSibling);
        original.parentNode.insertBefore(respostasClone, clone.nextSibling);
        
        return novoId;
    }

    function duplicarResposta(id) {
        const original = document.getElementById(id);
        const clone = original.cloneNode(true);
        const novoId = `${id}-copy-${Math.random().toString(36).substr(2, 5)}`;
        clone.id = novoId;

        const respostasClone = document.createElement('div');
        respostasClone.className = 'respostas oculto';
        respostasClone.id = `${novoId}-respostas`;

        clone.querySelectorAll('button').forEach(btn => {
            let onClick = btn.getAttribute('onclick');
            if (onClick) btn.setAttribute('onclick', onClick.replaceAll(id, novoId));
        });

        const container = document.getElementById(`${id.split('-resp-')[0]}-respostas`);
        container.insertBefore(clone, original.nextSibling);
        container.insertBefore(respostasClone, clone.nextSibling);
        
        return novoId;
    }

    function toggleRespostas(id) {
        const respostas = document.getElementById(`${id}-respostas`);
        const toggle = document.querySelector(`#${id} .toggle`);
        if (respostas) {
            if (respostas.classList.contains('oculto')) {
                respostas.classList.remove('oculto');
                if (toggle) toggle.textContent = '▼';
            } else {
                respostas.classList.add('oculto');
                if (toggle) toggle.textContent = '▶';
            }
        }
    }

   function salvarFormulario() {
        const nome = document.getElementById('nome_formulario').value.trim();
        if (!nome) {
            alert("Por favor, digite o nome do formulário.");
            return;
        }

        function coletarPerguntas(container, parentRespostaId = null) {
            const perguntas = [];
            const elementos = container.children;

            for (let i = 0; i < elementos.length; i++) {
                const el = elementos[i];
                if (el.classList.contains('pergunta')) {
                    const texto = el.querySelector('input').value.trim();
                    const tipo = el.querySelector('select').value;
                    
                    const perguntaData = {
                        texto: texto,
                        tipo: tipo,
                        parent_resposta_id: parentRespostaId
                    };

                    if (tipo !== 'aberta') {
                        const respostasData = coletarRespostas(document.getElementById(`${el.id}-respostas`));
                        perguntaData.respostas = respostasData;
                    }

                    perguntas.push(perguntaData);
                }
            }
            return perguntas;
        }

        function coletarRespostas(container) {
            const respostas = [];
            const elementos = container.children;

            for (let i = 0; i < elementos.length; i++) {
                const el = elementos[i];
                if (el.classList.contains('resposta')) {
                    const texto = el.querySelector('input').value.trim();
                    
                    const respostaData = {
                        texto: texto,
                        condicionais: coletarPerguntas(document.getElementById(`${el.id}-respostas`), i + 1)
                    };

                    respostas.push(respostaData);
                }
            }
            return respostas;
        }

        const dados = {
            nome: nome,
            perguntas: coletarPerguntas(document.getElementById('perguntas-container')),
            tenant_id: 17        };

        const formularioId = document.getElementById('formulario-id') ? document.getElementById('formulario-id').value : null;
        const url = formularioId ? 'formulario_atualizar.php' : 'formulario_salvar.php';
        
        if (formularioId) {
            dados.id = formularioId;
        }

        // Obter o token CSRF do meta tag
        const csrfToken = document.querySelector('meta[name="csrf-token"]').content;

        fetch(url, {
            method: 'POST',
            headers: { 
                'Content-Type': 'application/json',
                'X-CSRF-Token': csrfToken
            },
            body: JSON.stringify(dados)
        })
        .then(res => res.json())
        .then(data => {
            if (data.status === 'sucesso') {
                alert("Formulário salvo com sucesso! ID: " + data.formulario_id);
                location.reload();
            } else {
                alert("Erro ao salvar: " + data.mensagem);
            }
        })
        .catch(error => {
            console.error('Erro:', error);
            alert("Erro ao enviar dados para o servidor");
        });
    }

    // Funções para o menu hamburguer
    function toggleMenu() {
        document.getElementById('dropdownMenu').classList.toggle('show');
    }

    function toggleSubmenu(id) {
        const submenu = document.getElementById(id);
        const menuItem = submenu.parentElement;
        
        if (submenu.style.display === 'block') {
            submenu.style.display = 'none';
            menuItem.classList.remove('open');
        } else {
            submenu.style.display = 'block';
            menuItem.classList.add('open');
        }
    }

    window.addEventListener('click', function(event) {
        if (!event.target.matches('.hamburger-btn') && !event.target.closest('.dropdown-menu')) {
            const dropdown = document.getElementById('dropdownMenu');
            if (dropdown.classList.contains('show')) {
                dropdown.classList.remove('show');
            }
        }
    });

    function abrirModalAlterarSenha() {
        alert("Função para alterar senha será implementada aqui");
    }

    function abrirTelefone() {
        alert("Função para abrir telefone será implementada aqui");
    }
    </script>
</body>
</html>