help_desk/views/client/new-ticket.ejs

<%- include('../partials/header') %>
<% title = 'Nuevo Ticket'; %>

<!-- Alertas Flash -->
<% if (success_msg && success_msg.length > 0) { %>
    <% success_msg.forEach(msg => { %>
        <div class="alert alert-success alert-dismissible fade show rounded-3 border-0 shadow-sm mb-3" role="alert">
            <div class="d-flex align-items-center">
                <i class="fas fa-check-circle me-2 fs-5 text-success"></i>
                <div><%= msg %></div>
            </div>
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        </div>
    <% }) %>
<% } %>
<% if (error_msg && error_msg.length > 0) { %>
    <% error_msg.forEach(msg => { %>
        <div class="alert alert-danger alert-dismissible fade show rounded-3 border-0 shadow-sm mb-3" role="alert">
            <div class="d-flex align-items-center">
                <i class="fas fa-exclamation-triangle me-2 fs-5 text-danger"></i>
                <div><%= msg %></div>
            </div>
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        </div>
    <% }) %>
<% } %>

<!-- Cabecera -->
<div class="page-header d-flex flex-wrap justify-content-between align-items-center gap-3 mb-4">
    <div>
        <div class="d-flex align-items-center gap-2 mb-1">
            <h1 class="page-title h3 mb-0">Generar Solicitud de Soporte</h1>
        </div>
        <p class="text-muted small mb-0">Describe el problema o requerimiento para canalizarlo al equipo técnico correspondiente.</p>
    </div>
    <div>
        <a href="/client/dashboard" class="btn btn-outline-secondary btn-sm d-inline-flex align-items-center gap-1.5 rounded-pill px-3">
            <i class="fas fa-arrow-left"></i>
            <span>Volver a mis tickets</span>
        </a>
    </div>
</div>

<div class="row g-4">
    <!-- Formulario Principal -->
    <div class="col-lg-8">
        <div class="app-card">
            <div class="app-card-header p-3 border-bottom d-flex align-items-center gap-2">
                <div class="app-card-icon-header">
                    <i class="fas fa-edit text-primary"></i>
                </div>
                <h5 class="mb-0 fw-bold" style="font-size: 0.95rem;">Detalles de la Incidencia</h5>
            </div>
            
            <div class="card-body p-3 p-md-4">
                <form action="/client/new-ticket" method="POST">
                    
                    <div class="mb-3">
                        <label class="form-label text-dark fw-semibold small">Asunto o Título Resumido <span class="text-danger">*</span></label>
                        <div class="input-group">
                            <span class="input-group-text bg-light text-muted border-end-0"><i class="fas fa-heading"></i></span>
                            <input type="text" name="asunto" class="form-control border-start-0" placeholder="Ej: Falla de conectividad en enlace principal de fibra" required autocomplete="off">
                        </div>
                        <small class="text-muted" style="font-size: 0.74rem;">Sé lo más específico posible para acelerar el triaje técnico.</small>
                    </div>

                    <div class="row g-3 mb-3">
                        <div class="col-md-6">
                            <label class="form-label text-dark fw-semibold small">Departamento / Especialidad</label>
                            <div class="input-group">
                                <span class="input-group-text bg-light text-muted border-end-0"><i class="fas fa-network-wired"></i></span>
                                <select name="department_id" class="form-select border-start-0">
                                    <option value="">Soporte General</option>
                                    <% departments.forEach(dept => { %>
                                    <option value="<%= dept.id %>"><%= dept.nombre %></option>
                                    <% }) %>
                                </select>
                            </div>
                        </div>

                        <div class="col-md-6">
                            <label class="form-label text-dark fw-semibold small">Nivel de Prioridad Estimado</label>
                            <div class="input-group">
                                <span class="input-group-text bg-light text-muted border-end-0"><i class="fas fa-exclamation-triangle"></i></span>
                                <select name="prioridad" class="form-select border-start-0">
                                    <option value="baja">Baja — Consultas o tareas menores</option>
                                    <option value="media" selected>Media — Afectación parcial normal</option>
                                    <option value="alta">Alta — Impacto operativo significativo</option>
                                    <option value="critica">Crítica — Caída total de servicio</option>
                                </select>
                            </div>
                        </div>
                    </div>

                    <div class="mb-4">
                        <label class="form-label text-dark fw-semibold small">Descripción Detallada y Evidencias <span class="text-danger">*</span></label>
                        <textarea name="mensaje" class="form-control" rows="7" placeholder="Por favor detalla:&#10;1. ¿Qué suceso o anomalía observas?&#10;2. ¿A qué equipos, sedes o usuarios afecta?&#10;3. ¿Qué pasos ya se han intentado para mitigar?" required></textarea>
                    </div>

                    <div class="d-flex justify-content-between align-items-center pt-2 border-top">
                        <a href="/client/dashboard" class="btn btn-light border text-muted btn-sm px-3">
                            Cancelar
                        </a>
                        <button type="submit" class="btn btn-primary btn-cta d-inline-flex align-items-center gap-2 shadow-sm">
                            <i class="fas fa-paper-plane"></i>
                            <span>Registrar y Despachar Ticket</span>
                        </button>
                    </div>

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

    <!-- Panel Lateral Informativo -->
    <div class="col-lg-4">
        
        <!-- Tarjeta del Bot de Soporte -->
        <div class="app-card mb-3 p-3 text-center bg-gradient-light border">
            <img src="/img/bot-soporte.svg" alt="Bot Soporte" width="68" height="68" class="mb-2 bot-avatar-img">
            <h6 class="fw-bold text-dark mb-1">Mesa de Ayuda SIGMA</h6>
            <p class="text-muted small mb-2" style="font-size: 0.78rem;">
                Tu ticket entrará inmediatamente en nuestra cola de triaje automatizada.
            </p>
            <div class="d-inline-flex align-items-center gap-1.5 bot-status-pill" style="font-size: 0.72rem; padding: 0.25rem 0.65rem;">
                <span class="bot-status-dot"></span>
                <span>Tiempo estimado de respuesta: &lt; 15 min</span>
            </div>
        </div>

        <!-- Tarjeta de Buenas Prácticas -->
        <div class="app-card p-3">
            <h6 class="fw-bold text-dark mb-2" style="font-size: 0.85rem;">
                <i class="fas fa-lightbulb text-warning me-1.5"></i> Consejos para agilizar
            </h6>
            <ul class="list-unstyled small text-muted mb-0 d-flex flex-column gap-2" style="font-size: 0.78rem;">
                <li class="d-flex align-items-start gap-2">
                    <i class="fas fa-check text-success mt-1"></i>
                    <span>Indica marcas, modelos o números de serie si corresponde a hardware.</span>
                </li>
                <li class="d-flex align-items-start gap-2">
                    <i class="fas fa-check text-success mt-1"></i>
                    <span>Si es una sede remota, especifica dirección o persona de contacto en sitio.</span>
                </li>
                <li class="d-flex align-items-start gap-2">
                    <i class="fas fa-check text-success mt-1"></i>
                    <span>Podrás adjuntar respuestas o consultar avances en tiempo real desde tu panel.</span>
                </li>
            </ul>
        </div>

    </div>
</div>

<%- include('../partials/footer') %>