<?php
// universidade_plataforma.php - Página de treinamento da plataforma
require_once 'config.php';
require_once 'auth.php';

// Verificar login
verificarLogin();

// Definir título da página
$titulo_pagina = 'Treinamento da Plataforma';

// Incluir cabeçalho
include 'includes/header.php';
?>

<!-- Estilos específicos para a página de treinamento -->
<style>
    .course-header {
        background: linear-gradient(135deg, #FF6B35 0%, #03C9AD 100%);
        border-radius: var(--border-radius);
        padding: 30px;
        margin-bottom: 30px;
        color: white;
        position: relative;
    }
    
    .course-header h1 {
        font-size: 2rem;
        font-weight: 700;
        margin-bottom: 10px;
    }
    
    .course-header p {
        opacity: 0.9;
        margin-bottom: 0;
        max-width: 700px;
    }
    
    .course-container {
        display: flex;
        gap: 30px;
        margin-bottom: 40px;
    }
    
    .lessons-sidebar {
        width: 320px;
        flex-shrink: 0;
        background-color: white;
        border-radius: var(--border-radius);
        box-shadow: 0 2px 8px rgba(0,0,0,0.05);
        overflow: hidden;
    }
    
    .sidebar-header {
        padding: 15px 20px;
        background-color: #f9f9f9;
        border-bottom: 1px solid #eee;
        font-weight: 600;
    }
    
    .modules-list {
        list-style: none;
        padding: 0;
        margin: 0;
    }
    
    .module-item {
        border-bottom: 1px solid #eee;
    }
    
    .module-header {
        padding: 15px 20px;
        cursor: pointer;
        display: flex;
        justify-content: space-between;
        align-items: center;
        background-color: #f8f9fa;
        font-weight: 600;
        transition: background-color 0.2s ease;
    }
    
    .module-header:hover {
        background-color: #f1f3f5;
    }
    
    .module-header i {
        transition: transform 0.3s ease;
    }
    
    .module-header.collapsed i {
        transform: rotate(-90deg);
    }
    
    .lesson-list {
        list-style: none;
        padding: 0;
        margin: 0;
    }
    
    .lesson-item {
        padding: 12px 20px 12px 45px;
        border-bottom: 1px solid #f1f1f1;
        cursor: pointer;
        display: flex;
        align-items: center;
        transition: background-color 0.2s ease;
        position: relative;
    }
    
    .lesson-item:hover {
        background-color: #f8f9fa;
    }
    
    .lesson-item.active {
        background-color: #FFF5F1;
        font-weight: 500;
    }
    
    .lesson-item.completed::before {
        content: '✓';
        position: absolute;
        left: 20px;
        color: #2ecc71;
        font-weight: bold;
    }
    
    .lesson-item.active::before {
        content: '▶';
        position: absolute;
        left: 20px;
        color: #02A48A;
        font-size: 10px;
    }
    
    .lesson-duration {
        font-size: 0.8rem;
        color: #777;
        margin-left: auto;
    }
    
    .content-area {
        flex: 1;
        background-color: white;
        border-radius: var(--border-radius);
        box-shadow: 0 2px 8px rgba(0,0,0,0.05);
        overflow: hidden;
    }
    
    .lesson-content {
        padding: 30px;
    }
    
    .video-container {
        position: relative;
        padding-bottom: 56.25%; /* 16:9 */
        height: 0;
        overflow: hidden;
        margin-bottom: 20px;
    }
    
    .video-container iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border-radius: 8px;
    }
    
    .lesson-title {
        font-size: 1.5rem;
        font-weight: 600;
        margin-bottom: 15px;
    }
    
    .lesson-text {
        color: #555;
        line-height: 1.6;
        margin-bottom: 20px;
    }
    
    .lesson-nav {
        display: flex;
        justify-content: space-between;
        margin-top: 30px;
        padding-top: 20px;
        border-top: 1px solid #eee;
    }
    
    .lesson-nav .btn {
        display: inline-flex;
        align-items: center;
        padding: 8px 16px;
        border-radius: 20px;
    }
    
    .btn-nav-prev i {
        margin-right: 8px;
    }
    
    .btn-nav-next i {
        margin-left: 8px;
    }
    
    .lesson-resources {
        background-color: #f9f9f9;
        border-radius: var(--border-radius);
        padding: 20px;
        margin-top: 30px;
    }
    
    .resource-title {
        font-weight: 600;
        margin-bottom: 15px;
        display: flex;
        align-items: center;
    }
    
    .resource-title i {
        margin-right: 10px;
        color: #02A48A;
    }
    
    .resource-list {
        list-style: none;
        padding: 0;
        margin: 0;
    }
    
    .resource-item {
        display: flex;
        align-items: center;
        padding: 10px 0;
        border-bottom: 1px solid #eee;
    }
    
    .resource-item:last-child {
        border-bottom: none;
    }
    
    .resource-icon {
        width: 32px;
        height: 32px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: 12px;
        color: #02A48A;
    }
    
    .resource-name {
        flex: 1;
    }
    
    .resource-action .btn {
        padding: 4px 10px;
        font-size: 0.8rem;
    }
    
    .progress-section {
        display: flex;
        align-items: center;
        margin-bottom: 20px;
    }
    
    .progress-bar-container {
        flex: 1;
        background-color: #eee;
        height: 6px;
        border-radius: 3px;
        margin: 0 15px;
    }
    
    .progress-bar-fill {
        height: 100%;
        background-color: #02A48A;
        border-radius: 3px;
    }
    
    .progress-text {
        font-size: 0.9rem;
        font-weight: 500;
    }
    
    @media (max-width: 991px) {
        .course-container {
            flex-direction: column;
        }
        
        .lessons-sidebar {
            width: 100%;
        }
    }
