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

if (isset($_GET["id"])) {
    gen_plantilla(true, $pag, true, true, "Actualizar empleado", true, true);
    $id = filter_input(INPUT_GET, "id", FILTER_SANITIZE_NUMBER_INT);
    $datos = consulta("SELECT e.*, u.* FROM empleados AS e LEFT JOIN usuarios AS u ON e.id=u.id_empleado WHERE e.id=?;", [$id], true);
    if (empty($datos[0]['usuario'])) {
        crear_notificacion('error', 'Este empleado no tiene configurado el usuario, ahora es obligatorio');
    }
} else
    gen_plantilla(true, $pag, true, true, "Crear empleado", true, true);
?>
<section class="cristal"
    style="<?= (!get_config_usuario($_SESSION['id_usuario'], 'reducir_efectos_movimiento')) ? 'view-transition-name: cristal;' : '' ?>overflow: visible;">
    <h1 class="resaltado"><?= (isset($_GET["id"])) ? "Actualizar" : "Crear" ?> empleado</h1>
    <form name="<?= (isset($_GET["id"])) ? "Actualizar" : "Crear" ?> empleado" method="POST"
        action="<?= SITIO_CARPETA ?>/app/forms/empleado" class="flex column gap1 alineado" novalidate>
        <input type="hidden" name="csrf_token" value="<?= $_SESSION['csrf_token'] ?? '' ?>">
        <?= (isset($_GET["id"])) ? "<input type='hidden' name='id' value='" . $_GET['id'] . "'>" : "" ?>
        <section class="flex row gap05 row-column">
            <!-- Nombre -->
            <label class="flex column gap05">
                <span class="flex row gap02">
                    Nombre <span class="rojo"> *</span>
                </span>
                <input type='text' name='nombre' id='nombre' title='Introduce el nombre del empleado'
                    value='<?= (isset($_GET["id"])) ? $datos[0]["nombre"] : "" ?>' required autofocus>
            </label>
            <label class="flex column gap05">
                Apellidos
                <input type="text" name="apellidos" title="Introduce los apellidos del empleado" <?= isset($_GET["id"]) && isset($datos[0]['apellidos']) ? "value='" . $datos[0]['apellidos'] . "'" : '' ?>>
            </label>
        </section>
        <section class="flex row gap05 row-column">
            <label class="flex column gap05">
                <span class="flex row gap02" style="align-items: center;">
                    Usuario <span class="rojo"> *</span>
                    <abbr
                        title="3 a 20 caracteres. Se permiten letras (mayúsculas y minúsculas), números, guiones bajos y puntos">
                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640" class="info">
                            <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>
                    </abbr>
                </span>
                <input type='text' name='usuario' id="usuario"
                    pattern="^(?!.*[._]{2})[a-zA-Z0-9](?:[a-zA-Z0-9._]{1,18})[a-zA-Z0-9]$"
                    title='3 a 20 caracteres. Se permiten letras (mayúsculas y minúsculas), números, guiones bajos y puntos'
                    value='<?= isset($datos[0]['usuario']) && isset($datos[0]['usuario']) ? $datos[0]['usuario'] : '' ?>'
                    required>
            </label>
            <label class="flex column gap05">
                <span class="flex row gap02" style="align-items: center;">
                    Contraseña <?= !isset($datos[0]['id']) ? '<span class="rojo"> *</span>' : '' ?>
                    <abbr
                        title="Mínimo 6 caracteres. Debe contener al menos: una letra y un número. Se permiten caracteres especiales">
                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640" class="info">
                            <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>
                    </abbr>
                </span>
                <section class="flex row">
                    <input type='password' pattern="^(?=.*[a-zA-Z])(?=.*\d).{6,}$" name='contraseña' id='contraseña'
                        title='Mínimo 6 caracteres. Debe contener al menos: una letra y un número'
                        <?= !isset($datos[0]['id']) || !isset($datos[0]['contra']) ? 'required' : '' ?>>
                    <button id="toggle-contraseña" type="button" title="Mostrar/Ocultar contraseña">
                        <svg id="icon-ojo-cerrado" xmlns="http://www.w3.org/2000/svg" width="1em" height="1em"
                            viewBox="0 0 640 512">
                            <path
                                d="M38.8 5.1C28.4-3.1 13.3-1.2 5.1 9.2S-1.2 34.7 9.2 42.9l592 464c10.4 8.2 25.5 6.3 33.7-4.1s6.3-25.5-4.1-33.7L525.6 386.7c39.6-40.6 66.4-86.1 79.9-118.4c3.3-7.9 3.3-16.7 0-24.6c-14.9-35.7-46.2-87.7-93-131.1C465.5 68.8 400.8 32 320 32c-68.2 0-125 26.3-169.3 60.8L38.8 5.1zM223.1 149.5C248.6 126.2 282.7 112 320 112c79.5 0 144 64.5 144 144c0 24.9-6.3 48.3-17.4 68.7L408 294.5c8.4-19.3 10.6-41.4 4.8-63.3c-11.1-41.5-47.8-69.4-88.6-71.1c-5.8-.2-9.2 6.1-7.4 11.7c2.1 6.4 3.3 13.2 3.3 20.3c0 10.2-2.4 19.8-6.6 28.3l-90.3-70.8zM373 389.9c-16.4 6.5-34.3 10.1-53 10.1c-79.5 0-144-64.5-144-144c0-6.9 .5-13.6 1.4-20.2L83.1 161.5C60.3 191.2 44 220.8 34.5 243.7c-3.3 7.9-3.3 16.7 0 24.6c14.9 35.7 46.2 87.7 93 131.1C174.5 443.2 239.2 480 320 480c47.8 0 89.9-12.9 126.2-32.5L373 389.9z" />
                        </svg>
                        <svg id="icon-ojo-abierto" xmlns="http://www.w3.org/2000/svg" width="1em" height="1em"
                            viewBox="0 0 576 512" style="display:none;">
                            <path
                                d="M288 32c-80.8 0-145.5 36.8-192.6 80.6C48.6 156 17.3 208 2.5 243.7c-3.3 7.9-3.3 16.7 0 24.6C17.3 304 48.6 356 95.4 399.4C142.5 443.2 207.2 480 288 480s145.5-36.8 192.6-80.6c46.8-43.5 78.1-95.4 93-131.1c3.3-7.9 3.3-16.7 0-24.6c-14.9-35.7-46.2-87.7-93-131.1C433.5 68.8 368.8 32 288 32zM144 256a144 144 0 1 1 288 0 144 144 0 1 1 -288 0zm144-64c0 35.3-28.7 64-64 64c-7.1 0-13.9-1.2-20.3-3.3c-5.5-1.8-11.9 1.6-11.7 7.4c.3 6.9 1.3 13.8 3.2 20.7c13.7 51.2 66.4 81.6 117.6 67.9s81.6-66.4 67.9-117.6c-11.1-41.5-47.8-69.4-88.6-71.1c-5.8-.2-9.2 6.1-7.4 11.7c2.1 6.4 3.3 13.2 3.3 20.3z" />
                        </svg>
                    </button>
                </section>
            </label>
        </section>
        <section class="flex row gap05 row-column">
            <label class="flex column gap05">
                Correo electrónico
                <input type='email' name='email' title='Introduce el correo electrónico del empleado'
                    value='<?= isset($datos[0]['email']) && isset($datos[0]['email']) ? $datos[0]['email'] : '' ?>'>
            </label>
            <label class="flex column gap05">
                Teléfono
                <input type='text' name='telefono' id='telefono' title='Introduce el teléfono del empleado'
                    value='<?= isset($datos[0]['telefono']) && isset($datos[0]['telefono']) ? $datos[0]['telefono'] : '' ?>'>
            </label>
        </section>
        <article class="flex column gap05 row-column">
            <label class="chk">
                <input type="checkbox" class="chk" name="subcontratado" id="subcontratado" <?= (isset($_GET["id"]) && $datos[0]['subcontratado']) ? 'checked' : '' ?>>
                <svg viewBox="0 0 64 64" height="2em" width="2em">
                    <path
                        d="M 0 16 V 56 A 8 8 90 0 0 8 64 H 56 A 8 8 90 0 0 64 56 V 8 A 8 8 90 0 0 56 0 H 8 A 8 8 90 0 0 0 8 V 16 L 32 48 L 64 16 V 8 A 8 8 90 0 0 56 0 H 8 A 8 8 90 0 0 0 8 V 56 A 8 8 90 0 0 8 64 H 56 A 8 8 90 0 0 64 56 V 16"
                        pathLength="575.0541381835938" class="path"></path>
                </svg>
                Subcontratado
            </label>
        </article>
        <?php
        // Solo mostrar el selector de vincular con empleado eliminado al CREAR (no al editar)
        if (!isset($_GET["id"])):
            $empleados_eliminados = consulta("SELECT id_empleado, nombre, fecha FROM empleados_eliminados ORDER BY nombre;", [], true);
            if (!empty($empleados_eliminados)):
                ?>
                <article class="flex column gap05">
                    <label class="flex column gap05">
                        <span class="flex row gap02" style="align-items: center;">
                            Vincular con empleado eliminado
                            <abbr
                                title="Si seleccionas un empleado eliminado, el nuevo empleado usará su ID y heredará todos sus registros históricos">
                                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640" class="info">
                                    <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>
                            </abbr>
                        </span>
                        <select name="vincular_empleado_eliminado" id="vincular_empleado_eliminado">
                            <option value="">No vincular</option>
                            <?php
                            foreach ($empleados_eliminados as $emp_elim) {
                                $fecha_formateada = date('d/m/Y', strtotime($emp_elim['fecha']));
                                echo "<option value='" . $emp_elim['id_empleado'] . "'>" . $emp_elim['nombre'] . " (ID: " . $emp_elim['id_empleado'] . ", eliminado: " . $fecha_formateada . ")</option>";
                            }
                            ?>
                        </select>
                    </label>
                </article>
                <?php
            endif;
        endif;
        ?>
        <section class="flex row gap05 row-column">
            <label class="flex column gap05" id="cont_fecha_alta">
                Fecha de alta
                <input type="date" name="fecha_alta" id="fecha_alta"
                    value='<?= isset($_GET["id"]) && isset($datos[0]['fecha_alta']) ? $datos[0]['fecha_alta'] : date('Y-m-d') ?>'>
            </label>
            <!-- Grupo -->
            <label class="flex column gap05">
                <span class="flex row gap02">
                    Grupo <span class="rojo"> *</span>
                </span>
                <select name="id_grupo">
                    <?php
                    $grupos = consulta('SELECT * FROM grupos ORDER BY nombre;', [], true);
                    $grupo_empleado = null;
                    for ($i = 0; $i < count($grupos); $i++) {
                        $selected = ((isset($_GET['id']) && $datos[0]['id_grupo'] == $grupos[$i]['id']) || (!isset($_GET['id']) && ($grupos[$i]['id'] == 1)));
                        if ($selected && isset($_GET['id'])) {
                            $grupo_empleado = $grupos[$i];
                        }
                        echo '<option value="' . $grupos[$i]['id'] . '" ' . ($selected ? 'selected' : '') . '>' . $grupos[$i]['nombre'] . '</option>';
                    }
                    ?>
                </select>
            </label>
            <!-- Tipo de contrato -->
            <label class="flex column gap05" id="cont_contrato">
                <span class="flex row gap02">
                    Contrato <span class="rojo"> *</span>
                </span>
                <select name="tipo_contrato" id="tipo_contrato">
                    <option value="completo" <?= isset($_GET["id"]) && $datos[0]['tipo_contrato'] == 'completo' ? 'selected' : '' ?>>Completo</option>
                    <option value="parcial" <?= isset($_GET["id"]) && $datos[0]['tipo_contrato'] == 'parcial' ? 'selected' : '' ?>>Parcial</option>
                </select>
            </label>
            <!-- Horas contrato -->
            <label class="flex column gap05" id="cont_contrato_horas">
                <span class="flex row gap02">
                    Horas <span class="rojo"> *</span>
                </span>
                <input type="number" min="1" max="39" name="horas_contrato" id="horas_contrato" style="width: 5rem;"
                    value="<?= isset($_GET["id"]) && !empty($datos[0]['contrato_horas']) ? $datos[0]['contrato_horas'] : '' ?>">
            </label>
        </section>
        <?php
        if (isset($_GET["id"])):
            $baja = consulta("SELECT * FROM bajas_empleado WHERE id_empleado=?;", [$id], true);
            $fecha_baja = (!empty($baja)) ? $baja[0]['fecha'] : null;
            $fecha_incorporacion = (!empty($baja)) ? $baja[0]['fecha_incorporacion'] : null;
            ?>
            <article class="flex column gap05">
                <label class="chk">
                    <input type="checkbox" class="chk" name="baja" id="baja" value="1" <?= !empty($baja) && empty($fecha_incorporacion) ? "checked" : "" ?>>
                    <svg viewBox="0 0 64 64" height="2em" width="2em">
                        <path
                            d="M 0 16 V 56 A 8 8 90 0 0 8 64 H 56 A 8 8 90 0 0 64 56 V 8 A 8 8 90 0 0 56 0 H 8 A 8 8 90 0 0 0 8 V 16 L 32 48 L 64 16 V 8 A 8 8 90 0 0 56 0 H 8 A 8 8 90 0 0 0 8 V 56 A 8 8 90 0 0 8 64 H 56 A 8 8 90 0 0 64 56 V 16"
                            pathLength="575.0541381835938" class="path"></path>
                    </svg>
                    Baja
                </label>
            </article>
            <label class="flex column gap05" id="cont_fecha"> <b>Fecha de baja</b>
                <input type="date" name="fecha" id="fecha"
                    value="<?= (isset($fecha_baja)) ? $fecha_baja : date('Y-m-d') ?>">
            </label>
            <label class="flex column gap05" id="cont_fecha1"> <b>Fecha de incorporación</b>
                <input type="date" name="fecha_incorporacion" id="fecha_incorporacion"
                    value="<?= (isset($fecha_baja) && isset($fecha_incorporacion)) ? $fecha_incorporacion : date('Y-m-d') ?>">
            </label>

            <?php
        endif;
        ?>
        <!-- Horario -->
        <details style="padding: 0 auto;" <?= !isset($_GET['id']) ? 'open' : '' ?>>
            <summary>Horario</summary>

            <?php
            // Comprobar si el empleado tiene horario propio definido
            $empleado_tiene_horario = false;
            if (isset($_GET['id'])) {
                $campos_horario = ['lunh1', 'lunh2', 'marh1', 'marh2', 'mieh1', 'mieh2', 'jueh1', 'jueh2', 'vieh1', 'vieh2', 'lunh7', 'lunh8', 'lunh9', 'lunh10'];
                foreach ($campos_horario as $campo) {
                    if (!empty($datos[0][$campo]) && $datos[0][$campo] !== '00:00:00') {
                        $empleado_tiene_horario = true;
                        break;
                    }
                }
            }

            // Comprobar si el grupo tiene horario definido
            $grupo_tiene_horario = false;
            $grupo_tipo_horario = '';
            if (isset($grupo_empleado) && $grupo_empleado) {
                if ($grupo_empleado['tipo_grupo'] == 0) {
                    // Grupo con horario fijo
                    $campos_horario_grupo = ['lunh1', 'lunh2', 'marh1', 'marh2', 'mieh1', 'mieh2', 'jueh1', 'jueh2', 'vieh1', 'vieh2', 'lunh7', 'lunh8', 'lunh9', 'lunh10'];
                    foreach ($campos_horario_grupo as $campo) {
                        if (!empty($grupo_empleado[$campo]) && $grupo_empleado[$campo] !== '00:00:00') {
                            $grupo_tiene_horario = true;
                            $grupo_tipo_horario = 'fijo';
                            break;
                        }
                    }
                } elseif ($grupo_empleado['tipo_grupo'] == 1) {
                    // Grupo con horario flexible
                    if (!empty($grupo_empleado['horas']) && $grupo_empleado['horas'] !== '00:00') {
                        $grupo_tiene_horario = true;
                        $grupo_tipo_horario = 'flexible';
                    }
                }
            }
            ?>

            <?php if (!$empleado_tiene_horario && $grupo_tiene_horario && isset($_GET['id'])): ?>
                <!-- Mostrar horario del grupo -->
                <section class="flex column gap1"
                    style="background: light-dark(#e8f4fd, #1a3550); border-radius: .5rem; padding: 1rem; margin: .5rem 0;">
                    <h3 style="color: light-dark(#0066cc, #66b3ff); margin: 0;">
                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"
                            style="width: 1em; height: 1em; vertical-align: middle; fill: currentColor; margin-right: .5rem;">
                            <path
                                d="M144 0a80 80 0 1 1 0 160A80 80 0 1 1 144 0zM512 0a80 80 0 1 1 0 160A80 80 0 1 1 512 0zM0 298.7C0 239.8 47.8 192 106.7 192h42.7c15.9 0 31 3.5 44.6 9.7c-1.3 7.2-1.9 14.7-1.9 22.3c0 38.2 16.8 72.5 43.3 96c-.2 0-.4 0-.7 0H21.3C9.6 320 0 310.4 0 298.7zM405.3 320c-.2 0-.4 0-.7 0c26.6-23.5 43.3-57.8 43.3-96c0-7.6-.7-15-1.9-22.3c13.6-6.3 28.7-9.7 44.6-9.7h42.7C592.2 192 640 239.8 640 298.7c0 11.8-9.6 21.3-21.3 21.3H405.3zM224 224a96 96 0 1 1 192 0 96 96 0 1 1 -192 0zM128 485.3C128 411.7 187.7 352 261.3 352H378.7C452.3 352 512 411.7 512 485.3c0 14.7-11.9 26.7-26.7 26.7H154.7c-14.7 0-26.7-11.9-26.7-26.7z" />
                        </svg>
                        Horario del grupo: <?= htmlspecialchars($grupo_empleado['nombre']) ?>
                    </h3>
                    <p style="margin: 0; font-size: 0.9em; opacity: 0.8;">Este empleado no tiene horario propio configurado.
                        Se aplica el horario del grupo.</p>

                    <?php if ($grupo_tipo_horario === 'fijo'): ?>
                        <section class="flex row gap1 wrap" style="margin-top: .5rem;">
                            <?php
                            $dias_semana = [
                                'lun' => 'Lunes',
                                'mar' => 'Martes',
                                'mie' => 'Miércoles',
                                'jue' => 'Jueves',
                                'vie' => 'Viernes',
                                'sab' => 'Sábado',
                                'dom' => 'Domingo'
                            ];
                            foreach ($dias_semana as $prefijo => $nombre_dia):
                                $h1 = $grupo_empleado[$prefijo . 'h1'] ?? '';
                                if (!empty($h1) && $h1 !== '00:00:00'):
                                    ?>
                                    <article
                                        style="background: light-dark(white, #0d1b2a); padding: .5rem 1rem; border-radius: .3rem; min-width: 120px;">
                                        <strong><?= $nombre_dia ?></strong><br>
                                        <?php
                                        // Mostrar todos los pares de horas (hasta 10)
                                        for ($h = 1; $h <= 10; $h += 2):
                                            $entrada = $grupo_empleado[$prefijo . 'h' . $h] ?? '';
                                            $salida = $grupo_empleado[$prefijo . 'h' . ($h + 1)] ?? '';
                                            if (!empty($entrada) && $entrada !== '00:00:00'):
                                                if ($h > 1)
                                                    echo '<br>';
                                                echo '<span style="color: var(--verde, green);">' . substr($entrada, 0, 5) . '</span>';
                                                if (!empty($salida) && $salida !== '00:00:00'):
                                                    echo ' - <span style="color: var(--rojo, red);">' . substr($salida, 0, 5) . '</span>';
                                                endif;
                                            endif;
                                        endfor;
                                        ?>
                                    </article>
                                    <?php
                                endif;
                            endforeach;
                            ?>
                        </section>
                    <?php elseif ($grupo_tipo_horario === 'flexible'): ?>
                        <section style="margin-top: .5rem;">
                            <p style="margin: 0;">
                                <strong>Tipo:</strong> Horario flexible
                                (<?= $grupo_empleado['tipo_flexible'] == 1 ? 'Diario' : 'Semanal' ?>)
                            </p>
                            <p style="margin: .3rem 0;">
                                <strong>Horas:</strong> <?= $grupo_empleado['horas'] ?>
                                <?php if ($grupo_empleado['tipo_flexible'] == 2 && !empty($grupo_empleado['dias_trabaja_semana'])): ?>
                                    (<?= $grupo_empleado['dias_trabaja_semana'] ?> días/semana)
                                <?php endif; ?>
                            </p>
                        </section>
                    <?php endif; ?>

                    <a href="<?= SITIO_CARPETA ?>/views/forms/grupos?id=<?= $grupo_empleado['id'] ?>" class="btn-s"
                        style="align-self: flex-start; margin-top: .5rem;">
                        Editar horario del grupo
                    </a>
                </section>
            <?php endif; ?>

            <section id="horario" class="flex column gap05">
                <h2 class="resaltado">Horario definido</h2>
                <?php if (SISTEMA_CAMBIO_HORARIO_REGULAR): ?>
                    <!-- Horario regular -->
                    <label>
                        <input type="checkbox" name="horario_asignado" id="horario_asignado"
                            title="Marca si el empleado tiene no tiene un horario asignado" <?php if (isset($_GET["id"])) {
                                if ($datos[0]["sin_horario_asignado"] == 1) {
                                    echo "checked";
                                }
                            } ?>>
                        Sin horario asignado
                    </label>
                <?php endif;
                if (SISTEMA_HORARIOS_NOCTURNOS): ?>
                    <!-- Horario nocturno -->
                    <label>
                        <input type="checkbox" name="horario_nocturno" id="horario_nocturno"
                            title="Marca si el empleado tiene un horario nocturno" <?php if (isset($_GET["id"])) {
                                if ($datos[0]["horario_nocturno"] == 1) {
                                    echo "checked";
                                }
                            } ?>>
                        Horario nocturno
                    </label>
                <?php endif; ?>
                <section id="horario_horas" class="flex column supercentrado gap1" <?= (isset($_GET['id']) && $datos[0]["sin_horario_asignado"] == 1) ? 'style="display:none;"' : '' ?>>
                    <button type="button" id="copiar-h" class="btn-s">Copiar horario</button>
                    <span class="rojo"><b>Rellena el horario <span class="solomovil">de arriba a abajo,</span><span
                                class="movilno">de izquierda a derecha,</span> primero las primeras entradas y
                            salidas</b></span>
                    <?php
                    $veces = 7;
                    $o = 1;
                    $dia = "Lunes";
                    $diatab = "lun";
                    $k = 2;
                    while ($o <= $veces) {
                        switch ($o) {
                            case 1:
                                $dia = "Lunes";
                                $diatab = "lun";
                                break;
                            case 2:
                                $dia = "Martes";
                                $diatab = "mar";
                                break;
                            case 3:
                                $dia = "Miércoles";
                                $diatab = "mie";
                                break;
                            case 4:
                                $dia = "Jueves";
                                $diatab = "jue";
                                break;
                            case 5:
                                $dia = "Viernes";
                                $diatab = "vie";
                                break;
                            case 6:
                                $dia = "Sábado";
                                $diatab = "sab";
                                break;
                            case 7:
                                $dia = "Domingo";
                                $diatab = "dom";
                                break;
                            default:
                                $dia = "Lunes";
                                $diatab = "lun";
                                break;
                        }
                        echo "<h3>$dia</h3>";
                        ?>
                        <section class="horas row-column">
                            <?php
                            $j = 1;
                            for ($i = 1; $i <= 10; $i++) {
                                ?>
                                <section class="opcioneshoras column-row">
                                    <?php
                                    $h = match ($o) {
                                        1 => "lunh$i",
                                        2 => "marh$i",
                                        3 => "mieh$i",
                                        4 => "jueh$i",
                                        5 => "vieh$i",
                                        6 => "sabh$i",
                                        7 => "domh$i"
                                    };
                                    if ($i % 2 != 0) {
                                        $diat = $diatab . "h" . $i;
                                        echo "<label for='$diat' title='Entrada $j'>";
                                        switch ($i) {
                                            case 1:
                                                echo '<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 256 512" class="verde">
                                                        <path d="M160 64c0-11.8-6.5-22.6-16.9-28.2s-23-5-32.8 1.6l-96 64C-.5 111.2-4.4 131 5.4 145.8s29.7 18.7 44.4 8.9L96 123.8V416H32c-17.7 0-32 14.3-32 32s14.3 32 32 32h96 96c17.7 0 32-14.3 32-32s-14.3-32-32-32H160V64z" />
                                                    </svg>
                                                    <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 512 512" class="verde">
                                                        <path d="M217.9 105.9L340.7 228.7c7.2 7.2 11.3 17.1 11.3 27.3s-4.1 20.1-11.3 27.3L217.9 406.1c-6.4 6.4-15 9.9-24 9.9c-18.7 0-33.9-15.2-33.9-33.9l0-62.1L32 320c-17.7 0-32-14.3-32-32l0-64c0-17.7 14.3-32 32-32l128 0 0-62.1c0-18.7 15.2-33.9 33.9-33.9c9 0 17.6 3.6 24 9.9zM352 416l64 0c17.7 0 32-14.3 32-32l0-256c0-17.7-14.3-32-32-32l-64 0c-17.7 0-32-14.3-32-32s14.3-32 32-32l64 0c53 0 96 43 96 96l0 256c0 53-43 96-96 96l-64 0c-17.7 0-32-14.3-32-32s14.3-32 32-32z" />
                                                    </svg>';
                                                break;
                                            case 3:
                                                echo '<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 320 512" class="verde">
                                                    <path d="M142.9 96c-21.5 0-42.2 8.5-57.4 23.8L54.6 150.6c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L40.2 74.5C67.5 47.3 104.4 32 142.9 32C223 32 288 97 288 177.1c0 38.5-15.3 75.4-42.5 102.6L109.3 416H288c17.7 0 32 14.3 32 32s-14.3 32-32 32H32c-12.9 0-24.6-7.8-29.6-19.8s-2.2-25.7 6.9-34.9L200.2 234.5c15.2-15.2 23.8-35.9 23.8-57.4c0-44.8-36.3-81.1-81.1-81.1z" />
                                                </svg>
                                                <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 512 512" class="verde">
                                                    <path d="M217.9 105.9L340.7 228.7c7.2 7.2 11.3 17.1 11.3 27.3s-4.1 20.1-11.3 27.3L217.9 406.1c-6.4 6.4-15 9.9-24 9.9c-18.7 0-33.9-15.2-33.9-33.9l0-62.1L32 320c-17.7 0-32-14.3-32-32l0-64c0-17.7 14.3-32 32-32l128 0 0-62.1c0-18.7 15.2-33.9 33.9-33.9c9 0 17.6 3.6 24 9.9zM352 416l64 0c17.7 0 32-14.3 32-32l0-256c0-17.7-14.3-32-32-32l-64 0c-17.7 0-32-14.3-32-32s14.3-32 32-32l64 0c53 0 96 43 96 96l0 256c0 53-43 96-96 96l-64 0c-17.7 0-32-14.3-32-32s14.3-32 32-32z" />
                                                </svg>';
                                                break;
                                            case 5:
                                                echo '<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 320 512" class="verde">
                                                        <path d="M0 64C0 46.3 14.3 32 32 32H272c13.2 0 25 8.1 29.8 20.4s1.5 26.3-8.2 35.2L162.3 208H184c75.1 0 136 60.9 136 136s-60.9 136-136 136H105.4C63 480 24.2 456 5.3 418.1l-1.9-3.8c-7.9-15.8-1.5-35 14.3-42.9s35-1.5 42.9 14.3l1.9 3.8c8.1 16.3 24.8 26.5 42.9 26.5H184c39.8 0 72-32.2 72-72s-32.2-72-72-72H80c-13.2 0-25-8.1-29.8-20.4s-1.5-26.3 8.2-35.2L189.7 96H32C14.3 96 0 81.7 0 64z" />
                                                    </svg>
                                                    <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 512 512" class="verde">
                                                        <path d="M217.9 105.9L340.7 228.7c7.2 7.2 11.3 17.1 11.3 27.3s-4.1 20.1-11.3 27.3L217.9 406.1c-6.4 6.4-15 9.9-24 9.9c-18.7 0-33.9-15.2-33.9-33.9l0-62.1L32 320c-17.7 0-32-14.3-32-32l0-64c0-17.7 14.3-32 32-32l128 0 0-62.1c0-18.7 15.2-33.9 33.9-33.9c9 0 17.6 3.6 24 9.9zM352 416l64 0c17.7 0 32-14.3 32-32l0-256c0-17.7-14.3-32-32-32l-64 0c-17.7 0-32-14.3-32-32s14.3-32 32-32l64 0c53 0 96 43 96 96l0 256c0 53-43 96-96 96l-64 0c-17.7 0-32-14.3-32-32s14.3-32 32-32z" />
                                                    </svg>';
                                                break;
                                            case 7:
                                                echo '<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 640 640" class="verde">
                                                        <path d="M192 128C192 110.3 177.7 96 160 96C142.3 96 128 110.3 128 128L128 352C128 387.3 156.7 416 192 416L384 416L384 512C384 529.7 398.3 544 416 544C433.7 544 448 529.7 448 512L448 416L480 416C497.7 416 512 401.7 512 384C512 366.3 497.7 352 480 352L448 352L448 128C448 110.3 433.7 96 416 96C398.3 96 384 110.3 384 128L384 352L192 352L192 128z" />
                                                    </svg>
                                                    <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 512 512" class="verde">
                                                        <path d="M217.9 105.9L340.7 228.7c7.2 7.2 11.3 17.1 11.3 27.3s-4.1 20.1-11.3 27.3L217.9 406.1c-6.4 6.4-15 9.9-24 9.9c-18.7 0-33.9-15.2-33.9-33.9l0-62.1L32 320c-17.7 0-32-14.3-32-32l0-64c0-17.7 14.3-32 32-32l128 0 0-62.1c0-18.7 15.2-33.9 33.9-33.9c9 0 17.6 3.6 24 9.9zM352 416l64 0c17.7 0 32-14.3 32-32l0-256c0-17.7-14.3-32-32-32l-64 0c-17.7 0-32-14.3-32-32s14.3-32 32-32l64 0c53 0 96 43 96 96l0 256c0 53-43 96-96 96l-64 0c-17.7 0-32-14.3-32-32s14.3-32 32-32z" />
                                                    </svg>';
                                                break;
                                            case 9:
                                                echo '<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 640 640" class="verde">
                                                        <path d="M160 128C160 110.3 174.3 96 192 96L416 96C433.7 96 448 110.3 448 128C448 145.7 433.7 160 416 160L224 160L224 272L344 272C419.1 272 480 332.9 480 408C480 483.1 419.1 544 344 544L192 544C174.3 544 160 529.7 160 512C160 494.3 174.3 480 192 480L344 480C383.8 480 416 447.8 416 408C416 368.2 383.8 336 344 336L192 336C174.3 336 160 321.7 160 304L160 128z" />
                                                    </svg>
                                                    <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 512 512" class="verde">
                                                        <path d="M217.9 105.9L340.7 228.7c7.2 7.2 11.3 17.1 11.3 27.3s-4.1 20.1-11.3 27.3L217.9 406.1c-6.4 6.4-15 9.9-24 9.9c-18.7 0-33.9-15.2-33.9-33.9l0-62.1L32 320c-17.7 0-32-14.3-32-32l0-64c0-17.7 14.3-32 32-32l128 0 0-62.1c0-18.7 15.2-33.9 33.9-33.9c9 0 17.6 3.6 24 9.9zM352 416l64 0c17.7 0 32-14.3 32-32l0-256c0-17.7-14.3-32-32-32l-64 0c-17.7 0-32-14.3-32-32s14.3-32 32-32l64 0c53 0 96 43 96 96l0 256c0 53-43 96-96 96l-64 0c-17.7 0-32-14.3-32-32s14.3-32 32-32z" />
                                                    </svg>';
                                                break;
                                            default:
                                                echo '<span class="verde">E' . (($i + 1) / 2) . '</span>';
                                                break;
                                        }
                                        echo "</label>";
                                        echo '<input type="time" name="' . $diat . '" id="' . $diat . '" ' . (isset($datos[0][$h]) ? 'value="' . $datos[0][$h] . '"' : 'value="00:00"') . ' >';
                                    } else {
                                        $diat = $diatab . "h" . $i;
                                        echo "<label for='$diat' title='Salida $j'>";
                                        switch ($i) {
                                            case 2:
                                                echo '<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 256 512" class="rojo">
                                                <path d="M160 64c0-11.8-6.5-22.6-16.9-28.2s-23-5-32.8 1.6l-96 64C-.5 111.2-4.4 131 5.4 145.8s29.7 18.7 44.4 8.9L96 123.8V416H32c-17.7 0-32 14.3-32 32s14.3 32 32 32h96 96c17.7 0 32-14.3 32-32s-14.3-32-32-32H160V64z" />
                                            </svg>
                                            <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 512 512" class="rojo">
                                                <path d="M377.9 105.9L500.7 228.7c7.2 7.2 11.3 17.1 11.3 27.3s-4.1 20.1-11.3 27.3L377.9 406.1c-6.4 6.4-15 9.9-24 9.9c-18.7 0-33.9-15.2-33.9-33.9l0-62.1-128 0c-17.7 0-32-14.3-32-32l0-64c0-17.7 14.3-32 32-32l128 0 0-62.1c0-18.7 15.2-33.9 33.9-33.9c9 0 17.6 3.6 24 9.9zM160 96L96 96c-17.7 0-32 14.3-32 32l0 256c0 17.7 14.3 32 32 32l64 0c17.7 0 32 14.3 32 32s-14.3 32-32 32l-64 0c-53 0-96-43-96-96L0 128C0 75 43 32 96 32l64 0c17.7 0 32 14.3 32 32s-14.3 32-32 32z" />
                                            </svg>';
                                                break;
                                            case 4:
                                                echo '<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 320 512" class="rojo">
                                                    <path d="M142.9 96c-21.5 0-42.2 8.5-57.4 23.8L54.6 150.6c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L40.2 74.5C67.5 47.3 104.4 32 142.9 32C223 32 288 97 288 177.1c0 38.5-15.3 75.4-42.5 102.6L109.3 416H288c17.7 0 32 14.3 32 32s-14.3 32-32 32H32c-12.9 0-24.6-7.8-29.6-19.8s-2.2-25.7 6.9-34.9L200.2 234.5c15.2-15.2 23.8-35.9 23.8-57.4c0-44.8-36.3-81.1-81.1-81.1z" />
                                                </svg>
                                                <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 512 512" class="rojo">
                                                    <path d="M377.9 105.9L500.7 228.7c7.2 7.2 11.3 17.1 11.3 27.3s-4.1 20.1-11.3 27.3L377.9 406.1c-6.4 6.4-15 9.9-24 9.9c-18.7 0-33.9-15.2-33.9-33.9l0-62.1-128 0c-17.7 0-32-14.3-32-32l0-64c0-17.7 14.3-32 32-32l128 0 0-62.1c0-18.7 15.2-33.9 33.9-33.9c9 0 17.6 3.6 24 9.9zM160 96L96 96c-17.7 0-32 14.3-32 32l0 256c0 17.7 14.3 32 32 32l64 0c17.7 0 32 14.3 32 32s-14.3 32-32 32l-64 0c-53 0-96-43-96-96L0 128C0 75 43 32 96 32l64 0c17.7 0 32 14.3 32 32s-14.3 32-32 32z" />
                                                </svg>';
                                                break;
                                            case 6:
                                                echo '<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 320 512" class="rojo">
                                                        <path d="M0 64C0 46.3 14.3 32 32 32H272c13.2 0 25 8.1 29.8 20.4s1.5 26.3-8.2 35.2L162.3 208H184c75.1 0 136 60.9 136 136s-60.9 136-136 136H105.4C63 480 24.2 456 5.3 418.1l-1.9-3.8c-7.9-15.8-1.5-35 14.3-42.9s35-1.5 42.9 14.3l1.9 3.8c8.1 16.3 24.8 26.5 42.9 26.5H184c39.8 0 72-32.2 72-72s-32.2-72-72-72H80c-13.2 0-25-8.1-29.8-20.4s-1.5-26.3 8.2-35.2L189.7 96H32C14.3 96 0 81.7 0 64z" />
                                                    </svg>
                                                    <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 512 512" class="rojo">
                                                        <path d="M377.9 105.9L500.7 228.7c7.2 7.2 11.3 17.1 11.3 27.3s-4.1 20.1-11.3 27.3L377.9 406.1c-6.4 6.4-15 9.9-24 9.9c-18.7 0-33.9-15.2-33.9-33.9l0-62.1-128 0c-17.7 0-32-14.3-32-32l0-64c0-17.7 14.3-32 32-32l128 0 0-62.1c0-18.7 15.2-33.9 33.9-33.9c9 0 17.6 3.6 24 9.9zM160 96L96 96c-17.7 0-32 14.3-32 32l0 256c0 17.7 14.3 32 32 32l64 0c17.7 0 32 14.3 32 32s-14.3 32-32 32l-64 0c-53 0-96-43-96-96L0 128C0 75 43 32 96 32l64 0c17.7 0 32 14.3 32 32s-14.3 32-32 32z" />
                                                    </svg>';
                                                break;
                                            case 8:
                                                echo '<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 640 640" class="rojo">
                                                        <path d="M192 128C192 110.3 177.7 96 160 96C142.3 96 128 110.3 128 128L128 352C128 387.3 156.7 416 192 416L384 416L384 512C384 529.7 398.3 544 416 544C433.7 544 448 529.7 448 512L448 416L480 416C497.7 416 512 401.7 512 384C512 366.3 497.7 352 480 352L448 352L448 128C448 110.3 433.7 96 416 96C398.3 96 384 110.3 384 128L384 352L192 352L192 128z" />
                                                    </svg>
                                                    <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 512 512" class="rojo">
                                                        <path d="M377.9 105.9L500.7 228.7c7.2 7.2 11.3 17.1 11.3 27.3s-4.1 20.1-11.3 27.3L377.9 406.1c-6.4 6.4-15 9.9-24 9.9c-18.7 0-33.9-15.2-33.9-33.9l0-62.1-128 0c-17.7 0-32-14.3-32-32l0-64c0-17.7 14.3-32 32-32l128 0 0-62.1c0-18.7 15.2-33.9 33.9-33.9c9 0 17.6 3.6 24 9.9zM160 96L96 96c-17.7 0-32 14.3-32 32l0 256c0 17.7 14.3 32 32 32l64 0c17.7 0 32 14.3 32 32s-14.3 32-32 32l-64 0c-53 0-96-43-96-96L0 128C0 75 43 32 96 32l64 0c17.7 0 32 14.3 32 32s-14.3 32-32 32z" />
                                                    </svg>';
                                                break;
                                            case 10:
                                                echo '<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 640 640" class="rojo">
                                                        <path d="M160 128C160 110.3 174.3 96 192 96L416 96C433.7 96 448 110.3 448 128C448 145.7 433.7 160 416 160L224 160L224 272L344 272C419.1 272 480 332.9 480 408C480 483.1 419.1 544 344 544L192 544C174.3 544 160 529.7 160 512C160 494.3 174.3 480 192 480L344 480C383.8 480 416 447.8 416 408C416 368.2 383.8 336 344 336L192 336C174.3 336 160 321.7 160 304L160 128z" />
                                                    </svg>
                                                    <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 512 512" class="rojo">
                                                        <path d="M377.9 105.9L500.7 228.7c7.2 7.2 11.3 17.1 11.3 27.3s-4.1 20.1-11.3 27.3L377.9 406.1c-6.4 6.4-15 9.9-24 9.9c-18.7 0-33.9-15.2-33.9-33.9l0-62.1-128 0c-17.7 0-32-14.3-32-32l0-64c0-17.7 14.3-32 32-32l128 0 0-62.1c0-18.7 15.2-33.9 33.9-33.9c9 0 17.6 3.6 24 9.9zM160 96L96 96c-17.7 0-32 14.3-32 32l0 256c0 17.7 14.3 32 32 32l64 0c17.7 0 32 14.3 32 32s-14.3 32-32 32l-64 0c-53 0-96-43-96-96L0 128C0 75 43 32 96 32l64 0c17.7 0 32 14.3 32 32s-14.3 32-32 32z" />
                                                    </svg>';
                                                break;
                                            default:
                                                echo '<span class="rojo">S' . ($i / 2) . '</span>';
                                                break;
                                        }
                                        echo "</label>";
                                        echo '<input type="time" name="' . $diat . '" id="' . $diat . '" ' . (isset($datos[0][$h]) ? 'value="' . $datos[0][$h] . '"' : 'value="00:00"') . ' >';
                                        $j++;
                                    }
                                    ?>
                                </section>
                                <?php
                                $k++;
                                if ($k == 8) {
                                    $k = 10;
                                }
                            }
                            ?>
                        </section>
                        <?php
                        $o++;
                    }
                    ?>
                </section>

            </section>
        </details>
        <!-- Pin -->
        <section class="flex row gap05">
            <label class="flex row gap05">
                <span class="flex row gap02">
                    Pin <span class="rojo"> *</span>
                </span>
                <input type='text' name='pin' id='pin' pattern='\d{<?= get_config('digitos_pin') ?>}'
                    value='<?= (isset($_GET["id"])) ? $datos[0]["pin"] : "" ?>'
                    title='El PIN debe tener exactamente <?= get_config('digitos_pin') ?> dígitos'
                    style='max-width: 5rem;' required>
            </label>
        </section>
        <!-- Observaciones -->
        <label class="flex column gap05">
            Observaciones
            <textarea
                name="observaciones"><?= (isset($_GET['id']) && !empty($datos[0]["observaciones"])) ? $datos[0]["observaciones"] : '' ?></textarea>
        </label>
        <!-- Crear/Actualizar -->
        <button type="submit" class="btn-p"><?= (isset($_GET["id"])) ? "Actualizar" : "Crear" ?> empleado</button>
    </form>
