<?php
include 'verifica_login.php';
include 'conexao.php';
$conn = conectar_banco();

$id_template = $_GET['id'] ?? null;

if (!$id_template) {
    header('Location: montagem_questionario.php?msg=error&detalhe=ID não informado');
    exit;
}

// Buscar dados do template
$stmt = $conn->prepare("SELECT * FROM questionario_template WHERE id = ?");
$stmt->bind_param('i', $id_template);
$stmt->execute();
$template = $stmt->get_result()->fetch_assoc();

if (!$template) {
    header('Location: montagem_questionario.php?msg=error&detalhe=Questionário não encontrado');
    exit;
}

// Buscar perguntas do template (todas, incluindo sub-perguntas)
$stmt = $conn->prepare("SELECT * FROM questionario_template_perguntas WHERE id_questionario_template_fk = ? ORDER BY ordem ASC, id ASC");
$stmt->bind_param('i', $id_template);
$stmt->execute();
$perguntas = $stmt->get_result();

// Organizar sub-perguntas por pai e opção gatilho
$todas_perguntas = [];
$sub_perguntas_map = []; // [id_pai][id_opcao_gatilho] => [sub-perguntas]
$opcoes_pergunta_map = []; // [id_pergunta] => ['texto opcao 1', 'texto opcao 2', ...]
while ($p = $perguntas->fetch_assoc()) {
    if (in_array($p['tipo_resposta'], ['radio', 'checkbox', 'select'], true) && !empty($p['opcoes'])) {
        $opcoes_tmp = json_decode($p['opcoes'], true);
        if (is_array($opcoes_tmp)) {
            $opcoes_pergunta_map[$p['id']] = array_values(array_map(function ($opt) {
                return trim((string)($opt['texto'] ?? ''));
            }, $opcoes_tmp));
        }
    }

    if (!empty($p['id_pergunta_pai'])) {
        $pai = $p['id_pergunta_pai'];
        $gatilho = $p['id_opcao_gatilho'] ?? 0;
        if (!isset($sub_perguntas_map[$pai])) $sub_perguntas_map[$pai] = [];
        if (!isset($sub_perguntas_map[$pai][$gatilho])) $sub_perguntas_map[$pai][$gatilho] = [];
        $sub_perguntas_map[$pai][$gatilho][] = $p;
    } else {
        $todas_perguntas[] = $p;
    }
}
$sub_perguntas_json = json_encode($sub_perguntas_map, JSON_UNESCAPED_UNICODE);
$opcoes_pergunta_json = json_encode($opcoes_pergunta_map, JSON_UNESCAPED_UNICODE);
?>
<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Editar Questionário - <?= htmlspecialchars($template['nome']) ?></title>
    <style>
        body { font-family: Arial, sans-serif; background-color: #f4f4f4; margin: 0; padding: 20px; }
        .container { max-width: 1200px; margin: 0 auto; background: white; padding: 30px; border-radius: 8px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); }
        h1, h2 { color: #004d99; }
        h1 { border-bottom: 2px solid #ccc; padding-bottom: 10px; }
        
        .alert { padding: 15px; margin: 20px 0; border-radius: 6px; }
        .alert-success { background: #d4edda; color: #155724; border: 1px solid #c3e6cb; }
        .alert-error { background: #f8d7da; color: #721c24; border: 1px solid #f5c6cb; }
        
        .btn { background-color: #004d99; color: white; padding: 10px 20px; border: none; border-radius: 4px; cursor: pointer; text-decoration: none; display: inline-block; font-size: 0.95em; margin: 5px; }
        .btn:hover { background-color: #003366; }
        .btn-success { background-color: #28a745; }
        .btn-success:hover { background-color: #218838; }
        .btn-warning { background-color: #ffc107; color: #000; }
        .btn-warning:hover { background-color: #e0a800; }
        .btn-danger { background-color: #dc3545; }
        .btn-danger:hover { background-color: #c82333; }
        .btn-secondary { background-color: #6c757d; }
        .btn-secondary:hover { background-color: #5a6268; }
        .btn-small { padding: 6px 12px; font-size: 0.85em; }
        
        .section { background: #f8f9fa; padding: 20px; border-radius: 8px; margin-bottom: 30px; }
        .section-perguntas { padding-bottom: 5cm; }
        .perguntas-scroll {
            max-height: 70vh;
            overflow-y: auto;
            padding-right: 6px;
            padding-bottom: 5cm;
        }
        .form-group { margin-bottom: 20px; }
        .form-group label { display: block; font-weight: bold; margin-bottom: 5px; color: #555; }
        .form-group input[type="text"], .form-group textarea { width: 100%; padding: 10px; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; }
        .form-group textarea { min-height: 100px; resize: vertical; }
        
        .pergunta-card { background: white; border: 2px solid #ddd; border-radius: 8px; padding: 20px; margin-bottom: 20px; position: relative; }
        .pergunta-card:hover { border-color: #004d99; box-shadow: 0 2px 8px rgba(0,77,153,0.1); }
        .pergunta-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 15px; }
        .pergunta-texto { font-size: 1.1em; font-weight: bold; color: #333; flex: 1; margin-right: 20px; }
        .pergunta-actions { display: flex; gap: 5px; }
        .pergunta-info { color: #666; font-size: 0.9em; margin-bottom: 10px; }
        .pergunta-opcoes { margin-top: 15px; padding: 15px; background: #f8f9fa; border-radius: 6px; }
        .opcao-item { padding: 8px 0; border-bottom: 1px solid #ddd; }
        .opcao-item:last-child { border-bottom: none; }
        .nota-badge { background: #004d99; color: white; padding: 3px 10px; border-radius: 12px; font-size: 0.85em; font-weight: bold; }
        
        /* Accordion para categorias */
        .categoria-accordion { margin-bottom: 20px; border: 2px solid #ddd; border-radius: 8px; overflow: hidden; }
        .categoria-header { 
            background: #004d99; 
            color: white; 
            padding: 15px 20px; 
            cursor: pointer; 
            display: flex; 
            justify-content: space-between; 
            align-items: center; 
            font-weight: bold;
            user-select: none;
            transition: background 0.3s ease;
        }
        .categoria-header:hover { background: #003366; }
        .categoria-header.collapsed { background: #6c757d; }
        .categoria-header.collapsed:hover { background: #5a6268; }
        .categoria-content { 
            background: white; 
            padding: 15px; 
            max-height: none;
            overflow: visible;
        }
        .categoria-content.collapsed {
            max-height: 0;
            padding: 0;
            overflow: hidden;
        }
        .categoria-toggle { font-size: 1.2em; transition: transform 0.3s ease; }
        .categoria-content.collapsed .categoria-toggle { transform: rotate(-90deg); }
        
        .empty-state { text-align: center; padding: 60px 20px; color: #999; }
        .empty-state-icon { font-size: 64px; margin-bottom: 20px; }
        
        /* Modal */
        .modal { display: none; position: fixed; z-index: 100; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); overflow: auto; }
        .modal-content { background: white; margin: 3% auto; padding: 30px; border-radius: 8px; width: 70%; max-width: 800px; box-shadow: 0 5px 15px rgba(0,0,0,0.3); max-height: 85vh; overflow-y: auto; }
        .modal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
        .modal-header h2 { margin: 0; color: #004d99; }
        .close { font-size: 28px; font-weight: bold; cursor: pointer; color: #aaa; }
        .close:hover { color: #000; }
        
        .opcoes-container { border: 1px solid #ddd; padding: 15px; border-radius: 6px; background: #f8f9fa; margin-top: 15px; }
        .opcao-input-group { display: flex; gap: 10px; margin-bottom: 10px; align-items: center; }
        .opcao-input-group input[type="text"] { flex: 1; }
        .opcao-input-group input[type="number"] { width: 100px; }
        
        .move-buttons { display: flex; flex-direction: column; gap: 2px; }
        .move-btn { padding: 2px 8px; font-size: 0.75em; }
        
        .sub-pergunta-card { background: #fff8e1; border: 1px dashed #ffc107; border-radius: 6px; padding: 12px; margin: 8px 0 8px 30px; position: relative; }
        .sub-pergunta-card::before { content: '↳'; position: absolute; left: -20px; top: 12px; color: #ffc107; font-size: 1.2em; font-weight: bold; }
        .sub-pergunta-badge { background: #ff9800; color: white; padding: 2px 8px; border-radius: 10px; font-size: 0.75em; font-weight: bold; }
        .btn-sub { background-color: #ff9800; color: white; padding: 3px 8px; border: none; border-radius: 3px; cursor: pointer; font-size: 0.75em; margin-left: 5px; }
        .btn-sub:hover { background-color: #f57c00; }
    </style>
</head>
<body>

<div class="container">
    <h1>✏️ Editar Questionário: <?= htmlspecialchars($template['nome']) ?></h1>
    
    <div style="margin-bottom: 20px;">
        <a href="montagem_questionario.php" class="btn btn-secondary">← Voltar</a>
    </div>
    
    <?php if (isset($_GET['msg'])): ?>
        <?php if ($_GET['msg'] === 'success'): ?>
            <div class="alert alert-success">
                ✓ Operação realizada com sucesso!
            </div>
        <?php elseif ($_GET['msg'] === 'error'): ?>
            <div class="alert alert-error">
                ✗ Erro: <?= htmlspecialchars($_GET['detalhe'] ?? '') ?>
            </div>
        <?php endif; ?>
    <?php endif; ?>
    
    <!-- Dados do Questionário -->
    <div class="section section-perguntas">
        <h2>📋 Dados do Questionário</h2>
        
        <div style="background: #e3f2fd; padding: 12px; border-radius: 6px; margin-bottom: 20px; color: #0d47a1; font-size: 0.9em;">
            <strong>📅 Data de Criação:</strong> <?= date('d/m/Y \à\s H:i', strtotime($template['data_criacao'])) ?>
            <?php if (isset($template['data_atualizacao']) && $template['data_atualizacao'] !== $template['data_criacao']): ?>
                | <strong>🔄 Última Atualização:</strong> <?= date('d/m/Y \à\s H:i', strtotime($template['data_atualizacao'])) ?>
            <?php endif; ?>
        </div>
        
        <form method="POST" action="processar_questionario_template.php">
            <input type="hidden" name="action" value="update_template">
            <input type="hidden" name="id" value="<?= $template['id'] ?>">
            
            <div class="form-group">
                <label for="nome">Nome do Questionário *</label>
                <input type="text" id="nome" name="nome" required maxlength="255" value="<?= htmlspecialchars($template['nome']) ?>">
            </div>
            
            <div class="form-group">
                <label for="descricao">Descrição</label>
                <textarea id="descricao" name="descricao"><?= htmlspecialchars($template['descricao'] ?? '') ?></textarea>
            </div>
            
            <div class="form-group">
                <label for="introducao">Texto de Introdução</label>
                <textarea id="introducao" name="introducao" placeholder="Texto que será exibido no início do questionário para o respondente..."><?= htmlspecialchars($template['introducao'] ?? '') ?></textarea>
            </div>
            
            <div class="form-group">
                <label for="mensagem_fechamento">Mensagem de Fechamento</label>
                <textarea id="mensagem_fechamento" name="mensagem_fechamento" placeholder="Texto que será exibido ao final do questionário..."><?= htmlspecialchars($template['mensagem_fechamento'] ?? '') ?></textarea>
            </div>
            
            <button type="submit" class="btn btn-success">💾 Salvar Alterações</button>
        </form>
    </div>
    
    <!-- Perguntas -->
    <div class="section">
        <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px;">
            <h2>❓ Perguntas</h2>
            <button onclick="showNewQuestionModal()" class="btn btn-success">➕ Nova Pergunta</button>
        </div>
        
        <div class="perguntas-scroll">
        <?php if (!empty($todas_perguntas)): ?>
            <?php 
            $perguntas_array = $todas_perguntas;
            
            // Agrupar por categoria
            $perguntas_por_categoria = [];
            $sem_categoria = [];
            
            foreach($perguntas_array as $p) {
                if (!empty($p['categoria'])) {
                    if (!isset($perguntas_por_categoria[$p['categoria']])) {
                        $perguntas_por_categoria[$p['categoria']] = [];
                    }
                    $perguntas_por_categoria[$p['categoria']][] = $p;
                } else {
                    $sem_categoria[] = $p;
                }
            }
            
            $todas_categorias = array_merge($perguntas_por_categoria, ['_sem_categoria' => $sem_categoria]);
            ?>
            
            <?php foreach($todas_categorias as $categoria => $perguntas_cat): ?>
                <?php if (empty($perguntas_cat)) continue; ?>
                <?php usort($perguntas_cat, 'comparar_numero_hierarquico'); ?>
                
                <div class="categoria-accordion">
                    <div class="categoria-header" onclick="toggleCategoria(this)">
                        <span><?= $categoria === '_sem_categoria' ? '📁 Sem Categoria' : htmlspecialchars($categoria) ?> (<?= count($perguntas_cat) ?> pergunta<?= count($perguntas_cat) > 1 ? 's' : '' ?>)</span>
                        <span class="categoria-toggle">▼</span>
                    </div>
                    <div class="categoria-content">
                        <?php foreach($perguntas_cat as $index => $p): ?>
                        <div class="pergunta-card">
                            <div class="pergunta-header">
                                <div class="pergunta-texto">
                                    <span style="display: inline-block; background: #004d99; color: white; padding: 4px 10px; border-radius: 4px; margin-right: 10px; font-weight: bold;"><?= $p['numero'] ?></span>
                                    <?php if (!empty($p['titulo'])): ?>
                                        <strong style="color: #004d99;"><?= htmlspecialchars($p['titulo']) ?>:</strong>
                                    <?php endif; ?>
                                    <?= htmlspecialchars($p['pergunta']) ?>
                                </div>
                                <div class="pergunta-actions">
                                    <?php if ($index > 0): ?>
                                    <button onclick="moveQuestion(<?= $p['id'] ?>, 'up')" class="btn btn-small move-btn" title="Mover para cima">⬆️</button>
                                    <?php endif; ?>
                                    <?php if ($index < count($perguntas_cat) - 1): ?>
                                    <button onclick="moveQuestion(<?= $p['id'] ?>, 'down')" class="btn btn-small move-btn" title="Mover para baixo">⬇️</button>
                                    <?php endif; ?>
                                    <button onclick="editQuestion(<?= $p['id'] ?>)" class="btn btn-warning btn-small">✏️ Editar</button>
                                    <button onclick="deleteQuestion(<?= $p['id'] ?>)" class="btn btn-danger btn-small">🗑️</button>
                                </div>
                            </div>
                            
                            <div class="pergunta-info">
                                <?php if (!empty($p['categoria'])): ?>
                                <strong>Categoria:</strong> <span style="background: #e3f2fd; padding: 2px 8px; border-radius: 4px; display: inline-block; margin-right: 15px;"><?= htmlspecialchars($p['categoria']) ?></span>
                                <?php endif; ?>
                                <strong>Tipo:</strong> <?= getTipoResposta($p['tipo_resposta']) ?> | 
                                <strong>Nota Máxima:</strong> <span class="nota-badge"><?= number_format((float)$p['nota_maxima'], 0) ?></span> | 
                                <strong>Obrigatória:</strong> <?= $p['obrigatorio'] === 'S' ? 'Sim' : 'Não' ?>
                            </div>
                            
                            <?php if ($p['opcoes']): ?>
                            <div class="pergunta-opcoes">
                                <?php 
                                $opcoes = json_decode($p['opcoes'], true);
                                if ($opcoes && is_array($opcoes)):
                                    if ($p['tipo_resposta'] === 'campos_personalizados'):
                                ?>
                                <strong>Campos Personalizados:</strong>
                                    <?php foreach($opcoes as $campo): ?>
                                    <div class="opcao-item">
                                        <strong><?= htmlspecialchars($campo['nome']) ?></strong>
                                        <span style="background: #6c757d; color: white; padding: 2px 8px; border-radius: 10px; font-size: 0.8em; margin-left: 5px;"><?= htmlspecialchars(ucfirst($campo['tipo'])) ?></span>
                                        <span class="nota-badge"><?= number_format((float)($campo['nota'] ?? 0), 0) ?></span>
                                    </div>
                                    <?php endforeach; ?>
                                <?php else: ?>
                                <strong>Opções de Resposta:</strong>
                                    <?php foreach($opcoes as $idx_opcao => $opcao): ?>
                                    <div class="opcao-item">
                                        <?= htmlspecialchars($opcao['texto']) ?> 
                                        <span class="nota-badge"><?= number_format((float)$opcao['nota'], 0) ?> pts</span>
                                        <button type="button" class="btn-sub" onclick="showNewSubQuestionModal(<?= $p['id'] ?>, <?= $idx_opcao ?>, '<?= htmlspecialchars(addslashes($opcao['texto']), ENT_QUOTES) ?>')">➕ Sub-pergunta</button>
                                        
                                        <?php 
                                        // Mostrar sub-perguntas vinculadas a esta opção
                                        if (isset($sub_perguntas_map[$p['id']][$idx_opcao])):
                                            foreach ($sub_perguntas_map[$p['id']][$idx_opcao] as $sub):
                                        ?>
                                        <div class="sub-pergunta-card">
                                            <div style="display: flex; justify-content: space-between; align-items: center;">
                                                <div>
                                                    <span class="sub-pergunta-badge"><?= $sub['numero'] ?></span>
                                                    <?= htmlspecialchars($sub['pergunta']) ?>
                                                    <small style="color: #999;">(<?= getTipoResposta($sub['tipo_resposta']) ?>)</small>
                                                </div>
                                                <div style="display: flex; gap: 4px;">
                                                    <button onclick="editQuestion(<?= $sub['id'] ?>)" class="btn btn-warning btn-small" style="font-size:0.75em;">✏️</button>
                                                    <button onclick="deleteQuestion(<?= $sub['id'] ?>)" class="btn btn-danger btn-small" style="font-size:0.75em;">🗑️</button>
                                                </div>
                                            </div>
                                            <?php if ($sub['opcoes']):
                                                $sub_opcoes = json_decode($sub['opcoes'], true);
                                                if ($sub_opcoes && is_array($sub_opcoes)):
                                            ?>
                                            <div style="margin-top: 6px; padding-left: 10px; font-size: 0.85em; color: #555;">
                                                <?php if ($sub['tipo_resposta'] === 'campos_personalizados'): ?>
                                                    <?php foreach($sub_opcoes as $campo): ?>
                                                        <div>• <strong><?= htmlspecialchars($campo['nome']) ?></strong> <span style="background:#6c757d;color:white;padding:1px 6px;border-radius:8px;font-size:0.75em;"><?= htmlspecialchars(ucfirst($campo['tipo'])) ?></span> <span class="nota-badge" style="font-size:0.7em;"><?= number_format((float)($campo['nota'] ?? 0), 0) ?></span></div>
                                                    <?php endforeach; ?>
                                                <?php else: ?>
                                                    <?php foreach($sub_opcoes as $so): ?>
                                                        <div>• <?= htmlspecialchars($so['texto']) ?> <span class="nota-badge" style="font-size:0.7em;"><?= number_format((float)$so['nota'], 0) ?></span></div>
                                                    <?php endforeach; ?>
                                                <?php endif; ?>
                                            </div>
                                            <?php endif; endif; ?>
                                        </div>
                                        <?php 
                                            endforeach;
                                        endif; 
                                        ?>
                                    </div>
                                    <?php endforeach; ?>
                                <?php endif; ?>
                                <?php endif; ?>
                            </div>
                            <?php endif; ?>
                        </div>
                        <?php endforeach; ?>
                    </div>
                </div>
            <?php endforeach; ?>
        <?php else: ?>
        <div class="empty-state">
            <div class="empty-state-icon">❓</div>
            <h3>Nenhuma pergunta cadastrada</h3>
            <p>Adicione perguntas ao questionário clicando em "Nova Pergunta".</p>
        </div>
        <?php endif; ?>
        </div>
    </div>
</div>

<!-- Modal Nova Pergunta -->
<div id="modalPergunta" class="modal">
    <div class="modal-content">
        <div class="modal-header">
            <h2 id="modalTitle">Nova Pergunta</h2>
            <span class="close" onclick="closeModal('modalPergunta')">&times;</span>
        </div>
        <div id="formError" style="display: none; background: #f8d7da; color: #721c24; padding: 12px; border-radius: 4px; margin-bottom: 15px; border: 1px solid #f5c6cb;"></div>
        <div id="infoSubPergunta" style="display: none; background: #fff3e0; color: #e65100; padding: 12px; border-radius: 4px; margin-bottom: 15px; border: 1px solid #ffcc80; font-size: 0.9em;"></div>
        <div id="copySubPerguntaWrap" style="display: none; background: #e8f4fd; color: #0d47a1; padding: 12px; border-radius: 4px; margin-bottom: 15px; border: 1px solid #bbdefb; font-size: 0.9em;">
            <div style="margin-bottom: 8px;"><strong>Copiar sub-pergunta de outra opção</strong></div>
            <div style="display:flex; gap:8px; align-items:center; flex-wrap:wrap;">
                <select id="copiar_subpergunta_select" style="min-width:320px; padding:8px; border:1px solid #90caf9; border-radius:4px; background:#fff;"></select>
                <button type="button" class="btn btn-small" onclick="copiarSubPerguntaSelecionada()">📋 Copiar para este formulário</button>
            </div>
            <small style="display:block; margin-top:6px; color:#1565c0;">A cópia traz texto, tipo de resposta, opções/campos, obrigatoriedade e nota.</small>
        </div>
        <form method="POST" action="processar_questionario_template.php" id="formPergunta">
            <input type="hidden" name="action" id="action_field" value="create_question">
            <input type="hidden" name="id_template" value="<?= $template['id'] ?>">
            <input type="hidden" name="id_pergunta" id="id_pergunta" value="">
            <input type="hidden" name="id_pergunta_pai" id="id_pergunta_pai" value="">
            <input type="hidden" name="id_opcao_gatilho" id="id_opcao_gatilho" value="">
            
            <div class="form-group">
                <label for="numero">Número da Pergunta *</label>
                <input type="text" id="numero" name="numero" required placeholder="Ex: 1 ou 1.1" style="width: 150px; padding: 10px; border: 1px solid #ccc; border-radius: 4px;">
                <small style="color: #666; display: block; margin-top: 5px;">Use o formato X para perguntas principais e X.Y para sub-perguntas (ex: 1, 1.1, 1.2)</small>
            </div>
            
            <div class="form-group">
                <label for="titulo">Título da Pergunta</label>
                <input type="text" id="titulo" name="titulo" maxlength="255" placeholder="Ex: Dados da Empresa">
                <small style="color: #666; display: block; margin-top: 5px;">Título opcional para agrupar ou identificar a pergunta</small>
            </div>
            
            <div class="form-group">
                <label for="categoria">Categoria *</label>
                <input type="text" id="categoria" name="categoria" maxlength="255" placeholder="Ex: Informações Gerais, Contato, etc." list="categoriasDisponiveis">
                <datalist id="categoriasDisponiveis"></datalist>
                <small style="color: #666; display: block; margin-top: 5px;">Agrupar perguntas por categoria. Digite uma nova categoria ou selecione uma existente.</small>
            </div>
            
            <div class="form-group">
                <label for="pergunta">Pergunta SDR *</label>
                <textarea id="pergunta" name="pergunta" required placeholder="Digite a pergunta..."></textarea>
            </div>
            
            <div class="form-group">
                <label for="tipo_resposta">Tipo de Resposta *</label>
                <select id="tipo_resposta" name="tipo_resposta" required style="width: 100%; padding: 10px; border: 1px solid #ccc; border-radius: 4px;">
                    <option value="">Selecione...</option>
                    <option value="radio">Múltipla Escolha (Radio)</option>
                    <option value="checkbox">Múltipla Seleção (Checkbox)</option>
                    <option value="select">Lista Suspensa (Select)</option>
                    <option value="text">Texto Curto</option>
                    <option value="textarea">Texto Longo</option>
                    <option value="number">Número</option>
                    <option value="campos_personalizados">Campos Personalizados</option>
                </select>
            </div>
            
            <div class="form-group" id="opcoesGroup" style="display: none;">
                <label>Opções de Resposta</label>
                <div class="opcoes-container" id="opcoesContainer">
                </div>
                <button type="button" onclick="addOpcao()" class="btn btn-small" style="margin-top: 10px;">➕ Adicionar Opção</button>
            </div>
            
            <div class="form-group" id="camposPersonalizadosGroup" style="display: none;">
                <label>Campos Personalizados</label>
                <div class="opcoes-container" id="camposContainer">
                </div>
                <button type="button" onclick="addCampoPersonalizado()" class="btn btn-small" style="margin-top: 10px;">➕ Adicionar Campo</button>
            </div>
            
            <div class="form-group">
                <label for="nota_maxima">Nota Máxima *</label>
                <input type="number" id="nota_maxima" name="nota_maxima" step="1" min="0" value="0" style="width: 150px; padding: 10px; border: 1px solid #ccc; border-radius: 4px;">
            </div>
            
            <div class="form-group">
                <label style="display: flex; align-items: center; cursor: pointer;">
                    <input type="checkbox" id="obrigatorio" name="obrigatorio" value="S" style="width: auto; margin-right: 8px;">
                    Pergunta obrigatória
                </label>
            </div>
            
            <div style="text-align: right; margin-top: 20px;">
                <button type="button" onclick="closeModal('modalPergunta')" class="btn btn-secondary">Cancelar</button>
                <button type="submit" id="btnSalvar" class="btn btn-success">💾 Salvar Pergunta</button>
            </div>
        </form>
    </div>
</div>

<script>
let opcaoCounter = 0;
const subPerguntasMap = <?= $sub_perguntas_json ?: '{}' ?>;
const opcoesPerguntaMap = <?= $opcoes_pergunta_json ?: '{}' ?>;
let contextoSubPerguntaAtual = { idPai: 0, idOpcaoGatilho: 0 };

document.getElementById('formPergunta').addEventListener('submit', async function(e) {
    e.preventDefault();
    
    const errorDiv = document.getElementById('formError');
    const btnSalvar = document.getElementById('btnSalvar');
    const tipoResposta = document.getElementById('tipo_resposta').value;
    
    if (!document.getElementById('numero').value) {
        errorDiv.textContent = '❌ Número da pergunta é obrigatório';
        errorDiv.style.display = 'block';
        return;
    }
    
    if (!document.getElementById('pergunta').value.trim()) {
        errorDiv.textContent = '❌ A pergunta é obrigatória';
        errorDiv.style.display = 'block';
        return;
    }
    
    if (!document.getElementById('categoria').value.trim()) {
        errorDiv.textContent = '❌ Categoria é obrigatória';
        errorDiv.style.display = 'block';
        return;
    }
    
    if (!tipoResposta) {
        errorDiv.textContent = '❌ Tipo de resposta é obrigatório';
        errorDiv.style.display = 'block';
        return;
    }
    
    if (!document.getElementById('nota_maxima').value || parseFloat(document.getElementById('nota_maxima').value) < 0) {
        errorDiv.textContent = '❌ Nota máxima é obrigatória e deve ser maior ou igual a 0';
        errorDiv.style.display = 'block';
        return;
    }
    
    if (['radio', 'checkbox', 'select'].includes(tipoResposta)) {
        const opcoes = document.querySelectorAll('.opcao-input-group input[name="opcao_texto[]"]');
        if (opcoes.length === 0) {
            errorDiv.textContent = '❌ Adicione pelo menos uma opção de resposta';
            errorDiv.style.display = 'block';
            return;
        }
    }
    
    const formData = new FormData(this);
    
    // Debug: verificar qual action está sendo enviada
    console.log('Action:', formData.get('action'));
    console.log('ID Pergunta:', formData.get('id_pergunta'));
    
    btnSalvar.disabled = true;
    btnSalvar.textContent = '⏳ Salvando...';
    
    try {
        const response = await fetch('processar_questionario_template.php', {
            method: 'POST',
            body: formData
        });
        
        const data = await response.json();
        
        if (data.success) {
            errorDiv.style.display = 'none';
            alert('✅ Pergunta salva com sucesso!');
            window.location.reload();
        } else {
            errorDiv.textContent = '❌ ' + (data.message || 'Erro ao salvar pergunta');
            errorDiv.style.display = 'block';
            btnSalvar.disabled = false;
            btnSalvar.textContent = '💾 Salvar Pergunta';
        }
    } catch (error) {
        errorDiv.textContent = '❌ Erro na comunicação com o servidor: ' + error.message;
        errorDiv.style.display = 'block';
        btnSalvar.disabled = false;
        btnSalvar.textContent = '💾 Salvar Pergunta';
    }
});

function showNewQuestionModal() {
    document.getElementById('modalTitle').textContent = 'Nova Pergunta';
    document.getElementById('formPergunta').action = 'processar_questionario_template.php';
    document.getElementById('formPergunta').reset();
    document.getElementById('action_field').value = 'create_question';
    document.getElementById('id_pergunta').value = '';
    document.getElementById('id_pergunta_pai').value = '';
    document.getElementById('id_opcao_gatilho').value = '';
    document.getElementById('opcoesGroup').style.display = 'none';
    document.getElementById('opcoesContainer').innerHTML = '';
    document.getElementById('camposPersonalizadosGroup').style.display = 'none';
    document.getElementById('camposContainer').innerHTML = '';
    opcaoCounter = 0;
    campoCounter = 0;
    contextoSubPerguntaAtual = { idPai: 0, idOpcaoGatilho: 0 };
    var infoSub = document.getElementById('infoSubPergunta');
    if (infoSub) infoSub.style.display = 'none';
    var copyWrap = document.getElementById('copySubPerguntaWrap');
    if (copyWrap) copyWrap.style.display = 'none';
    document.getElementById('modalPergunta').style.display = 'block';
    
    // Sugerir próximo número de pergunta principal
    const idTemplate = <?= $template['id'] ?>;
    fetch('processar_questionario_template.php?action=get_next_question_number&id_template=' + idTemplate)
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                document.getElementById('numero').value = data.proximo_numero;
            }
        })
        .catch(error => console.error('Erro ao obter próximo número:', error));
    
    carregarCategoriasDisponiveis();
}

function carregarCategoriasDisponiveis() {
    const idTemplate = <?= $template['id'] ?>;
    fetch('processar_questionario_template.php?action=get_categorias&id_template=' + idTemplate)
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                const datalist = document.getElementById('categoriasDisponiveis');
                datalist.innerHTML = '';
                data.categorias.forEach(cat => {
                    if (cat.trim()) {
                        const option = document.createElement('option');
                        option.value = cat;
                        datalist.appendChild(option);
                    }
                });
            }
        })
        .catch(error => console.error('Erro ao carregar categorias:', error));
}

function showNewSubQuestionModal(idPerguntaPai, idOpcaoGatilho, textoOpcao) {
    showNewQuestionModal();
    document.getElementById('modalTitle').textContent = 'Nova Sub-Pergunta';
    document.getElementById('id_pergunta_pai').value = idPerguntaPai;
    document.getElementById('id_opcao_gatilho').value = idOpcaoGatilho;
    contextoSubPerguntaAtual = { idPai: idPerguntaPai, idOpcaoGatilho: idOpcaoGatilho };
    var infoSub = document.getElementById('infoSubPergunta');
    if (infoSub) {
        infoSub.style.display = 'block';
        infoSub.innerHTML = '<strong>Sub-pergunta da opção:</strong> "' + textoOpcao + '"';
    }
    montarSeletorCopiaSubPergunta(idPerguntaPai, idOpcaoGatilho);
    
    // Sugerir próximo número de sub-pergunta (formato X.Y)
    const idTemplate = <?= $template['id'] ?>;
    fetch('processar_questionario_template.php?action=get_next_question_number&id_template=' + idTemplate + '&id_pai=' + idPerguntaPai)
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                document.getElementById('numero').value = data.proximo_numero;
            }
        })
        .catch(error => console.error('Erro ao obter próximo número de sub-pergunta:', error));
}

function montarSeletorCopiaSubPergunta(idPerguntaPai, idOpcaoAtual) {
    const wrap = document.getElementById('copySubPerguntaWrap');
    const select = document.getElementById('copiar_subpergunta_select');
    if (!wrap || !select) return;

    select.innerHTML = '';

    const porPai = subPerguntasMap[String(idPerguntaPai)] || subPerguntasMap[idPerguntaPai] || {};
    const opcoesPai = opcoesPerguntaMap[String(idPerguntaPai)] || opcoesPerguntaMap[idPerguntaPai] || [];

    let totalOpcoes = 0;
    Object.keys(porPai).forEach((gatilhoKey) => {
        const gatilho = parseInt(gatilhoKey, 10);
        if (gatilho === idOpcaoAtual) return;

        const lista = porPai[gatilhoKey];
        if (!Array.isArray(lista)) return;

        lista.forEach((sub) => {
            const option = document.createElement('option');
            option.value = String(sub.id);
            const textoOpcao = opcoesPai[gatilho] || ('Opção ' + (gatilho + 1));
            option.textContent = '[' + textoOpcao + '] ' + (sub.numero || '') + ' - ' + (sub.pergunta || 'Sub-pergunta');
            select.appendChild(option);
            totalOpcoes++;
        });
    });

    if (totalOpcoes === 0) {
        const option = document.createElement('option');
        option.value = '';
        option.textContent = 'Não há sub-perguntas em outras opções para copiar';
        select.appendChild(option);
    }

    wrap.style.display = 'block';
}

function copiarSubPerguntaSelecionada() {
    const select = document.getElementById('copiar_subpergunta_select');
    if (!select || !select.value) return;

    const idSelecionado = parseInt(select.value, 10);
    if (!idSelecionado) return;

    const porPai = subPerguntasMap[String(contextoSubPerguntaAtual.idPai)] || subPerguntasMap[contextoSubPerguntaAtual.idPai] || {};

    let subEncontrada = null;
    Object.keys(porPai).forEach((gatilhoKey) => {
        if (subEncontrada) return;
        const lista = porPai[gatilhoKey];
        if (!Array.isArray(lista)) return;
        for (let i = 0; i < lista.length; i++) {
            if (parseInt(lista[i].id, 10) === idSelecionado) {
                subEncontrada = lista[i];
                break;
            }
        }
    });

    if (!subEncontrada) return;

    document.getElementById('titulo').value = subEncontrada.titulo || '';
    document.getElementById('categoria').value = subEncontrada.categoria || '';
    document.getElementById('pergunta').value = subEncontrada.pergunta || '';
    document.getElementById('tipo_resposta').value = subEncontrada.tipo_resposta || '';
    document.getElementById('nota_maxima').value = Number.isFinite(parseFloat(subEncontrada.nota_maxima)) ? Math.round(parseFloat(subEncontrada.nota_maxima)) : 0;
    document.getElementById('obrigatorio').checked = (subEncontrada.obrigatorio === 'S');

    document.getElementById('tipo_resposta').dispatchEvent(new Event('change'));

    const tipo = subEncontrada.tipo_resposta || '';
    const opcoesRaw = subEncontrada.opcoes ? JSON.parse(subEncontrada.opcoes) : [];

    if (['radio', 'checkbox', 'select'].includes(tipo)) {
        document.getElementById('opcoesContainer').innerHTML = '';
        opcaoCounter = 0;
        if (Array.isArray(opcoesRaw)) {
            opcoesRaw.forEach((op) => {
                opcaoCounter++;
                const container = document.getElementById('opcoesContainer');
                const div = document.createElement('div');
                div.className = 'opcao-input-group';
                div.id = 'opcao_' + opcaoCounter;
                div.innerHTML = `
                    <input type="text" name="opcao_texto[]" placeholder="Texto da opção" value="${escapeHtml(op.texto || '')}" required>
                    <input type="number" name="opcao_nota[]" placeholder="Nota" step="1" min="0" value="${Number.isFinite(parseFloat(op.nota)) ? Math.round(parseFloat(op.nota)) : 0}" required>
                    <button type="button" onclick="removeOpcao(${opcaoCounter})" class="btn btn-danger btn-small">✖</button>
                `;
                container.appendChild(div);
            });
        }
    } else if (tipo === 'campos_personalizados') {
        document.getElementById('camposContainer').innerHTML = '';
        campoCounter = 0;
        if (Array.isArray(opcoesRaw)) {
            opcoesRaw.forEach((campo) => {
                addCampoPersonalizado(campo.nome || '', campo.tipo || 'texto', campo.nota ?? 0);
            });
        }
    }
}

function closeModal(modalId) {
    document.getElementById(modalId).style.display = 'none';
}

function toggleCategoria(header) {
    const content = header.nextElementSibling;
    header.classList.toggle('collapsed');
    content.classList.toggle('collapsed');
}

document.getElementById('tipo_resposta').addEventListener('change', function() {
    const tipo = this.value;
    const opcoesGroup = document.getElementById('opcoesGroup');
    const camposGroup = document.getElementById('camposPersonalizadosGroup');
    
    opcoesGroup.style.display = 'none';
    camposGroup.style.display = 'none';
    
    if (tipo === 'radio' || tipo === 'checkbox' || tipo === 'select') {
        opcoesGroup.style.display = 'block';
        if (document.getElementById('opcoesContainer').children.length === 0) {
            addOpcao();
            addOpcao();
        }
    } else if (tipo === 'campos_personalizados') {
        camposGroup.style.display = 'block';
        if (document.getElementById('camposContainer').children.length === 0) {
            addCampoPersonalizado();
        }
    }
});

let campoCounter = 0;

function addCampoPersonalizado(nome, tipo, nota) {
    campoCounter++;
    const container = document.getElementById('camposContainer');
    const div = document.createElement('div');
    div.className = 'opcao-input-group';
    div.id = 'campo_' + campoCounter;
    div.innerHTML = `
        <input type="text" name="campo_nome[]" placeholder="Nome do campo" value="${escapeHtml(nome || '')}" required>
        <select name="campo_tipo[]" style="width: 160px; padding: 8px; border: 1px solid #ccc; border-radius: 4px;">
            <option value="texto" ${(tipo === 'texto' || !tipo) ? 'selected' : ''}>Texto</option>
            <option value="telefone" ${tipo === 'telefone' ? 'selected' : ''}>Telefone</option>
            <option value="hora" ${tipo === 'hora' ? 'selected' : ''}>Hora</option>
            <option value="data" ${tipo === 'data' ? 'selected' : ''}>Data</option>
        </select>
        <input type="number" name="campo_nota[]" placeholder="Nota" step="1" min="0" value="${Number.isFinite(parseFloat(nota)) ? Math.round(parseFloat(nota)) : 0}" style="width: 110px;">
        <button type="button" onclick="removeCampo(${campoCounter})" class="btn btn-danger btn-small">✖</button>
    `;
    container.appendChild(div);
}

function removeCampo(id) {
    const elem = document.getElementById('campo_' + id);
    if (elem) elem.remove();
}

function addOpcao() {
    opcaoCounter++;
    const container = document.getElementById('opcoesContainer');
    const div = document.createElement('div');
    div.className = 'opcao-input-group';
    div.id = 'opcao_' + opcaoCounter;
    div.innerHTML = `
        <input type="text" name="opcao_texto[]" placeholder="Texto da opção" required>
        <input type="number" name="opcao_nota[]" placeholder="Nota" step="1" min="0" value="0" required>
        <button type="button" onclick="removeOpcao(${opcaoCounter})" class="btn btn-danger btn-small">✖</button>
    `;
    container.appendChild(div);
}

function removeOpcao(id) {
    const elem = document.getElementById('opcao_' + id);
    if (elem) elem.remove();
}

function editQuestion(id) {
    // Buscar dados da pergunta via AJAX
    fetch('processar_questionario_template.php?action=get_question&id=' + id)
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                const q = data.question;
                document.getElementById('modalTitle').textContent = 'Editar Pergunta';
                document.getElementById('action_field').value = 'update_question';
                document.getElementById('id_pergunta').value = q.id;
                document.getElementById('numero').value = q.numero || 1;
                document.getElementById('titulo').value = q.titulo || '';
                document.getElementById('categoria').value = q.categoria || '';
                document.getElementById('pergunta').value = q.pergunta;
                document.getElementById('tipo_resposta').value = q.tipo_resposta;
                document.getElementById('nota_maxima').value = Number.isFinite(parseFloat(q.nota_maxima)) ? Math.round(parseFloat(q.nota_maxima)) : 0;
                document.getElementById('obrigatorio').checked = q.obrigatorio === 'S';
                document.getElementById('id_pergunta_pai').value = q.id_pergunta_pai || '';
                document.getElementById('id_opcao_gatilho').value = q.id_opcao_gatilho !== null ? q.id_opcao_gatilho : '';
                
                var infoSub = document.getElementById('infoSubPergunta');
                if (q.id_pergunta_pai) {
                    infoSub.style.display = 'block';
                    infoSub.innerHTML = '<strong>Esta é uma sub-pergunta</strong> (vinculada à pergunta pai ID: ' + q.id_pergunta_pai + ')';
                } else {
                    infoSub.style.display = 'none';
                }
                
                // Limpar campos antes de carregar
                document.getElementById('opcoesContainer').innerHTML = '';
                document.getElementById('camposContainer').innerHTML = '';
                opcaoCounter = 0;
                campoCounter = 0;
                
                // Trigger change para mostrar opções/campos se necessário
                document.getElementById('tipo_resposta').dispatchEvent(new Event('change'));
                
                // Carregar opções ou campos personalizados
                if (q.opcoes) {
                    const dados = JSON.parse(q.opcoes);
                    
                    if (q.tipo_resposta === 'campos_personalizados') {
                        document.getElementById('camposContainer').innerHTML = '';
                        campoCounter = 0;
                        dados.forEach(campo => {
                            addCampoPersonalizado(campo.nome, campo.tipo, campo.nota ?? 0);
                        });
                    } else {
                        document.getElementById('opcoesContainer').innerHTML = '';
                        opcaoCounter = 0;
                        dados.forEach(op => {
                            opcaoCounter++;
                            const container = document.getElementById('opcoesContainer');
                            const div = document.createElement('div');
                            div.className = 'opcao-input-group';
                            div.id = 'opcao_' + opcaoCounter;
                            div.innerHTML = `
                                <input type="text" name="opcao_texto[]" placeholder="Texto da opção" value="${escapeHtml(op.texto)}" required>
                                <input type="number" name="opcao_nota[]" placeholder="Nota" step="1" min="0" value="${Number.isFinite(parseFloat(op.nota)) ? Math.round(parseFloat(op.nota)) : 0}" required>
                                <button type="button" onclick="removeOpcao(${opcaoCounter})" class="btn btn-danger btn-small">✖</button>
                            `;
                            container.appendChild(div);
                        });
                    }
                }
                
                carregarCategoriasDisponiveis();
                document.getElementById('modalPergunta').style.display = 'block';
            } else {
                alert('Erro ao carregar pergunta');
            }
        });
}

function deleteQuestion(id) {
    if (confirm('Confirma a exclusão desta pergunta?')) {
        const form = document.createElement('form');
        form.method = 'POST';
        form.action = 'processar_questionario_template.php';
        
        const inputAction = document.createElement('input');
        inputAction.type = 'hidden';
        inputAction.name = 'action';
        inputAction.value = 'delete_question';
        
        const inputId = document.createElement('input');
        inputId.type = 'hidden';
        inputId.name = 'id';
        inputId.value = id;
        
        const inputTemplate = document.createElement('input');
        inputTemplate.type = 'hidden';
        inputTemplate.name = 'id_template';
        inputTemplate.value = <?= $template['id'] ?>;
        
        form.appendChild(inputAction);
        form.appendChild(inputId);
        form.appendChild(inputTemplate);
        
        document.body.appendChild(form);
        form.submit();
    }
}

function moveQuestion(id, direction) {
    const form = document.createElement('form');
    form.method = 'POST';
    form.action = 'processar_questionario_template.php';
    
    const inputAction = document.createElement('input');
    inputAction.type = 'hidden';
    inputAction.name = 'action';
    inputAction.value = 'move_question';
    
    const inputId = document.createElement('input');
    inputId.type = 'hidden';
    inputId.name = 'id';
    inputId.value = id;
    
    const inputDirection = document.createElement('input');
    inputDirection.type = 'hidden';
    inputDirection.name = 'direction';
    inputDirection.value = direction;
    
    const inputTemplate = document.createElement('input');
    inputTemplate.type = 'hidden';
    inputTemplate.name = 'id_template';
    inputTemplate.value = <?= $template['id'] ?>;
    
    form.appendChild(inputAction);
    form.appendChild(inputId);
    form.appendChild(inputDirection);
    form.appendChild(inputTemplate);
    
    document.body.appendChild(form);
    form.submit();
}

function escapeHtml(text) {
    text = (text === null || text === undefined) ? '' : String(text);
    const map = {
        '&': '&amp;',
        '<': '&lt;',
        '>': '&gt;',
        '"': '&quot;',
        "'": '&#039;'
    };
    return text.replace(/[&<>"']/g, m => map[m]);
}

// Fechar modal ao clicar fora (apenas no background)
window.addEventListener('click', function(event) {
    const modal = document.getElementById('modalPergunta');
    const modalContent = document.querySelector('.modal-content');
    
    // Só fecha se clicar no modal background, não no conteúdo
    if (modal && event.target === modal && !modalContent?.contains(event.target)) {
        closeModal('modalPergunta');
    }
});
</script>

</body>
</html>

<?php
function numero_pergunta_em_partes($numero) {
    $numero = trim((string)$numero);
    if ($numero === '') return [0];

    $partes = explode('.', $numero);
    $out = [];
    foreach ($partes as $p) {
        $p = trim($p);
        $out[] = is_numeric($p) ? (int)$p : 0;
    }

    return !empty($out) ? $out : [0];
}

function comparar_numero_hierarquico($a, $b) {
    $aPartes = numero_pergunta_em_partes($a['numero'] ?? '0');
    $bPartes = numero_pergunta_em_partes($b['numero'] ?? '0');
    $max = max(count($aPartes), count($bPartes));

    for ($i = 0; $i < $max; $i++) {
        $av = $aPartes[$i] ?? null;
        $bv = $bPartes[$i] ?? null;

        if ($av === null) return -1;
        if ($bv === null) return 1;
        if ($av < $bv) return -1;
        if ($av > $bv) return 1;
    }

    $ordA = (int)($a['ordem'] ?? 0);
    $ordB = (int)($b['ordem'] ?? 0);
    if ($ordA !== $ordB) return $ordA <=> $ordB;

    return ((int)($a['id'] ?? 0)) <=> ((int)($b['id'] ?? 0));
}

function getTipoResposta($tipo) {
    $tipos = [
        'radio' => 'Múltipla Escolha',
        'checkbox' => 'Múltipla Seleção',
        'select' => 'Lista Suspensa',
        'text' => 'Texto Curto',
        'textarea' => 'Texto Longo',
        'number' => 'Número',
        'campos_personalizados' => 'Campos Personalizados'
    ];
    return $tipos[$tipo] ?? $tipo;
}
?>
