<?php
session_start();

// Log de erro detalhado
error_reporting(E_ALL);
ini_set('display_errors', 1);
ini_set('log_errors', 1);
ini_set('error_log', 'php_errors.log');

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

// Informações da sessão
$tenant_id = $_SESSION['tenant_id'] ?? null;
$usuario_id = $_SESSION['usuario_id'] ?? null;
$permissao = $_SESSION['permissao'] ?? 'usuario';
$is_admin = ($permissao === 'admin');
$is_super_admin = ($permissao === 'super_admin');

// Validação do tenant_id
if (!$tenant_id || !is_numeric($tenant_id)) {
    die("Erro: tenant_id inválido.");
}

// CSRF token
if (!isset($_SESSION['csrf_token'])) {
    $_SESSION['csrf_token'] = bin2hex(random_bytes(32));
}

require_once 'conexao.php';

// ========== FUNÇÕES DE CONTROLE DE ACESSO ========== //

function usuarioPodeVisualizarFunil($conn, $usuario_id, $funil_id) {
    global $is_admin;
    if ($is_admin) return true;
    
    $stmt = $conn->prepare("SELECT 1 FROM permissoes_funis WHERE usuario_id = ? AND funil_id = ? AND visualizar = 1");
    $stmt->bind_param("ii", $usuario_id, $funil_id);
    $stmt->execute();
    return $stmt->get_result()->num_rows > 0;
}

function usuarioPodeMoverClientes($conn, $usuario_id) {
    global $is_admin, $is_super_admin;
    
    // Permite para super admin, admin E usuários comuns
    if ($is_super_admin || $is_admin) {
        return true;
    }
    
    // Para usuários comuns, verifica se tem permissão específica
    $stmt = $conn->prepare("SELECT mover_clientes FROM permissoes_usuarios WHERE usuario_id = ?");
    $stmt->bind_param("i", $usuario_id);
    $stmt->execute();
    $result = $stmt->get_result();
    
    // Se não há registro específico, permite por padrão
    if ($result->num_rows === 0) {
        return true;
    }
    
    // Se há registro, verifica a permissão
    return $result->fetch_assoc()['mover_clientes'] == 1;
}

// Buscar se o usuário pode ver todos os clientes (regra do lista_clientes.php)
$ver_todos_clientes = 0;
if (!$is_admin && !$is_super_admin) {
    $stmtPerm = $conn->prepare("SELECT ver_todos_clientes FROM usuarios WHERE id = ?");
    $stmtPerm->bind_param("i", $usuario_id);
    $stmtPerm->execute();
    $resultPerm = $stmtPerm->get_result();
    if ($resultPerm->num_rows > 0) {
        $linhaPerm = $resultPerm->fetch_assoc();
        $ver_todos_clientes = isset($linhaPerm['ver_todos_clientes']) ? (int)$linhaPerm['ver_todos_clientes'] : 0;
    }
    $stmtPerm->close();
}

// ========== CONSULTAS ========== //

