<?php
// Configurações de sessão
ini_set('session.cookie_secure', 1);
ini_set('session.cookie_httponly', 1);
ini_set('session.use_strict_mode', 1);
session_start();

// === CSRF helper ===
if (!isset($_SESSION['csrf_tokens']) || !is_array($_SESSION['csrf_tokens'])) {
    $_SESSION['csrf_tokens'] = [];
}

function csrf_gc($ttl = 7200) {
    $now = time();
    foreach ($_SESSION['csrf_tokens'] as $t => $ts) {
        if ($now - (int)$ts > $ttl) {
            unset($_SESSION['csrf_tokens'][$t]);
        }
    }
}

function csrf_issue($ttl = 7200) {
    csrf_gc($ttl);
    $token = bin2hex(random_bytes(32));
    $_SESSION['csrf_tokens'][$token] = time();
    return $token;
}

function csrf_validate($token, $ttl = 7200, $consume = true) {
    csrf_gc($ttl);
    if (!$token) return false;
    if (!isset($_SESSION['csrf_tokens'][$token])) return false;
    $age = time() - (int)$_SESSION['csrf_tokens'][$token];
    $ok = $age <= $ttl;
    if ($consume) {
        unset($_SESSION['csrf_tokens'][$token]);
    }
    return $ok && $age >= 0;
}

// Verificar se o usuário está logado
if (!isset($_SESSION['logado'])) {
    header('Location: login.php');
    exit;
}

// Verificar tenant_id
$tenant_id = $_SESSION['tenant_id'] ?? null;
if (!$tenant_id || !is_numeric($tenant_id)) {
    die("Tenant não identificado.");
}

// CSRF token
$csrf_token = csrf_issue();

// Conexão com o banco de dados
require_once 'conexao.php';

// Verificar se estamos editando um formulário existente
$formulario_id = null;
$formulario_data = null;

if (isset($_GET['edit']) && is_numeric($_GET['edit'])) {
    $formulario_id = (int)$_GET['edit'];
    
    // Buscar dados do formulário
    $query = "SELECT id, nome, tipo, estrutura, temperatura FROM formularios WHERE id = ? AND tenant_id = ?";
    $stmt = $conn->prepare($query);
    if ($stmt) {
        $stmt->bind_param("ii", $formulario_id, $tenant_id);
        $stmt->execute();
        $result = $stmt->get_result();
        $formulario_data = $result->fetch_assoc();
        $stmt->close();
        
        if ($formulario_data) {
            // Carregar temperaturas da coluna 'temperatura'
            if (!empty($formulario_data['temperatura'])) {
                $temperatura_data = json_decode($formulario_data['temperatura'], true);
                if ($temperatura_data) {
                    $formulario_data['temperaturas'] = $temperatura_data['temperaturas'] ?? null;
                    $formulario_data['temperatura_minima'] = $temperatura_data['temperatura_minima'] ?? null;
                }
            }
            
            // Fallback para estrutura antiga
            if (empty($formulario_data['temperaturas']) && !empty($formulario_data['estrutura'])) {
                $estrutura = json_decode($formulario_data['estrutura'], true);
                if ($estrutura) {
                    $formulario_data['tipo'] = $estrutura['tipo'] ?? 'E-mail';
                    $formulario_data['temperaturas'] = $estrutura['temperaturas'] ?? null;
                    $formulario_data['temperatura_minima'] = $estrutura['temperatura_minima'] ?? null;
                }
            }
            
            // Buscar perguntas do formulário
            $query_perguntas = "SELECT p.* FROM perguntas p WHERE p.formulario_id = ? AND p.parent_resposta_id IS NULL ORDER BY p.ordem, p.id";
            $stmt_perguntas = $conn->prepare($query_perguntas);
            if ($stmt_perguntas) {
                $stmt_perguntas->bind_param("i", $formulario_id);
                $stmt_perguntas->execute();
                $result_perguntas = $stmt_perguntas->get_result();
                $formulario_data['perguntas'] = [];
                
                while ($pergunta = $result_perguntas->fetch_assoc()) {
                    // Buscar opções de resposta para esta pergunta
                    $query_opcoes = "SELECT * FROM opcoes_resposta WHERE pergunta_id = ? ORDER BY id";
                    $stmt_opcoes = $conn->prepare($query_opcoes);
                    $stmt_opcoes->bind_param("i", $pergunta['id']);
                    $stmt_opcoes->execute();
                    $result_opcoes = $stmt_opcoes->get_result();
                    $pergunta['respostas'] = $result_opcoes->fetch_all(MYSQLI_ASSOC);
                    $stmt_opcoes->close();
                    
                    // Buscar perguntas condicionais para cada opção
                    foreach ($pergunta['respostas'] as &$resposta) {
                        $query_condicionais = "SELECT * FROM perguntas WHERE parent_resposta_id = ? ORDER BY ordem, id";
                        $stmt_condicionais = $conn->prepare($query_condicionais);
                        $stmt_condicionais->bind_param("i", $resposta['id']);
                        $stmt_condicionais->execute();
                        $result_condicionais = $stmt_condicionais->get_result();
                        $resposta['condicionais'] = $result_condicionais->fetch_all(MYSQLI_ASSOC);
                        $stmt_condicionais->close();
                        
                        // Buscar opções das perguntas condicionais
                        foreach ($resposta['condicionais'] as &$condicional) {
                            $query_opcoes_cond = "SELECT * FROM opcoes_resposta WHERE pergunta_id = ? ORDER BY id";
                            $stmt_opcoes_cond = $conn->prepare($query_opcoes_cond);
                            $stmt_opcoes_cond->bind_param("i", $condicional['id']);
                            $stmt_opcoes_cond->execute();
                            $result_opcoes_cond = $stmt_opcoes_cond->get_result();
                            $condicional['respostas'] = $result_opcoes_cond->fetch_all(MYSQLI_ASSOC);
                            $stmt_opcoes_cond->close();
                            
                            // Buscar condicionais de segundo nível
                            foreach ($condicional['respostas'] as &$resposta_cond) {
                                $query_condicionais2 = "SELECT * FROM perguntas WHERE parent_resposta_id = ? ORDER BY ordem, id";
                                $stmt_condicionais2 = $conn->prepare($query_condicionais2);
                                $stmt_condicionais2->bind_param("i", $resposta_cond['id']);
                                $stmt_condicionais2->execute();
                                $result_condicionais2 = $stmt_condicionais2->get_result();
                                $resposta_cond['condicionais'] = $result_condicionais2->fetch_all(MYSQLI_ASSOC);
                                $stmt_condicionais2->close();
                                
                                // Buscar opções das condicionais de segundo nível
                                foreach ($resposta_cond['condicionais'] as &$condicional2) {
                                    $query_opcoes_cond2 = "SELECT * FROM opcoes_resposta WHERE pergunta_id = ? ORDER BY id";
                                    $stmt_opcoes_cond2 = $conn->prepare($query_opcoes_cond2);
                                    $stmt_opcoes_cond2->bind_param("i", $condicional2['id']);
                                    $stmt_opcoes_cond2->execute();
                                    $result_opcoes_cond2 = $stmt_opcoes_cond2->get_result();
                                    $condicional2['respostas'] = $result_opcoes_cond2->fetch_all(MYSQLI_ASSOC);
                                    $stmt_opcoes_cond2->close();
                                }
                            }
                        }
                    }
                    
                    $formulario_data['perguntas'][] = $pergunta;
                }
                $stmt_perguntas->close();
            }
        }
    }
}

