<?php
session_start();
require '../db.php'; // Conexão com o banco de dados

// Verificar se o usuário é admin
if (!isset($_SESSION['usuario_id']) || $_SESSION['usuario_nivel'] != 'Admin') {
    header("Location: login.html");
    exit();
}

// Buscar jogos cadastrados
$queryJogos = "SELECT title, price, rating, reviews FROM jogos"; // Supondo que a tabela 'jogos' já existe
$stmtJogos = $pdo->prepare($queryJogos);
$stmtJogos->execute();
$jogos = $stmtJogos->fetchAll();

// Buscar usuários cadastrados
$queryUsuarios = "SELECT primeiro_nome, sobrenome, email FROM usuarios"; // Tabela 'usuarios' com dados básicos
$stmtUsuarios = $pdo->prepare($queryUsuarios);
$stmtUsuarios->execute();
$usuarios = $stmtUsuarios->fetchAll();
?>

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Painel Administrativo</title>
    <link rel="stylesheet" href="/css/main.css"> <!-- Link para o seu CSS -->
    <style>
        /* Estilos adicionais ou sobrescritos se necessário */
        body {
            font-family: 'Arial', sans-serif;
            background-color: #f4f7fb;
        }
        .container {
            display: flex;
            flex-direction: column;
            padding: 20px;
        }
        .header {
            display: flex;
            justify-content: space-between;
            background-color: #fff;
            padding: 20px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        }
        .sidebar {
            width: 250px;
            background-color: #2d2d2d;
            padding: 20px;
            color: #fff;
            height: 100vh;
            position: fixed;
            top: 0;
            left: 0;
            display: flex;
            flex-direction: column;
            align-items: flex-start;
        }
        .sidebar a {
            color: #fff;
            text-decoration: none;
            padding: 10px;
            margin-bottom: 10px;
            border-radius: 5px;
            width: 100%;
            text-align: left;
        }
        .sidebar a:hover {
            background-color: #444;
        }
        .content {
            margin-left: 260px;
            padding: 20px;
        }
        .cards-container {
            display: flex;
            justify-content: space-between;
            margin-bottom: 30px;
        }
        .card {
            background-color: #fff;
            padding: 20px;
            border-radius: 10px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            width: 23%;
            text-align: center;
        }
        .card h2 {
            margin: 0;
            font-size: 1.5em;
            color: #333;
        }
        .card p {
            color: #888;
        }
        .card .value {
            font-size: 1.75em;
            color: #333;
            font-weight: bold;
        }
        .chart-container {
            background-color: #fff;
            padding: 20px;
            border-radius: 10px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        }
        /* Adicionar gráficos ou outros elementos conforme necessário */
    </style>
</head>
<body>

    <!-- Sidebar -->
    <div class="sidebar">
        <h3 style="color: #fff; margin-bottom: 30px;">Admin Panel</h3>
        <a href="#">Dashboard</a>
      <a href="#" onclick="openUsersModal()">Usuários</a>
        <a href="#" onclick="openGamesModal()">Jogos</a>
        <a href="#">Pedidos</a>
        <a href="#">Pagamentos</a>
        <a href="#">Configurações</a>
    </div>




<!-- Modal para Usuários -->
<div id="usersModal" class="modal">
    <div class="modal-content">
        <span class="close" onclick="closeModal()">&times;</span>
        <div class="modal-header">Usuários Cadastrados</div>
        <table class="user-list">
            <thead>
                <tr>
                    <th>Nome</th>
                    <th>Email</th>
                    <th>Ações</th>
                </tr>
            </thead>
            <tbody>
                <!-- Usuários serão listados aqui dinamicamente -->
                <?php
                    // Conexão ao banco de dados
                    require '../db.php';
                    $queryUsuarios = "SELECT id, primeiro_nome, sobrenome, email FROM usuarios";
                    $stmtUsuarios = $pdo->prepare($queryUsuarios);
                    $stmtUsuarios->execute();
                    $usuarios = $stmtUsuarios->fetchAll();
                    foreach ($usuarios as $usuario) {
                        echo "<tr>
                                <td>{$usuario['primeiro_nome']} {$usuario['sobrenome']}</td>
                                <td>{$usuario['email']}</td>
                                <td class='action-btns'>
                                    <button onclick='editUser({$usuario['id']})'>Editar</button>
                                    <button onclick='viewDownloadHistory({$usuario['id']})'>Histórico de Downloads</button>
                                    <button onclick='viewWallet({$usuario['id']})'>Carteira</button>
                                </td>
                              </tr>";
                    }
                ?>
            </tbody>
        </table>
    </div>
</div>

<style>
    /* Estilo do Modal */
.modal {
    display: none; /* Escondido por padrão */
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.4); /* Fundo escurecido */
}
.modal-content {
    background-color: #fff;
    margin: 15% auto;
    padding: 20px;
    border-radius: 8px;
    width: 80%;
    max-width: 800px;
}
.modal-header {
    font-size: 1.5em;
    margin-bottom: 15px;
}
.close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}
.close:hover,
.close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}
.user-list {
    width: 100%;
    border-collapse: collapse;
}
.user-list th, .user-list td {
    padding: 12px;
    text-align: left;
    border-bottom: 1px solid #ddd;
}
.user-list th {
    background-color: #f4f4f4;
}
.action-btns {
    display: flex;
    justify-content: space-around;
}
.action-btns button {
    padding: 8px 16px;
    margin: 5px;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}
.action-btns button:hover {
    background-color: #0056b3;
}

</style>

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

// Função para fechar o modal
function closeModal() {
    document.getElementById('usersModal').style.display = 'none';
}

