<?php
session_start();

// Conectar ao banco SQLite
$db = new SQLite3("./api/.anspanel.db");

// Se for POST (salvar perfil)
if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['salvar_perfil'])) {
    $name     = trim($_POST['name']);
    $username = trim($_POST['username']);
    $password = trim($_POST['password']);
    $logo     = trim($_POST['logo']);

    // Atualiza no banco
    $stmt = $db->prepare("UPDATE USERS SET NAME = :name, USERNAME = :username, PASSWORD = :password, LOGO = :logo WHERE ID = 1");
    $stmt->bindValue(':name', $name, SQLITE3_TEXT);
    $stmt->bindValue(':username', $username, SQLITE3_TEXT);
    $stmt->bindValue(':password', $password, SQLITE3_TEXT);
    $stmt->bindValue(':logo', $logo, SQLITE3_TEXT);

    if ($stmt->execute()) {
        // Atualiza variáveis de sessão, se necessário
        $_SESSION["name"] = $username;
        echo "<script>alert('✅ Perfil atualizado com sucesso!'); location.href='".$_SERVER['PHP_SELF']."';</script>";
        exit;
    } else {
        echo "<script>alert('❌ Falha ao atualizar o perfil.');</script>";
    }
}

// Agora sim: buscar os dados para exibir
$res = $db->query("SELECT NAME, USERNAME, PASSWORD, LOGO FROM USERS WHERE ID = 1");
$row = $res->fetchArray(SQLITE3_ASSOC);
$name     = $row['NAME'];
$user     = $row['USERNAME'];
$pass     = $row['PASSWORD'];
$logo     = $row['LOGO'];


$server_mysql_vendas = "localhost";
$user_mysql_vendas = "financeiro";
$pass_mysql_vendas = "asder123Ww@";
$db_mysql_vendas = "financeiro";

$conn_mysql_vendas = new mysqli($server_mysql_vendas, $user_mysql_vendas, $pass_mysql_vendas, $db_mysql_vendas);
if ($conn_mysql_vendas->connect_error) {
    die("Conexão MySQL falhou: " . $conn_mysql_vendas->connect_error);
}

if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['action']) && $_POST['action'] === 'clear_values') {
    $sql_clear_values = "UPDATE clientes SET valor = NULL";
    if ($conn_mysql_vendas->query($sql_clear_values) === TRUE) {
        echo json_encode(['status' => 'success', 'message' => 'Valores da coluna valor apagados com sucesso.']);
    } else {
        echo json_encode(['status' => 'error', 'message' => 'Erro ao apagar os valores: ' . $conn_mysql_vendas->error]);
    }
}

// Conectando ao banco de dados MySQL
$conn_mysql_vendas = new mysqli($server_mysql_vendas, $user_mysql_vendas, $pass_mysql_vendas, $db_mysql_vendas);
if ($conn_mysql_vendas->connect_error) {
    die("Conexão MySQL falhou: " . $conn_mysql_vendas->connect_error);
}

// Consultas para obter total de vendas e número de vendas
$sql_total_vendas = "SELECT SUM(valor) as total FROM vendas";
$sql_count_vendas = "SELECT COUNT(*) as total_vendas FROM vendas";
$result_total_vendas = $conn_mysql_vendas->query($sql_total_vendas);
$result_count_vendas = $conn_mysql_vendas->query($sql_count_vendas);

$total = $result_total_vendas ? $result_total_vendas->fetch_assoc()['total'] : 0;
$total_vendas = $result_count_vendas ? $result_count_vendas->fetch_assoc()['total_vendas'] : 0;

// Conectar ao banco de dados SQLite
$db_sqlite = new SQLite3("./api/.ansdb.db");

// Consulta para obter todos os MACs com data de expiração e número de telefone
$sql_macs = "SELECT mac_address, title, numero_tel, expire_date FROM ibo";
$result_macs = $db_sqlite->query($sql_macs);

$macs = [];
while ($row = $result_macs->fetchArray(SQLITE3_ASSOC)) {
    $macs[] = $row;
}

$db_sqlite->close();
$conn_mysql_vendas->close();

// Conectar ao banco de dados SQLite
$db_sqlite = new SQLite3("./api/.ansdb.db");

// Função para enviar mensagem pelo WhatsApp para o número específico
function enviarMensagemWhatsApp() {
    $access_token = 'EAAGD8beTNXEBO9ZBMvMYKg91hW78o6ifiYB92mgPIwxjQnOo48yEKx6ChvGQeT7WiONgoQo7xGOUn3OiF7dzzlqJFc2UZBwvYyVr18IlyGySHr8JxJhPi0q6ODTBqhWspoqPUWJfegidxlLqrcTGrEGHtxChwKnArrOZAuhDJ9ojQBoFvtccAo7XFIKNcTyZChaZC7U8Ng0IBUQvZCfAWwhp8k4PUZD';
    $numero_destino = '5511954993501';
    $dados = [
        'messaging_product' => 'whatsapp',
        'recipient_type' => 'individual',
        'to' => $numero_destino,
        'type' => 'template',
        'template' => [
            'name' => 'hello_world',
            'language' => [
                'code' => 'en_US'
            ]
        ]
    ];

    $curl = curl_init();
    curl_setopt_array($curl, [
        CURLOPT_URL => 'https://graph.facebook.com/v21.0/493769300485920/messages',
        CURLOPT_RETURNTRANSFER => true,
        CURLOPT_CUSTOMREQUEST => 'POST',
        CURLOPT_POSTFIELDS => json_encode($dados),
        CURLOPT_HTTPHEADER => [
            "Content-Type: application/json",
            "Authorization: Bearer " . $access_token
        ],
    ]);

    $response = curl_exec($curl);
    curl_close($curl);
}

// Verificar e enviar mensagem para MACs vencidos
$expired_macs = [];
$active_macs = [];

// Se a requisição for AJAX e a função de envio foi chamada
if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['send_messages'])) {
    $sql_macs_vencidos = "SELECT title, numero_tel FROM ibo WHERE expire_date < DATE('now') AND numero_tel IS NOT NULL";
    $result = $db_sqlite->query($sql_macs_vencidos);

    while ($mac = $result->fetchArray(SQLITE3_ASSOC)) {
        $cliente_nome = $mac['title'];
        $numero_destino = '55' . preg_replace('/\D/', '', $mac['numero_tel']);
        enviarMensagemWhatsApp($numero_destino, $cliente_nome);
    }
    
    echo json_encode(['status' => 'success', 'message' => 'Mensagens enviadas com sucesso.']);
    exit();
}

if ($_SERVER['REQUEST_METHOD'] == 'POST' && isset($_POST['apagar_cliente']) && isset($_POST['cliente_id'])) {
    $cliente_id = intval($_POST['cliente_id']);
    $db = new SQLite3("./api/.ansdb.db");
    $stmt = $db->prepare("DELETE FROM ibo WHERE id = :id");
    $stmt->bindValue(":id", $cliente_id, SQLITE3_INTEGER);
    $stmt->execute();
    $db->close();
    exit();
}


// Criando a conexão com o banco de dados MySQL
$conn_mysql_vendas = new mysqli($server_mysql_vendas, $user_mysql_vendas, $pass_mysql_vendas, $db_mysql_vendas);

// Verificando a conexão MySQL
if ($conn_mysql_vendas->connect_error) {
    die("Conexão MySQL falhou: " . $conn_mysql_vendas->connect_error);
}

// Consultas SQL para os dados MySQL
$sql_total_vendas = "SELECT SUM(valor) as total FROM vendas";
$sql_count_vendas = "SELECT COUNT(*) as total_vendas FROM vendas";

// Executando as consultas
$result_total_vendas = $conn_mysql_vendas->query($sql_total_vendas);
$result_count_vendas = $conn_mysql_vendas->query($sql_count_vendas);

// Inicializando as variáveis
$total = 0;
$total_vendas = 0;

// Verificando os resultados das consultas
if ($result_total_vendas && $row_total = $result_total_vendas->fetch_assoc()) {
    $total = $row_total['total'];
}

if ($result_count_vendas && $row_count = $result_count_vendas->fetch_assoc()) {
    $total_vendas = $row_count['total_vendas'];
}

// Lógica para inserir o valor da venda
if ($_SERVER['REQUEST_METHOD'] == 'POST' && isset($_POST['valor_venda'])) {
    $valor_venda = $_POST['valor_venda'];

    // Verificando se o valor da venda é maior que zero
    if ($valor_venda > 0) {
        // Inserindo o valor da venda na tabela de vendas
        $sql_insert_venda = "INSERT INTO vendas (valor, data) VALUES (?, NOW())"; // 'data' é a data atual

        if ($stmt = $conn_mysql_vendas->prepare($sql_insert_venda)) {
            $stmt->bind_param("d", $valor_venda); // 'd' para decimal
            if ($stmt->execute()) {
                // Verifica e remove o último registro duplicado
                $sql_delete_last_duplicate = "
                    DELETE FROM vendas 
                    WHERE id = (
                        SELECT id FROM (SELECT id FROM vendas ORDER BY id DESC LIMIT 1) AS last_id
                    ) 
                    AND (
                        SELECT COUNT(*) FROM vendas WHERE valor = ? 
                    ) > 1
                ";

                if ($delete_stmt = $conn_mysql_vendas->prepare($sql_delete_last_duplicate)) {
                    $delete_stmt->bind_param("d", $valor_venda);
                    $delete_stmt->execute();
                    $delete_stmt->close();
                }

                echo "<script>alert('Venda inserida com sucesso!');</script>";
            } else {
                echo "<script>alert('Erro ao inserir a venda.');</script>";
            }
            $stmt->close();
        } else {
            echo "<script>alert('Erro na preparação da consulta de inserção.');</script>";
        }
    } else {
        echo "<script>alert('O valor da venda deve ser maior que zero.');</script>";
    }
}

if ($_SERVER['REQUEST_METHOD'] == 'POST' && isset($_POST['mac_address_m3u']) && isset($_POST['nova_url_m3u'])) {
    $mac_address_m3u = strtoupper(trim($_POST['mac_address_m3u']));
    $nova_url_m3u = trim($_POST['nova_url_m3u']);

    $db_sqlite = new SQLite3("./api/.ansdb.db");

    $stmt = $db_sqlite->prepare("UPDATE ibo SET url = :url WHERE mac_address = :mac_address");
    $stmt->bindValue(':url', $nova_url_m3u, SQLITE3_TEXT);
    $stmt->bindValue(':mac_address', $mac_address_m3u, SQLITE3_TEXT);

    if ($stmt->execute()) {
        echo "<script>alert('URL da lista M3U atualizada com sucesso!');</script>";
    } else {
        echo "<script>alert('Erro ao atualizar a URL da lista M3U.');</script>";
    }

    $db_sqlite->close();
}

// Lógica para alterar a data de expiração (expire_date)
if ($_SERVER['REQUEST_METHOD'] == 'POST' && isset($_POST['mac_address']) && isset($_POST['expire_date'])) {
    $mac_address = strtoupper(trim($_POST['mac_address']));
    $expire_date = $_POST['expire_date'];

    // Conectar ao banco de dados SQLite novamente para realizar a atualização
    $db_sqlite = new SQLite3("./api/.ansdb.db");

    // Atualizar o expire_date para o mac_address fornecido
    $stmt = $db_sqlite->prepare("UPDATE ibo SET expire_date = :expire_date WHERE mac_address = :mac_address");
    $stmt->bindValue(':expire_date', $expire_date, SQLITE3_TEXT);
    $stmt->bindValue(':mac_address', $mac_address, SQLITE3_TEXT);

    $result = $stmt->execute();

    // Fechar o banco de dados
    $db_sqlite->close();

    if ($result) {
        echo "<script>alert('Data de expiração atualizada com sucesso!');</script>";
    } else {
        echo "<script>alert('Falha ao atualizar a data de expiração.');</script>";
    }
}

// Lógica para alterar o título
if ($_SERVER['REQUEST_METHOD'] == 'POST' && isset($_POST['mac_address_title']) && isset($_POST['title'])) {
    $mac_address_title = strtoupper(trim($_POST['mac_address_title']));
    $title = $_POST['title'];

    // Conectar ao banco de dados SQLite para atualizar o title
    $db_sqlite = new SQLite3("./api/.ansdb.db");

    // Atualizar o title para o mac_address fornecido
    $stmt = $db_sqlite->prepare("UPDATE ibo SET title = :title WHERE mac_address = :mac_address");
    $stmt->bindValue(':title', $title, SQLITE3_TEXT);
    $stmt->bindValue(':mac_address', $mac_address_title, SQLITE3_TEXT);

    // Executa a atualização
    $result = $stmt->execute();

    // Fechar o banco de dados
    $db_sqlite->close();

    // Verificar se a atualização foi bem-sucedida
    if ($result) {
        echo "<script>alert('Título atualizado com sucesso!');</script>";
    } else {
        echo "<script>alert('Falha ao atualizar o título.');</script>";
    }
}

// Função para renovar usuário por 30 dias
if ($_SERVER['REQUEST_METHOD'] == 'POST' && isset($_POST['cliente_id'])) {
    $cliente_id = (int)$_POST['cliente_id'];

    if (empty($cliente_id)) {
        echo "ID do cliente não fornecido.";
        exit();
    }

    // Verificar a conexão com o banco de dados
    if (!$db_sqlite) {
        echo "Erro ao conectar ao banco de dados.";
        exit();
    }

    // Nova data de expiração (30 dias a partir de hoje)
    $nova_data_expiracao = date('Y-m-d', strtotime('+30 days'));

    // Preparar e executar a atualização
    $stmt = $db_sqlite->prepare("UPDATE ibo SET expire_date = :expire_date WHERE id = :id");

    $stmt->bindValue(':expire_date', $nova_data_expiracao, SQLITE3_TEXT);
    $stmt->bindValue(':id', $cliente_id, SQLITE3_INTEGER);

    // Executar a consulta
    $result = $stmt->execute();

    if ($result) {
        echo "Usuário renovado com sucesso!";
    } else {
        echo "Erro ao renovar o usuário: " . $db_sqlite->lastErrorMsg();
    }

    $db_sqlite->close();
}

