<?php
session_start();

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

// Verificar tenant_id
$tenant_id = $_SESSION['tenant_id'] ?? null;
if (!$tenant_id) {
    die("Tenant não identificado.");
}

require_once 'conexao.php';

// Verificar se é admin
$is_admin = ($_SESSION['permissao'] === 'admin');
$usuario_id = $_SESSION['usuario_id'] ?? null;

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

// Função para verificar permissão de visualização de cliente para usuário comum
function usuarioPodeVisualizarCliente($conn, $usuario_id, $cliente_id) {
    // Verificar se tem permissão explícita na tabela permissoes_clientes
    $stmt = $conn->prepare("SELECT visualizar FROM permissoes_clientes WHERE usuario_id = ? AND cliente_id = ?");
    $stmt->bind_param("ii", $usuario_id, $cliente_id);
    $stmt->execute();
    $res = $stmt->get_result();
    
    if ($res->num_rows > 0) {
        $permissao = $res->fetch_assoc();
        $stmt->close();
        return (bool)$permissao['visualizar'];
    }
    $stmt->close();
    
    // Verificar se é o usuário que cadastrou o cliente
    $stmt = $conn->prepare("SELECT usuario_cadastro FROM clientes WHERE id = ?");
    $stmt->bind_param("i", $cliente_id);
    $stmt->execute();
    $res = $stmt->get_result();
    
    if ($res->num_rows > 0) {
        $cliente = $res->fetch_assoc();
        $stmt->close();
        return $cliente['usuario_cadastro'] == $usuario_id;
    }
    
    $stmt->close();
    return false;
}

// Buscar se o usuário pode ver todos os clientes
$ver_todos_clientes = 0;
if (!$is_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();
}

// Filtros opcionais
$filtro_usuario = $_GET['usuario'] ?? '';
$filtro_estado  = $_GET['estado'] ?? '';
$filtro_regiao  = $_GET['regiao'] ?? '';
$filtro_data_inicio = $_GET['data_inicio'] ?? '';
$filtro_data_fim    = $_GET['data_fim'] ?? '';
$filtro_escopo = $_GET['escopo'] ?? 'estados'; // Padrão: mostrar por estados

// Consulta base para obter dados por estado ou país
if ($filtro_escopo === 'paises') {
    $sql = "
        SELECT 
            c.id,
            UPPER(TRIM(c.Pais)) AS localizacao, 
            COUNT(DISTINCT c.id) AS clientes,
            SUM(p.valor * p.quantidade) AS valor_total,
            SUM(p.quantidade) AS produtos_total
        FROM clientes c
        INNER JOIN cliente_produtos p ON p.cliente_id = c.id
        WHERE c.tenant_id = ? AND c.Pais IS NOT NULL AND c.Pais <> '' AND c.deletado_em IS NULL
    ";
} else {
    $sql = "
        SELECT 
            c.id,
            UPPER(TRIM(c.Estado)) AS localizacao, 
            COUNT(DISTINCT c.id) AS clientes,
            SUM(p.valor * p.quantidade) AS valor_total,
            SUM(p.quantidade) AS produtos_total
        FROM clientes c
        INNER JOIN cliente_produtos p ON p.cliente_id = c.id
        WHERE c.tenant_id = ? AND c.Estado IS NOT NULL AND c.Estado <> '' AND c.deletado_em IS NULL
    ";
}

// Aplicação de filtros
$params = [$tenant_id];
$types = "i";

if ($filtro_usuario !== '') {
    $sql .= " AND c.usuario_cadastro = ?";
    $params[] = intval($filtro_usuario);
    $types .= "i";
}

if ($filtro_estado !== '' && $filtro_escopo === 'estados') {
    $sql .= " AND c.Estado = ?";
    $params[] = $filtro_estado;
    $types .= "s";
}

if ($filtro_data_inicio && $filtro_data_fim) {
    $sql .= " AND c.Data_Cadastro BETWEEN ? AND ?";
    $params[] = $filtro_data_inicio . ' 00:00:00';
    $params[] = $filtro_data_fim . ' 23:59:59';
    $types .= "ss";
}

$sql .= " GROUP BY localizacao ORDER BY localizacao ASC";

$stmt = $conn->prepare($sql);
if ($types) {
    $stmt->bind_param($types, ...$params);
}
$stmt->execute();
$result = $stmt->get_result();

$dados = [];
$total_clientes = 0;
$total_valor = 0;
$total_produtos = 0;

