@extends('layouts.pruebaplantilla')
<!--Se agrega por variedad de rutas-->
@section('css', '../../resources/css/estilos.css')
<!--Seccion de barra-->
@section('titulo', 'Perfil')
@section('barra')
    <div class="collapse navbar-collapse" id="navbar">
        <ul class="navbar-nav d-flex justify-content-between w-100">
            <div class="d-flex justify-conten-evenly">
                <span class="h2">
                    <a href="{{ route('home') }}" class="navbar-brand">
                        <img src="https://i.postimg.cc/x19ch1vw/logo.png" alt="logo-CEI" width="50" height="50"
                            class="bg-light roundend rounded-pill">
                    </a>
                </span>
                <a href="{{ route('patrimonio.index') }}" class="nav-link">
                    PATRIMONIO
                </a>
               
            </div>
            <li class="nav-item mx-3">
                <a href="{{ route('calendario') }}" class="nav-link"> CALENDARIO</a>
            </li>
            <div class="dropdown nav-item">
                <li class="nav-item mx-3 border border-0 fs-6 nav-link" type="button" data-bs-toggle="dropdown"
                    aria-expanded="false">IDIOMAS</li>
                <ul class="dropdown-menu mt-2">
                    <li class="mb-2 d-flex">
                        <img src="{{ Vite::asset('resources/svg/mexico.svg') }}" alt="" width="30">
                        <a class="dropdown-item fs-6 h6" href="">ESPAÑOL</a>
                    </li>
                    <li class="mb-2 d-flex">
                        <img src="https://i.postimg.cc/zGNgNjrP/TecNM.png" alt="" width="30">
                        <a class="dropdown-item fs-6 h6" href="">
                            INGLÉS
                        </a>
                    </li>
                    <li class="mb-2 d-flex">
                        <a class="dropdown-item fs-6 h6" href="{{ route('contacto') }}">
                            HÑÄHÑU
                        </a>
                    </li>
                </ul>
            </div>
            <div class="dropdown nav-item">
                @if (Auth::check())
                    <button class="border border-0 fs-6 h6 btn btn-primary" type="button" data-bs-toggle="dropdown"
                        aria-expanded="false">
                        {{ Auth::user()->US_NOMBRE }}
                    </button>
                    <div class="dropdown-menu mt-2">
                        <a class="dropdown-item " href="{{ route('myprofile') }}">Mi perfil</a>
                        <a class="dropdown-item " href="{{ route('join.logout') }}">Cerrar
                            sesión</a>
                        @if (Auth::user()->US_ROL == 'INVESTIGADOR')
                            <a class="dropdown-item " href="{{ route('Admin.index') }}">Administración</a>
                        @endif
                    @else
                        <li class="border border-0 nav-item mx-3 nav-link" type="button" data-bs-toggle="dropdown"
                            aria-expanded="false">INICIA SESIÓN</li>
                        <div class="dropdown-menu mt-2">
                            <form class="px-4 py-3" action="{{ route('join.login') }}" method="POST">
                                @csrf
                                <div class="mb-3">
                                    <label for="text_user" class="form-label">Correo electrónico</label>
                                    <input type="email" class="form-control  form-control-sm text-base" id="text_user"
                                        name="text_user" placeholder="Ingrese aquí" required>
                                </div>
                                <div class="mb-3">
                                    <label for="login_password" class="form-label">Contraseña</label>
                                    <input type="password" class="form-control form-control-sm text-base"
                                        id="login_password" name="login_password" placeholder="Contraseña" required>
                                </div>
                                <div class="mb-3">
                                    <div class="form-check">
                                        <input type="checkbox" class="form-check-input" id="remember" name="remember">
                                        <label class="form-check-label" for="remember">
                                            Recuerdame
                                        </label>
                                    </div>
                                </div>
                                <button type="submit" class="btn btn-primary w-100">INICIAR SESIÓN</button>
                            </form>
                            <div class="dropdown-divider"></div>
                            <a class="dropdown-item" href="{{ route('join.index') }}">
                                ¿Eres nuevo? Registrate aquí.
                            </a>
                            <a class="dropdown-item " href="{{ route('join.recovery') }}">¿Olvidaste la
                                Contraseña?
                            </a>
                        </div>
                    </div>
                @endif
            </div>
        </ul>
    </div>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbar"
        aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
        <span class="fa-solid fa-bars"></span>
    </button>
    <!--Contenedor de logos-->
    <div>
        <img src="https://i.postimg.cc/QNR74DnD/conacyt.png" alt="" width="80" id="conacyt-logo">
    </div>
    <div>
        <img src="https://i.postimg.cc/zGNgNjrP/TecNM.png" alt="" width="80" id="tecnm-logo">
    </div>