// Determinar tipo inicial
$tipo_inicial = 'E-mail';
if ($formulario_data) {
    $tipo_inicial = $formulario_data['tipo'] ?? 'E-mail';
} elseif (isset($_GET['tipo'])) {
    $tipo_inicial = $_GET['tipo'];
}
?>
<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <link rel="icon" type="image/png" sizes="16x16" href="/favicon_io/favicon-16x16.png">
    <link rel="icon" type="image/png" sizes="32x32" href="/favicon_io/favicon-32x32.png">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><?= $formulario_id ? 'Editar' : 'Cadastrar' ?> Formulário - SON</title>
    <meta name="csrf-token" content="<?= htmlspecialchars($csrf_token) ?>">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        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;
            height: 80px;
        }
        
        .header-fixed img {
            height: 40px;
            margin-right: 15px;
        }
        
        .header-fixed h2 {
            margin: 0;
            flex-grow: 1;
            text-align: center;
        }
        
        /* Menu Lateral Recolhível */
        .sidebar {
            position: fixed;
            left: 0;
            top: 80px;
            height: calc(100vh - 80px);
            width: 60px;
            background: white;
            box-shadow: 2px 0 5px rgba(0,0,0,0.1);
            z-index: 999;
            transition: width 0.3s ease;
            overflow-x: hidden;
        }
        
        /* Conteúdo Principal */
        .main-content {
            margin-top: 80px;
            padding: 20px;
            margin-left: 60px;
            transition: margin-left 0.3s ease;
        }
        
        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 30px;
            background: white;
            border-radius: 8px;
            box-shadow: 0 0 10px rgba(0,0,0,0.1);
        }
        
        .btn {
            background-color: #3498db;
            color: white;
            border: none;
            padding: 12px 20px;
            border-radius: 4px;
            cursor: pointer;
            font-size: 16px;
            transition: background-color 0.3s;
            display: inline-flex;
            align-items: center;
            gap: 5px;
            margin-right: 10px;
            text-decoration: none;
        }
        
        .btn:hover {
            background-color: #2980b9;
        }
        
        .btn-success {
            background-color: #2ecc71;
        }
        
        .btn-success:hover {
            background-color: #27ae60;
        }

        .pergunta, .resposta {
            display: flex;
            align-items: center;
            padding: 10px;
            background: #fff;
            border: 1px solid #ccc;
            border-radius: 6px;
            margin-bottom: 10px;
            gap: 10px;
            flex-wrap: wrap;
        }
        
        .pergunta-obrigatoria {
            border-left: 4px solid #e74c3c;
            background-color: #fff5f5;
        }
        
        .pergunta-opcional {
            border-left: 4px solid #f39c12;
            background-color: #fffaf0;
        }
        
        input[type="text"], input[type="number"] {
            flex-grow: 1;
            min-width: 180px;
            padding: 8px;
            font-size: 14px;
            border: 1px solid #ddd;
            border-radius: 4px;
        }
        
        select {
            font-size: 14px;
            padding: 8px;
            border: 1px solid #ddd;
            border-radius: 4px;
        }
        
        .acoes button {
            margin-left: 4px;
            font-size: 14px;
            padding: 6px 10px;
            cursor: pointer;
            background: #f5f5f5;
            border: 1px solid #ddd;
            border-radius: 4px;
        }
        
        .respostas {
            margin-left: 25px;
            margin-top: 4px;
        }
        
        .perguntas-condicionais {
            margin-left: 25px;
            margin-top: 4px;
            border-left: 2px solid #3498db;
            padding-left: 10px;
        }
        
        .oculto {
            display: none;
        }
        
        .toggle {
            cursor: pointer;
            font-weight: bold;
            font-size: 14px;
            user-select: none;
            margin-right: 4px;
            transition: transform 0.3s;
        }
        
        .toggle.rotated {
            transform: rotate(90deg);
        }
        
        #formulario-header {
            margin-bottom: 20px;
            display: flex;
            align-items: center;
            gap: 10px;
            flex-wrap: wrap;
        }
        
        .tipo-formulario-container {
            background: #f8f9fa;
            padding: 15px;
            border-radius: 8px;
            margin-bottom: 20px;
            border: 1px solid #dee2e6;
        }
        
        .tipo-formulario-options {
            display: flex;
            gap: 20px;
            margin-top: 10px;
        }
        
        .tipo-option {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 10px 15px;
            border: 2px solid #dee2e6;
            border-radius: 6px;
            cursor: pointer;
            transition: all 0.3s;
        }
        
        .tipo-option:hover {
            border-color: #3498db;
        }
        
        .tipo-option.selected {
            border-color: #3498db;
            background-color: #e3f2fd;
        }
        
        .config-questionario {
            background: #e8f5e8;
            padding: 15px;
            border-radius: 8px;
            margin-bottom: 20px;
            border: 1px solid #c8e6c9;
        }
        
        .config-temperaturas {
            background: #fff3cd;
            padding: 15px;
            border-radius: 8px;
            margin-top: 10px;
            border: 1px solid #ffeaa7;
        }
        
        .temperatura-item {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-bottom: 10px;
            padding: 10px;
            background: white;
            border-radius: 6px;
            border: 1px solid #ddd;
        }
        
        .temperatura-nome {
            width: 150px;
            font-weight: bold;
        }
        
        .temperatura-nota {
            width: 100px;
        }
        
        .temperatura-minima-container {
            margin-top: 15px;
            padding-top: 15px;
            border-top: 2px solid #ffeaa7;
        }
        
        .info-temperatura {
            color: #666;
            font-size: 14px;
            margin-top: 10px;
        }
        
        .pontuacao-resposta {
            display: flex;
            align-items: center;
            gap: 8px;
            margin-left: 10px;
        }
        
        .btn-condicional {
            background-color: #9b59b6;
            color: white;
            border: none;
            padding: 6px 10px;
            border-radius: 4px;
            cursor: pointer;
            font-size: 12px;
            margin-left: 5px;
        }
        
        .btn-condicional:hover {
            background-color: #8e44ad;
        }
        
        .resposta-com-condicional {
            border-left: 3px solid #9b59b6;
            background-color: #f8f9fa;
        }
        
        .obrigatoria-container {
            display: flex;
            align-items: center;
            gap: 5px;
            margin-left: 10px;
            font-size: 14px;
        }
        
        .obrigatoria-checkbox {
            width: 16px;
            height: 16px;
            cursor: pointer;
        }
        
        /* Mensagens */
        .mensagem-flutuante {
            position: fixed;
            top: 80px;
            right: 20px;
            padding: 15px 25px;
            border-radius: 4px;
            color: white;
            z-index: 2000;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
            animation: slideIn 0.5s, fadeOut 0.5s 2.5s forwards;
        }
        
        .mensagem-sucesso {
            background-color: #2ecc71;
        }
        
        .mensagem-erro {
            background-color: #e74c3c;
        }
        
        @keyframes slideIn {
            from { transform: translateX(100%); opacity: 0; }
            to { transform: translateX(0); opacity: 1; }
        }
        
        @keyframes fadeOut {
            from { opacity: 1; }
            to { opacity: 0; }
        }

        /* Responsividade */
        @media (max-width: 768px) {
            .header-fixed {
                padding: 12px 15px;
            }
            
            .header-fixed h2 {
                font-size: 1.3rem;
            }
            
            .main-content {
                margin-top: 80px;
                margin-left: 0;
                padding: 15px;
            }
            
            .container {
                padding: 18px;
            }
            
            .tipo-formulario-options {
                flex-direction: column;
                gap: 10px;
            }
            
            .pergunta, .resposta {
                flex-direction: column;
                align-items: flex-start;
            }
            
            .acoes {
                width: 100%;
                justify-content: flex-start;
                margin-top: 10px;
            }
            
            .temperatura-item {
                flex-direction: column;
                align-items: flex-start;
                gap: 5px;
            }
            
            .temperatura-nome {
                width: 100%;
            }
            
            .obrigatoria-container {
                margin-left: 0;
                margin-top: 10px;
                width: 100%;
            }
        }
    </style>
