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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Nuevo Ticket - Ticketera M&M</title>
    <link rel="stylesheet" href="../css/ticket.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 active">➕ 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>Registrar Incidencia</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="ticket-creation-layout">

                        <div class="form-panel">

                            <div class="panel-header">
                                <div class="panel-icon-bg blue-bg"><i class="bi bi-file-earmark-text"></i></div>
                                <div class="panel-header-text">
                                    <h3>Detalle del Problema</h3>
                                    <p>Describe tu incidencia con el mayor detalle posible. El equipo de TI evaluará tu
                                        solicitud.</p>
                                </div>
                            </div>

                            <hr class="panel-divider">

                            <form id="ticketForm" class="ticket-form">

                                <div class="form-row">
                                    <div class="row-label">
                                        <div class="field-icon blue-light"><i class="bi bi-type"></i></div>
                                        <div class="field-text">
                                            <label>Título breve <span>*</span></label>
                                            <p>Resume el problema en pocas palabras.</p>
                                        </div>
                                    </div>
                                    <div class="row-input">
                                        <input type="text" id="titulo" name="titulo"
                                            placeholder="Ej: Falla en impresora de almacén" required maxlength="100">
                                        <div class="char-counter">0/100</div>
                                    </div>
                                </div>

                                <div class="form-row">
                                    <div class="row-label">
                                        <div class="field-icon purple-light"><i class="bi bi-grid-3x3-gap"></i></div>
                                        <div class="field-text">
                                            <label>Categoría sugerida <span>*</span></label>
                                            <p>Selecciona la opción que mejor se ajuste.</p>
                                        </div>
                                    </div>
                                    <div class="row-input">
                                        <select id="categoria" name="categoria" required>

                                            <option value="" disabled selected>Seleccione una opción...</option>

                                            <option value="Hardware">Hardware (Equipos físicos, impresoras)</option>

                                            <option value="Software">Software (Sistemas, ofimática)</option>

                                            <option value="Redes y Conectividad">Redes y Conectividad (Internet, Wi-Fi)
                                            </option>

                                            <option value="Accesos y Cuentas">Accesos y Cuentas (Contraseñas)</option>

                                            <option value="Consulta Puntual">Consulta Puntual (Dudas de uso)</option>

                                            <option value="Otro">Otro</option>

                                        </select>
                                    </div>
                                </div>

                                <div class="form-row">
                                    <div class="row-label">
                                        <div class="field-icon green-light"><i class="bi bi-chat-square-text"></i></div>
                                        <div class="field-text">
                                            <label>Descripción detallada <span>*</span></label>
                                            <p>Explica qué estaba haciendo y qué error apareció.</p>
                                        </div>
                                    </div>
                                    <div class="row-input">
                                        <textarea id="descripcion" name="descripcion"
                                            placeholder="Explique qué estaba haciendo y qué error apareció..." required
                                            maxlength="1000"></textarea>
                                        <div class="char-counter">0/1000</div>
                                    </div>
                                </div>

                                <div class="form-row">
                                    <div class="row-label">
                                        <div class="field-icon orange-light"><i class="bi bi-paperclip"></i></div>
                                        <div class="field-text">
                                            <label>Adjuntar evidencia <span class="opcional">(Opcional)</span></label>
                                            <p>Agrega capturas, archivos o documentos relevantes.</p>
                                        </div>
                                    </div>
                                    <div class="row-input">
                                        <div class="file-drop-zone"
                                            onclick="document.getElementById('evidencia').click()">
                                            <i class="bi bi-cloud-arrow-up-fill"
                                                style="font-size: 28px; color: #0284c7; display: block; margin-bottom: 8px;"></i>
                                            <p id="textoArchivo"><span>Seleccionar archivo</span> o arrastra y suelta
                                                aquí</p>
                                            <small>Formatos permitidos: JPG, PNG. Máx. 5MB.</small>
                                            <input type="file" id="evidencia" accept="image/png, image/jpeg, image/jpg"
                                                style="display: none;">
                                        </div>
                                    </div>
                                </div>

                                <div class="form-actions">
                                    <button type="submit" class="btn-submit">
                                        <i class="bi bi-send-fill" style="margin-right: 5px;"></i> Enviar Ticket a
                                        Soporte TI
                                    </button>
                                    <div class="form-footer">
                                        <i class="bi bi-shield-check" style="color: #64748b; font-size: 14px;"></i> Al
                                        enviar este ticket, aceptas que será atendido por el equipo de TI.
                                    </div>
                                    <p id="mensajeTicket" class="message-box"></p>
                                </div>
                            </form>
                        </div>

                        <div class="info-sidebar">

                            <div class="info-card border-blue">
                                <div class="card-title blue-text">
                                    <i class="bi bi-lightbulb-fill"></i>
                                    <h4>Antes de reportar</h4>
                                </div>
                                <p>Muchos incidentes de software se resuelven reiniciando la computadora. Intenta este
                                    paso rápido antes de generar un ticket para descartar bloqueos temporales.</p>
                            </div>

                            <div class="info-card border-red">
                                <div class="card-title red-text">
                                    <i class="bi bi-telephone-fill"></i>
                                    <h4>Urgencias Críticas</h4>
                                </div>
                                <p>Si experimentas una caída total de internet o del sistema ERP que paraliza tu
                                    operación, llama directamente al <strong>981462615</strong>.</p>
                            </div>

                            <div class="info-card border-green">
                                <div class="card-title green-text">
                                    <i class="bi bi-stopwatch-fill"></i>
                                    <h4>Tiempos de Respuesta (SLA)</h4>
                                </div>
                                <ul class="sla-list">
                                    <li><span class="dot" style="background:#ef4444;"></span> <strong>Incidencia
                                            Crítica:</strong> Atención inmediata</li>
                                    <li><span class="dot" style="background:#ea580c;"></span> <strong>Incidencia
                                            Alta:</strong> 0.30 a 1 hora</li>
                                    <li><span class="dot" style="background:#f59e0b;"></span> <strong>Incidencia
                                            Media:</strong> 1 a 2 horas</li>
                                    <li><span class="dot" style="background:#10b981;"></span> <strong>Incidencia
                                            Baja:</strong> 3 a 4 horas</li>
                                </ul>
                            </div>

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

            <script src="../js/crear-ticket.js"></script>
</body>

</html>