<!DOCTYPE html>
<html lang="es">

<head>
    <meta charset="UTF-8">
    <title>Resumen - Ticketera M&M</title>
    <link rel="stylesheet" href="../css/ticket.css">
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.13.1/font/bootstrap-icons.min.css">
</head>

<body>
    <div class="dashboard-layout">
        <aside class="sidebar">
            <div class="sidebar-header">
                <img src="../assets/logo.png" alt="Logo M&M" class="sidebar-logo">
            </div>

            <nav class="sidebar-nav">
                <p class="nav-title">MENÚ PRINCIPAL</p>
                <a href="mi-resumen.html" class="nav-item active">📊 Mi Resumen</a>
                <a href="crear-ticket.html" class="nav-item">➕ Nuevo Ticket</a>
                <a href="historial.html" class="nav-item">📋 Historial de Tickets</a>
                <a href="base-conocimiento.html" class="nav-item">💡 Base de Conocimiento</a>
            </nav>
        </aside>

        <main class="main-content">
            <header class="top-bar">
                <div class="page-title">
                    <h2>Panel de Resumen</h2>
                </div>
                <div class="user-info">
                    <span id="nombreUsuario">Cargando...</span>
                    <button id="btnCerrarSesion" class="btn-logout">Cerrar Sesión</button>
                </div>
            </header>

            <div class="content-area">
                <div class="dashboard-wrapper">
                <div class="dashboard-top">

                    <!-- Estadísticas -->
                    <div class="stats-container">

                        <div class="stat-card">
                            <div class="icon-box red">
                                <i class="bi bi-ticket-perforated"></i>
                            </div>

                            <div class="info">
                                <h3>ABIERTOS</h3>
                                <p id="countAbiertos">0</p>
                                <small id="pctAbiertos">0% del total</small>
                            </div>
                        </div>

                        <div class="stat-card">
                            <div class="icon-box amber">
                                <i class="bi bi-hourglass-split"></i>
                            </div>

                            <div class="info">
                                <h3>EN PROCESO</h3>
                                <p id="countProceso">0</p>
                                <small id="pctProceso">0% del total</small>
                            </div>
                        </div>

                        <div class="stat-card">
                            <div class="icon-box green">
                                <i class="bi bi-check-circle"></i>
                            </div>

                            <div class="info">
                                <h3>RESUELTOS</h3>
                                <p id="countResueltos">0</p>
                                <small id="pctResueltos">0% del total</small>
                            </div>
                        </div>

                    </div>

                    <!-- Gráfico -->
                    <div class="card-chart">
                        <div class="chart-header">
                            <h4>Distribución de mis tickets</h4>
                            <div class="filter-box">
                                <i class="bi bi-calendar3"></i>
                                <select id="filtroMes">
                                    <option value="actual">Este mes</option>
                                    <option value="total">Total</option>
                                    <option value="1">Enero</option>
                                    <option value="2">Febrero</option>
                                    <option value="3">Marzo</option>
                                    <option value="4">Abril</option>
                                    <option value="5">Mayo</option>
                                    <option value="6">Junio</option>
                                    <option value="7">Julio</option>
                                    <option value="8">Agosto</option>
                                    <option value="9">Septiembre</option>
                                    <option value="10">Octubre</option>
                                    <option value="11">Noviembre</option>
                                    <option value="12">Diciembre</option>
                                </select>
                            </div>
                        </div>

                        <div class="chart-body">
                            <div class="chart-canvas-wrapper">
                                <canvas id="ticketChart"></canvas>
                            </div>
                            <div id="customLegend" class="chart-legend-custom"></div>
                        </div>
                    </div>

                    <!-- Última incidencia -->
                    <div class="card-last">
                        <h4>Última incidencia</h4>
                        <div id="ultimoTicketInfo" class="last-ticket-content">
                            Cargando...
                        </div>
                    </div>

                </div>
                <div class="recent-section">
                    <div class="recent-header">
                        <h3>Mis tickets recientes</h3>
                        <a href="#" class="btn-view-all">Ver todos</a>
                    </div>
                    
                    <div class="recent-card">
                        <table class="tickets-table">
                            <thead>
                                <tr>
                                    <th>TICKET</th>
                                    <th>ASUNTO</th>
                                    <th>ESTADO</th>
                                    <th>PRIORIDAD</th>
                                    <th>CREADO</th>
                                    <th>ACTUALIZADO</th>
                                    <th></th> </tr>
                            </thead>
                            <tbody id="tablaTicketsRecientes">
                                </tbody>
                        </table>

                        <div class="cta-reportar">
                            <div class="cta-icon-wrapper">
                                <i class="bi bi-ticket-detailed"></i> </div>
                            <h4>¿Necesitas reportar algo?</h4>
                            <p>Crea un nuevo ticket y nuestro equipo te ayudará.</p>
                            <a href="crear-ticket.html" class="btn-new-ticket">➕ Nuevo Ticket</a>
                        </div>
                    </div>
                </div>
                </div>
            </div>
        </main>
    </div>
    <script src="../js/resumen.js"></script>
</body>

</html>