<?php
$page_title = 'Reportes del Sistema';
include __DIR__ . '/header.php';

// Proteger la página para que solo los roles autorizados puedan acceder
require_role(['administrador', 'digitador', 'convivencia', 'inspector']);

include __DIR__ . '/navbar.php';

require_once __DIR__ . '/../config/db_auto.php';

// Obtener tipos de enseñanza para los filtros
$stmt = $pdo->query("SELECT id, nombre FROM tipo_ensenanza ORDER BY id");
$tipos_ensenanza = $stmt->fetchAll(PDO::FETCH_ASSOC);

// Obtener años disponibles
$stmt_years = $pdo->query("SELECT DISTINCT anio FROM matriculas ORDER BY anio DESC");
$available_years = $stmt_years->fetchAll(PDO::FETCH_COLUMN);

// Array centralizado para definir los reportes disponibles
$report_types = [
    [
        'tipo' => 'religion',
        'titulo' => 'Opción Religión',
        'descripcion' => 'Reporte de alumnos que optan por clases de religión',
        'icono' => 'bi-person-check',
        'color' => 'primary'
    ],
    [
        'tipo' => 'transporte',
        'titulo' => 'Transporte Escolar',
        'descripcion' => 'Alumnos que utilizan transporte escolar por sector',
        'icono' => 'bi-bus-front',
        'color' => 'success'
    ],
    [
        'tipo' => 'sector',
        'titulo' => 'Por Sector',
        'descripcion' => 'Distribución de alumnos por sector geográfico',
        'icono' => 'bi-geo-alt',
        'color' => 'warning'
    ],
    [
        'tipo' => 'junaeb',
        'titulo' => 'Beneficio JUNAEB',
        'descripcion' => 'Alumnos beneficiarios de programas JUNAEB',
        'icono' => 'bi-heart',
        'color' => 'danger'
    ],
    [
        'tipo' => 'uso_imagen',
        'titulo' => 'Autorización Uso de Imagen',
        'descripcion' => 'Alumnos con autorización para uso de imagen',
        'icono' => 'bi-camera',
        'color' => 'info'
    ],
    [
        'tipo' => 'enfermedad',
        'titulo' => 'Enfermedades de Cuidado',
        'descripcion' => 'Alumnos con enfermedades que requieren cuidado especial',
        'icono' => 'bi-heart-pulse',
        'color' => 'danger'
    ],
    [
        'tipo' => 'medicamento',
        'titulo' => 'Medicamentos de Uso Diario',
        'descripcion' => 'Alumnos que requieren medicación diaria',
        'icono' => 'bi-capsule',
        'color' => 'primary'
    ]
];

?>

<div class="container py-4">
    <h2 class="mb-4" style="color:#484A67;">
        <i class="bi bi-bar-chart-line me-2"></i>Reportes del Sistema
    </h2>

    <!-- Filtros Generales -->
    <div class="card mb-4 shadow-sm">
        <div class="card-body">
            <h5 class="card-title">
                <i class="bi bi-funnel me-2"></i>Filtros de Consulta
            </h5>
            <div class="row g-3 align-items-end">
                <div class="col-md-3">
                    <label for="filtro_anio" class="form-label">Año Escolar</label>
                    <select class="form-select" id="filtro_anio">
                        <option value="">Seleccione...</option>
                        <?php foreach ($available_years as $year) : ?>
                            <option value="<?= htmlspecialchars($year) ?>">
                                <?= htmlspecialchars($year) ?>
                            </option>
                        <?php endforeach; ?>
                    </select>
                </div>
                <div class="col-md-3">
                    <label for="filtro_tipo_ensenanza" class="form-label">Tipo de Enseñanza</label>
                    <select class="form-select" id="filtro_tipo_ensenanza">
                        <option value="">Seleccione...</option>
                        <?php foreach ($tipos_ensenanza as $tipo) : ?>
                            <option value="<?= htmlspecialchars($tipo['id']) ?>"><?= htmlspecialchars($tipo['nombre']) ?></option>
                        <?php endforeach; ?>
                    </select>
                </div>
                <div class="col-md-3">
                    <label for="filtro_grado" class="form-label">Grado</label>
                    <select class="form-select" id="filtro_grado" disabled>
                        <option value="">Seleccione tipo de enseñanza</option>
                    </select>
                </div>
                <div class="col-md-3">
                    <button type="button" class="btn btn-secondary" id="btnLimpiarFiltros">
                        <i class="bi bi-arrow-clockwise me-1"></i>Limpiar Filtros
                    </button>
                </div>
            </div>
        </div>
    </div>

    <!-- Tipos de Reportes -->
    <div class="row g-4" id="contenedorReportes">
        <?php foreach ($report_types as $report) : ?>
            <div class="col-md-6 col-xl-4">
                <div class="card h-100 shadow-sm reporte-card">
                    <div class="card-body text-center">
                        <div class="mb-3">
                            <i class="bi <?= htmlspecialchars($report['icono']) ?> text-<?= htmlspecialchars($report['color']) ?>" style="font-size: 2.5rem;"></i>
                        </div>
                        <h5 class="card-title"><?= htmlspecialchars($report['titulo']) ?></h5>
                        <p class="card-text text-muted"><?= htmlspecialchars($report['descripcion']) ?></p>
                        <button class="btn btn-<?= htmlspecialchars($report['color']) ?> btn-generar" data-tipo="<?= htmlspecialchars($report['tipo']) ?>">
                            <i class="bi bi-file-text me-1"></i>Generar
                        </button>
                    </div>
                </div>
            </div>
        <?php endforeach; ?>

        <!-- Reporte Consolidado -->
        <div class="col-md-6 col-xl-4">
            <div class="card h-100 shadow-sm reporte-card border-primary">
                <div class="card-body text-center">
                    <div class="mb-3">
                        <i class="bi bi-file-earmark-spreadsheet text-primary" style="font-size: 2.5rem;"></i>
                    </div>
                    <h5 class="card-title">Reporte Consolidado</h5>
                    <p class="card-text text-muted">Reporte completo con todos los datos sociales y de salud</p>
                    <button class="btn btn-primary btn-lg btn-generar" data-tipo="consolidado">
                        <i class="bi bi-download me-1"></i>Generar Excel
                    </button>
                </div>
            </div>
        </div>
    </div>

    <!-- Contenedor para mostrar resultados -->
    <div id="contenedorResultados" class="mt-4" style="display: none;">
        <!-- Los resultados se cargarán aquí dinámicamente -->
    </div>