// Obter funis que o usuário pode visualizar
$funis_disponiveis = [];
if ($is_admin) {
    $stmt = $conn->prepare("SELECT id, nome, padrao FROM funis WHERE tenant_id = ? AND ativo = TRUE ORDER BY nome ASC");
    $stmt->bind_param("i", $tenant_id);
} else {
    $stmt = $conn->prepare("SELECT f.id, f.nome, f.padrao FROM funis f 
                           JOIN permissoes_funis pf ON f.id = pf.funil_id 
                           WHERE f.tenant_id = ? AND pf.usuario_id = ? AND pf.visualizar = 1 AND f.ativo = TRUE
                           ORDER BY f.nome ASC");
    $stmt->bind_param("ii", $tenant_id, $usuario_id);
}
$stmt->execute();
$result = $stmt->get_result();
while ($row = $result->fetch_assoc()) {
    $funis_disponiveis[] = $row;
}

// Verificar se há funis disponíveis - se não houver, verificar se já existe funil padrão
if (empty($funis_disponiveis)) {
    // PRIMEIRO verificar se já existe um funil padrão para o tenant
    $stmt_check = $conn->prepare("SELECT id FROM funis WHERE tenant_id = ? AND padrao = 1 LIMIT 1");
    $stmt_check->bind_param("i", $tenant_id);
    $stmt_check->execute();
    $result_check = $stmt_check->get_result();
    
    if ($result_check->num_rows === 0) {
        // Só criar funil padrão se não existir nenhum para o tenant
        require_once 'funil_padrao.php';
        
        $nome_funil_padrao = "Funil Padrão";
        
        $stmt = $conn->prepare("INSERT INTO funis (tenant_id, nome, padrao, ativo, criado_em) VALUES (?, ?, TRUE, TRUE, NOW())");
        $stmt->bind_param("is", $tenant_id, $nome_funil_padrao);
        $stmt->execute();
        $funil_id = $stmt->insert_id;
        
        foreach ($funil_padrao['etapas'] as $ordem => $etapa) {
            $stmt = $conn->prepare("INSERT INTO etapas_funis (funil_id, nome, ordem, cor) VALUES (?, ?, ?, ?)");
            $stmt->bind_param("isis", $funil_id, $etapa['nome'], $ordem, $etapa['cor']);
            $stmt->execute();
        }
    } else {
        // Já existe funil padrão - obter o ID
        $row = $result_check->fetch_assoc();
        $funil_id = $row['id'];
    }
    
    // AGORA vincular o usuário ao funil (seja o novo criado ou o existente)
    if (!$is_admin) {
        // Verificar se o usuário já tem permissão para este funil
        $stmt_perm_check = $conn->prepare("SELECT 1 FROM permissoes_funis WHERE usuario_id = ? AND funil_id = ?");
        $stmt_perm_check->bind_param("ii", $usuario_id, $funil_id);
        $stmt_perm_check->execute();
        
        if ($stmt_perm_check->get_result()->num_rows === 0) {
            $stmt_perm = $conn->prepare("INSERT INTO permissoes_funis (usuario_id, funil_id, visualizar, editar, excluir) VALUES (?, ?, TRUE, FALSE, FALSE)");
            $stmt_perm->bind_param("ii", $usuario_id, $funil_id);
            $stmt_perm->execute();
        }
    }
    
    // Recarregar a lista de funis disponíveis
    if ($is_admin) {
        $stmt = $conn->prepare("SELECT id, nome, padrao FROM funis WHERE tenant_id = ? AND ativo = TRUE ORDER BY nome ASC");
        $stmt->bind_param("i", $tenant_id);
    } else {
        $stmt = $conn->prepare("SELECT f.id, f.nome, f.padrao FROM funis f 
                               JOIN permissoes_funis pf ON f.id = pf.funil_id 
                               WHERE f.tenant_id = ? AND pf.usuario_id = ? AND pf.visualizar = 1 AND f.ativo = TRUE
                               ORDER BY f.nome ASC");
        $stmt->bind_param("ii", $tenant_id, $usuario_id);
    }
    $stmt->execute();
    $result = $stmt->get_result();
    $funis_disponiveis = [];
    while ($row = $result->fetch_assoc()) {
        $funis_disponiveis[] = $row;
    }
    
    header("Location: index.php");
    exit;
}

// Obter o funil ativo (selecionado ou padrão)
$funil_id = $_GET['funil'] ?? null;
$_SESSION['funil_ativo'] = $funil_id;
// Verificar se o funil selecionado está entre os disponíveis
if ($funil_id) {
    $funil_permitido = false;
    foreach ($funis_disponiveis as $funil) {
        if ($funil['id'] == $funil_id) {
            $funil_permitido = true;
            break;
        }
    }
    
    if (!$funil_permitido) {
        $funil_id = null;
    }
}

// Se não foi especificado um funil válido, pegar o padrão ou o primeiro disponível
if (!$funil_id) {
    foreach ($funis_disponiveis as $funil) {
        if ($funil['padrao']) {
            $funil_id = $funil['id'];
            break;
        }
    }
    
    if (!$funil_id) {
        foreach ($funis_disponiveis as $funil) {
            if (strtolower($funil['nome']) === 'funil padrao' || strtolower($funil['nome']) === 'funil padrão') {
                $funil_id = $funil['id'];
                break;
            }
        }
    }
    
    if (!$funil_id && !empty($funis_disponiveis)) {
        $funil_id = $funis_disponiveis[0]['id'];
    }
}

// Obter etapas do funil ATUAL - MODIFICADO PARA INCLUIR TIPO_ENTRADA E QUESTIONARIO
$etapas = [];
$sql = "SELECT e.* 
        FROM etapas_funis e 
        WHERE e.funil_id = ? 
        ORDER BY e.ordem ASC";
$stmt = $conn->prepare($sql);
$stmt->bind_param("i", $funil_id);
$stmt->execute();
$result = $stmt->get_result();
while ($etapa = $result->fetch_assoc()) {
    $etapas[$etapa['id']] = $etapa;
}

// Buscar todos os usuários para mapear responsáveis
$usuarios_map = [];
$stmt_usuarios = $conn->prepare("SELECT id, nome FROM usuarios WHERE tenant_id = ?");
$stmt_usuarios->bind_param("i", $tenant_id);
$stmt_usuarios->execute();
$result_usuarios = $stmt_usuarios->get_result();
while ($usuario = $result_usuarios->fetch_assoc()) {
    $usuarios_map[$usuario['id']] = $usuario['nome'];
}

// Buscar tipos de atividade disponíveis
$tipos_atividade = [];
$stmt_tipos = $conn->prepare("SELECT DISTINCT nome FROM atividades WHERE tenant_id = ? ORDER BY nome ASC");
$stmt_tipos->bind_param("i", $tenant_id);
$stmt_tipos->execute();
$result_tipos = $stmt_tipos->get_result();
while ($tipo = $result_tipos->fetch_assoc()) {
    $tipos_atividade[] = $tipo['nome'];
}

// CONSULTA PARA OBTER TEMPERATURAS DOS FORMULÁRIOS - CORRIGIDA
$temperaturas_clientes = [];
try {
    $stmt_temperatura = $conn->prepare("
        SELECT cliente_id, temperatura 
        FROM respostas_formulario 
        WHERE temperatura IS NOT NULL AND cliente_id IS NOT NULL
    ");
    $stmt_temperatura->execute();
    $result_temperatura = $stmt_temperatura->get_result();
    while ($row = $result_temperatura->fetch_assoc()) {
        $temperaturas_clientes[$row['cliente_id']] = $row['temperatura'];
    }
} catch (Exception $e) {
    error_log("Erro ao buscar temperaturas: " . $e->getMessage());
}

// Consulta para incluir atividades dos clientes - MODIFICADA PARA INCLUIR FILTRO DE PERMISSÕES
$sql = "SELECT c.*, 
               a.id as atividade_id, 
               a.nome as atividade_nome,
               a.descricao as atividade_descricao,
               a.data_agendada,
               a.concluida,
               a.data_conclusao,
               a.notificar,
               a.data_notificacao
        FROM clientes c 
        LEFT JOIN atividades a ON a.cliente_id = c.id
        LEFT JOIN etapas_funis e ON c.etapa_funil_id = e.id 
        WHERE c.tenant_id = ? AND e.funil_id = ?";
$stmt = $conn->prepare($sql);
$stmt->bind_param("ii", $tenant_id, $funil_id);
$stmt->execute();
$resultado = $stmt->get_result();

if ($resultado === false) {
    die("Erro na consulta: " . $conn->error);
}

// Organizar clientes por etapa do funil ATUAL
$clientes_por_etapa = [];
foreach ($etapas as $id => $etapa) {
    $clientes_por_etapa[$id] = [];
}

// Array temporário para agrupar atividades por cliente
$clientes_com_atividades = [];

while ($row = $resultado->fetch_assoc()) {
    $cliente_id = $row['id'];
    
    // VERIFICAÇÃO DE PERMISSÃO - REGRAS DO lista_clientes.php
    $pode_visualizar = false;
    
    // Administradores ou usuários com permissão para ver todos os clientes
    if ($is_admin || $is_super_admin || $ver_todos_clientes === 1) {
        $pode_visualizar = true;
    } else {
        // Usuários comuns - apenas os clientes onde são responsáveis
        if ($row['responsavel'] == $usuario_id) {
            $pode_visualizar = true;
        }
    }
    
    if (!$pode_visualizar) {
        continue; // Pular cliente se não tiver permissão
    }
    
    if (!isset($clientes_com_atividades[$cliente_id])) {
        $clientes_com_atividades[$cliente_id] = $row;
        $clientes_com_atividades[$cliente_id]['atividades'] = [];
        // Adicionar temperatura do cliente se existir
        $clientes_com_atividades[$cliente_id]['temperatura'] = $temperaturas_clientes[$cliente_id] ?? null;
    }
    
    if ($row['atividade_id']) {
        $clientes_com_atividades[$cliente_id]['atividades'][] = [
            'id' => $row['atividade_id'],
            'nome' => $row['atividade_nome'],
            'descricao' => $row['atividade_descricao'],
            'data_agendada' => $row['data_agendada'],
            'concluida' => $row['concluida'],
            'data_conclusao' => $row['data_conclusao'],
            'notificar' => $row['notificar'],
            'data_notificacao' => $row['data_notificacao']
        ];
    }
}

// Distribuir clientes pelas etapas
foreach ($clientes_com_atividades as $cliente) {
    $etapa_id = $cliente['etapa_funil_id'];
    if (isset($clientes_por_etapa[$etapa_id])) {
        $clientes_por_etapa[$etapa_id][] = $cliente;
    } else {
        $primeira_etapa_id = array_key_first($etapas);
        $clientes_por_etapa[$primeira_etapa_id][] = $cliente;
    }
}

// Obter nome do funil ativo
$sql_funil = "SELECT nome FROM funis WHERE id = ?";
$stmt_funil = $conn->prepare($sql_funil);
$stmt_funil->bind_param("i", $funil_id);
$stmt_funil->execute();
$result_funil = $stmt_funil->get_result();
$funil_info = $result_funil->fetch_assoc();

// Exibir mensagem de sucesso se existir
if (isset($_SESSION['mensagem'])) {
    echo '<div style="position: fixed; top: 80px; right: 20px; padding: 10px 20px; background: #2ecc71; color: white; border-radius: 4px; z-index: 2000;">'
       . htmlspecialchars($_SESSION['mensagem'])
       . '</div>';
    unset($_SESSION['mensagem']);

    echo '<script>
            setTimeout(function() {
                document.querySelector("div[style*=\'position: fixed\']").style.display = "none";
            }, 3000);
          </script>';
}

// Função para mapear tipos de atividade para emojis
function getEmojiForActivityType($tipo) {
    $tipo_lower = strtolower(trim($tipo));
    
    // Mapeamento de tipos para emojis
    $emoji_map = [
        'reunião' => '👥',
        'reuniao' => '👥',
        'ligação' => '📞',
        'ligacao' => '📞',
        'ligar' => '📞',
        'email' => '📧',
        'e-mail' => '📧',
        'proposta' => '📄',
        'visita' => '🏢',
        'orcamento' => '💰',
        'orçamento' => '💰',
        'whatsapp' => '💬',
        'entrega' => '📦',
        'teste' => '🧪',
        'testar' => '🧪',
        'trabalhar' => '💼',
        'verificar' => '🔍',
        'notificação' => '🔔',
        'notificacao' => '🔔',
        'conversar' => '💬',
        'falhar' => '📞',
        'cronometrada' => '⏱️',
        'ir pra casa' => '🏠',
        'casa' => '🏠',
        'cliente' => '👤',
        'conversar' => '💬',
        'trabalhar' => '💼',
        'verificar' => '🔍',
        'nova atividade' => '🆕',
        'nome da atividade' => '📝',
        'notas' => '📝',
        'objeto' => '📦',
        'thiago vieira' => '👤',
        'vetlar' => '🚗'
    ];
    
    // Verificar correspondências exatas primeiro
    foreach ($emoji_map as $key => $emoji) {
        if ($tipo_lower === $key) {
            return $emoji;
        }
    }
    
    // Verificar correspondências parciais
    foreach ($emoji_map as $key => $emoji) {
        if (strpos($tipo_lower, $key) !== false) {
            return $emoji;
        }
    }
    
    // Emoji padrão para tipos não mapeados
    return '📋';
}

// Função para obter a cor da temperatura
function getTemperaturaColor($temperatura) {
    switch ($temperatura) {
        case 'congelado':
            return '#3498db'; // Azul
        case 'frio':
            return '#2ecc71'; // Verde
        case 'morno':
            return '#f1c40f'; // Amarelo
        case 'quente':
            return '#e67e22'; // Laranja
        case 'muito_quente':
            return '#e74c3c'; // Vermelho
        case 'passou':
            return '#9b59b6'; // Roxo
        default:
            return '#bdc3c7'; // Cinza (padrão)
    }
}

// Função para obter o gradiente da temperatura
function getTemperaturaGradient($temperatura) {
    switch ($temperatura) {
        case 'congelado':
            return 'linear-gradient(to bottom, #3498db, #2980b9)'; // Azul
        case 'frio':
            return 'linear-gradient(to bottom, #2ecc71, #27ae60)'; // Verde
        case 'morno':
            return 'linear-gradient(to bottom, #f1c40f, #f39c12)'; // Amarelo
        case 'quente':
            return 'linear-gradient(to bottom, #e67e22, #d35400)'; // Laranja
        case 'muito_quente':
            return 'linear-gradient(to bottom, #e74c3c, #c0392b)'; // Vermelho
        case 'passou':
            return 'linear-gradient(to bottom, #9b59b6, #8e44ad)'; // Roxo
        default:
            return 'linear-gradient(to bottom, #bdc3c7, #95a5a6)'; // Cinza (padrão)
    }
}
?>
<!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, maximum-scale=1.0, user-scalable=no">
    <title>SON - Sistema de Organização de Negócios</title>
    <meta name="csrf-token" content="<?php echo $_SESSION['csrf_token']; ?>">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            background-color: #f5f5f5;
            overflow-x: hidden;
        }
        
        .header-fixed {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            background-color: #ffffffff;
            padding: 12px 25px;
            z-index: 1000;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 30px;
            height: 45px;
        }
        
        .header-fixed img {
            height: 40px;
        }
        
        .header-fixed h2 {
            margin: 0;
            flex-grow: 1;
            text-align: center;
        }
        
        /* Menu Lateral Recolhível */
        .sidebar {
            position: fixed;
            left: 0;
            top: 70px;
            height: calc(100vh - 70px);
            width: 60px;
            background: white;
            box-shadow: 2px 0 5px rgba(0,0,0,0.1);
            z-index: 999;
            transition: width 0.3s ease;
            overflow-x: hidden;
        }
        
        .sidebar-menu {
            list-style: none;
            padding: 0;
            margin: 0;
        }
        
        .sidebar-menu li {
            border-bottom: 1px solid #eee;
        }
        
        .sidebar-menu a {
            display: flex;
            align-items: center;
            padding: 15px 20px;
            text-decoration: none;
            color: #333;
            white-space: nowrap;
            transition: background-color 0.3s;
        }
        
        .sidebar-menu i {
            width: 24px;
            height: 24px;
            margin-right: 15px;
            text-align: center;
            flex-shrink: 0;
        }
        
        .sidebar-menu .menu-text {
            opacity: 0;
            transition: opacity 0.3s ease;
        }
        
        .submenu-sidebar {
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.3s ease;
            background-color: #f9f9f9;
        }
        
        .submenu-sidebar a {
            padding-left: 50px;
            font-size: 0.9em;
        }
        
        .menu-item-sidebar {
            position: relative;
        }
        
        .menu-item-sidebar > a:after {
            content: "▶";
            margin-left: auto;
            font-size: 0.8em;
            transition: transform 0.3s;
        }
        
        .content-wrapper {
            margin-top: 25px;
            padding: 0;
            margin-left: 60px;
            transition: margin-left 0.3s ease;
        }
        
        .container_2 {
            max-width: 1800px;
            margin: 0 auto;
        }
        
        .quadro-colunas {
            display: flex;
            gap: 10px;
            margin-top: 0;
            overflow-x: auto;
            padding: 15px 10px;
            scroll-behavior: smooth;
            background-color: #f5f5f5;
        }
        
        .coluna {
            flex: 1;
            min-width: 200px;
            background: white;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
            padding: 12px;
            min-height: 500px;
            display: flex;
            flex-direction: column;
            position: relative;
        }
        
        .coluna h2 {
            text-align: center;
            margin-top: 0;
            padding: 10px 0;
            border-bottom: 1px solid #eee;
            font-size: 1.1em;
        }
        
        .coluna-content {
            flex-grow: 1;
            overflow-y: auto;
            max-height: calc(100vh - 220px);
        }
        
        .coluna-1 { border-top: 4px solid #B0C4DE; }
        .coluna-2 { border-top: 4px solid #ADD8E6; }
        .coluna-3 { border-top: 4px solid #87CEEB; }
        .coluna-4 { border-top: 4px solid #87CEFA; }
        .coluna-5 { border-top: 4px solid #00BFFF; }
        .coluna-6 { border-top: 4px solid #1E90FF; }
        
        .cliente-item {
            background: rgb(235, 232, 232);
            padding: 8px;
            margin-bottom: 8px;
            border-radius: 4px;
            cursor: pointer;
            user-select: none;
            transition: transform 0.2s, box-shadow 0.2s;
            position: relative;
            overflow: hidden;
        }
        
        .cliente-item:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 8px rgba(0,0,0,0.1);
        }
        
        .cliente-item h3 {
            margin: 0 0 5px 0;
            font-size: 1em;
        }
        
        .cliente-item p {
            margin: 3px 0;
            font-size: 0.85em;
            color: #666;
        }
        
        /* BARRA DE TEMPERATURA - NOVO ESTILO */
        .temperatura-bar {
            position: absolute;
            top: 0;
            right: 0;
            width: 6px;
            height: 100%;
            background: #bdc3c7; /* Cor padrão cinza */
            border-top-right-radius: 4px;
            border-bottom-right-radius: 4px;
            transition: all 0.3s ease;
        }
        
        .temperatura-bar.congelado {
            background: linear-gradient(to bottom, #3498db, #2980b9);
        }
        
        .temperatura-bar.frio {
            background: linear-gradient(to bottom, #2ecc71, #27ae60);
        }
        
        .temperatura-bar.morno {
            background: linear-gradient(to bottom, #f1c40f, #f39c12);
        }
        
        .temperatura-bar.quente {
            background: linear-gradient(to bottom, #e67e22, #d35400);
        }
        
        .temperatura-bar.muito_quente {
            background: linear-gradient(to bottom, #e74c3c, #c0392b);
        }
        
        .temperatura-bar.passou {
            background: linear-gradient(to bottom, #9b59b6, #8e44ad);
        }
        
        .modal {
            display: none;
            position: fixed;
            z-index: 2000;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            overflow: auto;
            background-color: rgba(0,0,0,0.5);
            backdrop-filter: blur(5px);
        }
        
        .modal-content {
            background-color: #fefefe;
            margin: 5% auto;
            padding: 20px;
            border-radius: 8px;
            width: 120%;
            max-width: 1400px;
            box-shadow: 0 4px 8px rgba(0,0,0,0.2);
            max-height: 80vh;
            overflow-y: auto;
            position: relative;
        }
        
        .close-modal {
            position: absolute;
            right: 20px;
            top: 10px;
            color: #aaa;
            font-size: 28px;
            font-weight: bold;
            cursor: pointer;
            z-index: 1;
        }
        
        .close-modal:hover {
            color: #333;
        }
        
        .search-container {
            display: none; /* Removido o search-container separado */
        }
        
        .search-wrapper {
            display: flex;
            align-items: center;
            width: 100%;
            max-width: 300px;
        }
        
        .search-wrapper input {
            padding: 8px 15px;
            border: 1px solid #ddd;
            border-radius: 6px;
            font-size: 14px;
            width: 100%;
            background: white;
        }
        
        .search-wrapper input:focus {
            outline: none;
            border-color: #3498db;
            box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.2);
        }
        
        #contadorResultados {
            font-size: 12px;
            color: #666;
            margin-left: 10px;
            white-space: nowrap;
        }
        
        .funil-dropdown {
            display: none;
            position: absolute;
            top: 100%;
            left: 0;
            background: white;
            border: 1px solid #ddd;
            border-radius: 4px;
            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
            z-index: 1000;
            min-width: 200px;
            max-height: 300px;
            overflow-y: auto;
        }
        
        .funil-dropdown a {
            display: block;
            padding: 8px 12px;
            text-decoration: none;
            color: #333;
        }
        
        .funil-dropdown a:hover {
            background-color: #f5f5f5;
        }
        
        .atividade-info {
            margin-top: 6px;
            padding-top: 6px;
            border-top: 1px dashed #ddd;
            font-size: 0.75em;
            color: #555;
        }
        
        .atividade-info small {
            display: block;
            line-height: 1.4;
        }
        
        .cliente-item.sem-atividade {
            background-color: rgba(204, 204, 204, 0.1);
        }
        
        .cliente-item.atividade-atrasada {
            background-color: rgba(231, 76, 60, 0.1);
        }
        
        .cliente-item.atividade-hoje {
            background-color: rgba(243, 156, 18, 0.1);
        }
        
        .cliente-item.atividade-futura {
            background-color: rgba(52, 152, 219, 0.1);
        }
        
        .cliente-item.atividade-concluida {
            background-color: rgba(39, 174, 96, 0.1);
        }
        
        .cliente-item.atividade-pendente {
            background-color: rgba(155, 89, 182, 0.1);
        }
        
        .modal-senha {
            display: none;
            position: fixed;
            z-index: 2000;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0,0,0,0.5);
        }
        
        .modal-senha-content {
            background-color: 'fefefe';
            margin: 15% auto;
            padding: 20px;
            border-radius: 8px;
            width: 40%;
            max-width: 500px;
            box-shadow: 0 4px 8px rgba(0,0,0,0.2);
        }
        
        .form-group {
            margin-bottom: 15px;
        }
        
        .form-group label {
            display: block;
            margin-bottom: 5px;
            font-weight: bold;
        }
        
        .form-group input {
            width: 100%;
            padding: 8px;
            border: 1px solid #ddd;
            border-radius: 4px;
            box-sizing: border-box;
        }
        
        .btn {
            padding: 8px 15px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-weight: bold;
        }
        
        .btn-primary {
            background-color: #3498db;
            color: white;
        }
        
        .btn-primary:hover {
            background-color: #2980b9;
        }
        
        .btn-default {
            background-color: #b14b4bff;
            color: #333;
        }
        
        .btn-default:hover {
            background-color: #aaa6a6ff;
        }
        
        .dragging {
            opacity: 0.5;
            transform: scale(0.95);
        }
        
        .drag-over {
            background-color: rgba(52, 152, 219, 0.1);
        }
        
        .updating {
            opacity: 0.6;
            position: relative;
        }
        
        .updating::after {
            content: "Salvando...";
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background: white;
            padding: 5px 10px;
            border-radius: 4px;
            font-size: 0.8em;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }
        
        .menu-btn-success {
            color: #6B8E23;
        }
        
        .menu-btn-primary {
            color: #0000FF;
        }
        
        .menu-btn-danger {
            color: #e74c3c;
        }
        
        .whatsapp-btn {
            margin-left: 15px;
            background: #25D366;
            color: white;
            border: none;
            padding: 6px 12px;
            border-radius: 4px;
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 5px;
        }
        
        .admin-fixed-btn {
            position: fixed;
            bottom: 30px;
            right: 30px;
            background: #8e44ad;
            color: white;
            width: 60px;
            height: 60px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 24px;
            box-shadow: 0 4px 8px rgba(0,0,0,0.2);
            z-index: 999;
            cursor: pointer;
            transition: all 0.3s;
        }

        .admin-fixed-btn:hover {
            transform: scale(1.1);
            box-shadow: 0 6px 12px rgba(0,0,0,0.3);
        }

        .admin-fixed-btn .tooltip {
            position: absolute;
            right: 70px;
            background: #333;
            color: white;
            padding: 5px 10px;
            border-radius: 4px;
            font-size: 14px;
            white-space: nowrap;
            opacity: 0;
            transition: opacity 0.3s;
            pointer-events: none;
        }

        .admin-fixed-btn:hover .tooltip {
            opacity: 1;
        }
        
        .timeline-message {
            position: fixed;
            bottom: 20px;
            right: 20px;
            padding: 12px 24px;
            background: #2ecc71;
            color: white;
            border-radius: 4px;
            z-index: 2000;
            box-shadow: 0 4px 12px rgba(0,0,0,0.15);
            opacity: 1;
            transition: opacity 0.5s ease;
        }
        
        .timeline-message.error {
            background: #e74c3c;
        }
        
        #trocarFunilModal .modal-content {
            max-width: 500px;
        }
        
        .form-control {
            width: 100%;
            padding: 8px;
            border: 1px solid #ddd;
            border-radius: 4px;
            margin-bottom: 15px;
        }
        
        .modal-actions {
            display: flex;
            justify-content: space-between;
            margin-top: 20px;
            padding-top: 15px;
            border-top: 1px solid #eee;
        }
        
        .modal-actions .left-actions {
            display: flex;
            gap: 10px;
        }
        
        .modal-actions .right-actions {
            display: flex;
            gap: 10px;
        }
        
        .no-funis-message {
            text-align: center;
            padding: 40px;
            background: white;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
            margin: 50px auto;
            max-width: 600px;
        }
        
        .no-funis-message h3 {
            color: #e74c3c;
            margin-bottom: 20px;
        }
        
        .no-funis-message p {
            color: #666;
            margin-bottom: 30px;
        }
        
        /* CORREÇÕES PARA OS FILTROS - MAIS ESPAÇADOS */
        .filtros-container {
            display: flex;
            flex-wrap: nowrap;
            gap: 20px;
            margin: 0;
            padding: 8px 15px;
            background: rgba(255, 255, 255, 0.9);
            border-radius: 8px;
            align-items: center;
            justify-content: flex-start;
            flex: 0 1 auto;
            min-width: 0;
            border: 1px solid #e0e0e0;
            box-shadow: 0 1px 3px rgba(0,0,0,0.1);
        }

        .filtros-section {
            display: flex;
            flex-wrap: nowrap;
            gap: 8px;
            align-items: center;
            margin: 0;
        }

        .filtros-label {
            font-weight: bold;
            color: #555;
            font-size: 13px;
            margin-right: 8px;
            white-space: nowrap;
        }

        .filtro-btn {
            padding: 8px 10px;
            border: none;
            border-radius: 6px;
            cursor: pointer;
            font-size: 13px;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 1px 3px rgba(0,0,0,0.1);
            position: relative;
            width: 36px;
            height: 36px;
            min-width: 36px;
        }

        .filtro-btn:hover {
            transform: translateY(-1px);
            box-shadow: 0 2px 4px rgba(0,0,0,0.15);
        }

        .filtro-btn.active {
            transform: translateY(-1px);
            box-shadow: 0 2px 4px rgba(0,0,0,0.2);
            border: 2px solid white;
        }

        /* Cores para os botões de status */
        .filtro-status-atrasada {
            background: #e74c3c;
            color: white;
        }
        
        .filtro-status-hoje {
            background: #f39c12;
            color: white;
        }
        
        .filtro-status-futura {
            background: #3498db;
            color: white;
        }
        
        .filtro-status-concluida {
            background: #27ae60;
            color: white;
        }
        
        .filtro-status-pendente {
            background: #9b59b6;
            color: white;
        }
        
        /* Cores para os botões de tipo */
        .filtro-tipo-outros {
            background: #34495e;
            color: white;
        }
        
        .separator {
            width: 1px;
            background: #ddd;
            height: 24px;
            margin: 0 12px;
        }
        
        /* Estilos para o carrossel de tipos de atividade */
        .tipos-carrossel {
            display: flex;
            align-items: center;
            gap: 5px;
        }
        
        .tipos-container {
            display: flex;
            gap: 6px;
            max-width: 200px;
            overflow: hidden;
        }
        
        .tipos-wrapper {
            display: flex;
            gap: 6px;
            transition: transform 0.3s ease;
        }
        
        .carrossel-btn {
            background: #34495e;
            color: white;
            border: none;
            border-radius: 50%;
            width: 28px;
            height: 28px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            font-size: 11px;
        }
        
        .carrossel-btn:hover {
            background: #2c3e50;
        }
        
        .carrossel-btn:disabled {
            background: #bdc3c7;
            cursor: not-allowed;
        }
        
        /* Tooltip para os botões */
        .tooltip {
            position: relative;
        }
        
        .tooltip:hover::after {
            content: attr(data-tooltip);
            position: absolute;
            bottom: 100%;
            left: 50%;
            transform: translateX(-50%);
            background: #333;
            color: white;
            padding: 6px 10px;
            border-radius: 4px;
            font-size: 11px;
            white-space: nowrap;
            z-index: 1000;
            margin-bottom: 6px;
        }
        
        .tooltip:hover::before {
            content: '';
            position: absolute;
            bottom: 100%;
            left: 50%;
            transform: translateX(-50%);
            border: 4px solid transparent;
            border-top-color: #333;
            margin-bottom: -1px;
        }

        /* Estilo para o contador de clientes */
        .client-count {
            background: #e0e0e0;
            color: #333;
            border-radius: 10px;
            padding: 1px 6px;
            font-size: 11px;
            font-weight: bold;
            margin-left: 6px;
        }

        /* NOVOS ESTILOS PARA O INDICADOR DE TIPO */
        .tipo-indicador {
            background: #34495e;
            color: white;
            border-radius: 10px;
            padding: 1px 6px;
            font-size: 10px;
            font-weight: bold;
            margin-left: 4px;
        }
        
        .tipo-agendamento {
            background: #e74c3c;
        }
        
        .tipo-manual {
            background: #27ae60;
        }

        .tipo-questionario {
            background: #9b59b6;
        }

        /* Modal de Agendamento */
        .modal-agendamento {
            display: none;
            position: fixed;
            z-index: 3000;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0,0,0,0.5);
        }
        
        .modal-agendamento-content {
            background-color: #fefefe;
            margin: 15% auto;
            padding: 20px;
            border-radius: 8px;
            width: 90%;
            max-width: 500px;
            box-shadow: 0 4px 8px rgba(0,0,0,0.2);
        }
        
        .modal-agendamento h3 {
            margin-top: 0;
            color: #333;
        }
        
        .modal-agendamento .form-group {
            margin-bottom: 15px;
        }
        
        .modal-agendamento label {
            display: block;
            margin-bottom: 5px;
            font-weight: bold;
        }
        
        .modal-agendamento input, .modal-agendamento textarea {
            width: 100%;
            padding: 8px;
            border: 1px solid #ddd;
            border-radius: 4px;
            box-sizing: border-box;
        }

        /* Estilos para emails múltiplos */
        .email-input-group {
            display: flex;
            align-items: center;
            gap: 8px;
            margin-bottom: 8px;
        }

        .email-input-group input {
            flex: 1;
            padding: 8px;
            border: 1px solid #ddd;
            border-radius: 4px;
            box-sizing: border-box;
        }

        .btn-remover-email {
            background: #e74c3c;
            color: white;
            border: none;
            border-radius: 4px;
            width: 32px;
            height: 32px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
        }

        .btn-remover-email:hover {
            background: #c0392b;
        }

        .btn-adicionar-email {
            background: #27ae60;
            color: white;
            border: none;
            padding: 6px 12px;
            border-radius: 4px;
            cursor: pointer;
            font-size: 0.9em;
        }

        .btn-adicionar-email:hover {
            background: #219653;
        }
        
        .modal-agendamento-actions {
            display: flex;
            justify-content: flex-end;
            gap: 10px;
            margin-top: 20px;
        }

        /* Layout do header melhorado - CENTRO E DIREITA À ESQUERDA */
        .header-left {
            display: flex;
            align-items: center;
            gap: 25px;
            flex:  0 auto;
            justify-content: flex-start;
        }

        .header-center {
            display: flex;
            align-items: center;
            gap: 25px;
            flex: 1;
            justify-content: flex-start;
            margin-left: 60px;
        }

        .header-right {
            display: flex;
            align-items: center;
            gap: 25px;
            flex: 1 0 auto;
            justify-content: flex-start;
            
        }
        
        .user-info {
            display: flex;
            align-items: center;
            gap: 12px;
        }

        .user-photo, .user-initial {
            width: 38px;
            height: 38px;
            border-radius: 50%;
        }

        .user-initial {
            background: #ccc;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: bold;
            font-size: 1.1em;
            color: #333;
        }

        /* Botão de trocar funil melhorado */
        .funil-selector {
            display: flex;
            align-items: center;
            gap: 10px;
            background: white;
            padding: 6px 12px;
            border-radius: 6px;
            border: 1px solid #e0e0e0;
            box-shadow: 0 1px 3px rgba(0,0,0,0.1);
        }

        .funil-selector h3 {
            margin: 0;
            font-weight: normal;
            color: #555;
            font-size: 1em;
            white-space: nowrap;
        }

        .funil-selector strong {
            color: #333;
        }

        .funil-button {
            background: #3498db;
            color: white;
            border: none;
            padding: 6px 12px;
            border-radius: 4px;
            cursor: pointer;
            font-size: 0.9em;
            transition: background-color 0.3s;
        }

        .funil-button:hover {
            background: #2980b9;
        }

        /* ========== ESTILOS PARA NOTIFICAÇÕES ========== */
        .notification-buttons {
            position: fixed;
            top: 100px;
            right: 20px;
            z-index: 9999;
            min-width: 300px;
            box-shadow: 0 4px 12px rgba(0,0,0,0.3);
            border-radius: 8px;
        }

        .notification-buttons .btn {
            margin: 2px;
            font-size: 0.8em;
            padding: 4px 8px;
        }

        /* Animações para notificações */
        @keyframes pulse {
            0% { transform: scale(1); }
            50% { transform: scale(1.05); }
            100% { transform: scale(1); }
        }

        .pulse-notification {
            animation: pulse 2s infinite;
        }

        .notification-badge {
            position: absolute;
            top: -5px;
            right: -5px;
            background: #dc3545;
            color: white;
            border-radius: 50%;
            width: 20px;
            height: 20px;
            font-size: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .btn-notification {
            position: relative;
        }

        /* ========== RESPONSIVIDADE ========== */
        @media (max-width: 1200px) {
            .quadro-colunas {
                flex-wrap: wrap;
                gap: 15px;
            }
            
            .coluna {
                min-width: calc(50% - 20px);
                flex: 1 1 calc(50% - 20px);
            }
            
            .modal-content {
                width: 95%;
                margin: 10% auto;
            }
        }

        @media (max-width: 768px) {
            .header-fixed {
                flex-direction: column;
                height: auto;
                padding: 10px 15px;
                gap: 15px;
            }
            
            .header-left, .header-center, .header-right {
                width: 100%;
                justify-content: center;
                margin-left: 0;
            }
            
            .header-center {
                order: 1;
            }
            
            .header-left {
                order: 2;
            }
            
            .header-right {
                order: 3;
            }
            
            .content-wrapper {
                margin-left: 0;
                margin-top: 140px; /* Ajuste para header maior */
            }
            
            .sidebar {
                top: 140px; /* Ajuste para header maior */
                height: calc(100vh - 140px);
            }
            
            .quadro-colunas {
                flex-direction: column;
                padding: 10px 5px;
            }
            
            .coluna {
                min-width: 100%;
                width: 100%;
                margin-bottom: 15px;
            }
            
            .filtros-container {
                flex-wrap: wrap;
                gap: 10px;
                justify-content: center;
                padding: 10px;
            }
            
            .filtros-section {
                justify-content: center;
                flex-wrap: wrap;
            }
            
            .search-wrapper {
                max-width: 100%;
                margin: 10px 0;
            }
            
            .modal-content {
                width: 95%;
                margin: 5% auto;
                padding: 15px;
            }
            
            .modal-agendamento-content {
                width: 95%;
                margin: 10% auto;
            }
            
            .admin-fixed-btn {
                bottom: 20px;
                right: 20px;
                width: 50px;
                height: 50px;
                font-size: 20px;
            }
        }

        @media (max-width: 480px) {
            .header-fixed {
                padding: 8px 10px;
            }
            
            .header-fixed img {
                height: 30px;
            }
            
            .funil-selector {
                flex-direction: column;
                gap: 5px;
                text-align: center;
            }
            
            .user-info {
                flex-direction: column;
                gap: 5px;
            }
            
            .coluna {
                min-width: 100%;
                padding: 8px;
            }
            
            .cliente-item {
                padding: 6px;
            }
            
            .cliente-item h3 {
                font-size: 0.9em;
            }
            
            .cliente-item p {
                font-size: 0.8em;
            }
            
            .filtro-btn {
                width: 32px;
                height: 32px;
                font-size: 12px;
            }
            
            .filtros-label {
                font-size: 12px;
            }
            
            .modal-content {
                padding: 10px;
            }
            
            .modal-actions {
                flex-direction: column;
                gap: 10px;
            }
            
            .modal-actions .left-actions,
            .modal-actions .right-actions {
                justify-content: center;
                width: 100%;
            }
        }

        /* Melhorias para tablets */
        @media (min-width: 769px) and (max-width: 1024px) {
            .coluna {
                min-width: calc(33.333% - 15px);
                flex: 1 1 calc(33.333% - 15px);
            }
            
            .header-center {
                margin-left: 30px;
            }
        }

        /* Viewport mobile específico */
        @media (max-width: 360px) {
            .cliente-item h3 {
                font-size: 0.85em;
            }
            
            .cliente-item p {
                font-size: 0.75em;
            }
            
            .atividade-info small {
                font-size: 0.7em;
            }
            
            .filtros-container {
                gap: 5px;
            }
            
            .separator {
                margin: 0 8px;
            }
        }
        /* ========== ESTILOS PARA NOTIFICAÇÕES - CORRIGIDO ========== */
/* ========== ESTILOS PARA NOTIFICAÇÕES - CORRIGIDO ========== */
.notification-container {
    position: fixed;
    top: 100px;
    right: 20px;
    z-index: 9999;
    max-width: 350px;
}

.notification-alert {
    background: #fff3cd;
    border: 1px solid #ffeaa7;
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 10px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    animation: slideInRight 0.3s ease-out;
}

.notification-alert .alert-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 10px;
}

.notification-alert .alert-title {
    font-weight: bold;
    color: #856404;
    margin: 0;
    flex-grow: 1;
    font-size: 14px;
}

.notification-alert .activity-name {
    font-size: 13px;
    color: #666;
    margin-top: 5px;
    font-weight: normal;
}

.notification-alert .btn-close {
    background: none;
    border: none;
    font-size: 18px;
    cursor: pointer;
    color: #856404;
    padding: 0;
    margin-left: 10px;
    flex-shrink: 0;
}

.notification-alert .alert-buttons {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.notification-alert .btn {
    padding: 6px 12px;
    border: 1px solid;
    border-radius: 4px;
    font-size: 12px;
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
    transition: all 0.3s;
    background: white;
}

.notification-alert .btn-outline-primary {
    color: #007bff;
    border-color: #007bff;
}

.notification-alert .btn-outline-primary:hover {
    background: #007bff;
    color: white;
}

.notification-alert .btn-outline-warning {
    color: #ffc107;
    border-color: #ffc107;
}

.notification-alert .btn-outline-warning:hover {
    background: #ffc107;
    color: black;
}

.notification-alert .btn-outline-success {
    color: #28a745;
    border-color: #28a745;
}

.notification-alert .btn-outline-success:hover {
    background: #28a745;
    color: white;
}

@keyframes slideInRight {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}

.pulse-notification {
    animation: pulse 2s infinite;
}

.notification-badge {
    position: absolute;
    top: -5px;
    right: -5px;
    background: #dc3545;
    color: white;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-notification {
    position: relative;
}
    </style>
</head>
<body>
  
<?php include 'menu_lateral.php'; ?>

  <!-- Conteúdo Principal -->
  <div class="content-wrapper">
    <div class="container_2">
        <?php if (empty($funis_disponiveis)): ?>
            <div class="no-funis-message">
                <h3><i class="fas fa-exclamation-triangle"></i> Nenhum Funil Disponível</h3>
                <p>Você não tem permissão para visualizar nenhum funil no momento.</p>
                <p>Entre em contato com o administrador do sistema para solicitar acesso aos funis.</p>
                <button class="btn btn-primary" onclick="window.location.href='logout.php'">
                    <i class="fas fa-sign-out-alt"></i> Sair
                </button>
            </div>
        <?php else: ?>
            <!-- SEÇÃO DE NOTIFICAÇÕES REMOVIDA - SISTEMA FUNCIONA EM SEGUNDO PLANO -->
            
            <div class="quadro-colunas">
                <?php 
                $cor_classes = ['coluna-1', 'coluna-2', 'coluna-3', 'coluna-4', 'coluna-5', 'coluna-6'];
                $i = 0;
                $hoje = new DateTime();
                $hoje_formatado = $hoje->format('Y-m-d');

                foreach ($etapas as $etapa_id => $etapa): 
                    $cor_class = $cor_classes[$i] ?? 'coluna-1';
                    $quantidade_clientes = count($clientes_por_etapa[$etapa_id]);
                    $tipo_entrada = $etapa['tipo_entrada'] ?? 'manual';
                    
                    // Definir indicador de tipo
                    $tipo_indicador = '';
                    $tipo_classe = '';
                    
                    switch ($tipo_entrada) {
                        case 'agendamento':
                            $tipo_indicador = 'A';
                            $tipo_classe = 'tipo-agendamento';
                            break;
                        case 'questionario':
                            $tipo_indicador = 'Q';
                            $tipo_classe = 'tipo-questionario';
                            break;
                        default:
                            $tipo_indicador = 'M';
                            $tipo_classe = 'tipo-manual';
                            break;
                    }
                ?>
                    <div class="coluna <?php echo $cor_class; ?>" data-etapa-id="<?php echo $etapa_id; ?>" data-tipo-entrada="<?php echo $tipo_entrada; ?>">
                        <h2>
                            <?php echo htmlspecialchars($etapa['nome']); ?> 
                            <span class="client-count"><?php echo $quantidade_clientes; ?></span>
                            <span class="tipo-indicador <?php echo $tipo_classe; ?>" title="<?php 
                                echo $tipo_entrada === 'agendamento' ? 'Agendamento - Abrirá modal para envio de email' : 
                                ($tipo_entrada === 'questionario' ? 'Questionário - Abrirá questionário para avaliação' : 
                                'Manual - Movimento direto'); 
                            ?>">
                                <?php echo $tipo_indicador; ?>
                            </span>
                        </h2>
                        <div class="coluna-content" data-etapa-id="<?php echo $etapa_id; ?>">
                            <?php if (!empty($clientes_por_etapa[$etapa_id])): ?>
                                <?php foreach ($clientes_por_etapa[$etapa_id] as $cliente): 
                                    $cor_atividade = 'sem-atividade';
                                    $atividade_mais_recente = null;
                                    $tem_atividade_atrasada = false;
                                    $tem_atividade_hoje = false;
                                    $tem_atividade_futura = false;
                                    $tem_atividade_concluida = false;
                                    $tem_atividade_pendente = false;

                                    if (!empty($cliente['atividades']) && is_array($cliente['atividades'])) {
                                        usort($cliente['atividades'], function($a, $b) {
                                            return strtotime($b['data_agendada']) - strtotime($a['data_agendada']);
                                        });

                                        foreach ($cliente['atividades'] as $atividade) {
                                            if ($atividade['concluida'] == 1) {
                                                $tem_atividade_concluida = true;
                                                $atividade_mais_recente = $atividade;
                                            } else {
                                                $data_agendada = new DateTime($atividade['data_agendada']);
                                                $data_agendada_formatada = $data_agendada->format('Y-m-d');

                                                if ($data_agendada < $hoje && $data_agendada_formatada !== $hoje_formatado) {
                                                    $tem_atividade_atrasada = true;
                                                    $atividade_mais_recente = $atividade;
                                                } elseif ($data_agendada_formatada === $hoje_formatado) {
                                                    $tem_atividade_hoje = true;
                                                    $atividade_mais_recente = $atividade;
                                                } elseif ($data_agendada > $hoje) {
                                                    $tem_atividade_futura = true;
                                                    $atividade_mais_recente = $atividade;
                                                } else {
                                                    $tem_atividade_pendente = true;
                                                    $atividade_mais_recente = $atividade;
                                                }
                                            }
                                        }

                                        if ($tem_atividade_atrasada) {
                                            $cor_atividade = 'atividade-atrasada';
                                        } elseif ($tem_atividade_hoje) {
                                            $cor_atividade = 'atividade-hoje';
                                        } elseif ($tem_atividade_futura) {
                                            $cor_atividade = 'atividade-futura';
                                        } elseif ($tem_atividade_concluida) {
                                            $cor_atividade = 'atividade-concluida';
                                        } elseif ($tem_atividade_pendente) {
                                            $cor_atividade = 'atividade-pendente';
                                        }
                                    }
                                    
                                    // Buscar nome do responsável
                                    $responsavel_nome = 'Não definido';
                                    if (!empty($cliente['responsavel']) && isset($usuarios_map[$cliente['responsavel']])) {
                                        $responsavel_nome = $usuarios_map[$cliente['responsavel']];
                                    }
                                    
                                    // Obter classe da temperatura
                                    $temperatura_class = '';
                                    if (!empty($cliente['temperatura'])) {
                                        $temperatura_class = $cliente['temperatura'];
                                    }
                                ?>
                                    <div class="cliente-item <?php echo $cor_atividade; ?>" 
                                         draggable="true" 
                                         data-id="<?php echo $cliente['id']; ?>" 
                                         data-etapa-original="<?php echo $etapa_id; ?>" 
                                         data-atividades='<?php echo json_encode($cliente['atividades']); ?>'
                                         data-cliente-nome="<?php echo htmlspecialchars($cliente['Nome_Cliente'] ?? $cliente['Nome'] ?? 'Cliente sem nome'); ?>"
                                         data-cliente-email="<?php echo htmlspecialchars($cliente['Email'] ?? ''); ?>"
                                         data-status-atividade="<?php echo $cor_atividade; ?>"
                                         data-temperatura="<?php echo $cliente['temperatura'] ?? ''; ?>"
                                         onclick="abrirDetalhesCliente(<?php echo $cliente['id']; ?>)">
                                         
                                        <!-- BARRA DE TEMPERATURA -->
                                        <?php if (!empty($cliente['temperatura'])): ?>
                                            <div class="temperatura-bar <?php echo $cliente['temperatura']; ?>"
                                                 title="Temperatura: <?php echo ucfirst(str_replace('_', ' ', $cliente['temperatura'])); ?>">
                                            </div>
                                        <?php endif; ?>
                                        
                                        <h3><?php echo htmlspecialchars($cliente['Nome_Cliente'] ?? $cliente['Nome'] ?? 'Cliente sem nome'); ?></h3>
                                        <p><strong>Responsável:</strong> <?php echo htmlspecialchars($responsavel_nome); ?></p>
                                        <p><strong>Email:</strong> <?php echo htmlspecialchars($cliente['Email'] ?? 'Não informado'); ?></p>
                                        <p><strong>Tel:</strong> <?php echo htmlspecialchars($cliente['Telefone'] ?? $cliente['telefone'] ?? 'Não informado'); ?></p>
                                        <?php if ($atividade_mais_recente): ?>
                                            <div class="atividade-info">
                                                <small><strong><?php echo htmlspecialchars($atividade_mais_recente['nome'] ?? 'Atividade'); ?></strong></small>
                                                <small><?php echo date('d/m/Y H:i', strtotime($atividade_mais_recente['data_agendada'])); ?></small>
                                                <?php if ($tem_atividade_atrasada): ?>
                                                    <small style="color: #e74c3c;">Atrasada</small>
                                                <?php elseif ($tem_atividade_hoje): ?>
                                                    <small style="color: #f39c12;">Para hoje</small>
                                                <?php elseif ($tem_atividade_futura): ?>
                                                    <small style="color: #3498db;">Futura</small>
                                                <?php elseif ($tem_atividade_concluida): ?>
                                                    <small style="color: #27ae60;">Concluída</small>
                                                <?php else: ?>
                                                    <small style="color: #9b59b6;">Pendente</small>
                                                <?php endif; ?>
                                            </div>
                                        <?php endif; ?>
                                    </div>
                                <?php endforeach; ?>
                            <?php else: ?>
                             
                            <?php endif; ?>
                        </div>
                    </div>
                    <?php $i++; ?>
                <?php endforeach; ?>
            </div>
        <?php endif; ?>
    </div>
  </div>

  <!-- Modal de Detalhes do Cliente -->
  <div id="detalhesModal" class="modal">
    <div class="modal-content">
        <span class="close-modal" onclick="fecharModal()">&times;</span>
        <h2>Visão Geral</h2>
        <div id="detalhesClienteConteudo">
            <!-- Conteúdo será carregado aqui via AJAX -->
        </div>
        <div class="modal-actions">
            <div class="left-actions">
                <?php if (usuarioPodeMoverClientes($conn, $usuario_id)): ?>
<button class="btn btn-primary" id="btnTrocarFunil">
    <i class="fas fa-exchange-alt"></i> Trocar Funil
</button>
                <?php endif; ?>
                <button class="btn btn-primary" id="btnEditarCliente">
                    <i class="fas fa-edit"></i> Editar
                </button>
            </div>
            <div class="right-actions">
                <button class="btn btn-default" onclick="fecharModal()">
                    <i class="fas fa-times"></i> Fechar
                </button>
            </div>
        </div>
    </div>
  </div>

  <!-- Modal de Trocar Funil -->
  <div id="trocarFunilModal" class="modal">
    <div class="modal-content">
        <span class="close-modal" onclick="fecharTrocarFunilModal()">&times;</span>
        <h2>Trocar Funil do Cliente</h2>
        <div id="trocarFunilConteudo">
            <p>Selecione o novo funil para este cliente:</p>
            <select id="novoFunilSelect" class="form-control">
                <?php foreach ($funis_disponiveis as $funil): ?>
                    <option value="<?php echo $funil['id']; ?>"><?php echo htmlspecialchars($funil['nome']); ?></option>
                <?php endforeach; ?>
            </select>
            <div style="margin-top: 20px; text-align: right;">
                <button class="btn btn-default" onclick="fecharTrocarFunilModal()">Cancelar</button>
                <button class="btn btn-primary" onclick="confirmarTrocarFunil()">Confirmar</button>
            </div>
        </div>
    </div>
  </div>

  <!-- MODAL DE AGENDAMENTO COM MÚLTIPLOS EMAILS -->
  <div id="agendamentoModal" class="modal-agendamento">
    <div class="modal-agendamento-content">
        <span class="close-modal" onclick="fecharAgendamentoModal()">&times;</span>
        <h3><i class="fas fa-calendar-alt"></i> Agendamento de Email</h3>
        <p>Esta etapa requer envio de email. Adicione os destinatários e preencha os dados abaixo:</p>
        
        <div class="form-group">
            <label for="emailsDestinatarios">Emails dos Destinatários:</label>
            <div id="emailsContainer">
                <div class="email-input-group">
                    <input type="email" class="email-destinatario" placeholder="Digite o email para envio" data-index="0">
                    <button type="button" class="btn-remover-email" onclick="removerEmail(this)" style="display:none;">
                        <i class="fas fa-times"></i>
                    </button>
                </div>
            </div>
            <button type="button" class="btn-adicionar-email" onclick="adicionarEmail()" style="margin-top: 5px; background: #27ae60; color: white; border: none; padding: 5px 10px; border-radius: 4px; cursor: pointer;">
                <i class="fas fa-plus"></i> Adicionar outro email
            </button>
        </div>
        
        <div class="form-group">
            <label for="assuntoEmail">Assunto do Email:</label>
            <input type="text" id="assuntoEmail" placeholder="Assunto do email">
        </div>
        
        <div class="form-group">
            <label for="mensagemEmail">Mensagem:</label>
            <textarea id="mensagemEmail" placeholder="Digite a mensagem do email" rows="4" style="width: 100%; padding: 8px; border: 1px solid #ddd; border-radius: 4px; box-sizing: border-box;"></textarea>
        </div>
        
        <div class="modal-agendamento-actions">
            <button class="btn btn-default" onclick="fecharAgendamentoModal()">Cancelar</button>
            <button class="btn btn-primary" onclick="confirmarAgendamento()">Enviar Emails e Mover</button>
        </div>
    </div>
  </div>

  <!-- Botão Fixo para Administração -->
  <?php if (in_array($_SESSION['permissao'], ['super_admin'])): ?>
      <div class="admin-fixed-btn" onclick="window.location.href='gerenciar_sistema.php'">
          <i class="fas fa-cog"></i>
          <span class="tooltip">Administração</span>
      </div>
  <?php endif; ?>

<script>
// ========== VARIÁVEIS GLOBAIS ========== //
let clienteSelecionadoId = null;
let etapaAtualId = null;
let etapaOrigemId = null;
let etapaDestinoId = null;
let clienteDragData = null;
let filtroStatusAtivo = null;
let filtroTipoAtivo = null;
let carrosselPosicao = 0;
let todosTiposVisiveis = false;
let emailCounter = 1;
let notificacoesAtivas = new Map();

// ========== SISTEMA DE NOTIFICAÇÕES CORRIGIDO (SEM UI) ========== //

// Verificar e pedir permissão para notificações (SEM UI)
function inicializarNotificacoes() {
    if (!("Notification" in window)) {
        console.log("Este navegador não suporta notificações desktop");
        return false;
    }

    if (Notification.permission === "default") {
        Notification.requestPermission().then(permission => {
            if (permission === "granted") {
                console.log("Permissão para notificações concedida");
                verificarNotificacoesBrowser();
            }
        });
    } else if (Notification.permission === "granted") {
        console.log("Permissão já concedida");
        verificarNotificacoesBrowser();
    }
    
    return Notification.permission === "granted";
}

// Verificar notificações no navegador (SEM UI)
function verificarNotificacoesBrowser() {
    console.log("=== VERIFICANDO NOTIFICAÇÕES ===");
    
    // SEM verificação de checkbox - sempre ativo
    if (Notification.permission !== "granted") {
        return;
    }

    const timestamp = new Date().getTime();
    const url = `buscar_notificacoes.php?t=${timestamp}`;
    
    console.log("Buscando notificações:", url);
    
    fetch(url)
        .then(response => {
            if (!response.ok) throw new Error('Erro: ' + response.status);
            return response.json();
        })
        .then(data => {
            console.log("Resposta notificações:", data);
            
            if (data && data.success === true) {
                const notificacoes = data.notificacoes || [];
                atualizarBadgeNotificacao(notificacoes.length);
                
                if (notificacoes.length > 0) {
                    console.log(`📢 ${notificacoes.length} notificação(ões) encontradas`);
                    notificacoes.forEach(notificacao => {
                        mostrarNotificacaoPersistente(notificacao);
                    });
                } else {
                    console.log("✅ Nenhuma notificação pendente");
                }
            }
        })
        .catch(error => {
            console.error('Erro ao verificar notificações:', error);
        });
}

// Função simplificada - SEM UI
function atualizarStatusNotificacoes(mensagem) {
    console.log("Status Notificações:", mensagem);
    // Apenas log, sem atualizar UI
}

// Adicionar badge de notificação no título da página
function atualizarBadgeNotificacao(quantidade) {
    const title = document.title.replace(/^\(\d+\)\s*/, '');
    
    if (quantidade > 0) {
        document.title = `(${quantidade}) ${title}`;
    } else {
        document.title = title;
    }
}

function mostrarNotificacaoPersistente(notificacao) {
    if (!notificacao) return;
    
    try {
        const dataHora = new Date(notificacao.data_agendada);
        const agora = new Date();
        const diffMinutos = Math.round((dataHora - agora) / (1000 * 60));
        const isAtrasada = diffMinutos < 0;

        const dataFormatada = dataHora.toLocaleString('pt-BR', {
            day: '2-digit',
            month: '2-digit',
            year: 'numeric',
            hour: '2-digit',
            minute: '2-digit'
        });

        let bodyText = `📋 ${notificacao.nome || 'Atividade'}\n`;
        bodyText += `📅 ${dataFormatada}\n`;
        
        if (notificacao.duracao_minutos) {
            bodyText += `⏱️ ${formatarDuracao(notificacao.duracao_minutos)}\n`;
        }
        
        if (notificacao.Nome_Cliente) {
            bodyText += `👤 ${notificacao.Nome_Cliente}\n`;
        }
        
        bodyText += isAtrasada ? 
            `🔴 ATRASADA ${Math.abs(diffMinutos)}min` : 
            `🟡 Em ${diffMinutos}min`;

        // Criar notificação persistente
        const notification = new Notification(
            isAtrasada ? '🔴 Atividade Atrasada' : '⏰ Lembrete de Atividade',
            {
                body: bodyText,
                icon: '/favicon_io/favicon-32x32.png',
                badge: '/favicon_io/favicon-32x32.png',
                requireInteraction: true, // Não fecha sozinha
                tag: 'son-persistent-' + notificacao.id
            }
        );

        // Armazenar referência
        notificacoesAtivas.set(notificacao.id, notification);

        // Quando a notificação é fechada
        notification.onclose = () => {
            notificacoesAtivas.delete(notificacao.id);
            fecharNotificacaoPagina(notificacao.id);
        };

        // Quando clica na notificação
        notification.onclick = () => {
            notification.close();
            abrirDetalhesAtividadeNotificacao(notificacao.id);
        };

        // Criar botões de ação na página
        criarBotoesAcaoNaPagina(notificacao);

    } catch (error) {
        console.error('Erro ao criar notificação persistente:', error);
    }
}

// Criar botões de ação na página
function criarBotoesAcaoNaPagina(notificacao) {
    const atividadeId = notificacao.id;
    const existingContainer = document.getElementById(`botoes-notificacao-${atividadeId}`);
    if (existingContainer) {
        existingContainer.remove();
    }

    // Garantir que o container principal existe
    let notificationContainer = document.querySelector('.notification-container');
    if (!notificationContainer) {
        notificationContainer = document.createElement('div');
        notificationContainer.className = 'notification-container';
        document.body.appendChild(notificationContainer);
    }

    const alertDiv = document.createElement('div');
    alertDiv.id = `botoes-notificacao-${atividadeId}`;
    alertDiv.className = 'notification-alert';
    
    alertDiv.innerHTML = `
        <div class="alert-header">
            <div>
                <strong class="alert-title">⏰ Notificação Ativa</strong>
                <div class="activity-name">${notificacao.nome || 'Atividade'}</div>
            </div>
            <button type="button" class="btn-close" onclick="fecharNotificacaoPagina(${atividadeId})">×</button>
        </div>
        <div class="alert-buttons">
            <button type="button" class="btn btn-outline-primary" onclick="adiarNotificacao(${atividadeId}, 5)">
                ⏰ 5min
            </button>
            <button type="button" class="btn btn-outline-warning" onclick="adiarNotificacao(${atividadeId}, 15)">
                ⏰ 15min
            </button>
            <button type="button" class="btn btn-outline-success" onclick="abrirDetalhesAtividadeNotificacao(${atividadeId})">
                📅 Ver
            </button>
        </div>
    `;
    
    notificationContainer.appendChild(alertDiv);
}
function fecharNotificacaoPagina(atividadeId) {
    const container = document.getElementById(`botoes-notificacao-${atividadeId}`);
    if (container) {
        container.remove();
    }
    
    // Limpar container principal se estiver vazio
    const notificationContainer = document.querySelector('.notification-container');
    if (notificationContainer && notificationContainer.children.length === 0) {
        notificationContainer.remove();
    }
    
    // Fechar também a notificação do navegador
    const notification = notificacoesAtivas.get(atividadeId);
    if (notification) {
        notification.close();
    }
}

// Função para adiar notificação
function adiarNotificacao(atividadeId, minutos) {
    // Fechar notificação atual
    fecharNotificacaoPagina(atividadeId);
    
    fetch('adiar_notificacao.php', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/x-www-form-urlencoded',
        },
        body: `id=${atividadeId}&minutos=${minutos}&csrf_token=<?php echo $_SESSION['csrf_token']; ?>`
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            console.log(`Notificação adiada por ${minutos} minutos`);
            
            // Mostrar confirmação
            if (Notification.permission === "granted") {
                const confirmation = new Notification('⏰ Notificação Adiada', {
                    body: `Lembrete reagendado para daqui a ${minutos} minutos`,
                    icon: '/favicon_io/favicon-32x32.png',
                    requireInteraction: false
                });
                
                // Fechar confirmação após 3 segundos
                setTimeout(() => {
                    if (confirmation) confirmation.close();
                }, 3000);
            }
        } else {
            console.error('Erro ao adiar notificação:', data.message);
        }
    })
    .catch(error => {
        console.error('Erro ao adiar notificação:', error);
    });
}

// Função para abrir detalhes da atividade a partir da notificação
function abrirDetalhesAtividadeNotificacao(atividadeId) {
    // Fechar notificação
    fecharNotificacaoPagina(atividadeId);
    
    // Buscar dados da atividade e abrir modal
    fetch('buscar_atividade.php', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/x-www-form-urlencoded',
        },
        body: `id=${atividadeId}&csrf_token=<?php echo $_SESSION['csrf_token']; ?>`
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            // Simular evento para abrir modal
            const eventoSimulado = {
                id: atividadeId,
                title: data.atividade.nome,
                extendedProps: data.atividade
            };
            mostrarDetalhesAtividade(eventoSimulado);
        } else {
            alert('Erro ao carregar atividade: ' + data.message);
        }
    })
    .catch(error => {
        console.error('Erro ao buscar atividade:', error);
        alert('Erro ao carregar detalhes da atividade.');
    });
}

// Função para formatar duração
function formatarDuracao(minutos) {
    if (minutos < 60) {
        return minutos + ' minutos';
    } else {
        const horas = Math.floor(minutos / 60);
        const minutosRestantes = minutos % 60;
        if (minutosRestantes === 0) {
            return horas + ' hora' + (horas > 1 ? 's' : '');
        } else {
            return horas + 'h' + (minutosRestantes < 10 ? '0' : '') + minutosRestantes + 'min';
        }
    }
}

// ========== FUNÇÕES DO SISTEMA PRINCIPAL ========== //

async function recarregarAtividadesCliente(clienteId, clienteElement) {
    try {
        console.log('🔄 Recarregando atividades para cliente:', clienteId);
        
        const response = await fetch(`obter_atividades_cliente.php?cliente_id=${clienteId}`);
        
        if (!response.ok) {
            throw new Error('Erro na resposta do servidor');
        }
        
        const atividades = await response.json();
        console.log('📋 Atividades recebidas:', atividades);
        
        if (atividades && atividades.length > 0) {
            // Atualizar o atributo data-atividades do elemento
            clienteElement.setAttribute('data-atividades', JSON.stringify(atividades));
            
            // Atualizar a exibição das atividades no card
            atualizarExibicaoAtividades(clienteElement, atividades);
            
            console.log('✅ Atividades atualizadas no card');
        } else {
            console.log('ℹ️ Nenhuma atividade encontrada para este cliente');
            // Limpar exibição de atividades se não houver
            limparExibicaoAtividades(clienteElement);
        }
    } catch (error) {
        console.error('❌ Erro ao recarregar atividades:', error);
    }
}

function atualizarExibicaoAtividades(clienteElement, atividades) {
    // Encontrar ou criar a seção de atividades
    let atividadeInfo = clienteElement.querySelector('.atividade-info');
    
    if (!atividadeInfo) {
        atividadeInfo = document.createElement('div');
        atividadeInfo.className = 'atividade-info';
        clienteElement.appendChild(atividadeInfo);
    }
    
    // Ordenar atividades por data (mais recente primeiro)
    atividades.sort((a, b) => new Date(b.data_agendada) - new Date(a.data_agendada));
    const atividadeMaisRecente = atividades[0];
    
    // Atualizar o conteúdo
    const hoje = new Date();
    const dataAtividade = new Date(atividadeMaisRecente.data_agendada);
    const hojeFormatado = hoje.toISOString().split('T')[0];
    const dataAtividadeFormatada = dataAtividade.toISOString().split('T')[0];
    
    let status = '';
    let corStatus = '';
    
    if (atividadeMaisRecente.concluida) {
        status = 'Concluída';
        corStatus = '#27ae60';
    } else if (dataAtividadeFormatada < hojeFormatado) {
        status = 'Atrasada';
        corStatus = '#e74c3c';
    } else if (dataAtividadeFormatada === hojeFormatado) {
        status = 'Para hoje';
        corStatus = '#f39c12';
    } else {
        status = 'Futura';
        corStatus = '#3498db';
    }
    
    atividadeInfo.innerHTML = `
        <small><strong>${atividadeMaisRecente.nome || 'Atividade'}</strong></small>
        <small>${formatarDataHora(atividadeMaisRecente.data_agendada)}</small>
        <small style="color: ${corStatus};">${status}</small>
    `;
    
    // ⭐⭐ CORREÇÃO CRÍTICA: ATUALIZAR O ATRIBUTO data-status-atividade ⭐⭐
    const novaClasseStatus = determinarClasseStatusAtividade(atividades);
    clienteElement.setAttribute('data-status-atividade', novaClasseStatus);
    
    // Atualizar a classe de cor do card
    atualizarCorCardAtividade(clienteElement, atividades);
}

function determinarClasseStatusAtividade(atividades) {
    if (!atividades || atividades.length === 0) {
        return 'sem-atividade';
    }
    
    const hoje = new Date();
    const hojeFormatado = hoje.toISOString().split('T')[0];
    
    let temAtrasada = false;
    let temHoje = false;
    let temFutura = false;
    let temConcluida = false;
    
    atividades.forEach(atividade => {
        if (atividade.concluida) {
            temConcluida = true;
        } else {
            const dataAtividade = new Date(atividade.data_agendada);
            const dataAtividadeFormatada = dataAtividade.toISOString().split('T')[0];
            
            if (dataAtividadeFormatada < hojeFormatado) {
                temAtrasada = true;
            } else if (dataAtividadeFormatada === hojeFormatado) {
                temHoje = true;
            } else {
                temFutura = true;
            }
        }
    });
    
    if (temAtrasada) {
        return 'atividade-atrasada';
    } else if (temHoje) {
        return 'atividade-hoje';
    } else if (temFutura) {
        return 'atividade-futura';
    } else if (temConcluida) {
        return 'atividade-concluida';
    } else {
        return 'atividade-pendente';
    }
}

function limparExibicaoAtividades(clienteElement) {
    const atividadeInfo = clienteElement.querySelector('.atividade-info');
    if (atividadeInfo) {
        atividadeInfo.remove();
    }
    
    // Resetar cor do card para sem atividade
    const classes = ['sem-atividade', 'atividade-atrasada', 'atividade-hoje', 'atividade-futura', 'atividade-concluida', 'atividade-pendente'];
    classes.forEach(cls => clienteElement.classList.remove(cls));
    clienteElement.classList.add('sem-atividade');
    
    // ⭐⭐ CORREÇÃO CRÍTICA: ATUALIZAR O ATRIBUTO data-status-atividade ⭐⭐
    clienteElement.setAttribute('data-status-atividade', 'sem-atividade');
}

function formatarDataHora(dataHora) {
    const date = new Date(dataHora);
    return date.toLocaleDateString('pt-BR') + ' ' + date.toLocaleTimeString('pt-BR', {
        hour: '2-digit',
        minute: '2-digit'
    });
}

function atualizarCorCardAtividade(clienteElement, atividades) {
    // Remover classes de cor existentes
    const classes = ['sem-atividade', 'atividade-atrasada', 'atividade-hoje', 'atividade-futura', 'atividade-concluida', 'atividade-pendente'];
    classes.forEach(cls => clienteElement.classList.remove(cls));
    
    if (!atividades || atividades.length === 0) {
        clienteElement.classList.add('sem-atividade');
        return;
    }
    
    const hoje = new Date();
    const hojeFormatado = hoje.toISOString().split('T')[0];
    
    let temAtrasada = false;
    let temHoje = false;
    let temFutura = false;
    let temConcluida = false;
    
    atividades.forEach(atividade => {
        if (atividade.concluida) {
            temConcluida = true;
        } else {
            const dataAtividade = new Date(atividade.data_agendada);
            const dataAtividadeFormatada = dataAtividade.toISOString().split('T')[0];
            
            if (dataAtividadeFormatada < hojeFormatado) {
                temAtrasada = true;
            } else if (dataAtividadeFormatada === hojeFormatado) {
                temHoje = true;
            } else {
                temFutura = true;
            }
        }
    });
    
    if (temAtrasada) {
        clienteElement.classList.add('atividade-atrasada');
    } else if (temHoje) {
        clienteElement.classList.add('atividade-hoje');
    } else if (temFutura) {
        clienteElement.classList.add('atividade-futura');
    } else if (temConcluida) {
        clienteElement.classList.add('atividade-concluida');
    } else {
        clienteElement.classList.add('atividade-pendente');
    }
}

// ========== FUNÇÕES DO MODAL DE AGENDAMENTO COM MÚLTIPLOS EMAILS ========== //

function adicionarEmail() {
    const emailsContainer = document.getElementById('emailsContainer');
    const newEmailGroup = document.createElement('div');
    newEmailGroup.className = 'email-input-group';
    newEmailGroup.innerHTML = `
        <input type="email" class="email-destinatario" placeholder="Digite o email para envio" data-index="${emailCounter}">
        <button type="button" class="btn-remover-email" onclick="removerEmail(this)">
            <i class="fas fa-times"></i>
        </button>
    `;
    emailsContainer.appendChild(newEmailGroup);
    emailCounter++;
    
    // Atualizar visibilidade dos botões de remover
    atualizarBotoesRemover();
}

function removerEmail(button) {
    const emailGroup = button.closest('.email-input-group');
    emailGroup.remove();
    atualizarBotoesRemover();
}

function atualizarBotoesRemover() {
    const emailGroups = document.querySelectorAll('.email-input-group');
    const removeButtons = document.querySelectorAll('.btn-remover-email');
    
    // Mostrar botão de remover apenas se houver mais de um email
    if (emailGroups.length > 1) {
        removeButtons.forEach(btn => btn.style.display = 'flex');
    } else {
        removeButtons.forEach(btn => btn.style.display = 'none');
    }
}

function debugAgendamento(clienteData, etapaDestino) {
    console.log('=== DEBUG AGENDamento ===');
    console.log('Cliente Data:', clienteData);
    console.log('Cliente ID:', clienteSelecionadoId);
    console.log('Etapa Destino ID:', etapaDestinoId);
    console.log('CSRF Token:', document.querySelector('meta[name="csrf-token"]')?.getAttribute('content'));
    console.log('=== FIM DEBUG ===');
}

function abrirModalAgendamento(clienteData, etapaDestino) {
    debugAgendamento(clienteData, etapaDestino);
    
    // Limpar emails anteriores
    document.getElementById('emailsContainer').innerHTML = `
        <div class="email-input-group">
            <input type="email" class="email-destinatario" placeholder="Digite o email para envio" data-index="0">
            <button type="button" class="btn-remover-email" onclick="removerEmail(this)" style="display:none;">
                <i class="fas fa-times"></i>
            </button>
        </div>
    `;
    emailCounter = 1;
    
    // Preencher dados do modal
    const primeiroEmail = document.querySelector('.email-destinatario');
    
    // Verificar se o email do cliente está disponível e é válido
    if (clienteData.email && validarEmail(clienteData.email)) {
        primeiroEmail.value = clienteData.email;
    } else {
        primeiroEmail.value = ''; // Limpar se não for válido
        primeiroEmail.placeholder = 'Email do cliente não disponível - digite manualmente';
    }
    
    // Preencher assunto e mensagem com valores padrão
    document.getElementById('assuntoEmail').value = `Agendamento - ${clienteData.nome || 'Cliente'}`;
    document.getElementById('mensagemEmail').value = `Prezado(a),\n\nGostaríamos de agendar uma conversa sobre nossos serviços.\n\nAtenciosamente,\n${document.querySelector('.user-info div:first-child').textContent.trim()}`;
    
    // Armazenar dados para uso posterior
    clienteSelecionadoId = clienteData.id;
    etapaDestinoId = etapaDestino;
    clienteDragData = clienteData;
    
    // Mostrar modal
    document.getElementById('agendamentoModal').style.display = 'block';
    
    // Focar no primeiro campo de email
    setTimeout(() => {
        primeiroEmail.focus();
    }, 100);
}

function fecharAgendamentoModal() {
    document.getElementById('agendamentoModal').style.display = 'none';
    // Limpar dados
    clienteSelecionadoId = null;
    etapaDestinoId = null;
    clienteDragData = null;
}

function obterEmailsDestinatarios() {
    const emailInputs = document.querySelectorAll('.email-destinatario');
    const emails = [];
    
    emailInputs.forEach(input => {
        const email = input.value.trim();
        if (email && validarEmail(email)) {
            emails.push(email);
        }
    });
    
    return emails;
}

function validarEmail(email) {
    const regex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
    return regex.test(email);
}

async function confirmarAgendamento() {
    const emailsDestinatarios = obterEmailsDestinatarios();
    const assunto = document.getElementById('assuntoEmail').value.trim();
    const mensagem = document.getElementById('mensagemEmail').value.trim();
    
    // Validações mais detalhadas
    if (emailsDestinatarios.length === 0) {
        alert('Por favor, adicione pelo menos um email destinatário válido.');
        return;
    }
    
    // Verificar se há emails inválidos
    const emailsInvalidos = emailsDestinatarios.filter(email => !validarEmail(email));
    if (emailsInvalidos.length > 0) {
        alert('Os seguintes emails são inválidos: ' + emailsInvalidos.join(', '));
        return;
    }
    
    if (!assunto) {
        alert('Por favor, informe o assunto do email.');
        document.getElementById('assuntoEmail').focus();
        return;
    }
    
    if (!mensagem) {
        alert('Por favor, informe a mensagem do email.');
        document.getElementById('mensagemEmail').focus();
        return;
    }

    if (!clienteSelecionadoId) {
        alert('Erro: Cliente não identificado.');
        return;
    }

    if (!etapaDestinoId) {
        alert('Erro: Etapa de destino não identificada.');
        return;
    }

    // OBTER CSRF TOKEN - CORREÇÃO APLICADA
    const csrfToken = document.querySelector('meta[name="csrf-token"]').getAttribute('content');
    
    console.log('DEBUG - Dados que serão enviados:', {
        cliente_id: clienteSelecionadoId,
        emails_destinatarios: emailsDestinatarios,
        assunto: assunto,
        mensagem: mensagem,
        etapa_destino_id: etapaDestinoId,
        csrf_token: csrfToken
    });

    const btnConfirmar = document.querySelector('#agendamentoModal .btn-primary');
    btnConfirmar.disabled = true;
    btnConfirmar.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Enviando...';

    try {
        if (!csrfToken) {
            throw new Error('Token de segurança não encontrado');
        }

        console.log('Enviando dados:', {
            cliente_id: clienteSelecionadoId,
            emails_destinatarios: emailsDestinatarios,
            assunto: assunto,
            mensagem: mensagem,
            etapa_destino_id: etapaDestinoId,
            csrf_token: csrfToken // INCLUINDO CSRF TOKEN
        });

        // Primeiro, enviar os emails
        const emailResponse = await fetch('enviar_email_agendamento.php', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({
                cliente_id: parseInt(clienteSelecionadoId),
                emails_destinatarios: emailsDestinatarios,
                assunto: assunto,
                mensagem: mensagem,
                etapa_destino_id: parseInt(etapaDestinoId),
                csrf_token: csrfToken // INCLUINDO CSRF TOKEN
            })
        });

        // Verificar se a resposta é válida
        if (!emailResponse.ok) {
            const errorText = await emailResponse.text();
            console.error('Erro HTTP:', emailResponse.status, errorText);
            throw new Error(`Erro HTTP ${emailResponse.status}: ${errorText}`);
        }

        const emailData = await emailResponse.json();
        console.log('Resposta do servidor:', emailData);

        if (emailData.success) {
            // Se os emails foram enviados com sucesso, mover o cliente
            const moveResponse = await fetch('atualizar_status.php', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({
                    id: parseInt(clienteSelecionadoId),
                    etapa_id: parseInt(etapaDestinoId),
                    csrf_token: csrfToken
                })
            });

            const moveData = await moveResponse.json();

            if (moveData.success) {
                const destinatariosStr = emailsDestinatarios.join(', ');
                showTimelineMessage(`Emails enviados para ${destinatariosStr} e cliente movido com sucesso!`, 'success');
                
                // Recarregar as atividades do cliente após o movimento
                const clienteEl = document.querySelector(`.cliente-item[data-id="${clienteSelecionadoId}"]`);
                if (clienteEl) {
                    await recarregarAtividadesCliente(clienteSelecionadoId, clienteEl);
                }
                
                setTimeout(() => {
                    window.location.reload();
                }, 1500);
            } else {
                showTimelineMessage('Emails enviados, mas erro ao mover cliente: ' + moveData.message, 'error');
            }
        } else {
            showTimelineMessage('Erro ao enviar emails: ' + emailData.message, 'error');
        }
    } catch (error) {
        console.error('Erro:', error);
        showTimelineMessage('Erro ao processar a solicitação: ' + error.message, 'error');
    } finally {
        btnConfirmar.disabled = false;
        btnConfirmar.innerHTML = 'Enviar Emails e Mover';
        fecharAgendamentoModal();
    }
}

// ========== FUNÇÕES DE FILTRO POR STATUS ========== //

function aplicarFiltroStatus(status) {
    const clientes = document.querySelectorAll('.cliente-item');
    let resultados = 0;
    
    clientes.forEach(cliente => {
        const statusAtividade = cliente.getAttribute('data-status-atividade');
        
        if (status === 'todos') {
            cliente.style.display = 'block';
            resultados++;
        } else {
            if (statusAtividade === `atividade-${status}`) {
                cliente.style.display = 'block';
                resultados++;
            } else {
                cliente.style.display = 'none';
            }
        }
    });
    
    // Atualizar botões ativos
    document.querySelectorAll('.filtro-btn').forEach(btn => {
        btn.classList.remove('active');
    });
    
    if (status !== 'todos') {
        document.querySelector(`.filtro-btn[data-status="${status}"]`).classList.add('active');
    } else {
        document.querySelector('.filtro-btn[data-status="todos"]').classList.add('active');
    }
    
    document.getElementById('contadorResultados').textContent = resultados > 0 ? 
        `${resultados} encontrado(s)` : 'Nenhum resultado';
    
    // ATUALIZAR CONTADORES APÓS FILTRAGEM
    atualizarContadoresClientes();
}

// ========== MODIFICAÇÕES NO DRAG AND DROP ========== //

document.addEventListener('DOMContentLoaded', function() {
    const clientes = document.querySelectorAll('.cliente-item');
    const colunas = document.querySelectorAll('.coluna-content');

    // Inicializar filtros
    document.querySelectorAll('.filtro-btn').forEach(btn => {
        btn.addEventListener('click', function() {
            const status = this.getAttribute('data-status');
            aplicarFiltroStatus(status);
        });
    });

    clientes.forEach(cliente => {
        cliente.addEventListener('dragstart', function(e) {
            this.classList.add('dragging');
            
            // Coletar dados do cliente
            const clienteData = {
                id: this.dataset.id,
                nome: this.dataset.clienteNome,
                email: this.dataset.clienteEmail,
                etapa_original: this.dataset.etapaOriginal,
                temperatura: this.dataset.temperatura || null
            };
            
            e.dataTransfer.setData('text/plain', JSON.stringify(clienteData));
            etapaOrigemId = this.dataset.etapaOriginal;
        });

        cliente.addEventListener('dragend', function() {
            this.classList.remove('dragging');
        });
    });

    colunas.forEach(coluna => {
        coluna.addEventListener('dragover', function(e) {
            e.preventDefault();
            this.classList.add('drag-over');
        });

        coluna.addEventListener('dragleave', function() {
            this.classList.remove('drag-over');
        });

        coluna.addEventListener('drop', async function(e) {
            e.preventDefault();
            this.classList.remove('drag-over');

            const clienteData = JSON.parse(e.dataTransfer.getData('text/plain'));
            const clienteEl = document.querySelector(`.cliente-item[data-id="${clienteData.id}"]`);
            const novaEtapaId = this.dataset.etapaId;
            
            if (!clienteEl) return;

            // Verificar se a nova etapa é diferente da etapa de origem
            if (novaEtapaId === etapaOrigemId) {
                return;
            }

            // Obter informações da etapa de destino
            const colunaPai = this.closest('.coluna');
            const tipoEntrada = colunaPai.dataset.tipoEntrada || 'manual';
            const etapaNome = colunaPai.querySelector('h2').textContent.split(' ')[0];

            clienteEl.classList.add('updating');

            try {
                // Se for agendamento, abrir modal
                if (tipoEntrada === 'agendamento') {
                    abrirModalAgendamento(clienteData, novaEtapaId);
                    clienteEl.classList.remove('updating');
                    return;
                }

                // ✅ CORREÇÃO: Se for questionário, abrir em página separada
                if (tipoEntrada === 'questionario') {
                    const funil_id = <?php echo json_encode($funil_id); ?>;
                    
                    // CORREÇÃO: Usar os IDs diretamente sem conversão
                    const url = `aplicar_questionario.php?cliente_id=${clienteData.id}&etapa_id=${novaEtapaId}&funil_id=${funil_id}`;
                    
                    console.log('🌐 Abrindo questionário em nova aba:', url);
                    
                    // Abrir em nova aba
                    window.open(url, '_blank');
                    
                    clienteEl.classList.remove('updating');
                    return;
                }

                // ✅ CORREÇÃO: Se for manual, mover diretamente incluindo tipo_movimento
                const csrfToken = document.querySelector('meta[name="csrf-token"]').getAttribute('content');
                const response = await fetch('atualizar_status.php', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                    },
                    body: JSON.stringify({
                        id: clienteData.id,
                        etapa_id: novaEtapaId,
                        tipo_movimento: tipoEntrada, // ✅ CORREÇÃO CRÍTICA
                        csrf_token: csrfToken
                    })
                });

                const data = await response.json();

                if (data.success) {
                    // REMOVER da etapa de origem
                    const etapaOrigemEl = document.querySelector(`.coluna-content[data-etapa-id="${etapaOrigemId}"]`);
                    if (etapaOrigemEl && etapaOrigemEl.contains(clienteEl)) {
                        clienteEl.remove();
                    }

                    // ADICIONAR na nova etapa
                    this.appendChild(clienteEl);
                    
                    // Atualizar a etapa original do cliente
                    clienteEl.dataset.etapaOriginal = novaEtapaId;
                    
                    // ✅ CORREÇÃO: RECARREGAR ATIVIDADES DO CLIENTE APÓS MOVIMENTO
                    await recarregarAtividadesCliente(clienteData.id, clienteEl);
                    
                    // ATUALIZAR CONTADORES
                    atualizarContadoresClientes();
                    
                    showTimelineMessage(`Cliente movido para "${etapaNome}"`, 'success');
                    
                    // Atualizar o modal de detalhes se estiver aberto
                    const modal = document.getElementById('detalhesModal');
                    if (modal.style.display === 'block') {
                        const clienteModalId = document.querySelector('#detalhesClienteConteudo [data-cliente-id]')?.getAttribute('data-cliente-id');
                        if (clienteModalId === clienteData.id.toString()) {
                            abrirDetalhesCliente(clienteData.id);
                        }
                    }
                } else {
                    showTimelineMessage(data.message || 'Erro ao atualizar etapa', 'error');
                }
            } catch (error) {
                console.error('Erro:', error);
                showTimelineMessage('Erro ao comunicar com o servidor', 'error');
            } finally {
                clienteEl.classList.remove('updating');
            }
        });
    });

    // Inicializar contadores quando a página carregar
    atualizarContadoresClientes();

    // ========== INICIALIZAÇÃO DO SISTEMA DE NOTIFICAÇÕES ========== //

    // Inicializar sistema de notificações automaticamente (SEM UI)
    setTimeout(() => {
        console.log("Iniciando sistema de notificações...");
        inicializarNotificacoes();
    }, 3000); // Iniciar após 3 segundos

    // Verificar notificações a cada 1 minuto
    setInterval(() => {
        if (Notification.permission === "granted") {
            console.log("Verificação automática de notificações...");
            verificarNotificacoesBrowser();
        }
    }, 60000); // 1 minuto

    // Verificar imediatamente quando a página ganha foco
    document.addEventListener('visibilitychange', function() {
        if (!document.hidden && Notification.permission === "granted") {
            console.log("Página em foco, verificando notificações...");
            verificarNotificacoesBrowser();
        }
    });
});