</style>

<div class="course-header">
    <a href="universidade.php" class="btn btn-light btn-sm mb-3">
        <i class="fas fa-arrow-left me-2"></i> Voltar para Universidade
    </a>
    <h1>Treinamento da Plataforma YouGrana</h1>
    <p>Aprenda a utilizar todos os recursos do YouGrana para gerenciar suas finanças de forma eficiente.</p>
</div>

<div class="progress-section">
    <span class="progress-text">Progresso do curso: </span>
    <div class="progress-bar-container">
        <div class="progress-bar-fill" style="width: 25%;"></div>
    </div>
    <span class="progress-text">25%</span>
</div>

<div class="course-container">
    <!-- Sidebar com as lições -->
    <div class="lessons-sidebar">
        <div class="sidebar-header">
            <i class="fas fa-book me-2"></i> Conteúdo do Curso
        </div>
        <ul class="modules-list">
            <li class="module-item">
                <div class="module-header" data-bs-toggle="collapse" data-bs-target="#module1">
                    Módulo 1: Introdução ao Mordomize
                    <i class="fas fa-chevron-down"></i>
                </div>
                <ul class="lesson-list collapse show" id="module1">
                    <li class="lesson-item active" onclick="carregarLicao('introducao-mordomize')">
                        1.1 Bem-vindo ao Mordomize
                        <span class="lesson-duration">3:15</span>
                    </li>
                    <li class="lesson-item" onclick="carregarLicao('tour-plataforma')">
                        1.2 Tour pela plataforma
                        <span class="lesson-duration">4:30</span>
                    </li>
                    <li class="lesson-item" onclick="carregarLicao('primeiros-passos')">
                        1.3 Primeiros passos
                        <span class="lesson-duration">5:45</span>
                    </li>
                </ul>
            </li>
            <li class="module-item">
                <div class="module-header collapsed" data-bs-toggle="collapse" data-bs-target="#module2">
                    Módulo 2: Dashboard Financeiro
                    <i class="fas fa-chevron-down"></i>
                </div>
                <ul class="lesson-list collapse" id="module2">
                    <li class="lesson-item" onclick="carregarLicao('dashboard-overview')">
                        2.1 Visão geral do Dashboard
                        <span class="lesson-duration">4:20</span>
                    </li>
                    <li class="lesson-item" onclick="carregarLicao('dashboard-graficos')">
                        2.2 Entendendo os gráficos
                        <span class="lesson-duration">6:15</span>
                    </li>
                    <li class="lesson-item" onclick="carregarLicao('dashboard-filtros')">
                        2.3 Utilizando filtros e períodos
                        <span class="lesson-duration">3:50</span>
                    </li>
                </ul>
            </li>
            <li class="module-item">
                <div class="module-header collapsed" data-bs-toggle="collapse" data-bs-target="#module3">
                    Módulo 3: Gerenciando Transações
                    <i class="fas fa-chevron-down"></i>
                </div>
                <ul class="lesson-list collapse" id="module3">
                    <li class="lesson-item" onclick="carregarLicao('cadastrando-receitas')">
                        3.1 Cadastrando receitas
                        <span class="lesson-duration">5:10</span>
                    </li>
                    <li class="lesson-item" onclick="carregarLicao('cadastrando-despesas')">
                        3.2 Cadastrando despesas
                        <span class="lesson-duration">5:30</span>
                    </li>
                    <li class="lesson-item" onclick="carregarLicao('transacoes-recorrentes')">
                        3.3 Configurando transações recorrentes
                        <span class="lesson-duration">4:45</span>
                    </li>
                </ul>
            </li>
            <li class="module-item">
                <div class="module-header collapsed" data-bs-toggle="collapse" data-bs-target="#module4">
                    Módulo 4: Categorias e Organização
                    <i class="fas fa-chevron-down"></i>
                </div>
                <ul class="lesson-list collapse" id="module4">
                    <li class="lesson-item" onclick="carregarLicao('importancia-categorias')">
                        4.1 A importância das categorias
                        <span class="lesson-duration">3:25</span>
                    </li>
                    <li class="lesson-item" onclick="carregarLicao('personalizando-categorias')">
                        4.2 Personalizando suas categorias
                        <span class="lesson-duration">4:15</span>
                    </li>
                </ul>
            </li>
            <li class="module-item">
                <div class="module-header collapsed" data-bs-toggle="collapse" data-bs-target="#module5">
                    Módulo 5: Relatórios e Análises
                    <i class="fas fa-chevron-down"></i>
                </div>
                <ul class="lesson-list collapse" id="module5">
                    <li class="lesson-item" onclick="carregarLicao('tipos-relatorios')">
                        5.1 Tipos de relatórios disponíveis
                        <span class="lesson-duration">4:50</span>
                    </li>
                    <li class="lesson-item" onclick="carregarLicao('interpretando-dados')">
                        5.2 Interpretando os dados
                        <span class="lesson-duration">5:20</span>
                    </li>
                </ul>
            </li>
            <li class="module-item">
                <div class="module-header collapsed" data-bs-toggle="collapse" data-bs-target="#module6">
                    Módulo 6: Metas Financeiras
                    <i class="fas fa-chevron-down"></i>
                </div>
                <ul class="lesson-list collapse" id="module6">
                    <li class="lesson-item" onclick="carregarLicao('criando-metas')">
                        6.1 Criando metas financeiras
                        <span class="lesson-duration">4:40</span>
                    </li>
                    <li class="lesson-item" onclick="carregarLicao('acompanhando-metas')">
                        6.2 Acompanhando suas metas
                        <span class="lesson-duration">3:55</span>
                    </li>
                </ul>
            </li>
        </ul>
    </div>
    
    <!-- Área de conteúdo da lição -->
    <div class="content-area">
        <div class="lesson-content" id="lesson-content">
            <!-- Conteúdo será carregado via JavaScript -->
            <div class="video-container">
                <iframe src="https://www.youtube-nocookie.com/embed/dQw4w9WgXcQ" allowfullscreen></iframe>
            </div>
            
            <h2 class="lesson-title">Bem-vindo ao YouGrana</h2>
            
            <div class="lesson-content">
                <p>Bem-vindo ao treinamento do YouGrana, a plataforma que vai ajudá-lo a organizar suas finanças de forma simples e eficiente!</p>
                
                <p>Neste primeiro módulo, vamos conhecer as principais funcionalidades do YouGrana e entender como você pode aproveitar ao máximo todos os recursos disponíveis para transformar sua vida financeira.</p>
                
                <h4>O que você vai aprender:</h4>
                <ul>
                    <li>Como navegar pela plataforma Mordomize</li>
                    <li>Configurações iniciais importantes</li>
                    <li>Os primeiros passos para começar a usar o sistema</li>
                    <li>Dicas para organizar suas finanças de forma eficiente</li>
                </ul>
                
                <p>Ao final deste treinamento, você será capaz de utilizar todas as funcionalidades do Mordomize com confiança e terá as ferramentas necessárias para tomar controle das suas finanças pessoais.</p>
            </div>
            
            <div class="lesson-resources">
                <div class="resource-title">
                    <i class="fas fa-file-download"></i> Recursos da Lição
                </div>
                <ul class="resource-list">
                    <li class="resource-item">
                        <div class="resource-icon">
                            <i class="fas fa-file-pdf"></i>
                        </div>
                        <div class="resource-name">Guia rápido de introdução ao Mordomize</div>
                        <div class="resource-action">
                            <a href="#" class="btn btn-sm btn-outline-primary">Baixar</a>
                        </div>
                    </li>
                    <li class="resource-item">
                        <div class="resource-icon">
                            <i class="fas fa-file-alt"></i>
                        </div>
                        <div class="resource-name">Checklist de primeiros passos</div>
                        <div class="resource-action">
                            <a href="#" class="btn btn-sm btn-outline-primary">Baixar</a>
                        </div>
                    </li>
                </ul>
            </div>
            
            <div class="lesson-nav">
                <button class="btn btn-outline-secondary btn-nav-prev" disabled>
                    <i class="fas fa-arrow-left"></i> Lição Anterior
                </button>
                <button class="btn btn-primary btn-nav-next" onclick="carregarLicao('tour-plataforma')">
                    Próxima Lição <i class="fas fa-arrow-right"></i>
                </button>
            </div>
        </div>
    </div>