// Mapeamento completo de países para inglês
$mapa_paises = [
    'AFEGANISTÃO' => 'Afghanistan',
    'ÁFRICA DO SUL' => 'South Africa',
    'ALBÂNIA' => 'Albania',
    'ALEMANHA' => 'Germany',
    'ANDORRA' => 'Andorra',
    'ANGOLA' => 'Angola',
    'ANTÍGUA E BARBUDA' => 'Antigua and Barbuda',
    'ARÁBIA SAUDITA' => 'Saudi Arabia',
    'ARGÉLIA' => 'Algeria',
    'ARGENTINA' => 'Argentina',
    'ARMÊNIA' => 'Armenia',
    'AUSTRÁLIA' => 'Australia',
    'ÁUSTRIA' => 'Austria',
    'AZERBAIJÃO' => 'Azerbaijan',
    'BAHAMAS' => 'Bahamas',
    'BANGLADESH' => 'Bangladesh',
    'BARBADOS' => 'Barbados',
    'BAREIN' => 'Bahrain',
    'BÉLGICA' => 'Belgium',
    'BELIZE' => 'Belize',
    'BENIM' => 'Benin',
    'BIELORRÚSSIA' => 'Belarus',
    'BOLÍVIA' => 'Bolivia',
    'BÓSNIA E HERZEGOVINA' => 'Bosnia and Herzegovina',
    'BOTSUANA' => 'Botswana',
    'BRASIL' => 'Brazil',
    'BRUNEI' => 'Brunei',
    'BULGÁRIA' => 'Bulgaria',
    'BURKINA FASO' => 'Burkina Faso',
    'BURUNDI' => 'Burundi',
    'BUTÃO' => 'Bhutan',
    'CABO VERDE' => 'Cape Verde',
    'CAMARÕES' => 'Cameroon',
    'CAMBOJA' => 'Cambodia',
    'CANADÁ' => 'Canada',
    'CATAR' => 'Qatar',
    'CAZAQUISTÃO' => 'Kazakhstan',
    'CHADE' => 'Chad',
    'CHILE' => 'Chile',
    'CHINA' => 'China',
    'CHIPRE' => 'Cyprus',
    'COLÔMBIA' => 'Colombia',
    'COMORES' => 'Comoros',
    'CONGO' => 'Congo',
    'COREIA DO NORTE' => 'North Korea',
    'COREIA DO SUL' => 'South Korea',
    'COSTA DO MARFIM' => 'Ivory Coast',
    'COSTA RICA' => 'Costa Rica',
    'CROÁCIA' => 'Croatia',
    'CUBA' => 'Cuba',
    'DINAMARCA' => 'Denmark',
    'DJIBUTI' => 'Djibouti',
    'DOMINICA' => 'Dominica',
    'EGITO' => 'Egypt',
    'EL SALVADOR' => 'El Salvador',
    'EMIRADOS ÁRABES UNIDOS' => 'United Arab Emirates',
    'EQUADOR' => 'Ecuador',
    'ERITREIA' => 'Eritrea',
    'ESLOVÁQUIA' => 'Slovakia',
    'ESLOVÊNIA' => 'Slovenia',
    'ESPANHA' => 'Spain',
    'ESTADOS UNIDOS' => 'United States',
    'ESTÔNIA' => 'Estonia',
    'ESWATINI' => 'Eswatini',
    'ETIÓPIA' => 'Ethiopia',
    'FIJI' => 'Fiji',
    'FILIPINAS' => 'Philippines',
    'FINLÂNDIA' => 'Finland',
    'FRANÇA' => 'France',
    'GABÃO' => 'Gabon',
    'GÂMBIA' => 'Gambia',
    'GANA' => 'Ghana',
    'GEÓRGIA' => 'Georgia',
    'GRANADA' => 'Grenada',
    'GRÉCIA' => 'Greece',
    'GUATEMALA' => 'Guatemala',
    'GUIANA' => 'Guyana',
    'GUINÉ' => 'Guinea',
    'GUINÉ EQUATORIAL' => 'Equatorial Guinea',
    'GUINÉ-BISSAU' => 'Guinea-Bissau',
    'HAITI' => 'Haiti',
    'HONDURAS' => 'Honduras',
    'HUNGRIA' => 'Hungary',
    'IÊMEN' => 'Yemen',
    'ILHAS MARSHALL' => 'Marshall Islands',
    'ILHAS SALOMÃO' => 'Solomon Islands',
    'ÍNDIA' => 'India',
    'INDONÉSIA' => 'Indonesia',
    'IRÃ' => 'Iran',
    'IRAQUE' => 'Iraq',
    'IRLANDA' => 'Ireland',
    'ISLÂNDIA' => 'Iceland',
    'ISRAEL' => 'Israel',
    'ITÁLIA' => 'Italy',
    'JAMAICA' => 'Jamaica',
    'JAPÃO' => 'Japan',
    'JORDÂNIA' => 'Jordan',
    'KIRIBATI' => 'Kiribati',
    'KUWAIT' => 'Kuwait',
    'LAOS' => 'Laos',
    'LESOTO' => 'Lesotho',
    'LETÔNIA' => 'Latvia',
    'LÍBANO' => 'Lebanon',
    'LIBÉRIA' => 'Liberia',
    'LÍBIA' => 'Libya',
    'LIECHTENSTEIN' => 'Liechtenstein',
    'LITUÂNIA' => 'Lithuania',
    'LUXEMBURGO' => 'Luxembourg',
    'MACEDÔNIA DO NORTE' => 'North Macedonia',
    'MADAGASCAR' => 'Madagascar',
    'MALÁSIA' => 'Malaysia',
    'MALAUI' => 'Malawi',
    'MALDIVAS' => 'Maldives',
    'MALI' => 'Mali',
    'MALTA' => 'Malta',
    'MARROCOS' => 'Morocco',
    'MAURÍCIA' => 'Mauritius',
    'MAURITÂNIA' => 'Mauritania',
    'MÉXICO' => 'Mexico',
    'MICRONÉSIA' => 'Micronesia',
    'MOÇAMBIQUE' => 'Mozambique',
    'MOLDÁVIA' => 'Moldova',
    'MÔNACO' => 'Monaco',
    'MONGÓLIA' => 'Mongolia',
    'MONTENEGRO' => 'Montenegro',
    'MYANMAR' => 'Myanmar',
    'NAMÍBIA' => 'Namibia',
    'NAURU' => 'Nauru',
    'NEPAL' => 'Nepal',
    'NICARÁGUA' => 'Nicaragua',
    'NÍGER' => 'Niger',
    'NIGÉRIA' => 'Nigeria',
    'NORUEGA' => 'Norway',
    'NOVA ZELÂNDIA' => 'New Zealand',
    'OMÃ' => 'Oman',
    'PAÍSES BAIXOS' => 'Netherlands',
    'PALAU' => 'Palau',
    'PANAMÁ' => 'Panama',
    'PAPUA-NOVA GUINÉ' => 'Papua New Guinea',
    'PAQUISTÃO' => 'Pakistan',
    'PARAGUAI' => 'Paraguay',
    'PERU' => 'Peru',
    'POLÔNIA' => 'Poland',
    'PORTUGAL' => 'Portugal',
    'QUÊNIA' => 'Kenya',
    'QUIRGUISTÃO' => 'Kyrgyzstan',
    'REINO UNIDO' => 'United Kingdom',
    'REPÚBLICA CENTRO-AFRICANA' => 'Central African Republic',
    'REPÚBLICA DEMOCRÁTICA DO CONGO' => 'Democratic Republic of the Congo',
    'REPÚBLICA DOMINICANA' => 'Dominican Republic',
    'REPÚBLICA TCHECA' => 'Czech Republic',
    'ROMÊNIA' => 'Romania',
    'RUANDA' => 'Rwanda',
    'RÚSSIA' => 'Russia',
    'SAMOA' => 'Samoa',
    'SAN MARINO' => 'San Marino',
    'SANTA LÚCIA' => 'Saint Lucia',
    'SÃO CRISTÓVÃO E NÉVIS' => 'Saint Kitts and Nevis',
    'SÃO TOMÉ E PRÍNCIPE' => 'Sao Tome and Principe',
    'SÃO VICENTE E GRANADINAS' => 'Saint Vincent and the Grenadines',
    'SENEGAL' => 'Senegal',
    'SERRA LEOA' => 'Sierra Leone',
    'SÉRVIA' => 'Serbia',
    'SEYCHELLES' => 'Seychelles',
    'SINGAPURA' => 'Singapore',
    'SÍRIA' => 'Syria',
    'SOMÁLIA' => 'Somalia',
    'SRI LANKA' => 'Sri Lanka',
    'SUDÃO' => 'Sudan',
    'SUDÃO DO SUL' => 'South Sudan',
    'SUÉCIA' => 'Sweden',
    'SUIÇA' => 'Switzerland',
    'SURINAME' => 'Suriname',
    'TAILÂNDIA' => 'Thailand',
    'TAIWAN' => 'Taiwan',
    'TAJIQUISTÃO' => 'Tajikistan',
    'TANZÂNIA' => 'Tanzania',
    'TIMOR-LESTE' => 'Timor-Leste',
    'TOGO' => 'Togo',
    'TONGA' => 'Tonga',
    'TRINDADE E TOBAGO' => 'Trinidad and Tobago',
    'TUNÍSIA' => 'Tunisia',
    'TURCOMENISTÃO' => 'Turkmenistan',
    'TURQUIA' => 'Turkey',
    'TUVALU' => 'Tuvalu',
    'UCRÂNIA' => 'Ukraine',
    'UGANDA' => 'Uganda',
    'URUGUAI' => 'Uruguay',
    'UZBEQUISTÃO' => 'Uzbekistan',
    'VANUATU' => 'Vanuatu',
    'VATICANO' => 'Vatican City',
    'VENEZUELA' => 'Venezuela',
    'VIETNã' => 'Vietnam',
    'ZÂMBIA' => 'Zambia',
    'ZIMBÁBUE' => 'Zimbabwe'
];

