<%@page contentType="text/html" pageEncoding="UTF-8"%>
    <% if (request.getSession().getAttribute("message") != null) {%>
    ${message}
    <% request.getSession().removeAttribute("message");
        }%>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="msapplication-tap-highlight" content="no">
  <title>Bappsket</title>


  <!-- CORE CSS-->
  <link rel="shortcut icon" href="img/favicon.ico"/>
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  <link href="css/materialize.min.css" type="text/css" rel="stylesheet" media="screen,projection">
  <link href="css/style.css" type="text/css" rel="stylesheet" media="screen,projection">
    <!-- Custome CSS-->    
  <link href="css/page-center.css" type="text/css" rel="stylesheet" media="screen,projection">
  
</head>

<body class="blue darken-4">
<div id="registro-page" class="row">
    <div class="col s12 z-depth-4 card-panel">
        <form action="registro" method="post" onsubmit="return validarRegistrar()">
            <div class="row margin">
                <div class="input-field col s12">
                    <i class="Small material-icons prefix">account_box</i>
                    <input id="correo" name="correo" type="text">
                    <label for="correo" class="center-align">Correo</label>
                </div>
            </div>
            <div class="row margin">
                <div class="input-field col s12">
                    <i class="Small material-icons prefix">lock</i>
                    <input id="password" name="password" type="password">
                    <label for="password">Contraseña</label>
                </div>
            </div>
            <div class="row margin">
                <div class="input-field col s12">
                    <i class="Small material-icons prefix">lock</i>
                    <input id="password2" name="password2" type="password">
                    <label for="password2">Confirmar Contraseña</label>
                </div>
            </div>
            <div class="row margin">
                <div class="input-field col s6">
                    <input id="nombre" name="nombre" type="text" class="validate">
                    <label for="nombre">Nombre</label>
                </div>
                <div class="input-field col s6">
                    <input id="apellidos" name="apellidos" type="text" class="validate">
                    <label for="apellidos">Apellidos</label>
                </div>
            </div>
            <div class="row margin">
                Tipo usuario:
                <p>
                    <label>
                        <input class="with-gap" name="tipo_usuario" id ="tipo_usuario_A" value="A" type="radio"  />
                        <span>Administrador</span>
                    </label>
                    <label>
                        <input class="with-gap" name="tipo_usuario" id ="tipo_usuario_E" value="E" type="radio"  />
                        <span>Entrenador</span>
                    </label>
                </p>
            </div>
            <div class="row margin">
                <button class="btn waves-effect waves-light col s12 orange darken-4" type="submit" id="registro" name="registro">Continuar registro
                </button>
            </div>
        </form>
    </div>
</div>



    <!-- ================================================
      Scripts
      ================================================ -->

    <!-- jQuery Library -->
    <script type="text/javascript" src="js/jquery.js"></script>
    <!--materialize js-->
    <script type="text/javascript" src="js/materialize.min.js"></script>
    <!---script comprobaciones --->
    <script type="text/javascrpit" src="js/validarFormulario.js"></script>
    <script>
        $( "#registro" ).click(function() {
            if(($("#correo").val() === "")){
                alert("El campo correo no puede estar vacio");
                return false;
            }else if($("#password").val() === ""){
                alert("El campo contraseña no puede estar vacío");
                return false;
            }else if($("#password2").val() === ""){
                alert("El campo confirmar contraseña no puede estar vacio");
                return false;
            }else if($("#nombre").val() === ""){
                alert("El campo nombre no puede estar vacío");
                return false;
            }else if($("#apellidos").val() === ""){
                alert("El campo apellidos no puede estar vacío");
                return false;
            }else if($("#tipo_usuario_A:checked").val() !== "A" && $("#tipo_usuario_E:checked").val() !== "E"){
                alert("El campo tipo de usuario no puede estar vacío");
                return false;
            }else{
                return true;
            }
      });
    </script>


</body>

</html>     