<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Historial de Tickets - Ticketera M&M</title>
    <link rel="stylesheet" href="../css/ticket.css">
    <link rel="stylesheet" href="../css/historial.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/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">📊 Mi Resumen</a>
                <a href="crear-ticket.html" class="nav-item">➕ Nuevo Ticket</a>
                <a href="historial.html" class="nav-item active">📋 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>Historial de Tickets</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="filter-card advanced-filters">
                        
                        <div class="search-box">
                            <i class="bi bi-search"></i>
                            <input type="text" id="busqueda" placeholder="Buscar por ID o asunto...">
                        </div>
                        
                        <div class="filter-group">
                            <select id="filtroEstado">
                                <option value="todos">Todos los Estados</option>
                                <option value="Abierto">Abiertos</option>
                                <option value="En Proceso">En Proceso</option>
                                <option value="Resuelto">Resueltos</option>
                            </select>

                            <select id="filtroPrioridad">
                                <option value="todos">Todas las Prioridades</option>
                                <option value="Alta">Prioridad Alta</option>
                                <option value="Media">Prioridad Media</option>
                                <option value="Baja">Prioridad Baja</option>
                            </select>

                            <select id="filtroCategoria">
                                <option value="todos">Todas las Categorías</option>
                                <option value="Hardware">Hardware</option>
                                <option value="Software">Software</option>
                                <option value="Redes">Redes y Conectividad</option>
                                <option value="Otros">Otros</option>
                            </select>
                        </div>
                    </div>

                    <div class="table-card">
                        <table id="tablaHistorial">
                            <thead>
                                <tr>
                                    <th>ID Ticket</th>
                                    <th>Título</th>
                                    <th>Categoría</th>
                                    <th>Fecha</th>
                                    <th>Estado</th>
                                    <th style="text-align: center;">Acciones</th>
                                </tr>
                            </thead>
                            <tbody id="historialBody">
                                </tbody>
                        </table>
                    </div>

                </div>
            </div>
        </main>
    </div>

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