// Processar os dados do resultado, aplicando as permissões de usuário
while ($row = $result->fetch_assoc()) {
    // Verificar se o usuário tem permissão para visualizar este cliente
    if (!$is_admin && $ver_todos_clientes !== 1 && !usuarioPodeVisualizarCliente($conn, $usuario_id, $row['id'])) {
        continue; // Pular este cliente se o usuário não tiver permissão
    }
    
    $localizacao = $mapa_paises[strtoupper(trim($row['localizacao']))] ?? $row['localizacao'];
    $clientes = (int)$row['clientes'];
    $valor = (float)$row['valor_total'];
    $produtos = (int)$row['produtos_total'];
    
    $dados[$localizacao] = [
        'clientes' => $clientes,
        'valor' => $valor,
        'produtos' => $produtos
    ];
    
    $total_clientes += $clientes;
    $total_valor += $valor;
    $total_produtos += $produtos;
}

// Monta dados da tabela lateral
$dados_tabela = [];
foreach ($dados as $localizacao => $info) {
    $porcentagem_clientes = $total_clientes > 0 ? ($info['clientes'] / $total_clientes) * 100 : 0;
    $porcentagem_valor = $total_valor > 0 ? ($info['valor'] / $total_valor) * 100 : 0;
    $porcentagem_produtos = $total_produtos > 0 ? ($info['produtos'] / $total_produtos) * 100 : 0;
    
    $dados_tabela[] = [
        'localizacao' => $localizacao,
        'clientes' => $info['clientes'],
        'valor' => $info['valor'],
        'produtos' => $info['produtos'],
        'porcentagem_clientes' => $porcentagem_clientes,
        'porcentagem_valor' => $porcentagem_valor,
        'porcentagem_produtos' => $porcentagem_produtos
    ];
}

