<?php
require_once("../app/functions.php");
if (comprobar_override(str_replace($_SERVER['DOCUMENT_ROOT'], '', __FILE__))) exit;
$pag = basename($_SERVER['PHP_SELF']);

gen_plantilla(true, $pag, true, true, 'Documentación', true, true);
$ico = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640" class="dorado"><path d="M320 576C461.4 576 576 461.4 576 320C576 178.6 461.4 64 320 64C178.6 64 64 178.6 64 320C64 461.4 178.6 576 320 576zM288 224C288 206.3 302.3 192 320 192C337.7 192 352 206.3 352 224C352 241.7 337.7 256 320 256C302.3 256 288 241.7 288 224zM280 288L328 288C341.3 288 352 298.7 352 312L352 400L360 400C373.3 400 384 410.7 384 424C384 437.3 373.3 448 360 448L280 448C266.7 448 256 437.3 256 424C256 410.7 266.7 400 280 400L304 400L304 336L280 336C266.7 336 256 325.3 256 312C256 298.7 266.7 288 280 288z"/></svg>';
?>
<section id="documentacion" class="cristal" <?= (!get_config_usuario($_SESSION['id_usuario'], 'reducir_efectos_movimiento')) ? 'style="view-transition-name: cristal;"' : '' ?>>
    <h1 class="resaltado flex row supercentrado"><span class="animacion-izq-drch">📖</span> Documentación</h1>
    <section class="flex row gap05 wrap supercentrado" style="max-width: 50rem;">
        <a class="btn-s" href="#fichador">Fichador</a>
        <a class="btn-s" href="#fichador-masivo">Fichador masivo</a>
        <a class="btn-s" href="#inicio">Inicio</a>
        <a class="btn-s" href="#calendario-info">Calendario</a>
        <?php if ($_SESSION['tipo_usuario'] == 'admin' || $_SESSION['tipo_usuario'] == 'inspector'): ?>
            <a class="btn-s" href="#exportar">Exportar</a>
            <a class="btn-s" href="#aprobaciones">Aprobaciones</a>
            <a class="btn-s" href="#documentos">Documentos</a>
            <a class="btn-s" href="#horas-acumuladas">Horas acumuladas</a>
            <a class="btn-s" href="#vacaciones">Vacaciones</a>
            <a class="btn-s" href="#festivos">Festivos</a>
            <a class="btn-s" href="#empleados">Empleados</a>
            <a class="btn-s" href="#grupos">Grupos</a>

            <a class="btn-s" href="#motivos">Motivos</a>
            <?php if ($_SESSION['tipo_usuario'] == 'admin'): ?>
            <a class="btn-s" href="#perfil">Perfil</a>
            <?php endif; ?>
            <a class="btn-s" href="#ajustes">Ajustes</a>
        <?php endif;
        if ($_SESSION['tipo_usuario'] == 'empleado'): ?>
            <a class="btn-s" href="#aprobaciones">Aprobaciones</a>
            <a class="btn-s" href="#documentos">Documentos</a>
            <a class="btn-s" href="#horas-extras-empleado">Horas extras</a>

            <a class="btn-s" href="#vacaciones-empleado">Vacaciones</a>
            <a class="btn-s" href="#motivos-empleado">Motivos</a>
            <a class="btn-s" href="#perfil-empleado">Perfil</a>
        <?php endif; ?>
    </section>
    <h1>Empleado</h1>
    <article class="cristal" id="fichador">
        <h2><?= $ico ?>Fichador</h2>
        <section class="flex row gap05 row-column">
            <p>El fichador se accede desde la aplicación, también se puede acceder desde un enlace con una clave encriptada, esta es la pantalla del fichador principal. Es sencillo, para fichar seleccionas el empleado, introduces el pin y le das a fichar.</p>
            <img class="img-documentacion" src="<?= SITIO_CARPETA ?>/assets/img/documentacion/fichador.webp">
        </section>
    </article>
    <article class="cristal" id="fichador-masivo">
        <h2><?= $ico ?>Fichador masivo</h2>
        <section class="flex row gap05 row-column">
            <img class="img-documentacion" src="<?= SITIO_CARPETA ?>/assets/img/documentacion/fichador_masivo.webp">
            <p>En el caso de que esté activado el fichador masivo, saldrá un buscador, en vez de mostrar directamente los empleados. Escribe el nombre del empleado, no es necesario que esté completo, puedes utilizar el autocompletado del teclado.</p>
        </section>
    </article>
    <?php if ($_SESSION['tipo_usuario'] == 'admin' || $_SESSION['tipo_usuario'] == 'inspector'): ?>
        <h1>Administrador</h1>
        <article class="cristal" id="inicio">
            <h2><?= $ico ?>Inicio</h2>
            <section class="flex column gap05">
                <p class="p-completo">En la pantalla principal podrás revisar y gestionar los registros de los empleados, puedes crear un registro, modificarlo o eliminarlo, todas estas acciones serán registradas en <a class="enlace" href="#aprobaciones">aprobaciones</a>. Las horas en rojo indican que el empleado a una hora que no corresponde con su horario, con un margen de gracia de 15 minutos por defecto. Si el registro de horas son impares, indicará que todavía el empleado está trabajando. La letra "M" indica que ha habido una modificación en ese registro, si te pones encima con el ratón o le das, saldrá un mensaje indicando la hora original.</p>
                <img class="img-documentacion img-completo" src="<?= SITIO_CARPETA ?>/assets/img/documentacion/inicio.webp">
            </section>
        </article>
        <article class="cristal" id="calendario-info">
            <h2><?= $ico ?>Calendario</h2>
            <section class="flex column gap05">
                <p class="p-completo">Se ha incorporado una vista calendario en el que podrás visualizar más sencillamente por cada empleado los registros (aquí podrás visualizar también los festivos que deberás agregar), por defecto, saldrán los registros del primer empleado, aquí también podrás gestionar los registros. Se puede acceder desde la página inical dándole al botón de vista calendario.</p>
                <img class="img-documentacion img-completo" src="<?= SITIO_CARPETA ?>/assets/img/documentacion/calendario.webp">
            </section>
        </article>
        <article class="cristal" id="exportar">
            <h2><?= $ico ?>Exportar</h2>
            <section class="flex column gap05">
                <p class="p-completo">Se puede exportar los registros a PDF y CSV, introduces los datos de búsqueda y seleccionar un botón al formato que deseas exportar, lo puedes exportar en dos vistas, la vista por empleados que es una hoja por empleado, o por fechas, que es ordenado por fecha.</p>
                <img class="img-documentacion img-completo" src="<?= SITIO_CARPETA ?>/assets/img/documentacion/exportar.webp">
                <h3>Exportar PDF por empleado</h3>
                <img class="img-documentacion img-completo" src="<?= SITIO_CARPETA ?>/assets/img/documentacion/exportar_pdf_empleado.webp">
                <h3>Exportar PDF por fechas</h3>
                <img class="img-documentacion img-completo" src="<?= SITIO_CARPETA ?>/assets/img/documentacion/exportar_pdf_fechas.webp">
            </section>
        </article>
        <article class="cristal" id="aprobaciones">
            <h2><?= $ico ?>Aprobaciones</h2>
            <section class="flex column gap05">
                <p class="p-completo">Toda creación, modificación o eliminación de un registro, se quedará registrado para que el empleado lo pueda aprobar o rechazar. En esta vista podrás ver cuales son los registros pendientes, aprobador o no aprobados. Las modificaciones se pueden ver desde los registros. <a href="./tables/aprobaciones" class="enlace">Mirar aprobaciones</a>.</p>
                <img class="img-documentacion img-completo" src="<?= SITIO_CARPETA ?>/assets/img/documentacion/aprobaciones.webp">
            </section>
        </article>
        <article class="cristal" id="documentos">
            <h2><?= $ico ?>Documentos</h2>
            <section class="flex column gap05 supercentrado">
                <p class="p-completo">Ahora la aplicación puedes subir las nóminas y archivos. Se ha separado en dos pestañas, se puede subir en los siguientes formatos: pdf, doc, docx, odt, xls, xlsx, csv, txt e imágenes. Máximo 50mb. Para subir una nómina o archivo, ves a <a href="./tables/documentos" class="enlace">documentos</a>, selecciona un empleado y le das a subir nómina o documento, puedes establecer un alias para que sea más sencillo de localizar dicho documento. Una vez subido tanto tú, el inspector y los empleados tendrán acceso a dichos archivos. Los empleados puedes subir archivos (no pueden subir nóminas).</p>
                <img class="img-documentacion" src="<?= SITIO_CARPETA ?>/assets/img/documentacion/documentos.webp">
            </section>
        </article>
        <article class="cristal" id="horas-acumuladas">
            <h2><?= $ico ?>Horas acumuladas</h2>
            <section class="flex column gap05 supercentrado">
                <p class="p-completo">El sistema comprueba cada día las horas realizadas comparando con el horario establecido en el empleado o grupo en el que esté, si hace de más se sumará el restante en la bolsa de horas, si hace de menos se resparán, esta última es una opción que puedes desactivar desde <a href="./ajustes" class="enlace">ajustes</a>. Se visualizarán solo los empleados con horas positivas, y puedes canjear las horas, además, puedes añadir una nota que se guardará de forma interna. <a href="./forms/horas_acumuladas" class="enlace">Ver horas acumuladas</a></p>
                <img class="img-documentacion" src="<?= SITIO_CARPETA ?>/assets/img/documentacion/horas_acumuladas.webp">
            </section>
        </article>
        <article class="cristal" id="vacaciones">
            <h2><?= $ico ?>Vacaciones</h2>
            <section class="flex column gap05 supercentrado">
                <p class="p-completo">El sistema de vacaciones permite gestionar las solicitudes de días libres de los empleados. Los empleados pueden solicitar vacaciones indicando las fechas de inicio y fin, junto con un motivo opcional. Los administradores pueden ver todas las solicitudes, filtrarlas por grupo, empleado, estado o rango de fechas, y aprobar o rechazar cada solicitud.</p>
                <h3>Estados de las solicitudes</h3>
                <ul style="text-align:left; max-width:40rem;">
                    <li><strong>Pendiente:</strong> La solicitud está esperando revisión del administrador.</li>
                    <li><strong>Aprobada:</strong> El administrador ha aprobado la solicitud de vacaciones.</li>
                    <li><strong>Rechazada:</strong> El administrador ha rechazado la solicitud.</li>
                </ul>
                <p class="p-completo">Los empleados pueden cancelar sus solicitudes pendientes antes de que sean procesadas. Una vez aprobada o rechazada, la solicitud no puede ser modificada. <a href="./forms/vacaciones" class="enlace">Ver solicitudes de vacaciones</a></p>
            </section>
        </article>
        <article class="cristal" id="festivos">
            <h2><?= $ico ?>Festivos</h2>
            <section class="flex column gap05 supercentrado">
                <p class="p-completo">Aquí puedes agregar los días no laborables y vacaciones de los empleados, lo puedes agregar por grupo o empleado. En el calendario podrás visualizar estos días.</p>
                <img class="img-documentacion img-completo" src="<?= SITIO_CARPETA ?>/assets/img/documentacion/festivos.webp">
                <h3>Ejemplo de un día festivo</h3>
                <img class="img-documentacion" src="<?= SITIO_CARPETA ?>/assets/img/documentacion/festivos_crear.webp">
            </section>
        </article>
        <article class="cristal" id="empleados">
            <h2><?= $ico ?>Empleados</h2>
            <p class="p-completo">En <a href="./tables/empleados" class="enlace">empleados</a> podrás añadir y gestionar los empleados, ahora los empleados es obligatorio crearle un usuario, así que si provienes de una versión anterior deberás configurarlo modificando el empleado. En este apartado puedes ver los datos del empleado, lo que incluye; nombre, apellidos, grupo, tipo de contrato, correo, el pin actual, horario, etc. Para dar de baja no elimines el empleado, dentro de modificar empleado puedes darlo de baja con la fecha que se hizo efectiva. Al eliminar un empleado no eliminas sus registros.</p>
            <section class="flex row gap05 row-column">
                <img class="img-documentacion " src="<?= SITIO_CARPETA ?>/assets/img/documentacion/empleados.webp">
                <img class="img-documentacion" src="<?= SITIO_CARPETA ?>/assets/img/documentacion/empleado_crear.webp">
            </section>
        </article>
        <article class="cristal" id="grupos">
            <h2><?= $ico ?>Grupos</h2>
            <p class="p-completo">En <a href="./tables/grupos" class="enlace">grupos</a> podrás añadir y gestionar los grupos, todos los empleados están en el grupo de por defecto, que es fijo. En el caso de que el empleado no tenga horario establecido, se cogerá las horas que debe hacer del grupo asignado.</p>
            <img class="img-documentacion img-completo" src="<?= SITIO_CARPETA ?>/assets/img/documentacion/grupos.webp">

            <p class="p-completo">Existen tres tipos de grupos, el grupo fijo, que es el clásico de establecer el horario de cada día del empleado, así podrás comprobar también la puntualidad. Rellena primero las primeras entradas y salidas, primero la entrada y salida 1, y después el resto si tiene, sino déjalo en blanco.</p>
            <img class="img-documentacion img-completo " src="<?= SITIO_CARPETA ?>/assets/img/documentacion/grupo_crear_fijo.webp">

            <p class="p-completo">Y luego están los flexibles que puede ser diario o semanal. El flexible diario, puedes establecer los días y horas que trabaja.</p>
            <img class="img-documentacion img-completo" src="<?= SITIO_CARPETA ?>/assets/img/documentacion/grupos_crear_flexible_diario.webp">

            <p class="p-completo">El flexible semanal, puedes establecer las horas que debe hacer a la semana y los días en total que trabaja.</p>
            <img class="img-documentacion img-completo" src="<?= SITIO_CARPETA ?>/assets/img/documentacion/grupos_crear_flexible_semanal.webp">
        </article>
        <article class="cristal" id="motivos">
            <h2><?= $ico ?>Motivos</h2>
            <p class="p-completo">Los motivos sirven para explicar por qué se ha modificado o creado un registro. Esta información también será visible para el inspector. Es importante definir claramente los motivos para mantener un registro preciso de las incidencias y cambios manuales. Puedes gestionar los motivos desde la sección de <a href="./tables/motivos" class="enlace">motivos</a>.</p>
        </article>
        <?php if ($_SESSION['tipo_usuario'] == 'admin'): ?>
        <article class="cristal" id="perfil">
            <h2><?= $ico ?>Perfil</h2>
            <p class="p-completo">En la sección de <a href="./perfil" class="enlace">Mi Perfil</a> puedes ver tu información de usuario. Si eres un empleado, podrás visualizar tu nombre, grupo asignado y editar tu correo electrónico y teléfono de contacto. Además, todos los usuarios pueden cambiar su contraseña por una nueva (mínimo 6 caracteres, conteniendo al menos una letra y un número).</p>
        </article>
        <?php endif; ?>
        <article class="cristal" id="ajustes">
            <h2><?= $ico ?>Ajustes</h2>
            <p class="p-completo">Aquí puedes configurar la aplicación, está ordenado por secciones y cada ajuste si te pones encima del icono de información te explica lo que hace.</p>
            <img class="img-documentacion img-completo" src="<?= SITIO_CARPETA ?>/assets/img/documentacion/ajustes.webp">
        </article>
    <?php
    else: ?>
        <article class="cristal" id="inicio">
            <h2><?= $ico ?>Inicio</h2>
            <section class="flex column gap05">
                <p class="p-completo">En la pantalla de inicio puedes fichar y ver tus registros. La letra "M" indica que ha habido una modificación en ese registro, si te pones encima con el ratón o le das, saldrá un mensaje indicando la hora original.</p>
                <img class="img-documentacion img-completo" src="<?= SITIO_CARPETA ?>/assets/img/documentacion/inicio_e.webp">
            </section>
        </article>
        <article class="cristal" id="calendario-info">
            <h2><?= $ico ?>Calendario</h2>
            <section class="flex column gap05">
                <p class="p-completo">Se ha incorporado una vista calendario, así podrás visualizar más sencillamente los registros (aquí podrás visualizar también los festivos y vacaciones). Se puede acceder desde la página inical dándole al botón de vista calendario.</p>
                <img class="img-documentacion img-completo" src="<?= SITIO_CARPETA ?>/assets/img/documentacion/calendario_e.webp">
            </section>
        </article>
        <article class="cristal" id="aprobaciones">
            <h2><?= $ico ?>Aprobaciones</h2>
            <section class="flex column gap05">
                <p class="p-completo">Toda creación, modificación o eliminación de un registro, se quedará registrado para que el empleado lo pueda aprobar o rechazar. En esta vista podrás ver cuales son los registros pendientes, aprobados o no aprobados. Las modificaciones se pueden ver desde los registros. <a href="./tables/aprobaciones" class="enlace">Mirar aprobaciones</a>. Aquí debes aprobar o rechazar dichos cambios.</p>
                <img class="img-documentacion img-completo" src="<?= SITIO_CARPETA ?>/assets/img/documentacion/aprobaciones_e.webp">
            </section>
        </article>
        <article class="cristal" id="documentos">
            <h2><?= $ico ?>Documentos</h2>
            <section class="flex column gap05 supercentrado">
                <p class="p-completo">Aquí podrás ver las nóminas y documentos que sube el administrador. También puedes subir tus propios documentos, máximo 50mb, se pueden documentos e imágenes.</p>
                <img class="img-documentacion" src="<?= SITIO_CARPETA ?>/assets/img/documentacion/documentos_e.webp">
            </section>
        </article>
        <article class="cristal" id="horas-extras-empleado">
            <h2><?= $ico ?>Horas extras</h2>
            <section class="flex column gap05 supercentrado">
                <p class="p-completo">Desde esta sección puedes consultar tus horas extras acumuladas. El sistema calcula automáticamente la diferencia entre las horas que has trabajado y las horas establecidas en tu horario. Si trabajas más horas de las asignadas, se acumulan como horas extras positivas. Puedes ver tu saldo actual de horas pero no gestionarlas, eso lo hace el administrador.</p>
                <p class="p-completo"><a href="./forms/horas_acumuladas" class="enlace">Ver mis horas extras</a></p>
            </section>
        </article>
        <article class="cristal" id="vacaciones-empleado">
            <h2><?= $ico ?>Vacaciones</h2>
            <section class="flex column gap05 supercentrado">
                <p class="p-completo">Desde aquí puedes solicitar tus días de vacaciones. Pulsa en "Nueva solicitud", selecciona la fecha de inicio y fin de tus vacaciones, y opcionalmente añade un motivo. Una vez enviada, la solicitud quedará en estado pendiente hasta que el administrador la apruebe o rechace.</p>
                <h3>Estados de tus solicitudes</h3>
                <ul style="text-align:left; max-width:40rem;">
                    <li><strong>Pendiente:</strong> Tu solicitud está esperando revisión. Puedes cancelarla mientras esté en este estado.</li>
                    <li><strong>Aprobada:</strong> Tu solicitud ha sido aprobada. ¡Disfruta tus vacaciones!</li>
                    <li><strong>Rechazada:</strong> Tu solicitud ha sido rechazada por el administrador.</li>
                </ul>
                <p class="p-completo">Puedes filtrar tus solicitudes por estado o rango de fechas para encontrarlas más fácilmente. <a href="./forms/vacaciones" class="enlace">Ver mis vacaciones</a></p>
            </section>
        </article>
        <article class="cristal" id="motivos-empleado">
            <h2><?= $ico ?>Motivos</h2>
            <section class="flex column gap05 supercentrado">
                <p class="p-completo">Cuando veas un registro modificado o creado manualmente, el "motivo" indica la razón de dicho cambio. Esto permite justificar correcciones en los fichajes o la creación de registros por incidencias o ausencias.</p>
            </section>
        </article>
        <article class="cristal" id="perfil-empleado">
            <h2><?= $ico ?>Perfil</h2>
            <section class="flex column gap05 supercentrado">
                <p class="p-completo">En la sección de <a href="./perfil" class="enlace">Mi Perfil</a> puedes consultar tus datos personales (nombre, usuario, grupo). Desde aquí puedes actualizar tu correo electrónico y teléfono de contacto, así como cambiar tu contraseña de acceso de forma segura.</p>
            </section>
        </article>
    <?php endif; ?>

</section>