<?php

@session_start();

if (file_exists('./conexao.php')) {
    include('./conexao.php');
} 
elseif (file_exists('../inc/conexao.php')) {
    include('../inc/conexao.php');
}
elseif (file_exists('../../inc/conexao.php')) {
    include('../../inc/conexao.php');
}

// Buscar configurações do site
try {
    $stmt = $pdo->prepare("SELECT * FROM config WHERE id = 1 LIMIT 1");
    $stmt->execute();
    $config = $stmt->fetch(PDO::FETCH_ASSOC);
    
    $nomeSite = $config['nome_site'] ?? 'Raspadinha';
    $logoSite = $config['logo'] ?? null;
    $depositoMin = $config['deposito_min'] ?? 0;
    $saqueMin = $config['saque_min'] ?? 0;
    $cpaPadrao = $config['cpa_padrao'] ?? 0;
    $revshare_padrao = $config['revshare_padrao'] ?? 0;
} catch (PDOException $e) {
    $nomeSite = 'Raspadinha';
    $logoSite = null;
    $depositoMin = 0;
    $saqueMin = 0;
    $cpaPadrao = 0;
    $revshare_padrao = 0;
}

if (isset($_SESSION['usuario_id'])) {
    $usuario_id = $_SESSION['usuario_id'];

    try {
        $stmt = $pdo->prepare("SELECT * FROM usuarios WHERE id = :id LIMIT 1");
        $stmt->bindParam(':id', $usuario_id, PDO::PARAM_INT);
        $stmt->execute();

        $usuario = $stmt->fetch(PDO::FETCH_ASSOC);

        if (!$usuario) {
            $_SESSION['message'] = ['type' => 'failure', 'text' => 'Usuário Não existe!'];
        }

        if($usuario['banido'] == 1){
          $_SESSION = [];
          
          session_destroy();
          @session_start();
          $_SESSION['message'] = ['type' => 'failure', 'text' => 'Você está banido!'];
          sleep(2);
          if($_SESSION['message']){
            header("Location: /");
          }
        }

    } catch (PDOException $e) {
        $_SESSION['message'] = ['type' => 'failure', 'text' => 'Erro na consulta!'];
        echo "Erro na consulta: " . $e->getMessage();
    }
} 
?>

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css">

<div class="app-download-banner" id="appBanner" style="display: none;">
    <i class="bi bi-download"></i>
    <span>Baixe nosso app e ganhe muitos pontos!</span>
    <button class="download-btn" onclick="openInstallModal()">
        Baixar
    </button>
    <button class="close-banner" onclick="closeBanner()">
        <i class="bi bi-x"></i>
    </button>
</div>