// Ordenação padrão (por valor)
usort($dados_tabela, fn($a, $b) => $b['valor'] <=> $a['valor']);

// Obter estados para os filtros
$estados = [];
$stmt_estados = $conn->prepare("SELECT DISTINCT Estado FROM clientes WHERE tenant_id = ? AND Estado IS NOT NULL AND Estado != '' AND deletado_em IS NULL ORDER BY Estado");
$stmt_estados->bind_param("i", $tenant_id);
$stmt_estados->execute();
$result_estados = $stmt_estados->get_result();
while ($row = $result_estados->fetch_assoc()) {
    $estados[] = $row['Estado'];
}

// Obter países para os filtros
$paises = [];
$stmt_paises = $conn->prepare("SELECT DISTINCT Pais FROM clientes WHERE tenant_id = ? AND Pais IS NOT NULL AND Pais != '' AND deletado_em IS NULL ORDER BY Pais");
$stmt_paises->bind_param("i", $tenant_id);
$stmt_paises->execute();
$result_paises = $stmt_paises->get_result();
while ($row = $result_paises->fetch_assoc()) {
    $paises[] = $row['Pais'];
}

// Obter usuários para filtro (apenas para admins)
$usuarios = [];
if ($is_admin) {
    $stmt_usuarios = $conn->prepare("SELECT id, nome FROM usuarios WHERE tenant_id = ? AND ativo = 'sim' ORDER BY nome");
    $stmt_usuarios->bind_param("i", $tenant_id);
    $stmt_usuarios->execute();
    $result_usuarios = $stmt_usuarios->get_result();
    while ($row = $result_usuarios->fetch_assoc()) {
        $usuarios[$row['id']] = $row['nome'];
    }
}
?>

