<%@page import="Modelo.Usuario"%>
<%@page import="Modelo.Equipo"%>
<%@page import="java.util.ArrayList"%>
<%@page import="Modelo.CodClub"%>
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<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="login2" method="post" onsubmit="return validarLogin2(this)">
            <%if (request.getSession().getAttribute("message") != null) {%>
            ${message}
            <% request.getSession().removeAttribute("message");
            }
            Usuario usuario = (Usuario) request.getSession().getAttribute("usuario");
            String tipo_usuario = usuario.getTipo_usuario();
            if(tipo_usuario.equals("EC")){
            %>
            <div class="input-field col s12">
                <select name="club" id="club" onchange="return cargarEquipos(this)">
                    <option value="" disabled selected>Seleccione un club</option>
                    <% for (CodClub cc : (ArrayList<CodClub>) request.getAttribute("lista_clubs")) {
                            request.setAttribute("cc", cc);
                    %>
                        <option value="${cc.id_club}">${cc.nombre_club}</option>
                    <% } %>
                </select>
                <label>Selecciona un club :</label>
            </div>
            <div class="input-field col s12" id="equipos">
                <select name="equipo" id="equipo">
                    <option value="" disabled selected>Seleccione un equipo</option>
                </select>
                <label>Selecciona un equipo :</label>
            </div>
            <div class="row margin">
                <button class="btn waves-effect waves-light col s12 orange darken-3" type="submit" id="acceder" name="acceder">Acceder
                </button>
                <input type="hidden" name="tipo_usuario" id="tipo_usuario" value="<%=tipo_usuario%>">
            </div>
            <%}else{%>
            <div class="input-field col s12">
                <select name="equipo" id="equipo">
                    <option value="" disabled selected>Selecciona un equipo</option>
                    <% for (Equipo e : (ArrayList<Equipo>) request.getAttribute("lista_equipos")) {
                            request.setAttribute("e", e);
                        %>
                        <option value="${e.id_equipo}">${e.nombre_equipo}</option>
                    <% } %>
                </select>
                <label>Selecciona un equipo:</label>
            </div>
            <div class="row margin">
                <button class="btn waves-effect waves-light col s12 orange darken-4 orange darken-3" type="submit" id="acceder" name="acceder">Acceder
                </button>
                <input type="hidden" name="tipo_usuario" id="tipo_usuario" value="<%=tipo_usuario%>">
            </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 type="text/javascrpit" src="js/ajax.js"></script>
    <script>
        $(document).ready(function(){
            $('select').formSelect();
        });
        
        $('#club').on('change',function(){
            var id_club = document.getElementById('club').value; 
            $(document).ready(function(){
               $.post('/cargarClubs?id_club='+id_club,
               function(reponseText){
                   $('#equipos').html(reponseText);
                   $('select').formSelect();
               }); 
            });
        });
        
        $("#acceder").click(function() {
            var tipo_usuario = document.getElementById('tipo_usuario').value;
            if(tipo_usuario === "EC"){
                if($("#club").val() === null){
                  alert("Hay que elegir un club");
                  return false;
                }else if ($("#equipo").val() === null){
                  alert("Hay que elegir un equipo");
                  return false;  
                }else{
                    return true;
                }
            }
        });
    </script>


</body>

</html>