<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Formulário UEPA</title>
    <link rel="shortcut icon" href="/images/favicon.ico" type="image/x-icon">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
    <link rel="stylesheet" href="/css/style.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap" rel="stylesheet">
    <script src="https://kit.fontawesome.com/2e3ab72265.js" crossorigin="anonymous"></script>
    <link rel="stylesheet" href="/css/style.css">
    <link rel="stylesheet" href="/css/navbar.css">
    <link rel="stylesheet" href="/css/footer.css">

    <style>
        form {
            max-width: 1200px !important;
            padding: 50px;
            margin: auto;
        }

        .form-group {
            margin-bottom: 25px;
        }

        form label {
            font-size: 1.2rem;
        }

        form select option {
            font-size: 1rem;
        }

        input[type="file"] {
            font-size: 1rem;
            max-width: 100%;
        }

        .flash-message {
            margin: auto;
            border-radius: 5px;
            padding: 15px;
            max-width: 700px;
            background-color: rgb(255, 223, 83);
            animation-name: appear;
            animation-duration: 1s;
        }

        .flash-message p {
            width: fit-content;
            margin: 0;
        }

        @keyframes appear {
            from {
                opacity: 0;
                visibility: hidd;
            }

            to {
                opacity: 1;
                visibility: visible;
            }
        }
    </style>
</head>

<body>
    <%- include("./partials/navbar.ejs") %>
    <div class="main container-fluid">
        <% if (messages.error) { %>
        <div class="flash-message d-flex justify-content-center align-items-center flex-column">
            <h4>AVISO</h4>
            <p><%= messages.error %></p>
        </div>
        <% } else if (messages.success) { %>
        <div class="flash-message d-flex justify-content-center align-items-center flex-column">
            <h4>AVISO</h4>
            <p><%= messages.success %></p>
        </div>
        <% } %>


        <form action="/api/submit" method="POST" enctype="multipart/form-data" class="container">
            <div class="form-group">
                <h2>Dados de Cadastro</h2>
            </div>
            <div class="form-group">
                <label for="nome">Nome completo</label>
                <input type="text" class="form-control" name="nome" id="nome" placeholder="Digite seu nome completo" required>
            </div>
            <div class="form-group">
                <label for="vaga_select">Sexo:</label>
                <select class="form-control" id="sexo" name="sexo" required>
                    <option value="" disabled selected class="text-muted">Selecione uma opção</option>
                    <option value="Masculino">Masculino</option>
                    <option value="Feminino">Feminino</option>
                    <option value="Outro">Outro</option>
                </select>
            </div>
            <div class="form-group">
                <label for="email">Endereço Email</label>
                <input type="text" class="form-control" name="email" id="email" placeholder="Digite endereço Email" required>
            </div>
            <div class="form-group">
                <label for="data_nascimento">Data de nascimento</label>
                <input type="date" class="form-control" name="data_nascimento" id="data_nascimento" required>
            </div>
            <div class="form-group">
                <div class="row">
                    <div class="col">
                        <label for="cpf">CPF</label>
                        <input type="text" class="form-control" name="cpf" id="cpf" placeholder="123.456.789-00" required>
                    </div>
                    <div class="col">
                        <label for="rg">RG</label>
                        <input type="text" class="form-control" name="rg" id="rg" required>
                    </div>
                </div>
            </div>
            <div class="form-group">
                <h4>Fone:</h4>
            </div>
            <div class="form-group">
                <div class="row">
                    <div class="col">
                        <label for="celular">Celular</label>
                        <input type="text" class="form-control" name="celular" id="celular" placeholder="(00) 00000-0000" required>
                    </div>
                    <div class="col">
                        <label for="telefone">Telefone</label>
                        <input type="text" class="form-control" name="telefone" id="telefone" placeholder="(00) 0000-0000">
                    </div>
                </div>
            </div>

            <div class="form-group">
                <h4>Vagas / Lotação</h4>
            </div>

            <div class="form-group">
                <label for="cidade_select">Localização:</label>
                <select class="form-control" id="cidade_select" name="cidade" onchange=updateVagas(this) required>
                    <option value="" disabled selected class="text-muted">Escolha uma cidade</option>
                </select>
            </div>
            <div class="form-group">
                <label for="vaga_select">Selecione a vaga:</label>
                <select class="form-control" id="vaga_select" name="cargo" required>
                    <option value="" disabled selected class="text-muted">Escolha uma vaga</option>
                </select>
            </div>
            <div class="form-group">
                <label for="file">Arquivo PDF</label><br>
                <input type="file" class="form-control-file" id="file" name="pdf" required>
            </div>
            <button type="submit" class="btn btn-primary">Inscrever-se</button>
        </form>
    </div>

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

    <script src="/scripts/index.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>

</body>

</html>