@extends('adminlte::page')

@section('title', 'Dashboard de Pesquisas')

@section('content_header')
    <h1>
        <i class="fas fa-chart-bar"></i> 
        Dashboard de Pesquisas
    </h1>
@stop

@section('content')
    <div class="row">
        <div class="col-12">
            <!-- Filtros -->
            <div class="card">
                <div class="card-header">
                    <h3 class="card-title">
                        <i class="fas fa-filter"></i> 
                        Filtros
                    </h3>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-3">
                            <label for="dataInicio" class="form-label">Data Início:</label>
                            <input type="date" id="dataInicio" class="form-control" value="{{ date('Y-m-d', strtotime('-30 days')) }}">
                        </div>
                        <div class="col-md-3">
                            <label for="dataFim" class="form-label">Data Fim:</label>
                            <input type="date" id="dataFim" class="form-control" value="{{ date('Y-m-d') }}">
                        </div>
                        <div class="col-md-3">
                            <label for="pesquisaSelecionada" class="form-label">Pesquisa:</label>
                            <select id="pesquisaSelecionada" class="form-control">
                                <option value="">Todas as Pesquisas</option>
                            </select>
                        </div>
                        <div class="col-md-3">
                            <label class="form-label">&nbsp;</label>
                            <button id="btnCarregar" class="btn btn-primary d-block w-100">
                                <i class="fas fa-filter"></i> Carregar Dados
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Cards de Estatísticas -->
    <div class="row" id="statsCards" style="display: none;">
        <div class="col-lg-3 col-md-6 col-sm-6 col-12">
            <div class="info-box">
                <span class="info-box-icon bg-info elevation-1">
                    <i class="fas fa-poll"></i>
                </span>
                <div class="info-box-content">
                    <span class="info-box-text">Total de Pesquisas</span>
                    <span class="info-box-number" id="totalPesquisas">0</span>
                </div>
            </div>
        </div>
        <div class="col-lg-3 col-md-6 col-sm-6 col-12">
            <div class="info-box">
                <span class="info-box-icon bg-success elevation-1">
                    <i class="fas fa-question-circle"></i>
                </span>
                <div class="info-box-content">
                    <span class="info-box-text">Total de Questões</span>
                    <span class="info-box-number" id="totalQuestoes">0</span>
                </div>
            </div>
        </div>
        <div class="col-lg-3 col-md-6 col-sm-6 col-12">
            <div class="info-box">
                <span class="info-box-icon bg-warning elevation-1">
                    <i class="fas fa-comments"></i>
                </span>
                <div class="info-box-content">
                    <span class="info-box-text">Total de Respostas</span>
                    <span class="info-box-number" id="totalRespostas">0</span>
                </div>
            </div>
        </div>
        <div class="col-lg-3 col-md-6 col-sm-6 col-12">
            <div class="info-box">
                <span class="info-box-icon bg-danger elevation-1">
                    <i class="fas fa-users"></i>
                </span>
                <div class="info-box-content">
                    <span class="info-box-text">Total de Respondentes</span>
                    <span class="info-box-number" id="totalRespondentes">0</span>
                </div>
            </div>
        </div>
    </div>

    <!-- Gráfico -->
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    <h3 class="card-title">
                        <i class="fas fa-chart-column"></i> 
                        Usuários que Responderam por Mês
                    </h3>
                    <div class="card-tools">
                        <button type="button" class="btn btn-tool" data-card-widget="collapse">
                            <i class="fas fa-minus"></i>
                        </button>
                        <button type="button" class="btn btn-tool" data-card-widget="remove">
                            <i class="fas fa-times"></i>
                        </button>
                    </div>
                </div>
                <div class="card-body">
                    <div class="chart-container" style="position: relative; height: 400px;">
                        <canvas id="graficoMensal" width="400" height="200"></canvas>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Gráficos por Questão -->
    <div class="row" id="graficosPorQuestao" style="display: none;">
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    <h3 class="card-title">
                        <i class="fas fa-chart-bar"></i> 
                        Gráficos por Questão
                    </h3>
                    <div class="card-tools">
                        <button type="button" class="btn btn-tool" data-card-widget="collapse">
                            <i class="fas fa-minus"></i>
                        </button>
                    </div>
                </div>
                <div class="card-body" id="containerGraficosQuestoes">
                    <p class="text-muted text-center">Carregando gráficos...</p>
                </div>
            </div>
        </div>
    </div>

    <!-- Tabela de Dados -->
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    <h3 class="card-title">
                        <i class="fas fa-table"></i> 
                        Dados Mensais - Usuários que Responderam
                    </h3>
                    <div class="card-tools">
                        <button type="button" class="btn btn-tool" onclick="exportarDados()">
                            <i class="fas fa-download"></i> Exportar
                        </button>
                        <button type="button" class="btn btn-tool" onclick="atualizarDados()">
                            <i class="fas fa-sync-alt"></i> Atualizar
                        </button>
                        <button type="button" class="btn btn-tool" data-card-widget="collapse">
                            <i class="fas fa-minus"></i>
                        </button>
                    </div>
                </div>
                <div class="card-body">
                    <div class="table-responsive">
                        <table id="tabelaDados" class="table table-bordered table-striped table-hover">
                            <thead>
                                <tr>
                                    <th>Mês</th>
                                    <th>Usuários</th>
                                    <th>Respostas</th>
                                    <th>Média por Usuário</th>
                                    <th>Ações</th>
                                </tr>
                            </thead>
                            <tbody>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Modal de Detalhes das Respostas -->
    <div class="modal fade" id="modalDetalhesRespostas" tabindex="-1" role="dialog">
        <div class="modal-dialog modal-xl" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title">
                        <i class="fas fa-list-alt"></i> 
                        Detalhes das Respostas - <span id="modalMesNome"></span>
                    </h4>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="row mb-3">
                        <div class="col-md-6">
                            <div class="alert alert-info mb-0">
                                <i class="fas fa-info-circle"></i>
                                Total de respostas: <strong id="modalTotalRespostas">0</strong>
                            </div>
                        </div>
                        <div class="col-md-6 text-right">
                            <div class="btn-group" role="group">
                                <button type="button" class="btn btn-sm btn-secondary active" id="btnVisualizacaoLista" onclick="alterarVisualizacao('lista')">
                                    <i class="fas fa-list"></i> Lista
                                </button>
                                <button type="button" class="btn btn-sm btn-secondary" id="btnVisualizacaoQuestao" onclick="alterarVisualizacao('questao')">
                                    <i class="fas fa-question-circle"></i> Por Questão
                                </button>
                                <button type="button" class="btn btn-sm btn-secondary" id="btnVisualizacaoResposta" onclick="alterarVisualizacao('resposta')">
                                    <i class="fas fa-check-circle"></i> Por Resposta
                                </button>
                            </div>
                        </div>
                    </div>
                    <div class="table-responsive">
                        <table id="tabelaDetalhes" class="table table-bordered table-striped table-hover table-sm">
                            <thead id="theadDetalhes">
                                <tr>
                                    <th>Data/Hora</th>
                                    <th>Carteira</th>
                                    <th>Pesquisa</th>
                                    <th>Questão</th>
                                    <th>Resposta</th>
                                </tr>
                            </thead>
                            <tbody id="tbodyDetalhes">
                            </tbody>
                        </table>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Fechar</button>
                </div>
            </div>
        </div>
    </div>