// ========== FUNÇÕES EXISTENTES ========== //

// Função para alternar o dropdown de funis
function toggleFunilDropdown() {
    var dropdown = document.getElementById('funilDropdown');
    dropdown.style.display = dropdown.style.display === 'block' ? 'none' : 'block';
}

// Fechar dropdown de funis quando clicar fora
window.addEventListener('click', function(event) {
    var funilDropdown = document.getElementById('funilDropdown');
    var funilButton = document.querySelector('button[onclick="toggleFunilDropdown()"]');
    if (!event.target.matches('button[onclick="toggleFunilDropdown()"]') && !event.target.closest('#funilDropdown')) {
        funilDropdown.style.display = 'none';
    }
});

// Função para abrir detalhes do cliente
function abrirDetalhesCliente(clienteId) {
    fetch('visao_geral_cliente.php?id=' + clienteId)
        .then(response => response.text())
        .then(data => {
            document.getElementById('detalhesClienteConteudo').innerHTML = data;
            clienteSelecionadoId = clienteId;
            
            // Configurar botão de edição
            document.getElementById('btnEditarCliente').onclick = function() {
                window.location.href = 'editar_cliente.php?id=' + clienteId;
            };
            
            // Configurar botão de trocar funil
            if (document.getElementById('btnTrocarFunil')) {
                document.getElementById('btnTrocarFunil').onclick = function() {
                    abrirTrocarFunilModal(clienteId);
                };
            }
            
            document.getElementById('detalhesModal').style.display = 'block';
        })
        .catch(error => console.error('Erro:', error));
}

