<?php
require_once 'conexao.php';
session_start();

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

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

// Informações da sessão
$tenant_id = $_SESSION['tenant_id'] ?? null;
$usuario_id = $_SESSION['usuario_id'] ?? null;
$permissao = $_SESSION['permissao'] ?? 'usuario';
$is_admin = ($permissao === 'admin' || $permissao === 'super_admin');

// Validação do tenant_id
if (!$tenant_id || !is_numeric($tenant_id)) {
    die("Erro: tenant_id inválido.");
}

// VERIFICAÇÃO DO PLANO TESTE (ID 99)
$plano_teste = false;
$sql_plano = "SELECT p.id, p.nome FROM tenants t 
              INNER JOIN planos p ON t.plano_id = p.id 
              WHERE t.id = ?";
$stmt_plano = $conn->prepare($sql_plano);
$stmt_plano->bind_param("i", $tenant_id);
$stmt_plano->execute();
$result_plano = $stmt_plano->get_result();

if ($result_plano->num_rows > 0) {
    $plano = $result_plano->fetch_assoc();
    if ($plano['id'] == 99) {
        $plano_teste = true;
    }
}
$stmt_plano->close();

// Link temporário para vídeos sem link específico
$link_treinamento = "https://youtu.be/LbdFbwMdVOE";

// Array com os módulos de treinamento baseados no menu
$modulos_treinamento = [
    [
        'id' => 1,
        'titulo' => 'Apresentação',
        'descricao' => 'Conheça o sistema SON e seus principais recursos',
        'icone' => 'fas fa-play-circle',
        'categoria' => 'Introdução',
        'link' => 'https://youtu.be/b0jCTvbksQc'
    ],
    [
        'id' => 2,
        'titulo' => 'Visão Geral',
        'descricao' => 'Visão completa das funcionalidades do sistema',
        'icone' => 'fas fa-eye',
        'categoria' => 'Introdução',
        'link' => 'https://youtu.be/0Y7HzxXjL-s'
    ],
    [
        'id' => 3,
        'titulo' => 'Administração do Sistema',
        'descricao' => 'Como gerenciar usuários e configurações do sistema',
        'icone' => 'fas fa-cog',
        'categoria' => 'Administração',
        'requer_admin' => true,
        'link' => 'https://www.youtube.com/watch?v=HbJELBJ4w_w'
    ],
    [
        'id' => 4,
        'titulo' => 'Gestão de Atividades',
        'descricao' => 'Como cadastrar, consultar e gerenciar atividades',
        'icone' => 'fas fa-tasks',
        'categoria' => 'Atividades',
        'link' => 'https://youtu.be/UqHspw4yohE'
    ],
    [
        'id' => 5,
        'titulo' => 'Análise de Dados e Relatórios',
        'descricao' => 'Utilizando dashboards e análises gráficas',
        'icone' => 'fas fa-chart-line',
        'categoria' => 'Análise'
    ],
    [
        'id' => 6,
        'titulo' => 'Uso do Calendário',
        'descricao' => 'Como agendar e gerenciar compromissos',
        'icone' => 'fas fa-calendar',
        'categoria' => 'Ferramentas'
    ],
    [
        'id' => 7,
        'titulo' => 'Sistema de Chat',
        'descricao' => 'Comunicando-se com a equipe através do chat interno',
        'icone' => 'fas fa-comment',
        'categoria' => 'Ferramentas'
    ],
    [
        'id' => 8,
        'titulo' => 'Gestão de Clientes',
        'descricao' => 'Como cadastrar, listar e gerenciar clientes',
        'icone' => 'fas fa-users',
        'categoria' => 'Clientes'
    ],
    [
        'id' => 9,
        'titulo' => 'Envio de E-mails',
        'descricao' => 'Utilizando o sistema de envio de e-mails e templates',
        'icone' => 'fas fa-envelope-open-text',
        'categoria' => 'Comunicação',
        'link' => 'https://youtu.be/NLN19fmq7HY'
    ],
    [
        'id' => 10,
        'titulo' => 'Fluxos Automatizados',
        'descricao' => 'Criando e gerenciando fluxos de trabalho automatizados',
        'icone' => 'fas fa-project-diagram',
        'categoria' => 'Automação',
        'link' => 'https://youtu.be/zNAxrblVq1s'
    ],
    [
        'id' => 11,
        'titulo' => 'Formulários',
        'descricao' => 'Criando e utilizando formulários personalizados',
        'icone' => 'fas fa-file-alt',
        'categoria' => 'Ferramentas',
        'link' => 'https://youtu.be/WGLNHoScEsU'
    ],
    [
        'id' => 12,
        'titulo' => 'Gerenciamento de Funis',
        'descricao' => 'Como configurar e utilizar funis de vendas',
        'icone' => 'fas fa-filter',
        'categoria' => 'Funis'
    ],
    [
        'id' => 13,
        'titulo' => 'Origens de Clientes',
        'descricao' => 'Gerenciando as origens dos seus clientes',
        'icone' => 'fas fa-globe',
        'categoria' => 'Clientes',
        'link' => 'https://youtu.be/UHgYFx-dIYA'
    ],
    [
        'id' => 14,
        'titulo' => 'Gestão de Produtos',
        'descricao' => 'Cadastrando e gerenciando produtos e serviços',
        'icone' => 'fas fa-box',
        'categoria' => 'Produtos',
        'link' => 'https://youtu.be/Sj1wYjqskyw'
    ],
    [
        'id' => 15,
        'titulo' => 'Perfil do Usuário',
        'descricao' => 'Como configurar seu perfil e alterar senha',
        'icone' => 'fas fa-id-card',
        'categoria' => 'Geral'
    ],
    [
        'id' => 16,
        'titulo' => 'Sistema de Suporte',
        'descricao' => 'Como solicitar suporte e reportar problemas',
        'icone' => 'fas fa-headset',
        'categoria' => 'Geral'
    ]
];

// Adicionar links padrão para módulos que não têm link específico
foreach ($modulos_treinamento as &$modulo) {
    if (!isset($modulo['link'])) {
        $modulo['link'] = $link_treinamento;
    }
}
unset($modulo); // Limpar referência

// MODIFICAÇÃO: Para tenants do plano 99 (teste), limitar acesso apenas aos módulos de introdução
if ($plano_teste) {
    // Filtrar para manter apenas os módulos de introdução visíveis
    $modulos_treinamento = array_filter($modulos_treinamento, function($modulo) {
        // Manter apenas módulos da categoria Introdução
        if ($modulo['categoria'] == 'Introdução') {
            return true;
        }
        return false;
    });
    
    // Reindexar array
    $modulos_treinamento = array_values($modulos_treinamento);
}

// Filtrar módulos baseado na permissão do usuário (após possível filtragem do plano teste)
$modulos_filtrados = array_filter($modulos_treinamento, function($modulo) use ($is_admin) {
    // Se o módulo requer admin e o usuário não é admin, remove
    if (isset($modulo['requer_admin']) && $modulo['requer_admin'] && !$is_admin) {
        return false;
    }
    return true;
});

// Verificar se a tabela de progresso existe e criar se necessário
$verificar_tabela = "SHOW TABLES LIKE 'treinamentos_progresso'";
$resultado_tabela = $conn->query($verificar_tabela);

if ($resultado_tabela->num_rows == 0) {
    // Criar tabela se não existir
    $criar_tabela = "CREATE TABLE treinamentos_progresso (
        id INT PRIMARY KEY AUTO_INCREMENT,
        usuario_id INT NOT NULL,
        tenant_id INT NOT NULL,
        modulo_id INT NOT NULL,
        progresso_percentual DECIMAL(5,2) DEFAULT 0,
        concluido TINYINT(1) DEFAULT 0,
        data_inicio TIMESTAMP NULL DEFAULT NULL,
        data_conclusao TIMESTAMP NULL DEFAULT NULL,
        ultima_visualizacao TIMESTAMP NULL DEFAULT NULL,
        vezes_assistido INT DEFAULT 0,
        created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
        updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,
        UNIQUE KEY unique_usuario_modulo (usuario_id, tenant_id, modulo_id),
        FOREIGN KEY (usuario_id) REFERENCES usuarios(id) ON DELETE CASCADE,
        FOREIGN KEY (tenant_id) REFERENCES tenants(id) ON DELETE CASCADE
    )";
    
    if (!$conn->query($criar_tabela)) {
        error_log("Erro ao criar tabela treinamentos_progresso: " . $conn->error);
    }
}