</head>
<body>

    <?php include 'menu_lateral.php'; ?>

    <div class="main-content">
        <div class="container">
            <h1><i class="fas fa-file-alt"></i> <?= $formulario_id ? 'Editar Formulário' : 'Cadastrar Novo Formulário' ?></h1>
            
            <div style="margin-bottom: 20px;">
                <a href="lista_formularios.php" class="btn">
                    <i class="fas fa-arrow-left"></i> Voltar para Lista
                </a>
            </div>

            <div class="tipo-formulario-container">
                <label><strong>Tipo de Formulário:</strong></label>
                <div class="tipo-formulario-options">
                    <div class="tipo-option <?= $tipo_inicial === 'E-mail' ? 'selected' : '' ?>" onclick="selecionarTipoFormulario('E-mail', this)">
                        <input type="radio" name="tipo_formulario" value="E-mail" id="tipo_email" <?= $tipo_inicial === 'E-mail' ? 'checked' : '' ?>>
                        <label for="tipo_email" style="cursor:pointer;">
                            <i class="fas fa-envelope"></i> Formulário por E-mail
                        </label>
                    </div>
                    <div class="tipo-option <?= $tipo_inicial === 'questionario' ? 'selected' : '' ?>" onclick="selecionarTipoFormulario('questionario', this)">
                        <input type="radio" name="tipo_formulario" value="questionario" id="tipo_questionario" <?= $tipo_inicial === 'questionario' ? 'checked' : '' ?>>
                        <label for="tipo_questionario" style="cursor:pointer;">
                            <i class="fas fa-graduation-cap"></i> Formulário Passagem Funil
                        </label>
                    </div>
                </div>
            </div>

            <div id="config-questionario" class="config-questionario <?= $tipo_inicial === 'questionario' ? '' : 'oculto' ?>">
                <h3><i class="fas fa-cog"></i> Configurações do Questionário</h3>
                
                <!-- SEÇÃO: Configuração de Temperaturas -->
                <div id="config-temperaturas" class="config-temperaturas">
                    <h4><i class="fas fa-thermometer-half"></i> Configuração de Temperaturas</h4>
                    <p style="margin-bottom: 15px; color: #666;">
                        Defina as notas correspondentes a cada temperatura e a temperatura mínima necessária para avançar.
                    </p>
                    
                    <div id="temperaturas-container">
                        <?php
                        $temperaturas_padrao = [
                            ['nome' => 'Muito Quente', 'nota' => 9.0],
                            ['nome' => 'Quente', 'nota' => 7.0],
                            ['nome' => 'Morno', 'nota' => 5.0],
                            ['nome' => 'Frio', 'nota' => 3.0],
                            ['nome' => 'Congelado', 'nota' => 1.0]
                        ];
                        
                        $temperaturas = $formulario_data['temperaturas'] ?? $temperaturas_padrao;
                        $temperatura_minima = $formulario_data['temperatura_minima'] ?? 'Quente';
                        
                        foreach ($temperaturas as $temp): 
                        ?>
                        <div class="temperatura-item">
                            <span class="temperatura-nome"><?= htmlspecialchars($temp['nome']) ?>:</span>
                            <input type="number" class="temperatura-nota" min="0" max="10" step="0.1" 
                                   value="<?= htmlspecialchars($temp['nota']) ?>" 
                                   data-temperatura="<?= htmlspecialchars($temp['nome']) ?>">
                            <span>pontos</span>
                        </div>
                        <?php endforeach; ?>
                    </div>
                    
                    <div class="temperatura-minima-container">
                        <label for="temperatura_minima"><strong>Temperatura Mínima para Avançar:</strong></label>
                        <select id="temperatura_minima" style="margin-left: 10px;">
                            <?php foreach ($temperaturas as $temp): ?>
                            <option value="<?= htmlspecialchars($temp['nome']) ?>" 
                                <?= ($temp['nome'] === $temperatura_minima) ? 'selected' : '' ?>>
                                <?= htmlspecialchars($temp['nome']) ?>
                            </option>
                            <?php endforeach; ?>
                        </select>
                    </div>
                    
                    <div class="info-temperatura">
                        <i class="fas fa-info-circle"></i> 
                        Clientes que atingirem uma temperatura inferior à mínima não avançarão para a próxima etapa.
                    </div>
                </div>

                <div style="color: #666; font-size: 14px; margin-top: 15px;">
                    <i class="fas fa-info-circle"></i> Defina a pontuação para cada resposta nas opções abaixo
                </div>
            </div>

            <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" value="<?= $formulario_data ? htmlspecialchars($formulario_data['nome']) : '' ?>">
                <?php if ($formulario_id): ?>
                    <input type="hidden" id="formulario-id" value="<?= $formulario_id ?>">
                <?php endif; ?>
                <button id="salvar-btn" class="btn btn-success" onclick="salvarFormulario()"><i class="fas fa-save"></i> <?= $formulario_id ? 'Atualizar' : 'Cadastrar' ?> Formulário</button>
            </div>

            <div id="perguntas-container"></div>
            <button class="btn" onclick="adicionarPergunta()"><i class="fas fa-plus"></i> Adicionar Pergunta</button>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    <script>
        let tipoFormularioAtual = '<?= $tipo_inicial ?>';
        let contadorPergunta = 0;
        let contadorResposta = 0;

        // CORREÇÃO: Função para gerar IDs únicos
        function gerarIdUnico() {
            return 'id-' + Date.now() + '-' + Math.random().toString(36).substr(2, 9);
        }

        document.addEventListener('DOMContentLoaded', function() {
            // Atualizar a interface com o tipo correto
            selecionarTipoFormulario(tipoFormularioAtual);
            
            // Marcar visualmente o tipo correto
            document.querySelectorAll('.tipo-option').forEach(option => {
                const radio = option.querySelector('input[type="radio"]');
                if (radio.value === tipoFormularioAtual) {
                    option.classList.add('selected');
                    radio.checked = true;
                } else {
                    option.classList.remove('selected');
                    radio.checked = false;
                }
            });

            // Atualizar exibição das temperaturas
            atualizarExibicaoTemperaturas();

            <?php if ($formulario_data && !empty($formulario_data['perguntas'])): ?>
            // CORREÇÃO: Limpar container completamente antes de carregar
            const container = document.getElementById('perguntas-container');
            container.innerHTML = '';
            
            const perguntas = <?= json_encode($formulario_data['perguntas']) ?>;
            
            console.log('Carregando perguntas do banco:', perguntas.length);
            
            // CORREÇÃO: Resetar contadores
            contadorPergunta = 0;
            contadorResposta = 0;
            
            // CORREÇÃO: Carregar cada pergunta individualmente
            perguntas.forEach((perguntaData, index) => {
                console.log('Carregando pergunta:', perguntaData.texto);
                carregarPergunta(perguntaData);
            });
            <?php else: ?>
            console.log('Nenhuma pergunta existente, adicionando primeira pergunta');
            // Adicionar primeira pergunta ao carregar a página (apenas para novos formulários)
            adicionarPergunta();
            <?php endif; ?>
        });

        function selecionarTipoFormulario(tipo, element = null) {
            tipoFormularioAtual = tipo;
            
            document.querySelectorAll('.tipo-option').forEach(opt => {
                opt.classList.remove('selected');
                const radio = opt.querySelector('input[type="radio"]');
                radio.checked = (radio.value === tipo);
            });
            
            if (element) {
                element.classList.add('selected');
                const radio = element.querySelector('input[type="radio"]');
                radio.checked = true;
            }
            
            const configQuestionario = document.getElementById('config-questionario');
            if (tipo === 'questionario') {
                configQuestionario.classList.remove('oculto');
            } else {
                configQuestionario.classList.add('oculto');
            }
            
            // Atualizar exibição de pontuação e temperaturas
            atualizarExibicaoTemperaturas();
            atualizarPontuacaoRespostas();
        }

        function atualizarExibicaoTemperaturas() {
            const configTemperaturas = document.getElementById('config-temperaturas');
            
            if (tipoFormularioAtual === 'questionario') {
                configTemperaturas.style.display = 'block';
            } else {
                configTemperaturas.style.display = 'none';
            }
        }

        function atualizarPontuacaoRespostas() {
            const pontuacaoRespostas = document.querySelectorAll('.pontuacao-resposta');
            
            if (tipoFormularioAtual === 'questionario') {
                pontuacaoRespostas.forEach(el => {
                    el.style.display = 'flex';
                });
            } else {
                pontuacaoRespostas.forEach(el => {
                    el.style.display = 'none';
                });
            }
        }

        function adicionarPergunta(parentId = null) {
            const id = gerarIdUnico();
            const container = parentId ? document.getElementById(`${parentId}-condicionais`) : document.getElementById('perguntas-container');
            
            const perguntaDiv = document.createElement('div');
            perguntaDiv.className = 'pergunta pergunta-obrigatoria';
            perguntaDiv.id = id;
            perguntaDiv.innerHTML = `
                <div class="toggle" onclick="toggleRespostas('${id}')">▶</div>
                <input type="text" placeholder="Digite a pergunta" class="texto-pergunta">
                <select class="tipo-pergunta" onchange="alterarTipoPergunta('${id}')">
                    <option value="unica">Única escolha</option>
                    <option value="multipla">Múltipla escolha</option>
                    <option value="texto">Resposta aberta</option>
                </select>
                <div class="obrigatoria-container">
                    <input type="checkbox" class="obrigatoria-checkbox" id="obrigatoria-${id}" checked 
                           onchange="toggleObrigatoriedade('${id}')">
                    <label for="obrigatoria-${id}" style="cursor:pointer;">Obrigatória</label>
                </div>
                <div class="acoes">
                    <button onclick="adicionarResposta('${id}')">+ Resposta</button>
                    <button onclick="removerPergunta('${id}')" style="color:red;">✕</button>
                </div>
                <div class="respostas oculto" id="${id}-respostas"></div>
            `;
            
            container.appendChild(perguntaDiv);
            return id;
        }

        function toggleObrigatoriedade(perguntaId) {
            const perguntaEl = document.getElementById(perguntaId);
            const checkbox = perguntaEl.querySelector('.obrigatoria-checkbox');
            
            if (checkbox.checked) {
                perguntaEl.classList.remove('pergunta-opcional');
                perguntaEl.classList.add('pergunta-obrigatoria');
            } else {
                perguntaEl.classList.remove('pergunta-obrigatoria');
                perguntaEl.classList.add('pergunta-opcional');
            }
        }

        function adicionarResposta(perguntaId) {
            const perguntaEl = document.getElementById(perguntaId);
            const tipo = perguntaEl.querySelector('.tipo-pergunta').value;
            
            if (tipo === 'texto') {
                alert('Perguntas abertas não possuem opções de resposta.');
                return null;
            }

            const id = gerarIdUnico();
            const respostasDiv = document.getElementById(`${perguntaId}-respostas`);
            
            let pontuacaoHtml = `
                <div class="pontuacao-resposta" style="display: ${tipoFormularioAtual === 'questionario' ? 'flex' : 'none'}">
                    <label>Pontuação:</label>
                    <input type="number" class="pontuacao-input" min="0" step="0.1" value="1.0" style="width: 80px;">
                </div>
            `;

            const respostaDiv = document.createElement('div');
            respostaDiv.className = 'resposta';
            respostaDiv.id = id;
            respostaDiv.innerHTML = `
                <div class="toggle oculto" onclick="toggleCondicionais('${id}')">▶</div>
                <input type="text" placeholder="Digite a opção de resposta">
                ${pontuacaoHtml}
                <div class="acoes">
                    <button class="btn-condicional" onclick="adicionarPerguntaCondicional('${id}')" title="Adicionar pergunta condicional">
                        <i class="fas fa-code-branch"></i> Condicional
                    </button>
                    <button onclick="removerResposta('${id}')" style="color:red;">✕</button>
                </div>
                <div class="perguntas-condicionais oculto" id="${id}-condicionais"></div>
            `;
            
            respostasDiv.appendChild(respostaDiv);
            return id;
        }

        function adicionarPerguntaCondicional(respostaId) {
            const respostaEl = document.getElementById(respostaId);
            
            // Adicionar classe para destacar resposta com condicional
            respostaEl.classList.add('resposta-com-condicional');
            
            // Mostrar toggle para condicionais
            const toggle = respostaEl.querySelector('.toggle');
            if (toggle) {
                toggle.classList.remove('oculto');
            }
            
            // Criar container de condicionais se não existir
            let condicionaisContainer = document.getElementById(`${respostaId}-condicionais`);
            if (!condicionaisContainer) {
                condicionaisContainer = document.createElement('div');
                condicionaisContainer.className = 'perguntas-condicionais oculto';
                condicionaisContainer.id = `${respostaId}-condicionais`;
                respostaEl.appendChild(condicionaisContainer);
            }
            
            // Adicionar pergunta condicional
            const perguntaId = adicionarPergunta(respostaId);
            
            // Expandir automaticamente para mostrar a nova pergunta
            setTimeout(() => {
                toggleCondicionais(respostaId);
            }, 100);
            
            return perguntaId;
        }

        function removerPergunta(id) {
            const perguntaEl = document.getElementById(id);
            if (perguntaEl) {
                perguntaEl.remove();
            }
        }

        function removerResposta(id) {
            const respostaEl = document.getElementById(id);
            if (respostaEl) {
                respostaEl.remove();
            }
        }

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

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

        function alterarTipoPergunta(perguntaId) {
            const perguntaEl = document.getElementById(perguntaId);
            const tipo = perguntaEl.querySelector('.tipo-pergunta').value;
            const respostasEl = document.getElementById(`${perguntaId}-respostas`);
            
            if (tipo === 'texto') {
                respostasEl.innerHTML = '';
            }
        }

        function salvarFormulario() {
            const nomeFormulario = document.getElementById('nome_formulario').value.trim();
            if (!nomeFormulario) {
                Swal.fire('Atenção!', 'Por favor, informe o nome do formulário.', 'warning');
                return;
            }

            const formularioId = document.getElementById('formulario-id') ? document.getElementById('formulario-id').value : null;
            
            const tipoSelecionado = document.querySelector('input[name="tipo_formulario"]:checked');
            if (!tipoSelecionado) {
                Swal.fire('Atenção!', 'Por favor, selecione o tipo de formulário.', 'warning');
                return;
            }
            
            // PADRONIZAR O TIPO DO FORMULÁRIO
let tipoFormulario = tipoSelecionado.value;
tipoFormulario = (tipoFormulario === 'questionario') ? 'questionario' : 'E-mail';

            // COLETAR CONFIGURAÇÕES DE TEMPERATURA
            let temperaturasConfig = null;
            let temperaturaMinima = null;
            
            if (tipoFormulario === 'questionario') {
                temperaturasConfig = [];
                const temperaturaItens = document.querySelectorAll('.temperatura-item');
                
                temperaturaItens.forEach(item => {
                    const nome = item.querySelector('.temperatura-nota').dataset.temperatura;
                    const nota = parseFloat(item.querySelector('.temperatura-nota').value);
                    
                    if (!isNaN(nota)) {
                        temperaturasConfig.push({
                            nome: nome,
                            nota: nota
                        });
                    }
                });
                
                temperaturaMinima = document.getElementById('temperatura_minima').value;
                
                // Validar se todas as temperaturas têm notas válidas
                const temperaturasInvalidas = temperaturasConfig.filter(temp => isNaN(temp.nota));
                if (temperaturasInvalidas.length > 0) {
                    Swal.fire('Atenção!', 'Por favor, informe notas válidas para todas as temperaturas.', 'warning');
                    return;
                }
            }

            const perguntas = coletarPerguntas(document.getElementById('perguntas-container'));

            if (perguntas.length === 0) {
                Swal.fire('Atenção!', 'Adicione pelo menos uma pergunta ao formulário.', 'warning');
                return;
            }

            const dados = {
                nome: nomeFormulario,
                tipo: tipoFormulario,
                perguntas: perguntas,
                tenant_id: <?= $tenant_id ?>,
                csrf_token: document.querySelector('meta[name="csrf-token"]').content
            };

            // CORREÇÃO: Adicionar dados de temperatura apenas se for questionário
            if (tipoFormulario === 'questionario') {
                dados.temperaturas = temperaturasConfig;
                dados.temperatura_minima = temperaturaMinima;
            }

            console.log('Dados enviados:', dados);

            // ADICIONAR ID APENAS SE EXISTIR (para edição)
            if (formularioId) {
                dados.id = formularioId;
            }

            const url = formularioId ? 'formulario_atualizar.php' : 'formulario_salvar.php';

            // Mostrar loading
            const salvarBtn = document.getElementById('salvar-btn');
            const originalText = salvarBtn.innerHTML;
            salvarBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Salvando...';
            salvarBtn.disabled = true;

            fetch(url, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-Token': document.querySelector('meta[name="csrf-token"]').content
                },
                body: JSON.stringify(dados)
            })
            .then(response => {
                if (!response.ok) {
                    throw new Error(`HTTP error! status: ${response.status}`);
                }
                return response.text().then(text => {
                    if (!text) {
                        throw new Error('Resposta vazia do servidor');
                    }
                    return JSON.parse(text);
                });
            })
            .then(data => {
                console.log('Resposta do servidor:', data);
                if (data.status === 'sucesso') {
                    Swal.fire('Sucesso!', data.mensagem, 'success').then(() => {
                        window.location.href = 'lista_formularios.php';
                    });
                } else {
                    Swal.fire('Erro!', data.mensagem, 'error');
                }
            })
            .catch(error => {
                console.error('Erro:', error);
                Swal.fire('Erro!', 'Erro ao salvar formulário: ' + error.message, 'error');
            })
            .finally(() => {
                // Restaurar botão
                salvarBtn.innerHTML = originalText;
                salvarBtn.disabled = false;
            });
        }

        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('.texto-pergunta').value.trim();
                    let tipo = el.querySelector('.tipo-pergunta').value;
                    if (tipo === 'texto') tipo = 'texto';

                    // OBTER VALOR DA OBRIGATORIEDADE
                    const obrigatoriaCheckbox = el.querySelector('.obrigatoria-checkbox');
                    const obrigatoria = obrigatoriaCheckbox ? (obrigatoriaCheckbox.checked ? 1 : 0) : 1;

                    const perguntaData = {
                        texto: texto,
                        tipo: tipo,
                        parent_resposta_id: parentRespostaId,
                        obrigatoria: obrigatoria,
                        ordem: i
                    };

                    if (tipo !== 'texto') {
                        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[type="text"]').value.trim();
                    
                    const respostaData = {
                        texto: texto,
                        temp_id: i + 1
                    };
                    
                    // Adicionar pontuação se for questionário
                    if (tipoFormularioAtual === 'questionario') {
                        const pontuacaoInput = el.querySelector('.pontuacao-input');
                        if (pontuacaoInput) {
                            respostaData.pontuacao = parseFloat(pontuacaoInput.value) || 0;
                        }
                    }
                    
                    // Coletar perguntas condicionais
                    const condicionaisEl = document.getElementById(`${el.id}-condicionais`);
                    if (condicionaisEl) {
                        respostaData.condicionais = coletarPerguntas(condicionaisEl, i + 1);
                    }

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

        function carregarPergunta(perguntaData, parentId = null) {
            const perguntaId = gerarIdUnico();
            const container = parentId ? document.getElementById(`${parentId}-condicionais`) : document.getElementById('perguntas-container');
            
            const perguntaDiv = document.createElement('div');
            perguntaDiv.className = 'pergunta pergunta-obrigatoria';
            perguntaDiv.id = perguntaId;
            perguntaDiv.innerHTML = `
                <div class="toggle" onclick="toggleRespostas('${perguntaId}')">▶</div>
                <input type="text" placeholder="Digite a pergunta" class="texto-pergunta" value="${perguntaData.texto || ''}">
                <select class="tipo-pergunta" onchange="alterarTipoPergunta('${perguntaId}')">
                    <option value="unica" ${(perguntaData.tipo || 'unica') === 'unica' ? 'selected' : ''}>Única escolha</option>
                    <option value="multipla" ${(perguntaData.tipo || 'unica') === 'multipla' ? 'selected' : ''}>Múltipla escolha</option>
                    <option value="texto" ${(perguntaData.tipo || 'unica') === 'texto' ? 'selected' : ''}>Resposta aberta</option>
                </select>
                <div class="obrigatoria-container">
                    <input type="checkbox" class="obrigatoria-checkbox" id="obrigatoria-${perguntaId}" ${perguntaData.obrigatoria !== 0 ? 'checked' : ''} 
                           onchange="toggleObrigatoriedade('${perguntaId}')">
                    <label for="obrigatoria-${perguntaId}" style="cursor:pointer;">Obrigatória</label>
                </div>
                <div class="acoes">
                    <button onclick="adicionarResposta('${perguntaId}')">+ Resposta</button>
                    <button onclick="removerPergunta('${perguntaId}')" style="color:red;">✕</button>
                </div>
                <div class="respostas oculto" id="${perguntaId}-respostas"></div>
            `;
            
            container.appendChild(perguntaDiv);
            
            // Aplicar classe de obrigatoriedade
            toggleObrigatoriedade(perguntaId);
            
            // Se for pergunta aberta, não carregar respostas
            if (perguntaData.tipo === 'texto') {
                return perguntaId;
            }
            
            // Carregar respostas
            if (perguntaData.respostas && perguntaData.respostas.length > 0) {
                perguntaData.respostas.forEach((respostaData, index) => {
                    const respostaId = gerarIdUnico();
                    const respostasDiv = document.getElementById(`${perguntaId}-respostas`);
                    
                    let pontuacaoHtml = `
                        <div class="pontuacao-resposta" style="display: ${tipoFormularioAtual === 'questionario' ? 'flex' : 'none'}">
                            <label>Pontuação:</label>
                            <input type="number" class="pontuacao-input" min="0" step="0.1" value="${respostaData.pontuacao || 1.0}" style="width: 80px;">
                        </div>
                    `;

                    const respostaDiv = document.createElement('div');
                    respostaDiv.className = 'resposta';
                    respostaDiv.id = respostaId;
                    respostaDiv.innerHTML = `
                        <div class="toggle oculto" onclick="toggleCondicionais('${respostaId}')">▶</div>
                        <input type="text" placeholder="Digite a opção de resposta" value="${respostaData.texto || ''}">
                        ${pontuacaoHtml}
                        <div class="acoes">
                            <button class="btn-condicional" onclick="adicionarPerguntaCondicional('${respostaId}')" title="Adicionar pergunta condicional">
                                <i class="fas fa-code-branch"></i> Condicional
                            </button>
                            <button onclick="removerResposta('${respostaId}')" style="color:red;">✕</button>
                        </div>
                        <div class="perguntas-condicionais oculto" id="${respostaId}-condicionais"></div>
                    `;
                    
                    respostasDiv.appendChild(respostaDiv);
                    
                    // Preencher pontuação se existir
                    if (respostaData.pontuacao !== undefined && respostaData.pontuacao !== null) {
                        const pontuacaoInput = respostaDiv.querySelector('.pontuacao-input');
                        if (pontuacaoInput) {
                            pontuacaoInput.value = respostaData.pontuacao;
                        }
                    }
                    
                    // DESTACAR RESPOSTAS COM CONDICIONAIS E CARREGÁ-LAS
                    if (respostaData.condicionais && respostaData.condicionais.length > 0) {
                        console.log('Carregando condicionais para resposta:', respostaData.texto, respostaData.condicionais);
                        
                        // Destacar visualmente
                        respostaDiv.classList.add('resposta-com-condicional');
                        const toggle = respostaDiv.querySelector('.toggle');
                        if (toggle) {
                            toggle.classList.remove('oculto');
                        }
                        
                        // Carregar perguntas condicionais
                        respostaData.condicionais.forEach(condicionalData => {
                            carregarPergunta(condicionalData, respostaId);
                        });
                    }
                });
                
                // Expandir para mostrar respostas
                setTimeout(() => {
                    toggleRespostas(perguntaId);
                }, 100);
            }
            
            return perguntaId;
        }
    </script>
</body>
</html>