function fecharModal() {
    document.getElementById('detalhesModal').style.display = 'none';
}

function abrirTrocarFunilModal(clienteId) {
    clienteSelecionadoId = clienteId;
    document.getElementById('trocarFunilModal').style.display = 'block';
}

function fecharTrocarFunilModal() {
    document.getElementById('trocarFunilModal').style.display = 'none';
}

function confirmarTrocarFunil() {
    const novoFunilId = document.getElementById('novoFunilSelect').value;
    
    if (!clienteSelecionadoId || !novoFunilId) {
        showTimelineMessage('Selecione um funil válido', 'error');
        return;
    }

    console.log('=== INICIANDO TROCA DE FUNIL ===');
    console.log('Cliente ID:', clienteSelecionadoId);
    console.log('Funil Atual ID:', <?php echo $funil_id; ?>);
    console.log('Novo Funil ID:', novoFunilId);
    console.log('CSRF Token:', document.querySelector('meta[name="csrf-token"]').getAttribute('content'));

    const btnConfirmar = document.querySelector('#trocarFunilModal .btn-primary');
    btnConfirmar.disabled = true;
    btnConfirmar.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Processando...';

    const csrfToken = document.querySelector('meta[name="csrf-token"]').getAttribute('content');
    
    const dadosEnvio = {
        cliente_id: parseInt(clienteSelecionadoId),
        novo_funil_id: parseInt(novoFunilId),
        funil_atual_id: parseInt(<?php echo $funil_id; ?>),
        csrf_token: csrfToken
    };

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

    fetch('trocar_funil_cliente.php', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': csrfToken
        },
        body: JSON.stringify(dadosEnvio)
    })
    .then(response => {
        console.log('Status da resposta:', response.status);
        console.log('Headers da resposta:', response.headers);
        
        if (!response.ok) {
            throw new Error('Erro HTTP: ' + response.status);
        }
        return response.text();
    })
    .then(text => {
        console.log('Resposta bruta:', text);
        
        try {
            const data = JSON.parse(text);
            console.log('Resposta parseada:', data);
            
            if (data.success) {
                showTimelineMessage(data.message || 'Cliente movido para o novo funil com sucesso!', 'success');
                setTimeout(() => {
                    window.location.reload();
                }, 1500);
            } else {
                showTimelineMessage(data.message || 'Erro ao mover cliente', 'error');
            }
        } catch (e) {
            console.error('Erro ao parsear JSON:', e);
            console.error('Texto que falhou:', text);
            showTimelineMessage('Erro na resposta do servidor', 'error');
        }
    })
    .catch(error => {
        console.error('Erro na requisição:', error);
        showTimelineMessage('Erro ao processar a solicitação: ' + error.message, 'error');
    })
    .finally(() => {
        btnConfirmar.disabled = false;
        btnConfirmar.innerHTML = 'Confirmar';
        fecharTrocarFunilModal();
    });
}