// Lógica para alterar o dns
if ($_SERVER['REQUEST_METHOD'] == 'POST' && isset($_POST['mac_address_dns']) && isset($_POST['dns'])) {
    $mac_address_dns = strtoupper(trim($_POST['mac_address_dns']));
    $dns = $_POST['dns'];

    // Conectar ao banco de dados SQLite para atualizar o dns
    $db_sqlite = new SQLite3("./api/.ansdb.db");

    // Atualizar o dns para o mac_address fornecido
    $stmt = $db_sqlite->prepare("UPDATE ibo SET dns = :dns WHERE mac_address = :mac_address");
    $stmt->bindValue(':dns', $dns, SQLITE3_TEXT);
    $stmt->bindValue(':mac_address', $mac_address_dns, SQLITE3_TEXT);

    // Executa a atualização
    $result = $stmt->execute();

    // Fechar o banco de dados
    $db_sqlite->close();

    // Verificar se a atualização foi bem-sucedida
    if ($result) {
        echo "<script>alert('DNS atualizado com sucesso!');</script>";
    } else {
        echo "<script>alert('Falha ao atualizar o DNS.');</script>";
    }
}
// Fechar a conexão com o banco de dados
$conn_mysql_vendas->close();
?>

<?php
// Conectar ao banco de dados SQLite
$db_sqlite = new SQLite3("./api/.ansdb.db");

// Consulta para contar o número de clientes na tabela ibo
$sql_count_clients = "SELECT COUNT(*) as total_clients FROM ibo";
$result_count_clients = $db_sqlite->query($sql_count_clients);

// Inicializando a variável para o número de clientes
$total_clients = 0;

// Verificando o resultado da consulta
if ($result_count_clients && $row_count_clients = $result_count_clients->fetchArray(SQLITE3_ASSOC)) {
    $total_clients = $row_count_clients['total_clients'];
}

// Fechar a conexão com o banco de dados
$db_sqlite->close();


?>
<?php
ini_set("display_errors", 1);
ini_set("display_startup_errors", 1);
error_reporting(E_ALL);

// Conexão com o banco de dados MySQL
$server_mysql_vendas = "localhost";
$user_mysql_vendas   = "financeiro";
$pass_mysql_vendas   = "asder123Ww@";
$db_mysql_vendas     = "financeiro";

// Criando a conexão com o banco de dados MySQL
$conn_mysql_vendas = new mysqli($server_mysql_vendas, $user_mysql_vendas, $pass_mysql_vendas, $db_mysql_vendas);

// Verificando a conexão MySQL
if ($conn_mysql_vendas->connect_error) {
    die("Conexão MySQL falhou: " . $conn_mysql_vendas->connect_error);
}

// Consulta para somar as vendas do último mês
$sql_total_vendas_ultimo_mes = "SELECT SUM(valor) as total FROM vendas WHERE data >= CURDATE() - INTERVAL 1 MONTH";

// Executando a consulta
$result_total_vendas_ultimo_mes = $conn_mysql_vendas->query($sql_total_vendas_ultimo_mes);

// Inicializando a variável para o total
$total_ultimo_mes = 0;

// Verificando o resultado e atribuindo o valor total
if ($result_total_vendas_ultimo_mes && $row_total = $result_total_vendas_ultimo_mes->fetch_assoc()) {
    $total_ultimo_mes = $row_total['total'];
}

// Fechar a conexão com o banco de dados
$conn_mysql_vendas->close();
?>
<?php
// Caminho do banco de dados SQLite
$db_sqlite_path = "./api/.ansdb.db";

// Conectando ao banco de dados SQLite
$db_sqlite = new SQLite3($db_sqlite_path);

// Consulta para obter os MAC Addresses da tabela 'ibo'
$sql_mac_addresses = "SELECT mac_address FROM ibo";
$result_mac_addresses = $db_sqlite->query($sql_mac_addresses);

// Criando um array para armazenar os MAC Addresses
$mac_addresses = [];
while ($row = $result_mac_addresses->fetchArray(SQLITE3_ASSOC)) {
    $mac_addresses[] = $row['mac_address'];
    
    
}
if ($_SERVER['REQUEST_METHOD'] == 'POST' && isset($_POST['trocar_todos_dns']) && !empty($_POST['novo_inicio_dns'])) {
    $novo_inicio_dns = rtrim($_POST['novo_inicio_dns'], '/') . '/'; // Garante que termina com /

    // Conectando ao banco de dados SQLite
    $db_sqlite = new SQLite3("./api/.ansdb.db");

    // Recuperando todos os registros com DNS atual
    $sql = "SELECT mac_address, dns FROM ibo";
    $result = $db_sqlite->query($sql);

    while ($row = $result->fetchArray(SQLITE3_ASSOC)) {
        $mac_address = strtoupper($row['mac_address']);
        $dns_atual = $row['dns'];

        if (strpos($dns_atual, 'http://opbx.top/') === 0) {
            $restante_url = substr($dns_atual, strlen('http://opbx.top/'));
            $novo_dns = $novo_inicio_dns . $restante_url;

            $stmt = $db_sqlite->prepare("UPDATE ibo SET dns = :dns WHERE mac_address = :mac_address");
            $stmt->bindValue(':dns', $novo_dns, SQLITE3_TEXT);
            $stmt->bindValue(':mac_address', $mac_address, SQLITE3_TEXT);
            $stmt->execute();
        }
    }

    $db_sqlite->close();

    echo "<script>alert('Todos os DNS foram atualizados com sucesso!');</script>";
}


// Lógica para consultar os clientes e contas inativas
// Conectar ao banco de dados SQLite
$db_sqlite = new SQLite3("./api/.ansdb.db");

// Consulta para contar o número de clientes totais
$sql_count_clientes = "SELECT COUNT(*) as total_clientes FROM ibo";
$result_count_clientes = $db_sqlite->query($sql_count_clientes);
$row_count_clientes = $result_count_clientes->fetchArray(SQLITE3_ASSOC);
$total_clientes = $row_count_clientes['total_clientes'];

// Consulta para contar o número de contas inativas (com expire_date inferior a data atual)
$sql_count_inativas = "SELECT COUNT(*) as total_inativas FROM ibo WHERE expire_date < DATE('now')";
$result_count_inativas = $db_sqlite->query($sql_count_inativas);
$row_count_inativas = $result_count_inativas->fetchArray(SQLITE3_ASSOC);
$total_inativas = $row_count_inativas['total_inativas'];

// Fechar a conexão com o banco de dados
$db_sqlite->close();
?>


<?php


// Verificar se o usuário está autenticado e é um administrador
if (!isset($_SESSION['id']) || !$_SESSION['admin']) {
    header("Location: login.php");
    exit();
}



ini_set("display_errors", 1);
ini_set("display_startup_errors", 1);
error_reporting(E_ALL);

// Conectar ao banco de dados SQLite
$db = new SQLite3("./api/.ansdb.db");

// Verificar se a coluna numero_tel já existe
$result = $db->query("PRAGMA table_info(ibo)");
$coluna_existe = false;
while ($row = $result->fetchArray(SQLITE3_ASSOC)) {
    if ($row['name'] == 'numero_tel') {
        $coluna_existe = true;
        break;
    }
}

// Adicionar a coluna numero_tel somente se não existir
if (!$coluna_existe) {
    $db->exec("ALTER TABLE ibo ADD COLUMN numero_tel VARCHAR(15)");
}

// Lógica para atualizar o número de telefone
if ($_SERVER['REQUEST_METHOD'] == 'POST' && isset($_POST['save_phone'])) {
    $cliente_id = $_POST['cliente_id'];
    $numero_tel = $_POST['numero_tel'];

    // Atualizar o número de telefone na tabela 'ibo'
    $stmt = $db->prepare("UPDATE ibo SET numero_tel = :numero_tel WHERE id = :id");
    $stmt->bindValue(':numero_tel', $numero_tel, SQLITE3_TEXT);
    $stmt->bindValue(':id', $cliente_id, SQLITE3_INTEGER);

    if ($stmt->execute()) {
        echo "<script>alert('Número de telefone salvo com sucesso!');</script>";
    } else {
        echo "<script>alert('Erro ao salvar o número de telefone.');</script>";
    }
}



// Buscar todos os mac_addresses para o select
$res = $db->query("SELECT id, mac_address, title, numero_tel FROM ibo");
$clientes = [];
while ($row = $res->fetchArray()) {
    $clientes[] = $row;
}

// Conexão ao banco de dados SQLite
$db_sqlite = new SQLite3("./api/.ansdb.db");

// Consulta para obter os 5 primeiros MACs com `expire_date` vencida e `numero_tel`
$sql_expired_macs = "SELECT mac_address, title, numero_tel FROM ibo WHERE expire_date ";

$result_expired_macs = $db_sqlite->query($sql_expired_macs);

// Verifica se existem registros com expiração vencida
$expired_macs = [];
while ($row = $result_expired_macs->fetchArray(SQLITE3_ASSOC)) {
    $expired_macs[] = $row;
}


// Ordenar MACs vencidos primeiro
$expired_macs = [];
$active_macs = [];

foreach ($macs as $mac) {
    // Verifica se o MAC está vencido
    $isExpired = isset($mac['expire_date']) && strtotime($mac['expire_date']) < time();
    if ($isExpired) {
        $expired_macs[] = $mac;
    } else {
        $active_macs[] = $mac;
    }
}

// Combine listas com os vencidos primeiro
$sorted_macs = array_merge($expired_macs, $active_macs);

$db_sqlite->close();


$codigo_downloader = "557898";


?>

<?php
// URL da API Node.js (ajuste conforme sua VPS/domínio)
$apiUrl = 'http://149.56.205.237:3050/online'; // ou http://lcan.thefullnet.com.br:3000/online

// Obtem os dados da API
$response = @file_get_contents($apiUrl);

$total_online = 0;
$clientes_online = [];

if ($response !== false) {
    $data = json_decode($response, true);
    $total_online = $data['total_online'] ?? 0;
    $clientes_online = $data['usuarios_online'] ?? [];
} else {
    $total_online = 0;
}
?>
<?php


// Carregar os dados do arquivo JSON
$jsonData = file_get_contents('./api/theme_change/Setting.json');
$data = json_decode($jsonData, true);

// Verificar qual é o tema atual
$tema_atual = "";

foreach($data as $item){
    if($item["RTXSetting"] === "mLayout") {
        $tema_atual = $item["PanalData"];
        break;
    }
}

// Definir os temas disponíveis
$temas = [
    "theme_d" => "Tema 1",
    "theme_2" => "Tema 2",
    "theme_3" => "Tema 3",
    "theme_4" => "Tema 4",
    "theme_5" => "Tema 5",
    "theme_6" => "Tema 6",
    "theme_7" => "Tema 7",
    "theme_8" => "Tema 8",
    "theme_9" => "Tema 9"
];

// Verificar o tema atual escolhido
$tema_atual_escolhido = isset($temas[$tema_atual]) ? $temas[$tema_atual] : "Tema Desconhecido";

// Verificar se foi enviado o formulário para trocar o tema
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    $selectedOption = $_POST['options'];
    $tema = $temas[$selectedOption];

    echo "O tema escolhido é: $tema";

    // Atualizar o arquivo JSON com a seleção do novo tema
    $data[0]["RTXSetting"] = "mLayout";
    $data[0]["PanalData"] = $selectedOption;

    // Codificar os dados atualizados em JSON
    $jsonData = json_encode($data, JSON_PRETTY_PRINT);

    // Salvar as alterações no arquivo JSON
    file_put_contents('./api/theme_change/Setting.json', $jsonData);

    // Redirecionar para a mesma página para refletir as mudanças
    header("Location: " . $_SERVER['PHP_SELF']);
    exit();
}

?>
<?php


$jsonFilePath = './img/logo/logo_filenames.json';
$uploadPath = './img_custom/logo/';

if ($_SERVER['REQUEST_METHOD'] === 'POST') {

    // Upload por arquivo
    if (isset($_POST['upload']) && isset($_FILES['image'])) {
        $file = $_FILES['image'];
        $fileType = $file['type'];
        $fileTemp = $file['tmp_name'];

        // Validar tipo
        $allowedTypes = ['image/jpeg', 'image/png', 'image/gif'];
        if (in_array($fileType, $allowedTypes)) {
            // Apaga arquivos antigos da pasta
            $files = scandir($uploadPath);
            foreach ($files as $fileItem) {
                if (!in_array($fileItem, ['.', '..'])) {
                    @unlink($uploadPath . $fileItem);
                }
            }

            // Salva novo arquivo
            $fileName = uniqid() . '.' . pathinfo($file['name'], PATHINFO_EXTENSION);
            $destination = $uploadPath . $fileName;

            if (move_uploaded_file($fileTemp, $destination)) {
                $jsonData = json_encode([
                    ["ImageName" => "../img_custom/logo/" . $fileName, "Upload_type" => "by_file"]
                ]);
                file_put_contents($jsonFilePath, $jsonData);
                header("Location: logo.php");
                exit();
            } else {
                echo "Erro ao mover o arquivo.";
            }
        } else {
            echo "Tipo de arquivo inválido.";
        }
    }

    // Upload por URL
    if (isset($_POST['url-submit']) && isset($_POST['image-url'])) {
        $imageUrl = $_POST['image-url'];
        if (filter_var($imageUrl, FILTER_VALIDATE_URL)) {
            $jsonData = json_encode([
                ["ImageName" => $imageUrl, "Upload_type" => "by_url"]
            ]);
            file_put_contents($jsonFilePath, $jsonData);
            header("Location: logo.php");
            exit();
        } else {
            echo "URL inválida.";
        }
    }
}
?>
<?php