</div>

<!-- Modal de carga -->
<div class="modal fade" id="modalCarga" tabindex="-1" aria-hidden="true" data-bs-backdrop="static">
    <div class="modal-dialog modal-sm modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-body text-center p-4">
                <div class="spinner-border text-primary mb-3" role="status">
                    <span class="visually-hidden">Generando reporte...</span>
                </div>
                <p class="mb-0">Generando reporte...</p>
            </div>
        </div>
    </div>
</div>

<style>
    .reporte-card {
        transition: transform 0.2s, box-shadow 0.2s;
        cursor: pointer;
    }

    .reporte-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
    }

    .reporte-card.border-primary {
        border: 2px solid var(--bs-primary) !important;
        background: linear-gradient(135deg, rgba(13, 110, 253, 0.05), rgba(13, 110, 253, 0.02));
    }

    /* Botón flotante discreto volver arriba */
    #btnVolverArriba {
        position: fixed;
        bottom: 20px;
        right: 20px;
        z-index: 1000;
        border-radius: 50%;
        width: 45px;
        height: 45px;
        display: none;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
        transition: all 0.3s ease;
        opacity: 0.8;
        font-size: 14px;
    }

    #btnVolverArriba:hover {
        opacity: 1;
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    }

    /* Estilos específicos para tablas de reportes */
    .text-wrap-column {
        max-width: 300px;
        word-wrap: break-word;
        word-break: break-word;
        white-space: normal;
        font-size: 0.9rem;
        line-height: 1.3;
        padding: 8px 12px;
        vertical-align: top;
    }

    /* Hacer que las tablas sean más compactas */
    .table-responsive table {
        font-size: 0.9rem;
    }

    .table-responsive th {
        font-size: 0.85rem;
        font-weight: 600;
        white-space: nowrap;
        padding: 8px 12px;
    }

    .table-responsive td {
        padding: 6px 12px;
        vertical-align: top;
    }

    /* Ajustar ancho de columnas específicas */
    .table th:nth-child(1) {
        width: 12%;
    }

    /* RUN */
    .table th:nth-child(2) {
        width: 25%;
    }

    /* Nombre */
    .table th:nth-child(3) {
        width: 15%;
    }

    /* Grado */
    .table th:nth-child(4) {
        width: 48%;
    }

    /* Observaciones */

    /* Responsive para móviles */
    @media (max-width: 768px) {
        .text-wrap-column {
            max-width: 200px;
            font-size: 0.8rem;
        }

        .table-responsive {
            font-size: 0.8rem;
        }
    }
</style>

<!-- Botón flotante para volver arriba -->
<button id="btnVolverArriba" class="btn btn-primary" onclick="volverArriba()" title="Volver arriba">
    <i class="bi bi-arrow-up"></i>
</button>

<script src="<?php echo asset('reportes.js', true); ?>" defer></script>

<?php include __DIR__ . '/footer.php'; ?>