<?php
require_once __DIR__ . '/../shared/includes/protect.php';
require_once __DIR__ . '/../shared/config/database.php';
$pdo = getDB();

// Métricas rápidas
$totalTrabajadores = $pdo->query("SELECT COUNT(*) FROM Trabajador")->fetchColumn();
$atencionesMes = $pdo->query("SELECT COUNT(*) FROM Atencion_Medica WHERE MONTH(fecha_atencion) = MONTH(NOW())")->fetchColumn();
$descansosActivos = $pdo->query("SELECT COUNT(*) FROM Atencion_Medica WHERE descanso_medico = 'Si' AND fecha_final_descanso >= CURDATE()")->fetchColumn();
$totalAtenciones = $pdo->query("SELECT COUNT(*) FROM Atencion_Medica")->fetchColumn();

// Últimos 10 trabajadores añadidos
$ultimosTrabajadores = $pdo->query("
    SELECT id_trabajador, apellidos_nombres, dni_ce, empresa, area, puesto_trabajo
    FROM Trabajador
    ORDER BY id_trabajador DESC
    LIMIT 10
")->fetchAll(PDO::FETCH_ASSOC);

// Trabajadores por área
$trabajadoresPorArea = $pdo->query("
    SELECT area, COUNT(*) as total
    FROM Trabajador
    GROUP BY area
    ORDER BY total DESC
")->fetchAll(PDO::FETCH_ASSOC);

// Trabajadores por empresa
$trabajadoresPorEmpresa = $pdo->query("
    SELECT empresa, COUNT(*) as total
    FROM Trabajador
    GROUP BY empresa
    ORDER BY total DESC
")->fetchAll(PDO::FETCH_ASSOC);

// Atenciones por mes (últimos 6 meses)
$atencionesPorMes = $pdo->query("
    SELECT
        DATE_FORMAT(fecha_atencion, '%Y-%m') as mes,
        COUNT(*) as total
    FROM Atencion_Medica
    WHERE fecha_atencion >= DATE_SUB(NOW(), INTERVAL 6 MONTH)
    GROUP BY mes
    ORDER BY mes ASC
")->fetchAll(PDO::FETCH_ASSOC);

// Tipos de eventos y cantidad de atenciones
$eventosPorTipo = $pdo->query("
    SELECT
        tipo_evento,
        COUNT(*) as total
    FROM Atencion_Medica
    GROUP BY tipo_evento
    ORDER BY total DESC
")->fetchAll(PDO::FETCH_ASSOC);

// Top 5 personas con más atenciones
$topAtenciones = $pdo->query("
    SELECT
        t.apellidos_nombres,
        t.dni_ce,
        t.empresa,
        t.area,
        COUNT(am.id_atencion) as total_atenciones
    FROM Trabajador t
    INNER JOIN Atencion_Medica am ON t.id_trabajador = am.id_trabajador
    GROUP BY t.id_trabajador
    ORDER BY total_atenciones DESC
    LIMIT 5
")->fetchAll(PDO::FETCH_ASSOC);

$page_title = 'Dashboard - SSOMA';
?>
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><?= htmlspecialchars($page_title) ?></title>

    <!-- Bootstrap 5.3 -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">

    <!-- Bootstrap Icons -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-icons/1.10.5/font/bootstrap-icons.min.css">

    <!-- Chart.js -->
    <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script>

    <style>
        body {
            background-color: #f8f9fa;
        }
        .metric-card {
            border-radius: 10px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
            transition: transform 0.3s;
        }
        .metric-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 5px 20px rgba(0,0,0,0.15);
        }
        .chart-container {
            position: relative;
            height: 300px;
        }
        .table-container {
            max-height: 400px;
            overflow-y: auto;
        }
        .badge-custom {
            font-size: 0.85rem;
            padding: 0.4em 0.6em;
        }
    </style>
</head>
<body>
    <!-- Navbar Principal -->
    <nav class="navbar navbar-expand-lg navbar-dark bg-primary">
        <div class="container-fluid">
            <a class="navbar-brand" href="/ssoma/">
                <i class="bi bi-shield-check"></i> SSOMA
            </a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarMain">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarMain">
                <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                    <li class="nav-item">
                        <a class="nav-link active" href="/ssoma/dashboard/">
                            <i class="bi bi-speedometer2"></i> Dashboard
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="/ssoma/recursoshumanos/">
                            <i class="bi bi-people-fill"></i> Trabajadores
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="/ssoma/atencionesmedicas/">
                            <i class="bi bi-heart-pulse"></i> Atenciones Médicas
                        </a>
                    </li>
                </ul>
                <div class="d-flex align-items-center">
                    <span class="navbar-text text-white me-3">
                        <i class="bi bi-person-circle"></i> <?= htmlspecialchars(Auth::nombre()) ?>
                        <?php if (Auth::isAdmin()): ?>
                            <span class="badge bg-warning text-dark ms-1">Admin</span>
                        <?php endif; ?>
                    </span>
                    <a href="/ssoma/logout.php" class="btn btn-outline-light btn-sm">
                        <i class="bi bi-box-arrow-right"></i> Salir
                    </a>
                </div>
            </div>
        </div>
    </nav>

    <div class="container-fluid mt-4">
        <h2 class="mb-4"><i class="bi bi-speedometer2"></i> Panel de Control - Sistema SSOMA</h2>


        <!-- Acceso rápido -->
        <div class="row mb-4">
            <div class="col-md-12">
                <div class="card">
                    <div class="card-header bg-dark text-white">
                        <h5 class="mb-0"><i class="bi bi-lightning"></i> Acceso Rápido</h5>
                    </div>
                    <div class="card-body">
                        <div class="row text-center">
                            <div class="col-md-3">
                                <a href="/ssoma/recursoshumanos/" class="btn btn-outline-primary w-100 mb-2">
                                    <i class="bi bi-people-fill" style="font-size: 2rem;"></i><br>
                                    Gestionar Trabajadores
                                </a>
                            </div>
                            <div class="col-md-3">
                                <a href="/ssoma/atencionesmedicas/" class="btn btn-outline-success w-100 mb-2">
                                    <i class="bi bi-heart-pulse" style="font-size: 2rem;"></i><br>
                                    Registrar Atención Médica
                                </a>
                            </div>
                            <div class="col-md-3">
                                <a href="/ssoma/recursoshumanos/" class="btn btn-outline-warning w-100 mb-2">
                                    <i class="bi bi-file-earmark-excel" style="font-size: 2rem;"></i><br>
                                    Exportar Trabajadores
                                </a>
                            </div>
                            <div class="col-md-3">
                                <a href="/ssoma/atencionesmedicas/" class="btn btn-outline-info w-100 mb-2">
                                    <i class="bi bi-file-earmark-medical" style="font-size: 2rem;"></i><br>
                                    Exportar Atenciones
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>


        <!-- Tarjetas de métricas principales -->
        <div class="row mb-4">
            <div class="col-md-3">
                <div class="card text-center bg-primary text-white metric-card">
                    <div class="card-body">
                        <i class="bi bi-people-fill" style="font-size: 3rem;"></i>
                        <h2 class="mt-2"><?= $totalTrabajadores ?></h2>
                        <p class="mb-0">Total Trabajadores</p>
                    </div>
                </div>
            </div>

            <div class="col-md-3">
                <div class="card text-center bg-success text-white metric-card">
                    <div class="card-body">
                        <i class="bi bi-heart-pulse" style="font-size: 3rem;"></i>
                        <h2 class="mt-2"><?= $atencionesMes ?></h2>
                        <p class="mb-0">Atenciones este mes</p>
                    </div>
                </div>
            </div>

            <div class="col-md-3">
                <div class="card text-center bg-warning text-dark metric-card">
                    <div class="card-body">
                        <i class="bi bi-calendar-x" style="font-size: 3rem;"></i>
                        <h2 class="mt-2"><?= $descansosActivos ?></h2>
                        <p class="mb-0">Descansos activos</p>
                    </div>
                </div>
            </div>

            <div class="col-md-3">
                <div class="card text-center bg-info text-white metric-card">
                    <div class="card-body">
                        <i class="bi bi-clipboard-data" style="font-size: 3rem;"></i>
                        <h2 class="mt-2"><?= $totalAtenciones ?></h2>
                        <p class="mb-0">Total Atenciones</p>
                    </div>
                </div>
            </div>
        </div>














        
        <!-- Fila 1: Gráficos -->
        <div class="row mb-4">
            <!-- Gráfico de atenciones por mes -->
            <div class="col-md-6">
                <div class="card">
                    <div class="card-header bg-primary text-white">
                        <h5 class="mb-0"><i class="bi bi-bar-chart"></i> Atenciones por Mes (Últimos 6 meses)</h5>
                    </div>
                    <div class="card-body">
                        <div class="chart-container">
                            <canvas id="chartAtencionesMes"></canvas>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Gráfico de trabajadores por área -->
            <div class="col-md-6">
                <div class="card">
                    <div class="card-header bg-success text-white">
                        <h5 class="mb-0"><i class="bi bi-pie-chart"></i> Trabajadores por Área</h5>
                    </div>
                    <div class="card-body">
                        <div class="chart-container">
                            <canvas id="chartPorArea"></canvas>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Fila 2: Más gráficos -->
        <div class="row mb-4">
            <!-- Trabajadores por empresa -->
            <div class="col-md-6">
                <div class="card">
                    <div class="card-header bg-warning text-dark">
                        <h5 class="mb-0"><i class="bi bi-building"></i> Trabajadores por Empresa</h5>
                    </div>
                    <div class="card-body">
                        <div class="chart-container">
                            <canvas id="chartPorEmpresa"></canvas>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Tipos de eventos -->
            <div class="col-md-6">
                <div class="card">
                    <div class="card-header bg-info text-white">
                        <h5 class="mb-0"><i class="bi bi-flag"></i> Atenciones por Tipo de Evento</h5>
                    </div>
                    <div class="card-body">
                        <div class="chart-container">
                            <canvas id="chartEventos"></canvas>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Fila 3: Tablas de datos -->
        <div class="row mb-4">
            <!-- Top 5 personas con más atenciones -->
            <div class="col-md-6">
                <div class="card">
                    <div class="card-header bg-danger text-white">
                        <h5 class="mb-0"><i class="bi bi-exclamation-triangle"></i> Top 5 - Más Atenciones Recibidas</h5>
                    </div>
                    <div class="card-body">
                        <div class="table-responsive">
                            <table class="table table-sm table-hover">
                                <thead class="table-dark">
                                    <tr>
                                        <th>#</th>
                                        <th>Trabajador</th>
                                        <th>DNI</th>
                                        <th>Empresa</th>
                                        <th>Área</th>
                                        <th class="text-center">Atenciones</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <?php foreach ($topAtenciones as $index => $persona): ?>
                                        <tr>
                                            <td><strong><?= $index + 1 ?></strong></td>
                                            <td><?= htmlspecialchars($persona['apellidos_nombres']) ?></td>
                                            <td><?= htmlspecialchars($persona['dni_ce']) ?></td>
                                            <td><?= htmlspecialchars($persona['empresa']) ?></td>
                                            <td><?= htmlspecialchars($persona['area']) ?></td>
                                            <td class="text-center">
                                                <span class="badge bg-danger"><?= $persona['total_atenciones'] ?></span>
                                            </td>
                                        </tr>
                                    <?php endforeach; ?>
                                    <?php if (empty($topAtenciones)): ?>
                                        <tr>
                                            <td colspan="6" class="text-center text-muted">No hay datos disponibles</td>
                                        </tr>
                                    <?php endif; ?>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Últimos 10 trabajadores añadidos -->
            <div class="col-md-6">
                <div class="card">
                    <div class="card-header bg-secondary text-white">
                        <h5 class="mb-0"><i class="bi bi-person-plus"></i> Últimos 10 Trabajadores Añadidos</h5>
                    </div>
                    <div class="card-body">
                        <div class="table-responsive table-container">
                            <table class="table table-sm table-hover">
                                <thead class="table-dark">
                                    <tr>
                                        <th>ID</th>
                                        <th>Nombre</th>
                                        <th>DNI</th>
                                        <th>Empresa</th>
                                        <th>Área</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <?php foreach ($ultimosTrabajadores as $trabajador): ?>
                                        <tr>
                                            <td><?= $trabajador['id_trabajador'] ?></td>
                                            <td><?= htmlspecialchars($trabajador['apellidos_nombres']) ?></td>
                                            <td><?= htmlspecialchars($trabajador['dni_ce']) ?></td>
                                            <td><span class="badge badge-custom bg-primary"><?= htmlspecialchars($trabajador['empresa']) ?></span></td>
                                            <td><span class="badge badge-custom bg-info"><?= htmlspecialchars($trabajador['area']) ?></span></td>
                                        </tr>
                                    <?php endforeach; ?>
                                    <?php if (empty($ultimosTrabajadores)): ?>
                                        <tr>
                                            <td colspan="5" class="text-center text-muted">No hay trabajadores registrados</td>
                                        </tr>
                                    <?php endif; ?>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>



    <!-- Scripts -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <script>
        // Configuración general de los gráficos
        Chart.defaults.font.family = 'Arial, sans-serif';
        Chart.defaults.font.size = 12;

        // 1. Gráfico de Atenciones por Mes (Barras)
        const ctxMes = document.getElementById('chartAtencionesMes').getContext('2d');
        const chartAtencionesMes = new Chart(ctxMes, {
            type: 'bar',
            data: {
                labels: <?= json_encode(array_column($atencionesPorMes, 'mes')) ?>,
                datasets: [{
                    label: 'Atenciones',
                    data: <?= json_encode(array_column($atencionesPorMes, 'total')) ?>,
                    backgroundColor: 'rgba(54, 162, 235, 0.6)',
                    borderColor: 'rgba(54, 162, 235, 1)',
                    borderWidth: 2
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    legend: {
                        display: false
                    },
                    title: {
                        display: false
                    }
                },
                scales: {
                    y: {
                        beginAtZero: true,
                        ticks: {
                            stepSize: 1
                        }
                    }
                }
            }
        });

        // 2. Gráfico de Trabajadores por Área (Donut)
        const ctxArea = document.getElementById('chartPorArea').getContext('2d');
        const chartPorArea = new Chart(ctxArea, {
            type: 'doughnut',
            data: {
                labels: <?= json_encode(array_column($trabajadoresPorArea, 'area')) ?>,
                datasets: [{
                    data: <?= json_encode(array_column($trabajadoresPorArea, 'total')) ?>,
                    backgroundColor: [
                        'rgba(255, 99, 132, 0.7)',
                        'rgba(54, 162, 235, 0.7)',
                        'rgba(255, 206, 86, 0.7)',
                        'rgba(75, 192, 192, 0.7)',
                        'rgba(153, 102, 255, 0.7)',
                        'rgba(255, 159, 64, 0.7)',
                        'rgba(199, 199, 199, 0.7)'
                    ],
                    borderWidth: 2
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    legend: {
                        position: 'right',
                    }
                }
            }
        });

        // 3. Gráfico de Trabajadores por Empresa (Barras horizontales)
        const ctxEmpresa = document.getElementById('chartPorEmpresa').getContext('2d');
        const chartPorEmpresa = new Chart(ctxEmpresa, {
            type: 'bar',
            data: {
                labels: <?= json_encode(array_column($trabajadoresPorEmpresa, 'empresa')) ?>,
                datasets: [{
                    label: 'Trabajadores',
                    data: <?= json_encode(array_column($trabajadoresPorEmpresa, 'total')) ?>,
                    backgroundColor: 'rgba(255, 193, 7, 0.7)',
                    borderColor: 'rgba(255, 193, 7, 1)',
                    borderWidth: 2
                }]
            },
            options: {
                indexAxis: 'y',
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    legend: {
                        display: false
                    }
                },
                scales: {
                    x: {
                        beginAtZero: true,
                        ticks: {
                            stepSize: 1
                        }
                    }
                }
            }
        });

        // 4. Gráfico de Tipos de Eventos (Pie)
        const ctxEventos = document.getElementById('chartEventos').getContext('2d');
        const chartEventos = new Chart(ctxEventos, {
            type: 'pie',
            data: {
                labels: <?= json_encode(array_column($eventosPorTipo, 'tipo_evento')) ?>,
                datasets: [{
                    data: <?= json_encode(array_column($eventosPorTipo, 'total')) ?>,
                    backgroundColor: [
                        'rgba(255, 99, 132, 0.7)',
                        'rgba(54, 162, 235, 0.7)',
                        'rgba(255, 206, 86, 0.7)',
                        'rgba(75, 192, 192, 0.7)',
                        'rgba(153, 102, 255, 0.7)',
                        'rgba(255, 159, 64, 0.7)'
                    ],
                    borderWidth: 2
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    legend: {
                        position: 'bottom',
                    }
                }
            }
        });
    </script>
</body>
</html>