// Caminho do arquivo JSON para armazenar as informações do fundo
$jsonFilePath = './img/fundo/image_filenames.json';
$uploadPath = './img_custom/fundo/';

if ($_SERVER['REQUEST_METHOD'] === 'POST') {

    // Upload por arquivo
    if (isset($_POST['upload']) && isset($_FILES['image'])) {
        $file = $_FILES['image'];
        $fileType = $file['type'];
        $fileTemp = $file['tmp_name'];

        // Validar tipo
        $allowedTypes = ['image/jpeg', 'image/png', 'image/gif'];
        if (in_array($fileType, $allowedTypes)) {
            // Apaga arquivos antigos da pasta
            $files = scandir($uploadPath);
            foreach ($files as $fileItem) {
                if (!in_array($fileItem, ['.', '..'])) {
                    @unlink($uploadPath . $fileItem);
                }
            }

            // Salva o novo arquivo
            $fileName = uniqid() . '.' . pathinfo($file['name'], PATHINFO_EXTENSION);
            $destination = $uploadPath . $fileName;

            if (move_uploaded_file($fileTemp, $destination)) {
                $jsonData = json_encode([
                    ["ImageName" => "../img_custom/fundo/" . $fileName, "Upload_type" => "by_file"]
                ]);
                file_put_contents($jsonFilePath, $jsonData);
                header("Location: fundo.php"); // Redireciona após o upload
                exit();
            } else {
                echo "Erro ao mover o arquivo.";
            }
        } else {
            echo "Tipo de arquivo inválido.";
        }
    }

    // Upload por URL
    if (isset($_POST['url-submit']) && isset($_POST['image-url'])) {
        $imageUrl = $_POST['image-url'];
        if (filter_var($imageUrl, FILTER_VALIDATE_URL)) {
            $jsonData = json_encode([
                ["ImageName" => $imageUrl, "Upload_type" => "by_url"]
            ]);
            file_put_contents($jsonFilePath, $jsonData);
            header("Location: fundo.php"); // Redireciona após o envio da URL
            exit();
        } else {
            echo "URL inválida.";
        }
    }
}
?>
<?php
// Caminho para o arquivo JSON
$jsonFile = '/www/wwwroot/lcan.thefullnet.com.br/api/valores.json';

// Verificar se o arquivo existe
if (!file_exists($jsonFile)) {
    die("Erro: Arquivo JSON não encontrado.");
}

// Carregar os dados do arquivo JSON
$dados = json_decode(file_get_contents($jsonFile), true);

// Verificar se a variável $dados foi carregada corretamente
if ($dados === null) {
    die("Erro: Não foi possível decodificar o arquivo JSON. Verifique se o arquivo tem um formato válido.");
}

// Verificar se os índices necessários estão definidos no array $dados
if (!isset($dados['nome'], $dados['cidade'], $dados['chave'], $dados['planos'])) {
    die("Erro: O arquivo JSON está faltando dados necessários.");
}

// A partir daqui, os dados estão garantidos para estar corretamente carregados
$nome = $dados['nome'];
$cidade = $dados['cidade'];
$chave = $dados['chave'];
$planos = $dados['planos'];

// Verificar se o formulário foi enviado
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    // Obter os dados do formulário
    $nome = $_POST['nome'];
    $cidade = $_POST['cidade'];
    $chave = $_POST['chave'];
    $plano1 = $_POST['plano1'];
    $plano2 = $_POST['plano2'];
    $plano3 = $_POST['plano3'];

    // Atualizar o array com os novos dados
    $dados = [
        'nome' => $nome,
        'cidade' => $cidade,
        'chave' => $chave,
        'planos' => [
            ['nome' => 'Plano Bronze', 'valor' => (float)$plano1],
            ['nome' => 'Plano Prata', 'valor' => (float)$plano2],
            ['nome' => 'Plano Ouro', 'valor' => (float)$plano3],
        ]
    ];

    // Salvar as alterações no arquivo JSON
    file_put_contents($jsonFile, json_encode($dados, JSON_PRETTY_PRINT));

    // Mensagem de sucesso
    $mensagem = "Alterações salvas com sucesso!";
}
?>
<?php
$db = new SQLite3("./api/.ansdb.db");

$total_ativos = 0;
$total_inativas = 0;
$total_clientes = 0;
$total_7_dias = 0;

$data_atual = new DateTime();

$result = $db->query("SELECT expire_date, title FROM ibo");

while ($row = $result->fetchArray(SQLITE3_ASSOC)) {
    $title = trim($row['title']);
    $expira = $row['expire_date'];

    // Ignora registros de teste
    if ($title === 'NOVO*** (TESTE CADASTRADO)' || $title === 'Teste') {
        continue;
    }

    $data_expiracao = new DateTime($expira);
    $dias_restantes = (int)$data_atual->diff($data_expiracao)->format('%r%a');

    // Total geral (exceto testes)
    $total_clientes++;

    if ($dias_restantes < 0) {
        $total_inativas++;
    } elseif ($dias_restantes <= 7) {
        $total_ativos++;
        $total_7_dias++;
    } else {
        $total_ativos++;
    }
}
?>


<?php
$jsonFilex = './img/fundo/image_filenames.json';

// Lê o conteúdo do arquivo JSON
$jsonDatax = file_get_contents($jsonFilex);

// Decodifica os dados JSON
$imageDatax = json_decode($jsonDatax, true);

// Extrai o nome do arquivo
$filenamex = $imageDatax[0]['ImageName'];
$uploadMethod = $imageDatax[0]['Upload_type'];

if ($uploadMethod == "by_file") {
    $imageFilex = $filenamex;  // Caminho para o arquivo de imagem
    $method = "Método de upload";
} elseif ($uploadMethod == "by_url") {
    $imageFilex = $filenamex;  // Caminho da URL
    $method = "Método de URL";
} else {
    // Se não houver imagem definida, usa uma imagem padrão
    $imageFilex = "https://c4.wallpaperflare.com/wallpaper/159/71/731/errors-minimalism-typography-red-wallpaper-preview.jpg";
    $method = "";
}
?>

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>PAINEL TV</title>
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">

 <style>
/* ------------------- BASE ------------------- */
body {
    font-family: 'Poppins', sans-serif;
    background-color: #121212;
    color: #fff;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    box-sizing: border-box;
    padding-top: 60px; /* espaço para o menu fixo */
    overflow-x: hidden; /* Previne o overflow horizontal */
    font-size: 16px; /* Tamanho base da fonte */
}

/* ------------------- HAMBURGUER MENU ------------------- */
#hamburguer {
    position: fixed;
    top: 5px;
    left: 20px;
    font-size: 28px;
    color: white;
    cursor: pointer;
    z-index: 1100;
}

/* ------------------- TOP BAR ------------------- */
#topBar {
    width: 100%;
    height: 50px;
    background-color: #1c1c1c;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 15px;
    color: white;
    font-size: 18px;
}

#topBar .menu-icon {
    cursor: pointer;
    font-size: 30px;
    transition: 0.3s;
}

#topBar .menu-icon:hover {
    background-color: #333;
    border-radius: 5px;
}

/* ------------------- SIDEBAR ------------------- */
#sidebar {
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 999;
    top: 0;
    left: 0;
    background-color: #1c1c1c;
    overflow-x: hidden;
    transition: 0.3s;
    padding-top: 40px;
}

.sidebar-link {
    padding: 10px 18px;
    text-decoration: none;
    font-size: 16px;
    color: white;
    display: block;
    transition: 0.3s;
    border-bottom: 1px solid #333;
}

.sidebar-link:hover {
    background-color: #333;
}

/* ------------------- FORMS ------------------- */
.form-container {
    background-color: #1c1c1c;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
    width: 90%;
    max-width: 500px;
    margin: 10px auto;
}

.form-container input,
.form-container select,
.form-container button {
    width: 90%;
    padding: 12px;
    margin: 10px 0;
    border: 1px solid #333;
    border-radius: 5px;
    background-color: #2a2a2a;
    color: #fff;
}

.form-container button {
    background-color: #007bff;
    color: white;
    cursor: pointer;
    border: none;
    transition: background-color 0.3s ease;
}

.form-container button:hover {
    background-color: #0056b3;
}

/* ------------------- CARDS / CONTAINERS ------------------- */
.container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
    width: 95%;
    max-width: 1000px;
    padding: 20px;
    box-sizing: border-box;
    margin: 0 auto;
}

.card {
    background-color: #1c1c1c;
    padding: 20px;
    border-radius: 15px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
    text-align: center;
    font-size: 1rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 90%;
    margin: 0 auto;
}

.card h2 {
    color: #fff;
    font-size: 1.4rem;
    margin-bottom: 15px;
}

.total-value {
    font-size: 2rem;
    color: #4CAF50;
    font-weight: 600;
    margin-top: 10px;
}

.card .total-clientes,
.card .total-inativas {
    font-size: 1.2rem;
    color: #fff;
    margin-top: 10px;
}

/* ------------------- BOTÕES GERAIS ------------------- */
.button-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin-top: 20px;
    text-align: center;
}

.button {
    background-color: #007bff;
    color: white;
    padding: 10px 20px;
    margin-top: 20px;
    border: none;
    cursor: pointer;
    border-radius: 5px;
    font-size: 1rem;
    transition: background-color 0.3s ease;
}

.button:hover {
    background-color: #0056b3;
}

#statusMessage {
    margin-top: 15px;
    font-size: 0.9rem;
    color: #ccc;
    text-align: center;
}

/* ------------------- RODAPÉ ------------------- */
.footer {
    position: fixed;
    bottom: 0;
    width: 100%;
    background-color: #1c1c1c;
    text-align: center;
    padding: 10px 0;
    font-size: 0.9rem;
    color: #999;
    box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.3);
}

/* ------------------- SCROLL / LISTA ------------------- */
.scrollable-list {
    max-height: 300px;
    overflow-y: auto;
}

.form-container ul {
    list-style: none;
    padding: 0;
}

.form-container li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 0;
    border-bottom: 1px solid #444;
}

.form-container li:last-child {
    border-bottom: none;
}

/* ------------------- ICONES ------------------- */
.client-info {
    font-size: 1.1rem;
    flex-grow: 1;
}

.icon-container {
    display: flex;
    gap: 10px;
}

.icon-container a img {
    width: 50px;
    height: 50px;
    transition: transform 0.3s ease;
}

.icon-container a:hover img {
    transform: scale(1.1);
}

.whatsapp-link img:hover {
    transform: scale(1.1);
    box-shadow: 0px 4px 10px rgba(37, 211, 102, 0.5);
    animation: pulse 1s infinite;
}

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

/* ------------------- MODAL (MODERNO) ------------------- */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(18, 18, 18, 0.85);
  backdrop-filter: blur(6px);
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 1000;
  animation: fadeIn 0.3s ease-in-out;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.modal {
  background-color: #2a2a2a;
  padding: 40px 30px;
  border-radius: 16px;
  width: 90%;
  max-width: 480px;
  color: #fff;
  text-align: center;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.8);
  animation: slideUp 0.4s ease;
  position: relative;
}

@keyframes slideUp {
  from {
    transform: translateY(20px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

/* Título */
.modal h3 {
  font-size: 1.6rem;
  margin-bottom: 25px;
  color: #00bfff;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* Botões */
.modal button {
  margin: 15px 8px 0;
  padding: 14px 22px;
  border: none;
  cursor: pointer;
  border-radius: 10px;
  font-size: 1.1rem;
  font-weight: 500;
  transition: all 0.3s ease;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
  outline: none;
}

.btn-confirm {
  background: linear-gradient(135deg, #28a745, #34d058);
  color: white;
}

.btn-confirm:hover {
  background: linear-gradient(135deg, #218838, #2ecc71);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5);
}

.btn-cancel {
  background: linear-gradient(135deg, #dc3545, #e55353);
  color: white;
}

.btn-cancel:hover {
  background: linear-gradient(135deg, #c82333, #ff6b6b);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5);
}

/* Fechar botão */
.close-btn {
  position: absolute;
  top: 15px;
  right: 15px;
  font-size: 28px;
  color: #fff;
  cursor: pointer;
  transition: color 0.3s ease;
}

.close-btn:hover {
  color: #ff6347;
}

/* Foco nos campos */
input:focus, select:focus, textarea:focus {
  border-color: #00bfff;
  outline: none;
}

/* Responsividade para telas pequenas */
@media (max-width: 768px) {
    body {
        font-size: 14px;
        padding-top: 50px;
    }

    .container {
        grid-template-columns: 1fr;
        gap: 15px;
        padding: 10px;
    }

    .form-container {
        padding: 15px;
        max-width: 95%;
    }

    .form-container input, .form-container select, .form-container button {
        padding: 10px;
    }

    /* Popup ajustado para telas pequenas */
    #popupOnline {
        width: 90%;
        max-width: 80%;
        padding: 15px;
    }

    #popupOnline h3 {
        font-size: 1.4rem;
    }

    #popupOnline li {
        flex-direction: column;
        align-items: flex-start;
    }

    /* Ajustes no botão de fechar */
    button {
        padding: 8px 16px;
        font-size: 1rem;
    }
}

/* Para telas muito pequenas */
@media (max-width: 480px) {
    #popupOnline {
        width: 90%;
    }

    .total-online {
        font-size: 1.1rem;
        padding: 5px;
    }

    .total-online span {
        font-size: 1.3rem;
    }

    .total-online button {
        font-size: 0.8rem;
        padding: 3px 3px;
    }

    #popupOnline li {
        font-size: 0.9rem;
    }
}

/* Para ocultar a scrollbar, mas deixá-la funcional */
#sidebar {
    scrollbar-width: thin;
    scrollbar-color: transparent transparent;
}

#sidebar::-webkit-scrollbar {
    width: 8px;
    background-color: transparent;
}

#sidebar::-webkit-scrollbar-thumb {
    background-color: transparent;
}