<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <link rel="icon" type="image/png" sizes="16x16" href="/favicon_io/favicon-16x16.png">
    <link rel="icon" type="image/png" sizes="32x32" href="/favicon_io/favicon-32x32.png">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>SON - Análise Georreferenciada</title>
    <meta name="csrf-token" content="<?= htmlspecialchars($_SESSION['csrf_token'] ?? '') ?>">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
    <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
    <link href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css" rel="stylesheet">
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            background-color: #f5f5f5;
        }

        .header-fixed {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            background-color: #f5f5f5;
            padding: 15px 20px;
            z-index: 1000;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .header-fixed img {
            height: 50px;
            margin-right: 15px;
        }
        
        .header-fixed h2 {
            margin: 0;
            flex-grow: 1;
            text-align: center;
        }
        
        /* Menu Lateral - CORRETO igual aos outros arquivos */
        .sidebar {
            position: fixed;
            left: 0;
            top: 80px;
            height: calc(100vh - 80px);
            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;
        }

        /* Classes para menu */
        .menu-btn-success {
            color: #6B8E23;
        }
        
        .menu-btn-primary {
            color: #0000FF;
        }
        
        .menu-btn-danger {
            color: #e74c3c;
        }
        
        .content-wrapper {
            margin-top: 20px;
            padding: 20px;
            margin-left: 0;
            transition: margin-left 0.3s ease;
        }
        
        .container {
            max-width: 1800px;
            margin: 0 auto;
            background: white;
            padding: 50px;
            border-radius: 8px;
            box-shadow: 0 0 15px rgba(0, 0, 0, 0.05);
        }
        
        h1 {
            color: #333;
            border-bottom: 1px solid #eee;
            padding-bottom: 10px;
            margin-top: 0;
            display: flex;
            align-items: center;
            gap: 10px;
        }
        
        /* Layout do mapa e tabela */
        .map-table-container {
            display: flex;
            gap: 20px;
            margin-top: 20px;
        }
        
        .map-container {
            flex: 2;
        }
        
        #mapa_vendas {
            width: 100%;
            height: 500px;
            border-radius: 8px;
            overflow: hidden;
            margin-bottom: 20px;
        }
        
        .table-container {
            flex: 1;
            background: #fff;
            border-radius: 8px;
            box-shadow: 0 0 5px rgba(0,0,0,0.1);
            padding: 15px;
            max-height: 600px;
            overflow-y: auto;
        }
        
        /* Tabela de dados */
        .data-table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 10px;
        }
        
        .data-table th, .data-table td {
            padding: 8px;
            border: 1px solid #ddd;
        }
        
        .data-table th {
            background-color: #f8f9fa;
            font-weight: bold;
        }
        
        .data-table tr:hover {
            background-color: #f5f5f5;
        }
        
        .progress-bar {
            background: #eee;
            height: 20px;
            border-radius: 10px;
            overflow: hidden;
        }
        
        .progress-bar-fill {
            height: 100%;
            color: #fff;
            text-align: center;
            font-size: 12px;
            line-height: 20px;
        }
        
        .total-row {
            font-weight: bold;
            background: #f5f5f5;
        }
        
        /* Filtros */
        .filtros-container {
            display: flex;
            gap: 15px;
            margin-bottom: 20px;
            flex-wrap: wrap;
        }
        
        .filtro-group {
            display: flex;
            flex-direction: column;
            min-width: 200px;
        }
        
        .filtro-group label {
            margin-bottom: 5px;
            font-weight: bold;
        }
        
        .select2-container {
            width: 100% !important;
        }
        
        .btn-filtrar {
            background-color: #3498db;
            color: white;
            border: none;
            padding: 10px 15px;
            border-radius: 4px;
            cursor: pointer;
            align-self: flex-end;
            margin-top: 20px;
        }
        
        .btn-filtrar:hover {
            background-color: #2980b9;
        }
        
        .btn-limpar {
            background-color: #95a5a6;
            color: white;
            border: none;
            padding: 10px 15px;
            border-radius: 4px;
            cursor: pointer;
            align-self: flex-end;
            margin-top: 20px;
            margin-left: 10px;
        }
        
        .btn-limpar:hover {
            background-color: #7f8c8d;
        }
        
        .flatpickr-input {
            padding: 8px 12px;
            border: 1px solid #ddd;
            border-radius: 4px;
            width: 100%;
        }
        
        .data-group {
            display: flex;
            gap: 10px;
        }
        
        .data-item {
            flex: 1;
        }
        
        /* Tabs */
        .tabs {
            display: flex;
            margin-bottom: 20px;
            border-bottom: 1px solid #ddd;
        }
        
        .tab {
            padding: 0px 20px;
            cursor: pointer;
            border: 1px solid transparent;
            border-bottom: none;
            margin-right: 5px;
            background: #f5f5f5;
            border-radius: 5px 5px 0 0;
        }
        
        .tab.active {
            background: #fff;
            border-color: #ddd;
            border-bottom: 1px solid #fff;
            margin-bottom: -1px;
            font-weight: bold;
        }
        
        .tab-content {
            display: none;
        }
        
        .tab-content.active {
            display: block;
        }
        
        /* Escopo (Países/Estados) */
        .escopo-container {
            display: flex;
            margin-bottom: 15px;
            background: #f8f9fa;
            padding: 10px;
            border-radius: 5px;
        }
        
        .escopo-option {
            padding: 8px 15px;
            cursor: pointer;
            border-radius: 4px;
            margin-right: 10px;
            background: #e9ecef;
        }
        
        .escopo-option.active {
            background: #3498db;
            color: white;
        }
        
        .user-initial {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background: #ccc;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: bold;
            font-size: 1.2em;
        }
        
        .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;
        }
        
        .version-info {
            position: fixed;
            bottom: 10px;
            left: 10px;
            color: #7f8c8d;
            font-size: 0.8em;
        }

        /* ========== 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;
        }

        /* Responsividade */
        @media (max-width: 1200px) {
            .map-table-container {
                flex-direction: column;
            }
            
            .map-container, .table-container {
                flex: 1 1 100%;
            }
        }
        
        @media (max-width: 768px) {
            .header-fixed {
                padding: 12px 15px;
            }
            
            .header-fixed h2 {
                font-size: 1.3rem;
            }
            
            .content-wrapper {
                margin-top: 80px;
                padding: 15px;
                margin-left: 0;
            }
            
            .sidebar {
                display: none;
            }
            
            .container {
                padding: 18px;
            }
            
            .filtros-container {
                flex-direction: column;
            }
            
            .filtro-group {
                width: 100%;
            }
            
            .btn-filtrar, .btn-limpar {
                width: 100%;
                margin-top: 10px;
                margin-left: 0;
            }

            .notification-container {
                top: 80px;
                right: 10px;
                left: 10px;
                max-width: none;
            }
        }
    </style>
