<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Todos los Tickets - Panel TI</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">
</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 active"><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"><i class="bi bi-bar-chart"></i> Reportes</a>
            </nav>
        </aside>

        <main class="main-content">
            
            <header class="top-bar">
                <div class="page-title">
                    <h2>Historial Completo de Tickets</h2>
                </div>
                <div class="user-info">
                    <span id="nombreAdmin">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="filters-grid" style="display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 15px; width: 100%;">
                            
                            <div class="search-box" style="margin: 0;">
                                <i class="bi bi-search"></i>
                                <input type="text" id="filtroTexto" placeholder="Buscar por ID, Usuario o Asunto...">
                            </div>
                            
                            <select id="filtroCategoria" class="filter-select">
                                <option value="todas">Todas las Categorías</option>
                                <option value="Hardware">Hardware</option>
                                <option value="Software">Software</option>
                                <option value="Redes y Conectividad">Redes y Conectividad</option>
                                <option value="Accesos y Cuentas">Accesos y Cuentas</option>
                                <option value="Consulta Puntual">Consulta Puntual</option>
                            </select>

                            <select id="filtroEstado" class="filter-select">
                                <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>

                            <button id="btnLimpiarFiltros" class="btn-secondary" style="height: 100%;">
                                <i class="bi bi-eraser"></i> Limpiar
                            </button>
                        </div>

                        <div class="date-filters" style="display: flex; gap: 15px; margin-top: 15px; align-items: center;">
                            <span style="font-size: 13px; font-weight: bold; color: #64748b;">Rango de fechas:</span>
                            <input type="date" id="fechaInicio" class="filter-date">
                            <span style="color: #cbd5e1;">hasta</span>
                            <input type="date" id="fechaFin" class="filter-date">
                            
                            <button id="btnExportar" class="btn-guardar-pro" style="margin-left: auto; padding: 8px 15px; font-size: 13px;">
                                <i class="bi bi-file-earmark-excel"></i> Exportar a Excel
                            </button>
                        </div>
                    </div>

                    <div class="table-card" style="margin-top: 20px;">
                        <table id="tablaAdmin">
                            <thead>
                                <tr>
                                    <th>ID</th>
                                    <th>Usuario / Área</th>
                                    <th>Categoría</th>
                                    <th>Asunto</th>
                                    <th>Estado</th>
                                    <th>Fecha</th>
                                    <th style="text-align: center;">Acción</th>
                                </tr>
                            </thead>
                            <tbody id="tablaTodosBody">
                                </tbody>
                        </table>
                    </div>

                </div>
            </div>
        </main>
    </div>
    <div id="modalGestion" class="modal-pro">
        <div class="modal-content-pro">
            
            <div class="modal-header-pro">
                <div class="header-title">
                    <div class="icon-bg"><i class="bi bi-ticket-perforated"></i></div>
                    <div>
                        <h3>Gestionar Ticket <span id="modalId">#000</span></h3>
                        <p>Información y gestión del ticket</p>
                    </div>
                </div>
                <button class="close-pro" onclick="cerrarModal()"><i class="bi bi-x-lg"></i></button>
            </div>

            <div class="modal-body-pro">
                <div class="info-grid">
                    <div class="info-item">
                        <i class="bi bi-person-circle"></i>
                        <div>
                            <span>Usuario</span>
                            <strong id="modalUsuario">Cargando...</strong>
                        </div>
                    </div>
                    <div class="info-item">
                        <i class="bi bi-building"></i>
                        <div>
                            <span>Área</span>
                            <strong id="modalArea">Cargando...</strong>
                        </div>
                    </div>
                    <div class="info-item">
                        <i class="bi bi-calendar-event"></i>
                        <div>
                            <span>Fecha de creación</span>
                            <strong id="modalFecha">--/--/----</strong>
                        </div>
                    </div>
                    <div class="info-item">
                        <i class="bi bi-info-circle"></i>
                        <div>
                            <span>Estado actual</span>
                            <div id="badgeEstadoActual" class="badge-status bg-abierto">NUEVO</div>
                        </div>
                    </div>
                    <div class="info-item">
                        <i class="bi bi-flag"></i>
                        <div>
                            <span>Prioridad</span>
                            <div id="badgePrioridadActual" class="badge-status priority-alta">ALTA</div>
                        </div>
                    </div>
                    <div class="info-item">
                        <i class="bi bi-tag"></i>
                        <div>
                            <span>ID del ticket</span>
                            <strong id="modalIdLabel">#TK-000</strong>
                        </div>
                    </div>
                </div>

                <div class="section-title"><i class="bi bi-chat-left-text"></i> Descripción del problema</div>
                <div class="desc-box" id="modalDesc">
                    Cargando descripción...
                </div>

                <div class="section-title"><i class="bi bi-paperclip"></i> Evidencia proporcionada por el usuario</div>
                <div class="evidence-box">
                    <div class="evidence-img-container">
                        <img id="modalEvidencia" src="../assets/sin-evidencia.png" alt="Evidencia">
                    </div>
                    <div class="evidence-actions" id="evidenceActions">
                        <a href="#" id="linkVerImg" target="_blank" class="btn-text"><i class="bi bi-eye"></i> Ver imagen completa</a>
                        <a href="#" id="linkDescargarImg" download class="btn-text"><i class="bi bi-download"></i> Descargar evidencia</a>
                        <span id="evidenceSize" class="size-text"></span>
                    </div>
                    <div id="textoSinEvidencia" class="no-evidence-text" style="display: none;">
                        El usuario no adjuntó archivos.
                    </div>
                </div>

                <div class="section-title"><i class="bi bi-gear"></i> Gestión del ticket</div>
                <div class="management-grid">
                    <div class="form-group-pro">
                        <label>Cambiar Estado</label>
                        <select id="editEstado">
                            <option value="Abierto">Abierto</option>
                            <option value="En Proceso">En Proceso</option>
                            <option value="Resuelto">Resuelto</option>
                        </select>
                    </div>
                    <div class="form-group-pro">
                        <label>Asignar Prioridad</label>
                        <select id="editPrioridad">
                            <option value="Baja">Baja</option>
                            <option value="Media">Media</option>
                            <option value="Alta">Alta</option>
                            <option value="Crítica">Crítica</option>
                        </select>
                    </div>
                </div>

                <div class="form-group-pro" style="margin-top: 15px;">
                    <label><i class="bi bi-pencil-square"></i> Observaciones del administrador (opcional)</label>
                    <textarea id="editObservaciones" rows="3" placeholder="Escribe aquí las acciones realizadas para resolver el problema..." onkeyup="contarCaracteres(this)"></textarea>
                    <div class="char-counter"><span id="charCount">0</span> / 1000</div>
                </div>

                <div class="section-title" style="margin-top: 25px;"><i class="bi bi-clock-history"></i> Historial del ticket</div>
                <div class="timeline">
                    <div class="timeline-step">
                        <div class="timeline-icon"><i class="bi bi-info-circle"></i></div>
                        <div class="timeline-content">
                            <strong>Ticket creado</strong>
                            <span id="timeCreado">--/--/----</span>
                        </div>
                    </div>
                    <div class="timeline-step">
                        <div class="timeline-icon"><i class="bi bi-arrow-repeat"></i></div>
                        <div class="timeline-content">
                            <strong>Última actualización</strong>
                            <span id="timeActualizado">--/--/----</span>
                        </div>
                    </div>
                </div>

            </div>

            <div class="modal-footer-pro">
                <button class="btn-cancelar" onclick="cerrarModal()"><i class="bi bi-x"></i> Cancelar</button>
                <button class="btn-guardar-pro" onclick="guardarCambios()"><i class="bi bi-save"></i> Guardar Cambios</button>
            </div>
        </div>
    </div>
    <script src="../js/todos-tickets.js"></script>
    </body>
</html>