<%@page contentType="text/html" pageEncoding="UTF-8"%>
<% if (request.getSession().getAttribute("usuario") == null) {%>
<%@ include file="/includes/login.jsp" %>
<% } else { %>
<%@ include file="/includes/header.jsp" %>
<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 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">
  
</head>

<body>
    
<div id="registro-page" class="row">
    <form action="añadirEntrenador" method="post">
        <div class="row margin">
            <br>
            <br>
        </div>
        <div class="row margin">
            <div class="input-field col s2">
                <input id="correo" name="correo" type="text">
                <label for="correo" class="center-align">Correo del entrenador:</label>
            </div>
        </div>
        <div class="row margin">
            <div class="input-field col s2">
                <p>Nombre:</p>
                <input readonly id="nombre" name="nombre" type="text">
            </div>
        </div>
        <div class="row margin">
            <div class="input-field col s2">
                <p>Apellidos:</p>
                <input readonly id="apellidos" name="apellidos" type="text">
            </div>
        </div>
        <div class="row margin">
            <button class="btn waves-effect waves-light col s1 orange darken-3" type="submit" id="añadir" name="añadir">Añadir
            </button>
        </div>       
<% if (request.getSession().getAttribute("message") != null) {%>
${message}
<% request.getSession().removeAttribute("message");
    }%>
    </form>
</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 type="text/javascrpit" src="js/ajax.js"></script>
    <script> 
        $('#correo').on('change',function(){
            var correo = document.getElementById('correo').value;
            $(document).ready(function(){
                $.ajax({
                    type:'GET',
                    url:'/cargarEntrenador?correo='+correo,
                    headers:{
                        Accept : "application/json; charset=UTF-8",
                        "Content-Type" : "application/json; charset=UTF-8"
                    },
                    success: function(result){
                    var usuario = $.parseJSON(result);
                    document.getElementById('nombre').value = usuario.nombre;
                    document.getElementById('apellidos').value = usuario.apellidos;
                    }
                }); 
            }); 
        });
        
        
        $("#añadir").click(function() {   
            if($("#correo").val() === ""){
                alert("El campo correo no puede estar vacio");
                return false;
            }else{
                return true;
            }
        });
    </script>


</body>

</html>

<%}%>