```php
<?php
// landing_pages.php
// Ativar exibição de erros para debug
error_reporting(E_ALL);
ini_set('display_errors', 1);
ini_set('log_errors', 1);
ini_set('error_log', 'logs/php_errors.log');

// Criar pasta de logs se não existir
if (!file_exists('logs')) {
    mkdir('logs', 0755, true);
}

// Função para log detalhado
function debug_log($mensagem) {
    $log = '[' . date('Y-m-d H:i:s') . '] ' . $mensagem . PHP_EOL;
    file_put_contents('logs/landing_page_debug.log', $log, FILE_APPEND);
}

debug_log("=== INÍCIO DA REQUISIÇÃO ===");
debug_log("Método: " . $_SERVER['REQUEST_METHOD']);
debug_log("URI: " . $_SERVER['REQUEST_URI']);

session_start();

// Verificar login e tenant
if (!isset($_SESSION['logado'], $_SESSION['usuario_id'], $_SESSION['tenant_id']) || $_SESSION['logado'] !== true) {
    debug_log("Usuário não logado, redirecionando para login");
    header('Location: login.php');
    exit;
}

debug_log("Usuário ID: " . $_SESSION['usuario_id']);
debug_log("Tenant ID: " . $_SESSION['tenant_id']);
debug_log("Permissão: " . ($_SESSION['permissao'] ?? 'não definida'));

require_once 'conexao.php';

// ===== VERIFICAÇÃO DE FUNCIONALIDADE LANDING PAGE =====
// Verifica se o tenant tem permissão para usar Landing Pages
$tenant_id = $_SESSION['tenant_id'];
$stmt_check = $conn->prepare("SELECT func_landing_page FROM tenants WHERE id = ?");
$stmt_check->bind_param("i", $tenant_id);
$stmt_check->execute();
$result_check = $stmt_check->get_result();
$row_check = $result_check->fetch_assoc();

if (!$row_check || !$row_check['func_landing_page']) {
    debug_log("ACESSO NEGADO - Tenant não possui funcionalidade de Landing Pages");
    
    // Registrar tentativa de acesso negado
    $logFile = 'logs/acessos_negados.log';
    $mensagem = "[" . date('Y-m-d H:i:s') . "] Tentativa de acesso a landing_pages.php - Usuário: " . 
                $_SESSION['usuario_id'] . ", Tenant: " . $tenant_id . ", IP: " . $_SERVER['REMOTE_ADDR'] . "\n";
    file_put_contents($logFile, $mensagem, FILE_APPEND);
    
    // Exibir página de acesso negado
    header('HTTP/1.0 403 Forbidden');
    ?>
    <!DOCTYPE html>
    <html lang="pt-br">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Acesso Negado - SON</title>
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
        <style>
            body {
                font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
                background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
                margin: 0;
                padding: 0;
                display: flex;
                justify-content: center;
                align-items: center;
                min-height: 100vh;
                color: #333;
            }
            .container {
                background: white;
                border-radius: 10px;
                box-shadow: 0 15px 35px rgba(0,0,0,0.2);
                padding: 40px;
                max-width: 500px;
                width: 90%;
                text-align: center;
            }
            .icon {
                font-size: 80px;
                color: #e74c3c;
                margin-bottom: 20px;
            }
            h1 {
                color: #2c3e50;
                margin-bottom: 15px;
                font-size: 28px;
            }
            p {
                color: #666;
                line-height: 1.6;
                margin-bottom: 25px;
                font-size: 16px;
            }
            .btn {
                display: inline-block;
                background: #3498db;
                color: white;
                text-decoration: none;
                padding: 12px 30px;
                border-radius: 5px;
                font-weight: 600;
                transition: background 0.3s;
                margin: 5px;
            }
            .btn:hover {
                background: #2980b9;
            }
            .btn-secondary {
                background: #95a5a6;
            }
            .btn-secondary:hover {
                background: #7f8c8d;
            }
            .info-box {
                background: #f8f9fa;
                border-left: 4px solid #f39c12;
                padding: 15px;
                margin: 20px 0;
                text-align: left;
                border-radius: 4px;
            }
            .info-box i {
                color: #f39c12;
                margin-right: 8px;
            }
        </style>
    </head>
    <body>
        <div class="container">
            <div class="icon">
                <i class="fas fa-lock"></i>
            </div>
            <h1>Acesso Negado</h1>
            <p>Seu plano não inclui a funcionalidade de <strong>Landing Pages</strong>.</p>
            
            <div class="info-box">
                <i class="fas fa-info-circle"></i>
                <strong>Funcionalidade disponível apenas em planos superiores.</strong>
                <p style="margin: 10px 0 0 0; font-size: 14px;">
                    Para ter acesso a esta funcionalidade, entre em contato com o suporte para fazer um upgrade do seu plano.
                </p>
            </div>
            
            <div>
                <a href="index.php" class="btn"><i class="fas fa-home"></i> Dashboard</a>
                <a href="suporte.php" class="btn btn-secondary"><i class="fas fa-headset"></i> Suporte</a>
            </div>
            
            <p style="margin-top: 20px; font-size: 12px; color: #999;">
                Caso você acredite que isso é um erro, entre em contato com o administrador do sistema.
            </p>
        </div>
    </body>
    </html>
    <?php
    exit;
}
$stmt_check->close();
debug_log("ACESSO LIBERADO - Tenant possui funcionalidade de Landing Pages");
// ===== FIM DA VERIFICAÇÃO =====

// Verificar permissões do usuário atual
$permissao = $_SESSION['permissao'] ?? 'usuario';
$is_admin = ($permissao === 'admin' || $permissao === 'super_admin');

if (!$is_admin) {
    debug_log("Acesso negado - usuário não é admin");
    header('Location: acesso_negado.php');
    exit;
}

// Função para criar origem "Landing Page" se não existir
function garantirOrigemLandingPage($conn, $tenantId) {
    try {
        debug_log("Verificando origem 'Landing Page' para tenant $tenantId");
        
        // Verificar se a origem já existe
        $stmt = $conn->prepare("SELECT id FROM origens WHERE tenant_id = ? AND nome = 'Landing Page'");
        if (!$stmt) {
            throw new Exception("Erro na preparação da query: " . $conn->error);
        }
        
        $stmt->bind_param("i", $tenantId);
        $stmt->execute();
        $result = $stmt->get_result();
        
        if ($result->num_rows == 0) {
            debug_log("Origem 'Landing Page' não encontrada, criando...");
            
            // Criar origem "Landing Page"
            $stmt = $conn->prepare("INSERT INTO origens (tenant_id, nome, descricao, ativo) VALUES (?, 'Landing Page', 'Leads capturados através de landing pages', 1)");
            if (!$stmt) {
                throw new Exception("Erro na preparação da query de insert: " . $conn->error);
            }
            
            $stmt->bind_param("i", $tenantId);
            $stmt->execute();
            $origemId = $stmt->insert_id;
            
            debug_log("Origem 'Landing Page' criada com ID: $origemId");
            
            // Registrar log
            $logFile = 'logs/landing_pages_acoes.log';
            if (!file_exists('logs')) mkdir('logs', 0755, true);
            $mensagem = "[" . date('Y-m-d H:i:s') . "] Origem 'Landing Page' criada automaticamente para tenant $tenantId\n";
            file_put_contents($logFile, $mensagem, FILE_APPEND);
            
            return $origemId;
        } else {
            $row = $result->fetch_assoc();
            debug_log("Origem 'Landing Page' já existe com ID: " . $row['id']);
            return $row['id'];
        }
    } catch (Exception $e) {
        debug_log("ERRO ao garantir origem Landing Page: " . $e->getMessage());
        error_log("Erro ao garantir origem Landing Page: " . $e->getMessage());
        return null;
    }
}

// Função para gerar token único
function gerarTokenUnico($conn, $tenantId) {
    do {
        $token = bin2hex(random_bytes(16)); // 32 caracteres
        $stmt = $conn->prepare("SELECT id FROM landing_pages WHERE tenant_id = ? AND token = ?");
        $stmt->bind_param("is", $tenantId, $token);
        $stmt->execute();
        $result = $stmt->get_result();
        $exists = $result->num_rows > 0;
        $stmt->close();
    } while ($exists);
    
    debug_log("Token único gerado: $token");
    return $token;
}

// Funções de log
function registrarLog($acao, $detalhes = '') {
    $arquivoLog = 'logs/landing_pages_acoes.log';
    $dataHora = date('Y-m-d H:i:s');
    $usuario = $_SESSION['usuario_id'] ?? 'Sistema';
    $ip = $_SERVER['REMOTE_ADDR'] ?? 'IP desconhecido';
    $mensagem = "[$dataHora] [Usuário: $usuario] [IP: $ip] [Ação: $acao] $detalhes\n";

    if (!file_exists('logs')) mkdir('logs', 0755, true);
    file_put_contents($arquivoLog, $mensagem, FILE_APPEND);
}

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

// Verificar se a tabela landing_pages existe, se não, criar
$conn->query("
    CREATE TABLE IF NOT EXISTS landing_pages (
        id INT AUTO_INCREMENT PRIMARY KEY,
        tenant_id INT UNSIGNED NOT NULL,
        nome VARCHAR(255) NOT NULL,
        descricao TEXT,
        token VARCHAR(32) NOT NULL UNIQUE,
        funil_id INT NOT NULL,
        etapa_funil_id INT NOT NULL,
        origem_id INT,
        titulo VARCHAR(255),
        subtitulo TEXT,
        cor_primaria VARCHAR(20) DEFAULT '#4cafaf',
        cor_botao VARCHAR(20) DEFAULT '#4cafaf',
        logo_path VARCHAR(500),
        imagem_fundo_path VARCHAR(500),
        campos_json JSON NOT NULL,
        html_customizado TEXT,
        css_customizado TEXT,
        ativo TINYINT(1) DEFAULT 1,
        redirect_url VARCHAR(500),
        agradecimento_mensagem TEXT,
        created_at TIMESTAMP NOT NULL DEFAULT CURRENT_TIMESTAMP,
        updated_at TIMESTAMP NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,
        criado_por INT,
        INDEX idx_tenant (tenant_id),
        INDEX idx_token (token),
        INDEX idx_ativo (ativo)
    ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_0900_ai_ci
");

if ($conn->error) {
    debug_log("Erro ao criar tabela landing_pages: " . $conn->error);
}

// Verificar se a tabela landing_page_submissoes existe
$conn->query("
    CREATE TABLE IF NOT EXISTS landing_page_submissoes (
        id INT AUTO_INCREMENT PRIMARY KEY,
        landing_page_id INT NOT NULL,
        tenant_id INT UNSIGNED NOT NULL,
        cliente_id BIGINT,
        dados_submissao JSON NOT NULL,
        ip VARCHAR(45),
        user_agent TEXT,
        created_at TIMESTAMP NOT NULL DEFAULT CURRENT_TIMESTAMP,
        INDEX idx_landing_page (landing_page_id),
        INDEX idx_tenant (tenant_id),
        INDEX idx_cliente (cliente_id),
        INDEX idx_created (created_at)
    ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_0900_ai_ci
");

if ($conn->error) {
    debug_log("Erro ao criar tabela landing_page_submissoes: " . $conn->error);
}

// Variáveis para o formulário
$landingPage = [
    'id' => '',
    'nome' => '',
    'descricao' => '',
    'funil_id' => '',
    'etapa_funil_id' => '',
    'titulo' => '',
    'subtitulo' => '',
    'cor_primaria' => '#4cafaf',
    'cor_botao' => '#4cafaf',
    'logo_path' => '',
    'imagem_fundo_path' => '',
    'campos_json' => json_encode([
        ['nome' => 'nome', 'rotulo' => 'Nome Completo', 'tipo' => 'text', 'obrigatorio' => true, 'ordem' => 1],
        ['nome' => 'email', 'rotulo' => 'E-mail', 'tipo' => 'email', 'obrigatorio' => true, 'ordem' => 2],
        ['nome' => 'telefone', 'rotulo' => 'Telefone', 'tipo' => 'tel', 'obrigatorio' => false, 'ordem' => 3]
    ]),
    'html_customizado' => '',
    'css_customizado' => '',
    'ativo' => 1,
    'redirect_url' => '',
    'agradecimento_mensagem' => 'Obrigado pelo seu contato! Em breve retornaremos.'
];
$editando = false;

// Buscar funis disponíveis ANTES de qualquer processamento
$tenantId = (int)$_SESSION['tenant_id'];
$funisStmt = $conn->prepare("SELECT id, nome FROM funis WHERE tenant_id = ? AND ativo = 1 ORDER BY nome");
$funisStmt->bind_param("i", $tenantId);
$funisStmt->execute();
$funis = $funisStmt->get_result();

debug_log("Total de funis encontrados: " . $funis->num_rows);

// Processamento do formulário
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    try {
        debug_log("Iniciando processamento POST de landing page");
        debug_log("POST data: " . json_encode($_POST));
        
        if (!isset($_POST['csrf_token']) || $_POST['csrf_token'] !== $_SESSION['csrf_token']) {
            debug_log("CSRF token inválido - Recebido: " . ($_POST['csrf_token'] ?? 'não enviado') . ", Esperado: " . $_SESSION['csrf_token']);
            throw new Exception("Token de segurança inválido");
        }

        $tenantId = (int) $_SESSION['tenant_id'];
        $userId = (int) $_SESSION['usuario_id'];
        
        $nome = trim($_POST['nome'] ?? '');
        $descricao = trim($_POST['descricao'] ?? '');
        $funilId = (int) ($_POST['funil_id'] ?? 0);
        $etapaFunilId = (int) ($_POST['etapa_funil_id'] ?? 0);
        $titulo = trim($_POST['titulo'] ?? '');
        $subtitulo = trim($_POST['subtitulo'] ?? '');
        $corPrimaria = trim($_POST['cor_primaria'] ?? '#4cafaf');
        $corBotao = trim($_POST['cor_botao'] ?? '#4cafaf');
        $logoPath = trim($_POST['logo_path'] ?? '');
        $imagemFundoPath = trim($_POST['imagem_fundo_path'] ?? '');
        $camposJson = $_POST['campos_json'] ?? '';
        $htmlCustomizado = trim($_POST['html_customizado'] ?? '');
        $cssCustomizado = trim($_POST['css_customizado'] ?? '');
        $ativo = isset($_POST['ativo']) ? 1 : 0;
        $redirectUrl = trim($_POST['redirect_url'] ?? '');
        $agradecimentoMensagem = trim($_POST['agradecimento_mensagem'] ?? '');
        $landingPageId = $_POST['landing_page_id'] ?? '';

        debug_log("Dados recebidos - Nome: $nome, Funil: $funilId, Etapa: $etapaFunilId");

        // Validar campos obrigatórios
        if (empty($nome)) {
            throw new Exception("Nome é obrigatório");
        }
        if ($funilId === 0) {
            throw new Exception("Funil é obrigatório");
        }
        if ($etapaFunilId === 0) {
            throw new Exception("Etapa é obrigatória");
        }

        // Validar JSON dos campos
        if (!empty($camposJson)) {
            $camposDecoded = json_decode($camposJson, true);
            if (json_last_error() !== JSON_ERROR_NONE) {
                throw new Exception("JSON dos campos é inválido: " . json_last_error_msg());
            }
            if (empty($camposDecoded)) {
                throw new Exception("Pelo menos um campo deve ser configurado");
            }
        } else {
            // Usar campos padrão
            $camposJson = json_encode([
                ['nome' => 'nome', 'rotulo' => 'Nome Completo', 'tipo' => 'text', 'obrigatorio' => true, 'ordem' => 1],
                ['nome' => 'email', 'rotulo' => 'E-mail', 'tipo' => 'email', 'obrigatorio' => true, 'ordem' => 2],
                ['nome' => 'telefone', 'rotulo' => 'Telefone', 'tipo' => 'tel', 'obrigatorio' => false, 'ordem' => 3]
            ]);
        }

        // Garantir que a origem "Landing Page" existe
        $origemId = garantirOrigemLandingPage($conn, $tenantId);

        if ($landingPageId && is_numeric($landingPageId) && $landingPageId > 0) {
            // Edição de landing page existente
            debug_log("Editando landing page ID: $landingPageId");
            
            $stmt = $conn->prepare("
                UPDATE landing_pages SET 
                    nome = ?, 
                    descricao = ?, 
                    funil_id = ?, 
                    etapa_funil_id = ?, 
                    origem_id = ?,
                    titulo = ?, 
                    subtitulo = ?, 
                    cor_primaria = ?, 
                    cor_botao = ?, 
                    logo_path = ?, 
                    imagem_fundo_path = ?, 
                    campos_json = ?, 
                    html_customizado = ?, 
                    css_customizado = ?, 
                    ativo = ?, 
                    redirect_url = ?, 
                    agradecimento_mensagem = ?
                WHERE id = ? AND tenant_id = ?
            ");
            
            if (!$stmt) {
                throw new Exception("Erro na preparação da query de update: " . $conn->error);
            }
            
            $stmt->bind_param(
                "ssiiisssssssssissii",
                $nome,
                $descricao,
                $funilId,
                $etapaFunilId,
                $origemId,
                $titulo,
                $subtitulo,
                $corPrimaria,
                $corBotao,
                $logoPath,
                $imagemFundoPath,
                $camposJson,
                $htmlCustomizado,
                $cssCustomizado,
                $ativo,
                $redirectUrl,
                $agradecimentoMensagem,
                $landingPageId,
                $tenantId
            );
            
            if (!$stmt->execute()) {
                throw new Exception("Erro ao executar update: " . $stmt->error);
            }
            
            debug_log("Landing page atualizada com sucesso");
            registrarLog('Edição de Landing Page', "Landing Page ID: $landingPageId, Nome: $nome");
            $_SESSION['mensagem'] = 'Landing Page atualizada com sucesso!';
            $_SESSION['mensagem_tipo'] = 'sucesso';
            
        } else {
            // Nova landing page - gerar token único
            debug_log("Criando nova landing page");
            $token = gerarTokenUnico($conn, $tenantId);
            
            $stmt = $conn->prepare("
                INSERT INTO landing_pages (
                    tenant_id, nome, descricao, token, funil_id, etapa_funil_id, origem_id,
                    titulo, subtitulo, cor_primaria, cor_botao, logo_path, imagem_fundo_path,
                    campos_json, html_customizado, css_customizado, ativo, redirect_url, 
                    agradecimento_mensagem, criado_por
                ) VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?)
            ");
            
            if (!$stmt) {
                throw new Exception("Erro na preparação da query de insert: " . $conn->error);
            }
            
            $stmt->bind_param(
                "isssiiisssssssssissi",
                $tenantId,
                $nome,
                $descricao,
                $token,
                $funilId,
                $etapaFunilId,
                $origemId,
                $titulo,
                $subtitulo,
                $corPrimaria,
                $corBotao,
                $logoPath,
                $imagemFundoPath,
                $camposJson,
                $htmlCustomizado,
                $cssCustomizado,
                $ativo,
                $redirectUrl,
                $agradecimentoMensagem,
                $userId
            );
            
            if (!$stmt->execute()) {
                throw new Exception("Erro ao executar insert: " . $stmt->error);
            }
            
            $novoId = $stmt->insert_id;
            debug_log("Nova landing page criada com ID: $novoId, Token: $token");
            registrarLog('Criação de Landing Page', "Landing Page ID: $novoId, Nome: $nome, Token: $token");
            $_SESSION['mensagem'] = 'Landing Page criada com sucesso!';
            $_SESSION['mensagem_tipo'] = 'sucesso';
        }

        debug_log("Redirecionando para lista_lp.php");
        header("Location: lista_lp.php");
        exit;

    } catch (Exception $e) {
        debug_log("ERRO no processamento: " . $e->getMessage());
        error_log("Erro em landing_pages.php: " . $e->getMessage());
        $_SESSION['mensagem'] = 'Erro: ' . $e->getMessage();
        $_SESSION['mensagem_tipo'] = 'erro';
        
        // Recarregar dados para o formulário
        $landingPage = [
            'id' => $_POST['landing_page_id'] ?? '',
            'nome' => $_POST['nome'] ?? '',
            'descricao' => $_POST['descricao'] ?? '',
            'funil_id' => $_POST['funil_id'] ?? '',
            'etapa_funil_id' => $_POST['etapa_funil_id'] ?? '',
            'titulo' => $_POST['titulo'] ?? '',
            'subtitulo' => $_POST['subtitulo'] ?? '',
            'cor_primaria' => $_POST['cor_primaria'] ?? '#4cafaf',
            'cor_botao' => $_POST['cor_botao'] ?? '#4cafaf',
            'logo_path' => $_POST['logo_path'] ?? '',
            'imagem_fundo_path' => $_POST['imagem_fundo_path'] ?? '',
            'campos_json' => $_POST['campos_json'] ?? '',
            'html_customizado' => $_POST['html_customizado'] ?? '',
            'css_customizado' => $_POST['css_customizado'] ?? '',
            'ativo' => isset($_POST['ativo']) ? 1 : 0,
            'redirect_url' => $_POST['redirect_url'] ?? '',
            'agradecimento_mensagem' => $_POST['agradecimento_mensagem'] ?? ''
        ];
        $editando = (bool)($landingPage['id']);
    }
}

// Carregar landing page para edição
if (isset($_GET['editar']) && is_numeric($_GET['editar'])) {
    $landingPageId = (int)$_GET['editar'];
    $tenantId = (int)$_SESSION['tenant_id'];
    
    debug_log("Carregando landing page para edição: ID $landingPageId");
    
    $stmt = $conn->prepare("SELECT * FROM landing_pages WHERE id = ? AND tenant_id = ?");
    $stmt->bind_param("ii", $landingPageId, $tenantId);
    $stmt->execute();
    $result = $stmt->get_result();
    
    if ($result->num_rows > 0) {
        $landingPage = $result->fetch_assoc();
        $editando = true;
        debug_log("Landing page carregada: " . $landingPage['nome']);
    } else {
        debug_log("Landing page não encontrada");
        $_SESSION['mensagem'] = 'Landing Page não encontrada!';
        $_SESSION['mensagem_tipo'] = 'erro';
        header("Location: lista_lp.php");
        exit;
    }
}

// Buscar etapas do funil (se estiver editando e tiver funil selecionado)
$etapas = null;
if ($editando && !empty($landingPage['funil_id'])) {
    $etapasStmt = $conn->prepare("SELECT id, nome FROM etapas_funis WHERE funil_id = ? ORDER BY ordem");
    $etapasStmt->bind_param("i", $landingPage['funil_id']);
    $etapasStmt->execute();
    $etapas = $etapasStmt->get_result();
    debug_log("Total de etapas encontradas para o funil {$landingPage['funil_id']}: " . ($etapas ? $etapas->num_rows : 0));
}

// URL base do sistema
$protocolo = isset($_SERVER['HTTPS']) && $_SERVER['HTTPS'] === 'on' ? 'https://' : 'http://';
$baseUrl = $protocolo . $_SERVER['HTTP_HOST'] . '/';

debug_log("=== FIM DA PREPARAÇÃO, RENDERIZANDO HTML ===\n");
?>
```
<!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><?php echo $editando ? 'Editar' : 'Criar'; ?> Landing Page - SON</title>
    <meta name="csrf-token" content="<?php echo $_SESSION['csrf_token']; ?>">
    
    <!-- CSS -->
    <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" />
    
    <!-- jQuery PRIMEIRO -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    
    <!-- Depois Select2 -->
    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
    
    <!-- Depois SweetAlert2 -->
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    
    <!-- CodeMirror para edição de HTML/CSS -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.2/codemirror.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.2/theme/monokai.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.2/codemirror.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.2/mode/xml/xml.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.2/mode/css/css.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.2/mode/htmlmixed/htmlmixed.min.js"></script>
    
    <style>
        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

        body {
            font-family: 'Segoe UI', Arial, sans-serif;
            background-color: #f5f5f5;
            min-height: 100vh;
        }
        
        .header-fixed {
            position: fixed;
            top: 0;
            left: 60px;
            right: 0;
            background-color: #f5f5f5;
            padding: 15px 20px;
            z-index: 900;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
            display: flex;
            justify-content: space-between;
            align-items: center;
            height: 70px;
        }
        
        .header-fixed img {
            height: 40px;
        }
        
        .sidebar {
            position: fixed;
            left: 0;
            top: 0;
            height: 100vh;
            width: 60px;
            background: white;
            box-shadow: 2px 0 5px rgba(0,0,0,0.1);
            z-index: 1000;
            transition: width 0.3s ease;
            overflow-x: hidden;
        }
        
        .sidebar:hover {
            width: 250px;
        }
        
        .sidebar ul {
            list-style: none;
            padding: 70px 0 20px 0;
            margin: 0;
        }
        
        .sidebar a {
            display: flex;
            align-items: center;
            padding: 15px 20px;
            text-decoration: none;
            color: #333;
            white-space: nowrap;
        }
        
        .sidebar a:hover {
            background-color: #f0f0f0;
        }
        
        .sidebar i {
            margin-right: 15px;
            min-width: 20px;
            text-align: center;
            font-size: 18px;
        }
        
        .sidebar span {
            display: none;
        }
        
        .sidebar:hover span {
            display: inline;
        }
        
        .main-content {
            margin-left: 60px;
            margin-top: 70px;
            padding: 20px;
        }
        
        .container {
            max-width: 1400px;
            margin: 0 auto;
            background: white;
            padding: 25px;
            border-radius: 8px;
            box-shadow: 0 0 15px rgba(0, 0, 0, 0.05);
        }
        
        h1 {
            color: #333;
            border-bottom: 1px solid #eee;
            padding-bottom: 10px;
            margin-bottom: 20px;
        }
        
        .tabs {
            display: flex;
            border-bottom: 1px solid #ddd;
            margin-bottom: 20px;
            flex-wrap: wrap;
        }
        
        .tab {
            padding: 10px 20px;
            cursor: pointer;
            background: #f8f9fa;
            border: 1px solid #ddd;
            border-bottom: none;
            margin-right: 5px;
            margin-bottom: 5px;
            border-radius: 4px 4px 0 0;
        }
        
        .tab.active {
            background: white;
            border-bottom: 2px solid #4cafaf;
            font-weight: bold;
        }
        
        .tab-content {
            display: none;
        }
        
        .tab-content.active {
            display: block;
        }
        
        .form-row {
            display: flex;
            gap: 20px;
            margin-bottom: 15px;
            flex-wrap: wrap;
        }
        
        .form-group {
            flex: 1;
            min-width: 250px;
            margin-bottom: 20px;
        }
        
        .form-group label {
            display: block;
            margin-bottom: 5px;
            font-weight: bold;
            color: #333;
        }
        
        .form-group input, 
        .form-group select,
        .form-group textarea {
            width: 100%;
            padding: 8px 12px;
            border: 1px solid #ddd;
            border-radius: 4px;
            font-size: 14px;
        }
        
        .form-group textarea {
            min-height: 100px;
            resize: vertical;
        }
        
        .color-input-group {
            display: flex;
            align-items: center;
            gap: 10px;
        }
        
        .color-input-group input[type="color"] {
            width: 60px;
            height: 40px;
            padding: 2px;
        }
        
        .color-input-group input[type="text"] {
            flex: 1;
        }
        
        .campos-container {
            border: 1px solid #ddd;
            border-radius: 4px;
            padding: 15px;
            background: #f9f9f9;
            margin-bottom: 20px;
        }
        
        .campo-item {
            background: white;
            border: 1px solid #ddd;
            border-radius: 4px;
            padding: 15px;
            margin-bottom: 10px;
            display: grid;
            grid-template-columns: 2fr 1fr 1fr 80px 40px;
            gap: 10px;
            align-items: center;
        }
        
        @media (max-width: 768px) {
            .campo-item {
                grid-template-columns: 1fr;
            }
        }
        
        .campo-item .campo-nome {
            font-weight: bold;
        }
        
        .campo-item select,
        .campo-item input[type="checkbox"] {
            margin: 0;
        }
        
        .btn-remover-campo {
            background: #e74c3c;
            color: white;
            border: none;
            width: 32px;
            height: 32px;
            border-radius: 4px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .btn-remover-campo:hover {
            background: #c0392b;
        }
        
        .btn-adicionar-campo {
            background: #3498db;
            color: white;
            border: none;
            padding: 8px 15px;
            border-radius: 4px;
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            gap: 5px;
            margin-top: 10px;
        }
        
        .btn-adicionar-campo:hover {
            background: #2980b9;
        }
        
        .preview-container {
            border: 1px solid #ddd;
            border-radius: 4px;
            padding: 20px;
            background: #f5f5f5;
            margin-top: 20px;
        }
        
        .preview-landing {
            max-width: 600px;
            margin: 0 auto;
            background: white;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
            overflow: hidden;
        }
        
        .checkbox-group {
            display: flex;
            align-items: center;
            gap: 10px;
            margin: 20px 0;
        }
        
        .checkbox-group input[type="checkbox"] {
            width: auto;
            margin: 0;
        }
        
        .button-group {
            display: flex;
            gap: 10px;
            flex-wrap: wrap;
            margin: 20px 0;
        }
        
        button[type="button"], 
        button[type="submit"],
        .btn-primary {
            background-color: #4cafaf;
            color: white;
            padding: 10px 20px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 16px;
        }
        
        button[type="button"]:hover, 
        button[type="submit"]:hover,
        .btn-primary:hover {
            background-color: #3d9b9b;
        }
        
        .btn-secondary {
            background-color: #6c757d;
            color: white;
            padding: 10px 20px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 16px;
            text-decoration: none;
            display: inline-block;
        }
        
        .btn-secondary:hover {
            background-color: #5a6268;
        }
        
        .btn-info {
            background-color: #17a2b8;
            color: white;
            padding: 8px 15px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 14px;
            text-decoration: none;
            display: inline-block;
        }
        
        .btn-info:hover {
            background-color: #138496;
        }
        
        .required:after {
            content: " *";
            color: red;
        }
        
        .mensagem-flutuante {
            position: fixed;
            top: 90px;
            right: 20px;
            padding: 15px 25px;
            border-radius: 4px;
            color: white;
            z-index: 2000;
            animation: slideIn 0.3s ease;
        }
        
        @keyframes slideIn {
            from { transform: translateX(100%); opacity: 0; }
            to { transform: translateX(0); opacity: 1; }
        }
        
        .mensagem-sucesso {
            background-color: #2ecc71;
        }
        
        .mensagem-erro {
            background-color: #e74c3c;
        }
        
        <?php if ($editando && !empty($landingPage['token'])): ?>
        .info-box {
            background: #e7f3ff;
            border-left: 4px solid #2196F3;
            padding: 15px;
            margin-bottom: 20px;
            border-radius: 4px;
        }
        
        .info-box i {
            color: #2196F3;
            margin-right: 10px;
        }
        
        .btn-copiar {
            background-color: #f39c12;
            color: white;
            border: none;
            padding: 5px 10px;
            border-radius: 3px;
            cursor: pointer;
            font-size: 12px;
            display: inline-flex;
            align-items: center;
            gap: 5px;
        }
        
        .btn-visualizar {
            background-color: #2ecc71;
            color: white;
            border: none;
            padding: 5px 10px;
            border-radius: 3px;
            cursor: pointer;
            font-size: 12px;
            text-decoration: none;
            display: inline-flex;
            align-items: center;
            gap: 5px;
        }
        <?php endif; ?>
        
        .lista-actions {
            margin-bottom: 20px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .btn-ver-lista {
            background-color: #3498db;
            color: white;
            padding: 10px 20px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 16px;
            text-decoration: none;
            display: inline-flex;
            align-items: center;
            gap: 5px;
        }
        
        .btn-ver-lista:hover {
            background-color: #2980b9;
        }
    </style>
</head>
<body>
    <div class="header-fixed">
        <img src="tvitec.png" alt="Logo TVITEC" style="height:40px;">
        <div class="user-info" style="display:flex; align-items:center; gap:10px;">
            <div class="user-initial" style="width:40px; height:40px; border-radius:50%; background:#4cafaf; display:flex; align-items:center; justify-content:center; color:white; font-weight:bold;">
                <?php echo strtoupper(substr($_SESSION['nome_usuario'] ?? 'U', 0, 1)); ?>
            </div>
            <div>
                <div style="font-weight: bold;"><?php echo htmlspecialchars($_SESSION['nome_usuario'] ?? 'Usuário'); ?></div>
                <div style="font-size: 0.9em;"><?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'; ?>">
                    <?php echo htmlspecialchars($_SESSION['mensagem']); ?>
                </div>
                <?php 
                unset($_SESSION['mensagem']);
                unset($_SESSION['mensagem_tipo']);
                ?>
            <?php endif; ?>

            <div class="lista-actions">
                <h1>
                    <i class="fas fa-rocket"></i> 
                    <?php echo $editando ? 'Editar Landing Page' : 'Criar Nova Landing Page'; ?>
                </h1>
                <a href="lista_lp.php" class="btn-ver-lista">
                    <i class="fas fa-list"></i> Ver Lista de Landing Pages
                </a>
            </div>
            
            <div class="info-box">
                <i class="fas fa-info-circle"></i>
                <strong>Como funciona:</strong> Crie uma landing page para capturar leads. Ao preencher o formulário, o lead será automaticamente cadastrado no funil e etapa selecionados, com origem "Landing Page". Um link público será gerado para você compartilhar.
            </div>
            
            <form method="POST" id="landingPageForm">
                <input type="hidden" name="csrf_token" value="<?php echo $_SESSION['csrf_token']; ?>">
                <input type="hidden" name="landing_page_id" value="<?php echo $landingPage['id']; ?>">
                <input type="hidden" name="campos_json" id="camposJson" value="<?php echo htmlspecialchars($landingPage['campos_json']); ?>">
                
                <div class="tabs">
                    <div class="tab active" onclick="mudarTab('basico')">Básico</div>
                    <div class="tab" onclick="mudarTab('design')">Design</div>
                    <div class="tab" onclick="mudarTab('campos')">Campos do Formulário</div>
                    <div class="tab" onclick="mudarTab('avancado')">Avançado</div>
                </div>
                
                <!-- Aba Básico -->
                <div id="tab-basico" class="tab-content active">
                    <div class="form-row">
                        <div class="form-group">
                            <label for="nome" class="required">Nome da Landing Page</label>
                            <input type="text" name="nome" id="nome" required value="<?php echo htmlspecialchars($landingPage['nome']); ?>" placeholder="Ex: Captação de Leads - Produto X">
                        </div>
                        
                        <div class="form-group">
                            <label for="funil_id" class="required">Funil</label>
                            <select name="funil_id" id="funil_id" required onchange="carregarEtapas()">
                                <option value="">Selecione um funil</option>
                                <?php 
                                if ($funis && $funis->num_rows > 0) {
                                    $funis->data_seek(0);
                                    while ($funil = $funis->fetch_assoc()): 
                                ?>
                                    <option value="<?php echo $funil['id']; ?>" <?php echo $landingPage['funil_id'] == $funil['id'] ? 'selected' : ''; ?>>
                                        <?php echo htmlspecialchars($funil['nome']); ?>
                                    </option>
                                <?php 
                                    endwhile;
                                } else {
                                    echo '<option value="" disabled>Nenhum funil ativo encontrado</option>';
                                }
                                ?>
                            </select>
                        </div>
                    </div>
                    
                    <div class="form-row">
                        <div class="form-group">
                            <label for="etapa_funil_id" class="required">Etapa do Funil</label>
                            <select name="etapa_funil_id" id="etapa_funil_id" required>
                                <option value="">Primeiro selecione o funil</option>
                                <?php if (!empty($etapas) && $etapas->num_rows > 0): ?>
                                    <?php 
                                    $etapas->data_seek(0);
                                    while ($etapa = $etapas->fetch_assoc()): 
                                    ?>
                                        <option value="<?php echo $etapa['id']; ?>" <?php echo $landingPage['etapa_funil_id'] == $etapa['id'] ? 'selected' : ''; ?>>
                                            <?php echo htmlspecialchars($etapa['nome']); ?>
                                        </option>
                                    <?php endwhile; ?>
                                <?php endif; ?>
                            </select>
                        </div>
                        
                        <div class="form-group">
                            <label for="descricao">Descrição (opcional)</label>
                            <textarea name="descricao" id="descricao" rows="2"><?php echo htmlspecialchars($landingPage['descricao']); ?></textarea>
                        </div>
                    </div>
                    
                    <div class="form-row">
                        <div class="form-group">
                            <label for="titulo">Título da Página</label>
                            <input type="text" name="titulo" id="titulo" value="<?php echo htmlspecialchars($landingPage['titulo']); ?>" placeholder="Ex: Receba nosso conteúdo exclusivo">
                        </div>
                        
                        <div class="form-group">
                            <label for="subtitulo">Subtítulo</label>
                            <input type="text" name="subtitulo" id="subtitulo" value="<?php echo htmlspecialchars($landingPage['subtitulo']); ?>" placeholder="Ex: Preencha o formulário e receba dicas valiosas">
                        </div>
                    </div>
                </div>
                
                <!-- Aba Design -->
                <div id="tab-design" class="tab-content">
                    <div class="form-row">
                        <div class="form-group">
                            <label for="cor_primaria">Cor Primária</label>
                            <div class="color-input-group">
                                <input type="color" name="cor_primaria" id="cor_primaria" value="<?php echo $landingPage['cor_primaria']; ?>">
                                <input type="text" value="<?php echo $landingPage['cor_primaria']; ?>" onchange="document.getElementById('cor_primaria').value = this.value">
                            </div>
                        </div>
                        
                        <div class="form-group">
                            <label for="cor_botao">Cor do Botão</label>
                            <div class="color-input-group">
                                <input type="color" name="cor_botao" id="cor_botao" value="<?php echo $landingPage['cor_botao']; ?>">
                                <input type="text" value="<?php echo $landingPage['cor_botao']; ?>" onchange="document.getElementById('cor_botao').value = this.value">
                            </div>
                        </div>
                    </div>
                    
                    <div class="form-row">
                        <div class="form-group">
                            <label for="logo_path">URL do Logo</label>
                            <input type="url" name="logo_path" id="logo_path" value="<?php echo htmlspecialchars($landingPage['logo_path']); ?>" placeholder="https://exemplo.com/logo.png">
                            <small style="color: #666;">Deixe em branco para não usar logo</small>
                        </div>
                        
                        <div class="form-group">
                            <label for="imagem_fundo_path">URL da Imagem de Fundo</label>
                            <input type="url" name="imagem_fundo_path" id="imagem_fundo_path" value="<?php echo htmlspecialchars($landingPage['imagem_fundo_path']); ?>" placeholder="https://exemplo.com/fundo.jpg">
                            <small style="color: #666;">Deixe em branco para fundo sólido</small>
                        </div>
                    </div>
                    
                    <div class="form-group">
                        <label for="css_customizado">CSS Personalizado (opcional)</label>
                        <textarea name="css_customizado" id="css_customizado" rows="6"><?php echo htmlspecialchars($landingPage['css_customizado']); ?></textarea>
                        <small style="color: #666;">Estilos CSS que serão aplicados apenas nesta landing page</small>
                    </div>
                </div>
                
                <!-- Aba Campos do Formulário -->
                <div id="tab-campos" class="tab-content">
                    <p>Configure os campos que serão exibidos no formulário de captura:</p>
                    
                    <div class="campos-container">
                        <div id="campos-lista"></div>
                        
                        <button type="button" class="btn-adicionar-campo" onclick="adicionarCampo()">
                            <i class="fas fa-plus"></i> Adicionar Campo
                        </button>
                    </div>
                    
                    <div class="form-group">
                        <label for="agradecimento_mensagem">Mensagem de Agradecimento</label>
                        <textarea name="agradecimento_mensagem" id="agradecimento_mensagem" rows="3"><?php echo htmlspecialchars($landingPage['agradecimento_mensagem']); ?></textarea>
                        <small style="color: #666;">Mensagem exibida após o envio do formulário</small>
                    </div>
                    
                    <div class="form-group">
                        <label for="redirect_url">URL de Redirecionamento (opcional)</label>
                        <input type="url" name="redirect_url" id="redirect_url" value="<?php echo htmlspecialchars($landingPage['redirect_url']); ?>" placeholder="https://exemplo.com/obrigado">
                        <small style="color: #666;">Se preenchido, redireciona para esta URL após o envio (sobrescreve a mensagem)</small>
                    </div>
                </div>
                
                <!-- Aba Avançado -->
                <div id="tab-avancado" class="tab-content">
                    <div class="form-group">
                        <label for="html_customizado">HTML Personalizado (opcional)</label>
                        <textarea name="html_customizado" id="html_customizado" rows="10"><?php echo htmlspecialchars($landingPage['html_customizado']); ?></textarea>
                        <small style="color: #666;">
                            <i class="fas fa-exclamation-triangle" style="color: #e74c3c;"></i> 
                            Cuidado! Se preenchido, substitui completamente o layout padrão. Use as variáveis: 
                            <code>{titulo}</code>, <code>{subtitulo}</code>, <code>{formulario}</code>, <code>{logo}</code>
                        </small>
                    </div>
                    
                    <div class="checkbox-group">
                        <input type="checkbox" name="ativo" id="ativo" <?php echo $landingPage['ativo'] ? 'checked' : ''; ?>>
                        <label for="ativo">Ativo (disponível publicamente)</label>
                    </div>
                </div>
                
                <div class="button-group">
                    <button type="button" class="btn-primary" onclick="salvarLandingPage()">
                        <i class="fas fa-save"></i> <?php echo $editando ? 'Atualizar Landing Page' : 'Criar Landing Page'; ?>
                    </button>
                    
                    <a href="lista_lp.php" class="btn-secondary">
                        <i class="fas fa-times"></i> Cancelar
                    </a>
                    
                    <button type="button" class="btn-info" onclick="atualizarPreview()">
                        <i class="fas fa-eye"></i> Atualizar Preview
                    </button>
                </div>
            </form>
            
            <!-- Preview da Landing Page -->
            <div class="preview-container">
                <h3><i class="fas fa-eye"></i> Pré-visualização</h3>
                <div id="preview-landing" class="preview-landing">
                    <!-- O preview será gerado via JavaScript -->
                </div>
            </div>
            
            <?php if ($editando && !empty($landingPage['token'])): ?>
            <div class="info-box" style="margin-top: 20px;">
                <i class="fas fa-link"></i>
                <strong>Link público:</strong> 
                <code style="background: #f0f0f0; padding: 5px; border-radius: 3px; display: inline-block; margin: 5px 0;">
                    <?php echo $baseUrl; ?>lp.php?token=<?php echo $landingPage['token']; ?>
                </code>
                <div style="margin-top: 10px;">
                    <button class="btn-copiar" onclick="copiarLink('<?php echo $baseUrl; ?>lp.php?token=<?php echo $landingPage['token']; ?>')">
                        <i class="fas fa-copy"></i> Copiar Link
                    </button>
                    <a href="<?php echo $baseUrl; ?>lp.php?token=<?php echo $landingPage['token']; ?>" target="_blank" class="btn-visualizar" style="margin-left: 10px;">
                        <i class="fas fa-external-link-alt"></i> Visualizar Página
                    </a>
                </div>
            </div>
            <?php endif; ?>
        </div>
    </div>

    <script>
    // Variáveis globais
    let campos = [];
    
    // Inicializar com campos existentes
    <?php if (!empty($landingPage['campos_json'])): ?>
    try {
        campos = JSON.parse('<?php echo addslashes($landingPage['campos_json']); ?>');
        console.log("Campos carregados:", campos);
    } catch(e) {
        console.error("Erro ao parsear campos_json:", e);
        campos = [];
    }
    <?php else: ?>
    campos = [
        {nome: 'nome', rotulo: 'Nome Completo', tipo: 'text', obrigatorio: true, ordem: 1},
        {nome: 'email', rotulo: 'E-mail', tipo: 'email', obrigatorio: true, ordem: 2},
        {nome: 'telefone', rotulo: 'Telefone', tipo: 'tel', obrigatorio: false, ordem: 3}
    ];
    <?php endif; ?>
    
    // Aguardar DOM carregar
    document.addEventListener('DOMContentLoaded', function() {
        console.log("DOM carregado, inicializando...");
        renderizarCampos();
        atualizarPreview();
        
        // Adicionar listeners para atualizar preview em tempo real
        document.getElementById('titulo').addEventListener('input', atualizarPreview);
        document.getElementById('subtitulo').addEventListener('input', atualizarPreview);
        document.getElementById('cor_primaria').addEventListener('input', atualizarPreview);
        document.getElementById('cor_botao').addEventListener('input', atualizarPreview);
        document.getElementById('logo_path').addEventListener('input', atualizarPreview);
        document.getElementById('imagem_fundo_path').addEventListener('input', atualizarPreview);
        document.getElementById('html_customizado').addEventListener('input', atualizarPreview);
        
        // Se estiver editando e já tiver funil selecionado, carregar etapas
        <?php if ($editando && !empty($landingPage['funil_id'])): ?>
        setTimeout(() => {
            carregarEtapas();
        }, 500);
        <?php endif; ?>
    });
    
    // Renderizar lista de campos
    function renderizarCampos() {
        const container = document.getElementById('campos-lista');
        if (!container) {
            console.error("Container campos-lista não encontrado");
            return;
        }
        
        // Ordenar por ordem
        campos.sort((a, b) => (a.ordem || 0) - (b.ordem || 0));
        
        let html = '';
        campos.forEach((campo, index) => {
            html += `
                <div class="campo-item" data-index="${index}">
                    <div>
                        <strong>${campo.rotulo || 'Novo Campo'}</strong><br>
                        <small>Nome: ${campo.nome}</small>
                    </div>
                    <select onchange="atualizarCampo(${index}, 'tipo', this.value)">
                        <option value="text" ${campo.tipo === 'text' ? 'selected' : ''}>Texto</option>
                        <option value="email" ${campo.tipo === 'email' ? 'selected' : ''}>E-mail</option>
                        <option value="tel" ${campo.tipo === 'tel' ? 'selected' : ''}>Telefone</option>
                        <option value="number" ${campo.tipo === 'number' ? 'selected' : ''}>Número</option>
                        <option value="textarea" ${campo.tipo === 'textarea' ? 'selected' : ''}>Área de Texto</option>
                        <option value="select" ${campo.tipo === 'select' ? 'selected' : ''}>Seleção</option>
                        <option value="checkbox" ${campo.tipo === 'checkbox' ? 'selected' : ''}>Checkbox</option>
                        <option value="radio" ${campo.tipo === 'radio' ? 'selected' : ''}>Rádio</option>
                        <option value="date" ${campo.tipo === 'date' ? 'selected' : ''}>Data</option>
                        <option value="cpf" ${campo.tipo === 'cpf' ? 'selected' : ''}>CPF</option>
                        <option value="cnpj" ${campo.tipo === 'cnpj' ? 'selected' : ''}>CNPJ</option>
                    </select>
                    <label>
                        <input type="checkbox" ${campo.obrigatorio ? 'checked' : ''} onchange="atualizarCampo(${index}, 'obrigatorio', this.checked)">
                        Obrigatório
                    </label>
                    <button type="button" class="btn-remover-campo" onclick="removerCampo(${index})">
                        <i class="fas fa-trash"></i>
                    </button>
                </div>
            `;
        });
        
        container.innerHTML = html;
        console.log("Campos renderizados:", campos.length);
    }
    
    // Adicionar novo campo
    function adicionarCampo() {
        const novoNome = 'campo_' + Date.now();
        campos.push({
            nome: novoNome,
            rotulo: 'Novo Campo',
            tipo: 'text',
            obrigatorio: false,
            ordem: campos.length + 1
        });
        renderizarCampos();
        atualizarPreview();
    }
    
    // Remover campo
    function removerCampo(index) {
        Swal.fire({
            title: 'Confirmar',
            text: 'Deseja remover este campo?',
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#e74c3c',
            confirmButtonText: 'Sim, remover',
            cancelButtonText: 'Cancelar'
        }).then((result) => {
            if (result.isConfirmed) {
                campos.splice(index, 1);
                // Reordenar
                campos.forEach((campo, i) => {
                    campo.ordem = i + 1;
                });
                renderizarCampos();
                atualizarPreview();
            }
        });
    }
    
    // Atualizar campo
    function atualizarCampo(index, propriedade, valor) {
        campos[index][propriedade] = valor;
        document.getElementById('camposJson').value = JSON.stringify(campos);
        atualizarPreview();
    }
    
    // Função para carregar etapas usando seu arquivo existente
    function carregarEtapas() {
        const funilId = document.getElementById('funil_id').value;
        const etapaSelect = document.getElementById('etapa_funil_id');
        
        if (!funilId) {
            etapaSelect.innerHTML = '<option value="">Primeiro selecione o funil</option>';
            return;
        }
        
        // Mostrar loading
        etapaSelect.innerHTML = '<option value="">Carregando...</option>';
        etapaSelect.disabled = true;
        
        console.log("Carregando etapas para funil ID:", funilId);
        
        // Usar seu arquivo carregar_etapas.php
        fetch(`carregar_etapas.php?funil_id=${funilId}`)
            .then(response => {
                if (!response.ok) {
                    throw new Error('Erro na requisição: ' + response.status);
                }
                return response.json();
            })
            .then(data => {
                console.log("Etapas recebidas:", data);
                etapaSelect.disabled = false;
                
                if (data.error) {
                    console.error('Erro:', data.error);
                    etapaSelect.innerHTML = '<option value="">Erro ao carregar etapas</option>';
                    return;
                }
                
                let options = '<option value="">Selecione uma etapa</option>';
                if (data && data.length > 0) {
                    data.forEach(etapa => {
                        options += `<option value="${etapa.id}">${etapa.nome}</option>`;
                    });
                }
                
                etapaSelect.innerHTML = options;
                
                // Se estiver editando e tiver etapa selecionada, manter seleção
                <?php if ($editando && !empty($landingPage['etapa_funil_id'])): ?>
                etapaSelect.value = '<?php echo $landingPage['etapa_funil_id']; ?>';
                <?php endif; ?>
            })
            .catch(error => {
                console.error('Erro ao carregar etapas:', error);
                etapaSelect.disabled = false;
                etapaSelect.innerHTML = '<option value="">Erro ao carregar etapas</option>';
                
                Swal.fire({
                    icon: 'error',
                    title: 'Erro',
                    text: 'Não foi possível carregar as etapas do funil'
                });
            });
    }
    
    // Gerar preview da landing page
    function atualizarPreview() {
        const preview = document.getElementById('preview-landing');
        const titulo = document.getElementById('titulo').value || 'Título da Landing Page';
        const subtitulo = document.getElementById('subtitulo').value || 'Preencha o formulário para receber mais informações';
        const corPrimaria = document.getElementById('cor_primaria').value || '#4cafaf';
        const corBotao = document.getElementById('cor_botao').value || '#4cafaf';
        const logoPath = document.getElementById('logo_path').value;
        const imagemFundo = document.getElementById('imagem_fundo_path').value;
        const htmlCustomizado = document.getElementById('html_customizado').value;
        
        // Se tem HTML customizado, usar ele
        if (htmlCustomizado.trim()) {
            preview.innerHTML = htmlCustomizado
                .replace(/{titulo}/g, titulo)
                .replace(/{subtitulo}/g, subtitulo)
                .replace(/{formulario}/g, gerarFormularioPreview())
                .replace(/{logo}/g, logoPath ? `<img src="${logoPath}" style="max-height: 60px;">` : '');
            return;
        }
        
        // Gerar HTML padrão
        let html = `
            <div style="background: white; border-radius: 8px; overflow: hidden; box-shadow: 0 2px 10px rgba(0,0,0,0.1);">
                <div style="background: ${corPrimaria}; color: white; padding: 40px 20px; text-align: center; ${imagemFundo ? `background-image: url('${imagemFundo}'); background-size: cover; background-position: center;` : ''}">
                    ${logoPath ? `<img src="${logoPath}" style="max-height: 60px; margin-bottom: 20px;">` : ''}
                    <h2 style="margin: 0 0 10px 0; font-size: 28px;">${titulo}</h2>
                    <p style="margin: 0; opacity: 0.9; font-size: 16px;">${subtitulo}</p>
                </div>
                <div style="padding: 30px;">
        `;
        
        // Adicionar campos do formulário
        campos.sort((a, b) => (a.ordem || 0) - (b.ordem || 0)).forEach(campo => {
            const obrigatorio = campo.obrigatorio ? 'required' : '';
            
            html += `
                <div style="margin-bottom: 20px;">
                    <label style="display: block; margin-bottom: 5px; font-weight: 500;">
                        ${campo.rotulo || 'Campo'} ${campo.obrigatorio ? '<span style="color: red;">*</span>' : ''}
                    </label>
            `;
            
            if (campo.tipo === 'textarea') {
                html += `<textarea style="width: 100%; padding: 10px; border: 1px solid #ddd; border-radius: 4px;" rows="3" ${obrigatorio}></textarea>`;
            } else if (campo.tipo === 'select') {
                html += `
                    <select style="width: 100%; padding: 10px; border: 1px solid #ddd; border-radius: 4px;" ${obrigatorio}>
                        <option value="">Selecione...</option>
                    </select>
                `;
            } else if (campo.tipo === 'checkbox') {
                html += `<input type="checkbox" ${obrigatorio}> <span>${campo.rotulo}</span>`;
            } else if (campo.tipo === 'radio') {
                html += `<input type="radio" name="radio_${campo.nome}" ${obrigatorio}> <span>${campo.rotulo}</span>`;
            } else if (campo.tipo === 'cpf') {
                html += `<input type="text" style="width: 100%; padding: 10px; border: 1px solid #ddd; border-radius: 4px;" placeholder="000.000.000-00" ${obrigatorio}>`;
            } else if (campo.tipo === 'cnpj') {
                html += `<input type="text" style="width: 100%; padding: 10px; border: 1px solid #ddd; border-radius: 4px;" placeholder="00.000.000/0000-00" ${obrigatorio}>`;
            } else {
                html += `<input type="${campo.tipo}" style="width: 100%; padding: 10px; border: 1px solid #ddd; border-radius: 4px;" placeholder="${campo.rotulo}" ${obrigatorio}>`;
            }
            
            html += `</div>`;
        });
        
        html += `
                    <button style="background: ${corBotao}; color: white; border: none; padding: 12px 30px; border-radius: 4px; cursor: pointer; font-size: 16px; width: 100%;">
                        Enviar
                    </button>
                </div>
            </div>
        `;
        
        preview.innerHTML = html;
    }
    
    // Gerar formulário para preview (usado no HTML customizado)
    function gerarFormularioPreview() {
        let html = '<form style="max-width: 600px; margin: 0 auto;">';
        
        campos.sort((a, b) => (a.ordem || 0) - (b.ordem || 0)).forEach(campo => {
            html += `
                <div style="margin-bottom: 15px;">
                    <label style="display: block; margin-bottom: 5px;">
                        ${campo.rotulo} ${campo.obrigatorio ? '<span style="color: red;">*</span>' : ''}
                    </label>
                    <input type="${campo.tipo === 'textarea' ? 'text' : campo.tipo}" 
                           style="width: 100%; padding: 8px; border: 1px solid #ddd; border-radius: 4px;" 
                           ${campo.obrigatorio ? 'required' : ''}>
                </div>
            `;
        });
        
        html += `
            <button type="submit" style="background: ${document.getElementById('cor_botao').value}; color: white; border: none; padding: 10px 20px; border-radius: 4px; cursor: pointer;">
                Enviar
            </button>
        </form>`;
        
        return html;
    }
    
    // Mudar aba
    function mudarTab(tab) {
        document.querySelectorAll('.tab').forEach(t => t.classList.remove('active'));
        document.querySelectorAll('.tab-content').forEach(c => c.classList.remove('active'));
        
        const tabElement = document.querySelector(`.tab[onclick="mudarTab('${tab}')"]`);
        if (tabElement) tabElement.classList.add('active');
        
        const contentElement = document.getElementById(`tab-${tab}`);
        if (contentElement) contentElement.classList.add('active');
    }
    
    // Salvar landing page
    function salvarLandingPage() {
        console.log("Iniciando salvamento...");
        
        // Validar campos obrigatórios
        const nome = document.getElementById('nome').value.trim();
        const funilId = document.getElementById('funil_id').value;
        const etapaId = document.getElementById('etapa_funil_id').value;
        
        console.log("Nome:", nome);
        console.log("Funil ID:", funilId);
        console.log("Etapa ID:", etapaId);
        console.log("Campos:", campos);
        
        if (!nome) {
            Swal.fire('Atenção', 'Preencha o nome da landing page', 'warning');
            return false;
        }
        
        if (!funilId || funilId === '') {
            Swal.fire('Atenção', 'Selecione um funil', 'warning');
            return false;
        }
        
        if (!etapaId || etapaId === '') {
            Swal.fire('Atenção', 'Selecione uma etapa do funil', 'warning');
            return false;
        }
        
        // Validar se há pelo menos um campo no formulário
        if (campos.length === 0) {
            Swal.fire('Atenção', 'Adicione pelo menos um campo ao formulário', 'warning');
            return false;
        }
        
        // Atualizar JSON dos campos
        const camposJson = JSON.stringify(campos);
        document.getElementById('camposJson').value = camposJson;
        console.log("Campos JSON:", camposJson);
        
        // Mostrar loading
        Swal.fire({
            title: 'Salvando...',
            text: 'Aguarde',
            allowOutsideClick: false,
            didOpen: () => {
                Swal.showLoading();
            }
        });
        
        // Enviar formulário
        document.getElementById('landingPageForm').submit();
    }
    
    // Copiar link
    function copiarLink(link) {
        navigator.clipboard.writeText(link).then(() => {
            Swal.fire({
                icon: 'success',
                title: 'Link copiado!',
                text: 'O link da landing page foi copiado para a área de transferência.',
                timer: 2000,
                showConfirmButton: false
            });
        }).catch(() => {
            Swal.fire('Erro', 'Não foi possível copiar o link', 'error');
        });
    }
    
    // Fechar mensagem após 5 segundos
    setTimeout(function() {
        var msg = document.querySelector('.mensagem-flutuante');
        if (msg) msg.style.display = 'none';
    }, 5000);
    </script>
    
    <?php include 'sino_notificacoes.php'; ?>
</body>
</html>
<?php
debug_log("=== FIM DA EXECUÇÃO ===\n");
if (isset($conn)) $conn->close();
?>