<!doctype html>
<html lang="es">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Ayuda - Administrador</title>
    <script>
        (function () {
            const root = document.documentElement;
            root.classList.add('sidebar-nav-pending');

            const releasePending = function () {
                root.classList.remove('sidebar-nav-pending');
            };

            const timeoutId = window.setTimeout(releasePending, 1200);

            if (document.querySelector('.admin-sidebar')) {
                window.clearTimeout(timeoutId);
                releasePending();
                return;
            }

            const observer = new MutationObserver(function () {
                if (!document.querySelector('.admin-sidebar')) {
                    return;
                }

                observer.disconnect();
                window.clearTimeout(timeoutId);
                releasePending();
            });

            observer.observe(document.documentElement, {
                childList: true,
                subtree: true,
            });
        })();
    </script>
    <style>
        @media (min-width: 992px) {
            html.sidebar-nav-pending main {
                visibility: hidden;
            }
        }
    </style>
    @vite(['resources/css/app.css', 'resources/js/app.js'])
</head>
<body id="top" class="d-flex flex-column min-vh-100 bg-light">
    <header class="app-navbar">
        <nav class="navbar navbar-expand-lg">
            <div class="container">
                <a class="navbar-brand d-flex align-items-center" href="/administrador/dashboard">
                    <div class="d-flex align-items-center justify-content-center" style="width: 130px; height: 52px;">
                        <img src="{{ asset('images/logo.png') }}" alt="Logo" class="img-fluid" style="max-height: 70px; width: auto; object-fit: contain;">
                    </div>
                    <span class="app-navbar-greeting ms-2">¡Hola, Administrador!</span>
                </a>

                <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#menuPrincipal" aria-controls="menuPrincipal" aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>

                <div class="collapse navbar-collapse" id="menuPrincipal">
                    <ul class="navbar-nav mx-auto mb-2 mb-lg-0">
                        <li class="nav-item"><a class="btn app-navbar-link" href="/administrador/profesionales">Profesionales</a></li>
                        <li class="nav-item"><a class="btn app-navbar-link" href="/administrador/dashboard">Mis Datos</a></li>
                        <li class="nav-item"><a class="btn app-navbar-link" href="/administrador/contenido-web">Contenido</a></li>
                        <li class="nav-item"><a class="btn app-navbar-link" href="/administrador/emails">Emails</a></li>
                        <li class="nav-item"><a class="btn app-navbar-link" href="/administrador/logs">Logs</a></li>
                        <li class="nav-item"><a class="btn app-navbar-link" href="/administrador/fallas">Fallas</a></li>
                        <li class="nav-item"><a class="btn app-navbar-link" href="/administrador/bugs">Bugs</a></li>
                        <li class="nav-item"><a class="btn app-navbar-link" href="/administrador/backups">Backup</a></li>
                    </ul>

                    <a class="btn app-navbar-link" href="/logout">Cerrar Sesion</a>
                </div>
            </div>
        </nav>
    </header>

    <main class="container py-4 flex-grow-1">
        <div class="row justify-content-center">
            <div class="col-12 col-xl-10">
                <div class="d-flex justify-content-between align-items-center mb-3">
                    <h1 class="h4 mb-0">Ayuda para usar el sistema (Administrador)</h1>
                    <a href="/administrador/dashboard" class="btn btn-outline-secondary btn-sm">Volver</a>
                </div>

                <div class="card border shadow-sm mb-3">
                    <div class="card-body">
                        <h2 class="h6">Inicio de sesión</h2>
                        <p class="mb-2">Para iniciar sesión primero debe poseer las credenciales de acceso.</p>
                        <p class="mb-0">En la vista de inicio de sesión de profesionales, el administrador depositará sus credenciales de acceso, y si son correctas podrá acceder al sistema.</p>
                    </div>
                </div>

                <div class="card border shadow-sm mb-3">
                    <div class="card-body">
                        <h2 class="h6">Recuperación de credenciales</h2>
                        <p class="mb-0">En caso de olvidar su usuario o contraseña, deberá presionar el botón debajo de la vista de inicio de sesión de profesionales "Recuperación para administrador" y luego de llenar un pequeño formulario, tendrá la posibilidad de cambiar su usuario y contraseña mediante un enlace que se le enviará a su correo electrónico (debe ser el mismo correo con el que está registrado en el sistema).</p>
                    </div>
                </div>

                <div class="card border shadow-sm mb-3">
                    <div class="card-body">
                        <h2 class="h6">Profesionales</h2>
                        <p class="mb-2">En este apartado se podrá visualizar todos los profesionales cargados en el sistema. Se podrá buscar a un profesional particular mediante el filtro en la parte superior.</p>
                        <p class="mb-2">Dentro de cada profesional habrá tres acciones posibles: Dar de baja/alta, editar datos y asignar nuevos servicios.</p>
                        <ul class="mb-0">
                            <li><strong>Dar de baja:</strong> Al dar de baja un profesional, este no podrá ingresar al sistema ni tampoco aparecerá en los formularios de turnos.</li>
                            <li><strong>Editar datos:</strong> Se podrá editar los datos personales de cada profesional.</li>
                            <li><strong>Asignar nuevos servicios:</strong> A medida que se agreguen nuevos servicios, se podrá asignar estos servicios a los profesionales que lo presten.</li>
                        </ul>
                    </div>
                </div>

                <div class="card border shadow-sm mb-3">
                    <div class="card-body">
                        <h2 class="h6">Mis Datos</h2>
                        <p class="mb-0">Aquí se podrá editar los datos del administrador. También se podrá configurar la pregunta y respuesta secreta del administrador (la cual se le pedirá en caso de querer recuperar sus credenciales).</p>
                    </div>
                </div>

                <div class="card border shadow-sm mb-3">
                    <div class="card-body">
                        <h2 class="h6">Contenido</h2>
                        <p class="mb-2">Este apartado contiene todo lo concerniente a la información que se mostrará en la página y otras configuraciones del sistema.</p>
                        <ul class="mb-0">
                            <li><strong>Quienes somos:</strong> Aquí se podrá editar el contenido del apartado informativo "Quienes somos".</li>
                            <li><strong>Profesiones:</strong> Aquí se podrá agregar, editar y dar de baja/alta las profesiones existentes y las nuevas.</li>
                            <li><strong>Servicios:</strong> Aquí se podrá agregar, editar y dar de baja/alta los servicios existentes y los nuevos.</li>
                            <li class="mt-2"><strong>Asistente virtual:</strong> Esta sección tiene la función de editar las características y respuestas del asistente virtual.
                                <ul class="mt-1">
                                    <li><strong>Agregar nueva FAQ (preguntas frecuentes):</strong> Se podrá agregar una nueva respuesta del asistente virtual. Se le pedirá al usuario que ingrese un título, las palabras claves que puede llegar a utilizar el usuario, la prioridad (debe ser distinta a las prioridades existentes) y la respuesta que debe brindar el asistente.</li>
                                    <li><strong>Editar FAQ existentes:</strong> Aquí se podrá editar cada una de las FAQ existentes. El título, palabras clave, respuestas, prioridad y dar de baja.</li>
                                    <li><strong>Consultas sin respuestas:</strong> En este apartado se podrán visualizar las distintas preguntas de los usuarios para los que el asistente virtual no tiene una respuesta. De esta manera, se puede ir puliendo las respuestas y palabras claves del asistente virtual.</li>
                                </ul>
                            </li>
                        </ul>
                    </div>
                </div>

                <div class="card border shadow-sm mb-3">
                    <div class="card-body">
                        <h2 class="h6">Emails</h2>
                        <p class="mb-0">Acá se puede editar los mensajes que va a recibir el usuario al momento de que se le asigne un turno, se le reprograme un turno o se le cancele un turno.</p>
                    </div>
                </div>

                <div class="card border shadow-sm mb-3">
                    <div class="card-body">
                        <h2 class="h6">Logs</h2>
                        <p class="mb-0">En esta sección se podrá visualizar todos los logs del sistema (inicios de sesión, creación de profesionales, creación de clientes, pedidos de recuperación de clave, etc). También existe la posibilidad de descargar los logs en formato JSON para auditorías.</p>
                    </div>
                </div>

                <div class="card border shadow-sm mb-3">
                    <div class="card-body">
                        <h2 class="h6">Fallas</h2>
                        <p class="mb-0">En este apartado se podrán ver los distintos errores que puedan llegar desde el servidor.</p>
                    </div>
                </div>

                <div class="card border shadow-sm mb-3">
                    <div class="card-body">
                        <h2 class="h6">Bugs</h2>
                        <p class="mb-0">Aquí se podrá ver los distintos bugs que envíen los usuarios a través del botón de fallas 🐞. También se podrá marcar como "visto" cada uno de los bugs para llevar un checklist.</p>
                    </div>
                </div>

                <div class="card border shadow-sm mb-3">
                    <div class="card-body">
                        <h2 class="h6">Backups</h2>
                        <p class="mb-0">Aquí se podrá visualizar los últimos 4 backups correspondientes a los últimos 4 domingos. Se podrá descargar un zip con todo el backup generado.</p>
                    </div>
                </div>

                <div class="card border shadow-sm">
                    <div class="card-body">
                        <h2 class="h6">¿Qué hacer en caso de detectar un error en la página?</h2>
                        <p class="mb-0">Si se encuentra con un error en el sitio, agradeceríamos que lo reporte con el botón que aparece en la parte superior de la página con el símbolo 🐞. Al apretarlo se sacará una foto a su pantalla automáticamente y se le pedirá que complete un pequeño formulario explicando que fue lo que ocurrió.</p>
                    </div>
                </div>
            </div>
        </div>
    </main>

    @include('partials.reportar-falla-boton')
</body>
</html>
