<?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, 'Mi Perfil', true, true);

$es_empleado = !empty($_SESSION['id_empleado']);

// Obtener datos del perfil del usuario actual
if ($es_empleado) {
    $perfil = consulta(
        "SELECT e.nombre, e.apellidos, e.email, e.telefono, u.usuario, g.nombre as grupo_nombre
         FROM empleados e
         LEFT JOIN usuarios u ON e.id = u.id_empleado
         LEFT JOIN grupos g ON e.id_grupo = g.id
         WHERE e.id = ?",
        [$_SESSION['id_empleado']],
        true
    );
    $perfil = !empty($perfil) ? $perfil[0] : [];
} else {
    // Admin/Supervisor sin empleado asociado
    $perfil = consulta(
        "SELECT usuario FROM usuarios WHERE id = ?",
        [$_SESSION['id_usuario']],
        true
    );
    $perfil = !empty($perfil) ? $perfil[0] : [];
}
?>
<section 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">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640" style="width:1.2em;height:1.2em;fill:var(--principal);">
                <path d="M463 448.2C440.9 409.8 399.4 384 352 384L288 384C240.6 384 199.1 409.8 177 448.2C212.2 487.4 263.2 512 320 512C376.8 512 427.8 487.3 463 448.2zM64 320C64 178.6 178.6 64 320 64C461.4 64 576 178.6 576 320C576 461.4 461.4 576 320 576C178.6 576 64 461.4 64 320zM320 336C359.8 336 392 303.8 392 264C392 224.2 359.8 192 320 192C280.2 192 248 224.2 248 264C248 303.8 280.2 336 320 336z"/>
            </svg>
        </span>
        Mi Perfil
    </h1>
    <section class="flex column gap1">
        <!-- Información de solo lectura -->
        <section class="cristal" style="align-items: start;">
            <h2>Información</h2>
            <article class="flex row gap1 wrap" style="width:100%;">
                <?php if ($es_empleado): ?>
                    <article class="flex column gap02" style="flex:1; min-width:140px;">
                        <b style="opacity:.7; font-size:.85em;">Nombre</b>
                        <span><?= htmlspecialchars(($perfil['nombre'] ?? '') . (!empty($perfil['apellidos']) ? ' ' . $perfil['apellidos'] : '')) ?></span>
                    </article>
                <?php endif; ?>
                <article class="flex column gap02" style="flex:1; min-width:140px;">
                    <b style="opacity:.7; font-size:.85em;">Usuario</b>
                    <span><?= htmlspecialchars($perfil['usuario'] ?? '-') ?></span>
                </article>
                <?php if ($es_empleado): ?>
                    <article class="flex column gap02" style="flex:1; min-width:140px;">
                        <b style="opacity:.7; font-size:.85em;">Grupo</b>
                        <span><?= htmlspecialchars($perfil['grupo_nombre'] ?? '-') ?></span>
                    </article>
                <?php endif; ?>

            </article>
        </section>
        <?php if ($es_empleado): ?>
            <!-- Campos editables (solo empleados) -->
            <section class="cristal" style="align-items: start;">
                <h2>Editar datos</h2>
                <article class="flex column gap1" style="width:100%;">
                    <!-- Email -->
                    <label class="flex column gap02">
                        <b>Correo electrónico</b>
                        <section class="flex row gap05">
                            <input type="email" id="perfil-email" value="<?= htmlspecialchars($perfil['email'] ?? '') ?>"
                                placeholder="correo@ejemplo.com" style="flex:1;">
                            <button type="button" class="btn-p" style="min-width:auto; padding: 0 1rem;"
                                onclick="guardarPerfil('email', document.getElementById('perfil-email').value)">
                                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" style="width:.9em;height:.9em;fill:currentColor;">
                                    <path d="M64 32C28.7 32 0 60.7 0 96V416c0 35.3 28.7 64 64 64H384c35.3 0 64-28.7 64-64V173.3c0-17-6.7-33.3-18.7-45.3L352 50.7C340 38.7 323.7 32 306.7 32H64zm0 96c0-17.7 14.3-32 32-32H288c17.7 0 32 14.3 32 32V160c0 17.7-14.3 32-32 32H96c-17.7 0-32-14.3-32-32V128zM224 288a64 64 0 1 1 0 128 64 64 0 1 1 0-128z"/>
                                </svg>
                            </button>
                        </section>
                    </label>
                    <!-- Teléfono -->
                    <label class="flex column gap02">
                        <b>Teléfono</b>
                        <section class="flex row gap05">
                            <input type="text" id="perfil-telefono" value="<?= htmlspecialchars($perfil['telefono'] ?? '') ?>"
                                placeholder="Teléfono" style="flex:1;">
                            <button type="button" class="btn-p" style="min-width:auto; padding: 0 1rem;"
                                onclick="guardarPerfil('telefono', document.getElementById('perfil-telefono').value)">
                                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" style="width:.9em;height:.9em;fill:currentColor;">
                                    <path d="M64 32C28.7 32 0 60.7 0 96V416c0 35.3 28.7 64 64 64H384c35.3 0 64-28.7 64-64V173.3c0-17-6.7-33.3-18.7-45.3L352 50.7C340 38.7 323.7 32 306.7 32H64zm0 96c0-17.7 14.3-32 32-32H288c17.7 0 32 14.3 32 32V160c0 17.7-14.3 32-32 32H96c-17.7 0-32-14.3-32-32V128zM224 288a64 64 0 1 1 0 128 64 64 0 1 1 0-128z"/>
                                </svg>
                            </button>
                        </section>
                    </label>
                </article>
            </section>
        <?php endif; ?>
        <!-- Contraseña (visible para todos) -->
        <section class="cristal" style="align-items: start;">
            <h2>Cambiar contraseña</h2>
            <article class="flex column gap1" style="width:100%;">
                <label class="flex column gap02">
                    <b>Nueva contraseña</b>
                    <section class="flex row" style="max-width:20rem;">
                        <input type="password" id="perfil-contra"
                            pattern="^(?=.*[a-zA-Z])(?=.*\d).{6,}$"
                            title="Mínimo 6 caracteres. Debe contener al menos: una letra y un número"
                            placeholder="Mínimo 6 caracteres"
                            style="border-radius:.4rem 0 0 .4rem; flex:1; outline:none;">
                        <button type="button" id="perfil-toggle-contra" style="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; align-self:stretch;">
                            <svg id="perfil-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="perfil-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>
                <label class="flex column gap02">
                    <b>Confirmar contraseña</b>
                    <input type="password" id="perfil-contra2"
                        placeholder="Repite la contraseña"
                        style="max-width:20rem;">
                </label>
                <button type="button" class="btn-p" style="width:fit-content;" onclick="guardarContraseña()">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" style="width:.9em;height:.9em;fill:currentColor;">
                        <path d="M336 352c97.2 0 176-78.8 176-176S433.2 0 336 0S160 78.8 160 176c0 18.7 2.9 36.8 8.3 53.7L7 391c-4.5 4.5-7 10.6-7 17v80c0 13.3 10.7 24 24 24h80c13.3 0 24-10.7 24-24V448h40c13.3 0 24-10.7 24-24V384h40c6.4 0 12.5-2.5 17-7l33.3-33.3c16.9 5.4 35 8.3 53.7 8.3zM376 96a40 40 0 1 1 0 80 40 40 0 1 1 0-80z"/>
                    </svg>
                    Cambiar contraseña
                </button>
            </article>
        </section>
    </section>