// Função para mostrar mensagens na timeline
function showTimelineMessage(message, type = 'success') {
    const msgDiv = document.createElement('div');
    msgDiv.className = `timeline-message ${type === 'error' ? 'error' : ''}`;
    msgDiv.textContent = message;
    document.body.appendChild(msgDiv);

    setTimeout(() => {
        msgDiv.style.opacity = '0';
        setTimeout(() => msgDiv.remove(), 500);
    }, 3000);
}

// Função para atualizar os contadores de clientes em cada etapa
function atualizarContadoresClientes() {
    const colunas = document.querySelectorAll('.coluna-content');
    
    colunas.forEach(coluna => {
        const etapaId = coluna.dataset.etapaId;
        const clientesVisiveis = coluna.querySelectorAll('.cliente-item:not([style*="display: none"])');
        const quantidade = clientesVisiveis.length;
        
        // Encontrar o elemento de contador correspondente
        const colunaPai = coluna.closest('.coluna');
        const titulo = colunaPai.querySelector('h2');
        let contador = titulo.querySelector('.client-count');
        
        if (!contador) {
            contador = document.createElement('span');
            contador.className = 'client-count';
            titulo.appendChild(contador);
        }
        
        contador.textContent = quantidade;
    });
}

// Função de pesquisa
document.getElementById('pesquisaCliente').addEventListener('input', function(e) {
    const termo = e.target.value.trim().toLowerCase();
    const clientes = document.querySelectorAll('.cliente-item');
    let resultados = 0;
    
    clientes.forEach(cliente => {
        const texto = cliente.textContent.toLowerCase();
        if (texto.includes(termo)) {
            cliente.style.display = 'block';
            resultados++;
        } else {
            cliente.style.display = 'none';
        }
    });
    
    document.getElementById('contadorResultados').textContent = resultados > 0 ? 
        `${resultados} encontrado(s)` : 'Nenhum resultado';
    
    // ATUALIZAR CONTADORES APÓS FILTRAGEM
    atualizarContadoresClientes();
});