@stop

@section('css')
    <style>
        .chart-container {
            position: relative;
            height: 400px;
        }
        .info-box {
            display: block;
            min-height: 90px;
            background: #fff;
            width: 100%;
            box-shadow: 0 1px 1px rgba(0,0,0,0.1);
            border-radius: 2px;
            margin-bottom: 15px;
        }
        .info-box-icon {
            border-top-left-radius: 2px;
            border-top-right-radius: 0;
            border-bottom-right-radius: 0;
            border-bottom-left-radius: 2px;
            display: block;
            float: left;
            height: 90px;
            width: 90px;
            text-align: center;
            font-size: 45px;
            line-height: 90px;
            background: rgba(0,0,0,0.2);
        }
        .info-box-content {
            padding: 5px 10px;
            margin-left: 90px;
        }
        .info-box-number {
            display: block;
            font-weight: bold;
            font-size: 18px;
        }
        .info-box-text {
            display: block;
            font-size: 14px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        /* Estilos para visualização por questão */
        .questao-header {
            cursor: pointer;
        }
        .questao-header:hover {
            background-color: #f8f9fa;
        }
        .expandir-questao {
            color: #007bff;
        }
        .expandir-questao:hover {
            color: #0056b3;
        }
        .questao-detalhes td {
            padding: 0 !important;
        }
        
        /* Forçar cards em horizontal */
        #statsCards .col-lg-3,
        #statsCards .col-md-6,
        #statsCards .col-sm-6,
        #statsCards .col-12 {
            float: left !important;
            width: 25% !important;
            padding-left: 15px;
            padding-right: 15px;
        }
        
        @media (max-width: 768px) {
            #statsCards .col-lg-3,
            #statsCards .col-md-6,
            #statsCards .col-sm-6,
            #statsCards .col-12 {
                width: 50% !important;
            }
        }
        
        @media (max-width: 576px) {
            #statsCards .col-lg-3,
            #statsCards .col-md-6,
            #statsCards .col-sm-6,
            #statsCards .col-12 {
                width: 100% !important;
            }
        }
    </style>