<header class="header">
    <div class="header-container">
        <a href="/" class="logo">
            <?php if ($logoSite && file_exists($_SERVER['DOCUMENT_ROOT'] . $logoSite)): ?>
                <img src="<?= htmlspecialchars($logoSite) ?>" alt="<?= htmlspecialchars($nomeSite) ?>" class="logo-image">
            <?php else: ?>
                <div class="logo-icon">
                    <?= strtoupper(substr($nomeSite, 0, 1)) ?>
                </div>
            <?php endif; ?>
        </a>
        
        <div class="mobile-menu-btn">
            <i id="menuBtn" class="bi bi-list"></i>
        </div>
        
        <nav>
            <ul class="nav-menu">
                <li><a href="/" class="nav-link">Início</a></li>
                <li><a href="/cartelas" class="nav-link">Raspadinhas</a></li>
            </ul>
        </nav>
        
        <div class="header-actions">
            <?php if(!isset($usuario)): ?>
                <a href="/login" class="btn-login">
                    <i class="bi bi-person"></i>
                    <span class="login-text">Entrar</span>
                </a>
                <a href="/cadastro" class="btn-register">
                    <i class="bi bi-dice-3-fill"></i>
                    Registrar
                </a>
            <?php else: ?>
                <?php $primeiroNome = explode(' ', $usuario['nome'])[0]; ?>
                
                <div class="balance-display">
                    <i class="bi bi-wallet2"></i>
                    <span id="headerSaldo">R$ <?php echo number_format($usuario['saldo'], 2, ',', '.'); ?></span>
                </div>
                
                <button onclick="openDepositModal()" class="btn-deposit">
                    <i class="bi bi-plus-circle"></i>
                    <span class="deposit-text">Depositar</span>
                </button>

                <div class="user-dropdown">
                    <button id="userDropdownBtn" class="user-btn">
                        <i class="bi bi-person-circle"></i>
                        <span class="user-name"><?php echo htmlspecialchars($primeiroNome); ?></span>
                        <i class="bi bi-chevron-down dropdown-arrow"></i>
                    </button>

                    <div id="userDropdownMenu" class="dropdown-menu">
                        <?php if($usuario['admin'] == 1): ?>
                            <a href="/admin" class="dropdown-item">
                                <i class="bi bi-gear"></i>
                                Administrador
                            </a>
                        <?php endif; ?>
                        
                        <a href="/cartelas" class="dropdown-item">
                            <i class="bi bi-grid-3x3-gap"></i>
                            Jogar
                        </a>
                        
                        <a href="/perfil" class="dropdown-item">
                            <i class="bi bi-person"></i>
                            Perfil
                        </a>
                        
                        <a href="/afiliados" class="dropdown-item">
                            <i class="bi bi-people"></i>
                            Indique e Ganhe
                        </a>
                        
                        <button onclick="openDepositModal()" class="dropdown-item">
                            <i class="bi bi-plus-circle"></i>
                            Depósito
                        </button>
                        
                        <button onclick="openWithdrawModal(<?php echo $usuario['saldo'];?>)" class="dropdown-item">
                            <i class="bi bi-dash-circle"></i>
                            Saque
                        </button>
                        
                        <a href="/transacoes" class="dropdown-item">
                            <i class="bi bi-arrow-left-right"></i>
                            Transações
                        </a>
                        
                        <a href="/apostas" class="dropdown-item">
                            <i class="bi bi-ticket-perforated"></i>
                            Apostas
                        </a>
                        
                        <div class="dropdown-divider"></div>
                        
                        <a href="/logout" class="dropdown-item logout">
                            <i class="bi bi-box-arrow-right"></i>
                            Sair
                        </a>
                    </div>
                </div>
            <?php endif; ?>
        </div>
    </div>
</header>

<aside id="sidebar" class="mobile-sidebar">
    <div class="sidebar-header">
        <div class="sidebar-logo">
            <?php if ($logoSite && file_exists($_SERVER['DOCUMENT_ROOT'] . $logoSite)): ?>
                <img src="<?= htmlspecialchars($logoSite) ?>" alt="<?= htmlspecialchars($nomeSite) ?>" class="sidebar-logo-image">
            <?php else: ?>
                <div class="sidebar-logo-icon">
                    <?= strtoupper(substr($nomeSite, 0, 1)) ?>
                </div>
            <?php endif; ?>
        </div>
        <button id="closeSidebar" class="close-btn">
            <i class="bi bi-x"></i>
        </button>
    </div>
    
    <nav class="sidebar-nav">
        <a href="/" class="sidebar-item">
            <i class="bi bi-house"></i>
            <span>Início</span>
        </a>

        <a href="/cartelas" class="sidebar-item">
            <i class="bi bi-grid-3x3-gap"></i>
            <span>Raspadinhas</span>
        </a>

        <?php if (isset($_SESSION['usuario_id'])): ?>
            <div class="sidebar-divider"></div>
            
            <a href="/apostas" class="sidebar-item">
                <i class="bi bi-ticket-perforated"></i>
                <span>Minhas Apostas</span>
            </a>

            <a href="/transacoes" class="sidebar-item">
                <i class="bi bi-arrow-left-right"></i>
                <span>Transações</span>
            </a>

            <button onclick="openDepositModal()" class="sidebar-item">
                <i class="bi bi-plus-circle"></i>
                <span>Depositar</span>
            </button>

            <button onclick="openWithdrawModal(<?php echo $usuario['saldo'];?>)" class="sidebar-item">
                <i class="bi bi-dash-circle"></i>
                <span>Sacar</span>
            </button>
            
            <div class="sidebar-divider"></div>
            
            <a href="/logout" class="sidebar-item logout">
                <i class="bi bi-box-arrow-right"></i>
                <span>Sair</span>
            </a>
        <?php endif; ?>

        <div class="sidebar-divider"></div>
        
        <a href="https://t.me/daanrox" target="_blank" class="sidebar-item">
            <i class="bi bi-telegram"></i>
            <span>Suporte</span>
        </a>
    </nav>
