<!DOCTYPE html>
<html>
<%- include('head.ejs', {title: 'Página principal' }); %>

    <body>
        <div class="container">
            <%- include('navbar.ejs', { isAdmin: isAdmin }); %>

            <div class="row shadow-lg p-4 m-3 bg-white rounded">
                <% if(studentFormData.length == 0 && changeData.length == 0) { %>
                    <h3 class="text-center mt-3">Sem pedidos ou mudanças de passe</h3>
                <% } %>
                <% if(studentFormData.length > 0) { %>
                    <% if (studentFormData.length > 0 && changeData.length > 0) { %>
                        <div class="col-md-6">
                    <% } %>
                    <h3 class="text-center mt-3">Pedidos de passe</h3>
                    <div class="table-responsive">
                        <table class="table table-hover table-bordered border-dark text-center mt-5">
                            <thead>
                                <tr>
                                <th scope="col">Nome</th>
                                <th scope="col">Número</th>
                                <th scope="col">CC</th>
                                <th scope="col">Cartão</th>
                                <th scope="col">Passe</th>
                                <th scope="col">Comprovativo</th>
                                <th scope="col">Ação</th>
                                <th scope="col" class="visually-hidden">Id</th>
                                </tr>
                            </thead>
                            <tbody>
                                <% studentFormData.forEach(function (formData, index) { %>
                                <tr>
                                <td><%= formData.nomeMembroUMa %></td>
                                <td><%= formData.numberMembroUMa %></td>
                                <td>
                                    <% if (Array.isArray(formData.CCMembroUMa)) { %>
                                    <% formData.CCMembroUMa.forEach(function (filename, index) { %>
                                        <img src="<%= filename %>" class="img-fluid" style="width: 50px; height: 50px;" onclick="displayImage('<%= filename %>')" data-bs-toggle="modal" data-bs-target="#imageModal">
                                    <% }); %>
                                    <% } else { %>
                                    <img src="<%= formData.CCMembroUMa %>" class="img-fluid" style="width: 50px; height: 50px;" onclick="displayImage('<%= formData.CCMembroUMa %>')" data-bs-toggle="modal" data-bs-target="#imageModal">
                                    <% } %>
                                </td>
                                <td>
                                    <% if (Array.isArray(formData.cartaoMembroUMa)) { %>
                                        <% formData.cartaoMembroUMa.forEach(function (filename, index) { %>
                                            <img src="<%= filename %>" class="img-fluid" style="width: 50px; height: 50px;" onclick="displayImage('<%= filename %>')" data-bs-toggle="modal" data-bs-target="#imageModal">
                                        <% }); %>
                                    <% } else { %>
                                        <img src="<%= formData.cartaoMembroUMa %>" class="img-fluid" style="width: 50px; height: 50px;" onclick="displayImage('<%= filename %>')" data-bs-toggle="modal" data-bs-target="#imageModal">
                                    <% } %>
                                </td>
                                <td><%= formData.tipoPasse %></td>
                                <% if (formData.tipoPasse  == 'Interurbano') { %>
                                    <td>
                                        <% if (Array.isArray(formData.comprovativoMorada)) { %>
                                            <% formData.comprovativoMorada.forEach(function (filename, index) { %>
                                                <img src="<%= filename %>" class="img-fluid" style="width: 50px; height: 50px;" onclick="displayImage('<%= filename %>')" data-bs-toggle="modal" data-bs-target="#imageModal">
                                            <% }); %>
                                        <% } else { %>
                                            <img src="<%= formData.comprovativoMorada %>" class="img-fluid" style="width: 50px; height: 50px;" onclick="displayImage('<%= filename %>')" data-bs-toggle="modal" data-bs-target="#imageModal">
                                        <% } %>
                                    </td>
                                <% } else { %>
                                    <td>Desnecessário</td>
                                <% } %>
                                <% if (formData.emitted == false) { %>
                                    <td>
                                        <form method="post" action="/emitPass/emitir/<%= index %>">
                                            <input type="hidden" name="emailAssociado" value="<%= formData.emailAssociado %>"/>
                                            <input type="hidden" name="tipoPasse" value="<%= formData.tipoPasse %>"/>
                                            <div class="d-grid gap-2 col-6 mx-auto">
                                                <button type="submit" class="btn btn-primary">Emitir</button>
                                            </div>
                                        </form>
                                        <form method="post" action="/emitPass/apagar/<%= index %>">
                                            <input type="hidden" name="emailAssociado" value="<%= formData.emailAssociado %>"/>
                                            <div class="d-grid gap-2 col-6 mx-auto">
                                                <button type="submit" class="btn btn-danger mt-1">Apagar</button>
                                            </div>
                                        </form>
                                    </td>
                                <% } else { %>
                                    <td>Emitido 
                                        <form method="post" action="/emitPass/apagar/<%= index %>">
                                            <div class="d-grid gap-2 col-6 mx-auto">
                                                <button type="submit" class="btn btn-danger mt-1 btn-block">Apagar</button>
                                            </div>
                                        </form>
                                    </td>
                                <% } %>
                                </tr>
                                <td class="visually-hidden"><%= index %></td>
                                <% }) %>
                            </tbody>
                        </table>   
                        
                    </div> 
                    <% if (studentFormData.length > 0 && changeData.length > 0) { %>
                    </div>
                    <% } %>
                <% } %>

                <% if(changeData.length > 0) { %>
                    <% if (studentFormData.length > 0 && changeData.length > 0) { %>
                        <div class="col-md-6">
                    <% } %>
                    <h3 class="text-center mt-3">Mudanças de tipo de passe</h3>
                    <div class="table-responsive">
                        <table class="table table-hover table-bordered border-dark text-center mt-5">
                            <thead>
                                <tr>
                                <th scope="col">Email</th>
                                <th scope="col">Tipo de passe</th>
                                <th scope="col">Comprovativo de morada</th>
                                <th scope="col">Ação</th>
                                <th scope="col" class="visually-hidden">Id</th>
                                </tr>
                            </thead>
                            <tbody>
                                <% changeData.forEach(function (data, index) { %>
                                <tr>
                                <td><%= data.emailAssociado %></td>
                                <td><%= data.tipoPasse %></td>
                                <% if (data.tipoPasse  == 'Interurbano') { %>
                                    <td>
                                        <% if (Array.isArray(data.comprovativoMorada)) { %>
                                            <% data.comprovativoMorada.forEach(function (filename, index) { %>
                                                <img src="<%= filename %>" class="img-fluid" style="width: 50px; height: 50px;" onclick="displayImage('<%= filename %>')" data-bs-toggle="modal" data-bs-target="#imageModal">
                                            <% }); %>
                                        <% } else { %>
                                            <img src="<%= data.comprovativoMorada %>" class="img-fluid" style="width: 50px; height: 50px;" onclick="displayImage('<%= filename %>')" data-bs-toggle="modal" data-bs-target="#imageModal">
                                        <% } %>
                                    </td>
                                <% } else { %>
                                    <td>Desnecessário</td>
                                <% } %>
                                <% if (data.emitted == false) { %>
                                    <td>
                                        <form method="post" action="/emitPass/emitir/muda/<%= index %>">
                                            <input type="hidden" name="emailAssociado" value="<%= data.emailAssociado %>"/>
                                            <input type="hidden" name="tipoPasse" value="<%= data.tipoPasse %>"/>
                                            <div class="d-grid gap-2 col-6 mx-auto">
                                                <button type="submit" class="btn btn-primary btn-block">Emitir</button>
                                            </div>
                                        </form>
                                        <form method="post" action="/emitPass/apagar/muda/<%= index %>">
                                            <input type="hidden" name="emailAssociado" value="<%= data.emailAssociado %>"/>
                                            <div class="d-grid gap-2 col-6 mx-auto">
                                                <button type="submit" class="btn btn-danger mt-1 btn-block">Apagar</button>
                                            </div>
                                        </form>
                                    </td>
                                <% } else { %>
                                    <td>Emitido 
                                        <form method="post" action="/emitPass/apagar/muda/<%= index %>">
                                            <div class="d-grid gap-2 col-6 mx-auto">
                                                <button type="submit" class="btn btn-danger mt-1 btn-block">Apagar</button>
                                            </div>
                                        </form>
                                    </td>
                                <% } %>
                                </tr>
                                <td class="visually-hidden"><%= index %></td>
                                <% }) %>
                            </tbody>
                        </table>      
                    </div>
                    <% if (studentFormData.length > 0 && changeData.length > 0) { %>
                        </div>
                    <% } %>
                <% } %>
            </div>
        </div>

        <div class="modal fade justify-content-center align-items-center" id="imageModal" tabindex="-1" aria-labelledby="imageModalLabel" aria-hidden="true">
            <div class="modal-dialog modal-xl d-flex justify-content-center align-items-center">
                <div class="modal-content justify-content-center align-items-center">
                    <div class="modal-body justify-content-center align-items-center">
                        <img id="modalImage" src="" class="img-fluid">
                    </div>
                </div>
            </div>
        </div>
        <script>
            function displayImage(imageSrc) {
              const modalImage = document.getElementById('modalImage');
              modalImage.src = imageSrc;
            }
        </script>
          
    </body>

</html>
