<?php
// templates_email.php
session_start();

// Ativar exibição de erros para debug (remova em produção)
ini_set('display_errors', 1);
ini_set('display_startup_errors', 1);
error_reporting(E_ALL);

// Log de erros em arquivo
ini_set('log_errors', 1);
ini_set('error_log', 'logs/php_errors.log');

// Verificar login e tenant
if (!isset($_SESSION['logado'], $_SESSION['usuario_id'], $_SESSION['tenant_id']) || $_SESSION['logado'] !== true) {
    header('Location: login.php');
    exit;
}

require_once 'conexao.php';

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

if (!$is_admin) {
    header('Location: acesso_negado.php');
    exit;
}

// FUNÇÕES DE ASSINATURA
function carregarDadosAssinatura($conn, $tenantId, $usuarioId) {
    try {
        // Carregar logo do tenant
        $stmt = $conn->prepare("SELECT logo_path, nome as nome_tenant FROM tenants WHERE id = ?");
        $stmt->bind_param("i", $tenantId);
        $stmt->execute();
        $result = $stmt->get_result();
        $tenant = $result->fetch_assoc();
        $stmt->close();
        
        // Carregar dados do usuário
        $stmt = $conn->prepare("SELECT nome, email, assinatura_email, telefone, cargo FROM usuarios WHERE id = ?");
        $stmt->bind_param("i", $usuarioId);
        $stmt->execute();
        $result = $stmt->get_result();
        $usuario = $result->fetch_assoc();
        $stmt->close();
        
        return [
            'tenant' => $tenant,
            'usuario' => $usuario
        ];
        
    } catch (Exception $e) {
        error_log("Erro ao carregar dados da assinatura: " . $e->getMessage());
        return null;
    }
}

function gerarAssinatura($dadosAssinatura) {
    if (!$dadosAssinatura) return '';
    
    $logo = $dadosAssinatura['tenant']['logo_path'] ?? '';
    $nomeUsuario = $dadosAssinatura['usuario']['nome'] ?? '';
    $emailUsuario = $dadosAssinatura['usuario']['email'] ?? '';
    $telefoneUsuario = $dadosAssinatura['usuario']['telefone'] ?? '';
    $cargoUsuario = $dadosAssinatura['usuario']['cargo'] ?? '';
    $nomeTenant = $dadosAssinatura['tenant']['nome_tenant'] ?? '';
    
    // Se o usuário tem uma assinatura personalizada, usar ela
    if (!empty($dadosAssinatura['usuario']['assinatura_email'])) {
        return $dadosAssinatura['usuario']['assinatura_email'];
    }
    
    // Gerar assinatura padrão
    $assinatura = "\n\n<div style='margin-top: 30px; padding-top: 20px; border-top: 2px solid #007bff; font-family: Arial, sans-serif; color: #333;'>\n";
    
    // Logo do tenant
    if (!empty($logo)) {
        $assinatura .= "    <div style='margin-bottom: 15px;'>\n";
        $assinatura .= "        <img src='{$logo}' alt='{$nomeTenant}' style='max-height: 50px; max-width: 200px;' />\n";
        $assinatura .= "    </div>\n";
    }
    
    // Dados do usuário
    $assinatura .= "    <div style='line-height: 1.6;'>\n";
    $assinatura .= "        <strong>{$nomeUsuario}</strong>\n";
    
    if (!empty($cargoUsuario)) {
        $assinatura .= "        <br>{$cargoUsuario}\n";
    }
    
    if (!empty($nomeTenant)) {
        $assinatura .= "        <br>{$nomeTenant}\n";
    }
    
    if (!empty($emailUsuario)) {
        $assinatura .= "        <br>E-mail: <a href='mailto:{$emailUsuario}' style='color: #007bff; text-decoration: none;'>{$emailUsuario}</a>\n";
    }
    
    if (!empty($telefoneUsuario)) {
        $assinatura .= "        <br>Telefone: {$telefoneUsuario}\n";
    }
    
    $assinatura .= "    </div>\n";
    $assinatura .= "</div>";
    
    return $assinatura;
}

function aplicarAssinatura($conteudo, $assinatura) {
    if (empty($assinatura)) {
        return $conteudo;
    }
    return $conteudo . $assinatura;
}

// Função para substituir variáveis NO MOMENTO DO ENVIO
function substituirVariaveis($conteudo, $dadosCliente = []) {
    $substituicoes = [
        '{cliente_id}' => $dadosCliente['id'] ?? '[ID do Cliente]',
        '{cliente_nome}' => $dadosCliente['nome'] ?? '[Nome do Cliente]',
        '{nome_cliente}' => $dadosCliente['nome'] ?? '[Nome do Cliente]',
        '{cliente_email}' => $dadosCliente['email'] ?? '[email@cliente.com]',
        '{email_cliente}' => $dadosCliente['email'] ?? '[email@cliente.com]',
        '{cliente_telefone}' => $dadosCliente['telefone'] ?? '[Telefone]',
        '{telefone_cliente}' => $dadosCliente['telefone'] ?? '[Telefone]',
        '{cliente_celular}' => $dadosCliente['celular'] ?? '[Celular]',
        '{celular_cliente}' => $dadosCliente['celular'] ?? '[Celular]',
        '{cliente_endereco}' => $dadosCliente['endereco'] ?? '[Endereço]',
        '{cliente_cidade}' => $dadosCliente['cidade'] ?? '[Cidade]',
        '{data_atual}' => date('d/m/Y'),
        '{data_hora}' => date('d/m/Y H:i:s'),
        '{url_sistema}' => (isset($_SERVER['HTTPS']) ? 'https://' : 'http://') . $_SERVER['HTTP_HOST'],
        '{sistema_nome}' => 'SON'
    ];
    
    return str_replace(
        array_keys($substituicoes),
        array_values($substituicoes),
        $conteudo
    );
}

// Carregar dados da assinatura para o usuário logado
$dadosAssinatura = carregarDadosAssinatura($conn, $_SESSION['tenant_id'], $_SESSION['usuario_id']);
$assinatura = $dadosAssinatura ? gerarAssinatura($dadosAssinatura) : '';

// Funções utilitárias
function registrarLog($acao, $detalhes = '') {
    $arquivoLog = 'logs/email_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));
}

// VERIFICAR E CORRIGIR ESTRUTURA DA TABELA
try {
    // Verificar se a coluna html_customizado existe
    $checkColumnHtml = $conn->query("SHOW COLUMNS FROM templates_email LIKE 'html_customizado'");
    if ($checkColumnHtml->num_rows == 0) {
        $conn->query("ALTER TABLE templates_email ADD COLUMN html_customizado TEXT NULL AFTER conteudo");
        error_log("Coluna html_customizado adicionada com sucesso!");
    }
    
    // Verificar se a coluna incluir_assinatura existe
    $checkColumnAssinatura = $conn->query("SHOW COLUMNS FROM templates_email LIKE 'incluir_assinatura'");
    if ($checkColumnAssinatura->num_rows == 0) {
        $conn->query("ALTER TABLE templates_email ADD COLUMN incluir_assinatura TINYINT(1) DEFAULT 1");
        error_log("Coluna incluir_assinatura adicionada com sucesso!");
    }
    
    // Verificar se a coluna atualizado_em existe
    $checkColumnAtualizado = $conn->query("SHOW COLUMNS FROM templates_email LIKE 'atualizado_em'");
    if ($checkColumnAtualizado->num_rows == 0) {
        $conn->query("ALTER TABLE templates_email ADD COLUMN atualizado_em TIMESTAMP NULL ON UPDATE CURRENT_TIMESTAMP AFTER criado_em");
        error_log("Coluna atualizado_em adicionada com sucesso!");
    }
    
} catch (Exception $e) {
    error_log("Erro ao verificar estrutura da tabela: " . $e->getMessage());
}

