<%- include('partials/head.ejs') %>
<%- include('partials/navbar.ejs') %>

    <h1 class="center white-text"><%= titulo %></h1>

    <div class="container highlight proyectContent">
        <div style="margin-bottom: 0px;">
            
            <div class="white-text col md-12 sm-12 lg-9">

                <div class="center">
                    <a href="/fases/registrar-fase/<%= idProyecto %>" class="waves-effect waves-light btn-large"><i class="material-icons left">add_circle_outline</i>Agregar fase</a>
                    <br><br>
                    <a href="/proyectos" class="waves-effect waves-light red btn" style="width:14rem;"><i class="material-icons left">undo</i>Regresar</a>        
                </div>

            <% for (let detalle of Fase) { %>

                <h3><%= detalle.nombreFase %>‏‏‎ ‎‏‏‎ ‎‏‏‎
                    <!-- Dropdown Trigger -->
                    <!-- data-tatget debe ser igual a ul id, nos saca de problemas -->
                    <br>
                    <a class="dropdown-trigger waves-effect waves-light btn indigo darken-1" data-target='<%= detalle.idFase %>' style="width: 13rem;"><i class="material-icons left">list</i>Acciones</a>
                </h3>
                <!-- Dropdown Structure -->
                <!-- Dropdown id debe de ser igual a data-tatget -->
                <ul id='<%= detalle.idFase %>' class='dropdown-content black'>
                    <li><a class="white-text" href="/tareas/registrar-tarea/<%= idProyecto %>/<%= detalle.idFase %>"><i class="material-icons">add</i>Agregar tarea</a></li>
                    <li class="divider" tabindex="-1"></li>
                    <li>
                        <form action="/fases/eliminarFase/" method="POST" id="eliminar <%= detalle.idFase %>">
                            <input type="hidden" name="_csrf" value="<%= csrfToken %>">
                            <input type="hidden" name="idFase" value="<%= detalle.idFase %>">
                            <button class="transparent" style="border-color: rgba(255, 255, 255, 0);">
                                <li>
                                    <a type="submit" name="add" class="red-text text-lighten-1">
                                        <i class="material-icons left">delete</i><strong>Borrar Fase</strong>
                                    </a>
                                </li>
                            </button>
                            <script> 
                            document.getElementById("eliminar <%= detalle.idFase%>").addEventListener('submit', (e) => {
                                let confirmacion = confirm('¿Estás seguro de eliminar la fase?');
                                if(!confirmacion){
                                e.preventDefault();
                                }  
                            });
                            </script>
                        </form>
                    </li>
                </ul>
                
                <br>

                <table class="">
                    <tr>
                        <th>Tareas</th>
                        <th>Acciones</th>
                    </tr>
                    
                        <% for (let tarea of Tareas) { %>
                            <% if (tarea.idFase == detalle.idFase) { %>
                                <tr>
                                    <td><%= tarea.nombreTarea %></td>
                                    <td>
                                        <form action="/tareas/eliminarTarea/" method="POST" id="eliminar_<%= tarea.idTarea %>">
                                        <input type="hidden" name="_csrf" value="<%= csrfToken %>">
                                        <input type="hidden" name="idTarea" value="<%= tarea.idTarea %>">
                                            <button type="submit" name="add" class="waves-effect waves-light red darken-4 btn-small"><i class="material-icons left">delete</i>Borrar Tarea</button>
                                            <script> 
                                            document.getElementById("eliminar_<%= tarea.idTarea %>").addEventListener('submit', (e) => {
                                                let confirmacion = confirm('¿Estás seguro de eliminar la tarea?');
                                                if(!confirmacion){
                                                e.preventDefault();
                                                }  
                                            });
                                            </script>
                                        </form> 
                                    </td>
                                </tr>
                            <% } %>  
                        <% } %>    
                </table>

                <br><br>
            <% } %>

                <br><br>

            </div>
        </div>
    </div>    


<%- include('partials/footer.ejs') %>