#sidebar::-webkit-scrollbar-track {
    background-color: transparent;
}
</style>


</head>
<div class="form-container">
    <!-- TOPO COM MENU HAMBÚRGUER -->
 <header id="topBar">
    <div style="display: flex; align-items: center; gap: 10px;">
        <span id="hamburguer" class="menu-icon">&#9776;</span>
    </div>

    <div style="flex: 1; text-align: center;">
         <h1 id="tituloPainel" style=" font-size: 20px;"><?= htmlspecialchars($name) ?></h1>

    </div>

    <div>
        <!-- Substitua 'logo.png' pelo caminho da sua logo -->
     


    </div>
</header>
<?php
$db = new SQLite3("./api/.anspanel.db");
$res = $db->query("SELECT NAME, LOGO FROM USERS WHERE ID = 1");
$row = $res->fetchArray(SQLITE3_ASSOC);
$name = $row['NAME'];
$logo = $row['LOGO'];
?>

<!-- SIDEBAR -->
<div id="sidebar" style="height: 100%; width: 0; position: fixed; z-index: 1000; top: 0; left: 0; background-color: #111; overflow-y: scroll; transition: 0.3s; padding-top: 60px;">
    <div style="text-align: center;">
        
      <img id="logoPainel" src="<?= $logo ?>?v=<?= time() ?>" style="width: 80px; height: 80px;">

    </div>
    <br>
    <a href="javascript:void(0);" onclick="mostrarFormulario('form0')" class="sidebar-link" id="link-inicio">🏠 Início</a>
    <a href="lista_completa.php" target="_blank" class="sidebar-link">📜 Clientes</a>
    
    <a href="javascript:void(0);" onclick="abrirModalAlterarNome()" class="sidebar-link">🔧 Alterar Nome</a>
    <a href="javascript:void(0);" onclick="abrirModalAlterarExpiracao()" class="sidebar-link">📅 Alterar Data</a>
    <a href="javascript:void(0);" onclick="abrirModalAlterarM3U()" class="sidebar-link">🔁 Trocar Lista M3U</a>
    <a href="javascript:void(0);" onclick="abrirModalDNS()" class="sidebar-link">🌐 Trocar todos DNS</a>
    <a href="javascript:void(0);" onclick="abrirModalAlterarPagamento()" class="sidebar-link">💳 Pagamentos</a>
    <a href="javascript:void(0);" onclick="abrirModalPersonalizacao()" class="sidebar-link">⚙️ Personalizar App</a>
    <a href="https://lcan.thefullnet.com.br/all_users.php" class="sidebar-link">🌐 Configuração</a>
    <a href="javascript:void(0);" onclick="abrirModalEditarPerfil()" class="sidebar-link">✏️ Perfil</a>
    <a href="https://lcan.thefullnet.com.br/all_users.php" class="sidebar-link">🚪 Sair</a>
</div>




<!-- Modal de Personalização do App -->
<div class="modal-overlay" id="personalizacaoModal" style="display: none;">
    <div class="modal">
        <h2>Personalizar App</h2>
        <ul>
            <li><button onclick="baixarApp()">🔗 Baixar App</button></li>
            <li><button onclick="trocarTema()">🌈 Trocar Tema</button></li>
            <li><button onclick="trocarLogo()">🖼️ Trocar Logo</button></li>
            <li><button onclick="trocarFundo()">🖌️ Trocar Fundo</button></li>
            <li><button onclick="trocarBanner()">📷 Trocar Banner de Início</button></li>
        </ul>
        <button class="btn-cancel" onclick="fecharModal()">Fechar</button>
    </div>
</div>
<script>
function abrirModalAlterarPagamento() {
  const modal = document.getElementById('modalAlterarPagamento');
  if (modal) modal.style.display = 'flex';
}

function fecharModalAlterarPagamento(event) {
  const modal = document.getElementById('modalAlterarPagamento');
  if (!event || event.target === modal) {
    modal.style.display = 'none';
  }
}
</script>

<script>


/* ---------- FORM 1: Alterar Nome do Cliente ---------- */
function abrirModalAlterarNome() {
    document.getElementById("modalAlterarNome").style.display = "flex";
}
function fecharModalAlterarNome(event) {
    if (!event || event.target.id === "modalAlterarNome") {
        document.getElementById("modalAlterarNome").style.display = "none";
    }
}

/* ---------- FORM 2: Alterar Data de Expiração ---------- */
function abrirModalAlterarExpiracao() {
    document.getElementById("modalAlterarExpiracao").style.display = "flex";
}
function fecharModalAlterarExpiracao(event) {
    if (!event || event.target.id === "modalAlterarExpiracao") {
        document.getElementById("modalAlterarExpiracao").style.display = "none";
    }
}

/* ---------- FORM 3: Trocar Lista M3U ---------- */
function abrirModalAlterarM3U() {
    document.getElementById("modalAlterarM3U").style.display = "flex";
}
function fecharModalAlterarM3U(event) {
    if (!event || event.target.id === "modalAlterarM3U") {
        document.getElementById("modalAlterarM3U").style.display = "none";
    }
}

/* ---------- FORM 4: Trocar DNS de Todos ---------- */
function abrirModalDNS() {
    document.getElementById("modalAlterarDNS").style.display = "flex";
}
function fecharModalDNS(event) {
    if (!event || event.target.id === "modalAlterarDNS") {
        document.getElementById("modalAlterarDNS").style.display = "none";
    }
}
</script>


    <!-- Logo -->
   
    <br>
   <div id="cardControles" class="form-container" style="background: #2a2a2a; border-radius: 15px; padding: 20px; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3); max-width: 400px; margin: auto; text-align: center; color: white; font-family: 'Poppins', sans-serif;">
    

<!-- Card Horizontal com Ícones de Pessoas -->
<div style="max-width: 400px; margin: auto; text-align: center; font-family: 'Poppins', sans-serif; color: white; background-color: #1e1e1e; padding: 20px; border-radius: 12px; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);">
    <div style="font-size: 1.2rem; font-weight: bold; margin-bottom: 20px;">📊 Clientes</div>
    
    <div style="display: flex; justify-content: space-between; flex-wrap: nowrap; gap: 10px;">
        
        <!-- Ativos -->
        <div style="flex: 1; background-color: #2e2e2e; padding: 10px; border-radius: 10px;">
            <div style="font-size: 1.3rem;">
                <i class="fas fa-user-check" style="color: #00ffae;"></i>
            </div>
            <div style="font-size: 0.8rem; color: #ccc;">Ativos</div>
            <div style="font-size: 1rem; color: #00ffae; font-weight: bold;">
                <?php echo $total_ativos; ?>
            </div>
        </div>

        <!-- Inativos (Font Awesome) -->
        <div style="flex: 1; background-color: #2e2e2e; padding: 10px; border-radius: 10px;">
            <div style="font-size: 1.3rem;"><i class="fas fa-user-xmark"></i></div>
            <div style="font-size: 0.8rem; color: #ccc;">Inativos</div>
            <div style="font-size: 1rem; color: #FF6347; font-weight: bold;">
                <?php echo $total_inativas; ?>
            </div>
        </div>

        <!-- Total -->
        <div style="flex: 1; background-color: #2e2e2e; padding: 10px; border-radius: 10px;">
            <div style="font-size: 1.3rem;">
                <i class="fas fa-users" style="color: #6495ED;"></i>
            </div>
            <div style="font-size: 0.8rem; color: #ccc;">Total</div>
            <div style="font-size: 1rem; color: #6495ED; font-weight: bold;">
                <?php echo $total_clientes; ?>
            </div>
        </div>

        <!-- A Vencer -->
        <div style="flex: 1; background-color: #2e2e2e; padding: 10px; border-radius: 10px;">
            <div style="font-size: 1.3rem;">
                <i class="fas fa-clock" style="color: #FFD700;"></i>
            </div>
            <div style="font-size: 0.8rem; color: #ccc;">Vencer</div>
            <div style="font-size: 1rem; color: #FFD700; font-weight: bold;">
                <?php echo $total_7_dias; ?>
            </div>
        </div>

    </div>
</div>