</div>

<script>
// Função para carregar o conteúdo da lição
function carregarLicao(licaoId) {
    // Em um sistema real, isso carregaria conteúdo via AJAX
    // Para este exemplo, simularemos uma troca de conteúdo
    
    // Atualizar item ativo no menu
    document.querySelectorAll('.lesson-item').forEach(item => {
        item.classList.remove('active');
    });
    
    // Encontrar o elemento que foi clicado e adicionar a classe active
    const itemClicado = Array.from(document.querySelectorAll('.lesson-item')).find(
        item => item.getAttribute('onclick').includes(licaoId)
    );
    
    if (itemClicado) {
        itemClicado.classList.add('active');
    }
    
    // Simular carregamento de conteúdo diferente
    const lessonContent = document.getElementById('lesson-content');
    
    // Apenas para simulação - em produção, isso seria um carregamento real via AJAX
    if (licaoId === 'tour-plataforma') {
        lessonContent.innerHTML = `
            <div class="video-container">
                <iframe src="https://www.youtube-nocookie.com/embed/dQw4w9WgXcQ" allowfullscreen></iframe>
            </div>
            
            <h2 class="lesson-title">Tour pela plataforma</h2>
            
            <div class="lesson-text">
                <p>Nesta lição, vamos explorar a interface do YouGrana e conhecer todas as seções principais da plataforma.</p>
                
                <h4>Principais áreas do YouGrana:</h4>
                <ul>
                    <li><strong>Dashboard:</strong> Visão geral das suas finanças com gráficos e estatísticas</li>
                    <li><strong>Receitas:</strong> Gerenciamento de todas as suas fontes de renda</li>
                    <li><strong>Despesas:</strong> Controle de todos os seus gastos</li>
                    <li><strong>Categorias:</strong> Organização personalizada das suas transações</li>
                    <li><strong>Relatórios:</strong> Análises detalhadas da sua situação financeira</li>
                    <li><strong>Metas:</strong> Definição e acompanhamento de objetivos financeiros</li>
                </ul>
                
                <p>Conhecer bem cada uma dessas áreas é fundamental para aproveitar ao máximo o YouGrana e ter um controle completo sobre suas finanças.</p>
            </div>
            
            <div class="lesson-resources">
                <div class="resource-title">
                    <i class="fas fa-file-download"></i> Recursos da Lição
                </div>
                <ul class="resource-list">
                    <li class="resource-item">
                        <div class="resource-icon">
                            <i class="fas fa-file-pdf"></i>
                        </div>
                        <div class="resource-name">Mapa da plataforma YouGrana</div>
                        <div class="resource-action">
                            <a href="#" class="btn btn-sm btn-outline-primary">Baixar</a>
                        </div>
                    </li>
                </ul>
            </div>
            
            <div class="lesson-nav">
                <button class="btn btn-outline-secondary btn-nav-prev" onclick="carregarLicao('introducao-mordomize')">
                    <i class="fas fa-arrow-left"></i> Lição Anterior
                </button>
                <button class="btn btn-primary btn-nav-next" onclick="carregarLicao('primeiros-passos')">
                    Próxima Lição <i class="fas fa-arrow-right"></i>
                </button>
            </div>
        `;
    } else if (licaoId === 'primeiros-passos') {
        lessonContent.innerHTML = `
            <div class="video-container">
                <iframe src="https://www.youtube-nocookie.com/embed/dQw4w9WgXcQ" allowfullscreen></iframe>
            </div>
            
            <h2 class="lesson-title">Primeiros passos</h2>
            
            <div class="lesson-text">
                <p>Agora que você já conhece a plataforma, vamos começar a utilizá-la de forma prática. Nesta lição, vamos aprender os primeiros passos para configurar o YouGrana de acordo com suas necessidades.</p>
                
                <h4>Passos iniciais:</h4>
                <ol>
                    <li><strong>Configurar seu perfil:</strong> Atualize suas informações pessoais</li>
                    <li><strong>Criar categorias personalizadas:</strong> Organize suas transações de acordo com seu estilo de vida</li>
                    <li><strong>Registrar suas primeiras transações:</strong> Adicione receitas e despesas recentes</li>
                    <li><strong>Configurar transações recorrentes:</strong> Automatize o registro de transações que se repetem mensalmente</li>
                </ol>
                
                <p>Seguindo estes passos, você terá uma base sólida para começar a acompanhar suas finanças e aproveitar todos os recursos do YouGrana.</p>
            </div>
            
            <div class="lesson-resources">
                <div class="resource-title">
                    <i class="fas fa-file-download"></i> Recursos da Lição
                </div>
                <ul class="resource-list">
                    <li class="resource-item">
                        <div class="resource-icon">
                            <i class="fas fa-file-pdf"></i>
                        </div>
                        <div class="resource-name">Guia de configuração inicial</div>
                        <div class="resource-action">
                            <a href="#" class="btn btn-sm btn-outline-primary">Baixar</a>
                        </div>
                    </li>
                    <li class="resource-item">
                        <div class="resource-icon">
                            <i class="fas fa-file-excel"></i>
                        </div>
                        <div class="resource-name">Planilha modelo para organizar categorias</div>
                        <div class="resource-action">
                            <a href="#" class="btn btn-sm btn-outline-primary">Baixar</a>
                        </div>
                    </li>
                </ul>
            </div>
            
            <div class="lesson-nav">
                <button class="btn btn-outline-secondary btn-nav-prev" onclick="carregarLicao('tour-plataforma')">
                    <i class="fas fa-arrow-left"></i> Lição Anterior
                </button>
                <button class="btn btn-primary btn-nav-next" onclick="carregarLicao('dashboard-overview')">
                    Próxima Lição <i class="fas fa-arrow-right"></i>
                </button>
            </div>
        `;
    } else if (licaoId === 'introducao-mordomize') {
        // Recarregar o conteúdo original
        lessonContent.innerHTML = `
            <div class="video-container">
                <iframe src="https://www.youtube-nocookie.com/embed/dQw4w9WgXcQ" allowfullscreen></iframe>
            </div>
            
            <h2 class="lesson-title">Bem-vindo ao YouGrana</h2>
            
            <div class="lesson-text">
                <p>Bem-vindo ao treinamento do YouGrana, a plataforma que vai ajudá-lo a organizar suas finanças de forma simples e eficiente!</p>
                
                <p>Neste primeiro módulo, vamos conhecer as principais funcionalidades do YouGrana e entender como você pode aproveitar ao máximo todos os recursos disponíveis para transformar sua vida financeira.</p>
                
                <h4>O que você vai aprender:</h4>
                <ul>
                    <li>Como navegar pela plataforma YouGrana</li>
                    <li>Configurações iniciais importantes</li>
                    <li>Os primeiros passos para começar a usar o sistema</li>
                    <li>Dicas para organizar suas finanças de forma eficiente</li>
                </ul>
                
                <p>Ao final deste treinamento, você será capaz de utilizar todas as funcionalidades do Mordomize com confiança e terá as ferramentas necessárias para tomar controle das suas finanças pessoais.</p>
            </div>
            
            <div class="lesson-resources">
                <div class="resource-title">
                    <i class="fas fa-file-download"></i> Recursos da Lição
                </div>
                <ul class="resource-list">
                    <li class="resource-item">
                        <div class="resource-icon">
                            <i class="fas fa-file-pdf"></i>
                        </div>
                        <div class="resource-name">Guia rápido de introdução ao Mordomize</div>
                        <div class="resource-action">
                            <a href="#" class="btn btn-sm btn-outline-primary">Baixar</a>
                        </div>
                    </li>
                    <li class="resource-item">
                        <div class="resource-icon">
                            <i class="fas fa-file-alt"></i>
                        </div>
                        <div class="resource-name">Checklist de primeiros passos</div>
                        <div class="resource-action">
                            <a href="#" class="btn btn-sm btn-outline-primary">Baixar</a>
                        </div>
                    </li>
                </ul>
            </div>
            
            <div class="lesson-nav">
                <button class="btn btn-outline-secondary btn-nav-prev" disabled>
                    <i class="fas fa-arrow-left"></i> Lição Anterior
                </button>
                <button class="btn btn-primary btn-nav-next" onclick="carregarLicao('tour-plataforma')">
                    Próxima Lição <i class="fas fa-arrow-right"></i>
                </button>
            </div>
        `;
    }
    
    // Atualizar progresso do curso (simulação)
    const progressBar = document.querySelector('.progress-bar-fill');
    const progressText = document.querySelector('.progress-text:last-child');
    
    if (licaoId === 'introducao-mordomize') {
        progressBar.style.width = '25%';
        progressText.textContent = '25%';
    } else if (licaoId === 'tour-plataforma') {
        progressBar.style.width = '30%';
        progressText.textContent = '30%';
    } else if (licaoId === 'primeiros-passos') {
        progressBar.style.width = '35%';
        progressText.textContent = '35%';
    }
    
    // Rolar para o topo da área de conteúdo
    lessonContent.scrollTop = 0;
}

// Marcar lições como concluídas ao avançar para a próxima
document.addEventListener('click', function(e) {
    if (e.target.classList.contains('btn-nav-next') || e.target.parentElement.classList.contains('btn-nav-next')) {
        const activeLesson = document.querySelector('.lesson-item.active');
        if (activeLesson) {
            activeLesson.classList.add('completed');
        }
    }
});
</script>

<?php
// Incluir rodapé
include 'includes/footer.php';
?>