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

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    
    <main>
        <h1 class="center white-text"><%= titulo %></h1>

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

                    <input type="hidden" name="_csrf" value="<%= csrfToken %>" >
                    
                        <h6 class="header center grey-text text-lighten-1">Reporte de la siguiente Historia de Usuario: </h6>

                        <h5 class="center white-text">
                            <% for (let historia of Historia) { %>
                                <% if (historia.idHistoria == id_historia) { %>
                                    Historia de Usuario: <%= historia.idHistoria %> 
                                <% } %>
                            <% } %>
                        </h5>
                        <div class="center">

                            <br>
                          <!-- Modal Trigger -->
                        <a class="waves-effect waves-light btn-large modal-trigger" href="#modal1">Estadisticas</a>
                        <br><br>
                        <div class="center">
                            <a href="/proyectos/casodeuso/<%= idProyecto %>" 
                                class="waves-effect waves-light red btn" 
                                style="width:14rem;">
                                <i class="material-icons left">undo</i>
                                Regresar
                            </a>
                        </div>
                        <!-- Modal Structure -->
                        <div id="modal1" class="modal black">
                            <div class="modal-content">
                            <h4>Tareas Activas</h4>
                            <p><table class="centered highlight">
                                <tr>
                                    <td>Pendiente</td>
                                    <td>En progreso</td>
                                    <td>Terminado</td>
                                </tr>
                                <tr>
                                    <% let limite = 0 %>
                                    <% while (limite < 1) { %>
                                        <% let var1 = 0 %>
                                        <% let var2 = 0 %>
                                        <% let var3 = 0 %>
                                        <% for (let reporte of Reporte) { %>
                                            <% if (reporte.idHistoria == idHistoria) { %>
                                                <% for (let historia of Historia) { %>
                                                    <% if (historia.idHistoria == idHistoria) { %>
                                                        <% for (let fases of Fase) { %>
                                                            <% for (let tarea of Tareas) { %>
                                                                <% if (reporte.idTarea == tarea.idTarea) { %>
                                                                    <% for (let estado of Estado) { %>
                                                                        <% if (reporte.idEstado == estado.idEstado) { %>
                                                                            <% if (tarea.idFase == fases.idFase) { %>
                                                                                <% if (reporte.idEstado == 1) { %>
                                                                                    <% var1 += 1; %>
                                                                                <% } %>
                                                                                <% if (reporte.idEstado == 2) { %>
                                                                                    <% var2 += 1; %>
                                                                                <% } %>
                                                                                <% if (reporte.idEstado == 3) { %>
                                                                                    <% var3 += 1; %>
                                                                                <% } %>
                                                                            <% } %> 
                                                                        <% } %>   
                                                                    <% } %>
                                                                <% } %>  
                                                            <% } %>
                                                        <% } %>
                                                    <% } %>
                                                <% } %>
                                            <% } %>     
                                        <% } %>
                                        <% limite += 1; %>
                                        <td><%= var1 %></td>
                                        <td><%= var2 %></td>
                                        <td><%= var3 %></td>
                                        <tr>
                                        </table>
                                        <canvas id="myChart" width="400" height="180"></canvas>
                                        <script>
                                        var ctx = document.getElementById('myChart').getContext('2d');
                                        var myChart = new Chart(ctx, {
                                            type: 'bar',
                                            data: {
                                                labels: ['Pendiente', 'En progreso', 'Terminados'],
                                                datasets: [{
                                                    label: '# de tareas',
                                                    data: [<%= var1 %>, <%= var2 %>, <%= var3 %>],
                                                    backgroundColor: [
                                                        'rgba(255, 99, 132, 1)',
                                                        'rgba(54, 162, 235, 1)',
                                                        'rgba(255, 206, 86, 1)'
                                                    ],
                                                    borderColor: [
                                                        'rgba(255, 99, 132, 1)',
                                                        'rgba(54, 162, 235, 1)',
                                                        'rgba(255, 206, 86, 1)'
                                                    ],
                                                    borderWidth: 1,
                                                }]
                                            },
                                            options: {
                                                scales: {
                                                    y: {
                                                        beginAtZero: true
                                                    }
                                                }
                                            }
                                        });
                                        </script>

    
                                    <% } %>
                     
                             </p>
                            </div>
                            <div class="modal-footer grey darken-4">
                                <a href="#!" class="modal-close waves-effect waves-green btn-flat white-text">Cerrar</a>
                            </div>
                        </div>
                        </div>
                        <table class="centered highlight">
                        <br><br>
                        <tr>

                            <td>Nombre Tarea</td>
                            <td>Estado</td>
                            <td>Acciones</td>
                            
                        </tr>
                        
                        <% for (let reporte of Reporte) { %>
                            <% if (reporte.idHistoria == idHistoria) { %>
                                <% for (let historia of Historia) { %>
                                    <% if (historia.idHistoria == idHistoria) { %>
                                        <% for (let fases of Fase) { %>
                                            <% for (let tarea of Tareas) { %>
                                                <% if (reporte.idTarea == tarea.idTarea) { %>
                                                    <% for (let estado of Estado) { %>
                                                        <% if (reporte.idEstado == estado.idEstado) { %>
                                                            <% if (tarea.idFase == fases.idFase) { %>
                                                                <tr>      
                                                                    <td><%= historia.idHistoria %> - <%= historia.quiero %> - <%= tarea.nombreTarea %> (<%= fases.nombreFase %>)</td>
                                                                    
                                                                        <form action="/reporte/ver-reporte/<%= idProyecto %>/<%= id_historia %>" method="POST">
                                                                            
                                                                            <td>
                                                                                <div class = "center">
                                                                                    <div class="input-field col s12 white-text">
                                                                                        <select class="browser-default transparent" id="estado" name="estado" style="border-color: rgba(255, 255, 255, 0.322); color: rgb(255, 255, 255);" required>
                                                                                            <option class="black" value='<%= estado.idEstado %>' disabled selected><%= estado.Estado %></option>
                                                                                            <option class="black" value="1">Pendiente</option>
                                                                                            <option class="black" value="2">En progreso</option>
                                                                                            <option class="black" value="3">Terminado</option>
                                                                                        </select>
                                                                                    </div>
                                                                                </div>
                                                                            </td>
                                                                            
                                                                            <td> 
                                                                                
                                                                                <input type="hidden" name="idRepOrte" value="<%= reporte.idReporte %>">
                                                                                <input type="hidden" name="_csrf" value="<%= csrfToken %>">
                                                                                
                                                                                <button class="btn-large waves-effect waves-light green" type="submit" name="action">
                                                                                    <i class="material-icons right">save</i>Guardar
                                                                                </button>
                                                                                
                                                                            </td>
                                                                            
                                                                        </form>
                                                                    
                                                                    </td>
                                                                </tr>
                                                            <% } %> 
                                                        <% } %>   
                                                    <% } %>
                                                <% } %>  
                                            <% } %>
                                        <% } %>
                                    <% } %>
                                <% } %>
                            <% } %>     
                        <% } %>                   
                    </table>
                    
                    <br>

                <br>

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

    </main>

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