</aside>

<div id="backdrop" class="mobile-backdrop"></div>

<nav class="bottom-navigation">
    <div class="bottom-nav-container">
        <?php if(!isset($usuario)): ?>
            <a href="/" class="bottom-nav-item active">
                <i class="bi bi-house-fill"></i>
                <span>Início</span>
            </a>
            
            <a href="/cartelas" class="bottom-nav-item">
                <i class="bi bi-grid-3x3-gap-fill"></i>
                <span>Jogar</span>
            </a>
            
            <a href="/login" class="bottom-nav-item">
                <i class="bi bi-person-fill"></i>
                <span>Entrar</span>
            </a>
            
            <a href="/cadastro" class="bottom-nav-item register-btn">
                <i class="bi bi-dice-3-fill"></i>
                <span>Registrar</span>
            </a>
        <?php else: ?>
            <a href="/" class="bottom-nav-item active">
                <i class="bi bi-house-fill"></i>
                <span>Início</span>
            </a>
            
            <a href="/cartelas" class="bottom-nav-item">
                <i class="bi bi-grid-3x3-gap-fill"></i>
                <span>Jogar</span>
            </a>
            
            <button onclick="openDepositModal()" class="bottom-nav-item deposit-btn">
                <i class="bi bi-plus-circle-fill"></i>
                <span>Depositar</span>
            </button>
            
            <a href="/apostas" class="bottom-nav-item">
                <i class="bi bi-ticket-perforated-fill"></i>
                <span>Apostas</span>
            </a>
            
            <a href="/perfil" class="bottom-nav-item">
                <i class="bi bi-person-circle"></i>
                <span>Perfil</span>
            </a>
        <?php endif; ?>
    </div>
</nav>