// Buscar progresso do usuário no banco de dados
$progresso_usuario = [];
if ($tenant_id && $usuario_id) {
    try {
        $sql_progresso = "SELECT modulo_id, progresso_percentual, concluido, data_conclusao 
                          FROM treinamentos_progresso 
                          WHERE usuario_id = ? AND tenant_id = ?";
        $stmt_progresso = $conn->prepare($sql_progresso);
        $stmt_progresso->bind_param("ii", $usuario_id, $tenant_id);
        $stmt_progresso->execute();
        $result_progresso = $stmt_progresso->get_result();
        
        while ($row = $result_progresso->fetch_assoc()) {
            $progresso_usuario[$row['modulo_id']] = [
                'progresso' => $row['progresso_percentual'],
                'concluido' => $row['concluido'],
                'data_conclusao' => $row['data_conclusao']
            ];
        }
        $stmt_progresso->close();
    } catch (Exception $e) {
        error_log("Erro ao buscar progresso: " . $e->getMessage());
    }
}

// Processar requisição AJAX para salvar progresso
if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['action'])) {
    if ($_POST['action'] === 'salvar_progresso') {
        // Verificar CSRF token
        if (!isset($_POST['csrf_token']) || $_POST['csrf_token'] !== $_SESSION['csrf_token']) {
            echo json_encode(['success' => false, 'message' => 'Token de segurança inválido']);
            exit;
        }
        
        // Validar dados
        $modulo_id = isset($_POST['modulo_id']) ? (int)$_POST['modulo_id'] : 0;
        $progresso = isset($_POST['progresso']) ? (float)$_POST['progresso'] : 0;
        $concluido = isset($_POST['concluido']) ? (int)$_POST['concluido'] : 0;
        
        // MODIFICAÇÃO: Verificar se tenant é plano teste e tentando acessar módulo diferente de Introdução
        if ($plano_teste) {
            $modulo_info = null;
            foreach ($modulos_treinamento as $mod) {
                if ($mod['id'] == $modulo_id) {
                    $modulo_info = $mod;
                    break;
                }
            }
            
            if ($modulo_info && $modulo_info['categoria'] != 'Introdução') {
                echo json_encode(['success' => false, 'message' => 'Acesso restrito para plano de testes']);
                exit;
            }
        }
        
        if ($modulo_id > 0 && $tenant_id && $usuario_id) {
            try {
                // Verificar se já existe registro
                $sql_check = "SELECT id FROM treinamentos_progresso 
                              WHERE usuario_id = ? AND tenant_id = ? AND modulo_id = ?";
                $stmt_check = $conn->prepare($sql_check);
                $stmt_check->bind_param("iii", $usuario_id, $tenant_id, $modulo_id);
                $stmt_check->execute();
                $result_check = $stmt_check->get_result();
                
                if ($result_check->num_rows > 0) {
                    // Atualizar registro existente
                    if ($concluido) {
                        $sql_update = "UPDATE treinamentos_progresso 
                                       SET progresso_percentual = ?, 
                                           concluido = ?,
                                           data_conclusao = NOW(),
                                           ultima_visualizacao = NOW(),
                                           vezes_assistido = vezes_assistido + 1
                                       WHERE usuario_id = ? AND tenant_id = ? AND modulo_id = ?";
                    } else {
                        $sql_update = "UPDATE treinamentos_progresso 
                                       SET progresso_percentual = ?, 
                                           ultima_visualizacao = NOW()
                                       WHERE usuario_id = ? AND tenant_id = ? AND modulo_id = ?";
                    }
                    
                    $stmt_update = $conn->prepare($sql_update);
                    if ($concluido) {
                        $stmt_update->bind_param("diiii", $progresso, $concluido, $usuario_id, $tenant_id, $modulo_id);
                    } else {
                        $stmt_update->bind_param("diii", $progresso, $usuario_id, $tenant_id, $modulo_id);
                    }
                    $stmt_update->execute();
                    
                    echo json_encode([
                        'success' => true, 
                        'message' => 'Progresso atualizado',
                        'data_conclusao' => $concluido ? date('Y-m-d H:i:s') : null
                    ]);
                } else {
                    // Inserir novo registro
                    $sql_insert = "INSERT INTO treinamentos_progresso 
                                   (usuario_id, tenant_id, modulo_id, progresso_percentual, concluido, 
                                    data_inicio, data_conclusao, ultima_visualizacao, vezes_assistido) 
                                   VALUES (?, ?, ?, ?, ?, NOW(), ?, NOW(), 1)";
                    
                    $data_conclusao = $concluido ? date('Y-m-d H:i:s') : null;
                    $stmt_insert = $conn->prepare($sql_insert);
                    $stmt_insert->bind_param("iiidss", $usuario_id, $tenant_id, $modulo_id, $progresso, $concluido, $data_conclusao);
                    $stmt_insert->execute();
                    
                    echo json_encode([
                        'success' => true, 
                        'message' => 'Progresso salvo',
                        'data_conclusao' => $data_conclusao
                    ]);
                }
                
            } catch (Exception $e) {
                echo json_encode(['success' => false, 'message' => 'Erro ao salvar progresso: ' . $e->getMessage()]);
            }
        } else {
            echo json_encode(['success' => false, 'message' => 'Dados inválidos']);
        }
        exit;
    }
}

// Calcular estatísticas
$total_modulos = count($modulos_filtrados);
$modulos_concluidos = 0;
foreach ($modulos_filtrados as $modulo) {
    $modulo_id = $modulo['id'];
    if (isset($progresso_usuario[$modulo_id]) && $progresso_usuario[$modulo_id]['concluido']) {
        $modulos_concluidos++;
    }
}
$progresso_total = $total_modulos > 0 ? round(($modulos_concluidos / $total_modulos) * 100) : 0;

// Exibir mensagem (caso não seja requisição AJAX)
if ($_SERVER['REQUEST_METHOD'] !== 'POST' || !isset($_POST['ajax'])) {
    if (isset($_SESSION['mensagem'])) {
        echo '<div class="mensagem-flutuante" id="mensagemFlutuante">'
           . htmlspecialchars($_SESSION['mensagem'])
           . '</div>';
        
        unset($_SESSION['mensagem']);
        
        echo '<script>
                setTimeout(function() {
                    const msg = document.getElementById("mensagemFlutuante");
                    if (msg) msg.style.display = "none";
                }, 3000);
              </script>';
    }
}

?>