</section>
<style>
    #contraseña {
        border-radius: .4rem 0 0 .4rem;
        width: 14rem !important;
        outline: none;
    }

    #toggle-contraseña {
        cursor: pointer;
        box-shadow: none;
        background: var(--principal);
        width: 3rem;
        flex-shrink: 0;
        border-radius: 0 .4rem .4rem 0;
        fill: whitesmoke;
        border: none;
        outline: none;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: background-color 0.2s;
        align-self: stretch;
    }

    #toggle-contraseña:hover {
        filter: brightness(1.1);
    }

    #toggle-contraseña svg {
        fill: whitesmoke;
        width: 1em;
        height: 1em;
    }

    abbr .info {
        fill: light-dark(var(--azul), white);
        width: 1.2rem;
        height: 1.2rem;
        cursor: help;
    }

    .input-error {
        border-color: var(--rojo, #dc3545) !important;
        box-shadow: 0 0 0 2px rgba(220, 53, 69, 0.25) !important;
    }
</style>
<script>
    window.onload = function () {
        // Botón toggle para mostrar/ocultar contraseña
        const contraseña = document.getElementById('contraseña');
        const toggleBtn = document.getElementById('toggle-contraseña');
        const iconOjoCerrado = document.getElementById('icon-ojo-cerrado');
        const iconOjoAbierto = document.getElementById('icon-ojo-abierto');

        toggleBtn.addEventListener('click', () => {
            if (contraseña.type === 'password') {
                contraseña.type = 'text';
                iconOjoCerrado.style.display = 'none';
                iconOjoAbierto.style.display = 'block';
            } else {
                contraseña.type = 'password';
                iconOjoCerrado.style.display = 'block';
                iconOjoAbierto.style.display = 'none';
            }
        });

        // Validación en tiempo real de la contraseña
        contraseña.addEventListener('blur', function () {
            if (this.value.trim()) {
                const erroresContraseña = [];
                if (this.value.length < 6) {
                    erroresContraseña.push('mínimo 6 caracteres');
                }
                if (!/[a-zA-Z]/.test(this.value)) {
                    erroresContraseña.push('al menos una letra');
                }
                if (!/\d/.test(this.value)) {
                    erroresContraseña.push('al menos un número');
                }
                if (erroresContraseña.length > 0) {
                    this.classList.add('input-error');
                    if (typeof crear_notificacion === 'function') {
                        crear_notificacion('error', 'Contraseña inválida: ' + erroresContraseña.join(', '));
                    }
                } else {
                    this.classList.remove('input-error');
                }
            }
        });

        // Validación del formulario con notificaciones
        const formulario = document.querySelector('form[name*="empleado"]');

        formulario.addEventListener('submit', function (e) {
            const errores = [];

            // Validar nombre
            const nombre = document.getElementById('nombre');
            if (!nombre.value.trim()) {
                errores.push('El nombre es obligatorio');
                nombre.classList.add('input-error');
            } else {
                nombre.classList.remove('input-error');
            }

            // Validar usuario
            const usuario = document.getElementById('usuario');
            const patternUsuario = /^(?!.*[._]{2})[a-zA-Z0-9](?:[a-zA-Z0-9._]{1,18})[a-zA-Z0-9]$/;
            if (!usuario.value.trim()) {
                errores.push('El usuario es obligatorio');
                usuario.classList.add('input-error');
            } else if (!patternUsuario.test(usuario.value)) {
                errores.push('Usuario inválido: debe tener 3-20 caracteres, solo letras (mayúsculas/minúsculas), números, guiones bajos y puntos. No puede empezar/terminar con punto o guión bajo, ni tener dos consecutivos');
                usuario.classList.add('input-error');
            } else {
                usuario.classList.remove('input-error');
            }

            // Validar contraseña (solo si es requerida o tiene valor)
            if (contraseña.required || contraseña.value.trim()) {
                if (contraseña.required && !contraseña.value.trim()) {
                    errores.push('La contraseña es obligatoria');
                    contraseña.classList.add('input-error');
                } else if (contraseña.value.trim()) {
                    const erroresContraseña = [];
                    if (contraseña.value.length < 6) {
                        erroresContraseña.push('mínimo 6 caracteres');
                    }
                    if (!/[a-zA-Z]/.test(contraseña.value)) {
                        erroresContraseña.push('al menos una letra');
                    }
                    if (!/\d/.test(contraseña.value)) {
                        erroresContraseña.push('al menos un número');
                    }
                    if (erroresContraseña.length > 0) {
                        errores.push('Contraseña inválida: ' + erroresContraseña.join(', '));
                        contraseña.classList.add('input-error');
                    } else {
                        contraseña.classList.remove('input-error');
                    }
                }
            }

            // Validar PIN
            const pin = document.getElementById('pin');
            const digitosPin = <?= get_config('digitos_pin') ?>;
            const patternPin = new RegExp(`^\\d{${digitosPin}}$`);
            if (!pin.value.trim()) {
                errores.push('El PIN es obligatorio');
                pin.classList.add('input-error');
            } else if (!patternPin.test(pin.value)) {
                errores.push(`El PIN debe tener exactamente ${digitosPin} dígitos numéricos`);
                pin.classList.add('input-error');
            } else {
                pin.classList.remove('input-error');
            }

            // Si hay errores, mostrar notificaciones y prevenir envío
            if (errores.length > 0) {
                e.preventDefault();

                // Crear notificación con todos los errores
                if (typeof crear_notificacion === 'function') {
                    errores.forEach(error => {
                        crear_notificacion('error', error);
                    });
                } else {
                    // Fallback: alerta nativa
                    alert('Errores de validación:\n\n• ' + errores.join('\n• '));
                }

                // Scroll al primer campo con error
                const primerError = document.querySelector('.input-error');
                if (primerError) {
                    primerError.scrollIntoView({ behavior: 'smooth', block: 'center' });
                    primerError.focus();
                }

                return false;
            }
        });

        // Limpiar errores al escribir
        document.querySelectorAll('input').forEach(input => {
            input.addEventListener('input', function () {
                this.classList.remove('input-error');
            });
        });
        var copiar = document.getElementById("copiar-h");
        copiar.addEventListener("click", () => {
            for (let i = 1; i <= 10; i++) {
                let lun = document.getElementById("lunh" + i);
                if (lun) {
                    for (let d = 2; d <= 5; d++) {
                        let dia = "";
                        switch (d) {
                            case 2:
                                dia = "marh" + i;
                                break;
                            case 3:
                                dia = "mieh" + i;
                                break;
                            case 4:
                                dia = "jueh" + i;
                                break;
                            case 5:
                                dia = "vieh" + i;
                                break;
                            case 6:
                                dia = "sabh" + i;
                                break;
                            case 7:
                                dia = "domh" + i;
                                break;
                        }
                        let diaa = document.getElementById(dia);
                        diaa.value = lun.value;
                    }
                }
            }
        });

        //Tipo de contrato, parcial poner horas
        let tipo_contrato = document.getElementById('tipo_contrato');
        let cont_contrato_horas = document.getElementById('cont_contrato_horas');
        let horas_contrato = document.getElementById('horas_contrato');

        function visibilidad_horas_contrato() {
            const esParcial = (tipo_contrato.value || '').trim().toLowerCase() === 'parcial';
            cont_contrato_horas.style.display = esParcial ? 'flex' : 'none';
            horas_contrato.required = esParcial ? 'true' : '';
            horas_contrato.type = esParcial ? 'number' : 'hidden';
        }

        tipo_contrato.addEventListener('change', visibilidad_horas_contrato);

        // Estado inicial al cargar la página
        visibilidad_horas_contrato();

        //Subcontratado
        let subcontratado = document.getElementById('subcontratado');
        let cont_fecha_alta = document.getElementById('cont_fecha_alta');
        let cont_contrato = document.getElementById('cont_contrato');
        subcontratado.addEventListener('change', () => {
            comprobar_subcontratado();
        });

        function comprobar_subcontratado() {
            if (subcontratado.checked) {
                cont_fecha_alta.style.display = "none";
                cont_contrato.style.display = "none";
                cont_contrato_horas.style.display = "none";
            } else {
                cont_fecha_alta.style.display = "flex";
                cont_contrato.style.display = "flex";
                visibilidad_horas_contrato();
            }
        }
        comprobar_subcontratado();


        <?php if (SISTEMA_CAMBIO_HORARIO_REGULAR): ?>
            let chk_horario_sin_asignar = document.getElementById("horario_asignado");
            let horario = document.getElementById("horario_horas");
            chk_horario_sin_asignar.addEventListener("change", () => {
                if (chk_horario_sin_asignar.checked) {
                    horario.style.display = "none";
                } else {
                    horario.style.display = "flex";
                }
            });
        <?php endif; ?>

        <?php if (isset($_GET["id"])): ?>
            //por defecto baja
            let defecto_baja = <?= !empty($baja) && empty($fecha_incorporacion) ? "true" : "false" ?>;
            //ocultar fecha de incorporación
            document.getElementById("cont_fecha1").style.display = "none";
            //si existe el boton de baja
            if (document.getElementById("baja")) {
                //si esta marcado
                if (!document.getElementById("baja").checked) {
                    //ocultar fecha
                    document.getElementById("cont_fecha").style.display = "none";

                } else {
                    //ocultar fecha de incorporación
                    document.getElementById("cont_fecha1").style.display = "none";
                }
                //cuando cambie el checkbox
                document.getElementById("baja").addEventListener("change", function () {
                    //si esta marcado
                    if (!document.getElementById("baja").checked) {
                        //ocultar fecha
                        document.getElementById("cont_fecha").style.display = "none";
                        //Mostrar fecha de incorporación
                        if (defecto_baja) {
                            document.getElementById("cont_fecha1").style.display = "flex";
                        }
                    } else {
                        //mostrar fecha
                        document.getElementById("cont_fecha").style.display = "flex";
                        //ocultar fecha de incorporación
                        document.getElementById("cont_fecha1").style.display = "none";
                    }
                });
            }
        <?php endif; ?>
    };
</script>
<?php footer(true); ?>