<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Reportes TI - Ticketera M&M</title>
    <link rel="stylesheet" href="../css/ticket.css">
    <link rel="stylesheet" href="../css/historial.css">
    <link rel="stylesheet" href="../css/admin.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
    
    <!-- LIBRERÍAS DE GRÁFICOS Y EXPORTACIÓN -->
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.18.5/xlsx.full.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
</head>
<body>
    <div class="dashboard-layout">
        
        <aside class="sidebar admin-sidebar">
            <div class="sidebar-header">
                <img src="../assets/logo.png" alt="Logo M&M" class="sidebar-logo">
                <span class="badge-admin">PANEL TI</span>
            </div>
            
            <nav class="sidebar-nav">
                <p class="nav-title">GESTIÓN DE SOPORTE</p>
                <a href="admin-dashboard.html" class="nav-item"><i class="bi bi-speedometer2"></i> Panel General</a>
                <a href="todos-tickets.html" class="nav-item"><i class="bi bi-ticket-detailed"></i> Todos los Tickets</a>
                <a href="usuarios.html" class="nav-item"><i class="bi bi-people"></i> Usuarios</a>
                <a href="reportes.html" class="nav-item active"><i class="bi bi-bar-chart"></i> Reportes</a>
            </nav>
        </aside>

        <main class="main-content">
            <header class="top-bar">
                <div class="page-title">
                    <h2>Estadísticas y Rendimiento (SLA)</h2>
                </div>
                <div class="user-info">
                    <span id="nombreAdmin">Cargando...</span>
                    <button class="btn-logout" id="btnCerrarSesion">Cerrar Sesión</button>
                </div>
            </header>

            <div class="content-area">
                <div class="dashboard-wrapper" id="dashboardCaptura">
                    <!-- KPI's RESUMEN -->
                    <div class="kpi-grid" style="margin-bottom: 20px; grid-template-columns: repeat(4, 1fr);">
                        <div class="kpi-card primary">
                            <div class="kpi-icon"><i class="bi bi-ticket-detailed"></i></div>
                            <div class="kpi-data">
                                <h3 id="statTotal">0</h3>
                                <p>Total Histórico</p>
                            </div>
                        </div>
                        <div class="kpi-card success">
                            <div class="kpi-icon"><i class="bi bi-check2-circle"></i></div>
                            <div class="kpi-data">
                                <h3 id="statResueltos">0%</h3>
                                <p>Tasa de Resolución</p>
                            </div>
                        </div>
                        <div class="kpi-card warning">
                            <div class="kpi-icon"><i class="bi bi-clock-history"></i></div>
                            <div class="kpi-data">
                                <h3 id="statPendientes">0</h3>
                                <p>Tickets Pendientes</p>
                            </div>
                        </div>
                        <div class="kpi-card danger" style="cursor: pointer; transition: 0.2s;" onmouseover="this.style.transform='scale(1.02)'" onmouseout="this.style.transform='scale(1)'" onclick="abrirModalTiempos()">
                            <div class="kpi-icon"><i class="bi bi-stopwatch"></i></div>
                            <div class="kpi-data">
                                <h3 id="statTiempo">0h</h3>
                                <p>Tiempo Promedio (SLA)</p>
                                <span style="font-size: 11px; text-decoration: underline; font-weight: bold; color: #ef4444; margin-top: 5px; display: inline-block;">Ver desglose <i class="bi bi-arrow-right-short"></i></span>
                            </div>
                        </div>
                    </div>

                    <!-- GRID DE GRÁFICOS -->
                    <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 20px;">
                        <div class="table-card" style="padding: 20px;">
                            <h4 style="color: #334155; margin-bottom: 15px; font-size: 15px;"><i class="bi bi-pie-chart-fill" style="color: #0284c7;"></i> Tickets por Categoría</h4>
                            <div style="height: 300px; display: flex; justify-content: center;"><canvas id="chartCategoria"></canvas></div>
                        </div>
                        <div class="table-card" style="padding: 20px;">
                            <h4 style="color: #334155; margin-bottom: 15px; font-size: 15px;"><i class="bi bi-bar-chart-fill" style="color: #a855f7;"></i> Incidencias por Área</h4>
                            <div style="height: 300px;"><canvas id="chartArea"></canvas></div>
                        </div>
                        <div class="table-card" style="padding: 20px;">
                            <h4 style="color: #334155; margin-bottom: 15px; font-size: 15px;"><i class="bi bi-activity" style="color: #10b981;"></i> Volumen por Estado</h4>
                            <div style="height: 300px;"><canvas id="chartEstado"></canvas></div>
                        </div>
                        <div class="table-card" style="padding: 20px;">
                            <h4 style="color: #334155; margin-bottom: 15px; font-size: 15px;"><i class="bi bi-exclamation-triangle-fill" style="color: #ef4444;"></i> Nivel de Prioridad</h4>
                            <div style="height: 300px; display: flex; justify-content: center;"><canvas id="chartPrioridad"></canvas></div>
                        </div>
                    </div>
                    <!-- BARRA DE EXPORTACIÓN (NUEVO) -->
                    <div id="barraExportar" class="filter-card advanced-filters" style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; border-left: 4px solid #0f172a; flex-wrap: wrap; gap: 15px;">
                        
                        <div style="display: flex; align-items: center; gap: 10px; flex-wrap: wrap;">
                            <h3 style="margin: 0; color: #1e293b; font-size: 15px;"><i class="bi bi-calendar-range"></i> Filtrar por:</h3>
                            
                            <select id="filtroTiempo" class="filter-select" style="width: auto; padding: 6px 15px; margin: 0; font-weight: bold; color: #014eab; cursor: pointer;" onchange="manejarCambioFiltro()">
                                <option value="todos">Histórico Completo</option>
                                <option value="hoy">Solo Hoy</option>
                                <option value="semana">Últimos 7 Días</option>
                                <option value="mes">Este Mes</option>
                                <option value="anio">Este Año</option>
                                <option value="rango">Rango personalizado...</option>
                            </select>

                            <div id="contenedorRango" style="display: none; align-items: center; gap: 8px; background: #f1f5f9; padding: 4px 10px; border-radius: 6px;">
                                <input type="date" id="fechaInicio" class="filter-select" style="padding: 4px 10px; margin: 0; width: auto; font-size: 12px;">
                                <span style="color: #64748b; font-size: 13px;">hasta</span>
                                <input type="date" id="fechaFin" class="filter-select" style="padding: 4px 10px; margin: 0; width: auto; font-size: 12px;">
                                <button class="btn-gestionar" style="background: #0f172a; color: white; padding: 5px 12px; border: none; border-radius: 4px; font-size: 12px; cursor: pointer;" onclick="aplicarFiltroRango()">
                                    Aplicar
                                </button>
                            </div>
                        </div>

                        <div style="display: flex; gap: 10px;">
                            <button class="btn-guardar-pro" style="background: #10b981; border: none; padding: 8px 15px;" onclick="exportarExcel()">
                                <i class="bi bi-file-earmark-excel"></i> Descargar Excel
                            </button>
                            <button class="btn-guardar-pro" style="background: #ef4444; border: none; padding: 8px 15px;" onclick="exportarPDF()">
                                <i class="bi bi-file-earmark-pdf"></i> Descargar PDF
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </main>
    </div>

    <!-- Modal Tiempos (se mantiene igual) -->
    <div id="modalTiempos" class="modal-pro">
        <div class="modal-content-pro" style="max-width: 700px;">
            <div class="modal-header-pro">
                <div class="header-title">
                    <div class="icon-bg" style="background: #fee2e2; color: #ef4444;"><i class="bi bi-stopwatch"></i></div>
                    <div>
                        <h3>Desglose de Tiempos (SLA)</h3>
                        <p>Tiempo de resolución individual por cada ticket cerrado</p>
                    </div>
                </div>
                <button class="close-pro" onclick="cerrarModalTiempos()"><i class="bi bi-x-lg"></i></button>
            </div>
            <div class="modal-body-pro" style="max-height: 400px; overflow-y: auto; padding: 0;">
                <table style="width: 100%; text-align: left; border-collapse: collapse; font-size: 13px;">
                    <thead style="background: #f8fafc; position: sticky; top: 0;">
                        <tr>
                            <th style="padding: 12px 15px; color: #475569; border-bottom: 1px solid #cbd5e1;">Ticket</th>
                            <th style="padding: 12px 15px; color: #475569; border-bottom: 1px solid #cbd5e1;">Asunto</th>
                            <th style="padding: 12px 15px; color: #475569; border-bottom: 1px solid #cbd5e1;">Usuario</th>
                            <th style="padding: 12px 15px; color: #475569; border-bottom: 1px solid #cbd5e1; text-align: right;">Duración</th>
                        </tr>
                    </thead>
                    <tbody id="tablaTiemposBody"></tbody>
                </table>
            </div>
            <div class="modal-footer-pro">
                <button class="btn-cancelar" onclick="cerrarModalTiempos()"><i class="bi bi-x"></i> Cerrar</button>
            </div>
        </div>
    </div>

    <script src="../js/reportes.js"></script>
</body>
</html>