<!-- Card Previsto para 30 dias -->
<div style="max-width: 400px; margin: 20px auto; font-family: 'Poppins', sans-serif;">
    <div style="
        background: linear-gradient(135deg, #1e1e1e, #2c2c2c);
        border-radius: 12px;
        padding: 20px;
        color: #ffffff;
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
        text-align: center;
    ">
        <div style="font-size: 1.2rem; font-weight: 600; display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 10px;">
            <i class="fas fa-calendar-alt" style="color: #00ffae;"></i>
            Previsto para 30 dias
        </div>
        <div style="font-size: 1.4rem; font-weight: bold; color: #00ffae; margin-top: 10px;">
            <?php
            $total_30_dias = 0;
            $db = new SQLite3("./api/.ansdb.db");

            $result = $db->query("SELECT expire_date, title FROM ibo");
            $data_atual = new DateTime();

            while ($row = $result->fetchArray(SQLITE3_ASSOC)) {
                $expira = $row['expire_date'];
                $title = trim($row['title']);

                if ($title === 'NOVO*** (TESTE CADASTRADO)' || $title === 'Teste') {
                    continue;
                }

                $data_expiracao = new DateTime($expira);
                $intervalo = $data_atual->diff($data_expiracao);
                $dias_restantes = $intervalo->format('%r%a');

                if ($dias_restantes >= 0 && $dias_restantes <= 30) {
                    $total_30_dias += 25;
                }
            }

            echo "R$ " . number_format($total_30_dias, 2, ',', '.');
            ?>
        </div>
    </div>
</div>
<!-- Clientes Online -->
<div class="total-online" style="font-size: 1.4rem; margin: 15px 0; padding: 20px; border-radius: 12px; background-color: #333; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); text-align: center;">
    <span id="total-online" style="font-size: 1.8rem; font-weight: bold; color: #28a745;">
        0
    </span> Clientes Online
    <button onclick="abrirPopupOnline()" style="margin-top: 15px; padding: 10px 20px; font-size: 1.1rem; background-color: #00ffae; color: #000; border: none; border-radius: 8px; cursor: pointer; transition: background-color 0.3s ease;">
        Ver Clientes Online
    </button>
    
    <div id="popupOnline" style="display: none; background-color: rgba(0, 0, 0, 0.8); padding: 25px; border-radius: 15px; color: white; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); max-height: 80vh; overflow-y: auto; width: 80%; max-width: 600px;">
        <h3 style="font-size: 1.6rem; margin-bottom: 15px;">Clientes Online:</h3>
        <ul id="clientes-list" style="list-style-type: none; padding: 0; font-size: 1.1rem;"></ul>
        
        <button onclick="fecharPopupOnline()" style="padding: 10px 20px; font-size: 1.1rem; background-color: #d32f2f; color: #fff; border: none; border-radius: 8px; cursor: pointer; transition: background-color 0.3s ease;">
            Fechar
        </button>
    </div>
</div>

<script>
// Função para abrir o popup
function abrirPopupOnline() {
    document.getElementById('popupOnline').style.display = 'block';
}

// Função para fechar o popup
function fecharPopupOnline() {
    document.getElementById('popupOnline').style.display = 'none';
}

// Função para atualizar os dados dos clientes online
function atualizarClientesOnline() {
    fetch('clientes_online.php')  // Chama a API que retornará os dados
        .then(response => response.json())
        .then(data => {
            // Atualiza o total de clientes online
            document.getElementById('total-online').innerText = data.total_online;

            // Atualiza a lista de clientes online no popup
            const clientesList = document.getElementById('clientes-list');
            clientesList.innerHTML = '';  // Limpa a lista

            data.clientes_online.forEach(cliente => {
                const li = document.createElement('li');
                li.style.margin = '15px 0';
                li.style.padding = '15px';
                li.style.backgroundColor = '#444';
                li.style.borderRadius = '8px';
                li.style.display = 'flex';
                li.style.justifyContent = 'space-between';
                li.style.alignItems = 'center';
                
                const div = document.createElement('div');
                div.innerHTML = `<strong style="font-size: 1.2rem;">${cliente.nome}</strong>
                                 <div style="font-size: 0.9rem; color: #bbb;">(MAC: ${cliente.mac})</div>`;
                
                const conexoesDiv = document.createElement('div');
                conexoesDiv.style.fontSize = '1.1rem';
                conexoesDiv.style.color = '#00ffae';
                conexoesDiv.style.fontWeight = 'bold';
                conexoesDiv.innerText = `Conexões: ${cliente.conexoes}`;
                
                li.appendChild(div);
                li.appendChild(conexoesDiv);
                clientesList.appendChild(li);
            });
        })
        .catch(error => console.error('Erro ao obter clientes online:', error));
}

// Atualiza os dados a cada 1 segundo
setInterval(atualizarClientesOnline, 1000);
</script>



 <div style="background: #1e1e1e; color: white; padding: 25px; border-radius: 12px; box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2); max-width: 420px; margin: auto; text-align: center; font-family: 'Poppins', sans-serif;">
   
    <p style="font-size: 1rem; margin-bottom: 15px;">Esse é o código do downloader do seu app:</p>
    
    <h3 style="margin-bottom: 15px; font-size: 1.2rem; font-weight: 600;">🔽 Código do Downloader</h3>
    
    <a href="http://aftv.news/5351829" target="_blank" id="downloadLink" style="display: inline-block; margin-top: 10px; font-size: 1.6rem; font-weight: bold; color: #00ffae; text-decoration: none;">
        5351829
    </a>

    <h3 style="margin-top: 20px; margin-bottom: 10px; font-size: 1.2rem; font-weight: 600;">📲 Baixar o App</h3>
    
    <a href="https://lcan.thefullnet.com.br/tv.apk" target="_blank" id="appDownloadLink" style="display: inline-block; margin-top: 10px; font-size: 1rem; font-weight: bold; color: #00ffae; text-decoration: none;">
        https://lcan.thefullnet.com.br/tv.apk
    </a>

    <!-- Botão para copiar o código do downloader -->
    <button id="copyCodeButton" onclick="copiarLink('downloadLink')" style="background-color: #007bff; color: white; padding: 12px 25px; border: none; border-radius: 5px; margin-top: 20px; cursor: pointer; font-size: 1rem; transition: background-color 0.3s ease;">
        📝 Copiar Código
    </button>

    <!-- Botão para copiar o link de download do app -->
    <button id="copyAppButton" onclick="copiarLink('appDownloadLink')" style="background-color: #007bff; color: white; padding: 12px 25px; border: none; border-radius: 5px; margin-top: 10px; cursor: pointer; font-size: 1rem; transition: background-color 0.3s ease;">
        📝 Copiar Link do App
    </button>

    <!-- Popup de sucesso -->
    <div id="popupSuccess" style="display: none; margin-top: 15px; color: #28a745; font-size: 1rem;">
        Link copiado com sucesso!
    </div>
    
    <p style="text-align: center; font-size: 1rem; line-height: 1.6; margin-top: 20px;">
        📱 Conheça nosso <strong>chatbot inteligente no WhatsApp</strong>! Ele automatiza a gestão dos seus clientes, enviando lembretes no dia do vencimento, a fatura diretamente no WhatsApp e ativando a conta automaticamente após o pagamento. <br><br>
        👉 <a href="https://botzap.thefull.site/planos" target="_blank" style="color: #1E90FF; text-decoration: none; font-weight: bold;">Clique aqui para saber mais e ativar o seu plano</a> 😊
    </p>
</div>

</div>
</div>
</div>
</div>


    

<!-- Popup -->
<div id="popupOnline" style="display: none; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: #1e1e1e; padding: 20px; border-radius: 15px; box-shadow: 0 0 20px rgba(0,0,0,0.5); z-index: 9999; max-width: 350px; width: 80%; color: #fff;">
    <h3 style="margin-top: 0; color: #00ffae; font-size: 1.6rem;">Clientes Online</h3>
    
    <ul style="list-style: none; padding: 0; margin: 0; max-height: 250px; overflow-y: auto; border-top: 1px solid #444; border-bottom: 1px solid #444;">
        <?php foreach ($clientes_online as $cliente) : ?>
            <li style="padding: 8px 0; border-bottom: 1px solid #444; font-size: 1rem;">
                ✅ <?php echo htmlspecialchars($cliente['nome']); ?> 
                <span style="font-weight: bold;">Conexões: <?php echo $cliente['conexoes']; ?></span>
            </li>
        <?php endforeach; ?>
    </ul>
    
    <button onclick="fecharPopupOnline()" style="margin-top: 15px; padding: 8px 15px; background-color: #ff5555; color: #fff; border: none; border-radius: 8px; cursor: pointer; font-size: 1rem;">Fechar</button>
</div>



<br><br>
    <!-- Código do Downloader -->
   <div id="inicio">
<div id="form0" style="display: none;">
 
</div>

</div>
<!-- Modal -->
<div id="modalAlterarNome" class="modal-overlay" onclick="fecharModalAlterarNome(event)">
  <div class="modal" onclick="event.stopPropagation();">
    <span class="close-btn" onclick="fecharModalAlterarNome()">&times;</span>
    <h3>🔧 Alterar Nome do Cliente</h3>
    <form method="POST">
      <button type="button" class="btn-confirm" onclick="abrirModalNome()">📋 Selecionar Cliente</button>

      <div id="clienteSelecionado" style="margin: 15px 0; font-weight: bold; background-color: #2a2a2a; padding: 10px; border-radius: 8px; color: #ccc;">
        <span id="clienteNomeTitle">Nenhum cliente selecionado</span>
      </div>

      <input type="hidden" name="mac_address_title" id="mac_address_title" required>

      <label for="title" style="display:block; margin: 10px 0 5px; color:#bbb; text-align:left;">✏️ Novo Nome do Cliente</label>
      <input type="text" id="title" name="title" placeholder="Ex: João da Silva" required
        style="width: 100%; padding: 12px; border: none; border-radius: 8px; background-color: #2c2c2c; color: #fff; font-size: 1rem;">

      <div style="display: flex; justify-content: center; gap: 10px; margin-top: 20px;">
        <button type="submit" class="btn-confirm">💾 Alterar Nome</button>
        <button type="button" class="btn-cancel" onclick="fecharModalAlterarNome()">Cancelar</button>
      </div>
    </form>
  </div>
</div>

<script>
function abrirModalAlterarNome() {
    document.getElementById("modalAlterarNome").style.display = "flex";
}

function fecharModalAlterarNome(event) {
    if (!event || event.target.id === "modalAlterarNome") {
        document.getElementById("modalAlterarNome").style.display = "none";
    }
}
</script>

<!-- Modal para selecionar cliente -->
<div id="modalSelecionarNome" class="modal-overlay" onclick="fecharModalNome(event)">
  <div class="modal" onclick="event.stopPropagation();">
    <span class="close-btn" onclick="fecharModalNome()">&times;</span>
    <h3>📋 Selecionar Cliente</h3>

    <input type="text" id="search_nome_modal" placeholder="🔍 Buscar nome ou MAC..."
           onkeyup="filtrarClientesNome()"
           style="width: 100%; padding: 12px; margin-top: 10px; margin-bottom: 15px; border: none; border-radius: 8px; background-color: #2c2c2c; color: #fff; font-size: 1rem;">

    <ul id="listaClientesNome" class="scrollable-list">
      <?php foreach ($clientes as $cliente): ?>
        <li onclick="selecionarClienteNome('<?php echo $cliente['mac_address']; ?>', '<?php echo addslashes($cliente['title']); ?>'); fecharModalNome();">
          <span class="client-info"><?php echo $cliente['mac_address']; ?> - <?php echo $cliente['title']; ?></span>
        </li>
      <?php endforeach; ?>
    </ul>

    <button class="btn-cancel" onclick="fecharModalNome()">Fechar</button>
  </div>
</div>


  <!-- Modal de Alteração de Dados de Pagamento -->
<div id="modalAlterarPagamento" onclick="fecharModalAlterarPagamento(event)" style="display: none; position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background-color: rgba(0,0,0,0.7); align-items: center; justify-content: center; z-index: 9999;">

  <div onclick="event.stopPropagation();" style="background-color: #1e1e1e; padding: 30px; border-radius: 12px; width: 100%; max-width: 500px; box-shadow: 0 0 20px rgba(0,0,0,0.6); position: relative;">
    <span onclick="fecharModalAlterarPagamento()" style="position: absolute; top: 10px; right: 15px; color: #fff; font-size: 1.5rem; cursor: pointer;">&times;</span>
    <h3 style="color: #fff;">⚙️ Alterar Dados de Pagamento</h3>

    <form method="POST">
      <label style="display:block; margin: 10px 0 5px; color:#bbb; text-align:left;">👤 Seu Nome</label>
      <input type="text" name="nome" placeholder="Nome" value="<?= $dados['nome'] ?>" required
        style="width: 100%; padding: 12px; border: none; border-radius: 8px; background-color: #2c2c2c; color: #fff; font-size: 1rem;">

      <label style="display:block; margin: 10px 0 5px; color:#bbb; text-align:left;">🌍 Estado</label>
      <input type="text" name="cidade" placeholder="Cidade" value="<?= $dados['cidade'] ?>" required
        style="width: 100%; padding: 12px; border: none; border-radius: 8px; background-color: #2c2c2c; color: #fff; font-size: 1rem;">

      <label style="display:block; margin: 10px 0 5px; color:#bbb; text-align:left;">🔑 Chave Pix (E-mail)</label>
      <input type="email" name="chave" placeholder="Chave Pix" value="<?= $dados['chave'] ?>" required
        style="width: 100%; padding: 12px; border: none; border-radius: 8px; background-color: #2c2c2c; color: #fff; font-size: 1rem;">

      <h4 style="margin: 20px 0 10px; color:#00ffae;">💰 Planos</h4>

      <label style="display:block; margin: 10px 0 5px; color:#bbb; text-align:left;">📆 1 Mês</label>
      <input type="number" name="plano1" value="<?= $dados['planos'][0]['valor'] ?>" step="0.01" required
        style="width: 100%; padding: 12px; border: none; border-radius: 8px; background-color: #2c2c2c; color: #fff; font-size: 1rem;">

      <label style="display:block; margin: 10px 0 5px; color:#bbb; text-align:left;">📆 6 Meses</label>
      <input type="number" name="plano2" value="<?= $dados['planos'][1]['valor'] ?>" step="0.01" required
        style="width: 100%; padding: 12px; border: none; border-radius: 8px; background-color: #2c2c2c; color: #fff; font-size: 1rem;">

      <label style="display:block; margin: 10px 0 5px; color:#bbb; text-align:left;">📆 1 Ano</label>
      <input type="number" name="plano3" value="<?= $dados['planos'][2]['valor'] ?>" step="0.01" required
        style="width: 100%; padding: 12px; border: none; border-radius: 8px; background-color: #2c2c2c; color: #fff; font-size: 1rem;">

      <div style="display: flex; justify-content: center; gap: 10px; margin-top: 20px;">
        <button type="submit" style="padding: 10px 20px; background-color: #00c896; color: white; border: none; border-radius: 8px; cursor: pointer;">💾 Salvar Alterações</button>
        <button type="button" onclick="fecharModalAlterarPagamento()" style="padding: 10px 20px; background-color: #555; color: white; border: none; border-radius: 8px; cursor: pointer;">Cancelar</button>
      </div>
    </form>
  </div>
</div>

<!-- Modal para selecionar cliente -->
<div id="modalSelecionarCliente" class="modal-overlay" onclick="fecharModalDataExpiracao(event)">
  <div class="modal" onclick="event.stopPropagation();">
    <span class="close-btn" onclick="fecharModalDataExpiracaoDireto()">&times;</span>
    <h3>📋 Selecionar Cliente</h3>

    <input type="text" id="search_nome_modal" placeholder="🔍 Buscar nome ou MAC..."
           onkeyup="filtrarClientes()"
           style="width: 100%; padding: 12px; margin-top: 10px; margin-bottom: 15px; border: none; border-radius: 8px; background-color: #2c2c2c; color: #fff; font-size: 1rem;">

    <ul id="listaClientes" class="scrollable-list">
      <?php foreach ($clientes as $cliente): ?>
        <li onclick="selecionarClienteVencimento('<?php echo $cliente['mac_address']; ?>', '<?php echo addslashes($cliente['title']); ?>'); fecharModalDataExpiracaoDireto();">
          <span class="client-info"><?php echo $cliente['mac_address']; ?> - <?php echo $cliente['title']; ?></span>
        </li>
      <?php endforeach; ?>
    </ul>

    <button class="btn-cancel" onclick="fecharModalDataExpiracaoDireto()">Fechar</button>
  </div>
</div>

<!-- Modal do formulário -->
<div id="modalAlterarM3U" class="modal-overlay" onclick="fecharModalAlterarM3U(event)">
  <div class="modal" onclick="event.stopPropagation();">
    <span class="close-btn" onclick="fecharModalAlterarM3U()">&times;</span>
    <h3>🔁 Trocar Lista M3U do Cliente</h3>

    <form method="POST">
      <button type="button" class="btn-confirm" onclick="abrirModalM3U()">📋 Selecionar Cliente</button>

      <input type="hidden" name="mac_address_m3u" id="mac_address_m3u" required>

      <label for="nova_url_m3u" style="display: block; margin: 20px 0 8px; color: #bbb; text-align: left;">
        🌐 Nova URL da Lista M3U
      </label>
      <input type="url" id="nova_url_m3u" name="nova_url_m3u"
             placeholder="https://exemplo.com/lista.m3u" required
             style="width: 100%; padding: 12px; border: none; border-radius: 8px; background-color: #2c2c2c; color: #fff; font-size: 1rem;">

      <div style="display: flex; justify-content: center; gap: 10px; margin-top: 20px;">
        <button type="submit" name="trocar_url_m3u" class="btn-confirm">💾 Atualizar Lista</button>
        <button type="button" class="btn-cancel" onclick="fecharModalAlterarM3U()">Cancelar</button>
      </div>
    </form>
  </div>
</div>

<!-- Modal para selecionar cliente M3U -->
<div id="modalSelecionarClienteM3U" class="modal-overlay" onclick="fecharModalM3U(event)">
  <div class="modal" onclick="event.stopPropagation();">
    <span class="close-btn" onclick="fecharModalM3U()">&times;</span>
    <h3>📋 Selecionar Cliente</h3>

    <input type="text" id="search_cliente_m3u_modal" placeholder="🔍 Buscar nome ou MAC..."
           onkeyup="filtrarClientesM3U()"
           style="width: 100%; padding: 12px; margin-top: 10px; margin-bottom: 15px; border: none; border-radius: 8px; background-color: #2c2c2c; color: #fff; font-size: 1rem;">

    <ul id="listaClientesM3U" class="scrollable-list">
      <?php foreach ($clientes as $cliente): ?>
        <li onclick="selecionarClienteM3U('<?php echo $cliente['mac_address']; ?>', '<?php echo htmlspecialchars($cliente['title'] . ' - ' . $cliente['mac_address']); ?>'); fecharModalM3U();">
          <span class="client-info"><?php echo htmlspecialchars($cliente['title']) . ' - ' . htmlspecialchars($cliente['mac_address']); ?></span>
        </li>
      <?php endforeach; ?>
    </ul>

    <button class="btn-cancel" onclick="fecharModalM3U()">Fechar</button>
  </div>
</div>


<!-- Modal do formulário -->
<div id="modalAlterarDNS" class="modal-overlay" onclick="fecharModalDNS(event)">
  <div class="modal" onclick="event.stopPropagation();">
    <span class="close-btn" onclick="fecharModalDNS()">&times;</span>
    <h3>🌐 Trocar o Início do DNS de Todos</h3>

    <form method="POST">
      <label for="novo_inicio_dns" style="display: block; margin: 20px 0 8px; color: #bbb; text-align: left;">
        📝 Novo Início do DNS
      </label>
      <input type="url" id="novo_inicio_dns" name="novo_inicio_dns"
             placeholder="Ex: http://seunovodns.com/" required
             style="width: 100%; padding: 12px; border: none; border-radius: 8px; background-color: #2c2c2c; color: #fff; font-size: 1rem;">

      <div style="display: flex; justify-content: center; gap: 10px; margin-top: 20px;">
        <button type="submit" name="trocar_todos_dns" class="btn-confirm">🔁 Trocar DNS de Todos</button>
        <button type="button" class="btn-cancel" onclick="fecharModalDNS()">Cancelar</button>
      </div>
    </form>
  </div>
</div>

<div id="form5" style="display: none;">
    <!-- Botão para abrir o modal -->
    <div class="form-container">
        <h2>Telefones Salvos</h2>
        <button class="button" onclick="abrirModalTelefones()">Ver Telefones Salvos</button>

        <!-- Modal de Telefones -->
        <div id="modalTelefones" class="modal-overlay" onclick="fecharModalTelefones(event)">
            <div class="modal">
                <h2>Lista de Telefones</h2>
                <ul style="text-align: left;">
                    <?php foreach ($clientes as $cliente): ?>
                        <?php if (!empty($cliente['numero_tel'])): ?>
                            <li><?php echo htmlspecialchars($cliente['title']) . ": " . htmlspecialchars($cliente['numero_tel']); ?></li>
                        <?php endif; ?>
                    <?php endforeach; ?>
                </ul>
                <button class="btn-cancel" onclick="fecharModalTelefones()">Fechar</button>
            </div>
        </div>

        <h2 style="text-align: center;">Adicionar WhatsApp do Cliente</h2>
        <p style="text-align: center; font-size: 16px; line-height: 1.6;">
            Temos um chatbot de WhatsApp que facilita a gestão do seu serviço! Ele envia mensagens no dia do vencimento, envia a fatura diretamente no WhatsApp do cliente e, após o pagamento, a conta é ativada automaticamente. 😊
        </p>
   </div>
        </div>



<footer style="background-color: #121212; color: #fff; text-align: center; padding: 15px; font-size: 14px; margin-top: 40px;">
    Desenvolvido por Wellington
</footer>

<script>
function whats(clienteId) {
    const telefone = document.getElementById('tel_' + clienteId).innerText;
    const numeroLimpo = telefone.replace(/\D/g, '');
    window.open('https://wa.me/55' + numeroLimpo, '_blank');
}
</script>




<script>
    // Função para renovar o usuário por 30 dias
    function renovarUsuario(clienteId) {
        const confirmation = confirm("Tem certeza de que deseja renovar o usuário por 30 dias?");
        if (confirmation) {
            // Enviar requisição para o servidor renovar o cliente
            const xhr = new XMLHttpRequest();
            xhr.open('POST', 'renovar_usuario.php', true);
            xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
            xhr.onload = function () {
                if (xhr.status === 200) {
                    // Verificar a resposta
                    console.log(xhr.responseText);  // Verifique a resposta no console
                    alert(xhr.responseText);  // Exibe a resposta do PHP
                    location.reload(); // Atualiza a lista de clientes
                } else {
                    alert('Erro ao renovar usuário.');
                    console.error(xhr.status, xhr.statusText);  // Exibe o erro no console
                }
            };
            xhr.onerror = function () {
                alert('Falha na requisição AJAX.');
                console.error(xhr.status, xhr.statusText);
            };
            xhr.send('cliente_id=' + clienteId); // Envia o ID do cliente para o PHP
        }
    }
</script>


<!-- Modal para editar telefone -->
<div id="modalEditarTelefone" style="display:none; position:fixed; top:50%; left:50%; transform:translate(-50%, -50%); background:#1e1e1e; padding:20px; border-radius:10px; z-index:9999; color:white;">
    <h3>Editar Número de <span id="nomeClienteModal"></span></h3>
    <form method="POST">
        <input type="hidden" name="cliente_id" id="clienteIdInput">
        <input type="text" name="numero_tel" id="numeroTelInput" placeholder="Novo número" style="width: 100%; padding:10px; margin-top:10px;">
        <button type="submit" name="save_phone" style="margin-top:10px; background-color:#00ffae; padding:10px;">Salvar</button>
        <button type="button" onclick="fecharModalEditar()" style="margin-top:10px; background-color:gray; padding:10px;">Cancelar</button>
    </form>
</div>

<div id="fundoModal" style="display:none; position:fixed; top:0; left:0; width:100%; height:100%; background-color:rgba(0,0,0,0.5); z-index:9998;" onclick="fecharModalEditar()"></div>


<!-- Modal Personalização -->
<div id="modalPersonalizacao" class="modal-overlay" onclick="fecharModalPersonalizacao(event)">
  <div class="modal" onclick="event.stopPropagation();">
    <span class="close-btn" onclick="fecharModalPersonalizacao()">&times;</span>
    <h3>⚙️ Personalizar App</h3>

    <div class="modal-content">
      <button class="btn-confirm" onclick="abrirModalTrocarTema()">🌈 Trocar Tema</button>
      <br>
      <button class="btn-confirm" onclick="trocarLogo()">🖼️ Trocar Logo</button>
      <br>
      <button class="btn-confirm" onclick="modalTrocarFundo()">🌄 Trocar Fundo</button> <!-- Abre o modal de fundo -->
      <br>
      <button class="btn-confirm" onclick="trocarBanner()">📸 Trocar Banner</button>
      <br>
    </div>

    <button class="btn-cancel" onclick="fecharModalPersonalizacao()">Fechar</button>
  </div>
</div>


<!-- Modal de Trocar Fundo -->
<div id="modalTrocarFundo" class="modal-overlay" onclick="fecharModalTrocarFundo(event)" style="display: none;">
  <div class="modal" onclick="event.stopPropagation();">
    <span class="close-btn" onclick="fecharModalTrocarFundo()">&times;</span>
    <h3>🖌️ Trocar Fundo</h3>

    <div class="modal-content">
        <div style="margin-bottom: 10px;">
            <label><input type="radio" name="upload-type" checked onclick="mostrarUploadArquivoFundo()"> Enviar Arquivo</label>
            &nbsp;&nbsp;
            <label><input type="radio" name="upload-type" onclick="mostrarUploadUrlFundo()"> URL da Imagem</label>
        </div>

        <!-- Formulário de Upload -->
        <form method="POST" enctype="multipart/form-data" id="uploadFormFundo">
            <input type="file" name="image" accept="image/jpeg, image/png, image/gif" style="margin-bottom: 10px;">
            <button type="submit" class="btn-confirm" name="upload">Atualizar Fundo</button>
        </form>

        <!-- Formulário de URL -->
        <form method="POST" id="urlFormFundo" style="display: none;">
            <input type="text" name="image-url" placeholder="https://example.com/image.jpg" style="width: 100%; padding: 10px; margin-bottom: 10px; border-radius: 6px;">
            <button type="submit" class="btn-confirm" name="url-submit">Enviar URL</button>
        </form>

        <!-- Pré-visualização do fundo -->
        <div style="margin-top: 20px;">
            <strong>Pré-visualização:</strong><br>
            <!-- Aqui é exibida a imagem de fundo, vindo da pasta /Img -->
            <img id="previewFundo" src="<?= $imageFilex ?>" style="max-width: 250px; margin-top: 10px; border-radius: 10px;">
        </div>
    </div>

    <button class="btn-cancel" onclick="fecharModalTrocarFundo()">Fechar</button>
  </div>
</div>


<!-- Modal de Troca de Tema -->
<div id="modalTrocarTema" class="modal-overlay" onclick="fecharModalTrocarTema(event)" style="display: none;">
  <div class="modal" onclick="event.stopPropagation();">
    <span class="close-btn" onclick="fecharModalTrocarTema()">&times;</span>
    <h3>🌈 Escolha o Tema</h3>

    <div class="modal-content">
      <form method="POST" action="<?php echo $_SERVER['PHP_SELF']; ?>">
        <select name="options" id="options" onchange="exibirImagemTema()" style="width: 100%; padding: 10px; border-radius: 8px; background-color: #f1f1f1;">
          <?php foreach ($temas as $valor => $nome): ?>
            <option value="<?= $valor ?>" <?= $tema_atual === $valor ? 'selected' : '' ?>>
              <?= $nome ?>
            </option>
          <?php endforeach; ?>
        </select>

        <div id="imagemTema" style="margin-top: 20px; display: none;">
          <img id="imagemTemaExibida" src="" alt="Tema Selecionado" style="width: 100%; max-width: 300px; border-radius: 8px; margin-top: 15px;">
        </div>

        <button type="submit" class="btn-confirm" style="margin-top: 20px;">Ativar Tema</button>
      </form>
    </div>

    <button class="btn-cancel" onclick="fecharModalTrocarTema()">Fechar</button>
  </div>
</div>

<!-- Modal de Alteração de Dados de Pagamento -->
<div id="modalAlterarPagamento" class="modal-overlay" onclick="fecharModalAlterarPagamento(event)" style="display: none;">
  <div class="modal" onclick="event.stopPropagation();">
    <span class="close-btn" onclick="fecharModalAlterarPagamento()">&times;</span>
    <h3 class="modal-title">⚙️ Alterar Dados de Pagamento</h3>

    <div class="modal-content">
      <form method="POST">
        <h4 class="section-title">Informações Pagamentos</h4>
        <br>
        <label for="plano1" class="input-label">Seu Nome</label>
        <br>
        <input type="text" name="nome" placeholder="Nome" value="<?= $dados['nome'] ?>" required class="input-field">
        <br>
        <label for="plano1" class="input-label">Seu estado</label>
        <br>
        <input type="text" name="cidade" placeholder="Cidade" value="<?= $dados['cidade'] ?>" required class="input-field">
        <br>
        <label for="plano1" class="input-label">Chave pix email</label>
        <br>
        <input type="email" name="chave" placeholder="Chave" value="<?= $dados['chave'] ?>" required class="input-field">
<br>
        <h4 class="section-title">Planos</h4>
        <br>
        <label for="plano1" class="input-label">Plano 1 Mês</label>
        <br>
        <input type="number" name="plano1" value="<?= $dados['planos'][0]['valor'] ?>" step="0.01" required class="input-field">
<br>
        <label for="plano2" class="input-label">Plano 6 Meses</label>
        <br>
        <input type="number" name="plano2" value="<?= $dados['planos'][1]['valor'] ?>" step="0.01" required class="input-field">
<br>
        <label for="plano3" class="input-label">Plano 1 Ano</label>
        <br>
        <input type="number" name="plano3" value="<?= $dados['planos'][2]['valor'] ?>" step="0.01" required class="input-field">
<br>
        <button type="submit" class="btn-confirm">Salvar Alterações</button>
      </form>
    </div>

    <button class="btn-cancel" onclick="fecharModalAlterarPagamento()">Fechar</button>
  </div>
</div>
<!-- Modal de Edição de Perfil -->
<div id="modalEditarPerfil" onclick="fecharModalEditarPerfil(event)" style="display: none; position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background-color: rgba(0,0,0,0.7); align-items: center; justify-content: center; z-index: 9999;">
  <div onclick="event.stopPropagation();" style="background-color: #1e1e1e; padding: 30px; border-radius: 12px; width: 100%; max-width: 500px; box-shadow: 0 0 20px rgba(0,0,0,0.6); position: relative;">
    
    <span onclick="fecharModalEditarPerfil()" style="position: absolute; top: 10px; right: 15px; color: #fff; font-size: 1.5rem; cursor: pointer;">&times;</span>
    
    <h3 style="color: #fff; margin-bottom: 20px;">👤 Editar Perfil</h3>

    <form method="POST" enctype="multipart/form-data" onsubmit="salvarPerfil(event)">
      <label style="display: block; margin: 10px 0 5px; color: #bbb;">🆔 Nome do painel</label>
      <input type="text" name="name" value="<?= $name ?>" required style="width: 100%; padding: 12px; border-radius: 8px; background-color: #2c2c2c; color: #fff;">

      <label style="display: block; margin: 15px 0 5px; color: #bbb;">👤 Login</label>
      <input type="text" name="username" value="<?= $user ?>" required style="width: 100%; padding: 12px; border-radius: 8px; background-color: #2c2c2c; color: #fff;">

      <label style="display: block; margin: 15px 0 5px; color: #bbb;">🔒 Senha</label>
      <input type="text" name="password" value="<?= $pass ?>" required style="width: 100%; padding: 12px; border-radius: 8px; background-color: #2c2c2c; color: #fff;">

      <label style="display: block; margin: 15px 0 5px; color: #bbb;">🖼️ Imagem do painel</label>
      <input type="file" id="inputLogo" name="logo" accept="image/*" onchange="atualizarPreviewLogo()"
        style="width: 100%; padding: 12px; border-radius: 8px; background-color: #2c2c2c; color: #fff;">

      <div style="margin-top: 15px; text-align: center;">
        <strong style="color: #ccc;">Pré-visualização da logo:</strong><br>
        <img id="previewLogo" src="<?= $logo ?>" alt="logo" style="max-width: 120px; border-radius: 10px; margin-top: 10px;">
      </div>

      <div style="display: flex; justify-content: center; gap: 10px; margin-top: 25px;">
        <button type="submit" style="padding: 10px 20px; background-color: #00c896; color: white; border: none; border-radius: 8px;">💾 Salvar Alterações</button>
        <button type="button" onclick="fecharModalEditarPerfil()" style="padding: 10px 20px; background-color: #555; color: white; border: none; border-radius: 8px;">Cancelar</button>
      </div>
    </form>
  </div>
</div>

<script>
function salvarPerfil(event) {
  event.preventDefault();
  const form = event.target;
  const formData = new FormData(form);

  fetch('editar_perfil.php', {
    method: 'POST',
    body: formData
  })
  .then(resp => resp.json())
  .then(data => {
    if (data.status === 'ok') {
      document.getElementById('tituloPainel').textContent = data.name;
      if (data.logo) {
        document.getElementById('logoPainel').src = data.logo;
        document.getElementById('previewLogo').src = data.logo;
      }
      alert('✅ Perfil atualizado com sucesso!');
      fecharModalEditarPerfil();
    } else {
      alert('❌ Erro: ' + (data.message || 'Não foi possível atualizar.'));
    }
  })
  .catch(() => {
    alert('❌ Falha de conexão com o servidor.');
  });
}

function atualizarPreviewLogo() {
  const input = document.getElementById('inputLogo');
  const preview = document.getElementById('previewLogo');
  if (input.files && input.files[0]) {
    const reader = new FileReader();
    reader.onload = function(e) {
      preview.src = e.target.result;
    };
    reader.readAsDataURL(input.files[0]);
  }
}
</script>


<script>
function abrirModalEditarPerfil() {
  const modal = document.getElementById("modalEditarPerfil");
  modal.style.display = "flex";

  // Buscar dados do perfil via AJAX
  fetch('editar_perfil.php')
    .then(response => response.json())
    .then(data => {
      document.querySelector('[name="name"]').value = data.NAME;
      document.querySelector('[name="username"]').value = data.USERNAME;
      document.querySelector('[name="password"]').value = data.PASSWORD;
      document.querySelector('[name="logo"]').value = data.LOGO;
      document.querySelector('#previewLogo').src = data.LOGO;
    });
}

function fecharModalEditarPerfil(event) {
  if (!event || event.target.classList.contains('modal-overlay')) {
    document.getElementById('modalEditarPerfil').style.display = 'none';
  }
}

document.getElementById('formEditarPerfil').addEventListener('submit', function(e) {
  e.preventDefault();

  const formData = new FormData(this);

  fetch('editar_perfil.php', {
    method: 'POST',
    body: formData
  })
  .then(res => res.json())
  .then(json => {
    alert(json.message);
    if (json.status === "success") {
      fecharModalEditarPerfil();
      location.reload();
    }
  });
});
</script>


<?php
$jsonFilex = './img/logo/logo_filenames.json';

// Lê o conteúdo do arquivo JSON
$jsonDatax = file_get_contents($jsonFilex);

// Decodifica os dados JSON
$imageDatax = json_decode($jsonDatax, true);

// Extrai o nome do arquivo
$filenamex = $imageDatax[0]['ImageName'];
$uploadMethod = $imageDatax[0]['Upload_type'];

if ($uploadMethod == "by_file") {
    $imageFilex = $filenamex;  // Caminho para o arquivo de imagem
    $method = "Método de upload";
} elseif ($uploadMethod == "by_url") {
    $imageFilex = $filenamex;  // Caminho da URL
    $method = "Método de URL";
} else {
    // Se não houver imagem definida, usa uma imagem padrão
    $imageFilex = "https://c4.wallpaperflare.com/wallpaper/159/71/731/errors-minimalism-typography-red-wallpaper-preview.jpg";
    $method = "";
}
?>

<!-- Modal de Troca de Logo -->
<div id="modalTrocarLogo" class="modal-overlay" onclick="fecharModalTrocarLogo(event)" style="display: none;">
  <div class="modal" onclick="event.stopPropagation();">
    <span class="close-btn" onclick="fecharModalTrocarLogo()">&times;</span>
    <h3>🖼️ Trocar Logo</h3>

    <div class="modal-content">
      <div style="margin-bottom: 10px;">
        <label><input type="radio" name="upload-type" checked onclick="mostrarUploadArquivo()"> Enviar Arquivo</label>
        &nbsp;&nbsp;
        <label><input type="radio" name="upload-type" onclick="mostrarUploadUrl()"> URL da Imagem</label>
      </div>

      <form method="POST" enctype="multipart/form-data" id="uploadFormLogo">
        <input type="file" name="image" accept="image/jpeg, image/png, image/gif" style="margin-bottom: 10px;">
        <button type="submit" class="btn-confirm">Atualizar</button>
      </form>

      <form method="POST" id="urlFormLogo" style="display: none;">
        <input type="text" name="image-url" placeholder="https://example.com/image.jpg" style="width: 100%; padding: 10px; margin-bottom: 10px; border-radius: 6px;">
        <button type="submit" class="btn-confirm">Enviar URL</button>
      </form>

      <div style="margin-top: 20px;">
        <strong>Pré-visualização:</strong><br>
        <!-- Exibe a logo armazenada na pasta img_custom/logo/ -->
        <img id="previewLogo" src="<?= $imageFilex ?>" style="max-width: 250px; margin-top: 10px; border-radius: 10px;">
      </div>
    </div>

    <button class="btn-cancel" onclick="fecharModalTrocarLogo()">Fechar</button>
  </div>
</div>

<!-- Modal de Trocar Fundo -->
<div id="modalTrocarFundo" class="modal-overlay" onclick="fecharModalTrocarFundo(event)" style="display: none;">
    <div class="modal" onclick="event.stopPropagation();">
        <span class="close-btn" onclick="fecharModalTrocarFundo()">&times;</span>
        <h3>🖌️ Trocar Fundo</h3>

        <div class="modal-content">
            <!-- Radio buttons para escolha do método -->
            <div style="margin-bottom: 10px;">
                <label><input type="radio" name="upload-type" checked onclick="mostrarUploadArquivoFundo()"> Enviar Arquivo</label>
                &nbsp;&nbsp;
                <label><input type="radio" name="upload-type" onclick="mostrarUploadUrlFundo()"> URL da Imagem</label>
            </div>

            <!-- Formulário de Upload -->
            <form method="POST" enctype="multipart/form-data" id="uploadFormFundo">
                <input type="file" name="image" accept="image/jpeg, image/png, image/gif" style="margin-bottom: 10px;">
                <button type="submit" class="btn-confirm" name="upload">Atualizar Fundo</button>
            </form>

            <!-- Formulário de URL -->
            <form method="POST" id="urlFormFundo" style="display: none;">
                <input type="text" name="image-url" placeholder="https://example.com/image.jpg" style="width: 100%; padding: 10px; margin-bottom: 10px; border-radius: 6px;">
                <button type="submit" class="btn-confirm" name="url-submit">Enviar URL</button>
            </form>

            <!-- Pré-visualização do fundo -->
            <div style="margin-top: 20px;">
                <strong>Pré-visualização:</strong><br>
                <img id="previewFundo" src="" style="max-width: 250px; margin-top: 10px; border-radius: 10px;">
            </div>
        </div>

        <button class="btn-cancel" onclick="fecharModalTrocarFundo()">Fechar</button>
    </div>
</div>


<script>
// Função para mostrar o formulário de upload de arquivo
function mostrarUploadArquivoFundo() {
    document.getElementById("uploadFormFundo").style.display = "block";
    document.getElementById("urlFormFundo").style.display = "none";
}

// Função para mostrar o formulário de URL
function mostrarUploadUrlFundo() {
    document.getElementById("uploadFormFundo").style.display = "none";
    document.getElementById("urlFormFundo").style.display = "block";
}

// Função para fechar o modal
function fecharModalTrocarFundo(event) {
    if (event) event.stopPropagation();
    document.getElementById("modalTrocarFundo").style.display = "none";
}

// Função para abrir o modal
function abrirModalTrocarFundo() {
    document.getElementById("modalTrocarFundo").style.display = "block";
}

// Função para fazer o upload do arquivo via AJAX
document.getElementById("uploadFormFundo").addEventListener("submit", function(e) {
    e.preventDefault();  // Evita o envio padrão do formulário

    // Criação de um FormData para enviar o arquivo
    const formData = new FormData(this);
    formData.append("upload", true);  // Adiciona o parâmetro para indicar o upload do arquivo

    // Chama o PHP via AJAX
    fetch("image.php", {
        method: "POST",
        body: formData
    })
    .then(response => {
        // Verifica se a resposta foi bem-sucedida
        if (!response.ok) {
            throw new Error('Erro na resposta da requisição');
        }
        return response.json();  // Espera a resposta JSON do PHP
    })
    .then(data => {
        if (data.status === 'success') {
            // Atualiza a pré-visualização do fundo
            document.getElementById("previewFundo").src = data.image;
            alert('Fundo trocado com sucesso!');
            // Opcionalmente, você pode forçar um recarregamento da página ou fechar o modal
            setTimeout(() => {
                location.reload(); // Recarrega a página para garantir que a imagem seja carregada corretamente
            }, 1500); // Aguarda 1.5 segundos antes de recarregar a página
        } else {
            alert(data.message);
        }
    })
    .catch(error => {
        console.error('Erro ao enviar o arquivo:', error);
        alert('Ocorreu um erro ao tentar enviar o arquivo.');
    });
});

// Função para fazer o upload da URL via AJAX
document.getElementById("urlFormFundo").addEventListener("submit", function(e) {
    e.preventDefault();  // Evita o envio padrão do formulário

    // Criação de um FormData para enviar a URL
    const formData = new FormData(this);
    formData.append("url-submit", true);  // Adiciona o parâmetro para indicar o envio da URL

    // Chama o PHP via AJAX
    fetch("image.php", {
        method: "POST",
        body: formData
    })
    .then(response => {
        // Verifica se a resposta foi bem-sucedida
        if (!response.ok) {
            throw new Error('Erro na resposta da requisição');
        }
        return response.json();  // Espera a resposta JSON do PHP
    })
    .then(data => {
        if (data.status === 'success') {
            // Atualiza a pré-visualização do fundo
            document.getElementById("previewFundo").src = data.image;
            alert('Fundo trocado com sucesso!');
            // Opcionalmente, você pode forçar um recarregamento da página ou fechar o modal
            setTimeout(() => {
                location.reload(); // Recarrega a página para garantir que a imagem seja carregada corretamente
            }, 1500); // Aguarda 1.5 segundos antes de recarregar a página
        } else {
            alert(data.message);
        }
    })
    .catch(error => {
        console.error('Erro ao enviar a URL:', error);
        alert('Ocorreu um erro ao tentar enviar a URL.');
    });
});

function modalTrocarFundo() {
  document.getElementById('modalTrocarFundo').style.display = 'block';
}

  function trocarLogo() {
    document.getElementById('modalTrocarLogo').style.display = 'flex';
  }

  function fecharModalTrocarLogo(event) {
    if (event) event.stopPropagation();
    document.getElementById('modalTrocarLogo').style.display = 'none';
  }

 // Função para mostrar o formulário de upload de arquivo
function mostrarUploadArquivo() {
    document.getElementById("uploadFormLogo").style.display = "block";
    document.getElementById("urlFormLogo").style.display = "none";
}

// Função para mostrar o formulário de URL
function mostrarUploadUrl() {
    document.getElementById("uploadFormLogo").style.display = "none";
    document.getElementById("urlFormLogo").style.display = "block";
}
// Função para fazer o upload do arquivo via AJAX
document.getElementById("uploadFormLogo").addEventListener("submit", function(e) {
    e.preventDefault();  // Evita o envio padrão do formulário

    // Criação de um FormData para enviar o arquivo
    const formData = new FormData(this);
    formData.append("upload", true);  // Adiciona o parâmetro para indicar o upload do arquivo

    // Chama o PHP via AJAX
    fetch("logo.php", {
        method: "POST",
        body: formData
    })
    .then(response => {
        // Verifica se a resposta foi bem-sucedida
        if (!response.ok) {
            throw new Error('Erro na resposta da requisição');
        }
        return response.json();  // Espera a resposta JSON do PHP
    })
    .then(data => {
        console.log(data);  // Log para depuração

        if (data.status === 'success') {
            // Atualiza a pré-visualização da logo
            document.getElementById("previewLogo").src = data.image;
            alert('Trocado com sucesso!');
            location.reload();  // Recarrega a página para refletir as mudanças
        } else {
            alert(data.message);
        }
    })
    .catch(error => {
          alert('Trocado com sucesso!');
            location.reload();  // Recarrega a página para refletir as mudanças
    });
});

// Função para fazer o upload da URL via AJAX
document.getElementById("urlFormLogo").addEventListener("submit", function(e) {
    e.preventDefault();  // Evita o envio padrão do formulário

    // Criação de um FormData para enviar a URL
    const formData = new FormData(this);
    formData.append("url-submit", true);  // Adiciona o parâmetro para indicar o envio da URL

    // Chama o PHP via AJAX
    fetch("logo.php", {
        method: "POST",
        body: formData
    })
    .then(response => {
        // Verifica se a resposta foi bem-sucedida
        if (!response.ok) {
            throw new Error('Erro na resposta da requisição');
        }
        return response.json();  // Espera a resposta JSON do PHP
    })
    .then(data => {
        console.log(data);  // Log para depuração

        if (data.status === 'success') {
            // Atualiza a pré-visualização da logo
            document.getElementById("previewLogo").src = data.image;
            alert('Trocado com sucesso!');
            location.reload();  // Recarrega a página para refletir as mudanças
        } else {
            alert(data.message);
        }
    })
    .catch(error => {
          alert('Trocado com sucesso!');
            location.reload();  // Recarrega a página para refletir as mudanças
    });
});

</script>
<style>
  #modalTrocarLogo .modal-content form input[type="file"],
  #modalTrocarLogo .modal-content form input[type="text"] {
    width: 100%;
    padding: 10px;
    border-radius: 6px;
    margin-bottom: 10px;
  }

  #modalTrocarLogo img {
    width: 100%;
    max-width: 250px;
    height: auto;
    border-radius: 10px;
  }

  @media (max-width: 600px) {
    #modalTrocarLogo img {
      max-width: 100%;
    }
  }
