<!doctype html>
<html lang="es">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Ayuda - Profesional</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">
                @php
                    $nombreSesion = trim((string) session('personal_nombre', 'Profesional'));
                    $nombreSaludo = $nombreSesion !== '' ? explode(' ', $nombreSesion)[0] : 'Profesional';
                @endphp
                <a class="navbar-brand d-flex align-items-center gap-2" href="/profesional/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="fw-semibold">¡Hola, {{ $nombreSaludo }}!</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="/profesional/dashboard">Mi Agenda</a></li>
                        <li class="nav-item"><a class="btn app-navbar-link" href="/profesional/clientes">Mis Clientes</a></li>
                        <li class="nav-item"><a class="btn app-navbar-link" href="/profesional/mis-datos">Mis Datos</a></li>
                        <li class="nav-item"><a class="btn app-navbar-link" href="/profesional/formularios">Revisar Formularios</a></li>
                        <li class="nav-item"><a class="btn app-navbar-link" href="/profesional/notificaciones">Notificaciones</a></li>
                        <li class="nav-item"><a class="btn app-navbar-link" href="/profesional/ayuda" title="Ayuda para profesionales" aria-label="Ayuda para profesionales">¿Necesitas Ayuda?</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 (Profesionales)</h1>
                    <a href="/profesional/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 credenciales de acceso que le brindará el administrador del sistema.</p>
                        <p class="mb-0">En la vista de inicio de sesión de profesionales, el profesional 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 contraseña, deberá presionar el botón debajo de la vista de inicio de sesión de profesionales "Recuperación para personal" y luego de llenar un pequeño formulario, tendrá la posibilidad de cambiar su contraseña mediante un enlace que se le enviará a su correo electrónico (debe ser el mismo correo con el que se registró en el sistema).</p>
                    </div>
                </div>

                <div class="card border shadow-sm mb-3">
                    <div class="card-body">
                        <h2 class="h6">Apartado Mi Agenda</h2>
                        <p class="mb-2">En este apartado se visualizará la agenda con todos los turnos cargados, días de atención, feriados, recesos y vacaciones. Se puede ver por día, semana o mes.</p>
                        <h3 class="h6 mt-3">Configurar mi agenda</h3>
                        <p class="mb-2">La agenda se puede configurar con el botón "configurar mi agenda". Aquí se puede personalizar los días y horarios de atención, duración de turnos, recesos, vacaciones y feriados.</p>
                        <h3 class="h6 mt-3">Agendar un turno</h3>
                        <p class="mb-2">Este botón le permite al profesional llenar un pequeño formulario para asignar un turno de forma manual.</p>
                        <h3 class="h6 mt-3">Visualización de turnos</h3>
                        <p class="mb-2">En la agenda figurarán todos los turnos del profesional. Al presionar sobre alguno de ellos, se abrirá en la parte derecha un panel con los detalles de este. En él habrá dos opciones: Cancelar turno y Reprogramar turno.</p>
                        <p class="mb-2"><strong>Cancelar turno:</strong> Si se presiona este botón, se cancelará el turno y se le notificará al damnificado sobre esta situación.</p>
                        <p class="mb-0"><strong>Reprogramar turno:</strong> Si se presiona este botón, se abrirá una ventana para poder asignar el nuevo día y horario del turno. En este caso también se le notificará al damnificado sobre la situación.</p>
                    </div>
                </div>

                <div class="card border shadow-sm mb-3">
                    <div class="card-body">
                        <h2 class="h6">Mis Clientes</h2>
                        <p class="mb-2">En esta sección se visualizarán todos los clientes correspondientes a al profesional.</p>
                        <p class="mb-2"><strong>Filtro:</strong> Para buscar un cliente se podrá hacer uso del filtro. En él se puede filtrar por DNI, nombre, apellido, correo o estado (activo o inactivo).</p>
                        <p class="mb-2">Sobre los clientes se podrán hacer tres acciones: Dar de baja/alta, editar sus datos y/o subir documentación.</p>
                        <p class="mb-2"><strong>Dar de baja/alta:</strong> Al presionar este botón, se dará de baja un cliente (ya sea porque ya no es más cliente o por otros motivos). Si el cliente está de baja, se lo podrá dar de alta nuevamente presionando el mismo botón.</p>
                        <p class="mb-2"><strong>Editar datos:</strong> En caso de que el cliente cambie sus datos o si los datos están mal cargados, se lo podrá editar con este botón.</p>
                        <p class="mb-0"><strong>Subir documentación:</strong> Al presionar este botón, se podrá visualizar los documentos cargados para ese cliente. Además, se podrá subir nueva documentación, descargar y eliminar la documentación existente.</p>
                    </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á ver los datos del profesional en cuestión. Solamente podrá visualizar sus datos, no editarlos. Para editarlos deberá comunicarle al administrador su deseo de editar sus propios datos en caso de que corresponda.</p>
                    </div>
                </div>

                <div class="card border shadow-sm mb-3">
                    <div class="card-body">
                        <h2 class="h6">Revisar Formularios</h2>
                        <p class="mb-2">En esta sección se visualizarán los formularios correspondientes a la profesión del profesional (ejemplo, si el profesional es abogado, podrá ver todos los formularios correspondientes a abogacía).</p>
                        <p class="mb-2">Podrá filtrar por nombre, correo, celular, estado, etc.</p>
                        <p class="mb-2"><strong>Visualizar formulario:</strong> Al ver un formulario, se podrá rechazar, asignar un turno manual o asignar un turno automático.</p>
                        <p class="mb-2">Al rechazar el formulario, le dará la posibilidad a otro profesional de aceptar o rechazar el formulario.</p>
                        <p class="mb-2">Al asignar un turno manual o automático, le quitará la posibilidad a otro profesional de interactuar con el formulario.</p>
                        <p class="mb-0"><strong>Aclaración:</strong> En caso de asignar un turno manual o automático, se le notificará por correo a la persona que envió el formulario los detalles de su turno.</p>
                    </div>
                </div>

                <div class="card border shadow-sm mb-3">
                    <div class="card-body">
                        <h2 class="h6">Notificaciones</h2>
                        <p class="mb-2">Aquí aparecerán las siguientes notificaciones:</p>
                        <ul class="mb-0">
                            <li>Turnos de hoy: Informará al profesional todos los turnos (si hubiera) que tendrá en el día actual.</li>
                            <li>Turnos de mañana: Informará al profesional todos los turnos (si hubiera) que tendrá en el día siguiente.</li>
                            <li>Turnos cancelados: Se le informará al profesional en caso de que un cliente cancele un turno.</li>
                        </ul>
                    </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>
