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

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

// Configura o fuso horário
date_default_timezone_set('America/Sao_Paulo');

// Consulta as atividades com informações do cliente e usuário
$sql = "SELECT 
            a.id,
            a.descricao,
            a.data_agendada,
            a.data_cadastro,
            a.data_conclusao,
            a.concluida,
            c.Nome_Cliente AS cliente_nome,
            u.nome AS usuario_nome
        FROM atividades a
        JOIN clientes c ON a.cliente_id = c.id
        JOIN usuarios u ON a.usuario_id = u.id
        ORDER BY a.data_cadastro DESC";

$stmt = $conn->prepare($sql);
$stmt->execute();
$atividades = $stmt->get_result()->fetch_all(MYSQLI_ASSOC);
$stmt->close();

// Estatísticas para gráfico de status
$sqlStatus = "SELECT 
                CASE 
                    WHEN concluida = 1 THEN 'Concluída'
                    WHEN data_agendada < NOW() AND concluida = 0 THEN 'Atrasada'
                    ELSE 'Pendente'
                END AS status,
                COUNT(*) AS total
              FROM atividades
              GROUP BY status";
$stmt = $conn->prepare($sqlStatus);
$stmt->execute();
$statusData = $stmt->get_result()->fetch_all(MYSQLI_ASSOC);
$stmt->close();

// Estatísticas para gráfico por usuário e status
$sqlUserStatus = "SELECT u.nome AS usuario_nome,
                         CASE 
                            WHEN a.concluida = 1 THEN 'Concluída'
                            WHEN a.data_agendada < NOW() AND a.concluida = 0 THEN 'Atrasada'
                            ELSE 'Pendente'
                         END AS status,
                         COUNT(*) AS total
                  FROM atividades a
                  JOIN usuarios u ON a.usuario_id = u.id
                  GROUP BY usuario_nome, status
                  ORDER BY usuario_nome";
$stmt = $conn->prepare($sqlUserStatus);
$stmt->execute();
$userStatusData = $stmt->get_result()->fetch_all(MYSQLI_ASSOC);
$stmt->close();
?>