</style>

<script>
  // Função para abrir o modal de personalização
  function abrirModalPersonalizacao() {
    document.getElementById('modalPersonalizacao').style.display = 'flex';
  }

  // Função para fechar o modal de personalização
  function fecharModalPersonalizacao(event) {
    if (event) event.stopPropagation();
    document.getElementById('modalPersonalizacao').style.display = 'none';
  }

  // Função para abrir o modal de trocar tema
  function abrirModalTrocarTema() {
    document.getElementById('modalTrocarTema').style.display = 'flex';
  }

  // Função para fechar o modal de trocar tema
  function fecharModalTrocarTema(event) {
    if (event) event.stopPropagation();
    document.getElementById('modalTrocarTema').style.display = 'none';
  }

  // Pré-carregar as imagens
  const imagens = {
    theme_d: './img_custom/layout/d.jpg',
    theme_2: './img_custom/layout/2.jpg',
    theme_3: './img_custom/layout/3.jpg',
    theme_4: './img_custom/layout/4.jpg',
    theme_5: './img_custom/layout/5.jpg',
    theme_6: './img_custom/layout/6.jpg',
    theme_7: './img_custom/layout/7.jpg',
    theme_8: './img_custom/layout/8.jpg',
    theme_9: './img_custom/layout/9.jpg'
  };

  // Pré-carrega todas as imagens ao abrir a página
  const preCarregarImagens = () => {
    Object.values(imagens).forEach(src => {
      const img = new Image();
      img.src = src;
    });
  };

  preCarregarImagens();

  // Tema atual salvo vindo do PHP
  const temaSalvo = "<?php echo $tema_atual; ?>";

  // Função para exibir a imagem do tema selecionado
  function exibirImagemTema() {
    const temaSelecionado = document.getElementById('options').value || temaSalvo;
    const imagemTema = document.getElementById('imagemTema');
    const imagemTemaExibida = document.getElementById('imagemTemaExibida');

    if (imagens[temaSelecionado]) {
      imagemTemaExibida.src = imagens[temaSelecionado];
      imagemTema.style.display = 'block';
    } else {
      imagemTema.style.display = 'none';
    }
  }

  // Carregar a imagem do tema salvo assim que a página carregar
  window.addEventListener("DOMContentLoaded", () => {
    exibirImagemTema(); // exibe a imagem do tema salvo assim que carregar
  });
