<?php
session_start();
require_once 'conexao.php';

if (!isset($_SESSION['logado']) || $_SESSION['logado'] !== true) {
    header('Location: login.php');
    exit;
}

$tenant_id = $_SESSION['tenant_id'];
$usuario_id = $_SESSION['usuario_id'];
$permissao = $_SESSION['permissao'];

// Verificar permissão
if (!in_array($permissao, ['admin', 'super_admin'])) {
    die("Acesso negado.");
}

$questionario_id = $_GET['id'] ?? 0;

// Buscar dados do questionário
$stmt = $conn->prepare("SELECT * FROM questionarios WHERE id = ? AND tenant_id = ?");
$stmt->bind_param("ii", $questionario_id, $tenant_id);
$stmt->execute();
$questionario = $stmt->get_result()->fetch_assoc();

if (!$questionario) {
    die("Questionário não encontrado.");
}

// Buscar perguntas com suas condições
$perguntas = [];
$stmt = $conn->prepare("
    SELECT p.*, 
           c.pergunta_condicional_id,
           c.opcao_condicional_id,
           pc.pergunta as pergunta_condicional_texto,
           oc.texto as opcao_condicional_texto
    FROM questionario_perguntas p 
    LEFT JOIN questionario_condicionais c ON p.id = c.pergunta_id
    LEFT JOIN questionario_perguntas pc ON c.pergunta_condicional_id = pc.id
    LEFT JOIN questionario_opcoes oc ON c.opcao_condicional_id = oc.id
    WHERE p.questionario_id = ? 
    ORDER BY p.ordem ASC, p.id ASC
");
$stmt->bind_param("i", $questionario_id);
$stmt->execute();
$result = $stmt->get_result();
while ($row = $result->fetch_assoc()) {
    // Buscar opções se for do tipo que tem opções
    if (in_array($row['tipo'], ['multipla_escolha', 'unica_escolha', 'dropdown'])) {
        $stmt_opcoes = $conn->prepare("SELECT * FROM questionario_opcoes WHERE pergunta_id = ? ORDER BY ordem ASC, id ASC");
        $stmt_opcoes->bind_param("i", $row['id']);
        $stmt_opcoes->execute();
        $row['opcoes'] = $stmt_opcoes->get_result()->fetch_all(MYSQLI_ASSOC);
    }
    $perguntas[] = $row;
}

// Buscar perguntas para condições (apenas perguntas anteriores que tenham opções)
$perguntas_para_condicao = [];
$stmt_cond = $conn->prepare("
    SELECT p.id, p.pergunta, p.tipo
    FROM questionario_perguntas p 
    WHERE p.questionario_id = ? AND p.tipo IN ('multipla_escolha', 'unica_escolha', 'dropdown')
    ORDER BY p.ordem ASC, p.id ASC
");
$stmt_cond->bind_param("i", $questionario_id);
$stmt_cond->execute();
$perguntas_para_condicao = $stmt_cond->get_result()->fetch_all(MYSQLI_ASSOC);

// Criar CSRF token se não existir
if (empty($_SESSION['csrf_token'])) {
    $_SESSION['csrf_token'] = bin2hex(random_bytes(32));
}

// Processar formulário
if ($_POST) {
    $csrf_token = $_POST['csrf_token'] ?? '';
    if (!hash_equals($_SESSION['csrf_token'], $csrf_token)) {
        die("Token CSRF inválido.");
    }

    $action = $_POST['action'] ?? '';
    
    if ($action === 'adicionar_pergunta') {
        $pergunta = $_POST['pergunta'] ?? '';
        $tipo = $_POST['tipo'] ?? 'unica_escolha';
        $ordem = $_POST['ordem'] ?? 0;
        $obrigatoria = $_POST['obrigatoria'] ?? 1;
        $condicional = isset($_POST['condicional']) ? 1 : 0;
        $pergunta_condicional_id = $_POST['pergunta_condicional_id'] ?? null;
        $opcao_condicional_id = $_POST['opcao_condicional_id'] ?? null;
        
        $stmt = $conn->prepare("INSERT INTO questionario_perguntas (questionario_id, pergunta, tipo, ordem, obrigatoria) VALUES (?, ?, ?, ?, ?)");
        $stmt->bind_param("issii", $questionario_id, $pergunta, $tipo, $ordem, $obrigatoria);
        
        if ($stmt->execute()) {
            $pergunta_id = $stmt->insert_id;
            
            // Adicionar condição se for uma pergunta condicional
            if ($condicional && $pergunta_condicional_id && $opcao_condicional_id) {
                $stmt_cond = $conn->prepare("INSERT INTO questionario_condicionais (pergunta_id, pergunta_condicional_id, opcao_condicional_id) VALUES (?, ?, ?)");
                $stmt_cond->bind_param("iii", $pergunta_id, $pergunta_condicional_id, $opcao_condicional_id);
                $stmt_cond->execute();
            }
            
            // Adicionar opções se for do tipo que tem opções
            if (in_array($tipo, ['multipla_escolha', 'unica_escolha', 'dropdown']) && isset($_POST['opcoes'])) {
                foreach ($_POST['opcoes'] as $index => $opcao) {
                    if (!empty(trim($opcao['texto']))) {
                        $stmt_opcao = $conn->prepare("INSERT INTO questionario_opcoes (pergunta_id, texto, nota, ordem) VALUES (?, ?, ?, ?)");
                        $nota = floatval($opcao['nota'] ?? 0);
                        $stmt_opcao->bind_param("isdi", $pergunta_id, $opcao['texto'], $nota, $index);
                        $stmt_opcao->execute();
                    }
                }
            }
            
            $_SESSION['mensagem'] = "Pergunta adicionada com sucesso!";
            $_SESSION['mensagem_tipo'] = 'sucesso';
        } else {
            $_SESSION['mensagem'] = "Erro ao adicionar pergunta.";
            $_SESSION['mensagem_tipo'] = 'erro';
        }
    }
    elseif ($action === 'salvar_configuracoes') {
        $nota_minima = $_POST['nota_minima'] ?? 0;
        
        $stmt = $conn->prepare("UPDATE questionarios SET nota_minima = ? WHERE id = ? AND tenant_id = ?");
        $stmt->bind_param("dii", $nota_minima, $questionario_id, $tenant_id);
        
        if ($stmt->execute()) {
            $_SESSION['mensagem'] = "Configurações salvas com sucesso!";
            $_SESSION['mensagem_tipo'] = 'sucesso';
        } else {
            $_SESSION['mensagem'] = "Erro ao salvar configurações.";
            $_SESSION['mensagem_tipo'] = 'erro';
        }
    }
    
    header("Location: editar_questionario.php?id=" . $questionario_id);
    exit;
}
?>

<!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>Editar Questionário - SON</title>
    <meta name="csrf-token" content="<?php echo $_SESSION['csrf_token']; ?>">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
    <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    <style>
        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }
        
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            margin: 0;
            padding: 0;
            background-color: #f8f9fa;
            color: #333;
            line-height: 1.6;
        }
        
        .header-fixed {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            padding: 15px 20px;
            z-index: 1000;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
            display: flex;
            justify-content: space-between;
            align-items: center;
            color: white;
        }
        
        .header-fixed img {
            height: 40px;
        }
        
        .user-info {
            display: flex;
            align-items: center;
            gap: 12px;
            background: rgba(255,255,255,0.1);
            padding: 8px 15px;
            border-radius: 25px;
            backdrop-filter: blur(10px);
        }
        
        .user-photo {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            border: 2px solid rgba(255,255,255,0.3);
        }
        
        .user-initial {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background: rgba(255,255,255,0.2);
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: bold;
            font-size: 1.2em;
            color: white;
            border: 2px solid rgba(255,255,255,0.3);
        }
        
        .user-details {
            text-align: left;
        }
        
        .user-name {
            font-weight: bold;
            font-size: 1em;
            color: white;
        }
        
        .user-email {
            font-size: 0.85em;
            color: rgba(255,255,255,0.8);
        }

        /* Menu Lateral */
        .sidebar {
            position: fixed;
            left: 0;
            top: 80px;
            height: calc(100vh - 80px);
            width: 60px;
            background: white;
            box-shadow: 2px 0 10px rgba(0,0,0,0.1);
            z-index: 999;
            transition: width 0.3s ease;
            overflow-x: hidden;
        }
        
        .sidebar:hover {
            width: 250px;
        }
        
        .sidebar-menu {
            list-style: none;
            padding: 0;
            margin: 0;
        }
        
        .sidebar-menu li {
            border-bottom: 1px solid #f0f0f0;
        }
        
        .sidebar-menu a {
            display: flex;
            align-items: center;
            padding: 18px 20px;
            text-decoration: none;
            color: #555;
            white-space: nowrap;
            transition: all 0.3s ease;
            border-left: 3px solid transparent;
        }
        
        .sidebar-menu a:hover {
            background: #f8f9fa;
            color: #667eea;
            border-left-color: #667eea;
        }
        
        .sidebar-menu i {
            width: 24px;
            height: 24px;
            margin-right: 20px;
            text-align: center;
            flex-shrink: 0;
            font-size: 1.1em;
        }
        
        .sidebar-menu .menu-text {
            opacity: 0;
            transition: opacity 0.3s ease;
        }
        
        .sidebar:hover .sidebar-menu .menu-text {
            opacity: 1;
        }

        /* Conteúdo Principal */
        .main-content {
            margin-left: 60px;
            margin-top: 80px;
            padding: 30px;
            min-height: calc(100vh - 80px);
            transition: margin-left 0.3s ease;
        }
        
        .sidebar:hover ~ .main-content {
            margin-left: 250px;
        }
        
        .container {
            max-width: 1200px;
            margin: 0 auto;
        }
        
        h1 {
            color: #2c3e50;
            margin-bottom: 25px;
            padding-bottom: 15px;
            border-bottom: 2px solid #eaeaea;
            display: flex;
            align-items: center;
            gap: 12px;
            font-size: 1.8em;
        }
        
        h1 i {
            color: #667eea;
        }
        
        h2 {
            color: #34495e;
            margin-bottom: 20px;
            font-size: 1.4em;
            display: flex;
            align-items: center;
            gap: 10px;
        }
        
        h2 i {
            color: #667eea;
        }
        
        .card {
            background: white;
            border-radius: 12px;
            padding: 25px;
            margin-bottom: 25px;
            box-shadow: 0 4px 15px rgba(0,0,0,0.08);
            border: 1px solid #eaeaea;
            transition: transform 0.2s ease, box-shadow 0.2s ease;
        }
        
        .card:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(0,0,0,0.12);
        }
        
        .configuracoes-card {
            border-left: 4px solid #667eea;
            background: linear-gradient(135deg, #f8f9ff 0%, #f0f2ff 100%);
        }
        
        .btn {
            padding: 10px 20px;
            border: none;
            border-radius: 8px;
            cursor: pointer;
            margin: 5px;
            display: inline-flex;
            align-items: center;
            gap: 8px;
            text-decoration: none;
            font-size: 14px;
            font-weight: 500;
            transition: all 0.3s ease;
        }
        
        .btn-primary {
            background: #667eea;
            color: white;
        }
        
        .btn-primary:hover {
            background: #5a6fd8;
            transform: translateY(-1px);
        }
        
        .btn-success {
            background: #27ae60;
            color: white;
        }
        
        .btn-success:hover {
            background: #219653;
            transform: translateY(-1px);
        }
        
        .btn-danger {
            background: #e74c3c;
            color: white;
        }
        
        .btn-danger:hover {
            background: #c0392b;
            transform: translateY(-1px);
        }
        
        .btn-default {
            background: #95a5a6;
            color: white;
        }
        
        .btn-default:hover {
            background: #7f8c8d;
            transform: translateY(-1px);
        }
        
        .btn-sm {
            padding: 6px 12px;
            font-size: 13px;
        }
        
        .pergunta-item {
            border: 1px solid #e0e0e0;
            border-radius: 8px;
            padding: 20px;
            margin-bottom: 20px;
            background: #fafafa;
            transition: all 0.3s ease;
            position: relative;
        }
        
        .pergunta-item.condicional {
            border-left: 4px solid #9b59b6;
            background: linear-gradient(135deg, #f9f0ff 0%, #f4e9ff 100%);
        }
        
        .pergunta-item:hover {
            background: #f5f5f5;
            border-color: #667eea;
        }
        
        .pergunta-header {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            margin-bottom: 15px;
        }
        
        .pergunta-texto {
            flex: 1;
            margin-right: 15px;
        }
        
        .pergunta-texto h4 {
            margin: 0 0 8px 0;
            color: #2c3e50;
            font-size: 1.1em;
            line-height: 1.4;
        }
        
        .tipo-badge {
            background: #667eea;
            color: white;
            padding: 4px 12px;
            border-radius: 20px;
            font-size: 12px;
            font-weight: 500;
            margin-left: 10px;
        }
        
        .condicional-badge {
            background: #9b59b6;
            color: white;
            padding: 4px 12px;
            border-radius: 20px;
            font-size: 12px;
            font-weight: 500;
            margin-left: 8px;
        }
        
        .obrigatorio-badge {
            color: #e74c3c;
            font-size: 12px;
            font-weight: 500;
            margin-left: 8px;
        }
        
        .info-condicional {
            background: #e8f4fd;
            border: 1px solid #b3dcf7;
            border-radius: 6px;
            padding: 10px 15px;
            margin-top: 10px;
            font-size: 0.9em;
            color: #2c3e50;
        }
        
        .info-condicional i {
            color: #3498db;
            margin-right: 5px;
        }
        
        .opcoes-container {
            margin-top: 15px;
            padding: 15px;
            background: white;
            border-radius: 6px;
            border: 1px solid #eaeaea;
        }
        
        .opcoes-container strong {
            display: block;
            margin-bottom: 10px;
            color: #34495e;
        }
        
        .opcao-item {
            display: flex;
            gap: 12px;
            margin-bottom: 10px;
            align-items: center;
            padding: 8px;
            border-radius: 4px;
            transition: background 0.2s ease;
        }
        
        .opcao-item:hover {
            background: #f8f9fa;
        }
        
        .opcao-item input[type="text"] {
            flex: 1;
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 6px;
            font-size: 14px;
            transition: border 0.3s ease;
        }
        
        .opcao-item input[type="text"]:focus {
            border-color: #667eea;
            outline: none;
            box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.1);
        }
        
        .opcao-item .nota-input {
            width: 100px;
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 6px;
            font-size: 14px;
        }
        
        .form-group {
            margin-bottom: 20px;
        }
        
        .form-group label {
            display: block;
            margin-bottom: 8px;
            font-weight: 600;
            color: #2c3e50;
        }
        
        .form-group input, 
        .form-group select, 
        .form-group textarea {
            width: 100%;
            padding: 12px 15px;
            border: 1px solid #ddd;
            border-radius: 8px;
            box-sizing: border-box;
            font-size: 15px;
            transition: all 0.3s ease;
        }
        
        .form-group input:focus, 
        .form-group select:focus, 
        .form-group textarea:focus {
            border-color: #667eea;
            outline: none;
            box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
        }
        
        .form-group textarea {
            min-height: 80px;
            resize: vertical;
            font-family: inherit;
        }
        
        /* Container condicional */
        .condicional-container {
            background: #f8f9fa;
            border: 1px solid #dee2e6;
            border-radius: 8px;
            padding: 20px;
            margin-top: 20px;
            display: none;
        }
        
        .condicional-container.active {
            display: block;
            animation: fadeIn 0.3s ease;
        }
        
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(-10px); }
            to { opacity: 1; transform: translateY(0); }
        }
        
        /* Mensagens */
        .mensagem-flutuante {
            position: fixed;
            top: 90px;
            right: 20px;
            padding: 15px 25px;
            border-radius: 8px;
            color: white;
            z-index: 2000;
            box-shadow: 0 4px 15px rgba(0,0,0,0.1);
            animation: slideIn 0.5s, fadeOut 0.5s 2.5s forwards;
            display: flex;
            align-items: center;
            gap: 10px;
        }
        
        .mensagem-sucesso {
            background: linear-gradient(135deg, #27ae60, #2ecc71);
        }
        
        .mensagem-erro {
            background: linear-gradient(135deg, #e74c3c, #c0392b);
        }
        
        @keyframes slideIn {
            from { transform: translateX(100%); opacity: 0; }
            to { transform: translateX(0); opacity: 1; }
        }
        
        @keyframes fadeOut {
            from { opacity: 1; }
            to { opacity: 0; }
        }
        
        /* Layout do formulário */
        .form-row {
            display: flex;
            gap: 20px;
            margin-bottom: 20px;
        }
        
        .form-row .form-group {
            flex: 1;
        }
        
        .checkbox-group {
            display: flex;
            align-items: center;
            gap: 10px;
            margin: 20px 0;
            padding: 10px;
            background: #f8f9fa;
            border-radius: 6px;
        }
        
        .checkbox-group input[type="checkbox"] {
            width: auto;
            transform: scale(1.2);
        }
        
        .checkbox-group label {
            margin: 0;
            font-weight: 500;
        }
        
        /* Responsividade */
        @media (max-width: 768px) {
            .header-fixed {
                padding: 12px 15px;
            }
            
            .user-info {
                padding: 6px 12px;
            }
            
            .user-details {
                display: none;
            }
            
            .main-content {
                margin-left: 0;
                padding: 20px 15px;
            }
            
            .sidebar {
                width: 0;
            }
            
            .sidebar:hover {
                width: 250px;
            }
            
            .container {
                padding: 0;
            }
            
            .form-row {
                flex-direction: column;
                gap: 15px;
            }
            
            .pergunta-header {
                flex-direction: column;
                gap: 15px;
            }
            
            .pergunta-texto {
                margin-right: 0;
            }
        }
        
        /* Utilitários */
        .text-center {
            text-align: center;
        }
        
        .mt-20 {
            margin-top: 20px;
        }
        
        .mb-20 {
            margin-bottom: 20px;
        }
        
        .required::after {
            content: " *";
            color: #e74c3c;
        }
    </style>
</head>
<body>
  <div class="header-fixed">
    <img src="tvitec.png" alt="Logo TVITEC">
    <div class="user-info">
      <?php if (!empty($_SESSION['foto_perfil'])): ?>
        <img src="<?php echo htmlspecialchars($_SESSION['foto_perfil']); ?>" class="user-photo" alt="Foto do usuário">
      <?php else: ?>
        <div class="user-initial">
          <?php echo strtoupper(substr($_SESSION['nome_usuario'] ?? 'U', 0, 1)); ?>
        </div>
      <?php endif; ?>
      <div class="user-details">
        <div class="user-name">
          <?php echo htmlspecialchars($_SESSION['nome_usuario'] ?? 'Usuário'); ?>
        </div>
        <div class="user-email">
          <?php echo htmlspecialchars($_SESSION['email_usuario'] ?? ''); ?>
        </div>
      </div>
    </div>
  </div>

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

  <div class="main-content">
    <div class="container">
        <?php if (isset($_SESSION['mensagem'])): ?>
            <div class="mensagem-flutuante <?php echo $_SESSION['mensagem_tipo'] === 'erro' ? 'mensagem-erro' : 'mensagem-sucesso'; ?>">
                <i class="fas <?php echo $_SESSION['mensagem_tipo'] === 'erro' ? 'fa-exclamation-triangle' : 'fa-check-circle'; ?>"></i>
                <?php echo htmlspecialchars($_SESSION['mensagem']); ?>
            </div>
            <?php 
            unset($_SESSION['mensagem']);
            unset($_SESSION['mensagem_tipo']);
            ?>
        <?php endif; ?>

        <h1><i class="fas fa-edit"></i> Editando: <?php echo htmlspecialchars($questionario['nome']); ?></h1>
        
        <!-- Configurações do Questionário -->
        <div class="card configuracoes-card">
            <h2><i class="fas fa-cog"></i> Configurações do Questionário</h2>
            <form method="POST">
                <input type="hidden" name="csrf_token" value="<?php echo $_SESSION['csrf_token']; ?>">
                <input type="hidden" name="action" value="salvar_configuracoes">
                
                <div class="form-row">
                    <div class="form-group">
                        <label class="required">Nota Mínima para Aprovação:</label>
                        <input type="number" name="nota_minima" value="<?php echo $questionario['nota_minima']; ?>" step="0.01" min="0" required>
                    </div>
                </div>
                
                <div style="text-align: right;">
                    <button type="submit" class="btn btn-success">
                        <i class="fas fa-save"></i> Salvar Configurações
                    </button>
                </div>
            </form>
        </div>
        
        <!-- Lista de Perguntas -->
        <div class="card">
            <h2><i class="fas fa-list-ol"></i> Perguntas do Questionário</h2>
            
            <?php if (empty($perguntas)): ?>
                <div class="text-center" style="padding: 40px; color: #7f8c8d;">
                    <i class="fas fa-inbox" style="font-size: 3em; margin-bottom: 15px;"></i>
                    <p>Nenhuma pergunta cadastrada. Adicione a primeira pergunta abaixo.</p>
                </div>
            <?php else: ?>
                <?php foreach ($perguntas as $index => $pergunta): ?>
                <div class="pergunta-item <?php echo $pergunta['pergunta_condicional_id'] ? 'condicional' : ''; ?>">
                    <div class="pergunta-header">
                        <div class="pergunta-texto">
                            <h4>
                                <?php echo ($index + 1); ?>. <?php echo htmlspecialchars($pergunta['pergunta']); ?>
                                <span class="tipo-badge">
                                    <?php 
                                    switch($pergunta['tipo']) {
                                        case 'aberta': echo 'Aberta'; break;
                                        case 'unica_escolha': echo 'Única Escolha'; break;
                                        case 'multipla_escolha': echo 'Múltipla Escolha'; break;
                                        case 'dropdown': echo 'Dropdown'; break;
                                        default: echo $pergunta['tipo'];
                                    }
                                    ?>
                                </span>
                                <?php if ($pergunta['obrigatoria']): ?>
                                    <span class="obrigatorio-badge">(Obrigatória)</span>
                                <?php endif; ?>
                                <?php if ($pergunta['pergunta_condicional_id']): ?>
                                    <span class="condicional-badge">Condicional</span>
                                <?php endif; ?>
                            </h4>
                            
                            <?php if ($pergunta['pergunta_condicional_id']): ?>
                            <div class="info-condicional">
                                <i class="fas fa-link"></i>
                                <strong>Esta pergunta será exibida apenas se:</strong><br>
                                Na pergunta "<?php echo htmlspecialchars($pergunta['pergunta_condicional_texto']); ?>" 
                                for selecionada a opção "<?php echo htmlspecialchars($pergunta['opcao_condicional_texto']); ?>"
                            </div>
                            <?php endif; ?>
                        </div>
                        <div>
                            <button class="btn btn-danger btn-sm" onclick="excluirPergunta(<?php echo $pergunta['id']; ?>)">
                                <i class="fas fa-trash"></i> Excluir
                            </button>
                        </div>
                    </div>
                    
                    <?php if (in_array($pergunta['tipo'], ['multipla_escolha', 'unica_escolha', 'dropdown']) && !empty($pergunta['opcoes'])): ?>
                    <div class="opcoes-container">
                        <strong>Opções de resposta:</strong>
                        <?php foreach ($pergunta['opcoes'] as $opcao): ?>
                        <div class="opcao-item">
                            <span style="color: #667eea;">
                                <?php 
                                if ($pergunta['tipo'] === 'multipla_escolha') echo '☐';
                                elseif ($pergunta['tipo'] === 'unica_escolha') echo '○';
                                else echo '▽';
                                ?>
                            </span>
                            <span style="flex: 1;"><?php echo htmlspecialchars($opcao['texto']); ?></span>
                            <span style="color: #7f8c8d; font-size: 0.9em;">
                                <i class="fas fa-star" style="color: #f39c12;"></i> Nota: <?php echo number_format($opcao['nota'], 2); ?>
                            </span>
                        </div>
                        <?php endforeach; ?>
                    </div>
                    <?php elseif ($pergunta['tipo'] === 'aberta'): ?>
                    <div class="opcoes-container">
                        <div style="display: flex; align-items: center; gap: 10px; color: #7f8c8d;">
                            <i class="fas fa-font"></i>
                            <em>Resposta: Texto livre</em>
                        </div>
                    </div>
                    <?php endif; ?>
                </div>
                <?php endforeach; ?>
            <?php endif; ?>
        </div>

        <!-- Formulário para adicionar pergunta -->
        <div class="card">
            <h2><i class="fas fa-plus-circle"></i> Adicionar Nova Pergunta</h2>
            <form method="POST" id="formPergunta">
                <input type="hidden" name="csrf_token" value="<?php echo $_SESSION['csrf_token']; ?>">
                <input type="hidden" name="action" value="adicionar_pergunta">
                
                <div class="form-group">
                    <label class="required">Pergunta:</label>
                    <textarea name="pergunta" rows="3" required placeholder="Digite a pergunta..."></textarea>
                </div>
                
                <div class="form-row">
                    <div class="form-group">
                        <label class="required">Tipo de Resposta:</label>
                        <select name="tipo" id="tipoPergunta" onchange="toggleOpcoes()" required>
                            <option value="unica_escolha">Única Escolha</option>
                            <option value="multipla_escolha">Múltipla Escolha</option>
                            <option value="dropdown">Dropdown</option>
                            <option value="aberta">Aberta (Texto Livre)</option>
                        </select>
                    </div>
                    
                    <div class="form-group">
                        <label class="required">Ordem de Exibição:</label>
                        <input type="number" name="ordem" value="0" min="0" required>
                    </div>
                </div>
                
                <div class="checkbox-group">
                    <input type="checkbox" name="obrigatoria" value="1" id="obrigatoria" checked>
                    <label for="obrigatoria">Pergunta Obrigatória</label>
                </div>
                
                <!-- Configuração Condicional -->
                <div class="checkbox-group">
                    <input type="checkbox" name="condicional" id="condicionalCheckbox" value="1" onchange="toggleCondicional()">
                    <label for="condicionalCheckbox">Pergunta Condicional (aparece apenas se certa resposta for selecionada)</label>
                </div>
                
                <div id="condicionalContainer" class="condicional-container">
                    <div class="form-row">
                        <div class="form-group">
                            <label class="required">Pergunta Anterior:</label>
                            <select name="pergunta_condicional_id" id="perguntaCondicionalSelect" onchange="carregarOpcoesCondicionais(this.value)" required>
                                <option value="">Selecione uma pergunta...</option>
                                <?php foreach ($perguntas_para_condicao as $pergunta_cond): ?>
                                    <option value="<?php echo $pergunta_cond['id']; ?>">
                                        <?php echo htmlspecialchars($pergunta_cond['pergunta']); ?>
                                    </option>
                                <?php endforeach; ?>
                            </select>
                        </div>
                        
                        <div class="form-group">
                            <label class="required">Resposta que Ativa esta Pergunta:</label>
                            <select name="opcao_condicional_id" id="opcaoCondicionalSelect" required disabled>
                                <option value="">Selecione primeiro uma pergunta...</option>
                            </select>
                        </div>
                    </div>
                    <div class="info-condicional">
                        <i class="fas fa-info-circle"></i>
                        <strong>Como funciona:</strong> Esta pergunta só será exibida para o usuário se na pergunta selecionada acima 
                        for escolhida a opção específica que você definir.
                    </div>
                </div>
                
                <!-- Container para opções -->
                <div id="opcoesContainer">
                    <label><strong>Opções de Resposta:</strong></label>
                    <div id="opcoesList">
                        <div class="opcao-item">
                            <input type="text" name="opcoes[0][texto]" placeholder="Texto da opção" required>
                            <input type="number" name="opcoes[0][nota]" class="nota-input" placeholder="Nota" step="0.01" min="0" required>
                            <button type="button" class="btn btn-danger btn-sm" onclick="removerOpcao(this)" disabled>
                                <i class="fas fa-times"></i>
                            </button>
                        </div>
                    </div>
                    <button type="button" class="btn btn-primary" onclick="adicionarOpcao()" style="margin-top: 15px;">
                        <i class="fas fa-plus"></i> Adicionar Opção
                    </button>
                </div>
                
                <div style="text-align: right; margin-top: 25px;">
                    <button type="submit" class="btn btn-success">
                        <i class="fas fa-plus"></i> Adicionar Pergunta
                    </button>
                </div>
            </form>
        </div>
        
        <div class="text-center mt-20">
            <a href="gerenciar_questionarios.php" class="btn btn-default">
                <i class="fas fa-arrow-left"></i> Voltar para Gerenciar Questionários
            </a>
        </div>
    </div>
  </div>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
<script>
    let opcaoCount = 1;
    
    function toggleOpcoes() {
        const tipo = document.getElementById('tipoPergunta').value;
        const container = document.getElementById('opcoesContainer');
        
        // Mostrar opções apenas para tipos que as utilizam
        if (tipo === 'unica_escolha' || tipo === 'multipla_escolha' || tipo === 'dropdown') {
            container.style.display = 'block';
            
            // Tornar campos obrigatórios
            const inputs = container.querySelectorAll('input[type="text"], input[type="number"]');
            inputs.forEach(input => {
                input.required = true;
            });
        } else {
            container.style.display = 'none';
            
            // Remover obrigatoriedade dos campos
            const inputs = container.querySelectorAll('input[type="text"], input[type="number"]');
            inputs.forEach(input => {
                input.required = false;
            });
        }
    }
    
    function toggleCondicional() {
        const condicionalCheckbox = document.getElementById('condicionalCheckbox');
        const condicionalContainer = document.getElementById('condicionalContainer');
        const perguntaSelect = document.getElementById('perguntaCondicionalSelect');
        const opcaoSelect = document.getElementById('opcaoCondicionalSelect');
        
        if (condicionalCheckbox.checked) {
            condicionalContainer.classList.add('active');
            perguntaSelect.required = true;
            opcaoSelect.required = true;
        } else {
            condicionalContainer.classList.remove('active');
            perguntaSelect.required = false;
            opcaoSelect.required = false;
            perguntaSelect.value = '';
            opcaoSelect.innerHTML = '<option value="">Selecione primeiro uma pergunta...</option>';
            opcaoSelect.disabled = true;
        }
    }
    
    function carregarOpcoesCondicionais(perguntaId) {
        const opcaoSelect = document.getElementById('opcaoCondicionalSelect');
        
        if (!perguntaId) {
            opcaoSelect.innerHTML = '<option value="">Selecione primeiro uma pergunta...</option>';
            opcaoSelect.disabled = true;
            return;
        }
        
        // Fazer requisição AJAX para buscar as opções da pergunta selecionada
        fetch(`buscar_opcoes_pergunta.php?pergunta_id=${perguntaId}`)
            .then(response => {
                if (!response.ok) {
                    throw new Error('Erro na requisição');
                }
                return response.json();
            })
            .then(data => {
                opcaoSelect.innerHTML = '<option value="">Selecione uma opção...</option>';
                data.forEach(opcao => {
                    opcaoSelect.innerHTML += `<option value="${opcao.id}">${opcao.texto}</option>`;
                });
                opcaoSelect.disabled = false;
            })
            .catch(error => {
                console.error('Erro ao carregar opções:', error);
                opcaoSelect.innerHTML = '<option value="">Erro ao carregar opções</option>';
                opcaoSelect.disabled = true;
            });
    }
    
    function adicionarOpcao() {
        const opcoesList = document.getElementById('opcoesList');
        const newOpcao = document.createElement('div');
        newOpcao.className = 'opcao-item';
        newOpcao.innerHTML = `
            <input type="text" name="opcoes[${opcaoCount}][texto]" placeholder="Texto da opção" required>
            <input type="number" name="opcoes[${opcaoCount}][nota]" class="nota-input" placeholder="Nota" step="0.01" min="0" required>
            <button type="button" class="btn btn-danger btn-sm" onclick="removerOpcao(this)">
                <i class="fas fa-times"></i>
            </button>
        `;
        opcoesList.appendChild(newOpcao);
        opcaoCount++;
        
        // Habilitar botão de remover da primeira opção se houver mais de uma
        if (opcoesList.children.length > 1) {
            opcoesList.children[0].querySelector('button').disabled = false;
        }
    }
    
    function removerOpcao(button) {
        const opcaoItem = button.closest('.opcao-item');
        opcaoItem.remove();
        
        // Desabilitar botão de remover da primeira opção se só restar uma
        const opcoesList = document.getElementById('opcoesList');
        if (opcoesList.children.length === 1) {
            opcoesList.children[0].querySelector('button').disabled = true;
        }
    }
    
    function excluirPergunta(perguntaId) {
        Swal.fire({
            title: 'Tem certeza?',
            text: "Esta ação não pode ser desfeita!",
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#e74c3c',
            cancelButtonColor: '#95a5a6',
            confirmButtonText: 'Sim, excluir!',
            cancelButtonText: 'Cancelar'
        }).then((result) => {
            if (result.isConfirmed) {
                // Implementar exclusão via AJAX
                fetch(`excluir_pergunta.php?id=${perguntaId}`, {
                    method: 'DELETE',
                    headers: {
                        'X-CSRF-Token': '<?php echo $_SESSION['csrf_token']; ?>'
                    }
                })
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        Swal.fire('Excluído!', 'A pergunta foi excluída com sucesso.', 'success')
                            .then(() => location.reload());
                    } else {
                        Swal.fire('Erro!', 'Não foi possível excluir a pergunta.', 'error');
                    }
                })
                .catch(error => {
                    Swal.fire('Erro!', 'Ocorreu um erro ao excluir a pergunta.', 'error');
                });
            }
        });
    }
    
    // Inicializar
    document.addEventListener('DOMContentLoaded', function() {
        toggleOpcoes();
        toggleCondicional();
        
        // Inicializar Select2
        $('#perguntaCondicionalSelect').select2({
            placeholder: "Selecione uma pergunta...",
            allowClear: true
        });
        
        $('#opcaoCondicionalSelect').select2({
            placeholder: "Selecione uma opção...",
            allowClear: true
        });
        
        // Auto-fechar mensagens após 3 segundos
        setTimeout(() => {
            const mensagens = document.querySelectorAll('.mensagem-flutuante');
            mensagens.forEach(msg => msg.style.display = 'none');
        }, 3000);
    });
</script>
</body>
</html>
<?php $conn->close(); ?>