<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Consulta de Atividades</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" />
    <link rel="stylesheet" href="https://cdn.datatables.net/1.11.5/css/jquery.dataTables.min.css" />
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0; padding: 0;
            background-color: #f5f5f5;
        }
        .header {
            background-color: #2c3e50;
            color: white;
            padding: 15px 20px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .container {
            max-width: 1200px;
            margin: 20px auto;
            padding: 20px;
            background: white;
            border-radius: 8px;
            box-shadow: 0 0 10px rgba(0,0,0,0.1);
        }
        h1, h3 {
            color: #2c3e50;
            margin-top: 0;
        }
        table {
            width: 100%;
            border-collapse: collapse;
        }
        th, td {
            padding: 12px 15px;
            text-align: left;
            border-bottom: 1px solid #ddd;
        }
        th {
            background-color: #3498db;
            color: white;
        }
        tr:hover {
            background-color: #f5f5f5;
        }
        .status {
            display: inline-block;
            padding: 5px 10px;
            border-radius: 3px;
            font-weight: bold;
        }
        .concluida {
            background-color: #2ecc71;
            color: white;
        }
        .pendente {
            background-color: #f39c12;
            color: white;
        }
        .atrasada {
            background-color: #e74c3c;
            color: white;
        }
        .btn-voltar {
            display: inline-block;
            margin-bottom: 20px;
            padding: 10px 15px;
            background-color: #7f8c8d;
            color: white;
            text-decoration: none;
            border-radius: 4px;
        }
        .btn-voltar:hover {
            opacity: 0.9;
        }
        .data-table {
            margin-top: 20px;
        }
        .filtros {
            background-color: #f8f9fa;
            padding: 15px;
            border-radius: 5px;
            margin-bottom: 20px;
        }
    </style>
</head>
<body>
    <div class="header">
        <h2>Consulta de Atividades</h2>
        <div style="font-weight: bold;">
            Olá, <?= htmlspecialchars($_SESSION['nome_usuario'] ?? 'Usuário') ?>
            <a href="logout.php" style="color: white; margin-left: 15px;">Sair</a>
        </div>
    </div>

    <div class="container">
        <a href="index.php" class="btn-voltar">
            <i class="fas fa-arrow-left"></i> Voltar
        </a>

        <h1><i class="fas fa-tasks"></i> Atividades Cadastradas</h1>

        <!-- Gráficos -->
        <div style="display: flex; gap: 30px; margin-bottom: 40px; flex-wrap: wrap;">
            <div style="flex: 1; min-width: 300px;">
                <h3>Atividades por Status</h3>
                <canvas id="chartStatus"></canvas>
            </div>
            <div style="flex: 1; min-width: 400px;">
                <h3>Atividades por Usuário e Status</h3>
                <canvas id="chartUserStatus"></canvas>
            </div>
        </div>

        <div class="filtros">
            <form method="GET" id="filtro-form">
                <div style="display: flex; gap: 15px; flex-wrap: wrap;">
                    <div>
                        <label for="status">Status:</label>
                        <select name="status" id="status" class="filtro-select">
                            <option value="">Todos</option>
                            <option value="concluida">Concluídas</option>
                            <option value="pendente">Pendentes</option>
                            <option value="atrasada">Atrasadas</option>
                        </select>
                    </div>

                    <div>
                        <label for="usuario">Usuário:</label>
                        <select name="usuario" id="usuario" class="filtro-select">
                            <option value="">Todos</option>
                            <?php
                            $sqlUsuarios = "SELECT id, nome FROM usuarios ORDER BY nome";
                            $stmt = $conn->prepare($sqlUsuarios);
                            $stmt->execute();
                            $usuarios = $stmt->get_result()->fetch_all(MYSQLI_ASSOC);
                            $stmt->close();
                            foreach ($usuarios as $usuario) {
                                echo "<option value=\"{$usuario['id']}\">" . htmlspecialchars($usuario['nome']) . "</option>";
                            }
                            ?>
                        </select>
                    </div>

                    <div>
                        <label for="cliente">Cliente:</label>
                        <select name="cliente" id="cliente" class="filtro-select">
                            <option value="">Todos</option>
                            <?php
                            $sqlClientes = "SELECT id, Nome_Cliente FROM clientes ORDER BY Nome_Cliente";
                            $stmt = $conn->prepare($sqlClientes);
                            $stmt->execute();
                            $clientes = $stmt->get_result()->fetch_all(MYSQLI_ASSOC);
                            $stmt->close();
                            foreach ($clientes as $cliente) {
                                echo "<option value=\"{$cliente['id']}\">" . htmlspecialchars($cliente['Nome_Cliente']) . "</option>";
                            }
                            ?>
                        </select>
                    </div>

                    <div>
                        <label for="data_inicio">Data Início:</label>
                        <input type="date" name="data_inicio" id="data_inicio" class="filtro-select" />
                    </div>

                    <div>
                        <label for="data_fim">Data Fim:</label>
                        <input type="date" name="data_fim" id="data_fim" class="filtro-select" />
                    </div>
                </div>
            </form>
        </div>

        <div class="data-table">
            <table id="tabela-atividades">
                <thead>
                    <tr>
                        <th>ID</th>
                        <th>Atividade</th>
                        <th>Cliente</th>
                        <th>Cadastrado por</th>
                        <th>Data Cadastro</th>
                        <th>Data Agendada</th>
                        <th>Data Conclusão</th>
                        <th>Status</th>
                    </tr>
                </thead>
                <tbody>
                    <?php foreach ($atividades as $atividade):
                        $status = '';
                        $dataAtual = new DateTime();
                        $dataAgendada = new DateTime($atividade['data_agendada']);

                        if ($atividade['concluida'] == 1) {
                            $status = '<span class="status concluida">Concluída</span>';
                        } elseif ($dataAgendada < $dataAtual) {
                            $status = '<span class="status atrasada">Atrasada</span>';
                        } else {
                            $status = '<span class="status pendente">Pendente</span>';
                        }
                    ?>
                        <tr>
                            <td><?= $atividade['id'] ?></td>
                            <td><?= htmlspecialchars($atividade['descricao']) ?></td>
                            <td><?= htmlspecialchars($atividade['cliente_nome']) ?></td>
                            <td><?= htmlspecialchars($atividade['usuario_nome']) ?></td>
                            <td><?= date('d/m/Y H:i', strtotime($atividade['data_cadastro'])) ?></td>
                            <td><?= date('d/m/Y H:i', strtotime($atividade['data_agendada'])) ?></td>
                            <td><?= $atividade['data_conclusao'] ? date('d/m/Y H:i', strtotime($atividade['data_conclusao'])) : '--' ?></td>
                            <td><?= $status ?></td>
                        </tr>
                    <?php endforeach; ?>
                </tbody>
            </table>
        </div>
    </div>

    <!-- Scripts -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.datatables.net/1.11.5/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script>
        $(document).ready(function () {
            // Inicializa a DataTable
            var table = $('#tabela-atividades').DataTable({
                language: {
                    url: 'https://cdn.datatables.net/plug-ins/1.11.5/i18n/pt-BR.json'
                },
                dom: 'Bfrtip',
                buttons: [
                    'excel', 'pdf', 'print'
                ],
                pageLength: 25,
                order: [[4, 'desc']]
            });

            // Filtros da tabela
            $('.filtro-select').change(function () {
                var status = $('#status').val();
                var usuario = $('#usuario').val();
                var cliente = $('#cliente').val();
                var dataInicio = $('#data_inicio').val();
                var dataFim = $('#data_fim').val();

                if (status === 'concluida') {
                    table.column(7).search('Concluída').draw();
                } else if (status === 'pendente') {
                    table.column(7).search('Pendente').draw();
                } else if (status === 'atrasada') {
                    table.column(7).search('Atrasada').draw();
                } else {
                    table.column(7).search('').draw();
                }

                if (usuario) {
                    table.column(3).search($('#usuario option:selected').text()).draw();
                } else {
                    table.column(3).search('').draw();
                }

                if (cliente) {
                    table.column(2).search($('#cliente option:selected').text()).draw();
                } else {
                    table.column(2).search('').draw();
                }

                if (dataInicio && dataFim) {
                    $.fn.dataTable.ext.search.push(function (settings, data, dataIndex) {
                        var dataCadastro = new Date(data[4].split('/').reverse().join('-'));
                        var inicio = new Date(dataInicio);
                        var fim = new Date(dataFim);
                        fim.setDate(fim.getDate() + 1);
                        return dataCadastro >= inicio && dataCadastro < fim;
                    });
                    table.draw();
                    $.fn.dataTable.ext.search.pop();
                } else if (dataInicio) {
                    $.fn.dataTable.ext.search.push(function (settings, data, dataIndex) {
                        var dataCadastro = new Date(data[4].split('/').reverse().join('-'));
                        var inicio = new Date(dataInicio);
                        return dataCadastro >= inicio;
                    });
                    table.draw();
                    $.fn.dataTable.ext.search.pop();
                } else if (dataFim) {
                    $.fn.dataTable.ext.search.push(function (settings, data, dataIndex) {
                        var dataCadastro = new Date(data[4].split('/').reverse().join('-'));
                        var fim = new Date(dataFim);
                        fim.setDate(fim.getDate() + 1);
                        return dataCadastro < fim;
                    });
                    table.draw();
                    $.fn.dataTable.ext.search.pop();
                }
            });
        });

        // Dados PHP para gráficos
        const statusData = <?= json_encode($statusData); ?>;
        const userStatusData = <?= json_encode($userStatusData); ?>;

        // Gráfico de pizza - Atividades por status
        const labelsStatus = statusData.map(s => s.status);
        const countsStatus = statusData.map(s => parseInt(s.total));

        const ctxStatus = document.getElementById('chartStatus').getContext('2d');
        new Chart(ctxStatus, {
            type: 'pie',
            data: {
                labels: labelsStatus,
                datasets: [{
                    label: 'Atividades por Status',
                    data: countsStatus,
                    backgroundColor: ['#2ecc71', '#f39c12', '#e74c3c']
                }]
            },
            options: {
                responsive: true,
                plugins: {
                    legend: {
                        position: 'bottom'
                    }
                }
            }
        });

        // Gráfico de barras empilhadas - Atividades por usuário e status
        const usuarios = [...new Set(userStatusData.map(d => d.usuario_nome))];
        const statusList = ['Concluída', 'Pendente', 'Atrasada'];

        const datasets = statusList.map(status => {
            return {
                label: status,
                data: usuarios.map(usuario => {
                    const registro = userStatusData.find(d => d.usuario_nome === usuario && d.status === status);
                    return registro ? parseInt(registro.total) : 0;
                }),
                backgroundColor: status === 'Concluída' ? '#2ecc71' : (status === 'Pendente' ? '#f39c12' : '#e74c3c')
            };
        });

        const ctxUserStatus = document.getElementById('chartUserStatus').getContext('2d');
        new Chart(ctxUserStatus, {
            type: 'bar',
            data: {
                labels: usuarios,
                datasets: datasets
            },
            options: {
                responsive: true,
                plugins: {
                    legend: { position: 'bottom' }
                },
                scales: {
                    x: { stacked: true },
                    y: { stacked: true, beginAtZero: true }
                }
            }
        });
    </script>
</body>
</html>