// Variáveis para o formulário
$template = [
    'id' => '',
    'nome' => '',
    'assunto' => '',
    'conteudo' => '',
    'html_customizado' => '',
    'tipo' => 'automacao',
    'ativo' => 1
];
$editando = false;

// Processamento do formulário
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    try {
        if (!isset($_POST['csrf_token']) || $_POST['csrf_token'] !== $_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'] ?? '');
        $assunto = trim($_POST['assunto'] ?? '');
        $conteudoHtml = trim($_POST['conteudo_html'] ?? '');
        $htmlCustomizado = trim($_POST['html_customizado'] ?? '');
        $tipo = $_POST['tipo'] ?? 'automacao';
        $ativo = isset($_POST['ativo']) ? 1 : 0;
        $templateId = $_POST['template_id'] ?? '';

        if (empty($nome) || empty($assunto) || (empty($conteudoHtml) && empty($htmlCustomizado))) {
            throw new Exception("Preencha nome, assunto e pelo menos um tipo de conteúdo");
        }

        if ($templateId && is_numeric($templateId)) {
            // Edição de template existente
            $stmt = $conn->prepare("UPDATE templates_email SET nome = ?, assunto = ?, conteudo = ?, html_customizado = ?, tipo = ?, ativo = ?, incluir_assinatura = 1, atualizado_em = NOW() WHERE id = ? AND tenant_id = ?");
            $stmt->bind_param("ssssssiii", $nome, $assunto, $conteudoHtml, $htmlCustomizado, $tipo, $ativo, $templateId, $tenantId);
            
            if ($stmt->execute()) {
                registrarLog('Edição de Template de Email', "Template ID: $templateId, Nome: $nome");
                $_SESSION['mensagem'] = 'Template atualizado com sucesso!';
                $_SESSION['mensagem_tipo'] = 'sucesso';
            } else {
                throw new Exception("Erro ao atualizar template: " . $stmt->error);
            }
        } else {
            // Novo template
            $stmt = $conn->prepare("INSERT INTO templates_email (tenant_id, nome, assunto, conteudo, html_customizado, tipo, ativo, incluir_assinatura, criado_por) VALUES (?, ?, ?, ?, ?, ?, ?, 1, ?)");
           $stmt->bind_param("issssssi", 
    $tenantId, 
    $nome, 
    $assunto, 
    $conteudoHtml, 
    $htmlCustomizado, 
    $tipo, 
    $ativo, 
    $userId
);
            
            if ($stmt->execute()) {
                $novoId = $stmt->insert_id;
                registrarLog('Criação de Template de Email', "Template ID: $novoId, Nome: $nome");
                $_SESSION['mensagem'] = 'Template criado com sucesso!';
                $_SESSION['mensagem_tipo'] = 'sucesso';
            } else {
                throw new Exception("Erro ao criar template: " . $stmt->error);
            }
        }

        header("Location: templates_email.php");
        exit;

    } catch (Exception $e) {
        $_SESSION['mensagem'] = $e->getMessage();
        $_SESSION['mensagem_tipo'] = 'erro';
        error_log("Erro no processamento: " . $e->getMessage());
        
        $template = [
            'id' => $_POST['template_id'] ?? '',
            'nome' => $_POST['nome'] ?? '',
            'assunto' => $_POST['assunto'] ?? '',
            'conteudo' => $_POST['conteudo_html'] ?? '',
            'html_customizado' => $_POST['html_customizado'] ?? '',
            'tipo' => $_POST['tipo'] ?? 'automacao',
            'ativo' => isset($_POST['ativo']) ? 1 : 0
        ];
        $editando = (bool)($template['id']);
    }
}

// Carregar template para edição
if (isset($_GET['editar']) && is_numeric($_GET['editar'])) {
    $templateId = (int)$_GET['editar'];
    $tenantId = (int)$_SESSION['tenant_id'];
    
    $stmt = $conn->prepare("SELECT id, nome, assunto, conteudo, html_customizado, tipo, ativo, incluir_assinatura FROM templates_email WHERE id = ? AND tenant_id = ?");
    $stmt->bind_param("ii", $templateId, $tenantId);
    $stmt->execute();
    $result = $stmt->get_result();
    
    if ($result->num_rows > 0) {
        $template = $result->fetch_assoc();
        $editando = true;
    } else {
        $_SESSION['mensagem'] = 'Template não encontrado!';
        $_SESSION['mensagem_tipo'] = 'erro';
        header("Location: templates_email.php");
        exit;
    }
}

// Buscar templates existentes
$tenantId = (int)$_SESSION['tenant_id'];
$stmt = $conn->prepare("SELECT id, nome, assunto, tipo, ativo, criado_em FROM templates_email WHERE tenant_id = ? ORDER BY nome");
$stmt->bind_param("i", $tenantId);
$stmt->execute();
$templates = $stmt->get_result();
?>

