@extends('layouts.app')

@section('content')
<div class="container-fluid">
    <div class="row mb-4">
        <div class="col-12">
            <h1 class="page-title">
                <i class="bi bi-question-circle"></i> Centro de Ayuda
            </h1>
            <p class="text-muted">Encuentra respuestas y guías para usar InnoScale</p>
        </div>
    </div>

    <!-- Búsqueda Rápida -->
    <div class="row mb-4">
        <div class="col-lg-8 mx-auto">
            <div class="card shadow-sm">
                <div class="card-body">
                    <div class="input-group input-group-lg">
                        <span class="input-group-text"><i class="bi bi-search"></i></span>
                        <input type="text" class="form-control" placeholder="¿En qué podemos ayudarte?" id="helpSearch">
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <!-- Primeros Pasos -->
        <div class="col-lg-6 mb-4">
            <div class="card shadow-sm h-100">
                <div class="card-header bg-primary text-white">
                    <h5 class="mb-0"><i class="bi bi-rocket-takeoff"></i> Primeros Pasos</h5>
                </div>
                <div class="card-body">
                    <div class="list-group list-group-flush">
                        <a href="#crear-ticket" class="list-group-item list-group-item-action" data-section="crear-ticket">
                            <i class="bi bi-plus-circle text-primary"></i> Cómo crear un ticket
                        </a>
                        <a href="#seguimiento" class="list-group-item list-group-item-action" data-section="seguimiento">
                            <i class="bi bi-eye text-primary"></i> Hacer seguimiento a mis tickets
                        </a>
                        <a href="#prioridades" class="list-group-item list-group-item-action" data-section="prioridades">
                            <i class="bi bi-exclamation-triangle text-primary"></i> Entender las prioridades
                        </a>
                        <a href="#adjuntos" class="list-group-item list-group-item-action" data-section="adjuntos">
                            <i class="bi bi-paperclip text-primary"></i> Adjuntar archivos
                        </a>
                    </div>
                </div>
            </div>
        </div>

        <!-- Características -->
        <div class="col-lg-6 mb-4">
            <div class="card shadow-sm h-100">
                <div class="card-header bg-success text-white">
                    <h5 class="mb-0"><i class="bi bi-stars"></i> Características</h5>
                </div>
                <div class="card-body">
                    <div class="list-group list-group-flush">
                        <a href="#paleta-comandos" class="list-group-item list-group-item-action" data-section="paleta-comandos">
                            <i class="bi bi-command text-success"></i> Paleta de Comandos (Ctrl+K)
                        </a>
                        <a href="#modo-oscuro" class="list-group-item list-group-item-action" data-section="modo-oscuro">
                            <i class="bi bi-moon text-success"></i> Modo Oscuro
                        </a>
                        <a href="#notificaciones" class="list-group-item list-group-item-action" data-section="notificaciones">
                            <i class="bi bi-bell text-success"></i> Sistema de Notificaciones
                        </a>
                        <a href="#comentarios" class="list-group-item list-group-item-action" data-section="comentarios">
                            <i class="bi bi-chat-dots text-success"></i> Comentarios y Conversaciones
                        </a>
                    </div>
                </div>
            </div>
        </div>

        <!-- Guías por Rol -->
        <div class="col-lg-6 mb-4">
            <div class="card shadow-sm h-100">
                <div class="card-header bg-info text-white">
                    <h5 class="mb-0"><i class="bi bi-people"></i> Guías por Rol</h5>
                </div>
                <div class="card-body">
                    <div class="accordion" id="rolesAccordion">
                        <!-- Solicitante -->
                        <div class="accordion-item">
                            <h2 class="accordion-header">
                                <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#solicitante">
                                    <i class="bi bi-person"></i> &nbsp; Solicitante
                                </button>
                            </h2>
                            <div id="solicitante" class="accordion-collapse collapse show" data-bs-parent="#rolesAccordion">
                                <div class="accordion-body">
                                    <ul>
                                        <li>Crear y hacer seguimiento de tickets</li>
                                        <li>Agregar comentarios y archivos</li>
                                        <li>Ver el estado de resolución</li>
                                        <li>Cerrar tickets resueltos</li>
                                    </ul>
                                </div>
                            </div>
                        </div>

                        <!-- Responsable -->
                        <div class="accordion-item">
                            <h2 class="accordion-header">
                                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#responsable">
                                    <i class="bi bi-wrench"></i> &nbsp; Responsable/Técnico
                                </button>
                            </h2>
                            <div id="responsable" class="accordion-collapse collapse" data-bs-parent="#rolesAccordion">
                                <div class="accordion-body">
                                    <ul>
                                        <li>Gestionar tickets asignados</li>
                                        <li>Cambiar estados y prioridades</li>
                                        <li>Registrar tiempo de trabajo</li>
                                        <li>Resolver y documentar soluciones</li>
                                    </ul>
                                </div>
                            </div>
                        </div>

                        <!-- Administrador -->
                        <div class="accordion-item">
                            <h2 class="accordion-header">
                                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#admin">
                                    <i class="bi bi-shield-check"></i> &nbsp; Administrador
                                </button>
                            </h2>
                            <div id="admin" class="accordion-collapse collapse" data-bs-parent="#rolesAccordion">
                                <div class="accordion-body">
                                    <ul>
                                        <li>Gestión completa del sistema</li>
                                        <li>Administrar usuarios y roles</li>
                                        <li>Configurar proyectos y SLAs</li>
                                        <li>Acceso a reportes y estadísticas</li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Preguntas Frecuentes -->
        <div class="col-lg-6 mb-4">
            <div class="card shadow-sm h-100">
                <div class="card-header bg-warning text-dark">
                    <h5 class="mb-0"><i class="bi bi-question-octagon"></i> Preguntas Frecuentes</h5>
                </div>
                <div class="card-body">
                    <div class="accordion" id="faqAccordion">
                        <div class="accordion-item">
                            <h2 class="accordion-header">
                                <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#faq1">
                                    ¿Cómo cambio mi contraseña?
                                </button>
                            </h2>
                            <div id="faq1" class="accordion-collapse collapse show" data-bs-parent="#faqAccordion">
                                <div class="accordion-body">
                                    Ve a <strong>Mi Perfil</strong> desde el menú de usuario y completa la sección "Cambiar Contraseña".
                                </div>
                            </div>
                        </div>

                        <div class="accordion-item">
                            <h2 class="accordion-header">
                                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#faq2">
                                    ¿Qué significa cada prioridad?
                                </button>
                            </h2>
                            <div id="faq2" class="accordion-collapse collapse" data-bs-parent="#faqAccordion">
                                <div class="accordion-body">
                                    <ul>
                                        <li><strong>Baja:</strong> Consultas generales</li>
                                        <li><strong>Media:</strong> Problemas que afectan el trabajo</li>
                                        <li><strong>Alta:</strong> Bloqueo de funciones importantes</li>
                                        <li><strong>Crítica:</strong> Sistema caído o pérdida de datos</li>
                                    </ul>
                                </div>
                            </div>
                        </div>

                        <div class="accordion-item">
                            <h2 class="accordion-header">
                                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#faq3">
                                    ¿Cómo uso la paleta de comandos?
                                </button>
                            </h2>
                            <div id="faq3" class="accordion-collapse collapse" data-bs-parent="#faqAccordion">
                                <div class="accordion-body">
                                    Presiona <kbd>Ctrl</kbd> + <kbd>K</kbd> (o <kbd>Cmd</kbd> + <kbd>K</kbd> en Mac) para abrir la paleta de comandos y buscar rápidamente tickets, proyectos o usuarios.
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Contacto y Soporte -->
        <div class="col-12">
            <div class="card shadow-sm">
                <div class="card-body text-center py-5">
                    <i class="bi bi-headset" style="font-size: 3rem; color: var(--primary-color);"></i>
                    <h3 class="mt-3">¿Necesitas más ayuda?</h3>
                    <p class="text-muted">Nuestro equipo de soporte está disponible para ayudarte</p>
                    <div class="d-flex justify-content-center gap-3 mt-4">
                        <a href="mailto:soporte@innoscale.com" class="btn btn-primary">
                            <i class="bi bi-envelope"></i> Enviar Email
                        </a>
                        <a href="{{ route('tickets.create') }}" class="btn btn-outline-primary">
                            <i class="bi bi-ticket"></i> Crear Ticket de Soporte
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
.list-group-item-action {
    transition: all 0.2s;
}

.list-group-item-action:hover {
    background-color: var(--hover-bg);
    transform: translateX(5px);
}

kbd {
    background-color: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 3px;
    padding: 2px 6px;
    font-size: 0.875rem;
}
</style>
@endsection