// Atalho Ctrl+F para pesquisa
document.addEventListener('keydown', function(e) {
    if (e.ctrlKey && e.key === 'f') {
        e.preventDefault();
        document.getElementById('pesquisaCliente').focus();
    }
});

// Fechar modal ao clicar fora dele
window.addEventListener('click', function(event) {
    const modal = document.getElementById('detalhesModal');
    if (event.target === modal) {
        fecharModal();
    }
    
    const modalTrocarFunil = document.getElementById('trocarFunilModal');
    if (event.target === modalTrocarFunil) {
        fecharTrocarFunilModal();
    }
    
    const modalAgendamento = document.getElementById('agendamentoModal');
    if (event.target === modalAgendamento) {
        fecharAgendamentoModal();
    }
});

// Função para detectar dispositivo móvel
function isMobileDevice() {
    return window.innerWidth <= 768;
}

// Ajustar comportamento do drag-and-drop em mobile
if (isMobileDevice()) {
    document.querySelectorAll('.cliente-item').forEach(item => {
        item.setAttribute('draggable', 'false');
    });
}

// Redirecionar para versão mobile se necessário
if (isMobileDevice() && !window.location.search.includes('mobile=1')) {
    console.log('Dispositivo móvel detectado - Layout responsivo ativo');
}
</script>
</body>
</html>
<?php
$conn->close();
?>