<!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'; ?> Template de Email - 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">
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    <link href="https://cdn.jsdelivr.net/npm/quill@2.0.2/dist/quill.snow.css" rel="stylesheet">
    <!-- CodeMirror para edição de HTML -->
    <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/javascript/javascript.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: 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: 1200px;
            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-group {
            margin-bottom: 20px;
        }
        
        .form-group label {
            display: block;
            margin-bottom: 5px;
            font-weight: bold;
        }
        
        .form-group input, 
        .form-group select {
            width: 100%;
            padding: 8px;
            border: 1px solid #ddd;
            border-radius: 4px;
        }
        
        /* Container do editor */
        .editor-container {
            border: 1px solid #ccc;
            border-radius: 4px;
            margin-top: 5px;
        }
        
        #editor {
            height: 400px;
            background-color: white;
        }
        
        .ql-editor {
            min-height: 380px;
            font-size: 14px;
        }
        
        /* Container do HTML customizado */
        .html-custom-container {
            border: 1px solid #ccc;
            border-radius: 4px;
            margin-top: 5px;
            overflow: hidden;
        }
        
        #htmlEditor {
            height: 300px;
            font-family: 'Courier New', monospace;
            font-size: 14px;
            line-height: 1.5;
        }
        
        /* ESTILO PARA REDIMENSIONAMENTO DE IMAGENS */
        .ql-editor img {
            max-width: 100%;
            height: auto;
            border: 2px solid transparent;
            transition: all 0.2s;
            display: inline-block;
            position: relative;
            cursor: default;
        }

        .ql-editor img.selected-image {
            border: 2px solid #007bff;
            box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
            outline: none;
        }

        .ql-editor img.resizing {
            opacity: 0.7;
            border: 2px dashed #007bff;
        }
        
        .ql-toolbar {
            background: #f8f9fa;
            border-radius: 4px 4px 0 0;
            border-bottom: 1px solid #ddd;
            display: flex;
            flex-wrap: wrap;
            position: relative;
            padding: 8px !important;
            gap: 5px;
            align-items: center;
        }
        
        /* BOTÕES CORRIGIDOS - MESMO PADRÃO DOS DEMAIS */
        .ql-variavel, .ql-html-pronto {
            background-color: #4cafaf !important;
            color: white !important;
            border: none !important;
            border-radius: 4px !important;
            padding: 10px 20px !important;
            cursor: pointer !important;
            font-size: 14px !important;
            font-weight: 500 !important;
            display: inline-flex !important;
            align-items: center !important;
            gap: 8px !important;
            margin: 0 4px !important;
            transition: background-color 0.3s ease !important;
            height: 40px !important;
            line-height: 1 !important;
            font-family: Arial, sans-serif !important;
            min-width: 120px !important;
            justify-content: center !important;
        }
        
        .ql-html-pronto {
            background-color: #6c5ce7 !important;
        }
        
        .ql-variavel:hover, .ql-html-pronto:hover {
            opacity: 0.9 !important;
            transform: translateY(-1px);
            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
        }
        
        .ql-variavel i, .ql-html-pronto i {
            font-size: 16px !important;
            color: white !important;
        }
        
        /* Modal para URL da imagem */
        .modal-imagem {
            display: none;
            position: fixed;
            z-index: 3000;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0,0,0,0.5);
        }
        
        .modal-imagem-content {
            background-color: white;
            margin: 15% auto;
            padding: 25px;
            border-radius: 8px;
            width: 90%;
            max-width: 500px;
            box-shadow: 0 4px 20px rgba(0,0,0,0.2);
        }
        
        .modal-imagem-content h3 {
            margin-bottom: 20px;
            color: #333;
        }
        
        .modal-imagem-content input {
            width: 100%;
            padding: 12px;
            border: 1px solid #ddd;
            border-radius: 4px;
            margin-bottom: 20px;
            font-size: 14px;
        }
        
        .modal-imagem-content .button-group {
            display: flex;
            gap: 10px;
            justify-content: flex-end;
        }
        
        .modal-imagem-content button {
            padding: 10px 20px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 14px;
            transition: all 0.3s;
        }
        
        .modal-imagem-content .btn-confirmar {
            background-color: #4cafaf;
            color: white;
        }
        
        .modal-imagem-content .btn-cancelar {
            background-color: #6c757d;
            color: white;
        }
        
        /* Modal de HTML Pronto */
        .modal-html-pronto {
            display: none;
            position: fixed;
            z-index: 3000;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0,0,0,0.5);
        }
        
        .modal-html-content {
            background-color: white;
            margin: 5% auto;
            padding: 25px;
            border-radius: 8px;
            width: 90%;
            max-width: 800px;
            max-height: 80vh;
            overflow-y: auto;
            box-shadow: 0 4px 20px rgba(0,0,0,0.2);
        }
        
        .modal-html-content h3 {
            margin-bottom: 20px;
            color: #333;
            border-bottom: 1px solid #eee;
            padding-bottom: 10px;
        }
        
        .html-bloco {
            border: 1px solid #ddd;
            border-radius: 4px;
            margin-bottom: 15px;
            overflow: hidden;
        }
        
        .html-bloco-header {
            background-color: #f8f9fa;
            padding: 12px 15px;
            cursor: pointer;
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-bottom: 1px solid #ddd;
            font-weight: 500;
        }
        
        .html-bloco-header:hover {
            background-color: #e9ecef;
        }
        
        .html-bloco-content {
            padding: 15px;
            background-color: white;
            border-bottom: 1px solid #eee;
        }
        
        .html-preview {
            border: 1px solid #eee;
            padding: 15px;
            border-radius: 4px;
            background-color: #fafafa;
            margin-bottom: 10px;
        }
        
        .html-buttons {
            display: flex;
            gap: 10px;
            justify-content: flex-end;
        }
        
        .btn-inserir-html {
            background-color: #4cafaf;
            color: white;
            border: none;
            border-radius: 4px;
            padding: 8px 15px;
            cursor: pointer;
            font-size: 13px;
            display: inline-flex;
            align-items: center;
            gap: 5px;
        }
        
        .btn-inserir-html:hover {
            background-color: #3d9b9b;
        }
        
        .btn-fechar-modal {
            background-color: #6c757d;
            color: white;
            border: none;
            border-radius: 4px;
            padding: 10px 20px;
            cursor: pointer;
            margin-top: 15px;
        }
        
        .btn-fechar-modal:hover {
            background-color: #5a6268;
        }
        
        /* Checkbox alinhado */
        .checkbox-group {
            display: flex;
            align-items: center;
            gap: 10px;
            margin: 20px 0;
        }
        
        .checkbox-group input[type="checkbox"] {
            width: auto;
            margin: 0;
        }
        
        .checkbox-group label {
            margin: 0;
            font-weight: normal;
        }
        
        button[type="button"], button[type="submit"] {
            background-color: #4cafaf;
            color: white;
            padding: 10px 20px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 16px;
            margin-right: 10px;
        }
        
        button[type="button"]:hover, button[type="submit"]:hover {
            background-color: #3d9b9b;
        }
        
        .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;
        }
        
        .templates-list {
            margin-top: 40px;
        }
        
        .template-item {
            border: 1px solid #ddd;
            border-radius: 4px;
            padding: 15px;
            margin-bottom: 10px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .template-item:hover {
            background: #f9f9f9;
        }
        
        .template-actions {
            display: flex;
            gap: 10px;
        }
        
        .btn-editar, .btn-excluir {
            padding: 5px 10px;
            border: none;
            border-radius: 3px;
            cursor: pointer;
            text-decoration: none;
            color: white;
        }
        
        .btn-editar {
            background-color: #3498db;
        }
        
        .btn-excluir {
            background-color: #e74c3c;
        }
        
        .status-ativo {
            color: #2ecc71;
            font-weight: bold;
        }
        
        .status-inativo {
            color: #e74c3c;
            font-weight: bold;
        }
        
        /* Modal de Variáveis */
        .modal {
            display: none;
            position: fixed;
            z-index: 2000;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0,0,0,0.5);
        }
        
        .modal-content {
            background-color: white;
            margin: 5% auto;
            padding: 20px;
            border-radius: 8px;
            width: 80%;
            max-width: 600px;
            max-height: 80vh;
            overflow-y: auto;
        }
        
        .modal-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
            border-bottom: 1px solid #eee;
            padding-bottom: 10px;
        }
        
        .close-modal {
            background: none;
            border: none;
            font-size: 24px;
            cursor: pointer;
            color: #999;
        }
        
        .close-modal:hover {
            color: #333;
        }
        
        .variaveis-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
            gap: 10px;
            margin-top: 15px;
        }
        
        .variavel-card {
            background: #f8f9fa;
            border: 1px solid #dee2e6;
            border-radius: 4px;
            padding: 10px;
            cursor: pointer;
            transition: all 0.2s;
        }
        
        .variavel-card:hover {
            background: #e9ecef;
            border-color: #007bff;
            transform: translateY(-1px);
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
        }
        
        .variavel-card .codigo {
            font-family: monospace;
            font-weight: bold;
            color: #007bff;
            margin-bottom: 5px;
        }
        
        .variavel-card .descricao {
            font-size: 12px;
            color: #666;
        }
        
        .categoria-titulo {
            font-weight: bold;
            color: #495057;
            margin: 15px 0 8px 0;
            padding-bottom: 5px;
            border-bottom: 1px solid #dee2e6;
        }
        
        .button-group {
            display: flex;
            gap: 10px;
            flex-wrap: wrap;
            align-items: center;
        }
        
        .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;
        }
        
        @media (max-width: 768px) {
            .header-fixed {
                left: 0;
            }
            
            .main-content {
                margin-left: 0;
            }
            
            .sidebar {
                display: none;
            }
            
            .modal-imagem-content,
            .modal-html-content {
                margin: 10% auto;
                width: 95%;
            }
            
            .ql-variavel, .ql-html-pronto {
                min-width: 100px !important;
                padding: 8px 12px !important;
            }
        }
    </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:#007bff; 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; ?>

            <h1><i class="fas fa-envelope"></i> <?php echo $editando ? 'Editar Template' : 'Criar Template'; ?></h1>
            
            <div class="info-box">
                <i class="fas fa-info-circle"></i>
                <strong>Dica:</strong> Use o editor visual para criar emails facilmente ou o HTML Personalizado para colar códigos completos (como da landing page). Os dois campos são independentes - você pode usar um ou outro.
            </div>
            
            <form method="POST" id="templateForm">
                <input type="hidden" name="csrf_token" value="<?= $_SESSION['csrf_token'] ?>">
                <input type="hidden" name="template_id" value="<?= $template['id'] ?>">
                <input type="hidden" name="conteudo_html" id="conteudoHtml">
                
                <div class="tabs">
                    <div class="tab active" onclick="mudarTab('basico')">Básico</div>
                    <div class="tab" onclick="mudarTab('editor')">Editor Visual</div>
                    <div class="tab" onclick="mudarTab('html')">HTML Personalizado</div>
                </div>
                
                <!-- Aba Básico -->
                <div id="tab-basico" class="tab-content active">
                    <div class="form-group">
                        <label for="nome" class="required">Nome do Template</label>
                        <input type="text" name="nome" id="nome" required value="<?= htmlspecialchars($template['nome']) ?>">
                    </div>
                    
                    <div class="form-group">
                        <label for="assunto" class="required">Assunto do Email</label>
                        <input type="text" name="assunto" id="assunto" required value="<?= htmlspecialchars($template['assunto']) ?>">
                    </div>
                    
                    <div class="form-group">
                        <label for="tipo">Tipo</label>
                        <select name="tipo" id="tipo">
                            <option value="automacao" <?= $template['tipo'] === 'automacao' ? 'selected' : '' ?>>Automação</option>
                            <option value="marketing" <?= $template['tipo'] === 'marketing' ? 'selected' : '' ?>>Marketing</option>
                            <option value="notificacao" <?= $template['tipo'] === 'notificacao' ? 'selected' : '' ?>>Notificação</option>
                        </select>
                    </div>
                    
                    <div class="checkbox-group">
                        <input type="checkbox" name="ativo" id="ativo" <?= $template['ativo'] ? 'checked' : '' ?>>
                        <label for="ativo">Ativo</label>
                    </div>
                </div>
                
                <!-- Aba Editor Visual -->
                <div id="tab-editor" class="tab-content">
                    <div class="form-group">
                        <label class="required">Conteúdo Visual</label>
                        <div class="editor-container">
                            <div id="editor"></div>
                        </div>
                        <small style="color: #666; font-size: 12px; margin-top: 5px; display: block;">
                            <i class="fas fa-info-circle"></i> Para inserir imagem, clique no ícone de imagem. Para redimensionar, clique na imagem e arraste pelos cantos. Use os botões abaixo para inserir variáveis e blocos prontos.
                        </small>
                    </div>
                </div>
                
                <!-- Aba HTML Personalizado (como na landing page) -->
                <div id="tab-html" class="tab-content">
                    <div class="form-group">
                        <label for="html_customizado">HTML Personalizado</label>
                        <div class="html-custom-container">
                            <textarea name="html_customizado" id="html_customizado" rows="15" style="width: 100%; font-family: monospace; padding: 10px;"><?= htmlspecialchars($template['html_customizado'] ?? '') ?></textarea>
                        </div>
                        <small style="color: #666; font-size: 12px; margin-top: 5px; display: block;">
                            <i class="fas fa-exclamation-triangle" style="color: #e74c3c;"></i> 
                            <strong>Cuidado!</strong> Se preenchido, este HTML substitui completamente o conteúdo do editor visual. Use as variáveis como: 
                            <code>{nome_cliente}</code>, <code>{email_cliente}</code>, <code>{data_atual}</code>
                        </small>
                        <small style="color: #666; font-size: 12px; margin-top: 5px; display: block;">
                            <i class="fas fa-copy"></i> 
                            Você pode colar aqui o HTML completo da sua landing page ou qualquer outro código HTML.
                        </small>
                    </div>
                </div>
                
                <div class="button-group" style="margin-top: 20px;">
                    <button type="button" onclick="salvarTemplate()">
                        <i class="fas fa-save"></i> <?php echo $editando ? 'Atualizar' : 'Salvar'; ?>
                    </button>
                    
                    <a href="templates_email.php">
                        <button type="button" style="background-color: #6c757d;">Cancelar</button>
                    </a>
                </div>
            </form>
            
            <!-- Modal para URL da Imagem -->
            <div id="modalImagemUrl" class="modal-imagem">
                <div class="modal-imagem-content">
                    <h3><i class="fas fa-image"></i> Inserir Imagem por URL</h3>
                    <p style="margin-bottom: 15px; color: #666;">Informe a URL da imagem (deve começar com http:// ou https://)</p>
                    <input type="url" id="imagemUrl" placeholder="https://exemplo.com/imagem.jpg">
                    <div class="button-group">
                        <button class="btn-confirmar" onclick="inserirImagemUrl()">
                            <i class="fas fa-check"></i> Inserir
                        </button>
                        <button class="btn-cancelar" onclick="fecharModalImagem()">
                            <i class="fas fa-times"></i> Cancelar
                        </button>
                    </div>
                </div>
            </div>
            
            <!-- Modal de Variáveis -->
            <div id="modalVariaveis" class="modal">
                <div class="modal-content">
                    <div class="modal-header">
                        <h3><i class="fas fa-code"></i> Inserir Variável</h3>
                        <button class="close-modal" onclick="fecharModalVariaveis()">&times;</button>
                    </div>
                    
                    <div class="categoria-titulo">Cliente</div>
                    <div class="variaveis-grid">
                        <div class="variavel-card" onclick="selecionarVariavel('{nome_cliente}')">
                            <div class="codigo">{nome_cliente}</div>
                            <div class="descricao">Nome do cliente</div>
                        </div>
                        <div class="variavel-card" onclick="selecionarVariavel('{email_cliente}')">
                            <div class="codigo">{email_cliente}</div>
                            <div class="descricao">Email do cliente</div>
                        </div>
                        <div class="variavel-card" onclick="selecionarVariavel('{telefone_cliente}')">
                            <div class="codigo">{telefone_cliente}</div>
                            <div class="descricao">Telefone</div>
                        </div>
                        <div class="variavel-card" onclick="selecionarVariavel('{celular_cliente}')">
                            <div class="codigo">{celular_cliente}</div>
                            <div class="descricao">Celular</div>
                        </div>
                        <div class="variavel-card" onclick="selecionarVariavel('{cliente_endereco}')">
                            <div class="codigo">{cliente_endereco}</div>
                            <div class="descricao">Endereço</div>
                        </div>
                        <div class="variavel-card" onclick="selecionarVariavel('{cliente_cidade}')">
                            <div class="codigo">{cliente_cidade}</div>
                            <div class="descricao">Cidade</div>
                        </div>
                        <div class="variavel-card" onclick="selecionarVariavel('{cliente_id}')">
                            <div class="codigo">{cliente_id}</div>
                            <div class="descricao">ID do cliente</div>
                        </div>
                    </div>
                    
                    <div class="categoria-titulo">Sistema</div>
                    <div class="variaveis-grid">
                        <div class="variavel-card" onclick="selecionarVariavel('{data_atual}')">
                            <div class="codigo">{data_atual}</div>
                            <div class="descricao">Data atual (dd/mm/aaaa)</div>
                        </div>
                        <div class="variavel-card" onclick="selecionarVariavel('{data_hora}')">
                            <div class="codigo">{data_hora}</div>
                            <div class="descricao">Data e hora completa</div>
                        </div>
                        <div class="variavel-card" onclick="selecionarVariavel('{url_sistema}')">
                            <div class="codigo">{url_sistema}</div>
                            <div class="descricao">URL do sistema</div>
                        </div>
                        <div class="variavel-card" onclick="selecionarVariavel('{sistema_nome}')">
                            <div class="codigo">{sistema_nome}</div>
                            <div class="descricao">Nome do sistema (SON)</div>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- Modal de HTML Pronto -->
            <div id="modalHtmlPronto" class="modal-html-pronto">
                <div class="modal-html-content">
                    <h3><i class="fas fa-code"></i> Inserir Bloco HTML Pronto</h3>
                    
                    <!-- Bloco 1: CTA Simples -->
                    <div class="html-bloco">
                        <div class="html-bloco-header" onclick="toggleBloco(this)">
                            <span><i class="fas fa-hand-pointer"></i> Botão de Call-to-Action (CTA)</span>
                            <i class="fas fa-chevron-down" style="transition: transform 0.3s;"></i>
                        </div>
                        <div class="html-bloco-content" style="display: block;">
                            <div class="html-preview">
                                <div style="text-align: center; padding: 20px; background: #f8f9fa; border-radius: 8px;">
                                    <p style="margin-bottom: 15px;">Clique no botão abaixo:</p>
                                    <a href="#" style="background: #007bff; color: white; padding: 12px 25px; text-decoration: none; border-radius: 5px; display: inline-block;">Saiba Mais</a>
                                </div>
                            </div>
                            <div class="html-buttons">
                                <button class="btn-inserir-html" onclick="inserirHtmlPronto('cta_simples')">
                                    <i class="fas fa-plus-circle"></i> Inserir no Editor
                                </button>
                            </div>
                        </div>
                    </div>
                    
                    <!-- Bloco 2: Card de Produto -->
                    <div class="html-bloco">
                        <div class="html-bloco-header" onclick="toggleBloco(this)">
                            <span><i class="fas fa-box"></i> Card de Produto</span>
                            <i class="fas fa-chevron-down"></i>
                        </div>
                        <div class="html-bloco-content" style="display: none;">
                            <div class="html-preview">
                                <div style="border: 1px solid #ddd; border-radius: 8px; padding: 15px; max-width: 300px;">
                                    <h3 style="margin-top: 0;">Nome do Produto</h3>
                                    <p style="color: #666;">Descrição breve do produto.</p>
                                    <p style="font-size: 24px; color: #007bff; font-weight: bold;">R$ 99,90</p>
                                    <button style="background: #28a745; color: white; border: none; padding: 10px; width: 100%; border-radius: 4px;">Comprar</button>
                                </div>
                            </div>
                            <div class="html-buttons">
                                <button class="btn-inserir-html" onclick="inserirHtmlPronto('card_produto')">
                                    <i class="fas fa-plus-circle"></i> Inserir no Editor
                                </button>
                            </div>
                        </div>
                    </div>
                    
                    <!-- Bloco 3: Newsletter -->
                    <div class="html-bloco">
                        <div class="html-bloco-header" onclick="toggleBloco(this)">
                            <span><i class="fas fa-envelope-open-text"></i> Formulário de Newsletter</span>
                            <i class="fas fa-chevron-down"></i>
                        </div>
                        <div class="html-bloco-content" style="display: none;">
                            <div class="html-preview">
                                <div style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; padding: 25px; border-radius: 8px;">
                                    <h2 style="margin-top: 0; color: white;">Assine Nossa Newsletter</h2>
                                    <p>Receba as novidades</p>
                                    <div style="display: flex; gap: 10px;">
                                        <input type="email" placeholder="Seu e-mail" style="flex: 1; padding: 12px; border: none; border-radius: 4px;">
                                        <button style="background: #ffc107; color: #333; border: none; padding: 12px 25px; border-radius: 4px;">Assinar</button>
                                    </div>
                                </div>
                            </div>
                            <div class="html-buttons">
                                <button class="btn-inserir-html" onclick="inserirHtmlPronto('newsletter')">
                                    <i class="fas fa-plus-circle"></i> Inserir no Editor
                                </button>
                            </div>
                        </div>
                    </div>
                    
                    <!-- Bloco 4: Depoimento -->
                    <div class="html-bloco">
                        <div class="html-bloco-header" onclick="toggleBloco(this)">
                            <span><i class="fas fa-quote-right"></i> Depoimento de Cliente</span>
                            <i class="fas fa-chevron-down"></i>
                        </div>
                        <div class="html-bloco-content" style="display: none;">
                            <div class="html-preview">
                                <div style="background: #f8f9fa; padding: 25px; border-radius: 8px; border-left: 4px solid #007bff;">
                                    <p style="font-style: italic;">"Produto excelente! Recomendo."</p>
                                    <div style="display: flex; align-items: center; gap: 15px;">
                                        <div style="width: 50px; height: 50px; background: #007bff; color: white; border-radius: 50%; display: flex; align-items: center; justify-content: center;">JS</div>
                                        <div>
                                            <strong>João da Silva</strong>
                                            <div style="font-size: 13px;">Cliente desde 2023</div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="html-buttons">
                                <button class="btn-inserir-html" onclick="inserirHtmlPronto('depoimento')">
                                    <i class="fas fa-plus-circle"></i> Inserir no Editor
                                </button>
                            </div>
                        </div>
                    </div>
                    
                    <!-- Bloco 5: Banner Promocional -->
                    <div class="html-bloco">
                        <div class="html-bloco-header" onclick="toggleBloco(this)">
                            <span><i class="fas fa-tag"></i> Banner Promocional</span>
                            <i class="fas fa-chevron-down"></i>
                        </div>
                        <div class="html-bloco-content" style="display: none;">
                            <div class="html-preview">
                                <div style="background: linear-gradient(135deg, #dc3545 0%, #c82333 100%); color: white; padding: 40px 30px; text-align: center; border-radius: 8px;">
                                    <h2 style="margin: 0 0 10px; color: white;">SUPER OFERTA</h2>
                                    <p style="font-size: 48px; font-weight: bold; margin: 10px 0; color: white;">50% OFF</p>
                                    <a href="#" style="background: white; color: #dc3545; padding: 12px 35px; text-decoration: none; border-radius: 4px;">APROVEITAR</a>
                                </div>
                            </div>
                            <div class="html-buttons">
                                <button class="btn-inserir-html" onclick="inserirHtmlPronto('banner_promo')">
                                    <i class="fas fa-plus-circle"></i> Inserir no Editor
                                </button>
                            </div>
                        </div>
                    </div>
                    
                    <!-- Bloco 6: Tabela de Preços -->
                    <div class="html-bloco">
                        <div class="html-bloco-header" onclick="toggleBloco(this)">
                            <span><i class="fas fa-table"></i> Tabela de Preços</span>
                            <i class="fas fa-chevron-down"></i>
                        </div>
                        <div class="html-bloco-content" style="display: none;">
                            <div class="html-preview">
                                <table style="width: 100%; border-collapse: collapse;">
                                    <tr style="background: #007bff; color: white;">
                                        <th style="padding: 8px; border: 1px solid #007bff;">Produto</th>
                                        <th style="padding: 8px; border: 1px solid #007bff;">Preço</th>
                                    </tr>
                                    <tr>
                                        <td style="padding: 8px; border: 1px solid #ddd;">Básico</td>
                                        <td style="padding: 8px; border: 1px solid #ddd;">R$ 49,90</td>
                                    </tr>
                                    <tr>
                                        <td style="padding: 8px; border: 1px solid #ddd;">Profissional</td>
                                        <td style="padding: 8px; border: 1px solid #ddd;">R$ 99,90</td>
                                    </tr>
                                </table>
                            </div>
                            <div class="html-buttons">
                                <button class="btn-inserir-html" onclick="inserirHtmlPronto('tabela_precos')">
                                    <i class="fas fa-plus-circle"></i> Inserir no Editor
                                </button>
                            </div>
                        </div>
                    </div>
                    
                    <!-- Bloco 7: Informações de Contato -->
                    <div class="html-bloco">
                        <div class="html-bloco-header" onclick="toggleBloco(this)">
                            <span><i class="fas fa-address-card"></i> Bloco de Contato</span>
                            <i class="fas fa-chevron-down"></i>
                        </div>
                        <div class="html-bloco-content" style="display: none;">
                            <div class="html-preview">
                                <div style="display: flex; justify-content: space-around; padding: 20px; background: #f8f9fa; border-radius: 8px;">
                                    <div style="text-align: center;">
                                        <i class="fas fa-phone" style="font-size: 24px; color: #007bff;"></i>
                                        <div>(11) 1234-5678</div>
                                    </div>
                                    <div style="text-align: center;">
                                        <i class="fas fa-envelope" style="font-size: 24px; color: #007bff;"></i>
                                        <div>contato@email.com</div>
                                    </div>
                                </div>
                            </div>
                            <div class="html-buttons">
                                <button class="btn-inserir-html" onclick="inserirHtmlPronto('contato')">
                                    <i class="fas fa-plus-circle"></i> Inserir no Editor
                                </button>
                            </div>
                        </div>
                    </div>
                    
                    <button class="btn-fechar-modal" onclick="fecharModalHtmlPronto()">
                        <i class="fas fa-times"></i> Fechar
                    </button>
                </div>
            </div>
            
            <div class="templates-list">
                <h2>Templates Existentes</h2>
                <?php if ($templates->num_rows > 0): ?>
                    <?php while ($temp = $templates->fetch_assoc()): ?>
                        <div class="template-item">
                            <div>
                                <h3><?= htmlspecialchars($temp['nome']) ?></h3>
                                <div>
                                    Assunto: <?= htmlspecialchars($temp['assunto']) ?> | 
                                    Tipo: <?= ucfirst($temp['tipo']) ?> | 
                                    Status: <span class="<?= $temp['ativo'] ? 'status-ativo' : 'status-inativo' ?>">
                                        <?= $temp['ativo'] ? 'Ativo' : 'Inativo' ?>
                                    </span>
                                </div>
                            </div>
                            <div class="template-actions">
                                <a href="?editar=<?= $temp['id'] ?>" class="btn-editar">Editar</a>
                                <button class="btn-excluir" onclick="confirmarExclusao(<?= $temp['id'] ?>, '<?= htmlspecialchars($temp['nome']) ?>')">Excluir</button>
                            </div>
                        </div>
                    <?php endwhile; ?>
                <?php else: ?>
                    <p>Nenhum template cadastrado.</p>
                <?php endif; ?>
            </div>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/quill@2.0.2/dist/quill.js"></script>
    <script>
    // Variáveis globais
    let selectedImage = null;
    let isResizing = false;
    let startX, startY, startWidth, startHeight;
    let resizeDirection = null;
    let htmlEditor = null;

    // Inicializar Quill
    var quill = new Quill('#editor', {
        theme: 'snow',
        modules: {
            toolbar: {
                container: [
                    ['bold', 'italic', 'underline', 'strike'],
                    ['blockquote', 'code-block'],
                    [{ 'header': 1 }, { 'header': 2 }],
                    [{ 'list': 'ordered'}, { 'list': 'bullet' }],
                    [{ 'script': 'sub'}, { 'script': 'super' }],
                    [{ 'indent': '-1'}, { 'indent': '+1' }],
                    [{ 'direction': 'rtl' }],
                    [{ 'size': ['small', false, 'large', 'huge'] }],
                    [{ 'header': [1, 2, 3, 4, 5, 6, false] }],
                    [{ 'color': [] }, { 'background': [] }],
                    [{ 'font': [] }],
                    [{ 'align': [] }],
                    ['link', 'image', 'video'],
                    ['clean']
                ],
                handlers: {
                    'image': function() {
                        abrirModalImagem();
                    }
                }
            }
        },
        placeholder: 'Digite o conteúdo do email aqui...'
    });

    // Função para adicionar botões personalizados na toolbar
    function adicionarBotoesPersonalizados() {
        const toolbar = document.querySelector('.ql-toolbar');
        if (toolbar) {
            // Botão de variáveis
            if (!document.querySelector('.ql-variavel')) {
                const btnVariavel = document.createElement('button');
                btnVariavel.type = 'button';
                btnVariavel.className = 'ql-variavel';
                btnVariavel.innerHTML = '<i class="fas fa-code"></i> Variáveis';
                btnVariavel.onclick = function(e) {
                    e.preventDefault();
                    e.stopPropagation();
                    abrirModalVariaveis();
                };
                toolbar.appendChild(btnVariavel);
            }
            
            // Botão de HTML pronto
            if (!document.querySelector('.ql-html-pronto')) {
                const btnHtmlPronto = document.createElement('button');
                btnHtmlPronto.type = 'button';
                btnHtmlPronto.className = 'ql-html-pronto';
                btnHtmlPronto.innerHTML = '<i class="fas fa-file-code"></i> HTML Pronto';
                btnHtmlPronto.onclick = function(e) {
                    e.preventDefault();
                    e.stopPropagation();
                    abrirModalHtmlPronto();
                };
                toolbar.appendChild(btnHtmlPronto);
            }
        } else {
            setTimeout(adicionarBotoesPersonalizados, 100);
        }
    }

    // Inicializar CodeMirror para o editor de HTML
    function inicializarHtmlEditor() {
        const textarea = document.getElementById('html_customizado');
        if (textarea && !htmlEditor) {
            htmlEditor = CodeMirror.fromTextArea(textarea, {
                lineNumbers: true,
                mode: 'htmlmixed',
                theme: 'monokai',
                lineWrapping: true,
                indentUnit: 4,
                tabSize: 4,
                matchBrackets: true,
                autoCloseTags: true,
                autoCloseBrackets: true,
                foldGutter: true,
                gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter"]
            });
            
            htmlEditor.setSize('100%', 400);
        }
    }

    // Inicializar sistema de redimensionamento de imagens
    function initializeImageResize() {
        const editor = document.querySelector('.ql-editor');
        if (!editor) return;

        // Remover seleção ao clicar fora
        document.addEventListener('click', function(e) {
            if (!e.target.closest('.ql-editor img')) {
                removeImageSelection();
            }
        });

        // Selecionar imagem ao clicar
        editor.addEventListener('click', function(e) {
            if (e.target.tagName === 'IMG') {
                e.preventDefault();
                e.stopPropagation();
                selectImage(e.target);
            }
        });

        // Iniciar redimensionamento
        editor.addEventListener('mousedown', function(e) {
            if (!selectedImage) return;
            
            const rect = selectedImage.getBoundingClientRect();
            const threshold = 10;
            
            // Detectar canto para redimensionar
            if (e.clientX >= rect.right - threshold && e.clientY >= rect.bottom - threshold) {
                resizeDirection = 'se';
            } else if (e.clientX <= rect.left + threshold && e.clientY <= rect.top + threshold) {
                resizeDirection = 'nw';
            } else if (e.clientX >= rect.right - threshold && e.clientY <= rect.top + threshold) {
                resizeDirection = 'ne';
            } else if (e.clientX <= rect.left + threshold && e.clientY >= rect.bottom - threshold) {
                resizeDirection = 'sw';
            } else {
                return;
            }
            
            e.preventDefault();
            
            isResizing = true;
            startX = e.clientX;
            startY = e.clientY;
            startWidth = selectedImage.offsetWidth;
            startHeight = selectedImage.offsetHeight;
            
            selectedImage.classList.add('resizing');
            
            document.addEventListener('mousemove', onMouseMove);
            document.addEventListener('mouseup', onMouseUp);
        });
    }

    // Função para selecionar imagem
    function selectImage(img) {
        removeImageSelection();
        img.classList.add('selected-image');
        selectedImage = img;
    }

    // Função para remover seleção
    function removeImageSelection() {
        if (selectedImage) {
            selectedImage.classList.remove('selected-image', 'resizing');
            selectedImage = null;
        }
    }

    // Função durante o movimento do mouse
    function onMouseMove(e) {
        if (!isResizing || !selectedImage || !resizeDirection) return;
        
        e.preventDefault();
        
        const deltaX = e.clientX - startX;
        const deltaY = e.clientY - startY;
        
        let newWidth = startWidth;
        let newHeight = startHeight;
        
        // Calcular novas dimensões baseado na direção
        switch(resizeDirection) {
            case 'se':
                newWidth = Math.max(50, startWidth + deltaX);
                newHeight = Math.max(50, startHeight + deltaY);
                break;
            case 'nw':
                newWidth = Math.max(50, startWidth - deltaX);
                newHeight = Math.max(50, startHeight - deltaY);
                break;
            case 'ne':
                newWidth = Math.max(50, startWidth + deltaX);
                newHeight = Math.max(50, startHeight - deltaY);
                break;
            case 'sw':
                newWidth = Math.max(50, startWidth - deltaX);
                newHeight = Math.max(50, startHeight + deltaY);
                break;
        }
        
        selectedImage.style.width = newWidth + 'px';
        selectedImage.style.height = newHeight + 'px';
    }

    // Função ao soltar o mouse
    function onMouseUp() {
        if (isResizing && selectedImage) {
            selectedImage.classList.remove('resizing');
        }
        
        isResizing = false;
        resizeDirection = null;
        
        document.removeEventListener('mousemove', onMouseMove);
        document.removeEventListener('mouseup', onMouseUp);
    }

    // Carregar conteúdo existente se estiver editando
    <?php if ($editando && !empty($template['conteudo'])): ?>
    quill.root.innerHTML = <?= json_encode($template['conteudo']) ?>;
    <?php endif; ?>

    // Aguardar o DOM estar pronto
    document.addEventListener('DOMContentLoaded', function() {
        adicionarBotoesPersonalizados();
        initializeImageResize();
        inicializarHtmlEditor();
        
        // Adicionar listeners para novas imagens
        quill.on('text-change', function() {
            setTimeout(function() {
                initializeImageResize();
            }, 500);
        });
    });

    // ========== FUNÇÕES DE 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');
        
        // Atualizar CodeMirror se mudar para aba HTML
        if (tab === 'html' && htmlEditor) {
            setTimeout(() => {
                htmlEditor.refresh();
            }, 100);
        }
    }

    // ========== FUNÇÕES DO MODAL DE IMAGEM ==========
    function abrirModalImagem() {
        document.getElementById('imagemUrl').value = '';
        document.getElementById('modalImagemUrl').style.display = 'block';
    }
    
    function fecharModalImagem() {
        document.getElementById('modalImagemUrl').style.display = 'none';
    }
    
    function inserirImagemUrl() {
        var url = document.getElementById('imagemUrl').value.trim();
        
        if (!url) {
            Swal.fire('Atenção', 'Informe a URL da imagem', 'warning');
            return;
        }
        
        if (!url.match(/^https?:\/\/.+/i)) {
            Swal.fire('Erro', 'URL inválida. A URL deve começar com http:// ou https://', 'error');
            return;
        }
        
        var range = quill.getSelection(true);
        quill.insertEmbed(range.index, 'image', url);
        
        fecharModalImagem();
        
        setTimeout(() => {
            initializeImageResize();
        }, 500);
    }

    // ========== FUNÇÕES DO MODAL DE VARIÁVEIS ==========
    function abrirModalVariaveis() {
        document.getElementById('modalVariaveis').style.display = 'block';
    }
    
    function fecharModalVariaveis() {
        document.getElementById('modalVariaveis').style.display = 'none';
    }
    
    function selecionarVariavel(variavel) {
        var range = quill.getSelection();
        
        if (range && range.index !== undefined) {
            quill.insertText(range.index, variavel);
            quill.setSelection(range.index + variavel.length, 0);
        } else {
            quill.focus();
            setTimeout(function() {
                var newRange = quill.getSelection();
                if (newRange && newRange.index !== undefined) {
                    quill.insertText(newRange.index, variavel);
                    quill.setSelection(newRange.index + variavel.length, 0);
                } else {
                    var length = quill.getLength();
                    quill.insertText(length, variavel);
                    quill.setSelection(length + variavel.length, 0);
                }
            }, 10);
        }
        
        fecharModalVariaveis();
    }

    // ========== FUNÇÕES DO MODAL DE HTML PRONTO ==========
    function abrirModalHtmlPronto() {
        document.getElementById('modalHtmlPronto').style.display = 'block';
    }
    
    function fecharModalHtmlPronto() {
        document.getElementById('modalHtmlPronto').style.display = 'none';
    }
    
    function toggleBloco(elemento) {
        const content = elemento.nextElementSibling;
        const icon = elemento.querySelector('.fas.fa-chevron-down, .fas.fa-chevron-up');
        
        if (content.style.display === 'none' || content.style.display === '') {
            content.style.display = 'block';
            if (icon) icon.style.transform = 'rotate(180deg)';
        } else {
            content.style.display = 'none';
            if (icon) icon.style.transform = 'rotate(0deg)';
        }
    }
    
    function inserirHtmlPronto(tipo) {
        let html = '';
        
        switch(tipo) {
            case 'cta_simples':
                html = `
                    <div style="text-align: center; padding: 20px; background: #f8f9fa; border-radius: 8px; margin: 15px 0;">
                        <p style="margin-bottom: 15px; color: #333;">Clique no botão abaixo para mais informações:</p>
                        <a href="#" style="background: #007bff; color: white; padding: 12px 25px; text-decoration: none; border-radius: 5px; display: inline-block; font-weight: 500;">Saiba Mais</a>
                    </div>
                `;
                break;
                
            case 'card_produto':
                html = `
                    <div style="border: 1px solid #ddd; border-radius: 8px; padding: 15px; max-width: 300px; margin: 15px 0; box-shadow: 0 2px 5px rgba(0,0,0,0.1);">
                        <h3 style="margin-top: 0; color: #333;">Nome do Produto</h3>
                        <p style="color: #666; line-height: 1.5;">Descrição breve do produto com seus principais benefícios e características.</p>
                        <p style="font-size: 24px; color: #007bff; font-weight: bold; margin: 10px 0;">R$ 99,90</p>
                        <button style="background: #28a745; color: white; border: none; padding: 10px; width: 100%; border-radius: 4px; cursor: pointer; font-size: 16px;">Comprar Agora</button>
                    </div>
                `;
                break;
                
            case 'newsletter':
                html = `
                    <div style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; padding: 25px; border-radius: 8px; margin: 15px 0;">
                        <h2 style="margin-top: 0; color: white;">Assine Nossa Newsletter</h2>
                        <p style="margin-bottom: 20px;">Receba as últimas novidades e ofertas exclusivas</p>
                        <div style="display: flex; gap: 10px; flex-wrap: wrap;">
                            <input type="email" placeholder="Seu e-mail" style="flex: 1; min-width: 200px; padding: 12px; border: none; border-radius: 4px; font-size: 14px;">
                            <button style="background: #ffc107; color: #333; border: none; padding: 12px 25px; border-radius: 4px; cursor: pointer; font-weight: bold;">Assinar</button>
                        </div>
                    </div>
                `;
                break;
                
            case 'depoimento':
                html = `
                    <div style="background: #f8f9fa; padding: 25px; border-radius: 8px; border-left: 4px solid #007bff; margin: 15px 0;">
                        <p style="font-style: italic; margin-bottom: 20px; color: #555; line-height: 1.6;">"Este produto superou todas as minhas expectativas. Recomendo fortemente para todos que buscam qualidade e bom atendimento!"</p>
                        <div style="display: flex; align-items: center; gap: 15px;">
                            <div style="width: 50px; height: 50px; background: #007bff; color: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: bold; font-size: 20px;">JS</div>
                            <div>
                                <strong style="font-size: 16px;">João da Silva</strong>
                                <div style="font-size: 13px; color: #666;">Cliente desde 2023</div>
                            </div>
                        </div>
                    </div>
                `;
                break;
                
            case 'banner_promo':
                html = `
                    <div style="background: linear-gradient(135deg, #dc3545 0%, #c82333 100%); color: white; padding: 40px 30px; text-align: center; border-radius: 8px; margin: 15px 0;">
                        <span style="background: rgba(255,255,255,0.2); padding: 5px 15px; border-radius: 20px; font-size: 12px; text-transform: uppercase; letter-spacing: 1px;">PROMOÇÃO POR TEMPO LIMITADO</span>
                        <h2 style="margin: 20px 0 10px; font-size: 32px; color: white;">SUPER OFERTA</h2>
                        <p style="font-size: 48px; font-weight: bold; margin: 10px 0; color: white;">50% OFF</p>
                        <p style="margin-bottom: 25px; font-size: 18px;">em todos os produtos do site</p>
                        <a href="#" style="background: white; color: #dc3545; padding: 12px 35px; text-decoration: none; border-radius: 4px; font-weight: bold; font-size: 16px; display: inline-block;">APROVEITAR AGORA</a>
                    </div>
                `;
                break;
                
            case 'tabela_precos':
                html = `
                    <table style="width: 100%; border-collapse: collapse; margin: 15px 0; font-family: Arial, sans-serif;">
                        <thead>
                            <tr style="background: #007bff; color: white;">
                                <th style="padding: 12px; text-align: left; border: 1px solid #007bff;">Produto</th>
                                <th style="padding: 12px; text-align: left; border: 1px solid #007bff;">Preço</th>
                                <th style="padding: 12px; text-align: left; border: 1px solid #007bff;">Prazo</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr style="border-bottom: 1px solid #ddd;">
                                <td style="padding: 10px; border: 1px solid #ddd;">Produto Básico</td>
                                <td style="padding: 10px; border: 1px solid #ddd;">R$ 49,90</td>
                                <td style="padding: 10px; border: 1px solid #ddd;">Imediato</td>
                            </tr>
                            <tr style="border-bottom: 1px solid #ddd; background: #f8f9fa;">
                                <td style="padding: 10px; border: 1px solid #ddd;">Produto Profissional</td>
                                <td style="padding: 10px; border: 1px solid #ddd;">R$ 99,90</td>
                                <td style="padding: 10px; border: 1px solid #ddd;">Imediato</td>
                            </tr>
                            <tr>
                                <td style="padding: 10px; border: 1px solid #ddd;">Produto Enterprise</td>
                                <td style="padding: 10px; border: 1px solid #ddd;">R$ 199,90</td>
                                <td style="padding: 10px; border: 1px solid #ddd;">Imediato</td>
                            </tr>
                        </tbody>
                    </table>
                `;
                break;
                
            case 'contato':
                html = `
                    <div style="display: flex; justify-content: space-around; flex-wrap: wrap; gap: 20px; padding: 20px; background: #f8f9fa; border-radius: 8px; margin: 15px 0;">
                        <div style="text-align: center; min-width: 120px;">
                            <i class="fas fa-phone" style="font-size: 28px; color: #007bff; margin-bottom: 10px; display: block;"></i>
                            <div style="font-weight: bold;">Telefone</div>
                            <div style="font-size: 14px; color: #666;">(11) 1234-5678</div>
                        </div>
                        <div style="text-align: center; min-width: 120px;">
                            <i class="fas fa-envelope" style="font-size: 28px; color: #007bff; margin-bottom: 10px; display: block;"></i>
                            <div style="font-weight: bold;">E-mail</div>
                            <div style="font-size: 14px; color: #666;">contato@empresa.com</div>
                        </div>
                        <div style="text-align: center; min-width: 120px;">
                            <i class="fas fa-map-marker-alt" style="font-size: 28px; color: #007bff; margin-bottom: 10px; display: block;"></i>
                            <div style="font-weight: bold;">Endereço</div>
                            <div style="font-size: 14px; color: #666;">São Paulo, SP</div>
                        </div>
                    </div>
                `;
                break;
        }
        
        if (html) {
            var range = quill.getSelection(true);
            quill.clipboard.dangerouslyPasteHTML(range.index, html);
        }
        
        fecharModalHtmlPronto();
    }
    
    // ========== FUNÇÃO PARA SALVAR TEMPLATE ==========
    function salvarTemplate() {
        var nome = document.getElementById('nome').value.trim();
        var assunto = document.getElementById('assunto').value.trim();
        var conteudo = quill.root.innerHTML;
        
        // Atualizar CodeMirror se existir
        if (htmlEditor) {
            htmlEditor.save();
        }
        
        if (!nome || !assunto) {
            Swal.fire('Atenção', 'Preencha nome e assunto', 'warning');
            return;
        }
        
        // Verificar se pelo menos um tipo de conteúdo foi preenchido
        if (!quill.getText().trim() && !document.getElementById('html_customizado').value.trim()) {
            Swal.fire('Atenção', 'Preencha o conteúdo no editor visual ou no HTML personalizado', 'warning');
            return;
        }
        
        document.getElementById('conteudoHtml').value = conteudo;
        document.getElementById('templateForm').submit();
    }
    
    // ========== CONFIRMAR EXCLUSÃO ==========
    function confirmarExclusao(id, nome) {
        Swal.fire({
            title: 'Confirmar',
            html: `Excluir template "${nome}"?`,
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#e74c3c',
            confirmButtonText: 'Excluir'
        }).then((result) => {
            if (result.isConfirmed) {
                window.location.href = 'excluir_template.php?id=' + id;
            }
        });
    }
    
    // Fechar modais ao clicar fora
    window.onclick = function(event) {
        var modalVariaveis = document.getElementById('modalVariaveis');
        var modalImagem = document.getElementById('modalImagemUrl');
        var modalHtmlPronto = document.getElementById('modalHtmlPronto');
        
        if (event.target == modalVariaveis) {
            fecharModalVariaveis();
        }
        
        if (event.target == modalImagem) {
            fecharModalImagem();
        }
        
        if (event.target == modalHtmlPronto) {
            fecharModalHtmlPronto();
        }
    }
    
    // Fechar modais com tecla ESC
    document.addEventListener('keydown', function(event) {
        if (event.key === 'Escape') {
            fecharModalVariaveis();
            fecharModalImagem();
            fecharModalHtmlPronto();
        }
    });
    
    // 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
if (isset($conn)) $conn->close();
?>