<!doctype html>
<html lang="en">

<head>
  <%- include("template/head.ejs")%>
        
    <link rel="stylesheet" type="text/css" href="../css/crearperfil.css" />
  
</head>

<body>
  
    </header>
    <main class="container-fluid p-0 mb-0">

        <div class="float-start ms-0 row justify-content-center col-12 col-lg-12 col-md-12 col-sm-12 text-center">
<!--Registro con toda la información del Estudiante/Profesor/Usuario-->
            <div class="h-100 m-3 col-11 float-none col-center border border-dark border-2 overflow-hidden"
                style=" background-color:#eee8cd;max-height: 1800px;">
                <div class=" row border border-dark border-end-0 border-top-0 border-start-0">
                    <div class="col-center pt-4 pb-md-3 pb-sm-3 pb-3 pb-lg-3">
                        <span class="fs-3 fw-bold">Crear Perfil de Usuario</span></div>
                    
                </div>
                <div class="col-12 mt-3" style="max-height: 1700px;">
                  <form action="/registrousuario" class= "needs-validation formulario" method="POST">
                    <%if (error){%>
                      <p class="text-center mt-3 p-1 bg-danger">Rellena los campos necesarios/Ese nombre de
                          usuario ya existe</p>
                      <%}%>
                    <%if (success){%>
                      <p class="text-center mt-3 p-1 bg-success">Usuario creado satisfactoriamente</p>
                      <%}%>
                    <div class="mb-3">
                      <label for="correo" class="form-label col-12 col-sm-12 col-md-12 col-lg-12 fw-bold fs-4 my-2">Correo</label>
                      <input type="text" id="correoform" name="correo" class=" col-12 col-sm-12 col-md-12 col-lg-4 btn btn-secondary my-2" placeholder="" onkeyup="validarCorreoForm(),comprobar()" autocomplete="off">
                    <span id="textoCorreo"></span>
                    </div>
                    <div class="mb-3">
                      <label for="password" class="form-label col-12 col-sm-12 col-md-12 col-lg-12 fw-bold fs-4 my-2">Contraseña</label>
                      <input type="password" id="passwordform" name="password" class=" col-12 col-sm-12 col-md-12 col-lg-4 btn btn-secondary my-2 " placeholder="" onkeyup="validarPassword(),comprobar()" autocomplete="off">
                  <span id="textoPassword"></span>
                    </div>
                    <div class="mb-3">
                      <label for="nombre" class="form-label col-12 col-sm-12 col-md-12 col-lg-12 fw-bold fs-4 my-2">Nombre</label>
                      <input type="text" id="nombreform" name="nombre" placeholder="" onkeyup="validarName(),comprobar()" autocomplete="off" class=" col-12 col-sm-12 col-md-12 col-lg-4 btn btn-secondary my-2 " maxlength="20">
                      <span id="textoNombre"></span>
                    </div>
                    <div class="mb-3">
                      <label for="apellidos" class="form-label col-12 col-sm-12 col-md-12 col-lg-12 fw-bold fs-4 my-2">Apellidos</label>
                      <input type="text" id="apellidosform" name="apellidos" placeholder="" onkeyup="validarApellidos(),comprobar()" autocomplete="off" class=" col-12 col-sm-12 col-md-12 col-lg-4 btn btn-secondary my-2" maxlength="30">
                  <span id="textoApellidos"></span>
                    </div>
                      <div class="mb-3">
                        <label for="ciudad" class="form-label col-12 col-sm-12 col-md-12 col-lg-12 fw-bold fs-4 my-2">Ciudad</label>
                        <select id="ciudad" class="col-12 col-sm-12 col-md-12 col-lg-4 btn btn-secondary my-2 " name="ciudad" placeholder="Elija Ciudad">
                          <option value="Madrid">Madrid</option>
                          <option value="Barcelona">Barcelona</option>
                          <option value="Bilbao">Bilbao</option>
                          <option value="Sevilla">Sevilla</option>
                          <option value="Granada">Granada</option>
                          <option value="Otra">Otra</option>
                        </select>
                      </div>
                      <div class="mb-3">
                        <label for="telefono" class="form-label col-12 col-sm-12 col-md-12 col-lg-12 fw-bold fs-4 my-2">Telefono</label>
                        <input type="text" id="telefonoform2" name="telefono" class=" col-12 col-sm-12 col-md-12 col-lg-4 btn btn-secondary my-2 "
                        placeholder="XXX XXX XXX o XXX XX XX XX" onkeyup="validarTelefonoForm(),comprobar()" autocomplete="off"><span id="textoTelefono"></span>
                      </div>
                      
                      <div class="mb-3">
                        <label for="rol" class="form-label col-12 col-sm-12 col-md-12 col-lg-12 fw-bold fs-4 my-2">Rol</label>
                        <select id="rol" class="col-12 col-sm-12 col-md-12 col-lg-4 btn btn-secondary my-2  " name="rol">
                          <option value="Alumno" selected>Alumno</option>
                          <option value="Profesor" >Profesor</option>
                        </select>
                      </div>
                      <div class="mb-3">
                        <label for="planformacion" class="form-label col-12 col-sm-12 col-md-12 col-lg-12 fw-bold fs-4 my-2">Plan de Formacion</label>
                        <select id="plan" class="col-12 col-sm-12 col-md-12 col-lg-4 btn btn-secondary my-2 " name="grupoPago">
                          <option value="Mensual" selected>Mensual</option>
                          <option value="Trimestral">Trimestral</option>
                          <option value="Anual">Anual</option>
                        </select>
                      </div>
                      <div class="mb-3">
                        <label for="fechainicio" class="form-label col-12 col-sm-12 col-md-12 col-lg-12 fw-bold fs-4 my-2">Fecha de Ingreso</label>
                        <input type="text" id="dateingreso" class="col-12 col-sm-12 col-md-12 col-lg-4 btn btn-secondary my-2" placeholder="XX-XX-XXXX" name="fechaIngreso">
                      </div>
                      
                      <div class="mb-3">
                        <label for="metodoPago" class="form-label col-12 col-sm-12 col-md-12 col-lg-12 fw-bold fs-4 my-2">Metodología de Pago</label>
                        <select id="pago" class="col-12 col-sm-12 col-md-12 col-lg-4 btn btn-secondary my-2"name="metodoPago">
                          <option id="optionpago">Efectivo</option>
                          <option id="optionpago">PayPal</option>
                          <option id="optionpago">Bizzum</option>
                        </select>
                      </div>
                      <div class="mb-3 d-none">
                        <label for="numeroID" class="form-label col-12 col-sm-12 col-md-12 col-lg-12 fw-bold fs-4 my-2">ID</label>
                        <input type="text" id="numeroID" class="col-12 col-sm-12 col-md-12 col-lg-4 btn btn-secondary my-2" value="" name="numeroID">
                          
                        </select>
                      </div>
                      
                      
                        <a class="col-12 col-sm-12 col-md-12 col-lg-4 btn btn-success my-2" href="/inicio" id="volveriniciarsesion">Volver a Inicio</a>
                
                <button class="botonenviar col-12 col-sm-12 col-md-12 col-lg-4 btn btn-success my-2 px-1 my-2" onclick="gfg_Run()" type="submit">Crear Usuario</button>
                  </form>
                  
                  
                    
                
            </div> 

        </div>
<!--FIN Registro con toda la información del Estudiante/Profesor/Usuario-->
        


        




    </main>
    <%- include("template/footer.ejs")%>
    <!--Validación de todo el Registro con toda la información del Estudiante/Profesor/Usuario-->
    <script src="../js/validar.js"></script>
    <script>
      //GENERAR ID AMIGOS AUTOMATICO
      var el_down = document.getElementById("numeroID");
      function generateP() {
                        var pass = '';
                        var str = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ' + 
                                'abcdefghijklmnopqrstuvwxyz0123456789@#$';
                          
                        for (let i = 1; i <= 8; i++) {
                            var char = Math.floor(Math.random()
                                        * str.length + 1);
                              
                            pass += str.charAt(char)
                        }
                          
                        return pass;
                    }
     function gfg_Run() {
            $('#numeroID').attr("value",generateP())
        }
    </script>
</body>

</html>