</head>
<body>

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

    <div class="content-wrapper">
        <div class="container">
            <h1><i class="fas fa-globe-americas"></i> Distribuição Geográfica de Vendas</h1>
            
            <!-- Escopo (Países/Estados) -->
            <div class="escopo-container">
                <div class="escopo-option <?= $filtro_escopo === 'estados' ? 'active' : '' ?>" onclick="changeEscopo('estados')">
                    Visualizar por Estados
                </div>
                <div class="escopo-option <?= $filtro_escopo === 'paises' ? 'active' : '' ?>" onclick="changeEscopo('paises')">
                    Visualizar por Países
                </div>
            </div>
            
            <!-- Filtros -->
            <form method="GET" action="">
                <input type="hidden" name="escopo" id="escopo" value="<?= $filtro_escopo ?>">
                
                <div class="filtros-container">
                    <?php if ($is_admin && !empty($usuarios)): ?>
                        <div class="filtro-group">
                            <label for="usuario">Usuário</label>
                            <select id="usuario" name="usuario" class="select2">
                                <option value="">Todos</option>
                                <?php foreach ($usuarios as $id => $nome): ?>
                                    <option value="<?= $id ?>" <?= $filtro_usuario == $id ? 'selected' : '' ?>><?= htmlspecialchars($nome) ?></option>
                                <?php endforeach; ?>
                            </select>
                        </div>
                    <?php endif; ?>
                    
                    <?php if ($filtro_escopo === 'estados'): ?>
                        <div class="filtro-group">
                            <label for="estado">Estado</label>
                            <select id="estado" name="estado" class="select2">
                                <option value="">Todos</option>
                                <?php foreach ($estados as $estado): ?>
                                    <option value="<?= $estado ?>" <?= $filtro_estado == $estado ? 'selected' : '' ?>><?= $estado ?></option>
                                <?php endforeach; ?>
                            </select>
                        </div>
                    <?php else: ?>
                        <div class="filtro-group">
                            <label for="pais">País</label>
                            <select id="pais" name="pais" class="select2">
                                <option value="">Todos</option>
                                <?php foreach ($paises as $pais): ?>
                                    <option value="<?= $pais ?>" <?= $filtro_estado == $pais ? 'selected' : '' ?>><?= $pais ?></option>
                                <?php endforeach; ?>
                            </select>
                        </div>
                    <?php endif; ?>
                    
                    <div class="filtro-group">
                        <label for="data_inicio">Período</label>
                        <div class="data-group">
                            <div class="data-item">
                                <input type="text" id="data_inicio" name="data_inicio" class="flatpickr-input" placeholder="Data Início" value="<?= htmlspecialchars($filtro_data_inicio) ?>">
                            </div>
                            <div class="data-item">
                                <input type="text" id="data_fim" name="data_fim" class="flatpickr-input" placeholder="Data Fim" value="<?= htmlspecialchars($filtro_data_fim) ?>">
                            </div>
                        </div>
                    </div>
                    
                    <button type="submit" class="btn-filtrar">Filtrar</button>
                    <a href="mapa_vendas.php" class="btn-limpar">Limpar</a>
                </div>
            </form>

            <?php if (empty($dados)): ?>
                <p>Nenhum dado encontrado.</p>
            <?php else: ?>
            <div class="tabs">
                <div class="tab active" onclick="changeTab('clientes')">Clientes</div>
                <div class="tab" onclick="changeTab('valor')">Valor</div>
                <div class="tab" onclick="changeTab('produtos')">Produtos</div>
            </div>

            <div class="map-table-container">
                <div class="map-container">
                    <div id="mapa_vendas"></div>
                </div>

                <div class="table-container">
                    <h3>Resumo por <?= $filtro_escopo === 'estados' ? 'Estado' : 'País' ?></h3>
                    <table class="data-table" id="tabela-resumo">
                        <thead>
                            <tr>
                                <th><?= $filtro_escopo === 'estados' ? 'Estado' : 'País' ?></th>
                                <th>Clientes</th>
                                <th>Valor Total</th>
                                <th>Produtos</th>
                                <th>Distribuição</th>
                            </tr>
                        </thead>
                        <tbody id="tabela-corpo">
                            <!-- Os dados da tabela serão preenchidos dinamicamente via JavaScript -->
                        </tbody>
                        <tfoot>
                            <tr class="total-row">
                                <td>Total</td>
                                <td><?= number_format($total_clientes, 0, ',', '.') ?></td>
                                <td>R$ <?= number_format($total_valor, 2, ',', '.') ?></td>
                                <td><?= number_format($total_produtos, 0, ',', '.') ?></td>
                                <td>
                                    <div class="progress-bar">
                                        <div class="progress-bar-fill" style="width: 100%; background: #3498db;">100%</div>
                                    </div>
                                </td>
                            </tr>
                        </tfoot>
                    </table>
                </div>
            </div>
            <?php endif; ?>
        </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 src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
    <script src="https://cdn.jsdelivr.net/npm/flatpickr/dist/l10n/pt.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

    <script>
    // ========== SISTEMA DE NOTIFICAÇÕES CORRIGIDO ========== //

    let notificacoesAtivas = new Map();

    // Verificar e pedir permissão para notificações
    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
    function verificarNotificacoesBrowser() {
        console.log("=== VERIFICANDO NOTIFICAÇÕES ===");
        
        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);
            });
    }

    // 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 - VERSÃO CORRIGIDA COM NOME DA ATIVIDADE
    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
                };
                console.log('Abrir detalhes da atividade:', data.atividade);
                // mostrarDetalhesAtividade(eventoSimulado); // Descomente se tiver essa função
                
                // Redirecionar para a página de atividades como fallback
                window.location.href = 'atividades.php?detalhes=' + atividadeId;
            } 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';
            }
        }
    }

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

    // Inicializar sistema de notificações automaticamente
    document.addEventListener('DOMContentLoaded', function() {
        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 DO MAPA DE VENDAS ========== //

    // Inicializar Select2
    $(document).ready(function() {
        $('.select2').select2({
            placeholder: "Selecione...",
            allowClear: true
        });
        
        // Inicializar datepicker
        flatpickr(".flatpickr-input", {
            dateFormat: "Y-m-d",
            locale: "pt",
            allowInput: true
        });

        // Carregar dados iniciais da tabela
        updateTable('clientes');
    });

    // Variável global para armazenar os dados
    const dadosMapa = {
        clientes: <?= json_encode(array_map(fn($item) => $item['clientes'], $dados_tabela)) ?>,
        valor: <?= json_encode(array_map(fn($item) => $item['valor'], $dados_tabela)) ?>,
        produtos: <?= json_encode(array_map(fn($item) => $item['produtos'], $dados_tabela)) ?>,
        localizacoes: <?= json_encode(array_column($dados_tabela, 'localizacao')) ?>,
        porcentagem_clientes: <?= json_encode(array_map(fn($item) => $item['porcentagem_clientes'], $dados_tabela)) ?>,
        porcentagem_valor: <?= json_encode(array_map(fn($item) => $item['porcentagem_valor'], $dados_tabela)) ?>,
        porcentagem_produtos: <?= json_encode(array_map(fn($item) => $item['porcentagem_produtos'], $dados_tabela)) ?>,
        escopo: '<?= $filtro_escopo ?>'
    };

    // Função para mudar o escopo (países/estados)
    function changeEscopo(escopo) {
        document.getElementById('escopo').value = escopo;
        document.querySelector('form').submit();
    }

    // Função para atualizar a tabela com base na aba selecionada
    function updateTable(tab) {
        const tabelaCorpo = document.getElementById('tabela-corpo');
        tabelaCorpo.innerHTML = '';
        
        // Ordenar os dados com base na aba selecionada
        const indicesOrdenados = [...Array(dadosMapa.localizacoes.length).keys()].sort((a, b) => {
            if (tab === 'clientes') {
                return dadosMapa.clientes[b] - dadosMapa.clientes[a];
            } else if (tab === 'valor') {
                return dadosMapa.valor[b] - dadosMapa.valor[a];
            } else {
                return dadosMapa.produtos[b] - dadosMapa.produtos[a];
            }
        });
        
        // Preencher a tabela com os dados ordenados
        indicesOrdenados.forEach(index => {
            const localizacao = dadosMapa.localizacoes[index];
            const clientes = dadosMapa.clientes[index];
            const valor = dadosMapa.valor[index];
            const produtos = dadosMapa.produtos[index];
            
            let porcentagem;
            let corBarra;
            
            if (tab === 'clientes') {
                porcentagem = dadosMapa.porcentagem_clientes[index];
                corBarra = '#3498db';
            } else if (tab === 'valor') {
                porcentagem = dadosMapa.porcentagem_valor[index];
                corBarra = '#3498db';
            } else {
                porcentagem = dadosMapa.porcentagem_produtos[index];
                corBarra = '#4d94ff';
            }
            
            const row = document.createElement('tr');
            row.innerHTML = `
                <td>${localizacao}</td>
                <td>${clientes.toLocaleString('pt-BR')}</td>
                <td>R$ ${valor.toLocaleString('pt-BR', {minimumFractionDigits: 2, maximumFractionDigits: 2})}</td>
                <td>${produtos.toLocaleString('pt-BR')}</td>
                <td>
                    <div class="progress-bar">
                        <div class="progress-bar-fill" style="width: ${porcentagem}%; background: ${corBarra};">
                            ${porcentagem >= 10 ? Math.round(porcentagem) + '%' : ''}
                        </div>
                    </div>
                </td>
            `;
            
            tabelaCorpo.appendChild(row);
        });
    }

    // Carregar o mapa do Google Charts
    google.charts.load('current', {
        packages: ['geochart'],
        mapsApiKey: 'SUA_CHAVE_API_AQUI' // Substitua por sua chave API real
    });

    google.charts.setOnLoadCallback(drawRegionsMap);

    // Variável para armazenar o tipo atual
    let currentTab = 'clientes';

    function changeTab(tab) {
        currentTab = tab;
        
        // Atualizar classes das tabs
        document.querySelectorAll('.tab').forEach(t => t.classList.remove('active'));
        event.target.classList.add('active');
        
        // Atualizar a tabela
        updateTable(tab);
        
        // Redesenhar o mapa
        drawRegionsMap();
    }

    function drawRegionsMap() {
        const data = new google.visualization.DataTable();
        data.addColumn('string', 'Localização');
        data.addColumn('number', currentTab === 'clientes' ? 'Clientes' : (currentTab === 'valor' ? 'Valor (R$)' : 'Produtos'));
        
        const rows = [];
        for (let i = 0; i < dadosMapa.localizacoes.length; i++) {
            const value = currentTab === 'clientes' ? dadosMapa.clientes[i] : 
                         (currentTab === 'valor' ? dadosMapa.valor[i] : dadosMapa.produtos[i]);
            
            // Formato diferente para países e estados
            if (dadosMapa.escopo === 'paises') {
                rows.push([dadosMapa.localizacoes[i], value]);
            } else {
                rows.push(['BR-' + dadosMapa.localizacoes[i], value]);
            }
        }
        
        data.addRows(rows);

        const options = {
            region: dadosMapa.escopo === 'paises' ? 'world' : 'BR',
            resolution: dadosMapa.escopo === 'paises' ? 'countries' : 'provinces',
            colorAxis: {
                colors: currentTab === 'valor' ? ['#e6f7ff', '#1890ff', '#0050b3'] : 
                      (currentTab === 'produtos' ? ['#e6f2ff', '#4d94ff', '#003d99'] : ['#e6ffe6', '#4d94ff', '#003d99']),
                minValue: 0
            },
            backgroundColor: '#ffffff',
            datalessRegionColor: '#f0f0f0',
            defaultColor: '#f5f5f5',
            tooltip: {
                trigger: 'focus',
                textStyle: {
                    fontSize: 14
                }
            }
        };

        const chart = new google.visualization.GeoChart(document.getElementById('mapa_vendas'));
        
        function resizeChart() {
            chart.draw(data, options);
        }
        
        chart.draw(data, options);
        
        window.addEventListener('resize', resizeChart);
    }

    // Função para alternar submenus no menu lateral
    function toggleSubmenu(element) {
        const submenu = element.nextElementSibling;
        const isOpen = submenu.style.display === 'block';
        
        // Fecha todos os submenus primeiro
        document.querySelectorAll('.submenu').forEach(item => {
            item.style.display = 'none';
        });
        
        document.querySelectorAll('.has-submenu').forEach(item => {
            item.classList.remove('open');
        });
        
        // Abre o submenu clicado se não estava aberto
        if (!isOpen) {
            submenu.style.display = 'block';
            element.classList.add('open');
        }
    }
    </script>
</body>
</html>
<?php
// Fechar conexão
$conn->close();
?>