<div id="installModal" class="install-modal">
    <div class="install-modal-content">
        <div class="install-modal-header">
            <div class="install-modal-icon">
                <i class="bi bi-phone"></i>
            </div>
            <h2>Instale Nosso App</h2>
            <button class="install-modal-close" onclick="closeInstallModal()">
                <i class="bi bi-x"></i>
            </button>
        </div>
        
        <div class="install-benefits">
            <div class="benefits-title">
                <i class="bi bi-gift"></i>
                <span>Vantagens do App</span>
            </div>
            
            <div class="benefits-list">
                <div class="benefit-item">
                    <i class="bi bi-check-circle"></i>
                    <span>Acesso rápido direto da tela inicial</span>
                </div>
                <div class="benefit-item">
                    <i class="bi bi-check-circle"></i>
                    <span>Notificações de promoções exclusivas</span>
                </div>
                <div class="benefit-item">
                    <i class="bi bi-check-circle"></i>
                    <span>Experiência mais fluida e rápida</span>
                </div>
                <div class="benefit-item">
                    <i class="bi bi-check-circle"></i>
                    <span>Funciona mesmo offline</span>
                </div>
                <div class="benefit-item">
                    <i class="bi bi-check-circle"></i>
                    <span>Design otimizado para mobile</span>
                </div>
            </div>
        </div>
        
        <div class="install-instructions">
            <div class="platform-tabs">
                <button class="platform-tab active" data-platform="ios">
                    <i class="bi bi-apple"></i>
                    iOS (iPhone/iPad)
                </button>
                <button class="platform-tab" data-platform="android">
                    <i class="bi bi-android2"></i>
                    Android
                </button>
            </div>
            
            <div class="platform-content active" data-platform="ios">
                <div class="instruction-step">
                    <div class="step-number">1</div>
                    <div class="step-content">
                        <h4>Abra no Safari</h4>
                        <p>Este site deve ser aberto no navegador Safari</p>
                    </div>
                </div>
                
                <div class="instruction-step">
                    <div class="step-number">2</div>
                    <div class="step-content">
                        <h4>Toque no botão Compartilhar</h4>
                        <p><i class="bi bi-share"></i> Na barra inferior do Safari</p>
                    </div>
                </div>
                
                <div class="instruction-step">
                    <div class="step-number">3</div>
                    <div class="step-content">
                        <h4>Selecione "Adicionar à Tela de Início"</h4>
                        <p><i class="bi bi-plus-square"></i> Role para baixo se necessário</p>
                    </div>
                </div>
                
                <div class="instruction-step">
                    <div class="step-number">4</div>
                    <div class="step-content">
                        <h4>Confirme tocando em "Adicionar"</h4>
                        <p>O app aparecerá na sua tela inicial</p>
                    </div>
                </div>
            </div>
            
            <div class="platform-content" data-platform="android">
                <div class="instruction-step">
                    <div class="step-number">1</div>
                    <div class="step-content">
                        <h4>Abra no Chrome</h4>
                        <p>Recomendamos usar o Google Chrome</p>
                    </div>
                </div>
                
                <div class="instruction-step">
                    <div class="step-number">2</div>
                    <div class="step-content">
                        <h4>Toque no menu (3 pontos)</h4>
                        <p><i class="bi bi-three-dots-vertical"></i> No canto superior direito</p>
                    </div>
                </div>
                
                <div class="instruction-step">
                    <div class="step-number">3</div>
                    <div class="step-content">
                        <h4>Selecione "Instalar app" ou "Adicionar à tela inicial"</h4>
                        <p><i class="bi bi-house-add"></i> Pode aparecer automaticamente uma notificação</p>
                    </div>
                </div>
                
                <div class="instruction-step">
                    <div class="step-number">4</div>
                    <div class="step-content">
                        <h4>Confirme a instalação</h4>
                        <p>O app será adicionado ao seu dispositivo</p>
                    </div>
                </div>
            </div>
            
            <div class="desktop-note">
                <div class="platform-tab">
                    <i class="bi bi-display"></i>
                    Desktop
                </div>
                <p>No desktop, procure pelo ícone de instalação na barra de endereço do seu navegador ou um banner de instalação aparecerá automaticamente.</p>
            </div>
        </div>
        
        <div class="install-modal-footer">
            <button class="install-understand-btn" onclick="closeInstallModal()">
                Entendi, obrigado!
            </button>
        </div>
    </div>
</div>

<style>
/* Header Styles */
.header {
    background: linear-gradient(135deg, #ff3c00, #c02d00); /* MUDADO */
    backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.2); /* MUDADO */
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    padding: 1rem 0;
}

.header-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 2rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* Logo Styles - Apenas logo, sem texto */
.logo {
    display: flex;
    align-items: center;
    text-decoration: none;
    transition: all 0.3s ease;
}

.logo:hover {
    transform: scale(1.05);
}

.logo-image {
    height: 45px;
    width: auto;
    max-width: 200px;
    object-fit: contain;
    transition: all 0.3s ease;
}

.logo-image:hover {
    transform: scale(1.02);
}

.logo-icon {
    width: 45px;
    height: 45px;
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    color: #ffffff;
    font-weight: 800;
    box-shadow: 
        0 8px 20px rgba(34, 197, 94, 0.3),
        0 4px 8px rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease;
}

.logo-icon:hover {
    box-shadow: 
        0 12px 30px rgba(34, 197, 94, 0.4),
        0 6px 12px rgba(0, 0, 0, 0.3);
    transform: translateY(-1px);
}

/* Sidebar Logo Styles - Apenas logo, sem texto */
.sidebar-logo {
    display: flex;
    align-items: center;
    justify-content: center;
}

.sidebar-logo-image {
    height: 40px;
    width: auto;
    max-width: 150px;
    object-fit: contain;
}

.sidebar-logo-icon {
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    color: #ffffff;
    font-weight: 800;
    box-shadow: 0 4px 12px rgba(34, 197, 94, 0.3);
}

