<!DOCTYPE html>
<html>

  <%- include('head.ejs', {title: 'Pedir passe'}); %>

<body>
    <div class="container">
        <header>
            <%- include('navbar.ejs'); %>
        </header>

        <% if (changeType == true) { %>
            <h3 class="text-center mt-3">Mudar tipo de passe</h3>
            <div class="shadow-lg p-3 mt-3 bg-white rounded">
                <form action="/getPass/tipo" method="post" enctype="multipart/form-data">
                    <div class="form-group">
                        <label for="tipoPasse">Tipo de passe <span style="color: red;">*</span></label>
                        <% if(tipo_error == true) { %>
                            <div>
                                <label for="tipoPasse" class="text-danger">Campo obrigatório</label>
                            </div>
                        <% } %>
                        <% if(typeof mudar_tipo_error !== 'undefined' && mudar_tipo_error == true) { %>
                            <div>
                                <label for="tipoPasse" class="text-danger mt-2">Não pode escolher o mesmo tipo de passe</label>
                            </div>
                        <% } %>
                        <% if(comprovativo_error == true) { %>
                            <select class="mt-2" name="tipoPasse" id="tipoPasse">
                                <option value=""></option>
                                <option value="Urbano">Urbano</option>
                                <option value="Interurbano" selected>Interurbano</option>
                            </select>
                        <% } else { %>
                            <select class="mt-2" name="tipoPasse" id="tipoPasse">
                                <option value=""></option>
                                <option value="Urbano">Urbano</option>
                                <option value="Interurbano">Interurbano</option>
                            </select>
                        <% } %>
                    </div>

                    <div id="arquivoInterurbano" class="<%= comprovativo_error ? 'display-block' : 'display-none' %>">
                        <div class="form-group mt-2">
                            <label for="comprovativoMorada">Comprovativo de morada <span style="color: red;">*</span></label>
                            <% if(comprovativo_error == true) { %>
                                <div>
                                    <label for="comprovativoMorada" class="text-danger">Campo obrigatório, máximo de 2 ficheiros .jpg</label>
                                </div>
                            <% } %>
                            <input type="file" class="form-control" name="comprovativoMorada" id="comprovativoMorada" multiple>
                        </div>
                    </div>

                    <button type="submit" class="btn btn-outline-dark mt-3">Submeter requisito</button>
                </form>
            </div>
        <% } else { %>
            <h3 class="text-center mt-3">Pedir Passe</h3>
            <div class="shadow-lg p-3 mt-3 bg-white rounded">
                <form action="/getPass" method="post" enctype="multipart/form-data">

                    <!-- nome do membro da UMa-->
                    <div class="form-group">
                        <label for="nomeMembroUMa">Nome <span style="color: red;">*</span></label>
                        <% if(nome_error == true) { %>
                            <div>
                                <label for="nomeMembroUMa" class="text-danger">Campo obrigatório</label>
                            </div>
                        <% } %>
                        <input type="text" class="form-control mt-2" name="nomeMembroUMa" id="nomeMembroUMa" placeholder="Nome">
                    </div>

                    <!-- Foto CC do membro da UMa -->
                    <div class="form-group mt-2">
                        <label for="CCMembroUMa">Cartão de cidadão (frente e verso .jpg) <span
                                style="color: red;">*</span></label>
                                <% if(cc_error == true) { %>
                                    <div>
                                        <label for="CCMembroUMa" class="text-danger">Campo obrigatório, máximo de 2 ficheiros .jpg</label>
                                    </div>
                                <% } %>
                        <input type="file" class="form-control mt-2" name="CCMembroUMa" id="CCMembroUMa" multiple>
                    </div>

                    <!-- Foto do cartão do membro da UMa -->
                    <div class="form-group mt-2">
                        <label for="cartaoMembroUMa">Foto do cartão (.jpg)<span style="color: red;">*</span></label>
                        <% if(cartao_error == true) { %>
                            <div>
                                <label for="cartaoMembroUMa" class="text-danger">Campo obrigatório, máximo de 2 ficheiros .jpg</label>
                            </div>
                        <% } %>
                        <input type="file" class="form-control mt-2" name="cartaoMembroUMa" id="cartaoMembroUMa" multiple>
                    </div>

                    <div class="form-group mt-2">
                        <label for="tipoPasse">Tipo de passe <span style="color: red;">*</span></label>
                        <% if(tipo_error == true) { %>
                            <div>
                                <label for="tipoPasse" class="text-danger">Campo obrigatório</label>
                            </div>
                        <% } %>
                        <% if(comprovativo_error == true) { %>
                            <select class="mt-2" name="tipoPasse" id="tipoPasse">
                                <option value=""></option>
                                <option value="Urbano">Urbano</option>
                                <option value="Interurbano" selected>Interurbano</option>
                            </select>
                        <% } else { %>
                            <select class="mt-2" name="tipoPasse" id="tipoPasse">
                                <option value=""></option>
                                <option value="Urbano">Urbano</option>
                                <option value="Interurbano">Interurbano</option>
                            </select>
                        <% } %>
                    </div>

                    <div id="arquivoInterurbano" class="<%= comprovativo_error ? 'display-block' : 'display-none' %>">
                        <div class="form-group mt-2">
                            <label for="comprovativoMorada">Comprovativo de morada <span style="color: red;">*</span></label>
                            <% if(comprovativo_error == true) { %>
                                <div>
                                    <label for="comprovativoMorada" class="text-danger">Campo obrigatório, máximo de 2 ficheiros .jpg</label>
                                </div>
                            <% } %>
                            <input type="file" class="form-control mt-2" name="comprovativoMorada" id="comprovativoMorada" multiple>
                        </div>
                    </div>

                    <button type="submit" class="btn btn-outline-dark mt-3">Submeter requisito</button>
                </form>
            </div>
        <% } %>
        <script>
            $(document).ready(function () {
                $('#tipoPasse').change(function () {
                    if ($(this).val() === 'Interurbano') {
                        $('#arquivoInterurbano').show();
                    } else {
                        $('#arquivoInterurbano').hide();
                    }
                });
            });
        </script>
    </div>
</body>

</html>