</script>




<script>


function abrirEditarModal(id, nome, telefone) {
    document.getElementById("clienteIdInput").value = id;
    document.getElementById("numeroTelInput").value = telefone;
    document.getElementById("nomeClienteModal").textContent = nome;
    document.getElementById("modalEditarTelefone").style.display = 'block';
    document.getElementById("fundoModal").style.display = 'block';
}

function fecharModalEditar() {
    document.getElementById("modalEditarTelefone").style.display = 'none';
    document.getElementById("fundoModal").style.display = 'none';
}

function apagarCliente(id) {
    if (confirm("Tem certeza que deseja apagar este cliente?")) {
        const formData = new FormData();
        formData.append("apagar_cliente", 1);
        formData.append("cliente_id", id);

        fetch("", {
            method: "POST",
            body: formData
        }).then(resp => resp.text())
          .then(data => {
              alert("Cliente removido!");
              location.reload();
          }).catch(err => {
              alert("Erro ao apagar o cliente.");
              console.error(err);
          });
    }
}
</script>


        <script>
        // Função para abrir o modal
function abrirModalPersonalizacao() {
    document.getElementById('modalPersonalizacao').style.display = 'flex';
}

// Função para fechar o modal
function fecharModalPersonalizacao(event) {
    if (event) event.stopPropagation();
    document.getElementById('modalPersonalizacao').style.display = 'none';
}