/* App Download Banner */
.app-download-banner {
    background: linear-gradient(135deg, #22c55e, #16a34a);
    color: white;
    padding: 0.6rem 1rem;
    font-size: 0.85rem;
    font-weight: 600;
    text-align: center;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1001;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    transition: all 0.3s ease;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.app-download-banner i {
    font-size: 1rem;
}

.download-btn {
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: white;
    padding: 0.4rem 1rem;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-left: 0.5rem;
}

.download-btn:hover {
    background: rgba(0, 0, 0, 0.3);
    transform: translateY(-1px);
}

.close-banner {
    position: absolute;
    right: 1rem;
    background: none;
    border: none;
    color: white;
    font-size: 1.2rem;
    cursor: pointer;
    opacity: 0.8;
    transition: opacity 0.3s ease;
    padding: 0.25rem;
    border-radius: 4px;
}

.close-banner:hover {
    opacity: 1;
    background: rgba(255, 255, 255, 0.1);
}

.header.with-banner {
    top: 45px;
}

/* Install Modal Styles */
.install-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(10px);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 2000;
    padding: 1rem;
}

.install-modal.active {
    display: flex;
}

.install-modal-content {
    background: linear-gradient(145deg, #1a1a1a 0%, #2a2a2a 100%);
    border: 1px solid rgba(34, 197, 94, 0.3);
    border-radius: 20px;
    max-width: 500px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

.install-modal-header {
    padding: 2rem 2rem 1rem;
    text-align: center;
    position: relative;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.install-modal-icon {
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, #22c55e, #16a34a);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem;
    font-size: 1.8rem;
    color: white;
    box-shadow: 0 8px 20px rgba(34, 197, 94, 0.3);
}

.install-modal-header h2 {
    color: white;
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0;
}

.install-modal-close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: none;
    border: none;
    color: #9ca3af;
    font-size: 1.5rem;
    cursor: pointer;
    transition: color 0.3s ease;
    padding: 0.5rem;
    border-radius: 8px;
}

.install-modal-close:hover {
    color: white;
    background: rgba(255, 255, 255, 0.1);
}

.install-benefits {
    padding: 1.5rem 2rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.benefits-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #22c55e;
    font-weight: 600;
    margin-bottom: 1rem;
    font-size: 1.1rem;
}

.benefits-title i {
    font-size: 1.2rem;
}

.benefits-list {
    display: grid;
    gap: 0.75rem;
}

.benefit-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: #e5e7eb;
    font-size: 0.9rem;
}

.benefit-item i {
    color: #22c55e;
    font-size: 1rem;
    flex-shrink: 0;
}

.install-instructions {
    padding: 1.5rem 2rem;
}

.platform-tabs {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
}

.platform-tab {
    flex: 1;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #9ca3af;
    padding: 0.75rem 1rem;
    border-radius: 12px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.platform-tab.active {
    background: linear-gradient(135deg, #22c55e, #16a34a);
    border-color: rgba(34, 197, 94, 0.5);
    color: white;
}

.platform-tab:hover:not(.active) {
    background: rgba(255, 255, 255, 0.08);
    color: white;
}

.platform-content {
    display: none;
}

.platform-content.active {
    display: block;
}

.instruction-step {
    display: flex;
    gap: 1rem;
    margin-bottom: 1.5rem;
    align-items: flex-start;
}

.step-number {
    width: 32px;
    height: 32px;
    background: linear-gradient(135deg, #22c55e, #16a34a);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.9rem;
    flex-shrink: 0;
}

.step-content h4 {
    color: white;
    font-size: 1rem;
    font-weight: 600;
    margin: 0 0 0.25rem 0;
}

.step-content p {
    color: #9ca3af;
    font-size: 0.9rem;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.step-content p i {
    color: #22c55e;
}

.desktop-note {
    margin-top: 1.5rem;
    padding: 1rem;
    background: rgba(59, 130, 246, 0.1);
    border: 1px solid rgba(59, 130, 246, 0.2);
    border-radius: 12px;
}

.desktop-note .platform-tab {
    background: none;
    border: none;
    color: #60a5fa;
    padding: 0;
    margin-bottom: 0.5rem;
    justify-content: flex-start;
    cursor: default;
}

.desktop-note p {
    color: #e5e7eb;
    font-size: 0.9rem;
    margin: 0;
    line-height: 1.4;
}

.install-modal-footer {
    padding: 1.5rem 2rem 2rem;
    text-align: center;
}

.install-understand-btn {