<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <link rel="icon" type="image/png" sizes="16x16" href="/favicon_io/favicon-16x16.png">
    <link rel="icon" type="image/png" sizes="32x32" href="/favicon_io/favicon-32x32.png">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>SON - Treinamentos</title>
    <meta name="csrf-token" content="<?= htmlspecialchars($_SESSION['csrf_token']) ?>">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            background-color: #f5f5f5;
        }
        
        .header-fixed {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            background-color: #f5f5f5;
            padding: 15px 20px;
            z-index: 1000;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .header-fixed img {
            height: 50px;
            margin-right: 15px;
        }
        
        .header-fixed h2 {
            margin: 0;
            flex-grow: 1;
            text-align: center;
        }
        
        /* Menu Lateral Recolhível */
        .sidebar {
            position: fixed;
            left: 0;
            top: 80px;
            height: calc(100vh - 80px);
            width: 60px;
            background: white;
            box-shadow: 2px 0 5px rgba(0,0,0,0.1);
            z-index: 999;
            transition: width 0.3s ease;
            overflow-x: hidden;
        }
        
        .sidebar-menu {
            list-style: none;
            padding: 0;
            margin: 0;
        }
        
        .sidebar-menu li {
            border-bottom: 1px solid #eee;
        }
        
        .sidebar-menu a {
            display: flex;
            align-items: center;
            padding: 15px 20px;
            text-decoration: none;
            color: #333;
            white-space: nowrap;
            transition: background-color 0.3s;
        }
        
        .sidebar-menu a:hover {
            background-color: #f5f5f5;
        }
        
        .sidebar-menu i {
            width: 24px;
            height: 24px;
            margin-right: 15px;
            text-align: center;
            flex-shrink: 0;
        }
        
        .sidebar-menu .menu-text {
            opacity: 0;
            transition: opacity 0.3s ease;
        }

        /* Classes para menu */
        .menu-btn-success {
            color: #6B8E23;
        }
        
        .menu-btn-primary {
            color: #0000FF;
        }
        
        .menu-btn-danger {
            color: #e74c3c;
        }
        
        /* Conteúdo Principal */
        .content-wrapper {
            margin-top: 20px;
            padding: 60px;
            margin-right: 80px;
            margin-left: 80px;
            transition: margin-left 0.3s ease;
        }
        
        /* Quando o menu expandir (hover) */
        .sidebar:hover + .content-wrapper {
            margin-left: 250px;
        }
        
        .container {
            max-width: 1800px;
            margin: 0 auto;
            background: white;
            padding: 25px;
            border-radius: 8px;
            box-shadow: 0 0 15px rgba(0, 0, 0, 0.05);
        }
        
        /* Estilos para o perfil */
        .profile-container {
            max-width: 800px;
            margin: 0 auto;
        }
        
        .profile-info {
            background: white;
            padding: 30px;
            border-radius: 8px;
            box-shadow: 0 0 15px rgba(0, 0, 0, 0.05);
        }
        
        .profile-info ul {
            list-style: none;
            padding: 0;
        }
        
        .profile-info li {
            padding: 15px 0;
            border-bottom: 1px solid #eee;
            font-size: 1.1em;
        }
        
        .profile-info li:last-child {
            border-bottom: none;
        }
        
        .profile-info strong {
            display: inline-block;
            width: 200px;
            color: #555;
        }
        
        /* Responsividade */
        @media (max-width: 768px) {
            .header-fixed {
                padding: 12px 15px;
            }
            
            .header-fixed h2 {
                font-size: 1.3rem;
            }
            
            .content-wrapper {
                margin-top: 80px;
                padding: 15px;
                margin-left: 0;
            }
            
            .container {
                padding: 18px;
            }
            
            .sidebar {
                display: none;
            }
            
            .profile-info li {
                font-size: 1em;
            }
            
            .profile-info strong {
                width: 120px;
            }
        }
    
        /* Conteúdo Principal */
        .container {
            max-width: 1000px;
            margin: 0 auto;
            background: white;
            padding: 25px;
            border-radius: 8px;
            box-shadow: 0 0 15px rgba(0, 0, 0, 0.05);
        }
        
        h1 {
            color: #333;
            border-bottom: 1px solid #eee;
            padding-bottom: 10px;
            display: flex;
            align-items: center;
            gap: 10px;
        }
        
        /* Formulário */
        .form-group {
            margin-bottom: 20px;
        }
        
        label {
            display: block;
            margin-bottom: 8px;
            font-weight: 600;
            color: #2c3e50;
        }
        
        .required:after {
            content: " *";
            color: #e74c3c;
        }
        
        input, textarea, select {
            width: 100%;
            padding: 10px 12px;
            border: 1px solid #ddd;
            border-radius: 4px;
            font-size: 16px;
            transition: border-color 0.3s;
        }
        
        input:focus, textarea:focus, select:focus {
            border-color: #3498db;
            outline: none;
            box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.2);
        }
        
        textarea {
            min-height: 120px;
            resize: vertical;
        }
        
        .checkbox-container {
            display: flex;
            align-items: center;
            margin: 20px 0;
        }
        
        .checkbox-container input {
            width: auto;
            margin-right: 10px;
        }
        
        /* Botões */
        .btn {
            padding: 10px 18px;
            border: none;
            border-radius: 4px;
            color: white;
            cursor: pointer;
            font-size: 16px;
            transition: all 0.3s;
            display: inline-flex;
            align-items: center;
            gap: 8px;
        }
        
        .btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
        }
        
        .btn-primary {
            background-color: #3498db;
        }
        
        .btn-primary:hover {
            background-color: #2980b9;
        }
        
        .btn-success {
            background-color: #2ecc71;
        }
        
        .btn-success:hover {
            background-color: #27ae60;
        }
        
        /* Seção de importação CSV */
        .csv-import-section {
            margin: 40px 0;
            padding: 20px;
            border: 1px dashed #ccc;
            border-radius: 8px;
            background-color: #f9f9f9;
        }
        
        .csv-import-section h2 {
            margin-top: 0;
            color: #333;
            display: flex;
            align-items: center;
            gap: 10px;
        }
        
        .csv-import-section ul {
            margin: 15px 0;
            padding-left: 20px;
        }
        
        .csv-import-section li {
            margin-bottom: 8px;
        }
        
        .download-sample {
            display: inline-block;
            margin-top: 15px;
            color: #3498db;
            text-decoration: none;
            font-weight: bold;
        }
        
        .download-sample:hover {
            text-decoration: underline;
        }
        
        /* Mensagem Flutuante */
        .mensagem-flutuante {
            position: fixed;
            top: 90px;
            right: 25px;
            padding: 14px 24px;
            background: #2ecc71;
            color: white;
            border-radius: 4px;
            z-index: 2000;
            box-shadow: 0 3px 10px rgba(0, 0, 0, 0.15);
            font-weight: 500;
            animation: slideIn 0.3s ease-out;
        }
        
        @keyframes slideIn {
            from {
                transform: translateY(-20px);
                opacity: 0;
            }
            to {
                transform: translateY(0);
                opacity: 1;
            }
        }
        
        /* Botão Fixo para Administração */
        .admin-fixed-btn {
            position: fixed;
            bottom: 30px;
            right: 30px;
            background: #8e44ad;
            color: white;
            width: 60px;
            height: 60px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 24px;
            box-shadow: 0 4px 8px rgba(0,0,0,0.2);
            z-index: 999;
            cursor: pointer;
            transition: all 0.3s;
        }

        .admin-fixed-btn:hover {
            transform: scale(1.1);
            box-shadow: 0 6px 12px rgba(0,0,0,0.3);
        }

        .admin-fixed-btn .tooltip {
            position: absolute;
            right: 70px;
            background: #333;
            color: white;
            padding: 5px 10px;
            border-radius: 4px;
            font-size: 14px;
            white-space: nowrap;
            opacity: 0;
            transition: opacity 0.3s;
            pointer-events: none;
        }

        .admin-fixed-btn:hover .tooltip {
            opacity: 1;
        }
        
        /* ====== ESTILOS ESPECÍFICOS PARA TREINAMENTOS ====== */
        .intro-section {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            padding: 25px;
            border-radius: 10px;
            margin-bottom: 30px;
            text-align: center;
        }
        
        .intro-section h2 {
            margin-top: 0;
            font-size: 2em;
        }
        
        .intro-section p {
            font-size: 1.1em;
            max-width: 800px;
            margin: 0 auto 20px;
        }
        
        .treinamento-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
            gap: 25px;
            margin-top: 30px;
        }
        
        .treinamento-card {
            background: #fff;
            border-radius: 10px;
            overflow: hidden;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            border: 1px solid #eaeaea;
            position: relative;
        }
        
        .treinamento-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
        }
        
        /* Estilo para módulo bloqueado (não admin) */
        .treinamento-card.bloqueado {
            opacity: 0.7;
            filter: grayscale(30%);
            cursor: not-allowed;
        }
        
        .treinamento-card.bloqueado:hover {
            transform: none;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
        }
        
        .bloqueado-badge {
            position: absolute;
            top: 10px;
            right: 10px;
            background: #e74c3c;
            color: white;
            padding: 4px 8px;
            border-radius: 12px;
            font-size: 0.7em;
            font-weight: bold;
            z-index: 1;
            display: flex;
            align-items: center;
            gap: 4px;
        }
        
        .card-header {
            background: linear-gradient(135deg, #3498db 0%, #2c3e50 100%);
            color: white;
            padding: 20px;
            display: flex;
            align-items: center;
            gap: 15px;
        }
        
        .card-header.bloqueado {
            background: linear-gradient(135deg, #95a5a6 0%, #7f8c8d 100%);
        }
        
        .card-icon {
            font-size: 2em;
            width: 60px;
            height: 60px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: rgba(255, 255, 255, 0.2);
            border-radius: 50%;
        }
        
        .card-title {
            flex: 1;
        }
        
        .card-title h3 {
            margin: 0 0 5px 0;
            font-size: 1.3em;
        }
        
        .card-category {
            font-size: 0.85em;
            opacity: 0.9;
            background: rgba(255, 255, 255, 0.2);
            padding: 3px 10px;
            border-radius: 20px;
            display: inline-block;
        }
        
        .card-body {
            padding: 20px;
        }
        
        .card-body p {
            color: #666;
            line-height: 1.6;
            margin-bottom: 20px;
        }
        
        .btn-treinamento {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            background: linear-gradient(135deg, #2ecc71 0%, #27ae60 100%);
            color: white;
            padding: 12px 25px;
            border-radius: 6px;
            text-decoration: none;
            font-weight: 600;
            transition: all 0.3s ease;
            border: none;
            cursor: pointer;
            width: 100%;
            justify-content: center;
        }
        
        .btn-treinamento:hover {
            background: linear-gradient(135deg, #27ae60 0%, #219653 100%);
            transform: translateY(-2px);
            box-shadow: 0 4px 15px rgba(46, 204, 113, 0.3);
        }
        
        .btn-treinamento.bloqueado {
            background: linear-gradient(135deg, #95a5a6 0%, #7f8c8d 100%);
            cursor: not-allowed;
            opacity: 0.7;
        }
        
        .btn-treinamento.bloqueado:hover {
            transform: none;
            box-shadow: none;
            background: linear-gradient(135deg, #95a5a6 0%, #7f8c8d 100%);
        }
        
        .btn-treinamento.concluido {
            background: linear-gradient(135deg, #3498db 0%, #2980b9 100%);
        }
        
        .btn-treinamento.concluido:hover {
            background: linear-gradient(135deg, #2980b9 0%, #2573a7 100%);
        }
        
        .btn-treinamento i {
            font-size: 1.2em;
        }
        
        .categorias-filtro {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            margin-bottom: 30px;
            padding: 15px;
            background: #f8f9fa;
            border-radius: 8px;
        }
        
        .btn-categoria {
            padding: 8px 16px;
            background: white;
            border: 2px solid #3498db;
            border-radius: 20px;
            color: #3498db;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
        }
        
        .btn-categoria:hover,
        .btn-categoria.active {
            background: #3498db;
            color: white;
        }
        
        .btn-categoria.todos {
            border-color: #2ecc71;
            color: #2ecc71;
        }
        
        .btn-categoria.todos:hover,
        .btn-categoria.todos.active {
            background: #2ecc71;
            color: white;
        }
        
        .stats-bar {
            display: flex;
            justify-content: space-between;
            background: #f8f9fa;
            padding: 15px;
            border-radius: 8px;
            margin-bottom: 20px;
            flex-wrap: wrap;
            gap: 10px;
        }
        
        .stat-item {
            text-align: center;
            flex: 1;
            min-width: 150px;
        }
        
        .stat-number {
            font-size: 2em;
            font-weight: bold;
            color: #3498db;
            display: block;
        }
        
        .stat-label {
            font-size: 0.9em;
            color: #666;
        }
        
        .admin-badge {
            background: #e74c3c;
            color: white;
            padding: 3px 8px;
            border-radius: 12px;
            font-size: 0.7em;
            font-weight: bold;
            margin-left: 5px;
            vertical-align: middle;
        }
        
        /* Modal de Vídeo */
        .video-modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.85);
            z-index: 2000;
            justify-content: center;
            align-items: center;
            padding: 20px;
        }
        
        .video-modal.active {
            display: flex;
        }
        
        .video-container {
            width: 100%;
            max-width: 800px;
            background: #000;
            border-radius: 8px;
            overflow: hidden;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
        }
        
        .video-header {
            background: #222;
            padding: 15px 20px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-bottom: 1px solid #444;
        }
        
        .video-title {
            color: white;
            font-size: 1.2em;
            font-weight: 600;
            margin: 0;
            flex: 1;
        }
        
        .close-video {
            background: #e74c3c;
            color: white;
            border: none;
            width: 32px;
            height: 32px;
            border-radius: 50%;
            cursor: pointer;
            font-size: 1.2em;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: background 0.3s;
        }
        
        .close-video:hover {
            background: #c0392b;
        }
        
        .video-player {
            width: 100%;
            aspect-ratio: 16/9;
            background: #000;
        }
        
        .video-description {
            background: #222;
            padding: 15px 20px;
            color: #ddd;
            font-size: 0.95em;
            line-height: 1.5;
            border-top: 1px solid #444;
        }
        
        /* Indicador de progresso do vídeo */
        .video-progress-bar {
            height: 4px;
            background: #444;
            margin-top: 10px;
            border-radius: 2px;
            overflow: hidden;
        }
        
        .video-progress-fill {
            height: 100%;
            background: #2ecc71;
            width: 0%;
            transition: width 0.3s;
        }
        
        .video-progress-text {
            font-size: 0.8em;
            color: #999;
            margin-top: 5px;
            text-align: center;
        }
        
        /* Badge de conclusão no card */
        .concluido-badge {
            position: absolute;
            top: 10px;
            right: 10px;
            background: #2ecc71;
            color: white;
            padding: 4px 8px;
            border-radius: 12px;
            font-size: 0.7em;
            font-weight: bold;
            z-index: 1;
            display: flex;
            align-items: center;
            gap: 4px;
        }
        
        .progresso-indicator {
            display: inline-block;
            font-size: 0.85em;
            color: #666;
            margin-top: 5px;
        }
        
        .progresso-indicator.concluido {
            color: #2ecc71;
            font-weight: bold;
        }
        
        .progresso-indicator i {
            margin-right: 4px;
        }
        
        .no-results {
            grid-column: 1 / -1;
            text-align: center;
            padding: 40px;
            color: #666;
        }
        
        .no-results i {
            font-size: 3em;
            color: #ddd;
            margin-bottom: 15px;
        }
        
        .no-results h3 {
            margin: 0 0 10px 0;
            font-size: 1.2em;
        }
        
        .modal-info {
            background: #f8f9fa;
            padding: 10px;
            border-radius: 5px;
            margin-top: 10px;
            font-size: 0.85em;
            color: #666;
            border-left: 3px solid #3498db;
        }
        
        /* Barra de progresso no modal */
        .progresso-container {
            background: #333;
            padding: 10px 15px;
            border-bottom: 1px solid #444;
        }
        
        .progresso-info {
            display: flex;
            justify-content: space-between;
            color: #ddd;
            font-size: 0.9em;
            margin-bottom: 5px;
        }
        
        .progresso-necessario {
            color: #2ecc71;
            font-weight: bold;
        }
        
        /* Estilos do menu lateral para hover */
        .sidebar:hover .sidebar-menu .menu-text {
            opacity: 1;
        }
    </style>
</head>
<body>

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

    <!-- Conteúdo Principal -->
    <div class="content-wrapper">
        <div class="container">
            <h1><i class="fas fa-chalkboard-teacher"></i> Treinamentos SON</h1>
            
            <!-- Seção de Introdução -->
            <div class="intro-section">
                <h2>Bem-vindo ao Portal de Treinamentos</h2>
                <p>Aprenda a utilizar todas as funcionalidades do sistema SON com nossos tutoriais em vídeo. 
                Selecione um módulo abaixo para assistir aos vídeos diretamente na página.</p>
                <p><strong>Nota:</strong> Para concluir um módulo, é necessário assistir ao vídeo completo (95% ou mais).</p>
                
                <!-- MODIFICAÇÃO: Mensagem específica para plano teste -->
                <?php if ($plano_teste): ?>
                    <div style="background: rgba(255,255,255,0.2); padding: 12px; border-radius: 5px; margin-top: 10px; border: 1px dashed rgba(255,255,255,0.3);">
                        <i class="fas fa-flask"></i> <strong>PLANO DE TESTES ATIVO</strong> - 
                        Acesso limitado aos módulos de introdução para avaliação do sistema.
                    </div>
                <?php else: ?>
                    <?php if ($is_admin): ?>
                        <p style="background: rgba(255,255,255,0.2); padding: 8px; border-radius: 5px; margin-top: 10px;">
                            <i class="fas fa-user-shield"></i> <strong>Você tem acesso administrativo</strong> - Todos os módulos estão disponíveis para você.
                        </p>
                    <?php else: ?>
                        <p style="background: rgba(255,255,255,0.2); padding: 8px; border-radius: 5px; margin-top: 10px;">
                            <i class="fas fa-user"></i> <strong>Você tem acesso de usuário</strong> - Alguns módulos administrativos podem não estar disponíveis.
                        </p>
                    <?php endif; ?>
                <?php endif; ?>
            </div>
            
            <!-- Barra de Estatísticas -->
            <div class="stats-bar">
                <div class="stat-item">
                    <span class="stat-number"><?php echo $total_modulos; ?></span>
                    <span class="stat-label">Módulos Disponíveis</span>
                </div>
                <div class="stat-item">
                    <span class="stat-number" id="concluidosCount"><?php echo $modulos_concluidos; ?></span>
                    <span class="stat-label">Módulos Concluídos</span>
                </div>
                <div class="stat-item">
                    <span class="stat-number" id="progressoCount"><?php echo $progresso_total; ?>%</span>
                    <span class="stat-label">Progresso Total</span>
                </div>
            </div>
            
            <!-- Filtros por Categoria -->
            <div class="categorias-filtro">
                <button class="btn-categoria todos active" onclick="filtrarTreinamentos('todos')">
                    Todos os Módulos
                </button>
                <button class="btn-categoria" onclick="filtrarTreinamentos('concluidos')">
                    <i class="fas fa-check-circle"></i> Concluídos
                </button>
                <button class="btn-categoria" onclick="filtrarTreinamentos('pendentes')">
                    <i class="fas fa-clock"></i> Pendentes
                </button>
                <?php 
                $categorias = array_unique(array_column($modulos_filtrados, 'categoria'));
                sort($categorias);
                foreach ($categorias as $categoria): 
                ?>
                    <button class="btn-categoria" onclick="filtrarTreinamentos('<?php echo $categoria; ?>')">
                        <?php echo htmlspecialchars($categoria); ?>
                    </button>
                <?php endforeach; ?>
            </div>
            
            <!-- Grid de Módulos de Treinamento -->
            <div class="treinamento-grid" id="treinamentoGrid">
                <?php foreach ($modulos_filtrados as $modulo): 
                    $bloqueado = (isset($modulo['requer_admin']) && $modulo['requer_admin'] && !$is_admin);
                    $modulo_id = $modulo['id'];
                    $concluido = isset($progresso_usuario[$modulo_id]) && $progresso_usuario[$modulo_id]['concluido'];
                    $progresso = isset($progresso_usuario[$modulo_id]) ? $progresso_usuario[$modulo_id]['progresso'] : 0;
                    $data_conclusao = isset($progresso_usuario[$modulo_id]) ? $progresso_usuario[$modulo_id]['data_conclusao'] : null;
                    $video_link = $modulo['link'] ?? $link_treinamento;
                    $e_introducao = ($modulo['categoria'] == 'Introdução');
                ?>
                    <div class="treinamento-card <?php echo $bloqueado ? 'bloqueado' : ''; ?>" 
                         data-categoria="<?php echo htmlspecialchars($modulo['categoria']); ?>" 
                         data-modulo-id="<?php echo $modulo_id; ?>" 
                         data-concluido="<?php echo $concluido ? 'true' : 'false'; ?>"
                         data-bloqueado="<?php echo $bloqueado ? 'true' : 'false'; ?>">
                        
                        <!-- Badge de Concluído -->
                        <?php if ($concluido && !$bloqueado): ?>
                            <div class="concluido-badge">
                                <i class="fas fa-check-circle"></i> Concluído
                            </div>
                        <?php endif; ?>
                        
                        <!-- Badge de Bloqueado (se aplicável) -->
                        <?php if ($bloqueado): ?>
                            <div class="bloqueado-badge">
                                <i class="fas fa-lock"></i> Administração
                            </div>
                        <?php endif; ?>
                        
                        <!-- MODIFICAÇÃO: Badge específico para plano teste -->
                        <?php if ($plano_teste && $e_introducao): ?>
                            <div class="bloqueado-badge" style="background: #3498db;">
                                <i class="fas fa-flask"></i> Módulo de Teste
                            </div>
                        <?php endif; ?>
                        
                        <div class="card-header <?php echo $bloqueado ? 'bloqueado' : ''; ?>">
                            <div class="card-icon">
                                <i class="<?php echo $modulo['icone']; ?>"></i>
                            </div>
                            <div class="card-title">
                                <h3>
                                    <?php echo htmlspecialchars($modulo['titulo']); ?>
                                    <?php if (isset($modulo['requer_admin']) && $modulo['requer_admin']): ?>
                                        <span class="admin-badge">ADMIN</span>
                                    <?php endif; ?>
                                </h3>
                                <span class="card-category"><?php echo htmlspecialchars($modulo['categoria']); ?></span>
                            </div>
                        </div>
                        <div class="card-body">
                            <p><?php echo htmlspecialchars($modulo['descricao']); ?></p>
                            
                            <?php if ($bloqueado): ?>
                                <button class="btn-treinamento bloqueado" onclick="mostrarAcessoNegado()">
                                    <i class="fas fa-lock"></i> Acesso Restrito
                                </button>
                                <div class="progresso-indicator">
                                    <i class="fas fa-info-circle"></i> Disponível apenas para administradores
                                </div>
                            <?php else: ?>
                                <!-- MODIFICAÇÃO: Tratamento específico para plano teste -->
                                <?php if ($plano_teste && !$e_introducao): ?>
                                    <button class="btn-treinamento bloqueado" onclick="mostrarPlanoTesteAviso()">
                                        <i class="fas fa-flask"></i> Disponível no Plano Completo
                                    </button>
                                    <div class="progresso-indicator">
                                        <i class="fas fa-info-circle"></i> Módulo bloqueado em plano de testes
                                    </div>
                                <?php else: ?>
                                    <button class="btn-treinamento <?php echo $concluido ? 'concluido' : ''; ?>" 
                                            onclick="abrirVideoTreinamento(<?php echo $modulo_id; ?>, '<?php echo htmlspecialchars(addslashes($modulo['titulo'])); ?>', '<?php echo htmlspecialchars(addslashes($modulo['descricao'])); ?>', '<?php echo $video_link; ?>')">
                                        <i class="fas <?php echo $concluido ? 'fa-redo' : 'fa-play-circle'; ?>"></i> 
                                        <?php echo $concluido ? 'Assistir Novamente' : 'Assistir Vídeo'; ?>
                                    </button>
                                    <div class="progresso-indicator <?php echo $concluido ? 'concluido' : ''; ?>" 
                                         id="progressoModulo<?php echo $modulo_id; ?>">
                                        <?php if ($concluido && $data_conclusao): ?>
                                            <i class="fas fa-check-circle"></i> Concluído (<?php echo round($progresso); ?>%) - 
                                            <?php echo date('d/m/Y', strtotime($data_conclusao)); ?>
                                        <?php elseif ($progresso > 0): ?>
                                            <i class="fas fa-play-circle"></i> Progresso: <?php echo round($progresso); ?>%
                                        <?php endif; ?>
                                    </div>
                                <?php endif; ?>
                            <?php endif; ?>
                        </div>
                    </div>
                <?php endforeach; ?>
            </div>
            
            <!-- Mensagem para quando não há módulos disponíveis -->
            <?php if (empty($modulos_filtrados)): ?>
                <div class="no-results">
                    <i class="fas fa-video-slash"></i>
                    <h3>Nenhum módulo de treinamento disponível</h3>
                    <p>Você não tem permissão para acessar os módulos de treinamento disponíveis.</p>
                    <?php if (!$is_admin): ?>
                        <p style="margin-top: 15px;">
                            <strong>Nota:</strong> Alguns módulos requerem permissão de administrador. 
                            Entre em contato com o administrador do sistema para solicitar acesso.
                        </p>
                    <?php endif; ?>
                </div>
            <?php endif; ?>
        </div>
    </div>

    <!-- Modal de Vídeo -->
    <div class="video-modal" id="videoModal">
        <div class="video-container">
            <div class="video-header">
                <h3 class="video-title" id="videoModalTitle">Título do Vídeo</h3>
                <button class="close-video" onclick="fecharVideo()">
                    <i class="fas fa-times"></i>
                </button>
            </div>
            
            <!-- Container de progresso do vídeo -->
            <div class="progresso-container" style="display: none;" id="progressoContainer">
                <div class="progresso-info">
                    <span>Progresso: <span id="progressoAtual">0%</span></span>
                    <span>Necessário: <span class="progresso-necessario" id="progressoNecessario">95%</span></span>
                </div>
                <div class="video-progress-bar">
                    <div class="video-progress-fill" id="videoProgressFill"></div>
                </div>
                <div class="video-progress-text" id="videoProgressText">
                    Assista 95% do vídeo para concluir este módulo
                </div>
            </div>
            
            <div class="video-player" id="videoPlayer">
                <!-- O player será injetado aqui -->
            </div>
            <div class="video-description" id="videoModalDescription">
                Descrição do vídeo aparecerá aqui.
            </div>
        </div>
    </div>

    <!-- Modal de Alteração de Senha -->
    <div id="modalSenha" style="display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.5); z-index:2000; justify-content:center; align-items:center;">
        <div style="background:white; padding:25px; border-radius:8px; width:100%; max-width:400px;">
            <h2 style="margin-top:0;">Alterar Senha</h2>
            <form id="formAlterarSenha" onsubmit="alterarSenha(event)">
                <div style="margin-bottom:15px;">
                    <label style="display:block; margin-bottom:5px;">Senha Atual</label>
                    <input type="password" id="senhaAtual" required style="width:100%; padding:8px; border:1px solid #ddd; border-radius:4px;">
                </div>
                <div style="margin-bottom:15px;">
                    <label style="display:block; margin-bottom:5px;">Nova Senha</label>
                    <input type="password" id="novaSenha" required style="width:100%; padding:8px; border:1px solid #ddd; border-radius:4px;">
                </div>
                <div style="margin-bottom:15px;">
                    <label style="display:block; margin-bottom:5px;">Confirmar Nova Senha</label>
                    <input type="password" id="confirmarSenha" required style="width:100%; padding:8px; border:1px solid #ddd; border-radius:4px;">
                </div>
                <div id="mensagemSenha" style="margin-bottom:15px;"></div>
                <div style="display:flex; justify-content:space-between;">
                    <button type="button" onclick="fecharModalAlterarSenha()" style="padding:8px 15px; background:#6c757d; color:white; border:none; border-radius:4px; cursor:pointer;">Cancelar</button>
                    <button type="submit" style="padding:8px 15px; background:#28a745; color:white; border:none; border-radius:4px; cursor:pointer;">Alterar Senha</button>
                </div>
            </form>
        </div>
    </div>

    <script>
        // Variáveis globais para controle do player
        let player;
        let moduloAtualId = null;
        let videoLinkAtual = null;
        let intervaloProgresso;
        const PROGRESSO_MINIMO = 95; // 95% do vídeo precisa ser assistido
        
        // Verificar se usuário é admin (do PHP para JavaScript)
        const usuarioEhAdmin = <?php echo $is_admin ? 'true' : 'false'; ?>;
        const csrfToken = '<?php echo $_SESSION['csrf_token']; ?>';
        
        // MODIFICAÇÃO: Variável para plano teste
        const planoTeste = <?php echo $plano_teste ? 'true' : 'false'; ?>;
        
        // Função para mostrar mensagem de acesso negado
        function mostrarAcessoNegado() {
            Swal.fire({
                title: 'Acesso Restrito',
                html: `
                    <div style="text-align: center;">
                        <i class="fas fa-lock fa-3x" style="color: #e74c3c; margin-bottom: 15px;"></i>
                        <p>Este módulo de treinamento está disponível apenas para <strong>administradores do sistema</strong>.</p>
                        <p style="margin-top: 10px; font-size: 0.9em; color: #666;">
                            Se você precisa de acesso a esta funcionalidade, entre em contato com o administrador do sistema.
                        </p>
                    </div>
                `,
                icon: 'warning',
                confirmButtonText: 'Entendi',
                confirmButtonColor: '#3498db'
            });
        }
        
        // MODIFICAÇÃO: Função para mostrar aviso de plano teste
        function mostrarPlanoTesteAviso() {
            Swal.fire({
                title: 'Recurso Disponível no Plano Completo',
                html: `
                    <div style="text-align: center;">
                        <i class="fas fa-flask fa-3x" style="color: #3498db; margin-bottom: 15px;"></i>
                        <p>Este módulo de treinamento está disponível apenas na <strong>versão completa</strong> do sistema SON.</p>
                        <p style="margin-top: 10px; font-size: 0.9em; color: #666;">
                            Você está utilizando o <strong>plano de testes (ID 99)</strong>, que permite acesso apenas aos módulos de introdução.
                        </p>
                        <p style="margin-top: 15px; font-size: 0.9em; color: #666; background: #f8f9fa; padding: 10px; border-radius: 5px;">
                            <i class="fas fa-info-circle"></i> Para acessar todos os módulos, entre em contato para adquirir o plano completo.
                        </p>
                    </div>
                `,
                icon: 'info',
                confirmButtonText: 'Entendi',
                confirmButtonColor: '#3498db'
            });
        }
        
        // Função para salvar progresso no banco de dados
        async function salvarProgresso(moduloId, progresso, concluido) {
            try {
                // MODIFICAÇÃO: Verificar se é plano teste e tentando acessar módulo que não é de introdução
                if (planoTeste) {
                    const card = document.querySelector(`.treinamento-card[data-modulo-id="${moduloId}"]`);
                    if (card) {
                        const categoria = card.getAttribute('data-categoria');
                        if (categoria !== 'Introdução') {
                            console.error('Tentativa de salvar progresso em módulo bloqueado para plano teste');
                            return null;
                        }
                    }
                }
                
                const response = await fetch('<?php echo $_SERVER['PHP_SELF']; ?>', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/x-www-form-urlencoded',
                    },
                    body: new URLSearchParams({
                        action: 'salvar_progresso',
                        csrf_token: csrfToken,
                        modulo_id: moduloId,
                        progresso: progresso,
                        concluido: concluido ? 1 : 0
                    })
                });
                
                const data = await response.json();
                if (data.success) {
                    console.log('Progresso salvo:', data.message);
                    return data;
                } else {
                    console.error('Erro ao salvar progresso:', data.message);
                    return null;
                }
            } catch (error) {
                console.error('Erro na requisição:', error);
                return null;
            }
        }
        
        // Função para carregar a API do YouTube
        function carregarAPIYouTube() {
            if (!window.YT) {
                const tag = document.createElement('script');
                tag.src = "https://www.youtube.com/iframe_api";
                const firstScriptTag = document.getElementsByTagName('script')[0];
                firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
            }
        }
        
        // Função para extrair ID do YouTube
        function extrairIdYouTube(url) {
            const shortsMatch = url.match(/youtube\.com\/shorts\/([a-zA-Z0-9_-]+)/);
            if (shortsMatch) return shortsMatch[1];
            
            const videoMatch = url.match(/(?:youtube\.com\/(?:[^\/]+\/.+\/|(?:v|e(?:mbed)?)\/|.*[?&]v=)|youtu\.be\/)([^"&?\/\s]{11})/);
            if (videoMatch) return videoMatch[1];
            
            return null;
        }

        // Função para criar o player do YouTube
        function criarPlayerYouTube(videoId, moduloId) {
            moduloAtualId = moduloId;
            
            player = new YT.Player('videoPlayer', {
                height: '100%',
                width: '100%',
                videoId: videoId,
                playerVars: {
                    'autoplay': 1,
                    'rel': 0,
                    'modestbranding': 1,
                    'showinfo': 0
                },
                events: {
                    'onReady': onPlayerReady,
                    'onStateChange': onPlayerStateChange,
                    'onError': onPlayerError
                }
            });
            
            // Mostrar barra de progresso
            document.getElementById('progressoContainer').style.display = 'block';
        }

        // Função quando o player está pronto
        function onPlayerReady(event) {
            console.log('Player pronto');
            
            // Iniciar monitoramento de progresso
            iniciarMonitoramentoProgresso();
        }

        // Função para monitorar mudanças no estado do player
        function onPlayerStateChange(event) {
            // -1 (não iniciado), 0 (terminado), 1 (reproduzindo), 2 (pausado), 3 (buffering), 5 (enfileirado)
            
            if (event.data === YT.PlayerState.ENDED) {
                // Vídeo terminou - considerar como concluído
                verificarProgressoConclusao(100);
                pararMonitoramentoProgresso();
            }
            
            if (event.data === YT.PlayerState.PLAYING) {
                // Vídeo começou a tocar
                iniciarMonitoramentoProgresso();
            }
            
            if (event.data === YT.PlayerState.PAUSED) {
                // Vídeo pausado - verificar progresso
                verificarProgressoAtual();
            }
        }

        // Função em caso de erro
        function onPlayerError(event) {
            console.error('Erro no player:', event.data);
            Swal.fire({
                title: 'Erro ao carregar vídeo',
                text: 'Não foi possível carregar o vídeo. Por favor, tente novamente.',
                icon: 'error',
                confirmButtonText: 'OK'
            });
        }

        // Função para iniciar monitoramento de progresso
        function iniciarMonitoramentoProgresso() {
            // Limpar intervalo anterior se existir
            pararMonitoramentoProgresso();
            
            // Verificar progresso a cada segundo
            intervaloProgresso = setInterval(() => {
                verificarProgressoAtual();
            }, 1000);
        }

        // Função para parar monitoramento de progresso
        function pararMonitoramentoProgresso() {
            if (intervaloProgresso) {
                clearInterval(intervaloProgresso);
                intervaloProgresso = null;
            }
        }

        // Função para verificar progresso atual
        function verificarProgressoAtual() {
            if (!player || !moduloAtualId) return;
            
            try {
                const tempoAtual = player.getCurrentTime();
                const duracao = player.getDuration();
                
                if (duracao > 0) {
                    const progressoPercentual = (tempoAtual / duracao) * 100;
                    
                    // Atualizar UI
                    atualizarUIProgresso(progressoPercentual);
                    
                    // Salvar progresso parcial (a cada 10% ou quando pausar)
                    if (progressoPercentual % 10 < 1) {
                        salvarProgresso(moduloAtualId, progressoPercentual, false);
                    }
                    
                    // Verificar se atingiu o progresso mínimo
                    if (progressoPercentual >= PROGRESSO_MINIMO) {
                        verificarProgressoConclusao(progressoPercentual);
                    }
                }
            } catch (e) {
                console.error('Erro ao verificar progresso:', e);
            }
        }

        // Função para atualizar UI do progresso
        function atualizarUIProgresso(progresso) {
            const progressoArredondado = Math.min(100, Math.round(progresso));
            
            // Atualizar barra de progresso
            document.getElementById('videoProgressFill').style.width = progressoArredondado + '%';
            document.getElementById('progressoAtual').textContent = progressoArredondado + '%';
            
            // Atualizar texto
            const progressoTexto = document.getElementById('videoProgressText');
            if (progressoArredondado >= PROGRESSO_MINIMO) {
                progressoTexto.innerHTML = '<i class="fas fa-check-circle" style="color: #2ecc71;"></i> Vídeo assistido suficiente para concluir!';
                progressoTexto.style.color = '#2ecc71';
            } else {
                progressoTexto.textContent = `Assista até ${PROGRESSO_MINIMO}% do vídeo para concluir este módulo (${progressoArredondado}%)`;
                progressoTexto.style.color = '#ddd';
            }
        }

        // Função para verificar e registrar conclusão
        function verificarProgressoConclusao(progresso) {
            if (progresso >= PROGRESSO_MINIMO && moduloAtualId) {
                // Salvar conclusão no banco
                salvarProgresso(moduloAtualId, progresso, true).then(data => {
                    if (data) {
                        // Marcar como concluído na UI
                        marcarModuloConcluido(moduloAtualId, progresso, data.data_conclusao);
                    }
                });
            }
        }

        // Função para marcar módulo como concluído na UI
        function marcarModuloConcluido(moduloId, progresso, dataConclusao) {
            // Atualizar badge no card
            const card = document.querySelector(`.treinamento-card[data-modulo-id="${moduloId}"]`);
            if (card) {
                card.setAttribute('data-concluido', 'true');
                
                // Mostrar badge de concluído
                let badge = card.querySelector('.concluido-badge');
                if (!badge) {
                    badge = document.createElement('div');
                    badge.className = 'concluido-badge';
                    badge.innerHTML = '<i class="fas fa-check-circle"></i> Concluído';
                    card.insertBefore(badge, card.firstChild);
                }
                badge.style.display = 'flex';
                
                // Atualizar indicador de progresso
                const progressoElement = document.getElementById(`progressoModulo${moduloId}`);
                if (progressoElement) {
                    progressoElement.className = 'progresso-indicator concluido';
                    const dataFormatada = dataConclusao ? new Date(dataConclusao).toLocaleDateString('pt-BR') : 'Hoje';
                    progressoElement.innerHTML = `<i class="fas fa-check-circle"></i> Concluído (${Math.round(progresso)}%) - ${dataFormatada}`;
                }
                
                // Atualizar botão (se não estiver bloqueado)
                const btn = card.querySelector('.btn-treinamento:not(.bloqueado)');
                if (btn) {
                    btn.innerHTML = '<i class="fas fa-redo"></i> Assistir Novamente';
                    btn.classList.add('concluido');
                    btn.style.background = 'linear-gradient(135deg, #3498db 0%, #2980b9 100%)';
                }
                
                // Atualizar estatísticas
                atualizarEstatisticas();
                
                // Mostrar confirmação
                Swal.fire({
                    title: 'Módulo Concluído!',
                    text: `Parabéns! Você completou ${Math.round(progresso)}% do vídeo e concluiu este módulo.`,
                    icon: 'success',
                    confirmButtonText: 'Ótimo!',
                    timer: 3000,
                    timerProgressBar: true
                });
            }
        }

        // Função para atualizar estatísticas
        function atualizarEstatisticas() {
            const cards = document.querySelectorAll('.treinamento-card:not([data-bloqueado="true"])');
            let concluidos = 0;
            let totalDisponiveis = cards.length;
            
            cards.forEach(card => {
                if (card.getAttribute('data-concluido') === 'true') {
                    concluidos++;
                }
            });
            
            // Atualizar contadores
            document.getElementById('concluidosCount').textContent = concluidos;
            
            const percentualConcluido = totalDisponiveis > 0 ? Math.round((concluidos / totalDisponiveis) * 100) : 0;
            document.getElementById('progressoCount').textContent = percentualConcluido + '%';
            
            // Atualizar cor do progresso
            const progressoBar = document.querySelector('.stats-bar .stat-item:nth-child(3) .stat-number');
            if (progressoBar) {
                progressoBar.style.color = percentualConcluido === 100 ? '#2ecc71' : 
                                          percentualConcluido >= 50 ? '#f39c12' : '#3498db';
            }
        }

        // Função para abrir o vídeo no modal
        function abrirVideoTreinamento(moduloId, titulo, descricao, videoLink) {
            // MODIFICAÇÃO: Verificar se é plano teste e tentando acessar módulo que não é de introdução
            if (planoTeste) {
                const card = document.querySelector(`.treinamento-card[data-modulo-id="${moduloId}"]`);
                if (card) {
                    const categoria = card.getAttribute('data-categoria');
                    if (categoria !== 'Introdução') {
                        mostrarPlanoTesteAviso();
                        return;
                    }
                }
            }
            
            // Verificar se o módulo está bloqueado
            const card = document.querySelector(`.treinamento-card[data-modulo-id="${moduloId}"]`);
            const bloqueado = card && card.getAttribute('data-bloqueado') === 'true';
            
            if (bloqueado && !usuarioEhAdmin) {
                mostrarAcessoNegado();
                return;
            }
            
            const videoId = extrairIdYouTube(videoLink);
            const modal = document.getElementById('videoModal');
            const playerDiv = document.getElementById('videoPlayer');
            const titleElement = document.getElementById('videoModalTitle');
            const descElement = document.getElementById('videoModalDescription');
            
            // Decodificar strings
            titulo = titulo.replace(/\\'/g, "'").replace(/\\"/g, '"');
            descricao = descricao.replace(/\\'/g, "'").replace(/\\"/g, '"');
            
            // Atualizar informações do modal
            titleElement.textContent = titulo;
            descElement.textContent = descricao;
            
            // Limpar mensagens anteriores
            const existingInfo = descElement.querySelector('.modal-info');
            if (existingInfo) {
                existingInfo.remove();
            }
            
            // Adicionar mensagem informativa
            const infoDiv = document.createElement('div');
            infoDiv.className = 'modal-info';
            
            // Mensagem especial para módulos administrativos
            if (moduloId == 3) { // ID do módulo de administração
                infoDiv.innerHTML = '<i class="fas fa-user-shield"></i> <strong>Módulo Administrativo:</strong> Conteúdo restrito a administradores do sistema.';
            } else {
                infoDiv.innerHTML = '<i class="fas fa-info-circle"></i> Assista 95% do vídeo para concluir este módulo.';
            }
            
            // MODIFICAÇÃO: Mensagem adicional para plano teste
            if (planoTeste) {
                const card = document.querySelector(`.treinamento-card[data-modulo-id="${moduloId}"]`);
                if (card && card.getAttribute('data-categoria') === 'Introdução') {
                    infoDiv.innerHTML += '<br><i class="fas fa-flask"></i> <strong>Plano de Testes:</strong> Este módulo está disponível para avaliação.';
                }
            }
            
            descElement.appendChild(infoDiv);
            
            // Limpar player anterior
            playerDiv.innerHTML = '<div style="display: flex; align-items: center; justify-content: center; height: 100%; color: white;">Carregando vídeo...</div>';
            
            // Carregar API do YouTube se necessário
            carregarAPIYouTube();
            
            // Configurar callback para quando a API estiver pronta
            if (window.YT && window.YT.loaded) {
                criarPlayerYouTube(videoId, moduloId);
            } else {
                // Esperar a API carregar
                window.onYouTubeIframeAPIReady = function() {
                    criarPlayerYouTube(videoId, moduloId);
                };
            }
            
            // Mostrar modal
            modal.classList.add('active');
            document.body.style.overflow = 'hidden';
        }

        // Função para fechar o vídeo
        function fecharVideo() {
            const modal = document.getElementById('videoModal');
            
            // Parar monitoramento
            pararMonitoramentoProgresso();
            
            // Destruir player se existir
            if (player && player.destroy) {
                try {
                    player.destroy();
                } catch (e) {
                    console.error('Erro ao destruir player:', e);
                }
                player = null;
            }
            
            // Limpar player
            document.getElementById('videoPlayer').innerHTML = '';
            
            // Esconder barra de progresso
            document.getElementById('progressoContainer').style.display = 'none';
            
            // Resetar variáveis
            moduloAtualId = null;
            
            // Esconder modal
            modal.classList.remove('active');
            document.body.style.overflow = 'auto';
        }

        // Filtragem dos módulos de treinamento
        function filtrarTreinamentos(filtro) {
            const cards = document.querySelectorAll('.treinamento-card');
            const botoes = document.querySelectorAll('.btn-categoria');
            
            // Atualizar botões ativos
            botoes.forEach(botao => {
                botao.classList.remove('active');
                if ((filtro === 'todos' && botao.classList.contains('todos')) || 
                    botao.textContent.trim() === filtro ||
                    (filtro === 'concluidos' && botao.innerHTML.includes('fa-check-circle')) ||
                    (filtro === 'pendentes' && botao.innerHTML.includes('fa-clock'))) {
                    botao.classList.add('active');
                }
            });
            
            // Filtrar cards
            let cardsVisiveis = 0;
            cards.forEach(card => {
                const categoria = card.getAttribute('data-categoria');
                const concluido = card.getAttribute('data-concluido') === 'true';
                const bloqueado = card.getAttribute('data-bloqueado') === 'true';
                let mostrar = false;
                
                if (filtro === 'todos') {
                    mostrar = true;
                } else if (filtro === 'concluidos') {
                    mostrar = concluido && !bloqueado;
                } else if (filtro === 'pendentes') {
                    mostrar = !concluido && !bloqueado;
                } else {
                    mostrar = categoria === filtro;
                }
                
                if (mostrar) {
                    card.style.display = 'block';
                    cardsVisiveis++;
                    
                    // Animação de entrada
                    card.style.opacity = '0';
                    card.style.transform = 'translateY(20px)';
                    setTimeout(() => {
                        card.style.transition = 'opacity 0.4s ease, transform 0.4s ease';
                        card.style.opacity = '1';
                        card.style.transform = 'translateY(0)';
                    }, 100);
                } else {
                    card.style.display = 'none';
                }
            });
            
            // Mostrar mensagem se não houver resultados
            const grid = document.getElementById('treinamentoGrid');
            let noResults = grid.querySelector('.no-results');
            
            if (cardsVisiveis === 0) {
                if (!noResults) {
                    noResults = document.createElement('div');
                    noResults.className = 'no-results';
                    
                    let mensagem = '';
                    if (filtro === 'concluidos') {
                        mensagem = 'Você ainda não concluiu nenhum módulo de treinamento.';
                    } else if (filtro === 'pendentes') {
                        mensagem = 'Todos os módulos disponíveis para você já foram concluídos!';
                    } else {
                        mensagem = `Não há módulos de treinamento na categoria "${filtro}".`;
                    }
                    
                    noResults.innerHTML = `
                        <i class="fas fa-video-slash"></i>
                        <h3>Nenhum módulo encontrado</h3>
                        <p>${mensagem}</p>
                    `;
                    grid.appendChild(noResults);
                }
            } else if (noResults) {
                noResults.remove();
            }
        }
        
        // Inicializar página
        document.addEventListener('DOMContentLoaded', function() {
            const cards = document.querySelectorAll('.treinamento-card');
            
            // Animação de entrada
            cards.forEach((card, index) => {
                card.style.opacity = '0';
                card.style.transform = 'translateY(20px)';
                
                setTimeout(() => {
                    card.style.transition = 'opacity 0.5s ease, transform 0.5s ease';
                    card.style.opacity = '1';
                    card.style.transform = 'translateY(0)';
                }, 50 * index);
            });
            
            // Fechar modal com ESC
            document.addEventListener('keydown', function(e) {
                if (e.key === 'Escape') {
                    fecharVideo();
                }
            });

            // Fechar modal clicando fora
            document.getElementById('videoModal').addEventListener('click', function(e) {
                if (e.target === this) {
                    fecharVideo();
                }
            });
            
            // Carregar API do YouTube
            carregarAPIYouTube();
        });

        // Funções para o modal de alteração de senha (mantidas do original)
        function abrirModalAlterarSenha() {
            document.getElementById('modalSenha').style.display = 'flex';
        }

        function fecharModalAlterarSenha() {
            document.getElementById('modalSenha').style.display = 'none';
            document.getElementById('mensagemSenha').textContent = '';
            document.getElementById('formAlterarSenha').reset();
        }

        function alterarSenha(event) {
            event.preventDefault();
            
            const senhaAtual = document.getElementById('senhaAtual').value;
            const novaSenha = document.getElementById('novaSenha').value;
            const confirmarSenha = document.getElementById('confirmarSenha').value;
            const mensagemElement = document.getElementById('mensagemSenha');
            const btnSubmit = event.target.querySelector('button[type="submit"]');
            
            // Validações
            if (novaSenha !== confirmarSenha) {
                mensagemElement.textContent = 'As senhas não coincidem!';
                mensagemElement.style.color = 'red';
                return;
            }
            
            if (novaSenha.length < 6) {
                mensagemElement.textContent = 'A senha deve ter pelo menos 6 caracteres!';
                mensagemElement.style.color = 'red';
                return;
            }
            
            // Desabilitar botão durante a requisição
            btnSubmit.disabled = true;
            btnSubmit.innerHTML = '<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> Processando...';
            
            // Enviar requisição
            fetch('alterar_senha.php', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content
                },
                body: JSON.stringify({
                    senhaAtual: senhaAtual,
                    novaSenha: novaSenha
                })
            })
            .then(response => {
                if (!response.ok) {
                    throw new Error('Erro na requisição');
                }
                return response.json();
            })
            .then(data => {
                if (data.success) {
                    mensagemElement.textContent = data.message || 'Senha alterada com sucesso!';
                    mensagemElement.style.color = 'green';
                    setTimeout(fecharModalAlterarSenha, 2000);
                } else {
                    throw new Error(data.message || 'Erro ao alterar senha');
                }
            })
            .catch(error => {
                console.error('Erro:', error);
                mensagemElement.textContent = error.message || 'Erro ao processar a solicitação!';
                mensagemElement.style.color = 'red';
            })
            .finally(() => {
                btnSubmit.disabled = false;
                btnSubmit.textContent = 'Alterar Senha';
            });
        }

        function abrirTelefone() {
            window.open('webfone.php', 'TelefoneVirtual', 'width=400,height=600,resizable=no');
        }
    </script>
</body>
</html>