</section>
<script>
    function guardarPerfil(campo, valor) {
        ajax('forms/actualizar_perfil', 'notificaciones', 'campo=' + encodeURIComponent(campo) + '&valor=' + encodeURIComponent(valor), []);
    }
    function guardarContraseña() {
        const contra = document.getElementById('perfil-contra').value;
        const contra2 = document.getElementById('perfil-contra2').value;
        if (!contra) {
            crear_notificacion('error', 'Introduce la nueva contraseña');
            return;
        }
        if (contra.length < 6) {
            crear_notificacion('error', 'La contraseña debe tener al menos 6 caracteres');
            return;
        }
        if (!/[a-zA-Z]/.test(contra)) {
            crear_notificacion('error', 'La contraseña debe contener al menos una letra');
            return;
        }
        if (!/\d/.test(contra)) {
            crear_notificacion('error', 'La contraseña debe contener al menos un número');
            return;
        }
        if (contra !== contra2) {
            crear_notificacion('error', 'Las contraseñas no coinciden');
            return;
        }
        guardarPerfil('contrasena', contra);
        document.getElementById('perfil-contra').value = '';
        document.getElementById('perfil-contra2').value = '';
    }
    // Toggle mostrar/ocultar contraseña del perfil
    document.addEventListener('DOMContentLoaded', function() {
        const toggle = document.getElementById('perfil-toggle-contra');
        const contra = document.getElementById('perfil-contra');
        const ojoCerrado = document.getElementById('perfil-ojo-cerrado');
        const ojoAbierto = document.getElementById('perfil-ojo-abierto');
        if (toggle && contra) {
            toggle.addEventListener('click', function() {
                if (contra.type === 'password') {
                    contra.type = 'text';
                    ojoCerrado.style.display = 'none';
                    ojoAbierto.style.display = 'block';
                } else {
                    contra.type = 'password';
                    ojoCerrado.style.display = 'block';
                    ojoAbierto.style.display = 'none';
                }
            });
        }
    });
</script>
<?php footer(true); ?>