function trocarFundo() {
    alert("Trocar fundo clicado! Aqui você pode implementar a troca de fundo.");
}

function trocarBanner() {
    alert("Trocar banner clicado! Aqui você pode implementar a troca de banner.");
}

function copiarLink(linkId) {
    // Obtém o texto do link
    var link = document.getElementById(linkId).textContent;

    // Cria um elemento de texto temporário para copiar
    var tempInput = document.createElement('input');
    tempInput.value = link;
    document.body.appendChild(tempInput);
    tempInput.select();
    document.execCommand('copy');
    document.body.removeChild(tempInput);

    // Exibe o popup de sucesso
    var popup = document.getElementById('popupSuccess');
    popup.style.display = 'block';

    // Esconde o popup após 2 segundos
    setTimeout(function() {
        popup.style.display = 'none';
    }, 2000);
}
</script>


<script>
function mostrarFormulario(formId) {
    // Oculta todos os formulários
    var formularios = document.querySelectorAll('[id^="form"]');
    formularios.forEach(function(form) {
        form.style.display = 'none';
    });

    // Mostra o formulário correspondente
    var formSelecionado = document.getElementById(formId);
    if (formSelecionado) {
        formSelecionado.style.display = 'block';
    }

    // Mostra ou oculta o card de controles dependendo do formulário
    var cardControles = document.getElementById('cardControles');
    if (formId === 'form0') {
        cardControles.style.display = 'block';
    } else {
        cardControles.style.display = 'none';
    }
}
</script>

<script>
 // Função para abrir o modal de seleção de data de expiração
  function abrirModalDataExpiracao() {
    document.getElementById('modalSelecionarCliente').style.display = 'flex';
  }

  // Função para fechar o modal de seleção de data de expiração
  function fecharModalDataExpiracao(event) {
    if (event.target.id === 'modalSelecionarCliente' || event.target.classList.contains('btn-cancel')) {
      document.getElementById('modalSelecionarCliente').style.display = 'none';
    }
  }

  // Função para fechar o modal diretamente sem filtro
  function fecharModalDataExpiracaoDireto() {
    document.getElementById('modalSelecionarCliente').style.display = 'none';
  }

  // Função para filtrar clientes com base no texto digitado
  function filtrarClientes() {
    const input = document.getElementById('search_nome_modal');
    const filtro = input.value.toLowerCase();
    const lista = document.getElementById('listaClientes');
    const itens = lista.getElementsByTagName('li');

    for (let i = 0; i < itens.length; i++) {
      const texto = itens[i].textContent || itens[i].innerText;
      itens[i].style.display = texto.toLowerCase().indexOf(filtro) > -1 ? '' : 'none';
    }
  }

  // Função para selecionar um cliente e exibir os dados no formulário
  function selecionarClienteVencimento(mac, title) {
    // Preenche o campo oculto com o MAC address do cliente
    document.getElementById('mac_address').value = mac;
    // Exibe o nome do cliente selecionado com cor mais clara
    document.getElementById('clienteNome').textContent = `Cliente Selecionado: ${title} - MAC: ${mac}`;
    document.getElementById('clienteSelecionado').style.color = '#B0B0B0'; // Cor mais clara
    fecharModalDataExpiracaoDireto();
  }
  // Função para abrir o modal de seleção de cliente M3U
  function abrirModalM3U() {
    document.getElementById('modalSelecionarClienteM3U').style.display = 'flex';
  }

  // Função para fechar o modal de seleção de cliente M3U
  function fecharModalM3U(event) {
    if (event.target.id === 'modalSelecionarClienteM3U' || event.target.classList.contains('btn-cancel')) {
      document.getElementById('modalSelecionarClienteM3U').style.display = 'none';
    }
  }

  // Função de filtro para clientes com base no texto digitado
  function filtrarClientesM3U() {
    const input = document.getElementById('search_cliente_m3u_modal');
    const filtro = input.value.toLowerCase();
    const lista = document.getElementById('listaClientesM3U');
    const itens = lista.getElementsByTagName('li');

    for (let i = 0; i < itens.length; i++) {
      const texto = itens[i].textContent || itens[i].innerText;
      itens[i].style.display = texto.toLowerCase().indexOf(filtro) > -1 ? '' : 'none';
    }
  }

  // Função para selecionar cliente M3U e preencher o campo oculto no formulário
  function selecionarClienteM3U(mac, texto) {
    // Preenche o campo oculto com o MAC address do cliente
    document.getElementById('mac_address_m3u').value = mac;
    // Fecha o modal
    document.getElementById('modalSelecionarClienteM3U').style.display = 'none';
    // Exibe o nome e MAC address do cliente no formulário
    alert("Cliente selecionado: " + texto);
  }
// Função para abrir o modal de seleção de WhatsApp
  function abrirModalWhatsapp() {
    document.getElementById('modalSelecionarClienteWhatsapp').style.display = 'flex';
  }

  // Função para fechar o modal de seleção de WhatsApp
  function fecharModalWhatsapp(event) {
    if (event.target.id === 'modalSelecionarClienteWhatsapp' || event.target.classList.contains('btn-cancel')) {
      document.getElementById('modalSelecionarClienteWhatsapp').style.display = 'none';
    }
  }

  // Função para filtrar clientes WhatsApp com base no texto digitado
  function filtrarClientesWhatsapp() {
    const input = document.getElementById('search_cliente_modal');
    const filtro = input.value.toLowerCase();
    const lista = document.getElementById('listaClientesWhatsapp');
    const itens = lista.getElementsByTagName('li');

    for (let i = 0; i < itens.length; i++) {
      const texto = itens[i].textContent || itens[i].innerText;
      itens[i].style.display = texto.toLowerCase().indexOf(filtro) > -1 ? '' : 'none';
    }
  }

  // Função para selecionar cliente WhatsApp e preencher o campo oculto no formulário
  function selecionarClienteWhatsapp(clienteId, displayText) {
    // Preenche o campo oculto com o ID do cliente
    document.getElementById('cliente_id').value = clienteId;
    // Fecha o modal
    document.getElementById('modalSelecionarClienteWhatsapp').style.display = 'none';
    // Exibe o nome e MAC address do cliente no formulário
    alert("Cliente WhatsApp selecionado: " + displayText);
  }
  // Função para abrir o modal de seleção de nome
  function abrirModalNome() {
    document.getElementById('modalSelecionarNome').style.display = 'flex';
  }

  // Função para fechar o modal de seleção de nome
  function fecharModalNome(event) {
    if (event.target.id === 'modalSelecionarNome' || event.target.classList.contains('btn-cancel')) {
      document.getElementById('modalSelecionarNome').style.display = 'none';
    }
  }
  



  // Função para abrir o modal de telefones
  function abrirModalTelefones() {
    document.getElementById('modalTelefones').style.display = 'flex';
  }

  // Função para fechar o modal de telefones
  function fecharModalTelefones(event) {
    const modal = document.getElementById('modalTelefones');
    if (event.target === modal || event.target.classList.contains('btn-cancel')) {
      modal.style.display = 'none';
    }
  }

  // Função de filtro para clientes com base no texto digitado
  function filtrarClientes() {
    const input = document.getElementById('search'); // Obtém o campo de pesquisa
    const filtro = input.value.toLowerCase(); // Converte o texto para minúsculas
    const lista = document.getElementById('listaClientes'); // Obtém a lista de clientes
    const itens = lista.getElementsByTagName('li'); // Obtém os itens da lista

    // Itera sobre os itens e exibe ou esconde conforme o filtro
    for (let i = 0; i < itens.length; i++) {
        const texto = itens[i].textContent || itens[i].innerText;
        itens[i].style.display = texto.toLowerCase().indexOf(filtro) > -1 ? '' : 'none';
    }
  }

  // Função para filtrar clientes por nome ou MAC
  function filtrarClientesNome() {
    const input = document.getElementById('search_nome_modal');
    const filtro = input.value.toLowerCase();
    const lista = document.getElementById('listaClientesNome');
    const itens = lista.getElementsByTagName('li');

    for (let i = 0; i < itens.length; i++) {
        const item = itens[i];
        const mac = item.getAttribute('data-mac') || '';
        const title = item.getAttribute('data-title') || '';
        const texto = item.textContent || item.innerText || '';

        if (mac.toLowerCase().includes(filtro) || title.toLowerCase().includes(filtro) || texto.toLowerCase().includes(filtro)) {
            item.style.display = '';
        } else {
            item.style.display = 'none';
        }
    }
  }

  // Função para selecionar um cliente pelo nome e preencher o campo no formulário
  function selecionarClienteNome(mac, title) {
    document.getElementById('mac_address_title').value = mac;
    document.getElementById('title').value = title;
     document.getElementById('clienteNomeTitle').textContent = `Cliente Selecionado: ${title} - ${mac}`; // Exibe o nome e MAC do cliente selecionado
    document.getElementById('modalSelecionarNome').style.display = 'none';
  }


  // Função para alternar a visibilidade de uma lista
  function toggleLista(id) {
    const container = document.getElementById(id + 'Container');
    container.style.display = (container.style.display === 'none' || container.style.display === '') ? 'block' : 'none';
  }

  // Função para alternar a visibilidade da sidebar (menu lateral) ao clicar no hamburger
  const sidebar = document.getElementById("sidebar");
  const hamburger = document.getElementById("hamburguer");

  hamburger.addEventListener("click", function () {
    sidebar.style.width = sidebar.style.width === "250px" ? "0" : "250px"; // Expande ou contrai o menu
  });

  // Fecha a sidebar ao clicar em um item do menu
  document.querySelectorAll('.sidebar-link').forEach(link => {
    link.addEventListener('click', () => {
      sidebar.style.width = '0'; // Fecha a sidebar
    });
  });
  const inicioSection = document.getElementById("inicio");

document.querySelectorAll('.sidebar-link').forEach(link => {
  link.addEventListener('click', () => {
    sidebar.style.width = '0'; // Fecha a sidebar

    // Se clicou no link "Início", exibe a seção início
    if (link.id === 'link-inicio') {
      inicioSection.style.display = 'block';
    } else {
      inicioSection.style.display = 'none';
    }
  });
});

</script>



</body>
<!-- Script para chamada AJAX -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

</html>