// Funções para ações nos botões
function editUser(userId) {
    // Lógica para editar usuário
    alert("Editando usuário com ID: " + userId);
}

function viewDownloadHistory(userId) {
    // Lógica para visualizar o histórico de downloads
    alert("Visualizando histórico de downloads para o usuário com ID: " + userId);
}

function viewWallet(userId) {
    // Lógica para visualizar a carteira do usuário
    alert("Visualizando carteira do usuário com ID: " + userId);
}

// Fechar o modal se o usuário clicar fora dele
window.onclick = function(event) {
    if (event.target === document.getElementById('usersModal')) {
        closeModal();
    }
}

</script>




<!-- Modal para Jogos -->
<div id="gamesModal" class="modal">
    <div class="modal-content">
        <span class="close" onclick="closeModal()">&times;</span>
        <div class="modal-header">Jogos Cadastrados</div>
        
        <!-- Barra de pesquisa -->
        <input type="text" id="searchInput" onkeyup="searchGames()" placeholder="Pesquisar por nome..." class="search-bar">
        
        <table class="game-list">
            <thead>
                <tr>
                    <th>Título</th>
                    <th>Preço</th>
                    <th>Ações</th>
                </tr>
            </thead>
            <tbody id="gameTableBody">
                <!-- Jogos serão listados aqui dinamicamente -->
                <?php
                    // Conexão ao banco de dados
                    require '../db.php';
                    $queryJogos = "SELECT id, title, price FROM jogos";
                    $stmtJogos = $pdo->prepare($queryJogos);
                    $stmtJogos->execute();
                    $jogos = $stmtJogos->fetchAll();
                    foreach ($jogos as $jogo) {
                        echo "<tr>
                                <td>{$jogo['title']}</td>
                                <td>{$jogo['price']}</td>
                                <td class='action-btns'>
                                    <button onclick='editGame({$jogo['id']})'>Editar</button>
                                </td>
                              </tr>";
                    }
                ?>
            </tbody>
        </table>
    </div>
</div>


<style>
    /* Estilo do Modal */
.modal {
    display: none; /* Escondido por padrão */
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.4); /* Fundo escurecido */
}
.modal-content {
    background-color: #fff;
    margin: 15% auto;
    padding: 20px;
    border-radius: 8px;
    width: 80%;
    max-width: 800px;
}
.modal-header {
    font-size: 1.5em;
    margin-bottom: 15px;
}
.close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}
.close:hover,
.close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}
.game-list {
    width: 100%;
    border-collapse: collapse;
}
.game-list th, .game-list td {
    padding: 12px;
    text-align: left;
    border-bottom: 1px solid #ddd;
}
.game-list th {
    background-color: #f4f4f4;
}
.search-bar {
    width: 100%;
    padding: 10px;
    margin-bottom: 15px;
    border-radius: 5px;
    border: 1px solid #ccc;
    font-size: 1em;
}
.action-btns {
    display: flex;
    justify-content: space-around;
}
.action-btns button {
    padding: 8px 16px;
    margin: 5px;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}
.action-btns button:hover {
    background-color: #0056b3;
}


</style>


<script>
    // Função para abrir o modal de Jogos
function openGamesModal() {
    document.getElementById('gamesModal').style.display = 'block';
}

// Função para fechar o modal
function closeModal() {
    document.getElementById('gamesModal').style.display = 'none';
}

// Função para editar jogo (placeholder)
function editGame(gameId) {
    // Lógica para editar jogo
    alert("Editando jogo com ID: " + gameId);
}

// Função de pesquisa para filtrar jogos pelo nome
function searchGames() {
    let input = document.getElementById('searchInput').value.toLowerCase();
    let table = document.getElementById('gameTableBody');
    let rows = table.getElementsByTagName('tr');

    for (let i = 0; i < rows.length; i++) {
        let cells = rows[i].getElementsByTagName('td');
        let gameTitle = cells[0].textContent || cells[0].innerText;

        if (gameTitle.toLowerCase().indexOf(input) > -1) {
            rows[i].style.display = '';
        } else {
            rows[i].style.display = 'none';
        }
    }
}

// Fechar o modal se o usuário clicar fora dele
window.onclick = function(event) {
    if (event.target === document.getElementById('gamesModal')) {
        closeModal();
    }
}

</script>



    <!-- Main Content -->
    <div class="content">
        <div class="header">
            <div class="title">
                <h1>Painel Administrativo</h1>
                <p>Bem-vindo ao painel de administração</p>
            </div>
            <div class="user-info">
                <span>Olá, <?php echo $_SESSION['usuario_nome']; ?></span> <br>
                <span><a href="logout.php">Sair</a></span>
            </div>
        </div>

        <!-- Cards Section -->
        <div class="cards-container">
            <div class="card">
                <h2>Total de Usuários</h2>
                <p>Usuários registrados no sistema</p>
                <div class="value"><?php echo count($usuarios); ?></div>
            </div>
            <div class="card">
                <h2>Pedidos Ativos</h2>
                <p>Pedidos em andamento</p>
                <div class="value">4</div>
            </div>
            <div class="card">
                <h2>Receita / Mês</h2>
                <p>Valor total de receitas neste mês</p>
                <div class="value">R$ 0,00</div>
            </div>
            <div class="card">
                <h2>Saldo Disponível</h2>
                <p>Saldo atual disponível</p>
                <div class="value">R$ 8.652,81</div>
            </div>
        </div>

        <!-- Gráficos de Crescimento -->
        <div class="chart-container">
            <h3>Crescimento de Usuários</h3>
            <div id="user-growth-chart">
                <!-- Aqui você pode adicionar gráficos ou outras visualizações -->
            </div>
        </div>
    </div>

</body>
</html>