@section('contenido')
    <!--Imagen de encabezado-->
    <div class="header-img">
        <img src="https://www.questionpro.com/blog/wp-content/uploads/2022/09/Portada-administracion-de-personal.jpg" alt="" class="img-fluid">
    </div>

    @auth

        <div class="d-flex justify-content-center">
            <form action="{{ route('perfil.update') }}" class="w-50" method="POST">
                @csrf
                <input type="text" name="name-id" value="{{ auth()->user()->id }}" hidden>
                <div class="mb-3">
                    <label for="name-user"><i class="fa-solid fa-user mb-3"></i> Nombre</label>
                    <input type="text" id="name-user" name="name-user" class="form-control" required
                        value="{{ auth()->user()->US_NOMBRE }}">
                    <div class="emailHelp" class="form-text my-3">Puedes editar tu nombre aquì.</div>
                </div>
                <div class="mb-3">
                    <label for="app-user"><i class="fa-solid fa-user mb-3"></i> Apellido paterno</label>
                    <input type="text" id="app-user" name="app-user" class="form-control" required
                        value="{{ auth()->user()->US_APE_PA }}">
                    <div class="emailHelp" class="form-text my-3">Puedes editar tu primer apellido aquì.</div>
                </div>
                <div class="mb-3">
                    <label for="apm-user"><i class="fa-solid fa-user mb-3"></i>Apellido materno</label>
                    <input type="text" id="apm-user" name="apm-user" class="form-control"
                        value="{{ auth()->user()->US_APE_MA }}">
                    <div class="emailHelp" class="form-text my-3">Puedes editar tu segundo apellido aquì.</div>
                </div>
                <div class="mb-3">
                    <label for="email-user"><i class="fa-solid fa-user mb-3"></i> Correo electrónico</label>
                    <input type="email" id="email-user" class="form-control" readonly
                        value="{{ auth()->user()->email }}">
                    <div class="emailHelp" class="form-text my-3">No puedes modificar este campo.Consulta a un administrador.
                    </div>
                </div>
                <div class="mb-3">
                    <label for="username"><i class="fa-solid fa-user mb-3"></i> Username</label>
                    <input type="text" id="username" name="username" class="form-control" readonly
                        value="{{ auth()->user()->US_USERNAME }}">
                </div>
                <div class="mb-3">
                    <label for="userrol"><i class="fa-solid fa-user mb-3"></i> Roll</label>
                    <input type="text" id="userrol" name="userrol" class="form-control" readonly
                        value="{{ auth()->user()->US_ROL }}">
                    <div class="emailHelp" class="form-text my-3">Consulta a un administrador para aumentar tus privilegios.
                    </div>
                </div>
                <div class="mb-3" style="position: relative;">
                    <label for="password1"><i class="fa-solid fa-user mb-3"></i> Contraseña</label>
                    <input type="password" id="password1" class="form-control" style="padding-right: 30px;">
                    <span class="eye-icon-container"
                        style="position: absolute; top: 58%; transform: translateY(-50%); right: 10px;">
                        <i class="fa-regular fa-eye toggle-password" data-target="container_password"
                            onclick="mostrarContrasena('password1', this)"></i>
                    </span>
                    <div class="emailHelp" class="form-text my-3">Cambia tu contraseña aquí.</div>
                </div>

                <div class="mb-3" style="position: relative;">
                    <label for="password2"><i class="fa-solid fa-user mb-3"></i> Contraseña</label>
                    <input type="password" id="password2" class="form-control" style="padding-right: 30px;">
                    <span class="eye-icon-container"
                        style="position: absolute; top: 58%; transform: translateY(-50%); right: 10px;">
                        <i class="far fa-eye toggle-password" data-target="container_password2"
                            onclick="mostrarContrasena('password2', this)"></i>
                    </span>
                    <div class="emailHelp" class="form-text my-3">Confirma tu contraseña aquí.</div>
                </div>
                <div class="alert alert-warning">
                    <ul>
                        <li>
                            Al menos una letra mayúscula (A-Z).
                        </li>
                        <li>
                            Al menos una letra minúscula (a-z).
                        </li>
                        <li>
                            Al menos un dígito (0-9).
                        </li>
                        <li>
                            Al menos un carácter especial (@$!%*?&).
                        </li>
                        <li>
                            Longitud mínima de 8 caracteres.
                        </li>
                    </ul>
                </div>
                <button class="btn btn-primary w-100 my-5" type="submit">
                    Guardar cambios
                </button>

            </form>
            <script>
                function passwordValidate(pass) {
                    const expresion = /^(?=.[A-Za-z])(?=.[a-zA-Z])(?=.\d)(?=.[@$!%?&])[A-Za-z\d@$!%?&]{8,}$/;
                    return expresion.test(pass);
                }

                function validateNombre(nombre, app, apm) {
                    const expresion = /^[a-zA-ZáéíóúüÁÉÍÓÚÜñÑ\s]+$/;
                    return expresion.test(nombre) && expresion.test(app) && expresion.test(apm);
                }

                function validarregistro(correo, contrasena, nombre, app, apm) {
                    if (!validarCorreo(correo)) {
                        alert('Ingrese un correo valido');
                        return false;
                    }
                    if (!validateNombre(nombre, app, apm)) {
                        alert('El nombre no debe contener símbolos');
                        return false;
                    }
                    if (!passwordValidate(contrasena)) {
                        alert('La contraseña no cumple con requisitos');
                        return false;
                    }
                    return true;
                }

                function validarregistro(correo, contrasena, nombre, app, apm) {
                    if (!validarCorreo(correo)) {
                        console.log('Ingrese un correo valido');
                        return false;
                    }
                    if (!validateNombre(nombre, app, apm)) {
                        console.log('El nombre no debe contener símbolos');
                        return false;
                    }
                    if (!passwordValidate(contrasena)) {
                        console.log('La contraseña no cumple con requisitos');
                        return false;
                    }
                    return true;
                }
                document.addEventListener('DOMContentLoaded', function() {
                    const form = document.getElementById('perfil-form');

                    form.addEventListener('submit', function(event) {
                        event.preventDefault(); // Evitar el envío automático del formulario

                        const correo = document.getElementById('email-user').value;
                        const contrasena = document.getElementById('password1').value;
                        const nombre = document.getElementById('name-user').value;
                        const app = document.getElementById('app-user').value;
                        const apm = document.getElementById('apm-user').value;

                        if (validarregistro(correo, contrasena, nombre, app, apm)) {
                            alert('Guardado con exito')
                            form.submit(); // Enviar el formulario si las validaciones son exitosas
                        } {
                            alert('Algunos campos no cumplen los requisitos')
                        }
                    });
                });

                function mostrarContrasena(inputId, icon) {
                    var tipo = document.getElementById(inputId);
                    if (tipo.type === "password") {
                        tipo.type = "text";
                        icon.classList.remove("fa-eye");
                        icon.classList.add("fa-eye-slash");
                    } else {
                        tipo.type = "password";
                        icon.classList.remove("fa-eye-slash");
                        icon.classList.add("fa-eye");
                    }
                }

                function mostrarContrasena(inputId, icon) {
                    var tipo = document.getElementById(inputId);
                    if (tipo.type === "password") {
                        tipo.type = "text";
                        icon.classList.remove("fa-eye");
                        icon.classList.add("fa-eye-slash");
                    } else {
                        tipo.type = "password";
                        icon.classList.remove("fa-eye-slash");
                        icon.classList.add("fa-eye");
                    }
                }
            </script>
        </div>

    @endauth
@endsection

@endsection