@stop

@section('js')
    <script src="https://cdn.jsdelivr.net/npm/chart.js@3.9.1/dist/chart.min.js"></script>
    <script>
        let grafico = null;

        // Carregar pesquisas no select
        async function carregarPesquisas() {
            try {
                const response = await fetch('/sigo-laravel/public/api/pesquisas/ativas');
                const result = await response.json();
                
                console.log('Resposta da API de pesquisas:', result);
                
                const select = document.getElementById('pesquisaSelecionada');
                select.innerHTML = '<option value="">Todas as Pesquisas</option>';
                
                if (result.success && result.data) {
                    result.data.forEach(pesquisa => {
                        const option = document.createElement('option');
                        option.value = pesquisa.id;
                        option.textContent = pesquisa.pes_descricao;
                        select.appendChild(option);
                    });
                } else {
                    console.error('Erro na resposta da API:', result.error || result.message);
                }
            } catch (error) {
                console.error('Erro ao carregar pesquisas:', error);
            }
        }

        // Carregar dados do gráfico
        async function carregarDados() {
            const dataInicio = document.getElementById('dataInicio').value;
            const dataFim = document.getElementById('dataFim').value;
            const pesquisaSelecionada = document.getElementById('pesquisaSelecionada').value;

            try {
                const params = new URLSearchParams({
                    data_inicio: dataInicio,
                    data_fim: dataFim,
                    pesquisa: pesquisaSelecionada
                });

                // Carregar dados do gráfico
                const responseGrafico = await fetch(`/sigo-laravel/public/api/pesquisas/dados-mensais?${params}`);
                const dadosGrafico = await responseGrafico.json();

                // Carregar estatísticas
                const responseStats = await fetch(`/sigo-laravel/public/api/pesquisas/estatisticas?${params}`);
                const dadosStats = await responseStats.json();

                // Carregar dados para gráficos por questão
                const responseGraficosQuestao = await fetch(`/sigo-laravel/public/api/pesquisas/graficos-por-questao?${params}`);
                const dadosGraficosQuestao = await responseGraficosQuestao.json();

                console.log('Dados do gráfico:', dadosGrafico);
                console.log('Estatísticas:', dadosStats);
                console.log('Gráficos por questão:', dadosGraficosQuestao);
                
                if (dadosGrafico.success && dadosGrafico.data) {
                    criarGrafico(dadosGrafico.data);
                    preencherTabela(dadosGrafico.data);
                } else {
                    console.error('Erro na resposta do gráfico:', dadosGrafico.message);
                    alert('Erro ao carregar dados do gráfico: ' + (dadosGrafico.message || 'Erro desconhecido'));
                }

                if (dadosStats.success && dadosStats.data) {
                    atualizarStats(dadosStats.data);
                } else {
                    console.error('Erro na resposta das estatísticas:', dadosStats.message);
                }

                if (dadosGraficosQuestao.success && dadosGraficosQuestao.data) {
                    criarGraficosPorQuestao(dadosGraficosQuestao.data);
                } else {
                    console.error('Erro na resposta dos gráficos por questão:', dadosGraficosQuestao.message);
                }
            } catch (error) {
                console.error('Erro ao carregar dados:', error);
                alert('Erro ao carregar dados: ' + error.message);
            }
        }

        // Criar gráfico
        function criarGrafico(dados) {
            const ctx = document.getElementById('graficoMensal').getContext('2d');
            
            // Destruir gráfico existente
            if (grafico) {
                grafico.destroy();
            }

            const labels = dados.map(item => item.mes_nome);
            const values = dados.map(item => item.usuarios_responderam);

            grafico = new Chart(ctx, {
                type: 'bar',
                data: {
                    labels: labels,
                    datasets: [{
                        label: 'Usuários que Responderam',
                        data: values,
                        backgroundColor: 'rgba(54, 162, 235, 0.8)',
                        borderColor: 'rgba(54, 162, 235, 1)',
                        borderWidth: 1
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    scales: {
                        y: {
                            beginAtZero: true
                        }
                    }
                }
            });
        }

        // Preencher tabela
        function preencherTabela(dados) {
            const tbody = document.querySelector('#tabelaDados tbody');
            tbody.innerHTML = '';

            dados.forEach(item => {
                const row = document.createElement('tr');
                row.innerHTML = `
                    <td>${item.mes_nome}</td>
                    <td>${item.usuarios_responderam}</td>
                    <td>${item.total_respostas}</td>
                    <td>${item.media_respostas_por_usuario}</td>
                    <td>
                        <button class="btn btn-sm btn-info" onclick="verDetalhes('${item.ano_mes}', '${item.mes_nome}')" title="Ver detalhes das respostas">
                            <i class="fas fa-eye"></i> Detalhes
                        </button>
                    </td>
                `;
                tbody.appendChild(row);
            });
        }

        // Variável global para armazenar dados das respostas
        let dadosRespostas = [];

        // Ver detalhes das respostas
        async function verDetalhes(anoMes, mesNome) {
            const dataInicio = document.getElementById('dataInicio').value;
            const dataFim = document.getElementById('dataFim').value;
            const pesquisaSelecionada = document.getElementById('pesquisaSelecionada').value;

            // Atualizar título do modal
            document.getElementById('modalMesNome').textContent = mesNome;

            // Mostrar modal com loading
            $('#modalDetalhesRespostas').modal('show');
            const tbody = document.getElementById('tbodyDetalhes');
            tbody.innerHTML = '<tr><td colspan="5" class="text-center"><i class="fas fa-spinner fa-spin"></i> Carregando...</td></tr>';

            // Resetar botões de visualização
            document.getElementById('btnVisualizacaoLista').classList.add('active');
            document.getElementById('btnVisualizacaoQuestao').classList.remove('active');
            document.getElementById('btnVisualizacaoResposta').classList.remove('active');

            try {
                const params = new URLSearchParams({
                    ano_mes: anoMes,
                    data_inicio: dataInicio,
                    data_fim: dataFim,
                    pesquisa: pesquisaSelecionada
                });

                const response = await fetch(`/sigo-laravel/public/api/pesquisas/detalhes-respostas?${params}`);
                const resultado = await response.json();

                if (resultado.success && resultado.data) {
                    // Armazenar dados globalmente
                    dadosRespostas = resultado.data;

                    // Atualizar total
                    document.getElementById('modalTotalRespostas').textContent = resultado.total || resultado.data.length;

                    // Exibir visualização padrão (lista)
                    exibirVisualizacaoLista();
                } else {
                    tbody.innerHTML = '<tr><td colspan="5" class="text-center text-danger">Erro ao carregar detalhes: ' + (resultado.message || 'Erro desconhecido') + '</td></tr>';
                }
            } catch (error) {
                console.error('Erro ao carregar detalhes:', error);
                tbody.innerHTML = '<tr><td colspan="5" class="text-center text-danger">Erro ao carregar detalhes: ' + error.message + '</td></tr>';
            }
        }

        // Alterar visualização
        function alterarVisualizacao(tipo) {
            // Atualizar botões
            document.getElementById('btnVisualizacaoLista').classList.remove('active');
            document.getElementById('btnVisualizacaoQuestao').classList.remove('active');
            document.getElementById('btnVisualizacaoResposta').classList.remove('active');
            document.getElementById('btnVisualizacao' + tipo.charAt(0).toUpperCase() + tipo.slice(1)).classList.add('active');

            // Exibir visualização correspondente
            switch(tipo) {
                case 'lista':
                    exibirVisualizacaoLista();
                    break;
                case 'questao':
                    exibirVisualizacaoPorQuestao();
                    break;
                case 'resposta':
                    exibirVisualizacaoPorResposta();
                    break;
            }
        }

        // Exibir visualização em lista
        function exibirVisualizacaoLista() {
            const thead = document.getElementById('theadDetalhes');
            const tbody = document.getElementById('tbodyDetalhes');

            thead.innerHTML = `
                <tr>
                    <th>Data/Hora</th>
                    <th>Carteira</th>
                    <th>Pesquisa</th>
                    <th>Questão</th>
                    <th>Resposta</th>
                </tr>
            `;

            tbody.innerHTML = '';
            
            if (dadosRespostas.length === 0) {
                tbody.innerHTML = '<tr><td colspan="5" class="text-center">Nenhuma resposta encontrada</td></tr>';
            } else {
                dadosRespostas.forEach(resposta => {
                    const row = document.createElement('tr');
                    row.innerHTML = `
                        <td>${resposta.data_envio || 'N/A'}</td>
                        <td>${resposta.carteira || 'N/A'}</td>
                        <td>${resposta.pesquisa_descricao || 'N/A'}</td>
                        <td>
                            ${resposta.questao_numero ? 'Q' + resposta.questao_numero + ': ' : ''}
                            ${resposta.questao_descricao || 'N/A'}
                        </td>
                        <td>${resposta.opcao_descricao || 'N/A'}</td>
                    `;
                    tbody.appendChild(row);
                });
            }
        }

        // Exibir visualização agrupada por questão
        function exibirVisualizacaoPorQuestao() {
            const thead = document.getElementById('theadDetalhes');
            const tbody = document.getElementById('tbodyDetalhes');

            thead.innerHTML = `
                <tr>
                    <th style="width: 5%;"></th>
                    <th>Questão</th>
                    <th>Respostas</th>
                    <th>Total</th>
                </tr>
            `;

            tbody.innerHTML = '';

            if (dadosRespostas.length === 0) {
                tbody.innerHTML = '<tr><td colspan="4" class="text-center">Nenhuma resposta encontrada</td></tr>';
                return;
            }

            // Agrupar por questão
            const agrupado = {};
            dadosRespostas.forEach(resposta => {
                const questaoKey = resposta.questao_id || 'sem_id';
                const questaoLabel = (resposta.questao_numero ? 'Q' + resposta.questao_numero + ': ' : '') + (resposta.questao_descricao || 'N/A');
                
                if (!agrupado[questaoKey]) {
                    agrupado[questaoKey] = {
                        questao: questaoLabel,
                        respostas: [],
                        contadores: {}
                    };
                }
                agrupado[questaoKey].respostas.push(resposta);
                
                // Contar respostas
                const respostaDesc = resposta.opcao_descricao || 'N/A';
                agrupado[questaoKey].contadores[respostaDesc] = (agrupado[questaoKey].contadores[respostaDesc] || 0) + 1;
            });

            // Exibir agrupado
            Object.values(agrupado).forEach((grupo, index) => {
                const questaoId = 'questao_' + index;
                
                // Criar string de contadores (ex: "ótimo 1, bom 3, regular 7")
                const contadoresStr = Object.entries(grupo.contadores)
                    .map(([resposta, qtd]) => `${resposta} ${qtd}`)
                    .join(', ');
                
                // Linha principal (colapsável)
                const rowPrincipal = document.createElement('tr');
                rowPrincipal.className = 'questao-header';
                rowPrincipal.setAttribute('data-questao-id', questaoId);
                rowPrincipal.innerHTML = `
                    <td>
                        <button class="btn btn-sm btn-link p-0 expandir-questao" onclick="toggleDetalhesQuestao('${questaoId}')" title="Expandir/Colapsar">
                            <i class="fas fa-chevron-right" id="icon_${questaoId}"></i>
                        </button>
                    </td>
                    <td><strong>${grupo.questao}</strong></td>
                    <td>${contadoresStr || 'N/A'}</td>
                    <td><span class="badge badge-primary">${grupo.respostas.length}</span></td>
                `;
                tbody.appendChild(rowPrincipal);

                // Linha de detalhes (oculta inicialmente)
                const rowDetalhes = document.createElement('tr');
                rowDetalhes.className = 'questao-detalhes d-none';
                rowDetalhes.id = questaoId;
                const colDetalhes = document.createElement('td');
                colDetalhes.colSpan = 4;
                
                // Criar tabela interna com detalhes
                let htmlDetalhes = '<div class="p-3 bg-light"><table class="table table-sm table-bordered mb-0">';
                htmlDetalhes += '<thead><tr><th>Data/Hora</th><th>Carteira</th><th>Resposta</th></tr></thead><tbody>';
                
                grupo.respostas.forEach(resposta => {
                    htmlDetalhes += `
                        <tr>
                            <td>${resposta.data_envio || 'N/A'}</td>
                            <td>${resposta.carteira || 'N/A'}</td>
                            <td>${resposta.opcao_descricao || 'N/A'}</td>
                        </tr>
                    `;
                });
                
                htmlDetalhes += '</tbody></table></div>';
                colDetalhes.innerHTML = htmlDetalhes;
                rowDetalhes.appendChild(colDetalhes);
                tbody.appendChild(rowDetalhes);
            });
        }

        // Toggle detalhes da questão
        function toggleDetalhesQuestao(questaoId) {
            const rowDetalhes = document.getElementById(questaoId);
            const icon = document.getElementById('icon_' + questaoId);
            
            if (rowDetalhes.classList.contains('d-none')) {
                rowDetalhes.classList.remove('d-none');
                icon.classList.remove('fa-chevron-right');
                icon.classList.add('fa-chevron-down');
            } else {
                rowDetalhes.classList.add('d-none');
                icon.classList.remove('fa-chevron-down');
                icon.classList.add('fa-chevron-right');
            }
        }

        // Exibir visualização agrupada por resposta
        function exibirVisualizacaoPorResposta() {
            const thead = document.getElementById('theadDetalhes');
            const tbody = document.getElementById('tbodyDetalhes');

            thead.innerHTML = `
                <tr>
                    <th>Resposta</th>
                    <th>Total</th>
                    <th>Questões</th>
                </tr>
            `;

            tbody.innerHTML = '';

            if (dadosRespostas.length === 0) {
                tbody.innerHTML = '<tr><td colspan="3" class="text-center">Nenhuma resposta encontrada</td></tr>';
                return;
            }

            // Agrupar por resposta (opção)
            const agrupado = {};
            dadosRespostas.forEach(resposta => {
                const respostaKey = resposta.opcao_descricao || 'N/A';
                
                if (!agrupado[respostaKey]) {
                    agrupado[respostaKey] = {
                        resposta: respostaKey,
                        questoes: new Set(),
                        total: 0
                    };
                }
                const questaoLabel = (resposta.questao_numero ? 'Q' + resposta.questao_numero + ': ' : '') + (resposta.questao_descricao || 'N/A');
                agrupado[respostaKey].questoes.add(questaoLabel);
                agrupado[respostaKey].total++;
            });

            // Ordenar por total (decrescente)
            const ordenado = Object.values(agrupado).sort((a, b) => b.total - a.total);

            // Exibir agrupado
            ordenado.forEach(grupo => {
                const row = document.createElement('tr');
                const questoesList = Array.from(grupo.questoes).join(', ');
                
                row.innerHTML = `
                    <td><strong>${grupo.resposta}</strong></td>
                    <td><span class="badge badge-success">${grupo.total}</span></td>
                    <td>${questoesList || 'N/A'}</td>
                `;
                tbody.appendChild(row);
            });
        }

        // Atualizar estatísticas
        function atualizarStats(dados) {
            document.getElementById('totalPesquisas').textContent = dados.total_pesquisas || 0;
            document.getElementById('totalQuestoes').textContent = dados.total_questoes || 0;
            document.getElementById('totalRespostas').textContent = dados.total_respostas || 0;
            document.getElementById('totalRespondentes').textContent = dados.total_respondentes || 0;
            
            document.getElementById('statsCards').style.display = 'block';
        }

        // Exportar dados
        function exportarDados() {
            const tbody = document.querySelector('#tabelaDados tbody');
            const rows = Array.from(tbody.querySelectorAll('tr'));
            
            if (rows.length === 0) {
                alert('Nenhum dado para exportar');
                return;
            }
            
            let csv = 'Mês,Usuários,Respostas,Média por Usuário\n';
            rows.forEach(row => {
                const cells = Array.from(row.querySelectorAll('td'));
                // Ignorar a última coluna (Ações)
                const dataCells = cells.slice(0, -1);
                const rowData = dataCells.map(cell => cell.textContent.replace(/,/g, ';'));
                csv += rowData.join(',') + '\n';
            });
            
            const blob = new Blob([csv], { type: 'text/csv;charset=utf-8;' });
            const link = document.createElement('a');
            const url = URL.createObjectURL(blob);
            link.setAttribute('href', url);
            link.setAttribute('download', 'dados_pesquisas_' + new Date().toISOString().split('T')[0] + '.csv');
            link.style.visibility = 'hidden';
            document.body.appendChild(link);
            link.click();
            document.body.removeChild(link);
        }

        // Criar gráficos por questão
        function criarGraficosPorQuestao(dados) {
            const container = document.getElementById('containerGraficosQuestoes');
            const graficosPorQuestao = document.getElementById('graficosPorQuestao');
            
            if (!dados || dados.length === 0) {
                container.innerHTML = '<p class="text-muted text-center">Nenhum dado disponível para exibir gráficos.</p>';
                graficosPorQuestao.style.display = 'none';
                return;
            }

            graficosPorQuestao.style.display = 'block';
            container.innerHTML = '';

            // Cores para as barras
            const cores = [
                'rgba(54, 162, 235, 0.8)',
                'rgba(75, 192, 192, 0.8)',
                'rgba(255, 99, 132, 0.8)',
                'rgba(255, 206, 86, 0.8)',
                'rgba(153, 102, 255, 0.8)',
                'rgba(255, 159, 64, 0.8)',
                'rgba(199, 199, 199, 0.8)',
                'rgba(83, 102, 255, 0.8)'
            ];

            dados.forEach((questao, index) => {
                // Criar card para cada questão
                const cardDiv = document.createElement('div');
                cardDiv.className = 'mb-4';
                cardDiv.innerHTML = `
                    <div class="card">
                        <div class="card-header">
                            <h5 class="card-title mb-0">
                                <i class="fas fa-question-circle"></i> ${questao.questao_descricao}
                                <small class="text-muted">(Total: ${questao.total} respostas)</small>
                            </h5>
                        </div>
                        <div class="card-body">
                            <div class="chart-container-questao" style="position: relative; height: 300px;">
                                <canvas id="graficoQuestao_${questao.questao_id || index}"></canvas>
                            </div>
                        </div>
                    </div>
                `;
                container.appendChild(cardDiv);

                // Preparar dados para o gráfico
                const labels = questao.respostas.map(r => r.resposta);
                const valores = questao.respostas.map(r => r.quantidade);
                const percentuais = questao.respostas.map(r => r.percentual);
                const coresBarras = questao.respostas.map((_, i) => cores[i % cores.length]);

                // Criar gráfico
                const ctx = document.getElementById(`graficoQuestao_${questao.questao_id || index}`).getContext('2d');
                new Chart(ctx, {
                    type: 'bar',
                    data: {
                        labels: labels,
                        datasets: [{
                            label: 'Quantidade de Respostas',
                            data: valores,
                            backgroundColor: coresBarras,
                            borderColor: coresBarras.map(c => c.replace('0.8', '1')),
                            borderWidth: 1
                        }]
                    },
                    options: {
                        responsive: true,
                        maintainAspectRatio: false,
                        plugins: {
                            legend: {
                                display: false
                            },
                            tooltip: {
                                callbacks: {
                                    label: function(context) {
                                        const index = context.dataIndex;
                                        const quantidade = valores[index];
                                        const percentual = percentuais[index];
                                        return `${quantidade} resposta(s) (${percentual}%)`;
                                    }
                                }
                            }
                        },
                        scales: {
                            y: {
                                beginAtZero: true,
                                ticks: {
                                    stepSize: 1
                                }
                            }
                        },
                        scales: {
                            y: {
                                beginAtZero: true,
                                ticks: {
                                    stepSize: 1
                                }
                            }
                        }
                    }
                });
            });
        }

        // Atualizar dados
        function atualizarDados() {
            carregarDados();
        }

        // Event listeners
        document.getElementById('btnCarregar').addEventListener('click', carregarDados);
        
        // Carregar dados iniciais
        document.addEventListener('DOMContentLoaded', function() {
            carregarPesquisas();
            carregarDados();
        });
    </script>
@stop